/* ==========================================================================
   TechShow X. VIP regisztráció — Prizma
   2. fázis: teljes űrlap-stílus

   🔴 GUARD-CSS — MIÉRT `!important` MINDENHOL?
   A Divi/Extra téma felülírja a natív elemeket (p, h1, h2, button, input,
   label, fieldset, legend, select, textarea, a, dl). Ezért MINDEN szabály:
     - a `.tsv` scope alatt fut, és
     - `!important`-tal.

   Élesben mért driftek, amiket minden ÚJ komponensnél újra ellenőrizni kell:
     - input::placeholder{text-transform:uppercase;letter-spacing:1.2px}
       → a PSZEUDO-ELEMET is fedni kell, nem elég az inputot
     - <a class="tsv-btn"> → a téma ALÁHÚZZA → linknek látszik, nem gombnak
     - a nyilatkozatok linkjeit külön kell színezni
     - a fieldset/legend a témában keretet és nagybetűs feliratot kap
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokenek + alap
   -------------------------------------------------------------------------- */
.tsv {
	--ts-bg: #F4F5F8;
	--ts-surface: #FFFFFF;
	--ts-ink: #0A0B0E;
	--ts-ink-2: #5C616B;
	--ts-ink-3: #8A8F99;
	--ts-line: #E8EAF0;
	--ts-night: #0A0F1E;
	--ts-night-2: #121A30;
	--ts-accent: #5227FF;
	--ts-accent-hover: #3D14E0;
	--ts-accent-soft: #F1EDFF;
	--ts-fin-neon: #22C8E8;
	--ts-pay-neon: #FF5FAD;
	--ts-bank-neon: #FFC233;
	--ts-danger: #D6273A;
	--ts-danger-soft: #FDEDEF;
	--ts-radius: 12px;
	--ts-radius-s: 8px;
	--ts-radius-pill: 999px;
	--ts-font-display: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ts-font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

	font-family: var(--ts-font-body) !important;
	color: var(--ts-ink) !important;
	text-align: left !important;

	/* Halvány alap az űrlap mögé. A blokkok fehér kártyák, ezért fehér
	   oldalháttéren nem lenne kontrasztjuk. Így a shortcode bármelyik
	   oldalon önmagában is jól néz ki. A hero saját, sötét hátteret kap
	   (lásd .tsv-hero-wrap, ami ez után következik a fájlban). */
	background: var(--ts-bg) !important;
}

