/* ==========================================================================
   EP Boarding — frontend booking widget
   --------------------------------------------------------------------------
   Editorial booking widget for a dog-boarding business, tuned to the
   PageMotor "attention" theme (near-black page, warm-cream text, Inter body /
   Playfair Display headings, square tan buttons). Each stay reads as a tidy
   hairline card; a two-column date/slot grid; a prominent priced summary.

   THEME-DEFEAT NOTES — "attention" is aggressive:
   - It styles ALL bare <button> and form controls, and its `button{}` rule
     out-specifies a plain class. Every button look below is qualified with the
     element type too (e.g. `.ep-boarding button.ep-boarding-add`, 0,2,1) so the
     cascade is won on specificity, never on source order.
   - It overrides the native [hidden] attribute, so a hidden element still
     paints. `.ep-boarding [hidden]{display:none!important}` forces it back.
   - No colour is pinned to the dark page bg: borders / fills are translucent
     and text uses inherit / currentColor, so the widget also reads correctly on
     a LIGHT host. The accent borrows --ep-brand if the site sets it, else the
     theme tan — NEVER a hardcoded green.

   British English throughout. No @import, no web fonts, no Google Fonts.
   Every rule is scoped under .ep-boarding so nothing leaks into the host page.
   ========================================================================== */

