/**
 * Sign-in and address forms.
 *
 * Separate from frontend.css so a store that uses neither ships neither.
 * Inherits the same token names, so the brand colour and the Leafora theme
 * apply here with no extra work.
 */

/* The account front door and the order screens belong here too.
   ---------------------------------------------------------------------------
   They were left off, and it hid behind their own fallbacks: every var() in
   account.css and orders.css carries one, so the text stayed readable and
   nothing looked broken enough to chase. What was actually lost is the theming.
   With --gms-accent unset, those pages could not follow the shop's brand colour
   at all — they rendered the hardcoded default on every site, which is exactly
   the thing the token exists to prevent.

   Measured on a live order page: --gms-ink, --gms-accent, --gms-line and
   --gms-surface were all unset, while the rest of the storefront had them. */
.gms-auth,
.gms-addr,
.gms-wish-page,
.gms-acct,
.gms-orders {
  --gms-ink:       #14161a;
  --gms-ink-2:     #5b6270;
  --gms-ink-3:     #6b7280;
  --gms-line:      rgba(20, 22, 26, .12);
  --gms-line-2:    rgba(20, 22, 26, .07);
  --gms-surface:   #fff;
  --gms-tint:      #f6f7f9;
  --gms-accent:    var(--gms-brand, #2563eb);
  --gms-accent-ink:var(--gms-brand-ink, #fff);
  --gms-bad:       #b42318;
  --gms-good:      #067647;
  --gms-r:         12px;
  --gms-r-lg:      20px;
  --gms-r-pill:    999px;
  --gms-shadow:    0 1px 2px rgba(16, 24, 40, .04), 0 8px 28px rgba(16, 24, 40, .08);

  font-size: 16px;
  line-height: 1.5;
  color: var(--gms-ink);
}

/* Aliases, so a stylesheet written against one set of names themes with the
   rest instead of silently falling back.

   orders.css asks for --gms-muted, --gms-radius and --gms-sunken. None of those
   were ever declared anywhere, so every use of them resolved to the hardcoded
   fallback after the comma — the order pages ignored the merchant's palette
   entirely and rendered the same grey on white whatever the shop's colours
   were. Nothing looked broken, which is why it survived: a fallback that always
   fires looks exactly like a design decision. */
.gms-auth,
.gms-addr,
.gms-wish-page,
.gms-acct,
.gms-orders {
  --gms-muted:  var(--gms-ink-2);
  --gms-radius: var(--gms-r);
  --gms-sunken: var(--gms-tint);
}

.gms-auth *, .gms-addr *, .gms-wish-page *, .gms-acct *, .gms-orders * { box-sizing: border-box; }

/* The wishlist reuses the storefront card, whose buttons resolve --gms-ink and
   --gms-r-pill. Without the token block above in scope those resolve to nothing
   and the button renders invisible — white text on no background. */

/* ============================================================== auth ==== */

.gms-auth { display: flex; justify-content: center; padding: 40px 16px 64px; }

.gms-auth__card {
  width: 100%;
  max-width: 420px;
  background: var(--gms-surface);
  border: 1px solid var(--gms-line-2);
  border-radius: var(--gms-r-lg);
  box-shadow: var(--gms-shadow);
  padding: 32px 30px 26px;
}

.gms-auth__head { margin-bottom: 22px; }
.gms-auth__title { margin: 0 0 5px; font-size: 1.4rem; font-weight: 680; letter-spacing: -.02em; }
.gms-auth__sub { margin: 0; font-size: .9375rem; color: var(--gms-ink-2); }

/* Segmented control. A thumb that slides between two options reads as one
   control with a state, where two separate tabs read as navigation. */
.gms-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 4px;
  background: var(--gms-tint);
  border-radius: var(--gms-r-pill);
  margin-bottom: 20px;
}

.gms-seg__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  border: 0;
  border-radius: var(--gms-r-pill);
  background: none;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: var(--gms-ink-3);
  cursor: pointer;
  transition: color .18s ease;
}

.gms-seg__btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.gms-seg__btn.is-on { color: var(--gms-ink); }

.gms-seg__thumb {
  position: absolute;
  top: 4px; left: 4px;
  width: calc(50% - 5px);
  height: calc(100% - 8px);
  background: var(--gms-surface);
  border-radius: var(--gms-r-pill);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
  transition: transform .22s cubic-bezier(.22, .61, .36, 1);
}

.gms-seg[data-on="email"] .gms-seg__thumb { transform: translateX(calc(100% + 2px)); }

/* Fields */
.gms-field { display: block; margin-bottom: 16px; }
.gms-field__label { display: block; font-size: .8125rem; font-weight: 600; color: var(--gms-ink-2); margin-bottom: 7px; }

