/**
 * Fonetech Repair Booking — Frontend Styles
 *
 * Design system + structural CSS for the catalog and booking wizard.
 * Desktop-first; responsive polish is deferred (see the two @media blocks
 * at the bottom, kept but not expanded).
 */

/* ── Reset / Root ─────────────────────────────────────────────────────────── */
.frb-booking-root *,
.frb-booking-root *::before,
.frb-booking-root *::after {
	box-sizing: border-box;
}

.frb-booking-root {
	--frb-primary: #2979FF;
	--frb-primary-dark: #1557C0;
	--frb-primary-light: #eef2ff;
	--frb-accent: #e8202a;
	--frb-accent-dark: #c81a22;
	--frb-text: #1a1a2e;
	--frb-text-muted: #6b7280;
	--frb-bg: #ffffff;
	--frb-bg-alt: #f7f8fc;
	--frb-border: #e5e7eb;
	/* Material-style shape/elevation scale — small radius for buttons/inputs/
	   chips, a touch more for card surfaces; two-layer shadows approximate
	   Material elevation (resting vs raised-on-hover). */
	--frb-radius: 4px;
	--frb-radius-lg: 8px;
	--frb-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08), 0 1px 3px 1px rgb(0 0 0 / 0.06);
	--frb-shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 4px 8px 3px rgb(0 0 0 / 0.08);
	--frb-tint: rgb(79 70 229 / 0.07);
	/* Card backdrop: faint brand-blue waves along the bottom edge, so the
	   transparent device PNGs sit on a surface with some depth instead of flat
	   white. Kept as a whole `background` shorthand because the hover/active
	   rules re-declare `background` and would otherwise drop the image. */
	--frb-card-surface: var(--frb-bg) url('../img/frb-card-pattern.svg') center bottom / 100% auto no-repeat;
	--frb-transition: 150ms ease;

	/* @wordpress/components (Button, DatePicker, ToggleControl, …) reads its
	   own accent/background/foreground colors from these custom properties
	   (see node_modules/@wordpress/components/src/utils/colors-values.js),
	   falling back to WP-admin blue if unset. Several of those components
	   (DatePicker's selected day in particular) style themselves via
	   emotion/styled-components with no stable class to target from outside,
	   so overriding the source variables — rather than fighting each
	   component's own specificity — is what actually themes them. */
	--wp-components-color-accent: var(--frb-primary);
	--wp-components-color-accent-darker-10: var(--frb-primary-dark);
	--wp-components-color-accent-darker-20: var(--frb-primary-dark);
	--wp-components-color-background: var(--frb-bg);
	--wp-components-color-foreground: var(--frb-text);
	--wp-components-color-accent-inverted: #fff;
	/* DatePicker's non-selected "today" marker uses this — on-brand tint
	   instead of WP's generic grey. */
	--wp-components-color-gray-200: var(--frb-primary-light);

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	color: var(--frb-text);
	background: var(--frb-bg);
	line-height: 1.5;
	/* Caps the plugin's own width on very wide screens — full-width theme
	   containers otherwise stretch the catalog grid to dozens of columns of
	   thin cards. No horizontal padding at this size; desktop themes already
	   give the content column its own gutter. */
	max-width: 1180px;
	margin-inline: auto;
}

/* Below this, a theme's own gutter can shrink to nothing (full-width
   Elementor sections in particular), so the plugin guarantees its own
   minimum side margin instead of depending on it — otherwise cards, the
   selected-badge that sits half outside its card, etc. touch the screen
   edge. */
@media (max-width: 720px) {
	.frb-booking-root {
		padding: 0 1.25rem;
	}
}

@media (max-width: 480px) {
	.frb-booking-root {
		padding: 0 1rem;
	}
}

