/**
 * NATULIQUE passwordless login widget — styling.
 *
 * Ported from prototype/login.html, whose tokens come from the Academy's src/index.css, so the
 * shop login screen and the Academy read as one product.
 *
 * This REPLACES the previous approach. The old file was layout-only with zero-specificity
 * :where() fallbacks, deliberately inheriting the theme's look (Avada). Academy parity means the
 * opposite: the card owns its appearance. Two consequences worth knowing —
 *
 *   1. EVERY rule is scoped under .nq-pwl. Nothing here may leak into the surrounding page; the
 *      widget is a guest on a themed page it does not own.
 *   2. The buttons no longer carry Avada's .fusion-button classes. Keeping them would have let
 *      the theme's Button options fight these rules, and which side won would vary by site.
 *
 * The font asks for ff-dax-pro (the Academy's face) and falls back to the system stack. The
 * plugin deliberately does NOT enqueue Typekit: it will be used where the site already loads it,
 * and degrade gracefully everywhere else, rather than this widget pulling a third-party
 * stylesheet into someone else's page.
 *
 * Note there is no 100svh centering: the prototype was a standalone page, this renders inside
 * the theme's content column, so the card centres horizontally and lets the page own the rest.
 */

.nq-pwl {
  /* Brand tokens (Academy src/index.css). Scoped to the widget, not :root, so they can't
     collide with theme or other-plugin custom properties. */
  --nq-ink: #5f5347;
  --nq-ink-display: #573119;
  --nq-action: #573119;
  --nq-action-hover: #3f2312;
  --nq-muted: #747474;
  --nq-muted-warm: #9a9588;
  --nq-bg-alt: #f3ede5;
  --nq-surface: #ffffff;
  --nq-accent-ink: #fef7ec;
  --nq-border: #d9d0c3;
  --nq-danger: #b3261e;
  --nq-danger-soft: #fbe9e8;
  --nq-slot-border: #e5d9c9;
  --nq-radius-btn: 0 0 15px 0;
  --nq-shadow: 0 10px 34px rgba(74, 66, 58, 0.09);
  --nq-font: 'ff-dax-pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Form-control metrics, shared by the text inputs and the dial-code chip.
     These MUST stay in one place. The chip is a <span> and the fields are <input>s, and the two
     size themselves by different rules: an <input> is a replaced element the browser pins to
     line-height:normal, while the <span> inherits whatever line-height the theme put on the page.
     Matching only padding and font-size therefore still leaves them different heights, by however
     much the theme's line-height differs from normal. Pinning an explicit line-height on both
     removes the theme from that calculation.

     That alone still wasn't enough, because Avada sets a fixed `height` on form inputs. An
     explicit height beats BOTH our padding and the flex row's default align-items:stretch, so the
     chip and the field kept rendering at different heights however carefully their padding
     matched. Hence --nq-control-height: the height is now stated outright on both controls rather
     than derived on either, which is the only version of this that can't be re-broken by a theme
     update. It carries !important for the same reason — Avada's input selectors outrank ours, and
     this widget is a guest on a page it doesn't own. Keep the exception to these metrics only. */
  --nq-control-font: 17px;
  --nq-control-line: 1.4;
  --nq-control-pad-y: 13px;
  --nq-control-pad-x: 15px;
  --nq-control-height: 52px;

  font-family: var(--nq-font);
  color: var(--nq-ink);
  display: flex;
  justify-content: center;
}

.nq-pwl *,
.nq-pwl *::before,
.nq-pwl *::after { box-sizing: border-box; }

.nq-pwl .nq-pwl-card {
  position: relative; /* anchors the version mark in the corner */
  width: 100%;
  max-width: 560px;
  background: var(--nq-surface);
  border: 1px solid var(--nq-border);
  box-shadow: var(--nq-shadow);
  padding: 46px 44px;
}

/* The plugin version in the card's bottom-right corner: almost invisible, never in the way,
   but legible in a zoomed screenshot when support needs to know which build a shop runs. */
.nq-pwl .nq-pwl-version {
  position: absolute;
  right: 10px;
  bottom: 6px;
  font-size: 10px;
  line-height: 1;
  color: var(--nq-muted-warm);
  opacity: .35;
  pointer-events: none;
  user-select: none;
}

/* The brand mark belongs to the card, not to the page around it: embed the shortcode anywhere
   and the login screen arrives as one component. Height-constrained with width:auto so any
   lockup keeps its aspect ratio; max-width guards a shop that filters in a wider file.

   The bottom margin lives on the .nq-pwl-lockup row rather than on the mark itself, so the
   logo and the country/state label share one baseline gap to the title. */
.nq-pwl .nq-pwl-lockup {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0 13px;
  margin: 0 0 26px;
}

.nq-pwl .nq-pwl-logo {
  display: block;
  height: 54px;
  width: auto;
  max-width: 100%;
  margin: 0;
}

