/**
 * Shared booking-page styles
 *
 * Used by: day-pass-booking.php, virtual-office-booking.php
 *
 * Every rule below was byte-for-byte identical (or trivially equivalent,
 * e.g. a combined selector split into two) in both templates' original
 * inline <style> blocks, OR is an independent CSS custom property that
 * does not conflict with either page's remaining page-specific :root
 * declarations. Anything that differed even slightly between the two
 * pages (sizing, colors, selectors, !important usage) was deliberately
 * left inline per-page rather than force-merged — see task-D2-report.md.
 *
 * Load this via a <link> BEFORE each template's page-specific inline
 * <style> block so per-page overrides still win the cascade.
 */

:root {
  --worq-orange:       #eb8902;
  --worq-orange-dark:  #d95827;
  --worq-orange-light: #faae7b;
  --worq-navy:         #1d2d44;
  --worq-grey:         #42606e;
  --worq-off-white:    #fafaf6;
  --worq-white:        #ffffff;
  --worq-bg:           #f0eee2;
  --worq-border:       #d5d4cb;
}

/* ── Tailwind orange → WORQ brand orange ─────────────────── */
.text-orange-500 { color: var(--worq-orange) !important; }
.text-orange-400 { color: var(--worq-orange) !important; }
.bg-orange-500 { background-color: var(--worq-orange) !important; }
.border-orange-500 { border-color: var(--worq-orange) !important; }
.hover\:bg-orange-600:hover { background-color: var(--worq-orange-dark) !important; }
.hover\:text-orange-500:hover { color: var(--worq-orange) !important; }

* { box-sizing: border-box; }
#main-wrap {
  max-width: 100%;
  font-family: 'PT Sans Caption', Helvetica, Arial, sans-serif;
  background-color: var(--worq-bg);
  color: var(--worq-navy);
  -webkit-font-smoothing: antialiased;
  font-size: 14px; line-height: 1.5;
}
#main-wrap * { font-size: inherit; }

/* Tailwind preflight is disabled in the build, which dropped its
   `button,input,select,textarea { font-family: inherit }` normalization.
   The parent theme's Meyer reset excludes form controls, so without this the
   primary CTA buttons fall back to the UA form font on some browsers. */
#main-wrap button, #main-wrap input, #main-wrap select, #main-wrap textarea { font-family: inherit; }

/* ── Section heading tag (title/subtitle sizes differ per page — kept inline) ── */
.section-tag { color: var(--worq-navy); font-size: 11px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; display: block; }
.section-title span:first-child { color: var(--worq-orange); }

/* ── Step dot base transition (active/done states differ per page — kept inline) ── */
.step-dot { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Plan card selected check-mark fill ── */
.plan-card.selected .check-mark { background: var(--worq-orange); border-color: var(--worq-orange); }

/* ── Field error state ── */
.field-input.error { border-color: #ef4444; background: #fffafb; }

/* ── T&C checkbox ── */
.tc-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.tc-check input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--worq-orange); flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.error-msg.show { display: block; }

/* ── Inclusions dot ── */
.inclusion-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--worq-orange); flex-shrink: 0; margin-top: 5px; }

/* ── Sidebar summary rows ── */
.sidebar-row { display: flex; justify-content: space-between; padding-bottom: 8px; }
.sidebar-divider { margin: 12px 0; border-top: 1px solid rgba(255,255,255,0.1); }

/* ── Mobile sticky-bar body padding (the bar itself uses per-page IDs — kept inline) ── */
@media (max-width: 1023px) { main { padding-bottom: 80px !important; } }

/* ── Step visibility ── */
.hidden-step { display: none !important; }