/**
 * HCE Ticket - frontend styles. Namespaced under .hce-ticket-* throughout
 * (never bare .button/.card/.container/.title) so this never collides with
 * the active theme or Elementor. Mobile-first; sticky elements leave room
 * for safe-area insets so nothing gets covered on notched phones.
 *
 * Colors are intentionally fixed (light, warm palette) regardless of the
 * visitor's OS/browser dark-mode setting - `color-scheme: light` plus
 * explicit backgrounds on every element means this never gets auto-inverted
 * by a dark-mode browser or a theme's dark-mode CSS.
 */

.hce-ticket {
	color-scheme: light only;

	--hce-primary: #c8102e;
	--hce-primary-dark: #a10d25;
	--hce-accent: #96650d;
	--hce-accent-soft: #f6e6c5;
	--hce-background: #faf7f2;
	--hce-surface: #ffffff;
	--hce-surface-alt: #f3ede2;
	--hce-text: #201c17;
	--hce-text-muted: #6f6a62;
	--hce-border: #e6ddd0;
	--hce-success: #1f9d55;
	--hce-warning: #96650d;
	--hce-danger: #d0263f;

	--hce-radius-sm: 6px;
	--hce-radius-md: 12px;
	--hce-radius-lg: 18px;
	--hce-radius-xl: 28px;

	--hce-shadow-sm: 0 2px 8px rgba(32, 28, 23, 0.08);
	--hce-shadow-md: 0 10px 30px rgba(32, 28, 23, 0.12);
	--hce-shadow-lg: 0 20px 60px rgba(32, 28, 23, 0.16);

	--hce-space-xs: 4px;
	--hce-space-sm: 8px;
	--hce-space-md: 16px;
	--hce-space-lg: 24px;
	--hce-space-xl: 40px;

	box-sizing: border-box;
	color: var(--hce-text);
	background: var(--hce-background);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	/* Fills whatever column Elementor/the theme gives it - no viewport-relative
	   "break out of the container" trick here. That trick (100vw + left:50% +
	   negative margins) depends on this element's containing block being the
	   full, unscrolled viewport width; inside Elementor's nested section/column
	   wrappers that assumption doesn't hold, and the box ends up offset instead
	   of centered. Plain 100% width avoids the whole class of bug. */
	width: 100%;
	max-width: 100%;
	/* No overflow-x here (used to be "hidden", left over from the old
	   viewport-breakout trick above): overflow set to anything other than
	   "visible" on an ancestor breaks position: sticky on every descendant
	   in every major browser, which is exactly why the desktop order-summary
	   sidebar wasn't actually sticking. Nothing inside this widget causes
	   horizontal overflow any more, so there's nothing left for it to guard
	   against. */
	box-sizing: border-box;
	/* Kept (harmless on its own) so absolutely-positioned children, such as
	   the default .hce-ticket-lang-switcher badge, anchor to this box and
	   not to <body>. */
	position: relative;
}
.hce-ticket *, .hce-ticket *::before, .hce-ticket *::after { box-sizing: inherit; }
.hce-ticket input, .hce-ticket select, .hce-ticket textarea, .hce-ticket button { color-scheme: light; }

/*
 * Reset kill-switch: page builders like Elementor ship global theme styles
 * for bare <a>, <button>, <input> elements (rounded pill outlines, their own
 * font, uppercase, etc.) that otherwise leak into this widget because a
 * builder's global CSS is loaded late and/or with high specificity. Every
 * element inside .hce-ticket is reset to a plain baseline first, and then
 * our own component classes below apply their intended look on top -
 * with !important on every property that a host theme is likely to also
 * set, so our own values always win regardless of load order.
 */
/* :where() keeps this reset at zero specificity, so every one of our own
   component classes below (even a single class, even without !important
   on a given property) always wins the cascade over both this reset and
   the host theme - no specificity arms race needed for new components. */
:where(.hce-ticket a,
.hce-ticket button,
.hce-ticket input,
.hce-ticket select,
.hce-ticket textarea) {
	box-sizing: border-box !important;
	font-family: inherit !important;
	margin: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	background-image: none !important;
	border-radius: 0 !important;
}
:where(.hce-ticket button) {
	line-height: normal !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}
.hce-ticket a { cursor: pointer; }

