/*
 * Styles for the Bella blocks. Colors and fonts come from the theme's design tokens,
 * with fallbacks so the blocks still look right without the theme.
 *
 * 1. Shared
 * 2. Tarot card
 * 3. Card of the Day
 * 4. Readings
 * 5. Booking
 * 6. Manage booking
 * 7. Contact form
 * 8. Events, newsletter, gift cards, card library
 */

/* 1. Shared */

.bella-daily,
.bella-readings,
.bella-booking,
.bella-manage,
.bella-contact-form,
.bella-event-list,
.bella-signup,
.bella-giftform,
.bella-library,
.bella-lang,
.bella-toast {
	--b-ink: var(--wp--preset--color--ink, #0e0d0c);
	--b-surface: var(--wp--preset--color--surface, #161412);
	--b-raised: var(--wp--preset--color--raised, #1e1b18);
	--b-line: var(--wp--preset--color--line, #2e2924);
	--b-text: var(--wp--preset--color--text, #ece5d8);
	--b-muted: var(--wp--preset--color--muted, #a79f91);
	--b-gold: var(--wp--preset--color--gold, #c9a55c);
	--b-gold-light: var(--wp--preset--color--gold-light, #e3cc94);
	--b-gold-soft: rgb(201 165 92 / 0.3);
	--b-gold-faint: rgb(201 165 92 / 0.08);
	--b-error: #e3a29a;
	--b-display: var(--wp--preset--font-family--display, Georgia, serif);
	--b-body: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--b-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--b-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--b-radius: var(--bella-radius, 2px);
	--b-radius-surface: var(--bella-radius-surface, 4px);
}

.bella-daily *,
.bella-readings *,
.bella-booking *,
.bella-manage *,
.bella-contact-form *,
.bella-event-list *,
.bella-signup *,
.bella-giftform *,
.bella-library *,
.bella-toast * {
	box-sizing: border-box;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bella-small-caps,
.bella-daily__keywords,
.bella-reading-card__meta,
.bella-reading-row__meta,
.bella-progress__label,
.bella-slots__label,
.bella-summary-list dt,
.bella-manage__badge,
.bella-manage__ref {
	font-family: var(--b-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1.5;
	text-transform: uppercase;
}

.bella-button.bella-button--quiet {
	border-color: var(--b-line);
	color: var(--b-muted);
}

.bella-button.bella-button--quiet:hover {
	border-color: var(--b-text);
	background: transparent;
	color: var(--b-text);
}

/* Prices and dates use lining figures. Cormorant's default old-style figures make "€40" read like "€4o". */
.bella-reading-card__price,
.bella-reading-row__price,
.bella-choice__price,
.bella-booking__total strong,
.bella-booking__summary-total strong,
.bella-booking__bar-text strong,
.bella-slots__title,
.bella-calendar__month,
.bella-booking__summary-name {
	font-variant-numeric: lining-nums;
}

/* Corners: small elements match the buttons, larger surfaces are a little softer, as in the theme. */
.bella-slot,
.bella-manage__badge,
.bella-daily__thumb {
	border-radius: var(--b-radius);
}

.bella-choice,
.bella-option,
.bella-calendar,
.bella-slots__empty,
.bella-booking__summary,
.bella-manage__card {
	border-radius: var(--b-radius-surface);
}

/* 2. Tarot card */

.bella-tarot {
	display: block;
	width: 100%;
	aspect-ratio: 280 / 482;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	perspective: 1600px;
	transition: transform 0.6s var(--b-ease);
	-webkit-tap-highlight-color: transparent;
}

.bella-tarot:hover {
	transform: translateY(-0.4rem);
}

.bella-tarot:focus-visible {
	outline: none;
}

.bella-tarot:focus-visible .bella-tarot__face {
	box-shadow:
		0 1.5rem 3rem rgb(0 0 0 / 0.55),
		0 0 0 1px var(--b-gold),
		0 0 0 5px rgb(201 165 92 / 0.25);
}

.bella-tarot__inner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 1.1s var(--b-ease-in-out);
}

.bella-tarot.is-flipped .bella-tarot__inner,
html:not(.js) .bella-tarot__inner {
	transform: rotateY(180deg);
}

.bella-tarot__face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 5% / 2.9%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow:
		0 1.5rem 3rem rgb(0 0 0 / 0.55),
		0 0 0 1px rgb(201 165 92 / 0.22);
}

.bella-tarot__face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bella-tarot__front {
	transform: rotateY(180deg);
	background: #ece3cf;
}

/* A soft light passes over the card back on hover. */
.bella-tarot__back::after {
	content: "";
	position: absolute;
	inset: -50%;
	background: linear-gradient(115deg, transparent 40%, rgb(236 217 166 / 0.16) 50%, transparent 60%);
	transform: translateX(-60%);
	transition: transform 1.4s var(--b-ease);
	pointer-events: none;
}

.bella-tarot:hover .bella-tarot__back::after {
	transform: translateX(60%);
}

.is-instant .bella-tarot__inner,
.is-instant .bella-daily__before,
.is-instant .bella-daily__after,
.is-instant .bella-daily__after > *,
.is-instant .bella-daily__caption > * {
	transition: none !important;
	animation: none !important;
}

/* 3. Card of the Day */

/* The reveal: the card lifts as it turns and settles, a warm glow blooms behind it,
 * and one soft band of light passes over the artwork once it faces up. */
.bella-daily.is-revealed .bella-tarot {
	animation: bella-card-lift 1.5s var(--b-ease-in-out);
}

@keyframes bella-card-lift {
	0% {
		transform: none;
	}

	40% {
		transform: translateY(-0.9rem) scale(1.035);
	}

	100% {
		transform: none;
	}
}

.bella-tarot__front::after {
	content: "";
	position: absolute;
	inset: -40%;
	background: linear-gradient(115deg, transparent 42%, rgb(255 244 214 / 0.35) 50%, transparent 58%);
	transform: translateX(-75%);
	pointer-events: none;
}

.bella-daily.is-revealed .bella-tarot__front::after {
	animation: bella-card-sheen 1.6s var(--b-ease) 0.95s both;
}

@keyframes bella-card-sheen {
	from {
		transform: translateX(-75%);
	}

	to {
		transform: translateX(75%);
	}
}

.bella-daily--feature.is-revealed .bella-daily__card::before {
	animation: bella-card-bloom 2.4s var(--b-ease) 0.2s;
}

@keyframes bella-card-bloom {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	45% {
		opacity: 1;
		transform: scale(1.25);
		filter: brightness(1.8);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.bella-daily.is-remembered .bella-tarot,
.bella-daily.is-remembered .bella-tarot__front::after,
.bella-daily.is-remembered .bella-daily__card::before,
.bella-daily.is-remembered .bella-daily__after > * {
	animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.bella-daily .bella-tarot,
	.bella-daily .bella-tarot__front::after,
	.bella-daily .bella-daily__card::before {
		animation: none !important;
	}
}

.bella-daily__keywords {
	color: var(--b-gold);
}

/* Feature */
.bella-daily--feature {
	display: grid;
	grid-template-columns: minmax(12rem, 19rem) minmax(0, 34rem);
	justify-content: center;
	align-items: center;
	gap: clamp(2.5rem, 8vw, 7.5rem);
}

.bella-daily--feature .bella-daily__card {
	position: relative;
	isolation: isolate;
}

.bella-daily--feature .bella-daily__card::before {
	content: "";
	position: absolute;
	inset: -20% -35%;
	z-index: -1;
	background: radial-gradient(closest-side, rgb(201 165 92 / 0.18), transparent);
	pointer-events: none;
}

.bella-daily__states {
	display: grid;
	margin-top: 1.5rem;
}

.bella-daily__before,
.bella-daily__after {
	grid-area: 1 / 1;
	transition:
		opacity 0.7s var(--b-ease),
		visibility 0s linear 0.7s;
}

.bella-daily__after {
	opacity: 0;
	visibility: hidden;
}

.bella-daily.is-revealed .bella-daily__before {
	opacity: 0;
	visibility: hidden;
}

.bella-daily.is-revealed .bella-daily__after {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 0.7s var(--b-ease) 0.85s,
		visibility 0s;
}

html:not(.js) .bella-daily__before {
	display: none;
}

html:not(.js) .bella-daily__after {
	opacity: 1;
	visibility: visible;
}

.bella-daily.is-revealed .bella-daily__after > * {
	animation: bella-daily-rise 0.9s var(--b-ease) both;
}

.bella-daily.is-revealed .bella-daily__after > :nth-child(1) { animation-delay: 0.9s; }
.bella-daily.is-revealed .bella-daily__after > :nth-child(2) { animation-delay: 1s; }
.bella-daily.is-revealed .bella-daily__after > :nth-child(3) { animation-delay: 1.1s; }
.bella-daily.is-revealed .bella-daily__after > :nth-child(4) { animation-delay: 1.2s; }
.bella-daily.is-revealed .bella-daily__after > :nth-child(5) { animation-delay: 1.3s; }
.bella-daily.is-revealed .bella-daily__after > :nth-child(6) { animation-delay: 1.4s; }

@keyframes bella-daily-rise {
	from {
		opacity: 0;
		transform: translateY(0.8rem);
	}

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

.bella-daily__numeral {
	margin: 0 0 0.25rem;
	font-family: var(--b-display);
	font-size: 1.25rem;
	letter-spacing: 0.18em;
	color: var(--b-gold);
}

.bella-daily__title {
	margin: 0;
	font-family: var(--b-display);
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	font-weight: 300;
	line-height: 1.05;
}

.bella-daily--feature .bella-daily__keywords {
	margin: 1rem 0 0;
}

.bella-daily__lead {
	margin: 1.25rem 0 0;
	font-family: var(--b-display);
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	line-height: 1.5;
	color: var(--b-text);
}

.bella-daily__before .bella-daily__lead {
	color: var(--b-muted);
}

.bella-daily__note {
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--b-muted);
}

.bella-daily__before .bella-button,
.bella-daily__after .bella-button {
	margin-top: 2rem;
}

@media (max-width: 781px) {
	.bella-daily--feature {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.bella-daily--feature .bella-daily__card {
		width: min(15rem, 62vw);
	}

	.bella-daily--feature .is-style-eyebrow {
		justify-content: center;
	}

	.bella-daily--feature .is-style-eyebrow::before {
		display: none;
	}
}

/* Hero card, placed over the photo in Bella's hand */
.bella-daily--hero {
	position: absolute;
	left: var(--bella-card-x, 62%);
	top: var(--bella-card-y, 60%);
	z-index: 4;
	width: var(--bella-card-w, 21%);
	margin: 0 !important;
	translate: -50% -50%;
	animation: bella-daily-rise 1.4s var(--b-ease) 0.6s both;
}

.bella-daily--hero .bella-daily__float {
	rotate: var(--bella-card-r, -8deg);
	animation: bella-float 7s var(--b-ease-in-out) infinite alternate;
}

.bella-daily--hero .bella-tarot__face {
	box-shadow:
		0 2rem 3.5rem rgb(0 0 0 / 0.6),
		0 0 0 1px rgb(201 165 92 / 0.3),
		0 0 3rem rgb(201 165 92 / 0.12);
}

@keyframes bella-float {
	from {
		transform: translateY(-0.35rem);
	}

	to {
		transform: translateY(0.35rem);
	}
}

.bella-daily__caption {
	position: relative;
	display: grid;
	justify-items: center;
	margin: 1.4rem 0 0;
	white-space: nowrap;
}

.bella-daily--hero .bella-daily__caption {
	position: absolute;
	top: 100%;
	left: 50%;
	translate: -50% 0;
}

.bella-daily__hint,
.bella-daily__name {
	grid-area: 1 / 1;
	font-family: var(--b-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--b-gold);
	transition: opacity 0.6s var(--b-ease);
}

.bella-daily__hint {
	animation: bella-hint 2.6s var(--b-ease-in-out) infinite alternate;
}

@keyframes bella-hint {
	from {
		opacity: 0.45;
	}

	to {
		opacity: 1;
	}
}

.bella-daily__name {
	opacity: 0;
	text-decoration: none;
}

a.bella-daily__name:hover {
	color: var(--b-gold-light);
}

.bella-daily.is-revealed .bella-daily__hint {
	opacity: 0;
	animation: none;
}

.bella-daily.is-revealed .bella-daily__name {
	opacity: 1;
	transition-delay: 0.6s;
}

html:not(.js) .bella-daily__hint {
	display: none;
}

html:not(.js) .bella-daily__name {
	opacity: 1;
}

@media (max-width: 781px) {
	.bella-daily--hero .bella-daily__caption {
		margin-top: 0.9rem;
	}
}

/* Single card (404) */
.bella-daily--single {
	display: grid;
	justify-items: center;
}

.bella-daily--single .bella-daily__card {
	width: min(12rem, 50vw);
}

/* Compact */
.bella-daily--compact {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: 1.5rem 0;
	border-block: 1px solid var(--b-line);
}

.bella-daily__thumb {
	flex: 0 0 auto;
	width: 4.75rem;
	height: auto;
	border-radius: 5% / 2.9%;
	box-shadow:
		0 0.75rem 1.5rem rgb(0 0 0 / 0.45),
		0 0 0 1px rgb(201 165 92 / 0.22);
	transform: rotate(-4deg);
}

.bella-daily--compact .is-style-eyebrow {
	margin: 0;
}

.bella-daily--compact .bella-daily__title {
	margin: 0.5rem 0 0.35rem;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.bella-daily--compact .bella-daily__keywords {
	margin: 0;
	color: var(--b-muted);
}

/* 4. Readings */

.bella-readings-empty {
	padding: 2rem;
	border: 1px dashed var(--b-line, #2e2924);
	text-align: center;
	color: var(--b-muted, #a79f91);
}

.bella-readings--cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 20rem));
	justify-content: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

.bella-reading-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 26rem;
	padding: 3.5rem 2rem 2.25rem;
	border-radius: 999px 999px 0.25rem 0.25rem;
	background:
		radial-gradient(90% 50% at 50% 0%, rgb(201 165 92 / 0.08), transparent 70%),
		var(--b-raised);
	box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.35);
	text-align: center;
	transition:
		transform 0.6s var(--b-ease),
		box-shadow 0.6s var(--b-ease);
}



/* Soft light that rises on hover */
.bella-reading-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(70% 45% at 50% 30%, rgb(201 165 92 / 0.14), transparent 70%);
	opacity: 0;
	transition: opacity 0.5s var(--b-ease);
	pointer-events: none;
}

.bella-reading-card:hover,
.bella-reading-card:focus-within {
	transform: translateY(-0.5rem);
	box-shadow: 0 2.25rem 4rem rgb(0 0 0 / 0.5);
}



.bella-reading-card:hover::after,
.bella-reading-card:focus-within::after {
	opacity: 1;
}

.bella-reading-card:has(.bella-reading-card__link:focus-visible) {
	outline: 1px solid var(--b-gold);
	outline-offset: 5px;
}

.bella-reading-card__numeral {
	margin: 1.5rem 0 0;
	font-family: var(--b-display);
	font-size: 1.15rem;
	letter-spacing: 0.2em;
	color: var(--b-gold);
}

/* The reading's symbol, with a soft glow behind it */
.bella-medallion {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	margin: 1.75rem auto 1.25rem;
	background: radial-gradient(closest-side, rgb(201 165 92 / 0.14), transparent);
}

.bella-medallion__icon {
	width: 1.9rem;
	height: 1.9rem;
	background: var(--b-gold);
	mask: var(--bella-ornament-sun, none) center / contain no-repeat;
	transition: transform 0.8s var(--b-ease);
}

.bella-ornament--sun { mask-image: var(--bella-ornament-sun); }
.bella-ornament--crescent { mask-image: var(--bella-ornament-crescent); width: 1.6rem; }
.bella-ornament--star { mask-image: var(--bella-ornament-star); width: 1.6rem; }

.bella-reading-card:hover .bella-medallion__icon,
.bella-reading-card:focus-within .bella-medallion__icon {
	transform: scale(1.08);
}

.bella-reading-card__name {
	margin: 0;
	font-family: var(--b-display);
	font-size: clamp(1.75rem, 2.4vw, 2.125rem);
	font-weight: 400;
	line-height: 1.1;
}

.bella-reading-card__link {
	color: var(--b-text);
	text-decoration: none;
	outline: none;
}

/* The whole card is the link. */
.bella-reading-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 999px 999px 0.25rem 0.25rem;
}

.bella-reading-card__short {
	max-width: 15rem;
	margin: 0.9rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--b-muted);
}

.bella-reading-card__meta {
	width: 100%;
	margin: auto 0 0;
	font-size: 0.625rem;
	color: var(--b-muted);
}

.bella-reading-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: 0.9rem;
}

.bella-reading-card__price {
	font-family: var(--b-display);
	font-size: 2.125rem;
	font-weight: 300;
	line-height: 1;
	color: var(--b-gold-light);
}

.bella-reading-card__book {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--b-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--b-gold);
}

.bella-reading-card__book::after,
.bella-arrow::after {
	content: "";
	width: 1.75rem;
	height: 0.7rem;
	background: currentColor;
	mask:
		var(--bella-ornament-arrow, none) right center / 0.42rem 0.7rem no-repeat,
		linear-gradient(#000 0 0) left center / calc(100% - 1px) 1px no-repeat;
	transition: width 0.6s var(--b-ease);
}

.bella-reading-card:hover .bella-reading-card__book::after {
	width: 2.6rem;
}

/* Phones and tablets: cards become a swipe row, like a hand of cards. */
@media (max-width: 1024px) {
	.bella-readings--cards {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(78vw, 18.5rem);
		justify-content: start;
		gap: 1rem;
		margin-inline: calc(-1 * max(1rem, 4vw));
		padding: 1rem max(1rem, 4vw) 1.5rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: max(1rem, 4vw);
		scrollbar-width: none;
	}

	.bella-readings--cards::-webkit-scrollbar {
		display: none;
	}

	.bella-reading-card {
		scroll-snap-align: start;
	}

	.bella-reading-card:hover,
	.bella-reading-card:focus-within {
		transform: none;
	}
}

/* Dots under the swipe row, showing which card is in view */
.bella-swipe-dots {
	display: none;
}

@media (max-width: 1024px) {
	.bella-swipe-dots {
		display: flex;
		justify-content: center;
		gap: 0.6rem;
		margin-top: 0.25rem;
	}

	.bella-swipe-dots button {
		width: 1.75rem;
		height: 1.75rem;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.bella-swipe-dots button::before {
		content: "";
		display: block;
		width: 0.4rem;
		height: 0.4rem;
		margin: auto;
		border-radius: 50%;
		background: var(--wp--preset--color--line, #2e2924);
		transition:
			background-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.bella-swipe-dots button[aria-current="true"]::before {
		background: var(--wp--preset--color--gold, #c9a55c);
		transform: scale(1.3);
	}
}

/* Rows */
.bella-reading-row {
	border-bottom: 1px solid var(--b-line);
}

.bella-reading-row:first-child {
	border-top: 1px solid var(--b-line);
}

.bella-reading-row__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	align-items: center;
	gap: 1rem 2.5rem;
	padding: 2.25rem 0 1rem;
}

.bella-reading-row {
	position: relative;
	isolation: isolate;
}

/* An open row gets a soft gold tint that fades downward, reaching a little past the text on both sides. */
.bella-reading-row::before {
	content: "";
	position: absolute;
	inset: 0 -1.5rem;
	z-index: -1;
	border-radius: var(--b-radius);
	background: linear-gradient(180deg, rgb(201 165 92 / 0.09), rgb(201 165 92 / 0.02) 70%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
	opacity: 0;
	transition: opacity 0.7s var(--b-ease);
	pointer-events: none;
}

.bella-reading-row.is-open::before {
	opacity: 1;
}

/* On hover the line under the row lights up in gold, drawn from the left. */
.bella-reading-row::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--b-gold), rgb(201 165 92 / 0.35) 55%, transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.9s var(--b-ease);
	pointer-events: none;
}

.bella-reading-row:hover::after,
.bella-reading-row:focus-within::after,
.bella-reading-row.is-open::after {
	transform: scaleX(1);
}

.bella-reading-row__name {
	transition: color 0.6s var(--b-ease);
}

.bella-reading-row:hover .bella-reading-row__name,
.bella-reading-row:focus-within .bella-reading-row__name,
.bella-reading-row.is-open .bella-reading-row__name {
	color: var(--b-gold-light);
}

.bella-reading-row.is-open .bella-reading-row__body-inner > * {
	animation: bella-daily-rise 0.7s var(--b-ease) both;
}

.bella-reading-row.is-open .bella-reading-row__body-inner > :nth-child(2) { animation-delay: 0.08s; }
.bella-reading-row.is-open .bella-reading-row__body-inner > :nth-child(3) { animation-delay: 0.16s; }

@media (max-width: 781px) {
	.bella-reading-row::before {
		inset: 0 -0.75rem;
	}
}

.bella-reading-row__name {
	margin: 0;
	font-family: var(--b-display);
	font-size: clamp(1.625rem, 2.6vw, 2.125rem);
	font-weight: 400;
	line-height: 1.15;
}

.bella-reading-row__short {
	margin: 0.4rem 0 0;
	color: var(--b-muted);
}

.bella-reading-row__meta {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	text-align: right;
	color: var(--b-muted);
}

.bella-reading-row__price {
	min-width: 4.5rem;
	margin: 0;
	font-family: var(--b-display);
	font-size: 2.25rem;
	font-weight: 300;
	line-height: 1;
	text-align: right;
	color: var(--b-gold-light);
}

.bella-reading-row__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.75rem;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--b-gold);
	font-family: var(--b-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	cursor: pointer;
}

.bella-reading-row__toggle::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
	transition: transform 0.6s var(--b-ease);
}

.bella-reading-row.is-open .bella-reading-row__toggle::before {
	transform: rotate(135deg);
}

/* The two labels share one spot and cross-fade, so the plus does not jump when the text changes. */
.bella-reading-row__labels {
	display: inline-grid;
	justify-items: start;
	text-align: left;
}

.bella-reading-row__labels > span {
	grid-area: 1 / 1;
	transition:
		opacity 0.5s var(--b-ease),
		transform 0.5s var(--b-ease);
}

.bella-reading-row__toggle-less {
	opacity: 0;
	transform: translateY(0.4em);
}

.bella-reading-row.is-open .bella-reading-row__toggle-more {
	opacity: 0;
	transform: translateY(-0.4em);
}

.bella-reading-row.is-open .bella-reading-row__toggle-less {
	opacity: 1;
	transform: none;
}

.bella-reading-row__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.6s var(--b-ease);
}

.bella-reading-row.is-open .bella-reading-row__body {
	grid-template-rows: 1fr;
}

.bella-reading-row__body-inner {
	min-height: 0;
	max-width: 40rem;
	overflow: hidden;
	color: rgb(236 229 216 / 0.82);
}

.bella-reading-row.is-open .bella-reading-row__body-inner {
	padding-bottom: 2rem;
}

.bella-reading-row__body-inner > :first-child {
	margin-top: 0;
}

html:not(.js) .bella-reading-row__body {
	grid-template-rows: 1fr;
}

html:not(.js) .bella-reading-row__toggle {
	display: none;
}

@media (max-width: 781px) {
	.bella-reading-row__head {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.75rem 1rem;
		padding-top: 1.75rem;
	}

	.bella-reading-row__main {
		grid-column: 1 / -1;
	}

	.bella-reading-row__meta {
		grid-column: 1;
		grid-row: 2;
		text-align: left;
	}

	.bella-reading-row__price {
		grid-column: 2;
		grid-row: 2;
		font-size: 1.875rem;
	}

	.bella-reading-row__head .bella-button {
		grid-column: 1 / -1;
		margin-top: 0.5rem;
	}
}

/* 5. Booking */

.bella-booking {
	position: relative;
	min-height: 30rem;
}

.bella-booking__loading {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	padding: 6rem 0;
}

.bella-booking__loading span {
	width: 0.45rem;
	height: 0.45rem;
	background: var(--b-gold);
	transform: rotate(45deg);
	animation: bella-pulse 1.2s var(--b-ease-in-out) infinite alternate;
}

.bella-booking__loading span:nth-child(2) { animation-delay: 0.2s; }
.bella-booking__loading span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bella-pulse {
	from { opacity: 0.2; }
	to { opacity: 1; }
}

.bella-booking__preview {
	max-width: 44rem;
	margin: 0 auto 2.5rem;
}

/* Progress */
.bella-progress[hidden] {
	display: none;
}

.bella-progress {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 44rem;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.bella-progress__step {
	position: relative;
	display: flex;
	justify-content: center;
}

.bella-progress__step + .bella-progress__step::before {
	content: "";
	position: absolute;
	top: 1.3rem;
	right: calc(50% + 1.9rem);
	left: calc(-50% + 1.9rem);
	height: 1px;
	background: var(--b-line);
	transition: background-color 0.6s var(--b-ease);
}

.bella-progress__step.is-done + .bella-progress__step::before,
.bella-progress__step.is-current::before {
	background: var(--b-gold-soft);
}

.bella-progress__step > span,
.bella-progress__step > button {
	display: grid;
	justify-items: center;
	gap: 0.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
}

.bella-progress__step > button {
	cursor: pointer;
}

.bella-progress__numeral {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--b-line);
	border-radius: 50%;
	font-family: var(--b-display);
	font-size: 1.05rem;
	line-height: 1;
	color: var(--b-muted);
	transition:
		border-color 0.5s var(--b-ease),
		background-color 0.5s var(--b-ease),
		color 0.5s var(--b-ease);
}

.bella-progress__label {
	font-size: 0.6875rem;
	color: var(--b-muted);
}

.bella-progress__step.is-current .bella-progress__numeral {
	border-color: var(--b-gold);
	background: var(--b-gold-faint);
	color: var(--b-gold-light);
}

.bella-progress__step.is-current .bella-progress__label {
	color: var(--b-text);
}

.bella-progress__step.is-done .bella-progress__numeral {
	border-color: var(--b-gold-soft);
	color: var(--b-gold);
}

.bella-progress__step > button:hover .bella-progress__numeral {
	border-color: var(--b-gold);
}

/* Layout */
.bella-booking__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	align-items: start;
	gap: clamp(2.5rem, 5vw, 5rem);
}

.bella-booking__panel {
	min-height: 22rem;
	outline: none;
}

.bella-booking__panel.is-entering-forward {
	animation: bella-step-forward 0.6s var(--b-ease) both;
}

.bella-booking__panel.is-entering-back {
	animation: bella-step-back 0.6s var(--b-ease) both;
}

@keyframes bella-step-forward {
	from {
		opacity: 0;
		transform: translateX(1.5rem);
	}

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

@keyframes bella-step-back {
	from {
		opacity: 0;
		transform: translateX(-1.5rem);
	}

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

.bella-booking__heading {
	margin: 0;
	font-family: var(--b-display);
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	font-weight: 300;
	line-height: 1.1;
	outline: none;
}

.bella-booking__intro {
	margin: 0.75rem 0 2rem;
	color: var(--b-muted);
}

/* Reading choices */
.bella-choices {
	display: grid;
	gap: 0.75rem;
}

.bella-choice {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 1.25rem;
	align-items: center;
	gap: 1.25rem;
	width: 100%;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--b-line);
	background: transparent;
	color: var(--b-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition:
		border-color 0.6s var(--b-ease),
		background-color 0.6s var(--b-ease);
}

.bella-choice:hover {
	border-color: var(--b-gold-soft);
	background: var(--b-raised);
}

.bella-choice.is-selected {
	border-color: var(--b-gold);
	background: var(--b-gold-faint);
}

.bella-choice__numeral {
	font-family: var(--b-display);
	font-size: 1.1rem;
	letter-spacing: 0.12em;
	color: var(--b-gold);
}

.bella-choice__main {
	display: grid;
	gap: 0.2rem;
}

.bella-choice__name {
	font-family: var(--b-display);
	font-size: 1.6rem;
	line-height: 1.2;
}

.bella-choice__short {
	font-size: 0.9375rem;
	color: var(--b-muted);
}

.bella-choice__meta {
	margin-top: 0.3rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--b-muted);
}

.bella-choice__price {
	font-family: var(--b-display);
	font-size: 1.75rem;
	font-weight: 300;
	color: var(--b-gold-light);
}

.bella-choice__arrow {
	color: var(--b-gold);
	transition: transform 0.6s var(--b-ease);
}

.bella-choice:hover .bella-choice__arrow {
	transform: translateX(0.25rem);
}

.bella-icon {
	display: inline-grid;
	place-items: center;
	width: 1rem;
	height: 1rem;
}

.bella-icon svg {
	width: 100%;
	height: 100%;
}

/* Time */
.bella-time {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

.bella-calendar {
	padding: clamp(1rem, 2.5vw, 1.75rem);
	border: 1px solid var(--b-line);
	background: var(--b-surface);
}

.bella-calendar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.bella-calendar__month {
	margin: 0;
	font-family: var(--b-display);
	font-size: 1.5rem;
	text-transform: capitalize;
}

.bella-calendar__nav {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 1px solid var(--b-line);
	border-radius: 50%;
	background: none;
	color: var(--b-gold);
	cursor: pointer;
	transition: border-color 0.35s var(--b-ease);
}

.bella-calendar__nav:hover:not(:disabled) {
	border-color: var(--b-gold);
}

.bella-calendar__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.bella-calendar__weekdays,
.bella-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.3rem;
}

.bella-calendar__weekdays {
	margin-bottom: 0.5rem;
}

.bella-calendar__weekdays span {
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
	color: var(--b-muted);
}

.bella-calendar__day {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: none;
	color: var(--b-text);
	font-family: var(--b-body);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	transition:
		border-color 0.35s var(--b-ease),
		background-color 0.35s var(--b-ease),
		color 0.35s var(--b-ease);
}

button.bella-calendar__day {
	cursor: pointer;
}

.bella-calendar__day.is-available::after {
	content: "";
	position: absolute;
	bottom: 18%;
	width: 0.22rem;
	height: 0.22rem;
	border-radius: 50%;
	background: var(--b-gold);
}

.bella-calendar__day.is-available:hover {
	border-color: var(--b-gold-soft);
}

.bella-calendar__day.is-unavailable {
	color: rgb(167 159 145 / 0.32);
	cursor: default;
}

.bella-calendar__day.is-today {
	border-color: var(--b-line);
}

.bella-calendar__day.is-selected {
	border-color: var(--b-gold);
	background: var(--b-gold);
	color: var(--b-ink);
}

.bella-calendar__day.is-selected::after {
	background: var(--b-ink);
}

.bella-calendar__day.is-loading {
	color: rgb(167 159 145 / 0.25);
	animation: bella-pulse 1s var(--b-ease-in-out) infinite alternate;
}

.bella-calendar__empty,
.bella-calendar__error {
	grid-column: 1 / -1;
	margin: 1rem 0 0;
	font-size: 0.9375rem;
	text-align: center;
	color: var(--b-muted);
}

.bella-calendar__error {
	color: var(--b-error);
}

.bella-slots__empty {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 1rem;
	min-height: 14rem;
	padding: 2rem;
	border: 1px dashed var(--b-line);
	text-align: center;
	color: var(--b-muted);
}

.bella-slots__empty p {
	margin: 0;
	max-width: 14rem;
}

.bella-slots__ornament {
	width: 1.5rem;
	height: 1.5rem;
	background: var(--b-gold);
	mask: var(--bella-ornament-crescent, none) center / contain no-repeat;
	opacity: 0.8;
}

.bella-slots.is-entering {
	animation: bella-daily-rise 0.5s var(--b-ease) both;
}

.bella-slots__title {
	margin: 0 0 1.25rem;
	font-family: var(--b-display);
	font-size: 1.5rem;
	line-height: 1.2;
}

.bella-slots__group + .bella-slots__group {
	margin-top: 1.25rem;
}

.bella-slots__label {
	margin: 0 0 0.6rem;
	font-size: 0.6875rem;
	color: var(--b-muted);
}

.bella-slots__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.bella-slot {
	min-width: 5.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--b-line);
	background: none;
	color: var(--b-text);
	font-family: var(--b-body);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition:
		border-color 0.35s var(--b-ease),
		background-color 0.35s var(--b-ease),
		color 0.35s var(--b-ease);
}

.bella-slot:hover {
	border-color: var(--b-gold-soft);
}

.bella-slot.is-selected {
	border-color: var(--b-gold);
	background: var(--b-gold);
	color: var(--b-ink);
}

/* Details */
.bella-form {
	display: grid;
	gap: 1.75rem;
}

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

.bella-form .bella-field {
	margin: 0;
}

.bella-field__optional {
	margin-left: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: none;
	opacity: 0.65;
}

.bella-field__error {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.875rem;
	color: var(--b-error);
}

.bella-field.is-invalid input,
.bella-field.is-invalid textarea,
.bella-field.is-invalid select {
	border-color: rgb(227 162 154 / 0.6);
	box-shadow: 0 0 0 4px rgb(227 162 154 / 0.06);
}

.bella-field.is-invalid :is(label, legend) {
	color: var(--b-error);
}

.bella-options {
	margin: 0.5rem 0 0;
	padding: 0;
	border: 0;
}

.bella-options legend {
	margin-bottom: 0.9rem;
	padding: 0;
}

.bella-options__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.bella-option {
	position: relative;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr) 1.25rem;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--b-line);
	cursor: pointer;
	transition:
		border-color 0.5s var(--b-ease),
		background-color 0.5s var(--b-ease);
}

.bella-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bella-option__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--b-gold-soft);
	border-radius: 50%;
	color: var(--b-gold);
	transition:
		border-color 0.5s var(--b-ease),
		background-color 0.5s var(--b-ease),
		transform 0.6s var(--b-ease);
}

