/**
 * Museum Ticket Sales — frontend styles.
 *
 * Follows the Events & Summer Camp Registration plugin's own design system
 * (events-public.css / DESIGN.md) class-for-class where an equivalent
 * component exists, with escr- renamed to mts-: the same form card, field
 * rhythm, "don't fight the theme" input treatment (border-color override
 * only), custom select, stepper, pill radios, card-type badges, footer,
 * messages, and status pages. Palette anchors: #1d2327 (ink) and #023991
 * (brand blue accent); #b32d2e errors; #1a7d3c success/free.
 */

/* Form card. */

/*
 * Spacing scale — every gap in the form is one of these, so sections,
 * fields, and labels read with a consistent rhythm regardless of the
 * active theme's own heading/paragraph/fieldset margins:
 *   --mts-space-xs  6px   label → input
 *   --mts-space-sm  12px  inside a component (rows, summary lines)
 *   --mts-space-md  20px  between fields
 *   --mts-space-lg  28px  between sections (above a section divider)
 */
.mts-ticket-form-wrap,
.mts-status {
	--mts-space-xs: 6px;
	--mts-space-sm: 12px;
	--mts-space-md: 20px;
	--mts-space-lg: 28px;
}

/* Full page width. The theme constrains post content to a narrow
   --wp--style--global--content-size (620px); like the Events plugin's own
   [events_listing], the form instead uses its own max-widths, stepping
   down at the same breakpoints. Its :where() constraint has zero
   specificity, so this max-width wins; the theme still centers it. */
.mts-ticket-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) {
	.mts-ticket-form-wrap {
		max-width: 1100px !important;
	}
}

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

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

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

/* Two-column layout: booking details | sticky summary + payment panel. */
.mts-form-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
	gap: 0 40px;
	align-items: start;
}

.mts-form-main,
.mts-form-aside,
.mts-form-actions {
	min-width: 0;
}

/* Desktop placement: details then actions (reCAPTCHA + button) down the
   left column; the summary/payment panel spans both rows on the right.
   When the layout stacks, DOM order (main → aside → actions) applies, so
   the button always follows the payment fields. */
.mts-form-main {
	grid-column: 1;
	grid-row: 1;
}

.mts-form-actions {
	grid-column: 1;
	grid-row: 2;
}

.mts-form-aside {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: stretch;
}

/* Actions: the Visit Day note on one full-width line first, then the
   reCAPTCHA (left) and the button (right) beneath it. */
.mts-form-actions .mts-visit-day-note,
.mts-form-actions .mts-residency-note {
	order: 1;
	flex: 1 1 100%;
}

.mts-form-actions .mts-field-recaptcha {
	order: 2;
}

.mts-form-actions .mts-field-submit {
	order: 3;
}

/* Spacing after Select Tickets (or, stacked, after Payment Details): one
   even 32px gap (the field's own 20px + 12px here) instead of a divider
   line — the note card already sets the block apart, and a rule directly
   above it read as two separators back to back. */
.mts-ticket-form-wrap .mts-form-actions {
	margin-top: var(--mts-space-sm);
	padding-top: 0;
	border-top: none;
	row-gap: var(--mts-space-md);
}

.mts-form-actions:not(:has(.mts-field-recaptcha)) .mts-field-submit {
	margin-left: 0;
}

.mts-form-aside-inner {
	position: sticky;
	top: 24px;
	padding: 24px;
	border: 1px solid #e2e2e2;
	border-radius: 16px;
	background: #fafbfd;
}

/* "Order Summary" heads the aside panel — no divider above it. */
.mts-form-aside .mts-order-summary > .mts-form-section-title {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.mts-order-summary-empty {
	margin: 0 0 var(--mts-space-md);
	padding: var(--mts-space-md);
	border: 1px dashed #d8d8d8;
	border-radius: 8px;
	background: #fff;
	color: #666;
	font-size: 0.9rem;
	text-align: center;
}

/* Ticket Type | Visit Date on one row, continuing the Your Details
   fields directly (same labels, same field rhythm — no section divider). */
.mts-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--wp--preset--spacing--20, 1em);
}

