/*
 * login-pages.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Shared styles for all login-flow pages:
 *   login.asp, forgot.asp, reset.asp, login2fa.asp
 *
 * Deploy to: /include/styles/login-pages.css
 * Include in: /views/layout/page_home.asp  (once, globally for login pages)
 *
 *   <link rel="stylesheet" href="/include/styles/login-pages.css">
 * ─────────────────────────────────────────────────────────────────────────────
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* ── Reset any .login-area default styles from stylesheet.css ── */
.login-area {
    all: unset;
    display: block;
}

/* ── Full-screen centering overlay ── */
.lp-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
    font-family: 'Outfit', sans-serif;
}

/* ── Glass card ── */
.lp-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: rgba(10,14,30,.72);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 24px;
    padding: 40px 36px 36px;
    box-shadow: 0 32px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
    animation: cardIn .6s cubic-bezier(.16,1,.3,1) both;
    overflow: hidden;
}

    /* Top shimmer line */
    .lp-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    }

/* ── Brand / icon area ── */
.lp-brand {
    text-align: center;
    margin-bottom: 28px;
    animation: fadeUp .5s .05s both;
}

.lp-brand-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    /* Colour set per-page via .lp-brand-logo--blue / --teal etc */
    background: linear-gradient(135deg, #1a73e8, #0d47a1);
    box-shadow: 0 8px 24px rgba(26,115,232,.4);
}

.lp-brand-logo--blue {
    background: linear-gradient(135deg, #1a73e8, #0d47a1) !important;
    box-shadow: 0 8px 24px rgba(26,115,232,.4) !important;
}

.lp-brand-logo--teal {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    box-shadow: 0 8px 24px rgba(8,145,178,.4) !important;
}

.lp-brand-logo--green {
    background: linear-gradient(135deg, #059669, #065f46) !important;
    box-shadow: 0 8px 24px rgba(5,150,105,.4) !important;
}

.lp-brand-logo--purple {
    background: linear-gradient(135deg, #7c3aed, #4c1d95) !important;
    box-shadow: 0 8px 24px rgba(124,58,237,.4) !important;
}

.lp-brand-logo i {
    font-size: 28px;
    color: #fff;
}

.lp-brand-name {
    display: block;
    font-size: 1.45rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -.3px;
    line-height: 1;
}

.lp-brand-sub {
    display: block;
    font-size: .78rem;
    color: rgba(255,255,255,.5);
    margin-top: 4px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* ── Back link (used on forgot, reset, 2fa pages) ── */
.lp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 24px;
    transition: color .2s, gap .2s;
}

    .lp-back:hover {
        color: rgba(255,255,255,.85);
        gap: 10px;
    }

/* ── Info box (used on forgot, reset pages) ── */
.lp-info {
    border-radius: 12px;
    padding: 12px 16px;
    font-size: .81rem;
    line-height: 1.55;
    margin-bottom: 22px;
    animation: fadeUp .5s .1s both;
    /* Default teal — override per-page if needed */
    background: rgba(14,116,144,.15);
    border: 1px solid rgba(14,116,144,.3);
    color: rgba(255,255,255,.75);
}

    .lp-info strong {
        color: #7dd3fc;
        font-weight: 600;
    }

/* ── Error message ── */
.lp-error {
    background: rgba(239,68,68,.15);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 10px;
    padding: 10px 14px;
    color: #fca5a5;
    font-size: .82rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeUp .3s both;
}

/* ── Success message ── */
.lp-success {
    background: rgba(5,150,105,.15);
    border: 1px solid rgba(5,150,105,.3);
    border-radius: 10px;
    padding: 10px 14px;
    color: #6ee7b7;
    font-size: .82rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeUp .3s both;
}

/* ── Form field wrapper ── */
.lp-field {
    margin-bottom: 18px;
    animation: fadeUp .5s both;
}

    .lp-field:nth-child(1) {
        animation-delay: .15s;
    }

    .lp-field:nth-child(2) {
        animation-delay: .20s;
    }

    .lp-field:nth-child(3) {
        animation-delay: .25s;
    }

.lp-field-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 7px;
}

/* ── Label ── */
.lp-label {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    color: rgba(255,255,255,.7);
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 0;
}

/* ── Forgot password link ── */
.lp-forgot {
    font-size: .76rem;
    color: rgba(255,255,255,.8) !important;
    text-decoration: none;
    transition: color .2s;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.35);
    padding-bottom: 1px;
}

    .lp-forgot:hover {
        color: #ffffff !important;
        border-color: rgba(255,255,255,.8);
    }

/* ── Input wrapper (for eye toggle positioning) ── */
.lp-input-wrap {
    position: relative;
}

/* ── Text / email / password inputs ── */
.lp-input {
    width: 100%;
    background: rgba(0,0,0,.45) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 12px !important;
    padding: 13px 16px !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: .92rem !important;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
    box-sizing: border-box;
    caret-color: #60a5fa;
}

    .lp-input::placeholder {
        color: rgba(255,255,255,.4) !important;
    }

    .lp-input:focus {
        background: rgba(0,0,0,.55) !important;
        border-color: rgba(96,165,250,.75) !important;
        box-shadow: 0 0 0 3px rgba(96,165,250,.2) !important;
    }

/* Password eye toggle icon */
.lp-eye {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.8) !important;
    cursor: pointer;
    font-size: 17px;
    transition: color .2s;
    padding: 4px;
    user-select: none;
}

    .lp-eye:hover {
        color: #ffffff !important;
    }

