/* Page styles for /demo/ — the interactive block-checkout demo.
   The stepper itself is styled by demo-stepper.css, which is the plugin's own
   compiled stylesheet; nothing here may touch a .lscp-* rule. What this file
   covers is the page around it: the simulated storefront, the browser frame it
   sits in, and the settings panel beside it. */

/* ---------------------------------------------------------------- Intro -- */

.demo-intro {
  max-width: var(--wide-size);
  margin: 0 auto;
  padding: var(--space-60) var(--space-30) var(--space-40);
  text-align: center;
}

.demo-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-20);
}

.demo-intro h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-display);
  color: var(--color-contrast);
  margin: 0 0 var(--space-30);
}

.demo-lede {
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-ink-600);
  max-width: 62ch;
  margin: 0 auto;
}

/* --------------------------------------------------------------- Layout -- */

/* The stage takes the room it needs and the panel stays a fixed column: the
   checkout is what visitors came to look at, and a panel that grows with the
   viewport just spreads eight controls over more space. */
.demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-40);
  align-items: start;
  max-width: var(--wide-size);
  margin: 0 auto;
  padding: 0 var(--space-30) var(--space-70);
}

@media (max-width: 1000px) {
  /* The panel goes first below this width. It is the reason the page exists —
     a visitor who has to scroll past a full checkout to find the controls will
     not know they are there. */
  .demo-layout { grid-template-columns: minmax(0, 1fr); }
  .demo-panel { order: -1; position: static; }
}

/* Everything below this point sizes itself against its own container rather
   than the viewport, because on this page the two are never the same: the
   checkout lives inside a stage that is ~500px narrower than the window at
   desktop, and the settings panel swings between a 320px rail and the full
   page width when it moves above the checkout. Viewport breakpoints fire at
   the wrong moments for both — a checkout given a 300px summary column while
   its own box is only 660px wide, or eight controls stretched across 845px.
   The container is the thing that actually has the space, so it is the thing
   the layout asks. */
.demo-browser__page { container: demo-page / inline-size; }
.demo-panel { container: demo-panel / inline-size; }

/* -------------------------------------------------------------- Browser -- */

/* A frame around the checkout, so the simulated store reads as a screenshot of
   somebody else's site rather than as part of this one. */
.demo-browser {
  border: 1px solid var(--color-line-200);
  border-radius: 12px;
  background: var(--color-base);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(23 24 26 / 4%), 0 12px 32px rgb(23 24 26 / 6%);
}

.demo-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-line-200);
}

.demo-browser__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-gray-100);
  flex: 0 0 auto;
}

.demo-browser__url {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-ink-500);
  background: var(--color-base);
  border: 1px solid var(--color-line-200);
  border-radius: 999px;
  padding: 3px 12px;
  margin-inline-start: 10px;
}

.demo-browser__page {
  padding: var(--space-40) var(--space-30);
}

@media (min-width: 783px) {
  .demo-browser__page { padding: var(--space-50) var(--space-40); }
}

.demo-disclaimer {
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--color-ink-500);
  margin: var(--space-30) 0 0;
  text-align: center;
}

/* ------------------------------------------------------- Fake checkout -- */

/* WooCommerce's two-column checkout: form and order summary. The summary only
   claims a column when it is on screen, so a step without it gets the full
   width instead of a gap where it would have been. */
.demo-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-40);
}

/* 700px is where a 300px summary still leaves the form a workable ~380px.
   Below it the summary stacks under the form, which is what WooCommerce's own
   checkout does on a narrow screen. */
@container demo-page (min-width: 700px) {
  .demo-checkout.has-summary {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  /* A step holding nothing but the summary has no form column to show. */
  .demo-checkout.is-summary-only { grid-template-columns: minmax(0, 1fr); }
}

.demo-checkout__form { min-width: 0; }
.demo-checkout__sidebar { min-width: 0; }

.demo-section + .demo-section { margin-top: var(--space-40); }
.demo-section[hidden] { display: none; }

.demo-section__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-contrast);
  margin: 0 0 var(--space-30);
}

/* Fields ------------------------------------------------------------------ */

.demo-field { margin-bottom: 14px; }

