/**
 * Primeshots Booking — public widget styles.
 *
 * Editorial-studio design language: Fraunces serif display type over a
 * clean sans UI, warm paper neutrals, ink-black pill buttons, gradient
 * service artwork, springy micro-interactions, shimmer skeletons, and a
 * receipt-style summary. Functionality mirrors Square's booking flow; the
 * look deliberately doesn't.
 *
 * IMPORTANT: everything is scoped under .pb-root and the font-family is
 * forced, because WordPress themes frequently set their own heading font
 * which would otherwise leak in and break the look entirely.
 */

.pb-root {
	/* Type */
	--pb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--pb-font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;

	/* Neutrals — warm paper, violet-tinged ink */
	--pb-ink: #1c1722;
	--pb-text: #241e2c;
	--pb-text-muted: #6e6878;
	--pb-text-faint: #a49eae;
	--pb-white: #ffffff;
	--pb-fill: #f5f2ec;
	--pb-fill-hover: #ece8e0;
	--pb-border: #e5e0d6;
	--pb-hairline: #edeae3;
	/* Form-field surfaces: a visibly darker fill + border than --pb-fill so a
	   data-entry box reads clearly against ANY page background. */
	--pb-input-fill: #f2efe9;
	--pb-input-border: #d4cec2;

	/* Brand */
	--pb-purple: #7700ed;
	--pb-purple-dark: #6200c4;
	--pb-purple-tint: #f3ebff;
	--pb-purple-glow: rgba(119, 0, 237, 0.22);

	/* Accents */
	--pb-sage-tint: #e8f0da;
	--pb-sage-text: #44601f;

	/* Status */
	--pb-success: #217a52;
	--pb-danger: #b3261e;
	--pb-danger-tint: #fdeceb;
	--pb-danger-border: #f2c2be;
	--pb-warning-tint: #fdf6e3;
	--pb-warning-border: #eeddab;
	--pb-warning-text: #6b5300;
	/* A soft, calm tint for panels that are a choice or a heads-up rather
	   than an error — the cancel/refund-credit panel isn't a mistake the
	   customer made, so it deliberately doesn't borrow the danger palette. */
	--pb-info-tint: #eaf3fb;
	--pb-info-border: #cbe3f5;
	--pb-info-text: #2b5a7a;

	/* Shape & depth */
	--pb-r-sm: 10px;
	--pb-r: 14px;
	--pb-r-lg: 20px;
	--pb-r-xl: 26px;
	--pb-r-pill: 999px;
	--pb-shadow-xs: 0 1px 2px rgba(28, 23, 34, 0.05);
	--pb-shadow: 0 1px 2px rgba(28, 23, 34, 0.04), 0 8px 24px rgba(28, 23, 34, 0.07);
	--pb-shadow-lift: 0 2px 4px rgba(28, 23, 34, 0.05), 0 14px 34px rgba(28, 23, 34, 0.11);
	--pb-shadow-lg: 0 14px 50px rgba(28, 23, 34, 0.2);

	/* Motion */
	--pb-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--pb-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

	max-width: 1080px;
	/* The pull is a negative top margin set per-shortcode (see
	   PB_Shortcode::render) — it closes the gap a theme's own page padding
	   leaves above the widget, which no stylesheet scoped to .pb-root can
	   reach. Never positive: the widget's own top is flush by design. */
	margin: min(0px, var(--pb-top-pull, 0px)) auto 0;
	/* Transparent so the widget sits on whatever the page background is —
	   cards and inputs paint their own surfaces. */
	background: transparent;
	color: var(--pb-text);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --- Theme-proof reset ------------------------------------------------- */

.pb-root,
.pb-root *,
.pb-root *::before,
.pb-root *::after {
	box-sizing: border-box;
}

.pb-root,
.pb-root p,
.pb-root span,
.pb-root div,
.pb-root a,
.pb-root label,
.pb-root button,
.pb-root input,
.pb-root select,
.pb-root textarea {
	font-family: var(--pb-font) !important;
}

.pb-root h1,
.pb-root h2,
.pb-root h3,
.pb-root h4 {
	margin: 0;
	padding: 0;
	color: var(--pb-text);
	font-family: var(--pb-font-display) !important;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.18;
	text-transform: none;
}

.pb-root p {
	margin: 0;
}

.pb-root button {
	margin: 0;
	font-size: 15px;
	line-height: 1.2;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color 0.18s var(--pb-ease), border-color 0.18s var(--pb-ease),
		color 0.18s var(--pb-ease), box-shadow 0.22s var(--pb-ease), transform 0.18s var(--pb-ease);
}

.pb-root button:focus-visible,
.pb-root input:focus-visible,
.pb-root textarea:focus-visible,
.pb-root a:focus-visible {
	outline: 2px solid var(--pb-purple);
	outline-offset: 2px;
}

/* ---------------- Theme firewall (form controls) ----------------
   This widget is dropped into whatever theme the site runs, and themes
   style form controls hard. The failure this fixes, seen live: a theme
   sizing its inputs with `height` and `line-height` rather than padding
   left the returning-customer lookup pill nearly twice its intended
   height, with the theme's own rounded fill showing through inside it as
   a second box. Padding survived, because padding was the one box
   property the component rule actually declared — an undeclared property
   is not a default, it's an opening.

   So every box property is claimed here, once, for the widget's controls.
   Scoped to #pb-booking-root (the shortcode's wrapper, see
   class-pb-shortcode.php) rather than .pb-root, and then deliberately one
   step higher again: an ancestor class for the lookup, and a doubled
   class for .pb-input. That last step is not decoration. Plenty of themes
   scope their form CSS to a page wrapper id, e.g.
   `#page input[type="text"] { height: 60px !important }` — specificity
   (1,1,1), which merely ties a plain `#pb-booking-root input.pb-input`,
   and ties go to whichever stylesheet is enqueued last. That is usually
   the theme's. One extra class puts these rules above that tie outright,
   so the outcome no longer depends on enqueue order.

   Deliberately scoped to the named controls rather than to `input` and
   `button` as elements. A blanket element rule here is worse than the
   bug: pinning `margin` flattens the spacing component rules set on
   specific fields, and pinning `line-height` on every button overrides
   the 1.2 the widget's buttons are drawn at, resizing all of them. Each
   control below therefore restates only its own geometry. Two component
   rules re-claim a value from this block at matching weight (textarea's
   min-height, and the narrow-screen lookup padding); both say so where
   they sit. */
/* .pb-input written twice on purpose — see the specificity note above. */
#pb-booking-root .pb-input.pb-input {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding: 15px 18px !important;
	border: 1px solid var(--pb-input-border) !important;
	border-radius: var(--pb-r) !important;
	line-height: 1.4 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* The lookup's input is deliberately invisible — the pill around it is
   the control. Anything the theme paints on it shows up as a box inside
   a box, which is exactly what went wrong. */
#pb-booking-root .pb-lookup-field input.pb-lookup-input {
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 12px 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	line-height: 1.4 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

#pb-booking-root .pb-lookup-field button.pb-lookup-go {
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 12px 22px !important;
	border: none !important;
	border-radius: var(--pb-r-pill) !important;
	line-height: 1.2 !important;
}

.pb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.pb-icon svg {
	display: block;
}

/* ---------------- Skeletons (loading that looks designed) --------------- */

@keyframes pb-shimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

.pb-skel {
	border-radius: var(--pb-r-sm);
	background: linear-gradient(90deg, #edeae3 25%, #f7f5f0 45%, #edeae3 65%);
	background-size: 200% 100%;
	animation: pb-shimmer 1.3s ease-in-out infinite;
}

.pb-skel-art {
	height: 116px;
	border-radius: 0;
}

.pb-skel-slot {
	height: 54px;
	flex: 0 0 118px;
	border-radius: var(--pb-r);
}

/* Static placeholder printed by the shortcode before booking.js runs. */
.pb-boot {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 30px 4px;
}

/* ---------------- Step rail: a segmented progress bar ---------------- */

.pb-steps {
	padding: 28px 4px 0;
}

/* Equal-width cells with a pill sliding between them. */
.pb-steps-track {
	position: relative;
	padding: 5px;
	border-radius: var(--pb-r-pill);
	background: var(--pb-fill);
	margin-bottom: 10px;
}

.pb-steps-cells {
	position: relative;
	z-index: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.pb-steps-thumb {
	position: absolute;
	z-index: 0;
	top: 5px;
	left: 5px;
	bottom: 5px;
	/* width is set inline (100/steps %); translateX moves it a whole cell at
	   a time, so the pill lands exactly on the active step. */
	border-radius: var(--pb-r-pill);
	background: var(--pb-white);
	box-shadow: 0 2px 8px rgba(28, 23, 34, 0.1), 0 0 0 1px rgba(28, 23, 34, 0.04);
	transition: transform 0.5s var(--pb-ease);
	will-change: transform;
}

/* The thumb's own box is inset by the track padding on both sides, so the
   inline width (a share of the full track) needs that inset removed. */
.pb-steps-thumb {
	margin-right: 10px;
}

.pb-root button.pb-step {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	padding: 11px 10px;
	border: none;
	border-radius: var(--pb-r-pill);
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--pb-text-faint);
	white-space: nowrap;
	cursor: default;
}

.pb-root button.pb-step.is-done {
	cursor: pointer;
	color: var(--pb-text-muted);
}

.pb-root button.pb-step.is-done:hover {
	color: var(--pb-purple);
}

.pb-root button.pb-step:disabled {
	cursor: default;
}

.pb-step-num {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	background: var(--pb-white);
	color: var(--pb-text-faint);
	border: 1.5px solid var(--pb-border);
	transition: background-color 0.3s var(--pb-ease), border-color 0.3s var(--pb-ease),
		color 0.3s var(--pb-ease), transform 0.4s var(--pb-spring);
}

.pb-root button.pb-step.is-active {
	color: var(--pb-text);
}

.pb-root button.pb-step.is-active .pb-step-num {
	background: var(--pb-ink);
	border-color: var(--pb-ink);
	color: var(--pb-white);
	transform: scale(1.06);
}

.pb-root button.pb-step.is-done .pb-step-num {
	background: var(--pb-purple-tint);
	border-color: transparent;
	color: var(--pb-purple);
}

.pb-step-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The bar under the cells, filled through the current step. */
.pb-progress {
	height: 3px;
	border-radius: var(--pb-r-pill);
	background: var(--pb-hairline);
	overflow: hidden;
}

.pb-progress-fill {
	height: 100%;
	border-radius: var(--pb-r-pill);
	background: linear-gradient(90deg, var(--pb-purple), #c026d3);
	transition: width 0.55s var(--pb-ease);
}

/* ---------------- The two paths ---------------- */

.pb-path-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 22px;
	align-items: stretch;
}

.pb-root button.pb-path-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	padding: 0;
	border: 1px solid var(--pb-border);
	border-radius: var(--pb-r-xl);
	background: var(--pb-white);
	color: var(--pb-text);
	overflow: hidden;
	box-shadow: var(--pb-shadow-xs);
	transition: transform 0.28s var(--pb-ease), box-shadow 0.28s var(--pb-ease), border-color 0.28s var(--pb-ease);
	animation: pb-rise 0.55s var(--pb-ease) both;
	animation-delay: var(--pb-stagger, 0s);
}

.pb-root button.pb-path-card:hover {
	transform: translateY(-4px);
	border-color: #d8d2c6;
	box-shadow: var(--pb-shadow-lift);
}

.pb-path-art {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 132px;
	overflow: hidden;
	color: rgba(28, 23, 34, 0.32);
}

.pb-path-card.is-rental .pb-path-art {
	background: linear-gradient(135deg, #f6e7d4 0%, #eccaa4 100%);
}

.pb-path-card.is-shoot .pb-path-art {
	background: linear-gradient(135deg, #e9e1f8 0%, #cbb8f0 100%);
}

/* With a real photo the panel gets taller and the icon steps aside. */
.pb-path-art.has-photo {
	height: 232px;
}

.pb-path-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: none;
	border-radius: 0;
	max-width: none;
	/* Fades in on load, so a slow photo resolves into the tinted panel
	   instead of snapping over it. */
	opacity: 0;
	object-position: center center;
	transition: opacity 0.45s var(--pb-ease), transform 0.6s var(--pb-ease);
}

.pb-path-art.is-portrait .pb-path-photo {
	object-position: center 24%;
}

.pb-path-art.is-loaded .pb-path-photo {
	opacity: 1;
}

.pb-path-card:hover .pb-path-photo {
	transform: scale(1.04);
}

.pb-path-art.is-loaded .pb-path-art-icon {
	opacity: 0;
	transition: opacity 0.3s var(--pb-ease);
}

/* Scrim so the card's top edge stays readable over a bright photo. */
.pb-path-art.has-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(20, 16, 26, 0.22), transparent 60%);
}

.pb-path-body {
	flex: 1 1 auto;
	padding: 24px 26px 20px;
}

.pb-root .pb-path-card h3 {
	font-size: 27px;
	margin-bottom: 8px;
}

.pb-path-blurb {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--pb-text-muted);
}

.pb-path-points {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.pb-path-points li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 9px;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--pb-text);
}

.pb-path-points li .pb-icon {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--pb-sage-text);
}

.pb-path-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 26px;
	border-top: 1px solid var(--pb-hairline);
	background: var(--pb-fill);
}

.pb-path-price {
	font-family: var(--pb-font-display) !important;
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
}

.pb-path-go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--pb-purple);
	white-space: nowrap;
}

.pb-path-go .pb-icon {
	transition: transform 0.25s var(--pb-ease);
}

.pb-path-card:hover .pb-path-go .pb-icon {
	transform: translateX(4px);
}

