/**
 * Popup de marcação — lado público (v3 «Vivo»).
 *
 * Mobile-first: no telemóvel é uma bottom sheet à iOS, que se arrasta para
 * fechar; a partir dos 768px é um modal centrado. Tudo tem de caber a 340px
 * sem excesso horizontal, que é a regra do site inteiro.
 *
 * Nota sobre transforms: o CSS é o dono exclusivo da propriedade `transform`.
 * O JavaScript escreve apenas custom properties (--cr-bk-enter, --cr-bk-track,
 * --cr-sheet-y) e é o CSS que decide o que fazer com elas. Quando os dois
 * escreviam transform no mesmo elemento, um anulava o outro — foi um bug real.
 */

.cr-sr {
	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;
}

/* Armadilha anti-spam: escondida sem display:none, para os robôs a verem. */
.cr-hp {
	position: absolute !important;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* ── Diálogo ───────────────────────────────────────────────────────────── */

dialog.cr-bk {
	padding: 0;
	margin: 0;
	border: 0;
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	background: transparent;
	color: var(--cr-ink);
	font-family: var(--cr-font-body);
	overflow: hidden;
}

dialog.cr-bk[open] {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

dialog.cr-bk *,
dialog.cr-bk *::before,
dialog.cr-bk *::after {
	box-sizing: border-box;
}

dialog.cr-bk::backdrop {
	background: rgba(18, 36, 30, 0.5);
	backdrop-filter: blur(10px) saturate(120%);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	transition: opacity var(--cr-medium) var(--cr-ease-out);
}

dialog.cr-bk.is-closing::backdrop {
	opacity: 0;
}

.cr-bk__dismiss {
	position: fixed;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.cr-bk__dismiss button {
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	cursor: default;
}

.cr-bk__shell {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: calc(100% - 20px - env(safe-area-inset-top));
	background: var(--cr-linen-warm);
	border-radius: 28px 28px 0 0;
	box-shadow: 0 -20px 60px -20px rgba(18, 36, 30, 0.45);
	overflow: hidden;
	/* O JS escreve --cr-bk-enter (1 → 0 ao abrir) e --cr-sheet-y (arrasto). */
	transform: translateY(calc(var(--cr-bk-enter, 0) * 100% + var(--cr-sheet-y, 0px)));
	transition: transform 0.55s var(--cr-ease-soft);
}

.cr-bk__shell.is-dragging {
	transition: none;
}

dialog.cr-bk.is-closing .cr-bk__shell {
	transform: translateY(100%);
	transition-duration: 0.32s;
}

@media (min-width: 768px) {
	dialog.cr-bk[open] {
		align-items: center;
		padding: 24px;
	}

	.cr-bk__shell {
		width: min(580px, 100%);
		max-height: min(800px, calc(100vh - 48px));
		border-radius: 30px;
		box-shadow: 0 40px 100px -30px rgba(18, 36, 30, 0.6);
		transform: translateY(calc(var(--cr-bk-enter, 0) * 28px)) scale(calc(1 - var(--cr-bk-enter, 0) * 0.04));
		opacity: calc(1 - var(--cr-bk-enter, 0));
		transition: transform 0.5s var(--cr-ease-out), opacity 0.35s var(--cr-ease-out);
	}

	dialog.cr-bk.is-closing .cr-bk__shell {
		transform: translateY(20px) scale(0.97);
		opacity: 0;
	}
}

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */

.cr-bk__grabber {
	display: block;
	width: 40px;
	height: 5px;
	margin: 10px auto 0;
	border-radius: 5px;
	background: rgba(35, 49, 44, 0.18);
	flex: 0 0 auto;
}

@media (min-width: 768px) {
	.cr-bk__grabber {
		display: none;
	}
}

.cr-bk__head {
	display: flex;
	align-items: center;
	gap: var(--cr-gap-sm);
	padding: 10px 14px 12px;
	flex: 0 0 auto;
	touch-action: none;
	cursor: grab;
}

@media (min-width: 768px) {
	.cr-bk__head {
		padding: 22px 22px 14px;
		cursor: default;
		touch-action: auto;
	}
}

.cr-bk__titles {
	flex: 1 1 auto;
	min-width: 0;
}

.cr-bk__eyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9a5640;
}

.cr-bk__title {
	margin: 3px 0 0;
	font-family: var(--cr-font-display);
	font-size: 23px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--cr-forest-dark);
	overflow-wrap: anywhere;
}

.cr-bk__nav {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--cr-radius-pill);
	background: var(--cr-sand) !important;
	color: var(--cr-forest) !important;
	cursor: pointer;
	transition: background var(--cr-fast) var(--cr-ease-out), color var(--cr-fast) var(--cr-ease-out),
		scale var(--cr-fast) var(--cr-ease-out);
}