/* --- Root: accent tokens + box model --------------------------------------- */
.ep-boarding {
	/* Brand if the site published it, else the theme tan / its dark ink. */
	--epb-accent: var(--ep-brand, #c8b89a);
	--epb-ink: var(--ep-brand-ink, #1a1a18);
	--epb-accent-hover: var(--ep-brand-hover, var(--epb-accent));

	/* Small editorial radius — sits with the theme's near-square tan buttons. */
	--epb-radius: 4px;

	/* Neutral hairlines / fills from currentColor, so they adapt to the host
	   text colour (cream on dark, ink on light). */
	--epb-line: color-mix(in srgb, currentColor 22%, transparent);
	--epb-line-soft: color-mix(in srgb, currentColor 14%, transparent);
	--epb-fill: color-mix(in srgb, currentColor 5%, transparent);
	--epb-field: color-mix(in srgb, currentColor 8%, transparent);

	/* Semantic STATUS colours — these MAY be green/red; they are status, not
	   the brand accent. Tuned to read on both dark and light surfaces. */
	--epb-ok: #5fae7a;
	--epb-ok-panel: rgba(95, 174, 122, .12);
	--epb-ok-line: rgba(95, 174, 122, .45);
	--epb-err: #d9756b;
	--epb-err-panel: rgba(217, 117, 107, .12);
	--epb-err-line: rgba(217, 117, 107, .45);

	max-width: 620px;
	margin: 1.75rem 0;
	color: inherit;
	font-size: 1rem;
	line-height: 1.55;
}
.ep-boarding,
.ep-boarding *,
.ep-boarding *::before,
.ep-boarding *::after { box-sizing: border-box; }

/* Fallback for engines without color-mix(): plain translucent grey hairlines. */
@supports not (color: color-mix(in srgb, red, blue)) {
	.ep-boarding {
		--epb-line: rgba(128, 128, 128, .42);
		--epb-line-soft: rgba(128, 128, 128, .26);
		--epb-fill: rgba(128, 128, 128, .06);
		--epb-field: rgba(128, 128, 128, .10);
	}
}

/* --- BUG FIX 3 (part A): force the theme's [hidden] override to lose ---------
   The theme's reset re-displays [hidden] elements. Slam it shut for every
   hidden descendant — the remove button, the quote box, the details box. */
.ep-boarding [hidden] { display: none !important; }

/* --- Heading --------------------------------------------------------------- */
.ep-boarding-title {
	margin: 0 0 1.1rem;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: .005em;
	font-family: inherit;     /* inherit the host heading face (Playfair here) */
}

/* --- Status message (role=status). Empty by default — collapse it. ---------- */
.ep-boarding-msg {
	margin: 0 0 1rem;
	font-size: .95rem;
	line-height: 1.45;
}
.ep-boarding-msg:empty { display: none; }
.ep-boarding-msg--err {
	color: var(--epb-err);
	background: var(--epb-err-panel);
	border: 1px solid var(--epb-err-line);
	border-radius: var(--epb-radius);
	padding: .75rem .9rem;
	font-weight: 600;
}
.ep-boarding-msg--ok {
	color: var(--epb-ok);
	background: var(--epb-ok-panel);
	border: 1px solid var(--epb-ok-line);
	border-radius: var(--epb-radius);
	padding: .75rem .9rem;
	font-weight: 600;
}

/* --- Pre-options notice (no bookable options yet) -------------------------- */
.ep-boarding-note { opacity: .8; margin: 1rem 0; font-size: .9rem; }

/* --- Segments: one stay each (JS clones .ep-boarding-segment) ---------------
   Each reads as a subtle hairline card so multiple stays separate cleanly. */
.ep-boarding-segments { margin: 0 0 1.1rem; }
.ep-boarding-segment {
	position: relative;
	padding: 1.15rem 1.2rem 1.2rem;
	margin: 0 0 1rem;
	border: 1px solid var(--epb-line-soft);
	border-radius: var(--epb-radius);
	background: var(--epb-fill);
}
.ep-boarding-segment:last-of-type { margin-bottom: 0; }

/* --- Rows: label stacked above its control --------------------------------- */
.ep-boarding-row {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin: 0 0 .95rem;
	min-width: 0;             /* allow children to shrink inside the grid */
}
.ep-boarding-row:last-child { margin-bottom: 0; }
.ep-boarding-row > label {
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	opacity: .78;
}
/* The Option row sits above the date grid with a touch more air. */
.ep-boarding-segment > .ep-boarding-row:first-child { margin-bottom: .85rem; }

/* --- Inputs / selects / textarea -------------------------------------------
   Scoped to .ep-boarding-row so the root-level hidden CSRF input and the
   honeypot input (inside .ep-boarding-hp, not a row) are never touched. */
.ep-boarding-row input,
.ep-boarding-row select,
.ep-boarding-row textarea {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: .6rem .7rem;
	border: 1px solid var(--epb-line);
	border-radius: var(--epb-radius);
	background: var(--epb-field);
	color: inherit;           /* keeps the typed date value readable on dark */
	font: inherit;
	line-height: 1.4;
	transition: border-color .15s ease, background-color .15s ease;
}
.ep-boarding-row textarea {
	min-height: 5rem;
	resize: vertical;
}
.ep-boarding-row input::placeholder,
.ep-boarding-row textarea::placeholder {
	color: currentColor;
	opacity: .45;
}

/* Native <select> arrow restored after a light appearance tame. The SVG uses
   currentColor so the glyph reads on light AND dark; no web fetch. */
.ep-boarding-row select {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2rem;
	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 d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7rem center;
	background-size: .7rem;
}

.ep-boarding-row input:hover,
.ep-boarding-row select:hover,
.ep-boarding-row textarea:hover {
	border-color: color-mix(in srgb, currentColor 34%, transparent);
}
.ep-boarding-row input:focus,
.ep-boarding-row select:focus,
.ep-boarding-row textarea:focus,
.ep-boarding-row input:focus-visible,
.ep-boarding-row select:focus-visible,
.ep-boarding-row textarea:focus-visible {
	outline: 2px solid var(--epb-accent);
	outline-offset: 1px;
	border-color: var(--epb-accent);
}

/* Native date input. "attention" is ALWAYS dark, even when the OS prefers
   light, so the dark colour-scheme + inverted picker glyph are the DEFAULT
   here; only lighten them when the OS prefers light (a genuinely light host). */
.ep-boarding-row input[type="date"] { color-scheme: dark; }
.ep-boarding-row input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1) opacity(.6);
	cursor: pointer;
}
.ep-boarding-row input[type="date"]::-webkit-calendar-picker-indicator:hover {
	filter: invert(1) opacity(.9);
}
@media (prefers-color-scheme: light) {
	.ep-boarding-row input[type="date"] { color-scheme: light; }
	.ep-boarding-row input[type="date"]::-webkit-calendar-picker-indicator {
		filter: opacity(.7);
	}
}

/* --- The Check in / Checkout slot grid -----------------------------------
   Two equal columns so the Check in and Checkout dropdowns are the same width.
   Collapses to a single column on a phone. */