/* Paired fields (first/last name, city/postcode) sit side by side only while
   each half clears roughly 200px. */
.demo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@container demo-page (min-width: 420px) {
  .demo-row { grid-template-columns: 1fr 1fr; }
}

.demo-field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-ink-600);
  margin-bottom: 6px;
}

.demo-field input,
.demo-field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-contrast);
  background: var(--color-base);
  border: 1px solid var(--color-line-300);
  border-radius: 4px;
  padding: 11px 12px;
}

.demo-field input:focus,
.demo-field textarea:focus {
  outline: 2px solid var(--lscp-accent, var(--color-primary));
  outline-offset: 1px;
  border-color: transparent;
}

.demo-field input.has-error,
.demo-field textarea.has-error {
  border-color: var(--color-error);
}

.demo-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin: 6px 0 0;
}

.demo-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--color-ink-600);
  line-height: var(--lh-snug);
  cursor: pointer;
}

.demo-check input {
  margin: 2px 0 0;
  accent-color: var(--lscp-accent, var(--color-primary));
  flex: 0 0 auto;
}

.demo-check input.has-error {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

/* Express payment --------------------------------------------------------- */

.demo-express {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

@container demo-page (min-width: 420px) {
  .demo-express { grid-template-columns: 1fr 1fr; }
}

.demo-express__btn {
  font: inherit;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border: none;
  border-radius: 4px;
  padding: 12px;
  cursor: default;
  color: var(--color-base);
}

.demo-express__btn--dark { background: var(--color-contrast); }
.demo-express__btn--gold { background: #f0c14b; color: var(--color-contrast); }

/* "Or continue below" — a rule with the label sitting in the gap. */
.demo-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-xs);
  color: var(--color-ink-500);
  margin: var(--space-30) 0 0;
}

.demo-rule::before,
.demo-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-line-200);
}

/* Delivery toggle --------------------------------------------------------- */

.demo-toggle {
  display: flex;
  border: 1px solid var(--color-line-300);
  border-radius: 6px;
  overflow: hidden;
}

.demo-toggle__btn {
  flex: 1;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: var(--color-base);
  color: var(--color-ink-600);
  border: none;
  padding: 11px;
  cursor: pointer;
}

.demo-toggle__btn + .demo-toggle__btn { border-inline-start: 1px solid var(--color-line-300); }

.demo-toggle__btn.is-selected {
  background: var(--lscp-accent, var(--color-primary));
  color: var(--lscp-on-accent, #fff);
}

/* Option lists (shipping rates, pickup points, payment methods) ------------ */

.demo-options {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line-200);
  border-radius: 6px;
  overflow: hidden;
}

.demo-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  font-size: var(--text-sm);
  color: var(--color-contrast);
  cursor: pointer;
}

.demo-option + .demo-option { border-top: 1px solid var(--color-line-200); }

.demo-option input { accent-color: var(--lscp-accent, var(--color-primary)); flex: 0 0 auto; }

.demo-option__name { flex: 1; min-width: 0; }

.demo-option__name em {
  display: block;
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--color-ink-500);
  margin-top: 2px;
}

.demo-option__price {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}

/* Order summary ----------------------------------------------------------- */

.demo-checkout__sidebar {
  background: var(--color-gray-50);
  border: 1px solid var(--color-line-200);
  border-radius: 8px;
  padding: var(--space-30);
}

/* The sidebar is a .demo-section, so it inherits the sibling margin. Inside
   its own box that reads as a stray gap. */
.demo-checkout__sidebar.demo-section { margin-top: 0; }

.demo-cart {
  list-style: none;
  margin: 0 0 var(--space-30);
  padding: 0;
}

.demo-cart li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-xs);
}

.demo-cart li + li { margin-top: 12px; }

.demo-cart__thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--color-gray-100);
  flex: 0 0 auto;
}

.demo-cart__name { flex: 1; min-width: 0; color: var(--color-contrast); }

.demo-cart__name em {
  display: block;
  font-style: normal;
  color: var(--color-ink-500);
  margin-top: 2px;
}

.demo-cart__price { font-weight: var(--weight-semibold); }

