/*
 * jd-booking — Evening Pine front-end styles.
 * Every selector is scoped under #jdb-app so the widget never leaks into the Divi theme.
 * Selectors target the ACTUAL class names the JS app renders.
 * Mobile-first; respects prefers-reduced-motion.
 */

#jdb-app {
	/* Evening Pine design tokens. */
	--jdb-deep-pine: #1F332B;
	--jdb-night-pine: #16241E;
	--jdb-ivory: #F6F1E7;
	--jdb-cream: #FDFAF3;
	--jdb-amber: #F0E5D0;
	--jdb-ink: #243830;
	--jdb-forest-grey: #5A6C5D;
	--jdb-moon-sage: #A9BBA9;
	--jdb-honey: #C89B5E;
	--jdb-pale-gold: #D9B87E;

	/* Derived design decisions. */
	--jdb-radius-card: 18px;
	--jdb-radius-btn: 10px;
	--jdb-radius-chip: 999px;
	--jdb-gap: 16px;
	--jdb-shadow-card: 0 8px 26px rgba(22, 36, 30, 0.10);
	--jdb-shadow-raise: 0 12px 34px rgba(22, 36, 30, 0.18);
	--jdb-border: rgba(31, 51, 43, 0.12);
	--jdb-focus: 0 0 0 3px rgba(200, 155, 94, 0.45);
	--jdb-danger: #8f3222;
	--jdb-danger-line: rgba(179, 69, 47, 0.35);

	--jdb-font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--jdb-font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	max-width: 780px;
	margin: 0 auto;
	/* The whole widget is one ivory "glowing panel" floating on the dark page,
	 * so the header/title sit on ivory (readable) rather than on the dark bg. */
	padding: 26px;
	background: var(--jdb-ivory);
	border-radius: var(--jdb-radius-card);
	box-shadow: 0 20px 55px rgba(0, 0, 0, 0.30);
	color: var(--jdb-ink);
	font-family: var(--jdb-font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

#jdb-app *,
#jdb-app *::before,
#jdb-app *::after {
	box-sizing: border-box;
}

/* ----- Typography ----- */

#jdb-app h1,
#jdb-app h2,
#jdb-app h3,
#jdb-app h4 {
	font-family: var(--jdb-font-head);
	color: var(--jdb-deep-pine);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 0.4em;
	letter-spacing: 0.2px;
}

#jdb-app h1 { font-size: 2rem; }
#jdb-app h2 { font-size: 1.55rem; }
#jdb-app h3 { font-size: 1.25rem; }

#jdb-app p { margin: 0 0 0.85em; }
#jdb-app p:last-child { margin-bottom: 0; }

#jdb-app .jdb-link,
#jdb-app a {
	color: var(--jdb-deep-pine);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
#jdb-app .jdb-link:hover,
#jdb-app a:hover { color: var(--jdb-night-pine); }

/* Visually-hidden helper. */
#jdb-app .jdb-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Honeypot — visually and semantically removed from the flow. */
#jdb-app .jdb-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ----- App shell / layout ----- */

#jdb-app .jdb-main,
#jdb-app .jdb-flow {
	/* The ivory panel now lives on #jdb-app itself; these are transparent. */
	background: transparent;
	border-radius: 0;
	padding: 0;
}

/* The site header is fixed, so scrolling the app to `block:start` would tuck
   its first line underneath. */
#jdb-app {
	scroll-margin-top: 88px;
}

#jdb-app .jdb-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: var(--jdb-gap);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--jdb-border);
}
/* With the account links gone from the card, the header is one heading — so it
   no longer needs to reserve a second row's worth of height for them. */
#jdb-app .jdb-header:not(:has(.jdb-header-account)) { padding-bottom: 10px; }

/* THE ACCOUNT LINKS NOW SIT ON THE TITLE'S ROW, RIGHT-HAND SIDE (owner,
   2026-08-08). The header is already display:flex with space-between, so the
   title takes the left and this takes the right with nothing else required —
   but it needs to be allowed to SHRINK, or a long signed-in label
   ("Hugo Carlos's bookings") pushes the heading out of the card on a phone.
   min-width:0 lets it, and wrapping keeps both links legible when it does. */
#jdb-app .jdb-header .jdb-header-account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px 14px;
	min-width: 0;
	margin-left: auto;
	text-align: right;
	/* ⚠️ BOTH OF THESE ARE OVERRIDES, NOT DECORATION, and without them the rule
	   above does nothing visible on a phone. An older rule further down this
	   file still says

	       #jdb-app .jdb-header-account { order: -1; width: 100%; }
	       @media (min-width: 700px) { … order: 1; width: auto; … }

	   i.e. the previous design deliberately gave the links their OWN full-width
	   line below 700px and only sat them beside the title on a wide screen. That
	   is exactly what the owner asked to change, so the mobile half of it has to
	   be undone explicitly: width:100% was making the bar fill the header and
	   push the heading onto a second row, and order:-1 was putting it above.
	   My selector is (1,2,0) against that rule's (1,1,0), so naming the two
	   properties here is enough — no !important needed. */
	width: auto;
	order: 0;
}
/* Below the card's own padding the pair would otherwise crowd the heading. */
@media (max-width: 480px) {
	#jdb-app .jdb-header { gap: 4px 10px; }
	#jdb-app .jdb-header .jdb-header-account { gap: 2px 10px; }
}

#jdb-app .jdb-app-title {
	font-family: var(--jdb-font-head);
	color: var(--jdb-deep-pine);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
}

/* "My bookings" reads as a discreet, on-brand pill rather than a bare link. */
#jdb-app .jdb-mybookings-link {
	font-weight: 700;
	font-size: 0.82rem;
	text-decoration: none;
	color: var(--jdb-deep-pine);
	background: var(--jdb-amber);
	border: 1px solid var(--jdb-border);
	border-radius: var(--jdb-radius-chip);
	padding: 7px 15px;
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease;
}
#jdb-app .jdb-mybookings-link:hover {
	background: var(--jdb-pale-gold);
	border-color: var(--jdb-pale-gold);
}

/* The signed-in client's own details, under the greeting: what the booking is
   about to be made with. Plain lines, not fields — they are not editable here,
   and a disabled input reads as something broken. */
#jdb-app .jdb-loggedin-details {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: 4px;
	font-size: 0.88rem;
	color: var(--jdb-forest-grey);
}

#jdb-app .jdb-loggedin-badge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 14px;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 10px 14px;
	border-radius: var(--jdb-radius-btn);
	background: rgba(169, 187, 169, 0.22);
	color: var(--jdb-deep-pine);
	margin-bottom: var(--jdb-gap);
}
#jdb-app .jdb-loggedin-badge > span { min-width: 0; }
#jdb-app .jdb-loggedin-badge .jdb-link {
	white-space: nowrap;
	flex: 0 0 auto;
	font-weight: 700;
}

#jdb-app .jdb-step { margin-top: var(--jdb-gap); }

#jdb-app .jdb-step-title {
	margin-bottom: 0.35em;
}

/* Step wrappers — grouping hooks, kept fluid. */
#jdb-app .jdb-step-treatment,
#jdb-app .jdb-step-duration,
#jdb-app .jdb-step-datetime,
#jdb-app .jdb-step-details,
#jdb-app .jdb-step-confirm { display: block; }

/* ----- Progress rail ----- */

#jdb-app .jdb-progress {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	list-style: none;
	margin: 0 0 var(--jdb-gap);
	padding: 0;
}

#jdb-app .jdb-progress-step {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--jdb-forest-grey);
	font-size: 0.8rem;
	font-weight: 600;
	/* the joining line between circles is drawn from here on phones */
	position: relative;
}

/* THE STEP ITSELF IS THE CONTROL when it is one. A <button> is only rendered
   for a step already answered (see progressRail) — forward is never offered,
   because the rail would then be a way past a question the booking needs.
   Everything visual stays on .jdb-progress-num so the static and pressable
   forms are identical apart from the cursor and the focus ring. */
#jdb-app .jdb-progress-go {
	display: flex;
	align-items: center;
	gap: inherit;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
}
#jdb-app button.jdb-progress-go { cursor: pointer; }
#jdb-app button.jdb-progress-go:focus-visible {
	outline: 2px solid var(--jdb-amber);
	outline-offset: 3px;
	border-radius: 6px;
}
#jdb-app button.jdb-progress-go:hover .jdb-progress-num {
	transform: scale(1.08);
}
#jdb-app .jdb-progress-num { transition: transform 0.2s ease, background-color 0.2s ease; }

#jdb-app .jdb-progress-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--jdb-amber);
	color: var(--jdb-deep-pine);
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1;
}

#jdb-app .jdb-progress-step.is-current { color: var(--jdb-deep-pine); }
#jdb-app .jdb-progress-step.is-current .jdb-progress-num {
	background: var(--jdb-deep-pine);
	color: var(--jdb-cream);
}

#jdb-app .jdb-progress-step.is-done { color: var(--jdb-deep-pine); }
#jdb-app .jdb-progress-step.is-done .jdb-progress-num {
	background: var(--jdb-moon-sage);
	color: var(--jdb-night-pine);
	font-size: 0;
}
#jdb-app .jdb-progress-step.is-done .jdb-progress-num::after {
	content: "\2713";
	font-size: 0.9rem;
	line-height: 1;
}

#jdb-app .jdb-progress-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ----- Treatment / option cards ----- */

#jdb-app .jdb-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--jdb-gap);
}

#jdb-app .jdb-card {
	background: var(--jdb-cream);
	border: 1px solid var(--jdb-border);
	border-radius: var(--jdb-radius-card);
	box-shadow: var(--jdb-shadow-card);
	padding: 18px;
}
#jdb-app .jdb-card-body { display: block; }

/* Selectable treatment option card. */
#jdb-app .jdb-treatment-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
	width: 100%;
	background: var(--jdb-cream);
	border: 1.5px solid var(--jdb-border);
	border-radius: var(--jdb-radius-card);
	box-shadow: var(--jdb-shadow-card);
	padding: 16px;
	cursor: pointer;
	color: inherit;
	font: inherit;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
#jdb-app .jdb-treatment-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--jdb-shadow-raise);
	border-color: var(--jdb-pale-gold);
}
#jdb-app .jdb-treatment-card:focus-visible {
	outline: none;
	box-shadow: var(--jdb-focus);
}
#jdb-app .jdb-treatment-card.is-selected,
#jdb-app .jdb-treatment-card[aria-pressed="true"] {
	border-color: var(--jdb-honey);
	box-shadow: var(--jdb-shadow-raise);
}

#jdb-app .jdb-card-photo {
	aspect-ratio: 16 / 10;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: var(--jdb-amber);
	object-fit: cover;
	display: block;
}
#jdb-app .jdb-card-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#jdb-app .jdb-card-title {
	font-family: var(--jdb-font-head);
	color: var(--jdb-deep-pine);
	font-weight: 600;
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.15;
}
#jdb-app .jdb-card-desc {
	color: var(--jdb-forest-grey);
	font-size: 0.92rem;
	margin: 0;
}

/* ----- Chips (durations, slots) ----- */

#jdb-app .jdb-chips,
#jdb-app .jdb-slot-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#jdb-app .jdb-chip,
#jdb-app .jdb-duration-chip,
#jdb-app .jdb-slot-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	min-height: 44px;
	background: var(--jdb-cream);
	border: 1.5px solid var(--jdb-border);
	border-radius: var(--jdb-radius-chip);
	padding: 10px 18px;
	font: inherit;
	font-weight: 600;
	color: var(--jdb-ink);
	cursor: pointer;
	transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
#jdb-app .jdb-chip:hover,
#jdb-app .jdb-duration-chip:hover,
#jdb-app .jdb-slot-chip:hover { border-color: var(--jdb-pale-gold); }

#jdb-app .jdb-chip:focus-visible,
#jdb-app .jdb-duration-chip:focus-visible,
#jdb-app .jdb-slot-chip:focus-visible { outline: none; box-shadow: var(--jdb-focus); }