.cr-bk__nav:hover,
.cr-bk__nav:focus-visible {
	background: var(--cr-forest) !important;
	color: var(--cr-linen) !important;
}

.cr-bk__nav:active {
	scale: 0.9;
}

.cr-bk__nav[hidden] {
	display: none;
}

/* ── Progresso ─────────────────────────────────────────────────────────── */

.cr-bk__track {
	position: relative;
	height: 4px;
	margin: 0 18px;
	border-radius: 4px;
	background: rgba(47, 93, 80, 0.1);
	flex: 0 0 auto;
	overflow: hidden;
}

@media (min-width: 768px) {
	.cr-bk__track {
		margin: 0 22px;
	}
}

.cr-bk__track i {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--cr-forest), var(--cr-moss) 60%, var(--cr-honey));
	transform: scaleX(var(--cr-bk-track, 0.25));
	transform-origin: 0 50%;
	transition: transform 0.6s var(--cr-ease-soft);
}

/* ── Corpo ─────────────────────────────────────────────────────────────── */

.cr-bk__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 18px 16px 20px;
}

@media (min-width: 768px) {
	.cr-bk__body {
		padding: 20px 22px 22px;
	}
}

.cr-bk__step[hidden] {
	display: none;
}

.cr-bk__step {
	animation: cr-bk-in 0.5s var(--cr-ease-out) both;
}

.cr-bk__body[data-dir="back"] .cr-bk__step {
	animation-name: cr-bk-in-back;
}

@keyframes cr-bk-in {
	from {
		opacity: 0;
		translate: 28px 0;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes cr-bk-in-back {
	from {
		opacity: 0;
		translate: -28px 0;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

/* ── Cartões de serviço ────────────────────────────────────────────────── */

.cr-bk__grid {
	display: grid;
	gap: 10px;
}

.cr-bk__card {
	background: var(--cr-white);
	border: 1.5px solid transparent;
	border-radius: 20px;
	box-shadow: var(--cr-shadow-sm);
	overflow: hidden;
	transition: border-color var(--cr-fast) var(--cr-ease-out), box-shadow var(--cr-medium) var(--cr-ease-out),
		translate var(--cr-medium) var(--cr-ease-out);
	animation: cr-bk-card 0.5s var(--cr-ease-out) both;
}

.cr-bk__card:nth-child(2) { animation-delay: 0.03s; }
.cr-bk__card:nth-child(3) { animation-delay: 0.06s; }
.cr-bk__card:nth-child(4) { animation-delay: 0.09s; }
.cr-bk__card:nth-child(5) { animation-delay: 0.12s; }
.cr-bk__card:nth-child(6) { animation-delay: 0.15s; }
.cr-bk__card:nth-child(7) { animation-delay: 0.18s; }
.cr-bk__card:nth-child(8) { animation-delay: 0.21s; }
.cr-bk__card:nth-child(9) { animation-delay: 0.24s; }

@keyframes cr-bk-card {
	from {
		opacity: 0;
		translate: 0 14px;
	}
}

.cr-bk__card:hover,
.cr-bk__card:focus-within {
	box-shadow: var(--cr-shadow);
}

.cr-bk__card.is-open {
	border-color: var(--cr-forest);
	box-shadow: var(--cr-shadow);
}

.cr-bk__cardbtn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 8px 12px 8px 8px;
	border: 0;
	background: transparent !important;
	text-align: left;
	cursor: pointer;
	color: inherit !important;
	font: inherit;
}

.cr-bk__cardbtn:active {
	scale: 0.985;
}

.cr-bk__cardmedia {
	position: relative;
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--cr-sand);
}

.cr-bk__cardmedia img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.8s var(--cr-ease-out);
}

.cr-bk__cardbtn:hover .cr-bk__cardmedia img {
	scale: 1.1;
}

.cr-bk__cardicon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 14px;
	background: var(--cr-sand);
	color: var(--cr-forest);
}