/* The country or state this shop signs people in to — the slot the Academy's own lockup gives
   to "ACADEMY". Typed in per site (Settings → NATULIQUE Passwordless), so it is capitalised and
   letter-spaced here rather than trusting whatever case someone typed.

   margin-top is an optical alignment, not a computed one: it centres the label on the NATULIQUE
   wordmark, which occupies the upper band of the mark above "certified organic beauty". It
   therefore tracks the logo height and is re-stated in the narrow-screen block below. */
.nq-pwl .nq-pwl-locale {
  /* The vertical padding is what makes the divider taller than the text it sits beside, so it
     reads as a rule rather than an underline gone astray. Keep it symmetric: the label stays
     optically centred on the wordmark, and only margin-top needs adjusting with the type size. */
  margin-top: 0;
  padding: 5px 0 5px 18px;
  border-left: 1px solid var(--nq-border);
  min-width: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nq-muted-warm);
}

.nq-pwl .nq-pwl-title {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--nq-ink-display);
}

.nq-pwl .nq-pwl-sub {
  color: var(--nq-muted);
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.45;
}

/* ---- method tabs (only rendered when SMS is enabled) */

.nq-pwl .nq-pwl-tabs {
  display: flex;
  border: 1px solid var(--nq-border);
  margin-bottom: 22px;
}

.nq-pwl .nq-pwl-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 13px 14px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--nq-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}

.nq-pwl .nq-pwl-tab + .nq-pwl-tab { border-left: 1px solid var(--nq-border); }

.nq-pwl .nq-pwl-tab.is-active {
  background: var(--nq-bg-alt);
  color: var(--nq-ink-display);
  box-shadow: inset 0 -2px 0 var(--nq-action);
}

/* ---- fields */

.nq-pwl .nq-pwl-formcol { display: flex; flex-direction: column; gap: 16px; }
.nq-pwl .nq-pwl-field { display: flex; flex-direction: column; gap: 6px; }

.nq-pwl .nq-pwl-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--nq-ink);
}

.nq-pwl .nq-pwl-input {
  width: 100%;
  box-sizing: border-box !important;
  height: var(--nq-control-height) !important;
  min-height: 0 !important;
  padding: var(--nq-control-pad-y) var(--nq-control-pad-x);
  border: 1px solid var(--nq-border);
  border-radius: 0;
  font-size: var(--nq-control-font);
  line-height: var(--nq-control-line);
  font-family: inherit;
  background: var(--nq-surface);
  color: var(--nq-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.nq-pwl .nq-pwl-input:focus {
  outline: none;
  border-color: var(--nq-action);
  box-shadow: 0 0 0 2px rgba(107, 97, 86, .18);
}

/* The shop serves exactly one country (the plugin's "shop country" setting), so the dial code
   is a fixed, unselectable prefix rather than a dropdown. */
.nq-pwl .nq-pwl-phone-row { display: flex; gap: 8px; }

.nq-pwl .nq-pwl-prefix {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box !important;
  height: var(--nq-control-height) !important;
  padding: 0 var(--nq-control-pad-x);
  border: 1px solid var(--nq-border);
  background: var(--nq-bg-alt);
  color: var(--nq-ink);
  font-size: var(--nq-control-font);
  line-height: var(--nq-control-line);
  user-select: none;
}

.nq-pwl .nq-pwl-phone-row .nq-pwl-input { flex: 1; min-width: 0; }

.nq-pwl .nq-pwl-hint { font-size: 14px; line-height: 1.45; color: var(--nq-muted); }

/* The live reading of the typed number ("We’ll text your code to +1 971 258 8022."). Empty
   until there is enough to read, and then it takes the ink colour so it reads as information
   rather than as the hint above it. */
.nq-pwl .nq-pwl-phone-preview { color: var(--nq-ink); }
.nq-pwl .nq-pwl-phone-preview:empty { display: none; }

/* The "Signing you in…" cover for the magic-link return. Shown only while <html> carries
   .nq-pwl-callback (see the inline head script in natulique-passwordless.php); the body is
   hidden beneath it, so it must not inherit from .nq-pwl — hence literal colours (the card's
   cream and ink). */
.nq-pwl-callback-cover {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  align-items: center;
  justify-content: center;
  background: #fefaf9;
  color: #5f5347;
  font: 500 17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- buttons */

.nq-pwl .nq-pwl-btn {
  width: 100%;
  padding: 14px 24px;
  border: 1px solid var(--nq-action);
  border-radius: var(--nq-radius-btn);
  background: var(--nq-action);
  color: var(--nq-accent-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: var(--nq-control-line);
  letter-spacing: 0.015em;
  cursor: pointer;
  transition: background .15s ease;
}

.nq-pwl .nq-pwl-btn:hover:not(:disabled) { background: var(--nq-action-hover); }
.nq-pwl .nq-pwl-btn:disabled { opacity: .55; cursor: default; }

.nq-pwl .nq-pwl-link {
  background: none;
  border: none;
  color: var(--nq-muted-warm);
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
  padding: 4px;
  font-family: inherit;
}

.nq-pwl .nq-pwl-link:hover { color: var(--nq-ink); }

/* ---- email "link sent" step */

.nq-pwl .nq-pwl-sent {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--nq-ink);
  background: var(--nq-bg-alt);
  border: 1px solid var(--nq-border);
  padding: 18px;
}

/* ---- segmented code entry: one transparent input over six painted boxes */

.nq-pwl .nq-pwl-slots {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
  cursor: text;
}

.nq-pwl .nq-pwl-slots-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  padding: 0;
  color: transparent;
  caret-color: transparent;
  /* 16px keeps iOS Safari from zooming the page when it takes focus. */
  font-size: 16px;
}

.nq-pwl .nq-pwl-slot {
  width: 56px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--nq-muted);
  background: #fff;
  border: 1.5px solid var(--nq-slot-border);
  border-radius: 0 0 12px 0;
  transition: border-color .15s ease, color .15s ease;
}

.nq-pwl .nq-pwl-slot.is-filled { color: var(--nq-ink); }
.nq-pwl .nq-pwl-slot.is-active { border-color: var(--nq-action); }
.nq-pwl .nq-pwl-slot-gap { width: 6px; }

/* ---- "how signing in works" guide */

.nq-pwl .nq-pwl-guide {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--nq-border);
}

