/**
 * GFFT ticket checkout — imagery layer.
 *
 * Kept separate from the JS bundle so artwork can change without a rebuild.
 * Image URLs are injected as CSS custom properties by the plugin, since the
 * real paths depend on where WordPress installed it.
 */

/* ------------------------------------------------------------------ *
 *  Theme resets
 *
 *  Kadence styles bare `button` with border-radius:3px, padding:.4em 1em,
 *  a transition and a box-shadow. Inside the quantity stepper that padding
 *  pushes the hover fill outside the stepper's 1px border, so the black
 *  block spills past the frame. The component's own CSS never overrode it.
 *
 *  Scoped under .gfft and kept here rather than in the bundle so theme
 *  conflicts can be fixed without a rebuild.
 * ------------------------------------------------------------------ */

.gfft .stepper button {
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	/* Kadence's `transition: all` makes the fill lag behind the cursor. */
	transition: background-color 0.12s ease, color 0.12s ease;
	-webkit-appearance: none;
	appearance: none;
	/* Center the glyph now that the theme's padding is gone. */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
}

.gfft .stepper button:hover:not(:disabled),
.gfft .stepper button:focus:not(:disabled) {
	background: var(--ink);
	color: var(--paper);
	box-shadow: none;
}

/*
 * The required asterisk is an <abbr title="required">. Browsers and themes
 * both like to give abbr[title] a dotted underline, which next to a label
 * reads as a typo rather than a marker. Here rather than in the bundle so a
 * theme conflict is a CSS edit, not a rebuild.
 */
.gfft abbr.req[title] {
	text-decoration: none;
	border-bottom: 0;
	cursor: help;
}

/* Kadence also rounds the pay button and adds its own padding. */
.gfft .pay {
	border-radius: 2px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/* ...and text inputs / selects, which would otherwise pick up theme radii. */
.gfft .field input,
.gfft .field select {
	border-radius: 2px;
	box-shadow: none;
}

/* ------------------------------------------------------------------ *
 *  Field alignment
 *
 *  Fields in a 2-up row are grid items, so each stretches to the row's
 *  height. Only one of a pair usually carries a hint line ("Your tickets
 *  and receipt go here."), which left its partner's input taller than the
 *  one beside it. Pinning the input row to the top and letting the hint
 *  occupy the leftover space keeps the inputs on a common baseline.
 * ------------------------------------------------------------------ */

.gfft .grid--2 > .field,
.gfft .grid--city > .field {
	grid-template-rows: auto auto 1fr;
	align-content: start;
}

.gfft .grid--2 > .field .field__hint,
.gfft .grid--2 > .field .field__err,
.gfft .grid--city > .field .field__hint,
.gfft .grid--city > .field .field__err {
	align-self: start;
}

/* ------------------------------------------------------------------ *
 *  Modal trigger
 *
 *  Only styled when the shortcode renders its own button. A page-builder
 *  button carrying data-gfft-open keeps the theme's styling untouched.
 * ------------------------------------------------------------------ */

.gfft-tickets-root .gfft-open {
	display: inline-block;
	padding: 16px 34px;
	border: 0;
	border-radius: 999px;
	background: #c8963e;
	color: #0a0a0c;
	font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.gfft-tickets-root .gfft-open:hover {
	background: #e5bd6d;
}

.gfft-tickets-root .gfft-open:focus-visible {
	outline: 2px solid #c8963e;
	outline-offset: 3px;
}

/* ---------- confirmation screen ---------- */

.gfft .gfft-brand {
	display: block;
	width: 132px;
	margin: 0 0 26px;
	/*
	 * The logo is navy + green on transparent. The confirmation card is already
	 * light, but the plate keeps the mark's edges crisp against it.
	 */
	background: var(--paper);
	border-radius: 3px;
	padding: 10px 12px;
}

.gfft .gfft-brand img {
	display: block;
	width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.gfft * { transition: none !important; }
}