/* Bureau Brand System — Brand Overview v2.0 (2025) */

@font-face {
  font-family: "Acid Grotesk";
  src: url("/fonts/FFF-AcidGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acid Grotesk";
  src: url("/fonts/FFF-AcidGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acid Grotesk";
  src: url("/fonts/FFF-AcidGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "National 2 Condensed";
  src: url("/fonts/national-2-condensed-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quadrant Text";
  src: url("/fonts/QuadrantText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-canary-yellow: #fffd6d;
  --color-warm-grey: #c4c3c1;
  --color-mid-grey: #647170;
  --color-steel-blue: #213741;

  --color-off-white: #f7f4e7;
  --color-bright-blue: #3171f1;
  --color-lilac: #c4c0f9;
  --color-red-orange: #ff603b;

  --color-bg: var(--color-off-white);
  --color-surface: #ffffff;
  --color-text: var(--color-steel-blue);
  --color-accent: var(--color-canary-yellow);
  --color-muted: var(--color-mid-grey);
  --color-border: rgba(33, 55, 65, 0.18);
  --color-error: var(--color-red-orange);
  --color-focus: var(--color-bright-blue);

  --font-display: "National 2 Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Acid Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Quadrant Text", "JetBrains Mono", "Courier New", monospace;

  --display-leading: 0.9;
  --display-tracking: -0.05em;

  --body-leading: 1.4;
  --body-tracking: 0.02em;

  --mono-leading: 1.3;
  --mono-tracking: 0.1em;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--body-leading);
  letter-spacing: var(--body-tracking);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 56px;
  padding-right: max(24px, env(safe-area-inset-right));
  padding-bottom: max(96px, env(safe-area-inset-bottom));
  padding-left: max(24px, env(safe-area-inset-left));
}

.brand-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}

.brand-bar img {
  display: block;
  height: 48px;
  width: auto;
  background: transparent;
}

.brand-bar .brand-suffix {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-mid-grey);
  border-left: 1px solid var(--color-border);
  padding-left: 14px;
  line-height: 1;
}

/* Logo lockup — "b" mark + BUREAU wordmark, matches the header on
   delivery.withbureau.com. Swap the inline SVG in index.html for the
   official asset when available. */
.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-steel-blue);
  margin-bottom: 32px;
}

.logo-lockup svg {
  display: block;
  height: 28px;
  width: auto;
}

.logo-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--color-steel-blue);
  line-height: 1;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6.5vw, 4.25rem);
  line-height: 1;
  letter-spacing: 0;
  margin: 0 0 24px;
  padding-top: 2px;
  color: var(--color-steel-blue);
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.8vw, 2.375rem);
  line-height: 1;
  letter-spacing: 0;
  margin: 0 0 18px;
  padding-top: 2px;
  color: var(--color-steel-blue);
}

header {
  margin-bottom: 44px;
}

.sub {
  font-family: var(--font-body);
  color: var(--color-mid-grey);
  font-size: 1.0625rem;
  line-height: 1;
  margin: 0 0 24px;
  max-width: 56ch;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 16px;
}

/* Hero treatment — used on the first card and the success card to match
   the look of delivery.withbureau.com (steel-blue border, rounded 18px). */
.hero-card {
  background: #fff;
  border: 2px solid var(--color-steel-blue);
  border-radius: 18px;
  padding: 36px;
  color: var(--color-steel-blue);
}

.progress {
  height: 6px;
  background: rgba(33, 55, 65, 0.12);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 12px;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-canary-yellow);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.step-indicator {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-mid-grey);
  margin: 0 0 18px;
}

.step-badge {
  display: inline-block;
  background: var(--color-red-orange);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.step-badge-yellow {
  background: var(--color-canary-yellow);
  color: var(--color-steel-blue);
}

/* Hero cards use the pill-style inputs from delivery.withbureau.com */
.hero-card label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-steel-blue);
}

.hero-card input[type="text"],
.hero-card input[type="email"],
.hero-card input[type="tel"],
.hero-card input[type="number"],
.hero-card input[type="date"],
.hero-card textarea {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  padding: 14px 18px;
  border: 1.5px solid var(--color-steel-blue);
  border-radius: 22px;
  background: var(--color-off-white);
  color: var(--color-steel-blue);
}

.hero-card textarea {
  border-radius: 18px;
  min-height: 96px;
}

.hero-card input:focus,
.hero-card textarea:focus {
  border-color: var(--color-steel-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(33, 55, 65, 0.12);
}

/* Pill button — matches the "Send verification code" / "Verify and continue"
   primary CTA on delivery.withbureau.com. */
.pill-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 999px;
  padding: 14px 26px;
  display: block;
  margin: 20px auto 0;
  background: var(--color-canary-yellow);
  color: var(--color-steel-blue);
  border: none;
  cursor: pointer;
}

.pill-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.hidden { display: none !important; }

label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-steel-blue);
  margin-bottom: 8px;
  font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: var(--font-body);
  letter-spacing: var(--body-tracking);
  background: #fff;
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-warm-grey);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgba(49, 113, 241, 0.18);
}

