/*
 * Booking form — JetFormBuilder + JetAppointments.
 *
 * WHY THIS IS ITS OWN FILE AND LOADS LAST. The plugins enqueue their CSS after
 * the theme's whole chain (jet-form-builder-frontend, then vanilla-calendar).
 * A theme rule that merely ties on specificity therefore LOSES on source order.
 * Everything here is registered with those two handles as dependencies in
 * inc/enqueue.php, so this file is emitted after them and a plain, honest
 * selector is enough — no specificity arms race, no !important.
 *
 * SCOPE. Both booking contexts carry .vg-booking-form: the inline per-treatment
 * section (inc/services.php) and the dialog (booking-modal.php). One scope, one
 * set of rules, so the two can never drift into looking like different products.
 *
 * WHAT THE PLUGIN DOES NOT SHIP. Its stylesheet has no rule for
 * .jet-apb-calendar-date--selected, --today, or any hover state — verified by
 * reading it. So a visitor clicking a date got no confirmation that anything
 * happened. In a booking flow the selected date IS the state; supplying it is
 * the main job of this file, not decoration.
 *
 * TOUCHING PLUGIN CLASSES. Unavoidable — the markup is theirs. Kept shallow
 * (one scope class + one plugin class) so a plugin update degrades to "looks
 * plainer" rather than "silently broken".
 */

/* ------------------------------------------------------------- Fields ---- */

.vg-booking-form .jet-form-builder-row + .jet-form-builder-row {
	margin-top: var(--myco-space-lg);
}

/*
 * The plugin renders labels as <div>, not <label>, so forms.css's `label` rule
 * never reaches them. Restated here in the same eyebrow treatment the rest of
 * the site uses for small caps labels.
 */
.vg-booking-form .jet-form-builder__label,
.vg-booking-form .jet-form-builder__heading {
	display: block;
	margin-bottom: var(--myco-space-xs);
	color: var(--myco-color-text);
	font-size: var(--myco-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--myco-tracking-wide);
	line-height: 1.4;
	text-transform: uppercase;
}

/*
 * Inputs and selects inherit forms.css. Only the select needs restating: the
 * browser default arrow sits on a white box that fights the cream, and a
 * booking form's first field should not look like a system dialog.
 */
.vg-booking-form select.jet-form-builder__field {
	width: 100%;
	appearance: none;
	padding-right: var(--myco-space-2xl);
	/*
	 * Chevron drawn as an inline SVG data URI rather than a mask or a pseudo
	 * element: <select> cannot carry a ::after, and a background image is the
	 * one technique that survives the plugin re-rendering the control.
	 * The stroke is --myco-color-muted (#6b6360); it cannot read a custom
	 * property here, which is the one place in this file a literal colour is
	 * unavoidable. Keep it in step with variables.css if the palette moves.
	 */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%236b6360' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--myco-space-md) center;
}

/* -------------------------------------------------------- The calendar ---- */

/*
 * THE OVERFLOW FIX. The plugin pins the calendar to
 * `width: 350px; min-width: 350px; flex: 0 0 350px`, which overflows any
 * viewport narrower than 350px plus the form's padding — the calendar is the
 * one element on this site that could force a horizontal scrollbar on a phone.
 * Booking is a mobile-first act for a parent, so this is a correctness fix, not
 * a preference. `min-width: 0` is the part that actually releases the flex
 * floor; without it the width alone is ignored.
 */
/*
 * The 27rem cap is set by the time slots, not the month grid: three chips plus
 * their gaps and the close button's gutter want roughly this much, and the
 * month grid simply gets slightly roomier cells, which it can use.
 */
.vg-booking-form .jet-apb-calendar-content {
	width: 100%;
	min-width: 0;
	flex-basis: auto;
	max-width: 27rem;
}

.vg-booking-form .jet-apb-calendar-wrapper {
	margin-top: var(--myco-space-sm);
	padding: var(--myco-space-md);
	border: 1px solid var(--myco-color-border);
	background: var(--myco-color-white);
}

/* Month header: the label is the anchor, the arrows are quiet until wanted. */
.vg-booking-form .jet-apb-calendar-header {
	padding: 0 0 var(--myco-space-sm);
	border-bottom: 1px solid var(--myco-color-border);
}

.vg-booking-form .jet-apb-calendar-header__label {
	font-family: var(--myco-font-display);
	font-size: var(--myco-font-size-lg);
	letter-spacing: 0.01em;
}

.vg-booking-form .jet-apb-calendar-btn {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--myco-radius-none);
	color: var(--myco-color-muted);
	transition: background var(--myco-transition), color var(--myco-transition);
}

.vg-booking-form .jet-apb-calendar-btn:hover {
	background: var(--myco-color-accent-soft);
	color: var(--myco-color-text);
}