.nq-pwl .nq-pwl-guide-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--nq-ink-display);
}

.nq-pwl .nq-pwl-steps {
  list-style: none;
  counter-reset: nqstep;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nq-pwl .nq-pwl-steps li {
  counter-increment: nqstep;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--nq-ink);
}

.nq-pwl .nq-pwl-steps li::before {
  content: counter(nqstep);
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--nq-action);
  color: var(--nq-accent-ink);
  font-size: 13px;
  font-weight: 600;
  border-radius: 50%;
  margin-top: 1px;
}

/* The reassurance line under the numbered steps. It needs its own class rather than a margin on
   .nq-pwl-hint, because that class is also worn by the <span> inside the phone field, where the
   parent is a flex column with its own gap and a margin would double the spacing. Leaving it to
   the browser's default <p> margin isn't an option either: the theme resets paragraph margins,
   so the gap would vary by site. 16px matches .nq-pwl-help below it, so the line sits evenly
   between the last step and the "Trouble signing in?" toggle. */
.nq-pwl .nq-pwl-reassure { margin: 16px 0 0; }

.nq-pwl .nq-pwl-help { margin-top: 16px; }

.nq-pwl .nq-pwl-help summary {
  cursor: pointer;
  font-size: 15px;
  color: var(--nq-muted-warm);
  list-style: none;
}

.nq-pwl .nq-pwl-help summary::-webkit-details-marker { display: none; }

.nq-pwl .nq-pwl-help summary::before {
  content: '\25B8';
  display: inline-block;
  margin-right: 6px;
  transition: transform .15s ease;
}

.nq-pwl .nq-pwl-help[open] summary::before { transform: rotate(90deg); }
.nq-pwl .nq-pwl-help summary:hover { color: var(--nq-ink); }

.nq-pwl .nq-pwl-help ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.nq-pwl .nq-pwl-help li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--nq-muted);
}

/* ---- status line (shared by every step, including the magic-link callback) */

.nq-pwl .nq-pwl-msg {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nq-ink);
}

.nq-pwl .nq-pwl-msg:empty { margin: 0; }

.nq-pwl .nq-pwl-msg-error {
  background: var(--nq-danger-soft);
  color: var(--nq-danger);
  border-radius: 8px;
  padding: 12px 14px;
}

/* ---- narrow screens

   Two tiers, because the six code slots are the widest thing in the card and they set the floor.
   The breakpoint moved from 420px to 560px along with the card's max-width: below that the card
   is no longer getting its full width, so the type and the slots should come down with it. */

@media (max-width: 560px) {
  .nq-pwl .nq-pwl-card { padding: 32px 22px; }
  .nq-pwl .nq-pwl-logo { height: 46px; }
  .nq-pwl .nq-pwl-locale { margin-top: 0; padding: 4px 0 4px 14px; font-size: 17px; letter-spacing: 0.17em; }
  .nq-pwl .nq-pwl-title { font-size: 30px; }
  .nq-pwl .nq-pwl-slots { gap: 6px; }
  .nq-pwl .nq-pwl-slot { width: 44px; height: 56px; font-size: 24px; }
}

@media (max-width: 380px) {
  .nq-pwl .nq-pwl-slots { gap: 5px; }
  .nq-pwl .nq-pwl-slot { width: 38px; height: 50px; font-size: 21px; }
}