/**
 * ServiceGift — terméklapi űrlap, pénztári beváltás, egyenleg-lekérdező.
 *
 * A megjelenés a téma saját jegyeit követi, nem talál ki újat:
 *
 *   háttér   #222 (mezők), #111 (kiemelt blokk)
 *   szegély  rgba(255,255,255,.1)  — a téma `border-white/10`-je
 *   szöveg   #fff / #d1d5db (gray-300) / #9ca3af (gray-400)
 *   kiemelés #c79a74, hover #b8895f
 *   sarkok   ÉLES — a téma sehol nem kerekít a termékoldalon
 *
 * Mobile-first: az alapállapot a kicsi képernyőé.
 */

/* --- Az ajándékutalvány oldala --- */
/*
 * A téma az általános oldalakat szélességkorlát és középre igazítás nélkül
 * adja, ezért a lap szerkezetét itt kell felépíteni — enélkül az űrlap a
 * képernyő bal szélére tapad.
 */

.svcgift-page {
	max-width: 68rem;
	margin: 0 auto;
}

/* Bevezető */

.svcgift-lead {
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.svcgift-lead-text {
	margin: 0 0 1rem;
	max-width: 44rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #d1d5db;
}

.svcgift-lead-points {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: #9ca3af;
}

.svcgift-lead-points li::before {
	content: "—";
	margin-right: 0.5rem;
	color: #c79a74;
}

/* Kétoszlopos elrendezés */

.svcgift-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.svcgift-layout {
		grid-template-columns: minmax(0, 1.7fr) minmax(20rem, 1fr);
		gap: 3.5rem;
	}

	.svcgift-aside {
		position: sticky;
		top: 2rem;
	}
}

.svcgift-main {
	min-width: 0;
}

/* Szakaszok */

.svcgift-section {
	padding: 2rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.svcgift-section:first-child {
	border-top: 0;
	padding-top: 0;
}

.svcgift-h2 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: #fff;
}

.svcgift-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid rgba(199, 154, 116, 0.55);
	color: #c79a74;
	font-size: 0.875rem;
	font-weight: 700;
}

.svcgift-hint-lead {
	margin-top: -0.5rem;
	margin-bottom: 1rem;
}

/* Hibalista */

.svcgift-errors {
	margin: 0 0 2rem;
	padding: 1rem 1.15rem;
	border: 1px solid rgba(248, 113, 113, 0.5);
	border-left: 2px solid #f87171;
	background: rgba(248, 113, 113, 0.08);
}

.svcgift-errors-title {
	margin: 0 0 0.5rem;
	font-weight: 700;
	color: #f87171;
}

.svcgift-errors ul {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.875rem;
	color: #d1d5db;
}

/* Címzett-sorok */