.vg-booking-form .jet-apb-calendar-btn svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Weekday row: quiet, uppercase, clearly not clickable. */
.vg-booking-form .jet-apb-calendar-week span {
	padding: var(--myco-space-sm) 0 var(--myco-space-xs);
	color: var(--myco-color-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * DATE CELLS. The plugin gives the cell no size, so the tap target was whatever
 * the numeral happened to be — a few pixels tall. 44px is the WCAG 2.5.5 target
 * size and roughly a fingertip; a parent booking one-handed on a phone is the
 * realistic user here. Set on the inner body because the outer cell is the
 * 14.28% flex column and must keep its width.
 */
.vg-booking-form .jet-apb-calendar-date-body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	border: 1px solid transparent;
	font-size: var(--myco-font-size-sm);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	transition: background var(--myco-transition), color var(--myco-transition),
		border-color var(--myco-transition);
}

.vg-booking-form
	.jet-apb-calendar-date:not(.jet-apb-calendar-date--disabled)
	.jet-apb-calendar-date-body:hover {
	background: var(--myco-color-accent-soft);
}

/*
 * The gridcells are divs with tabindex, not buttons, so the theme's
 * :focus-visible rule (which lists inputs, buttons, links) never reached them —
 * a keyboard user was moving through the month with no visible position. Same
 * ring as everything else on the site, so focus looks like focus everywhere.
 */
.vg-booking-form .jet-apb-calendar-date-body:focus-visible {
	outline: 3px solid var(--myco-color-accent);
	outline-offset: 2px;
}

/*
 * TODAY: an outline, not a fill. It is a landmark for orientation, and filling
 * it would compete with the selected day, which is the state that matters.
 */
.vg-booking-form .jet-apb-calendar-date--today .jet-apb-calendar-date-body {
	border-color: var(--myco-color-accent);
	font-weight: 600;
}

/*
 * SELECTED: the only filled cell in the calendar. The plugin ships no rule for
 * this at all, so before this the user's click produced no visible answer.
 * Solid accent-strong with white text clears 4.5:1, and the fill is what makes
 * "I have chosen the 12th" legible at a glance.
 */
.vg-booking-form .jet-apb-calendar-date--selected .jet-apb-calendar-date-body {
	border-color: var(--myco-color-accent-strong);
	background: var(--myco-color-accent-strong);
	color: var(--myco-color-white);
	font-weight: 600;
}

/*
 * UNAVAILABLE: the plugin strikes these through, which reads as "cancelled" or
 * "was available, now gone" — an anxious message on a medical booking form.
 * A closed day is simply not offered, so it is stated as muted and not
 * interactive. Opacity is raised from the plugin's 0.4 (which fell under the
 * 4.5:1 contrast floor) to 0.55 and paired with a real colour.
 */
/*
 * Specificity note: the plugin states this as
 * `.jet-apb-calendar .jet-apb-calendar-date--disabled .jet-apb-calendar-date-body`
 * (0,3,0). Our scope class alone was (0,2,0) and lost even though this file
 * loads later — verified by resolving the real cascade, not by assuming. The
 * `.jet-apb-calendar` here is not decoration: it is what makes the count match.
 */
.vg-booking-form
	.jet-apb-calendar
	.jet-apb-calendar-date--disabled
	.jet-apb-calendar-date-body {
	opacity: 0.55;
	color: var(--myco-color-muted);
	text-decoration: none;
	cursor: default;
}

/* ---------------------------------------------------------- Time slots ---- */

/*
 * THE GRID GOES ON .jet-apb-calendar-slots-container, NOT ON
 * .jet-apb-calendar-slots--active.
 *
 * The real structure (includes/time-types.php, line ~74) is:
 *
 *   .jet-apb-calendar-slots--active      <- the plugin toggles this class
 *     .jet-apb-calendar-slots-container  <- the chips live in HERE
 *       .jet-apb-slot ...
 *     .jet-apb-calendar-slots__close     <- the X, a SIBLING of the container
 *
 * Putting the grid on the outer element gave it exactly two grid items — the
 * container and the close button — so every chip stacked in one vertical
 * column inside a single cell. The container is the only element whose
 * children are the chips, so it is the only correct grid parent.
 *
 * That structure also explains the ragged two-across the design started with:
 * the plugin styles the container `display:flex; flex-wrap:wrap`, so chips were
 * sized by their own text and wrapped wherever they landed.
 *
 * COLUMN COUNT IS STATED, NOT NEGOTIATED. An earlier attempt used
 * `repeat(auto-fit, minmax(6.5rem, 1fr))` so the browser could fit as many as
 * possible. That makes the count depend on each context's inner width, and the
 * two contexts differ — the inline section is wider than the dialog — so the
 * section showed three while the dialog showed two. Three across is a design
 * decision; it is written down, and the phone breakpoint is a viewport query so
 * both contexts flip together instead of each at its own width.
 *
 * Specificity: the plugin's container rule is
 * `.jet-apb-calendar .jet-apb-calendar-slots .jet-apb-calendar-slots-container`
 * (0,3,0), so the selector below matches that class count deliberately. Drop a
 * class and `display:flex` silently wins again.
 *
 * `width: 100%` IS LOAD-BEARING. The parent `.jet-apb-calendar-slots` is itself
 * `display:flex`, so this container is a flex ITEM and defaults to `flex:0 1
 * auto` — it shrink-wraps its content instead of filling the row. The `1fr`
 * tracks then resolve against that content width, so the grid was only as wide
 * as three chips needed and all the leftover space piled up on the right. It
 * looked like an oversized right gutter; it was the container never filling the
 * calendar. Switching grid→flex would NOT have fixed this: the container would
 * still be a shrink-wrapped flex item, and equal columns would additionally
 * need `flex: 0 0 calc((100% - 2*gap)/3)` on every chip, restating the column
 * count in a second place.
 *
 * No right padding: the chips are meant to reach both edges of the calendar.
 * The ✕ overlaps the first row's top-right corner, which the row has vertical
 * slack for — see the note on the outer element below.
 */
.vg-booking-form .jet-apb-calendar-slots .jet-apb-calendar-slots-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--myco-space-2xs);
	width: 100%;
	padding: 0;
}

