/* ============================================================
   Legal pages — page-scoped components (.jm-lg-*)
   Terms of sale, Privacy policy, Returns & complaints, Imprint,
   Delivery & payment, Cookie policy (EN + PL).
   The document template itself (.jm-doc, .jm-toc, .jm-prose,
   .jm-note, .jm-kv, .jm-dtable, .jm-dl, .jm-contact, .jm-versions,
   .jm-others, .jm-totop, .jm-copy, .jm-steps) is shared and lives in
   bricks-tokens.css. This file holds only what these pages add:
   the draft line, the model withdrawal form, the complaint-form slot,
   the Complianz cookie statement, the withdrawal flow and the two
   legal forms (withdrawal, complaint).
   Source: Claude Design legal/10–64, pages/legal.css (.jb-lg-*).
   ============================================================ */

/* Draft line under the header strip — remove it when the lawyer has
   approved the text and the TODO chips are gone. */
.jm-lg-draft {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jm--space-xs);
  margin: 0;
  font-size: var(--jm--text-xs);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
}

/* Lead line above generated content (Cookie policy). */
.jm-lg-lead {
  max-width: 60ch;
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text-muted);
  text-wrap: pretty;
}

/* ---------- Model withdrawal form (Terms, Annex 1) ---------- */
.jm-lg-model {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-s);
  padding: var(--jm--space-l);
  font-size: var(--jm--text-base);
  line-height: var(--jm--leading-relaxed);
  border: 1px solid var(--jm--color-border-strong);
  border-radius: var(--jm--radius-m);
}
.jm-lg-model > * { margin: 0; }
.jm-lg-model__h {
  font-weight: var(--jm--weight-bold);
  letter-spacing: var(--jm--tracking-wide);
  text-transform: uppercase;
}
.jm-lg-model__sub,
.jm-lg-model__foot { font-size: var(--jm--text-s); color: var(--jm--color-text-muted); }
.jm-lg-model__lines {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-lg-model__line {
  position: relative;
  padding-left: 1.25em;
}
.jm-lg-model__line::before {
  content: "–";
  position: absolute;
  left: 0;
}

/* ---------- Complaint form slot (Returns) ----------
   The native Bricks form goes in here (session C); until then it holds a TODO line. */
.jm-lg-form {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-m);
  min-width: 0;
  margin-top: var(--jm--space-l);
  padding: var(--jm--space-l);
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
  scroll-margin-top: 96px;
}
.jm-lg-form > p { margin: 0; font-size: var(--jm--text-s); color: var(--jm--color-text-muted); }

/* ---------- Cookie statement (Complianz shortcode inside .jm-prose) ----------
   The prose styles cover Complianz's headings, lists, tables and <details>;
   Complianz's own document CSS only sets widths and paddings we undo here. */
.jm-lg-cmplz { min-width: 0; }
.jm-lg-cmplz > p { margin: 0; font-size: var(--jm--text-s); color: var(--jm--color-text-muted); }
.jm-lg-cmplz #cmplz-document,
.jm-lg-cmplz .cmplz-document {
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
/* The service boxes (<details class="cmplz-dropdown">) lay out their cookie rows in a
   grid of their own: no prose rhythm inside them. */
.jm-lg-cmplz details :where(*) { margin-top: 0; }
.jm-lg-cmplz details :where(h3) {
  font-size: var(--jm--text-base);
  line-height: var(--jm--leading-snug);
  font-weight: var(--jm--weight-semibold);
  letter-spacing: 0;
}
.jm-lg-cmplz details :where(h4, h5) {
  font-size: var(--jm--text-xs);
  line-height: var(--jm--leading-normal);
  font-weight: var(--jm--weight-bold);
  letter-spacing: var(--jm--tracking-wide);
  text-transform: uppercase;
  color: var(--jm--color-text-muted);
}

/* ============================================================
   Withdrawal flow (design 60–64): header strip, then a card with
   the three steps beside a "Good to know" column.
   ============================================================ */

/* A Section element: Bricks centres its children unless told otherwise. */
.jm-lg-flow {
  align-items: stretch;
  background: var(--jm--color-surface-alt);
}
.jm-lg-flow__head {
  padding-block: var(--jm--space-2xl) var(--jm--space-xl);
  background: var(--jm--color-surface);
  border-bottom: 1px solid var(--jm--color-border);
}
.jm-lg-flow__head .jm-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--jm--space-s);
}
.jm-lg-flow__head .jm-eyebrow { margin: 0; }
.jm-lg-flow__head .jm-lg-lead { margin: 0; }
.jm-lg-flow__body { padding-block: var(--jm--space-xl) var(--jm--space-3xl); }
.jm-lg-flow__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--jm--space-xl);
  align-items: start;
}