.ep-boarding-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: .85rem 1rem;
	margin: .15rem 0 .25rem;
}
.ep-boarding-grid .ep-boarding-row { margin-bottom: 0; }

@media (max-width: 560px) {
	.ep-boarding-grid {
		grid-template-columns: 1fr 1fr;   /* date | slot still pair up 2-up */
		gap: .75rem .7rem;
	}
}
@media (max-width: 400px) {
	.ep-boarding-grid { grid-template-columns: 1fr; }   /* single-column stack */
}

/* --- BUG FIX 3 (part B): the Remove control = small, subordinate text link ---
   Right-aligned within its segment, red-tinted, on its own line. Compound
   selector (element + class, 0,2,1) so the theme's tan `button{}` (0,0,1)
   cannot reclaim it; background:none kills the tan fill. */
.ep-boarding button.ep-boarding-remove {
	display: block;
	width: auto;
	margin: .9rem 0 0 auto;            /* push to the right edge of the card */
	padding: .2rem .1rem;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--epb-err);
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.2;
	text-align: right;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color .15s ease;
}
.ep-boarding button.ep-boarding-remove:hover {
	color: color-mix(in srgb, var(--epb-err) 75%, #fff 25%);
	text-decoration-thickness: 2px;
}
.ep-boarding button.ep-boarding-remove:focus-visible {
	outline: 2px solid var(--epb-err);
	outline-offset: 2px;
	color: color-mix(in srgb, var(--epb-err) 75%, #fff 25%);
}

/* --- BUG FIX 2: the action-button row (no overlap, tidy gaps, wraps) --------
   Add (secondary) + Check (primary) are direct children of .ep-boarding after
   the segments. They are flowed with margins (NOT absolute/float positioning),
   so they can never collide whatever the theme's button height is, and they
   wrap onto a new line cleanly when the row is narrow. float:none neutralises
   any theme float; min-height keeps both the same height when they wrap. */
.ep-boarding > button.ep-boarding-add,
.ep-boarding > button.ep-boarding-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: top;
	float: none;
	min-height: 2.75rem;
	max-width: 100%;
}
.ep-boarding > button.ep-boarding-add   { margin: .35rem .6rem .35rem 0; }
.ep-boarding > button.ep-boarding-check { margin: .35rem 0 .35rem 0; }

/* --- Action / submit button base (scoped; beats the theme's bare button{}) --
   Every property the theme might impose is re-declared here at higher
   specificity (.ep-boarding button.<class>). */
.ep-boarding button.ep-boarding-add,
.ep-boarding button.ep-boarding-check,
.ep-boarding button.ep-boarding-submit {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	padding: .7rem 1.4rem;
	border-radius: var(--epb-radius);
	text-decoration: none;
	box-shadow: none;
	width: auto;
	transition: background-color .15s ease, color .15s ease,
	            border-color .15s ease, filter .15s ease;
}
.ep-boarding button.ep-boarding-add:disabled,
.ep-boarding button.ep-boarding-check:disabled,
.ep-boarding button.ep-boarding-submit:disabled {
	opacity: .55;
	cursor: default;
}

/* PRIMARY — Check availability + Request booking: filled accent, dark ink. */
.ep-boarding button.ep-boarding-check,
.ep-boarding button.ep-boarding-submit {
	background: var(--epb-accent);
	color: var(--epb-ink);
	border: 1px solid var(--epb-accent);
}
.ep-boarding button.ep-boarding-check:hover,
.ep-boarding button.ep-boarding-submit:hover {
	background: var(--epb-accent-hover);
	border-color: var(--epb-accent-hover);
	filter: brightness(1.07);
}

/* SECONDARY — Add another stay: ghost / outline accent, transparent fill. */
.ep-boarding button.ep-boarding-add {
	background: transparent;
	color: var(--epb-accent);
	border: 1px solid var(--epb-accent);
	font-weight: 600;
}
.ep-boarding button.ep-boarding-add:hover {
	background: color-mix(in srgb, var(--epb-accent) 14%, transparent);
	color: var(--epb-accent);
}

/* Shared keyboard focus ring for the action buttons. */
.ep-boarding button.ep-boarding-add:focus-visible,
.ep-boarding button.ep-boarding-check:focus-visible,
.ep-boarding button.ep-boarding-submit:focus-visible {
	outline: 2px solid var(--epb-accent);
	outline-offset: 2px;
}

/* --- Quote panel: the prominent priced summary (JS reveals + fills it) ------ */
.ep-boarding-quote {
	margin: 1.4rem 0 0;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--epb-line);
	border-radius: var(--epb-radius);
	background: var(--epb-fill);
	transition: opacity .15s ease;
}
/* Non-blocking cue while an auto-update is in flight — the panel dims briefly. */
.ep-boarding-quote--updating { opacity: .55; }