#jdb-app .jdb-chip.is-selected,
#jdb-app .jdb-chip[aria-pressed="true"],
#jdb-app .jdb-duration-chip.is-selected,
#jdb-app .jdb-duration-chip[aria-pressed="true"],
#jdb-app .jdb-slot-chip.is-selected,
#jdb-app .jdb-slot-chip[aria-pressed="true"] {
	background: var(--jdb-deep-pine);
	border-color: var(--jdb-deep-pine);
	color: var(--jdb-cream);
}

#jdb-app .jdb-chip.is-disabled,
#jdb-app .jdb-chip:disabled,
#jdb-app .jdb-duration-chip.is-disabled,
#jdb-app .jdb-duration-chip:disabled,
#jdb-app .jdb-slot-chip.is-disabled,
#jdb-app .jdb-slot-chip:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* NOT AN ERROR. Nothing has gone wrong — a choice is outstanding and the line
   says which one. So: the same honey wash as the note below it rather than the
   error red, plus a rule down the left edge, which is the only thing that has
   to distinguish it from an explanation.
   It sits with the BUTTON, not with the chips: the press happens at the foot of
   the step, and on a phone the lengths are a scroll above it. The chips point
   at themselves instead — see .jdb-chips.is-wanted below. */
#jdb-app .jdb-duration-prompt {
	margin: 0 0 10px;
	padding: 10px 14px;
	border-left: 3px solid var(--jdb-honey);
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--jdb-ink);
	background: rgba(200, 155, 94, 0.12);
	border-radius: 0 var(--jdb-radius-btn) var(--jdb-radius-btn) 0;
}

/* THE LENGTHS ASK TO BE LOOKED AT.
   On the whole GROUP, not on each chip: three outlines side by side read as
   three separate problems, and none of them is wrong — one just has not been
   chosen yet. Honey, the same colour as the line above the button, so the two
   are visibly one message; a soft pulse twice and then still, because a
   highlight that never settles becomes something to ignore. */
#jdb-app .jdb-chips.is-wanted {
	border-radius: calc(var(--jdb-radius-btn) + 6px);
	outline: 2px solid rgba(200, 155, 94, 0.85);
	outline-offset: 6px;
	animation: jdbWantPick 1.1s ease-out 2;
}
@keyframes jdbWantPick {
	0%   { outline-color: rgba(200, 155, 94, 0.85); }
	50%  { outline-color: rgba(200, 155, 94, 0.25); }
	100% { outline-color: rgba(200, 155, 94, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
	#jdb-app .jdb-chips.is-wanted { animation: none; }
}

/* Explanation shown when the new-customer gate leaves a single duration. */
#jdb-app .jdb-duration-note {
	margin: 12px 0 0;
	padding: 10px 14px;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--jdb-ink);
	background: rgba(200, 155, 94, 0.12);
	border-radius: var(--jdb-radius-btn);
}

/* ----- Date & time: two columns on a wide screen -----
   Dates left, times for the chosen date right.

   Stacked, the calendar took the full content width — and a day cell is
   aspect-ratio 1/1, so a WIDE calendar is a TALL one. Seven columns of ~120px
   squares put the month alone over the fold and pushed the times it exists to
   reveal out of sight, so choosing a date scrolled in content the visitor could
   not see happening.

   Mobile keeps the stack, in source order, with no rule needed. */
#jdb-app .jdb-datetime-cols {
	display: block;
}

@media (min-width: 880px) {
	#jdb-app .jdb-datetime-cols {
		display: grid;
		/* The calendar is still the bigger half — it is what is being read — but
		   it is now bounded, which is what stops the day cells inflating. */
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: 20px;
		align-items: start;
	}
	/* THE TIMES ARE A PANEL, NOT A VOID.
	   Beside the calendar's cream card this column had no background and no
	   border, so two small chips sat at the left edge of 260px of page — which
	   read as a gap on the right rather than as a column with room in it. Same
	   card treatment as the calendar, so the two halves are visibly a pair. */
	#jdb-app .jdb-datetime-cols .jdb-day-slots {
		margin-top: 0;
		background: var(--jdb-cream);
		border: 1px solid var(--jdb-border);
		border-radius: var(--jdb-radius-card);
		box-shadow: var(--jdb-shadow-card);
		padding: 14px;
		max-height: 520px;
		overflow-y: auto;
	}

	/* And the chips SHARE the width instead of clustering left. A fixed
	   three-across grid keeps a one-slot day and a nine-slot day looking like
	   the same component. */
	#jdb-app .jdb-datetime-cols .jdb-slot-chips {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	#jdb-app .jdb-datetime-cols .jdb-slot-chip {
		width: 100%;
		justify-content: center;
		padding-left: 4px;
		padding-right: 4px;
	}
}

/* Above roughly a tablet the calendar stops growing altogether. Past this width
   the squares gain nothing by being larger and the whole step just gets taller. */
@media (min-width: 1180px) {
	#jdb-app .jdb-datetime-cols {
		grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	}
}

/* The prompt that stands in for the times before a date is chosen. Quiet, and
   vertically centred against the calendar so the column does not read as empty. */
#jdb-app .jdb-slots-empty {
	margin: 0;
	padding: 18px 16px;
	border: 1px dashed var(--jdb-border);
	border-radius: var(--jdb-radius-card);
	text-align: center;
}

/* ----- Calendar (critical) ----- */

#jdb-app .jdb-calendar-wrap {
	background: var(--jdb-cream);
	border: 1px solid var(--jdb-border);
	border-radius: var(--jdb-radius-card);
	box-shadow: var(--jdb-shadow-card);
	padding: 14px;
}

#jdb-app .jdb-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}
#jdb-app .jdb-cal-month {
	font-family: var(--jdb-font-head);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--jdb-deep-pine);
}

#jdb-app .jdb-cal-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--jdb-border);
	background: var(--jdb-cream);
	color: var(--jdb-deep-pine);
	font-size: 1.1rem;
	cursor: pointer;
	transition: background 140ms ease;
}
#jdb-app .jdb-cal-nav:hover:not(:disabled) { background: var(--jdb-amber); }
#jdb-app .jdb-cal-nav:focus-visible { outline: none; box-shadow: var(--jdb-focus); }
#jdb-app .jdb-cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }

#jdb-app .jdb-cal-grid-host { display: block; }

/* Weekday header row. */
#jdb-app .jdb-cal-dow {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 4px;
}
#jdb-app .jdb-cal-dow-cell {
	text-align: center;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--jdb-forest-grey);
	padding: 4px 0;
}

/* Day grid. */
#jdb-app .jdb-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

#jdb-app .jdb-cal-day,
#jdb-app .jdb-cal-cell {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: var(--jdb-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
#jdb-app .jdb-cal-day:hover:not(:disabled):not(.is-empty),
#jdb-app .jdb-cal-cell:hover:not(:disabled):not(.is-empty) { border-color: var(--jdb-pale-gold); }
#jdb-app .jdb-cal-day:focus-visible,
#jdb-app .jdb-cal-cell:focus-visible { outline: none; box-shadow: var(--jdb-focus); }

#jdb-app .jdb-cal-day.is-available,
#jdb-app .jdb-cal-cell.is-available { background: var(--jdb-amber); }

#jdb-app .jdb-cal-day.is-current,
#jdb-app .jdb-cal-cell.is-current { box-shadow: inset 0 0 0 1.5px var(--jdb-moon-sage); }

#jdb-app .jdb-cal-day.is-selected,
#jdb-app .jdb-cal-day[aria-pressed="true"],
#jdb-app .jdb-cal-cell.is-selected,
#jdb-app .jdb-cal-cell[aria-pressed="true"] {
	background: var(--jdb-deep-pine);
	color: var(--jdb-cream);
	border-color: var(--jdb-deep-pine);
}

#jdb-app .jdb-cal-day:disabled,
#jdb-app .jdb-cal-day.is-disabled,
#jdb-app .jdb-cal-cell:disabled,
#jdb-app .jdb-cal-cell.is-disabled,
#jdb-app .jdb-cal-empty,
#jdb-app .jdb-cal-day.is-empty,
#jdb-app .jdb-cal-cell.is-empty {
	color: var(--jdb-forest-grey);
	opacity: 0.4;
	cursor: not-allowed;
	background: transparent;
	pointer-events: none;
}

/* "Næste ledige tid" lead-in above the grid when the visible month opens with
   nothing selected — turns an empty-looking calendar into a signpost. */
#jdb-app .jdb-cal-nexthint {
	margin: 0 0 12px;
	padding: 9px 13px;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--jdb-deep-pine);
	background: rgba(200, 155, 94, 0.12);
	border-radius: var(--jdb-radius-btn);
}

#jdb-app .jdb-tz-note {
	margin-top: 10px;
	font-size: 0.82rem;
	color: var(--jdb-forest-grey);
}

/* Day-slot listing after picking a day. */
#jdb-app .jdb-day-slots,
#jdb-app .jdb-slot-host { margin-top: var(--jdb-gap); }
#jdb-app .jdb-day-title {
	font-family: var(--jdb-font-head);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--jdb-deep-pine);
	margin-bottom: 10px;
}

/* ----- Tabs (login / guest) ----- */

#jdb-app .jdb-tabs {
	display: flex;
	gap: 4px;
	background: var(--jdb-amber);
	border-radius: var(--jdb-radius-btn);
	padding: 4px;
	margin-bottom: var(--jdb-gap);
}
#jdb-app .jdb-tab {
	flex: 1 1 0;
	border: 0;
	background: transparent;
	border-radius: 7px;
	padding: 11px 12px;
	font: inherit;
	font-weight: 600;
	color: var(--jdb-forest-grey);
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease;
}
#jdb-app .jdb-tab:focus-visible { outline: none; box-shadow: var(--jdb-focus); }
#jdb-app .jdb-tab[aria-selected="true"],
#jdb-app .jdb-tab.is-active {
	background: var(--jdb-cream);
	color: var(--jdb-deep-pine);
	box-shadow: var(--jdb-shadow-card);
}
#jdb-app .jdb-tabpanel { margin-top: 4px; }

/* ----- Toggle (segmented pill: new/existing, yes/no) ----- */

#jdb-app .jdb-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1.5px solid var(--jdb-border);
	background: var(--jdb-cream);
	border-radius: var(--jdb-radius-chip);
	padding: 10px 20px;
	font: inherit;
	font-weight: 700;
	color: var(--jdb-ink);
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
#jdb-app .jdb-toggle:hover { border-color: var(--jdb-pale-gold); }
#jdb-app .jdb-toggle:focus-visible { outline: none; box-shadow: var(--jdb-focus); }
#jdb-app .jdb-toggle.is-active,
#jdb-app .jdb-toggle[aria-pressed="true"] {
	background: var(--jdb-deep-pine);
	border-color: var(--jdb-deep-pine);
	color: var(--jdb-cream);
}

/* New-customer fieldset. */
#jdb-app .jdb-newcust {
	border: 0;
	padding: 0;
	margin: 0 0 var(--jdb-gap);
	min-inline-size: 0;
}
#jdb-app .jdb-newcust legend {
	/* float + width:100% makes the legend render as a normal block heading rather
	 * than overlapping the fieldset's top border (which looked broken/messy). */
	display: block;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 12px;
	font-family: var(--jdb-font-head);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--jdb-deep-pine);
}
#jdb-app .jdb-newcust legend + * { clear: both; }
#jdb-app .jdb-newcust .jdb-toggle {
	display: block;
	width: 100%;
	text-align: left;
	margin-bottom: 10px;
	padding: 14px 18px;
}
#jdb-app .jdb-newcust .jdb-toggle:last-child { margin-bottom: 0; }

/* Yes/No question row. */
/* Step 4's health questions sit below the contact fields; grouping them in a
   soft inset card stops them reading as an undifferentiated "wall" of asks. */
#jdb-app .jdb-questionnaire {
	display: block;
	margin-top: var(--jdb-gap);
	padding: 14px 16px 4px;
	background: rgba(246, 241, 231, 0.55);
	border: 1px solid var(--jdb-border);
	border-radius: var(--jdb-radius-card);
}
#jdb-app .jdb-q-yesno {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--jdb-border);
}
#jdb-app .jdb-q-yesno:last-child { border-bottom: 0; }
#jdb-app .jdb-q-yesno > .jdb-label { margin-bottom: 0; flex: 1 1 200px; }
#jdb-app .jdb-q-yesno .jdb-toggle { padding: 10px 18px; min-height: 44px; }

