/*
 * Jersey Bulls FC — Tickets page + ContactCard
 *
 * The live ticketing surface (BUL-D1): page hero + Future Ticketing embed +
 * ticketing-help cards.
 *
 * 2026-06-15 redesign (client feedback, Ed 14 Jun — "tickets in the smaller
 * display"): FT injects its own WHITE/light UI as DOM nodes (not an iframe) with
 * fixed internal widths. The old dark card squeezed it through two layers of
 * horizontal padding so on mobile the white panel was narrower than the viewport,
 * offset right, and its labels wrapped. We now:
 *   1. frame FT as an intentional LIGHT "checkout surface" (centred card on
 *      desktop, full-bleed edge-to-edge on mobile) instead of fighting FT dark, and
 *   2. give FT the full viewport width on mobile + reset its stray horizontal
 *      margins so the form fields stop wrapping/clipping.
 *
 * Markup: page-templates/tickets.php, template-parts/card-contact.php · tokens: css/tokens.css
 */

.bulls-ticket-page {
	max-width: var(--content-full);
	margin: 0 auto;
	padding: var(--space-16) var(--gutter);
	color: var(--t-fg);
}
/* Desktop corner gutters — full-width containers carry their own inset on the
   site-wide fullscreen canvas. */
@media (min-width: 1024px) {
	.bulls-ticket-page { padding-inline: clamp(72px, 7vw, 132px); }
}

/* ----- Page hero ----- */

.bulls-ticket-page__hero {
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--t-border-strong);
}

.bulls-ticket-page__kicker {
	margin: 0 0 var(--space-3);
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-bulls-red-300);
}

.bulls-ticket-page__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 0.92;
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	color: var(--t-fg);
}

.bulls-ticket-page__lead {
	margin: var(--space-4) 0 0;
	font-family: var(--ff-sans);
	font-size: var(--fs-200);
	color: var(--t-fg-muted);
}

/* ----- Future Ticketing embed — light "checkout surface" -----
   FT renders white/light UI; frame it as a centred light card on the dark page.
   The card hugs FT's own height (modest min-height carries the skeleton). */

.bulls-ticket-embed {
	position: relative;
	margin: 0 auto;
	max-width: 880px;
	min-height: 320px;
	padding: var(--space-6);
	background: var(--c-white);
	color: var(--c-ink-900);
	border: 1px solid var(--t-border);
	border-radius: var(--radius-md);
	overflow: hidden; /* backstop: clip any residual FT fixed-width overflow */
}

/* Skeleton (our loading state) — light shimmer to read on the white surface. */
.bulls-ticket-embed__skeleton {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 680px;
}

.bulls-ticket-embed__bar {
	height: 18px;
	border-radius: var(--radius-sm);
	background: linear-gradient(90deg, var(--c-ink-100) 25%, var(--c-ink-50) 50%, var(--c-ink-100) 75%);
	background-size: 200% 100%;
	animation: bulls-shimmer 1.6s ease-in-out infinite;
}

@keyframes bulls-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bulls-ticket-embed__bar { animation: none; }
}

/* FT APPENDS into #ft_container (doesn't replace it) — hide the skeleton +
   loading note once any ft_* node has mounted. */
#ft_container:has([id^="ft_shop"], [class^="ft_"]) .bulls-ticket-embed__skeleton,
#ft_container:has([id^="ft_shop"], [class^="ft_"]) .bulls-ticket-embed__note { display: none; }

.bulls-ticket-embed__note {
	margin: var(--space-4) 0 0;
	font-family: var(--ff-mono);
	font-size: var(--fs-75);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-ink-600);
}
.bulls-ticket-embed__note span {
	display: block;
	margin-top: var(--space-1);
	text-transform: none;
	letter-spacing: var(--ls-base);
	color: var(--c-ink-600);
}

/* ----- Contain FT's injected UI -----
   FT renders its own responsive white UI into #ft_container. Now the embed is
   full-width (mobile full-bleed) FT fits naturally at the container width, so we
   do NOT force widths on FT's internals — that flattened its basket-bar row and
   two-column option layouts (confirmed against the live FT DOM on staging). Just
   a containment backstop: cap every node at 100% (never force it) so nothing can
   exceed the surface, plus border-box so FT's padded fixed widths don't overflow. */
