/* Marta Booking – uses the theme's palette and fonts (fallbacks for other themes). */
.marta-bk {
	--mbk-gold: var(--wp--preset--color--accent-1, #b8923f);
	--mbk-gold-light: var(--wp--preset--color--accent-6, #d9be80);
	--mbk-gold-dark: var(--wp--preset--color--accent-3, #7e601f);
	--mbk-text: var(--wp--preset--color--contrast, #3e2f2f);
	--mbk-muted: var(--wp--preset--color--accent-4, #746161);
	--mbk-bg: var(--wp--preset--color--accent-5, #fff);
	--mbk-cream: var(--wp--preset--color--base, #fbf4f2);
	--mbk-ink: var(--wp--preset--color--ink, #2b2020);
	text-align: left;
	color: var(--mbk-text);
	scroll-margin-top: 6rem; /* stay clear of the sticky header */
}

/* The slot frame becomes a calm card once the form is in place. */
.booking-slot:has(.marta-bk) {
	border-style: solid;
	border-color: var(--wp--preset--color--accent-6, #d9be80);
	box-shadow: var(--wp--preset--shadow--soft, none);
}

.marta-bk [hidden] {
	display: none !important;
}

.marta-bk__sr,
.marta-bk__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.marta-bk__step {
	margin: 0 0 0.9rem;
	font-size: var(--wp--preset--font-size--large, 1.35rem);
	text-align: left;
}

.marta-bk__step:focus {
	outline: none;
}

/* ---------- Picker: calendar | times ---------- */
.marta-bk__picker {
	display: grid;
	gap: 2rem;
}

@media (min-width: 700px) {
	.marta-bk__picker {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: start;
	}
}

.marta-bk__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.marta-bk__month {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond, serif);
	font-size: 1.3rem;
	font-weight: 600;
}

.marta-bk__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--mbk-gold-light);
	border-radius: 4px;
	background: var(--mbk-bg);
	color: var(--mbk-text);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.marta-bk__nav:hover:not(:disabled) {
	border-color: var(--mbk-gold);
}

.marta-bk__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.marta-bk__weekdays,
.marta-bk__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.marta-bk__weekdays span {
	padding: 0.25rem 0;
	font-size: var(--wp--preset--font-size--x-small, 0.8rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--mbk-muted);
}

.marta-bk__day {
	aspect-ratio: 1;
	min-height: 40px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	color: var(--mbk-muted);
	font: inherit;
	font-size: 0.95rem;
	cursor: default;
}

.marta-bk__day:disabled {
	opacity: 0.45;
}

.marta-bk__day.is-free {
	border-color: var(--mbk-gold-light);
	background: var(--mbk-bg);
	color: var(--mbk-text);
	font-weight: 500;
	cursor: pointer;
}

.marta-bk__day.is-free:hover {
	border-color: var(--mbk-gold);
	background: var(--mbk-cream);
}

.marta-bk__day.is-today {
	text-decoration: underline;
	text-decoration-color: var(--mbk-gold);
	text-underline-offset: 0.3em;
}

.marta-bk__day.is-selected,
.marta-bk__day.is-selected:hover,
.marta-bk__slot.is-selected {
	border-color: var(--mbk-gold);
	background: var(--mbk-gold);
	color: var(--mbk-ink);
}

.marta-bk__daylabel {
	margin: -0.4rem 0 0.9rem;
	color: var(--mbk-muted);
}

.marta-bk__slots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.marta-bk__slot {
	min-width: 5rem;
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--mbk-gold-light);
	border-radius: 4px;
	background: var(--mbk-bg);
	color: var(--mbk-text);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.marta-bk__slot:hover {
	border-color: var(--mbk-gold);
	background: var(--mbk-cream);
}

.marta-bk__loading,
.marta-bk__empty {
	grid-column: 1 / -1;
	margin: 0.5rem 0;
	color: var(--mbk-muted);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* ---------- Form ---------- */
.marta-bk__summarybox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-bottom: 1.25rem;
	padding: 0.75rem 1rem;
	border-left: 2px solid var(--mbk-gold);
	background: var(--mbk-cream);
}

.marta-bk__summary {
	margin: 0;
	font-weight: 500;
}

.marta-bk__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mbk-gold-dark);
	font: inherit;
	text-decoration: underline;
	text-decoration-color: var(--mbk-gold-light);
	text-underline-offset: 0.3em;
	cursor: pointer;
}

.marta-bk__fields {
	display: grid;
	gap: 0 1rem;
}

@media (min-width: 600px) {
	.marta-bk__fields {
		grid-template-columns: 1fr 1fr;
	}

	.marta-bk__field.is-wide {
		grid-column: 1 / -1;
	}
}

.marta-bk__field {
	margin: 0 0 1rem;
}

.marta-bk__field label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
}

.marta-bk__opt {
	color: var(--mbk-muted);
	font-weight: 400;
}

.marta-bk input[type="text"],
.marta-bk input[type="email"],
.marta-bk input[type="tel"],
.marta-bk select,
.marta-bk textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--mbk-gold-light);
	border-radius: 4px;
	background: var(--mbk-bg);
	color: var(--mbk-text);
	font: inherit;
}

.marta-bk textarea {
	resize: vertical;
}

.marta-bk input:focus-visible,
.marta-bk select:focus-visible,
.marta-bk textarea:focus-visible,
.marta-bk button:focus-visible {
	outline: 2px solid var(--mbk-gold-dark);
	outline-offset: 2px;
}

.marta-bk__consent {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 0.25rem 0 1.25rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.marta-bk__consent input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0.1rem 0 0;
	accent-color: var(--mbk-gold-dark);
}

.marta-bk__message {
	margin: 0 0 1rem;
	padding: 0.65rem 0.9rem;
	border-left: 2px solid var(--mbk-gold-dark);
	background: var(--mbk-cream);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.marta-bk__submit:disabled {
	opacity: 0.7;
	cursor: progress;
}

.marta-bk__done {
	text-align: center;
}

.marta-bk__done:focus {
	outline: none;
}

.marta-bk__success {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--cormorant-garamond, serif);
	font-size: var(--wp--preset--font-size--large, 1.35rem);
}

/* ---------- "I'm not a robot" ---------- */
.marta-bk__captcha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
	max-width: 22rem;
	margin: 0 0 1.25rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--mbk-gold-light);
	border-radius: 4px;
	background: var(--mbk-bg);
}

