/* ============================================================
   TXU Events - Sponsorship checkout, confirmation, resume, logo
   ------------------------------------------------------------
   Loaded after events-public.css, events-registration.css and
   events-detail.css (handle deps), which provide the tokens, the
   stepper, panes, fields, step buttons, order summary, modal, OTP
   card, confirmation hero and notes, Stripe mount and the
   ready-made .txu-ticket-radio card. This file only adds what those
   do not: package card details, the test-mode banner, the terms
   checkbox, confirmation boxes and invoice links, and the logo form.
   Everything is scoped under .txsp-* so the events pages are
   untouched.
   ============================================================ */

/* The scripts toggle `hidden` on elements that get a display value from a
   class (.txu-confirm-pending-note is flex, .txu-btn-register is flex), and
   a class rule beats the browser's own [hidden] rule. Do not depend on the
   theme's Bootstrap reboot for this. The error modal is portalled out of the
   wrapper, so it is listed by id. */
.txsp-checkout [hidden],
.txsp-confirmation [hidden],
#txsp-error-modal [hidden] { display: none !important; }

/* ---- Package radio cards (Step 1) ------------------------------
   The markup is a <label> (so the whole card selects the radio), and
   a label may only hold inline content, so the events "div" parts are
   spans here: give them their block layout back. */
.txsp-package-option .txu-ticket-info > span { display: block; }
.txsp-package-option .txu-ticket-name { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.txsp-package-option .txu-ticket-desc { font-weight: 600; letter-spacing: 0.01em; }
.txsp-package-option .txu-ticket-price { font-size: 1.25rem; font-weight: 600; white-space: nowrap; }
.txsp-package-option.is-sold-out { pointer-events: none; }
/* The events selected state is a 5% gold over a transparent card, which lets
   the list's hairline colour show through as tan. Same tint, opaque. */
.txsp-package-option.is-selected { background: #fbf8f1; }
.txsp-package-list { margin-bottom: 0.5rem; }

/* Non-sold-out "can't buy" states (Coming soon, Not on sale yet, ...):
   same badge shape as Sold out, calmer colour. */
.txu-sold-out-badge.txsp-state-soft { background: var(--txu-navy-700); }

/* ---- Test-mode banner ----------------------------------------- */
.txsp-test-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	background: repeating-linear-gradient(-45deg, #fff8e1, #fff8e1 10px, #fdf1cc 10px, #fdf1cc 20px);
	border: 1px dashed var(--txu-gold-600);
	border-radius: 2px;
	color: var(--txu-navy-900);
	font-size: 0.875rem;
	line-height: 1.5;
}
.txsp-test-banner strong {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8a5a00;
}

/* ---- Order summary tweaks (long names / emails wrap, never scroll) */
.txsp-summary .txu-order-line { gap: 1rem; }
.txsp-summary .txu-order-line > span:first-child { flex: none; }
.txsp-summary .txu-order-amount { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.txsp-summary-head {
	font-family: var(--txu-font-display);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--txu-navy-900);
}
.txsp-mode-badge {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--txu-gold-600);
	border-radius: 999px;
	color: var(--txu-gold-600);
	font-family: var(--txu-font-body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* ---- Payment step --------------------------------------------- */
.txsp-pay-title {
	font-family: var(--txu-font-display);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--txu-navy-900);
	margin: 0 0 1rem;
}
.txsp-checkout .txu-payment-block { margin-bottom: 0.5rem; }

.txsp-terms {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 1.5rem 0 0.25rem;
	color: var(--txu-ink);
	font-size: 0.9375rem;
	line-height: 1.5;
	cursor: pointer;
}
.txsp-terms input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0.15rem 0 0;
	accent-color: var(--txu-navy-900);
	cursor: pointer;
}
.txsp-terms a { color: var(--txu-navy-900); font-weight: 600; text-decoration: underline; }
.txsp-terms.has-error { color: var(--txu-danger); }

/* CAPTCHA for the pay call: only takes space when Turnstile renders. */
.txsp-pay-captcha { display: flex; justify-content: center; margin: 1rem 0 0; }
.txsp-pay-captcha:empty { display: none; }

.txsp-secure-note {
	margin: 1rem 0 0;
	text-align: center;
	font-size: 0.75rem;
	color: var(--txu-ink-muted);
}
.txsp-secure-note svg {
	width: 14px; height: 14px;
	vertical-align: -2px;
	stroke: currentColor; stroke-width: 1.75; fill: none;
}

/* Buttons rendered as links keep the button colours over theme link styles. */
.txsp-checkout a.txu-btn-submit,
.txsp-confirmation a.txu-btn-submit { color: #fff; text-decoration: none; }

/* ---- Confirmation --------------------------------------------- */
.txsp-confirmation .txu-confirm-hero { padding-bottom: 2rem; }
.txsp-confirmation .txu-confirm-subtitle strong { color: var(--txu-navy-900); }

.txsp-note-box {
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--txu-paper-dark);
	border-left: 4px solid var(--txu-gold-500);
	border-radius: 3px;
	color: var(--txu-ink);
	line-height: 1.6;
}
.txsp-note-box p { margin: 0 0 0.75rem; }
.txsp-note-box > :last-child { margin-bottom: 0; }
.txsp-note-title {
	font-family: var(--txu-font-display);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	color: var(--txu-navy-900);
	margin: 0 0 0.5rem;
}
.txsp-rich a { color: var(--txu-navy-900); text-decoration: underline; }
/* .txu-btn-register is a full-width block; as a link CTA in a box, size it to its label. */
.txsp-logo-cta .txu-btn-submit,
.txsp-center .txu-btn-submit { display: inline-flex; width: auto; }
.txsp-logo-cta .txu-btn-submit { margin-top: 0.25rem; }

/* Invoice links: the events outlined confirmation buttons, a little tighter. */
.txsp-invoice-actions { margin: 1rem 0 2rem; }

.txsp-ack-note {
	margin: 1.5rem 0;
	text-align: center;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--txu-ink-muted);
}
.txsp-center { text-align: center; }
.txsp-muted { font-size: 0.875rem; color: var(--txu-ink-muted); }
.txsp-muted a,
.txsp-checkout .txu-confirm-pending-note a,
.txsp-confirmation .txu-confirm-pending-note a { color: var(--txu-navy-900); font-weight: 600; }