.hce-ticket-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto;
	min-height: 44px !important;
	padding: 0 var(--hce-space-lg) !important;
	border-radius: var(--hce-radius-md) !important;
	background: var(--hce-primary) !important;
	background-image: none !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	letter-spacing: 0.02em !important;
	text-decoration: none !important;
	text-transform: none !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer;
	font-size: 15px !important;
	line-height: normal !important;
	transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.hce-ticket-button:hover,
.hce-ticket-button:focus { background: var(--hce-primary-dark) !important; color: #fff !important; }
.hce-ticket-button:focus-visible { outline: 3px solid var(--hce-accent); outline-offset: 2px; }
.hce-ticket-button:disabled { opacity: 0.4; cursor: not-allowed; }
.hce-ticket-button--cta { background: var(--hce-accent) !important; color: #fff !important; box-shadow: var(--hce-shadow-md) !important; }
.hce-ticket-button--cta:hover,
.hce-ticket-button--cta:focus { background: #b07a17 !important; color: #fff !important; transform: translateY(-1px); }
.hce-ticket-button--ghost { background: var(--hce-surface) !important; border: 1px solid var(--hce-border) !important; color: var(--hce-text) !important; }
.hce-ticket-button--ghost:hover,
.hce-ticket-button--ghost:focus { background: var(--hce-surface-alt) !important; color: var(--hce-text) !important; }

/* Hero - full viewport width, tall enough to feel like a real landing screen */
.hce-ticket-hero {
	position: relative;
	min-height: 62vh;
	display: flex;
	align-items: flex-end;
	background-color: #2a2620;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	width: 100%;
}
/* The hero keeps a dark photo-overlay for legible white text over the cover
   image, even though the rest of the page is light - this is the one
   intentionally dark area, like a movie poster banner. */
.hce-ticket-hero-inner { padding: var(--hce-space-xl) var(--hce-space-lg) var(--hce-space-xl); width: 100%; max-width: 1100px; margin: 0 auto; color: #fff; }

/* Language switcher */
.hce-ticket-lang-switcher {
	position: absolute; top: var(--hce-space-md); right: var(--hce-space-md); z-index: 5;
	display: flex; gap: 4px; background: rgba(0, 0, 0, 0.35); border-radius: 999px; padding: 4px;
	backdrop-filter: blur(4px);
}
/* No float here on purpose: a floated box in a block that isn't explicitly
   cleared can get sat on top of / squeeze the layout that follows it (this
   used to happen to the ticket grid on the success page) - flexbox avoids
   that class of bug entirely. */
.hce-ticket-lang-switcher--inline { position: static; flex: 0 0 auto; background: var(--hce-surface-alt); }
.hce-ticket-lang-switcher a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; min-height: 32px; padding: 0 10px; border-radius: 999px;
	color: #fff; text-decoration: none; font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
	transition: background 0.15s ease, color 0.15s ease;
}
.hce-ticket-lang-switcher--inline a { color: var(--hce-text-muted); }
.hce-ticket-lang-switcher a.is-active { background: var(--hce-accent); color: #fff; }
.hce-ticket-lang-switcher a:hover { background: rgba(255, 255, 255, 0.25); }
.hce-ticket-lang-switcher--inline a:hover { background: var(--hce-border); color: var(--hce-text); }
.hce-ticket-lang-switcher--inline a.is-active:hover { background: var(--hce-accent); color: #fff; }
.hce-ticket-hero-title { font-size: clamp(32px, 6vw, 56px); line-height: 1.08; margin: 0 0 var(--hce-space-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: #fff; }
.hce-ticket-hero-meta { color: #f2d9a8; font-size: 17px; margin: 0 0 var(--hce-space-lg); display: flex; gap: var(--hce-space-sm); flex-wrap: wrap; }

.hce-ticket-layout { display: flex; flex-direction: column; gap: var(--hce-space-lg); padding: var(--hce-space-lg); max-width: 1400px; margin: 0 auto; width: 100%; }
.hce-ticket-main { min-width: 0; }
.hce-ticket-section { margin-bottom: var(--hce-space-xl); }
.hce-ticket-section-title { font-size: 22px; font-weight: 800; margin: 0 0 var(--hce-space-md); color: var(--hce-text); }
.hce-ticket-info { background: var(--hce-surface); border: 1px solid var(--hce-border); border-radius: var(--hce-radius-lg); padding: var(--hce-space-lg); line-height: 1.6; box-shadow: var(--hce-shadow-sm); }
.hce-ticket-notice { background: var(--hce-surface); border: 1px solid var(--hce-border); border-radius: var(--hce-radius-md); padding: var(--hce-space-md); color: var(--hce-text-muted); }

/* Progress indicator */
.hce-ticket-progress { display: flex; gap: var(--hce-space-sm); margin-bottom: var(--hce-space-lg); }
.hce-ticket-progress-step {
	flex: 1;
	text-align: center;
	padding: var(--hce-space-sm) 4px;
	border-radius: var(--hce-radius-sm);
	background: var(--hce-surface-alt);
	color: var(--hce-text-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	border: 1px solid var(--hce-border);
}
.hce-ticket-progress-step span { display: block; font-size: 10px; opacity: 0.75; margin-bottom: 2px; }
.hce-ticket-progress-step.is-active { background: var(--hce-primary); color: #fff; border-color: var(--hce-primary); }
.hce-ticket-progress-step.is-done { background: var(--hce-accent-soft); color: #8a5d0f; border-color: var(--hce-accent); }

/* Ticket cards */
.hce-ticket-cards { display: grid; grid-template-columns: 1fr; gap: var(--hce-space-md); }
.hce-ticket-card {
	background: var(--hce-surface);
	border: 2px solid var(--hce-border);
	border-radius: var(--hce-radius-lg);
	padding: var(--hce-space-lg);
	box-shadow: var(--hce-shadow-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hce-ticket-card.is-selected { border-color: var(--hce-accent); box-shadow: var(--hce-shadow-md); position: relative; }
/* Sits just outside the card's own border, at its corner, so it never
   overlaps the price or title text rendered inside the card's padding. */
.hce-ticket-card.is-selected::after {
	content: "✓";
	position: absolute; top: -12px; right: -12px;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--hce-accent); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 14px;
	box-shadow: var(--hce-shadow-sm);
	border: 2px solid var(--hce-surface);
	z-index: 2;
}
.hce-ticket-card--disabled { opacity: 0.6; }
.hce-ticket-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--hce-space-xs) var(--hce-space-md); margin-bottom: var(--hce-space-sm); }
.hce-ticket-card-title { font-size: 19px; font-weight: 800; margin: 0; color: var(--hce-text); flex: 1 1 auto; min-width: 0; }
.hce-ticket-card-price { font-size: 19px; font-weight: 800; color: var(--hce-primary); white-space: nowrap; flex: 0 0 auto; }
.hce-ticket-card-desc { color: var(--hce-text-muted); margin: 0 0 var(--hce-space-sm); }
.hce-ticket-card-benefits { margin: 0 0 var(--hce-space-md); padding-left: 1.1em; color: var(--hce-text-muted); font-size: 14px; }
.hce-ticket-card-status { color: var(--hce-warning); font-weight: 600; font-size: 14px; }

/* Wraps the quantity stepper and the "add ticket" button so the two are
   always stacked - quantity on top, button below - in a single column,
   regardless of any flex/grid rules the host theme applies to generic
   divs and buttons. */
.hce-ticket-card-actions {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: var(--hce-space-md);
}
.hce-ticket-qty {
	display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: var(--hce-space-md);
	padding: var(--hce-space-sm) var(--hce-space-md);
	background: var(--hce-background);
	border: 1px solid var(--hce-border);
	border-radius: var(--hce-radius-xl);
	width: fit-content;
	max-width: 100%;
	margin: 0 auto !important;
}
.hce-ticket-qty-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important; height: 44px !important; min-height: 0 !important; padding: 0 !important;
	border-radius: 50% !important;
	border: 1px solid var(--hce-border) !important; background: var(--hce-surface-alt) !important;
	color: var(--hce-text) !important; font-weight: 700 !important; font-size: 20px !important; line-height: 1 !important; cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hce-ticket-qty-btn:hover,
.hce-ticket-qty-btn:focus { background: var(--hce-primary) !important; border-color: var(--hce-primary) !important; color: #fff !important; }
.hce-ticket-qty-value { min-width: 24px; text-align: center; font-size: 18px; font-weight: 700; color: var(--hce-text); }

.hce-ticket-step-actions { display: flex; gap: var(--hce-space-md); margin-top: var(--hce-space-lg); flex-wrap: wrap; }
.hce-ticket-step-actions .hce-ticket-button { flex: 1; min-width: 160px; }

.hce-ticket-checkbox { display: flex; align-items: center; gap: var(--hce-space-sm); margin-bottom: var(--hce-space-md); cursor: pointer; color: var(--hce-text); }
.hce-ticket-checkbox input { width: 20px !important; height: 20px !important; }
.hce-ticket-field { margin-bottom: var(--hce-space-md); }
.hce-ticket-field label { display: block; margin-bottom: var(--hce-space-xs); font-weight: 600; font-size: 14px; color: var(--hce-text); }
.hce-ticket-field input {
	display: block !important;
	width: 100% !important; min-height: 44px !important; padding: 0 var(--hce-space-md) !important;
	border-radius: var(--hce-radius-sm) !important; border: 1px solid var(--hce-border) !important;
	background: var(--hce-surface) !important; color: var(--hce-text) !important; font-size: 16px !important;
}
.hce-ticket-field input:focus-visible { outline: 2px solid var(--hce-accent); }
.hce-ticket-names-list { display: grid; gap: var(--hce-space-sm); }
.hce-ticket-error { color: var(--hce-danger); font-weight: 600; margin-top: var(--hce-space-md); }

/* Sticky summary (desktop) */
.hce-ticket-summary { display: none; }
.hce-ticket-summary-inner {
	background: var(--hce-surface); border: 1px solid var(--hce-border); border-radius: var(--hce-radius-lg);
	padding: var(--hce-space-lg); box-shadow: var(--hce-shadow-md);
	position: -webkit-sticky !important; position: sticky !important;
	top: var(--hce-space-lg) !important;
	z-index: 3;
}
.hce-ticket-summary-title { margin: 0 0 var(--hce-space-md); font-size: 18px; font-weight: 800; color: var(--hce-text); }
.hce-ticket-summary-empty { color: var(--hce-text-muted); }
.hce-ticket-summary-line { display: flex; justify-content: space-between; gap: var(--hce-space-sm); padding: var(--hce-space-sm) 0; border-bottom: 1px solid var(--hce-border); font-size: 14px; color: var(--hce-text); }
.hce-ticket-summary-total { display: flex; justify-content: space-between; margin-top: var(--hce-space-md); font-size: 18px; font-weight: 800; color: var(--hce-primary); }

/* Sticky summary (mobile) */
.hce-ticket-summary-mobile {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
	background: var(--hce-surface); border-top: 1px solid var(--hce-border);
	padding: var(--hce-space-sm) var(--hce-space-md);
	padding-bottom: calc(var(--hce-space-sm) + env(safe-area-inset-bottom));
	display: flex; align-items: center; justify-content: space-between;
	box-shadow: 0 -6px 20px rgba(32, 28, 23, 0.12);
}
.hce-ticket-summary-mobile-info { display: flex; flex-direction: column; font-size: 13px; color: var(--hce-text-muted); }
#hce-ticket-summary-mobile-total { font-size: 17px; font-weight: 800; color: var(--hce-primary); }

/* FAQ */
.hce-ticket-faq { border-top: 1px solid var(--hce-border); }
.hce-ticket-faq-item { border-bottom: 1px solid var(--hce-border) !important; border-left: none !important; border-right: none !important; border-top: none !important; }
.hce-ticket-faq-question {
	display: flex !important; width: 100% !important; justify-content: space-between !important; align-items: center !important;
	text-align: left !important; background: none !important; background-color: transparent !important;
	border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important;
	color: var(--hce-text) !important;
	font-family: inherit !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.4 !important;
	text-transform: none !important; letter-spacing: normal !important;
	padding: var(--hce-space-md) 0 !important; margin: 0 !important; min-height: 44px;
	cursor: pointer;
	gap: var(--hce-space-md);
}
.hce-ticket-faq-question:hover,
.hce-ticket-faq-question:focus { background: none !important; color: var(--hce-text) !important; }
.hce-ticket-faq-question:focus-visible { outline: 2px solid var(--hce-accent) !important; outline-offset: 2px; }
.hce-ticket-faq-icon { color: var(--hce-primary); font-size: 20px; flex: 0 0 auto; transition: transform 0.15s ease; }
.hce-ticket-faq-question[aria-expanded="true"] .hce-ticket-faq-icon { transform: rotate(45deg); }
.hce-ticket-faq-answer { padding: 0 0 var(--hce-space-md); color: var(--hce-text-muted); line-height: 1.6; }
.hce-ticket-faq-answer p { margin: 0 0 var(--hce-space-sm); }
.hce-ticket-faq-answer p:last-child { margin-bottom: 0; }

/* Success page */
.hce-ticket-success {
	width: 100%;
	box-sizing: border-box;
	padding: var(--hce-space-xl) var(--hce-space-lg);
	max-width: 1000px;
	margin: 0 auto;
	overflow-x: hidden;
}
/* Hero text + HU/EN switcher share one flex row, wrapping on narrow screens -
   this replaces an earlier float-based switcher that (uncleared) squeezed
   the ticket grid below it out of its centered column. */
.hce-ticket-success-topbar {
	display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
	gap: var(--hce-space-md);
	margin-bottom: var(--hce-space-lg);
}
.hce-ticket-success-hero { flex: 1 1 260px; min-width: 0; }
.hce-ticket-success-hero h1 { font-size: 32px; margin-bottom: var(--hce-space-xs); color: var(--hce-text); }
.hce-ticket-success-hero p { color: var(--hce-text-muted); }
.hce-ticket-success-event { color: var(--hce-primary); font-weight: 700; margin-bottom: var(--hce-space-lg); }
.hce-ticket-success-tickets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--hce-space-lg);
	width: 100%;
	justify-content: center;
}
.hce-ticket-success-card { background: var(--hce-surface); border: 1px solid var(--hce-border); border-radius: var(--hce-radius-lg); padding: var(--hce-space-lg); text-align: center; box-shadow: var(--hce-shadow-sm); min-width: 0; }
.hce-ticket-success-card-head { display: flex; flex-direction: column; margin-bottom: var(--hce-space-md); }
.hce-ticket-success-type { color: var(--hce-primary); font-weight: 700; text-transform: uppercase; font-size: 13px; }
.hce-ticket-success-name { font-size: 20px; font-weight: 800; color: var(--hce-text); }
.hce-ticket-success-qr { max-width: 220px; margin: 0 auto var(--hce-space-md); background: #fff; border: 1px solid var(--hce-border); border-radius: var(--hce-radius-sm); padding: var(--hce-space-sm); }
.hce-ticket-success-qr svg { width: 100%; height: auto; display: block; }
.hce-ticket-success-id { font-family: monospace; color: var(--hce-text-muted); margin-bottom: var(--hce-space-md); }
.hce-ticket-success-email-status { color: var(--hce-text-muted); margin-top: var(--hce-space-lg); text-align: center; }

/* Tablet / desktop */
@media (min-width: 768px) {
	.hce-ticket-hero { min-height: 68vh; }
	.hce-ticket-cards { grid-template-columns: repeat(2, 1fr); }
	/* .hce-ticket-success-tickets already reflows itself via auto-fit - no
	   fixed column count needed, so it can never end up wider than its
	   (centered, max-width: 1000px) container regardless of ticket count. */
}

/* The sticky order-summary sidebar takes over from the mobile bottom bar
   at this single breakpoint - both switches happen together so there is
   never a width where neither summary (or both at once) is visible. */
@media (min-width: 900px) {
	.hce-ticket-layout { flex-direction: row; align-items: flex-start; padding: var(--hce-space-xl) var(--hce-space-xl); }
	.hce-ticket-main { flex: 1 1 auto; }
	.hce-ticket-summary { display: block !important; flex: 0 0 320px; align-self: stretch; }
	.hce-ticket-summary-mobile { display: none !important; }
}

@media (min-width: 1024px) {
	.hce-ticket-summary { flex: 0 0 340px; }
	.hce-ticket-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1440px) {
	.hce-ticket-cards { grid-template-columns: repeat(3, 1fr); }
}

/* Reserve space for the mobile sticky bar so content never hides behind it */
@media (max-width: 899px) {
	.hce-ticket { padding-bottom: 84px; }
}