.marta-bk__caplabel {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	font-weight: 500;
	cursor: pointer;
}

.marta-bk__capbox {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--mbk-gold-dark);
}

.marta-bk__capstate {
	margin-left: auto;
	color: var(--mbk-muted);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.marta-bk__captcha.is-busy .marta-bk__capstate::before {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.4em;
	border: 2px solid var(--mbk-gold-light);
	border-top-color: var(--mbk-gold-dark);
	border-radius: 50%;
	vertical-align: -0.1em;
	animation: marta-bk-spin 0.8s linear infinite;
}

.marta-bk__captcha.is-ok .marta-bk__capstate {
	color: var(--mbk-gold-dark);
	font-weight: 500;
}

.marta-bk__capnote {
	flex-basis: 100%;
	color: var(--mbk-muted);
	font-size: 0.75rem;
}

@keyframes marta-bk-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.marta-bk__captcha.is-busy .marta-bk__capstate::before {
		animation-duration: 2.4s;
	}
}

/* ---------- Cancel page ---------- */
.marta-bk-cancel {
	box-sizing: border-box;
	width: calc(100% - 24px);
	max-width: 520px;
	margin: 8vh auto;
	padding: 2rem 1.5rem;
	border: 1px solid var(--wp--preset--color--accent-6, #d9be80);
	border-radius: 4px;
	background: var(--wp--preset--color--accent-5, #fff);
	box-shadow: var(--wp--preset--shadow--soft, none);
	text-align: center;
	position: relative;
	z-index: 2;
}

.marta-bk-cancel__brand {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond, serif);
	font-size: 1.8rem;
	font-weight: 600;
}

.marta-bk-cancel h1 {
	margin: 0.5rem 0 1rem;
	font-size: var(--wp--preset--font-size--x-large, 2rem);
}

.marta-bk-rebook {
	max-width: 760px;
	margin-top: 1.5rem;
	text-align: left;
}

.marta-bk-rebook h2 {
	margin: 0 0 0.25rem;
	text-align: center;
}

.marta-bk-rebook > p {
	margin: 0 0 1.5rem;
	color: var(--wp--preset--color--accent-4, #746161);
	text-align: center;
}

.marta-bk-cancel .wp-block-button {
	display: inline-block;
	margin-bottom: 1rem;
}