/* ═══════════════════════════════════════════════════════════════════════════════
   Paylnz · Login — Apple-refined dark theme
   Place at: css/login.css
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────────── */
:root {
  --gold:          #f1c40f;
  --gold-mid:      #d4a900;
  --gold-dark:     #a57a1f;
  --gold-faint:    rgba(241, 196, 15, .10);
  --gold-ring:     rgba(241, 196, 15, .28);
  --gold-glow:     rgba(241, 196, 15, .18);

  --bg:            #0c0c0c;
  --card-bg:       rgba(20, 20, 20, .82);
  --input-bg:      rgba(255, 255, 255, .055);
  --input-bg-focus:rgba(255, 255, 255, .085);
  --border:        rgba(255, 255, 255, .09);
  --border-focus:  rgba(241, 196, 15, .50);

  --txt-hi:        #f5f5f7;
  --txt-md:        rgba(245, 245, 247, .62);
  --txt-lo:        rgba(245, 245, 247, .35);

  --red:           #ff453a;
  --red-bg:        rgba(255, 69, 58, .12);
  --red-border:    rgba(255, 69, 58, .28);
  --green:         #32d74b;
  --green-bg:      rgba(50, 215, 75, .11);
  --green-border:  rgba(50, 215, 75, .28);

  --radius-card:   22px;
  --radius-input:  12px;
  --radius-btn:    12px;
  --radius-alert:  11px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

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

body {
  font-family:  var(--font);
  background:   var(--bg);
  min-height:   100vh;
  display:      flex;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  color:        var(--txt-hi);
  overflow:     hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Particles (untouched) ───────────────────────────────────────────────────── */
#particles-js {
  position: fixed;
  inset:    0;
  z-index:  0;
}

/* ── Container ───────────────────────────────────────────────────────────────── */
.lp-container {
  position:   relative;
  z-index:    10;
  width:      100%;
  max-width:  400px;
  padding:    0 16px;
  transition: max-width 0.45s var(--ease-out);
}

.lp-container--wide { max-width: 580px; }

/* ── Card ────────────────────────────────────────────────────────────────────── */
.lp-card {
  background:       var(--card-bg);
  backdrop-filter:  blur(48px) saturate(160%);
  -webkit-backdrop-filter: blur(48px) saturate(160%);
  border:           1px solid var(--border);
  border-radius:    var(--radius-card);
  width:            100%;
  overflow:         hidden;
  animation:        lp-card-in 0.65s var(--ease-out) both;
  position:         relative;
}

/* Hairline gold shimmer across top edge */
.lp-card::before {
  content:    '';
  position:   absolute;
  top:        0; left: 20%; right: 20%;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--gold-glow), transparent);
  pointer-events: none;
}

