/**
 * Museum Tour Booking — frontend styles.
 *
 * Follows the Museum Ticket Sales plugin's own design system
 * (museum-ticket-sales.css) class-for-class where an equivalent component
 * exists, with mts- renamed to mtb-: the same spacing scale, section
 * titles, field rhythm, "don't fight the theme" input treatment
 * (border-color override only), custom select, date input with icon,
 * jQuery UI DatePicker skin, reCAPTCHA + submit footer, messages, and
 * status card. Palette anchors: #1d2327 (ink) and #023991 (brand blue
 * accent); #b32d2e errors; #1a7d3c success.
 */

/*
 * Spacing scale — every gap in the form is one of these:
 *   --mtb-space-xs  6px   label → input
 *   --mtb-space-sm  12px  inside a component
 *   --mtb-space-md  20px  between fields
 *   --mtb-space-lg  28px  between sections (above a section divider)
 */
.mtb-tour-form-wrap,
.mtb-status {
	--mtb-space-xs: 6px;
	--mtb-space-sm: 12px;
	--mtb-space-md: 20px;
	--mtb-space-lg: 28px;
}

/* Full page width — the same max-widths and breakpoints as the Ticket
   Sales form (.mts-ticket-form-wrap). The theme constrains post content to
   a narrow --wp--style--global--content-size; its :where() constraint has
   zero specificity, so this max-width wins and the theme still centers it. */
.mtb-tour-form-wrap {
	width: 100%;
	max-width: 1340px !important;
	margin: 40px auto 0;
	padding: 36px 0;
	border: none;
	border-radius: 0;
	background: none;
	box-sizing: border-box;
}

@media (max-width: 1399px) {
	.mtb-tour-form-wrap {
		max-width: 1100px !important;
	}
}

@media (max-width: 1199px) {
	.mtb-tour-form-wrap {
		max-width: 910px !important;
	}
}

@media (max-width: 991px) {
	.mtb-tour-form-wrap {
		max-width: 740px !important;
	}
}

@media (max-width: 767px) {
	.mtb-tour-form-wrap {
		max-width: 575px !important;
		padding: 28px 0;
	}
}

/* Block themes size a bare <h2> as a page-level display heading — pin the
   form's own heading to a form-appropriate size. */
.mtb-tour-form-wrap > h2 {
	margin: 0 0 var(--mtb-space-sm);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	line-height: 1.2;
	text-align: center;
}

.mtb-form-intro {
	margin: 0 auto var(--mtb-space-lg) !important;
	color: #3c434a;
	text-align: center;
}

/* The intro on a single line wherever it fits — the form is 1100px+ wide
   from 1200px up (same approach as the Ticket Sales Thank You message).
   Narrower, it wraps rather than overflowing the form. */
@media (min-width: 1200px) {
	.mtb-form-intro {
		white-space: nowrap;
	}
}

/* The `hidden` attribute must always win over component display rules. */
.mtb-tour-form-wrap [hidden],
.mtb-status [hidden] {
	display: none !important;
}

.mtb-tour-form-wrap input,
.mtb-tour-form-wrap textarea,
.mtb-tour-form-wrap select {
	border: 1px solid #d8d8d8 !important;
}

.mtb-tour-form-wrap input:not([type="hidden"]),
.mtb-tour-form-wrap textarea {
	width: 100%;
	box-sizing: border-box;
}

.mtb-tour-form-wrap textarea {
	min-height: 120px;
	resize: vertical;
}

.mtb-tour-form-wrap p {
	margin-top: 0;
}

.mtb-hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

/* Section titles: no divider line — the section gap alone separates them.
   The fields above already end with their own --mtb-space-md bottom
   margin, so the title only adds the remainder: 28px of space above the
   title (one --mtb-space-lg section gap), and a tighter 16px below it, so
   the title visibly belongs to the fields it heads. */
.mtb-form-section-title {
	margin: calc(var(--mtb-space-lg) - var(--mtb-space-md)) 0 16px;
	padding-top: 0;
	border-top: none;
	font-size: 1.1rem;
	line-height: 1.3;
	color: #023991;
}

