/* ===== AUTH PAGES ===== */
.auth-page{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    padding:var(--space-xl);
    background:var(--bg-primary);position:relative;
}
.auth-page::before{display:none}
.auth-card{
    width:100%;max-width:420px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);padding:var(--space-3xl);
    position:relative;z-index:1;
}
.auth-header{text-align:center;margin-bottom:var(--space-2xl)}
.auth-header .logo{font-size:var(--text-xl);margin-bottom:var(--space-lg);display:inline-block}
.auth-header h1{font-size:var(--text-2xl);font-weight:500;margin-bottom:var(--space-xs)}
.auth-header p{color:var(--text-muted);font-size:var(--text-sm)}
.auth-footer{text-align:center;margin-top:var(--space-xl);font-size:var(--text-sm);color:var(--text-muted)}
.auth-footer a{color:var(--neutral);font-weight:500}
.auth-footer a:hover{text-decoration:underline}

/* Google OAuth Button */
.btn-google{
    width:100%;padding:.875rem;border:1px solid var(--border);
    border-radius:var(--radius-md);background:var(--bg-elevated);
    color:var(--text-primary);font-weight:500;font-size:var(--text-sm);
    display:flex;align-items:center;justify-content:center;gap:var(--space-sm);
    transition:all .2s;font-family:var(--font);cursor:pointer;
}
.btn-google:hover{border-color:var(--border-hover);background:var(--bg-card)}
.btn-google img{width:18px;height:18px}


/* ===== AUTH TRUST SIGNALS ===== */
.auth-trust {
    text-align: center;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}

.auth-trust p {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
    line-height: 1.6;
}

.auth-trust a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-trust a:hover {
    color: var(--text-primary);
}

.auth-micro-proof {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
    text-align: center;
}


/* ══════════════════════════════════════
   AUTH PAGES — Login/Signup Enhancements
   ══════════════════════════════════════ */

/* Auth card animated golden border sweep */
.auth-card {
    position: relative;
    overflow: hidden;
}
.auth-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, #B8972E, #D4882A, transparent);
    animation: cin-auth-border-sweep 3s ease-in-out infinite;
}
@keyframes cin-auth-border-sweep {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: -100%; }
}

/* Auth card entrance */
.auth-card {
    animation: cin-auth-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes cin-auth-entrance {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Form input golden focus glow */
.auth-card input:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: #B8972E !important;
    box-shadow: 0 0 0 3px rgba(184,135,46,0.15), 0 0 20px rgba(184,135,46,0.08);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ══════════════════════════════════════
   AUTH PAGES — Split-Screen Layout
   ══════════════════════════════════════ */
.auth-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    align-items: stretch;
    padding: 0;
}

/* Left panel — form */
.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl) var(--space-xl);
    background: var(--bg-primary);
}

/* Right panel — visual content */
.auth-visual-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    background: var(--bg-card);
    min-height: 100vh;
    overflow: hidden;
}

/* Headline on visual panel */
.auth-visual-headline {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ivory);
    text-align: center;
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}
.auth-visual-sub {
    font-size: var(--text-base);
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--space-2xl);
    line-height: 1.6;
}

/* Image in visual panel */
.auth-visual-img {
    width: 90%;
    max-width: 560px;
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(184,135,46,0.08);
    object-fit: cover;
    aspect-ratio: 16/9;
}