.gms-field__wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--gms-line);
  border-radius: var(--gms-r);
  background: var(--gms-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
  overflow: hidden;
}

.gms-field__wrap:focus-within { border-color: var(--gms-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gms-accent) 14%, transparent); }
.gms-field.is-bad .gms-field__wrap { border-color: var(--gms-bad); }

.gms-field__prefix {
  padding: 0 12px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gms-ink-2);
  border-right: 1px solid var(--gms-line);
  align-self: stretch;
  display: flex;
  align-items: center;
  background: var(--gms-tint);
}

.gms-field__prefix[hidden] { display: none; }

.gms-field__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: .9375rem;
  color: var(--gms-ink);
}

.gms-field__input:focus { outline: none; }
.gms-field__input::placeholder { color: var(--gms-ink-3); }

.gms-field__reveal {
  border: 0; background: none; padding: 0 14px;
  font: inherit; font-size: .8125rem; font-weight: 600;
  color: var(--gms-ink-2); cursor: pointer;
}

.gms-field__hint { display: block; margin-top: 6px; font-size: .75rem; color: var(--gms-ink-3); }
.gms-field__hint.is-good { color: var(--gms-good); }

/* OTP boxes */
.gms-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 18px 0 4px; }

/* The class is doubled, and the properties below are stated even where they
   look redundant, because a theme's own `input` styling beats a single class
   and this is the one control on the page where losing is fatal.

   Measured on Zurix: the theme supplied `padding: 8px 20px`, `height: 64px`
   and `border: 0`, which between them killed the aspect-ratio and gave each
   box 40px of horizontal padding. A grid item's default `min-width: auto`
   then refuses to shrink below its content, so the six 1fr tracks were forced
   wide and the last box finished 67px outside the card — the digits really
   were outside the box.

   `min-width: 0` is the load-bearing one: without it the grid cannot shrink
   its tracks no matter what else is set here. */
.gms-otp .gms-otp__box.gms-otp__box {
  width: 100%;
  min-width: 0;
  /* A fixed height from the theme silently overrides aspect-ratio. */
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1.15;
  padding: 0;
  border: 1px solid var(--gms-line);
  border-radius: var(--gms-r);
  background: var(--gms-surface);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  /* Inherited line-height is what re-centres the digit once the theme's
     matching fixed height has gone. */
  line-height: 1;
  text-align: center;
  color: var(--gms-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* These carry the same doubling. The theme styles input:focus too, and a box
   that cannot show focus is unusable when you are typing six digits across
   six separate fields and need to see which one you are in. */
.gms-otp .gms-otp__box.gms-otp__box:focus { outline: none; border-color: var(--gms-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gms-accent) 14%, transparent); }
.gms-otp .gms-otp__box.gms-otp__box.is-filled { border-color: var(--gms-ink); }
.gms-otp.is-bad .gms-otp__box.gms-otp__box { border-color: var(--gms-bad); }

@media (max-width: 380px) { .gms-otp { gap: 6px; } .gms-otp__box { font-size: 1.05rem; } }

/* Actions */
.gms-auth__submit {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  border: 0;
  border-radius: var(--gms-r-pill);
  background: var(--gms-accent);
  color: var(--gms-accent-ink);
  font: inherit;
  font-size: .9375rem;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s ease;
}

.gms-auth__submit:hover { opacity: .92; color: var(--gms-accent-ink); }
.gms-auth__submit[disabled] { opacity: .5; cursor: not-allowed; }

.gms-auth__link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: .875rem;
  font-weight: 550;
  color: var(--gms-ink-2);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.gms-auth__link:hover { color: var(--gms-ink); }
.gms-auth__link[disabled] { color: var(--gms-ink-3); cursor: default; }

.gms-auth__back {
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 14px; padding: 0;
  border: 0; background: none;
  font: inherit; font-size: .8125rem; font-weight: 600;
  color: var(--gms-ink-2); cursor: pointer;
}

.gms-auth__back svg { width: 15px; height: 15px; }
.gms-auth__back:hover { color: var(--gms-ink); }

.gms-auth__sent { margin: 0 0 4px; font-size: .9375rem; color: var(--gms-ink-2); }
.gms-auth__sent strong { color: var(--gms-ink); }

.gms-auth__error { margin: 10px 0 0; font-size: .8125rem; color: var(--gms-bad); min-height: 1em; }
.gms-auth__error:empty { display: none; }

.gms-auth__legal { margin: 20px 0 0; font-size: .75rem; color: var(--gms-ink-3); text-align: center; line-height: 1.5; }

.gms-auth__step[hidden] { display: none; }

/* ====================================================== address book ==== */

.gms-addr { max-width: 1100px; margin: 0 auto; padding: 8px 16px 40px; }

.gms-addr__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.gms-addr__title { margin: 0; font-size: 1.3rem; font-weight: 680; letter-spacing: -.02em; }

.gms-addr__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.gms-addr__card {
  position: relative;
  border: 1px solid var(--gms-line);
  border-radius: var(--gms-r-lg);
  background: var(--gms-surface);
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.gms-addr__card:hover { border-color: var(--gms-ink-3); }
.gms-addr__card.is-default { border-color: var(--gms-accent); box-shadow: 0 0 0 1px var(--gms-accent); }

.gms-addr__tag {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--gms-r-pill);
  background: var(--gms-tint);
  font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gms-ink-2);
  margin-bottom: 10px;
}

