/**
 * Online Membership Payment — frontend styles.
 *
 * Follows the Museum Ticket Sales plugin's design system
 * (museum-ticket-sales.css / DESIGN.md) class-for-class where an
 * equivalent component exists, with mts- renamed to omp-: the same
 * container widths, spacing tokens, "don't fight the theme" input
 * treatment (border-color override only), custom select, pill radios,
 * card-type badges, sticky summary panel, footer, messages, and result
 * page. New here: membership options (the same pill radios), the signature field, and the
 * signature popup. Palette anchors: #1d2327 (ink) and #023991 (brand blue
 * accent); #b32d2e errors; #1a7d3c success.
 */

/*
 * Spacing scale — same tokens as the Ticket Sales form:
 *   --omp-space-xs  6px   label → input
 *   --omp-space-sm  12px  inside a component
 *   --omp-space-md  20px  between fields
 *   --omp-space-lg  28px  between sections (above a section divider)
 */
.omp-membership-form-wrap,
.omp-status,
.omp-signature-modal {
	--omp-space-xs: 6px;
	--omp-space-sm: 12px;
	--omp-space-md: 20px;
	--omp-space-lg: 28px;
	--omp-signature-font: "Segoe Script", "Brush Script MT", "Lucida Handwriting", "Apple Chancery", "Snell Roundhand", "Dancing Script", cursive;
}

/* Full page width: as wide as the page's own wide content (the theme's
   wide size, like an alignwide table or paragraph beside it), so the form
   lines up with the rest of the page at every screen width. The theme's
   :where() content-size constraint has zero specificity, so this
   max-width wins; the theme still centers it and supplies the side
   gutters. */
.omp-membership-form-wrap {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1340px) !important;
	margin: 40px auto 0;
	padding: 36px 0;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.omp-membership-form-wrap {
		padding: 28px 0;
	}
}

/* The `hidden` attribute must always win over component display rules —
   JS toggles visibility only through `hidden`. */
.omp-membership-form-wrap [hidden],
.omp-status [hidden],
.omp-signature-modal [hidden],
.omp-signature-modal[hidden] {
	display: none !important;
}

.omp-membership-form-wrap input,
.omp-membership-form-wrap textarea,
.omp-membership-form-wrap select,
.omp-signature-modal input {
	border: 1px solid #d8d8d8 !important;
}

.omp-membership-form-wrap p {
	margin-top: 0;
}

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

/* Block themes size a bare <h2> as a display heading — pin it. */
.omp-membership-form-wrap > h2 {
	margin: 0 0 var(--omp-space-lg);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	line-height: 1.2;
	text-align: center;
}

/* Two-column layout: application + card details | sticky Payment Information. */
.omp-form-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
	gap: 0 40px;
	align-items: start;
}

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

.omp-form-main {
	grid-column: 1;
	grid-row: 1;
}

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

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

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

.omp-form-aside .omp-order-summary > .omp-form-section-title {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Stacks below 1200px, in DOM order: details + card → summary → button. */
@media (max-width: 1199px) {
	.omp-form-layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.omp-form-main,
	.omp-form-aside,
	.omp-form-actions {
		grid-column: 1;
		grid-row: auto;
	}

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

	.omp-form-aside .omp-order-summary > .omp-form-section-title {
		margin-top: calc(var(--omp-space-lg) - var(--omp-space-md));
		padding-top: var(--omp-space-lg);
		border-top: 1px solid #eee;
	}
}

/* Section titles: the divider sits in the middle of the section gap. */
.omp-form-section-title {
	margin: calc(var(--omp-space-lg) - var(--omp-space-md)) 0 var(--omp-space-md);
	padding-top: var(--omp-space-lg);
	border-top: 1px solid #eee;
	font-size: 1.1rem;
	line-height: 1.3;
	color: #023991;
}

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

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

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

/* A non-<label> caption (radio groups, the signature) styled like the
   theme's own field labels. */
.omp-field-label {
	display: block;
	margin: 0 0 var(--omp-space-xs);
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: inherit;
	line-height: 1.5;
}

/* Signature | Today's Date share a line: the date's <label> matches the
   Signature caption's metrics so both fields start level. */
.omp-form-row-signature .omp-field > label {
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	line-height: 1.5;
}

.omp-field-help {
	margin: var(--omp-space-xs) 0 0;
	font-size: 0.82rem;
	color: #646970;
}

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

.omp-field-group > .omp-field-wide {
	grid-column: 1 / -1;
}

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

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

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

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

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

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

.omp-membership-form-wrap input[type="text"],
.omp-membership-form-wrap input[type="email"],
.omp-membership-form-wrap input[type="tel"],
.omp-membership-form-wrap textarea {
	width: 100%;
	box-sizing: border-box;
}

.omp-membership-form-wrap textarea {
	min-height: 96px;
	resize: vertical;
	font: inherit;
}

/* Today's Date: read-only, visibly not editable. */
.omp-membership-form-wrap .omp-readonly {
	background-color: #f5f5f5;
	color: #3c434a;
	cursor: default;
}

.omp-required {
	color: #b32d2e;
}

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

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

/* Custom select (Expiry Month/Year) — the Ticket Sales .mts-select. */
.omp-select {
	position: relative;
	display: block;
}

.omp-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);
	line-height: 1.5;
	min-height: 42px;
	padding: 0.8rem 2.25rem 0.8rem 1rem;
}

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

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