.mtb-tour-form > .mtb-form-section-title:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.mtb-form-section {
	margin: 0;
}

.mtb-field {
	margin: 0 0 var(--mtb-space-md);
	min-width: 0;
}

.mtb-field > label,
.mtb-field-group .mtb-field > label {
	display: block;
	margin: 0 0 var(--mtb-space-xs);
}

/* Field rows across the full page width. Every row steps down to fewer
   columns as the page narrows, and stacks on phones:
     Contact: Name | Email | Phone          (3 → Name over Email | Phone → 1)
     Tour:    Type | Participants | Date | Time  (4 → 2 → 1) */
.mtb-field-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--wp--preset--spacing--20, 1em);
}

.mtb-field-group-contact {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mtb-field-group-tour {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Below 1400px a quarter-width column is too narrow for the longest label
   ("Number of Visitors / Participants *") on one line. */
@media (max-width: 1399px) {
	.mtb-field-group-tour {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	.mtb-field-group-contact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mtb-field-group-contact > .mtb-field-name {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.mtb-field-group,
	.mtb-field-group-contact,
	.mtb-field-group-tour {
		grid-template-columns: 1fr;
	}
}

/* "The preferred date and time are a request" — the same soft note card as
   the Ticket Sales form's "Note — Visit Day". */
.mtb-datetime-note {
	margin: 0 0 var(--mtb-space-md) !important;
	padding: 14px 18px;
	border: 1px solid #e3e8f4;
	border-left: 3px solid #023991;
	border-radius: 8px;
	background: #f5f7fc;
	color: #3c434a;
	font-size: 0.875rem;
	line-height: 1.6;
}

.mtb-datetime-note strong {
	margin-right: 0.35em;
	color: #1d2327;
}

.mtb-required {
	color: #b32d2e;
}

.mtb-field-error {
	color: #b32d2e;
	font-size: 0.82rem;
	margin-top: 4px;
}

.mtb-invalid {
	border-color: #b32d2e !important;
}

/* Custom select (Visitor / Group Type, Preferred Tour Time) — same as the
   Ticket Sales plugin's .mts-select. */
.mtb-select {
	position: relative;
	display: block;
}

.mtb-select select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--wp--custom--input-background, var(--wp--preset--color--theme-1, #fff));
	border-radius: 6px;
	box-shadow: none;
	color: currentColor;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: inherit;
	line-height: 1.5;
	min-height: 42px;
	padding: 0.8rem 2.25rem 0.8rem 1rem;
}

.mtb-select::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 0;
	height: 0;
	margin-top: -3px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	pointer-events: none;
}

.mtb-select select:focus {
	outline: 1px solid currentColor;
}

/* Preferred Tour Time: a clock in place of the select arrow, matching the
   date input's calendar icon. */
.mtb-select-time::after {
	top: 50%;
	right: 0.85rem;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border: none;
	background-color: #023991;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-13h-2v6l5.25 3.15 1-1.64L13 12.25V7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-13h-2v6l5.25 3.15 1-1.64L13 12.25V7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mtb-select-time select {
	padding-right: 2.75rem;
}

/* Preferred Tour Date: read-only input that opens the DatePicker. */
.mtb-input-icon-wrap {
	position: relative;
}

/* !important: the theme's own `input:not(…)×4` rule out-specifies (and
   loads after) this stylesheet, and would put the text under the icon. */
.mtb-input-icon-wrap input {
	padding-right: 2.75rem !important;
	cursor: pointer;
}

.mtb-input-icon {
	position: absolute;
	top: 50%;
	right: 0.85rem;
	transform: translateY(-50%);
	display: flex;
	color: #023991;
	pointer-events: none;
}

/* Footer: reCAPTCHA + submit. Top-aligned so the submit button stays put
   when an error message appears beneath the reCAPTCHA widget. */
.mtb-form-footer {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--mtb-space-md);
	margin: var(--mtb-space-sm) 0 0;
	padding-top: 0;
	border-top: none;
}

/* Google's widget is a fixed 304×78 iframe: the wrapper never shrinks
   below it, and very narrow phones scale it down instead. */
.mtb-field-recaptcha {
	flex: 0 0 auto;
	max-width: 100%;
	overflow: visible;
}

.mtb-field-recaptcha iframe {
	display: block;
}

.mtb-field-recaptcha .g-recaptcha {
	display: block;
	width: fit-content;
	border-radius: 3px;
}

@media (max-width: 360px) {
	.mtb-field-recaptcha .g-recaptcha {
		transform: scale(0.88);
		transform-origin: 0 0;
		margin-bottom: -9px;
	}
}

.mtb-field-recaptcha.mtb-invalid .g-recaptcha {
	outline: 1px solid #b32d2e;
	outline-offset: 2px;
}

.mtb-field-recaptcha .mtb-field-error {
	margin-top: var(--mtb-space-xs);
}

/* Vertically centred against the 78px reCAPTCHA widget. */
.mtb-field-submit {
	margin-left: auto;
	margin-top: 11px;
}

.mtb-form-footer:not(:has(.mtb-field-recaptcha)) .mtb-field-submit {
	margin-top: 0;
}

.mtb-submit-button {
	width: auto;
	text-align: center;
	cursor: pointer;
}

.mtb-submit-button[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.mtb-tour-form-wrap {
		padding: 24px 0;
	}

	.mtb-form-footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.mtb-field-submit {
		margin-left: unset;
		margin-top: 0;
		width: 100%;
	}

	.mtb-submit-button {
		width: 100%;
	}
}

.mtb-form-messages {
	margin-bottom: 16px;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 0.9rem;
}

.mtb-message-success {
	background: #eaf7ec;
	color: #1a7d3c;
	border: 1px solid #b6e3c0;
}

.mtb-message-error {
	background: #fdecea;
	color: #b32d2e;
	border: 1px solid #f3b8b4;
}

/* DatePicker (jQuery UI) — scoped to this plugin's own popup only; same
   skin as the Ticket Sales plugin's .mts-datepicker. */

.mtb-datepicker.ui-datepicker {
	z-index: 1000 !important;
	width: 300px;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	padding: 12px;
	border: 1px solid #e2e2e2;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	font-family: inherit;
	font-size: 0.9rem;
	color: #1d2327;
}

.mtb-datepicker .ui-datepicker-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	margin-bottom: 8px;
}

.mtb-datepicker .ui-datepicker-title {
	font-weight: 700;
}

.mtb-datepicker .ui-datepicker-prev,
.mtb-datepicker .ui-datepicker-next {
	position: absolute;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid #d8d8d8;
	border-radius: 50%;
	cursor: pointer;
	overflow: hidden;
	text-indent: -9999px;
}

.mtb-datepicker .ui-datepicker-prev {
	left: 0;
}

.mtb-datepicker .ui-datepicker-next {
	right: 0;
}

.mtb-datepicker .ui-datepicker-prev::after,
.mtb-datepicker .ui-datepicker-next::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-top: 2px solid #1d2327;
	border-right: 2px solid #1d2327;
	text-indent: 0;
}

