/*
 * ============================================================================
 * GosiliLab v2.0 — صفحه‌ی ورود / تغییر رمز (فاز ۱-الف)
 * ----------------------------------------------------------------------------
 * تمام مقادیر از ds/01-tokens.css. وابسته به gosililab-ds2-components.
 * ریشه: .gl2-root.gl2-auth
 * ============================================================================
 */

/* پوشش کامل صفحه — مستقل از قالب وردپرس */
.gl2-auth {
    min-height: 100vh;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: stretch;
    background: var(--gl2-bg);
}

/* ---- سمت تصویری / برندینگ ---- */
.gl2-auth__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--gl2-space-12) var(--gl2-space-10);
    background:
        radial-gradient(circle at 18% 12%, rgba(60, 193, 171, .35), transparent 42%),
        radial-gradient(circle at 88% 88%, rgba(13, 88, 80, .55), transparent 46%),
        linear-gradient(150deg, var(--gl2-brand-800), var(--gl2-brand-950));
    color: var(--gl2-text-invert);
    overflow: hidden;
}
.gl2-auth__visual::after {
    /* بافت ظریف پس‌زمینه */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
.gl2-auth__brand {
    display: flex;
    align-items: center;
    gap: var(--gl2-space-3);
    position: relative;
}
.gl2-auth__brand-logo {
    height: 88px;
    width: auto;
    display: block;
}
.gl2-auth__brand-mark {
    width: 52px;
    height: 52px;
    border-radius: var(--gl2-radius-lg);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--gl2-fs-2xl);
    font-weight: var(--gl2-fw-black);
    color: var(--gl2-text-invert);
}
.gl2-auth__brand-title    { font-size: var(--gl2-fs-lg); font-weight: var(--gl2-fw-bold); }
.gl2-auth__brand-subtitle { font-size: var(--gl2-fs-sm); color: rgba(255, 255, 255, .7); }

.gl2-auth__headline { position: relative; max-width: 420px; }
.gl2-auth__headline h1 {
    font-size: var(--gl2-fs-3xl);
    line-height: var(--gl2-lh-tight);
    margin-bottom: var(--gl2-space-3);
}
.gl2-auth__headline p {
    font-size: var(--gl2-fs-lg);
    color: rgba(255, 255, 255, .82);
    line-height: var(--gl2-lh-base);
}

.gl2-auth__features {
    position: relative;
    display: grid;
    gap: var(--gl2-space-3);
}
.gl2-auth__feature {
    display: flex;
    align-items: center;
    gap: var(--gl2-space-3);
    padding: var(--gl2-space-3) var(--gl2-space-4);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--gl2-radius-md);
}
.gl2-auth__feature-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--gl2-radius-md);
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gl2-brand-200);
}
.gl2-auth__feature-text strong { display: block; font-size: var(--gl2-fs-md); }
.gl2-auth__feature-text span   { font-size: var(--gl2-fs-sm); color: rgba(255, 255, 255, .7); }

/* ---- سمت فرم ---- */
.gl2-auth__form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gl2-space-10) var(--gl2-space-6);
}
.gl2-auth__card {
    width: 100%;
    max-width: 408px;
    background: var(--gl2-surface);
    border: 1px solid var(--gl2-border);
    border-radius: var(--gl2-radius-xl);
    box-shadow: var(--gl2-shadow-lg);
    padding: var(--gl2-space-8);
}
.gl2-auth__card-head { margin-bottom: var(--gl2-space-6); }
.gl2-auth__kicker {
    display: inline-block;
    font-size: var(--gl2-fs-xs);
    font-weight: var(--gl2-fw-bold);
    color: var(--gl2-brand-600);
    background: var(--gl2-brand-50);
    padding: var(--gl2-space-1) var(--gl2-space-3);
    border-radius: var(--gl2-radius-full);
    margin-bottom: var(--gl2-space-3);
}
.gl2-auth__card-head h2 { margin-bottom: var(--gl2-space-2); }
.gl2-auth__card-head p  { font-size: var(--gl2-fs-sm); color: var(--gl2-text-soft); }

.gl2-auth__row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--gl2-space-5);
}
.gl2-auth__forgot { font-size: var(--gl2-fs-sm); }

