* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #e3f2fd;
    color: #212121;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
}

.error {
    color: red !important;
    font-size: 0.90rem;
    padding-left: 2px;
}

.has-error {
    border-color: red !important;
}

/* jQuery Validate's error element also gets this class (see the shared
   errorPlacement in CreateAccount/ResetPassword) — .error alone has no
   spacing, so the message sat flush against the input above it. */
.help-block {
    display: block;
    margin-top: 6px;
    line-height: 1.4;
}

/* Login Container */
.login-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
}

/* Login Card */
.login-card {
    background: #ffffff;
    border-radius: 32px;
    padding: 56px 48px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* Logo Section */
.logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
}

.logo-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;    
    position: relative;
    margin-bottom:10px;
}

    .logo-icon-box::before {
        content: '';
        position: absolute;
        inset: -8px;
    }

    .logo-icon-box img {
        width: auto;
        height: 65px;
        object-fit: contain;
        background: #fff;
    }

.logo-text {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
}

.logo-subtitle {
    font-size: 15px;
    color: #757575;
    text-align: center;
    margin-bottom: 24px;
}

.page-title {
    font-size: 22px;
    font-weight: 600;
    color: #212121;
    text-align: center;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

/* Form Styles */
.form-group {
    margin-bottom: 16px;
}

.form-input {
    width: 100%;
    height: 56px;
    padding: 0 20px;
    border: none;
    border-radius: 12px;
    /* White (not #f5f5f5) so every auth screen matches the Login page. Login
       already forced white via its own .field-icon-wrap override; Reset PIN and
       Create Account have no such wrapper, so they were left showing the grey
       fill against the same background image. */
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(17, 12, 46, 0.06);
    color: #212121;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

    .form-input:focus {
        outline: none;
        /* Focus ring PLUS the resting drop shadow — listing only the ring here
           would drop the shadow the moment a field is focused. */
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 4px 20px rgba(17, 12, 46, 0.06);
        background: #ffffff;
        border: 1px solid #8b5cf6;
    }

    .form-input::placeholder {
        color: #9e9e9e;
    }

/* Password Toggle */
.input-wrapper {
    position: relative;
}

/* Hides the browser's own built-in password-reveal/clear button (Edge shows
   one natively on type="password" fields) so it doesn't render on top of
   /next to the custom .password-toggle eye icon. Chrome/Firefox don't
   expose an equivalent selector, but neither renders a competing icon. */
.input-wrapper input[type="password"]::-ms-reveal,
.input-wrapper input[type="password"]::-ms-clear {
    display: none;
}

.password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #757575;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

    .password-toggle:hover {
        color: #212121;
    }

    .password-toggle i {
        font-size: 20px;
    }

/* Forgot Password Link */
.forgot-link {
    font-size: 14px;
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

    .forgot-link:hover {
        color: #8b5cf6;
    }

/* Create Account Link */
.create-account-link {
    font-size: 14px;
    color: #8b5cf6;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

    .create-account-link:hover {
        color: #7c3aed;
        text-decoration: underline;
    }

/* Submit Button */
.submit-btn {
    width: 100%;
    height: 56px;
    background: #8b5cf6;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
    margin-bottom: 15px;
}

    .submit-btn:hover {
        background: #7c3aed;
        box-shadow: 0 12px 32px rgba(139, 92, 246, 0.4);
    }

    .submit-btn:active {
        transform: translateY(0);
    }

    .submit-btn:disabled {
        background: #e0e0e0;
        color: #9e9e9e;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

/* Purple Gradient Button Styles */
.btn-purple {
    width: 100%;
    height: 56px;
    background: #8b5cf6;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
    margin-bottom: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

    .btn-purple:hover {
        background: #7c3aed;
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
        color: white;
    }

    .btn-purple:active {
        transform: translateY(0);
    }

    .btn-purple i {
        font-size: 16px;
    }

/* Responsive Design */
@media (max-width: 576px) {
    body {
        padding: 16px;
    }

    .login-card {
        padding: 40px 28px;
        border-radius: 24px;
    }

    .logo-icon-box {
        width: auto;
        height: auto;
    }

        .logo-icon-box img {
            height: 52px;
            width: auto;
        }

    .page-title {
        font-size: 28px;
    }

    .form-input,
    .submit-btn {
        height: 52px;
    }
}
/* Resend Section */
.resend-section {
    text-align: center;
    font-size: 14px;
    color: #757575;
}

.resend-link {
    color: #8b5cf6;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .resend-link:hover {
        color: #7c3aed;
        text-decoration: underline;
    }

    .resend-link.disabled {
        color: #bdbdbd;
        cursor: not-allowed;
        pointer-events: none;
    }

.timer {
    color: #8b5cf6;
    font-weight: 600;
}

/* Loading State */
.submit-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

    .submit-btn.loading::after {
        content: '';
        width: 16px;
        height: 16px;
        border: 2px solid white;
        border-top-color: transparent;
        border-radius: 50%;
        display: inline-block;
        margin-left: 8px;
        animation: spin 0.6s linear infinite;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Top Alert Messages - Modern Design */
/* Custom Alert Styles */
.custom-alert {
    position: relative;
    background: #fee2e2;
    border-left: 4px solid #ef4444;
    border-radius: 6px;
    padding: 16px 50px 16px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #991b1b;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    transition: all 0.3s;
}

    .custom-alert.success {
        background: #dcfce7;
        border-left-color: #22c55e;
        color: #14532d;
    }

    .custom-alert.warning {
        background: #fef3c7;
        border-left-color: #f59e0b;
        color: #78350f;
    }

    .custom-alert.info {
        background: #dbeafe;
        border-left-color: #3b82f6;
        color: #1e3a8a;
    }

.custom-alert-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 0px;
    align-items: flex-start;
}

.custom-alert.error .custom-alert-icon {
    color: #ef4444;
}

.custom-alert.success .custom-alert-icon {
    color: #22c55e;
}

.custom-alert.warning .custom-alert-icon {
    color: #f59e0b;
}

.custom-alert.info .custom-alert-icon {
    color: #3b82f6;
}

.custom-alert-content {
    flex: 1;
    line-height: 1.5;
}

/* Close button styled like the attachment - simple X */
.custom-alert-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}

    .custom-alert-close:hover {
        opacity: 1;
    }

    .custom-alert-close::before {
        content: '×';
        font-size: 24px;
        font-weight: 300;
    }

/* Alternative using Bootstrap Icons */
.custom-alert-close-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    opacity: 0.6;
    transition: opacity 0.2s;
    font-size: 18px;
}

    .custom-alert-close-icon:hover {
        opacity: 1;
    }

/* Remove border from close button on click/focus */
.top-alert .btn-close:focus,
.top-alert .btn-close:active,
.top-alert .btn-close:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .top-alert .btn-close {
    filter: brightness(1.5);
}

/* Custom Toastr Overrides */
#toast-container > div {
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 18px 24px 18px 60px;
    margin-bottom: 12px;
    border-radius: 8px;
    border-left: 4px solid;
    background-position: 20px center;
    background-size: 24px 24px;
}

    #toast-container > div:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

/* Success Toast */
#toast-container > .toast-success {
    background-color: #d1fae5;
    border-left-color: #10b981;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

    #toast-container > .toast-success .toast-message {
        color: #065f46;
        font-weight: 500;
    }

    #toast-container > .toast-success .toast-title {
        color: #064e3b;
        font-weight: 600;
    }

/* Error Toast */
#toast-container > .toast-error {
    background-color: #fee2e2;
    border-left-color: #ef4444;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E") !important;
}

    #toast-container > .toast-error .toast-message {
        color: #991b1b;
        font-weight: 500;
    }

    #toast-container > .toast-error .toast-title {
        color: #7f1d1d;
        font-weight: 600;
    }