.gms-addr__flag {
  position: absolute; top: -9px; right: 16px;
  padding: 3px 10px;
  border-radius: var(--gms-r-pill);
  background: var(--gms-accent);
  color: var(--gms-accent-ink);
  font-size: .625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}

.gms-addr__name { font-size: 1rem; font-weight: 650; margin: 0 0 2px; color: var(--gms-ink); }
.gms-addr__phone { font-size: .875rem; color: var(--gms-ink-2); margin: 0 0 10px; font-variant-numeric: tabular-nums; }
/* Lines are joined with \n in PHP and escaped as text. pre-line honours those
   breaks without hand-building <br> tags, which would mean escaping around
   markup instead of escaping the whole string. */
.gms-addr__lines {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--gms-ink-2);
  margin: 0 0 14px;
  white-space: pre-line;
}

.gms-addr__ship { font-size: .75rem; margin-bottom: 12px; }
.gms-addr__ship.ok { color: var(--gms-good); }
.gms-addr__ship.bad { color: var(--gms-bad); }

.gms-addr__actions { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--gms-line-2); }

.gms-addr__act {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; padding: 0;
  font: inherit; font-size: .8125rem; font-weight: 600;
  color: var(--gms-ink-2); cursor: pointer;
}

.gms-addr__act:hover { color: var(--gms-ink); }
.gms-addr__act--danger:hover { color: var(--gms-bad); }
.gms-addr__act svg { width: 15px; height: 15px; }
.gms-addr__act--default { margin-left: auto; color: var(--gms-accent); }

.gms-addr__new {
  border: 1.5px dashed var(--gms-line);
  border-radius: var(--gms-r-lg);
  background: none;
  min-height: 190px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font: inherit; cursor: pointer;
  color: var(--gms-ink-2);
  transition: border-color .15s ease, background .15s ease;
}

.gms-addr__new:hover { border-color: var(--gms-accent); background: color-mix(in srgb, var(--gms-accent) 4%, transparent); color: var(--gms-ink); }
.gms-addr__new-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--gms-tint); display: grid; place-items: center; font-size: 22px; line-height: 1; }
.gms-addr__new-title { font-size: .9375rem; font-weight: 650; }
.gms-addr__new-sub { font-size: .8125rem; color: var(--gms-ink-3); }

/* ---- modal ---- */

.gms-modal { position: fixed; inset: 0; z-index: 999995; display: grid; place-items: center; padding: 20px; }
.gms-modal[hidden] { display: none; }
.gms-modal__scrim { position: absolute; inset: 0; background: rgba(10, 16, 24, .5); opacity: 1; transition: none; }
.gms-modal.is-open .gms-modal__scrim { opacity: 1; }

.gms-modal__panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--gms-surface);
  border-radius: var(--gms-r-lg);
  box-shadow: 0 24px 64px rgba(16, 24, 40, .24);
  transform: none;
  opacity: 1;
  transition: none;
}

.gms-modal.is-open .gms-modal__panel { transform: none; opacity: 1; }

.gms-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--gms-line-2);
}

.gms-modal__title { margin: 0; font-size: 1.125rem; font-weight: 680; }
.gms-modal__close { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--gms-ink-3); cursor: pointer; padding: 0 2px; }
.gms-modal__close:hover { color: var(--gms-ink); }

.gms-modal__body { padding: 20px 24px 8px; overflow-y: auto; }

.gms-modal__foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 24px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gms-line-2);
}

/* Grouped sections beat a flat list of nine identical fields — the original
   reference had no hierarchy at all, which is most of why it read as cheap. */
.gms-fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.gms-fieldset:last-of-type { margin-bottom: 8px; }

.gms-fieldset__legend {
  padding: 0;
  margin: 0 0 12px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gms-ink-3);
}

/* minmax(0, 1fr), not 1fr: a plain 1fr track takes its minimum from the widest
   thing inside it, so a field with a prefix and a default-width input pushed the
   column past the card it sits in. */
.gms-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.gms-row--single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 560px) { .gms-row { grid-template-columns: minmax(0, 1fr); } }

/* The shrink has to reach the input: a grid item and a flex container both
   default to min-width:auto, and either one stops it. */