/* Back out of a chosen path. */
.pb-root button.pb-back-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 14px;
	padding: 0;
	border: none;
	background: none;
	color: var(--pb-text-muted);
	font-size: 13px;
	font-weight: 600;
}

.pb-root button.pb-back-link:hover {
	color: var(--pb-purple);
}

.pb-root button.pb-back-link:hover .pb-icon {
	transform: translateX(-3px);
}

.pb-root button.pb-back-link .pb-icon {
	transition: transform 0.2s var(--pb-ease);
}

/* ---------------- Body / two-column layout ---------------- */

.pb-body {
	padding: 34px 4px 52px;
}

.pb-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.pb-root .pb-section-title {
	font-size: 30px;
	margin-bottom: 8px;
}

.pb-step-lede {
	font-size: 14.5px;
	color: var(--pb-text-muted);
	margin-bottom: 26px;
	line-height: 1.6;
}

.pb-root .pb-sub-title {
	font-size: 21px;
}

.pb-sub-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 36px 0 10px;
	padding-top: 30px;
	border-top: 1px solid var(--pb-hairline);
}

/* Checkout's standalone sub-titles (e.g. Cancellation policy) keep the
   divider treatment themselves. */
.pb-root .pb-sub-title:not(.pb-sub-title-row .pb-sub-title) {
	margin: 36px 0 10px;
	padding-top: 30px;
	border-top: 1px solid var(--pb-hairline);
}

.pb-secure-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--pb-r-pill);
	background: var(--pb-sage-tint);
	color: var(--pb-sage-text);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pb-desc {
	font-size: 14px;
	color: var(--pb-text-muted);
	line-height: 1.65;
}

.pb-loading,
.pb-empty-note {
	padding: 34px 2px;
	text-align: center;
	color: var(--pb-text-muted);
	font-size: 14.5px;
}

/* ---------------- Category tabs ---------------- */

.pb-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 26px;
	overflow-x: auto;
	padding: 2px 2px 6px;
	margin-left: -2px;
	scrollbar-width: none;
}

.pb-tabs::-webkit-scrollbar {
	display: none;
}

.pb-tab {
	flex: 0 0 auto;
	padding: 10px 20px;
	border-radius: var(--pb-r-pill);
	border: 1px solid var(--pb-border);
	background: var(--pb-white);
	color: var(--pb-text);
	font-size: 14px;
	font-weight: 600;
}

.pb-tab:hover {
	background: var(--pb-fill);
	transform: translateY(-1px);
}

.pb-tab.is-active {
	background: var(--pb-ink);
	border-color: var(--pb-ink);
	color: var(--pb-white);
	box-shadow: 0 6px 16px rgba(28, 23, 34, 0.22);
}

/* ---------------- Service cards ---------------- */

.pb-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 20px;
	align-items: stretch;
}

.pb-service-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--pb-border);
	border-radius: var(--pb-r-lg);
	background: var(--pb-white);
	overflow: hidden;
	box-shadow: var(--pb-shadow-xs);
	transition: box-shadow 0.25s var(--pb-ease), transform 0.25s var(--pb-ease), border-color 0.25s var(--pb-ease);
	/* Settles rather than flies: 6px of travel, not 10, and the stagger
	   sits on top of an optional entrance delay so the cards can wait out
	   the header morph when arriving from the landing hero. */
	animation: pb-settle 0.42s var(--pb-ease) both;
	animation-delay: calc(var(--pb-enter-delay, 0s) + var(--pb-stagger, 0s));
}

.pb-service-card:hover {
	transform: translateY(-3px);
	border-color: #d8d2c6;
	box-shadow: var(--pb-shadow-lift);
}

/* The gradient "artwork" tile: zero image requests, instant character. */
.pb-card-art {
	position: relative;
	height: 116px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pb-card-art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(90% 120% at 82% -10%, rgba(255, 255, 255, 0.5), transparent 55%);
}

.pb-card-art-glyph {
	font-family: var(--pb-font-display) !important;
	font-size: 76px;
	font-weight: 600;
	font-style: italic;
	line-height: 1;
	color: rgba(28, 23, 34, 0.18);
	transform: translateY(4px);
	transition: transform 0.4s var(--pb-spring);
	user-select: none;
}

.pb-service-card:hover .pb-card-art-glyph {
	transform: translateY(0) scale(1.06);
}

/* A real studio photo, laid over the gradient (which therefore doubles as
   the loading placeholder and the fallback if the image fails). */
.pb-card-art.has-photo {
	height: 168px;
}

.pb-card-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: none;
	border-radius: 0;
	max-width: none;
	opacity: 0;
	object-position: center center;
	transition: opacity 0.45s var(--pb-ease), transform 0.6s var(--pb-ease);
}

.pb-card-art.is-loaded .pb-card-photo {
	opacity: 1;
}

/* Portrait source cropped to a short banner: hold the top third so a
   subject's face survives the crop. */
.pb-card-art.is-portrait .pb-card-photo {
	object-position: center 28%;
}

.pb-service-card:hover .pb-card-photo {
	transform: scale(1.045);
}

/* Services with no photo yet get an icon rather than an initial — two
   services starting with the same letter would otherwise look identical. */
.pb-card-art-icon {
	color: rgba(28, 23, 34, 0.26);
	transition: transform 0.4s var(--pb-spring);
}

.pb-service-card:hover .pb-card-art-icon {
	transform: scale(1.08);
}

/* The glyph/icon steps aside only once the photo has actually arrived, so a
   slow or blocked image still leaves a designed tile rather than a blank
   coloured band. */
.pb-card-art.is-loaded .pb-card-art-glyph,
.pb-card-art.is-loaded .pb-card-art-icon {
	opacity: 0;
	transition: opacity 0.3s var(--pb-ease);
}

/* Keeps white type/pills legible against a bright photo. */
.pb-card-art.has-photo::after {
	background: linear-gradient(to top, rgba(20, 16, 26, 0.34), rgba(20, 16, 26, 0.04) 55%, transparent);
	z-index: 1;
}

.pb-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 22px 22px;
}

.pb-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 9px;
}

.pb-service-card h3 {
	font-size: 21px;
}

.pb-price-pill {
	flex: 0 0 auto;
	margin-top: 2px;
	padding: 5px 12px;
	border-radius: var(--pb-r-pill);
	background: var(--pb-sage-tint);
	color: var(--pb-sage-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.pb-service-card .pb-desc {
	font-size: 13.5px;
	/* Long real-world descriptions shouldn't dwarf the card.
	   NOTE: don't flex-grow this element — a grown -webkit-box renders the
	   clamp ellipsis at line 4 and then keeps painting the lines after it,
	   which looks broken. The slack is absorbed by margin-top:auto on
	   whatever follows instead (see .pb-variations / .pb-hour-stepper). */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 0 0 auto;
}

/* margin-top:auto soaks up the card's spare height, so the price rows (and
   the steppers on rental cards) line up across a whole row of cards even
   when their descriptions differ in length. */
.pb-variations {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--pb-hairline);
}

.pb-root button.pb-variation-row {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px 2px;
	border: none;
	border-bottom: 1px solid var(--pb-hairline);
	background: transparent;
	color: var(--pb-text);
	text-align: left;
	border-radius: 0;
}

.pb-root button.pb-variation-row .pb-icon {
	color: var(--pb-text-faint);
	transition: transform 0.2s var(--pb-ease), color 0.2s var(--pb-ease);
}

.pb-root button.pb-variation-row:hover {
	color: var(--pb-purple);
}

.pb-root button.pb-variation-row:hover .pb-icon {
	color: var(--pb-purple);
	transform: translateX(3px);
}

.pb-variation-main {
	flex: 1 1 auto;
	min-width: 0;
}

.pb-variation-label {
	display: block;
	font-size: 15px;
	font-weight: 600;
}

/* What separates one tier from the next, shown right where it's chosen. */
.pb-variation-detail {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--pb-text-muted);
}

.pb-root button.pb-variation-row.has-detail {
	align-items: flex-start;
	padding: 15px 2px;
}

.pb-root button.pb-variation-row.has-detail .pb-variation-price,
.pb-root button.pb-variation-row.has-detail .pb-icon {
	margin-top: 1px;
}

/* ---------------- By-request services ---------------- */

.pb-price-pill.is-quiet {
	background: var(--pb-fill-hover);
	color: var(--pb-text-muted);
}

.pb-request-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
}

.pb-request-actions .pb-btn {
	flex: 1 1 auto;
	padding: 14px 20px;
	font-size: 14px;
}

.pb-variation-price {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Hour stepper */
.pb-hour-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: auto;
	padding: 14px 16px;
	border: 1px solid var(--pb-hairline);
	background: var(--pb-fill);
	border-radius: var(--pb-r);
}

/* Breathing room when the description above is short enough that
   margin-top:auto collapses to nothing. */
.pb-desc + .pb-hour-stepper,
.pb-desc + .pb-request-actions {
	margin-top: 18px;
}

.pb-stepper-controls {
	display: flex;
	align-items: center;
	gap: 6px;
}

.pb-stepper-btn {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border-radius: 50%;
	border: 1px solid var(--pb-border);
	background: var(--pb-white);
	color: var(--pb-text);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.pb-stepper-btn:hover:not(:disabled) {
	border-color: var(--pb-ink);
	transform: scale(1.06);
}

.pb-stepper-btn:active:not(:disabled) {
	transform: scale(0.94);
}

.pb-stepper-btn:disabled {
	color: #c9c4bb;
	border-color: var(--pb-hairline);
	cursor: not-allowed;
}

.pb-stepper-value {
	min-width: 74px;
	text-align: center;
	font-size: 14.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pb-stepper-price {
	font-family: var(--pb-font-display) !important;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pb-tax-note,
.pb-quote-note {
	margin-top: 14px;
	font-size: 12.5px;
	color: var(--pb-text-faint);
	line-height: 1.6;
}

/* Compound selector so it outranks the generic .pb-btn display rule. */
.pb-btn.pb-service-cta {
	display: flex;
	width: 100%;
	margin-top: 16px;
}

/* ---------------- Date picker ---------------- */

.pb-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.pb-root .pb-cal-month {
	font-size: 30px;
}

.pb-cal-nav {
	display: flex;
	gap: 8px;
}

.pb-nav-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--pb-border);
	background: var(--pb-white);
	color: var(--pb-text);
	font-size: 17px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.pb-nav-btn:hover:not(:disabled) {
	border-color: var(--pb-ink);
	transform: scale(1.05);
}

.pb-nav-btn:disabled {
	color: #c9c4bb;
	cursor: not-allowed;
}

.pb-day-strip {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.pb-day-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
}

.pb-dow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pb-text-faint);
	text-align: center;
}

/* Round day buttons: ink circle when chosen, a dot for today, struck when past. */
.pb-day {
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid transparent;
	background: transparent;
	color: var(--pb-text);
	font-size: 15.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.pb-day:hover:not(:disabled):not(.is-selected) {
	background: var(--pb-fill);
	transform: scale(1.05);
}

.pb-day.is-today::after {
	content: "";
	position: absolute;
	bottom: 6px;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--pb-purple);
	transform: translateX(-50%);
}

.pb-day.is-selected {
	background: var(--pb-ink);
	border-color: var(--pb-ink);
	color: var(--pb-white);
	box-shadow: 0 6px 16px rgba(28, 23, 34, 0.28);
}

.pb-day.is-selected.is-today::after {
	background: var(--pb-white);
}

.pb-day.is-past {
	color: #c9c4bb;
	text-decoration: line-through;
	cursor: not-allowed;
}

.pb-month-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px 4px;
	justify-items: center;
	align-items: center;
}

.pb-month-grid .pb-dow {
	margin-bottom: 6px;
}

.pb-cal-toggle-row {
	display: flex;
	justify-content: center;
	margin: 16px 0 0;
}

.pb-cal-toggle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: var(--pb-fill);
	color: var(--pb-text);
	font-size: 15px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.pb-cal-toggle:hover {
	background: var(--pb-fill-hover);
	transform: translateY(1px);
}

.pb-tz-note {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--pb-hairline);
	text-align: center;
	font-size: 13.5px;
	color: var(--pb-text-muted);
}

.pb-tz-name {
	color: var(--pb-purple);
	font-weight: 600;
}

.pb-root .pb-day-title {
	margin: 28px 0 6px;
	font-size: 22px;
}

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

.pb-period-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--pb-text-muted);
	margin: 22px 0 12px;
}

.pb-slot-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pb-slot {
	flex: 0 0 auto;
	min-width: 118px;
	padding: 14px 20px;
	border-radius: var(--pb-r);
	border: 1px solid var(--pb-border);
	background: var(--pb-white);
	color: var(--pb-text);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	box-shadow: var(--pb-shadow-xs);
}

.pb-slot:hover {
	border-color: var(--pb-ink);
	transform: translateY(-2px);
	box-shadow: var(--pb-shadow);
}

.pb-slot.is-selected {
	background: var(--pb-ink);
	border-color: var(--pb-ink);
	color: var(--pb-white);
}

.pb-slot-time {
	display: block;
}

.pb-slot-tag {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pb-purple);
}

.pb-slot.is-self-hosted {
	background: var(--pb-purple-tint);
	border-style: dashed;
	border-color: #ddc9fa;
	box-shadow: none;
}

.pb-slot.is-self-hosted:hover {
	background: var(--pb-white);
	border-color: var(--pb-purple);
}

.pb-slot.is-selected .pb-slot-tag {
	color: rgba(255, 255, 255, 0.8);
}

.pb-assign-note {
	margin-top: 26px;
	font-size: 12.5px;
	color: var(--pb-text-faint);
}