/* ----- Forms ----- */

#jdb-app .jdb-guest-form,
#jdb-app .jdb-login-form,
#jdb-app .jdb-auth { display: block; }

#jdb-app .jdb-field { margin-bottom: 14px; }

#jdb-app .jdb-label {
	display: block;
	margin-bottom: 5px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--jdb-ink);
}
#jdb-app .jdb-req { color: #C0392B; font-weight: 700; margin-left: 2px; }

/* Required-field validation feedback on the details step. */
#jdb-app .jdb-field.is-invalid > .jdb-label,
#jdb-app .jdb-field.is-invalid .jdb-consent-label { color: #C0392B; }
#jdb-app .jdb-field.is-invalid .jdb-input,
#jdb-app .jdb-field.is-invalid .jdb-textarea {
	border-color: #C0392B;
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}
#jdb-app .jdb-q-yesno.is-invalid,
#jdb-app .jdb-consent.is-invalid {
	border-radius: 10px;
	outline: 2px solid rgba(192, 57, 43, 0.55);
	outline-offset: 5px;
}
/* THE BOX ITSELF, not only the row it sits on.
 *
 * Everything above paints the frame (the row outline) and the words (the
 * label, the sentence). On a text field that is enough, because the rule two
 * blocks up also reddens .jdb-input's own border — the control the refusal is
 * about ends up marked. On a CHECKBOX row nothing reached the control at all:
 * a checkbox is painted by the browser and takes its colour from accent-color,
 * which no invalid rule was touching, so the one thing the reader has to act on
 * was the one thing still looking normal. accent-color alone would not carry it
 * either — an UNCHECKED box shows almost none of it — so the ring is what does
 * the work and the accent covers the moment it is ticked.
 *
 * Kept at #C0392B: this app has two error reds (this one for field validation,
 * --jdb-danger #8f3222 for the notice panels) and a checkbox flag belongs to
 * the first. Do not introduce a third. */
#jdb-app .jdb-field.is-invalid .jdb-checkbox {
	accent-color: #C0392B;
	outline: 2px solid #C0392B;
	outline-offset: 2px;
	border-radius: 3px;
}
/* The refusal MOVES FOCUS to this box, and the ring above is an author outline
 * — it replaces the browser's focus ring, which would otherwise be the only
 * thing saying "you are here". So while it is both flagged and focused the box
 * wears the app's own honey focus halo (a box-shadow, a different property, so
 * the two cannot fight) on top of the red ring: invalid AND focused, read
 * separately. */
#jdb-app .jdb-field.is-invalid .jdb-checkbox:focus-visible {
	box-shadow: var(--jdb-focus);
}
/* A tint under the consent row so the flag registers before anything is read.
 * The box-shadow is the same colour with a 5px spread and no blur: it fills the
 * outline-offset gap exactly, so the ring reads as the edge of a tinted plate
 * rather than a stray border. Deliberately not padding — the row sits directly
 * above the button being pressed, and growing it would move that button under
 * the finger. Scoped to .jdb-field.jdb-consent, NEVER .jdb-consent alone: that
 * class also names the photography-consent SECTION (see the note further down),
 * and a whole page tinted red is not the message. */
#jdb-app .jdb-field.jdb-consent.is-invalid {
	background: rgba(192, 57, 43, 0.07);
	box-shadow: 0 0 0 5px rgba(192, 57, 43, 0.07);
}
#jdb-app .jdb-field-error {
	flex-basis: 100%;
	width: 100%;
	margin: 6px 0 0;
	color: #C0392B;
	font-size: 0.82rem;
	font-weight: 600;
}

#jdb-app .jdb-input,
#jdb-app .jdb-textarea {
	width: 100%;
	background: var(--jdb-cream);
	border: 1.5px solid var(--jdb-border);
	border-radius: var(--jdb-radius-btn);
	padding: 12px 13px;
	font: inherit;
	color: var(--jdb-ink);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
#jdb-app .jdb-input:hover,
#jdb-app .jdb-textarea:hover { border-color: var(--jdb-pale-gold); }
#jdb-app .jdb-input:focus,
#jdb-app .jdb-textarea:focus {
	outline: none;
	border-color: var(--jdb-honey);
	box-shadow: var(--jdb-focus);
}
#jdb-app .jdb-textarea { min-height: 96px; resize: vertical; }

#jdb-app .jdb-hint {
	color: var(--jdb-forest-grey);
	font-size: 0.82rem;
	margin-top: 4px;
}

/* Consent / checkbox rows. */
#jdb-app .jdb-consent {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	cursor: pointer;
}
#jdb-app .jdb-checkbox {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--jdb-deep-pine);
	flex: 0 0 auto;
	cursor: pointer;
}
/* The label shrinks (flex-basis 0 + min-width 0) so it always sits BESIDE the
 * checkbox on the first flex line; only the .jdb-field-error (flex-basis 100%)
 * wraps onto its own full-width line below. */
#jdb-app .jdb-consent-label {
	font-size: 0.95rem;
	flex: 1 1 0;
	min-width: 0;
	margin-bottom: 0;
}

/* Discount / access code field with live validation feedback. */
#jdb-app .jdb-code {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
#jdb-app .jdb-code-input { flex: 1 1 160px; }
#jdb-app .jdb-code-effect {
	flex-basis: 100%;
	margin-top: 8px;
	font-size: 0.88rem;
	padding: 8px 12px;
	border-radius: 10px;
}
#jdb-app .jdb-code-valid {
	background: rgba(169, 187, 169, 0.28);
	color: var(--jdb-deep-pine);
}
#jdb-app .jdb-code-invalid {
	background: rgba(179, 69, 47, 0.12);
	color: var(--jdb-danger);
}
/* A TINT WITH NO PADDING IS NOT A NOTICE, it is coloured text touching its own
   edges. These two classes carry only a background and a colour because at the
   discount-code field they are always paired with .jdb-code-effect, which is
   where the padding and the corners live. The sign-in screen uses
   .jdb-code-valid on its own for "we have sent a code to <address>", and
   measured there it was a tinted block with padding 0 on all four sides — the
   single biggest reason that screen read as crammed.
   Scoped with :not() so the paired use is not padded twice. */
#jdb-app .jdb-code-valid:not(.jdb-code-effect),
#jdb-app .jdb-code-invalid:not(.jdb-code-effect) {
	padding: 11px 14px;
	border-radius: 10px;
	margin: 2px 0 16px;
	font-size: 0.9rem;
	line-height: 1.5;
}
#jdb-app .jdb-code-checking { color: var(--jdb-forest-grey); }
#jdb-app .jdb-code-checking::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 6px;
	border: 2px solid rgba(31, 51, 43, 0.25);
	border-top-color: var(--jdb-deep-pine);
	border-radius: 50%;
	vertical-align: -2px;
	animation: jdb-spin 0.7s linear infinite;
}

#jdb-app .jdb-login-msg,
#jdb-app .jdb-details-msg,
#jdb-app .jdb-confirm-msg {
	font-size: 0.9rem;
	color: var(--jdb-forest-grey);
	margin-top: 8px;
}

/* ----- Summary card ----- */

#jdb-app .jdb-summary-card {
	background: var(--jdb-deep-pine);
	color: var(--jdb-cream);
	border-radius: var(--jdb-radius-card);
	padding: 18px;
}
#jdb-app .jdb-summary-card h2,
#jdb-app .jdb-summary-card h3 { color: var(--jdb-cream); }

#jdb-app .jdb-summary-list {
	display: grid;
	grid-template-columns: 1fr auto;
	/* NO GAP, DELIBERATELY — the gutter is padding on the label instead.
	   Each row's separator is a border-top on both cells, and a border spans the
	   border box: with a real column gap the two halves would stop 12px short of
	   each other and every hairline would have a hole in its middle. */
	gap: 0;
	margin: 0;
}
#jdb-app .jdb-sum-key {
	color: var(--jdb-moon-sage);
	font-size: 0.9rem;
	margin: 0;
	padding: 9px 12px 9px 0;
}
#jdb-app .jdb-sum-val {
	text-align: right;
	font-weight: 700;
	margin: 0;
	padding: 9px 0;
}
/* ONE HAIRLINE PER ROW.
   Held apart by a 6px gap and nothing else, the rows read as a block of text
   the moment the labels wrap — which on a phone they do — and a package takes
   the list from four rows to eight. The reader was working out by meaning which
   value belonged to which label, on the screen where they are about to be
   charged.
   Faint on purpose: 0.12 against cream-on-pine is enough to separate and not
   enough to become a grid. Not on the first row — there is nothing above it to
   be separated from — and not on the total, which keeps its own stronger line
   at 0.18. The total is excluded BY CLASS rather than left to the cascade: this
   selector is (1,3,0) against its (1,1,0) and would otherwise overwrite it. */
#jdb-app .jdb-summary-list .jdb-sum-key:not(:first-of-type):not(.jdb-sum-total-key),
#jdb-app .jdb-summary-list .jdb-sum-val:not(:first-of-type):not(.jdb-sum-total) {
	border-top: 1px solid rgba(246, 241, 231, 0.12);
}
#jdb-app .jdb-sum-discount { color: var(--jdb-pale-gold); }
#jdb-app .jdb-sum-total-key,
#jdb-app .jdb-sum-total {
	color: var(--jdb-pale-gold);
	font-size: 1.15rem;
	padding-top: 10px;
	margin-top: 4px;
	border-top: 1px solid rgba(246, 241, 231, 0.18);
}
#jdb-app .jdb-sum-total { font-weight: 800; }
#jdb-app .jdb-sum-edit {
	background: none;
	border: 0;
	color: var(--jdb-pale-gold);
	font: inherit;
	font-size: 0.82rem;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
	/* TAKEN OUT OF THE VALUE'S LINE BOX.
	   This button is appended inside the same right-aligned <dd> as the value
	   and after it in source order, so it claimed the dd's right content edge
	   and shoved the value 36.94px short of it (24.94px button + 12px margin) —
	   while Pris and I alt, which carry no button, sat flush. That is the whole
	   misalignment: the dd right edges were always identical, only the text
	   inside them differed.
	   Floated rather than reordered in the DOM so the reading order stays
	   value-then-Edit for a screen reader. A fixed-width gutter was rejected:
	   Danish "Ret" and English "Edit" are different widths, so any magic number
	   breaks one language. */
	float: left;
	margin: 0 12px 0 0;
}

/* ===== THE TWO HALVES OF A SUMMARY THAT HOLDS A PACKAGE ===================
   Only rendered when a klippekort is being bought. Both blocks are plain
   heading-plus-list; the difference between "your appointment" and "your
   package" is carried by the heading, not by colour, so a screen that is
   already asking for money does not turn into competing panels.
   The total sits outside both, because it belongs to neither. */
#jdb-app .jdb-sum-block + .jdb-sum-block { margin-top: 18px; }
#jdb-app .jdb-sum-block-title {
	margin: 0 0 2px;
	color: var(--jdb-moon-sage);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
#jdb-app .jdb-sum-totals { margin-top: 14px; }

/* ===== THE GIFT CARD ON THE CONFIRMATION SCREEN ===========================
   The markup inside .jdb-giftcard is the e-mail's card, table-based and fully
   inline-styled, so there is almost nothing to do here: give it room, let it
   shrink on a phone, and centre it. Deliberately no colours or type of our own
   — the card must look the same on screen, in the e-mail and on paper, and the
   way to guarantee that is to have exactly one place where it is described. */
#jdb-app .jdb-giftcard {
	margin: 18px 0 14px;
	overflow-x: auto;
}
#jdb-app .jdb-giftcard table { max-width: 100%; }
#jdb-app .jdb-giftcard img { max-width: 100%; height: auto; }
#jdb-app .jdb-giftcard-actions {
	display: flex;
	justify-content: center;
	margin-bottom: 6px;
}