.mts-form-row-col {
	min-width: 0;
}

/* A non-<label> field caption (e.g. the Ticket Type radio group's),
   styled exactly like the theme's own field labels (Name, Email, …). */
.mts-field-label {
	display: block;
	margin: 0 0 var(--mts-space-xs);
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: inherit;
	line-height: 1.5;
}

/* Within its half-width column the date picker takes the full width. */
.mts-form-row .mts-visit-date-section {
	grid-template-columns: 1fr;
}

/* Your Details: Name on its own full-width row, then Email | Phone. */
.mts-form-main .mts-field-group-details {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mts-form-main .mts-field-group-details > .mts-field:first-child {
	grid-column: 1 / -1;
}

/* Stacks below 1200px: at tablet-landscape widths (~1024px) the two-column
   layout left the details column only ~380px wide — too narrow for the
   Ticket Type options and the two-per-line ticket grid. */
@media (max-width: 1199px) {
	.mts-form-layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Stacked in DOM order: details + payment → summary → reCAPTCHA + button. */
	.mts-form-main,
	.mts-form-aside,
	.mts-form-actions {
		grid-column: 1;
		grid-row: auto;
	}

	.mts-form-aside-inner {
		position: static;
		padding: 0;
		border: none;
		background: none;
	}

	/* Stacked: the aside continues the form's own section rhythm. */
	.mts-form-aside .mts-order-summary > .mts-form-section-title {
		margin-top: calc(var(--mts-space-lg) - var(--mts-space-md));
		padding-top: var(--mts-space-lg);
		border-top: 1px solid #eee;
	}
}

@media (max-width: 600px) {
	.mts-form-main .mts-field-group-details,
	.mts-form-row {
		grid-template-columns: 1fr;
	}
}

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

/* The `hidden` attribute must always win. Components here set their own
   display (e.g. .mts-order-summary-row is display:flex), which otherwise
   overrides the browser's [hidden] rule — that is what kept the
   Convenience Charge row visible at 0%. The form's JS toggles visibility
   only through `hidden`, never inline display styles. */
.mts-ticket-form-wrap [hidden],
.mts-status [hidden] {
	display: none !important;
}

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

.mts-ticket-form-wrap p {
	margin-top: 0;
}

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

/* Section titles: the divider sits in the middle of the section gap. The
   preceding field already supplies --mts-space-md below itself, so the
   title only adds the remainder above the divider line. */
.mts-form-section-title {
	margin: calc(var(--mts-space-lg) - var(--mts-space-md)) 0 var(--mts-space-md);
	padding-top: var(--mts-space-lg);
	border-top: 1px solid #eee;
	font-size: 1.1rem;
	line-height: 1.3;
	color: #023991;
}

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

.mts-form-section-title .mts-required {
	font-size: 1rem;
}

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

.mts-field {
	margin: 0 0 var(--mts-space-md);
}

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

.mts-field-group {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 var(--wp--preset--spacing--20, 1em);
}

.mts-field-group-card-meta {
	grid-template-columns: repeat(3, 1fr);
}

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

	/* Phones: Expiry Month | Expiry Year side by side, CVV beneath. */
	.mts-field-group-card-meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mts-field-group-card-meta > .mts-field:last-child {
		grid-column: 1 / -1;
	}
}

.mts-required {
	color: #b32d2e;
}

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

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

/* Custom select (Expiry Month/Year) — same as the Events plugin's .escr-select. */

.mts-select {
	position: relative;
	display: block;
}

.mts-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: 1px solid currentColor;
	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;
}

.mts-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;
}

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

.mts-select select:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Ticket Type options — styled as input boxes, so they match the Name /
   Email / Phone / Visit Date fields: the same height, 1px #d8d8d8 border,
   6px radius, theme input background, font size, and padding (taken from
   the theme's own input rule). Each option shows a radio dot; the selected
   one switches to the brand-blue border, dot, and a light blue fill. */

.mts-pill-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20, 1em);
}