.jm-lg-card {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-m);
  min-width: 0;
  padding: var(--jm--space-xl);
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
  scroll-margin-top: 96px;
}
.jm-lg-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-2xs);
}
.jm-lg-card__head > * { margin: 0; }
.jm-lg-card__h {
  font-size: var(--jm--text-2xl);
  line-height: var(--jm--leading-tight);
  text-wrap: balance;
}
.jm-lg-card__sub,
.jm-lg-form__sub {
  margin: 0;
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
}
[data-lg-focus]:focus { outline: none; }

/* Progress: 1 Your details · 2 Review · 3 Done */
.jm-lg-progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jm--space-s);
  margin: 0;
  padding: 0 0 var(--jm--space-m);
  list-style: none;
  border-bottom: 1px solid var(--jm--color-border);
}
.jm-lg-progress__step {
  display: flex;
  align-items: center;
  gap: var(--jm--space-xs);
  margin: 0;
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
  font-weight: var(--jm--weight-medium);
  color: var(--jm--color-text-muted);
}
.jm-lg-progress__step + .jm-lg-progress__step::before {
  content: "";
  width: 24px;
  height: 1px;
  margin-right: var(--jm--space-xs);
  background: var(--jm--color-border-strong);
}
.jm-lg-progress__n {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--jm--color-text);
  border: 1px solid var(--jm--color-border-strong);
  border-radius: var(--jm--radius-pill);
}
.jm-lg-progress__n .jm-icon { --jm-icon-size: 1rem; }
.jm-lg-progress__step[aria-current] { font-weight: var(--jm--weight-semibold); color: var(--jm--color-text); }
.jm-lg-progress__step[aria-current] .jm-lg-progress__n {
  color: var(--jm--color-surface);
  background: var(--jm--color-text);
  border-color: var(--jm--color-text);
}
.jm-lg-progress__step.is-done { color: var(--jm--color-text); }
.jm-lg-progress__step.is-done .jm-lg-progress__n { color: var(--jm--color-success); border-color: var(--jm--color-success); }

/* Step 2: the statement and the summary rows. */
.jm-lg-review {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-m);
}
.jm-lg-statement {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-xs);
  padding: var(--jm--space-m);
  background: var(--jm--color-surface-alt);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
}
.jm-lg-statement > * { margin: 0; }
.jm-lg-statement__label {
  font-size: var(--jm--text-xs);
  line-height: var(--jm--leading-normal);
  font-weight: var(--jm--weight-bold);
  letter-spacing: var(--jm--tracking-wide);
  text-transform: uppercase;
  color: var(--jm--color-text-muted);
}
.jm-lg-statement__text {
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text);
  text-wrap: pretty;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.jm-lg-review .jm-kv__v { white-space: pre-line; overflow-wrap: anywhere; }

