/*
 * ArenaSoldOut purchase theme (aso-purchase-theme.php).
 *
 * The purchase-flow CSS (modal-booking.css, ux-cleanup.css, the seat and ticket pickers, the pay
 * page) reads the --lp-* variables with the original vinoandco wine colours as fallback. Setting
 * them here recolours everything at once; the rules below only bring sizes, radii and spacing
 * of the purchase window onto the event page's tokens (aso-event-page.css): Inter for text,
 * Playfair Display for the title, radius 8/16 and a 4px spacing scale.
 */

:root {
	--lp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--lp-ink: #070707;
	--lp-text: #070707;
	--lp-muted: #5b6275;
	--lp-border: #e4e7ef;
	--lp-soft-bg: #f5f6fa;
	--lp-soft-bg-hover: #eceef5;
	--lp-accent: #001389;
	--lp-link: #001389;
	--lp-yellow: #001389;
	--lp-btn-bg: #001389;
	--lp-btn-bg-hover: #000f6b;
	--lp-btn-text: #fff;
	--lp-error: #c4483e;
	--lp-error-bg: #fbe9e7;
	--lp-radius: 8px;

	--aso-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--aso-focus: 0 0 0 3px rgba(0, 19, 137, 0.14);
}

#vino-booking-modal,
#vino-booking-modal *,
#bsp-modal,
#bsp-modal *,
.vino-book-trigger,
.bsp-root,
.bsp-root *,
.bil24-ticket-picker,
.bil24-ticket-picker * {
	font-family: var(--lp-font);
}

/* ── window ──────────────────────────────────────────────────── */

:is(#vino-booking-modal, #bsp-modal) .vino-modal-overlay {
	background: rgba(7, 7, 7, 0.6);
}

:is(#vino-booking-modal, #bsp-modal) .vino-modal-box {
	border-radius: 16px;
	padding: 32px 32px 24px;
	box-shadow: 0 24px 64px rgba(7, 7, 7, 0.24);
}

:is(#vino-booking-modal, #bsp-modal) .vino-modal-header {
	margin-bottom: 24px;
	gap: 16px;
	align-items: center;
}

:is(#vino-booking-modal, #bsp-modal) #vino-modal-title,
#bsp-modal .vino-modal-header h2 {
	font-family: var(--aso-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--lp-ink);
}

/* The theme's reset gives every button a pink 1px border and inline-block display. */
:is(#vino-booking-modal, #bsp-modal) button {
	border: 0;
}

:is(#vino-booking-modal, #bsp-modal) button:focus {
	outline: none;
}

:is(#vino-booking-modal, #bsp-modal) button:focus-visible {
	outline: 3px solid #00dafc;
	outline-offset: 2px;
}

:is(#vino-booking-modal, #bsp-modal) .vino-modal-close {
	width: 36px;
	height: 36px;
	background: var(--lp-soft-bg);
	color: var(--lp-ink);
}

:is(#vino-booking-modal, #bsp-modal) .vino-modal-close:hover {
	background: var(--lp-soft-bg-hover);
}

:is(#vino-booking-modal, #bsp-modal) #vino-booking-summary,
#bsp-summary {
	margin-bottom: 16px !important;
	padding: 8px 12px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	color: var(--lp-accent) !important;
}

:is(#vino-booking-modal, #bsp-modal) .vino-modal-timer {
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--lp-muted);
}

/* ── fields ──────────────────────────────────────────────────── */

:is(#vino-booking-modal, #bsp-modal) .vino-modal-field {
	margin-bottom: 16px !important;
}

:is(#vino-booking-modal, #bsp-modal) .vino-modal-field label {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--lp-muted);
}

