/* ═══════════════════════════════════════════════════════════════════════════
   Customer auth pages — login, register, forgot password, reset.

   The four pages shared a two-panel layout: a photograph on the left and the
   form on the right. The photo carried no information, pushed the form off
   centre, and cost a full-size image download on the one page where a shopper
   is trying to get something done quickly. It is gone; the form is now a
   single centred card.

   Loaded on all four pages, so they stay consistent with one another.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --auth-brand:  #F48721;
    --auth-ink:    #111827;
    --auth-muted:  #6B7280;
    --auth-line:   #E5E7EB;
    --auth-field:  #FCFCFD;
}

/* ── The photo panel, on every page ────────────────────────────────────────*/
.login-image-area,
.auth-image-area { display: none !important; }

/* ── Page ground ───────────────────────────────────────────────────────────*/
.modern-login-section,
.modern-auth-section {
    background: #F7F8FA !important;
    padding: 48px 0 64px !important;
    min-height: auto !important;
}

/* ── The card ──────────────────────────────────────────────────────────────*/
.login-container,
.auth-container {
    display: block !important;
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border: 1px solid var(--auth-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 34px -10px rgba(17, 24, 39, .12),
                0 2px 6px rgba(17, 24, 39, .04) !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

.login-form-area,
.auth-form-area {
    width: 100% !important;
    padding: 38px 34px 34px !important;
    display: block !important;
}

/* ── Heading ───────────────────────────────────────────────────────────────*/
.login-header,
.auth-header { margin-bottom: 26px; text-align: left; }
.login-header h3,
.auth-header h3,
.login-header h2,
.auth-header h2 {
    font-size: 24px; font-weight: 700; color: var(--auth-ink);
    margin: 0 0 6px; line-height: 1.3;
}
.login-header p,
.auth-header p { font-size: 14px; color: var(--auth-muted); margin: 0; line-height: 1.5; }

/* ── Fields ────────────────────────────────────────────────────────────────
   A quiet field that lifts on focus, rather than a heavy bordered box. */
.custom-input-group { margin-bottom: 18px; position: relative; }
.custom-input-group label {
    display: block; font-size: 13px; font-weight: 600; color: #374151;
    margin-bottom: 7px; letter-spacing: .01em;
}
.custom-input,
.login-form-area input[type="text"],
.login-form-area input[type="email"],
.login-form-area input[type="password"],
.login-form-area input[type="tel"],
.auth-form-area input[type="text"],
.auth-form-area input[type="email"],
.auth-form-area input[type="password"],
.auth-form-area input[type="tel"],
.auth-form-area select,
.auth-form-area textarea {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: var(--auth-field);
    border: 1px solid var(--auth-line);
    border-radius: 11px;
    font-size: 14.5px;
    color: var(--auth-ink);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    outline: none;
    box-shadow: none;
}
.auth-form-area textarea { height: auto; min-height: 96px; padding: 12px 14px; }
.custom-input::placeholder,
.auth-form-area input::placeholder { color: #9CA3AF; }

.custom-input:focus,
.login-form-area input:focus,
.auth-form-area input:focus,
.auth-form-area select:focus,
.auth-form-area textarea:focus {
    background: #fff;
    border-color: var(--auth-brand);
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--auth-brand) 16%, transparent);
}
.custom-input.is-invalid,
.auth-form-area .is-invalid { border-color: #DC2626 !important; }
.invalid-feedback, .text-danger { font-size: 12.5px; margin-top: 5px; display: block; }

/* Password reveal sits inside the field, vertically centred. */
.custom-input-group .toggle-password,
.custom-input-group [class*="eye"],
.custom-input-group .password-toggle {
    position: absolute; right: 13px; top: 38px;
    color: #9CA3AF; cursor: pointer; background: none; border: 0; padding: 4px;
    line-height: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────────*/
.btn-modern-submit,
.btn-auth-submit {
    width: 100%;
    height: 50px;
    background: var(--auth-brand) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 11px !important;
    font-size: 15px; font-weight: 700; letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--auth-brand) 55%, transparent);
    transition: filter .16s ease, transform .12s ease;
}
.btn-modern-submit:hover,
.btn-auth-submit:hover { filter: brightness(1.05); color: #fff !important; }
.btn-modern-submit:active,
.btn-auth-submit:active { transform: translateY(1px); }

.btn-resend {
    background: transparent !important;
    color: var(--auth-brand) !important;
    border: 1px solid var(--auth-line) !important;
    border-radius: 10px !important;
    height: 44px; font-size: 14px; font-weight: 600;
}

/* ── Links and the divider under the form ─────────────────────────────────*/
.login-form-area a,
.auth-form-area a { color: var(--auth-brand); text-decoration: none; font-weight: 600; }
.login-form-area a:hover,
.auth-form-area a:hover { text-decoration: underline; }

.login-form-area hr,
.auth-form-area hr { border: 0; border-top: 1px solid var(--auth-line); margin: 26px 0 18px; opacity: 1; }

/* ── Mobile ────────────────────────────────────────────────────────────────
   The card gives up its side margins and softens its corners rather than
   shrinking the type — the form still has to be comfortable to type into. */
@media (max-width: 575.98px) {
    .modern-login-section,
    .modern-auth-section { padding: 20px 0 34px !important; }
    .login-container,
    .auth-container {
        max-width: 100% !important;
        margin: 0 12px !important;
        border-radius: 16px !important;
        box-shadow: 0 6px 20px -8px rgba(17, 24, 39, .10) !important;
    }
    .login-form-area,
    .auth-form-area { padding: 28px 20px 26px !important; }
    .login-header h3, .auth-header h3,
    .login-header h2, .auth-header h2 { font-size: 21px; }
    .custom-input,
    .login-form-area input, .auth-form-area input,
    .auth-form-area select { height: 46px; font-size: 16px; }  /* 16px stops iOS zooming on focus */
    .btn-modern-submit, .btn-auth-submit { height: 48px; }
}

/* Two-column form rows (register) collapse on small screens. */
@media (max-width: 767.98px) {
    .auth-form-area .row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
}

/* The reveal control carries its position as an inline style, so it needs an
   explicit override. Anchored to the field's own centre rather than a fixed
   offset from the group, it stays put whatever the label wraps to. */
.custom-input-group { position: relative !important; }
.custom-input-group span[onclick],
.custom-input-group i.fa-eye,
.custom-input-group i.fa-eye-slash {
    position: absolute !important;
    right: 14px !important;
    top: auto !important;
    bottom: 15px !important;      /* the field is the last thing in the group */
    color: #9CA3AF !important;
    cursor: pointer;
    line-height: 1 !important;
    z-index: 2;
}
.custom-input-group span[onclick] i { position: static !important; }

/* Leave room so long placeholder text never runs under the icon. */
.custom-input-group input[type="password"],
.custom-input-group input[type="text"]#password { padding-right: 44px; }