.cr-bk__cardtext {
	flex: 1 1 auto;
	min-width: 0;
}

.cr-bk__cardname {
	display: block;
	font-family: var(--cr-font-display);
	font-size: 17px;
	line-height: 1.2;
	color: var(--cr-forest-dark);
	overflow-wrap: anywhere;
}

.cr-bk__carddesc {
	display: -webkit-box;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--cr-ink-soft);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cr-bk__cardmeta {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	text-align: right;
}

.cr-bk__price {
	font-family: var(--cr-font-display);
	font-size: 18px;
	font-weight: 500;
	color: var(--cr-forest-dark);
	white-space: nowrap;
}

.cr-bk__dur {
	padding: 2px 8px;
	border-radius: var(--cr-radius-pill);
	background: var(--cr-sand);
	font-size: 11px;
	font-weight: 600;
	color: var(--cr-ink-soft);
	white-space: nowrap;
}

.cr-bk__tag {
	padding: 4px 9px;
	border-radius: var(--cr-radius-pill);
	background: rgba(230, 190, 103, 0.28);
	color: #6b4d12;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Variantes (Massagem Desportiva) */
.cr-bk__variants {
	display: none;
	gap: 8px;
	padding: 4px 12px 12px;
	flex-wrap: wrap;
}

.cr-bk__card.is-open .cr-bk__variants {
	display: flex;
}

.cr-bk__variant {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1.5px solid var(--cr-line);
	border-radius: var(--cr-radius-pill);
	background: var(--cr-linen) !important;
	color: var(--cr-forest-dark) !important;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	animation: cr-bk-pop-in 0.45s var(--cr-ease-out) both;
	transition: background var(--cr-fast) var(--cr-ease-out), border-color var(--cr-fast) var(--cr-ease-out),
		color var(--cr-fast) var(--cr-ease-out), scale var(--cr-fast) var(--cr-ease-out);
}

.cr-bk__variant:nth-child(2) { animation-delay: 0.05s; }
.cr-bk__variant:nth-child(3) { animation-delay: 0.1s; }

.cr-bk__variant:hover,
.cr-bk__variant:focus-visible {
	background: var(--cr-forest) !important;
	border-color: var(--cr-forest);
	color: var(--cr-linen) !important;
}

.cr-bk__variant:active {
	scale: 0.95;
}

.cr-bk__variantprice {
	font-weight: 700;
	color: #9a5640;
}

.cr-bk__variant:hover .cr-bk__variantprice,
.cr-bk__variant:focus-visible .cr-bk__variantprice {
	color: var(--cr-honey);
}

@keyframes cr-bk-pop-in {
	from {
		opacity: 0;
		scale: 0.85;
	}
}

/* ── Escolha selecionada ───────────────────────────────────────────────── */

.cr-bk__chosen,
.cr-bk__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 14px;
	padding: 12px 14px;
	border-radius: 18px;
	background: var(--cr-forest);
	color: var(--cr-linen);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.cr-bk__chosen strong,
.cr-bk__summary strong {
	flex: 1 1 100%;
	font-family: var(--cr-font-display);
	font-size: 17px;
	font-weight: 500;
}

.cr-bk__chosen span,
.cr-bk__summary span {
	padding: 3px 10px;
	border-radius: var(--cr-radius-pill);
	background: rgba(244, 240, 230, 0.14);
	font-size: 12.5px;
}

/* ── Calendário ────────────────────────────────────────────────────────── */

.cr-bk__cal {
	background: var(--cr-white);
	border-radius: 22px;
	box-shadow: var(--cr-shadow-sm);
	padding: 14px 12px 12px;
}

.cr-bk__calhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.cr-bk__calhead strong {
	font-family: var(--cr-font-display);
	font-size: 19px;
	font-weight: 500;
	color: var(--cr-forest-dark);
	text-transform: capitalize;
}

.cr-bk__calnav {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--cr-radius-pill);
	background: var(--cr-sand) !important;
	color: var(--cr-forest) !important;
	cursor: pointer;
	transition: background var(--cr-fast) var(--cr-ease-out), color var(--cr-fast) var(--cr-ease-out),
		scale var(--cr-fast) var(--cr-ease-out);
}

.cr-bk__calnav:hover:not(:disabled) {
	background: var(--cr-forest) !important;
	color: var(--cr-linen) !important;
}

