/* ============================================================
   EersteJan Designs — order page stylesheet
   Loaded after css/style.css: only what's specific to order.php
   lives here (design tokens, header/footer, buttons etc. all
   come from the global sheet).
   The banner at the top is the shared .page-banner in css/style.css.
   Structure: Layout → Ticket → Form fields → Contact-method chips
              → Consent / scope note → Submit states → Errors →
              Package picker (no/invalid ?op) → Responsive
   ============================================================ */

/* ---------- 1. Layout ---------- */

/* The shared banner sits right above: start the ticket and form close
   under it, as on the contact page. */
.page-banner + .section { padding-top: var(--space-l); }

.order-layout {
  display: grid;
  gap: var(--space-l);
  align-items: start;
}

/* ---------- 2. Order ticket (the "what you're ordering" stub) ---------- */

.order-ticket {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-l);
  border-top: 8px solid var(--color-blue);
  box-shadow: var(--shadow-card);
  padding: var(--space-m) var(--space-m) 0;
}
.order-ticket--violet { border-top-color: var(--color-violet); }
.order-ticket--ink    { border-top-color: var(--color-ink); }

.order-ticket__eyebrow {
  display: inline-block;
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1;
  color: var(--color-violet-deep);
}
.order-ticket--ink .order-ticket__eyebrow { color: var(--color-ink-soft); }

.order-ticket__name { font-size: var(--step-2); margin-top: .2rem; }
.order-ticket__summary { margin-top: .4rem; color: var(--color-ink-soft); font-size: var(--step--1); font-weight: 500; }
/* Who a package is for, when that matters (Website Upgrade: sites EersteJan built) */
.order-ticket__note {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: .8rem;
  padding: .55rem .75rem;
  border-radius: var(--radius-s);
  background: #fff4e0;
  color: #7a4a00;
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.4;
}
.order-ticket__note svg { flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: .05rem; color: #b06d00; }

/* The perforated "tear line" between package info and price — a dashed
   rule spanning the full card width, with two notches punched into the
   card's own edges. The notch color matches the section background
   behind the card (--color-cloud), so it reads as a genuine cut-out
   rather than a colored dot sitting on top. */
.order-ticket__perf {
  position: relative;
  margin-inline: calc(-1 * var(--space-m));
  margin-top: var(--space-m);
  border-top: 2px dashed var(--color-line);
}
.order-ticket__perf::before,
.order-ticket__perf::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1.5rem; height: 1.5rem;
  background: var(--color-cloud);
  border-radius: 50%;
  transform: translateY(-50%);
}
.order-ticket__perf::before { left: -.75rem; }
.order-ticket__perf::after  { right: -.75rem; }

.order-ticket__bottom { padding-bottom: var(--space-m); }

.order-ticket__price {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: 1;
  color: var(--color-ink);
  margin-top: var(--space-m);
}
.order-ticket__price-term {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--color-ink-soft);
  margin-left: .5em;
}

.order-ticket__features { margin-top: var(--space-m); display: flex; flex-direction: column; gap: .6rem; }
.order-ticket__features li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--step--1); font-weight: 500; color: var(--color-ink-soft); }
.order-ticket__features svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin-top: .15rem; color: var(--color-blue-deep); }
.order-ticket--violet .order-ticket__features svg { color: var(--color-violet-deep); }
.order-ticket__features li.is-no { opacity: .7; }
.order-ticket__features li.is-no svg { color: var(--color-red); }

.order-ticket__from-note {
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-line);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.order-ticket__mascot {
  position: absolute;
  right: -.9rem;
  bottom: -1.35rem;
  width: 5.25rem;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(20,32,43,.22));
  pointer-events: none;
}

/* ---------- 3. Form ---------- */

.order-form {
  background: var(--color-white);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: var(--space-l) var(--space-m);
}
.order-form h2 { font-size: var(--step-3); margin-bottom: var(--space-m); }

.form-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--space-m); }
.form-field label { font-weight: 700; font-size: var(--step--1); }
.form-field__required { color: var(--color-red); margin-left: .15em; }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
  font: inherit;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: .85em 1em;
  transition: border-color .18s var(--ease-standard), box-shadow .18s var(--ease-standard);
}
.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 4px rgba(0,116,230,.14);
}
.form-field textarea { min-height: 9rem; line-height: 1.55; resize: vertical; }

.form-hint { font-size: .82rem; color: var(--color-ink-soft); }

/* Live brief-quality nudge under the project details field — responds
   to typing, so it earns its motion (see .brief-hint.is-good below). */