/* "Good to know" column (steps 1–2), return address and help (step 3). */
.jm-lg-aside {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* imported as a Section element (<aside>) */
  gap: var(--jm--space-l);
  min-width: 0;
}
.jm-lg-aside[hidden] { display: none; }
.jm-lg-aside__h {
  margin: 0 0 var(--jm--space-s);
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-snug);
  font-weight: var(--jm--weight-semibold);
}
.jm-lg-facts {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--jm--color-text);
}
.jm-lg-fact {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-3xs);
  margin: 0;
  padding-block: var(--jm--space-s);
  border-bottom: 1px solid var(--jm--color-border);
}
.jm-lg-fact > * { margin: 0; }
.jm-lg-fact__k {
  font-size: var(--jm--text-base);
  line-height: var(--jm--leading-normal);
  font-weight: var(--jm--weight-semibold);
  color: var(--jm--color-text);
}
.jm-lg-fact__v {
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
  text-wrap: pretty;
}
.jm-lg-fact a,
.jm-lg-excl a,
.jm-lg-info a {
  font-weight: var(--jm--weight-semibold);
  color: var(--jm--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--jm--color-border-strong);
}
.jm-lg-fact a:hover,
.jm-lg-excl a:hover,
.jm-lg-info a:hover { color: var(--jm--color-brand); text-decoration-color: currentColor; }

.jm-lg-addr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--jm--space-s);
  padding: var(--jm--space-m);
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
}
.jm-lg-addr > * { margin: 0; }
.jm-lg-addr .jm-lg-aside__h { margin: 0; }
/* The contact box sits on the grey flow background here: give it a card. */
.jm-lg-aside .jm-contact {
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
}
.jm-lg-addr__a {
  font-size: var(--jm--text-base);
  line-height: var(--jm--leading-normal);
  font-weight: var(--jm--weight-medium);
}

/* Step 3 (withdrawal) and the sent state (complaint). */
.jm-lg-done,
.jm-lg-sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--jm--space-s);
}
.jm-lg-done > *,
.jm-lg-sent > * { margin: 0; }
.jm-lg-done__h {
  font-size: var(--jm--text-3xl);
  line-height: var(--jm--leading-tight);
  font-weight: var(--jm--weight-extrabold);
  letter-spacing: var(--jm--tracking-tight);
  text-wrap: balance;
}
.jm-lg-done .jm-kv,
.jm-lg-done .jm-steps { align-self: stretch; }
.jm-lg-done__next {
  margin-top: var(--jm--space-s);
  font-size: var(--jm--text-xl);
  line-height: var(--jm--leading-snug);
}
.jm-lg-sent__h {
  font-size: var(--jm--text-xl);
  line-height: var(--jm--leading-snug);
}
.jm-lg-sent p {
  font-size: var(--jm--text-base);
  line-height: 1.6;
  color: var(--jm--color-text-muted);
  text-wrap: pretty;
}
.jm-lg-done .jm-lg-lead { font-size: var(--jm--text-l); }
.jm-lg-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  color: var(--jm--color-success);
  border: 2px solid var(--jm--color-success);
  border-radius: var(--jm--radius-pill);
}

/* Alerts: error summary (on Continue / Send) and send error. */
.jm-lg-alert {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--jm--space-s);
  padding: var(--jm--space-m);
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text);
  background: color-mix(in srgb, var(--jm--color-error) 5%, var(--jm--color-surface));
  border: 1px solid var(--jm--color-error);
  border-radius: var(--jm--radius-m);
  scroll-margin-top: 96px;
}
.jm-lg-alert:focus { outline: none; box-shadow: var(--jm--shadow-focus); }
.jm-lg-alert > .jm-icon { margin-top: 1px; color: var(--jm--color-error); }
.jm-lg-alert p { margin: 0; }
.jm-lg-alert__list {
  display: flex;
  flex-direction: column;
  margin: var(--jm--space-xs) 0 0;
  padding: 0;
  list-style: none;
}
.jm-lg-alert__list li { margin: 0; }
.jm-lg-alert a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: var(--jm--weight-medium);
  color: var(--jm--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--jm--color-border-strong);
}
.jm-lg-alert p a { display: inline; min-height: 0; }
.jm-lg-alert a:hover { color: var(--jm--color-brand); text-decoration-color: currentColor; }

/* Made-to-order note (red dot) and the complaint's privacy line. */
.jm-lg-excl {
  display: flex;
  align-items: flex-start;
  gap: var(--jm--space-s);
  margin: 0;
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text);
}
.jm-lg-excl::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  background: var(--jm--color-brand);
  border-radius: var(--jm--radius-pill);
}
.jm-lg-info {
  margin: 0;
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
}