/* Membership Type — the same pill radios as the mailing list Yes / No
   (radio dot, plain text, same height, gap and colors), with the amount on
   the right like the Ticket Sales ticket-type pills. Selected = brand-blue
   border, dot, and a light blue fill. */
.omp-membership-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--20, 1em);
}

.omp-membership-option,
.omp-pill-option {
	position: relative;
	min-width: 0;
}

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

.omp-membership-option label,
.omp-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);
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Pills in one row share its height when a long title wraps. */
.omp-membership-option label {
	height: 100%;
}

/* The radio dot. */
.omp-membership-option label::before,
.omp-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;
}

.omp-membership-option-title {
	min-width: 0;
}

.omp-membership-option-amount {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: var(--omp-space-sm);
	white-space: nowrap;
}

.omp-membership-option label:hover,
.omp-pill-option label:hover {
	border-color: #023991;
}

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

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

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

.omp-membership-type-field.omp-invalid .omp-membership-option label,
.omp-mailing-list-field.omp-invalid .omp-pill-option label,
.omp-currency-field.omp-invalid .omp-pill-option label {
	border-color: #b32d2e;
}

/* The selected membership's description. */
.omp-membership-description {
	margin: var(--omp-space-sm) 0 0;
	padding: 14px 18px;
	border: 1px solid #e3e8f4;
	border-left: 3px solid #023991;
	border-radius: 8px;
	background: #f5f7fc;
	color: #3c434a;
	font-size: 0.9rem;
	line-height: 1.6;
}

.omp-membership-description > :first-child {
	margin-top: 0;
}

.omp-membership-description > :last-child {
	margin-bottom: 0;
}

/* Mailing list Yes / No, and Currency KYD / USD. */
.omp-pill-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20, 1em);
}

/* Signature field. */
.omp-signature-open {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	width: 100%;
	min-height: 96px;
	padding: 16px;
	border: 1px dashed #8c8f94;
	border-radius: 8px;
	background: #fff;
	color: #023991;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.omp-signature-open:hover {
	border-color: #023991;
	background: #f5f7fc;
}

.omp-signature-open:focus-visible,
.omp-link-button:focus-visible {
	outline: 2px solid #023991;
	outline-offset: 2px;
}

.omp-signature-field.omp-invalid .omp-signature-open,
.omp-signature-field.omp-invalid .omp-signature-preview-box {
	border-color: #b32d2e;
}

.omp-signature-preview-box {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	padding: 12px;
	border: 1px solid #d8d8d8;
	border-radius: 8px;
	background: #fff;
}

.omp-signature-preview-box img {
	display: block;
	max-width: 100%;
	max-height: 120px;
	height: auto;
}

.omp-signature-typed {
	font-family: var(--omp-signature-font);
	font-size: 2rem;
	line-height: 1.3;
	color: #1d2327;
	word-break: break-word;
}

.omp-signature-preview-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--omp-space-xs) var(--omp-space-md);
	margin-top: var(--omp-space-xs);
	font-size: 0.85rem;
	color: #646970;
}

.omp-signature-preview-actions {
	display: inline-flex;
	gap: var(--omp-space-md);
}

