/**
 * Class browse page + booking wizard (docs/classes-plan.md phase 3).
 * Customer-facing, so kept neutral and self-contained — inherits the
 * site template's fonts/colors wherever possible.
 */

/* ---------- Browse page ---------- */

.fewc-browse { display: flex; flex-direction: column; gap: 1.25rem; }

.fewc-filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.fewc-filter-age { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }

.fewc-filter-age input { width: 5.5rem; padding: .4rem .6rem; border: 1px solid #c8c8c8; border-radius: .5rem; }

.fewc-filter-tags { display: inline-flex; flex-wrap: wrap; gap: .4rem; }

.fewc-tag-chip {
	border: 1px solid #c8c8c8; background: transparent; border-radius: 999px;
	padding: .3rem .85rem; cursor: pointer; font-size: .9em;
}

.fewc-tag-chip[aria-pressed="true"] { background: #1c4e80; border-color: #1c4e80; color: #fff; }

.fewc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }

/* ---------- Full-screen single-class page (rebook link landing) ----------
   Rendered with tmpl=component, so there is no site template to inherit
   fonts, colours or spacing from — this frame supplies its own. The header
   navy matches the email layout the customer just came from. */

.fewc-bookpage {
	min-height: 100vh; margin: 0; background: #f4f6f9; color: #1d1d1b;
	font-family: Seravek, "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px; line-height: 1.5;
}

.fewc-bookpage-head { background: #172534; padding: 1rem; text-align: center; }

.fewc-bookpage-head a {
	color: #e3edf5; text-decoration: none; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase; font-size: 1.05rem;
}

.fewc-bookpage-main { max-width: 560px; margin: 0 auto; padding: 1.5rem 16px 3rem; }

.fewc-bookpage-missing { background: #fff; border: 1px solid #e2e2e2; border-radius: .75rem; padding: 1.25rem; }

.fewc-bookpage-missing p { margin: 0 0 .5rem; }

.fewc-bookpage-missing p:last-child { margin-bottom: 0; }

.fewc-card {
	border: 1px solid #e2e2e2; border-radius: .75rem; padding: 1.1rem 1.25rem;
	display: flex; flex-direction: column; gap: .6rem; background: #fff;
}

.fewc-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }

.fewc-card-title { margin: 0; font-size: 1.15rem; }

.fewc-badge {
	background: #eef4fa; color: #1c4e80; border-radius: 999px;
	padding: .15rem .7rem; font-size: .8em; white-space: nowrap;
}

.fewc-card-tags, .fewc-card-offers { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }

.fewc-tag { background: #f2f2f2; border-radius: 999px; padding: .1rem .6rem; font-size: .78em; }

.fewc-card-desc { margin: 0; font-size: .92em; }
/* Markdown-rendered descriptions emit block elements (p/ul); keep the card
   tight by collapsing the outer block margins. */
.fewc-card-desc > :first-child { margin-top: 0; }
.fewc-card-desc > :last-child { margin-bottom: 0; }
/* Markdown headings, sized for a card/description context rather than the
   browser's page-scale defaults. */
.fewc-card-desc h1, .fewc-card-desc h2, .fewc-card-desc h3 { margin: .6em 0 .3em; line-height: 1.25; }
.fewc-card-desc h1 { font-size: 1.15em; }
.fewc-card-desc h2 { font-size: 1.05em; }
.fewc-card-desc h3 { font-size: .98em; }

.fewc-card-meta { margin: 0; font-size: .88em; }

.fewc-card-meta div { display: flex; gap: .4rem; }

.fewc-card-meta dt { font-weight: 600; margin: 0; }

.fewc-card-meta dd { margin: 0; }

.fewc-card-offers { list-style: none; flex-direction: column; gap: .2rem; font-size: .92em; }

.fewc-card-offers li { display: flex; justify-content: space-between; gap: .75rem; }

.fewc-card-next { margin: 0; font-size: .88em; }

.fewc-muted { color: #777; }

.fewc-book-btn {
	margin-top: auto; border: 0; border-radius: .55rem; padding: .65rem 1rem;
	background: #1c4e80; color: #fff; font-weight: 600; cursor: pointer;
	/* Explicit font: a bare <button> doesn't inherit font by default, so
	   without this it falls back to the UA control font (tiny) under any
	   host theme that doesn't normalize buttons — e.g. YOOtheme on prod,
	   where Cassiopeia's reset that makes it look right in dev is absent. */
	font-family: inherit; font-size: 1rem; line-height: 1.2;
}

.fewc-book-btn:hover { background: #163e66; }

.fewc-book-btn.fewc-danger { background: #a32020; }

.fewc-no-matches { font-style: italic; }

/* ---------- Wizard dialog ---------- */

.fewc-dialog {
	border: 0; border-radius: .9rem; padding: 0; width: min(30rem, calc(100vw - 2rem));
	box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}

.fewc-dialog::backdrop { background: rgba(10, 20, 30, .55); }

.fewc-dlg-head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 1rem 1.25rem; background: #1c4e80; border-radius: .9rem .9rem 0 0;
}

.fewc-dlg-title { margin: 0; font-size: 1.1rem; color: #fff; }

.fewc-dlg-close { border: 0; background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }

.fewc-dlg-body { padding: 1.1rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .8rem; }

.fewc-step-title { margin: 0; font-size: 1rem; }

.fewc-options { display: flex; flex-direction: column; gap: .45rem; max-height: 46vh; overflow-y: auto; }

.fewc-option {
	display: flex; justify-content: space-between; align-items: center; gap: .75rem;
	border: 1px solid #d8d8d8; border-radius: .55rem; background: #fff;
	padding: .6rem .85rem; cursor: pointer; text-align: left; font: inherit;
}

.fewc-option:hover:not(:disabled) { border-color: #1c4e80; }

.fewc-option.is-selected { border-color: #1c4e80; box-shadow: inset 0 0 0 1px #1c4e80; }

.fewc-option:disabled { opacity: .55; cursor: not-allowed; }

.fewc-option-note { font-size: .85em; color: #555; white-space: nowrap; }

.fewc-option-note.fewc-full { color: #a32020; font-weight: 600; }

.fewc-option-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.fewc-option-gate { font-size: .78em; color: #1c4e80; }

.fewc-participants { display: flex; flex-direction: column; gap: .7rem; }

.fewc-participant {
	position: relative; border: 1px solid #e2e2e2; border-radius: .6rem;
	padding: .7rem .85rem; margin: 0; display: grid;
	grid-template-columns: 1fr 5.2rem 1fr; gap: .5rem;
}

.fewc-participant legend { font-size: .8em; font-weight: 600; padding: 0 .3rem; }

/* min-height, not line-height: a browser sizes a <select> from its font
   metrics and ignores line-height, so a standalone dropdown came out 4px
   shorter than every field around it. (The phone-prefix select escaped this
   only by being a flex item that stretches to its row's height.) The formula
   is the inputs' own box — one line plus the vertical padding and borders —
   so the two stay equal if the font size ever changes. */
.fewc-participant input, .fewc-participant select,
.fewc-details input, .fewc-details select {
	padding: .5rem .65rem; border: 1px solid #c8c8c8; border-radius: .5rem; font: inherit; width: 100%;
	line-height: 1.5; min-height: calc(1.5em + 1rem + 2px);
}

/* A <select> left at appearance:auto is drawn by the OS — on macOS that is a
   visibly different control from the text inputs beside it (its own shading,
   arrow and baseline), no matter how its border and padding are set. Matching
   metrics alone is not enough; the native rendering has to go, which means
   supplying the arrow ourselves. */
.fewc-participant select, .fewc-details select {
	appearance: none; -webkit-appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23555' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7rem center;
	padding-right: 2rem;
}

/* A select still showing its prompt ("Gender", "Choose…") rather than a chosen
   value — lighter, so an unanswered field reads the same way an empty text
   input does. The prompt option itself is disabled on required fields, which
   the browser greys in the open list for free; this covers the closed control,
   whose text colour is ours since appearance:none.

   :has() rather than a class toggled from JS, so it cannot miss a path that
   changes the value without firing `change` (the ticket lookup prefills gender
   exactly that way). Purely cosmetic, so a browser without :has() simply shows
   the prompt in normal text. */
.fewc-participant select:has(option[value=""]:checked),
.fewc-details select:has(option[value=""]:checked) { color: #767676; }

/* Mobile field: country-code prefix (fixed width) + number (fills the rest),
   mirroring the event modal's .few-phone-split. */
.fewc-phone-split { display: flex; gap: .5rem; }
.fewc-phone-split select { flex: 0 0 auto; width: 6.5rem; }
.fewc-phone-split input { flex: 1 1 auto; min-width: 0; width: auto; }

.fewc-participant .fewc-hint { grid-column: 1 / -1; margin: 0; font-size: .8em; color: #8a6d1a; }

.fewc-remove {
	position: absolute; top: -.55rem; right: -.55rem; width: 1.5rem; height: 1.5rem;
	border-radius: 50%; border: 0; background: #a32020; color: #fff; cursor: pointer; line-height: 1;
}

.fewc-details { display: flex; flex-direction: column; gap: .55rem; }

.fewc-field-label { font-size: .88em; font-weight: 600; margin-bottom: -.3rem; }

/* Custom form fields inside a participant row. That row is a three-column
   grid sized for name/age/gender, so an appended field lands in one of those
   cells and comes out squashed — span the whole row instead, the same way
   .fewc-hint above already has to. */
.fewc-participant > .fewc-field-label,
.fewc-participant > .fewc-field-check,
.fewc-participant > input.fewc-field-input,
.fewc-participant > select.fewc-field-input { grid-column: 1 / -1; }

/* Checkbox field (T&C acceptance and the like): the sentence sits BESIDE the
   box, not above it as a bold label, and wraps under itself rather than under
   the box. Its text is rendered Markdown, so a link inside it must stay
   visibly a link. */
.fewc-field-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .88em; line-height: 1.45; cursor: pointer; }

/* Drawn rather than left native: the full-width text-input styling above
   applies to EVERY input, so untouched it stretches the tick box across the
   dialog — and simply stripping that back leaves a 13px OS control that
   matches nothing else in the dialog. Same border and white ground as the
   other fields, filled with the wizard's own blue when ticked. */
.fewc-field-check input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	flex: 0 0 auto; width: 1.15rem; height: 1.15rem; min-height: 0; margin: .1rem 0 0; padding: 0;
	border: 1px solid #c8c8c8; border-radius: .3rem; background: #fff;
	display: grid; place-content: center; cursor: pointer;
	transition: background-color .12s, border-color .12s;
}

.fewc-field-check input[type="checkbox"]::before {
	content: ""; width: .62rem; height: .62rem; transform: scale(0);
	transition: transform .12s ease-in-out; box-shadow: inset 1rem 1rem #fff;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.fewc-field-check input[type="checkbox"]:checked { background: #1c4e80; border-color: #1c4e80; }
.fewc-field-check input[type="checkbox"]:checked::before { transform: scale(1); }
.fewc-field-check input[type="checkbox"]:hover:not(:checked) { border-color: #1c4e80; }
.fewc-field-check input[type="checkbox"]:focus-visible { outline: 2px solid #1c4e80; outline-offset: 2px; }

/* min-width:0 so a long sentence wraps inside the flex row instead of
   overflowing the dialog — a flex item defaults to min-width:auto and will
   not shrink below its content. */
.fewc-field-check-text { min-width: 0; overflow-wrap: anywhere; }
.fewc-field-check-text a { text-decoration: underline; }

/* The label is Markdown, so it arrives wrapped in <p> — a block, which would
   push the trailing required marker onto a line of its own. */
.fewc-field-check-text p { margin: 0; display: inline; }

.fewc-summary { display: flex; flex-direction: column; gap: .2rem; margin-top: .3rem; }

.fewc-summary-line { font-size: .9em; color: #1d6b31; }

/* Inline code feedback. Deliberately not .fewc-error — that one is the
   dialog-level banner showError() adds and removes by class, and a second
   node carrying it would be swallowed by its own cleanup. */
.fewc-summary-error { font-size: .9em; color: #8c1c13; }

.fewc-summary-total { font-weight: 700; }

.fewc-dlg-nav { display: flex; justify-content: space-between; gap: .6rem; margin-top: .4rem; }

.fewc-dlg-nav .fewc-btn:only-child { margin-left: auto; }

.fewc-btn { border: 0; border-radius: .55rem; padding: .6rem 1.1rem; font-weight: 600; cursor: pointer; font: inherit; }

.fewc-btn-primary { background: #1c4e80; color: #fff; }

.fewc-btn-primary:disabled { opacity: .6; cursor: wait; }

.fewc-btn-ghost { background: #f0f0f0; }

.fewc-btn-inline { padding: .15rem .55rem; font-size: .85em; vertical-align: baseline; }

.fewc-ticket-note { margin: .1rem 0 0; color: #2e7d32; }

.fewc-ticket-bad { color: #8c1c13; }

/* Booking sheet (coach-facing, token URL) — print-friendly on purpose */
.fewc-sheet { max-width: 640px; margin: 0 auto; padding: 0 .5rem; }

.fewc-sheet-day { margin: 1.5rem 0; }

.fewc-sheet-day h2 { font-size: 1.1rem; border-bottom: 2px solid #1c4e80; padding-bottom: .3rem; }

/* Coach-lane heading on the sheet (ADR 0011): one labelled block per coach. */
.fewc-sheet-coach { font-size: .95rem; margin: 1rem 0 .3rem; color: #1c4e80; }

.fewc-sheet-table { width: 100%; border-collapse: collapse; }

.fewc-sheet-table td { padding: .45rem .5rem; border-bottom: 1px solid #e5e5e5; }

.fewc-sheet-time { white-space: nowrap; font-variant-numeric: tabular-nums; width: 7.5rem; }

.fewc-sheet-count { font-size: .85em; }

/* No-show marking on the sheet (docs/no-show-plan.md) — screen only. */
.fewc-sheet-mark { width: 1%; white-space: nowrap; text-align: right; }

.fewc-sheet-mark form { margin: 0; }

.fewc-sheet-noshow td:not(.fewc-sheet-mark) { color: #8c1c13; text-decoration: line-through; }

.fewc-sheet-hint { font-size: .85em; margin: .3rem 0 .5rem; }

@media print {
	.fewc-sheet-mark, .fewc-sheet-hint { display: none; }
}

/* Staff schedule page */
.fewc-staff-head { display: flex; gap: 1rem; align-items: center; margin-bottom: .75rem; }

.fewc-staff-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid #1c4e80; }

.fewc-staff-palmares { border-left: 3px solid #1c4e80; padding: .2rem .9rem; margin: .8rem 0 1.2rem; font-size: .92em; }

.fewc-countdown { color: #1c4e80; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Held state adds only the ticking pill — the header is blue throughout */
.fewc-hold-count {
	display: inline-block; margin-left: .6rem; padding: .1rem .6rem;
	background: rgba(255, 255, 255, .18); border-radius: 999px;
	font-size: .8em; font-variant-numeric: tabular-nums;
}

.fewc-holdconfirm {
	position: absolute; inset: 0; background: rgba(10, 20, 30, .55);
	display: flex; align-items: center; justify-content: center; border-radius: .9rem;
}

.fewc-holdconfirm-card {
	background: #fff; border-radius: .7rem; padding: 1.1rem 1.25rem;
	max-width: 22rem; display: flex; flex-direction: column; gap: .9rem;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
}

.fewc-holdconfirm-message { margin: 0; font-size: .95em; }
.fewc-limit-message { margin: .2rem 0 1rem; line-height: 1.5; }
.fewc-limit-actions { flex-wrap: wrap; }
a.fewc-btn { display: inline-flex; align-items: center; text-decoration: none; }
a.fewc-btn-primary:hover, a.fewc-btn-primary:focus { color: #fff; }

.fewc-holdconfirm-actions { display: flex; justify-content: flex-end; gap: .6rem; }

.fewc-error {
	margin: 0; background: #fdecea; color: #8c1c13;
	border-radius: .5rem; padding: .55rem .8rem; font-size: .9em;
}

.fewc-confirmed { font-size: 1rem; }

.fewc-banner { border-radius: .6rem; padding: .8rem 1rem; margin-bottom: 1rem; font-weight: 600; }

.fewc-banner-ok { background: #e7f4ea; color: #1d6b31; }

.fewc-banner-warn { background: #fdf3e0; color: #8a6d1a; }

/* ---------- Cancel page ---------- */

.fewc-cancel { max-width: 34rem; display: flex; flex-direction: column; gap: 1rem; }

.fewc-cancel-summary { margin: 0; border: 1px solid #e2e2e2; border-radius: .7rem; padding: 1rem 1.2rem; }

.fewc-cancel-summary div { display: flex; gap: .5rem; padding: .15rem 0; }

.fewc-cancel-summary dt { font-weight: 600; margin: 0; min-width: 8rem; }

.fewc-cancel-summary dd { margin: 0; }

.fewc-cancel-choice { border: 1px solid #e2e2e2; border-radius: .7rem; padding: .8rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }

.fewc-cancel-choice label { display: flex; gap: .55rem; align-items: baseline; cursor: pointer; }

.fewc-cancel-form { display: flex; flex-direction: column; gap: .9rem; }

/* ---------- Slot grid (phase 6) ---------- */

.fewc-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .4rem; max-height: 46vh; }

.fewc-slot-grid .fewc-option { justify-content: center; }

/* ---------- Module (template-position) surface ---------- */

.fewc-modlist { display: flex; flex-direction: column; gap: .8rem; }

/* Side-by-side card layouts (module "Card layout" param). Fixed 2/3 columns
   or auto-fit; all collapse to a single column on narrow screens so a
   sidebar/mobile placement never squashes the cards. */
.fewc-modlist.fewc-cols-2,
.fewc-modlist.fewc-cols-3,
.fewc-modlist.fewc-cols-auto { display: grid; }
.fewc-modlist.fewc-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fewc-modlist.fewc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fewc-modlist.fewc-cols-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

@media (max-width: 560px) {
	.fewc-modlist.fewc-cols-2,
	.fewc-modlist.fewc-cols-3,
	.fewc-modlist.fewc-cols-auto { grid-template-columns: 1fr; }
}

.fewc-modcard {
	border: 1px solid #e2e2e2; border-radius: .7rem; padding: .85rem 1rem;
	display: flex; flex-direction: column; gap: .45rem; background: #fff;
}

.fewc-modcard .fewc-card-title { margin: 0; font-size: 1rem; }

.fewc-book-btn.fewc-inline { display: inline-block; margin-top: 0; }