/* Actions row: primary button, "Edit your details", help line. */
.jm-lg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jm--space-s) var(--jm--space-m);
  padding-top: var(--jm--space-m);
  border-top: 1px solid var(--jm--color-border);
}
.jm-lg-actions .jm-btn--primary { min-width: 13.75rem; }
.jm-lg-actions__help {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--jm--text-xs);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
}
.jm-lg-back { min-height: 44px; }

/* ============================================================
   The Bricks forms (.jm-lg-form__form): withdrawal #jamar-withdrawal
   (.jm-lg-wd) and complaint #jamar-complaint. Bricks renders its own
   markup (.form-group > label + control), so it is styled by selector,
   as on Custom orders. The script (assets/js/legal-forms.js) adds
   .is-enhanced and tags each group with data-lg-part; without it the
   form is a plain one-step Bricks form.
   ============================================================ */

.jm-lg-form__form {
  --lg-gap: var(--jm--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--lg-gap);
}
.jm-lg-form__form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-xs);
  width: 100%;
  max-width: 35rem;
  margin: 0;
  padding: 0;
}
.jm-lg-form__form .form-group:has(> :is(.jm-lg-card__head, .jm-lg-alert, .jm-lg-review, .jm-lg-actions, .jm-lg-done, .jm-lg-sent, .jm-lg-excl)) { max-width: none; }
.jm-lg-form__form .form-group.is-hidden { display: none; }
.jm-lg-form__form > div:has(> input[type="hidden"]:only-child) { display: none; }

/* Parts that need the script stay hidden without it. */
.jm-lg-form__form:not(.is-enhanced) .form-group:has(> :is(.jm-lg-alert, .jm-lg-review, .jm-lg-done, .jm-lg-sent, [data-lg-next-wrap], [data-lg-submit-extras], [data-lg-step-show="2"])) { display: none; }
/* Alerts show only when the script raises them. */
.jm-lg-form__form .form-group:has(> .jm-lg-alert):not(.is-shown) { display: none; }
/* Bricks' own message line is replaced by our states. */
.jm-lg-form__form.is-enhanced > .message { display: none; }

/* Withdrawal steps: each group belongs to step 1, 2 or 3. */
.jm-lg-wd.is-enhanced:not([data-lg-step="1"]) [data-lg-part="1"],
.jm-lg-wd.is-enhanced:not([data-lg-step="2"]) [data-lg-part="2"],
.jm-lg-wd.is-enhanced:not([data-lg-step="3"]) [data-lg-part="3"] { display: none; }
/* Complaint: the sent state replaces the form. */
.jm-lg-form__form.is-enhanced:not(.is-sent) [data-lg-part="3"],
.jm-lg-form__form.is-sent:not(.jm-lg-wd) [data-lg-part]:not([data-lg-part="3"]) { display: none; }

.jm-lg-form__form .form-group > label,
.jm-lg-form__form .form-group > .label {
  margin: 0;
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-semibold);
  color: var(--jm--color-text);
}
.jm-lg-form__form label.required::after,
.jm-lg-form__form .label.required::after {
  content: " *";
  color: var(--jm--color-brand);
}
.jm-lg-form__form :is(input[type="text"], input[type="email"], input[type="date"], textarea) {
  width: 100%;
  min-height: 44px;
  padding: var(--jm--space-xs) 14px;
  font: inherit;
  font-size: var(--jm--text-base);
  color: var(--jm--color-text);
  background-color: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
  transition: border-color var(--jm--duration-base) var(--jm--ease-out),
              box-shadow var(--jm--duration-base) var(--jm--ease-out);
}
.jm-lg-form__form :is(input, textarea):focus {
  outline: none;
  border-color: var(--jm--color-brand);
  box-shadow: var(--jm--shadow-focus);
}
.jm-lg-form__form ::placeholder { color: var(--jm--color-text-muted); }
.jm-lg-form__form textarea { min-height: 7rem; line-height: var(--jm--leading-normal); resize: vertical; }

