/**
 * Booking form.
 *
 * A note on class names: the theme already owns `.cc-panel` — it is the
 * sign-in card, 440px wide and centred — and the plugin shares the `cc-`
 * prefix with it. A plugin class that collides with a theme class gets
 * reshaped by a theme update nobody connected to it, so everything here is
 * namespaced under `cc-book`. The collision was real: the locked sections
 * were being centred and shrink-wrapped by the sign-in card's max-width.
 *
 * Built on the theme's design tokens, with fallbacks so the form still looks
 * deliberate if it is ever rendered outside the CircularCups theme — a plugin
 * that only looks right under one theme is a plugin that breaks on a theme
 * switch, which is the thing the plugin/theme split exists to prevent.
 */

.cc-book {
	--cc-ink: var(--wp--preset--color--neutral-900, #211e33);
	--cc-body: var(--wp--preset--color--neutral-700, #3d3a52);
	--cc-muted: var(--wp--preset--color--neutral-500, #6e6a84);
	--cc-rule: var(--wp--preset--color--neutral-200, #e4e1ef);
	--cc-surface: #fff;
	--cc-sunken: var(--wp--preset--color--neutral-050, #f7f6fb);
	--cc-brand: var(--wp--preset--color--purple-500, #6058a0);
	--cc-brand-deep: var(--wp--preset--color--purple-700, #423c73);
	--cc-good: #3f6e20;
	--cc-good-bg: #ecf5e0;
	--cc-bad: #c0392b;
	--cc-bad-bg: #fbe7e4;
	--cc-tint: var(--wp--preset--color--purple-100, #eceaf7);

	color: var(--cc-body);
	container-type: inline-size;
}

/* The design sets the booking screen's headings to the body face rather than
   the display one —  in the
   prototype. On a form with four section headings and two panel titles the
   display face shouts; a form should be quiet and legible. */
.cc-book h2,
.cc-book h3 {
	font-family: var(--wp--preset--font-family--poppins, "Poppins", system-ui, sans-serif);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
}

.cc-book h2 {
	margin: 0 0 0.5rem;
}

/* ---- the two-stage indicator, top right ---- */

.cc-stages {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.cc-stages__item {
	align-items: center;
	color: var(--cc-muted);
	display: inline-flex;
	font-size: 0.9rem;
	gap: 0.5rem;
}

.cc-stages__item.is-current {
	color: var(--cc-ink);
	font-weight: 600;
}

.cc-stages__n {
	align-items: center;
	background: var(--cc-tint);
	border-radius: 50%;
	color: var(--cc-brand-deep);
	display: inline-flex;
	flex: none;
	font-size: 0.8rem;
	height: 1.6rem;
	justify-content: center;
	width: 1.6rem;
}

.cc-stages__item.is-current .cc-stages__n {
	background: var(--cc-brand-deep);
	color: #fff;
}

.cc-stages__rule {
	background: var(--cc-rule);
	height: 1px;
	width: 2.5rem;
}

.cc-book__leaf {
	display: inline-flex;
	margin-right: 0.15rem;
	vertical-align: -2px;
}

.cc-book__step {
	background: var(--cc-tint);
	border-radius: 999px;
	color: var(--cc-brand-deep);
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0 0 1.5rem;
	padding: 0.35rem 0.9rem;
}

.cc-book__eyebrow {
	color: var(--cc-brand);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 0.25rem;
	text-transform: uppercase;
}

.cc-book__lede {
	color: var(--cc-body);
	max-width: 62ch;
}

.cc-book__intro {
	background: var(--cc-surface);
	border: 1px solid var(--cc-rule);
	border-radius: 14px;
	margin-bottom: 2rem;
	padding: 1.5rem;
}

.cc-book__cups {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.cc-book__cups li {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

/* A square lavender tile with the cup sitting on its base, as the design has
   it — the photography is the only decoration on this screen and it earns its
   place by showing somebody what they are hiring. */
.cc-cup__tile {
	align-items: flex-end;
	aspect-ratio: 1;
	background: var(--wp--preset--color--purple-050, #f5f4fb);
	border-radius: 12px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	padding: 0.75rem;
}

.cc-cup__tile img {
	height: auto;
	max-height: 100%;
	max-width: 85%;
	object-fit: contain;
	object-position: bottom;
	width: auto;
}

.cc-book__cups strong {
	color: var(--cc-ink);
	display: block;
}

.cc-cup__meta {
	color: var(--cc-muted);
	font-size: 0.85rem;
	line-height: 1.45;
}

/* Single column by default, two only when the container is genuinely wide
   enough. A viewport media query would be the wrong test: the form does not
   know how wide the column it has been placed in is, and on this theme that
   column is 680px on a 1440px screen — which squeezed the form to 264px and
   clipped every field. */
.cc-book__layout {
	align-items: start;
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 60rem) {
	.cc-book__layout {
		grid-template-columns: minmax(0, 1fr) 22rem;
	}
}

.cc-book__panels {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

/* ---- disclosure panels ---- */

.cc-book__panel {
	background: var(--cc-surface);
	border: 1px solid var(--cc-rule);
	border-radius: 14px;
	overflow: hidden;
}

/* ---- panel states ---- */

/* The section being worked on is outlined, so there is never a question about
   where you are on a screen with four of them. */
.cc-book__panel.is-active {
	border-color: var(--cc-brand);
	box-shadow: 0 0 0 1px var(--cc-brand);
}

/* Locked sections are a map of what is coming, not a tease: title, number,
   padlock, nothing else. Pointer events off so a click does not open an empty
   box — the summary is still reachable by keyboard and announced as disabled. */
.cc-book__panel.is-locked {
	background: var(--cc-sunken);
	border-color: transparent;
}

.cc-book__panel.is-locked > summary {
	cursor: not-allowed;
	pointer-events: none;
}

.cc-book__panel.is-locked .cc-book__pt {
	color: var(--cc-muted);
}

.cc-book__panel.is-locked .cc-book__pn {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--cc-rule);
	color: var(--cc-muted);
}

.cc-book__panel.is-locked .cc-book__pbody {
	display: none;
}

.cc-book__panel.is-done .cc-book__pn {
	background: var(--cc-good);
	color: #fff;
}

.cc-book__ps {
	color: var(--cc-muted);
	flex: 1 1 100%;
	font-size: 0.85rem;
	font-weight: 400;
	margin-left: 2.5rem;
}

/* Empty is empty — no stray margin under a header with nothing to recap. */
.cc-book__ps:empty {
	display: none;
}

.cc-book__panel.is-active .cc-book__ps,
.cc-book__panel.is-locked .cc-book__ps {
	display: none;
}

.cc-book__plock {
	color: var(--cc-muted);
	display: none;
	margin-left: auto;
}

.cc-book__panel.is-locked .cc-book__plock {
	display: inline-flex;
}

.cc-book__panel > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	font-weight: 600;
	gap: 0.75rem;
	list-style: none;
	padding: 1.1rem 1.25rem;
}

.cc-book__panel > summary::-webkit-details-marker {
	display: none;
}

.cc-book__pn {
	align-items: center;
	background: var(--cc-tint);
	border-radius: 50%;
	color: var(--cc-brand-deep);
	display: inline-flex;
	flex: none;
	font-size: 0.85rem;
	height: 1.75rem;
	justify-content: center;
	width: 1.75rem;
}

.cc-book__panel[open] .cc-book__pn {
	background: var(--cc-brand);
	color: #fff;
}

.cc-book__pt {
	color: var(--cc-ink);
}

.cc-book__pbody {
	border-top: 1px solid var(--cc-rule);
	padding: 1.25rem;
}

/* ---- fields ---- */

.cc-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 1.1rem;
}

.cc-field:last-child {
	margin-bottom: 0;
}

.cc-field label {
	color: var(--cc-ink);
	font-weight: 600;
}

.cc-req {
	color: var(--cc-bad);
}

.cc-field input[type="text"],
.cc-field input[type="email"],
.cc-field input[type="tel"],
.cc-field input[type="number"],
.cc-field input[type="date"],
.cc-field select,
.cc-field textarea {
	background: #fff;
	border: 1.5px solid var(--cc-rule);
	border-radius: 10px;
	color: var(--cc-ink);
	font: inherit;
	padding: 0.65rem 0.8rem;
	width: 100%;
}

.cc-field input:focus-visible,
.cc-field select:focus-visible,
.cc-field textarea:focus-visible {
	border-color: var(--cc-brand);
	outline: 3px solid var(--cc-tint);
	outline-offset: 1px;
}

.cc-field--check label {
	align-items: flex-start;
	display: flex;
	font-weight: 400;
	gap: 0.6rem;
}

.cc-field--check input {
	flex: none;
	margin-top: 0.2rem;
}

.cc-help {
	color: var(--cc-muted);
	font-size: 0.85rem;
	font-weight: 400;
}

.cc-error {
	background: var(--cc-bad-bg);
	border-radius: 6px;
	color: var(--cc-bad);
	font-size: 0.87rem;
	font-weight: 600;
	padding: 0.35rem 0.6rem;
}

.cc-group {
	border: 0;
	margin: 0 0 1.5rem;
	padding: 0;
}

.cc-group legend {
	color: var(--cc-ink);
	font-weight: 600;
	padding: 0;
}

.cc-row {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 1fr;
}

/* ---- quantities ---- */

.cc-qty {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.cc-field--qty input {
	max-width: 7rem;
}

.cc-unit {
	color: var(--cc-muted);
	font-size: 0.85rem;
}

.cc-qty__status {
	font-size: 0.85rem;
	font-weight: 600;
}

.cc-qty__status.is-ok {
	color: var(--cc-good);
}

.cc-qty__status.is-over {
	color: var(--cc-bad);
}

/* ---- notices ---- */

.cc-note {
	border-left: 3px solid var(--cc-brand);
	border-radius: 0 8px 8px 0;
	background: var(--cc-tint);
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
}

.cc-note strong {
	color: var(--cc-ink);
}

.cc-note p {
	margin: 0.25rem 0 0;
}

.cc-note--error {
	background: var(--cc-bad-bg);
	border-left-color: var(--cc-bad);
}

.cc-note--error strong {
	color: var(--cc-bad);
}

/* ---- the sticky side panel ---- */

.cc-book__aside {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cc-book__availability,
.cc-book__cta {
	background: var(--cc-surface);
	border: 1px solid var(--cc-rule);
	border-radius: 14px;
	padding: 1.25rem;
}

.cc-book__cta {
	border-color: var(--cc-brand);
}

.cc-book__locked {
	border: 1px dashed var(--cc-rule);
	border-radius: 14px;
	color: var(--cc-muted);
	font-size: 0.9rem;
	padding: 1.25rem;
}

.cc-book__cta-note {
	color: var(--cc-ink);
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.cc-book__cta-small {
	color: var(--cc-muted);
	font-size: 0.85rem;
	margin: 0 0 1rem;
}

.cc-book__submit {
	background: var(--cc-brand);
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 0.85rem 1.2rem;
	width: 100%;
}

.cc-book__submit:hover:not(:disabled) {
	background: var(--cc-brand-deep);
}

/* Muted rather than hidden. A button that is there but not yet usable tells
   somebody what they are working towards; one that appears at the end is a
   surprise. */
.cc-book__submit:disabled {
	background: var(--wp--preset--color--purple-300, #a7a1d4);
	cursor: not-allowed;
}

/* ---- availability meters ---- */

.cc-meter {
	margin-bottom: 1.25rem;
}

.cc-meter__head {
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	margin: 0 0 0.4rem;
}

.cc-meter__label {
	color: var(--cc-ink);
	font-weight: 600;
}

.cc-meter__figure {
	color: var(--cc-muted);
	font-variant-numeric: tabular-nums;
}

.cc-meter__track {
	background: var(--cc-sunken);
	border: 1px solid var(--cc-rule);
	border-radius: 999px;
	display: block;
	height: 14px;
	overflow: hidden;
	position: relative;
}

.cc-meter__free,
.cc-meter__fill {
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	top: 0;
}

.cc-meter__free {
	background: var(--cc-good-bg);
}

.cc-meter__fill {
	background: var(--cc-good);
	border-radius: 999px;
}

.cc-meter.is-over .cc-meter__fill {
	background: var(--cc-bad);
}

.cc-meter__note {
	color: var(--cc-good);
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0.35rem 0 0;
}

.cc-meter.is-over .cc-meter__note {
	color: var(--cc-bad);
}

/* ---- the stock window strip ---- */

.cc-book__window {
	background: var(--cc-surface);
	border: 1px solid var(--cc-rule);
	border-radius: 14px;
	margin-top: 2rem;
	padding: 1.5rem;
}

.cc-win {
	display: flex;
	gap: 3px;
	margin-top: 1rem;
}

.cc-win__stage {
	align-items: center;
	border-radius: 6px;
	color: #fff;
	display: flex;
	font-size: 0.8rem;
	font-weight: 600;
	justify-content: center;
	min-width: 0;
	overflow: hidden;
	padding: 0.6rem 0.3rem;
	text-align: center;
	white-space: nowrap;
}

.cc-win__stage--lead_in {
	background: var(--wp--preset--color--purple-300, #a7a1d4);
	color: var(--cc-ink);
}

.cc-win__stage--event {
	background: var(--cc-brand);
}

.cc-win__stage--return {
	background: var(--cc-brand-deep);
}

.cc-win__stage--cleaning {
	background: var(--wp--preset--color--purple-900, #2c2855);
}

.cc-win__note {
	color: var(--cc-muted);
	font-size: 0.85rem;
	margin: 0.75rem 0 0;
}

/* The sticky sidebar only makes sense beside something. In one column it sits
   in the flow, where a sticky panel would otherwise cover the fields below it. */
.cc-book__aside {
	position: static;
}

@container (min-width: 60rem) {
	.cc-book__aside {
		position: sticky;
		top: 1.5rem;
	}
}

@container (max-width: 36rem) {
	.cc-row {
		grid-template-columns: 1fr;
	}

	.cc-qty {
		grid-template-columns: 1fr;
	}
}