/**
 * KHC Ticketing System - Minimal Falriver Theme Extensions
 *
 * This stylesheet provides ONLY KHC-specific styling that extends the Falriver theme.
 * All base styles (buttons, typography, spacing, ticket-list components) are provided
 * by falriver.css which is linked from falriver.co.uk.
 *
 * Dependencies:
 * - https://www.falriver.co.uk/themes/falriver/css/falriver.css (base theme,
 *   hotlinked from the live site via Layout/parts/FalriverHead.tpl.php)
 *
 * Structure:
 * 0. Block Variants (KHC extensions to the theme's block set)
 * 1. Grid Layout Extensions (sidebar support)
 * 2. Progress Bar Components (purchase flow)
 * 3. Order Summary Components (checkout)
 * 4. Express Checkout Components
 * 5. Form Components (refinements)
 * 6. Ticket Radio-Select Components
 * 7. Error Block Components
 * 8. Validation States
 * 9. Mussel Card Uni Photo Upload
 * 10. Payment Result Pages
 */

/* ==========================================================================
   0. BLOCK VARIANTS
   ========================================================================== */

/**
 * White card block — a KHC extension to the theme's block set.
 * falriver.css only ships tinted variants (.block-grey, .block-links, ...);
 * the ticketing flow uses white cards to keep long forms readable.
 */
.block-white {
	background: #fff;
	border: 1px solid #e0e0e0;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

/* ==========================================================================
   1. GRID LAYOUT EXTENSIONS
   ========================================================================== */

/**
 * The welcome/how-it-works CMS content renders as a theme text-accordion
 * above the main content (see Layout/FalriverLayout.tpl.php); it needs no
 * layout CSS of its own — all styling comes from falriver.css.
 */

/* ==========================================================================
   2. PROGRESS BAR COMPONENTS
   ========================================================================== */

/**
 * Progress Bar for Multi-Step Purchase Flow
 * Rendered as a falriver-style button bar (like the icon/label utility
 * buttons on falriver.co.uk section pages): chunky rectangular buttons with
 * a circled step number, active step in brand blue.
 */
.progress-bar-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem 0 0;
}

.progress-bar-wrapper .progress-step {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.9rem 1.7rem;
	font-size: 1.7rem;
	font-weight: 700;
	color: #fff;
}

.progress-bar-wrapper .progress-step .glyphicons {
	font-size: 1.7rem;
}

/* Completed steps: theme-links dark tint, clickable to step back */
.progress-bar-wrapper .progress-step.complete {
	background: #003e53;
}

/* Current step: links-theme bright blue */
.progress-bar-wrapper .progress-step.active {
	background: #0095d4;
}

/* Upcoming steps: solid grey, like the theme's .btn-grey */
.progress-bar-wrapper .progress-step.after {
	background: #aaaaaa;
}

/* Back button: right-aligned charcoal, pushed clear of the step buttons */
.progress-bar-wrapper .progress-back {
	margin-left: auto;
	background: #323232;
}

/* Stack the progress buttons through the sm breakpoint, Back button first */
@media (max-width: 767.98px) {
	.progress-bar-wrapper {
		flex-direction: column;
		align-items: stretch;
	}

	.progress-bar-wrapper .progress-back {
		order: -1;
		margin-left: 0;
	}
}

.progress-bar-wrapper a.progress-step:hover {
	text-decoration: none;
	filter: brightness(1.15);
}

/* ==========================================================================
   3. ORDER SUMMARY COMPONENTS
   ========================================================================== */

/**
 * Order summary rows — falriver-style dotted-leader rows between item name
 * and price. The surrounding panel (tint, padding) comes entirely from the
 * theme: block-links > form-block bg-tint.
 */
.order-summary__list {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}

.order-summary__item,
.order-summary__total {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	padding: 0.4rem 0;
}

.order-summary__rule {
	flex: 1;
	border-bottom: 2px dotted rgba(50, 50, 50, 0.4);
	min-width: 2rem;
}

