/* ==========================================================================
   FILE: css/waitlist.css
   Wait-list dialog. Tokens only — no raw colours.
========================================================================== */

.wl{
  border:0;
  padding:0;
  background:transparent;
  color:var(--text);
  max-width:min(480px,calc(100vw - 32px));
  width:100%;
  margin:auto;
}

.wl::backdrop{
  background:rgba(1,5,14,.72);
  backdrop-filter:blur(6px);
}

.wl-panel{
  position:relative;
  background:var(--surface-solid);
  border:1px solid var(--line-strong);
  border-radius:20px;
  padding:var(--s5) var(--s4) var(--s4);
  box-shadow:0 40px 90px rgba(1,5,14,.7);
}

.wl-x{
  position:absolute;
  top:14px; right:14px;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text-2);
  cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.wl-x:hover{ color:var(--text); border-color:var(--line-strong); }

.wl-title{
  font-size:var(--t-title);
  line-height:1.15;
  margin:var(--s1) 0 var(--s1);
}

.wl-sub{
  color:var(--text-2);
  font-size:var(--t-body);
  line-height:1.55;
  margin:0 0 var(--s3);
}

/* ---------------------------------------------------------------- FIELDS */

.wl-field{ margin-bottom:var(--s2); }

.wl-field label{
  display:block;
  font-size:var(--t-micro);
  font-weight:600;
  color:var(--text-2);
  margin-bottom:6px;
}

.wl-field input,
.wl-field select{
  width:100%;
  font-family:var(--font);
  font-size:var(--t-body);
  color:var(--text);
  background:var(--bg-raise);
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:12px 14px;
  transition:border-color .15s ease,box-shadow .15s ease;
  appearance:none;
}

.wl-field select{
  cursor:pointer;
  /* room for the chevron drawn below */
  padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
                   linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

.wl-field input::placeholder{ color:var(--text-3); }

.wl-field input:focus,
.wl-field select:focus{
  outline:none;
  border-color:var(--violet-soft);
  box-shadow:0 0 0 3px rgba(139,59,241,.22);
}

/* The dropdown list itself is painted by the OS, which ignores most of the
   above — force a dark palette so it doesn't flash white on Windows. */
.wl-field select option,
.wl-field select optgroup{
  background:var(--surface-solid);
  color:var(--text);
}

/* ------------------------------------------------------------- HONEYPOT */
/* Off-screen rather than display:none — some bots skip hidden inputs. */
.wl-hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

/* ---------------------------------------------------------------- STATES */

.wl-error{
  margin:0 0 var(--s2);
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(240,67,92,.38);
  background:rgba(240,67,92,.10);
  color:#FF9AA9;
  font-size:var(--t-micro);
  line-height:1.45;
}

.wl-submit[disabled]{ opacity:.6; cursor:progress; }

.wl-legal{
  margin:var(--s2) 0 0;
  color:var(--text-3);
  font-size:12px;
  line-height:1.5;
}
.wl-legal a{ color:var(--text-2); text-decoration:underline; }
.wl-legal a:hover{ color:var(--text); }

/* ------------------------------------------------------------ SUCCESS */

.wl-done{ text-align:center; }

.wl-tick{
  width:56px; height:56px;
  margin:0 auto var(--s2);
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(46,212,122,.12);
  border:1px solid rgba(46,212,122,.4);
  color:var(--green);
}
.wl-tick svg{ width:26px; height:26px; }

.wl-done .wl-sub{ margin-bottom:var(--s3); }

/* ------------------------------------------------------------- MOBILE */

@media (max-width:520px){
  .wl-panel{ padding:var(--s4) var(--s3) var(--s3); }
  .wl-title{ font-size:26px; }
}

@media (prefers-reduced-motion:reduce){
  .wl-x,.wl-field input,.wl-field select{ transition:none; }
}