/* EU Withdrawal storefront widget.
 * A guest on the merchant's theme: inherit font + colors, radius via
 * var(--wd-radius, 8px), 44px minimum hit targets, reserved labels never
 * truncate (the pill grows/wraps with the language). */

/* ---- Our own defaults, declared at the boundary of our subtree ----
 *
 * Every custom property this file consumes MUST also be declared here. An inline
 * var() fallback only applies when the property is undefined *everywhere* in the
 * inherited chain, so a theme with `:root { --wd-bg: red }` inherited straight
 * past our fallbacks and took over the palette — foreground and background could
 * land on the same colour and render the submit button's label invisible, on a
 * statutory control, with no signal to the merchant or to us (#56). Declaring here
 * shadows the theme's value at our boundary; the fallbacks stay as belt and braces.
 * A guard test enforces "consumed => declared" so a new variable cannot reopen this.
 *
 * The precedence contract is unchanged, because everything that legitimately
 * overrides these sets them *inline*, which beats these selectors on the same
 * element: the theme block writes them onto [data-wd-root], the server writes the
 * shop's published style onto .wd-page, and applyStyle() writes it onto
 * [data-wd-flow] (a descendant, so deeper in the cascade). Declared ONLY on the two
 * outermost roots for exactly that reason — adding [data-wd-flow] here would shadow
 * a block's value on its own wrapper and invert theme-block > shop-style. */
.wd-page,
[data-wd-root] {
  --wd-bg: #2b2822;
  --wd-fg: #fdfcfa;
  --wd-radius: 8px;
  --wd-offset-x: 16px;
  --wd-offset-y: 16px;
  --wd-max-width: 640px;
}

/* ---- Our own type anchor, for the same reason ----
 *
 * Every font-size below is `em`, resolved against this. It used to be `rem`, which
 * resolves against the *host page's* root — a value we do not control and which a large
 * share of themes deliberately move: `html { font-size: 62.5% }` is a long-standing
 * convention so theme authors can write `1.6rem` and mean 16px. Our stylesheet read those
 * same declarations as absolute intent, so the whole form rendered at 62.5% of its
 * intended size — labels at 8.1px, help and error text at 7.5px. Three of the four current
 * free Shopify themes do it (Dawn, Craft, Ride); Horizon, the one we developed against,
 * does not, which is why it went unseen (#120).
 *
 * `medium` rather than `16px`: it is the *browser's* default, so a reader who has enlarged
 * their default font still gets a larger form. That is what `rem` was buying us on
 * well-behaved themes, and it is worth keeping on a statutory control.
 *
 * A separate rule from the custom-property block above, not folded into it: that block's
 * selector list is a precedence contract (see above) and this one needs `.wd-dialog` in
 * it. The dialog is rendered as a SIBLING of [data-wd-root] by the embeds, not a child, so
 * without naming it here the two-step form's contents fall straight back to the theme's
 * root — the same bug in the surface that matters most. */
.wd-page,
[data-wd-root],
.wd-dialog {
  font-size: medium;
}

/* ---- Floating trigger (app embed) ---- */
.wd-floating {
  position: fixed;
  z-index: 90;
  bottom: var(--wd-offset-y, 16px);
  max-width: min(320px, calc(100vw - 32px));
}
.wd-floating[data-wd-position="bottom_right"] { right: var(--wd-offset-x, 16px); }
.wd-floating[data-wd-position="bottom_left"] { left: var(--wd-offset-x, 16px); }

