/* ============================================================
   THEME V4 — login / forgot / OTP / legal pages
   Loaded by authentication/* when the school is on v4. The markup
   is the classic .auth-main > .container > .slideIn (image-area +
   sign-area); this sheet restyles it and colours it per identity
   (html[data-v4-identity]).
   ============================================================ */
html.v4-auth {
    --a-primary: #4f46e5; --a-primary-dark: #3730a3; --a-primary-light: #6366f1;
    --a-bg-1: #0f172a; --a-bg-2: #1e1b4b; --a-glow-1: #6366f1; --a-glow-2: #06b6d4;
    --a-text: #111827; --a-muted: #6b7280; --a-border: #e5e7eb; --a-surface: #ffffff;
    --a-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
html.v4-auth[data-v4-identity="islamic"]   { --a-primary: #059669; --a-primary-dark: #065f46; --a-primary-light: #10b981; --a-bg-1: #022c22; --a-bg-2: #064e3b; --a-glow-1: #10b981; --a-glow-2: #fbbf24; }
html.v4-auth[data-v4-identity="christian"] { --a-primary: #2563eb; --a-primary-dark: #1e3a8a; --a-primary-light: #3b82f6; --a-bg-1: #0b1a3a; --a-bg-2: #1e3a8a; --a-glow-1: #3b82f6; --a-glow-2: #fbbf24; }
html.v4-auth[data-v4-identity="hindu"]     { --a-primary: #ea580c; --a-primary-dark: #9a3412; --a-primary-light: #f97316; --a-bg-1: #3b0d0d; --a-bg-2: #7c2d12; --a-glow-1: #f97316; --a-glow-2: #fbbf24; }

html.v4-auth body { font-family: var(--a-font) !important; -webkit-font-smoothing: antialiased; }
html.v4-auth .auth-main {
    min-height: 100vh !important; display: flex; align-items: center; position: relative; overflow: hidden;
    background: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--a-glow-1) 55%, transparent), transparent 40%),
                radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--a-glow-2) 45%, transparent), transparent 42%),
                linear-gradient(135deg, var(--a-bg-1) 0%, var(--a-bg-2) 100%) !important;
}
html.v4-auth .auth-main::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.9;
    background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.4px); background-size: 22px 22px; }