.pb-selfhost-note {
	margin-top: 18px;
	padding: 18px 20px;
	border: 1px solid var(--pb-border);
	border-radius: var(--pb-r);
	background: var(--pb-fill);
}

.pb-selfhost-note-title {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 6px;
}

.pb-selfhost-note p {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--pb-text-muted);
}

/* ---------------- Checkout form ---------------- */

.pb-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.pb-field-full {
	grid-column: 1 / -1;
}

.pb-input-label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--pb-text);
	margin-bottom: 7px;
}

.pb-optional {
	font-weight: 500;
	color: var(--pb-text-faint);
}

.pb-input {
	width: 100%;
	padding: 15px 18px;
	/* Solid fill, not just a hairline on white — reads as a clear box on any
	   theme background. */
	border: 1px solid var(--pb-input-border);
	border-radius: var(--pb-r);
	background: var(--pb-input-fill);
	color: var(--pb-text);
	font-size: 15.5px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	transition: background-color 0.18s var(--pb-ease), border-color 0.18s var(--pb-ease), box-shadow 0.18s var(--pb-ease);
}

.pb-input::placeholder {
	color: var(--pb-text-faint);
}

.pb-input:focus {
	outline: none;
	background: var(--pb-white);
	border-color: var(--pb-purple);
	box-shadow: 0 0 0 3px var(--pb-purple-tint);
}

/* Overrides the theme firewall's `min-height: 0` for this one control —
   see the firewall block near the top of this file. Matched weight, since
   that block is deliberately id-scoped and !important. */
#pb-booking-root textarea.pb-input.pb-input {
	min-height: 96px !important;
	resize: vertical;
	display: block;
}

.pb-card-container {
	background: var(--pb-input-fill);
	border: 1px solid var(--pb-input-border);
	border-radius: var(--pb-r);
	padding: 6px 14px;
	min-height: 56px;
	margin-top: 14px;
}

.pb-payment-error {
	background: var(--pb-danger-tint);
	border: 1px solid var(--pb-danger-border);
	color: var(--pb-danger);
	font-size: 13px;
	padding: 12px 14px;
	border-radius: var(--pb-r);
	margin: 14px 0 0;
	line-height: 1.5;
}

.pb-link-btn {
	display: inline-block;
	margin-top: 10px;
	padding: 0;
	border: none;
	background: none;
	color: var(--pb-purple);
	font-size: 14.5px;
	font-weight: 700;
}

.pb-link-btn:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pb-checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 22px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	cursor: pointer;
	color: var(--pb-text-muted);
}

.pb-checkbox-row input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin: 1px 0 0;
	accent-color: var(--pb-purple);
	cursor: pointer;
}

/* ---------------- Returning-customer lookup ---------------- */

/* ---------------- Checkout: returning-customer fork ---------------- */

/*
 * This is a fork in the flow, not a form field: one branch pulls up an
 * account and its rewards, the other doesn't. Two unexplained pills gave
 * the paths equal weight and told the customer nothing about what either
 * one does, so each option is a card that says what happens if you take it.
 */
.pb-returning {
	margin-bottom: 32px;
	padding: 22px 22px 24px;
	border: 1px solid var(--pb-border);
	border-radius: var(--pb-r-lg);
	background: var(--pb-white);
	box-shadow: var(--pb-shadow-xs);
}

.pb-returning-head { margin-bottom: 16px; }

.pb-returning-kicker {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pb-text-faint);
	margin-bottom: 7px;
}

.pb-root .pb-returning-title {
	font-family: var(--pb-font-display) !important;
	font-size: clamp(20px, 2.4vw, 25px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0;
}

.pb-returning-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: 12px;
}

.pb-root button.pb-returning-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 16px 42px 16px 16px;
	border: 1.5px solid var(--pb-border);
	border-radius: var(--pb-r);
	background: var(--pb-fill);
	color: var(--pb-text);
	cursor: pointer;
	transition: border-color 0.2s var(--pb-ease), background 0.2s var(--pb-ease),
		transform 0.2s var(--pb-ease), box-shadow 0.2s var(--pb-ease);
}

.pb-root button.pb-returning-option:hover {
	border-color: #cfc8bb;
	background: var(--pb-white);
	transform: translateY(-2px);
	box-shadow: var(--pb-shadow);
}

.pb-root button.pb-returning-option:focus-visible {
	outline: 2px solid var(--pb-purple);
	outline-offset: 2px;
}

.pb-root button.pb-returning-option.is-selected {
	background: var(--pb-ink);
	border-color: var(--pb-ink);
	color: #f6f1e7;
	box-shadow: var(--pb-shadow-lift);
}

.pb-returning-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--pb-white);
	color: var(--pb-ink);
	transition: background 0.2s var(--pb-ease), color 0.2s var(--pb-ease);
}

.pb-returning-option.is-selected .pb-returning-icon {
	background: rgba(246, 241, 231, 0.16);
	color: #f6f1e7;
}

.pb-returning-option-body { min-width: 0; }

.pb-returning-option-title {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 3px;
}

.pb-returning-option-sub {
	display: block;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--pb-text-muted);
	transition: color 0.2s var(--pb-ease);
}

.pb-returning-option.is-selected .pb-returning-option-sub {
	color: rgba(246, 241, 231, 0.72);
}

/* The tick only exists on the chosen card — selection is never colour alone. */
.pb-returning-tick {
	position: absolute;
	top: 16px;
	right: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #f6f1e7;
	color: var(--pb-ink);
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.2s var(--pb-ease), transform 0.28s var(--pb-spring);
}

.pb-returning-option.is-selected .pb-returning-tick {
	opacity: 1;
	transform: scale(1);
}

/* ---- the lookup ---- */

.pb-lookup {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--pb-hairline);
	animation: pb-reveal 0.38s var(--pb-ease) both;
}

.pb-lookup-label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--pb-text);
	margin-bottom: 8px;
}

/* Field and button as ONE control: on a phone the old two-element row
   wrapped the button onto its own line, which read as an unrelated
   action rather than "search with this".

   Capped on desktop: stretched to the full column this is a ~580px
   lozenge holding a phone number, with a quarter-metre of dead beige
   between the text and the button. An input should look like it fits
   what goes in it. */
.pb-lookup-field {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 440px;
	padding: 5px 5px 5px 16px;
	border: 1.5px solid var(--pb-input-border);
	border-radius: var(--pb-r-pill);
	background: var(--pb-input-fill);
	transition: border-color 0.18s var(--pb-ease), box-shadow 0.18s var(--pb-ease), background 0.18s var(--pb-ease);
}

.pb-lookup-field:focus-within {
	background: var(--pb-white);
	border-color: var(--pb-purple);
	box-shadow: 0 0 0 4px var(--pb-purple-glow);
}

.pb-lookup-field.is-busy { opacity: 0.7; }

/* A bare text run INSIDE the pill above: the pill draws the border, fill
   and rounding, the input draws nothing of its own. The theme firewall
   near the top of this file is what keeps that true. */
.pb-root input.pb-lookup-input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 12px 0;
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--pb-text);
	box-shadow: none;
	outline: none;
}

.pb-root input.pb-lookup-input::placeholder { color: var(--pb-text-faint); }

.pb-root button.pb-lookup-go {
	flex: 0 0 auto;
	padding: 12px 22px;
	border: none;
	border-radius: var(--pb-r-pill);
	background: var(--pb-ink);
	color: #f6f1e7;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.2s var(--pb-spring), background 0.2s var(--pb-ease);
}

.pb-root button.pb-lookup-go:hover:not(:disabled) {
	transform: translateY(-1px);
	background: #000;
}

.pb-root button.pb-lookup-go:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.pb-root button.pb-lookup-go:disabled { opacity: 0.55; cursor: default; }

.pb-lookup-hint {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	font-size: 12.5px;
	color: var(--pb-text-muted);
	line-height: 1.55;
}

.pb-lookup-hint-icon {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--pb-text-faint);
}

.pb-lookup-note {
	margin-top: 12px;
	padding: 11px 14px;
	border-radius: var(--pb-r);
	background: var(--pb-warning-tint);
	border: 1px solid var(--pb-warning-border);
	color: var(--pb-warning-text);
	font-size: 13px;
	line-height: 1.55;
}

@media (max-width: 480px) {
	.pb-returning { padding: 18px 16px 20px; }
	.pb-lookup-field {
		flex-wrap: wrap;
		border-radius: var(--pb-r);
		padding: 6px 6px 6px 14px;
	}
	/* Weight-matched to the theme firewall, which pins padding on these two
	   controls; a plain declaration here would lose to it. */
	#pb-booking-root .pb-lookup-field input.pb-lookup-input { flex: 1 1 100%; padding: 11px 0 !important; }
	#pb-booking-root .pb-lookup-field button.pb-lookup-go { flex: 1 1 100%; padding: 13px 22px !important; }
}

/* The matched-account card: warm, personal, and unmistakably "we know you". */
.pb-matched {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--pb-r-lg);
	background: var(--pb-purple-tint);
	border: 1px solid #e3d2fb;
	animation: pb-rise 0.4s var(--pb-ease) both;
}

.pb-matched-avatar {
	position: relative;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pb-purple), #b7207f);
	color: var(--pb-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
}

/* A found-you tick, so the state reads at a glance rather than only from
   the sentence next to it. */
.pb-matched-avatar-tick {
	position: absolute;
	right: -3px;
	bottom: -3px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--pb-success);
	color: #fff;
	border: 2px solid var(--pb-purple-tint);
}

.pb-matched-body {
	flex: 1 1 auto;
	min-width: 0;
}

.pb-matched-name {
	font-family: var(--pb-font-display) !important;
	font-size: 18px;
	font-weight: 600;
	color: var(--pb-text);
}