@keyframes lp-card-in {
  from { opacity: 0; transform: translateY(28px) scale(.975); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Card header ─────────────────────────────────────────────────────────────── */
.lp-header {
  text-align:   center;
  padding:      36px 36px 0;
}

.lp-logo {
  font-size:    2rem;
  font-weight:  700;
  letter-spacing: -0.5px;
  background:   linear-gradient(135deg, var(--gold) 0%, var(--gold-mid) 55%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height:  1.1;
  margin-bottom: 6px;
}

.lp-tagline {
  font-size:    0.72rem;
  font-weight:  500;
  color:        var(--txt-lo);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* Thin separator line under header */
.lp-header::after {
  content:    '';
  display:    block;
  width:      32px;
  height:     2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 2px;
  margin:     18px auto 0;
}

/* ── Card body ───────────────────────────────────────────────────────────────── */
.lp-card-body {
  padding: 24px 36px 32px;
}

/* ── Alerts ──────────────────────────────────────────────────────────────────── */
.lp-alert {
  display:      flex;
  align-items:  flex-start;
  gap:          10px;
  padding:      12px 14px;
  border-radius: var(--radius-alert);
  font-size:    0.82rem;
  line-height:  1.55;
  margin-bottom: 18px;
}

.lp-alert i {
  flex-shrink: 0;
  margin-top:  2px;
  font-size:   0.8rem;
}

.lp-alert span { flex: 1; }

.lp-alert--error {
  background:   var(--red-bg);
  border:       1px solid var(--red-border);
  color:        #ff6961;
}
.lp-alert--error i { color: var(--red); }
.lp-alert--error a { color: #ff6961; text-decoration: underline; }

.lp-alert--success {
  background:   var(--green-bg);
  border:       1px solid var(--green-border);
  color:        #4cd964;
}
.lp-alert--success i { color: var(--green); }

/* ── Field & label ───────────────────────────────────────────────────────────── */
.lp-field {
  margin-bottom: 14px;
}

.lp-label {
  display:      block;
  font-size:    0.73rem;
  font-weight:  600;
  color:        var(--txt-md);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.lp-req     { color: var(--gold); font-weight: 700; }
.lp-optional { color: var(--txt-lo); font-weight: 400; font-size: 0.68rem; text-transform: none; letter-spacing: 0; }

/* ── Input wrapper ───────────────────────────────────────────────────────────── */
.lp-input-wrap {
  position:  relative;
  display:   flex;
  align-items: center;
}

.lp-input-icon {
  position:   absolute;
  left:       14px;
  color:      var(--txt-lo);
  font-size:  0.82rem;
  pointer-events: none;
  z-index:    2;
  transition: color 0.2s;
}

.lp-input-wrap:focus-within .lp-input-icon { color: var(--gold); }

.lp-input-wrap input {
  width:         100%;
  height:        46px;
  padding:       0 14px 0 40px;
  background:    var(--input-bg);
  border:        1px solid var(--border);
  border-radius: var(--radius-input);
  color:         var(--txt-hi);
  font-family:   var(--font);
  font-size:     0.9rem;
  font-weight:   400;
  outline:       none;
  transition:    border-color 0.22s, background 0.22s, box-shadow 0.22s;
  -webkit-appearance: none;
  appearance:    none;
}

.lp-input-wrap input::placeholder { color: var(--txt-lo); }

.lp-input-wrap input:focus {
  background:   var(--input-bg-focus);
  border-color: var(--border-focus);
  box-shadow:   0 0 0 3px var(--gold-faint);
}

/* Password field — room for eye button */
.lp-input-wrap--pwd input { padding-right: 44px; }

/* ── Eye toggle ──────────────────────────────────────────────────────────────── */
.lp-eye {
  position:   absolute;
  right:      12px;
  background: none;
  border:     none;
  color:      var(--txt-lo);
  font-size:  0.85rem;
  cursor:     pointer;
  padding:    4px;
  border-radius: 6px;
  transition: color 0.2s;
  line-height: 1;
  display:    flex;
  align-items: center;
}
.lp-eye:hover { color: var(--gold); }

/* ── Inline field error ──────────────────────────────────────────────────────── */
.lp-field-err {
  display:    block;
  font-size:  0.72rem;
  color:      #ff6961;
  margin-top: 4px;
  padding-left: 2px;
  min-height: 0;
  max-height: 0;
  overflow:   hidden;
  opacity:    0;
  transition: max-height 0.25s var(--ease-out), opacity 0.2s;
}
.lp-field-err--visible {
  max-height: 40px;
  opacity:    1;
}

/* ── Remember me row ─────────────────────────────────────────────────────────── */
.lp-row-between {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  margin:          2px 0 20px;
}

/* Custom checkbox */
.lp-remember {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  user-select: none;
}

.lp-remember input[type="checkbox"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.lp-checkbox {
  width:         17px;
  height:        17px;
  border:        1.5px solid var(--border);
  border-radius: 5px;
  background:    var(--input-bg);
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  transition:    border-color 0.2s, background 0.2s;
  position:      relative;
}

.lp-checkbox::after {
  content:   '';
  display:   block;
  width:     5px;
  height:    9px;
  border:    2px solid var(--bg);
  border-top: none;
  border-left: none;
  transform: rotate(42deg) scale(0);
  transition: transform 0.18s var(--ease-spring);
  margin-top: -2px;
}

.lp-remember input:checked ~ .lp-checkbox {
  background:    var(--gold);
  border-color:  var(--gold);
}

.lp-remember input:checked ~ .lp-checkbox::after {
  transform: rotate(42deg) scale(1);
}

.lp-remember:hover .lp-checkbox { border-color: var(--gold); }

.lp-remember-label {
  font-size:  0.8rem;
  color:      var(--txt-md);
  font-weight: 400;
}

/* ── Links ───────────────────────────────────────────────────────────────────── */
.lp-link {
  color:       var(--gold);
  font-size:   0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition:  opacity 0.18s;
  opacity:     0.85;
}
.lp-link:hover { opacity: 1; }

.lp-link--btn {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: var(--font);
  padding:     0;
}

/* ── Primary button ──────────────────────────────────────────────────────────── */
.lp-btn {
  display:      flex;
  align-items:  center;
  justify-content: center;
  width:        100%;
  height:       48px;
  border:       none;
  border-radius: var(--radius-btn);
  font-family:  var(--font);
  font-size:    0.9rem;
  font-weight:  600;
  letter-spacing: 0.01em;
  cursor:       pointer;
  text-decoration: none;
  transition:   transform 0.22s var(--ease-spring), box-shadow 0.22s, filter 0.18s;
  -webkit-appearance: none;
  appearance:   none;
}

.lp-btn--primary {
  background:   linear-gradient(135deg, var(--gold) 0%, var(--gold-mid) 100%);
  color:        #0c0c0c;
  box-shadow:   0 4px 22px var(--gold-glow);
}

.lp-btn--primary:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 28px rgba(241, 196, 15, .38);
  filter:     brightness(1.06);
}

.lp-btn--primary:active {
  transform:  scale(.975) translateY(0);
  box-shadow: 0 2px 10px var(--gold-glow);
}

/* ── Divider ─────────────────────────────────────────────────────────────────── */
.lp-divider {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin:      20px 0;
  color:       var(--txt-lo);
  font-size:   0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lp-divider::before,
.lp-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border);
}

/* ── Google button ───────────────────────────────────────────────────────────── */
.lp-google-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  width:           100%;
  height:          46px;
  background:      rgba(255, 255, 255, .055);
  border:          1px solid var(--border);
  border-radius:   var(--radius-btn);
  color:           var(--txt-md);
  font-family:     var(--font);
  font-size:       0.88rem;
  font-weight:     500;
  text-decoration: none;
  transition:      background 0.2s, border-color 0.2s, color 0.2s, transform 0.22s var(--ease-spring);
  letter-spacing:  0.01em;
}
.lp-google-btn svg { flex-shrink: 0; }
.lp-google-btn:hover {
  background:   rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .18);
  color:        var(--txt-hi);
  transform:    translateY(-1px);
}

/* ── Switch text ─────────────────────────────────────────────────────────────── */
.lp-switch-text {
  text-align:  center;
  font-size:   0.8rem;
  color:       var(--txt-lo);
  margin-top:  20px;
}
.lp-switch-text--mt { margin-top: 14px; }

/* ── 2-column grid (register form) ──────────────────────────────────────────── */
.lp-grid-2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
}

/* ── OTP box ─────────────────────────────────────────────────────────────────── */
.lp-otp-box {
  background:    rgba(255, 255, 255, .035);
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       24px;
  text-align:    center;
  margin-bottom: 18px;
}

.lp-otp-icon {
  font-size:     2rem;
  color:         var(--gold);
  margin-bottom: 12px;
  line-height:   1;
}

.lp-otp-hint {
  font-size:     0.82rem;
  color:         var(--txt-md);
  margin-bottom: 20px;
  line-height:   1.55;
}
.lp-otp-hint strong { color: var(--txt-hi); font-weight: 600; }

.lp-otp-input {
  text-align:     center !important;
  font-family:    "SF Mono", "Fira Mono", "Cascadia Code", monospace !important;
  font-size:      1.45rem !important;
  font-weight:    600 !important;
  letter-spacing: 0.28em !important;
  color:          var(--gold) !important;
  padding-left:   14px !important;  /* override icon padding — OTP has icon */
}

.lp-resend-row {
  margin-top:  16px;
  font-size:   0.76rem;
  color:       var(--txt-lo);
  display:     flex;
  align-items: center;
  justify-content: center;
  flex-wrap:   wrap;
  gap:         4px;
}

#resendOtpBtn         { font-size: 0.76rem; }
#resendOtpBtn[disabled] { color: var(--txt-lo); cursor: not-allowed; opacity: .55; }
#resendCountdown      { font-size: 0.72rem; color: var(--txt-lo); font-variant-numeric: tabular-nums; }

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.lp-footer {
  position:    fixed;
  right:       18px;
  bottom:      12px;
  z-index:     100;
  font-family: var(--font);
  font-size:   0.67rem;
  color:       var(--txt-lo);
  background:  rgba(16, 16, 16, .55);
  backdrop-filter: blur(12px);
  padding:     4px 12px;
  border-radius: 8px;
  border:      1px solid rgba(255, 255, 255, .05);
  letter-spacing: 0.02em;
  transition:  color 0.25s;
}
.lp-footer:hover { color: var(--txt-md); }

/* ── Staggered reveal for fields ─────────────────────────────────────────────── */
@keyframes lp-field-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lp-field:nth-child(1) { animation: lp-field-in 0.45s 0.12s var(--ease-out) both; }
.lp-field:nth-child(2) { animation: lp-field-in 0.45s 0.19s var(--ease-out) both; }
.lp-field:nth-child(3) { animation: lp-field-in 0.45s 0.26s var(--ease-out) both; }
.lp-field:nth-child(4) { animation: lp-field-in 0.45s 0.33s var(--ease-out) both; }

.lp-row-between { animation: lp-field-in 0.45s 0.38s var(--ease-out) both; }
.lp-btn         { animation: lp-field-in 0.45s 0.42s var(--ease-out) both; }
.lp-divider     { animation: lp-field-in 0.45s 0.47s var(--ease-out) both; }
.lp-google-btn  { animation: lp-field-in 0.45s 0.52s var(--ease-out) both; }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile-first, three breakpoints
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Tablet & small desktop: card fits comfortably ──────────────────────────── */
@media (max-width: 640px) {
  /* Card no longer floats — fills safe viewport width */
  .lp-container,
  .lp-container--wide {
    max-width:  100%;
    padding:    0 12px 40px;
  }

  /* Remove the fixed-height centering; let page scroll naturally */
  body {
    justify-content: flex-start;
    align-items:     center;
    padding-top:     max(6vh, 28px);
    overflow-y:      auto;
    overflow-x:      hidden;
  }
}

/* ── Mobile portrait: ≤ 480px ────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Body */
  body {
    padding-top:  max(4vh, 18px);
    padding-left: 0;
    padding-right:0;
  }

  /* Container — edge-to-edge with small gutter */
  .lp-container,
  .lp-container--wide {
    padding: 0 10px 36px;
  }

  /* Card */
  .lp-card {
    border-radius: 16px;
    /* Disable card entrance animation on mobile (reduce motion) */
  }

  /* Header */
  .lp-header        { padding: 26px 20px 0; }
  .lp-logo          { font-size: 1.75rem; }
  .lp-tagline       { font-size: 0.68rem; letter-spacing: 0.07em; }
  .lp-header::after { margin-top: 14px; }

  /* Card body */
  .lp-card-body { padding: 18px 20px 26px; }

  /* Labels */
  .lp-label { font-size: 0.7rem; }

  /* Inputs — larger touch targets */
  .lp-input-wrap input {
    height:    48px;
    font-size: 1rem;           /* prevents iOS auto-zoom on focus */
  }

  /* Eye button — bigger tap area */
  .lp-eye {
    right:   10px;
    padding: 8px;
    font-size: 0.9rem;
  }

  /* 2-col grid → single column on mobile */
  .lp-grid-2 {
    grid-template-columns: 1fr;
    gap:                   0;
  }

  /* Button — tall enough for thumb */
  .lp-btn {
    height:    52px;
    font-size: 0.95rem;
    border-radius: 14px;
  }

  /* Remember-me row — stack vertically if needed */
  .lp-row-between {
    flex-wrap:     wrap;
    margin-bottom: 18px;
    gap:           8px;
  }

  /* Alert text slightly larger for readability */
  .lp-alert       { font-size: 0.84rem; padding: 13px 14px; }

  /* Divider */
  .lp-divider { margin: 18px 0; }

  /* Google button */
  .lp-google-btn {
    height:    50px;
    font-size: 0.92rem;
  }

  /* Switch / footer text */
  .lp-switch-text { font-size: 0.82rem; margin-top: 18px; }

  /* OTP */
  .lp-otp-box     { padding: 20px 16px; }
  .lp-otp-icon    { font-size: 1.8rem; }
  .lp-otp-input   {
    font-size:      1.3rem  !important;
    letter-spacing: 0.22em  !important;
    height:         54px    !important;
  }
  .lp-resend-row  { font-size: 0.78rem; }

  /* Footer pill — reduce size */
  .lp-footer {
    right:      10px;
    bottom:     8px;
    font-size:  0.62rem;
    padding:    3px 10px;
  }

  /* Field errors */
  .lp-field-err { font-size: 0.74rem; }

  /* Reduce stagger animation delays on mobile for snappier feel */
  .lp-field:nth-child(1) { animation-delay: 0.06s; }
  .lp-field:nth-child(2) { animation-delay: 0.10s; }
  .lp-field:nth-child(3) { animation-delay: 0.14s; }
  .lp-field:nth-child(4) { animation-delay: 0.18s; }
  .lp-row-between        { animation-delay: 0.20s; }
  .lp-btn                { animation-delay: 0.22s; }
  .lp-divider            { animation-delay: 0.24s; }
  .lp-google-btn         { animation-delay: 0.26s; }
}

/* ── Very small phones: ≤ 360px ─────────────────────────────────────────────── */
@media (max-width: 360px) {
  body { padding-top: max(3vh, 12px); }

  .lp-container,
  .lp-container--wide { padding: 0 8px 28px; }

  .lp-header    { padding: 20px 16px 0; }
  .lp-logo      { font-size: 1.55rem; }
  .lp-card-body { padding: 16px 16px 22px; }
  .lp-card      { border-radius: 14px; }

  .lp-input-wrap input { height: 46px; }
  .lp-btn              { height: 50px; }
}

/* ── Reduce motion: respect prefers-reduced-motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-delay:      0ms    !important;
    transition-duration:  0.01ms !important;
  }
}

/* ── Prevent iOS input zoom (font-size < 16px triggers it) ──────────────────── */
@supports (-webkit-touch-callout: none) {
  /* iOS only */
  .lp-input-wrap input,
  .lp-otp-input {
    font-size: 16px !important;
  }
}

/* ── Ensure dark stays dark regardless of OS light-mode ─────────────────────── */
@media (prefers-color-scheme: light) {
  body { background: var(--bg); color: var(--txt-hi); }
}