.frb-booking-root h2 {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.frb-booking-root h3 {
	font-size: 1.0625rem;
	font-weight: 700;
}

/* ── Focus states ──────────────────────────────────────────────────────────── */
.frb-booking-root button:focus-visible,
.frb-booking-root a:focus-visible,
.frb-booking-root input:focus-visible,
.frb-booking-root select:focus-visible,
.frb-booking-root textarea:focus-visible {
	outline: 2px solid var(--frb-primary);
	outline-offset: 2px;
}

/* ── Button reset ─────────────────────────────────────────────────────────── */
/* The active theme may style every bare <button>/[type=button] on the page
   (border/color/padding/border-radius) — at equal selector specificity, source
   order decides the winner, and we can't rely on loading after the theme.
   Scoping every interactive element's rule under `.frb-booking-root` (see the
   card/tab/slot rules below) keeps our specificity a class above anything a
   theme targets generically, so our styling always wins regardless of order. */
.frb-booking-root button,
.frb-booking-root [type="button"],
.frb-booking-root [type="submit"] {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	border-radius: 0;
}

/* ── Material-style buttons (baseline for every @wordpress/components Button
   in the plugin — Book Repair, Confirm Booking, Select store, Back, etc.).
   Contained (is-primary) = solid fill + elevation shadow, no border.
   Outlined (is-secondary/is-tertiary) = transparent fill + colored border,
   tinted hover, no elevation. Context-specific rules further down only need
   to override color (e.g. the red "money action" buttons) — shape/elevation/
   hover mechanics live here once. ─────────────────────────────────────────── */
.frb-booking-root .components-button.is-primary,
.frb-booking-root .components-button.is-secondary,
.frb-booking-root .components-button.is-tertiary {
	height: auto !important;
	padding: 6px 12px !important;
	border-radius: var(--frb-radius) !important;
	font-weight: 600 !important;
	transition: background var(--frb-transition), border-color var(--frb-transition),
		box-shadow var(--frb-transition), color var(--frb-transition) !important;
}

.frb-booking-root .components-button.is-primary {
	background: var(--frb-primary) !important;
	border: 1px solid var(--frb-primary) !important;
	color: #fff !important;
	box-shadow: var(--frb-shadow) !important;
}

.frb-booking-root .components-button.is-primary:hover:not(:disabled) {
	background: var(--frb-primary-dark) !important;
	border-color: var(--frb-primary-dark) !important;
	box-shadow: var(--frb-shadow-md) !important;
}

.frb-booking-root .components-button.is-primary:active:not(:disabled) {
	box-shadow: var(--frb-shadow) !important;
}

.frb-booking-root .components-button.is-primary:disabled {
	background: var(--frb-border) !important;
	border-color: var(--frb-border) !important;
	color: var(--frb-text-muted) !important;
	box-shadow: none !important;
}

.frb-booking-root .components-button.is-secondary,
.frb-booking-root .components-button.is-tertiary {
	background: var(--frb-bg) !important;
	border: 1px solid var(--frb-primary) !important;
	color: var(--frb-primary) !important;
	box-shadow: none !important;
}

.frb-booking-root .components-button.is-secondary:hover:not(:disabled),
.frb-booking-root .components-button.is-tertiary:hover:not(:disabled) {
	background: var(--frb-tint) !important;
	border-color: var(--frb-primary) !important;
}

/* ── Loading placeholder ──────────────────────────────────────────────────── */
.frb-booking-root.frb-loading {
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--frb-text-muted);
}

/* ── Image-with-fallback placeholder ──────────────────────────────────────── */
.frb-image-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	background: var(--frb-bg-alt);
	color: var(--frb-text-muted);
	border-radius: var(--frb-radius);
}

.frb-image-placeholder__icon {
	font-size: 1.625rem;
	line-height: 1;
	opacity: 0.85;
}

.frb-image-placeholder__label {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.7;
}

/* The form is scrolled to on every screen change (see FrbApp), so it needs the
   same clearance from the viewport edge and the admin bar as the steps do. */
.frb-app {
	scroll-margin-top: 5rem;
}

/* ── Catalog steps ─────────────────────────────────────────────────────────── */
.frb-catalog-step {
	margin-bottom: 2rem;
	/* Steps are scrolled into view as they unlock (see useRevealScroll) — this
	   keeps the heading clear of the viewport edge and of the admin bar. */
	scroll-margin-top: 5rem;
}

.frb-catalog-step h2 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--frb-text);
}

/* A collapsed step is a resolved answer, not an open question: it steps back to
   a quiet caption above its card, and the number becomes a tick. */
.frb-catalog-step.is-collapsed {
	margin-bottom: 1rem;
}

.frb-catalog-step.is-collapsed h2 {
	margin: 0 0 0.5rem;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--frb-text-muted);
}

.frb-catalog-step.is-collapsed .frb-catalog-step__number {
	width: 1.25rem;
	height: 1.25rem;
	background: none;
	color: var(--frb-primary);
}

.frb-catalog-step.is-collapsed .frb-catalog-step__number svg {
	width: 1.25em;
	height: 1.25em;
	stroke-width: 2.5;
}

/* Open/close panel. Animating grid-template-rows between 0fr and 1fr gives a
   real height transition with no JS measurement; browsers without support for
   animating it simply snap open, which is still correct. */
.frb-step-panel {
	display: grid;
	grid-template-rows: 1fr;
	opacity: 1;
	transition: grid-template-rows 280ms ease, opacity 200ms ease;
}

.frb-step-panel.is-hidden {
	grid-template-rows: 0fr;
	opacity: 0;
}

/* `overflow: hidden` is what clips the closing panel, so the cards inside need
   a little room for their hover lift and shadow — and that padding has to
   shrink with the panel, since padding is not clipped by a 0fr row. */
.frb-step-panel__inner {
	min-height: 0;
	overflow: hidden;
	padding: 0.75rem;
	transition: padding 280ms ease;
}

.frb-step-panel.is-hidden .frb-step-panel__inner {
	padding-top: 0;
	padding-bottom: 0;
}

/* The picked card, shrunk — a collapsed step exists to save vertical space, so
   it must not stand as tall as the grid it replaced. */