/* Subtle golden glow behind image */
.auth-visual-panel::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(184,135,46,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.auth-visual-headline,
.auth-visual-sub,
.auth-visual-img {
    position: relative;
    z-index: 1;
}

/* Override card styles in split layout */
.auth-split .auth-card {
    max-width: 400px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    animation: none;
    opacity: 1;
    transform: none;
}
.auth-split .auth-sun-bg {
    display: none;
}
.auth-split .auth-card::after {
    display: none;
}

/* Balanced spacing inside split auth */
.auth-split .auth-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}
.auth-split .auth-header .logo {
    margin-bottom: var(--space-sm);
}
.auth-split .auth-header h1 {
    font-size: var(--text-2xl);
    margin-bottom: 2px;
}
.auth-split .auth-header p {
    font-size: var(--text-xs);
}
.auth-split .form-group {
    margin-bottom: var(--space-lg);
}
.auth-split .form-input {
    padding: 0.85rem var(--space-md);
    font-size: var(--text-sm);
}
.auth-split .form-label {
    margin-bottom: 4px;
}
.auth-split .form-divider {
    margin: var(--space-lg) 0;
}
.auth-split .auth-footer {
    margin-top: var(--space-lg);
}
.auth-split .auth-trust {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
}
.auth-split .auth-trust p {
    font-size: 11px;
    margin-bottom: 2px;
}
.auth-split .forgot-password {
    margin-top: 4px;
    margin-bottom: 0;
    font-size: var(--text-xs);
}
.auth-split .btn-block {
    padding: 0.85rem;
}
.auth-split .btn-google {
    padding: 0.8rem;
    font-size: var(--text-sm);
}

/* Stagger entrance for form elements */
.auth-split .auth-header {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.auth-split .btn-google {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.auth-split .form-divider {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.auth-split .form-group:nth-child(1) {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.auth-split .form-group:nth-child(2) {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.auth-split .form-group:nth-child(3) {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.auth-split .btn-block {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}
.auth-split .auth-footer,
.auth-split .auth-trust {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

/* Visual panel entrance */
.auth-visual-headline {
    animation: cin-auth-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.auth-visual-sub {
    animation: cin-auth-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.auth-visual-img {
    animation: cin-auth-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

/* Enhanced form inputs in split layout */
.auth-split .form-input {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(245,240,232,0.08);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.auth-split .form-input:focus {
    background: rgba(255,255,255,0.05);
}
.auth-split .form-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* Responsive — split auth
   Mobile order is FORM FIRST, image second (matches DOM order — no `order`
   override). The image panel must NOT keep its 100vh: stacked, that made the
   picture eat the entire first screen and pushed every field below the fold.
   Form spacing here is tightened so the Google button clears the fold even on
   an iPhone SE with the Safari address bar showing (~550px usable). */
@media (max-width: 768px) {
    .auth-split {
        grid-template-columns: 1fr;
    }

    /* ── Screen 1: the form ── */
    /* `order` is set EXPLICITLY on both panels: styles/cinematic.css carries a
       stale duplicate of this whole split-auth block whose mobile rule says
       `.auth-visual-panel{order:-1}`. auth.css loads later so it wins ties, but
       a property it simply omits still leaks through. Do not drop these. */
    .auth-form-panel {
        order: 1;
        padding: var(--space-lg) var(--space-lg) var(--space-xl);
    }
    .auth-split .auth-card {
        padding: 0;
    }
    .auth-split .auth-header {
        margin-bottom: var(--space-lg);
    }
    .auth-split .auth-header .logo {
        margin-bottom: var(--space-xs);
    }
    .auth-split .form-group {
        margin-bottom: var(--space-md);
    }
    .auth-split .form-divider {
        margin: var(--space-md) 0;
    }
    .auth-split .auth-footer {
        margin-top: var(--space-md);
    }
    .auth-split .auth-trust {
        margin-top: var(--space-md);
        padding-top: var(--space-sm);
    }

    /* ── Screen 2: the visual ── */
    .auth-visual-panel {
        order: 2;                      /* beats cinematic.css's order:-1 */
        min-height: 0;                 /* was 100vh — the whole bug */
        padding: var(--space-xl) var(--space-lg) var(--space-2xl);
    }
    .auth-visual-headline {
        font-size: var(--text-xl);
    }
    .auth-visual-sub {
        font-size: var(--text-sm);
        margin-bottom: var(--space-lg);
    }
    .auth-visual-img {
        width: 100%;
    }
}

/* Reduced motion — split auth */
@media (prefers-reduced-motion: reduce) {
    .auth-split .auth-header,
    .auth-split .btn-google,
    .auth-split .form-divider,
    .auth-split .form-group,
    .auth-split .btn-block,
    .auth-split .auth-footer,
    .auth-split .auth-trust,
    .auth-visual-headline,
    .auth-visual-sub,
    .auth-visual-img {
        animation: none;
        opacity: 1;
        transform: none;
    }
}