.bella-option__icon svg {
	width: 1.3rem;
	height: 1.3rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bella-option__text {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
}

/* The selection marker: an empty ring that fills with a gold dot when chosen */
.bella-option__radio {
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid var(--b-gold-soft);
	border-radius: 50%;
	transition: border-color 0.5s var(--b-ease);
}

.bella-option__radio::after {
	content: "";
	position: absolute;
	inset: 0.25rem;
	border-radius: 50%;
	background: var(--b-gold);
	transform: scale(0);
	transition: transform 0.45s var(--b-ease);
}

.bella-option:hover {
	border-color: var(--b-gold-soft);
}

.bella-option:hover .bella-option__icon {
	transform: translateY(-0.12rem);
}

.bella-option.is-selected {
	border-color: var(--b-gold);
	background: var(--b-gold-faint);
}

.bella-option.is-selected .bella-option__icon {
	border-color: var(--b-gold);
	background: rgb(201 165 92 / 0.1);
	color: var(--b-gold-light);
}

.bella-option.is-selected .bella-option__radio {
	border-color: var(--b-gold);
}

.bella-option.is-selected .bella-option__radio::after {
	transform: scale(1);
}

.bella-option:has(input:focus-visible) {
	outline: 1px solid var(--b-gold);
	outline-offset: 3px;
}

.bella-option__title {
	font-family: var(--b-display);
	font-size: 1.35rem;
	line-height: 1.2;
}

.bella-option__note {
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--b-muted);
}

