/**
 * Mesabook booking form.
 *
 * Inherits the theme's typography and colour on purpose: a booking form that
 * looks like the rest of the site is trusted more than one that looks bolted
 * on. Only spacing, state and the slot grid are opinionated, and every colour
 * is a custom property a theme can override.
 */

.mesabook-form {
	--mesabook-radius: 8px;

	/*
	 * The accent has to be a real colour, not currentColor: a custom property
	 * holding currentColor resolves against the element that uses it, so a
	 * button that sets its own colour would paint itself with it and vanish.
	 * Block themes expose these presets; classic themes fall back to the ink.
	 */
	--mesabook-accent: var(--wp--preset--color--contrast, #1f2933);
	--mesabook-on-accent: var(--wp--preset--color--base, #ffffff);
	--mesabook-muted: color-mix(in srgb, currentColor 60%, transparent);
	--mesabook-line: color-mix(in srgb, currentColor 20%, transparent);
	--mesabook-surface: color-mix(in srgb, currentColor 4%, transparent);
	--mesabook-danger: #b3261e;

	color: var(--mesabook-text, inherit);
	container-type: inline-size;
	font: inherit;
	font-size: var(--mesabook-font-size, inherit);
	margin: 0 auto;
	max-width: var(--mesabook-max-width, 44rem);
}

.mesabook-form *,
.mesabook-form *::before,
.mesabook-form *::after {
	box-sizing: border-box;
}

.mesabook-form.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.mesabook-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.mesabook-form-title {
	margin: 0 0 1rem;
}

.mesabook-step {
	border-top: 1px solid var(--mesabook-line);
	margin-top: 1.25rem;
	padding-top: 1.25rem;
}

.mesabook-step:first-of-type {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.mesabook-step-title {
	font-size: 1.05rem;
	margin: 0 0 0.75rem;
}

.mesabook-step-title:focus {
	outline: none;
}

.mesabook-row {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	align-items: end;
}

/*
 * The hidden attribute is only display:none in the browser's own stylesheet,
 * so any display of ours beats it. The payment block carries hidden and was
 * showing its small print on forms that never ask for a card.
 */
.mesabook-form [hidden] {
	display: none !important;
}

.mesabook-control {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.mesabook-control-wide {
	grid-column: 1 / -1;
}

.mesabook-control > label {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.mesabook-form input[type="text"],
.mesabook-form input[type="email"],
.mesabook-form input[type="tel"],
.mesabook-form input[type="date"],
.mesabook-form select,
.mesabook-form textarea {
	background: transparent;
	border: 1px solid var(--mesabook-line);
	border-radius: var(--mesabook-radius);
	color: inherit;
	font: inherit;
	padding: 0.6rem 0.7rem;
	width: 100%;
}

.mesabook-form input:focus-visible,
.mesabook-form select:focus-visible,
.mesabook-form textarea:focus-visible,
.mesabook-form button:focus-visible {
	outline: 2px solid var(--mesabook-accent);
	outline-offset: 2px;
}

.mesabook-required {
	color: var(--mesabook-danger);
	margin-left: 0.15rem;
}

.mesabook-details {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.mesabook-check label {
	align-items: center;
	display: flex;
	font-weight: 400;
	gap: 0.5rem;
}

.mesabook-button {
	background: var(--mesabook-accent);
	border: 1px solid var(--mesabook-accent);
	border-radius: var(--mesabook-radius);
	color: var(--mesabook-on-accent);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 0.65rem 1.1rem;
}

.mesabook-button-ghost {
	background: transparent;
	color: inherit;
}

.mesabook-button:hover {
	opacity: 0.85;
}

.mesabook-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	grid-column: 1 / -1;
	justify-content: flex-end;
	margin-top: 0.25rem;
}

.mesabook-slots {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
}

.mesabook-slot {
	background: var(--mesabook-surface);
	border: 1px solid var(--mesabook-line);
	border-radius: var(--mesabook-radius);
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-variant-numeric: tabular-nums;
	padding: 0.6rem 0.25rem;
	text-align: center;
}

.mesabook-slot:hover {
	border-color: var(--mesabook-accent);
}

.mesabook-summary {
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.mesabook-countdown,
.mesabook-status,
.mesabook-terms,
.mesabook-credit {
	color: var(--mesabook-muted);
	font-size: 0.85rem;
	margin: 0.5rem 0 0;
}

.mesabook-status:empty {
	margin: 0;
}

.mesabook-error {
	color: var(--mesabook-danger);
	font-size: 0.8rem;
	min-height: 1em;
}

.mesabook-noscript,
.mesabook-form-notice {
	border: 1px dashed var(--mesabook-line);
	border-radius: var(--mesabook-radius);
	padding: 1rem;
}

.mesabook-form .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@media (prefers-reduced-motion: no-preference) {

	.mesabook-slot,
	.mesabook-button {
		transition: opacity 120ms ease, border-color 120ms ease;
	}
}

.mesabook-done-note {
	margin: 0 0 1rem;
}

.mesabook-done-actions {
	margin: 0;
}

/* Whatever the restaurant wrote for the guest to read once they are booked. */

.mesabook-done-message {
	border-top: 1px solid var(--mesabook-line, #dcdcde);
	margin: 0 0 1rem;
	padding-top: 1rem;
}

.mesabook-done-message > :first-child {
	margin-top: 0;
}

.mesabook-done-message > :last-child {
	margin-bottom: 0;
}

.mesabook-done-message img {
	border-radius: var(--mesabook-radius, 6px);
	height: auto;
	max-width: 100%;
}

.mesabook-form [aria-invalid="true"] {
	border-color: var(--mesabook-danger);
}

.mesabook-form .mesabook-error:not(:empty) {
	font-weight: 600;
}

/* Where Stripe mounts its card fields. */

.mesabook-payment {
	border-top: 1px solid var(--mesabook-line, #dcdcde);
	margin-top: 4px;
	padding-top: 14px;
}

.mesabook-payment-title {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.mesabook-card-fields {
	margin: 4px 0;
	min-height: 200px;
}

.mesabook-card-fields iframe {
	display: block;
	width: 100%;
}

.mesabook-fineprint {
	color: var(--mesabook-muted, #646970);
	font-size: 0.85em;
	margin-top: 8px;
}

/* The date, as a month the restaurant's closed days are struck out of. */

.mesabook-control-date {
	position: relative;
}

.mesabook-label {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.mesabook-form .mesabook-date-toggle {
	background: transparent;
	white-space: nowrap;
	border: 1px solid var(--mesabook-line);
	border-radius: var(--mesabook-radius);
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0.6rem 0.7rem;
	text-align: left;
	width: 100%;
}

.mesabook-form .mesabook-date-toggle::after {
	content: "\25BE";
	float: right;
	opacity: 0.6;
}

.mesabook-picker {
	background: var(--mesabook-picker-bg, Canvas);
	border: 1px solid var(--mesabook-line);
	border-radius: var(--mesabook-radius);
	box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
	color: var(--mesabook-picker-ink, CanvasText);
	left: 0;
	margin-top: 0.35rem;
	min-width: 19.5rem;
	padding: 0.75rem;
	position: absolute;
	top: 100%;
	z-index: 20;
}

.mesabook-control-date.is-inline .mesabook-picker {
	background: transparent;
	box-shadow: none;
	color: inherit;
	margin-top: 0;
	position: static;
}

.mesabook-picker-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.mesabook-picker-month {
	font-weight: 600;
}

/* Only the first letter: "septiembre de 2026" is not "Septiembre De 2026". */
.mesabook-picker-month::first-letter {
	text-transform: uppercase;
}

.mesabook-form .mesabook-picker-nav {
	background: transparent;
	border: 1px solid var(--mesabook-line);
	border-radius: var(--mesabook-radius);
	color: inherit;
	cursor: pointer;
	font-size: 1.2rem;
	height: 2.1rem;
	line-height: 1;
	width: 2.1rem;
}

.mesabook-form .mesabook-picker-nav:disabled {
	cursor: default;
	opacity: 0.3;
}

.mesabook-picker-row {
	display: grid;
	gap: 0.25rem;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 0.25rem;
}

.mesabook-picker-weekday {
	color: var(--mesabook-muted);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.2rem 0;
	text-align: center;
	text-transform: uppercase;
}

.mesabook-form .mesabook-picker-day {
	aspect-ratio: 1;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--mesabook-radius);
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-variant-numeric: tabular-nums;
	padding: 0;
	width: 100%;
}

.mesabook-form .mesabook-picker-day:hover:not(:disabled) {
	border-color: var(--mesabook-accent);
}

/*
 * Struck through and faded, not only faded: a reader who cannot tell the
 * difference in colour can still tell a line through a number.
 */
.mesabook-form .mesabook-picker-day.is-closed,
.mesabook-picker-sample {
	color: var(--mesabook-muted);
	cursor: not-allowed;
	opacity: 0.55;
	text-decoration: line-through;
}

.mesabook-form .mesabook-picker-day.is-chosen {
	background: var(--mesabook-accent);
	border-color: var(--mesabook-accent);
	color: var(--mesabook-on-accent);
	font-weight: 600;
}

.mesabook-picker-key {
	color: var(--mesabook-muted);
	font-size: 0.8rem;
	margin: 0.4rem 0 0;
}

.mesabook-picker-sample {
	display: inline-block;
	margin-right: 0.3rem;
	opacity: 1;
}

/* What the restaurant set on the appearance screen. */

.mesabook-intro {
	margin: 0 0 1rem;
}

.mesabook-form.is-one-column .mesabook-details,
.mesabook-form.is-one-column .mesabook-row {
	grid-template-columns: 1fr;
}

.mesabook-row.is-stacked {
	align-items: stretch;
	grid-template-columns: 1fr;
}

.mesabook-row.is-stacked .mesabook-picker {
	max-width: 24rem;
}

.mesabook-row.is-stacked .mesabook-control-submit {
	justify-self: start;
}

/*
 * The two pages reached from an email: the guest's booking and the
 * restaurant's decision. Rendered without the theme, so everything they get
 * is here.
 */

body.mesabook-manage {
	background: #f6f6f6;
	margin: 0;
	padding: 24px 16px;
}

.mesabook-manage .mesabook-form {
	background: #fff;
	border-radius: var(--mesabook-radius, 6px);
	margin: 0 auto;
	max-width: 32rem;
	padding: 24px;
}

.mesabook-manage h1 {
	font-size: 1.35rem;
	margin: 0 0 1rem;
}

.mesabook-manage-details {
	border-top: 1px solid var(--mesabook-line, #dcdcde);
	display: grid;
	gap: 0;
	grid-template-columns: 8rem 1fr;
	margin: 0 0 1.25rem;
}

.mesabook-manage-details dt,
.mesabook-manage-details dd {
	border-bottom: 1px solid var(--mesabook-line, #dcdcde);
	margin: 0;
	padding: 0.5rem 0;
}

.mesabook-manage-details dt {
	color: var(--mesabook-muted, #646970);
}

.mesabook-manage-error {
	color: var(--mesabook-danger, #d63638);
	font-weight: 600;
}

.mesabook-decide-note,
.mesabook-manage-note {
	color: var(--mesabook-muted, #646970);
	font-size: 0.9em;
	margin: 0 0 0.75rem;
}

.mesabook-decide-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.mesabook-manage-home {
	margin: 1.5rem 0 0;
}

@media (max-width: 30rem) {

	.mesabook-manage-details {
		grid-template-columns: 1fr;
	}

	.mesabook-manage-details dt {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.mesabook-decide-actions .mesabook-button {
		flex: 1 1 100%;
	}
}