.mts-pill-option {
	position: relative;
	min-width: 0;
}

.mts-pill-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mts-pill-option label {
	display: flex !important;
	align-items: center;
	gap: 0.6em;
	box-sizing: border-box;
	width: 100%;
	min-height: 42px;
	margin: 0 !important;
	padding: 0.8rem 1rem;
	background-color: var(--wp--custom--input-background, #fff);
	border: 1px solid #d8d8d8;
	border-radius: 6px;
	color: currentColor;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: inherit;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* The radio dot. */
.mts-pill-option label::before {
	content: '';
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 1px solid #8c8f94;
	border-radius: 50%;
	background: #fff;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.mts-pill-option-meta {
	margin-left: auto;
	font-size: 0.85em;
	font-weight: 600;
	color: #646970;
}

.mts-pill-option label:hover {
	border-color: #023991;
}

.mts-pill-option input:checked + label {
	background-color: #f5f7fc;
	border-color: #023991;
	color: #023991;
}

.mts-pill-option input:checked + label::before {
	border-color: #023991;
	box-shadow: inset 0 0 0 4px #023991;
}

.mts-pill-option input:checked + label .mts-pill-option-meta {
	color: #023991;
}

.mts-pill-option input:focus-visible + label {
	outline: 2px solid #023991;
	outline-offset: 2px;
}

.mts-ticket-type-field.mts-invalid .mts-pill-option label {
	border-color: #b32d2e;
}

/* Visit Date. */

.mts-visit-date-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 var(--wp--preset--spacing--20, 1em);
	align-items: start;
}

@media (max-width: 600px) {
	.mts-visit-date-section {
		grid-template-columns: 1fr;
	}
}

.mts-date-input-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. */
.mts-date-input-wrap input {
	width: 100%;
	box-sizing: border-box;
	padding-right: 2.75rem !important;
	cursor: pointer;
}

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

.mts-visit-day-info {
	margin: 0 0 var(--mts-space-md);
	padding: 12px 16px;
	border-left: 3px solid #023991;
	border-radius: 0 8px 8px 0;
	background: #f5f7fc;
	font-size: 0.9rem;
}

.mts-visit-day-info p {
	margin: 4px 0 0;
}

/* The Visit Day note heads the actions block (above the reCAPTCHA): a
   soft, fully rounded card with the brand-blue accent edge. The actions
   block's own gap spaces it from the reCAPTCHA row below. */
.mts-form-footer .mts-visit-day-note,
.mts-form-footer .mts-residency-note,
.mts-status .mts-visit-day-note {
	margin: 0;
	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;
}

/* Thank You page: the note follows Payment Status, left-aligned like the
   summary lists above it (the status card itself is centered). */
.mts-status .mts-status-visit-day-note {
	margin-top: var(--mts-space-md);
	text-align: left;
}

.mts-residency-note strong,
.mts-visit-day-note strong {
	margin-right: 0.35em;
	color: #1d2327;
}

.mts-visit-day-sep {
	margin: 0 0.5em;
	color: #8c8f94;
}

/* Ticket quantities. */

.mts-tickets-placeholder {
	margin: 0;
	padding: 16px;
	border: 1px dashed #d8d8d8;
	border-radius: 8px;
	color: #666;
	font-size: 0.9rem;
	text-align: center;
}

.mts-tickets-field.mts-invalid .mts-ticket-group {
	border-color: #b32d2e;
}

/* Two ticket options per line (Adult | Senior, Child (6–12) | Child (5
   and under), Local Student), stacking to one per line on phones. */
.mts-ticket-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--mts-space-lg);
	padding: var(--mts-space-xs) var(--mts-space-md);
	border: 1px solid #d8d8d8;
	border-radius: 8px;
}

/* display: grid would otherwise override the inactive group's [hidden]. */
.mts-ticket-group[hidden] {
	display: none;
}