.order-summary__price {
	white-space: nowrap;
}

.order-summary__total {
	font-weight: 700;
	border-top: 2px solid rgba(50, 50, 50, 0.25);
	padding-top: 1rem;
}

.order-summary__vat {
	margin: 0.5rem 0 0;
}

.order-summary__back {
	margin: 1rem 0 0;
}

/* Paired form fields (forename/surname, town/county) — collapse the theme
   grid's gutters to a tighter gap inside the fields column */
.form-block__fields .khc-field-pair {
	margin-bottom: 0;
}

/* Parallel of the theme's own `.form-block--col1 .form-block__input
   { width: 100% }` rule: --col2 panels (flush fields, no content column)
   need fluid inputs too — the base class carries fixed newsletter-form
   widths otherwise */
.form-block--col2 .form-block__input {
	width: 100%;
}

/* Equal-height peer blocks: the row's cols already stretch to match
   (flexbox), but the block/form-block inside stops at its content height —
   chain height:100% down so the shorter panel fills its column */
main .col2.col1-sm > .col > .block,
main .col2.col1-sm > .col > .block > .form-block {
	height: 100%;
}

/* Ticket group tiles: the theme's click-promotion carries a fixed height
   sized for its short image-overlay captions — our tiles hold full
   descriptions, so mirror the theme heights as minimums and let tiles
   grow with content (the height:100% chain keeps row-mates equal) */
.row.no-gutters > .col > .block {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.row.no-gutters > .col > .block .click-promotion {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

.row.no-gutters > .col > .block .click-promotion__link_url {
	flex: 1 0 auto;
	height: auto;
}

.click-promotion {
	height: auto;
	min-height: 32rem;
}

@media (max-width: 991.98px) {
	.click-promotion {
		min-height: 24rem;
	}
}

@media (max-width: 767.98px) {
	.click-promotion {
		min-height: 18rem;
	}
}

@media (max-width: 575.98px) {
	.click-promotion {
		min-height: 22.8rem;
	}
}

/* Below md the theme swings the promo heading between display size
   (3.3rem at sm — meant for full-width image promos) and 1.5rem at xs;
   hold our half-width text tiles at the md scale throughout */
@media (max-width: 767.98px) {
	.click-promotion__heading {
		font-size: 1.9rem;
	}
}

/* Grid extension: stack a col2 row through the sm breakpoint (the theme's
   col2 split starts at 576px; col1-sm rows stay stacked until md, 768px).
   Stacked peer blocks get breathing room between them. */
@media (max-width: 767.98px) {
	main .col2.col1-sm > .col {
		flex: 0 0 100%;
		max-width: 100%;
	}

	main .col2.col1-sm > .col + .col {
		margin-top: 2rem;
	}
}

/* Footer nav links stack at the xs breakpoint */
@media (max-width: 575.98px) {
	footer .nav-footer {
		-moz-column-count: 1;
		column-count: 1;
		width: auto;
	}

	footer .nav-footer li {
		margin-bottom: 1rem;
	}
}

/* Opayo Pi drop-in card form: the SDK injects an iframe into
   #opayo-card-details — make sure it always has room for all four rows
   (name/card/expiry/CVC) instead of clipping at the container edge */
.card-form-section {
	margin: 2rem 0;
}

/* The Opayo SDK sets inline height:163px on both the container and its
   iframe, which clips the CVC row (the hosted form actually needs ~230px).
   Fixed px values — the iframe content is Opayo's own page and does not
   scale with this site's root font size. */
#opayo-card-details {
	height: auto !important;
}

#opayo-card-details iframe {
	display: block;
	width: 100%;
	height: 250px !important;
	border: 0;
}

#opayo-payment-errors {
	margin-top: 1.5rem;
	padding: 1rem;
	background: #ffebee;
	border: 1px solid #f44336;
	color: #c62828;
}

/* ==========================================================================
   4. EXPRESS CHECKOUT COMPONENTS
   ========================================================================== */

