/*
 * Buying pages: gift cards, memberships and packages. Builds on blvdc-booking.css
 * (same tokens, buttons, fields and choices).
 */

.blvdc-shop { max-width: none; }
.blvdc-shop .blvdc-screen { min-height: 0; }
.blvdc-actions-start { justify-content: flex-start; }

/* ---------- Gift card: preview on the left, choices on the right ---------- */

.blvdc-gift { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 40px; align-items: start; }

.blvdc-gift-side { position: sticky; top: calc(var(--header-h, 0px) + 20px); display: flex; flex-direction: column; gap: 18px; }
.blvdc-gift-preview {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 1.6;
	padding: 24px 26px;
	border-radius: var(--radius-photo, 14px);
	background: var(--blvdc-accent-fill);
	color: var(--blvdc-on-accent);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
	transition: background .25s ease, color .25s ease, transform .4s ease;
	transform: rotate(-2deg);
}
.blvdc-gift-preview:hover { transform: rotate(0deg) translateY(-4px); }
/* A slow light sweep across the card, like foil. */
.blvdc-gift-preview::after {
	content: "";
	position: absolute;
	inset: -40% auto -40% -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-18deg);
	animation: blvdc-sheen 5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes blvdc-sheen { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.blvdc-gift-amount.is-bump { animation: blvdc-bump .35s ease; }
@keyframes blvdc-bump { 40% { transform: scale(1.12); } }

/* The note that goes with the card. */
.blvdc-gift-note {
	padding: 20px 22px;
	background: var(--blvdc-card);
	border: 1px solid var(--blvdc-rule);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
	transform: rotate(1.5deg);
	font-family: var(--blvdc-heading);
	font-size: 19px;
	line-height: 1.45;
}
.blvdc-gift-note[hidden] { display: none; }
.blvdc-gift-note p { margin: 0; overflow-wrap: anywhere; }
.blvdc-gift-note p:empty { display: none; }
.blvdc-gift-note-text { margin: 8px 0 !important; white-space: pre-line; }
.blvdc-gift-note-from { margin-top: 10px !important; text-align: right; }
.blvdc-gift-step { padding: 0; margin-bottom: 14px; font-family: var(--blvdc-heading); font-size: var(--blvdc-fs-h4, 22px); }

/* Sent: a little burst of confetti on the done screen. */
.blvdc-confetti { position: relative; height: 0; }
.blvdc-confetti i {
	position: absolute;
	top: 0;
	width: 9px;
	height: 14px;
	opacity: 0;
	animation: blvdc-confetti 1.6s ease-out forwards;
}
@keyframes blvdc-confetti {
	0% { opacity: 1; transform: translate(0, 0) rotate(0); }
	100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) {
	.blvdc-gift-preview, .blvdc-gift-note { transform: none; }
	.blvdc-gift-preview::after, .blvdc-gift-amount.is-bump, .blvdc-confetti { animation: none; display: none; }
}
.blvdc-gift-logo { display: block; width: auto; max-width: 70%; max-height: 62px; object-fit: contain; object-position: left center; }
.blvdc-gift-logo[hidden] { display: none; }
.blvdc-gift-logo.is-light { filter: brightness(0) invert(1); }
.blvdc-gift-business { font-family: var(--blvdc-ui); font-size: var(--blvdc-fs-label); font-weight: 700; letter-spacing: var(--blvdc-tracking); text-transform: uppercase; }
.blvdc-gift-amount { font-family: var(--blvdc-heading); font-size: 48px; line-height: 1; }
.blvdc-gift-to { font-size: var(--blvdc-fs-body); min-height: 1.4em; }

.blvdc-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.blvdc-amount { position: relative; }
.blvdc-amount input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.blvdc-amount span {
	display: inline-block;
	min-width: 88px;
	padding: 12px 16px;
	text-align: center;
	border: 1px solid var(--blvdc-rule);
	font-size: var(--blvdc-fs-body);
	cursor: pointer;
}
.blvdc-amount:hover span { border-color: var(--blvdc-accent); }
.blvdc-amount input:checked + span { background: var(--blvdc-dark); border-color: var(--blvdc-dark); color: var(--blvdc-on-dark); }
.blvdc-amount input:focus-visible + span { outline: 2px solid var(--blvdc-accent); outline-offset: 2px; }
.blvdc-amount-other { max-width: 280px; }
.blvdc-range { font-size: var(--blvdc-fs-small); margin: 8px 0 0; }
.blvdc-range:empty { display: none; }

.blvdc-designs { display: flex; flex-wrap: wrap; gap: 14px; }
.blvdc-design { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; cursor: pointer; position: relative; }
.blvdc-design input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.blvdc-design-swatch { width: 92px; height: 58px; border-radius: 8px; border: 3px solid transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.blvdc-design input:checked ~ .blvdc-design-swatch { border-color: var(--blvdc-ink); }
.blvdc-design input:focus-visible ~ .blvdc-design-swatch { outline: 2px solid var(--blvdc-accent); outline-offset: 2px; }
.blvdc-design-name { font-size: var(--blvdc-fs-small); }

/* ---------- Memberships and packages ---------- */

.blvdc-clinic-select { max-width: 320px; margin-bottom: 28px; }
/* Memberships page: the title on the left, the clinic on the right, room before the category buttons. */
.blvdc-plans-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-bottom: 40px; }
.blvdc-plans-head .blvdc-title { margin: 0; }
.blvdc-plans-head .blvdc-clinic-select { width: 300px; margin: 0; }
.blvdc-plan-chips { margin-bottom: 48px; }
.blvdc-plan-group-title { margin-top: 0; }
.blvdc-plan-group { margin-bottom: 56px; }
.blvdc-plan-group-title { font-family: var(--blvdc-heading); font-size: var(--blvdc-fs-h3); font-weight: 400; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--blvdc-ink); }
.blvdc-plan-group-kind { font-family: var(--blvdc-ui); font-size: var(--blvdc-fs-label); font-weight: 700; letter-spacing: var(--blvdc-tracking); text-transform: uppercase; color: var(--blvdc-ink-soft); margin-left: 8px; }
.blvdc-plan-group-kind:empty { display: none; }
.blvdc-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.blvdc-plan { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--blvdc-rule); }
.blvdc-plan.is-chosen { border-color: var(--blvdc-ink); background: var(--blvdc-surface-soft); }
.blvdc-plan-name { font-family: var(--blvdc-heading); font-size: var(--blvdc-fs-h4); font-weight: 400; margin: 0; }
.blvdc-plan-price { font-size: var(--blvdc-fs-body); font-weight: 600; margin: 0; }
.blvdc-plan-text { font-size: var(--blvdc-fs-small); line-height: 1.55; color: var(--blvdc-ink-soft); margin: 0 0 6px; flex: 1; }
.blvdc-plan .blvdc-btn { align-self: flex-start; }
.blvdc-plan-member { align-self: flex-start; font-family: var(--blvdc-ui); font-size: var(--blvdc-fs-label); font-weight: 700; letter-spacing: var(--blvdc-tracking); text-transform: uppercase; padding: 8px 12px; background: var(--blvdc-dark); color: var(--blvdc-on-dark); }

.blvdc-agreement-text {
	max-height: 340px;
	overflow-y: auto;
	padding: 20px 22px;
	margin-bottom: 18px;
	border: 1px solid var(--blvdc-rule);
	background: var(--blvdc-surface);
	font-size: var(--blvdc-fs-small);
	line-height: 1.65;
	white-space: pre-line;
}
.blvdc-agree { max-width: 640px; }

@media (max-width: 800px) {
	.blvdc-gift { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.blvdc-gift-side { position: static; max-width: 360px; }
	.blvdc-gift-note { display: none; } /* Phones: the card alone, so the choices start sooner. */
	.blvdc-plans-head { gap: 32px; margin-bottom: 32px; }
	.blvdc-plans-head .blvdc-clinic-select { width: 100%; max-width: none; }
	.blvdc-plan-chips { margin-bottom: 32px; }
	.blvdc-gift-amount { font-size: 40px; }
}