/* =============================================================
   ASKIE AUTH — auth.css v4.0
   Layout: Full-screen split — photo left, form right
   Matches design: image panel + clean white form panel
   Font: Inter · Colors: #1563FF blue, #111 dark
   4px grid · Mobile-first · PWA-ready
============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

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

:root {
    --blue:       #1563FF;
    --blue-dk:    #0F4FCC;
    --blue-lt:    #EEF3FF;
    --black:      #111111;
    --white:      #FFFFFF;
    --g50:        #F8F8F8;
    --g100:       #F0F0F0;
    --g200:       #E0E0E0;
    --g300:       #C4C4C4;
    --g400:       #9A9A9A;
    --g500:       #666666;
    --g700:       #333333;
    --g900:       #111111;
    --green:      #16A34A;
    --green-l:    #F0FDF4;
    --red:        #DC2626;
    --red-l:      #FEF2F2;
    --amber:      #D97706;
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
    --sh:   0 1px 4px rgba(0,0,0,.08);
    --sh-md:0 4px 20px rgba(0,0,0,.10);
    --tr:   .15s ease;
    --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
}

html,body{height:100%;-webkit-font-smoothing:antialiased;}

body.askiea-auth-body {
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--white);
    color:var(--g900);
    min-height:100vh;
    min-height:100dvh;
    overflow-x:hidden;
}

/* ════════════════════════════════════════════════════════════
   FULL-SCREEN SPLIT LAYOUT
   ════════════════════════════════════════════════════════════ */
.aa-page {
    display:    flex;
    height:     100vh;
    height:     100dvh;
    overflow:   hidden;
}

/* ── LEFT: Photo panel ───────────────────────────────────────── */
.aa-left {
    width:      48%;
    flex-shrink:0;
    position:   relative;
    overflow:   hidden;
    background: #1a1a2e;
}

/* The photo fills the panel */
.aa-left-img {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    object-fit:cover;
    object-position: center top;
}

/* Dark gradient overlay at bottom for text */
.aa-left-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.10) 50%,
        rgba(0,0,0,.65) 80%,
        rgba(0,0,0,.80) 100%
    );
}

/* Bottom text on photo */
.aa-left-content {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    var(--s10) var(--s8) var(--s8);
    color:      #fff;
    text-align: center;
}
.aa-left-title {
    font-size:      32px;
    font-weight:    800;
    line-height:    1.2;
    margin-bottom:  var(--s3);
    letter-spacing: -.4px;
}
.aa-left-title span { color: var(--blue); }
.aa-left-sub {
    font-size:   15px;
    line-height: 1.6;
    color:       rgba(255,255,255,.85);
    max-width:   420px;
    margin:      0 auto;
}

/* Dots indicator */
.aa-left-dots {
    display:         flex;
    gap:             8px;
    justify-content: center;
    margin-top:      var(--s5);
}
.aa-left-dots span {
    width:         28px;
    height:        4px;
    border-radius: 2px;
    background:    rgba(255,255,255,.4);
}
.aa-left-dots span.active { background: var(--blue); width: 40px; }

/* ── RIGHT: Form panel ───────────────────────────────────────── */
.aa-right {
    flex:           1;
    min-width:      0;
    overflow-y:     auto;
    display:        flex;
    flex-direction: column;
    background:     var(--white);
    padding:        var(--s6) var(--s10);
}

.aa-right-inner {
    flex:       1;
    display:    flex;
    flex-direction: column;
    justify-content:center;
    max-width:  520px;
    width:      100%;
    margin:     0 auto;
    padding:    var(--s8) 0;
}

/* ── Tab switcher (top right) ────────────────────────────────── */
.aa-card-tabs {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             var(--s2);
    margin-bottom:   var(--s8);
}
.aa-tab {
    padding:       8px 20px;
    border-radius: var(--r-xl);
    border:        1.5px solid var(--g200);
    background:    var(--white);
    font-size:     13px;
    font-weight:   600;
    color:         var(--g500);
    cursor:        pointer;
    font-family:   inherit;
    transition:    border-color var(--tr), color var(--tr), background var(--tr);
    white-space:   nowrap;
}
.aa-tab:hover  { border-color: var(--g400); color: var(--g900); }
.aa-tab.active { background: var(--g900); color: var(--white); border-color: var(--g900); }