.pb-matched-sub {
	margin-top: 2px;
	font-size: 13px;
	color: var(--pb-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pb-matched-clear {
	flex: 0 0 auto;
	border: none;
	background: none;
	padding: 0;
	color: var(--pb-purple);
	font-size: 13px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pb-on-file {
	font-weight: 500;
	color: var(--pb-purple);
}

/* ---------------- Rewards ---------------- */

.pb-matched-points {
	flex: 0 0 auto;
	padding: 7px 13px;
	border-radius: var(--pb-r-pill);
	background: var(--pb-white);
	color: var(--pb-purple);
	font-size: 13px;
	white-space: nowrap;
}

.pb-matched-points strong {
	font-family: var(--pb-font-display) !important;
	font-size: 17px;
	font-weight: 600;
}

.pb-rewards {
	margin: 30px 0 0;
	padding: 20px 22px;
	border: 1px solid var(--pb-border);
	border-radius: var(--pb-r-lg);
	background: var(--pb-fill);
	transition: background-color 0.25s var(--pb-ease), border-color 0.25s var(--pb-ease);
}

.pb-rewards.is-active {
	background: var(--pb-sage-tint);
	border-color: #cfe0b4;
}

/*
 * The "Primeshots Rewards" gift card. The card IS the panel — no beige
 * wrapper around it — the way a physical gift card carries its own
 * controls: brand line, balance in large type, and the redeem slider all
 * live on the dark face, with a wide gold band down the right edge. Every
 * rule here is scoped under .pb-rewards-giftcard because .pb-credit-panel
 * shares the .pb-rewards base class and keeps the original light look.
 */
.pb-rewards.pb-rewards-giftcard {
	position: relative;
	display: flex;
	align-items: stretch;
	padding: 0;
	border: 0;
	border-radius: var(--pb-r-xl);
	overflow: hidden;
	background: linear-gradient(135deg, #211a2c 0%, var(--pb-ink) 55%, #2f2740 100%);
	box-shadow: var(--pb-shadow-lift);
	transition: box-shadow 0.25s var(--pb-ease);
}

/* Points applied: the card "lights up" with a warm glow instead of the
   old sage-tint container swap. */
.pb-rewards.pb-rewards-giftcard.is-active {
	background: linear-gradient(135deg, #211a2c 0%, var(--pb-ink) 55%, #2f2740 100%);
	border: 0;
	box-shadow: 0 2px 4px rgba(28, 23, 34, 0.05), 0 14px 34px rgba(217, 164, 65, 0.28);
}

.pb-rewards-card-body {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	padding: 22px 24px;
	color: #fff;
}

/* A faint diagonal sheen, purely decorative — the "catching the light"
   cue of a real card rather than a flat swatch. */
.pb-rewards-card-body::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 45%);
	pointer-events: none;
}

.pb-rewards-card-brand {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #d9c8f5;
	margin-bottom: 20px;
}

.pb-rewards-card-brand .pb-icon {
	color: #e9c46a;
}

.pb-rewards-card-caption {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 8px;
}

.pb-rewards-card-figure {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.pb-rewards-card-points {
	font-family: var(--pb-font-display) !important;
	font-size: 42px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.pb-rewards-card-equals {
	font-size: 15px;
	font-weight: 600;
	color: #e9c46a;
}

/* The gold band down the right edge — a real region of the card like the
   reference, not a hairline. Its small vertical label is what makes it
   read as designed rather than left over. */
.pb-rewards-card-accent {
	position: relative;
	flex: 0 0 52px;
	background: linear-gradient(160deg, #f0d187 0%, #e0b355 60%, #cf9a35 100%);
}

.pb-rewards-card-accent::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%);
	pointer-events: none;
}

.pb-rewards-card-accent-label {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(92, 62, 8, 0.65);
}

/* The redeem strip along the bottom of the card, separated from the
   balance by a hairline the way a card's signature strip is. */
.pb-rewards-redeem {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pb-rewards-giftcard .pb-rewards-title {
	color: #fff;
	font-size: 16px;
}

.pb-rewards-giftcard .pb-rewards-sub {
	color: rgba(255, 255, 255, 0.55);
}

.pb-rewards-giftcard .pb-rewards-amount {
	color: rgba(255, 255, 255, 0.45);
	font-size: 24px;
}

/* Four classes deep on purpose: the base `.pb-rewards.is-active
   .pb-rewards-amount` (sage green, used by the credit panel) sits later
   in this file and would win on order at equal specificity. */
.pb-rewards.pb-rewards-giftcard.is-active .pb-rewards-amount {
	color: #e9c46a;
}

/* The slider, recoloured for the dark face: gold fill, white thumb. */
.pb-rewards-giftcard .pb-rewards-slider::-webkit-slider-runnable-track {
	background: linear-gradient(
		to right,
		#e9c46a 0%,
		#e9c46a var(--pb-slider-pct, 0%),
		rgba(255, 255, 255, 0.22) var(--pb-slider-pct, 0%),
		rgba(255, 255, 255, 0.22) 100%
	);
}

.pb-rewards-giftcard .pb-rewards-slider::-moz-range-track {
	background: rgba(255, 255, 255, 0.22);
}

.pb-rewards-giftcard .pb-rewards-slider::-moz-range-progress {
	background: #e9c46a;
}

.pb-rewards-giftcard .pb-rewards-slider::-webkit-slider-thumb {
	background: #fff;
	border: 3px solid #e9c46a;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

.pb-rewards-giftcard .pb-rewards-slider::-moz-range-thumb {
	background: #fff;
	border: 3px solid #e9c46a;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

.pb-rewards-giftcard .pb-rewards-scale {
	color: rgba(255, 255, 255, 0.5);
}

.pb-rewards-giftcard .pb-rewards-scale > span:nth-child(2) {
	color: #fff;
}

.pb-rewards-giftcard .pb-rewards-note {
	color: #e9c46a;
}

.pb-rewards-giftcard .pb-rewards-note-muted {
	color: rgba(255, 255, 255, 0.6);
}

.pb-rewards-giftcard .pb-link-btn {
	color: #e9c46a;
}

.pb-rewards-giftcard .pb-link-btn:hover {
	color: #f3d88f;
}

@media (max-width: 480px) {
	.pb-rewards-card-accent { flex-basis: 36px; }
	.pb-rewards-card-body { padding: 18px 18px; }
	.pb-rewards-card-points { font-size: 36px; }
}

.pb-rewards-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.pb-rewards-title {
	font-family: var(--pb-font-display) !important;
	font-size: 19px;
	font-weight: 600;
}

.pb-rewards-sub {
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--pb-text-muted);
}

.pb-rewards-amount {
	font-family: var(--pb-font-display) !important;
	font-size: 26px;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition: color 0.25s var(--pb-ease);
}

.pb-rewards.is-active .pb-rewards-amount {
	color: var(--pb-sage-text);
}

/* Range input, restyled in both engines so the track/thumb match the rest
   of the widget rather than the browser default. */
.pb-rewards-slider {
	width: 100%;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
}

.pb-rewards-slider::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: var(--pb-r-pill);
	/* The filled portion, driven by --pb-slider-pct set in booking.js. */
	background: linear-gradient(
		to right,
		var(--pb-sage-text) 0%,
		var(--pb-sage-text) var(--pb-slider-pct, 0%),
		#ded8cc var(--pb-slider-pct, 0%),
		#ded8cc 100%
	);
}

.pb-rewards-slider::-moz-range-track {
	height: 6px;
	border-radius: var(--pb-r-pill);
	background: #ded8cc;
}

.pb-rewards-slider::-moz-range-progress {
	height: 6px;
	border-radius: var(--pb-r-pill);
	background: var(--pb-sage-text);
}

.pb-rewards-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	margin-top: -9px;
	border-radius: 50%;
	background: var(--pb-ink);
	border: 3px solid var(--pb-white);
	box-shadow: 0 3px 10px rgba(28, 23, 34, 0.3);
	transition: transform 0.15s var(--pb-spring);
}

.pb-rewards-slider::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--pb-ink);
	border: 3px solid var(--pb-white);
	box-shadow: 0 3px 10px rgba(28, 23, 34, 0.3);
}

.pb-rewards-slider:active::-webkit-slider-thumb {
	transform: scale(1.15);
}

.pb-rewards-scale {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--pb-text-muted);
}

.pb-rewards-scale > span:nth-child(2) {
	color: var(--pb-text);
	font-weight: 700;
}

.pb-rewards-note {
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pb-sage-text);
	line-height: 1.55;
}

/* A balance that just doesn't apply here isn't good news the way "your
   points cover this in full" is — same note styling, muted rather than
   the success-green used above. */
.pb-rewards-note-muted {
	color: var(--pb-text-muted);
	font-weight: 500;
}

.pb-rewards .pb-link-btn {
	font-size: 13px;
	margin-top: 12px;
}

.pb-summary-row.is-credit > span:last-child,
.pb-summary-row.is-credit > span:first-child {
	color: var(--pb-sage-text);
	font-weight: 700;
}

/* ---------------- Summary: points this booking earns ---------------- */

/*
 * What this booking earns, as the closing line of the Primeshots Rewards
 * card.
 *
 * This was a free-standing purple panel in the order-summary column, which
 * meant a customer's two point figures — the balance they hold and the
 * points they're about to earn — sat in different places on the page, in
 * different visual languages, neither aware of the other. Same currency,
 * same object: it belongs on the card, and it inherits the card's dark
 * gold-on-ink treatment rather than bringing its own.
 */
.pb-rewards-earn {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	overflow: hidden;
}

.pb-rewards-earn-row {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Never break: the "i" belongs beside the figure it explains. */
	flex-wrap: nowrap;
}

.pb-rewards-earn-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(233, 196, 106, 0.16);
	color: #e9c46a;
}

.pb-rewards-earn-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 5px;
	flex-wrap: wrap;
}

.pb-rewards-earn-num {
	font-family: var(--pb-font-display) !important;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
	color: #e9c46a;
	font-variant-numeric: tabular-nums;
}

.pb-rewards-earn-word {
	font-size: 13px;
	font-weight: 700;
	color: #e9c46a;
}

.pb-rewards-earn-tail {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.62);
}

/* The explainer toggle. */
.pb-root button.pb-rewards-earn-info {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	align-self: center;
	padding: 0;
	border: 1px solid rgba(233, 196, 106, 0.5);
	border-radius: 50%;
	background: transparent;
	color: #e9c46a;
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	cursor: pointer;
	transition: background 0.18s var(--pb-ease), color 0.18s var(--pb-ease);
}

.pb-root button.pb-rewards-earn-info:hover,
.pb-root button.pb-rewards-earn-info[aria-expanded="true"] {
	background: #e9c46a;
	border-color: #e9c46a;
	color: var(--pb-ink);
}

.pb-rewards-earn-pop {
	margin-top: 11px;
	padding-top: 11px;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.68);
	animation: pb-reveal 0.28s var(--pb-ease) both;
}

.pb-rewards-earn-pop[hidden] { display: none; }
.pb-rewards-earn-pop strong { display: block; color: #fff; margin-bottom: 4px; font-size: 12.5px; }
.pb-rewards-earn-pop p { margin: 0 0 6px; }
.pb-rewards-earn-pop p:last-child { margin-bottom: 0; }

/* ---- the "points landing" animation ---- */

.pb-rewards-earn.is-earning { animation: pb-earn-in 0.5s var(--pb-ease) both; }

.pb-rewards-earn.is-earning .pb-rewards-earn-badge {
	animation: pb-earn-pop 0.62s var(--pb-spring) both 0.08s;
}

/* A single light sweep across the row, once. Dimmer than the old panel's:
   on a dark card a 75%-white sweep reads as a flash, not a shimmer. */
.pb-rewards-earn.is-earning::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 55%;
	background: linear-gradient(100deg, transparent 0%, rgba(233, 196, 106, 0.22) 50%, transparent 100%);
	animation: pb-earn-sweep 0.9s var(--pb-ease) both 0.12s;
	pointer-events: none;
}

@keyframes pb-earn-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes pb-earn-pop {
	0%   { transform: scale(0.4) rotate(-25deg); opacity: 0; }
	55%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
	100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes pb-earn-sweep {
	from { left: -60%; }
	to   { left: 115%; }
}

@media (prefers-reduced-motion: reduce) {
	.pb-rewards-earn.is-earning,
	.pb-rewards-earn.is-earning .pb-rewards-earn-badge,
	.pb-rewards-earn-pop {
		animation: none !important;
	}
	.pb-rewards-earn.is-earning::after { display: none; }
}

/* Confirmation: what they just banked. */
.pb-earned {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin: 18px 0 0;
	padding: 20px 24px;
	border-radius: var(--pb-r-lg);
	background: var(--pb-sage-tint);
	border: 1px solid #cfe0b4;
	text-align: left;
	animation: pb-rise 0.55s var(--pb-ease) 0.26s both;
}

.pb-earned-big {
	font-family: var(--pb-font-display) !important;
	font-size: 28px;
	font-weight: 600;
	color: var(--pb-sage-text);
	line-height: 1.1;
}

.pb-earned-sub {
	margin-top: 3px;
	font-size: 13px;
	color: var(--pb-text-muted);
}

.pb-earned-balance {
	text-align: right;
	flex: 0 0 auto;
}

.pb-earned-balance-num {
	font-family: var(--pb-font-display) !important;
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
	color: var(--pb-sage-text);
}

.pb-earned-balance-label {
	margin-top: 4px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--pb-text-muted);
}

/* ---------------- Booking summary sidebar (receipt) ---------------- */

.pb-side {
	position: sticky;
	top: 28px;
}

.pb-root .pb-side-title {
	font-size: 22px;
	margin-bottom: 16px;
}

.pb-side-card {
	border: 1px solid var(--pb-border);
	border-radius: var(--pb-r-lg);
	padding: 22px 24px;
	background: var(--pb-white);
	box-shadow: var(--pb-shadow);
}

.pb-side-when {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--pb-hairline);
}

.pb-side-when-icon {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: var(--pb-r-sm);
	background: var(--pb-purple-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pb-purple);
}

.pb-side-when-date {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.pb-side-when-time,
.pb-side-when-due {
	font-size: 13.5px;
	color: var(--pb-text-muted);
	margin-top: 3px;
}

.pb-side-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 0;
	border-bottom: 1px solid var(--pb-hairline);
}

.pb-side-item > div:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.pb-side-item-name {
	font-size: 15px;
	font-weight: 700;
}

.pb-side-item-sub {
	font-size: 13.5px;
	color: var(--pb-text-muted);
	margin-top: 2px;
}

.pb-side-item-price {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pb-side-edit {
	border: none;
	background: none;
	color: var(--pb-text-muted);
	font-size: 15px;
	padding: 0 0 0 4px;
	line-height: 1;
}

.pb-side-edit:hover {
	color: var(--pb-purple);
	transform: scale(1.12);
}

.pb-side-rows {
	padding-top: 8px;
}

.pb-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-size: 14.5px;
	padding: 8px 0;
}

.pb-summary-row > span:first-child {
	color: var(--pb-text-muted);
}

.pb-summary-row > span:last-child {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* The total gets a receipt's dashed rule and the display face. */
.pb-summary-row.pb-total {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px dashed var(--pb-border);
}

.pb-summary-row.pb-total > span:first-child {
	color: var(--pb-text);
	font-weight: 700;
	font-size: 15px;
}

.pb-summary-row.pb-total > span:last-child {
	font-family: var(--pb-font-display) !important;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.pb-side-selfhost {
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pb-text);
	background: var(--pb-fill);
	border-radius: var(--pb-r-pill);
	padding: 5px 11px;
	display: inline-block;
}

/* ---------------- Buttons ---------------- */

.pb-btn {
	padding: 16px 30px;
	border-radius: var(--pb-r-pill);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.005em;
	border: 1px solid transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s var(--pb-ease), color 0.18s var(--pb-ease),
		border-color 0.18s var(--pb-ease), box-shadow 0.25s var(--pb-ease), transform 0.18s var(--pb-spring);
}

.pb-btn-block {
	display: flex;
	width: 100%;
	margin-top: 18px;
}

/*
 * The Book button sits below the summary card, and 18px left it hugging
 * the card's edge — the two read as one stuck-together block instead of
 * "here is what you're paying" and then "do it". The card also casts a
 * shadow, which eats visually into whatever gap is there.
 */
.pb-side .pb-btn-block {
	margin-top: 28px;
}

@media (max-width: 880px) {
	/* Stacked under the summary on a phone, where the same gap reads
	   tighter still. */
	.pb-side .pb-btn-block { margin-top: 24px; }
}

.pb-btn-primary {
	background: var(--pb-ink);
	color: var(--pb-white);
}

.pb-btn-primary:hover:not(:disabled) {
	background: #2b2438;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(28, 23, 34, 0.3);
}

.pb-btn-primary:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(28, 23, 34, 0.22);
}

.pb-btn-primary:disabled {
	background: var(--pb-fill-hover);
	color: var(--pb-text-faint);
	cursor: not-allowed;
}

/* Purple CTA — reserved for the self-hosted check-in/checkout button and
   the session-rules "Next" button, matching Turo's own purple primary
   action. Every other primary button on this page (Save and continue,
   Book now, etc.) stays the ink-black .pb-btn-primary; this is
   deliberately a distinct, rarer accent so it reads as "the one thing to
   tap right now" rather than just another button. */
.pb-btn-purple {
	background: var(--pb-purple);
	color: var(--pb-white);
}