.demo-totals {
  margin: 0;
  border-top: 1px solid var(--color-line-200);
  padding-top: var(--space-30);
  font-size: var(--text-xs);
}

.demo-totals div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.demo-totals div + div { margin-top: 8px; }
.demo-totals dt { color: var(--color-ink-600); }
.demo-totals dd { margin: 0; }

.demo-totals__grand {
  border-top: 1px solid var(--color-line-200);
  margin-top: 12px !important;
  padding-top: 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.demo-totals__grand dt { color: var(--color-contrast); }

/* Place order ------------------------------------------------------------- */

.demo-actions { margin-top: var(--space-40); }
.demo-actions[hidden] { display: none; }

.demo-place-order {
  width: 100%;
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--lscp-on-accent, #fff);
  background: var(--lscp-accent, var(--color-primary));
  border: none;
  border-radius: 4px;
  padding: 15px;
  cursor: pointer;
}

.demo-place-order:disabled {
  cursor: default;
  opacity: 0.7;
  font-size: var(--text-sm);
}

/* The nav mount sits under Place Order in the DOM but reads as part of the
   step, so it keeps its distance from the button above it. */
.lscp-bstep-mount--nav { margin-top: var(--space-30); }

/* ---------------------------------------------------------------- Panel -- */

.demo-panel {
  position: sticky;
  top: var(--space-30);
  background: var(--color-base);
  border: 1px solid var(--color-line-200);
  border-radius: 12px;
  overflow: hidden;
}

.demo-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--space-30) var(--space-30) 0;
}

.demo-panel__head h2 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-contrast);
  margin: 0;
}

.demo-reset {
  font: inherit;
  font-size: var(--text-2xs);
  color: var(--color-ink-500);
  background: none;
  border: 1px solid var(--color-line-200);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}

.demo-reset:hover { color: var(--color-primary); border-color: var(--color-accent-tint-border); }

.demo-panel__note {
  font-size: var(--text-2xs);
  line-height: var(--lh-snug);
  color: var(--color-ink-500);
  margin: 10px 0 0;
  padding: 0 var(--space-30);
}

/* The collapse control. Only ever seen below 1000px — above it the panel has
   its own column and demo.js keeps the disclosure open. */
.demo-panel__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  padding: var(--space-30);
  margin-top: 10px;
  border-top: 1px solid var(--color-line-200);
  cursor: pointer;
  list-style: none;
}

.demo-panel__summary::-webkit-details-marker { display: none; }

/* A chevron that turns over when the panel opens, so the control says which
   way it is going rather than only that it is a control. */
.demo-panel__summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  flex: 0 0 auto;
}

.demo-panel__disclosure[open] > .demo-panel__summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

@media (min-width: 1001px) {
  .demo-panel__summary { display: none; }
}

.demo-panel__body { padding: var(--space-30); }

/* Above the checkout the panel gets the whole page width, where a single
   column of eight controls reads as a list with a lot of nothing beside it.
   The groups flow into columns instead, so the panel stays a compact block
   whatever width it is handed. */
@container demo-panel (min-width: 560px) {
  .demo-panel__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-30) var(--space-40);
    align-items: start;
  }

  /* The rules and top padding exist to separate stacked groups. Side by side
     they draw lines across the middle of the panel instead. */
  .demo-group {
    border-top: none;
    padding-top: 0;
    margin: 0;
  }

  .demo-group + .demo-group { margin-top: 0; }

  .demo-panel__head,
  .demo-panel__note { padding-inline: var(--space-30); }

  .demo-panel__foot { flex-direction: row; justify-content: center; }
  .demo-panel__foot .lwn-btn { width: auto; }
}

.demo-group {
  border: none;
  border-top: 1px solid var(--color-line-200);
  margin: 0;
  padding: var(--space-30) 0 0;
}

.demo-group:first-child { border-top: none; padding-top: 0; }
.demo-group + .demo-group { margin-top: var(--space-30); }

.demo-group legend,
.demo-group > summary {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-500);
  padding: 0;
  margin-bottom: 12px;
}

/* Segmented control (stepper style) --------------------------------------- */

.demo-segmented {
  display: flex;
  border: 1px solid var(--color-line-200);
  border-radius: 6px;
  overflow: hidden;
}