.wd-trigger {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  background: var(--wd-bg, #2b2822);
  color: var(--wd-fg, #fdfcfa);
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-align: left;
  white-space: normal; /* reserved labels wrap, never truncate */
  overflow-wrap: break-word;
}
.wd-trigger--small { font-size: 0.8125em; padding: 8px 14px; }
.wd-trigger--medium { font-size: 0.875em; padding: 11px 18px; }
.wd-trigger--large { font-size: 1em; padding: 14px 22px; }

/* ---- Inline form block ---- */
.wd-inline { display: flex; }
.wd-inline--center { justify-content: center; }
.wd-inline--left { justify-content: flex-start; }

.wd-card {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wd-max-width, 640px);
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 25%, transparent);
  border-radius: var(--wd-radius, 8px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Children stretch to the card. flex-start would size them to their own content,
     shrink-wrapping the whole form to the intro paragraph's natural width. */
}
.wd-heading { font-size: 1.125em; margin: 0; }
.wd-intro { font-size: 0.875em; margin: 0; }

/* ---- Dialog + flow (two-step form) ---- */
.wd-dialog {
  border: none;
  border-radius: var(--wd-radius, 8px);
  padding: 0;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
}
.wd-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.wd-card--dialog { max-width: none; border: none; }

.wd-flow { display: flex; flex-direction: column; }
.wd-step { display: flex; flex-direction: column; gap: 12px; }
.wd-step[hidden] { display: none; }

.wd-field { display: flex; flex-direction: column; gap: 4px; }
.wd-label { font-size: 0.8125em; }
.wd-help { font-size: 0.75em; opacity: 0.7; }
.wd-input {
  font: inherit;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--wd-radius, 8px);
  background: transparent;
  color: inherit;
}
textarea.wd-input { min-height: 72px; resize: vertical; }
.wd-field-error { font-size: 0.75em; color: #b3261e; }
.wd-field-error[hidden] { display: none; }

.wd-primary {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--wd-bg, #2b2822);
  color: var(--wd-fg, #fdfcfa);
  border: none;
  border-radius: var(--wd-radius, 8px);
  cursor: pointer;
  white-space: normal; /* reserved confirm label wraps, never truncates */
}
.wd-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.wd-secondary {
  font: inherit;
  align-self: flex-start;
  min-height: 44px;
  padding: 8px 14px;
  background: transparent;
  color: inherit;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--wd-radius, 8px);
  cursor: pointer;
}
.wd-link {
  font: inherit;
  min-height: 44px;
  background: transparent;
  color: inherit;
  border: none;
  padding: 8px;
  cursor: pointer;
  text-decoration: underline;
}

.wd-lookup-result[hidden] { display: none; }
.wd-lookup-miss { font-size: 0.8125em; margin: 0; }
.wd-items { list-style: none; margin: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid; border-color: color-mix(in srgb, currentColor 20%, transparent);
  border-radius: var(--wd-radius, 8px); }
.wd-items-order { font-weight: 600; font-size: 0.8125em; }
.wd-item { display: flex; align-items: center; gap: 8px; font-size: 0.8125em; justify-content: space-between; }
.wd-badge {
  /* 0.6875 of the anchor — but `em` compounds where `rem` did not, and the badge is the
     one sized element in this file that renders inside another (.wd-item, 0.8125, in both
     the proxy page's markup and the JS-built lookup result). A bare 0.6875em would land at
     ~0.56 of the anchor and reintroduce #120 in miniature, on the row that tells a consumer
     an item is exempt from withdrawal. The divisor is .wd-item's size; keep them together. */
  font-size: calc(0.6875em / 0.8125);
  white-space: nowrap;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  opacity: 0.8;
}

/* The restated declaration on the confirm step (#75) — the sentence the consumer is
   committing to, so it reads as prose rather than as the boxed data summary below it. */
.wd-declaration-statement {
  margin: 0 0 12px;
  font-size: 0.9375em;
  line-height: 1.5;
}

.wd-declaration {
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 20%, transparent);
  border-radius: var(--wd-radius, 8px);
  padding: 12px;
  font-size: 0.875em;
}
.wd-banner {
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 20%, transparent);
  border-radius: var(--wd-radius, 8px);
  padding: 10px 12px;
  font-size: 0.8125em;
}
.wd-banner[hidden] { display: none; }

.wd-step--done { align-items: center; text-align: center; }
.wd-done-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid;
  place-items: center;
}
.wd-done-icon svg { width: 20px; height: 20px; }
.wd-reference {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8125em;
  border: 1px dashed;
  border-color: color-mix(in srgb, currentColor 40%, transparent);
  border-radius: var(--wd-radius, 8px);
  padding: 8px 14px;
}

.wd-heading:focus { outline: none; }
.wd-heading:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.wd-deadline { font-size: 0.8125em; margin: 6px 0 0; font-weight: 600; }

.wd-item-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  cursor: pointer;
}
.wd-item-pick input { width: 16px; height: 16px; accent-color: var(--wd-bg, #2b2822); }
.wd-item-pick input:disabled { cursor: not-allowed; }

.wd-watermark { font-size: 0.6875em; opacity: 0.6; margin: 0; }
.wd-watermark[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .wd-dialog[open] { animation: wd-fade 160ms ease-out; }
  @keyframes wd-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

/* Honeypot: off-screen for humans, present for bots. */
.wd-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Footer link restyling (app embed) ---- */
.wd-footer-link {
  text-decoration: underline;
  font-weight: 600;
}
.wd-footer-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--wd-bg, #2b2822);
  color: var(--wd-fg, #fdfcfa);
  border-radius: var(--wd-radius, 8px);
  text-decoration: none;
}

/* ---- Standalone proxy page ----
 * Served through the app proxy and rendered inside the merchant's theme layout,
 * so the page owns only its own centring/rhythm and inherits everything else.
 * The embedded placements never match these selectors. */
.wd-page { display: flex; justify-content: center; padding: 24px 16px; }
.wd-page .wd-card { flex: 1 1 auto; }
/* Each no-JS step is its own <form> (native post-per-step); they must not
 * collapse the card's vertical rhythm. */
.wd-nojs-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.wd-items { border: 0; }
.wd-items legend { font-weight: 600; font-size: 0.8125em; padding: 0 0 6px; }