:is(#vino-booking-modal, #bsp-modal) .vino-modal-field input,
:is(#vino-booking-modal, #bsp-modal) .vino-modal-field select {
	height: 48px !important;
	padding: 0 16px !important;
	border: 1px solid var(--lp-border);
	border-radius: 8px !important;
	font-size: 16px !important;
	color: var(--lp-text);
}

:is(#vino-booking-modal, #bsp-modal) .vino-modal-field select {
	padding-right: 40px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23001389' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: right 16px center;
}

:is(#vino-booking-modal, #bsp-modal) .vino-modal-field input:focus,
:is(#vino-booking-modal, #bsp-modal) .vino-modal-field select:focus,
:is(#vino-booking-modal, #bsp-modal) .vino-promo-row input:focus {
	border-color: var(--lp-accent);
	box-shadow: var(--aso-focus);
}

:is(#vino-booking-modal, #bsp-modal) .vino-field-error {
	margin-top: 4px;
	font-size: 13px;
}

:is(#vino-booking-modal, #bsp-modal) #vino-step-contacts-errors,
#bsp-modal #bsp-errors {
	margin-bottom: 16px;
	padding: 12px 16px;
	border-color: rgba(196, 72, 62, 0.3);
	border-radius: 8px;
}

/* ── quantity ────────────────────────────────────────────────── */

:is(#vino-booking-modal, #bsp-modal) .vino-qty-row {
	gap: 8px !important;
}

:is(#vino-booking-modal, #bsp-modal) .vino-qty-btn {
	width: 48px !important;
	height: 48px !important;
	border-radius: 8px !important;
	font-size: 20px !important;
	color: var(--lp-ink) !important;
}

:is(#vino-booking-modal, #bsp-modal) #vino-modal-qty,
:is(#vino-booking-modal, #bsp-modal) #vino-contacts-qty-input {
	height: 48px !important;
	min-height: 48px !important;
	border: 1px solid var(--lp-border) !important;
	border-radius: 8px !important;
	font-size: 17px !important;
	font-weight: 600 !important;
}

/* ── buttons ─────────────────────────────────────────────────── */

:is(#vino-booking-modal, #bsp-modal) .vino-modal-btn-primary,
:is(#vino-booking-modal, #bsp-modal) #vino-modal-pay,
#bsp-modal #bsp-pay {
	display: block !important;
	width: 100% !important;
	height: 52px !important;
	margin-top: 8px !important;
	border-radius: 8px !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
}

:is(#vino-booking-modal, #bsp-modal) #vino-contacts-back,
#bsp-modal #bsp-back,
:is(#vino-booking-modal, #bsp-modal) .vino-modal-back-link {
	margin-top: 8px !important;
	padding: 12px 0 0 !important;
	font-size: 14px !important;
	color: var(--lp-muted) !important;
}

:is(#vino-booking-modal, #bsp-modal) #vino-contacts-back:hover,
#bsp-modal #bsp-back:hover,
:is(#vino-booking-modal, #bsp-modal) .vino-modal-back-link:hover {
	color: var(--lp-accent) !important;
}

/* ── promo code ──────────────────────────────────────────────── */

:is(#vino-booking-modal, #bsp-modal) .vino-promo-section {
	margin: 8px 0 16px !important;
	padding-top: 16px !important;
	border-top-color: var(--lp-border);
}

:is(#vino-booking-modal, #bsp-modal) button#vino-promo-toggle,
#bsp-modal #bsp-promo-toggle {
	font-size: 14px !important;
	color: var(--lp-muted) !important;
}

:is(#vino-booking-modal, #bsp-modal) button#vino-promo-toggle:hover,
#bsp-modal #bsp-promo-toggle:hover {
	color: var(--lp-accent) !important;
}

:is(#vino-booking-modal, #bsp-modal) .vino-promo-row {
	gap: 8px !important;
	margin-top: 12px !important;
}

:is(#vino-booking-modal, #bsp-modal) .vino-promo-row input,
:is(#vino-booking-modal, #bsp-modal) #vino-promo-input,
#bsp-modal #bsp-promo-input {
	height: 48px !important;
	padding: 0 16px !important;
	border: 1px solid var(--lp-border) !important;
	border-radius: 8px !important;
}

:is(#vino-booking-modal, #bsp-modal) button#vino-promo-apply,
#bsp-modal #bsp-promo-apply {
	height: 48px !important;
	min-height: 48px !important;
	padding: 0 16px !important;
	border-radius: 8px !important;
	line-height: 48px !important;
	color: var(--lp-accent) !important;
}

:is(#vino-booking-modal, #bsp-modal) .vino-promo-result.success {
	color: #1c7c4a;
}

/* ── phone: bottom sheet ─────────────────────────────────────── */

@media (max-width: 600px) {
	#vino-booking-modal .vino-modal-box {
		padding: 24px 16px 32px !important;
		border-radius: 16px 16px 0 0 !important;
	}

	:is(#vino-booking-modal, #bsp-modal) #vino-modal-title,
	#bsp-modal .vino-modal-header h2 {
		font-size: 22px !important;
	}

	:is(#vino-booking-modal, #bsp-modal) .vino-modal-header {
		margin-bottom: 16px;
	}

	:is(#vino-booking-modal, #bsp-modal) #vino-modal-pay,
	#bsp-modal #bsp-pay {
		height: 52px !important;
		border-radius: 8px !important;
	}

	:is(#vino-booking-modal, #bsp-modal) .vino-promo-row {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	:is(#vino-booking-modal, #bsp-modal) button#vino-promo-apply,
	#bsp-modal #bsp-promo-apply {
		width: 100% !important;
	}
}

/* ── seat map ────────────────────────────────────────────────── */

.bsp-root .bsp-map-wrap {
	border-color: var(--lp-border);
	background: #fafbfd;
}

.bsp-root .bsp-loading {
	background: rgba(250, 251, 253, 0.85);
}

.bsp-root .bsp-bubble {
	background: rgba(7, 7, 7, 0.92);
	border-radius: 8px;
}

.bsp-root .bsp-bubble::after {
	border-top-color: rgba(7, 7, 7, 0.92);
}

.bsp-root .bsp-zoom .bsp-zoom-btn {
	border: 1px solid var(--lp-border);
	border-radius: 8px;
	color: var(--lp-ink);
}

.bsp-root .bsp-chip {
	gap: 4px;
	padding: 4px 4px 4px 12px;
	border-color: var(--lp-border);
	background: var(--lp-soft-bg);
	color: var(--lp-ink);
}

.bsp-root .bsp-continue {
	border: 0;
	border-radius: 8px;
	font-weight: 600;
	letter-spacing: 0;
}

.bsp-root .bsp-continue:focus-visible {
	outline: 3px solid #00dafc;
	outline-offset: 2px;
}

.bsp-root .bsp-msg {
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	border-color: var(--lp-border);
	background: var(--lp-soft-bg);
	color: var(--lp-ink);
}

.bsp-root .bsp-msg-error {
	border-color: rgba(196, 72, 62, 0.3);
	background: var(--lp-error-bg);
	color: var(--lp-error);
}

#bsp-modal #bsp-promo-apply:hover {
	background: var(--lp-soft-bg-hover) !important;
}

.bsp-root .bsp-bar {
	gap: 12px;
	margin-top: 12px;
	padding: 12px 16px;
	border-color: var(--lp-border);
}