#ft_container { width: 100%; }
.bulls-ticket-embed * { box-sizing: border-box; max-width: 100%; }

/* FT renders notices/errors into #ft_message_bar with position:absolute + a fixed
   width (overflows our card). Bring it in-flow + contain it. On the light surface
   FT's own light styling reads fine; give errors a neutral accented treatment. */
.bulls-ticket-embed #ft_message_bar {
	position: static !important;
	width: 100% !important;
	max-width: 100%;
}
.bulls-ticket-embed #ft_message_bar:not(.ft_error) {
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	min-height: 0 !important;
}
.bulls-ticket-embed #ft_message_bar.ft_error,
.bulls-ticket-embed #ft_message_bar_text:not(:empty) {
	display: block;
	padding: var(--space-3) var(--space-4);
	background: var(--c-bulls-red-50);
	border: 0;
	border-left: 3px solid var(--c-bulls-red);
	border-radius: 0;
	color: var(--c-ink-900);
	font-family: var(--ff-sans);
	font-size: var(--fs-100);
}
.bulls-ticket-embed #ft_message_bar_text:not(:empty) { margin-bottom: var(--space-4); }

#ft_poweredby {
	margin-top: var(--space-4);
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	color: var(--c-ink-600);
}

/* ----- Future Ticketing readability + usability (basket / checkout screens) -----
   FT ships small type (11-15px) and short inputs, which read poorly + are fiddly to
   tap on mobile (client feedback, 15 Jun). Lift the embed to a readable, touch-
   friendly baseline. The form-control rules are class-agnostic (native inputs), so
   they cover the checkout customer-details form + quantity selects regardless of FT
   markup; the text-class bumps cover FT's px-set classes seen on staging. Sizes are
   moderate (16/18px) to avoid reflowing FT's layouts. */

/* Base — FT text that inherits scales up from here. */
.bulls-ticket-embed #ft_container { font-size: 16px; line-height: 1.5; }

/* Form controls — 16px prevents iOS focus-zoom; 48px min height = comfortable touch
   targets (WCAG 2.5.5); readable padding. */
.bulls-ticket-embed input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.bulls-ticket-embed select,
.bulls-ticket-embed textarea {
	font-size: 16px !important;
	min-height: 48px;
	padding: 10px 12px;
	line-height: 1.4;
}
.bulls-ticket-embed textarea { min-height: 96px; }

/* Buttons / submit controls — readable label + tappable. */
.bulls-ticket-embed button,
.bulls-ticket-embed .ft_form_submit,
.bulls-ticket-embed [class*="Submit"],
.bulls-ticket-embed [class*="submit"] {
	font-size: 16px !important;
	min-height: 48px;
}

/* Body / label / section text FT sets in px. */
.bulls-ticket-embed label,
.bulls-ticket-embed .ft_content_section_p,
.bulls-ticket-embed .ft_content_section_p_large,
.bulls-ticket-embed .ft_event_content_date,
.bulls-ticket-embed .ft_event_content_desc,
.bulls-ticket-embed .ft_label_continue_shopping_submit,
.bulls-ticket-embed .ft_label_finished_shopping_submit {
	font-size: 16px !important;
	line-height: 1.5;
}
.bulls-ticket-embed .ft_content_section_h3,
.bulls-ticket-embed .ft_event_category_label_h2,
.bulls-ticket-embed .ft_product_info_h2 { font-size: 18px !important; line-height: 1.3; }

/* Basket header bar — FT sets #ft_basket_text + its links at 12px explicitly. */
.bulls-ticket-embed #ft_shop_header_div,
.bulls-ticket-embed #ft_shop_header_div span,
.bulls-ticket-embed #ft_shop_header_div a,
.bulls-ticket-embed #ft_basket_text { font-size: 16px !important; }