.cr-bk__calnav:active:not(:disabled) {
	scale: 0.9;
}

.cr-bk__calnav:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.cr-bk__weekdays,
.cr-bk__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.cr-bk__weekdays {
	margin-bottom: 6px;
}

.cr-bk__weekdays span {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--cr-ink-faint);
}

.cr-bk__day {
	position: relative;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	min-width: 0;
	/* Num ecrã de 320px as sete colunas deixam o dia com ~40px, um pouco abaixo
	   dos 44px recomendados. É o limite de uma grelha de calendário nessa
	   largura: aumentar o alvo faria os dias vizinhos sobreporem-se, o que é
	   pior. Acima dos 360px o alvo chega aos 46px. */
	max-width: 46px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent !important;
	color: var(--cr-ink-soft) !important;
	font: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background var(--cr-fast) var(--cr-ease-out), color var(--cr-fast) var(--cr-ease-out),
		scale 0.35s var(--cr-ease-out);
}

.cr-bk__day.is-empty {
	cursor: default;
	pointer-events: none;
}

.cr-bk__day:disabled {
	color: var(--cr-ink-faint) !important;
	opacity: 0.45;
	cursor: not-allowed;
}

.cr-bk__day.is-free {
	color: var(--cr-forest-dark) !important;
	font-weight: 700;
}

/* ponto de disponibilidade por baixo do número */
.cr-bk__day.is-free::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 14%;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--cr-moss);
}

.cr-bk__day.is-free:hover {
	background: var(--cr-sand) !important;
}

.cr-bk__day.is-selected {
	background: var(--cr-forest) !important;
	color: var(--cr-linen) !important;
	scale: 1.08;
	box-shadow: 0 8px 18px -8px rgba(47, 93, 80, 0.7);
}

.cr-bk__day.is-selected::after {
	background: var(--cr-honey);
}

.cr-bk__day.is-loading {
	animation: cr-bk-shimmer 1.2s ease-in-out infinite;
}

@keyframes cr-bk-shimmer {
	50% {
		opacity: 0.25;
	}
}

/* ── Horários ──────────────────────────────────────────────────────────── */

.cr-bk__slots {
	margin-top: 16px;
	animation: cr-bk-in 0.45s var(--cr-ease-out) both;
}

.cr-bk__slotslabel {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cr-forest-dark);
}

.cr-bk__slotslabel::first-letter {
	text-transform: uppercase;
}

.cr-bk__slotgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 8px;
}

.cr-bk__slot {
	/* min-height 44px: é o mínimo para um alvo de toque. Com só o padding, a
	   altura ficava em ~43px. */
	display: grid;
	place-items: center;
	min-height: 44px;
	padding: 10px 4px;
	border: 1.5px solid var(--cr-line);
	border-radius: 14px;
	background: var(--cr-white) !important;
	color: var(--cr-forest-dark) !important;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	animation: cr-bk-pop-in 0.4s var(--cr-ease-out) both;
	transition: background var(--cr-fast) var(--cr-ease-out), border-color var(--cr-fast) var(--cr-ease-out),
		color var(--cr-fast) var(--cr-ease-out), scale 0.3s var(--cr-ease-out);
}

.cr-bk__slot:nth-child(2) { animation-delay: 0.03s; }
.cr-bk__slot:nth-child(3) { animation-delay: 0.06s; }
.cr-bk__slot:nth-child(4) { animation-delay: 0.09s; }
.cr-bk__slot:nth-child(5) { animation-delay: 0.12s; }
.cr-bk__slot:nth-child(6) { animation-delay: 0.15s; }
.cr-bk__slot:nth-child(n + 7) { animation-delay: 0.18s; }

.cr-bk__slot:hover {
	border-color: var(--cr-forest);
}

.cr-bk__slot:active {
	scale: 0.94;
}

.cr-bk__slot.is-selected {
	background: var(--cr-forest) !important;
	border-color: var(--cr-forest);
	color: var(--cr-linen) !important;
	box-shadow: 0 8px 18px -8px rgba(47, 93, 80, 0.7);
}

.cr-bk__empty {
	grid-column: 1 / -1;
	padding: 18px 12px;
	border-radius: 16px;
	background: var(--cr-white);
	color: var(--cr-ink-soft);
	font-size: 13.5px;
	text-align: center;
}

