/**
 * auth.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Centralised stylesheet for ALL authentication pages:
 *   - login.blade.php
 *   - register.blade.php
 *   - passwords/email.blade.php  (forgot password)
 *   - passwords/reset.blade.php  (reset password)
 *   - verify.blade.php           (email verification)
 *
 * All selectors are namespaced under `.auth-*` to prevent collisions with
 * the rest of the application's front-end styles.
 *
 * Page-specific styles that apply to only ONE page are kept in that blade
 * file's own @push('append-at-header') block.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. PAGE SHELL — full-viewport background + centering wrapper
   ═══════════════════════════════════════════════════════════════════════════ */

body.theme-light,
#page {
    background: #eaeaea !important;
}

.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 16px 60px;
    background: #eaeaea;
}

.auth-card-wrapper {
    position: relative;
    width: 100%;
    max-width: 460px;  /* login / single-field pages */
}

/* Register uses a wider card — override via .auth-card-wrapper--wide */
.auth-card-wrapper--wide {
    max-width: 520px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. LOGO — floats above the card, overlapping its top edge
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-logo-wrap {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin-bottom: -44px;
}

.auth-logo-wrap img {
    width: 108px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. WHITE CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.10);
    padding: 60px 36px 0 36px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. CARD HEADER — title row + language button
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 6px 0 10px;
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    background: #f3eefb;
    color: #5b2385;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.auth-back-link:hover,
.auth-back-link:focus-visible {
    background: #e7dcf6;
    color: #4a1d6e;
}

.auth-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 6px;
}

.auth-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.2;
}

.auth-card-subtitle {
    font-size: 13px;
    color: #888;
    margin: 2px 0 0;
}

.auth-lang-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid #ddd;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.auth-lang-btn:hover {
    border-color: #7c3aed;
    color: #7c3aed;
}

.auth-card-divider {
    border: none;
    border-top: 1.5px solid #ebebeb;
    margin: 10px 0 22px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. FORM FIELDS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Field wrapper */
.auth-field {
    margin-bottom: 14px;
    position: relative;
}

/* Optional label above input */
.auth-field-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
    display: block;
}