/* Phones: two across, both contexts, same breakpoint. */
@media (max-width: 479px) {
	.vg-booking-form .jet-apb-calendar-slots .jet-apb-calendar-slots-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * The outer element carries the separation from the month grid, and the top
 * padding that gives the ✕ a row of its own.
 *
 * The chips now span the full width, so a right-hand gutter would reintroduce
 * exactly the empty band this design is trying to remove. Instead the close
 * button — `position:absolute; right:10px; top:10px` in this element — gets
 * vertical room above the first slot row. That reads better anyway: ✕ is an
 * action on the whole slot panel, so it belongs on the panel's own line rather
 * than tucked beside the first time.
 *
 * Its own padding is the plugin's `15px 0` at (0,3,0), so the count matches.
 */
.vg-booking-form .jet-apb-calendar .jet-apb-calendar-slots--active {
	margin-top: var(--myco-space-sm);
	padding: var(--myco-space-2xl) 0 0;
	border-top: 1px solid var(--myco-color-border);
}

/*
 * The ✕ is the plugin's 35px glyph. Sized down to the theme's scale and pinned
 * into the space the padding above reserves, so it sits on its own line clear
 * of the chips rather than overlapping the third column.
 */
.vg-booking-form .jet-apb-calendar-slots__close {
	top: var(--myco-space-xs);
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: var(--myco-color-muted);
	font-size: 1.5rem;
	line-height: 1;
	transition: color var(--myco-transition);
}

.vg-booking-form .jet-apb-calendar-slots__close:hover {
	color: var(--myco-color-text);
}

.vg-booking-form .jet-apb-calendar-slots__close:focus-visible {
	outline: 3px solid var(--myco-color-accent);
	outline-offset: 2px;
}

/*
 * Same specificity story: the plugin's
 * `.jet-apb-calendar .jet-apb-calendar-slots .jet-apb-slot` sets
 * `margin: 5px 10px 5px 0` at (0,3,0). Left uncancelled that margin adds to the
 * grid gap and brings back the ragged spacing the grid exists to remove.
 */
.vg-booking-form .jet-apb-calendar-slots .jet-apb-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	min-height: 2.75rem;
	/*
	 * Horizontal padding is deliberately small. With three fixed columns the
	 * chip no longer sizes itself — it gets a third of the row and the text has
	 * to live inside that. --space-2xs keeps "11:30-12:00" comfortable in the
	 * dialog, which is the narrower of the two contexts and therefore the one
	 * that sets the budget.
	 */
	padding: var(--myco-space-xs) var(--myco-space-2xs);
	border: 1px solid var(--myco-color-border);
	background: var(--myco-color-bg);
	color: var(--myco-color-text);
	font-size: var(--myco-font-size-sm);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	text-align: center;
	/*
	 * `min-width: 0` lets a grid item shrink below its content width — without
	 * it a grid item's automatic minimum size is `auto`, so a long label would
	 * push the column wider than its 1fr share and break the three-across
	 * layout rather than being contained by it. With capacity counters enabled
	 * the plugin appends "(2/3)" to the time, which is exactly such a label.
	 */
	min-width: 0;
	white-space: nowrap;
	transition: background var(--myco-transition), color var(--myco-transition),
		border-color var(--myco-transition);
}