.frb-booking-root .frb-device-type-card.frb-step-summary {
	width: 20%;
	min-width: 200px;
	max-width: 100%;
	min-height: 300px;
	padding: 0.875rem;
	gap: 0.5rem;
}

.frb-booking-root .frb-step-summary .frb-device-type-card__media {
	height: 110px;
}

/* Quiet until you reach for it — the card explains itself on hover/focus
   rather than shouting a button at rest. */
.frb-step-summary__action {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--frb-text-muted);
	opacity: 0.65;
	transition: color var(--frb-transition), opacity var(--frb-transition);
}

.frb-step-summary__action::after {
	content: '';
	width: 0.45rem;
	height: 0.45rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

.frb-booking-root .frb-step-summary:hover .frb-step-summary__action,
.frb-booking-root .frb-step-summary:focus-visible .frb-step-summary__action {
	color: var(--frb-primary);
	opacity: 1;
}

/* Touch has no hover — keep the affordance legible there. */
@media (hover: none) {
	.frb-step-summary__action {
		opacity: 1;
	}
}

/* Newly revealed steps fade up rather than appearing all at once. */
.frb-catalog-step {
	animation: frb-step-in 260ms ease both;
}

@keyframes frb-step-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.frb-catalog-step {
		animation: none;
	}

	.frb-step-panel {
		transition: none;
	}
}

.frb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.frb-catalog-step__number {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--frb-primary-light);
	color: var(--frb-primary);
	font-weight: 700;
	font-size: 1rem;
}

/* ── Device type cards (media/footer split, matches supplied mockup) ─────────── */
.frb-device-type-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.25rem;
}

.frb-booking-root .frb-device-type-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	/* `min-height`, not `height`: a fixed height let an unusually long device
	   name overflow the card's bottom edge — invisibly, since nothing clipped
	   it — and print on top of the wave background below, reading as the image
	   overlapping the label in the card underneath. A floor keeps cards the
	   same height in the normal case but lets a rare long label push the card
	   taller instead of spilling out of it. */
	min-height: 300px;
	width: 100%;
	min-width: 0;
	padding: 8px;
	gap: 0.625rem;
	border: 0px;
	border-radius: var(--frb-radius-lg);
	background: var(--frb-card-surface);
	box-shadow: var(--frb-shadow);
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: center;
	white-space: normal;
	transition: border-color var(--frb-transition), box-shadow var(--frb-transition), transform var(--frb-transition);
}

.frb-booking-root .frb-device-type-card:hover,
.frb-booking-root .frb-device-type-card:focus,
.frb-booking-root .frb-device-type-card:focus-visible,
.frb-booking-root .frb-device-type-card:active {
	border-color: var(--frb-primary);
	background: var(--frb-card-surface);
	color: inherit;
	box-shadow: var(--frb-shadow-md);
	transform: translateY(-2px);
}

.frb-booking-root .frb-device-type-card.is-selected {
	border-color: var(--frb-primary);
	box-shadow: 0 0 0 3px var(--frb-primary-light);
	transform: translateY(-2px);
}

.frb-device-type-card.is-selected::after {
	content: '\2713';
	position: absolute;
	top: -0.6rem;
	right: -0.6rem;
	width: 1.375rem;
	height: 1.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--frb-primary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 0 0 2px #fff, var(--frb-shadow);
}

/* The image frame. Model shots are collected from all over the web at every
   size and aspect ratio — some near-square, some a tall narrow phone with lots
   of transparent margin baked into the file, some a wide laptop — so the frame
   is a fixed box on BOTH axes, not just height, with `object-fit: contain`
   fitting the image inside it on whichever axis is the tighter constraint.
   A smaller image simply sits centered with space around it; a larger one
   scales down to fit — neither can ever exceed the box, which is the "standard
   size, every image fits it" behaviour asked for here.

   `overflow: hidden` here is a backstop, not the mechanism doing the real
   work — `object-fit: contain` already makes overflow structurally
   impossible on its own, so this should never actually clip anything. It
   matters only if some future rule elsewhere defeats the sizing below; if it
   is ever visibly cropping an image, that means the sizing below has stopped
   working, not that this line needs removing (see the fix below for why the
   opposite assumption — pulled this out once already — was wrong). */
.frb-device-type-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 200px;
	overflow: hidden;
	/* The card is a fixed-height flex column: without this the frame gives up
	   height when a long model name wraps to a second line, and images stop
	   matching across the row. */
	flex: none;
}

/* Scoped under `.frb-booking-root` (see the button-reset comment above) for a
   reason more specific than the general theme-conflict defense: on a page
   built with Elementor, the whole page is wrapped in `.elementor`, and
   Elementor's own `frontend.css` ships `.elementor img { height: auto; ... }`.
   That selector — one class + one element — is MORE specific than a single
   class like `.frb-device-type-card__image` alone, so it silently won the
   cascade and overrode `height: 100%` below with `height: auto`, letting the
   image size itself by its own aspect ratio instead of the frame — which is
   what was actually overflowing into the label. Neither side uses
   `!important`; the fix is simply matching Elementor's specificity, the same
   way the button reset already out-specifies a generic theme `button` rule. */