/* Text / email / tel / date inputs */
.auth-input {
    width: 100%;
    height: 48px;
    padding: 0 46px 0 16px;
    border: 1.5px solid #d5d5d5;
    border-radius: 10px;
    font-size: 14px;
    color: #222;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

/* Input without a right-side icon */
.auth-input.no-icon {
    padding-right: 16px;
}

.auth-input:focus          { border-color: #7c3aed; }
.auth-input::placeholder   { color: #aaa; font-size: 14px; }
.auth-input.is-invalid     { border-color: #dc3545; }
.auth-input[readonly]      { background: #f5f5f5; color: #777; cursor: default; }

/* Textarea */
.auth-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #d5d5d5;
    border-radius: 10px;
    font-size: 14px;
    color: #222;
    background: #fff;
    outline: none;
    resize: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.auth-textarea:focus        { border-color: #7c3aed; }
.auth-textarea::placeholder { color: #aaa; }
.auth-textarea.is-invalid   { border-color: #dc3545; }

/* Select / dropdown */
.auth-select {
    width: 100%;
    height: 48px;
    padding: 0 40px 0 16px;
    border: 1.5px solid #d5d5d5;
    border-radius: 10px;
    font-size: 14px;
    color: #222;
    background: #fff;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aaa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.auth-select:focus       { border-color: #7c3aed; }
.auth-select.is-invalid  { border-color: #dc3545; }


/* ═══════════════════════════════════════════════════════════════════════════
   6. PASSWORD EYE TOGGLE
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-eye {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #aaa;
    font-size: 17px;
    line-height: 1;
    user-select: none;
}

.auth-eye:hover { color: #666; }


/* ═══════════════════════════════════════════════════════════════════════════
   7. VALIDATION ERROR MESSAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-invalid-msg {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Status / info alerts (e.g. "Reset link sent") */
.auth-status-alert {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    color: #166534;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 18px;
}

.auth-status-alert--warn {
    background: #fff8e1;
    border-color: #f1d27a;
    color: #7a5200;
}

/* Info / instruction text */
.auth-info-text {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 18px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. OTP INLINE ROW (email field + Get OTP button side-by-side)
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-otp-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.auth-otp-row .auth-field {
    flex: 1;
    margin-bottom: 0;
}

.btn-get-otp {
    height: 48px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1.5px solid #d5d5d5;
    background: #f5f5f5;
    color: #444;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

/* "We sent a code to ..." line under the OTP row */
.auth-otp-note {
    margin: -6px 0 14px;
    padding: 8px 12px;
    border-left: 3px solid #1f8a55;
    border-radius: 0 6px 6px 0;
    background: #eaf7f0;
    color: #1b5e3c;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.btn-get-otp:hover    { background: #e8e8e8; border-color: #bbb; }
.btn-get-otp:disabled { opacity: 0.6; cursor: not-allowed; }


/* ═══════════════════════════════════════════════════════════════════════════
   9. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Primary — silver gradient (Sign In / Create Account / Send Link / Reset) */
.auth-btn-primary {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #c8c8c8 0%, #a0a0a0 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-btn-primary:hover {
    background: linear-gradient(135deg, #b0b0b0 0%, #888 100%);
    transform: translateY(-1px);
}

.auth-btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* Outline — secondary action (Join Us Now / Sign In link) */
.auth-btn-outline {
    width: 100%;
    height: 48px;
    border: 1.5px solid #555;
    border-radius: 10px;
    background: transparent;
    color: #333;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-bottom: 4px;
}

.auth-btn-outline:hover { background: #333; color: #fff; }

/* Spinner inside buttons */
.auth-btn-primary .spinner-border,
.btn-get-otp .spinner-border {
    width: 16px;
    height: 16px;
    border-width: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. HELPERS ROW — "Save ID" checkbox + "Forgot Password?" link
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-helpers-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 4px;
}

.auth-check-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    user-select: none;
}

.auth-check-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #7c3aed;
    cursor: pointer;
}

.auth-forgot-link {
    font-size: 13px;
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}

.auth-forgot-link:hover { color: #7c3aed; }


/* ═══════════════════════════════════════════════════════════════════════════
   11. SOCIAL ICONS ROW
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-social-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 14px 0 6px;
}

.auth-social-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    transition: transform 0.2s, box-shadow 0.2s;
}

.auth-social-icon:hover { transform: scale(1.1); color: #fff; }

.auth-social-facebook { background: #1877f2; }
.auth-social-web      { background: #5b21b6; }
.auth-social-whatsapp { background: #e02020; }


/* ═══════════════════════════════════════════════════════════════════════════
   12. DIVIDER — "Not a member yet?" / "Already have an account?"
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-or-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: #999;
    font-size: 12px;
    white-space: nowrap;
}

.auth-or-row::before,
.auth-or-row::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e0e0;
    min-width: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. CARD FOOTER — lavender bar with website URL
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-card-footer {
    background: #e8d5f5;
    margin: 20px -36px 0;
    padding: 11px 36px;
    text-align: center;
    border-radius: 0 0 20px 20px;
}

.auth-card-footer span {
    font-size: 12px;
    color: #7c3aed;
    letter-spacing: 1.5px;
    font-weight: 500;
    font-family: 'Courier New', monospace;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. MYKAD / MYPR SECTION (register page — also used in other KYC flows)
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #ebebeb;
}

.auth-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin: 0;
}

.auth-section-header i { color: #7c3aed; font-size: 16px; }

.auth-mykad-note {
    font-size: 11.5px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: #f8f4ff;
    border-left: 3px solid #7c3aed;
    border-radius: 0 6px 6px 0;
}

/* Two-column grid for side-by-side fields (DOB + Gender) */
.auth-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Small mobile (< 380px) ─────────────────────────────────────────── */
@media (max-width: 380px) {
    .auth-grid-2 { grid-template-columns: 1fr; }
}

/* ── Mobile (< 480px) ───────────────────────────────────────────────── */
@media (max-width: 480px) {
    .auth-card {
        padding: 56px 20px 0 20px;
        border-radius: 16px;
    }

    .auth-card-footer {
        margin: 20px -20px 0;
        padding: 11px 20px;
        border-radius: 0 0 16px 16px;
    }

    .auth-logo-wrap img { width: 90px; }

    .auth-card-wrapper,
    .auth-card-wrapper--wide { max-width: 100%; }

    .auth-or-row { font-size: 11px; }
}

/* ── Tablet (≥ 768px) ───────────────────────────────────────────────── */
@media (min-width: 768px) {
    .auth-card-wrapper      { max-width: 480px; }
    .auth-card-wrapper--wide { max-width: 520px; }
    .auth-shell             { padding: 80px 24px 80px; }
}

/* ── Desktop (≥ 1200px) ─────────────────────────────────────────────── */
@media (min-width: 1200px) {
    .auth-shell { padding: 100px 24px 100px; }
}