/* Body copy FT ships small + inconsistently across screens: event descriptions
   ~11px (p), prices ~14px, listing-card blurbs. Bring body text + prices to a
   consistent 16px so nothing reads as tiny next to the 16px labels. Headings keep
   their larger sizes (set above). */
.bulls-ticket-embed #ft_container p,
.bulls-ticket-embed .ft_product_event_content span { font-size: 16px !important; line-height: 1.5; }
.bulls-ticket-embed .ft_ticket_price_div,
.bulls-ticket-embed .ft_ticket_price_div *,
.bulls-ticket-embed .ft-price-amount,
.bulls-ticket-embed .ft-currency-found,
.bulls-ticket-embed [class*="price"] { font-size: 16px !important; }

/* ----- FT embed brand styling (per FT's official styling docs) -----
   FT's default chrome is generic Arial on plain controls. Bring the embed in line
   with the Bulls brand via FT's documented hooks (#ft_container, h1-h6, .ft_form_submit,
   .ft_table_element). NB FT's embed doesn't render in headless automation, so this
   pass is reviewed on staging + iterated. */
.bulls-ticket-embed #ft_container { font-family: var(--ff-sans); color: var(--c-ink-900); }
.bulls-ticket-embed #ft_container h1,
.bulls-ticket-embed #ft_container h2,
.bulls-ticket-embed #ft_container h3,
.bulls-ticket-embed .ft_product_info_h2,
.bulls-ticket-embed .ft_event_category_label_h2,
.bulls-ticket-embed .ft_content_section_h3 {
	font-family: var(--ff-display);
	letter-spacing: var(--ls-snug);
	text-transform: uppercase;
	color: var(--c-ink-900);
}
/* CTAs in the site's brand-red button style. */
.bulls-ticket-embed .ft_form_submit {
	background: var(--c-bulls-red) !important;
	color: var(--c-white) !important;
	font-family: var(--ff-sans);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	border: 0 !important;
	border-radius: var(--radius-base);
}
.bulls-ticket-embed .ft_form_submit:hover { background: var(--c-bulls-red-600) !important; }
/* Links + checkout review table. */
.bulls-ticket-embed #ft_container a:not(.ft_form_submit) { color: var(--c-bulls-red); }
.bulls-ticket-embed .ft_table_element td { padding: 8px 10px; }
.bulls-ticket-embed .ft_table_element tr { border-bottom: 1px solid var(--c-ink-200); }

/* ----- Ticketing help cards (below the embed) ----- */

.bulls-ticket-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-2);
	max-width: 880px;
	margin: var(--space-8) auto 0;
}

/* ----- Desktop: tidy the FT customer form -----
   FT indents its form fields ~30% (padding-left) and fixes them at a narrow width,
   so on desktop they sit in a cramped left column with most of the surface empty
   (client 15 Jun). Drop the indent and centre the form in a comfortable column with
   fields filling it. (Mobile is handled in the max-width:760px block below.) */
@media (min-width: 761px) {
	.bulls-ticket-embed .ft_form_element {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: 560px;
	}
	.bulls-ticket-embed .ft_form_row,
	.bulls-ticket-embed .ft_form_field { width: 100% !important; max-width: 100% !important; float: none !important; }
	.bulls-ticket-embed .ft_form_input,
	.bulls-ticket-embed input:not(.ft_quantity):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	.bulls-ticket-embed select,
	.bulls-ticket-embed textarea {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		float: none !important;
		display: block;
		box-sizing: border-box;
	}
}

/* ----- Mobile: full-bleed the embed so FT gets the whole viewport width -----
   .bulls-ticket-page (= #bulls-content-main) already spans the full viewport flush
   (every ancestor is full-width with zero inline padding — measured), so we just
   drop the page's own inline padding and let the embed fill it at width:auto. This
   gives FT the exact viewport width edge-to-edge WITHOUT width:100vw, which
   over-shoots by the scrollbar width on classic-scrollbar browsers and would clip
   the form's right edge. The gutter moves onto the hero + cards. */
