/* Order modal for /ugc-brands/ (section 26 of the page). Kept out of the page
   so the inline HTML stays under its 70 KB budget. Linked after the inline
   <style> on purpose: several rules here tie on specificity with page rules
   (.order-pay[disabled] vs .btn[disabled]) and must come later to win. */

html.is-modal-open { overflow: hidden; }

.order-dialog {
  width: min(34rem, calc(100vw - 1.5rem)); max-width: none;
  max-height: calc(100dvh - 1.5rem); margin: auto; padding: 0;
  border: 0; border-radius: 1rem; overflow: auto;
  background: #FFFFFF; color: var(--navy-950);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  /* :root is color-scheme: dark, which drew unchecked radios as solid dark
     discs on this white panel — nearly indistinguishable from checked ones */
  color-scheme: light;
}
.order-dialog::backdrop { background: rgba(27, 37, 64, 0.72); }
.order-dialog[open] { animation: order-in 180ms ease; }
@keyframes order-in { from { opacity: 0; transform: translateY(8px); } }

/* The global ring is cyan, which measures 1.60:1 on white. Navy in here. */
.order-dialog :focus-visible { outline-color: var(--navy-950); }

.order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 0.75rem; }
.order-title { font-size: 1.2rem; margin: 0; max-width: none; }
.order-count {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--navy-600); margin: 0.3rem 0 0;
}
.order-close {
  flex: none; width: 2.5rem; height: 2.5rem; cursor: pointer;
  border: 1px solid var(--line-light); border-radius: 0.5rem;
  background: transparent; color: var(--navy-950); font-size: 1.4rem; line-height: 1;
}
.order-close:hover { background: var(--off-white); }

.order-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; padding: 0 1.25rem; }
.order-progress span { height: 3px; border-radius: 3px; background: var(--line-light); transition: background-color 200ms ease; }
.order-progress span.on { background: var(--navy-950); }

.order-step { display: grid; gap: 1rem; padding: 1.25rem; }
.order-step h3 { margin: 0; font-size: 1rem; }
/* the heading takes focus only so a screen reader announces the new step */
.order-step h3:focus, .order-step h3:focus-visible { outline: none; }
.order-step fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.order-step legend {
  padding: 0; margin-bottom: 0.5rem;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-600);
}

.order-plans { display: grid; gap: 0.6rem; }
.order-plan {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.15rem 0.7rem;
  padding: 0.85rem 1rem; border: 1px solid var(--line-light); border-radius: 0.7rem; cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.order-plan input, .order-chip input { accent-color: var(--navy-950); margin: 0; align-self: center; }
.order-plan-name, .order-plan-price { font-weight: 600; }
.order-plan-price { white-space: nowrap; }
.order-plan-price span { font-size: 0.8rem; font-weight: 400; color: var(--navy-600); }
.order-plan-desc { grid-column: 2 / -1; font-size: 0.85rem; color: var(--navy-600); }

.order-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 30rem) { .order-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.order-chip {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  padding: 0.6rem 0.75rem; border: 1px solid var(--line-light); border-radius: 0.6rem; font-size: 0.9rem;
}
.order-plan:has(input:checked), .order-chip:has(input:checked) {
  border-color: var(--navy-950); box-shadow: inset 0 0 0 1px var(--navy-950); background: var(--off-white);
}

/* a text field's border is its boundary, so it needs 3:1 — slate-400 is 3.12:1 on white */
.order-dialog .field input { border-color: var(--slate-400); }
.order-hint { margin: 0; font-size: 0.8rem; color: var(--navy-600); }
.order-err { margin: 0; font-size: 0.85rem; color: #8C1D2B; }
.order-err:empty { display: none; }
.order-countries .order-err { margin-top: 0.5rem; }

.order-summary { margin: 0; border: 1px solid var(--line-light); border-radius: 0.7rem; }
.order-summary div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; }
.order-summary div + div { border-top: 1px solid var(--line-light); }
.order-summary dt { font-size: 0.9rem; color: var(--navy-600); }
.order-summary dd { margin: 0; font-weight: 600; text-align: right; }

.order-pay[disabled] {
  width: 100%; background: var(--off-white); border-color: var(--line-light);
  color: var(--navy-600); cursor: not-allowed;
}
.order-pay[disabled]:hover { transform: none; }
.order-note { margin: 0; font-size: 0.9rem; }
.order-fine { margin: 0; font-size: 0.75rem; color: var(--navy-600); }

.order-foot { display: grid; gap: 0.6rem; padding: 0.9rem 1.25rem 1.25rem; border-top: 1px solid var(--line-light); }
.order-foot .form-msg:empty { display: none; }
.order-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; }
.order-actions .btn:hover { transform: none; }
.order-actions .btn-solid[disabled] { background: var(--navy-600); color: var(--off-white); border-color: transparent; cursor: wait; }
.btn-quiet { background: transparent; color: var(--navy-950); border-color: var(--line-light); }
.btn-quiet:hover { background: var(--off-white); }