/* Error under a field: Bricks' message replaces the help line below it. */
.jm-lg-form__form .form-group-error-message {
  margin: 0;
  padding: 0;
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-medium);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-error);
  background: none;
}
.jm-lg-form__form .form-group:has(> .form-group-error-message.show) :is(input, textarea) { border-color: var(--jm--color-error); }
.jm-lg-form__form .form-group:has(> .form-group-error-message.show) + .form-group:has(> .jm-lg-help) { display: none; }

/* Help lines (HTML fields) sit directly under their field. */
.jm-lg-form__form .form-group:has(> .jm-lg-help) { margin-top: calc(var(--jm--space-2xs) - var(--lg-gap)); }
.jm-lg-help {
  margin: 0;
  font-size: var(--jm--text-xs);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
}
.jm-lg-help.is-error { font-weight: var(--jm--weight-medium); color: var(--jm--color-error); }

/* Radio rows — 20 px control in a 44 px row; remedies in two columns. */
.jm-lg-form__form .options-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--jm--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-lg-form__form .form-group:has([name^="remedy"]) .options-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jm-lg-form__form .options-wrapper li {
  display: flex;
  align-items: center;
  gap: var(--jm--space-s);
  min-height: 44px;
  margin: 0;
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text);
}
.jm-lg-form__form .options-wrapper label { flex: 1; padding-block: var(--jm--space-2xs); font-weight: var(--jm--weight-regular); cursor: pointer; }
.jm-lg-form__form input[type="radio"] {
  appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--jm--color-surface);
  border: 1.5px solid var(--jm--color-border-strong);
  border-radius: var(--jm--radius-pill);
  cursor: pointer;
  transition: background-color var(--jm--duration-fast) var(--jm--ease-out),
              border-color var(--jm--duration-fast) var(--jm--ease-out);
}
.jm-lg-form__form input[type="radio"]:checked {
  background: var(--jm--color-brand);
  border-color: var(--jm--color-brand);
  box-shadow: inset 0 0 0 4px var(--jm--color-surface);
}
.jm-lg-form__form input[type="radio"]:focus-visible { outline: none; box-shadow: inset 0 0 0 4px var(--jm--color-surface), var(--jm--shadow-focus); }
.jm-lg-form__form .form-group:has(> .form-group-error-message.show) input[type="radio"]:not(:checked) { border-color: var(--jm--color-error); }

/* Photos — Bricks' "choose files" label becomes the drop zone; the
   native input stays focusable at 0×0, so its focus ring is drawn on
   the zone. Drag and drop is wired in the script. */
.jm-lg-form__form .form-group.file { display: flex; }
.jm-lg-form__form .form-group.file > label.choose-files {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--jm--space-xs);
  min-height: 6rem;
  margin: 0;
  padding: var(--jm--space-m);
  font-family: inherit;
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-semibold);
  line-height: var(--jm--leading-normal);
  text-align: center;
  white-space: normal;
  color: var(--jm--color-text);
  background: var(--jm--color-surface-alt);
  border: 1px dashed var(--jm--color-border-strong);
  border-radius: var(--jm--radius-s);
  cursor: pointer;
  transition: border-color var(--jm--duration-base) var(--jm--ease-out),
              background-color var(--jm--duration-base) var(--jm--ease-out);
}
.jm-lg-form__form .form-group.file > label.choose-files::before {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12'/%3E%3Cpath d='M6 10l6-6 6 6'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12'/%3E%3Cpath d='M6 10l6-6 6 6'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
}
.jm-lg-form__form .form-group.file > label.choose-files:hover,
.jm-lg-form__form .form-group.file > label.choose-files.is-drag {
  background: var(--jm--color-surface);
  border-color: var(--jm--color-text);
}
.jm-lg-form__form .form-group.file:has(input[type="file"]:focus-visible) > label.choose-files {
  border-style: solid;
  border-color: var(--jm--color-brand);
  box-shadow: var(--jm--shadow-focus);
}
.jm-lg-form__form .form-group.file:has(.jm-lg-files-error) > label.choose-files,
.jm-lg-form__form .form-group.file.has-files-error > label.choose-files { border-color: var(--jm--color-error); }
.jm-lg-form__form .file-result.show {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jm--space-s);
  min-height: 44px;
  margin: 0;
  padding: var(--jm--space-2xs) var(--jm--space-2xs) var(--jm--space-2xs) var(--jm--space-s);
  font-size: var(--jm--text-s);
  color: var(--jm--color-text);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
  overflow-wrap: anywhere;
}
.jm-lg-form__form .file-result.show.danger {
  color: var(--jm--color-error);
  background: color-mix(in srgb, var(--jm--color-error) 5%, transparent);
  border-color: var(--jm--color-error);
}
.jm-lg-form__form .file-result.show .remove {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 36px;
  margin: 0;
  padding: 0 var(--jm--space-s);
  font: inherit;
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-semibold);
  line-height: 1;
  color: var(--jm--color-text);
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
  cursor: pointer;
}
.jm-lg-form__form .file-result.show .remove:focus-visible { outline: none; box-shadow: var(--jm--shadow-focus); }