/**
 * Express Checkout Section
 * Apple Pay, Google Pay, and other digital wallet buttons — themed as a
 * grey tint panel matching the theme's block-grey/tint-tint tone
 */
.express-checkout-section {
	padding: 2rem;
	background: #f0f0f0;
	text-align: center;
}

.express-checkout-section h3 {
	color: #323232;
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.express-checkout-section > p {
	color: #646464 !important;
}

.express-checkout-buttons {
	margin: 1.5rem 0;
	text-align: center;
}

.express-checkout-buttons > * {
	margin: 0.5rem auto;
	display: block;
	max-width: 500px;
}

.express-checkout-divider {
	text-align: center;
	margin-top: 1rem;
	color: #646464;
}

/* ==========================================================================
   5. FORM COMPONENTS
   ========================================================================== */

/**
 * Form controls take their sizing/typography entirely from the theme
 * (.form-block__input + p3, exactly as on falriver.co.uk/account/register) —
 * only KHC-specific validation states live here.
 */
.has-error .form-control {
	border-color: #dc3545;
}

.has-error .form-control:focus {
	border-color: #dc3545;
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-actions {
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
	padding: 1.5rem 0;
}

/* Spinner for the Form-gateway forwarding step (theme charcoal) */
.forwarding-spinner {
	width: 3.6rem;
	height: 3.6rem;
	margin: 0.5rem 0 2rem;
	border: 0.4rem solid rgba(50, 50, 50, 0.15);
	border-top-color: #323232;
	border-radius: 50%;
	animation: forwarding-spin 0.9s linear infinite;
}

@keyframes forwarding-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.forwarding-spinner {
		animation: none;
	}
}

.form-actions--start {
	justify-content: flex-start;
}

/* Ensure col2 col1-xs stacks on mobile */
@media (max-width: 575.98px) {
	.row.col2.col1-xs > .col {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.form-actions {
		flex-direction: column-reverse;
	}
}

/* ==========================================================================
   6. TICKET RADIO-SELECT COMPONENTS
   ========================================================================== */

.ticket-list {
	margin-top: 2rem;
}

.ticket-item {
	padding: 1.5rem 0;
	border-bottom: 1px solid #ddd;
}

.ticket-item:last-child {
	border-bottom: none;
}

.ticket-radio-wrapper {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.ticket-radio-wrapper input[type="radio"] {
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.ticket-label {
	display: flex;
	flex-direction: column;
	margin: 0;
	cursor: pointer;
}

.ticket-name {
	font-weight: 600;
	font-size: 1.1rem;
}

.ticket-price {
	color: #666;
	font-size: 0.9rem;
}

.ticket-description {
	margin-top: 0.5rem;
	padding-left: calc(20px + 1rem);
}

@media (max-width: 576px) {
	.ticket-radio-wrapper {
		flex-direction: column;
		align-items: flex-start;
	}

	.ticket-description {
		padding-left: 0;
	}
}

/* ==========================================================================
   7. ERROR BLOCK COMPONENTS
   ========================================================================== */

/* Alert tint — KHC extension using the theme's danger red
   (rgb(220,66,42), same as falriver.css .alerts__item--danger) */
.bg-alert {
	background: #dc422a;
	color: #fff;
}

/* Theme scoping colours headings/copy for its own bg-* tints only —
   force white inside the alert tint (failure band on the Failed page) */
.form-block.bg-alert,
.form-block.bg-alert .form-block__heading,
.form-block.bg-alert p {
	color: #fff;
}

/* Links on tinted panels need a visible affordance (white + underline) */
.bg-mid a {
	color: #fff;
	text-decoration: underline;
}

/* form-block sized to its content — the theme's 36rem min-height is meant
   for marketing signup forms, not short message panels */
.form-block--flush {
	min-height: 0;
}

.error-block {
	padding: 1.5rem;
	background: #fee;
	color: #900;
	border-left: 4px solid #dc422a;
}

.error-block ul {
	margin: 0.5rem 0 0 1.5rem;
}

/* Inline payment error notices (card drop-in + wallet buttons) — same
   look as .error-block; these divs are toggled by the payment JS */
#opayo-payment-errors,
.express-checkout-section .error {
	padding: 1.5rem;
	background: #fee;
	color: #900;
	border-left: 4px solid #dc422a;
	margin: 1rem 0;
}

/* Field-level validation messages (contact form) */
.error-message {
	display: block;
	color: #dc422a;
	margin-top: 0.5rem;
}

/* ==========================================================================
   8. VALIDATION STATES
   ========================================================================== */

.invalid .form-control,
.has-error .form-control {
	border-color: #dc3545;
}

.invalid .form-control:focus,
.has-error .form-control:focus {
	border-color: #dc3545;
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.invalid .form-label,
.has-error .form-label {
	color: #dc3545;
}

/* ==========================================================================
   9. MUSSEL CARD UNI PHOTO UPLOAD
   ========================================================================== */

.themodal-overlay {
	position: fixed;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	z-index: 100000;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.popup {
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	position: absolute;
}

.popup__body {
	margin: 10px;
}

.jcrop-holder {
	margin: 0 auto;
}

.btn-file {
	display: inline-block;
	position: relative;
	overflow: hidden;
	font-size: 20px;
	font-family: Arial;
	border-radius: 4px;
	vertical-align: middle;
	border: 1px solid rgba(0, 0, 0, .2);
	padding: 8px 20px;
	box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}

.btn_browse {
	background-color: #FFDC73;
	background: linear-gradient(to bottom, #FFE599 0%, #FFDC73);
}

.btn_cancel {
	background-color: #f0f0f0;
}

.upload-div {
	display: inline-block;
	position: relative;
	overflow: hidden;
	font-size: 12px;
	font-family: Arial;
	border-radius: 4px;
	vertical-align: middle;
	padding: 2px 280px;
	box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}

.upload-progress {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: .5;
	position: absolute;
}

.upload-progress span {
	font-size: 10px;
}

.upload-bar {
	width: 0;
	height: 100%;
	position: static;
	border-radius: 10px;
	background-color: #ccc;
}

/* ==========================================================================
   10. PAYMENT RESULT PAGES
   ========================================================================== */

/**
 * Receipt panel on the order-complete page — styles the shared
 * parts/OrderDetails output (bare h2/h4/p + .order-table) inside the
 * themed form-block wrapper.
 */
.receipt h2 {
	font-size: 1.8rem;
	font-weight: 700;
	margin: 0 0 1.5rem;
}

.receipt h4 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 1.5rem 0 0.3rem;
}

.receipt p {
	margin: 0 0 0.5rem;
}

.receipt a {
	text-decoration: underline;
}

.receipt .order-table {
	width: 100%;
	max-width: 70rem;
	border-collapse: collapse;
	margin: 1.5rem 0;
}

.receipt .order-table th {
	text-align: left;
	padding: 0.4rem 1rem 0.4rem 0;
	border-bottom: 2px solid rgba(50, 50, 50, 0.25);
}

.receipt .order-table td {
	padding: 0.6rem 1rem 0.6rem 0;
	vertical-align: top;
	border-bottom: 1px dotted rgba(50, 50, 50, 0.25);
}

.payment-result-details p {
	margin-bottom: 0.5rem;
}

.contact-details-block {
	margin: 1.5rem 0;
	padding: 1.5rem;
	background: #f8f9fa;
	border-radius: 8px;
}

/* Anchor buttons: match the native padding <button> elements get, so
   a.btn and button.btn render identically */
a.btn {
	padding: 1px 6px;
}

/* Anchor variants of the big form-block button need flex centering
   (buttons centre their label natively; anchors don't) */
a.form-block__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 2rem;
}

/* Ticket picker CLEAR/CONTINUE buttons: same prominence as the contact
   page's form-block Continue button (theme .form-block__btn sizing) */
.ticket-list__button.btn {
	min-width: 9rem;
	height: 5.6rem;
	padding: 0 2rem;
	font-size: 1.8rem;
}