.bella-options.is-invalid .bella-option {
	border-color: rgb(227 162 154 / 0.5);
}

.bella-booking__checks {
	display: grid;
	gap: 1rem;
	margin-top: 0.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--b-line);
}

.bella-check-wrap.is-invalid .bella-check input {
	border-color: var(--b-error);
}

.bella-check-wrap .bella-field__error {
	margin-left: 1.95rem;
}

/* Summary lists */
.bella-summary-list {
	margin: 0;
}

.bella-summary-list > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--b-line);
}

.bella-summary-list dt {
	flex: 0 0 auto;
	font-size: 0.6875rem;
	color: var(--b-muted);
}

.bella-summary-list dd {
	margin: 0;
	text-align: right;
	color: var(--b-text);
}

.bella-summary-list .is-empty dd {
	color: rgb(167 159 145 / 0.55);
}

.bella-booking__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 1.5rem;
	color: var(--b-muted);
}

.bella-booking__total strong,
.bella-booking__summary-total strong {
	font-family: var(--b-display);
	font-size: 2.25rem;
	font-weight: 300;
	color: var(--b-gold-light);
}

/* Actions */
.bella-booking__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--b-line);
}

.bella-booking__actions:empty {
	display: none;
}

.bella-booking__back {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: var(--b-muted);
	font-family: var(--b-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.35s var(--b-ease);
}

.bella-booking__back:hover {
	color: var(--b-text);
}

/* Summary panel */
.bella-booking__summary {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
	padding: 2rem;
	border: 1px solid var(--b-line);
	background: var(--b-surface);
}

.bella-booking__summary .is-style-eyebrow {
	margin: 0;
}

.bella-booking__summary-name {
	margin: 1rem 0 0.5rem;
	font-family: var(--b-display);
	font-size: 1.75rem;
	line-height: 1.15;
}

.bella-booking__summary .bella-summary-list > div {
	padding: 0.7rem 0;
	font-size: 0.9375rem;
}

.bella-booking__summary .bella-summary-list > div:first-child {
	display: none;
}

.bella-booking__summary-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 1.25rem;
	color: var(--b-muted);
}