/* ── Formulário ────────────────────────────────────────────────────────── */

.cr-bk__form {
	display: grid;
	gap: 10px;
}

.cr-bk__field {
	display: block;
	padding: 10px 14px 4px;
	border-radius: 16px;
	background: var(--cr-white);
	border: 1.5px solid transparent;
	box-shadow: var(--cr-shadow-sm);
	transition: border-color var(--cr-fast) var(--cr-ease-out), box-shadow var(--cr-fast) var(--cr-ease-out);
}

.cr-bk__field:focus-within {
	border-color: var(--cr-forest);
	box-shadow: 0 0 0 4px rgba(47, 93, 80, 0.12);
}

.cr-bk__field span {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--cr-ink-soft);
}

.cr-bk__field em {
	color: #9a5640;
	font-style: normal;
}

.cr-bk__field input,
.cr-bk__field textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 4px 0 8px;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--cr-ink) !important;
	font: inherit;
	font-size: 16px; /* 16px ou mais evita o zoom automático no iOS */
	resize: vertical;
}

.cr-bk__field input:focus,
.cr-bk__field textarea:focus {
	outline: none;
}

.cr-bk__field input::placeholder,
.cr-bk__field textarea::placeholder {
	color: var(--cr-ink-faint);
}

.cr-bk__field:has(:user-invalid) {
	border-color: var(--cr-danger);
}

.cr-bk__error {
	margin: 0;
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba(180, 69, 60, 0.1);
	color: var(--cr-danger);
	font-size: 13.5px;
	animation: cr-bk-shake 0.4s var(--cr-ease-out);
}

@keyframes cr-bk-shake {
	25% { translate: -6px 0; }
	50% { translate: 5px 0; }
	75% { translate: -3px 0; }
}

.cr-bk__error[hidden] {
	display: none;
}

.cr-bk__legal {
	margin: 2px 4px 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--cr-ink-faint);
}

.cr-bk__notice {
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
	padding: 14px;
	border-radius: 18px;
	background: rgba(230, 190, 103, 0.2);
	color: var(--cr-ink);
}

.cr-bk__notice p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
}

.cr-bk__notice svg {
	flex: 0 0 auto;
	color: #9a5640;
}

/* ── Conclusão ─────────────────────────────────────────────────────────── */

.cr-bk__done {
	text-align: center;
	padding: 12px 4px 8px;
}

.cr-bk__donemark {
	position: relative;
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	margin: 0 auto 18px;
	border-radius: var(--cr-radius-pill);
	background: var(--cr-forest);
	color: var(--cr-white);
	animation: cr-bk-pop 0.7s var(--cr-ease-out) both;
}

.cr-bk__donemark::before,
.cr-bk__donemark::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid var(--cr-moss);
	animation: cr-bk-ring 1.8s var(--cr-ease-out) 0.3s both;
}

.cr-bk__donemark::after {
	animation-delay: 0.6s;
}

@keyframes cr-bk-ring {
	from {
		opacity: 0.9;
		scale: 1;
	}
	to {
		opacity: 0;
		scale: 1.9;
	}
}

.cr-bk__check {
	width: 46px;
	height: 46px;
	fill: none;
	stroke: var(--cr-honey);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: cr-bk-draw 0.6s var(--cr-ease-out) 0.35s forwards;
}

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

@keyframes cr-bk-pop {
	from {
		scale: 0.4;
		opacity: 0;
	}
	60% {
		scale: 1.08;
	}
	to {
		scale: 1;
		opacity: 1;
	}
}

.cr-bk__done h3 {
	margin: 0 0 8px;
	font-family: var(--cr-font-display);
	font-size: 26px;
	font-weight: 500;
	color: var(--cr-forest-dark);
}

.cr-bk__done p {
	margin: 0 auto;
	max-width: 36ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--cr-ink-soft);
}

.cr-bk__donebox {
	margin: 18px 0 0;
	padding: 6px 16px;
	border-radius: 18px;
	background: var(--cr-white);
	box-shadow: var(--cr-shadow-sm);
	text-align: left;
	font-size: 14px;
	color: var(--cr-ink);
	overflow-wrap: anywhere;
}

.cr-bk__donebox div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cr-line);
}

.cr-bk__donebox div:last-child {
	border-bottom: 0;
}

.cr-bk__donebox strong {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--cr-ink-soft);
}