.mts-ticket-group-title {
	grid-column: 1 / -1;
}

.mts-ticket-group-title {
	margin: var(--mts-space-sm) 0 var(--mts-space-xs);
	line-height: 1.3;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #023991;
}

.mts-ticket-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: var(--mts-space-sm) 0;
	border-top: 1px solid #eee;
}

/* The first line (two options) sits directly under the group title. */
.mts-ticket-group-title + .mts-ticket-row,
.mts-ticket-group-title + .mts-ticket-row + .mts-ticket-row {
	border-top: none;
}

.mts-ticket-row {
	min-width: 0;
}

@media (max-width: 600px) {
	.mts-ticket-group {
		grid-template-columns: 1fr;
	}

	.mts-ticket-group-title + .mts-ticket-row + .mts-ticket-row {
		border-top: 1px solid #eee;
	}
}

.mts-ticket-row-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mts-ticket-row-label {
	margin: 0 !important;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.mts-ticket-row-price {
	font-size: 0.9rem;
	color: #1d2327;
}

.mts-ticket-row-price-free {
	align-self: flex-start;
	padding: 1px 8px;
	border-radius: 999px;
	background: #023991;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Quantity stepper — same component as the Events plugin's attendees stepper. */

.mts-stepper {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: stretch;
	width: 140px;
	border: 1px solid #d8d8d8;
	border-radius: 6px;
	overflow: hidden;
}

.mts-stepper-btn {
	flex: 0 0 auto;
	width: 42px;
	min-height: 42px;
	padding: 0;
	border: none;
	background: #fff;
	color: #023991;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.mts-stepper-decrement {
	border-right: 1px solid #d8d8d8 !important;
}

.mts-stepper-increment {
	border-left: 1px solid #d8d8d8 !important;
}

.mts-stepper-btn:hover:not(:disabled) {
	background: #f5f7fc;
}

.mts-stepper-btn:disabled {
	background: #f5f5f5;
	cursor: not-allowed;
	opacity: 0.6;
}

/* !important on padding/radius/margin: the theme's `input:not(…)×4`
   rule would otherwise pad the number off-center between the buttons. */
.mts-stepper input[type="number"] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 42px;
	margin: 0 !important;
	padding: 0 4px !important;
	border: none !important;
	border-radius: 0 !important;
	text-align: center;
	-moz-appearance: textfield;
}

.mts-stepper input[type="number"]::-webkit-outer-spin-button,
.mts-stepper input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Phones keep "name/price | stepper" on one row (a ~330px row fits both);
   only very narrow screens stack the stepper under the name. */
@media (max-width: 340px) {
	.mts-ticket-row {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Order Summary — same panel as the Events plugin's payment summary. */

.mts-order-summary-box {
	background: #f7f7f7;
	border-radius: 8px;
	padding: var(--mts-space-md);
	margin: 0 0 var(--mts-space-md);
}

.mts-order-summary-lines {
	margin: 0 0 var(--mts-space-sm);
	padding: 0 0 var(--mts-space-xs);
	list-style: none;
	border-bottom: 1px solid #ddd;
}

/* One line per ticket: "Adult  1 × USD$15.00 ······ USD$15.00" — the
   label, then its muted quantity × price, then the line total pushed to
   the right. Only the label may wrap if the panel is very narrow. */
.mts-order-summary-line {
	display: flex;
	align-items: baseline;
	gap: 0 8px;
	padding: 6px 0;
	font-size: 0.95rem;
}

.mts-order-summary-line-label {
	min-width: 0;
	font-weight: 600;
}

.mts-order-summary-line-formula {
	flex: 0 0 auto;
	color: #555;
	font-size: 0.85rem;
	white-space: nowrap;
}

.mts-order-summary-line-total {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 12px;
	text-align: right;
	white-space: nowrap;
}

.mts-order-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	font-size: 0.95rem;
}

.mts-order-summary-total {
	border-top: 1px solid #ddd;
	margin-top: var(--mts-space-xs);
	padding-top: var(--mts-space-sm);
	font-size: 1.05rem;
}

.mts-order-summary-note {
	margin: var(--mts-space-sm) 0 0;
	font-size: 0.78rem;
	color: #777;
}

/* Payment section. */

.mts-payment-section {
	margin: 0;
	padding: 0;
	border: none;
	min-width: 0;
}

/* Select Tickets → Payment Details: the same even 32px gap (the tickets
   field's own 20px + 12px here) and no divider line, matching the gap from
   the card fields down to the Visit Day note — this was the left column's
   only remaining rule, and read as a heavier break than the rest. */
.mts-payment-section > .mts-form-section-title {
	margin: var(--mts-space-sm) 0 var(--mts-space-md);
	padding-top: 0;
	border-top: none;
}

.mts-card-number-wrap {
	position: relative;
}

/* Room for the card-type badge so it never covers the digits. */
.mts-card-number-wrap input {
	padding-right: 6.5rem !important;
}

.mts-card-type-icon {
	position: absolute;
	top: 50%;
	right: 0.75em;
	transform: translateY(-50%);
	pointer-events: none;
}

.mts-card-icon {
	display: inline-block;
	padding: 0.15em 0.5em;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	white-space: nowrap;
}

.mts-card-icon-visa {
	background-color: #1a1f71;
}

.mts-card-icon-mastercard {
	background-color: #eb001b;
}

.mts-card-icon-amex {
	background-color: #2e77bc;
}

.mts-card-icon-discover {
	background-color: #ff6000;
}

/* Footer: reCAPTCHA + submit. */

/* Top-aligned (not centered) so the submit button stays put when an
   error message appears beneath the reCAPTCHA widget. */
.mts-form-footer {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--mts-space-md);
	margin: calc(var(--mts-space-lg) - var(--mts-space-md)) 0 0;
	padding-top: var(--mts-space-lg);
	border-top: 1px solid #eee;
}

/* No scroll box: Google's widget is a fixed 304×78 iframe, so the former
   `overflow-x: auto` (which also forces overflow-y to auto) showed
   scrollbars whenever this flex item was squeezed narrower than 304px or
   the inline iframe's baseline gap added a few pixels of height. The
   wrapper now never shrinks below the widget, the iframe sits as a block,
   and very narrow phones scale the widget down instead (see below). */
.mts-field-recaptcha {
	flex: 0 0 auto;
	max-width: 100%;
	overflow: visible;
}

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

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

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

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

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

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

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

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

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

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

	.mts-form-footer {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

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

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

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

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

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

/* DatePicker (jQuery UI) — scoped to this plugin's own popup only. */

.mts-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;
}

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

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

.mts-datepicker .ui-datepicker-prev,
.mts-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;
}

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

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

