/* Stili condivisi delle pagine di autenticazione (Login, Password dimenticata, Reset password).
   Globale (non scoped) perché usato da più pagine — Login.razor.css copriva solo Login.razor. */

/* ── Auth layout ─────────────────────────────────────── */
.auth-shell {
    min-height: 100vh;
    display: flex;
}

/* Left panel — branding */
.auth-brand {
    display: none;
    width: 42%;
    flex-shrink: 0;
    background: var(--c-black);
    position: relative;
    overflow: hidden;
    padding: 48px;
    flex-direction: column;
    justify-content: space-between;
}

@media (min-width: 1024px) {
    .auth-brand {
        display: flex;
    }
}

.auth-brand__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 20% 80%, rgba(224,0,122,.35) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 80% 20%, rgba(224,0,122,.18) 0%, transparent 60%);
}

.auth-brand__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

.auth-brand__content {
    position: relative;
    z-index: 1;
}

.auth-brand__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

    .auth-brand__logo-mark {
        width: 36px;
        height: 36px;
        background: var(--c-fuxia);
        border-radius: var(--r-md);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .auth-brand__logo-mark svg {
            width: 18px;
            height: 18px;
            fill: var(--c-white);
        }

.auth-brand__logo-text {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-white);
    letter-spacing: -.4px;
}

.auth-brand__headline {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    color: var(--c-white);
    letter-spacing: -1px;
    line-height: 1.15;
    margin-bottom: 20px;
}

    .auth-brand__headline em {
        font-style: normal;
        color: var(--c-fuxia-light);
    }

.auth-brand__sub {
    font-size: 15px;
    color: var(--c-grey-400);
    line-height: 1.7;
    max-width: 340px;
}

/* Stats strip */
.auth-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.auth-stat__value {
    font-size: 26px;
    font-weight: 700;
    color: var(--c-white);
    letter-spacing: -1px;
    line-height: 1;
}

.auth-stat__label {
    font-size: 12px;
    color: var(--c-grey-500);
    margin-top: 3px;
}

/* Testimonial card */
.auth-quote {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    backdrop-filter: blur(4px);
}

.auth-quote__text {
    font-size: 14px;
    color: rgba(255,255,255,.8);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 14px;
}

.auth-quote__author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-quote__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-fuxia);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-white);
}

/* ── Right panel — form ─── */
.auth-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: var(--surface-bg);
    overflow-y: auto;
}

.auth-card {
    width: 100%;
    max-width: 440px;
}

/* Mobile logo */
.auth-mobile-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 32px;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .auth-mobile-logo {
        display: none;
    }
}

.auth-mobile-logo__mark {
    width: 32px;
    height: 32px;
    background: var(--c-fuxia);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .auth-mobile-logo__mark svg {
        width: 16px;
        height: 16px;
        fill: var(--c-white);
    }

.auth-mobile-logo__text {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-black);
    letter-spacing: -.4px;
}

/* Tab switcher */
.auth-tabs {
    display: flex;
    background: var(--c-grey-100);
    border-radius: var(--r-pill);
    padding: 3px;
    margin-bottom: 32px;
}

.auth-tab {
    flex: 1;
    padding: 8px;
    border-radius: var(--r-pill);
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-grey-500);
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base), box-shadow var(--t-base);
}

    .auth-tab.active {
        background: var(--c-white);
        color: var(--c-black);
        box-shadow: var(--shadow-xs);
    }

/* Form heading */
.auth-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-black);
    letter-spacing: -.5px;
    margin-bottom: 6px;
}

.auth-subheading {
    font-size: 13.5px;
    color: var(--c-grey-500);
    margin-bottom: 28px;
}

/* Social login buttons */
.btn-social {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 42px;
    border: 1px solid var(--c-grey-300);
    border-radius: var(--r-md);
    background: var(--c-white);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-black);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}

    .btn-social:hover {
        background: var(--c-grey-50);
        border-color: var(--c-grey-400);
    }

/* Divider OR */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: var(--c-grey-400);
    font-size: 12px;
}

    .auth-divider::before,
    .auth-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--c-grey-200);
    }

/* Input with icon */
.input-icon-wrap {
    position: relative;
}

    .input-icon-wrap .form-control {
        padding-left: 38px !important;
    }

    .input-icon-wrap .input-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--c-grey-400);
        font-size: 13px;
        pointer-events: none;
    }

    .input-icon-wrap .input-icon-right {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--c-grey-400);
        font-size: 13px;
        cursor: pointer;
        background: none;
        border: none;
        padding: 4px;
        line-height: 1;
    }

/* CTA button full width */
.btn-auth {
    width: 100%;
    height: 44px;
    font-size: 14px;
    font-weight: 600;
}

/* Step indicator for register */
.step-indicator {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 28px;
}

.step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-grey-200);
    color: var(--c-grey-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background var(--t-base), color var(--t-base);
}

    .step-dot.active {
        background: var(--c-fuxia);
        color: var(--c-white);
    }

    .step-dot.done {
        background: #0a9a5c;
        color: var(--c-white);
    }

.step-line {
    flex: 1;
    height: 2px;
    background: var(--c-grey-200);
}

.step-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--c-grey-500);
    text-align: center;
    margin-top: 4px;
}

/* Footer links */
.auth-footer {
    text-align: center;
    font-size: 12.5px;
    color: var(--c-grey-400);
    margin-top: 32px;
}

    .auth-footer a {
        color: var(--c-fuxia);
        text-decoration: none;
    }

        .auth-footer a:hover {
            text-decoration: underline;
        }