.bella-booking__summary-note {
	margin: 1.25rem 0 0;
	font-size: 0.8125rem;
	color: var(--b-muted);
}

/* Phone bar */
.bella-booking__bar {
	display: none;
}

@media (max-width: 960px) {
	.bella-booking__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.bella-booking__summary {
		display: none;
	}

	.bella-time {
		grid-template-columns: minmax(0, 1fr);
	}

	.bella-booking__actions .bella-button {
		display: none;
	}

	.bella-booking__actions {
		margin-top: 2rem;
	}

	.bella-booking.is-ready {
		padding-bottom: 5.5rem;
	}

	.bella-booking__bar[hidden] {
		display: none;
	}

	.bella-booking__bar {
		position: fixed;
		inset: auto 0 0;
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.85rem max(1rem, 4vw) calc(0.85rem + env(safe-area-inset-bottom));
		border-top: 1px solid var(--b-line);
		background: rgb(14 13 12 / 0.97);
		animation: bella-bar-in 0.5s var(--b-ease) both;
	}

	.bella-booking__bar-text {
		display: grid;
		min-width: 0;
		font-size: 0.875rem;
		line-height: 1.35;
		color: var(--b-muted);
	}

	.bella-booking__bar-text span {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.bella-booking__bar-text strong {
		font-family: var(--b-display);
		font-size: 1.35rem;
		font-weight: 400;
		color: var(--b-gold-light);
	}

	.bella-booking__bar .bella-button {
		flex: 0 0 auto;
		padding: 1.05em 1.5em;
	}
}

@keyframes bella-bar-in {
	from { transform: translateY(100%); }
	to { transform: none; }
}

@media (max-width: 600px) {
	.bella-progress__label {
		font-size: 0.5625rem;
		letter-spacing: 0.14em;
	}

	.bella-progress__step + .bella-progress__step::before {
		right: calc(50% + 1.6rem);
		left: calc(-50% + 1.6rem);
	}

	.bella-choice {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.75rem 1rem;
		padding: 1.25rem;
	}

	.bella-choice__numeral,
	.bella-choice__arrow {
		display: none;
	}

	.bella-form__row,
	.bella-options__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Done: a gold seal draws itself, light spreads out, dust rises, then the details appear */
.bella-booking__done {
	display: grid;
	justify-items: center;
	max-width: 34rem;
	margin: 0 auto;
	padding: clamp(3rem, 8vw, 6rem) 0 1rem;
	text-align: center;
}

.bella-booking__done > :not(.bella-booking__seal) {
	animation: bella-daily-rise 0.9s var(--b-ease) both;
}

.bella-booking__done > :nth-child(2) { animation-delay: 1.3s; }
.bella-booking__done > :nth-child(3) { animation-delay: 1.42s; }
.bella-booking__done > :nth-child(4) { animation-delay: 1.54s; }
.bella-booking__done > :nth-child(5) { animation-delay: 1.66s; }
.bella-booking__done > :nth-child(6) { animation-delay: 1.78s; }
.bella-booking__done > :nth-child(7) { animation-delay: 1.9s; }

.bella-booking__seal {
	position: relative;
	width: 6.5rem;
	height: 6.5rem;
	margin-bottom: 2rem;
}

/* Soft light behind the seal, and a ring that spreads out once */
.bella-booking__seal::before,
.bella-booking__seal::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
}

.bella-booking__seal::before {
	inset: -60%;
	background: radial-gradient(closest-side, rgb(201 165 92 / 0.22), transparent);
	opacity: 0;
	animation: bella-seal-glow 2.4s var(--b-ease) 1s forwards;
}

.bella-booking__seal::after {
	border: 1px solid var(--b-gold);
	opacity: 0;
	animation: bella-seal-ripple 1.8s var(--b-ease) 1.1s;
}

.bella-booking__burst {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22rem;
	height: 22rem;
	translate: -50% -50%;
	pointer-events: none;
}

.bella-booking__seal-mark,
.bella-booking__seal-mark svg {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.bella-seal__ring {
	fill: none;
	stroke: var(--b-gold);
	stroke-width: 1.2;
	stroke-dasharray: 340;
	stroke-dashoffset: 340;
	transform: rotate(-90deg);
	transform-origin: 60px 60px;
	animation: bella-draw 1.3s var(--b-ease-in-out) 0.15s forwards;
}

.bella-seal__check {
	fill: none;
	stroke: var(--b-gold-light);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 70;
	stroke-dashoffset: 70;
	animation: bella-draw 0.6s var(--b-ease) 1s forwards;
}

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

@keyframes bella-seal-ripple {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(2.4);
	}
}

@keyframes bella-seal-glow {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bella-booking__done > *,
	.bella-seal__ring,
	.bella-seal__check {
		animation: none !important;
	}

	.bella-seal__ring,
	.bella-seal__check {
		stroke-dashoffset: 0;
	}

	.bella-booking__seal::before {
		opacity: 1;
	}
}

/* "Confirming" with three soft dots */
.bella-button.is-busy[disabled] {
	opacity: 1;
	gap: 0.6rem;
}

.bella-busy {
	display: inline-flex;
	gap: 0.25rem;
}

.bella-busy span {
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 50%;
	background: currentColor;
	animation: bella-pulse 0.9s var(--b-ease-in-out) infinite alternate;
}

.bella-busy span:nth-child(2) { animation-delay: 0.15s; }
.bella-busy span:nth-child(3) { animation-delay: 0.3s; }

/* After choosing a time on a phone, the Continue button glows once */
.bella-button.is-calling {
	animation: bella-call 1.6s var(--b-ease) 0.1s;
}

@keyframes bella-call {
	0% {
		box-shadow: 0 0 0 0 rgb(201 165 92 / 0.55);
	}

	100% {
		box-shadow: 0 0 0 0.9rem rgb(201 165 92 / 0);
	}
}

.bella-booking__done .is-style-eyebrow {
	margin: 0;
}

.bella-booking__done h1 {
	margin: 0.9rem 0 0;
	font-family: var(--b-display);
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 300;
	outline: none;
}

.bella-booking__done-intro {
	margin: 1rem 0 2rem;
	color: var(--b-muted);
}

.bella-booking__done .bella-summary-list {
	width: 100%;
	text-align: left;
}

.bella-booking__done-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 2rem;
	margin-top: 2.5rem;
}