.mts-datepicker .ui-datepicker-prev::after,
.mts-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mts-datepicker .ui-datepicker-calendar .mts-date-unavailable span {
	color: #b0b0b0;
	text-decoration: line-through;
	cursor: not-allowed;
}

.mts-datepicker .ui-datepicker-calendar .ui-datepicker-other-month span {
	color: #d0d0d0;
	text-decoration: none;
}

/* Thank You / Failed status. */

.mts-status {
	max-width: 680px;
	margin: 40px auto;
	padding: 32px 28px;
	border: 1px solid #e2e2e2;
	border-radius: 20px;
	background: #fff;
	box-sizing: border-box;
	text-align: center;
}

/* Same theme-heading pin as the form's own <h2>. */
.mts-status h2 {
	margin: 0 0 var(--mts-space-sm);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	line-height: 1.2;
}

.mts-status p {
	margin: 0 0 var(--mts-space-md);
}

.mts-status > :last-child {
	margin-bottom: 0;
}

.mts-status-success h2 {
	color: #023991;
}

.mts-status-failed h2 {
	color: #b32d2e;
}

.mts-status-pending h2 {
	color: #8a6d00;
}

.mts-status-reference {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: var(--mts-space-sm) 24px;
	border-radius: 8px;
	background: #f5f7fc;
}