.frb-booking-root .frb-device-type-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	color: var(--frb-primary);
}

.w-\[110\] {
    width: 110px !important;
}

.frb-device-type-card__media .frb-image-placeholder {
	width: 100%;
	height: 100%;
	background: transparent;
}

.frb-device-type-card__footer {
	width: 100%;
	padding: 0 0.5rem;
	box-sizing: border-box;
}

.frb-device-type-card__label {
	display: block;
	width: 100%;
	font-weight: 700;
	font-size: 1rem;
	color: var(--frb-primary);
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	text-align: center;
}

.frb-selector-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1rem;
}

.frb-booking-root .frb-selector-card {
	position: relative;
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 1rem;
	border: 1px solid var(--frb-border);
	border-radius: var(--frb-radius-lg);
	background: var(--frb-card-surface);
	box-shadow: var(--frb-shadow);
	cursor: pointer;
	transition: border-color var(--frb-transition), box-shadow var(--frb-transition), transform var(--frb-transition);
	font: inherit;
	color: inherit;
	text-align: center;
}

.frb-booking-root .frb-selector-card:hover,
.frb-booking-root .frb-selector-card:focus,
.frb-booking-root .frb-selector-card:focus-visible,
.frb-booking-root .frb-selector-card:active {
	border-color: var(--frb-primary);
	background: var(--frb-card-surface);
	color: inherit;
	box-shadow: var(--frb-shadow-md);
	transform: translateY(-2px);
}

.frb-booking-root .frb-selector-card.is-selected {
	border-color: var(--frb-primary);
	box-shadow: 0 0 0 3px var(--frb-primary-light);
	transform: translateY(-2px);
}

.frb-selector-card.is-selected::after {
	content: '\2713';
	position: absolute;
	top: -0.6rem;
	right: -0.6rem;
	width: 1.375rem;
	height: 1.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--frb-primary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 0 0 2px #fff, var(--frb-shadow);
}

/* Fixed-size bounding tile: any uploaded PNG/JPEG (with or without its own
   background) renders at the same footprint instead of stretching to fill
   the card at whatever aspect ratio the source file happens to have. */
.frb-selector-card__image-tile {
	width: 4.5rem;
	height: 4.5rem;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--frb-radius);
	overflow: hidden;
}

/* Same Elementor-specificity fix as `.frb-device-type-card__image` above —
   brand logos are an `<img>` too, and were equally exposed to `.elementor
   img { height: auto }`, just not yet reported. */
.frb-booking-root .frb-selector-card__icon,
.frb-booking-root .frb-selector-card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	color: var(--frb-primary);
}

.frb-selector-card__image-tile .frb-image-placeholder {
	width: 100%;
	height: 100%;
	background: transparent;
}

.frb-selector-card__label {
	width: 100%;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: break-word;
}

/* ── Repair category tabs ─────────────────────────────────────────────────── */
.frb-repair-category-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	border-bottom: 1px solid var(--frb-border);
	padding-bottom: 1rem;
}

.frb-booking-root .frb-repair-category-tab {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.125rem;
	border: 1px solid var(--frb-border);
	border-radius: 999px;
	background: var(--frb-bg);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	color: inherit;
	transition: border-color var(--frb-transition), background var(--frb-transition), color var(--frb-transition);
}

.frb-booking-root .frb-repair-category-tab:hover,
.frb-booking-root .frb-repair-category-tab:focus,
.frb-booking-root .frb-repair-category-tab:focus-visible,
.frb-booking-root .frb-repair-category-tab:active {
	border-color: var(--frb-primary);
	background: var(--frb-bg);
	color: inherit;
}

.frb-booking-root .frb-repair-category-tab.is-selected {
	border-color: var(--frb-primary);
	background: var(--frb-primary);
	color: #fff;
}

/* Same Elementor-specificity fix as `.frb-device-type-card__image` above. */
.frb-booking-root .frb-repair-category-tab__icon {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
	border-radius: 0;
	background: none;
}

.frb-repair-category-tab__icon.frb-image-placeholder .frb-image-placeholder__icon {
	font-size: 1.125rem;
	opacity: 1;
}

.frb-repair-category-tab.is-selected .frb-repair-category-tab__icon.frb-image-placeholder {
	color: #fff;
}

/* ── Repair sections + option cards ───────────────────────────────────────── */
.frb-repair-section {
	margin-top: 1.75rem;
}

.frb-repair-section__title {
	margin-bottom: 0.5rem;
}

.frb-option-cards {
	display: grid;
	gap: 1.25rem;
	margin-top: 1rem;
}

.frb-option-cards--single-detail {
	grid-template-columns: minmax(0, 28rem);
}