/* PRINTING JUST THE CARD.
   Everything goes invisible and the card comes back. NOT display:none on the
   body — display:none on an ancestor cannot be undone by a descendant, so that
   version of this trick prints a blank sheet. visibility is inherited AND
   overridable, which is the whole reason it is the one that works.
   The card is then lifted to the top-left of the page so it does not print
   halfway down a sheet of white where its old position happened to be. */
@media print {
	html.jdb-printing-card,
	html.jdb-printing-card body { background: #fff !important; }
	html.jdb-printing-card body * { visibility: hidden !important; }
	html.jdb-printing-card .jdb-giftcard,
	html.jdb-printing-card .jdb-giftcard * { visibility: visible !important; }
	html.jdb-printing-card .jdb-giftcard {
		position: absolute !important;
		left: 0;
		top: 0;
		width: 100%;
		margin: 0 !important;
		overflow: visible !important;
	}
	/* The card is one object; a page break through the middle of it would put
	   the code on one sheet and the QR on another. */
	html.jdb-printing-card .jdb-giftcard table { page-break-inside: avoid; }
}

/* THE RESEND TIMER, and the line that carries it.
   It sat hard against the code field above and the resend button below, so
   three unrelated things read as one block of small text. */
#jdb-app .jdb-si-hint:empty { display: none; }
#jdb-app .jdb-si-hint { margin: 14px 0; }

/* THE TWO WAYS OUT OF THE CODE SCREEN (owner, 2026-08-08: "the options are
   jammed together with no spacing, please tidy it up").

   They were two bare siblings on the form. Both are .jdb-link, which is an
   inline-ish control with no margins of its own, so the moment the countdown
   finished and both were links they rendered as one continuous underlined run:
   "Send a new codeUse a different email". A row with a real gap makes that
   impossible, and wrapping means a narrow phone stacks them instead of
   squeezing them.

   Generous space ABOVE, because the thing directly before this is the primary
   Sign in button and the two must not read as one block of controls: the button
   is the action, these are the escape hatches. */
#jdb-app .jdb-signin-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
	margin: 16px 0 4px;
}
/* While it counts down this is a status line, not an offer — so it takes the
   quiet hint treatment and drops the link underline it used to wear. */
#jdb-app .jdb-signin-actions .jdb-signin-wait {
	margin: 0;
	text-decoration: none;
}
/* ONE TYPE SIZE FOR THE WHOLE ROW. The links inherited the app's 1rem body
   size, which put them at the same weight as the primary button directly above
   and gave this small screen four different sizes to read (label .85, hint .82,
   notice .9, links 1rem). They are escape hatches; the hint scale is theirs. */
#jdb-app .jdb-signin-actions,
#jdb-app .jdb-signin-actions .jdb-link,
/* .jdb-hint's own 0.82rem otherwise leaves the countdown a different size from
   the link sitting beside it in the same row. */
#jdb-app .jdb-signin-actions .jdb-signin-wait {
	font-size: 0.9rem;
}
#jdb-app .jdb-signin-actions .jdb-link {
	margin: 0;
	padding: 2px 0;
}
#jdb-app .jdb-resend-wait { display: block; margin: 14px 0; }

/* ONE SHAPE FOR TWO WAYS IN. "Send me a code" and "Continue with Google" do the
   same job on the same screen; on a phone the Google button was full width and
   the other was not, which made them read as a primary action and an
   afterthought rather than as a choice. */
@media (max-width: 600px) {
	#jdb-app .jdb-login-submit,
	#jdb-app .jdb-btn-google { width: 100%; }
}

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

#jdb-app .jdb-btn,
#jdb-app .jdb-login-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	border: 1.5px solid transparent;
	border-radius: var(--jdb-radius-btn);
	padding: 12px 22px;
	font: inherit;
	font-weight: 700;
	line-height: 1.1;
	cursor: pointer;
	text-decoration: none;
	transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}
#jdb-app .jdb-btn:focus-visible,
#jdb-app .jdb-login-submit:focus-visible { outline: none; box-shadow: var(--jdb-focus); }

/* The single honey action per screen. */
#jdb-app .jdb-btn-primary,
#jdb-app .jdb-login-submit {
	background: var(--jdb-honey);
	color: var(--jdb-deep-pine);
	box-shadow: 0 8px 20px rgba(200, 155, 94, 0.35);
}
#jdb-app .jdb-btn-primary:hover,
#jdb-app .jdb-login-submit:hover {
	background: var(--jdb-pale-gold);
	transform: translateY(-1px);
}

#jdb-app .jdb-btn-secondary {
	background: transparent;
	color: var(--jdb-deep-pine);
	border-color: var(--jdb-deep-pine);
}
#jdb-app .jdb-btn-secondary:hover { background: var(--jdb-amber); }

#jdb-app .jdb-btn-danger {
	background: transparent;
	color: var(--jdb-danger);
	border-color: rgba(143, 50, 34, 0.5);
}
#jdb-app .jdb-btn-danger:hover { background: rgba(143, 50, 34, 0.08); }

#jdb-app .jdb-btn-google {
	background: var(--jdb-cream);
	color: var(--jdb-ink);
	border-color: var(--jdb-border);
	width: 100%;
}
#jdb-app .jdb-btn-google:hover { border-color: var(--jdb-pale-gold); }

#jdb-app .jdb-btn:disabled,
#jdb-app .jdb-btn.is-disabled,
#jdb-app .jdb-btn[aria-disabled="true"],
#jdb-app .jdb-login-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Actions row: Back left / primary right. Directional arrows make the roles
 * obvious at a glance (◀ back, forward ▶). */
#jdb-app .jdb-nav > .jdb-btn-secondary::before { content: '← '; }
#jdb-app .jdb-nav > .jdb-btn-primary::after { content: ' →'; }
#jdb-app .jdb-nav,
#jdb-app .jdb-booking-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
}
/* When a step has no nav action (e.g. Treatment/Duration auto-advance and the
   greyed-out Next is now hidden), collapse the empty actions row so it leaves
   no stray gap under the step. */
#jdb-app .jdb-nav:empty {
	display: none;
	margin: 0;
}
#jdb-app .jdb-back-to-book {
	font-weight: 700;
	font-size: 0.9rem;
}

/* ----- Feedback / alerts / states ----- */

#jdb-app .jdb-error {
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 0.92rem;
	margin: var(--jdb-gap) 0;
	background: rgba(179, 69, 47, 0.10);
	color: var(--jdb-danger);
	border: 1px solid var(--jdb-danger-line);
}

#jdb-app .jdb-empty {
	text-align: center;
	color: var(--jdb-forest-grey);
	padding: 28px 16px;
}

#jdb-app .jdb-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 28px 16px;
	color: var(--jdb-forest-grey);
	font-size: 0.9rem;
}
#jdb-app .jdb-loading::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2.5px solid rgba(31, 51, 43, 0.25);
	border-top-color: var(--jdb-deep-pine);
	border-radius: 50%;
	animation: jdb-spin 0.7s linear infinite;
}
@keyframes jdb-spin { to { transform: rotate(360deg); } }

/* ----- My bookings ----- */

#jdb-app .jdb-mybookings { display: block; }

#jdb-app .jdb-booking-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: var(--jdb-gap);
}

#jdb-app .jdb-booking-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	background: var(--jdb-cream);
	border: 1px solid var(--jdb-border);
	border-radius: var(--jdb-radius-card);
	box-shadow: var(--jdb-shadow-card);
	padding: 16px;
}
#jdb-app .jdb-booking-row.is-cancelled {
	opacity: 0.7;
	background: rgba(143, 50, 34, 0.05);
}

#jdb-app .jdb-booking-info { flex: 1 1 220px; min-width: 0; }
/* Treatment name and date are two <span>s with nothing between them, so as
   inline boxes they rendered as "ArvævsmassageWednesday 30 September" — no
   space, and a jarring sans-to-serif jump mid-word. The two rules below were
   already written as a small grey label and a large serif date, i.e. a stacked
   pair; they were simply never told to stack. */
#jdb-app .jdb-booking-when {
	display: block;
	font-family: var(--jdb-font-head);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--jdb-deep-pine);
	line-height: 1.3;
}
#jdb-app .jdb-booking-row.is-cancelled .jdb-booking-when {
	text-decoration: line-through;
	color: var(--jdb-forest-grey);
}
#jdb-app .jdb-booking-treatment {
	display: block;
	margin-bottom: 3px;
	color: var(--jdb-forest-grey);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
/* No empty line where a booking has lost its treatment name. */
#jdb-app .jdb-booking-treatment:empty { display: none; }
#jdb-app .jdb-booking-actions {
	margin-top: 0;
	justify-content: flex-end;
	flex: 0 0 auto;
}
#jdb-app .jdb-row-msg {
	flex-basis: 100%;
	font-size: 0.86rem;
	color: var(--jdb-forest-grey);
	margin-top: 4px;
}

/* Reschedule sub-panel. */
#jdb-app .jdb-reschedule {
	flex-basis: 100%;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--jdb-border);
}
#jdb-app .jdb-reschedule-msg {
	font-size: 0.86rem;
	color: var(--jdb-forest-grey);
	margin-top: 8px;
}

/* ----- Success / confirmation ----- */

#jdb-app .jdb-success {
	text-align: center;
	padding: 8px 0 4px;
	/* Even, consistent spacing between every section (summary, calendar button,
	 * account panel, manage link) instead of buttons butting up against cards. */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 18px;
}
#jdb-app .jdb-success > * { margin: 0; }
#jdb-app .jdb-success .jdb-step-title { margin-bottom: 2px; }
#jdb-app .jdb-success-msg { color: var(--jdb-forest-grey); }
#jdb-app .jdb-success .jdb-summary-card { text-align: left; }

/* Secondary actions (add-to-calendar, manage link) centred at a comfortable width. */
#jdb-app .jdb-ics {
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	font-size: 0.92rem;
	min-width: 220px;
}
#jdb-app .jdb-success > p { margin: 0; }
#jdb-app .jdb-success > p > .jdb-link,
#jdb-app .jdb-success > .jdb-link { display: inline-block; }

#jdb-app .jdb-contact-fallback {
	font-size: 0.88rem;
	color: var(--jdb-forest-grey);
}

/* Account-creation nudge panel — a single tidy column of consistent, full-width controls.
 *
 * Styled to read as an ASIDE, not as the next step. The old panel used the same
 * solid amber as the call-to-action surfaces on this page, which made an optional
 * offer look like the thing to do next. It is now a quiet tinted card with a
 * dashed edge — visibly a different kind of thing from the appointment details
 * above it. */
#jdb-app .jdb-account-nudge {
	background: rgba(200, 155, 94, 0.12);
	border: 1px dashed rgba(200, 155, 94, 0.55);
	border-radius: var(--jdb-radius-card);
	padding: 20px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
#jdb-app .jdb-account-nudge h4 { margin: 0; font-size: 1.2rem; }
#jdb-app .jdb-account-nudge .jdb-hint { margin: 0; }

/* The heading carries an "optional" pill on the same line. */
#jdb-app .jdb-nudge-title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}
#jdb-app .jdb-nudge-optional {
	font-family: var(--jdb-font-body, inherit);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jdb-deep-pine);
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(200, 155, 94, 0.6);
	border-radius: var(--jdb-radius-chip);
	padding: 2px 9px;
	white-space: nowrap;
}

/* Two plain benefits. Ticks rather than bullets: this is a list of what you
   GET, and a bullet reads as a list of things to do. */
#jdb-app .jdb-nudge-benefits {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.92rem;
	color: var(--jdb-forest-grey);
}
#jdb-app .jdb-nudge-benefits li {
	position: relative;
	padding-left: 22px;
}
#jdb-app .jdb-nudge-benefits li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--jdb-deep-pine);
	font-weight: 700;
}

#jdb-app .jdb-nudge-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}
#jdb-app .jdb-nudge-form .jdb-input,
#jdb-app .jdb-nudge-form .jdb-btn,
#jdb-app .jdb-account-nudge > .jdb-btn-google { width: 100%; }
#jdb-app .jdb-nudge-msg {
	font-size: 0.86rem;
	color: var(--jdb-deep-pine);
}