.mtb-datepicker .ui-datepicker-prev::after {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.mtb-datepicker .ui-datepicker-next::after {
	transform: translate(-70%, -50%) rotate(45deg);
}

.mtb-datepicker .ui-datepicker-prev:hover,
.mtb-datepicker .ui-datepicker-next:hover {
	border-color: #023991;
	background: #023991;
}

.mtb-datepicker .ui-datepicker-prev:hover::after,
.mtb-datepicker .ui-datepicker-next:hover::after {
	border-color: #fff;
}

.mtb-datepicker .ui-state-disabled.ui-datepicker-prev,
.mtb-datepicker .ui-state-disabled.ui-datepicker-next {
	opacity: 0.35;
	cursor: not-allowed;
	background: none;
	border-color: #d8d8d8;
}

.mtb-datepicker .ui-state-disabled.ui-datepicker-prev::after,
.mtb-datepicker .ui-state-disabled.ui-datepicker-next::after {
	border-color: #1d2327;
}

.mtb-datepicker .ui-datepicker-prev span,
.mtb-datepicker .ui-datepicker-next span {
	display: none;
}

.mtb-datepicker table.ui-datepicker-calendar {
	width: 100%;
	margin: 0;
	border: none;
	border-collapse: collapse;
	table-layout: fixed;
}

.mtb-datepicker .ui-datepicker-calendar th,
.mtb-datepicker .ui-datepicker-calendar td {
	padding: 2px;
	border: none;
	background: none;
	text-align: center;
}

.mtb-datepicker .ui-datepicker-calendar th {
	font-size: 0.75rem;
	font-weight: 600;
	color: #666;
}

.mtb-datepicker .ui-datepicker-calendar td a,
.mtb-datepicker .ui-datepicker-calendar td span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	border-radius: 50%;
	color: #1d2327;
	text-decoration: none;
}