/* --- BUG FIX 4 (part A): breakdown rows = clean two-column rows -------------
   The JS-injected <li> is FIXED:
     option-name text + <span.ep-boarding-when> dates [ + <span.ep-boarding-mod> ]
     + <span.ep-boarding-sub><strong>£…</strong></span>
   Details (option name + dates + muted daycare note) LEFT; price right-aligned
   RIGHT, spanning both rows. The daycare note drops to its own muted italic
   line — this stops "includes daycare +£70.00£378.00". */
.ep-boarding-breakdown {
	list-style: none;
	margin: 0 0 .85rem;
	padding: 0;
}
.ep-boarding-breakdown li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;   /* details | price */
	align-items: center;
	column-gap: 1.25rem;
	row-gap: .15rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--epb-line-soft);
	font-weight: 600;            /* the option name leads in body weight */
	font-size: .98rem;
}
.ep-boarding-breakdown li:first-child { padding-top: 0; }
.ep-boarding-breakdown li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Dates block — muted, beneath the option name, on its own line. */
.ep-boarding-breakdown .ep-boarding-when {
	display: block;
	grid-column: 1;
	margin-top: .2rem;
	font-weight: 400;
	font-size: .85rem;
	line-height: 1.45;
	opacity: .72;
}
/* Daycare / modifier note — own muted italic line; kills the run-together. */
.ep-boarding-breakdown .ep-boarding-mod {
	display: block;
	margin-top: .15rem;
	font-size: .82rem;
	font-style: italic;
	font-weight: 400;
	opacity: .9;
}

/* Price column — right-aligned, spans both rows, vertically centred, never
   touches the details column; tabular figures keep the column aligned. */
.ep-boarding-breakdown .ep-boarding-sub {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	justify-self: end;
	text-align: right;
	white-space: nowrap;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.ep-boarding-breakdown .ep-boarding-sub strong {
	font-size: 1.05rem;
	font-weight: 700;
}

/* --- BUG FIX 4 (part B): the Total line ------------------------------------
   Flex row, space-between, so "Total" and the amount are clearly separated and
   the amount is larger / bold. Fixes "Total£378.00". */
.ep-boarding-quote-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-top: .25rem;
	padding-top: .85rem;
	border-top: 2px solid var(--epb-line);
	font-weight: 600;
}
.ep-boarding-quote-line > span {
	letter-spacing: .02em;
	text-transform: uppercase;
	font-size: .85rem;
	opacity: .85;
}
.ep-boarding-quote-line strong {
	font-size: 1.4rem;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* --- Availability verdict. --ok = success, --no = error (STATUS colours). --- */
.ep-boarding-avail {
	margin-top: .9rem;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.45;
}
.ep-boarding-avail--ok { color: var(--epb-ok); }
.ep-boarding-avail--no { color: var(--epb-err); }

/* --- Owner / pet details: shown once dates are available (JS reveals it). ----
   .ep-boarding-submit is a DIRECT child of .ep-boarding-details in the rendered
   DOM (verified in plugin.php), so it is given a confident full-width commit. */
.ep-boarding-details {
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--epb-line);
}
.ep-boarding-details > button.ep-boarding-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: .8rem;
	min-height: 2.75rem;
	width: 100%;
}

/* Honeypot — kept off-screen even if its inline style is ever stripped. */
.ep-boarding-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* --- Phones (<=560px): action buttons go full-width + stack, never collide. - */
@media (max-width: 560px) {
	.ep-boarding > button.ep-boarding-add,
	.ep-boarding > button.ep-boarding-check {
		display: block;
		width: 100%;
		margin: .4rem 0 0;
	}
	.ep-boarding > button.ep-boarding-add { margin-top: .2rem; }
	.ep-boarding-quote-line strong { font-size: 1.25rem; }
}