.frb-option-cards--two-up {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frb-option-cards--grid {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.frb-option-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.5rem;
	border: 1px solid var(--frb-border);
	border-radius: var(--frb-radius-lg);
	background: var(--frb-card-surface);
	box-shadow: var(--frb-shadow);
	transition: box-shadow var(--frb-transition), border-color var(--frb-transition);
}

.frb-option-card:hover {
	box-shadow: var(--frb-shadow-md);
}

.frb-option-card.is-most-popular {
	border-color: var(--frb-accent);
	border-width: 2px;
	padding: calc(1.5rem - 1px);
}

.frb-option-card__ribbon {
	position: absolute;
	top: -0.7rem;
	left: 1.5rem;
	background: var(--frb-accent);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	box-shadow: var(--frb-shadow);
}

.frb-option-card__label {
	margin: 0.25rem 0 0;
	font-size: 1.0625rem;
}

.frb-option-card__price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--frb-primary);
	margin: 0;
}

/* "base £199.00" next to a total that variant choices have pushed up. */
.frb-option-card__price-base {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--frb-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.frb-option-card__description {
	color: var(--frb-text-muted);
	margin: 0;
}

/* Key selling points (warranty, turnaround) as icon + muted label + prominent
   value, so the important figures are scannable at a glance rather than
   buried in a flat bullet list. */
.frb-option-card__meta {
	list-style: none;
	margin: 0;
	padding: 0.75rem 0 0;
	border-top: 1px solid var(--frb-border);
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.frb-option-card__meta li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.frb-option-card__meta-icon {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0.3rem;
	border-radius: 50%;
	background: var(--frb-primary-light);
	color: var(--frb-primary);
}

.frb-option-card__meta-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.frb-option-card__meta-label {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--frb-text-muted);
}

.frb-option-card__meta-value {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--frb-text);
	overflow-wrap: break-word;
}

.frb-option-card__variant {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.frb-option-card__variant label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--frb-text-muted);
}

.frb-option-card__variant select {
	padding: 0.5rem 0.625rem;
	border: 1px solid var(--frb-border);
	border-radius: var(--frb-radius);
	font: inherit;
	background: var(--frb-bg);
}

.frb-option-card__book {
	margin-top: auto;
	width: 100%;
	justify-content: center;
	background: var(--frb-accent) !important;
	border-color: var(--frb-accent) !important;
	padding: 0.7rem 1rem !important;
	height: auto !important;
}

.frb-option-card__book:hover:not(:disabled) {
	background: var(--frb-accent-dark) !important;
	border-color: var(--frb-accent-dark) !important;
}

.frb-option-card__book:disabled {
	background: var(--frb-border) !important;
	border-color: var(--frb-border) !important;
	color: var(--frb-text-muted) !important;
}

.frb-option-card__variant-hint {
	margin: -0.25rem 0 0;
	font-size: 0.8rem;
	color: var(--frb-text-muted);
	text-align: center;
}

/* ── Shared state message ─────────────────────────────────────────────────── */
.frb-state-message {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--frb-text-muted);
	padding: 1.25rem 0;
}

.frb-state-message p {
	margin: 0;
}

.frb-state-message--error {
	color: var(--frb-accent-dark);
}

/* ── Wizard shell ──────────────────────────────────────────────────────────── */
.frb-wizard-shell {
	padding: 2rem;
	border: 1px solid var(--frb-border);
	border-radius: var(--frb-radius-lg);
	background: var(--frb-bg);
}

.frb-wizard-shell__summary {
	margin: 1rem 0;
	padding: 1rem;
	background: var(--frb-bg-alt);
	border-radius: var(--frb-radius);
}

.frb-wizard-shell__back-to-catalog {
	margin-bottom: 1rem;
}

.frb-step-not-built {
	padding: 1rem 0;
}

.frb-step-not-built__notice {
	color: var(--frb-text-muted);
	font-style: italic;
}

.frb-wizard-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--frb-border);
}