/* The last word on the panel: this can be ignored, and here is why that is safe. */
#jdb-app .jdb-nudge-skip {
	margin: 0;
	font-size: 0.85rem;
	color: var(--jdb-forest-grey);
}

/* ----- Responsive: widen grids on larger viewports ----- */

@media (min-width: 560px) {
	#jdb-app .jdb-cards { grid-template-columns: repeat(2, 1fr); }
	#jdb-app .jdb-progress-step { font-size: 0.85rem; }

	/* ----- The step heading, where the rail already names the step -----
	 *
	 * From 560px up the rail shows its labels ("1 Behandling  2 Varighed  3
	 * Tid …") with the current one highlighted, and the heading immediately
	 * below repeated the same words — "Vælg gavekort" under a rail already
	 * reading "1 Vælg gavekort". Pure duplication, and it pushed the actual
	 * choices further down.
	 *
	 * HIDDEN VISUALLY, NOT REMOVED. It stays in the DOM, in the accessibility
	 * tree and focusable: setMain() moves focus to [data-focus-target] on every
	 * step change so a screen-reader user lands on a named heading, and the
	 * clip technique (unlike display:none or visibility:hidden) keeps all of
	 * that working. It is also still the document's step heading for anyone
	 * navigating by headings.
	 *
	 * THE SELECTOR IS DELIBERATELY NARROW: only a step title whose section
	 * DIRECTLY FOLLOWS a rail. `.jdb-step-title` is used on a dozen screens
	 * that have no rail at all — the confirmation, login, my bookings,
	 * reschedule, and the gift-card success step (the voucher app appends the
	 * rail only for steps 1-3, then reuses the same wrapper) — and hiding the
	 * heading there would leave those screens with no title.
	 *
	 * BELOW 560px IT STAYS VISIBLE, and that is not an oversight: the mobile
	 * rule further down sets .jdb-progress-label to display:none so the rail is
	 * bare numbered circles. On a phone this heading is the ONLY thing naming
	 * the current step. */
	#jdb-app .jdb-progress + .jdb-step > .jdb-step-title {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

@media (min-width: 760px) {
	#jdb-app { padding: 30px; }
	#jdb-app .jdb-app-title { font-size: 1.7rem; }
	#jdb-app .jdb-cards { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile: full-width stacked actions and big tap targets. */
@media (max-width: 559px) {
	/* MORE ROOM AT THE FOOT THAN AT THE HEAD (owner, 2026-08-08). Measured: the
	   last control sat 18px above the card's bottom edge, and since the card now
	   runs to both screen edges on a phone that 18px is the whole margin between
	   a primary button and the end of the cream. 34px lets the flow finish. */
	#jdb-app { padding: 18px 18px 34px; }

	/* ===== THE SUMMARY STACKS =============================================
	   The list is "1fr auto": the VALUE takes what it wants and the label gets
	   the remainder. Measured at 390px with a date in it — "torsdag 1. oktober
	   kl. 10.00" claims 206px and leaves the label column 98px, so labels wrap
	   to two lines and the reader has to work out which half-line belongs to
	   which value. A package makes it worse: it doubles the rows and its values
	   ("4 behandlinger à 60 minutter") are longer still.
	   Two columns is simply the wrong shape for 375px. Label above value, both
	   left-aligned, and nothing wraps that did not want to.

	   The COLUMNS ARE KEPT and the ordinary rows are made to span both, rather
	   than collapsing the grid to one column. That is what leaves the total able
	   to stay on a single line — it is short on both sides and is the one row
	   that genuinely reads better as name-left / amount-right. Collapse the grid
	   and the total stacks with everything else and stops looking like a total. */
	#jdb-app .jdb-summary-list .jdb-sum-key,
	#jdb-app .jdb-summary-list .jdb-sum-val { grid-column: 1 / -1; }
	#jdb-app .jdb-sum-key {
		padding: 10px 0 0;
		font-size: 0.82rem;
		letter-spacing: 0.04em;
	}
	#jdb-app .jdb-sum-val {
		text-align: left;
		padding: 0 0 10px;
	}
	/* The hairline used to be on BOTH cells of a row. Stacked, that draws a line
	   between every label and its own value. It belongs above the label only —
	   that is where a new row now begins. */
	#jdb-app .jdb-summary-list .jdb-sum-val:not(:first-of-type):not(.jdb-sum-total) {
		border-top: 0;
	}
	#jdb-app .jdb-summary-list .jdb-sum-total-key { grid-column: 1; }
	#jdb-app .jdb-summary-list .jdb-sum-total {
		grid-column: 2;
		text-align: right;
		padding: 10px 0 0;
	}
	/* Back + Next sit side by side (half width each, equal height); a lone
	   login submit stays full width. */
	#jdb-app .jdb-nav { align-items: stretch; }
	#jdb-app .jdb-nav > .jdb-btn {
		flex: 1 1 0;
		min-width: 0;
		white-space: normal;
		padding-left: 10px;
		padding-right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	#jdb-app .jdb-nav > .jdb-login-submit { flex: 1 1 100%; }
	#jdb-app .jdb-booking-actions { justify-content: stretch; }
	#jdb-app .jdb-booking-actions > .jdb-btn { flex: 1 1 100%; }

	/* Progress rail: on phones show just the numbered circles in a single
	 * non-wrapping row (the step title below gives the label), so the
	 * 1·2·3·4·5 indicators never jam or wrap.
	 *
	 * JOINED UP AND BIGGER (owner, 2026-08-08). Six loose circles read as six
	 * unrelated buttons; a continuous line through them reads as one journey
	 * with a position on it. The line is drawn by each step except the first,
	 * from the left edge of the item to the left edge of its own circle, so it
	 * always meets the neighbouring circle exactly however the row is spaced —
	 * a fixed-width connector cannot, because justify-content decides the gap.
	 *
	 * 34px circles inside a 44px-tall item: the circle is what you see, the item
	 * is what you press, and 44px is the WCAG 2.5.5 target. The row is
	 * space-between, so the pressable areas meet edge to edge and there is no
	 * dead gap between two steps to mis-tap into. */
	#jdb-app .jdb-progress {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0;
	}
	#jdb-app .jdb-progress-step {
		flex: 1 1 0;
		gap: 0;
		justify-content: center;
		min-height: 44px;
	}
	#jdb-app .jdb-progress-label { display: none; }
	#jdb-app .jdb-progress-step::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 50%;
		left: -50%;
		height: 2px;
		margin-top: -1px;
		background: var(--jdb-moon-sage);
		opacity: 0.45;
		/* behind the circles, which are opaque and paint over its ends */
		z-index: 0;
	}
	/* Nothing precedes the first step, so it has no line to draw. */
	#jdb-app .jdb-progress-step:first-child::before { content: none; }
	/* The run already walked is drawn solid; the run still ahead stays faint. */
	#jdb-app .jdb-progress-step.is-done::before,
	#jdb-app .jdb-progress-step.is-current::before { opacity: 1; }
	#jdb-app .jdb-progress-go {
		position: relative;
		z-index: 1;
		justify-content: center;
		/* the whole 44px band is the target, not just the circle */
		min-height: 44px;
		padding: 0 4px;
	}
	#jdb-app .jdb-progress-num {
		width: 34px;
		height: 34px;
		font-size: 0.95rem;
	}
	#jdb-app .jdb-progress-step.is-done .jdb-progress-num::after { font-size: 1.05rem; }

	/* Questionnaire yes/no wraps cleanly with the buttons under the question. */
	#jdb-app .jdb-q-yesno { justify-content: flex-start; }
	#jdb-app .jdb-q-yesno > .jdb-label { flex: 1 1 100%; }
}

/* ----- Reduced motion ----- */

@media (prefers-reduced-motion: reduce) {
	#jdb-app *,
	#jdb-app *::before,
	#jdb-app *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	#jdb-app .jdb-treatment-card:hover,
	#jdb-app .jdb-btn-primary:hover,
	#jdb-app .jdb-login-submit:hover { transform: none; }
}

/* =====================================================================
 * Gift voucher widget ([jd_gift_voucher]) — reuses the booking app shell.
 * ===================================================================== */
/* ----- The six gift-card options -----
 *
 * THE HOVER, FOCUS RING, POINTER CURSOR AND REDUCED-MOTION OVERRIDE ARE NOT HERE.
 * The option button carries .jdb-treatment-card as well, so it inherits all of
 * them from the booking app's massage card further up this file. That is the
 * point: "a selectable option lifts, gains the raised shadow and turns pale gold"
 * is defined once, and the two pages cannot drift apart. Everything below is only
 * what a gift card has that a massage does not.
 */
#jdb-app .jdb-voucher-opts { margin-bottom: 8px; }

#jdb-app .jdb-voucher-opt {
	text-align: left;
	justify-content: flex-start;
	gap: 12px;
	padding: 18px 18px 16px;
	/* .jdb-cards is `repeat(N, 1fr)`, and 1fr is `minmax(auto, 1fr)` — the auto
	 * minimum is the track's largest min-content contribution. Without this, the
	 * nowrap "Mest populære" pill sets a ~275px min-content floor on whichever
	 * track holds the guld card, and that column comes out ~71px wider than the
	 * others, dragging the card below it out of line with its neighbours.
	 * NOTHING OVERFLOWS WHEN THAT HAPPENS, so a scrollWidth check cannot catch
	 * it — measure the six card widths instead. Do not remove. */
	min-width: 0;
}

/* Selected: the same honey border the treatment cards use, plus a soft honey wash.
 * The wash replaces the medallion's honey fill, which used to be the cue that did
 * not depend on picking a 1.5px border colour out of a row of six. Border, wash,
 * raised shadow and the honey "Vælg" in the foot all move together. */
#jdb-app .jdb-voucher-opt.is-selected,
#jdb-app .jdb-voucher-opt[aria-checked="true"] {
	border-color: var(--jdb-honey);
	background: rgba(200, 155, 94, 0.10);
	box-shadow: var(--jdb-shadow-raise);
}

/* "Mest populære". An inline pill on the action line, NOT an absolutely
 * positioned corner ribbon and no longer a row of its own.
 *
 * The ribbon was rejected because it needs reserved top padding on every card
 * in the row or the flagged one sits lower than its neighbours. Its
 * replacement — a full-width row above the body — had the same fault in a
 * quieter form: it pushed the flagged card's PRICE 50px down, and the prices
 * are exactly what the eye scans across the row.
 *
 * On the foot line it costs no vertical space whatsoever, so all five cards
 * align, and it sits beside the thing it is recommending you press. It is
 * deliberately a size smaller than the CTA: it is a note about the option,
 * not a second call to action competing with VÆLG. */
#jdb-app .jdb-voucher-flag {
	display: inline-block;
	padding: 4px 9px;
	border-radius: var(--jdb-radius-chip);
	background: var(--jdb-honey);
	color: var(--jdb-deep-pine);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.25;
}

/* The body grows so the price foot sits on one line across a whole row. */
#jdb-app .jdb-voucher-opt .jdb-card-body { flex: 1 1 auto; }
#jdb-app .jdb-voucher-opt .jdb-card-title { margin: 0 0 6px; }

/* center, not baseline: the row now carries a pill as well as text, and a pill
 * aligned on a text baseline sits visibly low. */
#jdb-app .jdb-voucher-opt-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding-top: 12px;
	border-top: 1px solid var(--jdb-border);
}
#jdb-app .jdb-voucher-opt-price {
	font-family: var(--jdb-font-head);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--jdb-honey);
	white-space: nowrap;
	font-variant-numeric: lining-nums;
}
#jdb-app .jdb-voucher-opt-cta {
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jdb-forest-grey);
	white-space: nowrap;
	transition: color 160ms ease;
}
#jdb-app .jdb-voucher-opt:hover .jdb-voucher-opt-cta,
#jdb-app .jdb-voucher-opt:focus-visible .jdb-voucher-opt-cta { color: var(--jdb-deep-pine); }
#jdb-app .jdb-voucher-opt.is-selected .jdb-voucher-opt-cta,
#jdb-app .jdb-voucher-opt[aria-checked="true"] .jdb-voucher-opt-cta { color: var(--jdb-honey); }