/* ── Card header ─────────────────────────────────────────────── */
.aa-card-header { margin-bottom: var(--s6); }
.aa-card-title  {
    font-size:      28px;
    font-weight:    800;
    color:          var(--g900);
    letter-spacing: -.4px;
    margin-bottom:  6px;
    line-height:    1.2;
}
.aa-card-sub {
    font-size:  14px;
    color:      var(--g400);
    line-height:1.5;
}

/* ── Form ────────────────────────────────────────────────────── */
.aa-form { display:flex; flex-direction:column; gap: var(--s4); }

.aa-field { display:flex; flex-direction:column; gap: 6px; }
.aa-field label {
    font-size:   13px;
    font-weight: 500;
    color:       var(--g700);
}
.aa-req { color: var(--red); margin-left: 2px; }
.aa-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
}

.aa-field input[type=text],
.aa-field input[type=email],
.aa-field input[type=password],
.aa-field input[type=tel],
.aa-field select {
    padding:       11px var(--s4);
    border:        1.5px solid var(--g200);
    border-radius: var(--r-sm);
    font-size:     14px;
    font-family:   inherit;
    color:         var(--g900);
    background:    var(--white);
    width:         100%;
    height:        46px;
    transition:    border-color var(--tr), box-shadow var(--tr);
    outline:       none;
    -webkit-appearance: none;
}
.aa-field input:focus,
.aa-field select:focus {
    border-color: var(--blue);
    box-shadow:   0 0 0 3px rgba(21,99,255,.10);
}
.aa-field input::placeholder { color: var(--g300); }
.aa-field input.aa-input-error { border-color: var(--red); }

/* Email field with icon */
.aa-input-wrap { position: relative; }
.aa-input-wrap input { padding-left: 42px; }
.aa-input-icon {
    position:   absolute;
    left:       14px;
    top:        50%;
    transform:  translateY(-50%);
    color:      var(--g300);
    display:    flex;
    align-items:center;
    pointer-events: none;
}

/* Password wrapper */
.aa-pw-wrap { position: relative; }
.aa-pw-wrap input { padding-right: 46px; padding-left: 42px; }
.aa-pw-toggle {
    position:   absolute;
    right:      14px;
    top:        50%;
    transform:  translateY(-50%);
    background: none;
    border:     none;
    cursor:     pointer;
    color:      var(--g300);
    padding:    4px;
    display:    flex;
    align-items:center;
    transition: color var(--tr);
    line-height:0;
}
.aa-pw-toggle:hover { color: var(--g700); }
.aa-pw-toggle svg { width: 16px; height: 16px; }

/* Account type select */
.aa-account-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
}
.aa-type-opt {
    position:      relative;
    border:        1.5px solid var(--g200);
    border-radius: var(--r-sm);
    padding:       10px var(--s3);
    cursor:        pointer;
    text-align:    center;
    font-size:     14px;
    font-weight:   500;
    color:         var(--g700);
    transition:    border-color var(--tr), background var(--tr);
    user-select:   none;
    background:    var(--white);
}
.aa-type-opt input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.aa-type-opt:hover { border-color: var(--blue); }
.aa-type-opt.active {
    border-color: var(--blue);
    background:   var(--blue-lt);
    color:        var(--blue);
    font-weight:  600;
}

/* Password strength — 4 bars */
.aa-strength-wrap { display:flex; flex-direction:column; gap:4px; }
.aa-strength-bars { display:flex; gap:4px; height:3px; }
.aa-strength-bar  { flex:1; border-radius:2px; background:var(--g100); transition:background .25s; }
.aa-strength-bar.weak   { background: var(--red); }
.aa-strength-bar.medium { background: var(--amber); }
.aa-strength-bar.strong { background: var(--green); }
.aa-strength-hints { display:flex; flex-direction:column; gap:3px; }
.aa-strength-hint {
    font-size:  11px;
    color:      var(--g300);
    display:    flex;
    align-items:center;
    gap:        6px;
    transition: color var(--tr);
}
.aa-strength-hint::before {
    content:       '';
    width:         80px;
    height:        2px;
    background:    var(--g100);
    border-radius: 1px;
    flex-shrink:   0;
    display:       block;
}
.aa-strength-hint.met { color: var(--g400); }
.aa-strength-hint.met::before { background: var(--green); }