@media (max-width: 760px) {
	.bulls-ticket-page { padding: var(--space-10) 0; }
	.bulls-ticket-page__hero {
		margin-bottom: var(--space-6);
		padding: 0 var(--gutter-sm) var(--space-4);
	}
	.bulls-ticket-embed {
		border-inline: 0;
		border-radius: 0;
		padding: var(--space-3);
		min-height: 360px;
	}
	.bulls-ticket-cards {
		grid-template-columns: 1fr;
		padding-inline: var(--gutter-sm);
	}

	/* FT's checkout customer-details form (#ft_frmNoRegister) carries a ~30%
	   padding-left (a desktop label gutter) and floats its fields at a fixed
	   max-width, so on mobile every field is crushed into a narrow indented column
	   (client feedback, Ed 15 Jun: "still compressed … padding on their embed").
	   Drop the form's side padding and let its rows/fields/controls fill the width.
	   Verified on the live Step-2 form: fields go from 136px → full width. */
	.bulls-ticket-embed .ft_form_element { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
	.bulls-ticket-embed .ft_form_row,
	.bulls-ticket-embed .ft_form_field { width: 100% !important; max-width: 100% !important; float: none !important; }
	.bulls-ticket-embed .ft_form_input,
	.bulls-ticket-embed input:not(.ft_quantity):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	.bulls-ticket-embed select,
	.bulls-ticket-embed textarea {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		float: none !important;
		display: block;
		box-sizing: border-box;
	}

	/* Action buttons — FT sits its two submit buttons side-by-side at ~50% each,
	   so their CSS-content labels ("Add to Basket and Go To Checkout") wrap
	   untidily into a cramped two lines. Stack them full-width with room + tidy
	   centring so the label sits cleanly (client feedback, Ed/Nathan 15 Jun). */
	.bulls-ticket-embed .ft_form_button_row {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		display: block !important;
		margin: var(--space-2) 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}
	.bulls-ticket-embed .ft_form_submit {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 52px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		padding: 12px 16px !important;
		line-height: 1.3 !important;
		/* zero FT's own button margins + force border-box so width:100% INCLUDES
		   the padding (FT's content-box default + our padding was overflowing the
		   button past the edge — "hanging over" on mobile, client 15 Jun). */
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}
	.bulls-ticket-embed .ft_form_submit span { line-height: 1.3 !important; }
}

/* ----- Contact / help card (reused: template-parts/card-contact.php) ----- */

.bulls-contact-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--t-panel);
	border: 1px solid var(--t-border);
	border-top: 3px solid var(--c-bulls-red);
}

.bulls-contact-card__eyebrow {
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-bulls-red-300);
}

.bulls-contact-card__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: var(--fs-400);
	line-height: var(--lh-snug);
	text-transform: uppercase;
	font-weight: var(--fw-bold);
	color: var(--t-fg);
}

.bulls-contact-card__body {
	margin: 0;
	font-family: var(--ff-sans);
	font-size: var(--fs-100);
	line-height: var(--lh-base);
	color: var(--t-fg-muted);
}

.bulls-contact-card__items {
	margin: var(--space-2) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.bulls-contact-card__item {
	display: flex;
	gap: var(--space-3);
	align-items: baseline;
}

.bulls-contact-card__item dt {
	flex: 0 0 56px;
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--t-fg-muted);
}

.bulls-contact-card__item dd {
	margin: 0;
	font-family: var(--ff-sans);
	font-size: var(--fs-100);
	color: var(--t-fg);
}

.bulls-contact-card__item a { color: var(--t-fg); text-decoration: none; }
.bulls-contact-card__item a:hover,
.bulls-contact-card__item a:focus-visible { color: var(--c-bulls-red-300); }

.bulls-contact-card__link {
	margin-top: var(--space-2);
	display: inline-flex;
	/* 24px tap target (WCAG 2.2) */
	min-height: 24px;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-bulls-red-300);
	text-decoration: none;
}
.bulls-contact-card__link span { transition: transform var(--motion-base) var(--ease-out); }
.bulls-contact-card__link:hover span,
.bulls-contact-card__link:focus-visible span { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
	.bulls-contact-card__link span { transition: none; }
}