/* Webrakéta Űrlapok — csak a MOTOR saját elemei.
   A mezők kinézetét a téma .wr-contact__* osztályai adják, azokhoz nem nyúlunk. */

/* A csali mezőt el kell rejteni, DE nem display:none-nal: néhány robot
   kifejezetten a rejtett mezőket keresi és kihagyja. Így a mező a
   dokumentumban van, csak a képernyőn kívülre kerül. */
.wr-form-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.wr-form-note {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 24px;
}
.wr-form-note--ok  { background: #edfaef; border: 1px solid #b7e3c0; color: #12692a; }
.wr-form-note--err { background: #fcf0f1; border: 1px solid #f0b7ba; color: #a1252b; }
.wr-form-note ul   { margin: 0; padding-left: 20px; }

.wr-form-req { color: var(--wr-coral, #f03a47); }

.wr-form-consent { margin-top: 8px; }
.wr-form-consent__label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 20px;
	color: var(--wr-muted, #5b6b86);
	cursor: pointer;
}
.wr-form-consent__label input[type="checkbox"] {
	margin-top: 3px;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	accent-color: var(--wr-coral, #f03a47);
}
.wr-form-consent__label a { color: var(--wr-coral, #f03a47); text-decoration: underline; }

/* Küldés közben: a gomb ne legyen kétszer megnyomható. */
.wr-form.is-sending .wr-contact__submit { opacity: .6; pointer-events: none; }

/* --------------------------------------------------------------------------
   HIÁNYZÓ KÖTELEZŐ MEZŐ JELÖLÉSE (Ernő kérése, 2026-09-08)

   Piros keret, halvány piros háttér. A színt NEM csak a keret hordozza:
   színvak látogatónál a keret vastagsága és a mező alatti üzenet is segít,
   ezért a keret 2 képpont, nem hajszálvékony.
   -------------------------------------------------------------------------- */
/* CSAK a tényleges beviteli mezőt keretezzük. A mezőt körbeölelő dobozt NEM:
   ha azt is megjelölnénk, két piros téglalap jelenne meg egymásban, és a
   címke is bekeretezve. (Mérve 2026-09-08, javítva.) */
input.wr-form-invalid,
textarea.wr-form-invalid,
select.wr-form-invalid {
	border-color: #d92d20 !important;
	box-shadow: 0 0 0 1px #d92d20 inset;
	background-color: rgba(217, 45, 32, .04);
}
input.wr-form-invalid:focus,
textarea.wr-form-invalid:focus,
select.wr-form-invalid:focus {
	outline: 2px solid #d92d20;
	outline-offset: 1px;
}
/* A hozzájárulás jelölőnégyzete: ott a KERET a négyzeten látszik rosszul,
   ezért a teljes sort jelöljük meg halvány háttérrel és bal oldali csíkkal. */
.wr-form-consent.wr-form-invalid {
	background-color: rgba(217, 45, 32, .05);
	border-left: 3px solid #d92d20;
	padding-left: 10px;
	border-radius: 4px;
}
.wr-form-consent.wr-form-invalid input[type="checkbox"] {
	outline: 2px solid #d92d20;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   KÖSZÖNŐ OLDAL: a személyes blokk

   A meglévő /koszono/ oldal ELÉ kerül, ezért illeszkednie kell hozzá, de nem
   szabad elnyomnia. Ezért visszafogott: a márka színeit használja, saját
   színt nem talál ki.
   -------------------------------------------------------------------------- */
/* A fejléc FIXEN áll (mérve: 73 képpont magas), ezért a köszönő blokk teteje
   alá csúszna, amikor a látogató az oldal tetején érkezik. Ezért a felső
   térköz a fejléc magasságát is beleszámolja. */
.wr-ty {
	padding: 108px 20px 8px;
	background: var(--wr-paper, #fbfaf8);
}
.wr-ty__inner {
	max-width: 780px;
	margin: 0 auto;
	padding: 28px 26px;
	background: var(--wr-card, #fff);
	border: 1px solid var(--wr-line, #e3e7ee);
	border-radius: 18px;
	text-align: center;
}
.wr-ty__badge {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: color-mix(in oklab, var(--wr-coral, #f03a47) 12%, transparent);
	color: var(--wr-coral, #f03a47);
	margin-bottom: 14px;
}
.wr-ty__badge svg { width: 24px; height: 24px; }
.wr-ty__title {
	margin: 0 0 8px;
	font-size: clamp(24px, 4vw, 34px);
	line-height: 1.2;
	color: var(--wr-ink, #1b3c6f);
}
.wr-ty__lead {
	margin: 0 auto;
	max-width: 52ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wr-muted, #6b7a92);
}
.wr-ty__price {
	margin: 22px auto 0;
	max-width: 420px;
	padding: 16px 20px;
	border-radius: 14px;
	background: color-mix(in oklab, var(--wr-ink, #1b3c6f) 5%, transparent);
}
.wr-ty__price-label,
.wr-ty__price-note { display: block; font-size: 13px; color: var(--wr-muted, #6b7a92); }
.wr-ty__price-value {
	display: block;
	margin: 4px 0 6px;
	font-size: clamp(22px, 3.4vw, 30px);
	color: var(--wr-ink, #1b3c6f);
}
.wr-ty__details { margin-top: 20px; text-align: left; }
.wr-ty__details summary {
	cursor: pointer;
	font-size: 14px;
	color: var(--wr-muted, #6b7a92);
	text-align: center;
}
.wr-ty__list {
	display: grid;
	grid-template-columns: minmax(140px, 38%) 1fr;
	gap: 6px 14px;
	margin: 14px 0 0;
	font-size: 14px;
}
.wr-ty__list dt { color: var(--wr-muted, #6b7a92); }
.wr-ty__list dd { margin: 0; font-weight: 600; color: var(--wr-ink, #1b3c6f); }

.wr-ty__extra { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--wr-line, #e3e7ee); text-align: left; }
.wr-ty__extra-lead { margin: 0 0 14px; font-size: 14px; color: var(--wr-muted, #6b7a92); }
.wr-ty__extra-title { margin: 18px 0 10px; font-size: 16px; color: var(--wr-ink, #1b3c6f); }
.wr-ty__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.wr-ty__opt {
	display: flex; flex-direction: column; gap: 4px;
	text-align: left; padding: 12px 14px;
	border: 1px solid var(--wr-line, #e3e7ee);
	border-radius: 12px; background: var(--wr-card, #fff);
	cursor: pointer; font: inherit; color: inherit;
}
.wr-ty__opt.is-selected {
	border-color: var(--wr-coral, #f03a47);
	box-shadow: 0 0 0 1px var(--wr-coral, #f03a47) inset;
}
.wr-ty__opt-title { font-weight: 600; font-size: 14.5px; }
.wr-ty__opt-desc { font-size: 13px; color: var(--wr-muted, #6b7a92); }
.wr-ty__send {
	margin-top: 18px; padding: 12px 22px;
	border: 0; border-radius: 999px;
	background: var(--wr-coral, #f03a47); color: #fff;
	font: inherit; font-weight: 600; cursor: pointer;
}
.wr-ty__send[disabled] { opacity: .45; cursor: not-allowed; }
.wr-ty__extra-done { margin-top: 14px; font-weight: 600; color: var(--wr-ink, #1b3c6f); }

/* A ket nem kotelezo kerdes a lap ALJAN, sajat sávban. Azert kerult ide es nem
   a tetejere, mert a koszono oldal erzelmi resze (a nagy "Koszonjuk" Erika es
   Erno fotojaval) a meglevo tartalomban van, es azt nem szabad lenyomni. */
.wr-ty-extra-wrap {
	padding: 8px 20px 48px;
	background: var(--wr-paper, #fbfaf8);
}
.wr-ty-extra-wrap .wr-ty__extra {
	max-width: 780px;
	margin: 0 auto;
	padding: 28px 26px;
	background: var(--wr-card, #fff);
	border: 1px solid var(--wr-line, #e3e7ee);
	border-radius: 18px;
	border-top: 0;
	margin-top: 0;
	padding-top: 28px;
}
.wr-ty__extra-head {
	margin: 0 0 8px;
	font-size: clamp(19px, 3vw, 26px);
	color: var(--wr-ink, #1b3c6f);
}
.wr-ty__send-hint {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--wr-muted, #6b7a92);
}
.wr-ty-extra-wrap .wr-ty__send { margin-top: 10px; }

/* Az arsav ket osszege ne torjon szet ("... 1 790 000" / "Ft"). */
.wr-ty__amount { white-space: nowrap; }
.wr-ty__dash { padding: 0 2px; }

/* --------------------------------------------------------------------------
   CSOMAGVÁLASZTÓ (select)

   A .wr-contact__input osztályt is megkapja, tehát a keret, a háttér és a
   fókusz-állapot a kapcsolat-űrlapéval AZONOS. Itt CSAK az marad, ami egy
   legördülőnél külön kell: a natív nyíl lecserélése és a hely neki.

   A saját nyíl azért kell, mert a natív megjelenés böngészőnként más, és a
   Safarié nem illik a többi mezőhöz. Az ikon beágyazott SVG, nem külön fájl:
   egy ikonért nem éri meg plusz kérés.
   -------------------------------------------------------------------------- */
.wr-contact__select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
}
/* Amíg nincs választás, halványabb, mint a kitöltött érték: ugyanaz a
   vizuális logika, mint a többi mező placeholderénél. */
.wr-contact__select:invalid,
.wr-contact__select option[value=""] { color: var(--muted-foreground); }
.wr-contact__select option { color: var(--ink); }