.cr-bk__donebox[hidden] {
	display: none;
}

.cr-bk__wa {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding: 14px 22px;
	border-radius: var(--cr-radius-pill);
	background: #25d366 !important;
	color: var(--cr-white) !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 12px 26px -12px rgba(37, 211, 102, 0.8);
	transition: background var(--cr-fast) var(--cr-ease-out), scale var(--cr-fast) var(--cr-ease-out);
}

.cr-bk__wa:hover,
.cr-bk__wa:focus-visible {
	background: #1fb855 !important;
	color: var(--cr-white) !important;
}

.cr-bk__wa:active {
	scale: 0.96;
}

.cr-bk__wa[hidden] {
	display: none;
}

/* ── Rodapé ────────────────────────────────────────────────────────────── */

.cr-bk__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid var(--cr-line);
	background: rgba(250, 247, 240, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	flex: 0 0 auto;
	/* Respeita a barra de gestos dos telemóveis. */
	padding-bottom: max(12px, env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
	.cr-bk__foot {
		padding: 14px 22px 18px;
	}
}

.cr-bk__cta {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 54px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--cr-radius-pill);
	/* Definidos nos dois estados e com !important: o tema do site tem estilos
	   globais de botão que já engoliram estas cores uma vez. */
	background: var(--cr-forest) !important;
	color: var(--cr-linen) !important;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 12px 26px -12px rgba(47, 93, 80, 0.8);
	transition: background var(--cr-fast) var(--cr-ease-out), color var(--cr-fast) var(--cr-ease-out),
		scale var(--cr-fast) var(--cr-ease-out), opacity var(--cr-fast) var(--cr-ease-out),
		box-shadow var(--cr-medium) var(--cr-ease-out);
}

/* Hover: forest-dark + linho (9.3:1). O lilás anterior ficava a 4.3:1. */
.cr-bk__cta:hover:not(:disabled),
.cr-bk__cta:focus-visible:not(:disabled) {
	background: var(--cr-forest-dark) !important;
	color: var(--cr-linen) !important;
}

.cr-bk__cta:active:not(:disabled) {
	scale: 0.97;
}

.cr-bk__cta:disabled {
	opacity: 0.4;
	box-shadow: none;
	cursor: not-allowed;
}

.cr-bk__cta.is-busy {
	color: transparent !important;
}

/* O anel a rodar é decoração: quem pediu menos movimento vê o botão esmorecido
   em vez de um spinner. O aria-busy do JS é que dá a informação. */
@media (prefers-reduced-motion: reduce) {
	.cr-bk__cta.is-busy::after {
		animation: none;
	}
}

.cr-bk__cta.is-busy::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(244, 240, 230, 0.35);
	border-top-color: var(--cr-linen);
	border-radius: 50%;
	animation: cr-bk-spin 0.7s linear infinite;
}

@keyframes cr-bk-spin {
	to {
		rotate: 360deg;
	}
}

.cr-bk__ghost {
	flex: 0 0 auto;
	min-height: 54px;
	padding: 0 18px;
	border: 1.5px solid var(--cr-line-strong);
	border-radius: var(--cr-radius-pill);
	background: transparent !important;
	color: var(--cr-forest) !important;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--cr-fast) var(--cr-ease-out), scale var(--cr-fast) var(--cr-ease-out);
}

.cr-bk__ghost:hover {
	background: var(--cr-sand) !important;
}

.cr-bk__ghost:active {
	scale: 0.96;
}

.cr-bk__ghost[hidden] {
	display: none;
}

/* ── 340px: o limite que nada pode ultrapassar ─────────────────────────── */

@media (max-width: 360px) {
	.cr-bk__body,
	.cr-bk__foot,
	.cr-bk__head {
		padding-left: 10px;
		padding-right: 10px;
	}

	.cr-bk__track {
		margin: 0 12px;
	}

	.cr-bk__cardbtn {
		gap: 10px;
		padding: 6px 10px 6px 6px;
	}

	.cr-bk__cardmedia,
	.cr-bk__cardicon {
		width: 56px;
		height: 56px;
	}

	.cr-bk__cardname {
		font-size: 15px;
	}

	.cr-bk__carddesc {
		display: none; /* o nome e o preço chegam neste tamanho */
	}

	.cr-bk__slotgrid {
		grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	}

	.cr-bk__ghost {
		padding: 0 14px;
	}

	.cr-bk__cta {
		padding: 0 12px;
		font-size: 15px;
	}
}