.demo-segmented label { flex: 1; }

.demo-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.demo-segmented span {
  display: block;
  text-align: center;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--color-ink-600);
  padding: 9px 4px;
  cursor: pointer;
}

.demo-segmented label + label span { border-inline-start: 1px solid var(--color-line-200); }

.demo-segmented input:checked + span {
  background: var(--color-primary);
  color: var(--color-base);
}

.demo-segmented input:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Radio and switch rows --------------------------------------------------- */

.demo-radios { display: flex; flex-direction: column; gap: 10px; }

.demo-radios label,
.demo-switch {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-xs);
  color: var(--color-contrast);
  line-height: var(--lh-snug);
  cursor: pointer;
}

.demo-switch + .demo-switch { margin-top: 12px; }

.demo-radios input,
.demo-switch input {
  margin: 1px 0 0;
  accent-color: var(--color-primary);
  flex: 0 0 auto;
}

.demo-radios span em,
.demo-switch span em {
  display: block;
  font-style: normal;
  font-size: var(--text-2xs);
  color: var(--color-ink-500);
  margin-top: 2px;
}

/* Color ------------------------------------------------------------------- */

.demo-color { display: flex; align-items: center; gap: 12px; }

.demo-color input[type='color'] {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-line-200);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
}

.demo-swatches { display: flex; gap: 8px; flex-wrap: wrap; }

.demo-swatches button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgb(23 24 26 / 12%);
  background: var(--sw);
  cursor: pointer;
  padding: 0;
}

.demo-swatches button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.demo-hint {
  font-size: var(--text-2xs);
  line-height: var(--lh-snug);
  color: var(--color-ink-500);
  margin: 10px 0 0;
}

/* Reserves its own height because the text changes as the color does, and a
   panel that reflows under the cursor while you drag the picker is unusable. */
.demo-hint--live {
  color: var(--color-ink-600);
  min-height: 2.4em;
}

/* Labels ------------------------------------------------------------------ */

.demo-group--details > summary { cursor: pointer; margin-bottom: 0; }
.demo-group--details[open] > summary { margin-bottom: 12px; }

.demo-labels { display: flex; flex-direction: column; gap: 10px; }

.demo-labels label {
  display: block;
  font-size: var(--text-2xs);
  color: var(--color-ink-500);
}

.demo-labels input {
  width: 100%;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-contrast);
  border: 1px solid var(--color-line-300);
  border-radius: 4px;
  padding: 8px 10px;
  margin-top: 4px;
}

.demo-labels input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: transparent;
}

/* Foot -------------------------------------------------------------------- */

.demo-panel__foot {
  border-top: 1px solid var(--color-line-200);
  background: var(--color-gray-50);
  padding: var(--space-30);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.demo-panel__foot .lwn-btn { width: 100%; text-align: center; }

.demo-panel__link {
  font-size: var(--text-2xs);
  color: var(--color-ink-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.demo-panel__link:hover { color: var(--color-primary); }

/* Target size ------------------------------------------------------------- */
/* WCAG 2.2 asks for 24x24 on anything you have to hit. The native radios and
   checkboxes here render at 13px, and their label rows come out at 19-21px
   tall, which is a small thing to land on with a thumb and a smaller one with
   a tremor. The rows carry the size rather than the boxes, because the label
   is what a click actually lands on — the box only has to be big enough to
   read as checked. */
.demo-radios label,
.demo-switch,
.demo-option {
  min-height: 24px;
  padding-block: 3px;
}
.demo-radios input,
.demo-switch input,
.demo-option input {
  width: 18px;
  height: 18px;
  margin-top: 0;
}
/* flex-start aligned the box with the first line of a two-line label; at 18px
   it needs nudging back onto that line's centre. */
.demo-radios label,
.demo-switch { align-items: center; }

/* A summary is a button. It was 20px tall with nothing but its text to hit. */
.demo-group > summary,
.demo-panel__disclosure > summary,
.demo-panel__summary {
  min-height: 26px;
  display: flex;
  align-items: center;
}

/* Not inline in a sentence — it sits alone under the panel, so the exception
   for links in running text does not cover it. */
.demo-panel__link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}