/* ==========================================================================
   QoinPay — Auth (2-column split screen). Navy hero + light form panel.
   ========================================================================== */
:root {
  --primary:#16233f; --primary-dk:#101726; --primary-lt:#24365f;
  --accent:#b8901f; --accent-bright:#c9a227; --accent-deep:#8a6a17; --accent-soft:rgba(184,144,31,.12);
  --success:#157f4a; --success-bg:#eef8f1; --danger:#b3261e; --danger-bg:#fbeceb;
  --surface:#ffffff; --bg:#f2f0ea; --border:#e6e3da; --border-strong:#d6d2c6;
  --text:#1a2236; --text-muted:#5f6a82; --text-faint:#98a1b3;
  --radius:10px; --radius-sm:6px;
  --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
.auth-body {
  min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr;
  font-family:var(--font); color:var(--text); background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
svg { vertical-align:middle; }

/* ---- Left hero ---- */
.auth-hero { position:relative; overflow:hidden; color:#fff; display:flex; }
.auth-hero__bg {
  position:absolute; inset:0;
  background:
    radial-gradient(680px 420px at 12% 8%, rgba(201,162,39,.20), transparent 60%),
    radial-gradient(720px 460px at 88% 96%, rgba(48,80,168,.30), transparent 60%),
    linear-gradient(140deg, #16233f 0%, #101726 55%, #0b1220 100%);
}
.auth-hero__bg::after {
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 60% at 40% 40%, #000 20%, transparent 100%);
  mask-image:radial-gradient(70% 60% at 40% 40%, #000 20%, transparent 100%);
  opacity:.7;
}
.auth-hero__grid {
  position:relative; z-index:1; display:flex; flex-direction:column; width:100%;
  padding:44px clamp(40px, 6vw, 84px); justify-content:space-between;
}
.auth-hero__brand { display:flex; align-items:center; gap:12px; }
.auth-hero__logo { display:block; height:40px; width:auto; }
.auth-hero__content { max-width:520px; }
.auth-hero__eyebrow {
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.9);
}
.auth-hero__eyebrow svg { color:var(--accent-bright); }
.auth-hero__title { font-size:clamp(2.2rem, 4vw, 3.2rem); font-weight:800; line-height:1.08; letter-spacing:-.03em; margin-top:22px; }
.auth-hero__hl { color:#e9c85c; }
.auth-hero__desc { margin-top:18px; font-size:1.02rem; line-height:1.6; color:rgba(255,255,255,.72); }
.auth-hero__features { margin-top:30px; display:flex; flex-direction:column; gap:16px; }
.auth-hero__feature { display:flex; align-items:center; gap:13px; font-size:.98rem; color:rgba(255,255,255,.9); }
.auth-hero__feature-ic {
  width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); color:var(--accent-bright);
}
.auth-hero__footer { font-size:12.5px; color:rgba(255,255,255,.42); }

/* ---- Right form panel ---- */
.auth-panel { display:flex; align-items:center; justify-content:center; padding:40px 24px; background:var(--surface); }
.auth-card { width:100%; max-width:400px; }
.auth-card__head { margin-bottom:26px; }
.auth-card__title { font-size:1.75rem; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.auth-card__sub { color:var(--text-muted); margin-top:6px; font-size:.95rem; }
.auth-error, .auth-ok {
  display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:9px; font-size:13.5px; margin-bottom:18px; border:1px solid;
}
.auth-error { background:var(--danger-bg); color:var(--danger); border-color:rgba(179,38,30,.3); }
.auth-ok { background:var(--success-bg); color:var(--success); border-color:rgba(21,127,74,.3); }

.auth-form { display:flex; flex-direction:column; gap:18px; }
.auth-field label { display:block; font-size:13px; font-weight:650; color:var(--text); margin-bottom:7px; }
.auth-field label .req { color:var(--danger); }
.auth-input-wrap { position:relative; display:flex; align-items:center; }
.auth-input-wrap svg { position:absolute; left:13px; color:var(--text-faint); width:17px; height:17px; }
.auth-input {
  width:100%; height:46px; padding:0 14px 0 42px; border:1px solid var(--border-strong); border-radius:9px;
  background:var(--surface); color:var(--text); font:500 14.5px var(--font);
}
.auth-input.no-icon { padding-left:14px; }
.auth-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.auth-input::placeholder { color:var(--text-faint); }
.auth-remember { display:flex; align-items:center; justify-content:space-between; }
.auth-remember label { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-muted); cursor:pointer; }
.auth-remember input { accent-color:var(--accent); width:16px; height:16px; }
.auth-submit {
  height:48px; width:100%; border:none; border-radius:9px; cursor:pointer;
  background:linear-gradient(135deg,var(--accent-bright),var(--accent-deep)); color:#fff; font:700 15px var(--font);
  display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 6px 20px rgba(184,144,31,.28);
  transition:box-shadow .18s;
}
.auth-submit:hover { box-shadow:0 10px 28px rgba(184,144,31,.42); }
.auth-note { margin-top:22px; font-size:12.5px; color:var(--text-faint); text-align:center; }
.auth-secure { display:inline-flex; align-items:center; gap:6px; }
.auth-links { margin-top:20px; text-align:center; font-size:13.5px; color:var(--text-muted); }
.auth-links a { color:var(--accent-deep); font-weight:600; text-decoration:none; }
.auth-links a:hover { text-decoration:underline; }
.auth-field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
select.auth-input { padding-left:14px; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%); background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%; background-size:5px 5px; background-repeat:no-repeat; }

/* Tablet & below: collapse to a single column, hide the tall hero. */
@media (max-width:900px){
  .auth-body { grid-template-columns:1fr; }
  .auth-hero { display:none; }
  .auth-panel { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 20px; }
  .auth-card { width:100%; max-width:440px; }
}
/* Phones: comfortable spacing, full-width controls, no cramped edges. */
@media (max-width:560px){
  .auth-panel { padding:24px 16px calc(24px + env(safe-area-inset-bottom, 0)); align-items:flex-start; }
  .auth-card { max-width:100%; }
  .auth-card__title { font-size:1.5rem; }
  .auth-input, .auth-submit { font-size:16px; }   /* 16px avoids iOS zoom-on-focus */
}
@media (max-width:380px){
  .auth-panel { padding:20px 12px; }
}

/* ==========================================================================
   Mobile auth — the desktop hero is hidden below 900px, which left phones with
   an unbranded white form and a large empty area under the fold. These rules
   give small screens their own branded, compact treatment.
   ========================================================================== */

/* Hidden on desktop; the hero already carries the brand there. */
.auth-mobilebar { display: none; }

@media (max-width: 900px) {
  .auth-mobilebar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px calc(16px + env(safe-area-inset-top, 0px));
    padding-top: max(16px, env(safe-area-inset-top, 16px));
    background: linear-gradient(135deg, #0a1f44 0%, #16233f 60%, #0d1b34 100%);
    position: relative; overflow: hidden;
  }
  /* Faint grid, echoing the desktop hero so the brand reads consistently. */
  .auth-mobilebar::after {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(70% 120% at 20% 0%, #000 10%, transparent 100%);
    mask-image: radial-gradient(70% 120% at 20% 0%, #000 10%, transparent 100%);
  }
  .auth-mobilebar__logo { position: relative; z-index: 1; height: 30px; width: auto; display: block; }
  .auth-mobilebar__badge {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.88); font-size: 11px; font-weight: 650;
    letter-spacing: .02em; white-space: nowrap;
  }
  .auth-mobilebar__badge svg { color: var(--accent-bright, #d4af37); }

  /* The panel is no longer a full-height void: it sits under the brand band. */
  .auth-panel { min-height: 0; align-items: flex-start; padding: 26px 20px 40px; }
  .auth-body { min-height: 100vh; grid-template-rows: auto 1fr; }
}

@media (max-width: 560px) {
  /* Tighter, more deliberate type — the old sizes read as oversized on a phone. */
  .auth-card__title { font-size: 1.38rem; letter-spacing: -.02em; }
  .auth-card__sub { font-size: .92rem; margin-top: 4px; }
  .auth-field label { font-size: 12.5px; margin-bottom: 6px; }
  .auth-card { display: flex; flex-direction: column; gap: 2px; }

  /* Controls sized for thumbs: 48px targets, 16px text (no iOS zoom). */
  .auth-input { height: 48px; font-size: 16px; }
  .auth-submit { height: 50px; font-size: 15.5px; border-radius: 12px; }

  .auth-panel { padding: 22px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }

  /* Stack side-by-side name fields rather than cramming them. */
  .auth-field-row { grid-template-columns: 1fr; gap: 0; }

  /* Trust line and links read as secondary, not as body copy. */
  .auth-secure { font-size: 11.5px; }
  .auth-links { font-size: 13px; }
}

@media (max-width: 380px) {
  .auth-mobilebar { padding-left: 14px; padding-right: 14px; }
  .auth-mobilebar__badge { display: none; }   /* logo alone at very small widths */
  .auth-card__title { font-size: 1.28rem; }
}