/* PWL booking modal — scoped styles (issue #145).
 * Every rule is under .pwl-booking (the partial's wrapper) or, for the tier pills the script renders into the
 * existing infobox, under #group-selector. Class names carry a pwl- prefix (state classes: is-*) so nothing
 * collides with the site's own CSS. Brand tokens are pulled from pwl-style.min.css. */
.pwl-booking,
#group-selector {
  --pwl-bg: #ffffff; --pwl-surface: #ffffff; --pwl-border: #E5E7EB; --pwl-text: #101010; --pwl-text-muted: #6b7280;
  --pwl-accent: #662581; --pwl-accent-hover: #79417F; --pwl-accent-soft: #8E5C92; --pwl-accent-contrast: #F9FAFB;
  --pwl-danger: #b3261e; --pwl-radius: 10px; --pwl-radius-sm: 6px; --pwl-shadow: 0 20px 60px rgba(0,0,0,0.25);
  --pwl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.pwl-booking { font-family: var(--pwl-font); color: var(--pwl-text); }
.pwl-booking, .pwl-booking *, .pwl-booking *::before, .pwl-booking *::after { box-sizing: border-box; }
/* ---- Tier pills the script renders into the existing infobox (#group-selector) ---- */
#group-selector .pwl-group-pill-row { display: flex; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
#group-selector .pwl-group-pill {
    border: 1.5px solid var(--pwl-border); background: transparent; border-radius: 999px;
    padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--pwl-text);
  }
#group-selector .pwl-group-pill.is-active { background: var(--pwl-accent); border-color: var(--pwl-accent); color: var(--pwl-accent-contrast); }
/* ---- Overlay ---- */
.pwl-booking .pwl-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 18, 15, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
  }
.pwl-booking .pwl-overlay.is-open { display: flex; }
.pwl-booking .pwl-modal {
    background: var(--pwl-surface);
    border-radius: var(--pwl-radius);
    box-shadow: var(--pwl-shadow);
    width: 100%;
    max-width: 920px;
    max-height: 90vh;
    display: grid;
    grid-template-columns: 280px 1fr;
    /* A definite row, not `auto`: with an auto row the track is as tall as the content and only the modal box is cut
       at max-height, so a tall step-2 form pushed its footer (the Pay button) outside the visible modal. minmax(0, 1fr)
       makes the row follow max-height, the panel then scrolls its body and keeps header and footer in view. */
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }
/* ---- Left info panel (reused across both steps) ---- */
.pwl-booking .pwl-info {
    background: #faf9f6;
    border-right: 1px solid var(--pwl-border);
    padding: 28px 24px;
    overflow-y: auto;
  }
.pwl-booking .pwl-info h2 { font-size: 18px; line-height: 1.35; margin: 0 0 12px; }
.pwl-booking .pwl-info .pwl-desc { font-size: 13.5px; color: var(--pwl-text-muted); line-height: 1.5; margin-bottom: 20px; }
.pwl-booking .pwl-meta { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
/* margin: 0 and the padding below, because the Ghost theme reaches this list too (issue #353): `div.text ul li` (margin 10px 0 0 22px, specificity 0,1,3)
   and `div.text ul li:first-child` (margin 0 0 0 24px, specificity 0,2,3). The :first-child twin of our rule (0,3,1) is what beats the second one;
   without it the first row stayed 24px indented while the others were reset. */
.pwl-booking .pwl-meta li,
.pwl-booking .pwl-meta li:first-child { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; color: var(--pwl-text); }
.pwl-booking .pwl-meta li svg { flex-shrink: 0; opacity: .65; }
/* Equal icon slots (issue #353 follow-up): the three emoji icons are 11 to 19px wide, so the text after them started at three different x positions (the
   duration earlier than the price, the stopwatch looking further left). Each icon sits in the same fixed-width, centred slot; the li's 8px gap then gives
   every text the same start. The icons themselves are unchanged. */
.pwl-booking .pwl-meta .pwl-meta-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; line-height: 1; }
.pwl-booking .pwl-selection {
    margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--pwl-border);
    font-size: 13.5px; display: none;
  }
.pwl-booking .pwl-selection.is-shown { display: block; }
.pwl-booking .pwl-selection strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
/* ---- Right panel ---- */
.pwl-booking .pwl-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
.pwl-booking .pwl-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; border-bottom: 1px solid var(--pwl-border);
    flex-shrink: 0;
  }
.pwl-booking .pwl-steps { font-size: 12.5px; color: var(--pwl-text-muted); font-weight: 600; letter-spacing: .02em; }
.pwl-booking .pwl-close {
    border: none; background: transparent; cursor: pointer; font-size: 20px;
    color: var(--pwl-text-muted); line-height: 1; padding: 4px 8px; border-radius: 6px;
  }