.gl2-auth__footnote {
    margin-top: var(--gl2-space-5);
    padding-top: var(--gl2-space-4);
    border-top: 1px solid var(--gl2-border);
    font-size: var(--gl2-fs-xs);
    color: var(--gl2-text-muted);
    text-align: center;
}
.gl2-auth__alert { margin-bottom: var(--gl2-space-5); }

/* ---- کارت وضعیت (لاگین‌شده / نیاز به ورود) ---- */
.gl2-auth--centered {
    grid-template-columns: 1fr;
    place-items: center;
    padding: var(--gl2-space-6);
}
.gl2-auth__status-card {
    width: 100%;
    max-width: 408px;
    text-align: center;
    background: var(--gl2-surface);
    border: 1px solid var(--gl2-border);
    border-radius: var(--gl2-radius-xl);
    box-shadow: var(--gl2-shadow-lg);
    padding: var(--gl2-space-10) var(--gl2-space-8);
}
.gl2-auth__status-mark {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--gl2-space-5);
    border-radius: var(--gl2-radius-lg);
    background: var(--gl2-brand-600);
    color: var(--gl2-text-invert);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--gl2-fs-2xl);
    font-weight: var(--gl2-fw-black);
}
.gl2-auth__status-card h2 { margin-bottom: var(--gl2-space-2); }
.gl2-auth__status-card p  {
    font-size: var(--gl2-fs-sm);
    color: var(--gl2-text-soft);
    margin-bottom: var(--gl2-space-5);
}

/* ============================================================================
 * صفحه‌ی تغییر رمز — اجزای اختصاصی
 * ========================================================================= */
.gl2-auth--single { grid-template-columns: 1fr; place-items: center; padding: var(--gl2-space-6); }
.gl2-auth__card--wide { max-width: 460px; }

.gl2-pw-strength { margin-top: var(--gl2-space-2); }
.gl2-pw-strength__bar {
    height: 6px;
    border-radius: var(--gl2-radius-full);
    background: var(--gl2-gray-200);
    overflow: hidden;
}
.gl2-pw-strength__bar > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: var(--gl2-radius-full);
    transition: width var(--gl2-dur-slow) var(--gl2-ease),
                background var(--gl2-dur-slow) var(--gl2-ease);
}
.gl2-pw-strength__label {
    display: block;
    font-size: var(--gl2-fs-xs);
    color: var(--gl2-text-muted);
    margin-top: var(--gl2-space-1);
}
.gl2-pw-strength[data-level="weak"]   .gl2-pw-strength__bar > span { width: 33%;  background: var(--gl2-danger); }
.gl2-pw-strength[data-level="medium"] .gl2-pw-strength__bar > span { width: 66%;  background: var(--gl2-warning); }
.gl2-pw-strength[data-level="strong"] .gl2-pw-strength__bar > span { width: 100%; background: var(--gl2-success); }

.gl2-pw-rules {
    list-style: none;
    margin: var(--gl2-space-4) 0 var(--gl2-space-5);
    padding: 0;
    display: grid;
    gap: var(--gl2-space-2);
}
.gl2-pw-rules li {
    font-size: var(--gl2-fs-xs);
    color: var(--gl2-text-muted);
    display: flex;
    align-items: center;
    gap: var(--gl2-space-2);
}
.gl2-pw-rules li::before {
    content: "○";
    color: var(--gl2-gray-300);
}
.gl2-pw-rules li[data-ok="1"] { color: var(--gl2-success); }
.gl2-pw-rules li[data-ok="1"]::before { content: "✓"; color: var(--gl2-success); }

.gl2-pw-match {
    font-size: var(--gl2-fs-xs);
    margin-top: var(--gl2-space-1);
    min-height: 1em;
}
.gl2-pw-match[data-state="ok"]   { color: var(--gl2-success); }
.gl2-pw-match[data-state="fail"] { color: var(--gl2-danger); }

/* ============================================================================
 * واکنش‌گرا (Responsive)
 * ========================================================================= */
@media (max-width: 1024px) {
    .gl2-auth { grid-template-columns: 1fr; }
    .gl2-auth__visual {
        padding: var(--gl2-space-8) var(--gl2-space-6);
        min-height: auto;
    }
    .gl2-auth__headline { display: none; }
    .gl2-auth__features { display: none; }
    .gl2-auth__visual {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .gl2-auth__form-side { padding: var(--gl2-space-6) var(--gl2-space-4); }
    .gl2-auth__card { padding: var(--gl2-space-6); border-radius: var(--gl2-radius-lg); }
}