/* --- Reduced motion: drop transitions. ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ep-boarding button.ep-boarding-add,
	.ep-boarding button.ep-boarding-check,
	.ep-boarding button.ep-boarding-submit,
	.ep-boarding button.ep-boarding-remove,
	.ep-boarding-row input,
	.ep-boarding-row select,
	.ep-boarding-row textarea,
	.ep-boarding-quote { transition: none; }
}
/* Intro text shown above the booking form (admin-editable). */
.ep-boarding-intro {
	margin: 0 0 1.2rem;
	color: inherit;
	opacity: .85;
	font-size: 1rem;
	line-height: 1.6;
}

/* ─── Availability calendar (the main booking focus) ─────────────────────────
   Calendar buttons are bare <button>s, so the host theme's button{} would style
   them. Every rule below is on a .ep-boarding button.<class> compound (0,2,1) to
   out-specify the theme, with appearance:none to strip its look. */
.ep-boarding-calendar { margin: 0 0 1.6rem; }
.ep-boarding-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .7rem; }
.ep-boarding-cal-title { font-weight: 600; font-size: 1.1rem; }
.ep-boarding button.ep-boarding-cal-nav {
	appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; line-height: 1;
	width: 38px; height: 38px; padding: 0; border-radius: var(--epb-radius);
	border: 1px solid var(--epb-line); background: var(--epb-fill); color: inherit; font-size: 1.3rem;
}
.ep-boarding button.ep-boarding-cal-nav:hover { border-color: var(--epb-accent); }
.ep-boarding button.ep-boarding-cal-nav[disabled] { opacity: .35; cursor: default; }
.ep-boarding-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ep-boarding-cal-dow { text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; padding: .2rem 0; }
.ep-boarding button.ep-boarding-cal-day {
	appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; color: inherit;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	min-height: 56px; padding: .3rem .2rem; margin: 0;
	border: 1px solid var(--epb-line-soft); border-radius: var(--epb-radius); background: var(--epb-fill);
	transition: border-color .15s ease, background-color .15s ease;
}
.ep-boarding button.ep-boarding-cal-day .d { font-weight: 600; font-size: 1rem; }
.ep-boarding button.ep-boarding-cal-day .f { font-size: .64rem; opacity: .85; }
.ep-boarding button.ep-boarding-cal-day.ep-boarding-cal-open .f { color: var(--epb-ok); opacity: 1; }
.ep-boarding button.ep-boarding-cal-day:hover { border-color: var(--epb-accent); background: color-mix(in srgb, var(--epb-accent) 14%, transparent); }
.ep-boarding button.ep-boarding-cal-day[disabled] { cursor: default; opacity: .4; background: transparent; border-style: dashed; }
.ep-boarding button.ep-boarding-cal-day[disabled]:hover { border-color: var(--epb-line-soft); background: transparent; }
.ep-boarding button.ep-boarding-cal-day.is-selected { border-color: var(--epb-accent); background: var(--epb-accent); color: var(--epb-ink); opacity: 1; }
.ep-boarding button.ep-boarding-cal-day.is-selected .f { color: var(--epb-ink); }
.ep-boarding-cal-legend { display: flex; gap: 1.2rem; margin: .7rem 0 0; font-size: .78rem; opacity: .75; }
.ep-boarding-cal-key { display: flex; align-items: center; gap: .4rem; }
.ep-boarding-cal-key::before { content: ""; width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ep-boarding-cal-key.ok::before { background: var(--epb-ok); }
.ep-boarding-cal-key.full::before { background: color-mix(in srgb, currentColor 30%, transparent); }
@media (max-width: 560px) {
	.ep-boarding-cal-grid { gap: 4px; }
	.ep-boarding button.ep-boarding-cal-day { min-height: 46px; }
	.ep-boarding button.ep-boarding-cal-day .f { font-size: .58rem; }
}

/* ─── Login-required prompt ─── */
.ep-boarding-login-required { padding: 1.4rem 0; }
.ep-boarding a.ep-boarding-login-link {
	display: inline-block; margin-top: .4rem; padding: .7rem 1.3rem; border-radius: var(--epb-radius);
	background: var(--epb-accent); color: var(--epb-ink); font-weight: 700; text-decoration: none;
}

/* ─── CLIENT portal ─── */
.ep-boarding-portal { max-width: 680px; }
.ep-boarding-portal-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.6rem; }
.ep-boarding-portal-welcome { font-size: 1.25rem; font-weight: 600; }
.ep-boarding a.ep-boarding-portal-book {
	display: inline-block; padding: .7rem 1.3rem; border-radius: var(--epb-radius);
	background: var(--epb-accent); color: var(--epb-ink); font-weight: 700; text-decoration: none;
}
.ep-boarding-portal-section { margin: 0 0 1.7rem; }
.ep-boarding-portal-section h3 { font-size: 1.1rem; margin: 0 0 .7rem; padding-bottom: .45rem; border-bottom: 1px solid var(--epb-line-soft); }
.ep-boarding-portal-empty { opacity: .7; font-size: .95rem; }
.ep-boarding-portal-list { list-style: none; margin: 0; padding: 0; }
.ep-boarding-portal-item { border: 1px solid var(--epb-line-soft); border-radius: var(--epb-radius); padding: .9rem 1rem; margin: 0 0 .7rem; background: var(--epb-fill); }
.ep-boarding-portal-item-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 .35rem; }
.ep-boarding-portal-item-head a { color: inherit; }
.ep-boarding-portal-status { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--epb-line); }
.ep-boarding-portal-status--confirmed { color: var(--epb-ok); border-color: var(--epb-ok-line); background: var(--epb-ok-panel); }
.ep-boarding-portal-status--cancelled { color: var(--epb-err); border-color: var(--epb-err-line); background: var(--epb-err-panel); }
.ep-boarding-portal-stay { font-size: .88rem; opacity: .85; margin: .15rem 0; }
.ep-boarding a.ep-boarding-portal-receipt { display: inline-block; margin-top: .55rem; font-size: .85rem; color: var(--epb-accent); text-decoration: underline; }

