/* ===== MD: Advertising booking form (mda_booking_form shortcode) ===== */

.mda-bookingform { margin: 18px 0 36px; }

/* Every real <button> in this form reuses site classes like .md-btn that
   were only ever written for <a> tags before now. Without an explicit
   appearance reset, Chrome's automatic dark-mode styling for native form
   controls overrides the intended white/green look with a dark UA button
   even though the site CSS does set its own background - confirmed by
   testing in a dark-mode browser. font-family is reset too since buttons
   don't inherit it by default the way links do. */
.mda-bookingform button {
  appearance: none; -webkit-appearance: none; font-family: inherit;
}

.mda-noscript-notice {
  padding: 14px 18px; background: var(--md-cream); border: 1px solid var(--md-border);
  border-radius: var(--md-radius); font-size: .9rem; color: var(--md-ink);
}

/* Step indicator - 3 steps now (5 Aug 2026): Choose a duration / Create
   your advert / Review and pay. The old separate "choose a start date"
   step is gone - the start date is computed automatically and shown as
   part of Step 1's own summary. */
.mda-steps {
  display: flex; flex-wrap: wrap; gap: 6px 4px; list-style: none; margin: 0 0 26px; padding: 0;
  font-size: .78rem; font-weight: 600; color: var(--md-muted);
}
.mda-steps li {
  padding: 9px 14px; background: var(--md-cream); border: 1px solid var(--md-border); border-radius: 20px;
  min-height: 44px; display: flex; align-items: center;
}
.mda-steps li.is-active { background: var(--md-green); border-color: var(--md-green); color: #fff; }
.mda-steps li.is-complete { background: #fff; border-color: var(--md-green); color: var(--md-green-dark); }

/* Error summary */
.mda-form-errors {
  margin: 0 0 22px; padding: 14px 18px; background: #FBEAEA; border: 1px solid #E0A6A0;
  border-radius: var(--md-radius); color: #7A2E27; font-size: .88rem;
}
.mda-form-errors p { margin: 0 0 6px; }
.mda-form-errors ul { margin: 0; padding-left: 20px; }
.mda-form-errors a { color: #7A2E27; text-decoration: underline; }

.mda-bookingform-layout { display: block; }

.mda-step { padding: 26px 0; border-bottom: 1px solid var(--md-border); }
.mda-step:last-child { border-bottom: none; }
.mda-step-heading { margin: 0 0 18px; }
.mda-step-heading:focus-visible { outline: none; } /* Programmatic focus target for the step transition, not a real interactive control - no visible focus ring needed. */

/* --- Step 1: duration choice (7 Aug 2026 - originally four fixed
   packages: 7/14/30/60 days; repriced 5 Sep 2026 to three fixed
   packages - 30/60/90 days, £75/£135/£180 - with 30 days now the public
   minimum and the old 7-day/14-day options removed entirely). Real
   <input type="radio"> elements grouped
   by name, styled as cards - genuine native radiogroup behaviour
   (arrow-key navigation, correct screen-reader "selected"/group
   announcements) rather than a hand-rolled aria-pressed button set,
   since these are mutually exclusive single-choice options, not
   independent toggles. The radio itself is visually hidden with a
   standard clip-based technique (never display:none, so it stays in
   the tab order and keyboard-focusable); :has() is used for both the
   checked and focus-visible states, which every evergreen browser has
   supported for some time. Border width is constant (2px, transparent
   when unselected) rather than changing on :checked, so selecting a
   card never shifts any surrounding layout.

   Card content hierarchy, refined this pass per Harry's own brief
   ("the existing package cards currently contain excess vertical space
   and the Best value treatment affects their balance"): a small
   uppercase "N DAYS" label, a strong (but not oversized) total price as
   the visually dominant line, and a muted, smaller "£X.XX per day" line
   beneath it. All three sit inside .mda-duration-choice-inner, a flex
   column that CSS Grid stretches to equal height across the row - the
   Best value badge is a SIBLING of .mda-duration-choice-inner (appended
   directly to the card in JS, not inside the inner content block), an
   absolutely-positioned pill overlapping the card's own top border, so
   it never adds to the inner content's height and all three cards stay
   exactly the same height regardless of which one carries it. Column
   count changed 4->3 for the 5 Sep 2026 repricing - still a fixed
   repeat(3,1fr), not auto-fit, since exactly three packages are always
   offered publicly (matches the same reasoning the original four-column
   rule used). */
.mda-duration-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 640px; margin: 0 0 20px; }
.mda-duration-choice {
  position: relative; display: flex; cursor: pointer;
  border: 2px solid transparent; background: #fff; box-shadow: inset 0 0 0 1px var(--md-border);
  border-radius: var(--md-radius); padding: 14px 6px 12px;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.mda-duration-choice:hover { box-shadow: inset 0 0 0 1px var(--md-green); }
.mda-duration-choice-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; text-align: center; gap: 3px;
}
.mda-duration-radio {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.mda-duration-choice:has(.mda-duration-radio:focus-visible) { outline: 2px solid var(--md-green); outline-offset: 2px; }
.mda-duration-choice:has(.mda-duration-radio:checked) {
  border-color: var(--md-green); background: var(--md-cream); box-shadow: none;
}
.mda-duration-choice-days {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--md-muted);
}
.mda-duration-choice-price { font-size: 1.12rem; font-weight: 700; color: var(--md-ink); line-height: 1.15; }
.mda-duration-choice:has(.mda-duration-radio:checked) .mda-duration-choice-price { color: var(--md-green-dark); }
.mda-duration-choice-daily { font-size: .72rem; color: var(--md-muted); }
.mda-duration-choice-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 2px 9px; border-radius: 10px; white-space: nowrap;
  background: var(--md-green); color: #fff; font-size: .6rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Next-available-slot summary - text-based, never colour-only, and never
   names which business/campaign holds the currently-booked period (only
   the date itself), matching the same disclosure rule the old calendar
   panel followed. */
.mda-nextslot {
  max-width: 560px; margin: 0 0 18px; padding: 16px 20px; background: var(--md-cream);
  border: 1px solid var(--md-border); border-radius: var(--md-radius); font-size: .9rem; color: #3E4C59;
}
.mda-nextslot p { margin: 0 0 6px; }
.mda-nextslot p:last-child { margin-bottom: 0; }
.mda-nextslot-dates { font-size: .98rem; }
.mda-nextslot-dates strong { color: var(--md-ink); }
.mda-nextslot-through { color: var(--md-muted); }
.mda-nextslot-price { color: var(--md-green-dark); }
.mda-availability-loading { color: var(--md-muted); }
.mda-availability-none { color: #A3362D; }
.mda-packages-note { font-size: .82rem; color: var(--md-muted); margin: 16px 0 18px; }

/* Step 2: advert details form */
.mda-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; max-width: 480px; }
.mda-field label { font-size: .84rem; font-weight: 600; color: var(--md-ink); }
.mda-field input[type="text"], .mda-field input[type="email"], .mda-field input[type="tel"],
.mda-field input[type="url"], .mda-field input[type="file"], .mda-field textarea, .mda-field select {
  min-height: 44px; padding: 10px 14px; border: 1px solid var(--md-border); border-radius: var(--md-radius);
  font: inherit; font-size: .92rem; color: var(--md-ink); background: #fff; box-sizing: border-box; width: 100%;
}
.mda-field textarea { min-height: 88px; resize: vertical; }
.mda-field input:focus-visible, .mda-field textarea:focus-visible, .mda-field select:focus-visible {
  outline: 2px solid var(--md-green); outline-offset: 1px;
}
.mda-counter { align-self: flex-end; font-size: .72rem; color: var(--md-muted); }
/* Advertising UX/UI pass (5 Sep 2026): a short, quiet explanatory line
   under a field - used for the CTA-choice ("choose whichever best
   describes...") and image-upload ("a clear logo usually works
   best..."/2MB, JPG/PNG/WebP) helper text. Deliberately not styled as
   an error/warning - same muted tone as the existing counter, just
   left-aligned and allowed to wrap across the field's own max-width. */
.mda-field-hint { font-size: .78rem; line-height: 1.4; color: var(--md-muted); margin: 0; }

/* Honeypot: visually hidden but present in the DOM/tab order avoided via
   tabindex="-1" on the input; off-screen positioning (not display:none) so
   basic bots that skip hidden fields still fill it in. */
.mda-field-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.mda-field-checkbox { flex-direction: row; align-items: flex-start; gap: 10px; max-width: 560px; }
.mda-field-checkbox input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.mda-field-checkbox label { font-size: .84rem; font-weight: 400; line-height: 1.5; }
.mda-field-checkbox a { color: var(--md-green); }

/* Step 3: review. .mda-editlink is a plain text-style back-link, not a
   full button - deliberately lower visual weight than "Pay securely",
   which must stay the unambiguous primary action on this step. */
.mda-editlink {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  background: none; border: none; padding: 0; margin: 0 0 16px; display: inline-block;
  color: var(--md-green-dark); font-size: .86rem; font-weight: 600; text-decoration: underline;
  min-height: 32px;
}
.mda-editlink:hover { color: var(--md-green); }
.mda-editlink:focus-visible { outline: 2px solid var(--md-green); outline-offset: 2px; }
.mda-review-summary table { border-collapse: collapse; }
.mda-review-summary th, .mda-review-summary td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--md-border); font-size: .88rem; }
.mda-review-summary th { color: var(--md-muted); font-weight: 600; white-space: nowrap; }