.pb-btn-purple:hover:not(:disabled) {
	background: var(--pb-purple-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px var(--pb-purple-glow);
}

.pb-btn-purple:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 4px 12px var(--pb-purple-glow);
}

.pb-btn-purple:disabled {
	background: var(--pb-fill-hover);
	color: var(--pb-text-faint);
	cursor: not-allowed;
}

.pb-btn-secondary {
	background: var(--pb-white);
	color: var(--pb-text);
	border-color: var(--pb-border);
}

.pb-btn-secondary:hover:not(:disabled) {
	border-color: var(--pb-ink);
	transform: translateY(-1px);
}

.pb-btn-secondary:disabled {
	background: var(--pb-fill-hover);
	color: var(--pb-text-faint);
	border-color: var(--pb-border);
	cursor: not-allowed;
}

/* Destructive action (cancel-my-booking) — reuses the same danger palette
   as the .pb-mock-banner-style notices elsewhere, so "this is different
   from a normal button" reads the same way it does everywhere else. */
.pb-btn-danger {
	background: var(--pb-danger);
	color: var(--pb-white);
}

.pb-btn-danger:hover:not(:disabled) {
	background: #8f1e18;
	transform: translateY(-1px);
}

.pb-btn-danger:disabled {
	background: var(--pb-fill-hover);
	color: var(--pb-text-faint);
	cursor: not-allowed;
}

/* ---------------- Modal ---------------- */

.pb-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(24, 19, 31, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 99999;
}

.pb-modal {
	background: var(--pb-white);
	border-radius: var(--pb-r-xl);
	padding: 34px;
	max-width: 520px;
	width: 100%;
	max-height: 82vh;
	overflow-y: auto;
	box-shadow: var(--pb-shadow-lg);
}

.pb-root .pb-modal-title {
	font-size: 26px;
	margin-bottom: 16px;
}

.pb-modal-body {
	font-size: 15px;
	line-height: 1.7;
	color: var(--pb-text);
	white-space: pre-line;
	margin-bottom: 28px;
}

/* ---------------- Confirmation ---------------- */

.pb-confirm {
	position: relative;
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
	padding: 30px 0 8px;
}

/* A soft radial wash behind the whole moment. */
.pb-confirm::before {
	content: "";
	position: absolute;
	top: -60px;
	left: 50%;
	width: 560px;
	height: 380px;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(119, 0, 237, 0.07), transparent);
	pointer-events: none;
}

.pb-confirm > * {
	position: relative;
}

.pb-confirm-check {
	width: 64px;
	height: 64px;
	margin: 0 auto 22px;
	color: var(--pb-success);
	animation: pb-pop 0.5s var(--pb-spring) both;
}

.pb-check-ring {
	stroke-dasharray: 158;
	stroke-dashoffset: 158;
	animation: pb-draw 0.6s var(--pb-ease) 0.1s forwards;
	transform: rotate(-90deg);
	transform-origin: center;
}

.pb-check-mark {
	stroke-dasharray: 34;
	stroke-dashoffset: 34;
	animation: pb-draw 0.35s var(--pb-ease) 0.5s forwards;
}

@keyframes pb-draw {
	to { stroke-dashoffset: 0; }
}

.pb-confirm h2 {
	font-size: 34px;
	margin-bottom: 10px;
	animation: pb-rise 0.5s var(--pb-ease) 0.08s both;
}

.pb-manage-locked-note {
	margin: 10px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--pb-text-faint);
	animation: pb-rise 0.4s var(--pb-ease) both;
}

.pb-manage-logo {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	/* The asset is already a filled circle (see logo-email.png), but this
	   keeps a stray non-circular replacement logo from squaring off the
	   corners if the image is ever swapped later. */
	object-fit: cover;
	animation: pb-rise 0.5s var(--pb-ease) 0.02s both;
}

.pb-confirm-sub {
	font-size: 14.5px;
	color: var(--pb-text-muted);
	line-height: 1.6;
	animation: pb-rise 0.5s var(--pb-ease) 0.14s both;
}

.pb-confirm-card {
	margin: 26px 0 0;
	padding: 8px 24px;
	background: var(--pb-white);
	border: 1px solid var(--pb-border);
	border-radius: var(--pb-r-lg);
	box-shadow: var(--pb-shadow);
	text-align: left;
	animation: pb-rise 0.55s var(--pb-ease) 0.2s both;
}

.pb-confirm-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 14px 0;
	border-bottom: 1px solid var(--pb-hairline);
	font-size: 14.5px;
}

.pb-confirm-row:last-child {
	border-bottom: none;
}

.pb-confirm-row-label {
	color: var(--pb-text-muted);
	flex: 0 0 auto;
}

.pb-confirm-row-value {
	font-weight: 600;
	text-align: right;
}

.pb-confirm-row-value.is-strong {
	font-family: var(--pb-font-display) !important;
	font-size: 21px;
	font-weight: 600;
}

/* Door code: ink panel, big spaced serif digits — made to be read from a phone
   held up at the door. */
.pb-door-code {
	margin: 18px 0 0;
	padding: 22px 24px 20px;
	background: var(--pb-ink);
	color: var(--pb-white);
	border-radius: var(--pb-r-lg);
	animation: pb-rise 0.55s var(--pb-ease) 0.28s both;
}

.pb-door-code-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}

.pb-door-code-digits {
	font-family: var(--pb-font-display) !important;
	font-size: 38px;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin: 8px 0 6px;
	font-variant-numeric: tabular-nums;
}

.pb-door-code-window {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.55;
}

/* Self-hosted check-in/checkout control — a single purple button right
   under the door code, rather than a standing checklist card. Its own
   state (which button, or none at all) is derived entirely from the room
   photos already on the booking; see renderCheckInOut(). */
.pb-checkin-wrap {
	margin: 18px 0 0;
}

.pb-checkin-done {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 10px;
	padding: 12px 16px;
	background: var(--pb-sage-tint);
	color: var(--pb-sage-text);
	border-radius: var(--pb-r-lg);
	font-size: 13.5px;
	font-weight: 600;
	animation: pb-rise 0.5s var(--pb-ease) both;
}

.pb-btn-small {
	padding: 6px 12px;
	font-size: 12px;
	cursor: pointer;
}

.pb-btn-disabled {
	opacity: 0.55;
	pointer-events: none;
}

.pb-form-error {
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--pb-error, #b3261e);
}

/* ---------------- My Studio dashboard ----------------
   What the manage page becomes between check-in and check-out: room
   controls instead of a booking receipt. Sits inside the same
   .pb-confirm card as the rest of the manage view so it inherits the
   page's surface, but left-aligns everything — this is a control panel
   to scan, not a confirmation to read. */
.pb-studio-dash {
	text-align: left;
	/* .pb-confirm sets no horizontal padding (its children are cards that
	   bring their own), but the dashboard's own rows and labels sit
	   directly on it, so they need the inset here or they run to the
	   very edge of the screen. */
	padding-left: 18px;
	padding-right: 18px;
}

.pb-dash-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.pb-dash-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--pb-text-faint);
}

.pb-studio-dash .pb-dash-title {
	margin: 2px 0 0;
	font-family: var(--pb-font-display);
	font-size: 26px;
	font-weight: 600;
	color: var(--pb-ink);
}

.pb-dash-until {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 15px;
	color: var(--pb-ink);
	white-space: nowrap;
}

.pb-dash-until-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pb-text-faint);
}

.pb-dash-code {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	padding: 12px 16px;
	background: var(--pb-ink);
	color: var(--pb-white);
	border-radius: var(--pb-r-lg);
}

.pb-dash-code-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}

.pb-dash-code-digits {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.pb-dash-section {
	margin-top: 22px;
}

.pb-dash-section-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pb-text-muted);
	margin-bottom: 10px;
}

.pb-dash-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/* One tile per device. The whole tile is the switch — a big target beats
   a small toggle for someone holding a camera in the other hand. */
.pb-dash-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 14px 14px 12px;
	border: 1px solid var(--pb-border);
	border-radius: var(--pb-r-lg);
	background: var(--pb-white);
	color: var(--pb-ink);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.18s var(--pb-ease), background-color 0.18s var(--pb-ease),
		color 0.18s var(--pb-ease), transform 0.18s var(--pb-spring);
}

.pb-dash-tile:hover:not(:disabled) {
	transform: translateY(-1px);
	border-color: var(--pb-ink);
}

.pb-dash-tile.is-on {
	background: var(--pb-purple);
	border-color: var(--pb-purple);
	color: var(--pb-white);
}

.pb-dash-tile.is-busy {
	opacity: 0.6;
	cursor: progress;
}

.pb-dash-tile-icon {
	display: inline-flex;
	margin-bottom: 6px;
}

.pb-dash-tile-label {
	font-size: 13px;
	font-weight: 600;
}

.pb-dash-tile-state {
	font-size: 11.5px;
	opacity: 0.7;
}

/* The little switch in the tile's top-right, purely as a visual cue that
   the tile is a toggle — the whole tile is the actual hit area. */
.pb-dash-switch {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 18px;
	border-radius: var(--pb-r-pill);
	background: var(--pb-fill-hover);
	transition: background-color 0.18s var(--pb-ease);
}

.pb-dash-tile.is-on .pb-dash-switch {
	background: rgba(255, 255, 255, 0.4);
}

.pb-dash-switch-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--pb-white);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform 0.22s var(--pb-spring);
}

.pb-dash-tile.is-on .pb-dash-switch-knob {
	transform: translateX(14px);
}

.pb-dash-hint,
.pb-dash-empty {
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--pb-text-muted);
}

.pb-dash-time-options {
	display: flex;
	gap: 10px;
}

.pb-dash-time-btn {
	flex: 1;
	flex-direction: column;
	gap: 2px;
	padding: 12px 10px;
}

.pb-dash-time-btn span {
	font-size: 12px;
	color: var(--pb-text-muted);
}

.pb-dash-pending,
.pb-dash-approved {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-radius: var(--pb-r-lg);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.pb-dash-pending {
	background: var(--pb-warning-tint);
	color: var(--pb-warning-text);
}

.pb-dash-approved {
	background: var(--pb-sage-tint);
	color: var(--pb-sage-text);
}

.pb-studio-dash .pb-btn-block {
	margin-top: 24px;
}

.pb-dash-checkout-note {
	margin: 8px 0 0;
	font-size: 12px;
	text-align: center;
	color: var(--pb-text-faint);
}

/* Two up is the point of the grid — it only drops to a single column on
   genuinely narrow phones, where two tiles would squeeze the labels. */
@media (max-width: 339px) {
	.pb-dash-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------- Session-rules screen ----------------
   The one-time "house rules" screen ahead of a customer's very first
   check-in photo, styled after Turo's own dark-hero "Rules of the road"
   screen. Reuses the .pb-room-flow-overlay/-progress/-body/-bottom shell
   from the guided photo flow below; only the hero banner and the icon
   grid are new. */
.pb-room-rules-hero {
	background: var(--pb-ink);
	color: var(--pb-white);
	/* Roughly twice the height it opened at: the rules screen is the one
	   moment the studio gets to set expectations, and a thin strip read as
	   a header to scroll past rather than a screen to take in. */
	padding: 16px 18px 60px;
}

/* Both of these need to out-specificity a global element selector
   (.pb-root h1/.pb-root select/etc. — see near the top of this file) that
   would otherwise win on specificity alone and repaint this dark hero's
   text and close button back to the page's default ink color, regardless
   of which one comes later in the file. */
.pb-room-flow-close.pb-room-flow-close-dark {
	color: var(--pb-white);
}

.pb-room-rules-hero .pb-room-rules-title {
	margin: 64px 0 0;
	font-family: var(--pb-font-display);
	font-size: 26px;
	font-weight: 600;
	color: var(--pb-white);
}

.pb-room-rules-body {
	padding-top: 22px;
	/* The photo-capture steps this shell is shared with center everything;
	   the rules screen instead reads left-to-right like a short notice
	   followed by a grid, so it overrides that alignment here. */
	align-items: flex-start;
	text-align: left;
}

/* The bold instruction line above the icon grid — the "header" the rules
   screen was missing, matching the bolded reminder Turo shows above its
   own icon grid (e.g. "Keep your registration in the glove compartment"). */
.pb-room-rules-header {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--pb-ink);
}

.pb-room-rules-divider {
	width: 100%;
	margin: 16px 0 4px;
	border-top: 1px solid var(--pb-hairline);
}

.pb-room-rules-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 16px;
	width: 100%;
	max-width: 320px;
	margin-top: 18px;
}

.pb-room-rules-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--pb-ink);
}

.pb-room-rules-item .pb-icon {
	color: var(--pb-purple);
}

/* ---------------- Guided room-photo capture flow ----------------
   A full-screen takeover modeled on Turo's own check-in photo flow: a
   close button + phase label + step count up top, a thin progress bar,
   a diagram of the angle to shoot (or a preview once it's taken) in the
   middle, and a single "Save and continue" action fixed at the bottom. */
.pb-room-flow-overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--pb-white);
	display: flex;
	flex-direction: column;
	animation: pb-rise 0.35s var(--pb-ease) both;
}

.pb-room-flow-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 18px 10px;
}

.pb-room-flow-close {
	appearance: none;
	border: none;
	background: none;
	font-size: 18px;
	line-height: 1;
	color: var(--pb-ink);
	cursor: pointer;
	padding: 4px;
}

.pb-room-flow-phase-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pb-text-faint);
}

.pb-room-flow-step-count {
	font-size: 12px;
	font-weight: 600;
	color: var(--pb-text-muted);
	white-space: nowrap;
}

.pb-room-flow-progress {
	margin: 0 18px 6px;
}

.pb-room-flow-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 28px 24px;
	overflow-y: auto;
}