/* Info Toast */
#toast-container > .toast-info {
    background-color: #dbeafe;
    border-left-color: #3b82f6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E") !important;
}

    #toast-container > .toast-info .toast-message {
        color: #1e40af;
        font-weight: 500;
    }

    #toast-container > .toast-info .toast-title {
        color: #1e3a8a;
        font-weight: 600;
    }

/* Warning Toast */
#toast-container > .toast-warning {
    background-color: #fef3c7;
    border-left-color: #f59e0b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
}

    #toast-container > .toast-warning .toast-message {
        color: #92400e;
        font-weight: 500;
    }

    #toast-container > .toast-warning .toast-title {
        color: #78350f;
        font-weight: 600;
    }

/* Remove default close button styling */
#toast-container > div .toast-close-button {
    display: none;
}

/* Progress Bar */
#toast-container > div .toast-progress {
    opacity: 0.3;
}

#toast-container > .toast-success .toast-progress {
    background-color: #10b981;
}

#toast-container > .toast-error .toast-progress {
    background-color: #ef4444;
}

#toast-container > .toast-info .toast-progress {
    background-color: #3b82f6;
}

#toast-container > .toast-warning .toast-progress {
    background-color: #f59e0b;
}

/* Info Message for Verify OTP */
.info-message {
    background: #f3e8ff;
    border-left: 4px solid #8b5cf6;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 32px;
}

.info-message-text {
    font-size: 15px;
    color: #212121;
    line-height: 1.6;
    margin: 0;
}

.info-message-icon {
    color: #8b5cf6;
    font-size: 20px;
    margin-right: 12px;
}

/* OTP Input Fields */
.otp-inputs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 32px;
}