.svcgift-rows {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.svcgift-row {
	display: grid;
	grid-template-columns: 1.5rem 1fr 2rem;
	align-items: center;
	gap: 0.5rem;
}

@media (min-width: 640px) {
	.svcgift-row {
		grid-template-columns: 1.5rem 1fr 1fr 2rem;
	}

	.svcgift-rows.is-email-hidden .svcgift-row {
		grid-template-columns: 1.5rem 1fr 2rem;
	}
}

.svcgift-row-num {
	font-size: 0.8125rem;
	color: #6b7280;
	text-align: right;
}

.svcgift-row input[hidden] {
	display: none;
}

.svcgift-row-remove {
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: transparent;
	color: #6b7280;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.svcgift-row-remove:hover {
	color: #f87171;
	border-color: rgba(248, 113, 113, 0.5);
}

.svcgift-add-row {
	align-self: flex-start;
	margin-bottom: 1rem;
	padding: 0.55rem 0.9rem;
	border: 1px dashed rgba(199, 154, 116, 0.55);
	background: transparent;
	color: #c79a74;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s;
}

.svcgift-add-row:hover {
	background: rgba(199, 154, 116, 0.1);
}

.svcgift-multi-toggle {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9375rem;
	font-weight: 400;
	color: #d1d5db;
	cursor: pointer;
}

.svcgift-multi-toggle input {
	accent-color: #c79a74;
	width: 1.05rem;
	height: 1.05rem;
}

/*
 * EGY ajándék az alapeset: ilyenkor a sorszám, a törlőgomb és a
 * „további címzett" gomb elrejtőzik. Aki egyetlen utalványt vesz, ne
 * lásson listát — azt hinné, valamit ki kell töltenie.
 */
.svcgift-page.is-single .svcgift-row-num,
.svcgift-page.is-single .svcgift-row-remove,
.svcgift-page.is-single .svcgift-add-row,
.svcgift-page.is-single .svcgift-multi-only {
	display: none;
}

.svcgift-page.is-single .svcgift-row {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.svcgift-page.is-single .svcgift-row {
		grid-template-columns: 1fr 1fr;
	}

	.svcgift-page.is-single .svcgift-rows.is-email-hidden .svcgift-row {
		grid-template-columns: 1fr;
	}
}

/* Összegző kártya */

.svcgift-summary {
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #111;
}

.svcgift-shot {
	margin: -1.5rem -1.5rem 1.25rem;
}

.svcgift-shot-img {
	display: block;
	width: 100%;
	height: auto;
}

.svcgift-summary-title {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #c79a74;
}

/* --- Üzenet-ötletek --- */

.svcgift-ideas {
	margin-bottom: 1.25rem;
	padding: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.02);
}

.svcgift-ideas-title {
	margin: 0 0 0.85rem;
	font-size: 0.875rem;
	color: #d1d5db;
}

.svcgift-ideas-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.85rem;
}

.svcgift-ideas-tab {
	padding: 0.4rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: transparent;
	color: #9ca3af;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.svcgift-ideas-tab:hover {
	color: #fff;
	border-color: rgba(199, 154, 116, 0.6);
}

.svcgift-ideas-tab.is-active {
	color: #fff;
	border-color: #c79a74;
	background: rgba(199, 154, 116, 0.15);
}

.svcgift-ideas-list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.svcgift-ideas-list[hidden] {
	display: none;
}