.brief-hint { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--color-ink-soft); transition: color .2s var(--ease-standard); }
.brief-hint svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--color-violet-deep); }
.brief-hint.is-good { color: var(--color-blue-deep); font-weight: 700; }
.brief-hint.is-good svg { color: var(--color-blue-deep); }

/* ---------- 4. Preferred contact method — pill "chips" over a real
   radio group, so it stays a native, accessible fieldset underneath. ---------- */

.contact-method { border: 0; padding: 0; margin: 0 0 var(--space-m); }
.contact-method legend { font-weight: 700; font-size: var(--step--1); padding: 0; margin-bottom: .55rem; }
.contact-method__options { display: flex; flex-wrap: wrap; gap: .6rem; }
.contact-method__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6em 1.15em;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background-color .18s var(--ease-standard), border-color .18s var(--ease-standard), color .18s var(--ease-standard);
}
.contact-method__chip input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.contact-method__chip:hover { border-color: var(--color-ink-soft); }
.contact-method__chip.is-checked,
.contact-method__chip:has(input:checked) {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}
.contact-method__chip:has(input:focus-visible) {
  outline: 3px solid var(--color-blue-deep);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}

/* ---------- 5. Checkboxes (scope note + required consent) ---------- */

.form-checkbox { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: var(--space-s); }
.form-checkbox input[type="checkbox"] { width: 1.2rem; height: 1.2rem; flex-shrink: 0; margin-top: .15rem; accent-color: var(--color-blue); }
.form-checkbox label { font-size: var(--step--1); font-weight: 500; color: var(--color-ink-soft); line-height: 1.5; }

.scope-note {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s var(--ease-standard), opacity .25s var(--ease-standard), margin-top .3s var(--ease-standard);
}
.scope-note.is-visible { max-height: 10rem; opacity: 1; margin-top: .5rem; }
.scope-note p {
  font-size: var(--step--1);
  color: var(--color-violet-deep);
  background: #f6effe;
  border: 1px solid #e6d6fb;
  border-radius: var(--radius-m);
  padding: .75rem .9rem;
  font-weight: 500;
}

.consent-checkbox {
  background: var(--color-cloud);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m);
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
}
.consent-checkbox label { color: var(--color-ink); font-weight: 700; }
.consent-checkbox.has-error { border-color: var(--color-red); background: #fdecec; }

/* Honeypot — off-screen and out of tab order for every visitor, human or
   not; a real person never sees or reaches this field. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 6. Submit button loading state ---------- */

.btn--submit { position: relative; }
.btn--submit .btn__spinner { display: none; width: 1.1rem; height: 1.1rem; }
.btn--submit[data-loading="true"] .btn__label { visibility: hidden; }
.btn--submit[data-loading="true"] .btn__spinner { display: inline-flex; position: absolute; }
@keyframes order-spin { to { transform: rotate(360deg); } }
.btn__spinner svg { width: 100%; height: 100%; animation: order-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .btn__spinner svg { animation: none; }
}

/* ---------- 7. Validation errors ---------- */

.form-errors {
  background: #fdecec;
  border: 1.5px solid var(--color-red);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m);
  margin-bottom: var(--space-m);
}
.form-errors h2 { font-size: var(--step-0); color: var(--color-red); margin-bottom: .3rem; }
.form-errors ul { padding-left: 1.15rem; font-size: var(--step--1); color: var(--color-ink-soft); }
.form-errors li { margin-bottom: .15rem; }

.form-field.has-error input,
.form-field.has-error textarea { border-color: var(--color-red); }
.form-field__error { color: var(--color-red); font-size: .82rem; font-weight: 600; }

/* ---------- 8. Package picker (shown when ?op is missing or unknown) ---------- */

.order-picker { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.order-picker a {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: var(--space-m);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  text-decoration: none;
  transition: transform .2s var(--ease-standard), box-shadow .2s var(--ease-standard);
}
.order-picker a:hover, .order-picker a:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.order-picker a strong { color: var(--color-ink); font-size: var(--step-0); }
.order-picker a span { color: var(--color-ink-soft); font-size: var(--step--1); }
.order-picker-group { margin-bottom: var(--space-l); }
.order-picker-group h2 { font-size: var(--step-1); margin-bottom: var(--space-s); }

/* ---------- 9. Responsive ---------- */

@media (min-width: 60rem) {
  .order-layout {
    grid-template-columns: minmax(0, 21rem) 1fr;
    gap: var(--space-xl);
  }
  .order-ticket { position: sticky; top: calc(var(--header-h) + var(--space-m)); }
}

@media (max-width: 26rem) {
  .order-ticket__mascot { display: none; }
}