.frb-wizard-nav .components-button.is-primary {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

/* Final submit actions (Confirm Booking / Send Enquiry) get the accent red —
   everything else in the wizard nav (e.g. "Continue" between steps) stays
   navy, since it's progressing, not committing. */
.frb-wizard-nav .components-button.is-primary.frb-wizard-nav__submit {
	background: var(--frb-accent) !important;
	border-color: var(--frb-accent) !important;
}

.frb-wizard-nav .components-button.is-primary.frb-wizard-nav__submit:hover:not(:disabled) {
	background: var(--frb-accent-dark) !important;
	border-color: var(--frb-accent-dark) !important;
}

/* ── Progress tracker ──────────────────────────────────────────────────────── */
.frb-progress-tracker {
	position: relative;
	display: flex;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	gap: 0.5rem;
}

.frb-progress-tracker::before {
	content: '';
	position: absolute;
	top: 1.125rem;
	left: calc(50% / var(--frb-steps, 5));
	right: calc(50% / var(--frb-steps, 5));
	height: 2px;
	background: var(--frb-border);
	z-index: 0;
}

.frb-progress-tracker::after {
	content: '';
	position: absolute;
	top: 1.125rem;
	left: calc(50% / var(--frb-steps, 5));
	width: calc((100% - (100% / var(--frb-steps, 5))) * var(--frb-progress, 0));
	height: 2px;
	background: var(--frb-primary);
	z-index: 0;
	transition: width 500ms ease;
}

.frb-progress-tracker__node {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	text-align: center;
	color: var(--frb-text-muted);
}

.frb-progress-tracker__index {
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 2px solid var(--frb-border);
	background: var(--frb-bg);
	font-weight: 700;
	font-size: 0.9375rem;
}

.frb-progress-tracker__node.is-current .frb-progress-tracker__index {
	border-color: var(--frb-primary);
	background: var(--frb-primary);
	color: #fff;
}

.frb-progress-tracker__node.is-done .frb-progress-tracker__index {
	border-color: transparent;
	/* Opaque (not `none`) so the connecting line running behind this node
	   doesn't show through the gaps around the checkmark strokes. */
	background: var(--frb-bg);
	color: var(--frb-primary);
}

.frb-progress-tracker__node.is-done .frb-progress-tracker__index svg {
	width: 2rem;
	height: 2rem;
}

.frb-progress-tracker__node.is-current .frb-progress-tracker__label {
	color: var(--frb-text);
	font-weight: 700;
}

.frb-progress-tracker__label {
	font-size: 0.75rem;
	font-weight: 600;
}

/* ── Step 1: method cards ──────────────────────────────────────────────────── */
.frb-method-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}

.frb-booking-root .frb-method-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-width: 0;
	padding: 2rem 1.5rem;
	border: 1px solid var(--frb-border);
	border-radius: var(--frb-radius-lg);
	background: var(--frb-bg);
	box-shadow: var(--frb-shadow);
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: center;
	transition: border-color var(--frb-transition), box-shadow var(--frb-transition), transform var(--frb-transition);
}

.frb-booking-root .frb-method-card:hover,
.frb-booking-root .frb-method-card:focus,
.frb-booking-root .frb-method-card:focus-visible,
.frb-booking-root .frb-method-card:active {
	border-color: var(--frb-primary);
	background: var(--frb-bg);
	color: inherit;
	box-shadow: var(--frb-shadow-md);
	transform: translateY(-2px);
}

.frb-method-card__icon {
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--frb-primary-light);
	color: var(--frb-primary);
	font-size: 1.75rem;
}

.frb-method-card__label {
	width: 100%;
	font-weight: 700;
	font-size: 1.125rem;
	overflow-wrap: break-word;
}

/* `align-items: center` on the flex column means a child sizes to its own
   content by default (shrink-to-fit) rather than the card's width, so this
   text ran past the card edge instead of wrapping — `width: 100%` makes it
   wrap at the card's own boundary like every other card label in the plugin. */
.frb-method-card__description {
	width: 100%;
	color: var(--frb-text-muted);
	font-size: 0.875rem;
	overflow-wrap: break-word;
	white-space: break-spaces;
}

/* ── Store location: map + distance (shown on the date & time step) ──────── */
.frb-store-map {
	/* Shorter than the old locator's list-height match — this map sits inside
	   an informational panel, not beside a scrolling list of stores. */
	height: 320px;
	min-height: 320px;
	border-radius: var(--frb-radius-lg);
	overflow: hidden;
	border: 1px solid var(--frb-border);
}

.frb-store-map__marker--selected {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--frb-primary);
	border: 3px solid #fff;
	box-shadow: var(--frb-shadow-md);
}

.frb-store-map__marker--user {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--frb-text-muted);
	border: 3px solid #fff;
	box-shadow: var(--frb-shadow-md);
}

.frb-store-location {
	margin-top: 2rem;
	border: 1px solid var(--frb-border);
	border-radius: var(--frb-radius-lg);
	background: var(--frb-bg-alt);
}

.frb-store-location__summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1.125rem 1.5rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

/* Safari still paints its own disclosure triangle without this. */
.frb-store-location__summary::-webkit-details-marker {
	display: none;
}

.frb-store-location__summary::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	margin-left: auto;
	border-right: 2px solid var(--frb-text-muted);
	border-bottom: 2px solid var(--frb-text-muted);
	transform: rotate(45deg);
	transition: transform var(--frb-transition);
}

.frb-store-location[open] .frb-store-location__summary::after {
	transform: rotate(-135deg);
}

.frb-store-location__pin {
	flex: none;
	color: var(--frb-primary);
}

.frb-store-location__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 1.75rem;
	padding: 0 1.5rem 1.5rem;
}

.frb-store-location__name {
	font-size: 1rem;
}

.frb-store-location__address,
.frb-store-location__postcode,
.frb-store-location__phone {
	margin: 0.375rem 0 0;
	color: var(--frb-text-muted);
	font-size: 0.875rem;
}

.frb-store-location__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
}

.frb-store-location__directions {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--frb-primary);
}

.frb-store-location__distance {
	margin: 0.875rem 0 0;
	color: var(--frb-primary);
	font-weight: 600;
	font-size: 0.875rem;
}