.tsv *,
.tsv *::before,
.tsv *::after {
	box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   Hero — éjkék, teljes szélességben
   -------------------------------------------------------------------------- */
.tsv-hero-wrap {
	background: linear-gradient(160deg, var(--ts-night) 0%, var(--ts-night-2) 100%) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tsv-hero {
	max-width: 760px !important;
	margin: 0 auto !important;
	padding: 56px 20px 48px !important;
	position: relative !important;
}

/* Prizma-hármas: vékony színcsík a hero alján */
.tsv-hero-wrap::after {
	content: '' !important;
	display: block !important;
	height: 3px !important;
	background: linear-gradient(90deg,
		var(--ts-fin-neon) 0%, var(--ts-fin-neon) 33.3%,
		var(--ts-pay-neon) 33.3%, var(--ts-pay-neon) 66.6%,
		var(--ts-bank-neon) 66.6%, var(--ts-bank-neon) 100%) !important;
}

.tsv-hero-kicker {
	font-family: var(--ts-font-body) !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--ts-fin-neon) !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-weight: 500 !important;
}

.tsv-hero-title {
	font-family: var(--ts-font-display) !important;
	font-size: 40px !important;
	line-height: 1.12 !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: -0.01em !important;
}

.tsv-hero-motto {
	font-family: var(--ts-font-body) !important;
	font-size: 18px !important;
	line-height: 1.55 !important;
	color: rgba(255, 255, 255, 0.82) !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	max-width: 56ch !important;
}

.tsv-hero-deadline {
	display: inline-block !important;
	font-family: var(--ts-font-body) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 500 !important;
	color: #FFFFFF !important;
	background: rgba(255, 255, 255, 0.10) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: var(--ts-radius-pill) !important;
	padding: 7px 16px !important;
	margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Törzs
   -------------------------------------------------------------------------- */
/* 🔴 A FÜGGŐLEGES TÉRKÖZ EGYETLEN HELYEN, ITT VAN.
   Az űrlap a TechShow-oldalon két idegen elem közé kerül: fölötte a logó-
   futószalag, alatta a Theme Builder lábléce. Egyik sem hoz magával térközt,
   ezért ha ez hiányzik, minden összecsúszik.
   Követelmény (Gábor, 2026-08-12): desktopon legalább 35px fent és lent,
   kisebb nézetekben arányosan. */
.tsv-body {
	max-width: 760px !important;
	margin: 0 auto !important;
	padding: 56px 20px 64px !important;
}

.tsv-intro {
	font-family: var(--ts-font-body) !important;
	font-size: 16px !important;
	line-height: 1.62 !important;
	color: var(--ts-ink-2) !important;
	margin: 0 0 32px !important;
	padding: 0 !important;
	max-width: 62ch !important;
}

/* --------------------------------------------------------------------------
   Blokkok
   -------------------------------------------------------------------------- */
.tsv-block {
	background: var(--ts-surface) !important;
	border: 1px solid var(--ts-line) !important;
	border-radius: var(--ts-radius) !important;
	padding: 28px !important;
	margin: 0 0 20px !important;
}

.tsv-block-head {
	margin: 0 0 22px !important;
	padding: 0 !important;
	border: 0 !important;
}

.tsv-block-code {
	display: inline-block !important;
	font-family: var(--ts-font-display) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.06em !important;
	color: var(--ts-accent) !important;
	background: var(--ts-accent-soft) !important;
	border-radius: var(--ts-radius-s) !important;
	padding: 6px 10px !important;
	margin: 0 0 12px !important;
}

.tsv-block-title {
	font-family: var(--ts-font-display) !important;
	font-size: 22px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	color: var(--ts-ink) !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.tsv-block-sub {
	font-family: var(--ts-font-body) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--ts-ink-3) !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Mezőrács
   -------------------------------------------------------------------------- */
.tsv-fields {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 20px !important;
}

.tsv-field {
	grid-column: 1 / -1 !important;
	min-width: 0 !important;
}

.tsv-field--half {
	grid-column: span 1 !important;
}

/* --------------------------------------------------------------------------
   Címkék és beviteli mezők
   -------------------------------------------------------------------------- */
.tsv-label {
	display: block !important;
	font-family: var(--ts-font-body) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
	color: var(--ts-ink) !important;
	margin: 0 0 7px !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	float: none !important;
}

.tsv-req {
	color: var(--ts-accent) !important;
	font-weight: 700 !important;
}

.tsv-optnote {
	font-weight: 400 !important;
	color: var(--ts-ink-3) !important;
	font-size: 13px !important;
}

.tsv-input {
	display: block !important;
	width: 100% !important;
	font-family: var(--ts-font-body) !important;
	font-size: 16px !important;   /* 16px alatt az iOS ráközelít a mezőre */
	line-height: 1.45 !important;
	font-weight: 400 !important;
	color: var(--ts-ink) !important;
	background: var(--ts-surface) !important;
	border: 1px solid var(--ts-line) !important;
	border-radius: var(--ts-radius-s) !important;
	padding: 11px 14px !important;
	margin: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
}

/* A téma nagybetűsíti és ritkítja a helykitöltő szöveget — a pszeudo-elemet
   külön kell fedni, az inputra tett szabály erre NEM hat. */
.tsv-input::placeholder {
	color: var(--ts-ink-3) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	opacity: 1 !important;
	font-size: 16px !important;
}

.tsv-input:focus {
	outline: none !important;
	border-color: var(--ts-accent) !important;
	box-shadow: 0 0 0 3px var(--ts-accent-soft) !important;
}

.tsv-input--locked {
	background: var(--ts-bg) !important;
	color: var(--ts-ink-2) !important;
	cursor: not-allowed !important;
}

.tsv-input--locked:focus {
	border-color: var(--ts-line) !important;
	box-shadow: none !important;
}

select.tsv-input {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235C616B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 38px !important;
}

textarea.tsv-input {
	resize: vertical !important;
	min-height: 96px !important;
}

.tsv-hint {
	font-family: var(--ts-font-body) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--ts-ink-3) !important;
	margin: 7px 0 0 !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Rádiógombok
   A téma a fieldsetre keretet, a legendre nagybetűs feliratot tesz.
   -------------------------------------------------------------------------- */
.tsv-radiogroup {
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

.tsv-radiogroup .tsv-label {
	display: block !important;
	width: 100% !important;
	float: none !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}

.tsv-radio {
	display: flex !important;
	align-items: flex-start !important;
	gap: 11px !important;
	font-family: var(--ts-font-body) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
	color: var(--ts-ink) !important;
	background: var(--ts-surface) !important;
	border: 1px solid var(--ts-line) !important;
	border-radius: var(--ts-radius-s) !important;
	padding: 13px 15px !important;
	margin: 0 0 9px !important;
	cursor: pointer !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: border-color .15s ease, background .15s ease !important;
}

.tsv-radio:last-child {
	margin-bottom: 0 !important;
}

.tsv-radio:hover {
	border-color: #C9CEDC !important;
}

.tsv-radio input[type="radio"] {
	flex: 0 0 auto !important;
	width: 19px !important;
	height: 19px !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	accent-color: var(--ts-accent) !important;
	cursor: pointer !important;
}

.tsv-radio:has(input:checked) {
	border-color: var(--ts-accent) !important;
	background: var(--ts-accent-soft) !important;
}

.tsv-radio-text {
	display: block !important;
	padding: 0 !important;
}

/* 🔴 ZÁROLT VÁLASZTÁS (2026-08-17). A szponzori vendégnél a részvételi napot
   a szponzor kapcsolattartója KÖTŐEN adta meg. A nem választható lehetőségek
   `disabled` attribútumot kapnak; itt az a dolgunk, hogy ez LÁTSZÓDJON is —
   különben a vendég kattint, nem történik semmi, és nem érti, miért.

   🔴 A SZELEKTOR EREJE SZÁMÍT, NEM CSAK AZ `!important` (CLAUDE.md 6.).
   Az első változatom `.tsv-radio--disabled`-del írta le ugyanezt, és a
   BÖNGÉSZŐBEN MÉRVE csak az `opacity` érvényesült: a `cursor` és a `background`
   nem, mert a `.tsv-radio` szabály azonos erősségű ÉS később állt a fájlban.
   Nem a téma írta felül, hanem mi magunk — ugyanaz az alakzat, amit a projekt
   2026-08-16-án már megfizetett.

   Ezért: a csoport-osztállyal EGYÜTT hivatkozunk (két osztály erősebb, mint
   egy), és a blokk a `.tsv-radio` UTÁN áll. */
.tsv-radiogroup--locked .tsv-radio--disabled {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
	background: var(--ts-bg) !important;
	border-color: var(--ts-line) !important;
}

.tsv-radiogroup--locked .tsv-radio--disabled .tsv-radio-text {
	color: var(--ts-ink-3) !important;
}

.tsv-radiogroup--locked .tsv-radio--disabled input[type="radio"] {
	cursor: not-allowed !important;
}

/* A kiválasztott, zárolt lehetőség NEM halvány — az az érvényes válasz.
   Csak azt jelezzük, hogy nem mozdítható. */
.tsv-radiogroup--locked .tsv-radio:not(.tsv-radio--disabled),
.tsv-radiogroup--locked .tsv-radio:not(.tsv-radio--disabled) input[type="radio"] {
	cursor: default !important;
}

/* --------------------------------------------------------------------------
   Hozzájárulások
   -------------------------------------------------------------------------- */
.tsv-consent {
	display: flex !important;
	align-items: flex-start !important;
	gap: 11px !important;
	font-family: var(--ts-font-body) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
	color: var(--ts-ink-2) !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	float: none !important;
}

.tsv-consent input[type="checkbox"] {
	flex: 0 0 auto !important;
	width: 19px !important;
	height: 19px !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	accent-color: var(--ts-accent) !important;
	cursor: pointer !important;
}

.tsv-consent-text {
	display: block !important;
	padding: 0 !important;
}

.tsv-consent-link {
	margin: 7px 0 0 30px !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

/* A téma az aloldalakon saját linkszínt használ — a nyilatkozatoknál külön kell.
   🔴 A :not(.tsv-btn) NEM elhagyható. Ez a szabály a FOLYÓSZÖVEGBEN lévő
   linkeknek szól, de `.tsv-box-body a` (0,2,0) erősebb, mint `.tsv-btn` (0,1,0),
   ezért aláhúzta a dobozban lévő LINK-ALAPÚ gombokat is — a „Mégis kitöltöm"
   linknek látszott, nem gombnak. Élesben mérve a lemondó megerősítő oldalon,
   2026-08-12. Ez pontosan a CLAUDE.md 6. szabályában leírt drift, csak nem a
   téma okozta, hanem a saját CSS-ünk. */
.tsv-consent-link a:not(.tsv-btn),
.tsv-box-body a:not(.tsv-btn),
.tsv-decline a:not(.tsv-btn) {
	color: var(--ts-accent) !important;
	text-decoration: underline !important;
	font-weight: 500 !important;
}

.tsv-consent-link a:not(.tsv-btn):hover,
.tsv-box-body a:not(.tsv-btn):hover,
.tsv-decline a:not(.tsv-btn):hover {
	color: var(--ts-accent-hover) !important;
}

/* A két hozzájárulás közé nagyobb levegő, mint a rács alap gapje */
.tsv-field--consent + .tsv-field--consent {
	margin-top: 4px !important;
}

/* --------------------------------------------------------------------------
   Hibaüzenetek
   -------------------------------------------------------------------------- */
.tsv-error {
	font-family: var(--ts-font-body) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	font-weight: 500 !important;
	color: var(--ts-danger) !important;
	margin: 7px 0 0 !important;
	padding: 0 !important;
}

.tsv-error[hidden] {
	display: none !important;
}

.tsv-field--invalid .tsv-input {
	border-color: var(--ts-danger) !important;
}

.tsv-field--invalid .tsv-input:focus {
	box-shadow: 0 0 0 3px var(--ts-danger-soft) !important;
}

.tsv-formerror {
	font-family: var(--ts-font-body) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	font-weight: 500 !important;
	color: var(--ts-danger) !important;
	background: var(--ts-danger-soft) !important;
	border: 1px solid #F5C2C8 !important;
	border-radius: var(--ts-radius-s) !important;
	padding: 13px 16px !important;
	margin: 0 0 20px !important;
}

.tsv-formerror[hidden] {
	display: none !important;
}

/* Semleges visszajelzés ugyanabban a sávban (nem hiba) */
.tsv-formerror--info {
	color: var(--ts-ink) !important;
	background: var(--ts-accent-soft) !important;
	border-color: #D9CEFF !important;
}

/* --------------------------------------------------------------------------
   Gombok
   A téma az <a class="tsv-btn"> elemet ALÁHÚZZA — ezért text-decoration:none.
   -------------------------------------------------------------------------- */
.tsv-actions {
	margin: 28px 0 0 !important;
	padding: 0 !important;
}

.tsv-actions--row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	align-items: center !important;
}

.tsv-btn {
	display: inline-block !important;
	font-family: var(--ts-font-body) !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	color: #FFFFFF !important;
	background: var(--ts-accent) !important;
	border: 1px solid var(--ts-accent) !important;
	border-radius: var(--ts-radius-pill) !important;
	padding: 15px 30px !important;
	margin: 0 !important;
	cursor: pointer !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: 0 2px 10px rgba(82, 39, 255, 0.22) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background .15s ease, border-color .15s ease !important;
}

.tsv-btn:hover {
	background: var(--ts-accent-hover) !important;
	border-color: var(--ts-accent-hover) !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
}

.tsv-btn:disabled,
.tsv-btn[aria-disabled="true"] {
	background: #B9BECC !important;
	border-color: #B9BECC !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
}

.tsv-btn--ghost {
	color: var(--ts-accent) !important;
	background: transparent !important;
	border-color: var(--ts-accent) !important;
	box-shadow: none !important;
}

.tsv-btn--ghost:hover {
	color: #FFFFFF !important;
	background: var(--ts-accent) !important;
}

.tsv-btn--quiet {
	color: var(--ts-ink) !important;
	background: transparent !important;
	border-color: var(--ts-line) !important;
	box-shadow: none !important;
}

.tsv-btn--quiet:hover {
	color: var(--ts-ink) !important;
	background: var(--ts-bg) !important;
	border-color: #C9CEDC !important;
}

.tsv-note {
	font-family: var(--ts-font-body) !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: var(--ts-ink-3) !important;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	max-width: 56ch !important;
}

/* --------------------------------------------------------------------------
   "Nem tudok részt venni"
   -------------------------------------------------------------------------- */
.tsv-decline {
	font-family: var(--ts-font-body) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--ts-ink-3) !important;
	text-align: center !important;
	margin: 32px 0 0 !important;
	padding: 22px 0 0 !important;
	border-top: 1px solid var(--ts-line) !important;
}

/* --------------------------------------------------------------------------
   Üzenetdoboz + összegzés
   -------------------------------------------------------------------------- */
.tsv-box {
	background: var(--ts-surface) !important;
	border: 1px solid var(--ts-line) !important;
	border-radius: var(--ts-radius) !important;
	padding: 32px !important;
	max-width: 760px !important;
	margin: 0 auto !important;
}

.tsv-box-title {
	font-family: var(--ts-font-display) !important;
	font-size: 24px !important;
	line-height: 1.25 !important;
	font-weight: 600 !important;
	color: var(--ts-ink) !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.tsv-box-body p {
	font-family: var(--ts-font-body) !important;
	font-size: 16px !important;
	line-height: 1.62 !important;
	color: var(--ts-ink-2) !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}

.tsv-box-body p:last-child {
	margin-bottom: 0 !important;
}

.tsv-box-body strong {
	color: var(--ts-ink) !important;
	font-weight: 600 !important;
}

.tsv-muted {
	color: var(--ts-ink-3) !important;
	font-size: 14px !important;
}

.tsv-summary {
	display: grid !important;
	grid-template-columns: minmax(140px, auto) 1fr !important;
	gap: 10px 20px !important;
	margin: 22px 0 0 !important;
	padding: 20px 0 0 !important;
	border-top: 1px solid var(--ts-line) !important;
}

.tsv-summary dt {
	font-family: var(--ts-font-body) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	font-weight: 600 !important;
	color: var(--ts-ink-3) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tsv-summary dd {
	font-family: var(--ts-font-body) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--ts-ink) !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.tsv-hero {
		padding: 40px 16px 34px !important;
	}
	.tsv-hero-title {
		font-size: 30px !important;
	}
	.tsv-hero-motto {
		font-size: 16px !important;
	}
	/* Mobilon arányosan kisebb, de a 35px-es alsó határ fölött marad. */
	.tsv-body {
		padding: 40px 16px 48px !important;
	}
	.tsv-block,
	.tsv-box {
		padding: 22px 18px !important;
	}
	.tsv-fields {
		grid-template-columns: 1fr !important;
	}
	.tsv-field--half {
		grid-column: 1 / -1 !important;
	}
	.tsv-btn {
		display: block !important;
		width: 100% !important;
	}
	.tsv-actions--row .tsv-btn {
		width: 100% !important;
	}
	.tsv-summary {
		grid-template-columns: 1fr !important;
		gap: 3px 0 !important;
	}
	.tsv-summary dd {
		margin: 0 0 12px !important;
	}
}

/* Csökkentett mozgás igénye esetén ne animáljunk */
@media (prefers-reduced-motion: reduce) {
	.tsv * {
		transition: none !important;
	}
}