html.v4-auth[data-v4-identity="islamic"] .auth-main::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1'><path d='M60 4 L116 60 L60 116 L4 60 Z'/><circle cx='60' cy='60' r='20'/><path d='M60 40 L80 60 L60 80 L40 60 Z'/></g></svg>"); background-size: 120px 120px; }
html.v4-auth[data-v4-identity="hindu"] .auth-main::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23fbbf24' stroke-opacity='0.12' stroke-width='1'><circle cx='80' cy='80' r='56'/><circle cx='80' cy='80' r='30'/><path d='M80 24 q14 28 0 56 q-14 -28 0 -56z M80 80 q14 28 0 56 q-14 -28 0 -56z M24 80 q28 -14 56 0 q-28 14 -56 0z M80 80 q28 -14 56 0 q-28 14 -56 0z'/></g></svg>"); background-size: 160px 160px; }
html.v4-auth[data-v4-identity="christian"] .auth-main::before { background-image: radial-gradient(ellipse at 50% -10%, rgba(255,255,255,0.18), transparent 55%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g fill='%23ffffff' fill-opacity='0.08'><polygon points='45,8 48,42 82,45 48,48 45,82 42,48 8,45 42,42'/></g></svg>"); background-size: 100% 100%, 90px 90px; }

html.v4-auth .auth-main .slideIn {
    background: var(--a-surface) !important; border-radius: 22px !important; overflow: hidden; position: relative; z-index: 2;
    box-shadow: 0 40px 80px -24px rgba(2, 6, 23, 0.6), 0 0 0 1px rgba(255,255,255,0.08) !important; margin: 24px auto !important;
}
html.v4-auth .auth-main .image-area {
    background: linear-gradient(160deg, var(--a-primary) 0%, var(--a-primary-dark) 100%) !important; color: #fff !important;
    padding: 44px 28px !important; min-height: 100%; position: relative; overflow: hidden;
}
html.v4-auth .auth-main .image-area::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14); pointer-events: none; }
html.v4-auth .auth-main .image-area h2, html.v4-auth .auth-main .image-area .image-hader h2, html.v4-auth .auth-main .image-area .address p { color: #fff !important; }
html.v4-auth .auth-main .image-area img { border-radius: 16px; background: rgba(255,255,255,0.92); padding: 10px; max-width: 160px; box-shadow: 0 12px 28px -12px rgba(0,0,0,0.5); }
html.v4-auth .auth-main .image-area .f-social-links a { color: #fff !important; background: rgba(255,255,255,0.14) !important; border-radius: 10px !important; width: 36px; height: 36px; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 3px; transition: all .18s ease; }
html.v4-auth .auth-main .image-area .f-social-links a:hover { background: rgba(255,255,255,0.28) !important; transform: translateY(-2px); }
html.v4-auth .auth-main .sign-area { background: var(--a-surface) !important; padding: 44px 40px !important; }
html.v4-auth .auth-main .sign-hader { text-align: center; margin-bottom: 26px !important; }
html.v4-auth .auth-main .sign-hader h2 { color: var(--a-text) !important; font-weight: 800 !important; font-size: 22px !important; letter-spacing: -0.02em; margin-top: 10px !important; }
html.v4-auth .auth-main .sign-hader p, html.v4-auth .auth-main .sign-hader small { color: var(--a-muted) !important; }
html.v4-auth .auth-main .input-group-addon { background: transparent !important; border: 0 !important; color: var(--a-primary) !important; }
html.v4-auth .auth-main .input-group-icon .input-group-addon span.icon { color: var(--a-primary) !important; padding: 11px 14px !important; z-index: 5 !important; }
html.v4-auth .auth-main .form-control, html.v4-auth .auth-main input[type="text"], html.v4-auth .auth-main input[type="password"], html.v4-auth .auth-main input[type="email"] {
    border: 1px solid var(--a-border) !important; border-radius: 12px !important; padding: 12px 14px 12px 44px !important; height: auto !important; font-size: 14px !important; background: #f9fafb !important; color: var(--a-text) !important; box-shadow: none !important; transition: all .18s ease;
}
html.v4-auth .auth-main .form-control:focus { border-color: var(--a-primary) !important; background: #fff !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--a-primary) 16%, transparent) !important; outline: 0; }
html.v4-auth .auth-main label { color: var(--a-muted) !important; font-weight: 600 !important; font-size: 13px !important; }
html.v4-auth .auth-main .btn-round, html.v4-auth .auth-main .btn.btn-round, html.v4-auth .auth-main button[type="submit"], html.v4-auth .auth-main .btn-primary {
    background: linear-gradient(135deg, var(--a-primary) 0%, var(--a-primary-light) 100%) !important; border: 0 !important; color: #fff !important;
    border-radius: 12px !important; padding: 12px 28px !important; font-weight: 700 !important; letter-spacing: 0.2px !important;
    box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--a-primary) 80%, transparent) !important; transition: all .18s ease !important;
}
html.v4-auth .auth-main .btn-round:hover, html.v4-auth .auth-main button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px color-mix(in srgb, var(--a-primary) 90%, transparent) !important; }
html.v4-auth .auth-main .forgot-text a, html.v4-auth .auth-main a { color: var(--a-primary) !important; font-weight: 600 !important; }
html.v4-auth .auth-main .i-checks label, html.v4-auth .auth-main .checkbox label { color: var(--a-muted) !important; font-weight: 500 !important; }
html.v4-auth .auth-main .error, html.v4-auth .auth-main .has-error .error, html.v4-auth .auth-main label.error { color: #dc2626 !important; font-size: 12px !important; }
html.v4-auth .auth-main .alert { border-radius: 12px !important; border: 0 !important; }
html.v4-auth .auth-main .copyright, html.v4-auth .auth-main .footer-text { color: var(--a-muted) !important; font-size: 12px; }
@media (max-width: 767px) { html.v4-auth .auth-main .sign-area { padding: 28px 22px !important; } html.v4-auth .auth-main .image-area { padding: 28px 20px !important; } html.v4-auth .auth-main .slideIn { border-radius: 16px !important; margin: 12px !important; } }