.mtb-datepicker .ui-datepicker-calendar td a:hover {
	background: rgba(2, 57, 145, 0.1);
}

.mtb-datepicker .ui-datepicker-calendar .ui-datepicker-today a {
	box-shadow: inset 0 0 0 1px #023991;
}

.mtb-datepicker .ui-datepicker-calendar .ui-datepicker-current-day a,
.mtb-datepicker .ui-datepicker-calendar td a.ui-state-active {
	background: #023991;
	color: #fff;
}

/* Past dates. */
.mtb-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable span {
	color: #b0b0b0;
	cursor: not-allowed;
}

.mtb-datepicker .ui-datepicker-calendar .ui-datepicker-other-month span {
	color: #d0d0d0;
}

/* Thank You — [museum_tour_booking_thank_you], or the booking form page
   when no Thank You Page is configured. Full page, like the Ticket Sales
   Thank You page (.mts-status-full): the same max-widths and breakpoints
   as the booking form, no outer card, a centered header, the request in
   one row of matching boxes, then the Back to Home button. */

.mtb-status.mtb-status-full {
	width: 100%;
	max-width: 1340px !important;
	margin: 40px auto 0;
	padding: 36px 0;
	box-sizing: border-box;
	text-align: center;
}

@media (max-width: 1399px) {
	.mtb-status.mtb-status-full {
		max-width: 1100px !important;
	}
}

@media (max-width: 1199px) {
	.mtb-status.mtb-status-full {
		max-width: 910px !important;
	}
}

@media (max-width: 991px) {
	.mtb-status.mtb-status-full {
		max-width: 740px !important;
	}
}

@media (max-width: 767px) {
	.mtb-status.mtb-status-full {
		max-width: 575px !important;
		padding: 28px 0;
	}
}

.mtb-status h2 {
	margin: 0 0 var(--mtb-space-md);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	line-height: 1.2;
}

.mtb-status-success h2 {
	color: #1a7d3c;
}

.mtb-status-header p {
	margin: 0 auto var(--mtb-space-xs);
}

/* Each message on a single line wherever it fits (the longest needs the
   1100px+ width from 1200px up); narrower, it wraps. */
@media (min-width: 1200px) {
	.mtb-status-header p {
		white-space: nowrap;
	}
}

/* The request: Visitor / Group Type | Date | Time | Participants, one row
   of matching boxes (2 per row on tablets, stacked on phones) — the same
   box design as the Ticket Sales Thank You page's reference boxes. */
.mtb-status-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mtb-space-sm);
	margin: var(--mtb-space-lg) 0 0;
	padding: 0;
}

.mtb-status-summary-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	padding: var(--mtb-space-sm) 16px;
	border-radius: 8px;
	background: #f5f7fc;
}

.mtb-status-summary dt {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #666;
}

.mtb-status-summary dd {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #1d2327;
	overflow-wrap: anywhere;
}

@media (max-width: 991px) {
	.mtb-status-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.mtb-status-summary {
		grid-template-columns: 1fr;
	}
}

/* Back to Home — the site's own button style (wp-element-button), same
   as the Ticket Sales status page's .mts-status-button. */
.mtb-status-actions {
	margin: var(--mtb-space-lg) 0 0;
}

.mtb-status-header .mtb-status-actions {
	margin-top: var(--mtb-space-md);
}

.mtb-status-button {
	display: inline-block;
	box-sizing: border-box;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

@media (max-width: 480px) {
	.mtb-status-button {
		display: block;
		width: 100%;
	}
}