.pb-room-diagram {
	margin-bottom: 22px;
}

.pb-room-flow-thumb-wrap {
	margin-bottom: 22px;
	width: 240px;
	max-width: 100%;
}

.pb-room-flow-thumb {
	width: 100%;
	height: 148px;
	object-fit: cover;
	border-radius: var(--pb-r-lg);
	border: 1px solid var(--pb-border);
}

/* The real reference photo of this studio, shown before a step's own
   photo has been taken (see mediaArea in renderRoomPhotoFlow). Same size
   as the "you already took this" thumbnail above, but with a caption
   underneath so the two are never mistaken for each other. */
.pb-room-flow-reference-wrap {
	margin-bottom: 22px;
	width: 240px;
	max-width: 100%;
}

.pb-room-flow-reference {
	width: 100%;
	height: 148px;
	object-fit: cover;
	border-radius: var(--pb-r-lg);
	border: 1px solid var(--pb-border);
}

.pb-room-flow-reference-caption {
	margin: 8px 0 0;
	font-size: 11.5px;
	color: var(--pb-text-faint);
}

.pb-room-flow-heading {
	margin: 0 0 8px;
	font-family: var(--pb-font-display);
	font-size: 21px;
	font-weight: 600;
	color: var(--pb-ink);
}

.pb-room-flow-hint {
	margin: 0 0 20px;
	max-width: 320px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--pb-text-muted);
}

.pb-room-flow-capture {
	min-width: 160px;
}

.pb-room-flow-bottom {
	flex-shrink: 0;
	padding: 14px 24px calc(18px + env(safe-area-inset-bottom, 0px));
	background: var(--pb-white);
	border-top: 1px solid var(--pb-hairline);
}

.pb-room-flow-continue {
	width: 100%;
}

.pb-confirm-code {
	display: inline-block;
	margin: 20px 0 0;
	padding: 8px 18px;
	background: var(--pb-purple-tint);
	color: var(--pb-purple);
	border-radius: var(--pb-r-pill);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
	animation: pb-rise 0.55s var(--pb-ease) 0.34s both;
}

.pb-confirm .pb-mock-banner {
	text-align: left;
	animation: pb-rise 0.55s var(--pb-ease) 0.4s both;
}

.pb-confirm-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 26px;
	animation: pb-rise 0.55s var(--pb-ease) 0.46s both;
}

/* "Manage my booking" — reached from a link in a confirmation/cancellation
   email, no login. Reuses .pb-confirm/.pb-confirm-card/.pb-door-code as-is;
   this is only the cancel step's own confirm-before-you-destroy-it panel. */
.pb-manage-cancel-confirm {
	margin: 18px 0 0;
	padding: 18px 20px;
	background: var(--pb-info-tint);
	border: 1px solid var(--pb-info-border);
	border-radius: var(--pb-r-lg);
	text-align: left;
	animation: pb-rise 0.4s var(--pb-ease) both;
}

.pb-manage-cancel-confirm p {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--pb-text);
	line-height: 1.55;
}

.pb-manage-cancel-confirm .pb-confirm-actions {
	justify-content: flex-start;
	margin-top: 14px;
}

/* A plain-text, no-chrome button — "just cancel it, no refund or credit" —
   sitting next to real buttons without competing with them for attention. */
.pb-btn-link {
	background: none;
	border-color: transparent;
	padding: 8px 4px;
	color: var(--pb-text-muted);
	text-decoration: underline;
	font-weight: 600;
}

.pb-btn-link:hover:not(:disabled) {
	color: var(--pb-text);
}

/* The refund-vs-credit choice, offered when cancelling at least 24 hours
   out (see PB_Admin_REST_API::CANCELLATION_WINDOW_HOURS). Two tappable
   cards rather than a dropdown — the amount is identical either way, so the
   only real decision is "back to my card" vs. "credit for next time," and
   that reads faster side by side than in a menu. */
.pb-resolution-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 4px;
}

.pb-resolution-card {
	flex: 1 1 180px;
	text-align: left;
	background: var(--pb-white);
	border: 1px solid var(--pb-border);
	border-radius: var(--pb-r-lg);
	padding: 14px 16px;
	cursor: pointer;
	transition: border-color 0.18s var(--pb-ease), transform 0.18s var(--pb-ease), box-shadow 0.25s var(--pb-ease);
}

.pb-resolution-card:hover {
	border-color: var(--pb-purple);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(28, 23, 34, 0.1);
}

.pb-resolution-card-title {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--pb-text);
}

.pb-resolution-card-amount {
	font-family: var(--pb-font-display) !important;
	font-size: 22px;
	font-weight: 600;
	color: var(--pb-purple);
	margin: 4px 0;
}

.pb-resolution-card-sub {
	font-size: 12px;
	line-height: 1.5;
	color: var(--pb-text-muted);
}

.pb-resolution-summary {
	margin: 0 0 4px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--pb-purple-dark);
	line-height: 1.5;
}

/* "I'm running late" — a low-stakes, non-destructive action, so it sits as
   a plain secondary button right alongside "Cancel this booking" rather
   than needing its own confirmation step. */
.pb-late-sent {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 16px 18px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--pb-purple-dark);
}

/* ---------------- Notices ---------------- */

.pb-mock-banner {
	background: var(--pb-warning-tint);
	border: 1px solid var(--pb-warning-border);
	color: var(--pb-warning-text);
	font-size: 12.5px;
	line-height: 1.6;
	padding: 12px 14px;
	border-radius: var(--pb-r);
	margin: 14px 0 0;
}

/* A calm, non-warning notice — e.g. "no payment needed, pay in studio" for
   a service PB_Mock_Data::requires_payment() exempts. Not a warning (nothing
   is wrong or missing), so it uses the same soft blue as the cancel panel's
   info state rather than the mock-banner's amber. */
.pb-info-banner {
	background: var(--pb-info-tint);
	border: 1px solid var(--pb-info-border);
	color: var(--pb-info-text);
	font-size: 12.5px;
	line-height: 1.6;
	padding: 12px 14px;
	border-radius: var(--pb-r);
	margin: 14px 0 0;
}

/* ---------------- Slot hold ---------------- */

.pb-hold-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 24px;
	padding: 12px 16px;
	border-radius: var(--pb-r-pill);
	background: var(--pb-purple-tint);
	color: var(--pb-purple);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.pb-hold-bar::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pb-purple);
	animation: pb-pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pb-pulse-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.8); }
}

.pb-hold-bar strong {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.pb-hold-expired {
	margin-bottom: 20px;
	padding: 14px 16px;
	border-radius: var(--pb-r);
	background: var(--pb-warning-tint);
	border: 1px solid var(--pb-warning-border);
	color: var(--pb-warning-text);
	font-size: 13.5px;
	line-height: 1.6;
}

/* ---------------- Intake questions ---------------- */

.pb-question {
	margin-bottom: 46px;
}

.pb-question-label {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 4px;
}

.pb-question-help {
	font-size: 13.5px;
	color: var(--pb-text-muted);
	line-height: 1.6;
	margin-bottom: 14px;
}

.pb-question-label + .pb-choice-grid,
.pb-question-label + .pb-input {
	margin-top: 14px;
}

.pb-choice-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pb-choice {
	flex: 0 0 auto;
	padding: 13px 22px;
	border-radius: var(--pb-r);
	border: 1px solid var(--pb-border);
	background: var(--pb-white);
	color: var(--pb-text);
	font-size: 15px;
	font-weight: 600;
	box-shadow: var(--pb-shadow-xs);
}

.pb-choice:hover {
	border-color: var(--pb-ink);
	transform: translateY(-2px);
	box-shadow: var(--pb-shadow);
}

.pb-choice.is-selected {
	background: var(--pb-ink);
	border-color: var(--pb-ink);
	color: var(--pb-white);
	box-shadow: 0 6px 16px rgba(28, 23, 34, 0.24);
}

.pb-choice:active {
	transform: scale(0.97);
}

/* ---------------- Motion ---------------- */

@keyframes pb-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes pb-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes pb-pop {
	0%   { transform: scale(0.6); opacity: 0; }
	60%  { transform: scale(1.06); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes pb-enter-fwd {
	from { opacity: 0; transform: translate(14px, 4px); }
	to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes pb-enter-back {
	from { opacity: 0; transform: translate(-14px, 4px); }
	to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes pb-settle {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* A question arriving under the one you just answered. */
@keyframes pb-reveal {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.pb-reveal {
	animation: pb-reveal 0.42s var(--pb-ease) both;
}

/* Step content settles in by default… */
.pb-main > * {
	animation: pb-settle 0.4s var(--pb-ease) both;
}

/* …and slides directionally when we know which way you're travelling.
   Short travel on purpose: a step is a change of subject, not a page
   flying past, and 26px of slide read as a lurch. */
.pb-main.pb-enter-fwd > * {
	animation: pb-enter-fwd 0.4s var(--pb-ease) both;
}

.pb-main.pb-enter-back > * {
	animation: pb-enter-back 0.4s var(--pb-ease) both;
}

/*
 * Each step returns one wrapper, so without this the entire step arrives
 * as a single rigid block — which is what made the text look like it
 * popped rather than settled. This cascades the wrapper's own children
 * (heading, lede, questions, actions) a few frames apart instead.
 */
.pb-stagger-in > * {
	animation: pb-settle 0.42s var(--pb-ease) both;
}
.pb-stagger-in > *:nth-child(1) { animation-delay: 0.04s; }
.pb-stagger-in > *:nth-child(2) { animation-delay: 0.09s; }
.pb-stagger-in > *:nth-child(3) { animation-delay: 0.14s; }
.pb-stagger-in > *:nth-child(4) { animation-delay: 0.19s; }
.pb-stagger-in > *:nth-child(5) { animation-delay: 0.24s; }

/* The reveal animation on a freshly-added question must not be
   overridden by the cascade above, which targets the same nodes. */
.pb-stagger-in .pb-reveal,
.pb-question-list > .pb-reveal {
	animation: pb-reveal 0.42s var(--pb-ease) both;
	animation-delay: 0s;
}

.pb-side {
	animation: pb-fade-in 0.4s ease both;
}

/* Time slots cascade in — alive, never slow. */
.pb-slot-row .pb-slot {
	animation: pb-rise 0.3s var(--pb-ease) both;
}
.pb-slot-row .pb-slot:nth-child(1) { animation-delay: 0.02s; }
.pb-slot-row .pb-slot:nth-child(2) { animation-delay: 0.05s; }
.pb-slot-row .pb-slot:nth-child(3) { animation-delay: 0.08s; }
.pb-slot-row .pb-slot:nth-child(4) { animation-delay: 0.11s; }
.pb-slot-row .pb-slot:nth-child(5) { animation-delay: 0.13s; }
.pb-slot-row .pb-slot:nth-child(n + 6) { animation-delay: 0.15s; }

.pb-modal {
	animation: pb-rise 0.24s var(--pb-ease) both;
}

.pb-modal-overlay {
	animation: pb-fade-in 0.18s ease both;
}

.pb-slot:active,
.pb-day:not(:disabled):active,
.pb-tab:active {
	transform: scale(0.96);
}

.pb-loading {
	animation: pb-pulse 1.4s ease-in-out infinite;
}

@keyframes pb-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.45; }
}

/* Every animation is opt-out for people who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.pb-root *,
	.pb-root *::before,
	.pb-root *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.pb-check-ring,
	.pb-check-mark {
		stroke-dashoffset: 0;
	}
}

/* ---------------- Spacing corrections ---------------- */

.pb-period-label:first-of-type {
	margin-top: 14px;
}

.pb-slot-row + .pb-period-label {
	margin-top: 28px;
}

.pb-hold-bar + .pb-section-title {
	margin-top: 0;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 880px) {
	.pb-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}
	.pb-side {
		position: static;
	}

	/*
	 * On a phone the summary can't sit beside the form — it stacks
	 * underneath it, where on the Details and Date steps it's a block of
	 * numbers between the customer and the next thing to do, repeating
	 * a price they already saw on the service card and on the Continue
	 * button. Keep it for checkout, where confirming what they're paying
	 * IS the screen (and where the Book button lives inside it).
	 */
	.pb-layout:not(.is-checkout) .pb-side {
		display: none;
	}
}

@media (max-width: 640px) {
	.pb-steps {
		padding: 18px 0 0;
	}
	.pb-step-label {
		display: none;
	}
	.pb-root button.pb-step {
		padding: 10px 6px;
	}
	.pb-body {
		padding: 26px 0 40px;
	}
	.pb-path-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.pb-path-art {
		height: 108px;
	}
	.pb-root .pb-path-card h3 {
		font-size: 23px;
	}
	.pb-path-body {
		padding: 20px 20px 18px;
	}
	.pb-path-foot {
		padding: 14px 20px;
	}
	.pb-request-actions .pb-btn {
		flex: 1 1 100%;
	}
	.pb-root .pb-section-title {
		font-size: 25px;
	}
	.pb-root .pb-side-title {
		font-size: 19px;
	}
	.pb-root .pb-cal-month {
		font-size: 24px;
	}
	.pb-service-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.pb-card-body {
		padding: 18px 18px 20px;
	}
	.pb-form-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.pb-day-strip {
		gap: 2px;
	}
	.pb-day {
		width: 40px;
		height: 40px;
		font-size: 14.5px;
	}
	.pb-dow {
		font-size: 10.5px;
	}
	.pb-slot {
		flex: 1 1 calc(50% - 5px);
		min-width: 0;
		padding: 14px 10px;
	}
	.pb-skel-slot {
		flex: 1 1 calc(50% - 5px);
	}
	/* Keep − / hours / + and the price on ONE line on phones. It used to
	   wrap the price onto its own centred row, which made the card taller
	   and split a single control into two. Nothing here is allowed to grow
	   past its content; the flexible gap between them absorbs the width. */
	.pb-hour-stepper {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 8px;
		padding: 12px 12px;
	}
	.pb-stepper-controls {
		flex: 0 0 auto;
		gap: 4px;
	}
	.pb-stepper-btn {
		width: 34px;
		height: 34px;
		flex: 0 0 34px;
	}
	.pb-stepper-value {
		min-width: 0;
		font-size: 13.5px;
		white-space: nowrap;
	}
	.pb-stepper-price {
		width: auto;
		text-align: right;
		font-size: 21px;
	}
	.pb-confirm h2 {
		font-size: 28px;
	}
	.pb-confirm-actions .pb-btn {
		flex: 1 1 100%;
	}
	.pb-modal {
		padding: 24px;
	}
	.pb-door-code-digits {
		font-size: 32px;
	}
	.pb-matched {
		flex-wrap: wrap;
	}
	.pb-matched-points {
		order: 3;
	}
	.pb-earned {
		gap: 12px;
	}
	.pb-earned-balance {
		text-align: left;
	}
	.pb-lookup-row .pb-btn {
		flex: 1 1 100%;
	}
}

/* ================= LANDING HERO ================= */

/*
 * The landing screen: the two paths as a split hero. The expanded panel
 * carries the pitch; the other stays on screen as a labelled sliver so it
 * always reads as two options you can bounce between. Cream editorial type
 * over dark photo panels — same Fraunces/paper language as the rest of the
 * widget, turned up to storefront volume.
 */

.pb-landing {
	animation: pb-rise 0.55s var(--pb-ease) both;
	outline: none;
}

.pb-hero-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.pb-hero-eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pb-text-muted);
}

.pb-hero-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pb-hero-counter {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--pb-text-faint);
	font-variant-numeric: tabular-nums;
	margin-right: 6px;
}

.pb-root button.pb-hero-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--pb-border);
	border-radius: 999px;
	background: var(--pb-white);
	color: var(--pb-ink);
	cursor: pointer;
	transition: background 0.2s var(--pb-ease), color 0.2s var(--pb-ease), border-color 0.2s var(--pb-ease);
}

