/* AUTH-BUNDLE-V2 : includes .auth__pwtoggle styles */
/* ==========================================================================
   auth.css — Login, Register, My Account
   ==========================================================================

   Register uses the .auth__* classes below (that view was rewritten).
   Login and My Account are restyled through their EXISTING classes, with no
   markup changes, because both are long templates wired to controllers and JS
   and a rewrite risks breaking something invisible.

   Those two pages carry ~186 inline style attributes between them, which beat
   any stylesheet, so the properties they set are overridden with !important.
   That is not a preference — it is the only way in without editing the markup.

   Palette matches the popup, offers zone and affiliate pages: deep plum ink,
   one gold accent, warm paper. The site has been using a different colour
   scheme on every page; this is three more pages joining the same one.
   ========================================================================== */

.auth, .auth *, .auth *::before, .auth *::after { box-sizing: border-box; }

:root {
    --a-ink:    #16092B;
    --a-ink-2:  #2E1259;
    --a-gold:   #E8C86A;
    --a-paper:  #FBF8F3;
    --a-line:   #E4DFEE;
    --a-text:   #1B1233;
    --a-muted:  #574F6B;
    --a-err:    #9B1C1C;
}

/* ==========================================================================
   1. Register (new markup)
   ========================================================================== */

.auth {
    background: var(--a-paper);
    padding: 46px 0 70px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--a-text);
}
.auth__wrap { width: min(560px, 92vw); margin: 0 auto; }

.auth__intro { text-align: center; margin-bottom: 24px; }
.cih-page .auth__intro h1 {
    margin: 0 0 7px;
    font-size: clamp(1.5rem, 3vw, 1.9rem) !important;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--a-text) !important;
}
.auth__intro p { margin: 0; font-size: 15px; color: var(--a-muted); }

.auth__card {
    padding: 30px;
    background: #fff;
    border: 1px solid var(--a-line);
    border-radius: 16px;
    box-shadow: 0 20px 50px -34px rgba(30, 8, 70, .5);
}

.auth__alert {
    margin-bottom: 20px;
    padding: 13px 16px;
    background: #FBEAEA;
    border: 1px solid #F0CFCF;
    border-left: 4px solid #DC2626;
    border-radius: 9px;
    color: var(--a-err);
    font-size: 14px;
}
.auth__alert ul { margin: 6px 0 0; padding-left: 18px; }
.auth__alert li { margin-top: 3px; }

.auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.auth__field { margin-bottom: 16px; }

.auth__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--a-muted);
}

