/**
 * Ticket Embed skin
 * ------------------
 * Loaded ONLY on the "Ticket Embed" page template (header-ticket-embed.php).
 * Nudges the Bootstrap/Material-Kit look of the bdu-wordpress-plugin booking
 * form toward the TYPO3 main site's design tokens, so it reads as native
 * inside the <iframe> there instead of as an obviously different site.
 *
 * Colors intentionally match the TYPO3 site's exact hex values (schaf-*
 * tokens in packages/moonmedia/Build/Scss/layout.css), not this theme's own
 * (very close but slightly different) theme.json palette — the frame the
 * visitor actually sees around this content is the TYPO3 page.
 */

:root {
	--embed-blue: #2a91be;
	--embed-blue-dark: #1e6e92;
	--embed-red: #a12040;
	--embed-black: #1c1c1c;
	--embed-paper: #f7f4f0;
	--embed-border: #ddd5cf;
	--embed-muted: #6b5f5a;
	--embed-radius: 0px; /* the TYPO3 site is deliberately sharp-cornered everywhere */
}

body.ticket-embed-page {
	margin: 0;
	background: rgb(243, 247, 255);
	color: var(--embed-black);
	font-family: 'Manrope', 'Inter', system-ui, sans-serif;
}

.ticket-embed {
	max-width: 100%;
	padding: 0;
	box-sizing: border-box;
}

.ticket-embed h1,
.ticket-embed h2,
.ticket-embed h3,
.ticket-embed h4 {
	color: var(--embed-black);
	font-family: 'Manrope', 'Inter', system-ui, sans-serif;
}

/* Buttons (Bootstrap / Material Kit) */
.ticket-embed .btn,
.ticket-embed .btn-primary,
.ticket-embed .btn-info,
.ticket-embed .btn-round {
	border-radius: var(--embed-radius) !important;
	box-shadow: none !important;
	letter-spacing: 0.04em;
}
.ticket-embed .btn-primary,
.ticket-embed .btn-info {
	background-color: var(--embed-blue) !important;
	border-color: var(--embed-blue) !important;
}
.ticket-embed .btn-primary:hover,
.ticket-embed .btn-primary:focus,
.ticket-embed .btn-info:hover,
.ticket-embed .btn-info:focus {
	background-color: var(--embed-blue-dark) !important;
	border-color: var(--embed-blue-dark) !important;
}
.ticket-embed .btn-danger {
	background-color: var(--embed-red) !important;
	border-color: var(--embed-red) !important;
}

/* Cards / panels / modal */
.ticket-embed .card,
.ticket-embed .panel-default,
.ticket-embed .modal-content {
	border-radius: var(--embed-radius) !important;
	box-shadow: none !important;
	border: 1px solid var(--embed-border) !important;
}

/* Form controls */
.ticket-embed .form-control,
.ticket-embed input,
.ticket-embed select,
.ticket-embed textarea {
	border-radius: var(--embed-radius) !important;
	border-color: var(--embed-border) !important;
	color: var(--embed-black);
}
.ticket-embed .form-control:focus,
.ticket-embed input:focus,
.ticket-embed select:focus,
.ticket-embed textarea:focus {
	border-color: var(--embed-blue) !important;
	box-shadow: 0 0 0 1px var(--embed-blue) !important;
}

/* Links */
.ticket-embed a {
	color: var(--embed-blue-dark);
}
.ticket-embed a:hover,
.ticket-embed a:focus {
	color: var(--embed-red);
}

/* Seat plan / table selection accents that use the plugin's own bright reds
   and greens should stay untouched (they signal availability, not brand) —
   only chrome (buttons, cards, radius, base font) is re-skinned above. */

/* ── Presale countdown ─────────────────────────────────────────────────────
   Box built by js/ticket-embed-countdown.js from the plugin's
   <h3 id="countdown"> text. Mirrors the TYPO3 site's mm_countdown box
   (layout "Groß", ContentElements/Templates/MmCountdown.html in moonmedia). */

@font-face {
	font-display: fallback;
	font-family: 'Embed Playfair Display';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/ticket-embed/playfair-display-v40-latin-regular.woff2') format('woff2');
}

.ticket-embed #countdown-logo {
	display: none;
}

/* !important: the plugin's reservierungen.css forces Helvetica/1.2em on
   .paraback h3 with !important. */
.ticket-embed .paraback .embed-countdown-heading {
	margin: 40px 0 32px;
	font-family: 'Embed Playfair Display', Georgia, serif !important;
	font-weight: 400;
	font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
	line-height: 1.05 !important;
	text-align: left;
	text-transform: none;
}

/* Original plugin text: visually hidden while the box shows the time, but
   still read by screen readers and shown again for the opening/reload texts. */
.has-embed-countdown .ticket-embed #countdown {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.embed-countdown {
	position: relative;
	overflow: hidden;
	margin: 0 0 40px;
	padding: 32px 24px;
	background: #151311;
	color: #f3f7ff;
	text-align: left;
}
.embed-countdown[hidden] {
	display: none;
}
@media (min-width: 576px) {
	.embed-countdown {
		padding: 40px;
	}
}
@media (min-width: 768px) {
	.embed-countdown {
		padding: 56px;
	}
}

.embed-countdown__bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 96px;
	height: 4px;
	background: var(--embed-red);
}

.embed-countdown__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.embed-countdown__meta,
.embed-countdown__unit {
	font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(243, 247, 255, 0.6);
}
.embed-countdown__meta--right {
	text-align: right;
}

.embed-countdown__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 32px;
}
@media (min-width: 768px) {
	.embed-countdown__grid {
		gap: 24px;
	}
}

.embed-countdown__num {
	font-family: 'Embed Playfair Display', Georgia, serif;
	font-variant-numeric: tabular-nums;
	font-size: clamp(2.25rem, 11vw, 3.75rem); /* 4 columns must fit on small phones */
	line-height: 1;
}
@media (min-width: 768px) {
	.embed-countdown__num {
		font-size: 6rem;
	}
}
.embed-countdown__num--accent {
	color: var(--embed-red);
}

.embed-countdown__unit {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(243, 247, 255, 0.2);
	color: rgba(243, 247, 255, 0.5);
}
@media (max-width: 575px) {
	/* 0.3em tracking breaks "SEKUNDEN" mid-word in the narrow columns. */
	.embed-countdown__meta,
	.embed-countdown__unit {
		letter-spacing: 0.08em;
	}
}