/* ---- Logo upload ---------------------------------------------- */
.txsp-logo-form .txu-field input[type="url"] {
	width: 100%;
	padding: 0.75rem 0.875rem;
	font-family: var(--txu-font-num);
	font-size: 1rem;
	color: var(--txu-ink);
	background: #fff;
	border: 1px solid var(--txu-rule);
	border-radius: 2px;
	transition: border-color 200ms var(--txu-ease-out), box-shadow 200ms var(--txu-ease-out);
}
.txsp-file {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 150px;
	padding: 1.25rem;
	background: #fff;
	border: 1.5px dashed var(--txu-rule);
	border-radius: 2px;
	text-align: center;
	transition: border-color 200ms var(--txu-ease-out), background-color 200ms var(--txu-ease-out);
}
.txsp-file:hover,
.txsp-file:focus-within,
.txsp-file.is-dragover { border-color: var(--txu-navy-900); background: var(--txu-paper); }
/* The real input covers the zone, so click, keyboard and native drop all work. */
.txsp-file input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.txsp-file-text { font-size: 0.9375rem; color: var(--txu-ink-soft); }
.txsp-file-text strong { color: var(--txu-navy-900); }
.txsp-file-name { font-size: 0.8125rem; color: var(--txu-ink-muted); overflow-wrap: anywhere; }
.txsp-file-name:empty { display: none; }
.txsp-file-preview {
	padding: 0.5rem;
	border-radius: 2px;
	/* Checkerboard so a transparent logo is visible as such. */
	background: repeating-conic-gradient(#efe9dc 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
}
.txsp-file-preview img { max-width: 220px; max-height: 110px; width: auto; height: auto; object-fit: contain; }
.txu-field.has-error .txsp-file { border-color: var(--txu-danger); background: #fff5f5; }
.txsp-field-help {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--txu-ink-muted);
}
.txsp-link-btn {
	padding: 0;
	background: none;
	border: none;
	color: var(--txu-navy-900);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* ---- Phones ---------------------------------------------------- */
@media (max-width: 520px) {
	.txsp-checkout .txu-step-actions {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0.75rem;
	}
	.txsp-checkout .txu-step-actions > span:empty { display: none; }
	.txsp-checkout .txu-step-actions .txu-btn-next,
	.txsp-checkout .txu-step-actions .txu-btn-back,
	.txsp-checkout .txu-step-actions .txu-btn-submit { justify-content: center; }
	.txsp-confirmation { padding: 2rem 1rem 4rem; }
	.txsp-confirmation .txu-confirm-title { font-size: 1.875rem; line-height: 1.15; }
	.txsp-note-box { padding: 1rem 1.125rem; }
	.txsp-summary { padding: 1.125rem; }
}