.pwl-booking .pwl-close:hover { background: var(--pwl-border); }
.pwl-booking .pwl-body { padding: 20px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.pwl-booking .pwl-step { display: none; }
.pwl-booking .pwl-step.is-active { display: block; }
/* Step 1: calendar + times.
     Flatpickr's inline calendar is a fixed ~308px, so the holder must not
     be given a flex-basis larger than that or the row overflows the panel
     and the times column wraps underneath. Calendar sits at its natural
     width; the times column takes whatever is left. */
.pwl-booking .pwl-step1-grid { display: flex; gap: 20px; flex-wrap: nowrap; align-items: flex-start; }
.pwl-booking .pwl-calendar-holder { flex: 0 0 auto; }
/* Flatpickr renders an inline calendar as a sibling of this input */
.pwl-booking .flatpickr-calendar.inline { margin-top: 4px; }
/* Calendar header (issue #353). The calendar sits inside .pwl-form-row, so the form-field rule above (width 100%, padding 10px 12px) used to reach
   flatpickr's own month select and year input: the 40px select was cut off by the 34px header (overflow hidden) and, being 100% wide, pushed the
   year below the header where it was clipped. Both stock controls are replaced by one labelled month + year select (JS: buildMonthYearSelect);
   they stay in the DOM for flatpickr and are only hidden. The new select is 26px high (a native select ignores line-height and would be 29px) so its border and focus ring fit the header. */
.pwl-booking .flatpickr-current-month .flatpickr-monthDropdown-months,
.pwl-booking .flatpickr-current-month .numInputWrapper { display: none; }
/* Stock header padding is 7.5px; 4px + the 26px select centres it in the 34px header. */
.pwl-booking .flatpickr-current-month { padding-top: 4px; }
.pwl-booking .flatpickr-current-month select.pwl-month-year {
    width: auto; max-width: 100%; height: 26px; margin: 0; padding: 3px 12px; line-height: 1.2;
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--pwl-text);
    background: var(--pwl-surface); border: 1px solid var(--pwl-border); border-radius: var(--pwl-radius-sm);
    cursor: pointer;
  }
.pwl-booking .flatpickr-current-month select.pwl-month-year:hover { background: #f3f4f6; }
/* The header clips whatever is drawn outside it, so the focus ring is inset. */
.pwl-booking .flatpickr-current-month select.pwl-month-year:focus-visible { outline: 2px solid var(--pwl-accent); outline-offset: -2px; }
.pwl-booking .pwl-times {
    flex: 1 1 190px;
    min-width: 0;
    display: flex; flex-direction: column; gap: 8px;
  }
.pwl-booking .pwl-time-slot-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
.pwl-booking .pwl-time-slot {
    border: 1.5px solid var(--pwl-border);
    background: var(--pwl-surface);
    border-radius: var(--pwl-radius-sm);
    padding: 9px 8px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    color: var(--pwl-text);
  }
.pwl-booking .pwl-time-slot:hover { border-color: var(--pwl-accent); }
.pwl-booking .pwl-time-slot.is-selected { background: var(--pwl-accent); border-color: var(--pwl-accent); color: var(--pwl-accent-contrast); }
.pwl-booking .pwl-times-empty {
    grid-column: 1 / -1;
    font-size: 13px; color: var(--pwl-text-muted);
    padding: 14px 4px; line-height: 1.4;
  }
/* Hidden from sighted users, but still in the accessibility tree and
     form.elements — unlike display:none, which would remove it from both. */
.pwl-booking .pwl-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; max-width: 1px; /* max-width: a width:100% input rule must not widen the scrollable area */
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
  }
/* Step 2: form */
.pwl-booking .pwl-form-row { margin-bottom: 16px; }
.pwl-booking .pwl-form-row label {
    display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px;
  }
.pwl-booking .pwl-form-row .pwl-req { color: var(--pwl-danger); }
.pwl-booking .pwl-form-row input,
.pwl-booking .pwl-form-row textarea,
.pwl-booking .pwl-form-row select {
    width: 100%;
    border: 1.5px solid var(--pwl-border);
    border-radius: var(--pwl-radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--pwl-text);
    background: var(--pwl-surface);
  }
.pwl-booking .pwl-form-row input:focus,
.pwl-booking .pwl-form-row textarea:focus,
.pwl-booking .pwl-form-row select:focus {
    outline: none; border-color: var(--pwl-accent);
    box-shadow: 0 0 0 3px rgba(122, 92, 62, 0.15);
  }
.pwl-booking .pwl-form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pwl-booking .pwl-form-error {
    font-size: 12.5px; color: var(--pwl-danger); margin-top: 5px; display: none;
  }