/* Prevent text going under eye icon */
#v_pass {
    padding-right: 44px !important;
}

/* ── Submit button wrapper ── */
.lp-submit-wrap {
    margin-top: 8px;
    animation: fadeUp .5s .3s both;
}

/* ── Primary button ── */
.lp-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, opacity .2s;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    /* Default blue — override via .lp-btn--teal etc */
    background: linear-gradient(135deg, #1a73e8 0%, #1565c0 100%);
    box-shadow: 0 6px 20px rgba(26,115,232,.4);
}

.lp-btn--blue {
    background: linear-gradient(135deg, #1a73e8, #1565c0) !important;
    box-shadow: 0 6px 20px rgba(26,115,232,.4) !important;
}

.lp-btn--teal {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    box-shadow: 0 6px 20px rgba(8,145,178,.4) !important;
}

.lp-btn--green {
    background: linear-gradient(135deg, #059669, #065f46) !important;
    box-shadow: 0 6px 20px rgba(5,150,105,.4) !important;
}

.lp-btn--purple {
    background: linear-gradient(135deg, #7c3aed, #4c1d95) !important;
    box-shadow: 0 6px 20px rgba(124,58,237,.4) !important;
}

.lp-btn--red {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    box-shadow: 0 6px 20px rgba(220,38,38,.35) !important;
}

/* Ensure button text is always white and fully visible */
.lp-btn,
.lp-btn--blue,
.lp-btn--teal,
.lp-btn--green,
.lp-btn--purple,
.lp-btn--red {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

    /* Sheen overlay on button */
    .lp-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 100%);
        pointer-events: none;
    }

    .lp-btn:hover {
        transform: translateY(-2px);
    }

    .lp-btn:active {
        transform: translateY(0);
        opacity: .9;
    }

/* ── Return / secondary link ── */
.lp-return {
    display: block;
    text-align: center;
    color: rgba(255,255,255,.4);
    font-size: .8rem;
    text-decoration: none;
    transition: color .2s;
    padding: 4px;
    animation: fadeUp .5s .4s both;
}

    .lp-return:hover {
        color: rgba(255,255,255,.75);
    }

/* ── Footer note ── */
.lp-footer-note {
    text-align: center;
    margin-top: 22px;
    font-size: .72rem;
    color: rgba(255,255,255,.25);
    letter-spacing: .3px;
    animation: fadeUp .5s .45s both;
}

/* ── Animations ── */
@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(28px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .lp-card {
        padding: 32px 24px 28px;
        border-radius: 20px;
    }

    .lp-brand-name {
        font-size: 1.2rem;
    }
}

/* ── Compact card variant — for pages with more fields (reset.asp etc) ── */
.lp-card--compact {
    max-width: 400px;
    padding: 28px 28px 24px;
}

    .lp-card--compact .lp-brand {
        margin-bottom: 16px;
    }

    .lp-card--compact .lp-brand-logo {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

        .lp-card--compact .lp-brand-logo i {
            font-size: 22px;
        }

    .lp-card--compact .lp-brand-name {
        font-size: 1.2rem;
    }

    .lp-card--compact .lp-field {
        margin-bottom: 12px;
    }

    .lp-card--compact .lp-input {
        padding: 10px 14px !important;
    }

    .lp-card--compact .lp-info {
        padding: 10px 14px;
        font-size: .78rem;
        margin-bottom: 14px;
    }

    .lp-card--compact .lp-submit-wrap {
        margin-top: 4px;
    }

    .lp-card--compact .lp-btn {
        padding: 12px;
    }

/* ── Password strength bars (used on reset.asp) ── */
.lp-strength-bars {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.lp-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,.12);
    transition: background .3s;
}

.lp-strength-label {
    font-size: .72rem;
    color: rgba(255,255,255,.4);
    letter-spacing: .3px;
    transition: color .3s;
}