/* ── Movimento reduzido ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.cr-bk__shell,
	.cr-bk__step,
	.cr-bk__card,
	.cr-bk__variant,
	.cr-bk__slots,
	.cr-bk__slot,
	.cr-bk__donemark,
	.cr-bk__donemark::before,
	.cr-bk__donemark::after,
	.cr-bk__track i,
	.cr-bk__day,
	.cr-bk__cta,
	.cr-bk__error {
		animation: none !important;
		transition: none !important;
	}

	.cr-bk__check {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* ── Resposta dos formulários do site ──────────────────────────────────── */

/* Criado pelo JS quando a página não traz um elemento [data-cr-status].
   Sem ele, uma falha de envio ficaria invisível para quem preencheu. */
.cr-formstatus {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 13px 16px;
	border-radius: 16px;
	background: rgba(124, 142, 114, 0.16);
	color: var(--cr-forest-dark);
	font-family: var(--cr-font-body);
	font-size: 14.5px;
	line-height: 1.55;
	overflow-wrap: anywhere;
	animation: cr-bk-pop-in 0.45s var(--cr-ease-out) both;
}

.cr-formstatus::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--cr-forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F0E6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.cr-formstatus.is-error {
	background: rgba(180, 69, 60, 0.1);
	color: var(--cr-danger);
}

.cr-formstatus.is-error::before {
	background: var(--cr-danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.cr-formstatus[hidden] {
	display: none;
}

/* ── Pagamento da reserva ──────────────────────────────────────────────── */

.cr-bk__pay {
	margin: 4px 0 0;
	padding: 14px 14px 12px;
	border: 0;
	border-radius: 18px;
	background: var(--cr-white);
	box-shadow: var(--cr-shadow-sm);
	min-width: 0;
}

.cr-bk__pay legend {
	padding: 0 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--cr-ink-soft);
}

.cr-bk__pay legend em {
	color: #9a5640;
	font-style: normal;
}

.cr-bk__paylead {
	margin: 2px 0 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--cr-ink-soft);
}

.cr-bk__paygrid {
	display: grid;
	gap: 8px;
}

.cr-bk__paycard {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 10px 14px;
	border: 1.5px solid var(--cr-line);
	border-radius: 14px;
	background: var(--cr-linen-warm);
	cursor: pointer;
	transition: border-color var(--cr-fast) var(--cr-ease-out), background var(--cr-fast) var(--cr-ease-out);
}

.cr-bk__paycard input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--cr-forest);
}

.cr-bk__paycard:has(input:checked) {
	border-color: var(--cr-forest);
	background: var(--cr-white);
	box-shadow: 0 0 0 3px rgba(47, 93, 80, 0.12);
}

.cr-bk__paycard:has(input:focus-visible) {
	outline: 2px solid var(--cr-forest);
	outline-offset: 2px;
}

.cr-bk__paylabel {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.cr-bk__paylabel strong {
	font-size: 15px;
	color: var(--cr-ink);
}

.cr-bk__paylabel small {
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--cr-ink-soft);
}

/* Instruções no passo final */

.cr-bk__paydone {
	margin: 18px 0 0;
	padding: 16px;
	border-radius: 18px;
	background: var(--cr-white);
	box-shadow: var(--cr-shadow-sm);
	text-align: left;
	color: var(--cr-ink);
}

.cr-bk__paymethod {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cr-forest);
}

.cr-bk__payfields {
	margin: 0;
	display: grid;
}

.cr-bk__payfields > div {
	display: grid;
	gap: 2px;
	padding: 9px 0;
	border-bottom: 1px solid var(--cr-line);
}

.cr-bk__payfields > div:last-child {
	border-bottom: 0;
}

.cr-bk__payfields dt {
	font-size: 12px;
	font-weight: 600;
	color: var(--cr-ink-soft);
}

.cr-bk__payfields dd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
}

.cr-bk__payvalue {
	min-width: 0;
	font-family: ui-monospace, "SFMono-Regular", Consolas, Menlo, monospace;
	font-size: 15px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.cr-bk__copy {
	flex: 0 0 auto;
	min-width: 76px;
	min-height: 36px;
	padding: 6px 12px;
	border: 1.5px solid var(--cr-forest);
	border-radius: var(--cr-radius-pill);
	background: transparent;
	color: var(--cr-forest);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--cr-fast) var(--cr-ease-out), color var(--cr-fast) var(--cr-ease-out);
}