.mts-status-reference span {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #666;
}

.mts-status-reference strong {
	font-size: 1.3rem;
	color: #023991;
	letter-spacing: 0.02em;
}

.mts-status-summary {
	text-align: left;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
	margin: var(--mts-space-md) 0;
	padding: var(--mts-space-md);
	background: #f7f7f7;
	border-radius: 8px;
}

.mts-status-summary dt {
	font-weight: 600;
	color: #666;
}

.mts-status-summary dd {
	margin: 0;
}

.mts-status-tickets {
	width: 100%;
	margin: var(--mts-space-md) 0;
	border-collapse: collapse;
	font-size: 0.92rem;
	text-align: left;
}

.mts-status-tickets th,
.mts-status-tickets td {
	padding: 8px 6px;
	border: none;
	border-bottom: 1px solid #eee;
}

.mts-status-tickets thead th {
	color: #666;
	font-weight: 600;
	border-bottom-width: 2px;
}

.mts-status-tickets td:nth-child(n+2),
.mts-status-tickets th:nth-child(n+2) {
	text-align: right;
}

.mts-status-tickets tfoot th,
.mts-status-tickets tfoot td {
	border-bottom: none;
}

.mts-status-tickets-total th,
.mts-status-tickets-total td {
	font-weight: 700;
	font-size: 1rem;
}

/* Thank You (success) — full page, matching the ticket form: the same
   max-widths and breakpoints, no outer card, a centered header, then
   booking/ticket details beside a Payment Summary card. Pending/failed
   states keep the compact centered card above. */
.mts-status.mts-status-full {
	width: 100%;
	max-width: 1340px !important;
	margin: 40px auto 0;
	padding: 36px 0;
	border: none;
	border-radius: 0;
	background: none;
	text-align: left;
}

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

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

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

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

.mts-status-full .mts-status-header {
	margin: 0 0 var(--mts-space-lg);
	padding-bottom: var(--mts-space-lg);
	border-bottom: 1px solid #eee;
	text-align: center;
}

/* The confirmation message on a single line wherever it fits (desktop and
   tablet); only phones, narrower than the sentence itself, wrap it. */
.mts-status-full .mts-status-header p {
	margin: 0 auto var(--mts-space-md);
	max-width: none;
}

@media (min-width: 768px) {
	.mts-status-full .mts-status-header > p:not(.mts-status-reference) {
		white-space: nowrap;
	}
}

.mts-status-full .mts-status-header .mts-status-reference {
	margin: 0;
}

/* Booking Reference, then Transaction Reference and Payment Status, in one
   centered row of matching boxes (wrapping on narrow screens). */
.mts-status-references {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--mts-space-sm);
}

.mts-status-references .mts-status-reference {
	justify-content: center;
	min-width: 0;
}

/* All three boxes share one design — the Booking Reference matches the
   Transaction Reference and Payment Status boxes; a long transaction ID
   (a GUID) may wrap rather than overflow. */
.mts-status-references .mts-status-reference strong {
	font-size: 0.95rem;
	color: #1d2327;
	letter-spacing: 0;
	word-break: break-all;
}

.mts-status-reference-secondary .mts-status-badge {
	font-size: 0.85rem;
	/* Not the box label's uppercase — reads "Paid", as everywhere else. */
	text-transform: none;
	letter-spacing: 0;
}

@media (max-width: 600px) {
	.mts-status-references .mts-status-reference {
		flex: 1 1 100%;
	}
}

.mts-status-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
	gap: 0 40px;
	align-items: start;
}

.mts-status-main,
.mts-status-aside {
	min-width: 0;
}

.mts-status-section-title {
	margin: 0 0 var(--mts-space-sm);
	font-size: 1.1rem;
	line-height: 1.3;
	color: #023991;
}