.omp-link-button {
	padding: 0;
	border: none;
	background: none;
	color: #023991;
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.omp-signature-clear {
	color: #b32d2e;
}

/* Payment Information — the Ticket Sales Order Summary panel. */
.omp-order-summary-empty {
	margin: 0 0 var(--omp-space-md);
	padding: var(--omp-space-md);
	border: 1px dashed #d8d8d8;
	border-radius: 8px;
	background: #fff;
	color: #666;
	font-size: 0.9rem;
	text-align: center;
}

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

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

.omp-order-summary-row > span:last-child {
	text-align: right;
	white-space: nowrap;
}

.omp-order-summary-membership {
	margin-bottom: var(--omp-space-xs);
	padding-bottom: var(--omp-space-sm);
	border-bottom: 1px solid #ddd;
}

.omp-order-summary-membership > span:last-child {
	font-weight: 600;
	white-space: normal;
}

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

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

/* Card details. */
.omp-payment-section {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
}

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

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

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

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

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

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

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

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

/* Footer: reCAPTCHA + Submit & Pay. Top-aligned so the button stays put
   when an error appears beneath the widget. */
.omp-form-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--omp-space-md);
	margin: var(--omp-space-sm) 0 0;
}

/* Membership Application Note (Settings → General): the Ticket Sales
   note box, full width above the reCAPTCHA and Submit & Pay. */
.omp-application-note {
	flex: 1 1 100%;
	box-sizing: border-box;
	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;
	overflow-wrap: anywhere;
}

.omp-application-note p,
.omp-application-note ul,
.omp-application-note ol {
	margin: 0 0 0.6em;
}

.omp-application-note > :last-child {
	margin-bottom: 0;
}

.omp-application-note strong {
	color: #1d2327;
}

.omp-application-note a {
	color: #023991;
}

.omp-field-recaptcha {
	flex: 0 0 auto;
	max-width: 100%;
	overflow: visible;
}

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

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

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

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

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

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

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

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

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

	.omp-form-footer {
		flex-direction: column;
	}

	.omp-field-submit,
	.omp-submit-button {
		width: 100%;
		margin-left: 0;
		margin-top: 0;
	}

	.omp-signature-typed {
		font-size: 1.6rem;
	}
}

/* Messages. */
.omp-form-messages,
.omp-unavailable {
	margin-bottom: 16px;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 0.9rem;
}

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

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

.omp-unavailable {
	border: 1px solid #f0d58c;
	background: #fcf6e5;
	color: #6b5200;
}

/* ---------------------------------------------------------------------
 * Signature popup (moved to <body> by signature.js).
 * ------------------------------------------------------------------- */

html.omp-modal-open,
html.omp-modal-open body {
	overflow: hidden;
}

.omp-signature-modal {
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	color: #1d2327;
	font-size: 1rem;
	line-height: 1.5;
}

.omp-signature-modal *,
.omp-signature-modal *::before,
.omp-signature-modal *::after {
	box-sizing: border-box;
}

.omp-signature-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.omp-signature-modal-dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	max-height: calc(100vh - 32px);
	overflow: auto;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.omp-signature-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #eee;
}

.omp-signature-modal-header h3 {
	margin: 0;
	font-size: 1.1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #023991;
}

.omp-signature-modal-close {
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	color: #646970;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.omp-signature-modal-close:hover {
	background: #f5f7fc;
	color: #1d2327;
}

.omp-signature-tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	margin: 16px 20px 0;
	padding: 4px;
	border-radius: 10px;
	background: #f0f2f7;
}