.gms-row > .gms-field { min-width: 0; }

.gms-field--compact { margin-bottom: 12px; }
.gms-field__req { color: var(--gms-bad); margin-left: 2px; }

textarea.gms-field__input { min-height: 76px; resize: vertical; padding-top: 11px; }
select.gms-field__input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px; }

.gms-select-wrap { position: relative; }
.gms-select-wrap::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px;
  border-right: 1.6px solid var(--gms-ink-3); border-bottom: 1.6px solid var(--gms-ink-3);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

.gms-chips-choice { display: flex; gap: 8px; flex-wrap: wrap; }

.gms-chip-choice { position: relative; }
.gms-chip-choice input { position: absolute; opacity: 0; width: 0; height: 0; }

.gms-chip-choice span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--gms-line);
  border-radius: var(--gms-r-pill);
  font-size: .875rem; font-weight: 600;
  color: var(--gms-ink-2);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.gms-chip-choice span svg { width: 15px; height: 15px; }
.gms-chip-choice input:checked + span { border-color: var(--gms-accent); color: var(--gms-accent); background: color-mix(in srgb, var(--gms-accent) 6%, transparent); }
.gms-chip-choice input:focus-visible + span { outline: 2px solid var(--gms-accent); outline-offset: 2px; }

/* These are used on both <button> and <a>. Without an explicit display an
   anchor stays inline, so its padding overlaps the lines around it instead of
   making a button — which is exactly what happened on the order page. */
.gms-btn-ghost,
.gms-btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.gms-btn-ghost {
  padding: 12px 22px;
  border: 1px solid var(--gms-line);
  border-radius: var(--gms-r-pill);
  background: var(--gms-surface);
  font: inherit; font-size: .9375rem; font-weight: 600;
  color: var(--gms-ink-2); cursor: pointer;
}

.gms-btn-ghost:hover { border-color: var(--gms-ink-3); color: var(--gms-ink); }

.gms-btn-solid {
  padding: 12px 26px;
  border: 0;
  border-radius: var(--gms-r-pill);
  background: var(--gms-accent);
  color: var(--gms-accent-ink);
  font: inherit; font-size: .9375rem; font-weight: 650;
  cursor: pointer;
}

.gms-btn-solid:hover { opacity: .92; }
.gms-btn-solid[disabled] { opacity: .5; cursor: not-allowed; }

/* Lives here rather than in orders.css because the order-received page loads
   auth.css but not orders.css. */
.gms-order-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.gms-addr__empty { padding: 50px 20px; text-align: center; color: var(--gms-ink-2); }

/* ============================================================== dark ==== */

body[data-gms-theme="leafora"] .gms-auth,
body[data-gms-theme="leafora"] .gms-addr {
  --gms-ink:     #eaf0e6;
  --gms-ink-2:   #a9b8a3;
  --gms-ink-3:   #8d9d87;
  --gms-line:    rgba(255, 255, 255, .14);
  --gms-line-2:  rgba(255, 255, 255, .08);
  --gms-surface: rgba(255, 255, 255, .06);
  --gms-tint:    rgba(255, 255, 255, .05);
  --gms-accent:  #c3d8a5;
  --gms-accent-ink: #1d2a20;
  --gms-shadow:  0 2px 8px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .34);
}

body[data-gms-theme="leafora"] .gms-auth__card,
body[data-gms-theme="leafora"] .gms-addr__card,
body[data-gms-theme="leafora"] .gms-modal__panel {
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

body[data-gms-theme="leafora"] .gms-modal__panel { background: rgba(32, 43, 35, .94); }
body[data-gms-theme="leafora"] .gms-seg__thumb { background: rgba(255, 255, 255, .12); }

@media (prefers-reduced-motion: reduce) {
  .gms-seg__thumb, .gms-modal__panel, .gms-modal__scrim { transition: none; }
}

/* ========================================================== wishlist ==== */

.gms-wish-page { max-width: 1320px; margin: 0 auto; padding: 8px 16px 40px; font-size: 16px; }
.gms-wish-page__count { font-size: .875rem; color: var(--gms-ink-3); }
.gms-wish-page__empty { padding: 60px 20px; text-align: center; }
.gms-wish-page__empty[hidden] { display: none; }
.gms-wish-page__empty-icon { font-size: 2.6rem; color: var(--gms-ink-3); margin-bottom: 8px; }
.gms-wish-page__empty h3 { margin: 0 0 6px; font-size: 1.125rem; }
.gms-wish-page__empty p { margin: 0 0 20px; color: var(--gms-ink-2); }
.gms-wish-page__note { margin-top: 24px; font-size: .8125rem; color: var(--gms-ink-3); text-align: center; }
.gms-wish-page__note a { color: var(--gms-accent); }