/* Live preview - a plain full-width section in normal document flow, not
   a boxed sidebar widget or a second card-inside-a-box - the real
   .md-adcard component already supplies its own card styling. Now shown
   from Step 2 onward (as soon as there's real advert content to preview
   against), not just Step 3. */
.mda-bookingform-preview { padding: 28px 0; border-top: 1px solid var(--md-border); }
.mda-bookingform-preview .mda-step-heading { margin: 0 0 4px; }
.mda-bookingform-preview-note { font-size: .88rem; color: var(--md-muted); margin: 0 0 20px; }
#mda-live-preview .md-featured { display: block; }
.mda-booking-caption { margin-top: 14px; font-size: .86rem; color: var(--md-muted); }
.mda-booking-caption strong { color: var(--md-ink); font-weight: 600; }

.mda-date-feedback { margin: 10px 0 0; font-size: .86rem; color: var(--md-green-dark); font-weight: 600; }
.mda-date-feedback.mda-date-unavailable { color: #A3362D; }

@media (max-width: 599px) {
  .mda-steps li { font-size: .72rem; padding: 8px 11px; }
  .mda-nextslot { padding: 14px 16px; }
  /* 5 Sep 2026 repricing pass: was "two cards per row, two rows" for the
     old four-package layout - with exactly three packages that would
     mean an unbalanced 2-then-1 row (an orphaned third card at half
     width). A single stacked column reads as a clean, deliberate "one
     card per row" mobile pattern instead. This isn't a style
     preference - measured directly against the real rendered price
     text ("£135.00 total" etc, ~111px wide in the actual site font):
     a 3-across mobile grid at ~320-390px viewport widths only leaves
     ~85-95px per card, well under the ~111px the longest price string
     needs, which would force it to wrap or clip; a single column gives
     each card the full ~286-300px content width already proven
     comfortable elsewhere on this site at these widths, with no
     wrapping risk. */
  .mda-duration-choices { grid-template-columns: repeat(1, 1fr); gap: 10px; }
  .mda-duration-choice { padding: 14px 16px 12px; min-height: 44px; }
}