.auth__field input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #DDD5EA;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 16px;   /* 16px stops iOS Safari zooming the page on focus */
    color: var(--a-text);
}
.auth__field input:focus-visible { outline: 2px solid var(--a-ink-2); outline-offset: 1px; }
.auth__field input[aria-invalid="true"] { border-color: #DC2626; background: #FEF6F6; }

/* password field + inline show/hide */
.auth__pw { position: relative; }
.auth__pw input { padding-right: 62px; }

.auth__pwtoggle {
    position: absolute;
    top: 50%; right: 6px;
    transform: translateY(-50%);
    min-height: 36px;
    padding: 8px 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--a-ink-2);
    cursor: pointer;
}
.auth__pwtoggle:hover { background: #F3EFF9; }
.auth__pwtoggle:focus-visible { outline: 2px solid var(--a-ink-2); outline-offset: 1px; }

.auth__hint { margin: 5px 0 0; font-size: 12.5px; color: var(--a-muted); }
.auth__err  { margin: 5px 0 0; font-size: 12.5px; font-weight: 600; color: var(--a-err); }

.auth__btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%;
    min-height: 50px;
    margin-top: 6px;
    padding: 13px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--a-ink-2);
    color: #fff;
    font: inherit;
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease;
}
.auth__btn:hover { background: var(--a-ink); color: #fff; }
.auth__btn:focus-visible { outline: 2px solid #A87C1F; outline-offset: 2px; }

.auth__btn--google {
    margin-top: 0;
    background: #fff;
    color: var(--a-text);
    border: 1px solid var(--a-line);
}
.auth__btn--google:hover { background: #F5F2FB; color: var(--a-text); }

.auth__sep {
    display: flex; align-items: center; gap: 14px;
    margin: 22px 0 16px;
    color: var(--a-muted);
    font-size: 13px;
}
.auth__sep::before, .auth__sep::after {
    content: ""; flex: 1 1 auto; height: 1px; background: var(--a-line);
}

.auth__alt { margin: 20px 0 0; text-align: center; font-size: 14.5px; color: var(--a-muted); }
.auth__alt a { color: var(--a-ink-2); font-weight: 600; }

@media (max-width: 560px) {
    .auth { padding: 28px 0 50px; }
    .auth__card { padding: 22px 18px; border-radius: 14px; }
    .auth__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   2. Login (existing markup, restyled)

   Selectors verified against the live page rather than guessed. The real
   classes are: .login-container, .login-title, .form-content, .form-group,
   .form-input, .form-icon, .form-row, .divider, .links-section, .link-item,
   .google-btn, and the submit is a generic .btn.btn-primary — scoped below so
   this does not repaint every primary button on the site.
   ========================================================================== */

.login-container {
    background: #fff !important;
    border: 1px solid var(--a-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px -34px rgba(30, 8, 70, .5) !important;
    padding: 32px !important;
}

/* The heading was a violet gradient with a short bar under it — two
   decorations doing the same job. */
.login-title {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--a-text) !important;
    color: var(--a-text) !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    letter-spacing: -.02em !important;
}
.login-title::after { display: none !important; }

/* Email and password sat side by side, then a large empty gap before the
   button. One field per line reads faster and removes the gap. */
.login-container .form-row {
    display: block !important;
    margin: 0 !important;
}
.login-container .form-group { margin-bottom: 16px !important; width: 100% !important; }

.login-container .form-input {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px 12px 42px !important;
    border: 1px solid #DDD5EA !important;
    border-radius: 10px !important;
    background: #fff !important;
    /* 16px stops iOS Safari zooming the page when the field is focused */
    font-size: 16px !important;
    color: var(--a-text) !important;
    box-shadow: none !important;
}
.login-container .form-input:focus,
.login-container .form-input:focus-visible {
    border-color: var(--a-ink-2) !important;
    outline: 2px solid var(--a-ink-2) !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}

.login-container .form-icon { color: #9A92AD !important; }

/* Scoped to .login-container so site-wide primary buttons are untouched. */
.login-container .btn.btn-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 50px !important;
    background: var(--a-ink-2) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.login-container .btn.btn-primary:hover { background: var(--a-ink) !important; }

.login-container .google-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 50px !important;
    border: 1px solid var(--a-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--a-text) !important;
    -webkit-text-fill-color: var(--a-text) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.login-container .google-btn:hover { background: #F5F2FB !important; }

.login-container .divider { color: var(--a-muted) !important; font-size: 13px !important; }

.login-container .links-section { margin-top: 18px !important; }
.login-container .link-item {
    color: var(--a-ink-2) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.login-container .link-item:hover { text-decoration: underline !important; }

@media (max-width: 560px) {
    .login-container { padding: 22px 18px !important; border-radius: 14px !important; }
    .login-title { font-size: 22px !important; }
}

/* ==========================================================================
   3. My Account (existing markup, restyled)
   ========================================================================== */

.myacc-link {
    border: 0 !important;
    border-radius: 9px !important;
    padding: 11px 16px !important;
    color: var(--a-muted) !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    background: transparent !important;
}
.myacc-link:hover { background: #F3EFF9 !important; color: var(--a-ink-2) !important; }
.myacc-link.active {
    background: var(--a-ink-2) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.form-border.section-bg2 {
    background: #fff !important;
    border: 1px solid var(--a-line) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: none !important;
}

.my-title-b {
    color: var(--a-text) !important;
    font-size: 16.5px !important;
    font-weight: 650 !important;
    letter-spacing: -.01em !important;
    margin-bottom: 14px !important;
}

.form-label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--a-muted) !important;
    margin-bottom: 6px !important;
}

.form-control.edit-form {
    min-height: 46px !important;
    padding: 11px 14px !important;
    border: 1px solid #DDD5EA !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    color: var(--a-text) !important;
    background: #fff !important;
    box-shadow: none !important;
}
.form-control.edit-form:focus { border-color: var(--a-ink-2) !important; box-shadow: none !important; }
.form-control.edit-form[readonly],
.form-control.edit-form:disabled { background: #F7F5FB !important; color: var(--a-muted) !important; }

/* Save was green and Cancel was blue — two saturated primaries side by side,
   so neither read as the main action. */
.btn.editp-btn1 {
    background: var(--a-ink-2) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 10px !important;
    min-height: 46px !important;
    padding: 11px 22px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.btn.editp-btn1:hover { background: var(--a-ink) !important; }

.btn.editp-btn2 {
    background: #fff !important;
    border: 1px solid var(--a-line) !important;
    color: var(--a-ink-2) !important;
    border-radius: 10px !important;
    min-height: 46px !important;
    padding: 11px 22px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.btn.editp-btn2:hover { background: #F3EFF9 !important; color: var(--a-ink-2) !important; }

/* Wallet balance is the one figure worth emphasising on this page. */
.wallet-content {
    background: linear-gradient(152deg, var(--a-ink) 0%, #23104A 55%, var(--a-ink-2) 100%) !important;
    border-radius: 16px !important;
    color: #fff !important;
    padding: 26px !important;
    border: 0 !important;
}
.wallet-content, .wallet-content * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.wallet-content .wallet-amount,
.wallet-content h2, .wallet-content h3 {
    color: var(--a-gold) !important;
    -webkit-text-fill-color: var(--a-gold) !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    font-variant-numeric: tabular-nums;
}
.wallet_button .btn {
    background: var(--a-gold) !important;
    color: var(--a-ink) !important;
    -webkit-text-fill-color: var(--a-ink) !important;
    border: 0 !important;
    border-radius: 10px !important;
    min-height: 46px !important;
    font-weight: 700 !important;
}

@media (max-width: 780px) {
    .form-border.section-bg2 { padding: 18px !important; }
    .wallet-content { padding: 20px !important; }
    .btn.editp-btn1, .btn.editp-btn2 { width: 100% !important; margin-bottom: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .auth__btn, .login-btn, .myacc-link, .btn.editp-btn1, .btn.editp-btn2 { transition: none !important; }
}


/* --------------------------------------------------------------------------
   My Account — profile table

   The profile is a <table class="table table-bordered"> with <th scope="row">
   for each label and <td> for the value. Bootstrap centres the th text and
   splits the row 50/50, so the labels ended up right-aligned against a wall of
   values with a large empty column on the left.

   Constrained to a label column and a value column, left aligned, with the
   heavy grid replaced by hairline rules between rows.
   -------------------------------------------------------------------------- */

.Myaccount-overview .table.table-bordered {
    width: 100% !important;
    max-width: 640px;
    border: 1px solid var(--a-line) !important;
    border-radius: 12px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    margin-bottom: 0 !important;
}

.Myaccount-overview .table.table-bordered th,
.Myaccount-overview .table.table-bordered td {
    border: 0 !important;
    border-bottom: 1px solid #F1EDF7 !important;
    padding: 13px 16px !important;
    text-align: left !important;
    vertical-align: middle !important;
    background: #fff !important;
}

.Myaccount-overview .table.table-bordered tr:last-child th,
.Myaccount-overview .table.table-bordered tr:last-child td { border-bottom: 0 !important; }

/* Label column: fixed and narrow, so values line up down the page. */
.Myaccount-overview .table.table-bordered th[scope="row"] {
    width: 40% !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--a-muted) !important;
    background: #FBFAFD !important;
}

.Myaccount-overview .table.table-bordered td.my-title-b {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--a-text) !important;
    margin-bottom: 0 !important;
}

.Myaccount-overview .table.table-bordered thead th,
.Myaccount-overview .table.table-bordered thead td {
    background: #F7F4FD !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--a-text) !important;
}

.Myaccount-overview .my-image {
    width: 44px !important; height: 44px !important;
    border-radius: 50% !important; object-fit: cover;
}

/* The Support Pin was a bare Bootstrap .badge.bg-danger — a red blob with no
   label, which reads as an error rather than a value. */
.Myaccount-overview .badge.bg-danger,
.Myaccount-overview .badge.bg-success {
    background: #F7F4FD !important;
    color: var(--a-ink-2) !important;
    border: 1px dashed #CFC4E6 !important;
    font-family: ui-monospace, Menlo, Consolas, monospace !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    padding: 6px 12px !important;
    border-radius: 7px !important;
}

/* The tab column is col-lg-3 with flex-column, so these should stack. Width is
   pinned so a long label does not collapse the sidebar on narrow desktops. */
.Myaccount-overview #v-pills-tab { gap: 4px; }
.Myaccount-overview .myacc-link { width: 100% !important; text-align: left !important; }

@media (max-width: 991px) {
    .Myaccount-overview #v-pills-tab {
        flex-direction: row !important;
        flex-wrap: wrap;
        margin-bottom: 16px;
    }
    .Myaccount-overview .myacc-link { width: auto !important; }
    .Myaccount-overview .table.table-bordered th[scope="row"] { width: 45% !important; }
}