.omp-signature-tab {
	min-height: 40px;
	padding: 8px 12px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: #3c434a;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.omp-signature-tab[aria-selected="true"] {
	background: #fff;
	color: #023991;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.omp-signature-tab:focus-visible,
.omp-signature-modal-close:focus-visible,
.omp-signature-secondary:focus-visible {
	outline: 2px solid #023991;
	outline-offset: 2px;
}

.omp-signature-panel {
	padding: 20px;
}

.omp-signature-panel-title {
	display: block;
	margin: 0 0 var(--omp-space-sm);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #646970;
}

/* Draw. */
.omp-signature-pad-wrap {
	position: relative;
	border: 1px solid #d8d8d8;
	border-radius: 8px;
	background: #fff;
}

.omp-signature-pad {
	display: block;
	width: 100%;
	height: 200px;
	border-radius: 8px;
	cursor: crosshair;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.omp-signature-pad-line {
	position: absolute;
	right: 24px;
	bottom: 44px;
	left: 24px;
	border-bottom: 1px dashed #c3c4c7;
	pointer-events: none;
}

.omp-signature-pad-hint {
	position: absolute;
	right: 0;
	bottom: 16px;
	left: 0;
	color: #8c8f94;
	font-size: 0.82rem;
	text-align: center;
	pointer-events: none;
}

/* Type. */
.omp-signature-modal .omp-signature-type-input {
	width: 100%;
	min-height: 44px;
	padding: 0.7rem 1rem;
	border-radius: 6px;
	font: inherit;
}

.omp-signature-preview-label {
	margin: var(--omp-space-md) 0 var(--omp-space-xs);
	font-size: 0.82rem;
	color: #646970;
}

.omp-signature-type-preview,
.omp-signature-upload-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 110px;
	padding: 12px;
	border: 1px dashed #d8d8d8;
	border-radius: 8px;
	background: #fafbfd;
}

.omp-signature-type-preview .omp-signature-typed {
	font-size: 2.2rem;
	text-align: center;
}

/* Upload. */
.omp-signature-modal .omp-signature-upload-input {
	width: 100%;
	padding: 10px;
	border-style: dashed !important;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 0.9rem;
}

.omp-signature-upload-preview img {
	display: block;
	max-width: 100%;
	max-height: 160px;
	height: auto;
}

.omp-signature-upload-empty {
	color: #8c8f94;
	font-size: 0.85rem;
}

.omp-signature-error {
	margin-top: var(--omp-space-sm);
	padding: 8px 12px;
	border: 1px solid #f3b8b4;
	border-radius: 4px;
	background: #fdecea;
	color: #b32d2e;
	font-size: 0.85rem;
}

.omp-signature-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--omp-space-sm);
	margin-top: var(--omp-space-md);
}

.omp-signature-secondary {
	min-height: 42px;
	padding: 0.6rem 1.4rem;
	border: 1px solid #d8d8d8;
	border-radius: 6px;
	background: #fff;
	color: #1d2327;
	font: inherit;
	cursor: pointer;
}

.omp-signature-secondary:hover {
	border-color: #023991;
	color: #023991;
}

.omp-signature-apply {
	cursor: pointer;
}

/* Phones: the popup fills the screen. */
@media (max-width: 600px) {
	.omp-signature-modal {
		padding: 0;
		align-items: stretch;
	}

	.omp-signature-modal-dialog {
		max-width: none;
		max-height: none;
		height: 100%;
		border-radius: 0;
	}

	.omp-signature-pad {
		height: 180px;
	}

	.omp-signature-actions > button {
		flex: 1 1 auto;
	}
}

/* ---------------------------------------------------------------------
 * Thank You / status — the Ticket Sales result page.
 * ------------------------------------------------------------------- */

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

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

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

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

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

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

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

.omp-status.omp-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) {
	.omp-status.omp-status-full {
		max-width: 1100px !important;
	}
}

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

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

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

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

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

.omp-status-references {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--omp-space-sm);
}

.omp-status-reference {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	margin: 0 !important;
	padding: var(--omp-space-sm) 24px;
	border-radius: 8px;
	background: #f5f7fc;
}

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

.omp-status-reference strong {
	font-size: 0.95rem;
	color: #1d2327;
	word-break: break-all;
}

.omp-status-reference .omp-status-badge {
	text-transform: none;
	letter-spacing: 0;
}

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

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

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

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

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

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

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

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

.omp-status-description {
	padding: 14px 18px;
	border-left: 3px solid #023991;
	border-radius: 0 8px 8px 0;
	background: #f5f7fc;
	font-size: 0.9rem;
	line-height: 1.6;
}

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

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

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

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

.omp-status-full .omp-status-note {
	margin: var(--omp-space-lg) 0 0;
	padding: 14px 18px;
	border: 1px solid #e3e8f4;
	border-left: 3px solid #023991;
	border-radius: 8px;
	background: #f5f7fc;
	color: #3c434a;
	font-size: 0.9rem;
}

/* Payment Failed — same full-page layout as Thank You, plus a red icon,
   a Try Again button, and the "What You Can Do" list (the Ticket Sales
   plugin's booking-failed styles). */
.omp-status-failed .omp-status-icon {
	background: #fdecea;
	color: #b32d2e;
}

.omp-status-badge.omp-status-badge-failed {
	background: #fdecea;
	color: #b32d2e;
}

.omp-status-full .omp-status-header .omp-status-actions {
	margin: var(--omp-space-md) 0 0;
}

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

.omp-status-help-block {
	margin-top: var(--omp-space-lg);
}

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

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

.omp-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) {
	.omp-status-button {
		display: block;
		width: 100%;
	}
}

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

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

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

	.omp-status-aside {
		padding: 18px;
	}

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