/* ----- "How the gift card works", under the six options ----- */

#jdb-app .jdb-voucher-how {
	margin: 18px 0 4px;
	padding: 18px 20px;
	border-radius: var(--jdb-radius-card);
	background: var(--jdb-amber);
	border: 1px solid rgba(200, 155, 94, 0.35);
}
#jdb-app .jdb-voucher-how-title {
	font-size: 1.15rem;
	margin: 0 0 8px;
}
#jdb-app .jdb-voucher-how-lead {
	margin: 0 0 10px;
	font-size: 0.95rem;
	color: var(--jdb-ink);
}
#jdb-app .jdb-voucher-how-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
#jdb-app .jdb-voucher-how-list li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 22px;
	font-size: 0.94rem;
	color: var(--jdb-ink);
}
#jdb-app .jdb-voucher-how-list li:last-child { margin-bottom: 0; }
/* The same ✦ the gift card itself uses as a divider. */
#jdb-app .jdb-voucher-how-list li::before {
	content: "\2726";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--jdb-honey);
	font-size: 0.78rem;
	line-height: 1.9;
}
#jdb-app .jdb-voucher-how-foot { margin: 12px 0 0; }
#jdb-app .jdb-voucher-custom { margin: 6px 0 0; }

/* Embedded Stripe Checkout.
 *
 * Stripe renders its payment form into an iframe inside .jdb-checkout-mount and
 * sizes that iframe itself, so this block must stay boring: no fixed height, and
 * above all NO transform / filter / contain on it or any ancestor — those would
 * break the iframe's own positioning maths and clip anything Stripe overlays.
 */
#jdb-app .jdb-pay-note { margin: 0 0 14px; }
#jdb-app .jdb-checkout-mount { margin: 4px 0 12px; min-height: 3rem; }
#jdb-app .jdb-checkout-mount iframe { display: block; width: 100%; }
#jdb-app .jdb-checkout-loading { margin: 0; text-align: center; }
#jdb-app .jdb-pay-secure { margin: 0 0 6px; }
#jdb-app .jdb-voucher-amount-line {
	margin: 4px 0 14px;
	font-size: 1.05rem;
	color: var(--jdb-ink);
}
#jdb-app .jdb-voucher-amount-line strong { color: var(--jdb-deep-pine); }

/* Cancelled-payment banner + "cannot take payment right now" notice. */
#jdb-app .jdb-notice {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: var(--jdb-radius-btn);
	background: #FCF4E3;
	border: 1px solid var(--jdb-pale-gold);
	color: var(--jdb-ink);
}
#jdb-app .jdb-notice p { margin: 0; }

/* The decorative voucher / preview card. */
#jdb-app .jdb-voucher-card {
	margin: 6px 0 20px;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(135deg, #C89B5E, #E7CE9A 45%, #C89B5E);
	padding: 3px;
	box-shadow: var(--jdb-shadow-card);
}
#jdb-app .jdb-voucher-card-head {
	background: var(--jdb-deep-pine);
	border-radius: 14px 14px 0 0;
	padding: 14px 20px;
	text-align: center;
}
#jdb-app .jdb-voucher-card-head {
	border-bottom: 2px solid var(--jdb-honey);
}
#jdb-app .jdb-voucher-kicker {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--jdb-moon-sage);
}
#jdb-app .jdb-voucher-clinic {
	display: block;
	font-family: var(--jdb-font-head);
	font-size: 1.5rem;
	color: var(--jdb-pale-gold);
	letter-spacing: 0.02em;
	margin-top: 1px;
}
#jdb-app .jdb-voucher-tagline {
	display: block;
	font-size: 0.72rem;
	color: #8FA491;
	margin-top: 2px;
}
#jdb-app .jdb-voucher-card-body {
	background: var(--jdb-cream);
	padding: 22px 20px 18px;
	text-align: center;
}
#jdb-app .jdb-voucher-value {
	font-family: var(--jdb-font-head);
	font-size: 2.6rem;
	line-height: 1.05;
	font-weight: 700;
	color: var(--jdb-deep-pine);
}
#jdb-app .jdb-voucher-value-sub {
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8A7A54;
	margin-top: 2px;
}
#jdb-app .jdb-voucher-divider {
	color: var(--jdb-honey);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	margin: 12px 0;
}
#jdb-app .jdb-voucher-person {
	margin: 2px 0 0;
	color: var(--jdb-ink);
	font-size: 0.98rem;
}
#jdb-app .jdb-voucher-person span {
	color: var(--jdb-forest-grey);
}
#jdb-app .jdb-voucher-msg {
	margin: 8px auto 0;
	max-width: 22rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--jdb-ink);
}
/* --- writing straight onto the card ------------------------------------
   The inputs are drawn as ruled lines rather than boxes, so the card still
   reads as a card while it is being filled in. They inherit font and colour
   from the card, which is what makes the typed text look printed rather
   than typed into a form sitting on top of a picture. */
#jdb-app .jdb-voucher-person-edit {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 6px;
}
#jdb-app .jdb-voucher-inline {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	color: var(--jdb-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(90, 108, 93, 0.38);
	border-radius: 0;
	padding: 1px 2px;
	box-shadow: none;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}
#jdb-app .jdb-voucher-inline::placeholder {
	color: rgba(90, 108, 93, 0.62);
	font-style: italic;
}
#jdb-app .jdb-voucher-inline:focus {
	outline: none;
	border-bottom-color: var(--jdb-honey);
	background: rgba(200, 155, 94, 0.08);
}
#jdb-app .jdb-voucher-msg-edit {
	max-width: none;
	width: 100%;
}
#jdb-app .jdb-voucher-inline-msg {
	width: 100%;
	font-style: italic;
	text-align: center;
	resize: vertical;
	line-height: 1.5;
}
/* The invalid state has to survive on a cream card, where the usual red-on-
   white treatment disappears: hence the tint as well as the border. */