.otp-input {
    width: 56px;
    height: 64px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    /* White to match .form-input on the other auth screens — these sit on the
       same background image, so a grey fill read as inconsistent. */
    background: #ffffff;
    color: #212121;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

    .otp-input:focus {
        outline: none;
        border-color: #8b5cf6;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
    }

    .otp-input::placeholder {
        color: #bdbdbd;
    }

/* 6 fixed 56px boxes + 12px gaps (396px total) overflow the card on narrow phones
   (e.g. a 375px-wide screen only has ~319px free inside the card's padding) —
   the leftmost box gets clipped. Let flexbox shrink each box to fit instead of a
   fixed width, so the row always fits regardless of screen size. */
@media (max-width: 480px) {
    .otp-inputs {
        gap: 6px;
    }

    .otp-input {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 48px;
        height: 52px;
        font-size: 20px;
    }
}

/* Resend Section */
.resend-section {
    text-align: center;
    font-size: 14px;
    color: #757575;
}

.resend-link {
    color: #8b5cf6;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .resend-link:hover {
        color: #7c3aed;
        text-decoration: underline;
    }

    .resend-link.disabled {
        color: #bdbdbd;
        cursor: not-allowed;
        pointer-events: none;
    }

.timer {
    color: #8b5cf6;
    font-weight: 600;
}

/* Back Link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #757575;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
    margin-top: 15px;
}

    .back-link:hover {
        color: #212121;
    }

/* Login Link */
.login-link {
    font-size: 14px;
    color: #8b5cf6;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

    .login-link:hover {
        color: #7c3aed;
        text-decoration: underline;
    }

/* Dark Mode Toastr Overrides */
[data-bs-theme="dark"] #toast-container > .toast-success {
    background-color: #064e3b;
    border-left-color: #34d399;
}

    [data-bs-theme="dark"] #toast-container > .toast-success .toast-message {
        color: #d1fae5;
    }

    [data-bs-theme="dark"] #toast-container > .toast-success .toast-title {
        color: #ecfdf5;
    }

[data-bs-theme="dark"] #toast-container > .toast-success {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

[data-bs-theme="dark"] #toast-container > .toast-error {
    background-color: #7f1d1d;
    border-left-color: #f87171;
}

    [data-bs-theme="dark"] #toast-container > .toast-error .toast-message {
        color: #fee2e2;
    }

    [data-bs-theme="dark"] #toast-container > .toast-error .toast-title {
        color: #fef2f2;
    }

[data-bs-theme="dark"] #toast-container > .toast-error {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E") !important;
}

[data-bs-theme="dark"] #toast-container > .toast-info {
    background-color: #1e3a8a;
    border-left-color: #60a5fa;
}

    [data-bs-theme="dark"] #toast-container > .toast-info .toast-message {
        color: #dbeafe;
    }

    [data-bs-theme="dark"] #toast-container > .toast-info .toast-title {
        color: #eff6ff;
    }

[data-bs-theme="dark"] #toast-container > .toast-info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E") !important;
}

[data-bs-theme="dark"] #toast-container > .toast-warning {
    background-color: #78350f;
    border-left-color: #fbbf24;
}

    [data-bs-theme="dark"] #toast-container > .toast-warning .toast-message {
        color: #fef3c7;
    }

    [data-bs-theme="dark"] #toast-container > .toast-warning .toast-title {
        color: #fefce8;
    }

[data-bs-theme="dark"] #toast-container > .toast-warning {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
}


/* ── Signed-out public header (login page only) ────────────────────────────
   The bar, its hamburger and its off-canvas panel come from landing.css (driven
   by landing.js) so the signed-out chrome matches the landing pages. It carries
   the nav only — no logo, since the card directly below already leads with one.
   Everything here is gated on .login-public-header / .has-public-header, so
   CreateAccount, ResetPassword, VerifyOTP, Terms and Privacy — which share this
   file — are untouched. */

/* MUST be fixed, not landing.css's sticky. This page's body is a centred flex
   container, so an in-flow header becomes a flex item: it shrinks to its content
   width and sits vertically centred beside the card instead of spanning the top.
   Both class names are used so this wins on specificity even if the two
   stylesheets are ever loaded the other way round. */
.lp-desktop-header.login-public-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* One fixed bar height regardless of breakpoint: the nav is ~22px tall but the
   hamburger that replaces it under 900px is 40px, which would otherwise make the
   bar taller on mobile than on desktop and break the clearance below. */
.login-public-header .lp-desktop-header-inner {
    min-height: 64px;
    padding-top: 0;
    padding-bottom: 0;
}

/* With the logo gone the nav is the only in-flow child on desktop and the
   hamburger the only one on mobile, so each needs its own push to the right. */
.login-public-header .lp-hamburger {
    margin-left: auto;
}

/* 64px bar + its 1px border, plus the body's own 20px padding. */
body.has-public-header {
    padding-top: 85px;
}

@media (max-width: 576px) {
    /* The body drops to 16px padding at this width. */
    body.has-public-header {
        padding-top: 81px;
    }
}

/* ── Terms / Privacy consent footer ───────────────────────────────────────
   Shared by the Log in and Create Account cards. Lives here rather than in a
   page's own <style> block so both read identically; it only renders on pages
   that include the markup. */
.legal-consent-footer {
    margin-top: 28px;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: #757575;
}

.legal-consent-link {
    color: #616161;
    font-weight: 600;
    text-decoration: underline;
}

    .legal-consent-link:hover {
        color: #212121;
    }