/* Submit — mirrors .jm-btn.jm-btn--primary.jm-btn--lg (Bricks renders
   the button itself). "Edit your details" and the help line are moved
   next to it by the script. */
.jm-lg-form__form .submit-button-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jm--space-s) var(--jm--space-m);
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: var(--jm--space-m);
  border-top: 1px solid var(--jm--color-border);
}
.jm-lg-form__form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jm--space-xs);
  min-width: 13.75rem;
  min-height: 44px;
  padding: 16px 28px;
  font-family: var(--jm--font-body);
  font-size: var(--jm--text-l);
  font-weight: var(--jm--weight-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--jm--color-on-brand);
  background: var(--jm--color-brand);
  border: 1.5px solid transparent;
  border-radius: var(--jm--radius-s);
  cursor: pointer;
  transition: background-color var(--jm--duration-base) var(--jm--ease-out);
}
.jm-lg-form__form button[type="submit"]:hover { background: var(--jm--color-brand-hover); }
.jm-lg-form__form button[type="submit"]:focus-visible { outline: none; box-shadow: var(--jm--shadow-focus); }
.jm-lg-form__form button[type="submit"].sending { opacity: 0.7; cursor: progress; }

/* Bricks' message line, when the script is not running. */
.jm-lg-form__form .message {
  padding: var(--jm--space-s) var(--jm--space-m);
  font-size: var(--jm--text-s);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
}
.jm-lg-form__form .message.danger { border-color: var(--jm--color-error); color: var(--jm--color-error); }

@media (max-width: 991px) {
  .jm-lg-flow__grid { grid-template-columns: minmax(0, 1fr); gap: var(--jm--space-l); }
}

@media (max-width: 767px) {
  .jm-lg-model,
  .jm-lg-form { padding: var(--jm--space-m); }
  .jm-lg-card { padding: var(--jm--space-m); }
  .jm-lg-form__form .form-group:has([name^="remedy"]) .options-wrapper { grid-template-columns: minmax(0, 1fr); }
  .jm-lg-actions .jm-btn--primary,
  .jm-lg-form__form button[type="submit"] { width: 100%; }
  .jm-lg-progress { gap: var(--jm--space-xs); }
  .jm-lg-progress__step + .jm-lg-progress__step::before { width: 12px; }
  .jm-lg-progress__step:not([aria-current]) .jm-lg-progress__t {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jm-lg-form__form :is(input, textarea, button),
  .jm-lg-form__form .form-group.file > label.choose-files { transition: none; }
}

@media print {
  .jm-lg-form { display: none !important; }
  .jm-lg-model { border: 1px solid var(--jm--color-text); break-inside: avoid; }
  .jm-lg-flow,
  .jm-lg-flow__body { background: none; }
  .jm-lg-flow__head { border: 0; }
  .jm-lg-aside,
  .jm-lg-progress,
  .jm-lg-form__form .submit-button-wrapper,
  .jm-lg-form__form [data-lg-next-wrap] { display: none !important; }
}