textarea {
  resize: vertical;
  min-height: 96px;
  font-family: var(--font-body);
}

button {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: var(--mono-tracking);
  line-height: var(--mono-leading);
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--color-canary-yellow);
  color: var(--color-steel-blue);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s, color 0.15s;
  margin-top: 16px;
}

button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

button.link {
  background: transparent;
  color: var(--color-mid-grey);
  padding: 12px 4px;
  min-height: 44px;
  margin-top: 12px;
  text-transform: none;
  letter-spacing: var(--body-tracking);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
}

button.link:hover:not(:disabled) {
  background: transparent;
  color: var(--color-steel-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hint {
  font-family: var(--font-body);
  color: var(--color-mid-grey);
  font-size: 0.875rem;
  margin: 12px 0 0;
}

.field { margin-bottom: 26px; }

.field .helper-text {
  margin: -2px 0 10px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: var(--body-tracking);
  color: var(--color-mid-grey);
  line-height: 1.45;
  max-width: 60ch;
}

.required-mark { color: var(--color-red-orange); margin-left: 4px; }

.helper-text.helper-accent { color: var(--color-red-orange); }

.optional {
  color: var(--color-mid-grey);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ── Checklist group ───────────────────────────────────────────── */
.checklist {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px 18px;
  background: #fff;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: var(--body-tracking);
  line-height: 1.4;
  text-transform: none;
  color: var(--color-steel-blue);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}

.checkbox-row:last-child { border-bottom: none; }

.checkbox-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-top: 0;
  accent-color: var(--color-canary-yellow);
  cursor: pointer;
}

/* Single-row checkbox (e.g., marketing agreement) sits on its own */
.field-checkbox .checkbox-row {
  border-bottom: none;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: rgba(255, 253, 109, 0.18);
}

/* ── File upload ───────────────────────────────────────────────── */
.file-drop {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-off-white);
  padding: 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.file-drop:hover,
.file-drop.is-drag {
  border-color: var(--color-steel-blue);
  background: #fff;
}

.file-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-drop-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-steel-blue);
}

.file-drop-sub {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-mid-grey);
  margin-top: 4px;
}

.file-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.file-preview-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  aspect-ratio: 1 / 1;
}

.file-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.file-preview-item .file-name {
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(33, 55, 65, 0.78);
  color: #fff;
  font-size: 0.6875rem;
  padding: 4px 6px;
  letter-spacing: var(--body-tracking);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-preview-item .remove-file {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  background: var(--color-red-orange);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.125rem;
  letter-spacing: 0;
  text-transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.file-preview-item .remove-file:hover { background: var(--color-steel-blue); color: #fff; }

.file-preview-item.is-converting {
  background: var(--color-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
}

.file-preview-item.is-converting .file-name {
  background: transparent;
  color: var(--color-mid-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  text-align: center;
  position: static;
  padding: 0;
}

.convert-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(33, 55, 65, 0.18);
  border-top-color: var(--color-steel-blue);
  animation: spin 0.9s linear infinite;
  position: absolute;
  top: calc(50% - 22px);
  left: calc(50% - 14px);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Signature pad ─────────────────────────────────────────────── */
.signature-wrap {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  position: relative;
  overflow: hidden;
}

.signature-wrap canvas {
  display: block;
  width: 100%;
  height: 200px;
  touch-action: none;
  background: #fff;
}

.signature-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid var(--color-border);
  background: var(--color-off-white);
}

.signature-hint {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-mid-grey);
}

.signature-actions button.link {
  margin: 0;
  padding: 10px 4px;
  min-height: 44px;
}

/* ── Section headings within the long form ────────────────────── */
.section-heading {
  margin: 36px 0 18px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.section-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.section-heading h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: var(--display-leading);
  letter-spacing: 0;
  margin: 0 0 8px;
  color: var(--color-steel-blue);
}

.section-heading p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-mid-grey);
  margin: 0;
  max-width: 56ch;
}

/* ── Done step ─────────────────────────────────────────────────── */
.done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.done-actions button { margin-top: 0; }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-steel-blue);
  border: 1.5px solid var(--color-steel-blue);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 14px 24px;
  min-height: 44px;
}

.btn-primary-pill {
  background: var(--color-canary-yellow);
  color: var(--color-steel-blue);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 12px 22px;
}

#details-form button[type="submit"] {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 999px;
  padding: 14px 28px;
  display: block;
  margin: 28px auto 0;
}

/* ── Progress / error states ──────────────────────────────────── */
.error {
  background: var(--color-red-orange);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: var(--body-tracking);
  margin-top: 16px;
}

.notice {
  background: var(--color-canary-yellow);
  color: var(--color-steel-blue);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: var(--body-tracking);
  margin-top: 16px;
}

.upload-progress {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-mid-grey);
  margin-top: 8px;
}

