/*
 * Buy Stream CTA styles.
 *
 * Used by the standalone sc_ticket_stream_cta widget and by the three host
 * widgets that render the offer inline — the seat picker (band), the
 * concert-details tabs (panel) and the footer CTA (link). Everything is
 * therefore scoped to .sc-ticket-widget rather than to the standalone widget's
 * own class, so a section looks identical wherever it is rendered from.
 *
 * Every choice here is about staying *under* the seat-chart CTA in the visual
 * hierarchy. The primary buy action across hero / mid-CTA / seat picker /
 * footer is a solid --primary (red) block button, 56px line-height, full width
 * of its 420px wrap, with a red glow. The stream button is therefore:
 *
 *   - outlined in --accent, never filled until hover
 *   - 46px tall and auto-width rather than a full-width block
 *   - introduced by a small eyebrow rather than a 38px headline
 *
 * so it reads as "the other option" at a glance, not as a competing CTA.
 */

/* ===== Shared ===== */

.sc-ticket-widget .stream-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 26px;
	border: 1px solid var(--accent);
	border-radius: 4px;
	background: transparent;
	color: var(--accent-warm);
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.sc-ticket-widget .stream-cta__btn:hover,
.sc-ticket-widget .stream-cta__btn:focus-visible {
	background: var(--accent);
	border-color: var(--accent);
	color: #0d0d0d;
	text-decoration: none;
}

.sc-ticket-widget .stream-cta__price {
	color: var(--muted);
	font-size: 14px;
	white-space: nowrap;
}

/* ===== Band — foot of the seat picker panel ===== */

.sc-ticket-widget .stream-cta--band {
	background: var(--bg-alt);
	border-top: 1px solid var(--border);
	padding: 32px 24px;
	text-align: center;
}

.sc-ticket-widget .stream-cta__eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	color: var(--accent);
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.sc-ticket-widget .stream-cta__headline {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text);
	margin: 0 0 8px;
}

.sc-ticket-widget .stream-cta__subhead {
	max-width: 520px;
	margin: 0 auto 20px;
	color: var(--muted);
	font-size: 15px;
}

.sc-ticket-widget .stream-cta__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
}

.sc-ticket-widget .stream-cta__note {
	margin: 16px 0 0;
	color: var(--muted);
	font-size: 13px;
	opacity: 0.8;
}

/* ===== Panel — appended to the concert-details tabs =====
 *
 * When embedded, the markup carries .concert-tab as well, so that widget's own
 * tab styling applies and the stream tab is indistinguishable from a real one.
 * The rules below only dress the standalone widget, which has no surrounding
 * .concert-details-wrap to inherit from. */

.sc-stream-cta-widget--panel .stream-cta--panel {
	max-width: 760px;
	margin: 12px auto 0;
}

.sc-stream-cta-widget--panel .stream-tab {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	text-align: left;
}

.sc-stream-cta-widget--panel .stream-tab summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--text);
}

.sc-stream-cta-widget--panel .stream-tab summary::-webkit-details-marker {
	display: none;
}

.sc-stream-cta-widget--panel .stream-tab summary::after {
	content: '+';
	color: var(--accent);
	font-size: 22px;
	line-height: 1;
	font-weight: 400;
	transition: transform 0.2s ease;
}

.sc-stream-cta-widget--panel .stream-tab[open] summary::after {
	content: '-';
	transform: rotate(180deg);
}

.sc-stream-cta-widget--panel .stream-tab__content {
	padding: 0 18px 18px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.7;
}

.sc-stream-cta-widget--panel .stream-tab__content p {
	margin: 0 0 10px;
}

/* Applies in both contexts — the action row is the widget's own markup. */
.sc-ticket-widget .stream-tab__action {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 14px 0 0;
}

/* ===== Link — one quiet line inside the footer CTA ===== */

.sc-ticket-widget .stream-cta--link {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 18px 24px 0;
	color: var(--muted);
	font-size: 15px;
	text-align: center;
}

/* The link variant drops the button chrome entirely — a bordered button here
 * would sit directly under the footer's red CTA and start competing with it. */
.sc-ticket-widget .stream-cta--link .stream-cta__btn {
	min-height: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--accent);
	font-family: 'Barlow', -apple-system, Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sc-ticket-widget .stream-cta--link .stream-cta__btn::after {
	content: '\2192';
	margin-left: 4px;
}

.sc-ticket-widget .stream-cta--link .stream-cta__btn:hover,
.sc-ticket-widget .stream-cta--link .stream-cta__btn:focus-visible {
	background: transparent;
	color: var(--accent-warm);
}

/* ===== Quick fact — hero =====
 *
 * Text only, never a button. This row sits beside the hero's "Pick Your Seats"
 * CTA, the single most valuable element on the page; a second button-shaped
 * thing there would split the main conversion moment. It inherits the fact
 * card's 13px muted type and only the link itself picks up the accent. */

.sc-ticket-widget .fact-item .stream-cta__btn {
	display: inline;
	min-height: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--accent);
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sc-ticket-widget .fact-item .stream-cta__btn:hover,
.sc-ticket-widget .fact-item .stream-cta__btn:focus-visible {
	background: transparent;
	color: var(--accent-warm);
}

.sc-ticket-widget .fact-item .stream-cta__price {
	margin-left: 5px;
	font-size: inherit;
}

/* ===== Standalone widget placement =====
 *
 * Elementor spaces sibling widgets apart with --widgets-spacing, which opens a
 * strip of page background above and below a full-bleed band — and since the
 * band and the seat picker panel both paint --bg-alt, that strip reads as a
 * seam splitting one continuous surface. The host-rendered band avoids this
 * entirely by living inside the seat picker's own wrapper; these rules cover
 * the standalone widget when it is placed by hand.
 *
 * :has() is unsupported on older browsers, which simply keeps the default
 * spacing — a cosmetic gap, not a broken layout. */
.elementor-widget:has(+ .elementor-widget-sc_ticket_stream_cta .sc-stream-cta-widget--band),
.elementor-widget-sc_ticket_stream_cta:has(.sc-stream-cta-widget--band) {
	margin-block-end: 0;
}

@media (max-width: 640px) {
	.sc-ticket-widget .stream-cta--band {
		padding: 26px 18px;
	}

	.sc-ticket-widget .stream-cta__actions {
		flex-direction: column;
		gap: 10px;
	}

	.sc-ticket-widget .stream-cta--band .stream-cta__btn {
		width: 100%;
		max-width: 320px;
	}
}