/* ── Step 3: date & time ──────────────────────────────────────────────────── */
.frb-step-date-time__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

/*
 * The DatePicker (`@wordpress/components` `<DatePicker>`) styles its day
 * cells via emotion/styled-components — no `variant` prop, and the classes
 * emotion generates are content-hashed, not stable. Two things ARE stable
 * though (confirmed against the rendered DOM, not just the source): every
 * day cell carries a fixed `.components-datetime__date__day` class kept for
 * back-compat, and the selected day's accessible label always ends in
 * "Selected" (e.g. `aria-label="July 24, 2026. Selected"`). Those are what
 * we target below instead of fighting emotion's own `&&&`-boosted
 * specificity. Prev/next-month buttons are matched by their own accessible
 * label, the only stable hook they expose.
 */
.frb-step-date-time__grid .components-datetime__date {
	border: 1px solid var(--frb-border);
	border-radius: var(--frb-radius-lg);
	padding: 1.25rem;
	/* The day-cell sizing below is reduced at narrow widths, but the grid's own
	   minimum width (7 fixed-px cells) is outside our control — on the rare
	   sub-360px device this lets the calendar itself scroll sideways instead of
	   forcing the whole page to, which is the safer failure. */
	overflow-x: auto;
}

.frb-step-date-time__grid .components-datetime__date__day {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	padding: 0 !important;
	margin: 2px auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	border: none !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	outline: none !important;
	transition: background var(--frb-transition), color var(--frb-transition) !important;
}

/* Excludes selected cells rather than relying on a later, more-specific
   rule to win a specificity fight — WP's own selected-day style (which
   resolves through --wp-components-color-accent-inverted, already white)
   never has to compete with this at all. */
.frb-step-date-time__grid .components-datetime__date__day:not([aria-label*="Selected"]) {
	color: var(--frb-text) !important;
}

.frb-step-date-time__grid .components-datetime__date__day:disabled {
	color: var(--frb-text-muted) !important;
	opacity: 0.4 !important;
	background: transparent !important;
}

.frb-step-date-time__grid .components-datetime__date__day:not(:disabled):not([aria-label*="Selected"]):hover {
	background: var(--frb-tint) !important;
	color: var(--frb-primary) !important;
}

.frb-step-date-time__grid .components-datetime__date__day:not(:disabled):focus-visible {
	outline: 2px solid var(--frb-primary) !important;
	outline-offset: 2px !important;
}

.frb-step-date-time__grid .components-datetime__date__day[aria-label*="Selected"] {
	background: var(--frb-primary) !important;
	color: #fff !important;
}

.frb-step-date-time__grid .components-datetime__date__day[aria-label*="Selected"]:hover {
	background: var(--frb-primary-dark) !important;
	color: #fff !important;
}

.frb-step-date-time__grid .components-datetime__date [aria-label="View previous month"],
.frb-step-date-time__grid .components-datetime__date [aria-label="View next month"] {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--frb-primary) !important;
	border-radius: var(--frb-radius) !important;
	background: var(--frb-bg) !important;
	color: var(--frb-primary) !important;
	box-shadow: none !important;
}

.frb-step-date-time__grid .components-datetime__date [aria-label="View previous month"] svg,
.frb-step-date-time__grid .components-datetime__date [aria-label="View next month"] svg {
	margin: 0 !important;
}

.frb-step-date-time__grid .components-datetime__date [aria-label="View previous month"]:hover,
.frb-step-date-time__grid .components-datetime__date [aria-label="View next month"]:hover {
	background: var(--frb-tint) !important;
}

.frb-slot-group {
	margin-bottom: 1.5rem;
}

.frb-slot-group:last-child {
	margin-bottom: 0;
}

.frb-slot-group__title {
	margin: 0 0 0.625rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--frb-text-muted);
}

.frb-slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 0.625rem;
}

.frb-booking-root .frb-slot-grid__slot {
	padding: 0.625rem;
	border: 1px solid var(--frb-border);
	border-radius: var(--frb-radius);
	background: var(--frb-bg);
	color: var(--frb-primary);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	transition: border-color var(--frb-transition), background var(--frb-transition), color var(--frb-transition);
}

.frb-booking-root .frb-slot-grid__slot:hover:not(:disabled),
.frb-booking-root .frb-slot-grid__slot:focus,
.frb-booking-root .frb-slot-grid__slot:focus-visible,
.frb-booking-root .frb-slot-grid__slot:active:not(:disabled) {
	border-color: var(--frb-primary);
	background: var(--frb-tint);
	color: var(--frb-primary);
}

.frb-booking-root .frb-slot-grid__slot:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.frb-booking-root .frb-slot-grid__slot.is-selected {
	border-color: var(--frb-primary);
	background: var(--frb-primary);
	color: #fff;
}