.cr-bk__copy:hover,
.cr-bk__copy:focus-visible {
	background: var(--cr-forest);
	color: var(--cr-white);
}

.cr-bk__paysteps {
	margin: 12px 0 0;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--cr-ink-soft);
}

.cr-bk__paysteps li {
	margin: 0 0 6px;
}

.cr-bk__paydue {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(230, 190, 103, 0.24);
	font-size: 14px;
	font-weight: 600;
	color: #6b4f0f;
}

.cr-bk__paynote {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--cr-ink-soft);
	white-space: pre-line;
}

.cr-bk__payactions {
	display: grid;
	gap: 8px;
	margin-top: 14px;
}

.cr-bk__paybtn,
.cr-bk__payproof {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 18px;
	border-radius: var(--cr-radius-pill);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.cr-bk__paybtn {
	border: 0;
	background: var(--cr-forest);
	color: var(--cr-white);
}

.cr-bk__paybtn:disabled {
	opacity: 0.6;
	cursor: default;
}

.cr-bk__payproof {
	border: 1.5px solid var(--cr-forest);
	background: transparent;
	color: var(--cr-forest) !important;
}

.cr-bk__paystatus {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(63, 125, 92, 0.14);
	font-size: 14px;
	color: #255e41;
}

.cr-bk__paystatus.is-error {
	background: rgba(180, 69, 60, 0.12);
	color: var(--cr-danger);
}

.cr-bk__paymail {
	margin: 12px 0 0;
	font-size: 12.5px;
	color: var(--cr-ink-faint);
}

.cr-bk__paydone[hidden],
.cr-bk__paydue[hidden],
.cr-bk__paynote[hidden],
.cr-bk__paystatus[hidden],
.cr-bk__payproof[hidden],
.cr-bk__paybtn[hidden] {
	display: none;
}

/* ── Apoio imediato («Preciso de falar agora») ─────────────────────────────
   Reutiliza o diálogo, os campos e o bloco de pagamento do popup (.cr-bk__*);
   aqui só o que é próprio: texto de acolhimento, caixa do valor, nota de
   segurança e o botão grande de chamada. */

.cr-sos__lead {
	margin: 0 0 16px;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--cr-ink);
}

.cr-sos__box {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 14px;
	margin: 0 0 16px;
	padding: 14px 16px;
	border-radius: var(--cr-radius);
	background: var(--cr-white);
	border: 1.5px solid var(--cr-line-strong);
	box-shadow: var(--cr-shadow-sm);
}

.cr-sos__box strong {
	font-family: var(--cr-font-display);
	font-size: 19px;
	font-weight: 500;
	color: var(--cr-forest-dark);
}

.cr-sos__box span {
	font-weight: 700;
	color: var(--cr-forest);
}

.cr-sos__list {
	margin: 0 0 18px;
	padding: 0 0 0 22px;
	display: grid;
	gap: 8px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--cr-ink-soft);
}

.cr-sos__safety {
	margin: 18px 0 0;
	padding: 12px 14px;
	border-radius: var(--cr-radius);
	background: rgba(184, 112, 84, 0.1);
	color: #7a3f2a;
	font-size: 14px;
	line-height: 1.55;
}

.cr-sos__safety a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cr-sos .cr-sos__call {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 64px;
	margin-top: 18px;
	font-size: 18px;
	text-decoration: none;
	flex: none;
}

.cr-sos .cr-sos__wa {
	display: inline-flex;
	justify-content: center;
	margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.cr-sos .cr-bk__error {
		animation: none;
	}
}

/* ==========================================================================
   Idiomas: palavras compridas (alemão) e nomes de serviços partem-se com
   hífen, e não a meio da palavra. O <dialog> leva lang="de-DE", "fr-FR"…, que é
   o que o hyphens: auto precisa para saber onde dividir.
   ========================================================================== */
.cr-bk :is(.cr-bk__cardname, .cr-bk__carddesc, .cr-bk__title, .cr-bk__field span, .cr-bk__paylabel, .cr-bk__notice p, .cr-bk__legal, .cr-sos__lead, .cr-sos__list li) {
	hyphens: auto;
	overflow-wrap: break-word;
}