.svcgift-idea {
	padding: 0.6rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: #1a1614;
	color: #d1d5db;
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.svcgift-idea:hover {
	border-color: #c79a74;
	color: #fff;
}

/* Élő előnézet — mini utalvány-kártyaként.
 *
 * Egy sima idézetblokk nem árulta el, hogy ez MAGA a kártya tartalma. A
 * kártya formája ránézésre elmondja, amit egy felirat csak állítana. */

.svcgift-preview {
	padding: 1.25rem 1rem;
	margin-bottom: 1.25rem;
	border: 1px solid rgba(199, 154, 116, 0.55);
	background: #1a1614;
	text-align: center;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.svcgift-preview-kicker {
	font-size: 0.625rem;
	letter-spacing: 0.28em;
	color: #c79a74;
}

.svcgift-preview-amount {
	font-size: 1.75rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
}

.svcgift-preview-rule {
	width: 2.5rem;
	margin: 0.85rem auto;
	border-top: 1px solid rgba(199, 154, 116, 0.5);
}

.svcgift-preview p {
	margin: 0 0 0.4rem;
}

.svcgift-preview p:last-child {
	margin-bottom: 0;
}

.svcgift-preview-greeting {
	font-weight: 700;
	color: #f2ece6;
}

.svcgift-preview-greeting[hidden] {
	display: none;
}

.svcgift-optional {
	margin-left: auto;
	padding: 0.15rem 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: #9ca3af;
	text-transform: none;
}

.svcgift-preview-message {
	color: #d1d5db;
	white-space: pre-line;
}

.svcgift-preview-message.is-default {
	color: #9ca3af;
	font-style: italic;
}

.svcgift-preview-sender {
	font-size: 0.8125rem;
	color: #9ca3af;
}

/* Összegző sorok */

.svcgift-summary-rows {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
}

.svcgift-summary-rows > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4rem 0;
}

.svcgift-summary-rows dt {
	color: #9ca3af;
}

.svcgift-summary-rows dd {
	margin: 0;
	color: #d1d5db;
}

.svcgift-summary-total {
	margin-top: 0.35rem;
	padding-top: 0.75rem !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.svcgift-summary-total dt {
	font-weight: 700;
	color: #fff !important;
}

.svcgift-summary-total dd {
	font-size: 1.25rem;
	font-weight: 700;
	color: #c79a74 !important;
}

.svcgift-submit {
	display: block;
	width: 100%;
	padding: 0.9rem 1.5rem;
	border: 0;
	background: #c79a74;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s;
}

.svcgift-submit:hover {
	background: #b8895f;
}

.svcgift-summary-note {
	margin: 0.85rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: #6b7280;
}

.svcgift-form {
	margin: 0;
}

.svcgift-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

/* --- „Ez digitális utalvány" tájékoztató --- */

.svcgift-notice {
	padding: 0.9rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-left: 2px solid #c79a74;
	background: #111;
}

.svcgift-notice-title {
	margin: 0 0 0.35rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #c79a74;
}

.svcgift-notice-body {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #d1d5db;
}

.svcgift-label,
.svcgift-form label {
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
}

/* A mezőcímke sorrá válik, hogy a „nem kötelező" jelvény a jobb szélre
   kerüljön — ugyanaz a kezelés, mint a szakaszcímeknél. Így egyféleképp
   jelöljük ugyanazt, nem kétféleképp. */
.svcgift-field > label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.svcgift-hint {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #9ca3af;
}

/* --- Összeg-csúszka --- */

.svcgift-amount-display {
	display: block;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #c79a74;
}

.svcgift-amount-range {
	--svcgift-fill: 0%;

	width: 100%;
	height: 1.75rem;
	margin: 0.25rem 0 0;
	padding: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

/* A sáv. A kitöltött rész a JS által számolt --svcgift-fill értékig tart —
   ezt CSS-ből nem lehet egységesen megoldani a böngészők között. */
.svcgift-amount-range::-webkit-slider-runnable-track {
	height: 0.25rem;
	background: linear-gradient(
		to right,
		#c79a74 0%,
		#c79a74 var(--svcgift-fill),
		rgba(255, 255, 255, 0.1) var(--svcgift-fill),
		rgba(255, 255, 255, 0.1) 100%
	);
}

.svcgift-amount-range::-moz-range-track {
	height: 0.25rem;
	background: rgba(255, 255, 255, 0.1);
}

.svcgift-amount-range::-moz-range-progress {
	height: 0.25rem;
	background: #c79a74;
}

/* A fogantyú — négyzetes, mint a téma többi vezérlője, és ujjal is
   kényelmesen megfogható. */
.svcgift-amount-range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 1.125rem;
	height: 1.75rem;
	margin-top: -0.75rem;
	border: 0;
	background: #c79a74;
	box-shadow: 0 2px 8px rgba(199, 154, 116, 0.35);
	transition: background-color 0.15s;
}

.svcgift-amount-range:hover::-webkit-slider-thumb {
	background: #b8895f;
}

.svcgift-amount-range::-moz-range-thumb {
	width: 1.125rem;
	height: 1.75rem;
	border: 0;
	border-radius: 0;
	background: #c79a74;
	box-shadow: 0 2px 8px rgba(199, 154, 116, 0.35);
}

.svcgift-amount-range:focus-visible {
	outline: 2px solid #c79a74;
	outline-offset: 4px;
}

.svcgift-range-ends {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: #6b7280;
}

.svcgift-quick-label {
	margin-top: 0.5rem;
}

/* --- Gyorsválasztó gombok --- */

.svcgift-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.svcgift-quick-btn {
	flex: 1 1 auto;
	min-width: 5rem;
	padding: 0.65rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #222;
	color: #d1d5db;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.svcgift-quick-btn:hover {
	border-color: rgba(199, 154, 116, 0.6);
	color: #fff;
}

.svcgift-quick-btn.is-active {
	border-color: #c79a74;
	background: rgba(199, 154, 116, 0.15);
	color: #fff;
}

/* --- Szöveges mezők --- */

.svcgift-form input[type="text"],
.svcgift-form input[type="email"],
.svcgift-form input[type="date"],
.svcgift-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #222;
	color: #fff;
	font-size: 1rem;
	font-family: inherit;
}

.svcgift-form input::placeholder,
.svcgift-form textarea::placeholder {
	color: #6b7280;
}

.svcgift-form input:focus,
.svcgift-form textarea:focus {
	outline: none;
	border-color: #c79a74;
}

.svcgift-counter {
	margin: 0;
	font-size: 0.75rem;
	color: #6b7280;
}

.svcgift-counter-used.is-full {
	color: #c79a74;
	font-weight: 700;
}

.svcgift-radio {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin-bottom: 0.5rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #222;
	color: #d1d5db;
	font-weight: 400;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.svcgift-radio:hover {
	border-color: rgba(199, 154, 116, 0.6);
	color: #fff;
}

.svcgift-radio input {
	accent-color: #c79a74;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.15rem;
	flex: 0 0 auto;
}

.svcgift-radio strong {
	display: block;
	color: #fff;
	font-weight: 600;
}

.svcgift-radio small {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #9ca3af;
}

.svcgift-recipient[hidden] {
	display: none;
}

.svcgift-recipient {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
	border-left: 2px solid #c79a74;
	background: #111;
}

/* --- Beváltás a kosárban és a pénztárnál --- */

.svcgift-redeem {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.85rem 0;
	font-weight: 400;
}

.svcgift-redeem.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.svcgift-redeem-label {
	font-size: 0.875rem;
	font-weight: 600;
}

.svcgift-redeem-input {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

@media (min-width: 480px) {
	.svcgift-redeem-input {
		flex-direction: row;
	}
}

.svcgift-code {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #222;
	color: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.svcgift-code:focus {
	outline: none;
	border-color: #c79a74;
}

.svcgift-apply {
	background: #c79a74;
	color: #fff;
	border: 0;
	padding: 0.7rem 1.25rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s;
}

.svcgift-apply:hover {
	background: #b8895f;
}

.svcgift-redeem-message {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: #9ca3af;
}

.svcgift-redeem-message.is-error {
	color: #f87171;
}

.svcgift-redeem-message.is-success {
	color: #4ade80;
}

.svcgift-applied {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.svcgift-applied li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: #d1d5db;
}

.svcgift-applied-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.06em;
}

.svcgift-remove {
	padding: 0;
	border: 0;
	background: none;
	color: #9ca3af;
	font-size: 0.8125rem;
	text-decoration: underline;
	cursor: pointer;
}

.svcgift-remove:hover {
	color: #c79a74;
}

.svcgift-balance {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #c79a74;
}

/* --- Egyenleg-lekérdező oldal --- */

.svcgift-lookup {
	max-width: 32rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.svcgift-lookup-result {
	padding: 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-left: 2px solid #c79a74;
	background: #111;
}

.svcgift-lookup-amount {
	margin: 0.25rem 0 0;
	font-size: 1.75rem;
	font-weight: 700;
	color: #c79a74;
}

.svcgift-lookup-error {
	color: #f87171;
}

/* --- Megmaradt egyenleg a köszönő oldalon --- */

.svcgift-remaining {
	max-width: 32rem;
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-left: 2px solid #c79a74;
	background: #111;
}

.svcgift-remaining-title {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #c79a74;
}

.svcgift-remaining-amount {
	margin: 0 0 0.35rem;
	font-size: 1.75rem;
	font-weight: 700;
	color: #fff;
}

.svcgift-remaining-code {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.08em;
	color: #d1d5db;
}

.svcgift-remaining-note {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #9ca3af;
}

/* Értesítés arról, hogy egy elavult utalványkódot levettünk a rendelésről. */
.svcgift-redeem-dropped {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #d9a441;
}