/* ── Customer form (Step 4 / Step 3E) ─────────────────────────────────────── */
.frb-customer-form {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.frb-customer-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

/* Placeholder-only Material inputs — labels are kept for screen readers
   (`hideLabelFromVision` in CustomerForm.js) but not shown visually. */
.frb-customer-form .components-text-control__input,
.frb-customer-form .components-textarea-control__input {
	border: 1px solid var(--frb-border) !important;
	border-radius: var(--frb-radius) !important;
	background: var(--frb-bg) !important;
	padding: 10px 12px !important;
	font-size: 0.9375rem !important;
	transition: border-color var(--frb-transition), box-shadow var(--frb-transition);
}

.frb-customer-form .components-text-control__input:focus,
.frb-customer-form .components-textarea-control__input:focus {
	border-color: var(--frb-primary) !important;
	box-shadow: 0 0 0 1px var(--frb-primary) !important;
}

.frb-customer-form .components-checkbox-control__label {
	font-size: 0.9375rem;
}

.frb-field-with-error {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.frb-customer-form .frb-field--invalid .components-text-control__input {
	border-color: var(--frb-accent) !important;
}

.frb-customer-form .frb-field--invalid .components-text-control__input:focus {
	box-shadow: 0 0 0 1px var(--frb-accent) !important;
}

.frb-field-error {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--frb-accent);
}

/* ── Summary card ──────────────────────────────────────────────────────────── */
.frb-summary-card {
	padding: 1.5rem;
	border: 1px solid var(--frb-border);
	border-radius: var(--frb-radius-lg);
	background: var(--frb-bg);
	box-shadow: var(--frb-shadow);
	align-self: start;
}

.frb-summary-card h3 {
	margin-top: 0;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--frb-border);
	color: var(--frb-text);
}

.frb-summary-card dl {
	margin: 0;
}

.frb-summary-card dt {
	margin-top: 1rem;
	color: var(--frb-text-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.frb-summary-card dt:first-of-type {
	margin-top: 0;
}

.frb-summary-card dd {
	margin: 0.3rem 0 0;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.frb-summary-card__price {
	font-size: 1.5rem !important;
	font-weight: 800 !important;
	color: var(--frb-primary);
}

/* "+£15.00" beside a chosen variant that adds to the price. */
.frb-summary-card__extra {
	font-weight: 700;
	color: var(--frb-primary);
}

/* ── Step 4 (Visit Us) / Step 3 (Via Email): form + summary layout ──────────── */
.frb-step-details__grid,
.frb-step-email__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	gap: 1.5rem;
	align-items: start;
}

/* ── Confirmation screens ──────────────────────────────────────────────────── */
.frb-step-confirmation,
.frb-step-email-confirm {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
	padding: 1rem 0 0.5rem;
}

.frb-confirmation__icon {
	width: 4rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--frb-primary-light);
	color: var(--frb-primary);
	font-size: 2.5rem;
	margin-bottom: 0.25rem;
}

.frb-step-confirmation h2,
.frb-step-email-confirm h2 {
	margin-bottom: 0;
}

.frb-confirmation__thanks {
	margin: 0.5rem 0 0;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--frb-primary);
}

.frb-confirmation__reference {
	font-size: 1.125rem;
}

.frb-step-confirmation .frb-summary-card,
.frb-step-email-confirm .frb-summary-card {
	width: 60%;
	min-width: 22rem;
	margin: 0.5rem auto 0;
	text-align: left;
}

.frb-confirmation__actions {
	width: 100%;
	margin-top: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--frb-border);
	display: flex;
	justify-content: center;
}

@media (max-width: 720px) {

	.frb-step-date-time__grid,
	.frb-step-details__grid,
	.frb-step-email__grid,
	.frb-store-location__body,
	.frb-customer-form__row,
	.frb-option-cards--two-up {
		grid-template-columns: 1fr;
	}

	.frb-store-map {
		height: 240px;
		min-height: 240px;
	}

	.frb-progress-tracker__label {
		font-size: 0.65rem;
	}

	.frb-wizard-shell {
		padding: 1.25rem;
	}

	/* The fixed 22rem (352px) min-width overflows any phone under ~420px wide
	   once the wizard shell's own padding is added on top. */
	.frb-step-confirmation .frb-summary-card,
	.frb-step-email-confirm .frb-summary-card {
		width: 100%;
		min-width: 0;
	}

	/* The WP DatePicker's day cells are fixed-px and !important (see above —
	   emotion's own specificity leaves no other way to size them), so at
	   narrow widths they're shrunk here to fit rather than left to overflow. */
	.frb-step-date-time__grid .components-datetime__date {
		padding: 0.875rem !important;
	}

	.frb-step-date-time__grid .components-datetime__date__day {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
	}
}

@media (max-width: 480px) {
	.frb-progress-tracker__label {
		display: none;
	}

	.frb-progress-tracker__node.is-current .frb-progress-tracker__label {
		display: block;
	}

	.frb-wizard-shell {
		padding: 1rem;
	}

	.frb-step-date-time__grid .components-datetime__date {
		padding: 0.625rem !important;
	}

	.frb-step-date-time__grid .components-datetime__date__day {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		font-size: 0.8125rem !important;
	}
}