/* ─── Receipt / confirmation ─── */
.ep-boarding-receipt { max-width: 560px; }
.ep-boarding-receipt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 2px solid var(--epb-line); padding-bottom: .6rem; margin: 0 0 1rem; }
.ep-boarding-receipt-head h2 { margin: 0; font-size: 1.4rem; font-family: inherit; }
.ep-boarding-receipt-ref { opacity: .7; font-size: .9rem; }
.ep-boarding-receipt-owner { font-size: .95rem; line-height: 1.5; margin: 0 0 1rem; }
.ep-boarding-receipt-table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.ep-boarding-receipt-table td { padding: .6rem 0; border-bottom: 1px solid var(--epb-line-soft); vertical-align: top; }
.ep-boarding-receipt-table td.r { text-align: right; white-space: nowrap; }
.ep-boarding-receipt-table small { opacity: .7; }
.ep-boarding-receipt-table tfoot td { border-bottom: 0; border-top: 2px solid var(--epb-line); font-size: 1.05rem; padding-top: .7rem; }
.ep-boarding-receipt-status { font-size: .9rem; margin: 0 0 .3rem; }
.ep-boarding-receipt-note { font-size: .85rem; opacity: .7; }
.ep-boarding-receipt-actions { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: 1.3rem; }
.ep-boarding button.ep-boarding-receipt-print {
	appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; font-weight: 700;
	padding: .6rem 1.1rem; border: 0; border-radius: var(--epb-radius); background: var(--epb-accent); color: var(--epb-ink);
}
.ep-boarding button.ep-boarding-receipt-email {
	appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; font-weight: 600;
	padding: .6rem 1.1rem; border: 1px solid var(--epb-accent); border-radius: var(--epb-radius); background: transparent; color: inherit;
}
.ep-boarding a.ep-boarding-receipt-back { color: var(--epb-accent); text-decoration: underline; font-size: .9rem; }
.ep-boarding-receipt-msg { font-size: .85rem; opacity: .85; }
@media print { .ep-boarding-receipt-actions { display: none !important; } }

/* ─── Stripe payment slot (pay-to-book) ─── */
.ep-boarding-payment-slot { margin: 1.1rem 0 0; }
.ep-boarding-payment-slot:empty { display: none; }