.bella-booking__done-note {
	margin: 2rem 0 0;
	font-size: 0.8125rem;
	color: var(--b-muted);
}

/* 6. Manage booking */

.bella-manage {
	max-width: 38rem;
	margin-inline: auto;
}

.bella-manage__preview {
	margin: 0 0 2rem;
}

.bella-manage__card {
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border: 1px solid var(--b-line);
	background: var(--b-surface);
}

.bella-manage__status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.bella-manage__badge {
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--b-gold-soft);
	font-size: 0.625rem;
	color: var(--b-gold);
}

.bella-manage__card.is-cancelled .bella-manage__badge,
.bella-manage.is-cancelled .bella-manage__badge {
	border-color: var(--b-line);
	color: var(--b-muted);
}

.bella-manage__ref {
	font-size: 0.625rem;
	color: var(--b-muted);
}

.bella-manage__title {
	margin: 1.5rem 0 1rem;
	font-family: var(--b-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 300;
}

.bella-manage__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.bella-manage__confirm {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--b-line);
}

.bella-manage__confirm p {
	margin: 0;
}

.bella-manage__confirm .bella-manage__actions {
	margin-top: 1.25rem;
}

.bella-manage__cancelled {
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--b-line);
	color: var(--b-text);
	outline: none;
}

.bella-manage__card.is-cancelled .bella-summary-list,
.bella-manage.is-cancelled .bella-summary-list {
	opacity: 0.55;
}

.bella-manage__policy {
	margin: 1.5rem 0 0;
	font-size: 0.875rem;
	text-align: center;
	color: var(--b-muted);
}

/* Manage: notes, errors and the empty state */
.bella-manage__note {
	margin: 1.75rem 0 0;
	color: var(--b-muted);
}

.bella-manage__error {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: var(--b-error);
}

.bella-manage__cancelled p {
	margin: 0 0 1.25rem;
}

.bella-manage__card--empty {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	text-align: center;
}

.bella-manage__card--empty .bella-manage__title {
	margin: 0.75rem 0 0;
}

.bella-manage__card--empty p {
	margin: 0.5rem 0 0;
	color: var(--b-muted);
}

/* Booking: notices, the "state" screens and the gift card field */
.bella-booking__notice,
.bella-booking__error {
	margin: 0 0 1.75rem;
}

.bella-booking__error {
	margin: 1.75rem 0 0;
	border-left-color: var(--b-error);
}

.bella-booking__state {
	display: grid;
	justify-items: center;
	gap: 0.75rem;
	max-width: 30rem;
	margin: 0 auto;
	padding: 4rem 0 2rem;
	text-align: center;
	animation: bella-daily-rise 0.8s var(--b-ease) both;
}

.bella-booking__state h2 {
	margin: 0.5rem 0 0;
	font-family: var(--b-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 300;
	outline: none;
}

.bella-booking__state p {
	margin: 0;
	color: var(--b-muted);
}

.bella-booking__total.is-gift,
.bella-booking__summary-total.is-gift {
	margin-top: 1rem;
	font-size: 0.9375rem;
}

.bella-gift__open {
	justify-self: start;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--b-gold);
	font-family: var(--b-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.6s var(--b-ease);
}

.bella-gift__open:hover {
	color: var(--b-gold-light);
}

.bella-gift__row {
	display: flex;
	gap: 0.75rem;
}

.bella-gift__row input {
	flex: 1;
	min-width: 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.bella-gift__row .bella-button {
	flex: 0 0 auto;
}

.bella-gift.is-applied {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--b-gold-soft);
	border-radius: var(--b-radius-surface);
	background: var(--b-gold-faint);
	animation: bella-daily-rise 0.6s var(--b-ease) both;
}

.bella-gift__mark {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--b-gold);
	border-radius: 50%;
	color: var(--b-gold-light);
}

.bella-gift__mark svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

.bella-gift__text {
	display: grid;
	gap: 0.15rem;
}

.bella-gift__text strong {
	font-weight: 500;
	letter-spacing: 0.08em;
}

.bella-gift__text span {
	font-size: 0.875rem;
	color: var(--b-muted);
}

/* 7. Contact form */

.bella-contact-form .bella-notice {
	margin: 0 0 2rem;
}

.bella-form__trap {
	position: absolute;
	left: -9999px;
}

.bella-form__submit {
	margin: 0.5rem 0 0;
}

@media (max-width: 600px) {
	.bella-contact-form .bella-form__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Editor */

.bella-editor-placeholder {
	padding: 2rem;
	border: 1px dashed rgb(201 165 92 / 0.4);
	text-align: center;
}

.bella-editor-note {
	margin: 0;
	font-size: 0.875rem;
	color: #a79f91;
}

.bella-editor-hero-card {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.bella-editor-hero-card > * {
	pointer-events: auto;
}

/* Events */

.bella-event-list {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bella-event {
	position: relative;
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	align-items: start;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	overflow: hidden;
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius-surface);
	background:
		radial-gradient(60% 120% at 0% 0%, rgb(201 165 92 / 0.07), transparent 70%),
		var(--b-surface);
	transition:
		border-color var(--bella-hover, 0.6s) var(--b-ease),
		transform var(--bella-hover, 0.6s) var(--b-ease),
		box-shadow var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-event:hover {
	border-color: rgb(201 165 92 / 0.32);
	box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.7);
	transform: translateY(-2px);
}

/* The date sits in a small arch, like the top of a tarot card. */
.bella-event__stub {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 0.5rem;
	aspect-ratio: 3 / 4;
	padding: 1.25rem 0.5rem 1rem;
	border: 1px solid var(--b-gold-soft);
	border-radius: 999px 999px var(--b-radius) var(--b-radius);
	background: linear-gradient(180deg, rgb(201 165 92 / 0.1), rgb(201 165 92 / 0.02));
	text-align: center;
	transition: border-color var(--bella-hover, 0.6s) var(--b-ease), background-color var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-event:hover .bella-event__stub {
	border-color: var(--b-gold);
}

.bella-event__weekday,
.bella-event__month {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--b-gold);
}

.bella-event__weekday {
	color: var(--b-muted);
}

.bella-event__day {
	font-family: var(--b-display);
	font-size: 3.5rem;
	font-weight: 300;
	font-variant-numeric: lining-nums;
	line-height: 0.85;
	color: var(--b-gold-light);
}

.bella-event__main {
	display: grid;
	gap: 0.85rem;
	min-width: 0;
	padding-top: 0.35rem;
}

.bella-event__main > * {
	margin: 0;
}

.bella-event__when {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--b-gold);
}

.bella-event__title {
	font-family: var(--b-display);
	font-size: clamp(1.6rem, 2.8vw, 2.1rem);
	font-weight: 400;
	line-height: 1.15;
}

.bella-event__facts {
	display: grid;
	gap: 0.45rem;
	padding: 0;
	list-style: none;
	color: var(--b-text);
}

.bella-event__facts li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0;
}

.bella-event__facts svg,
.bella-event__action svg {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: var(--b-gold);
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bella-event__facts svg {
	margin-top: 0.2rem;
}

.bella-event__note {
	max-width: 36rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--b-muted);
}

.bella-event__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-top: 0.6rem !important;
}

