/*
 * SIL Connect — auth screens (login / register) + pricing.
 *
 * SINGLE SOURCE OF TRUTH. The auth blades used to carry their own ~320-line
 * <style> block defining these same classes, which fought this file on
 * specificity and produced a hybrid of two design languages (60px fields from
 * the page, 54px from here; flat #431657 buttons from the page, a #4d1f6a
 * gradient from here). Those local blocks have been removed — edit this file,
 * not the blades.
 *
 * Markup contract: these pages carry live login, registration, OTP and
 * reCAPTCHA flows. Class names below are the ones the blades already ship;
 * renaming one silently unstyles a screen.
 */

:root {
    /* Brand — one purple, one green, one scale. */
    --auth-purple: #431657;
    --auth-purple-deep: #2d0f3a;
    --auth-purple-lift: #5a2072;
    --auth-purple-wash: #f4f0f7;
    --auth-green: #3ba23f;
    --auth-green-deep: #2f8433;

    --auth-ink: #1d1b22;
    --auth-body: #55505f;
    --auth-muted: #86808f;
    --auth-line: #e9e5ee;
    --auth-field: #fbfafc;
    --auth-white: #fff;

    --auth-radius-lg: 26px;
    --auth-radius-md: 14px;
    --auth-control: 56px;

    --auth-shadow: 0 30px 70px -26px rgba(45, 15, 58, 0.30);
    --auth-shadow-btn: 0 12px 26px -10px rgba(67, 22, 87, 0.55);
    --auth-ease: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================
   SHELL
   ==========================================================
   `.auth-page` is set on <body> by the auth blades. This file is linked
   globally via assets/styleLink, so page-level typography MUST stay behind
   that class — a bare `body {}` rule here would restyle the whole site. */
body.auth-page {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    color: var(--auth-ink);
    background-color: #f8f7fa;
}


body .premium-auth-section {
    padding: 64px 0 76px;
    background:
        radial-gradient(circle at 12% 18%, rgba(67, 22, 87, 0.09) 0%, transparent 46%),
        radial-gradient(circle at 88% 12%, rgba(59, 162, 63, 0.09) 0%, transparent 42%),
        linear-gradient(180deg, #faf8fb 0%, #f3f1f6 100%);
}

body .auth-inner-card {
    display: flex;
    min-height: 680px;
    max-width: 1180px;
    margin: 0 auto;
    background: var(--auth-white);
    border: 1px solid rgba(67, 22, 87, 0.07);
    border-radius: var(--auth-radius-lg);
    box-shadow: var(--auth-shadow);
    overflow: hidden;
}

/* ==========================================================
   VISUAL PANEL (left)
   ========================================================== */
body .visual-panel {
    flex: 1.05;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 48px;
    background-size: cover;
    background-position: center;
}

body .visual-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(67, 22, 87, 0.94) 0%, rgba(35, 12, 48, 0.90) 100%);
}

body .glass-info-box {
    position: relative;
    z-index: 2;
    padding: 44px 40px;
    color: var(--auth-white);
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

body .glass-info-box img.p-logo {
    width: 56px;
    height: 56px;
    padding: 6px;
    margin-bottom: 26px;
    background: var(--auth-white);
    border-radius: 14px;
}

body .glass-info-box h1,
body .visual-panel-h1 {
    font-size: 2.7rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.4px;
    color: var(--auth-white);
    margin-bottom: 20px;
}

body .glass-info-box h1 span {
    display: block;
    color: #7fd483;
}

body .glass-info-box .p-subtitle {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 36px;
}

body .feature-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body .f-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

body .f-icon-circle {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #7fd483;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
}

body .f-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--auth-white);
}

/* ==========================================================
   FORM PANEL (right)
   ========================================================== */
body .form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 56px;
}

body .p-form-header { margin-bottom: 34px; }

body .login-icon-box {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.35rem;
    color: var(--auth-purple);
    background: linear-gradient(135deg, #f3edf8 0%, #eae2f2 100%);
    border-radius: 16px;
    box-shadow: 0 6px 16px -6px rgba(67, 22, 87, 0.35);
}

body .p-form-header h2 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.9px;
    color: var(--auth-purple);
    margin-bottom: 8px;
}

body .p-form-header p {
    font-size: 1.02rem;
    color: var(--auth-muted);
    margin: 0;
}

/* ---- Fields ---- */
body .form-label-premium {
    display: block;
    margin-bottom: 9px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b6577;
}

body .form-control-premium {
    width: 100%;
    height: var(--auth-control);
    padding: 0 18px;
    font-size: 15px;
    color: var(--auth-ink);
    background: var(--auth-field);
    border: 1.5px solid var(--auth-line);
    border-radius: var(--auth-radius-md);
    transition: var(--auth-ease);
}

body .form-control-premium::placeholder { color: #b2adbd; }

body .form-control-premium:focus {
    outline: none;
    background: var(--auth-white);
    border-color: var(--auth-purple);
    box-shadow: 0 0 0 4px rgba(67, 22, 87, 0.10);
}

/* ---- Primary action ---- */
body .btn-premium-v2 {
    width: 100%;
    height: var(--auth-control);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--auth-white);
    background: linear-gradient(135deg, var(--auth-purple-lift) 0%, var(--auth-purple-deep) 100%);
    border: none;
    border-radius: var(--auth-radius-md);
    box-shadow: var(--auth-shadow-btn);
    cursor: pointer;
    transition: var(--auth-ease);
}

body .btn-premium-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(67, 22, 87, 0.60);
}

body .btn-premium-v2:focus-visible {
    outline: 3px solid rgba(67, 22, 87, 0.35);
    outline-offset: 2px;
}