/* ─── Stay builder (option + calendar + check-in/checkout times) ─── */
.ep-boarding-builder { margin: 0 0 1.2rem; }
.ep-boarding-builder > .ep-boarding-row:first-child { margin-bottom: 1rem; }
.ep-boarding-slots { margin-top: 1rem; }
.ep-boarding-selected-dates {
	display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
	margin: .9rem 0 .2rem; font-weight: 600; font-size: .95rem;
}
.ep-boarding-selected-dates span { padding: .25rem .6rem; border: 1px solid var(--epb-accent); border-radius: var(--epb-radius); }
.ep-boarding-selected-dates:empty { display: none; }

/* Calendar range highlight (start, end, the nights between). */
.ep-boarding button.ep-boarding-cal-day.is-start,
.ep-boarding button.ep-boarding-cal-day.is-end {
	background: var(--epb-accent); color: var(--epb-ink); border-color: var(--epb-accent); opacity: 1;
}
.ep-boarding button.ep-boarding-cal-day.is-start .f,
.ep-boarding button.ep-boarding-cal-day.is-end .f { color: var(--epb-ink); }
.ep-boarding button.ep-boarding-cal-day.is-in-range {
	background: color-mix(in srgb, var(--epb-accent) 28%, transparent);
	border-color: color-mix(in srgb, var(--epb-accent) 45%, transparent);
}

/* ─── Breakdown stays (saved + current, with remove) ─── */
.ep-boarding-breakdown li { position: relative; }
.ep-boarding-breakdown li.ep-boarding-stay--current { border-left: 3px solid var(--epb-accent); padding-left: .6rem; }
.ep-boarding-stay-tag {
	display: inline-block; margin-left: .5rem; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em;
	padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--epb-accent); color: var(--epb-accent);
}
.ep-boarding button.ep-boarding-stay-remove {
	appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; line-height: 1;
	position: absolute; top: .4rem; right: 0; width: 24px; height: 24px; padding: 0;
	border: 1px solid var(--epb-line); border-radius: 50%; background: transparent; color: var(--epb-err); font-size: 1rem;
}
.ep-boarding button.ep-boarding-stay-remove:hover { border-color: var(--epb-err); }

/* --- Extension mode: an add-on (e.g. EP Booking services) owns the body ----
   When a non-boarding option is selected the native stays flow is hidden and
   .ep-boarding-ext-body is shown for the add-on to render into. */
/* Hide the native stays bits only (direct children), so an add-on can freely
   reuse .ep-boarding-* classes (e.g. the calendar) inside .ep-boarding-ext-body. */
.ep-boarding--ext-mode .ep-boarding-builder > .ep-boarding-calendar,
.ep-boarding--ext-mode .ep-boarding-builder > .ep-boarding-selected-dates,
.ep-boarding--ext-mode .ep-boarding-builder > .ep-boarding-slots,
.ep-boarding--ext-mode > .ep-boarding-quote,
.ep-boarding--ext-mode > .ep-boarding-add,
.ep-boarding--ext-mode > .ep-boarding-check,
.ep-boarding--ext-mode > .ep-boarding-details,
.ep-boarding--ext-mode > .ep-boarding-submit,
.ep-boarding--ext-mode > .ep-boarding-payment-slot { display: none !important; }
.ep-boarding-ext-body { margin-top: 1rem; }
.ep-boarding-ext-body[hidden] { display: none !important; }

/* AM/PM slot fullness — a diagonal half-fill on a day that is still bookable for
   the free slot. Morning = top-left triangle; evening = bottom-right triangle. */
.ep-boarding { --epb-cal-half: rgba(217, 117, 107, .34); }
.ep-boarding button.ep-boarding-cal-day.is-am-full {
	background-image: linear-gradient(135deg, var(--epb-cal-half) 0 49.5%, transparent 50.5% 100%);
}
.ep-boarding button.ep-boarding-cal-day.is-pm-full {
	background-image: linear-gradient(135deg, transparent 0 49.5%, var(--epb-cal-half) 50.5% 100%);
}
.ep-boarding button.ep-boarding-cal-day.is-am-full .f,
.ep-boarding button.ep-boarding-cal-day.is-pm-full .f { color: var(--epb-err); opacity: 1; font-weight: 600; }
.ep-boarding-cal-key.half::before {
	background: linear-gradient(135deg, var(--epb-cal-half) 0 50%, transparent 50%);
	border: 1px solid var(--epb-line);
}