.bella-event__action {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1.1rem;
	border: 1px solid var(--b-gold-soft);
	border-radius: var(--b-radius);
	color: var(--b-text);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		border-color var(--bella-hover, 0.6s) var(--b-ease),
		background-color var(--bella-hover, 0.6s) var(--b-ease),
		color var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-event__action svg {
	transition: transform var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-event__action:hover {
	border-color: var(--b-gold);
	background: var(--b-gold-faint);
	color: var(--b-gold-light);
}

.bella-event__action:hover svg {
	transform: translateY(-1px);
}

.bella-event__action:focus-visible {
	outline: 1px solid var(--b-gold);
	outline-offset: 3px;
}

.bella-event__more {
	margin-left: 0.5rem;
}

@media (max-width: 640px) {
	.bella-event {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		gap: 0 1.1rem;
		padding: 1.25rem;
	}

	.bella-event__stub {
		grid-row: 1 / span 2;
		align-self: start;
		gap: 0.3rem;
		padding: 0.85rem 0.25rem 0.7rem;
	}

	.bella-event__day {
		font-size: 2.25rem;
	}

	.bella-event__weekday,
	.bella-event__month {
		font-size: 0.5625rem;
		letter-spacing: 0.18em;
	}

	.bella-event__main {
		display: contents;
	}

	.bella-event__when {
		grid-column: 2;
		align-self: end;
		padding-top: 0.5rem;
	}

	.bella-event__title {
		grid-column: 2;
		align-self: start;
		margin-top: 0.4rem !important;
	}

	.bella-event__facts,
	.bella-event__note,
	.bella-event__actions {
		grid-column: 1 / -1;
	}

	.bella-event__facts {
		margin-top: 1.25rem !important;
	}

	.bella-event__note {
		margin-top: 0.75rem !important;
	}

	.bella-event__actions {
		gap: 0.6rem;
		margin-top: 1.25rem !important;
	}

	.bella-event__action {
		flex: 1 1 auto;
		justify-content: center;
		padding: 0.75rem 0.7rem;
		letter-spacing: 0.14em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bella-event:hover {
		transform: none;
	}
}

/* Newsletter signup */

.bella-signup {
	width: 100%;
	max-width: 30rem;
	transition: opacity 0.45s var(--b-ease), transform 0.45s var(--b-ease);
}

.bella-signup.is-leaving {
	opacity: 0;
	transform: translateY(0.4rem);
}

.bella-signup__row {
	display: flex;
	gap: 0.75rem;
}

.bella-signup__row .bella-input {
	flex: 1;
	min-width: 0;
}

.bella-signup__row .bella-button {
	flex: 0 0 auto;
}

.bella-signup.is-invalid .bella-input {
	border-color: rgb(227 162 154 / 0.6);
	box-shadow: 0 0 0 4px rgb(227 162 154 / 0.06);
}

.bella-signup__note {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	color: var(--b-muted);
}

.bella-signup__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bella-signup__note .bella-field__error {
	margin: 0;
}

.bella-signup__done {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	outline: none;
	animation: bella-rise 0.8s var(--b-ease) both;
}

.bella-signup__done[hidden] {
	display: none;
}

.bella-signup__mark {
	flex: 0 0 2.75rem;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.7rem;
	border: 1px solid var(--b-gold-soft);
	border-radius: 50%;
	fill: none;
	stroke: var(--b-gold);
	stroke-width: 1.2;
	stroke-linejoin: round;
}

@keyframes bella-rise {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
}

@media (max-width: 600px) {
	.bella-signup__row {
		flex-direction: column;
	}
}

/* Gift card purchase */

.bella-giftform {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(2.5rem, 6vw, 6rem);
}

.bella-giftform__preview {
	position: sticky;
	top: calc(var(--bella-header-bottom, 5rem) + 2rem);
	perspective: 1200px;
}

.bella-giftcard {
	position: relative;
	aspect-ratio: 1.6;
	padding: 0.6rem;
	border-radius: var(--b-radius-surface);
	background:
		radial-gradient(120% 90% at 85% 0%, rgb(201 165 92 / 0.16), transparent 60%),
		radial-gradient(90% 80% at 0% 100%, rgb(122 38 38 / 0.22), transparent 65%),
		var(--b-raised);
	box-shadow:
		0 2.5rem 4rem -1.5rem rgb(0 0 0 / 0.65),
		inset 0 0 0 1px rgb(201 165 92 / 0.18);
	transform: rotate(-2.5deg);
	transition: transform 1.2s var(--b-ease);
}

.bella-giftform__preview:hover .bella-giftcard {
	transform: rotate(-1deg) translateY(-0.35rem);
}

.bella-giftcard.is-noticed {
	animation: bella-gift-notice 0.9s var(--b-ease);
}

@keyframes bella-gift-notice {
	40% {
		transform: rotate(-1.5deg) translateY(-0.4rem) scale(1.01);
	}
}

.bella-giftcard__frame {
	display: grid;
	grid-template-rows: auto 1fr auto auto auto;
	height: 100%;
	padding: clamp(1.1rem, 3vw, 1.75rem);
	border: 1px solid rgb(201 165 92 / 0.35);
	border-radius: var(--b-radius);
}

.bella-giftcard p {
	margin: 0;
}

.bella-giftcard__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.bella-giftcard__brand {
	font-family: var(--b-display);
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	color: var(--b-text);
}

.bella-giftcard__kind,
.bella-giftcard__foot {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--b-gold);
}

.bella-giftcard__amount {
	align-self: center;
	font-family: var(--b-display);
	font-size: clamp(3rem, 7vw, 4.75rem);
	font-weight: 300;
	font-variant-numeric: lining-nums;
	line-height: 1;
	color: var(--b-gold-light);
	transition: opacity 0.22s var(--b-ease), transform 0.22s var(--b-ease);
}

.bella-giftcard__amount.is-changing {
	opacity: 0;
	transform: translateY(0.3rem);
}

.bella-giftcard__for {
	font-family: var(--b-display);
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	color: var(--b-text);
	overflow-wrap: anywhere;
}

.bella-giftcard__message {
	display: -webkit-box;
	margin-top: 0.35rem !important;
	overflow: hidden;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--b-muted);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: anywhere;
}

.bella-giftcard__for:not([hidden]),
.bella-giftcard__message:not([hidden]) {
	animation: bella-rise 0.6s var(--b-ease) both;
}

.bella-giftcard__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-top: 1rem !important;
	padding-top: 0.9rem;
	border-top: 1px solid rgb(201 165 92 / 0.18);
	font-size: 0.625rem;
	color: var(--b-muted);
}

.bella-giftform__heading {
	margin: 0 0 1rem;
	font-family: var(--b-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 300;
}

.bella-giftform__state p {
	color: var(--b-muted);
}

.bella-giftform__small {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--b-muted);
}