/* ── Reference image (helper photos shown next to file fields) ── */
.ref-image {
  margin-top: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-off-white);
  padding: 8px;
  display: inline-block;
}

.ref-image img {
  max-width: 220px;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

.ref-image figcaption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-mid-grey);
  margin-top: 6px;
}

/* ── Mobile polish ─────────────────────────────────────────────────
   Tighter padding, taller signature, stacked done actions, and the
   key win — a sticky primary CTA pinned to the bottom of the viewport
   so installers never have to thumb-scroll to advance a step. */
@media (max-width: 640px) {
  main {
    padding-top: 28px;
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(132px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  header { margin-bottom: 28px; }

  .card { padding: 20px; }
  .hero-card { padding: 22px; border-radius: 14px; }

  .step-badge { margin-bottom: 18px; }

  /* Give the signature pad real room to draw on a phone. */
  .signature-wrap canvas { height: 260px; }

  /* Stack the post-submit buttons full-width, easier to tap one-handed. */
  .done-actions { flex-direction: column; }
  .done-actions button,
  .done-actions a { width: 100%; text-align: center; }

  /* ── Sticky primary CTA ─────────────────────────────────────────
     Pin each step's submit button to the bottom of the viewport so it
     stays within thumb reach as the user scrolls through long content
     (e.g. step 2's checklist or step 3's photo grid). Stays inside the
     form so native submit still fires. The pill picks up a soft drop
     shadow so it reads cleanly over scrolling content above. */
  #step-contact .pill-btn,
  #step-issue .pill-btn,
  #step-booth .pill-btn {
    position: sticky;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 5;
    width: 100%;
    margin: 24px 0 0;
    padding: 16px 22px;
    box-shadow: 0 10px 24px rgba(33, 55, 65, 0.22);
  }

  /* Back link sits below the sticky button but stays inline. */
  button.link[data-back] {
    width: 100%;
    text-align: center;
  }

  /* One column of model chips on small screens. */
  .model-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Privacy note under the header ─────────────────────────────── */
.privacy-note {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-mid-grey);
  background: rgba(33, 55, 65, 0.05);
  border-left: 3px solid var(--color-warm-grey);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 10px 14px;
  margin: 0;
  max-width: 60ch;
}

/* ── Address autocomplete ──────────────────────────────────────── */
.address-ac {
  position: relative;
}

.address-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1.5px solid var(--color-steel-blue);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(33, 55, 65, 0.16);
  max-height: 260px;
  overflow-y: auto;
}

.address-suggestion {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-steel-blue);
  cursor: pointer;
  line-height: 1.35;
}

.address-suggestion.is-active,
.address-suggestion:hover {
  background: rgba(255, 253, 109, 0.35);
}

/* ── Select dropdowns ──────────────────────────────────────────── */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23213741' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.hero-card select {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  padding: 14px 40px 14px 18px;
  border: 1.5px solid var(--color-steel-blue);
  border-radius: 22px;
  background-color: var(--color-off-white);
  color: var(--color-steel-blue);
}

.hero-card select:focus {
  border-color: var(--color-steel-blue);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(33, 55, 65, 0.12);
}

/* ── Multi-select checkbox grid (issue categories, booth sizes) ─── */
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.model-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: var(--body-tracking);
  text-transform: none;
  color: var(--color-steel-blue);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.model-chip:hover { border-color: var(--color-steel-blue); }

.model-chip:has(input:checked) {
  border-color: var(--color-steel-blue);
  background: rgba(255, 253, 109, 0.22);
}

.model-chip input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  accent-color: var(--color-canary-yellow);
  cursor: pointer;
}

/* ── Per-size quantity rows (appear under the booth-size grid) ──── */
.qty-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.qty-list:empty { margin-top: 0; }

.qty-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 109, 0.14);
  padding: 10px 14px;
}

.qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Per-booth serial inputs under each size's quantity */
.serial-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.serial-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-mid-grey);
  margin: 0 0 4px;
}

.serial-input {
  width: 100%;
  margin-top: 4px;
  background: #fff;
}

.qty-label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-steel-blue);
}

.qty-select {
  width: auto;
  min-width: 88px;
  flex: 0 0 auto;
  padding: 10px 36px 10px 14px;
}

/* ── Plain checkbox + word (no box, one line each) — used for the
   issue-category and booth-size multi-selects. ─────────────────── */
#issue-category-host,
#booth-sizes-host {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

#issue-category-host .model-chip,
#issue-category-host .model-chip:hover,
#issue-category-host .model-chip:has(input:checked),
#booth-sizes-host .model-chip,
#booth-sizes-host .model-chip:hover,
#booth-sizes-host .model-chip:has(input:checked) {
  border: none;
  background: none;
  padding: 0;
  white-space: nowrap;
}

/* ── Video preview tile ────────────────────────────────────────── */
.file-preview-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--color-steel-blue);
}

.file-preview-item .media-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(33, 55, 65, 0.85);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
}

/* Inline help links inside helper text. */
.helper-text a {
  color: var(--color-bright-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}