.mts-status-main .mts-status-section-title + .mts-status-summary {
	margin-top: 0;
}

.mts-status-main .mts-status-summary + .mts-status-section-title {
	margin-top: var(--mts-space-lg);
}

.mts-status-full .mts-status-tickets {
	margin: 0;
}

/* Labels in a fixed column beside their values, on every width. */
.mts-status-full .mts-status-summary {
	grid-template-columns: minmax(110px, 200px) minmax(0, 1fr);
}

/* Payment Summary card — same panel as the form's sticky Order Summary. */
.mts-status-aside {
	position: sticky;
	top: 24px;
	padding: 24px;
	border: 1px solid #e2e2e2;
	border-radius: 16px;
	background: #fafbfd;
}

.mts-status-payment-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	font-size: 0.95rem;
}

.mts-status-payment-total {
	margin-top: var(--mts-space-xs);
	padding-top: var(--mts-space-sm);
	border-top: 1px solid #ddd;
	font-size: 1.05rem;
}

.mts-status-badge {
	display: inline-block;
	padding: 1px 10px;
	border-radius: 999px;
	background: #aac4ed;
	color: #023991;
	font-size: 0.8rem;
	font-weight: 700;
}

.mts-status-full .mts-status-visit-day-note {
	margin-top: var(--mts-space-lg);
}

@media (max-width: 991px) {
	.mts-status-layout {
		grid-template-columns: 1fr;
		gap: var(--mts-space-lg);
	}

	.mts-status-aside {
		position: static;
	}
}

@media (max-width: 480px) {
	.mts-status-aside {
		padding: 18px;
	}

	.mts-status-full .mts-status-summary {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

/* Payment Failed — same full-page layout as the Thank You page (it shares
   .mts-status-full / .mts-status-layout / the aside card), plus an icon, a
   Try Again button, and the "What You Can Do" list. */
/* Payment Status "Failed" badge (the success one is green). */
.mts-status-badge.mts-status-badge-failed {
	background: #fdecea;
	color: #b32d2e;
}

/* "What You Can Do" sits full-width beneath the order details. */
.mts-status-help-block {
	margin-top: var(--mts-space-lg);
}

.mts-status-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 0 var(--mts-space-sm);
	border-radius: 50%;
	background: #fdecea;
	color: #b32d2e;
}

/* Same specificity as the header paragraph rule it must beat. */
.mts-status-full .mts-status-header .mts-status-actions {
	margin: var(--mts-space-md) 0 0;
}

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

.mts-status-help {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mts-status-help li {
	position: relative;
	margin: 0 0 var(--mts-space-sm);
	padding: 0 0 0 28px;
	line-height: 1.6;
}

.mts-status-help li::before {
	content: '';
	position: absolute;
	top: 0.55em;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #023991;
}

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

.mts-status-link {
	color: #023991;
}

@media (max-width: 480px) {
	.mts-status {
		padding: 24px 16px;
	}

	.mts-status-summary {
		grid-template-columns: 1fr;
	}

	.mts-status-tickets {
		font-size: 0.85rem;
	}
}


/* Start the Header/Footer block styles 21-10-2026*/
header nav{
    width: 100% !important;
}
header nav .wp-block-buttons{
    margin-top: 0 !important;
    margin-left: auto !important;
}
header .wp-block-group.is-nowrap.is-layout-flex{
    width: 100% !important;
}
header .btn-header-tickets a{
    color: #af2531 !important;
    font-weight: 600 !important;
}
@media (max-width: 1199px){
    header .btn-header-tickets a{
        padding: 10px 15px	!important;
    }
    header .wp-block-navigation__responsive-container-content{
        gap: 10px !important;
    }
}
@media (max-width: 600px){
    header nav .wp-block-buttons{
        margin-left: unset !important;
    }
    header .btn-header-tickets a{
        background:#af2531 !important;
        color:#fff !important;
    }
}
footer .btn-header-tickets{
    display: none !important;
}
/* End the Header/Footer block styles 21-10-2026*/