.pb-root button.pb-hero-arrow:hover {
	background: var(--pb-ink);
	border-color: var(--pb-ink);
	color: #f6f1e7;
}

.pb-root button.pb-hero-arrow:focus-visible {
	outline: 2px solid var(--pb-purple);
	outline-offset: 2px;
}

/* ---- the split ---- */

.pb-root .pb-hero.pb-path-grid {
	display: flex;
	gap: 12px;
	height: clamp(440px, 58vh, 580px);
	align-items: stretch;
}

/* Panels override the white path-card base: these are dark photo plates. */
.pb-root button.pb-hero-panel {
	position: relative;
	flex: 1 1 0%;
	min-width: 0;
	display: block;
	padding: 0;
	border: none;
	border-radius: var(--pb-r-xl);
	overflow: hidden;
	background: var(--pb-ink);
	color: #f6f1e7;
	cursor: pointer;
	box-shadow: var(--pb-shadow);
	/* flex-grow is what animates the swap — cheap, and both panels stay
	   mounted so the photos never reload or restart their fade. */
	transition: flex-grow 0.65s var(--pb-ease), box-shadow 0.3s var(--pb-ease);
}

.pb-root button.pb-hero-panel.is-active { flex-grow: 4.6; }
.pb-root button.pb-hero-panel.is-collapsed { flex-grow: 1; }

.pb-root button.pb-hero-panel:hover {
	transform: none;
	box-shadow: var(--pb-shadow-lift);
}

.pb-root button.pb-hero-panel:focus-visible {
	outline: 3px solid var(--pb-purple);
	outline-offset: 3px;
}

/* Fallback plates while (or if no) photo loads. */
.pb-hero-panel.is-rental .pb-hero-art { background: linear-gradient(160deg, #4a3b2a 0%, #241c12 100%); }
.pb-hero-panel.is-shoot .pb-hero-art { background: linear-gradient(160deg, #3c3055 0%, #1c1722 100%); }

.pb-hero-art {
	position: absolute;
	inset: 0;
}

.pb-hero-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.7s var(--pb-ease), transform 1.1s var(--pb-ease), filter 0.5s var(--pb-ease);
}

.pb-hero-art.is-portrait .pb-hero-photo { object-position: center 22%; }
.pb-hero-art.is-loaded .pb-hero-photo { opacity: 1; transform: scale(1); }

.pb-hero-panel.is-active:hover .pb-hero-photo { transform: scale(1.025); }

/* The scrim that keeps cream type readable over any photo. */
.pb-hero-art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(202deg, rgba(28, 23, 34, 0.02) 0%, rgba(28, 23, 34, 0.16) 44%, rgba(28, 23, 34, 0.78) 100%);
	transition: background 0.5s var(--pb-ease);
}

.pb-hero-panel.is-collapsed .pb-hero-photo { filter: saturate(0.55) brightness(0.72); }

.pb-hero-panel.is-collapsed .pb-hero-art::after {
	background: linear-gradient(180deg, rgba(28, 23, 34, 0.32) 0%, rgba(28, 23, 34, 0.62) 100%);
}

/* ---- expanded content ---- */

.pb-hero-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(22px, 3.4vw, 38px);
	text-align: left;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.45s var(--pb-ease) 0.18s, transform 0.45s var(--pb-ease) 0.18s;
}

.pb-hero-panel.is-collapsed .pb-hero-content {
	opacity: 0;
	transform: translateY(12px);
	transition-delay: 0s;
	pointer-events: none;
}

.pb-hero-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(246, 241, 231, 0.72);
	margin-bottom: 10px;
}

.pb-root .pb-hero-title {
	font-family: var(--pb-font-display) !important;
	font-size: clamp(32px, 4.6vw, 54px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: #f6f1e7;
	margin: 0 0 12px;
}

.pb-hero-blurb {
	max-width: 56ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(246, 241, 231, 0.82);
	margin: 0 0 14px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pb-hero-points {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(246, 241, 231, 0.72);
	margin-bottom: 20px;
}

.pb-hero-dot {
	font-size: 7px;
	color: rgba(246, 241, 231, 0.45);
}

.pb-hero-cta-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.pb-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #f6f1e7;
	color: var(--pb-ink);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 13px 24px;
	border-radius: 999px;
	transition: transform 0.25s var(--pb-spring), box-shadow 0.25s var(--pb-ease);
}

.pb-hero-cta .pb-icon { transition: transform 0.25s var(--pb-spring); }

.pb-hero-panel.is-active:hover .pb-hero-cta {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.pb-hero-panel.is-active:hover .pb-hero-cta .pb-icon { transform: translateX(3px); }

.pb-hero-price {
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(246, 241, 231, 0.88);
}

/* ---- the collapsed sliver ---- */

.pb-hero-tab {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 22px 8px;
	opacity: 0;
	transition: opacity 0.4s var(--pb-ease);
	pointer-events: none;
}

.pb-hero-panel.is-collapsed .pb-hero-tab {
	opacity: 1;
	transition-delay: 0.22s;
}

.pb-hero-tab-hint {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(246, 241, 231, 0.62);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.pb-root .pb-hero-tab-title {
	font-family: var(--pb-font-display) !important;
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 600;
	color: #f6f1e7;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}

.pb-hero-tab-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1.5px solid rgba(246, 241, 231, 0.55);
	border-radius: 999px;
	font-size: 19px;
	font-weight: 500;
	line-height: 1;
	color: #f6f1e7;
	transition: background 0.25s var(--pb-ease), color 0.25s var(--pb-ease), transform 0.25s var(--pb-spring);
}

.pb-hero-panel.is-collapsed:hover .pb-hero-tab-plus {
	background: #f6f1e7;
	color: var(--pb-ink);
	transform: scale(1.08);
}

.pb-hero-panel.is-collapsed:hover .pb-hero-photo {
	filter: saturate(0.8) brightness(0.85);
}

/* ---- stat tiles under the hero ---- */

.pb-hero-statswrap {
	margin-top: 14px;
}

.pb-hero-stats {
	display: none;
	grid-template-columns: repeat(4, 1fr);
	background: var(--pb-white);
	border: 1px solid var(--pb-border);
	border-radius: var(--pb-r-lg);
	overflow: hidden;
}

.pb-hero-stats.is-active {
	display: grid;
	animation: pb-hero-stats-in 0.5s var(--pb-ease) both;
}

@keyframes pb-hero-stats-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.pb-hero-stat {
	padding: clamp(18px, 2.6vw, 28px) 16px;
	text-align: center;
	border-right: 1px solid var(--pb-hairline);
}

.pb-hero-stat:last-child { border-right: none; }

.pb-root .pb-hero-stat-value {
	font-family: var(--pb-font-display) !important;
	font-size: clamp(22px, 2.7vw, 33px);
	font-weight: 600;
	line-height: 1.1;
	color: var(--pb-ink);
	margin-bottom: 7px;
	white-space: nowrap;
}

.pb-hero-stat-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pb-text-muted);
}

/* ---- small screens: the sliver becomes a strip below ---- */

@media (max-width: 720px) {
	.pb-root .pb-hero.pb-path-grid {
		flex-direction: column;
		height: auto;
	}

	.pb-root button.pb-hero-panel { transition: none; }
	.pb-root button.pb-hero-panel.is-active {
		flex: none;
		height: min(440px, 64vh);
	}
	.pb-root button.pb-hero-panel.is-collapsed {
		flex: none;
		height: 78px;
	}

	.pb-hero-tab {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
	}

	.pb-root .pb-hero-tab-title,
	.pb-root .pb-hero-tab-hint {
		writing-mode: horizontal-tb;
		transform: none;
	}

	.pb-hero-tab { gap: 12px; }
	.pb-root .pb-hero-tab-title { order: 1; font-size: 19px; }
	.pb-root .pb-hero-tab-hint { order: 2; margin-left: auto; }
	.pb-hero-tab-plus { order: 3; width: 32px; height: 32px; font-size: 17px; }

	.pb-hero-title { font-size: clamp(30px, 9vw, 40px); }
	.pb-hero-blurb { -webkit-line-clamp: 4; }
	.pb-hero-points { display: none; }

	.pb-hero-stats { grid-template-columns: repeat(2, 1fr); }
	.pb-hero-stat:nth-child(-n + 2) { border-bottom: 1px solid var(--pb-hairline); }
	.pb-hero-stat:nth-child(2n) { border-right: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pb-root button.pb-hero-panel,
	.pb-hero-photo,
	.pb-hero-content,
	.pb-hero-tab,
	.pb-hero-cta,
	.pb-hero-cta .pb-icon,
	.pb-hero-tab-plus {
		transition: none !important;
	}
	.pb-hero-stats.is-active { animation: none; }
	.pb-landing { animation: none; }
}

/* ================= FLOW HEADER (the hero, condensed) ================= */

/*
 * The header band on the "Which studio? / What kind of shoot?" screen is a
 * condensed slice of the landing hero — same photo, same scrim, same
 * kicker-over-Fraunces type — so the flow reads as the hero settling into
 * a header rather than a different page.
 */

.pb-flow-hero {
	position: relative;
	border-radius: var(--pb-r-xl);
	overflow: hidden;
	background: var(--pb-ink);
	color: #f6f1e7;
	box-shadow: var(--pb-shadow);
	margin-bottom: 26px;
}

/* Same fallback plates as the hero panels. */
.pb-flow-hero.is-rental .pb-hero-art { background: linear-gradient(160deg, #4a3b2a 0%, #241c12 100%); }
.pb-flow-hero.is-shoot .pb-hero-art { background: linear-gradient(160deg, #3c3055 0%, #1c1722 100%); }

/* Shorter band, text on the left — the scrim leans left instead of down. */
.pb-flow-hero .pb-hero-art::after {
	background: linear-gradient(88deg, rgba(28, 23, 34, 0.84) 0%, rgba(28, 23, 34, 0.52) 52%, rgba(28, 23, 34, 0.2) 100%);
}

.pb-flow-hero-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	min-height: 172px;
	padding: 16px 24px 22px;
}

/* The back control moves onto the band as a cream ghost pill. */
.pb-root button.pb-flow-back {
	margin: 0;
	padding: 8px 14px;
	border: 1px solid rgba(246, 241, 231, 0.38);
	border-radius: 999px;
	background: rgba(28, 23, 34, 0.28);
	color: #f6f1e7;
	font-size: 12.5px;
	font-weight: 600;
}

.pb-root button.pb-flow-back:hover {
	color: #f6f1e7;
	background: rgba(28, 23, 34, 0.5);
	border-color: rgba(246, 241, 231, 0.6);
}

.pb-flow-hero .pb-hero-kicker { margin-bottom: 7px; }

.pb-root .pb-flow-hero-title {
	font-family: var(--pb-font-display) !important;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: #f6f1e7;
	margin: 0 0 8px;
}

.pb-flow-hero-lede {
	max-width: 62ch;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(246, 241, 231, 0.8);
	margin: 0;
}

@media (max-width: 720px) {
	.pb-flow-hero-inner { min-height: 150px; padding: 14px 18px 18px; }
	.pb-root .pb-flow-hero-title { font-size: 26px; }
}

/* ---- the hero ⇄ flow morph (View Transitions; decoration only) ---- */

/*
 * The open hero panel and the flow's header band share a transition name,
 * so browsers with View Transitions morph one into the other on the way in
 * and back out. Browsers without the API (and reduced-motion users, gated
 * in JS) get the plain instant swap — nothing depends on this.
 */
@supports (view-transition-name: none) {
	.pb-root button.pb-hero-panel.is-active { view-transition-name: pb-stage; }
	.pb-root .pb-flow-hero { view-transition-name: pb-stage; }
}

::view-transition-group(pb-stage) {
	animation-duration: 0.55s;
	animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

::view-transition-old(pb-stage),
::view-transition-new(pb-stage) {
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* Breathing room between the lede and the first question, and between
   revealed questions. Each question is its own visually distinct block —
   with only a bare label/help/choices stack and no rule or card between
   them, the gap has to do all the work of separating "a new question" from
   "more about the one above," so it's noticeably larger than the internal
   label-to-choices spacing above. */
.pb-question-list {
	margin-top: 30px;
}

.pb-question-list > .pb-question + .pb-question {
	margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.pb-main > *,
	.pb-stagger-in > *,
	.pb-reveal,
	.pb-service-card,
	.pb-path-card {
		animation: none !important;
	}
}

/* ---------------- Checkout: collapsed contact details ---------------- */

/*
 * A matched customer has already given us their name, email and phone —
 * four pre-filled boxes ask them to re-read details they didn't type and
 * can't improve. This shows it back as a short confirmation with a way in.
 */
.pb-contact-summary {
	margin-bottom: 22px;
	padding: 16px 18px;
	border: 1px solid var(--pb-border);
	border-radius: var(--pb-r-lg);
	background: var(--pb-fill);
	animation: pb-reveal 0.35s var(--pb-ease) both;
}

.pb-contact-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.pb-root .pb-contact-title {
	font-family: var(--pb-font) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pb-text-muted);
	margin: 0;
}

.pb-root button.pb-contact-edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--pb-border);
	border-radius: var(--pb-r-pill);
	background: var(--pb-white);
	color: var(--pb-text);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.18s var(--pb-ease), background 0.18s var(--pb-ease), transform 0.18s var(--pb-ease);
}

.pb-root button.pb-contact-edit:hover {
	border-color: var(--pb-ink);
	transform: translateY(-1px);
}

.pb-root button.pb-contact-edit:focus-visible {
	outline: 2px solid var(--pb-purple);
	outline-offset: 2px;
}

.pb-contact-rows {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.pb-contact-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 14px;
}

.pb-contact-label {
	flex: 0 0 62px;
	font-size: 12.5px;
	color: var(--pb-text-faint);
}

.pb-contact-value {
	min-width: 0;
	font-weight: 600;
	color: var(--pb-text);
	overflow-wrap: anywhere;
}

/* The way back out of the expanded form. */
.pb-edit-done-row {
	display: flex;
	justify-content: flex-start;
}

.pb-root button.pb-edit-done {
	padding: 11px 22px;
}

@media (max-width: 480px) {
	.pb-contact-row { flex-direction: column; gap: 1px; }
	.pb-contact-label { flex: none; }
}

/* ---------------- Rewards: the nothing-banked-yet state ---------------- */

/*
 * Shown to a matched customer with no points to redeem right now — a
 * slider pinned at zero is a broken control, so the card carries the
 * "how the programme works" explainer along its bottom instead. Same
 * dark card, real balance (even $0); only the strip changes.
 */
.pb-rewards-giftcard .pb-rewards-how {
	margin-top: 12px;
}

.pb-rewards-giftcard .pb-rewards-how li {
	color: rgba(255, 255, 255, 0.85);
}

.pb-rewards-giftcard .pb-rewards-how .pb-icon {
	color: #e9c46a;
}

.pb-rewards-how {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pb-rewards-how li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--pb-text);
}

.pb-rewards-how .pb-icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--pb-purple);
}

/* ---------------- Step navigation (Back / Continue) ---------------- */

/*
 * These had no styles of their own at all — they inherited the button
 * defaults and sat inline, which left almost no gap between them and made
 * them read as two more options in the same family as the choice pills
 * directly above. They are navigation, not answers, so they get their own
 * band: a rule and real space above to close the step, the two controls
 * pushed to opposite ends, and arrows to say which way each one goes.
 */
.pb-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--pb-hairline);
}

