/* ==========================================================================
   Request2Book — front end
   Visual language modelled on the Mews booking engine: Inter, 32×32 day
   buttons at 12px, hairline dividers, month picker inside the panel.

   Everything is scoped under .wpbc:not(#wpbc). The :not(#wpbc) part matches
   every widget but carries ID-level specificity, so ordinary theme rules
   like `button:hover` or `.entry-content input` can't override the calendar
   (that's what produced the solid black blocks). Controls are also reset.
   Colours and sizes live in the variables below.
   ========================================================================== */

@font-face {
	font-family: "Request2Book Inter";
	src: url("../fonts/Inter-var-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

.wpbc:not(#wpbc) {
	--wpbc-ink: #20202c;          /* text */
	--wpbc-accent: var(--wpbc-ink); /* selected dates, button hover (Appearance → Accent) */
	--wpbc-ink-soft: #5b5b6b;     /* captions, labels */
	--wpbc-shadow: 0 0 0 1px rgba(32,32,44,.06), 0 12px 40px rgba(32,32,44,.08);
	--wpbc-disabled: #b4b3c5;     /* booked / past / changeover */
	--wpbc-line: #e4e3ec;         /* hairlines */
	--wpbc-tint: #f2f2f5;         /* hover circle, date band, open picker */
	--wpbc-field: #d6d5e1;        /* input borders */
	--wpbc-card: #ffffff;
	--wpbc-tip: #20202c;
	--wpbc-radius-card: 16px;
	--wpbc-radius: 8px;           /* month picker button */
	--wpbc-btn-radius: 999px;     /* buttons: capsule by default */
	--wpbc-fade: 0.5;             /* faded dates and inactive form fields */
	--wpbc-outline: rgba(32,32,44,.45);                               /* button outline (fallback) */
	--wpbc-outline: color-mix(in srgb, var(--wpbc-ink) 45%, transparent); /* follows the ink colour */
	/* Buttons (Appearance → Buttons). Defaults follow the card and text colours,
	   so changing the text colour can never make a button disappear. */
	--wpbc-btn-bg: var(--wpbc-card);
	--wpbc-btn-text: var(--wpbc-ink);
	--wpbc-btn-line: var(--wpbc-outline);
	--wpbc-btn-hover-bg: var(--wpbc-accent);
	--wpbc-btn-hover-text: var(--wpbc-card);
	--wpbc-day: 32px;

	font-family: "Request2Book Inter", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--wpbc-ink);
	font-feature-settings: "calt", "ss01", "cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv08", "cv09", "cv10";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	max-width: 880px;
	margin: 2rem auto;
	padding: 0 12px;
	box-sizing: border-box;
	text-align: left;
}
.wpbc:not(#wpbc) *, .wpbc:not(#wpbc) *::before, .wpbc:not(#wpbc) *::after { box-sizing: border-box; }

/* ---- theme-proof reset for controls ---- */
.wpbc:not(#wpbc) :is(button, input, select, textarea) {
	all: unset;
	box-sizing: border-box;
	font: inherit;
	color: inherit;
	font-feature-settings: inherit;
}
.wpbc:not(#wpbc) :is(button, input, select, textarea)[hidden] { display: none !important; }
.wpbc:not(#wpbc) :is(h2, h3, p, ul, li, label, blockquote) { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: none; letter-spacing: inherit; }
.wpbc:not(#wpbc) svg { display: block; flex: none; }
.wpbc:not(#wpbc) :is(button, [role="button"]):focus-visible { outline: 2px solid var(--wpbc-ink); outline-offset: 2px; }

/* ---- card & steps ---- */
.wpbc:not(#wpbc) .wpbc-card {
	background: var(--wpbc-card);
	border-radius: var(--wpbc-radius-card);
	box-shadow: var(--wpbc-shadow);
	padding: 32px;
}
.wpbc:not(#wpbc) .wpbc-step { opacity: 0; transition: opacity .22s ease; }
.wpbc:not(#wpbc) .wpbc-step.is-visible { opacity: 1; }
.wpbc:not(#wpbc) .wpbc-step[hidden] { display: none !important; }
.wpbc:not(#wpbc) .wpbc-step:is([data-step="info"], [data-step="form"], [data-step="thanks"]) { max-width: 600px; margin: 0 auto; }

/* ---- Before You Book: large, calm editorial text ---- */
.wpbc:not(#wpbc) .wpbc-step[data-step="info"] { padding: 44px 48px 40px; }
.wpbc:not(#wpbc) .wpbc-title { font-size: 0.9375rem; line-height: 1.4; font-weight: 500; color: var(--wpbc-ink); margin: 0 0 18px; }
.wpbc:not(#wpbc) .wpbc-info-content { font-size: 0.9375rem; line-height: 1.6; color: var(--wpbc-ink); }
.wpbc:not(#wpbc) .wpbc-info-content p { margin: 0 0 0.85em; }
.wpbc:not(#wpbc) .wpbc-info-content strong { font-weight: 500; }
.wpbc:not(#wpbc) .wpbc-info-content a,
.wpbc:not(#wpbc) .wpbc-terms a { color: var(--wpbc-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.wpbc:not(#wpbc) .wpbc-terms { margin: 0.4em 0 0; font-size: 0.9375rem; }
.wpbc:not(#wpbc) .wpbc-step[data-step="info"] .wpbc-actions { justify-content: flex-end; margin-top: 36px; }

/* Tables: many themes give every table borders, stripes, backgrounds and
   margins. Reset them all here; the rates table below adds back only its own
   hairlines, and any table the owner puts in the text gets plain spacing. */
.wpbc:not(#wpbc) :is(table, thead, tbody, tfoot, tr, th, td, caption) {
	border: 0; border-radius: 0; background: none; box-shadow: none; outline: 0;
	margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none;
	text-align: left; vertical-align: top;
}
.wpbc:not(#wpbc) table { width: 100%; max-width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: auto; }
.wpbc:not(#wpbc) .wpbc-info-content table:not(.wpbc-rates) { margin: 4px 0 20px; }
.wpbc:not(#wpbc) .wpbc-info-content table:not(.wpbc-rates) :is(th, td) { padding: 6px 16px 6px 0; }
.wpbc:not(#wpbc) .wpbc-info-content table:not(.wpbc-rates) th { font-weight: 500; }

/* rates table ({season_table}): same type as Nights / Total / Deposit */
.wpbc:not(#wpbc) .wpbc-rates { width: 100%; margin: 4px 0 20px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wpbc:not(#wpbc) .wpbc-rates :is(th, td) { padding: 12px 0; text-align: right; vertical-align: top; border: 0; border-bottom: 1px solid var(--wpbc-line); background: none; }
.wpbc:not(#wpbc) .wpbc-rates :is(th, td):first-child { text-align: left; }
.wpbc:not(#wpbc) .wpbc-rates th { padding-top: 0; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wpbc-ink-soft); }
.wpbc:not(#wpbc) .wpbc-rates td { font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; color: var(--wpbc-ink); }
.wpbc:not(#wpbc) .wpbc-rates td + td { padding-left: 24px; }
.wpbc:not(#wpbc) .wpbc-rate-name { display: block; }
.wpbc:not(#wpbc) .wpbc-rate-dates { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; color: var(--wpbc-ink-soft); }

/* ---- buttons: white capsule, thin ink outline, fades to ink on hover ---- */
.wpbc:not(#wpbc) .wpbc-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 28px; }
.wpbc:not(#wpbc) .wpbc-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 38px; padding: 0 15px;
	font-size: 0.9375rem; font-weight: 400; line-height: 1; letter-spacing: -0.01em;
	background: var(--wpbc-btn-bg); color: var(--wpbc-btn-text);
	border: 0; box-shadow: inset 0 0 0 .5px var(--wpbc-btn-line); border-radius: var(--wpbc-btn-radius); /* a true hairline: Chrome rounds sub-pixel borders up to 1px, shadows it doesn't */
	cursor: pointer; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, opacity .2s;
}
.wpbc:not(#wpbc) .wpbc-btn:hover { background: var(--wpbc-btn-hover-bg); color: var(--wpbc-btn-hover-text); box-shadow: inset 0 0 0 .5px var(--wpbc-btn-hover-bg); }
.wpbc:not(#wpbc) .wpbc-btn:disabled { opacity: .4; cursor: not-allowed; background: var(--wpbc-btn-bg); color: var(--wpbc-btn-text); }
.wpbc:not(#wpbc) .wpbc-btn-ghost { margin-right: auto; }
.wpbc:not(#wpbc) .wpbc-btn[hidden] { display: none; }

/* ---- arrival / departure header (same type as the month headers) ---- */
.wpbc:not(#wpbc) .wpbc-slots { display: flex; gap: 32px; margin: 0 0 20px; }
.wpbc:not(#wpbc) .wpbc-slot { display: flex; flex-direction: column; gap: 2px; }
.wpbc:not(#wpbc) .wpbc-slot-label { font-size: 0.9375rem; line-height: 1.4; font-weight: 500; color: var(--wpbc-ink-soft); opacity: .6; transition: color .2s, opacity .2s; }
.wpbc:not(#wpbc) .wpbc-slot-date { font-size: 0.8125rem; color: var(--wpbc-ink-soft); opacity: .6; transition: color .2s, opacity .2s; }
.wpbc:not(#wpbc) .wpbc-slot.is-active .wpbc-slot-label { color: var(--wpbc-ink); opacity: 1; }
.wpbc:not(#wpbc) .wpbc-slot.is-filled .wpbc-slot-date { color: var(--wpbc-ink-soft); opacity: 1; }

/* ---- calendar panels ---- */
.wpbc:not(#wpbc) .wpbc-cal { position: relative; margin: 0 -32px; border-top: 1px solid var(--wpbc-line); }
.wpbc:not(#wpbc) .wpbc-months { display: grid; grid-template-columns: 1fr; }
.wpbc:not(#wpbc) .wpbc-months-2 { grid-template-columns: 1fr 1fr; }
.wpbc:not(#wpbc) .wpbc-month { min-width: 0; }
.wpbc:not(#wpbc) .wpbc-months-2 .wpbc-month + .wpbc-month { border-left: 1px solid var(--wpbc-line); }

.wpbc:not(#wpbc) .wpbc-month-head {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	height: 64px; padding: 0 16px;
	border-bottom: 1px solid var(--wpbc-line);
}
.wpbc:not(#wpbc) .wpbc-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	background: var(--wpbc-btn-bg); color: var(--wpbc-btn-text);
	border: 0; box-shadow: inset 0 0 0 .5px var(--wpbc-btn-line); border-radius: var(--wpbc-btn-radius);
	cursor: pointer; transition: background-color .25s ease, color .25s ease;
}
.wpbc:not(#wpbc) .wpbc-prev { left: 16px; }
.wpbc:not(#wpbc) .wpbc-next { right: 16px; }
.wpbc:not(#wpbc) .wpbc-nav:hover:not(:disabled) { background: var(--wpbc-btn-hover-bg); color: var(--wpbc-btn-hover-text); }
.wpbc:not(#wpbc) .wpbc-nav:disabled,
.wpbc:not(#wpbc) .wpbc-nav[hidden] { display: none; }

/* month dropdown button */
.wpbc:not(#wpbc) .wpbc-month-btn {
	display: inline-flex; align-items: center; gap: 8px;
	height: 40px; padding: 0 12px;
	font-size: 0.9375rem; font-weight: 500; color: var(--wpbc-ink); background: transparent;
	border: 1px solid transparent; border-radius: var(--wpbc-radius);
	cursor: pointer; transition: background-color .15s;
}
.wpbc:not(#wpbc) .wpbc-month-btn:hover,
.wpbc:not(#wpbc) .wpbc-month-btn[aria-expanded="true"] { background: var(--wpbc-tint); }
.wpbc:not(#wpbc) .wpbc-month-btn svg { transition: transform .2s ease; }
.wpbc:not(#wpbc) .wpbc-month-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.wpbc:not(#wpbc) .wpbc-panel-body { position: relative; padding: 16px 16px 20px; }

/* ---- day grid ---- */
.wpbc:not(#wpbc) :is(.wpbc-grid, .wpbc-mlist, .wpbc-stats, .wpbc-stepper output, .wpbc-slot-date) { font-variant-numeric: tabular-nums; }
.wpbc:not(#wpbc) .wpbc-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 8px; }
.wpbc:not(#wpbc) .wpbc-dow { height: 32px; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 500; color: var(--wpbc-ink); }

/* A cell spans its column (so the date band is continuous);
   the 32×32 button inside carries the circle. */
.wpbc:not(#wpbc) .wpbc-cell { position: relative; height: var(--wpbc-day); display: flex; align-items: center; justify-content: center; }
.wpbc:not(#wpbc) .wpbc-day {
	display: inline-flex; align-items: center; justify-content: center;
	width: var(--wpbc-day); height: var(--wpbc-day);
	font-size: 0.75rem; font-weight: 500; line-height: 1;
	color: var(--wpbc-ink); background: transparent;
	border-radius: 50%; cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.wpbc:not(#wpbc) .wpbc-cell:hover .wpbc-day { background: var(--wpbc-tint); }

/* booked / past / changeover */
.wpbc:not(#wpbc) .wpbc-cell[data-tip] .wpbc-day { color: var(--wpbc-disabled); cursor: default; }
.wpbc:not(#wpbc) .wpbc-cell[data-tip]:hover .wpbc-day { background: transparent; }
.wpbc:not(#wpbc) .wpbc-cell.is-today .wpbc-day { box-shadow: inset 0 0 0 1px var(--wpbc-field); }

/* selection */
.wpbc:not(#wpbc) .wpbc-cell.is-start .wpbc-day,
.wpbc:not(#wpbc) .wpbc-cell.is-end .wpbc-day { background: var(--wpbc-accent); color: var(--wpbc-card); box-shadow: none; }
.wpbc:not(#wpbc) .wpbc-cell.in-range { background: var(--wpbc-tint); }
.wpbc:not(#wpbc) .wpbc-cal.is-range .wpbc-cell.is-start { background: linear-gradient(90deg, transparent 50%, var(--wpbc-tint) 50%); }
.wpbc:not(#wpbc) .wpbc-cal.is-range .wpbc-cell.is-end   { background: linear-gradient(90deg, var(--wpbc-tint) 50%, transparent 50%); }

.wpbc:not(#wpbc) .wpbc-grid > .wpbc-cell:nth-child(7n+1) { border-radius: 16px 0 0 16px; }
.wpbc:not(#wpbc) .wpbc-grid > .wpbc-cell:nth-child(7n)   { border-radius: 0 16px 16px 0; }

/* ---- live departure preview, pure CSS ----
   .is-picking    an arrival is chosen, departure is next
   .has-start     the month panel holding the arrival
   .start-before  the arrival is in a month before those on screen */
.wpbc:not(#wpbc) .wpbc-cal.is-picking .wpbc-cell.is-start ~ .wpbc-cell:not([data-tip]):hover .wpbc-day,
.wpbc:not(#wpbc) .wpbc-cal.is-picking .wpbc-month.has-start ~ .wpbc-month .wpbc-cell:not([data-tip]):hover .wpbc-day,
.wpbc:not(#wpbc) .wpbc-cal.is-picking.start-before .wpbc-cell:not([data-tip]):hover .wpbc-day {
	background: var(--wpbc-accent); color: var(--wpbc-card);
}
.wpbc:not(#wpbc) .wpbc-cal.is-picking .wpbc-cell.is-start ~ .wpbc-cell:has(~ .wpbc-cell:not([data-tip]):hover),
.wpbc:not(#wpbc) .wpbc-cal.is-picking .wpbc-month.has-start ~ .wpbc-month .wpbc-cell:has(~ .wpbc-cell:not([data-tip]):hover),
.wpbc:not(#wpbc) .wpbc-cal.is-picking.start-before .wpbc-cell:has(~ .wpbc-cell:not([data-tip]):hover),
.wpbc:not(#wpbc) .wpbc-cal.is-picking .wpbc-months:has(.wpbc-month.has-start ~ .wpbc-month .wpbc-cell:not([data-tip]):hover) .wpbc-cell.is-start ~ .wpbc-cell,
.wpbc:not(#wpbc) .wpbc-cal.is-picking.start-before .wpbc-months:has(.wpbc-month ~ .wpbc-month .wpbc-cell:not([data-tip]):hover) .wpbc-month:first-child .wpbc-cell {
	background: var(--wpbc-tint);
}
.wpbc:not(#wpbc) .wpbc-cal.is-picking .wpbc-months:has(.wpbc-cell.is-start ~ .wpbc-cell:not([data-tip]):hover, .wpbc-month.has-start ~ .wpbc-month .wpbc-cell:not([data-tip]):hover) .wpbc-cell.is-start {
	background: linear-gradient(90deg, transparent 50%, var(--wpbc-tint) 50%);
}
.wpbc:not(#wpbc) .wpbc-cal.is-picking .wpbc-cell.is-start ~ .wpbc-cell:not([data-tip]):hover,
.wpbc:not(#wpbc) .wpbc-cal.is-picking .wpbc-month.has-start ~ .wpbc-month .wpbc-cell:not([data-tip]):hover,
.wpbc:not(#wpbc) .wpbc-cal.is-picking.start-before .wpbc-cell:not([data-tip]):hover {
	background: linear-gradient(90deg, var(--wpbc-tint) 50%, transparent 50%);
}

/* while choosing a departure, unreachable dates fade */
.wpbc:not(#wpbc) .wpbc-cell:is(.is-beyond, .is-before, .is-short) .wpbc-day { opacity: var(--wpbc-fade); }

/* The half-band beside the arrival/departure circle must not poke out
   where the row (or month) ends — it has nothing to connect to there. */
.wpbc:not(#wpbc) .wpbc-grid > .wpbc-cell.is-start:is(:nth-child(7n), :last-child),
.wpbc:not(#wpbc) .wpbc-grid > .wpbc-cell.is-end:is(:nth-child(7n+1), .wpbc-blank + .wpbc-cell),
.wpbc:not(#wpbc) .wpbc-cal.is-picking .wpbc-grid > .wpbc-cell:is(:nth-child(7n+1), .wpbc-blank + .wpbc-cell):hover { background: transparent !important; }

/* ---- tooltips (pure CSS, text from data-tip) ---- */
.wpbc:not(#wpbc) .wpbc-cell[data-tip]::after,
.wpbc:not(#wpbc) .wpbc-cell[data-tip]::before {
	position: absolute; left: 50%; z-index: 5;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: none; /* hide instantly; bubbles created by a re-paint never animate in */
}
.wpbc:not(#wpbc) .wpbc-cell[data-tip]::after {
	content: attr(data-tip);
	bottom: calc(100% + 8px);
	transform: translate(-50%, 4px);
	background: var(--wpbc-tip); color: #fff;
	font-size: 0.75rem; font-weight: 500; line-height: 1.3; white-space: nowrap;
	padding: 6px 10px; border-radius: 6px;
	box-shadow: 0 6px 16px rgba(32,32,44,.18);
}
.wpbc:not(#wpbc) .wpbc-cell[data-tip]::before {
	content: "";
	bottom: calc(100% - 4px);
	transform: translate(-50%, 4px);
	border: 6px solid transparent; border-top-color: var(--wpbc-tip);
}
.wpbc:not(#wpbc) .wpbc-cell[data-tip]:is(:hover, :focus-within)::after,
.wpbc:not(#wpbc) .wpbc-cell[data-tip]:is(:hover, :focus-within)::before {
	opacity: 1; visibility: visible; transform: translate(-50%, 0);
	transition: opacity .15s ease .25s, transform .15s ease .25s, visibility 0s linear .25s;
}
.wpbc:not(#wpbc) .wpbc-cell[data-tip=""]::after,
.wpbc:not(#wpbc) .wpbc-cell[data-tip=""]::before { display: none; } /* not selectable, nothing to say */
/* keep bubbles inside the card on the outer columns */
.wpbc:not(#wpbc) .wpbc-grid > .wpbc-cell:is(:nth-child(7n+1), :nth-child(7n+2))::after { left: 0; transform: translate(0, 4px); }
.wpbc:not(#wpbc) .wpbc-grid > .wpbc-cell:is(:nth-child(7n+1), :nth-child(7n+2)):is(:hover, :focus-within)::after { transform: translate(0, 0); }
.wpbc:not(#wpbc) .wpbc-grid > .wpbc-cell:is(:nth-child(7n), :nth-child(7n+6))::after { left: auto; right: 0; transform: translate(0, 4px); }
.wpbc:not(#wpbc) .wpbc-grid > .wpbc-cell:is(:nth-child(7n), :nth-child(7n+6)):is(:hover, :focus-within)::after { transform: translate(0, 0); }

/* ---- month picker (opens inside the panel, like Mews) ---- */
.wpbc:not(#wpbc) .wpbc-mlist {
	position: absolute; inset: 0;
	background: var(--wpbc-card);
	overflow-y: auto; overscroll-behavior: contain;
	padding: 0 16px;
	scrollbar-width: thin; scrollbar-color: var(--wpbc-line) transparent;
	animation: wpbc-fade .15s ease;
}
@keyframes wpbc-fade { from { opacity: 0; } to { opacity: 1; } }
.wpbc:not(#wpbc) .wpbc-myear {
	display: grid; grid-template-columns: 52px 1fr; align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid var(--wpbc-line);
}
.wpbc:not(#wpbc) .wpbc-myear:last-child { border-bottom: 0; }
.wpbc:not(#wpbc) .wpbc-myear-label { font-size: 0.8125rem; font-weight: 600; line-height: 40px; color: var(--wpbc-ink); }
.wpbc:not(#wpbc) .wpbc-mgrid { display: grid; grid-template-columns: repeat(6, 1fr); row-gap: 4px; }
.wpbc:not(#wpbc) .wpbc-mbtn {
	justify-self: center;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 40px;
	font-size: 0.8125rem; font-weight: 500; color: var(--wpbc-ink); background: transparent;
	border-radius: 20px; cursor: pointer;
	transition: background-color .15s, color .15s;
}
.wpbc:not(#wpbc) .wpbc-mbtn:hover:not(:disabled) { background: var(--wpbc-tint); }
.wpbc:not(#wpbc) .wpbc-mbtn.is-current { box-shadow: inset 0 0 0 1px var(--wpbc-ink); }
.wpbc:not(#wpbc) .wpbc-mbtn.is-selected { background: var(--wpbc-accent); color: var(--wpbc-card); box-shadow: none; }
.wpbc:not(#wpbc) .wpbc-mbtn:disabled { color: var(--wpbc-disabled); cursor: default; }

/* ---- status line: nights · total · deposit ---- */
.wpbc:not(#wpbc) .wpbc-status { min-height: 1.5em; margin: 16px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--wpbc-ink-soft); text-align: center; }
.wpbc:not(#wpbc) .wpbc-cal + .wpbc-status { margin: 0 -32px; padding: 18px 32px 0; border-top: 1px solid var(--wpbc-line); min-height: 56px; }
.wpbc:not(#wpbc) .wpbc-stats { display: flex; justify-content: center; gap: 44px; }
.wpbc:not(#wpbc) .wpbc-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wpbc:not(#wpbc) .wpbc-stat-k { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wpbc-ink-soft); }
.wpbc:not(#wpbc) .wpbc-stat-v { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: var(--wpbc-ink); }

/* ---- summary above the form ---- */
.wpbc:not(#wpbc) .wpbc-summary { margin: 0 0 12px; padding-bottom: 24px; border-bottom: 1px solid var(--wpbc-line); }
.wpbc:not(#wpbc) .wpbc-summary-grid { display: grid; grid-template-columns: repeat(3, max-content); gap: 18px 56px; align-items: start; }
.wpbc:not(#wpbc) .wpbc-summary-item,
.wpbc:not(#wpbc) .wpbc-summary-grid .wpbc-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.wpbc:not(#wpbc) .wpbc-summary-item .wpbc-slot-label { font-size: 0.8125rem; font-weight: 500; color: var(--wpbc-ink-soft); }
.wpbc:not(#wpbc) .wpbc-summary-item .wpbc-slot-date { font-size: 1rem; font-weight: 500; color: var(--wpbc-ink); }

/* ---- form: underlined fields; hover or the last-used field is solid, the rest fade ---- */
.wpbc:not(#wpbc) .wpbc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.wpbc:not(#wpbc) .wpbc-field { position: relative; display: block; margin: 0 0 20px; opacity: var(--wpbc-fade); transition: opacity .25s ease; }
.wpbc:not(#wpbc) .wpbc-field:is(:hover, :focus-within, .is-active) { opacity: 1; }
.wpbc:not(#wpbc) .wpbc-field label,
.wpbc:not(#wpbc) .wpbc-label { display: block; font-size: 0.8125rem; font-weight: 500; line-height: 1.4; margin: 0 0 6px; color: var(--wpbc-ink); }
.wpbc:not(#wpbc) .wpbc-optional { font-weight: 400; color: var(--wpbc-ink-soft); }
.wpbc:not(#wpbc) .wpbc-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	display: block; width: 100%;
	height: 40px; padding: 0;
	font-size: 1rem; /* 16px stops iOS zoom on focus */
	background: transparent; color: var(--wpbc-ink);
	border: 0; border-bottom: 1px solid var(--wpbc-ink); border-radius: 0;
}
.wpbc:not(#wpbc) .wpbc-form textarea { height: auto; min-height: 72px; padding: 9px 0; line-height: 1.5; white-space: pre-wrap; overflow: auto; resize: vertical; }

/* Floating labels: the label sits on the line like a placeholder, and lifts
   to a small caption when you click in, so your text takes its place. */
.wpbc:not(#wpbc) .wpbc-float { padding-top: 20px; }
.wpbc:not(#wpbc) .wpbc-float label {
	position: absolute; left: 0; top: 29px; margin: 0;
	font-size: 1rem; font-weight: 400; color: var(--wpbc-ink);
	pointer-events: none; transform-origin: left top;
	transition: transform .2s ease, color .2s ease;
}
.wpbc:not(#wpbc) .wpbc-float:is(:focus-within, .is-filled) label { transform: translateY(-27px) scale(.78); color: var(--wpbc-ink-soft); }
.wpbc:not(#wpbc) .wpbc-float-area label { top: 29px; }

/* phone: a compact "🇬🇧 +44" on the same underline, then the number. The
   country list is a native select laid invisibly over it, so it keeps the
   keyboard, type-to-jump, screen-reader names and the phone's own picker. */
.wpbc:not(#wpbc) .wpbc-phone { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: end; }
.wpbc:not(#wpbc) .wpbc-dial {
	position: relative; display: flex; align-items: center; gap: 6px;
	height: 40px; padding-right: 2px;
	font-size: 1rem; color: var(--wpbc-ink); white-space: nowrap;
	border-bottom: 1px solid var(--wpbc-ink);
}
.wpbc:not(#wpbc) .wpbc-dial::after { /* small chevron */
	content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg); opacity: .6;
}
.wpbc:not(#wpbc) .wpbc-dial select {
	position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
	font-size: 1rem; /* no iOS zoom */ opacity: 0; cursor: pointer;
}
.wpbc:not(#wpbc) .wpbc-dial:focus-within { outline: 2px solid var(--wpbc-ink); outline-offset: 2px; }
.wpbc:not(#wpbc) .wpbc-phone .wpbc-float { position: relative; margin: 0; } /* its label sits over the number, not the country */
.wpbc:not(#wpbc) .wpbc-field-error { grid-column: 1 / -1; margin: 6px 0 0; font-size: 0.8125rem; color: #b32d2e; }
.wpbc:not(#wpbc) .wpbc-field-error[hidden] { display: none; }
.wpbc:not(#wpbc) .wpbc-phone.is-invalid :is(.wpbc-dial, input[type="tel"]) { border-bottom-color: #b32d2e; }

/* guests: compact − n + on the left, no underline */
.wpbc:not(#wpbc) .wpbc-field-guests { padding-top: 4px; }
.wpbc:not(#wpbc) .wpbc-stepper { display: inline-grid; grid-template-columns: 32px 2.25rem 32px; align-items: center; height: 40px; }
.wpbc:not(#wpbc) .wpbc-stepper button {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	font-size: 1.125rem; line-height: 1; color: var(--wpbc-btn-text); background: var(--wpbc-btn-bg);
	border: 0; box-shadow: inset 0 0 0 .5px var(--wpbc-btn-line); border-radius: var(--wpbc-btn-radius);
	cursor: pointer; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, opacity .2s;
}
.wpbc:not(#wpbc) .wpbc-stepper button:hover:not(:disabled):not(.is-capped) { background: var(--wpbc-btn-hover-bg); color: var(--wpbc-btn-hover-text); }
.wpbc:not(#wpbc) .wpbc-stepper button:is(:disabled, .is-capped) { opacity: .3; cursor: default; }
.wpbc:not(#wpbc) .wpbc-stepper output { text-align: center; font-size: 1rem; font-weight: 500; }
.wpbc:not(#wpbc) .wpbc-hint { margin: -8px 0 20px; font-size: 0.75rem; color: var(--wpbc-ink-soft); opacity: var(--wpbc-fade); }
.wpbc:not(#wpbc) .wpbc-hint[hidden] { display: none; }

/* promo code: underlined like the other fields, with an Apply text button */
.wpbc:not(#wpbc) .wpbc-promo input[type="text"] { padding-right: 64px; text-transform: uppercase; letter-spacing: .04em; }
.wpbc:not(#wpbc) .wpbc-promo-apply { position: absolute; right: 0; top: 26px; height: 30px; padding: 0 12px; font-size: 0.8125rem; font-weight: 500; color: var(--wpbc-btn-text); background: var(--wpbc-btn-bg); border-radius: var(--wpbc-btn-radius); box-shadow: inset 0 0 0 .5px var(--wpbc-btn-line); cursor: pointer; transition: background-color .2s, color .2s; }
.wpbc:not(#wpbc) .wpbc-promo-apply:hover { background: var(--wpbc-btn-hover-bg); color: var(--wpbc-btn-hover-text); }
.wpbc:not(#wpbc) .wpbc-promo-status { margin: 6px 0 0; font-size: 0.75rem; min-height: 1em; color: var(--wpbc-ink-soft); }
.wpbc:not(#wpbc) .wpbc-promo-status.is-ok { color: #1b7a36; }
.wpbc:not(#wpbc) .wpbc-promo-status.is-bad { color: #b32d2e; }
.wpbc:not(#wpbc) .wpbc-was { font-weight: 400; color: var(--wpbc-ink-soft); margin-right: 2px; }

.wpbc:not(#wpbc) .wpbc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.wpbc:not(#wpbc) .wpbc-disclaimer { font-size: 0.75rem; color: var(--wpbc-ink-soft); margin: 16px 0 0; text-align: right; }

/* ---- thanks ---- */
.wpbc:not(#wpbc) .wpbc-thanks { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.wpbc:not(#wpbc) .wpbc-thanks-message { font-size: 1.0625rem; line-height: 1.6; max-width: 420px; margin: 0 0 18px; }

/* Paper folds into a plane and flies away (SMIL inside the SVG; see class-frontend.php). */
.wpbc:not(#wpbc) .wpbc-fold { display: block; margin: 0 auto 14px; overflow: visible; color: var(--wpbc-ink); }
.wpbc:not(#wpbc) .wpbc-fold :is(.wpbc-fold-edge, .wpbc-fold-line, .wpbc-fold-plane path) { fill: var(--wpbc-card); stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.wpbc:not(#wpbc) .wpbc-fold-line { fill: none; }
.wpbc:not(#wpbc) .wpbc-fold-plane path { stroke-width: 1.2; } /* scaled 1.35× inside the group */
.wpbc:not(#wpbc) .wpbc-fold-dash { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 3 3.5; stroke-linecap: round; }
.wpbc:not(#wpbc) .wpbc-fold-trail { fill: none; stroke: var(--wpbc-disabled); stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; }
/* reduced motion / no SMIL: just show the finished plane */
.wpbc:not(#wpbc) .wpbc-fold.is-static .wpbc-fold-paper { display: none; }
.wpbc:not(#wpbc) .wpbc-fold.is-static .wpbc-fold-plane { opacity: 1; transform: translate(120px, 70px); }
.wpbc:not(#wpbc) .wpbc-home-link { font-size: 0.875rem; font-weight: 500; color: var(--wpbc-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- mobile ---- */
@media (max-width: 767px) {
	.wpbc:not(#wpbc) { margin: 1rem auto; padding: 0 8px; }
	.wpbc:not(#wpbc) .wpbc-card { padding: 24px 16px; border-radius: 12px; }
	.wpbc:not(#wpbc) .wpbc-cal { margin: 0 -16px; }
	.wpbc:not(#wpbc) .wpbc-cal + .wpbc-status { margin: 0 -16px; padding: 16px 16px 0; }
	.wpbc:not(#wpbc) .wpbc-stats { gap: 24px; }
	.wpbc:not(#wpbc) .wpbc-step[data-step="info"] { padding: 28px 20px 24px; }
	.wpbc:not(#wpbc) .wpbc-panel-body { padding: 12px 8px 16px; }
	.wpbc:not(#wpbc) .wpbc-slots { gap: 24px; }
	.wpbc:not(#wpbc) .wpbc-summary-grid { column-gap: 28px; }
	.wpbc:not(#wpbc) .wpbc-row { grid-template-columns: 1fr; }
	.wpbc:not(#wpbc) .wpbc-disclaimer { text-align: left; }
	.wpbc:not(#wpbc) .wpbc-mbtn { width: 40px; }
}

@media (hover: none) {
	.wpbc:not(#wpbc) .wpbc-nav:hover:not(:disabled) { background: var(--wpbc-btn-bg); color: var(--wpbc-btn-text); }
	.wpbc:not(#wpbc) .wpbc-btn:hover { background: var(--wpbc-btn-bg); color: var(--wpbc-btn-text); }
	.wpbc:not(#wpbc) .wpbc-stepper button:hover:not(:disabled):not(.is-capped) { background: var(--wpbc-btn-bg); color: var(--wpbc-btn-text); }
	.wpbc:not(#wpbc) .wpbc-cell:hover .wpbc-day,
	.wpbc:not(#wpbc) .wpbc-mbtn:hover:not(:disabled) { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.wpbc:not(#wpbc) .wpbc-step, .wpbc:not(#wpbc) .wpbc-field, .wpbc:not(#wpbc) .wpbc-day, .wpbc:not(#wpbc) .wpbc-slot, .wpbc:not(#wpbc) .wpbc-btn, .wpbc:not(#wpbc) .wpbc-nav, .wpbc:not(#wpbc) .wpbc-mlist,
	.wpbc:not(#wpbc) .wpbc-month-btn svg, .wpbc:not(#wpbc) .wpbc-cell[data-tip]::after, .wpbc:not(#wpbc) .wpbc-cell[data-tip]::before { transition: none; animation: none; }
}