.pwl-booking .pwl-form-row.is-invalid input,
.pwl-booking .pwl-form-row.is-invalid textarea { border-color: var(--pwl-danger); }
.pwl-booking .pwl-form-row.is-invalid .pwl-form-error { display: block; }
.pwl-booking .pwl-tier-note {
    font-size: 12.5px; color: var(--pwl-text-muted); background: #faf9f6;
    border: 1px solid var(--pwl-border); border-radius: var(--pwl-radius-sm);
    padding: 9px 11px; margin-bottom: 16px; display: none;
  }
.pwl-booking .pwl-tier-note.is-shown { display: block; }
.pwl-booking .pwl-agree-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; font-size: 13px; margin-top: 4px; }
.pwl-booking .pwl-agree-row .pwl-form-error { flex-basis: 100%; margin: 0 0 0 26px; }
.pwl-booking .pwl-agree-row.is-invalid label { color: var(--pwl-danger); }
.pwl-booking .pwl-agree-row.is-invalid .pwl-form-error { display: block; }
.pwl-booking .pwl-submit-error {
    display: none; margin-top: 14px; padding: 10px 12px; font-size: 13px;
    color: var(--pwl-danger); background: #fdf2f0;
    border: 1px solid var(--pwl-danger); border-radius: var(--pwl-radius-sm);
  }
.pwl-booking .pwl-submit-error.is-shown { display: block; }
.pwl-booking .pwl-agree-row a { color: var(--pwl-accent); }
.pwl-booking .pwl-agree-row input { width: auto; margin-top: 3px; }
.pwl-booking .pwl-footer {
    padding: 14px 24px; border-top: 1px solid var(--pwl-border);
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
  }
.pwl-booking .pwl-btn {
    border: none; border-radius: var(--pwl-radius-sm); padding: 11px 18px;
    font-size: 14px; font-weight: 600; cursor: pointer;
  }
.pwl-booking .pwl-btn-ghost { background: transparent; color: var(--pwl-text-muted); }
.pwl-booking .pwl-btn-ghost:hover { color: var(--pwl-text); }
.pwl-booking .pwl-btn-primary { background: var(--pwl-accent); color: var(--pwl-accent-contrast); }
.pwl-booking .pwl-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
/* Loading state */
.pwl-booking .pwl-loading {
    display: none;
    align-items: center; gap: 10px;
    font-size: 13.5px; color: var(--pwl-text-muted);
  }
.pwl-booking .pwl-loading.is-shown { display: flex; }
.pwl-booking .pwl-spinner {
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid var(--pwl-border); border-top-color: var(--pwl-accent);
    animation: pwl-spin .7s linear infinite;
  }
@keyframes pwl-spin { to { transform: rotate(360deg); } }
/* Narrow desktop / tablet: the modal shrinks but stays two-column, so the
     308px calendar + times row no longer fits side by side. Stack instead of
     letting it overflow. */
@media (max-width: 900px) {
  .pwl-booking .pwl-step1-grid { flex-direction: column; align-items: stretch; }
  .pwl-booking .pwl-times { flex: none; }
  .pwl-booking .pwl-time-slot-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); max-height: none; }
}
/* Mobile. The overlay (fixed, inset:0, so it is exactly the visible area even while the browser toolbar shows or
     hides) is the scroll container and the modal grows with its content; the old modal height of 100vh was the
     LARGE viewport, taller than the visible area on phones, which cut off the footer buttons. The panel header and
     footer stay sticky so Close and Continue are always reachable; the page behind keeps its position (the page
     scroll lock is on the page's scrolling element, see lockPageScroll). */
@media (max-width: 720px) {
  /* display:block, not flex: a flex overlay of fixed height stretches the modal to exactly that height and the
     content then overflows below the white box (the dimmed page shows through when scrolling). */
  .pwl-booking .pwl-overlay { padding: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .pwl-booking .pwl-overlay.is-open { display: block; }
  .pwl-booking .pwl-modal {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      border-radius: 0; height: auto; min-height: 100%; max-height: none; overflow: visible;
    }
  .pwl-booking .pwl-info { border-right: none; border-bottom: 1px solid var(--pwl-border); padding: 18px 20px; overflow: visible; }
  .pwl-booking .pwl-selection { display: none !important; }
  .pwl-booking .pwl-step1-grid { flex-direction: column; }
  .pwl-booking .pwl-times { flex: none; max-height: none; }
  .pwl-booking .pwl-form-two { grid-template-columns: 1fr; }
  .pwl-booking .pwl-panel { min-height: auto; }
  .pwl-booking .pwl-body { overflow: visible; min-height: auto; }
  .pwl-booking .pwl-panel-header { position: sticky; top: 0; z-index: 2; background: var(--pwl-surface); }
  .pwl-booking .pwl-footer { position: sticky; bottom: 0; z-index: 2; background: var(--pwl-surface); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}