.bella-amounts {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bella-option--plain {
	grid-template-columns: minmax(0, 1fr) 1.25rem;
	align-items: start;
}

.bella-option--plain .bella-option__radio {
	margin-top: 0.2rem;
}

.bella-amounts__other {
	margin: 1rem 0 0 !important;
	max-width: 14rem;
	animation: bella-rise 0.5s var(--b-ease) both;
}

.bella-amounts__other[hidden] {
	display: none;
}

.bella-field__hint {
	font-size: 0.8125rem;
	color: var(--b-muted);
}

.bella-field.is-invalid .bella-field__hint {
	display: none;
}

.bella-giftform__error {
	margin: 0;
	padding: 0.9rem 1.1rem;
	border-left: 2px solid var(--b-error);
	border-radius: var(--b-radius-surface);
	background: rgb(227 162 154 / 0.06);
	color: var(--b-text);
}

.bella-giftform__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

@media (max-width: 900px) {
	.bella-giftform {
		grid-template-columns: minmax(0, 1fr);
	}

	.bella-giftform__preview {
		position: relative;
		top: 0;
		max-width: 26rem;
		width: 100%;
		margin-inline: auto;
	}
}

@media (max-width: 600px) {
	.bella-amounts,
	.bella-giftform .bella-form__row {
		grid-template-columns: minmax(0, 1fr);
	}

	/* On a phone the card grows with its text instead of keeping a fixed shape. */
	.bella-giftcard {
		aspect-ratio: auto;
	}

	.bella-giftcard__frame {
		min-height: 13rem;
	}

	.bella-giftcard__amount {
		margin: 1.25rem 0 !important;
	}
}

/* Card library */

/* Groups: the Major Arcana and the four suits, with quick links between them */
.bella-library__jump {
	position: sticky;
	top: calc(var(--bella-header-bottom, 5rem) + 0.75rem);
	transition: top 0.6s var(--b-ease);
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	width: fit-content;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
	padding: 0.35rem;
	border-radius: 999px;
	background: rgb(22 20 18 / 0.82);
	backdrop-filter: blur(10px);
	box-shadow: 0 0 0 1px var(--b-line);
}

.bella-library__jump a {
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	color: var(--b-muted);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--bella-hover, 0.6s) var(--b-ease), background-color var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-library__jump a:hover,
.bella-library__jump a.is-current {
	background: rgb(201 165 92 / 0.1);
	color: var(--b-gold-light);
}

.bella-library__group {
	scroll-margin-top: calc(var(--bella-header-bottom, 5rem) + 5.5rem);
}

.bella-library__group + .bella-library__group {
	margin-top: clamp(4rem, 8vw, 7rem);
}

.bella-library__head {
	max-width: 36rem;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.bella-library__title {
	margin: 0;
	font-family: var(--b-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 300;
}

.bella-library__line {
	margin: 0.75rem 0 0;
	color: var(--b-muted);
}

@media (max-width: 600px) {
	.bella-library__jump {
		flex-wrap: nowrap;
		justify-content: flex-start;
		width: auto;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
		border-radius: var(--b-radius-surface);
	}

	.bella-library__jump::-webkit-scrollbar {
		display: none;
	}

	.bella-library__jump a {
		flex: 0 0 auto;
		padding: 0.55rem 0.85rem;
	}
}

/* Rows of cards; a shorter last row stays centred. */
.bella-library__grid {
	--bella-cols: 6;
	--bella-gap: clamp(1rem, 2.5vw, 2rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.75rem, 3vw, 3rem) var(--bella-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bella-library__item {
	flex: 0 0 calc((100% - (var(--bella-cols) - 1) * var(--bella-gap)) / var(--bella-cols));
	margin: 0;
	scroll-margin-top: 8rem;
}

.bella-library__card {
	display: grid;
	gap: 0.35rem;
	justify-items: center;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.bella-library__image {
	display: block;
	width: 100%;
	margin-bottom: 0.75rem;
	overflow: hidden;
	border-radius: var(--b-radius-surface);
	box-shadow: 0 1.25rem 2rem -1rem rgb(0 0 0 / 0.6);
	transition:
		transform var(--bella-hover, 0.6s) var(--b-ease),
		box-shadow var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-library__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 560 / 963;
	object-fit: cover;
}

.bella-library__numeral {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	color: var(--b-gold);
}

.bella-library__name {
	font-family: var(--b-display);
	font-size: 1.2rem;
	line-height: 1.25;
	transition: color var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-library__card:hover .bella-library__image,
.bella-library__card:focus-visible .bella-library__image {
	transform: translateY(-0.4rem);
	box-shadow: 0 1.75rem 2.5rem -1rem rgb(0 0 0 / 0.7), 0 0 0 1px rgb(201 165 92 / 0.35);
}

.bella-library__card:hover .bella-library__name {
	color: var(--b-gold-light);
}

.bella-library__card:focus-visible {
	outline: none;
}

.bella-library__card:focus-visible .bella-library__name {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

@media (max-width: 1100px) {
	.bella-library__grid {
		--bella-cols: 4;
	}
}

@media (max-width: 700px) {
	.bella-library__grid {
		--bella-cols: 3;
	}

	.bella-library__name {
		font-size: 1rem;
	}
}

@media (max-width: 460px) {
	.bella-library__grid {
		--bella-cols: 2;
	}
}

/* The open card */
.bella-has-dialog {
	overflow: hidden;
}

.bella-cardview {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: clip;
	border: 0;
	background: rgb(10 9 8);
	color: var(--b-text);
}

.bella-cardview::backdrop {
	background: rgb(8 7 6 / 0.6);
	backdrop-filter: blur(8px);
}

.bella-cardview[open] {
	animation: bella-fade-in 0.5s var(--b-ease) both;
}

.bella-cardview[open] .bella-cardview__shell {
	animation: bella-view-in 0.8s var(--b-ease) both;
}

.bella-cardview.is-closing {
	animation: bella-fade-out 0.32s var(--b-ease) both;
}

@keyframes bella-view-in {
	from {
		opacity: 0;
		transform: translateY(1.25rem) scale(0.985);
	}
}

@keyframes bella-view-out {
	to {
		opacity: 0;
		transform: translateY(0.5rem) scale(0.99);
	}
}

@keyframes bella-fade-in {
	from {
		opacity: 0;
	}
}

@keyframes bella-fade-out {
	to {
		opacity: 0;
	}
}

/* A slow, quiet light behind the deck */
.bella-cardview__sky {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.bella-cardview__light {
	position: absolute;
	width: 60vmax;
	height: 60vmax;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.8;
}

.bella-cardview__light.is-one {
	top: -10vmax;
	left: -5vmax;
	background: radial-gradient(circle, rgb(201 165 92 / 0.26), transparent 65%);
	animation: bella-drift-one 28s var(--b-ease-in-out) infinite alternate;
}

.bella-cardview__light.is-two {
	right: -15vmax;
	bottom: -20vmax;
	background: radial-gradient(circle, rgb(122 38 38 / 0.28), transparent 65%);
	animation: bella-drift-two 34s var(--b-ease-in-out) infinite alternate;
}

/* Tiny specks of gold that rise very slowly */
.bella-cardview__dust {
	position: absolute;
	inset: -100% 0 0;
	background-image:
		radial-gradient(1px 1px at 12% 18%, rgb(227 204 148 / 0.55), transparent 60%),
		radial-gradient(1px 1px at 38% 72%, rgb(227 204 148 / 0.4), transparent 60%),
		radial-gradient(1.5px 1.5px at 64% 34%, rgb(227 204 148 / 0.45), transparent 60%),
		radial-gradient(1px 1px at 82% 86%, rgb(227 204 148 / 0.35), transparent 60%),
		radial-gradient(1px 1px at 92% 12%, rgb(227 204 148 / 0.4), transparent 60%),
		radial-gradient(1.5px 1.5px at 24% 54%, rgb(227 204 148 / 0.3), transparent 60%);
	background-size: 420px 420px;
	animation: bella-dust 90s linear infinite;
}

@keyframes bella-drift-one {
	to {
		transform: translate(18vmax, 10vmax) scale(1.15);
	}
}

@keyframes bella-drift-two {
	to {
		transform: translate(-16vmax, -12vmax) scale(0.9);
	}
}

@keyframes bella-dust {
	to {
		transform: translateY(50%);
	}
}

.bella-cardview__shell {
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	width: min(84rem, 100%);
	height: 100%;
	margin-inline: auto;
	padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 4vw, 3rem) 0;
}

.bella-cardview__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 2.75rem;
}

.bella-cardview__top p {
	margin: 0;
}

.bella-cardview__count {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	font-variant-numeric: tabular-nums;
	text-transform: uppercase;
	color: var(--b-muted);
}

.bella-cardview__body {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
	min-height: 0;
}

/* The deck: the open card in the middle, its neighbours tilted and faded at the sides. */
.bella-cardview__stage {
	position: relative;
	height: 100%;
	min-height: 0;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.bella-cardview__track {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transform: translateX(var(--bella-drag, 0));
	transition: transform 0.55s var(--b-ease);
}

.bella-cardview__stage.is-dragging {
	cursor: grabbing;
}

.bella-cardview__stage.is-dragging .bella-cardview__track {
	transition: none;
}

.bella-cardview__slide img {
	-webkit-user-drag: none;
	pointer-events: none;
}

.bella-cardview__slide {
	grid-area: 1 / 1;
	height: min(100%, 38rem);
	max-height: calc(100dvh - 15rem);
	aspect-ratio: 560 / 963;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--b-radius-surface);
	background: var(--b-raised);
	box-shadow: 0 2.5rem 4rem -1.5rem rgb(0 0 0 / 0.85);
	cursor: pointer;
	transition:
		transform 0.75s var(--b-ease),
		opacity 0.75s var(--b-ease),
		filter 0.75s var(--b-ease);
	filter: brightness(0.7) saturate(0.85);
}

.bella-cardview__slide.is-current {
	cursor: default;
	filter: none;
	box-shadow: 0 2.5rem 4.5rem -1.5rem rgb(0 0 0 / 0.9), 0 0 0 1px rgb(201 165 92 / 0.25);
}

.bella-cardview__slide:not(.is-current):hover {
	filter: brightness(0.85) saturate(0.95);
}

.bella-cardview__slide.is-instant {
	transition: none;
}

.bella-cardview__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bella-cardview__arrow {
	position: absolute;
	top: 50%;
	z-index: 20;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid var(--b-gold-soft);
	border-radius: 50%;
	background: rgb(14 13 12 / 0.6);
	backdrop-filter: blur(4px);
	color: var(--b-text);
	cursor: pointer;
	transform: translateY(-50%);
	transition:
		border-color var(--bella-hover, 0.6s) var(--b-ease),
		background-color var(--bella-hover, 0.6s) var(--b-ease),
		color var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-cardview__arrow.is-prev {
	left: 12%;
}

.bella-cardview__arrow.is-next {
	right: 12%;
}

.bella-cardview__arrow svg,
.bella-cardview__close svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-cardview__arrow:hover {
	border-color: var(--b-gold);
	background: rgb(30 27 24 / 0.85);
	color: var(--b-gold-light);
}

.bella-cardview__arrow.is-prev:hover svg {
	transform: translateX(-2px);
}

.bella-cardview__arrow.is-next:hover svg {
	transform: translateX(2px);
}

.bella-cardview__arrow:focus-visible,
.bella-cardview__close:focus-visible,
.bella-cardview__strip button:focus-visible,
.bella-cardview__next button:focus-visible {
	outline: 1px solid var(--b-gold);
	outline-offset: 3px;
}

/* The text beside the card */
.bella-cardview__text {
	max-width: 30rem;
	transition: opacity 0.24s var(--b-ease), transform 0.24s var(--b-ease);
}

.bella-cardview__text.is-turning {
	opacity: 0;
	transform: translateX(calc(var(--bella-turn) * -0.9rem));
}

.bella-cardview__text.is-arriving {
	opacity: 0;
	transform: translateX(calc(var(--bella-turn) * 0.9rem));
	transition: none;
}

.bella-cardview__text p {
	margin: 0;
}

.bella-cardview__numeral {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--b-gold);
}

.bella-cardview__name {
	margin: 0.75rem 0 0;
	font-family: var(--b-display);
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	font-weight: 300;
	line-height: 1.05;
}

.bella-cardview__keywords {
	margin-top: 1rem !important;
	color: var(--b-gold-light);
}

.bella-cardview__meaning {
	margin-top: 1.25rem !important;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--b-muted);
}

.bella-cardview__next {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	margin-top: 2rem !important;
	padding-top: 1.25rem;
	border-top: 1px solid var(--b-line);
}

.bella-cardview__next span {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--b-muted);
}

.bella-cardview__next button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--b-text);
	font-family: var(--b-display);
	font-size: 1.25rem;
	cursor: pointer;
	transition: color var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-cardview__next button::after {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 0.6rem;
	margin-left: 0.7rem;
	background: currentColor;
	mask:
		var(--bella-ornament-arrow) right center / 0.36rem 0.6rem no-repeat,
		linear-gradient(#000 0 0) left center / calc(100% - 1px) 1px no-repeat;
	transition: width var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-cardview__next button:hover {
	color: var(--b-gold-light);
}

.bella-cardview__next button:hover::after {
	width: 2.25rem;
}

.bella-cardview__book {
	margin-top: 1.75rem !important;
}

.bella-cardview__close {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--b-muted);
	cursor: pointer;
	transition: color var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-cardview__close svg {
	width: 1.15rem;
	height: 1.15rem;
}

.bella-cardview__close:hover {
	color: var(--b-gold-light);
}

.bella-cardview__close:hover svg {
	transform: rotate(90deg);
}

/* The whole deck in small, with the open card raised */
.bella-cardview__strip {
	margin-inline: calc(clamp(1rem, 4vw, 3rem) * -1);
	padding: 1.25rem 0 clamp(1rem, 2.5vw, 1.5rem);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bella-cardview__strip::-webkit-scrollbar {
	display: none;
}

.bella-cardview__strip ol {
	display: flex;
	gap: 0.6rem;
	width: max-content;
	margin: 0;
	padding: 0.5rem 50% 0;
	list-style: none;
}

.bella-cardview__strip li {
	margin: 0;
}

.bella-cardview__strip button {
	display: block;
	width: 2.9rem;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--b-radius);
	background: var(--b-raised);
	cursor: pointer;
	opacity: 0.4;
	transition:
		opacity var(--bella-hover, 0.6s) var(--b-ease),
		transform var(--bella-hover, 0.6s) var(--b-ease),
		box-shadow var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-cardview__strip img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 120 / 206;
}

.bella-cardview__strip button:hover {
	opacity: 0.8;
	transform: translateY(-2px);
}

.bella-cardview__strip button.is-current {
	opacity: 1;
	transform: translateY(-0.4rem);
	box-shadow: 0 0 0 1px var(--b-gold), 0 0.75rem 1.25rem -0.5rem rgb(0 0 0 / 0.8);
}

@media (max-width: 900px) {
	.bella-cardview__body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(15rem, 1fr) auto;
		align-items: start;
		gap: 1.25rem;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-bottom: 0.5rem;
	}

	.bella-cardview__stage {
		height: 100%;
		min-height: 15rem;
	}

	.bella-cardview__book .bella-button {
		width: 100%;
		max-width: 20rem;
	}

	.bella-cardview__slide {
		height: 100%;
		max-height: 50dvh;
	}

	.bella-cardview__arrow {
		width: 2.5rem;
		height: 2.5rem;
	}

	.bella-cardview__arrow.is-prev {
		left: 0.75rem;
	}

	.bella-cardview__arrow.is-next {
		right: 0.75rem;
	}

	.bella-cardview__text {
		max-width: 36rem;
		margin-inline: auto;
		text-align: center;
	}

	.bella-cardview__next {
		justify-content: center;
	}

	.bella-cardview__strip {
		padding-top: 0.75rem;
	}

	.bella-cardview__strip button {
		width: 2.4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bella-cardview[open],
	.bella-cardview[open] .bella-cardview__shell,
	.bella-cardview.is-closing,
	.bella-giftcard.is-noticed {
		animation: none;
	}

	.bella-cardview__slide,
	.bella-cardview__text {
		transition: none;
	}

	.bella-cardview__light,
	.bella-cardview__dust {
		animation: none;
	}
}

/* Short message at the bottom of the page, for example after confirming the newsletter */

.bella-toast {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 1rem;
	width: fit-content;
	max-width: 32rem;
	margin-inline: auto;
	padding: 1rem 0.75rem 1rem 1.35rem;
	border-radius: var(--b-radius-surface);
	background: var(--b-raised);
	box-shadow: 0 0 0 1px rgb(201 165 92 / 0.25), 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.7);
	color: var(--b-text);
	animation: bella-toast-in 0.8s var(--b-ease) 0.4s both;
}

.bella-toast p {
	margin: 0;
	font-size: 0.9375rem;
}

.bella-toast.is-closing {
	animation: bella-view-out 0.4s var(--b-ease) both;
}

.bella-toast__close {
	display: grid;
	flex: 0 0 2.25rem;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--b-muted);
	cursor: pointer;
	transition: color var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-toast__close:hover {
	color: var(--b-gold-light);
}

.bella-toast__close svg {
	width: 0.9rem;
	height: 0.9rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
}

@keyframes bella-toast-in {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

.bella-daily__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	margin-top: 2rem;
}

/* The row carries the space above, so the button and the link line up. */
.bella-daily__actions .bella-button {
	margin-top: 0;
}

.bella-giftform.is-thanks {
	grid-template-columns: minmax(0, 1fr);
	max-width: 36rem;
	margin-inline: auto;
	text-align: center;
}

.bella-giftform.is-thanks .bella-giftform__state {
	animation: bella-rise 0.9s var(--b-ease) both;
}

/* Language switcher */

.bella-lang {
	position: relative;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
}

.bella-lang__flag {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgb(236 229 216 / 0.18);
	transition: box-shadow var(--bella-hover, 0.6s) var(--b-ease), transform var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-lang__check {
	display: none;
}

.bella-lang__list {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bella-lang__list li {
	margin: 0;
}

.bella-lang__list a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--b-muted);
	text-decoration: none;
	transition: color var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-lang__list a:hover,
.bella-lang__list a[aria-current] {
	color: var(--b-gold-light);
}

/* In the footer: a quiet row of flags with their codes. */
.bella-lang:not(.bella-lang--menu) .bella-lang__list {
	gap: 1.1rem;
}

.bella-lang:not(.bella-lang--menu) .bella-lang__flag {
	width: 0.95rem;
	height: 0.95rem;
	opacity: 0.7;
	transition: opacity var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-lang:not(.bella-lang--menu) a:hover .bella-lang__flag,
.bella-lang:not(.bella-lang--menu) a[aria-current] .bella-lang__flag {
	opacity: 1;
}

.bella-lang:not(.bella-lang--menu) .bella-lang__name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* In the header: the current flag, which opens a small menu. */
.bella-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0 0.7rem 0 0.45rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	color: var(--b-text);
	font: inherit;
	letter-spacing: inherit;
	cursor: pointer;
	transition:
		color var(--bella-hover, 0.6s) var(--b-ease),
		border-color var(--bella-hover, 0.6s) var(--b-ease),
		background-color var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-lang__toggle .bella-lang__flag {
	width: 1.35rem;
	height: 1.35rem;
}

.bella-lang__toggle > svg:last-child {
	width: 0.7rem;
	height: 0.7rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.7;
	transition: transform var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-lang__toggle:hover,
.bella-lang.is-open .bella-lang__toggle {
	border-color: var(--b-gold-soft);
	background: rgb(201 165 92 / 0.06);
	color: var(--b-gold-light);
}

.bella-lang__toggle:hover .bella-lang__flag {
	box-shadow: 0 0 0 1px rgb(201 165 92 / 0.6);
}

.bella-lang.is-open .bella-lang__toggle > svg:last-child {
	transform: rotate(180deg);
}

.bella-lang__toggle:focus-visible {
	outline: 1px solid var(--b-gold);
	outline-offset: 2px;
}

.bella-lang__panel {
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	z-index: 60;
	min-width: 12.5rem;
	padding: 0.4rem;
	border-radius: var(--b-radius-surface);
	background: rgb(30 27 24 / 0.97);
	backdrop-filter: blur(10px);
	box-shadow: 0 0 0 1px rgb(201 165 92 / 0.18), 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.8);
	opacity: 0;
	transform: translateY(-0.4rem) scale(0.98);
	transform-origin: top right;
	transition: opacity 0.35s var(--b-ease), transform 0.35s var(--b-ease);
}

.bella-lang.is-open .bella-lang__panel {
	opacity: 1;
	transform: none;
}

.bella-lang--menu .bella-lang__list {
	display: grid;
	gap: 0.15rem;
}

.bella-lang--menu .bella-lang__list a {
	gap: 0.85rem;
	padding: 0.75rem 0.85rem;
	border-radius: var(--b-radius);
	color: var(--b-text);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	transition: background-color var(--bella-hover, 0.6s) var(--b-ease), color var(--bella-hover, 0.6s) var(--b-ease);
}

.bella-lang--menu .bella-lang__flag {
	width: 1.4rem;
	height: 1.4rem;
}

.bella-lang--menu .bella-lang__code {
	display: none;
}

.bella-lang--menu .bella-lang__name {
	flex: 1;
}

.bella-lang--menu .bella-lang__list a:hover {
	background: rgb(201 165 92 / 0.08);
}

.bella-lang--menu .bella-lang__list a:hover .bella-lang__flag {
	transform: scale(1.06);
}

.bella-lang--menu .bella-lang__list a[aria-current] {
	color: var(--b-gold-light);
}

.bella-lang--menu a[aria-current] .bella-lang__check {
	display: block;
	width: 0.95rem;
	height: 0.95rem;
	fill: none;
	stroke: var(--b-gold);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 781px) {
	.bella-lang__toggle {
		padding: 0 0.55rem 0 0.4rem;
		gap: 0.4rem;
	}

	.bella-lang__toggle .bella-lang__current {
		display: none;
	}
}

/* The Continue button and the note beside it while details are missing */
.bella-booking__next {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.25rem;
	min-width: 0;
}

.bella-booking__hint {
	max-width: 17rem;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	text-align: right;
	color: var(--b-muted);
	transition: opacity 0.5s var(--b-ease);
}

.bella-booking__hint.is-hidden {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s var(--b-ease), visibility 0s linear 0.5s;
}

.bella-booking .bella-button[disabled] {
	transition: opacity 0.5s var(--b-ease), background-color var(--bella-hover, 0.6s) var(--b-ease);
}

@media (max-width: 600px) {
	.bella-booking__actions {
		flex-wrap: wrap;
	}

	.bella-booking__next {
		order: -1;
		flex-basis: 100%;
		justify-content: flex-start;
	}

	.bella-booking__hint {
		max-width: none;
		text-align: left;
	}

	.bella-booking__hint.is-hidden {
		display: none;
	}
}

.bella-giftform__hint {
	flex-basis: 100%;
	transition: opacity 0.5s var(--b-ease);
}

.bella-giftform__hint.is-hidden {
	display: none;
}

/* Contact email from the site settings */
.bella-contact-email a {
	color: inherit;
}

.bella-contact-email--large {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.3;
	text-align: center;
}

.bella-contact-email--large a {
	text-decoration: none;
	transition: color var(--bella-hover, 0.6s) ease;
}

.bella-contact-email--large a:hover {
	color: var(--wp--preset--color--gold-light, #e3cc94);
}

/* Card images come as <picture> (AVIF with a WebP fallback); the wrapper itself takes no space. */
.bella-tarot__face picture,
.bella-library__image picture,
.bella-daily picture {
	display: contents;
}

/* Date of birth: day, month and year menus */

.bella-date {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.bella-date legend {
	margin-bottom: 0.55rem;
	padding: 0;
}

.bella-date__parts {
	display: grid;
	grid-template-columns: minmax(5.5rem, 0.9fr) minmax(0, 1.5fr) minmax(5.5rem, 1fr);
	gap: 0.6rem;
}

.bella-date select {
	appearance: none;
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a55c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
	background-position: right 0.85rem center;
	background-repeat: no-repeat;
	background-size: 1rem;
	text-overflow: ellipsis;
	cursor: pointer;
}

@media (max-width: 40rem) {
	.bella-date select {
		padding-right: 1.9rem;
		padding-left: 0.8rem;
		background-position: right 0.6rem center;
	}
}

.bella-date select.is-empty {
	color: rgb(167 159 145 / 0.5);
}

.bella-date option {
	background: var(--wp--preset--color--ink, #0e0d0c);
	color: var(--b-text);
}

/* Reading categories in the booking flow */

.bella-choice-groups {
	display: grid;
	gap: 2.25rem;
}

.bella-choice-group__title {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0 0 1rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--b-muted);
}

/* Whole-pixel sizes keep the icon exactly in the middle of its circle. */
.bella-choice-group__title .bella-option__icon {
	position: relative;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	line-height: 0;
}

.bella-choice-group__title .bella-option__icon svg {
	position: absolute;
	inset: 0;
	width: 1.125rem;
	height: 1.125rem;
	margin: auto;
}