/* ---- Divider + footer ---- */
body .p-divider {
    display: flex;
    align-items: center;
    margin: 28px 0;
    color: var(--auth-muted);
    font-weight: 600;
}

body .p-divider::before,
body .p-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--auth-line);
}

body .p-divider span {
    padding: 0 14px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body .p-login-footer {
    text-align: center;
    font-size: 1rem;
    color: var(--auth-muted);
}

body .p-login-footer a,
body .forgot-link {
    color: var(--auth-purple);
    font-weight: 700;
    text-decoration: none;
    transition: var(--auth-ease);
}

body .forgot-link { font-size: 0.9rem; }

body .p-login-footer a { margin-left: 6px; }

body .p-login-footer a:hover,
body .forgot-link:hover { color: var(--auth-green); }

/* reCAPTCHA needs breathing room and must not overflow narrow panels */
body .form-panel .g-recaptcha {
    margin-bottom: 4px;
    transform-origin: 0 0;
}

/* ==========================================================
   PLAIN SHELL — register screens on stock Bootstrap markup
   ========================================================== */
body .auth-plain-wrap {
    padding: 56px 0 72px;
    background:
        radial-gradient(circle at 12% 18%, rgba(67, 22, 87, 0.09) 0%, transparent 46%),
        radial-gradient(circle at 88% 12%, rgba(59, 162, 63, 0.09) 0%, transparent 42%),
        linear-gradient(180deg, #faf8fb 0%, #f3f1f6 100%);
}

body .auth-plain-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 44px;
    background: var(--auth-white);
    border: 1px solid rgba(67, 22, 87, 0.07);
    border-radius: var(--auth-radius-lg);
    box-shadow: var(--auth-shadow);
}

body .auth-plain-head {
    text-align: center;
    margin-bottom: 34px;
}

body .auth-plain-head .auth-plain-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--auth-purple);
    background: linear-gradient(135deg, #f3edf8 0%, #eae2f2 100%);
    border-radius: 16px;
    box-shadow: 0 6px 16px -6px rgba(67, 22, 87, 0.35);
}

body .auth-plain-head h1,
body .auth-plain-head h2 {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: var(--auth-purple);
    margin-bottom: 8px;
}

body .auth-plain-head p {
    font-size: 15px;
    color: var(--auth-muted);
    margin: 0;
}

/* Stock Bootstrap controls inside the card — !important because the theme's
   main.css sets .form-control height/border at equal specificity. */
body .auth-plain-card .form-control,
body .auth-plain-card select.form-control,
body .auth-plain-card .form-select {
    height: 52px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    color: var(--auth-ink) !important;
    background: var(--auth-field) !important;
    border: 1.5px solid var(--auth-line) !important;
    border-radius: var(--auth-radius-md) !important;
    transition: var(--auth-ease);
}

body .auth-plain-card textarea.form-control {
    height: auto !important;
    padding: 14px 18px !important;
}

body .auth-plain-card .form-control:focus,
body .auth-plain-card .form-select:focus {
    outline: none;
    background: var(--auth-white) !important;
    border-color: var(--auth-purple) !important;
    box-shadow: 0 0 0 4px rgba(67, 22, 87, 0.10) !important;
}

body .auth-plain-card label,
body .auth-plain-card .form-label {
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b6577;
}

body .auth-plain-card .ud-btn,
body .auth-plain-card button[type="submit"] {
    height: var(--auth-control);
    font-size: 15px;
    font-weight: 700;
    color: var(--auth-white) !important;
    background: linear-gradient(135deg, var(--auth-purple-lift) 0%, var(--auth-purple-deep) 100%) !important;
    border: none !important;
    border-radius: var(--auth-radius-md) !important;
    box-shadow: var(--auth-shadow-btn);
    transition: var(--auth-ease);
}

body .auth-plain-card .ud-btn:hover,
body .auth-plain-card button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(67, 22, 87, 0.60);
}

/* Validation + required markers used by the register blades */
body .auth-plain-card .error,
body .form-panel .error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #c0392b;
    text-transform: none;
    letter-spacing: 0;
}

body .required-mark,
body .required-label .required-mark { color: #c0392b; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1199.98px) {
    body .auth-inner-card { margin: 0 20px; }
}

@media (max-width: 991.98px) {
    body .premium-auth-section { padding: 28px 0 44px; }
    body .auth-inner-card {
        flex-direction: column;
        min-height: auto;
        border-radius: 22px;
    }
    body .visual-panel { padding: 54px 36px; }
    body .glass-info-box { padding: 34px 28px; }
    body .glass-info-box h1,
    body .visual-panel-h1 { font-size: 2.1rem; }
    body .form-panel { padding: 40px 32px; }
    body .auth-plain-card { padding: 34px 28px; }
}

@media (max-width: 767.98px) {
    /* The visual panel is decorative; drop it so the form leads on mobile. */
    body .visual-panel { display: none; }
    body .auth-inner-card { margin: 0 12px; }
}

@media (max-width: 575.98px) {
    body .premium-auth-section,
    body .auth-plain-wrap { padding: 20px 0 36px; }
    body .form-panel { padding: 30px 20px 28px; }
    body .p-form-header { margin-bottom: 24px; }
    body .p-form-header h2 { font-size: 1.55rem; }
    body .auth-plain-card { padding: 26px 20px; border-radius: 20px; }
    body .auth-plain-head h1,
    body .auth-plain-head h2 { font-size: 1.5rem; }
    body .auth-inner-card { border-radius: 20px; }

    /* reCAPTCHA is a fixed 304px iframe — scale it to fit small panels. */
    body .form-panel .g-recaptcha { transform: scale(0.88); }
}