/* Checkbox */
.aa-checkbox-label {
    display:     flex;
    align-items: center;
    gap:         var(--s2);
    font-size:   13px;
    color:       var(--g500);
    cursor:      pointer;
    line-height: 1.4;
}
.aa-checkbox-label input[type=checkbox] {
    width:        16px; height:16px;
    accent-color: var(--blue);
    flex-shrink:  0;
    cursor:       pointer;
}
.aa-checkbox-label a { color:var(--blue); text-decoration:none; }
.aa-checkbox-label a:hover { text-decoration:underline; }

/* Submit button */
.aa-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          52px;
    background:      var(--blue);
    color:           #fff;
    border:          none;
    border-radius:   var(--r-sm);
    font-size:       16px;
    font-weight:     700;
    cursor:          pointer;
    font-family:     inherit;
    letter-spacing:  .2px;
    transition:      background var(--tr), transform var(--tr), box-shadow var(--tr);
    margin-top:      var(--s2);
}
.aa-btn:hover:not(:disabled) { background:var(--blue-dk); transform:translateY(-1px); box-shadow:0 6px 20px rgba(21,99,255,.3); }
.aa-btn:active:not(:disabled){ transform:translateY(0); }
.aa-btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }

/* Switch link */
.aa-switch { text-align:center; font-size:13px; color:var(--g400); margin-top:var(--s3); }
.aa-switch a { color:var(--blue); text-decoration:none; font-weight:600; }
.aa-switch a:hover { text-decoration:underline; }

/* Error / success */
.aa-error,.aa-success{ display:none; padding:var(--s2) var(--s3); border-radius:var(--r-sm); font-size:13px; line-height:1.5; }
.aa-error  { background:var(--red-l);   color:var(--red);   border:1px solid rgba(220,38,38,.15); }
.aa-success{ background:var(--green-l); color:var(--green); border:1px solid rgba(22,163,74,.15); }
.aa-error.show,.aa-success.show{ display:block; }

/* Login extras */
.aa-login-extras { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.aa-forgot { font-size:13px; color:var(--blue); text-decoration:none; font-weight:500; }
.aa-forgot:hover { text-decoration:underline; }

/* Footer */
.aa-footer-links {
    display:flex; align-items:center; gap:var(--s3);
    justify-content:center; padding: var(--s4) 0;
    font-size:12px; color:var(--g300); flex-wrap:wrap;
}
.aa-footer-links a { color:var(--g400); text-decoration:none; }
.aa-footer-links a:hover { color:var(--g900); }
.aa-footer-links span { color:var(--g200); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* Large → narrow left panel */
@media (max-width:1100px){
    .aa-left { width:42%; }
    .aa-right { padding: var(--s6) var(--s8); }
}

/* Tablet → stack */
@media (max-width:768px){
    .aa-page  { flex-direction:column; height:auto; overflow:visible; }

    .aa-left  {
        width:     100%;
        height:    260px;
        flex-shrink:0;
        position:  relative;
    }
    .aa-left-content { padding: var(--s6) var(--s5) var(--s5); }
    .aa-left-title  { font-size:24px; }
    .aa-left-sub    { font-size:13px; display:none; }
    .aa-left-dots   { margin-top: var(--s3); }

    .aa-right {
        padding:         var(--s5) var(--s4) var(--s10);
        overflow-y:      visible;
        min-height:      auto;
    }
    .aa-right-inner  { padding: var(--s4) 0; }
    .aa-card-tabs    { justify-content: center; margin-bottom: var(--s5); }
    .aa-card-title   { font-size:22px; }
}

/* Phone */
@media (max-width:480px){
    .aa-left { height: 220px; }
    .aa-left-title { font-size:20px; }

    .aa-right { padding: var(--s4) var(--s4) var(--s12); }
    .aa-field-row { grid-template-columns:1fr; gap:var(--s3); }
    .aa-login-extras { flex-direction:column; align-items:flex-start; gap:var(--s2); }
    .aa-account-type { grid-template-columns:1fr 1fr; }

    /* Prevent iOS zoom */
    .aa-field input[type=text],
    .aa-field input[type=email],
    .aa-field input[type=password] { font-size:16px; }
    .aa-btn { height:48px; font-size:15px; }
    .aa-card-title { font-size:20px; }
}

/* Very small */
@media (max-width:360px){
    .aa-left { height:180px; }
    .aa-right { padding: var(--s3) var(--s3) var(--s12); }
}

/* ── Error link style (e.g. "Sign in instead", "Forgot password?") ─ */
/* Added: error message actionable links rendered via .html() */
.aa-error-link {
    color:           inherit;
    font-weight:     700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.aa-error-link:hover { opacity: .8; }