/*
 * The slots are `div[role="button"]` with tabindex, so — like the date cells —
 * the theme's focus rule in forms.css never reached them.
 */
.vg-booking-form .jet-apb-slot:focus-visible {
	outline: 3px solid var(--myco-color-accent);
	outline-offset: 2px;
}

.vg-booking-form .jet-apb-slot:hover {
	border-color: var(--myco-color-accent-strong);
	background: var(--myco-color-accent-soft);
}

.vg-booking-form .jet-apb-slot--selected {
	border-color: var(--myco-color-accent-strong);
	background: var(--myco-color-accent-strong);
	color: var(--myco-color-white);
	font-weight: 600;
}

/* The loading state is the plugin's; just make it read as busy, not broken. */
.vg-booking-form .jet-apb-calendar--loading {
	opacity: 0.6;
}

/* ------------------------------------------------------- Notifications ---- */

/*
 * "Please select the service first" and friends. The plugin absolutely-positions
 * these over the calendar on a #fff block; on this site that white square
 * against cream looked like a rendering fault. Kept as an overlay (the plugin's
 * JS toggles it) but given the page's own surface and centred, readable text.
 */
.vg-booking-form .jet-apb-calendar-notification {
	padding: var(--myco-space-lg);
	background: var(--myco-color-bg);
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-sm);
	text-align: center;
}

/* --------------------------------------------------- Appointment recap ---- */

/*
 * The "Appointment details" block the plugin reveals once a slot is chosen.
 * This is the confirmation step — the last thing read before submitting — so it
 * gets the accent hairline the site uses elsewhere for "this is the summary".
 */
.vg-booking-form .jet-apb-calendar-appointments-list-wrapper {
	margin-top: var(--myco-space-lg);
	padding: var(--myco-space-md) var(--myco-space-lg);
	border-left: 2px solid var(--myco-color-accent);
	background: var(--myco-color-accent-soft);
}

.vg-booking-form .jet-apb-calendar-appointments-list {
	padding: 0;
}

.vg-booking-form .jet-apb-appointments-item {
	margin-bottom: 0;
	align-items: center;
}

/* ------------------------------------------------------------- Submit ---- */

/*
 * The submit button is the theme's button, restated rather than reused: the
 * plugin renders a bare <button> that forms.css styles as the generic dark
 * button, which is not the CTA identity the rest of the site uses (square,
 * uppercase, letterspaced, accent fill).
 */
.vg-booking-form .jet-form-builder__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.4rem;
	padding: var(--myco-space-md) var(--myco-space-xl);
	border: 1px solid transparent;
	border-radius: var(--myco-radius-none);
	background: var(--myco-color-accent);
	color: var(--myco-color-text);
	font-family: var(--myco-font-sans);
	font-size: var(--myco-font-size-sm);
	font-weight: 600;
	letter-spacing: var(--myco-tracking-wide);
	line-height: 1.2;
	text-transform: uppercase;
	transition: background var(--myco-transition), color var(--myco-transition);
}

.vg-booking-form .jet-form-builder__submit:hover,
.vg-booking-form .jet-form-builder__submit:focus-visible {
	background: var(--myco-color-accent-strong);
	color: var(--myco-color-white);
}

.vg-booking-form .jet-form-builder__submit-wrap {
	margin-top: var(--myco-space-lg);
}

/* Full-width on phones: the primary action should not be a small target. */
@media (max-width: 559px) {
	.vg-booking-form .jet-form-builder__submit {
		width: 100%;
	}
}

/* ----------------------------------------------------------- Messages ---- */

/*
 * Validation and success messages. The plugin emits them into this wrapper
 * after submit; without a rule they inherited body copy and read as ordinary
 * paragraphs rather than as a response to what the visitor just did.
 */
.vg-booking-form .jet-form-builder-messages-wrap:not(:empty) {
	margin-top: var(--myco-space-lg);
	padding: var(--myco-space-md) var(--myco-space-lg);
	border-left: 2px solid var(--myco-color-accent-strong);
	background: var(--myco-color-accent-soft);
	font-size: var(--myco-font-size-sm);
}

.vg-booking-form .jet-form-builder-message--error,
.vg-booking-form .jet-form-builder__field-error {
	color: var(--myco-color-danger);
	font-size: var(--myco-font-size-sm);
}

.vg-booking-form .jet-form-builder-message--success {
	color: var(--myco-color-success);
}

/*
 * A field the plugin marked invalid. Border only — never colour alone, which
 * a colour-blind visitor cannot see; the message text above carries the reason.
 */
.vg-booking-form .jet-form-builder__field.is-invalid,
.vg-booking-form .jet-form-builder__field[aria-invalid="true"] {
	border-color: var(--myco-color-danger);
}