#jdb-app .jdb-invalid,
#jdb-app .jdb-voucher-inline.jdb-invalid {
	border-color: var(--jdb-error, #8F3222) !important;
	background: rgba(143, 50, 34, 0.07);
}
#jdb-app .jdb-voucher-validity {
	margin: 12px 0 0;
	font-size: 0.76rem;
	color: var(--jdb-forest-grey);
}
#jdb-app .jdb-voucher-card-foot {
	background: var(--jdb-ivory);
	border-top: 1px solid #EADFC8;
	border-radius: 0 0 14px 14px;
	padding: 12px 20px;
	text-align: center;
	font-size: 0.74rem;
	line-height: 1.6;
	color: var(--jdb-forest-grey);
}
#jdb-app .jdb-voucher-card-foot strong {
	display: block;
	color: var(--jdb-ink);
	font-size: 0.82rem;
}
#jdb-app .jdb-voucher-card-foot .jdb-voucher-foot-line { display: block; }
#jdb-app .jdb-voucher-card-foot .jdb-voucher-foot-book {
	display: block;
	color: #8A7A54;
	margin-top: 2px;
}
/* ----- Privacy & terms modal ----- */
body.jdb-modal-open { overflow: hidden; }
.jdb-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(22, 36, 30, 0.6);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}
.jdb-modal {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 760px;
	max-height: min(86vh, 900px);
	background: var(--jdb-cream, #FDFAF3);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}
.jdb-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	background: var(--jdb-deep-pine, #1F332B);
}
.jdb-modal-title {
	margin: 0;
	font-family: var(--jdb-font-head, Georgia, serif);
	font-size: 1.25rem;
	color: var(--jdb-pale-gold, #D9B87E);
}
.jdb-modal-x {
	background: none;
	border: 0;
	color: #F6F1E7;
	font-size: 1.7rem;
	line-height: 1;
	padding: 2px 8px;
	cursor: pointer;
	border-radius: 8px;
}
.jdb-modal-x:hover { background: rgba(255, 255, 255, 0.12); }
.jdb-modal-x:focus-visible { outline: 2px solid var(--jdb-pale-gold, #D9B87E); }
.jdb-modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 18px 22px;
}
.jdb-modal-foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 12px 20px;
	border-top: 1px solid #E5DCC8;
	background: var(--jdb-ivory, #F6F1E7);
}
.jdb-modal-foot .jdb-btn {
	font: inherit;
	font-weight: 700;
	padding: 10px 20px;
	border-radius: 10px;
	cursor: pointer;
	border: 1.5px solid var(--jdb-deep-pine, #1F332B);
}
.jdb-modal-foot .jdb-btn-primary { background: var(--jdb-honey, #C89B5E); border-color: var(--jdb-honey, #C89B5E); color: #1F332B; }
.jdb-modal-foot .jdb-btn-secondary { background: transparent; color: var(--jdb-deep-pine, #1F332B); }
@media (max-width: 600px) {
	.jdb-modal-backdrop { padding: 0; }
	.jdb-modal { max-width: none; max-height: none; height: 100%; border-radius: 0; }
	.jdb-modal-foot { flex-direction: column-reverse; }
	.jdb-modal-foot .jdb-btn { width: 100%; }
}

/* Legal document typography inside the modal (the page carries its own copy). */
.jdb-legal-modal { font-size: 0.92rem; line-height: 1.6; color: var(--jdb-ink, #243830); }
.jdb-legal-modal h1 { font-family: var(--jdb-font-head, Georgia, serif); font-size: 1.5rem; color: var(--jdb-deep-pine, #1F332B); margin: 0 0 2px; }
.jdb-legal-modal .jdb-legal-updated { color: var(--jdb-forest-grey, #5A6C5D); font-size: 0.8rem; margin: 0 0 16px; }
.jdb-legal-modal h2 { font-family: var(--jdb-font-head, Georgia, serif); font-size: 1.25rem; color: var(--jdb-deep-pine, #1F332B); margin: 24px 0 8px; padding-top: 10px; border-top: 2px solid var(--jdb-honey, #C89B5E); }
.jdb-legal-modal h3 { font-size: 0.98rem; color: var(--jdb-deep-pine, #1F332B); margin: 16px 0 4px; }
.jdb-legal-modal p { margin: 0 0 10px; }
.jdb-legal-modal ul { margin: 0 0 12px; padding-left: 20px; }
.jdb-legal-modal li { margin: 0 0 5px; }
.jdb-legal-modal a { color: #8A6A34; }
.jdb-legal-modal table { border-collapse: collapse; width: 100%; margin: 0 0 12px; font-size: 0.85rem; }
.jdb-legal-modal td, .jdb-legal-modal th { border: 1px solid #E5DCC8; padding: 6px 8px; text-align: left; vertical-align: top; }
.jdb-legal-modal th { background: var(--jdb-ivory, #F6F1E7); }

#jdb-app .jdb-voucher-preview-wrap { margin: 6px 0 20px; }
#jdb-app .jdb-voucher-preview-wrap .jdb-voucher-card { margin: 0; }
#jdb-app .jdb-voucher-sample-note {
	margin: 8px 2px 0;
	text-align: center;
	font-size: 0.76rem;
	color: var(--jdb-forest-grey);
}

/* Success. */
#jdb-app .jdb-voucher-success { text-align: center; padding: 8px 0; }
#jdb-app .jdb-success-check {
	width: 56px;
	height: 56px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: rgba(169, 187, 169, 0.28);
	color: var(--jdb-deep-pine);
	font-size: 1.8rem;
	line-height: 56px;
}

/* The same medallion, in the two states that are NOT success.
 *
 * They keep the shape so the screen still reads as a considered outcome rather
 * than an error page — but they must not be sage-green, because that is the
 * colour this app uses for "done", and the whole point of these states is that
 * nothing is done yet. Waiting is quiet moon-sage-on-grey; a failure is the
 * terracotta already used elsewhere for something needing attention. Neither
 * is red: no money was lost, and alarming a buyer whose payment simply did not
 * complete is the wrong register for this clinic. */
#jdb-app .jdb-success-check--wait {
	background: rgba(169, 187, 169, 0.16);
	color: var(--jdb-forest-grey);
	letter-spacing: 0.06em;
}
#jdb-app .jdb-success-check--bad {
	background: rgba(173, 95, 65, 0.14);
	color: #9E5439;
	font-weight: 700;
}


/* ==== Password recovery: the link-shaped buttons ==========================
 * These are <button>s, not <a>s, because they change the view rather than
 * navigating — but they must READ as links and, on a phone, must not sit on
 * the same line as the primary button. A thumb aiming for "forgot your
 * password" that lands on "Log in" submits an empty form; aiming for the edge
 * of "Log in" and hitting the link throws away the password just typed.
 * Each one therefore gets its own line and a full-size tap target.
 * ========================================================================= */
#jdb-app .jdb-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--jdb-ink, #243830);
	text-decoration: underline;
	cursor: pointer;
}
#jdb-app .jdb-forgot-link,
#jdb-app .jdb-reveal,
#jdb-app .jdb-login-form > .jdb-back-to-book {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 11px 0;
	min-height: 44px;
	text-align: left;
	font-size: 0.9rem;
}
/* The header sign-in entry point sits beside the title, so it keeps its
   inline shape — it is not competing with a submit button. */
#jdb-app .jdb-login-link { margin-left: auto; }

/* The one control that recovers a locked-out account must never be the one
   control with no visible focus. Themes commonly reset the UA outline. */
#jdb-app .jdb-link:focus-visible {
	outline: none;
	box-shadow: var(--jdb-focus, 0 0 0 3px rgba(200, 155, 94, .55));
	border-radius: 6px;
}

/* ==== Header account region: who is signed in, and the way out ============
 *
 * THIS BLOCK MUST STAY BELOW `#jdb-app .jdb-link` ABOVE. That rule sets
 * background:none; border:0; padding:0; font:inherit at the same specificity
 * (1,1,0), so anything declared earlier in this file loses to it on source
 * order — which is why the .jdb-mybookings-link pill authored near the top of
 * the file has never actually reached the page (it resolves to a bare
 * underlined link). It is re-asserted here, next to the sign-out it now sits
 * beside: two identical bare links in a row would read as one sentence, and
 * the reader could not tell which was the way out.
 *
 * Nothing in here renders for a signed-out visitor except .jdb-login-link,
 * which is what was already there.
 * ========================================================================= */
/* OUTSIDE THE CARD. The account links are a sibling of #jdb-app now, sitting on
   the page background above the ivory panel — so they are not selected by any
   `#jdb-app ...` rule and need their own. Same links, same weights; what changes
   is that they are no longer the first line inside a booking form.

   Right-aligned so they sit over the card's right edge and read as a corner
   rather than as a heading for it; on a phone that is also the thumb's side.
   max-width matches the card so the row cannot outrun it in a wide column. */
.jdb-header-account--outside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px 14px;
	margin: 0 auto 10px;
	padding: 0 4px;
	min-width: 0;
	/* THE SAME BOX AS THE CARD. #jdb-app is max-width:780px and centred, so on a
	   wide screen it sits well inside its parent; this row is a SIBLING of it,
	   so without the same constraint it filled the parent and its right-aligned
	   links hung past the card's right edge — 40px over at 1440, 18px at 980,
	   flush only on a phone where the cap does not bind.
	   MUST MATCH #jdb-app's max-width. If that number moves, this moves. */
	width: 100%;
	max-width: 780px;
}
/* ON THE SECTION, NOT ON THE CARD — so these are light on dark.
   They kept Deep Pine when they left the ivory panel, and the section behind
   the card is Night Pine: 1.06:1, which is not hard to read, it is invisible.
   Measured off the page rather than assumed — rgb(22, 36, 30).
   Ivory ~13.7:1 for the one people come for, Moon Sage ~7.8:1 for sign-out,
   which keeps it the quieter of the two without putting it near the floor. */
.jdb-header-account--outside .jdb-link {
	font-family: var(--jdb-font-body, inherit);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-size: 0.82rem;
	color: #F6F1E7;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.jdb-header-account--outside .jdb-mybookings-link {
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(246, 241, 231, 0.45);
}
.jdb-header-account--outside .jdb-logout-link { color: #A9BBA9; }
.jdb-header-account--outside .jdb-link:hover,
.jdb-header-account--outside .jdb-link:focus-visible {
	color: #C89B5E;
	border-bottom-color: rgba(200, 155, 94, 0.6);
}

/* The in-card position is the fallback for a shortcode with no parent to be
   inserted into — see the note in the app's build step. */
#jdb-app .jdb-header-account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 6px 14px;
	min-width: 0;
	order: -1;
	width: 100%;
}
@media (min-width: 700px) {
	#jdb-app .jdb-header-account {
		order: 1;
		width: auto;
		justify-content: flex-end;
		margin-left: auto;
	}
	#jdb-app .jdb-app-title { order: 0; }
}

/* Both account controls are LINKS, and deliberately the same kind of thing.
   This used to be an amber pill next to an underlined link next to a grey
   caption: three treatments for two actions and one label, which on a phone
   stacked into something that read as three unrelated widgets. The pill is
   gone; the bookings link keeps the weight because it is the one people come
   for, and sign-out stays the quieter of the two. */
#jdb-app .jdb-mybookings-link {
	font-family: var(--jdb-font-body);
	font-weight: 700;
	font-size: 0.82rem;
	color: var(--jdb-deep-pine);
	background: none;
	border: 0;
	border-radius: var(--jdb-radius-chip);
	padding: 7px 4px;
	min-height: 34px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 140ms ease;
}
#jdb-app .jdb-mybookings-link:hover,
#jdb-app .jdb-mybookings-link:focus-visible {
	color: var(--jdb-amber-ink, #8A6A2A);
}

/* Deliberately the quieter of the two — nobody arrives at a booking page in
   order to sign out — but it is one tap away from every view the app has. */
#jdb-app .jdb-logout-link {
	font-family: var(--jdb-font-body);
	font-weight: 700;
	font-size: 0.78rem;
	color: var(--jdb-forest-grey);
	background: none;
	border: 0;
	border-radius: var(--jdb-radius-chip);
	padding: 7px 4px;
	min-height: 34px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
#jdb-app .jdb-logout-link:hover,
#jdb-app .jdb-logout-link:focus-visible {
	color: var(--jdb-deep-pine);
}
#jdb-app .jdb-logout-link[disabled] {
	opacity: 0.55;
	cursor: default;
}

/* THE TWO ACCOUNT ACTIONS, SEPARATED. On "My bookings" these were two bare
   siblings on the section, so "Book a new appointment" and "Log out" sat hard
   against each other and read as one run of text — and at 0.9rem against
   0.78rem the second looked like a footnote to the first rather than a
   different action.

   Same size now, so neither reads as an afterthought, with the hierarchy
   carried by COLOUR instead: the booking link keeps the accent, the sign-out
   stays forest-grey. Pushed to opposite ends, because they are opposites — one
   continues, one ends the session — and the distance is what stops a thumb
   aimed at "book again" landing on "log out".

   space-between only once there is room for it. Wrapped onto two lines the
   pair is left-aligned, since a lone right-aligned link under a left-aligned
   one looks like a mistake. */
#jdb-app .jdb-mybookings-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 24px;
	margin: 2px 0 var(--jdb-gap);
	/* THE SIZE IS SET HERE, ON THE ROW, AND BOTH LINKS INHERIT IT. Measured on
	   screen: the first attempt pinned the logout to 0.9rem and left the two
	   STILL mismatched — 16px against 14.4px — because of a specificity TIE
	   nobody would guess from reading either rule alone:

	     #jdb-app .jdb-back-to-book { font-size: 0.9rem }   (1,1,0)
	     #jdb-app .jdb-link         { font-size: inherit }  (1,1,0)  <- later, wins

	   .jdb-link comes later in this stylesheet, so "Book en ny tid" does NOT get
	   its own 0.9rem: it inherits, and landed on 16px. Pinning the logout to
	   0.9rem therefore fixed the wrong half and kept the gap it was meant to
	   close. Setting the row and letting `inherit` carry it makes both links the
	   same size BY CONSTRUCTION, whichever of those two rules wins. */
	font-size: 0.95rem;
}
@media (min-width: 480px) {
	#jdb-app .jdb-mybookings-actions {
		justify-content: space-between;
	}
}
/* inherit, NOT a value: this is (1,2,0) so it beats the 0.78rem above, and
   deferring to the row is what keeps the pair identical. */
#jdb-app .jdb-mybookings-actions .jdb-logout-link {
	font-size: inherit;
	padding-left: 0;
	padding-right: 0;
}

/* A refused sign-out. Full width on its own line inside the flex row (the
   `flex: 1 0 100%` is what forces the wrap), and it uses the danger palette
   because the reader currently believes something happened that did not. */
#jdb-app .jdb-logout-error {
	flex: 1 0 100%;
	margin-top: 8px;
	padding: 10px 12px;
	border: 1px solid var(--jdb-danger-line);
	border-radius: var(--jdb-radius-btn);
	background: rgba(179, 69, 47, 0.06);
	text-align: left;
}
#jdb-app .jdb-logout-error p {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--jdb-danger);
}
#jdb-app .jdb-logout-retry {
	margin-top: 6px;
	padding: 8px 0;
	min-height: 40px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--jdb-danger);
	text-underline-offset: 3px;
}

/* On the narrowest phones the greeting takes its own line rather than being
   squeezed: measured at 390px, capping it instead ellipsised "Logget ind som
   Mette" down to "Logget…", which removes the one thing that makes the button
   beside it legible. It is `flex: 1 0 100%` — a whole row — so the two controls
   keep their width and their tap target on the row below. */
@media (max-width: 430px) {
	/* The bookings link carries the name now ("Annes bookinger"), so it is the
	   one that can run long. Let it take a whole row rather than squeezing the
	   sign-out beside it. */
	#jdb-app .jdb-mybookings-link {
		padding: 7px 4px;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* =====================================================================
 * PACKS ("klippekort")
 *
 * Two surfaces: the prepaid-balance block above the code field on the
 * details step, and the purchase offer on the confirmation screen.
 *
 * NO transform / filter / contain anywhere in here, and none may be added
 * to an ancestor: the offer hosts an embedded Stripe iframe, which sizes
 * and positions itself, and any of those three breaks its maths and clips
 * whatever Stripe overlays. Same rule as .jdb-checkout-mount above.
 * ===================================================================== */

/* The balance a signed-in client already holds. A quiet, informational
   card — it is a statement of fact, not the next thing to do, so it must
   not compete with the primary action further down the step. */
#jdb-app .jdb-credit {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 12px;
	padding: 14px 16px;
	background: rgba(169, 187, 169, 0.18);
	border: 1px solid rgba(169, 187, 169, 0.5);
	border-radius: var(--jdb-radius-card);
}
#jdb-app .jdb-credit p { margin: 0; }
#jdb-app .jdb-credit-balance {
	font-weight: 600;
	color: var(--jdb-deep-pine);
}
#jdb-app .jdb-credit-use { align-self: stretch; min-height: 44px; }
#jdb-app .jdb-credit-chose { color: var(--jdb-deep-pine); }
/* Applying a balance replaces the button with the sentence saying it was
   used, so redrawStepInPlace() puts focus on this block instead — otherwise
   focus falls to <body> and the next Tab restarts at the top of the page.
   A pointer press must not paint a ring for that: the keyboard ring is the
   :focus-visible one (custom_css post 59 draws it for any [tabindex]) and it
   is deliberately left alone, because a keyboard user does need to be shown
   where focus went. */
#jdb-app .jdb-credit:focus:not(:focus-visible) { outline: none; }

/* The hint under the code field. Shown to EVERYBODY, which is what makes
   it safe to be specific — see book.pack.hint. */
#jdb-app .jdb-code-hint {
	flex-basis: 100%;
	margin: 6px 0 0;
	font-size: 0.85rem;
}

/* The purchase offer on the confirmation screen. Deliberately the same
   "quiet aside" treatment as the account nudge: the booking is already
   done and this is an extra, so it must not read as an unfinished step. */
#jdb-app .jdb-pack-offer {
	background: rgba(200, 155, 94, 0.10);
	border: 1px dashed rgba(200, 155, 94, 0.55);
	border-radius: var(--jdb-radius-card);
	padding: 20px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
#jdb-app .jdb-pack-title { margin: 0; font-size: 1.15rem; }
#jdb-app .jdb-pack-offer p { margin: 0; }

/* One product per row: text above, button below on a phone; side by side
   once there is room. min-width:0 on the text column is what stops a long
   Danish product name forcing the card wider than the viewport. */
#jdb-app .jdb-pack-opt {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0 0;
	border-top: 1px solid rgba(200, 155, 94, 0.35);
}
#jdb-app .jdb-pack-opt-text { flex: 1 1 220px; min-width: 0; }
#jdb-app .jdb-pack-opt-text strong { display: block; color: var(--jdb-deep-pine); }
#jdb-app .jdb-pack-buy { flex: 0 1 auto; min-height: 44px; }

/* At phone width the button goes full width under its description rather
   than being squeezed beside it — the price is part of its label and must
   not wrap mid-number. */
@media (max-width: 520px) {
	#jdb-app .jdb-pack-buy,
	#jdb-app .jdb-pack-pick { flex: 1 1 100%; width: 100%; }
}

/* The same products offered on STEP 2, beside the treatment lengths.
   Deliberately quieter than the confirmation-screen offer: there the booking
   is finished and the block is the only thing left to do, whereas here it sits
   among the lengths and must not shout over the plain 60-minute chip that most
   people want. Same dashed-gold family so the two read as one product. */
/* SEPARATED FROM THE LENGTHS, because it is a DIFFERENT KIND OF CHOICE.
   A 20px gap and a hairline read as "more of the same list", so the packages
   looked like two extra durations — one of which happens to cost 2.100 kr. The
   block now sits in its own tinted, outlined panel with real air above it: still
   part of the step, plainly not another treatment length. */
#jdb-app .jdb-pack-picks {
	margin-top: 40px;
	padding: 20px;
	border: 1px solid rgba(200, 155, 94, 0.45);
	border-radius: var(--jdb-radius-card);
	background: rgba(200, 155, 94, 0.07);
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}
/* NO RULE ACROSS THE TOP. There was one here — a full-bleed hairline meant to
   give the eye a boundary before it reached a price. The panel already has an
   outline doing exactly that, so the line read as a stray mark cutting through
   the top of the card rather than as structure. The outline and the space above
   are the separation; a second device on the same edge is noise. */