/* Back is deliberately quiet: it's an escape hatch, not a peer of the
   primary action, and a second filled pill would compete with it. */
.pb-root button.pb-nav-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 20px 13px 16px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--pb-text-muted);
	box-shadow: none;
	font-size: 14.5px;
}

.pb-root button.pb-nav-back:hover:not(:disabled) {
	background: var(--pb-fill);
	border-color: var(--pb-border);
	color: var(--pb-text);
	transform: none;
}

.pb-root button.pb-nav-back .pb-icon { transition: transform 0.22s var(--pb-spring); }
.pb-root button.pb-nav-back:hover:not(:disabled) .pb-icon { transform: translateX(-3px); }

.pb-root button.pb-nav-next {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
}

.pb-root button.pb-nav-next .pb-icon { transition: transform 0.22s var(--pb-spring); }
.pb-root button.pb-nav-next:hover:not(:disabled) .pb-icon { transform: translateX(3px); }

/* A disabled Continue shouldn't wave an arrow at a road you can't take. */
.pb-root button.pb-nav-next:disabled .pb-icon { opacity: 0.5; }

@media (max-width: 560px) {
	/* Continue leads on a phone; Back drops beneath it as a quiet link, so
	   the thumb lands on the action they almost always want. */
	.pb-actions {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 10px;
	}
	.pb-root button.pb-nav-next { justify-content: center; width: 100%; }
	.pb-root button.pb-nav-back { justify-content: center; width: 100%; }
}

/*
 * Continue is purple — the brand accent already used for rewards, links
 * and focus rings — rather than the ink black shared with every other
 * filled button. White on #7700ed measures 6.98:1, comfortably past the
 * 4.5:1 needed for text, and the disabled state stays neutral grey so a
 * blocked step never looks like an invitation.
 *
 * Deliberately scoped to the step's Continue, not to .pb-btn-primary:
 * that class also paints the service CTAs and the final Book appointment
 * button, and repainting the whole widget is a bigger decision than this.
 */
.pb-root button.pb-nav-next {
	background: var(--pb-purple);
	border-color: var(--pb-purple);
	color: #fff;
}

.pb-root button.pb-nav-next:hover:not(:disabled) {
	background: var(--pb-purple-dark);
	border-color: var(--pb-purple-dark);
	box-shadow: 0 12px 26px var(--pb-purple-glow);
}

.pb-root button.pb-nav-next:active:not(:disabled) {
	box-shadow: 0 4px 12px var(--pb-purple-glow);
}

.pb-root button.pb-nav-next:focus-visible {
	outline: 2px solid var(--pb-purple-dark);
	outline-offset: 3px;
}

/* Unchanged: a step you can't leave yet shouldn't look ready to go. */
.pb-root button.pb-nav-next:disabled {
	background: var(--pb-fill-hover);
	border-color: transparent;
	color: var(--pb-text-faint);
	box-shadow: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   [primeshots_book_button] — inline hour picker + price + CTA
   ══════════════════════════════════════════════════════════════════════════

   Design intent: this sits on a marketing page, not inside the booking
   flow, so it has to read as ONE object a visitor can act on — not three
   floating controls. Everything lives in a single bordered bar with
   internal hairline dividers, so the eye reads left-to-right as
   "how long → what it costs → go".

   Spacing is on a 4px scale. Type sizes step 11 / 13 / 15 / 20. The only
   saturated colour is the CTA hover (the studio's purple); everything
   else is ink on cream so the bar never competes with page imagery.
*/

.pb-bookbar {
	/* Tokens are local so the bar can drop into any theme without
	   inheriting something unexpected. */
	--bar-ink: #14110f;
	--bar-muted: #7a736c;
	--bar-line: #ddd6cc;
	--bar-surface: #fff;
	--bar-accent: #7700ed;
	--bar-h: 56px;

	display: inline-flex;
	align-items: stretch;
	gap: 0;
	height: var(--bar-h);
	background: var(--bar-surface);
	border: 1px solid var(--bar-line);
	border-radius: calc(var(--bar-h) / 2);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--bar-ink);
	/* A soft lift rather than a hard shadow — the bar should feel placed
	   on the page, not pasted over it. */
	box-shadow: 0 1px 2px rgba(20, 17, 15, 0.04), 0 8px 24px -12px rgba(20, 17, 15, 0.12);
	max-width: 100%;
}

/* At desktop the .pb-bookbar-top wrapper must not create a box of its own —
   its three children (stepper, rule, price) need to be direct flex items of
   the bar so they sit on one line with the CTA. The wrapper only becomes a
   real row on narrow screens, where it holds the top half of the stacked
   card. display:contents is exactly that: the element vanishes from layout
   but its children stay. */
.pb-bookbar-top {
	display: contents;
}

/* ── stepper ─────────────────────────────────────────────────────────── */

.pb-bookbar-stepper {
	display: flex;
	align-items: center;
	padding: 0 6px 0 4px;
}

.pb-bookbar-step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--bar-ink);
	font-size: 19px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
	-webkit-tap-highlight-color: transparent;
}

.pb-bookbar-step:hover:not(:disabled) {
	background: #f2ede6;
}

.pb-bookbar-step:active:not(:disabled) {
	background: #e8e1d8;
}

.pb-bookbar-step:disabled {
	color: #c9c2ba;
	cursor: default;
}

/* Keyboard focus has to be visible, but the default ring on a circular
   button inside a pill looks broken — inset it instead. */
.pb-bookbar-step:focus-visible {
	outline: 2px solid var(--bar-accent);
	outline-offset: -2px;
}

/* The readout is fixed-width so the bar doesn't jump between "1 hour"
   and "5 hours". Tabular numerals keep the digit from shifting too. */
.pb-bookbar-readout {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 60px;
	padding: 0 2px;
	user-select: none;
	line-height: 1;
}

.pb-bookbar-count {
	font-size: 17px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.pb-bookbar-unit {
	margin-top: 3px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bar-muted);
}

/* ── divider ─────────────────────────────────────────────────────────── */

.pb-bookbar-rule {
	width: 1px;
	margin: 12px 0;
	background: var(--bar-line);
	flex: 0 0 1px;
}

/* ── price ───────────────────────────────────────────────────────────── */

.pb-bookbar-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 16px 0 18px;
	line-height: 1;
	white-space: nowrap;
	/* Reserve room for the widest total this bar can reach ($300.00 at
	   5h × $70) so the bar keeps one width as the customer steps through.
	   Without this the whole control grows and shrinks under the cursor,
	   and a column of studio bars never lines up with each other. */
	min-width: 104px;
}

.pb-bookbar-total {
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* The rate is the reassurance that the total is not arbitrary. Small,
   quiet, and always present — it answers "why that number" before
   anyone has to ask. */
.pb-bookbar-rate {
	margin-top: 4px;
	font-size: 11px;
	font-weight: 500;
	color: var(--bar-muted);
	letter-spacing: 0.01em;
}

/* ── call to action ──────────────────────────────────────────────────── */

.pb-bookbar-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 6px 6px 6px 0;
	padding: 0 22px;
	background: var(--bar-ink);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	border-radius: calc((var(--bar-h) - 12px) / 2);
	transition: background 140ms ease, transform 140ms ease;
	white-space: nowrap;
}

.pb-bookbar-cta:hover,
.pb-bookbar-cta:focus {
	background: var(--bar-accent);
	color: #fff;
	text-decoration: none;
}

.pb-bookbar-cta:focus-visible {
	outline: 2px solid var(--bar-accent);
	outline-offset: 2px;
}

.pb-bookbar-cta:active {
	transform: translateY(1px);
}

/* The arrow nudges on hover — one small motion, on the element that
   actually leads somewhere. */
.pb-bookbar-arrow {
	display: inline-block;
	transition: transform 140ms ease;
}

.pb-bookbar-cta:hover .pb-bookbar-arrow {
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.pb-bookbar-cta,
	.pb-bookbar-arrow,
	.pb-bookbar-step {
		transition: none;
	}
	.pb-bookbar-cta:active {
		transform: none;
	}
}

/* ── simple variant (non-hourly services) ────────────────────────────── */

/* Passport photos and fixed-price shoots have nothing to step through, so
   the bar collapses to the CTA alone rather than showing an empty shell. */
.pb-bookbar--simple {
	border: 0;
	box-shadow: none;
	background: transparent;
	height: auto;
}

.pb-bookbar--simple .pb-bookbar-cta {
	margin: 0;
	height: var(--bar-h);
	padding: 0 30px;
	border-radius: calc(var(--bar-h) / 2);
	box-shadow: 0 1px 2px rgba(20, 17, 15, 0.06), 0 8px 24px -12px rgba(20, 17, 15, 0.18);
}

/* ── narrow screens ──────────────────────────────────────────────────── */

/* Below ~420px the three sections can't sit on one line without the price
   or the CTA truncating. Stack instead: the bar becomes a card, the CTA
   goes full width underneath. Keeps every target at 44px+. */
@media (max-width: 460px) {
	.pb-bookbar {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		height: auto;
		width: 100%;
		border-radius: 16px;
		padding: 6px;
	}

	.pb-bookbar-stepper {
		padding: 6px 4px 6px 8px;
		justify-content: flex-start;
	}

	/* Stepper and price share the top row of the stacked card. */
	.pb-bookbar-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pb-bookbar-rule {
		display: none;
	}

	.pb-bookbar-price {
		align-items: flex-end;
		padding: 6px 12px 6px 0;
	}

	.pb-bookbar-cta {
		justify-content: center;
		height: 48px;
		margin: 4px 0 0;
		border-radius: 12px;
	}

	.pb-bookbar--simple .pb-bookbar-cta {
		border-radius: 999px;
	}
}