/* ── Auth pages (Login / Register) ───────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body.auth-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 28% 18%, rgba(34, 199, 165, .20), transparent 42%),
        radial-gradient(circle at 82% 88%, rgba(34, 199, 165, .12), transparent 40%),
        linear-gradient(135deg, #0D1117 0%, #1F2937 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

[dir="rtl"] body.auth-body { font-family: 'Cairo', system-ui, sans-serif; }

/* ── card ── */
.auth-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    padding: 44px 40px 36px;
    width: 100%;
    max-width: 420px;
    position: relative;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 8px;
}

.auth-logo-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #22C7A5, #15A88B);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
}

.auth-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0D1117;
    letter-spacing: -.5px;
}

.auth-subtitle {
    text-align: center;
    color: #64748b;
    font-size: .88rem;
    margin-bottom: 28px;
}

/* ── form ── */
.auth-form .form-label {
    font-size: .82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}

.auth-form .form-control {
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    padding: 10px 14px;
    font-size: .9rem;
    transition: border-color .15s, box-shadow .15s;
}

.auth-form .form-control:focus {
    border-color: #22C7A5;
    box-shadow: 0 0 0 3px rgba(34,199,165,.18);
    outline: none;
}

.auth-form .input-group .form-control { border-radius: 10px !important; }

.btn-auth {
    width: 100%;
    padding: 11px;
    border-radius: 12px;
    background: linear-gradient(135deg, #22C7A5, #15A88B);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    margin-top: 4px;
}

.btn-auth:hover  { opacity: .9; }
.btn-auth:active { transform: scale(.98); }
.btn-auth:disabled { opacity: .6; cursor: not-allowed; }

/* ── divider ── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    color: #cbd5e1;
    font-size: .8rem;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* ── footer link ── */
.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: .85rem;
    color: #64748b;
}

.auth-footer a {
    color: #15A88B;
    font-weight: 600;
    text-decoration: none;
}

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

/* ── error ── */
.auth-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 10px 14px;
    color: #dc2626;
    font-size: .85rem;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* ── lang switcher ── */
.auth-lang {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 6px;
}

[dir="rtl"] .auth-lang { right: auto; left: 16px; }

.auth-lang-btn {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: transparent;
    font-size: .78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all .15s;
}

.auth-lang-btn.active,
.auth-lang-btn:hover {
    border-color: #22C7A5;
    color: #15A88B;
    background: #E6F7F1;
}

/* ── password toggle ── */
.pw-toggle {
    position: relative;
}

.pw-toggle input { padding-inline-end: 42px; }

.pw-toggle-btn {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    transition: color .15s;
}

.pw-toggle-btn:hover { color: #15A88B; }

/* ── strength bar ── */
.pw-strength {
    height: 4px;
    border-radius: 4px;
    background: #e2e8f0;
    margin-top: 6px;
    overflow: hidden;
}

.pw-strength-bar {
    height: 100%;
    border-radius: 4px;
    transition: width .3s, background .3s;
    width: 0;
}

/* ── remember / checkbox ── */
.auth-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: #475569;
    cursor: pointer;
    user-select: none;
}

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

/* ── responsive ── */
@media (max-width: 480px) {
    .auth-card { border-radius: 0; min-height: 100vh; padding: 40px 24px 32px; max-width: 100%; }
    body.auth-body { align-items: flex-start; }
}

/* ── External provider buttons (Google / Apple) ──────────────────────── */
.btn-ext {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1.5px solid #E5E7EB;
    background: #fff;
    color: #111827;
    transition: border-color .15s, transform .1s, background .15s;
    margin-bottom: 10px;
}

.btn-ext:hover  { border-color: #22C7A5; background: #F9FAFB; }
.btn-ext:active { transform: scale(.98); }
.btn-ext i      { font-size: 1.15rem; }

.btn-ext.google { color: #1F2937; }
.btn-ext.google i { color: #EA4335; }     /* Google red 'G' */

.btn-ext.apple {
    background: #0D1117;
    color: #fff;
    border-color: #0D1117;
}
.btn-ext.apple:hover { background: #1F2937; border-color: #1F2937; }
.btn-ext.apple i     { color: #fff; }

/* Inline form so the antiforgery token + provider field stay together */
.btn-ext-form { display: block; margin: 0; padding: 0; }