#jdb-app .jdb-pack-picks-lead {
	margin: 0;
	font-family: var(--jdb-font-head);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--jdb-deep-pine);
}

@media (max-width: 520px) {
	#jdb-app .jdb-pack-picks { margin-top: 32px; padding: 16px; }
}
#jdb-app .jdb-pack-picks .jdb-pack-opt {
	border-top: none;
	padding: 10px 12px;
	margin: 0 -12px;
	border-radius: var(--jdb-radius-btn);
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 12px;
	cursor: pointer;
}
#jdb-app .jdb-pack-picks .jdb-pack-opt:hover {
	background: rgba(200, 155, 94, 0.07);
}
#jdb-app .jdb-pack-check {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--jdb-amber);
	cursor: pointer;
}
/* The row is a <label>, so the checkbox already has focus. Ring the whole row
   so a keyboard user can see WHICH package they are about to tick. */
#jdb-app .jdb-pack-picks .jdb-pack-opt:focus-within {
	outline: 2px solid var(--jdb-amber);
	outline-offset: 1px;
}
#jdb-app .jdb-pack-picks .jdb-pack-opt-text { flex: 1 1 auto; }
#jdb-app .jdb-pack-opt-price {
	display: block;
	font-size: 0.86rem;
	color: var(--jdb-forest-grey);
}
#jdb-app .jdb-pack-picks .jdb-pack-opt.is-chosen .jdb-pack-opt-price {
	color: var(--jdb-deep-pine);
}
#jdb-app .jdb-pack-pick { flex: 0 1 auto; min-height: 44px; }

/* CHOSEN, NOT BOUGHT. The filled treatment is the same one a selected duration
   chip gets, because it is the same kind of statement — "this is what I am
   booking" — and using a payment-coloured treatment here would imply money has
   moved when none has. */
#jdb-app .jdb-pack-opt.is-chosen {
	background: rgba(200, 155, 94, 0.14);
	border-radius: var(--jdb-radius-card);
	padding: 12px;
	box-shadow: inset 0 0 0 2px rgba(200, 155, 94, 0.85);
}
#jdb-app .jdb-pack-picks .jdb-pack-opt.is-chosen { padding: 10px 12px; }

/* The restatement on the confirm step. Not a notice and not an error: it is
   one line of fact about what the next button does. */
#jdb-app .jdb-pack-pending {
	text-align: left;
	padding: 10px 12px;
	border-left: 3px solid rgba(200, 155, 94, 0.85);
	background: rgba(200, 155, 94, 0.10);
	border-radius: 0 var(--jdb-radius-card) var(--jdb-radius-card) 0;
}
#jdb-app .jdb-pack-pending strong { color: var(--jdb-deep-pine); }

/* =====================================================================
 * The PUBLIC photo-consent screen (?jdb_consent=…): the signing page and
 * its three outcomes. Until now this shipped no CSS of its own at all, so
 * the consent sentence — the one thing on the page a person is agreeing
 * to — was drawn by whatever the active theme does to a <blockquote>,
 * which on this site is Divi's global rule.
 *
 * SCOPED TO .jdb-step.jdb-consent, NEVER TO .jdb-consent ALONE, and that
 * is load-bearing. `.jdb-consent` is already taken: it is the checkbox
 * ROW on the booking details step (`div.jdb-field.jdb-consent`, a flex
 * line with `cursor: pointer`, ~line 693) and the same class went onto
 * this page's `<section>`. The section is therefore ALREADY inheriting
 * that flex layout and pointer cursor today. A bare `.jdb-consent` rule
 * here would style both and break the booking form; these selectors
 * cannot match the field, because the field never carries .jdb-step.
 * ===================================================================== */

/* Undo the checkbox-row layout the shared class imposes on this section. */
#jdb-app .jdb-step.jdb-consent {
	display: block;
	cursor: auto;
	padding: 0;
	max-width: 42rem;
}

/* WHOSE record this is — first name + last initial, never more. The one
 * line the person has to actually check before they sign, so it is given
 * the honey rule and warm ground that mark it out from the explanatory
 * hints around it. Deliberately the same treatment as .jdb-sig-who inside
 * the pad, which is the very next thing they see. */
#jdb-app .jdb-consent-who {
	margin: 0 0 var(--jdb-gap);
	padding: 10px 14px;
	border: 1px solid rgba(200, 155, 94, 0.55);
	border-radius: var(--jdb-radius-btn);
	background: var(--jdb-amber);
	color: var(--jdb-night-pine);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* THE SENTENCE BEING AGREED TO. It is the whole point of the page, so it
 * is the most prominent thing on it after the title: display size, the
 * heading serif, and a card of its own. Not italic — Divi's blockquote
 * default is, and a legal sentence set in italic at small size is harder
 * to read, which is the opposite of what this text needs. */
#jdb-app .jdb-consent-sentence {
	margin: 0 0 var(--jdb-gap);
	padding: var(--jdb-gap) calc(var(--jdb-gap) + 2px);
	border: 1px solid var(--jdb-border);
	border-radius: var(--jdb-radius-card);
	background: var(--jdb-cream);
	box-shadow: var(--jdb-shadow-card);
	font-family: var(--jdb-font-head);
	font-style: normal;
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--jdb-deep-pine);
	quotes: none;
}
#jdb-app .jdb-consent-sentence::before,
#jdb-app .jdb-consent-sentence::after { content: none; }
/* IT IS NO LONGER ONE SENTENCE. The first two lines name the client and the
   e-mail address the consent is filed against; the last is the agreement. They
   are one string, split into paragraphs for display, so the identity is read
   rather than skimmed past inside a block of legal wording. The identity lines
   are set a shade smaller than the agreement — they are the label on the thing
   being signed, not the thing itself. */
#jdb-app .jdb-consent-sentence p { margin: 0 0 10px; }
#jdb-app .jdb-consent-sentence p:last-child { margin-bottom: 0; }
#jdb-app .jdb-consent-sentence p:not(:last-child) {
	font-family: var(--jdb-font-body);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--jdb-ink, #243830);
}

/* "What you agreed to", above the stored wording on the already-signed
 * outcome. A subhead inside a section that already has an h3. */
#jdb-app .jdb-consent-subhead {
	margin: calc(var(--jdb-gap) + 4px) 0 8px;
	font-family: var(--jdb-font-head);
	font-size: 1.05rem;
	color: var(--jdb-deep-pine);
}

/* The primary action gets the full width of the column on a phone: it is
 * the only thing on the page there is to press, and a 44px target is the
 * floor for a control someone is using one-handed. */
#jdb-app .jdb-consent-open {
	margin-top: 4px;
	min-height: 44px;
}

/* The three terminal states — signed, already on file, link dead. No pad,
 * no button; just the outcome and how to withdraw. */
#jdb-app .jdb-consent-outcome > p { margin: 0 0 10px; line-height: 1.6; }

@media (max-width: 520px) {
	#jdb-app .jdb-consent-sentence {
		padding: 14px;
		font-size: 1.1rem;
	}
	#jdb-app .jdb-consent-open { width: 100%; }
}

/* The sign-in note under the packages on step 2. Quiet — most readers are not
   buying a package — but present BEFORE the choice rather than after the
   booking, which is where the refusal used to arrive. */
#jdb-app .jdb-pack-signin-early {
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid rgba(200, 155, 94, 0.28);
}
#jdb-app .jdb-pack-signin-early .jdb-link {
	font: inherit;
	font-weight: 700;
}

/* The pay-for-your-package step, between the booking and the thank-you. */
#jdb-app .jdb-packpay-held {
	margin: 0 0 6px;
	padding: 12px 14px;
	border-left: 3px solid var(--jdb-pale-gold);
	background: rgba(200, 155, 94, 0.10);
	border-radius: 0 var(--jdb-radius-card) var(--jdb-radius-card) 0;
	text-align: left;
}
#jdb-app .jdb-packpay-when {
	margin: 0 0 18px;
	font-weight: 600;
	color: var(--jdb-deep-pine);
	text-align: left;
}
/* The escape is quiet and full width under the offer: declining must be easy to
   find, and must not compete with the pay button above it. */
#jdb-app .jdb-packpay-skip {
	display: block;
	width: 100%;
	margin-top: 14px;
}

/* ---------------------------------------------------------------------------
 * The gift-card / package note, under the treatment cards.
 *
 * It used to sit above them, where it was the first thing every visitor read on
 * the first screen of the flow — a payment question put to people who mostly do
 * not have a card, before the one question this step exists to ask. Underneath,
 * it is where somebody looks once they have chosen, and it can be skipped by
 * everyone it is not for.
 *
 * Set apart by a hairline that fades at both ends rather than a box: this is an
 * aside, and a bordered panel here would read as a second call to action
 * competing with Continue.
 * ------------------------------------------------------------------------- */
#jdb-app .jdb-redeem-note {
	margin: 26px 0 4px;
	padding-top: 18px;
	position: relative;
}
#jdb-app .jdb-redeem-note::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-image: linear-gradient(90deg,
		rgba(200, 155, 94, 0) 0%,
		rgba(200, 155, 94, .55) 22%,
		rgba(200, 155, 94, .55) 78%,
		rgba(200, 155, 94, 0) 100%);
}
#jdb-app .jdb-redeem-q {
	margin: 0 0 4px;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 19px;
	line-height: 1.3;
	color: #243830;
}
#jdb-app .jdb-redeem-note .jdb-redeem-lead {
	margin: 0;
}

/* The quiet way to the other package, shown only once one has been chosen. It
   is a link, not a button, because it is an aside to a decision already made —
   two buttons here would put the question back. */
#jdb-app .jdb-pack-switch {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.84rem;
}