/* ST Donate – önálló, témafüggetlen adományozó-kártya.
 * A kritikus gomb-színeket !important védi, hogy a téma/Elementor globális
 * gombstílusa (pl. fehér szöveg) ne tegye olvashatatlanná a felületet. */

.std-box {
	--std-accent: #6b4fbb;
	--std-accent-dark: #573f9c;
	--std-ink: #1f1b2e;
	--std-muted: #6b6580;
	--std-surface: #ffffff;
	--std-subtle: #f4f2fb;
	--std-border: #e0dcec;

	width: 100%;
	max-width: 540px;
	margin: 0 auto;
	padding: 26px;
	background: var(--std-surface);
	border: 1px solid var(--std-border);
	border-radius: 18px;
	box-shadow: 0 12px 40px rgba(31, 20, 61, .09);
	font-family: inherit;
	color: var(--std-ink);
	box-sizing: border-box;
	text-align: left;
}
.std-box *, .std-box *::before, .std-box *::after { box-sizing: border-box; }
.std-box .std-step { margin: 0; }

/* Egylépcsős elrendezés: a két szakasz egymás alatt, finom elválasztóval */
.std-box.std-single .std-step-2 {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--std-border);
}

/* Célválasztó – "mit szeretnél támogatni?" legördülő
   Natív select, hogy mobilon és képernyőolvasóval is hibátlan legyen; a
   megjelenést a köré húzott .std-select adja (úszó címke + saját nyíl). */
.std-target { margin: 0 0 16px; }
.std-box .std-select {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}
.std-select-label {
	position: absolute;
	left: 16px;
	top: 11px;
	font-size: .72rem;
	font-weight: 600;
	line-height: 1;
	color: var(--std-muted);
	pointer-events: none;
	transition: color .12s ease;
}
.std-box .std-target-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	margin: 0;
	padding: 25px 44px 9px 14px !important;
	border: 2px solid var(--std-border) !important;
	border-radius: 12px !important;
	background: var(--std-surface) !important;
	background-image: none !important;
	color: var(--std-ink) !important;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none !important;
	letter-spacing: normal;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer;
	/* Hosszú projektnév se lógjon ki a kártyából. */
	text-overflow: ellipsis;
	transition: border-color .15s, box-shadow .15s;
}
.std-box .std-select:hover .std-target-select { border-color: var(--std-accent) !important; }
.std-box .std-target-select:focus {
	outline: none;
	border-color: var(--std-accent) !important;
	box-shadow: 0 0 0 3px var(--std-accent-soft, rgba(107, 79, 187, .15)) !important;
}
.std-box .std-select:focus-within .std-select-label { color: var(--std-accent); }
.std-box .std-select-arrow {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--std-accent);
	pointer-events: none;
}
/* A select natív nyíl-helye böngészőnként más; a sajátunk mellé nem kell. */
.std-box .std-target-select::-ms-expand { display: none; }

/* Gyűjtési állás a választott célról: hajszálvékony sáv + egy sor szöveg */
.std-target-meta { margin: 9px 2px 0; }
.std-target-meta[hidden] { display: none; }
.std-target-bar {
	height: 5px;
	background: var(--std-subtle);
	border-radius: 999px;
	overflow: hidden;
}
.std-target-bar[hidden] { display: none; }
.std-target-bar-fill {
	height: 100%;
	width: 0;
	background: var(--std-accent);
	border-radius: 999px;
	transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.std-target-note {
	margin: 6px 0 0;
	font-size: .8rem;
	line-height: 1.45;
	color: var(--std-muted);
}

/* Gyakoriság – szegmentált kapcsoló */
.std-frequency {
	display: flex;
	gap: 6px;
	padding: 5px;
	margin: 0 0 16px;
	background: var(--std-subtle);
	border-radius: 12px;
}
.std-box .std-freq {
	/* Tartalomarányos szélesség: a hosszabb (jelvényes) fül többet kap,
	   fix 50-50 osztásnál a felirata nem férne el, és kilógna a kártyából. */
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	appearance: none;
	-webkit-appearance: none;
	padding: 11px 8px;
	border: 0 !important;
	border-radius: 9px !important;
	background: transparent !important;
	color: var(--std-muted) !important;
	font: inherit;
	font-weight: 600;
	font-size: .9rem;
	text-transform: none !important;
	letter-spacing: normal;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s, color .15s, box-shadow .15s;
	box-shadow: none !important;
	text-shadow: none !important;
}
.std-box .std-freq.is-active {
	background: var(--std-surface) !important;
	color: var(--std-accent) !important;
	box-shadow: 0 2px 8px rgba(31, 20, 61, .12) !important;
}

/* Összeggombok */
.std-amounts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 0 0 18px;
}
.std-box .std-amount {
	appearance: none;
	-webkit-appearance: none;
	padding: 14px 8px;
	border: 2px solid var(--std-border) !important;
	border-radius: 12px !important;
	background: var(--std-surface) !important;
	color: var(--std-ink) !important;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	text-transform: none !important;
	letter-spacing: normal;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s, transform .05s;
	box-shadow: none !important;
	text-shadow: none !important;
}
.std-box .std-amount:hover { border-color: var(--std-accent) !important; }
.std-box .std-amount:active { transform: translateY(1px); }
.std-box .std-amount.is-active {
	background: var(--std-accent) !important;
	color: #fff !important;
	border-color: var(--std-accent) !important;
}

/* Egyéb összeg */
.std-amount-custom { grid-column: 1 / -1; margin: 0; }
.std-amount-custom label { display: block; }
.std-amount-custom span {
	display: block;
	font-size: .82rem;
	color: var(--std-muted);
	margin-bottom: 5px;
}
.std-box .std-custom-amount,
.std-box .std-fields input[type="text"],
.std-box .std-fields input[type="email"],
.std-box .std-fields input[type="tel"],
.std-box .std-fields input[type="number"] {
	width: 100%;
	padding: 13px 14px;
	border: 2px solid var(--std-border) !important;
	border-radius: 12px !important;
	background: var(--std-surface) !important;
	color: var(--std-ink) !important;
	font: inherit;
	font-size: 1rem;
	line-height: 1.3;
}
.std-box .std-custom-amount:focus,
.std-box .std-fields input:focus {
	outline: none;
	border-color: var(--std-accent) !important;
	box-shadow: 0 0 0 3px var(--std-accent-soft, rgba(107, 79, 187, .15)) !important;
}

/* CTA gomb */
.std-box .std-cta {
	display: block;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	margin-top: 4px;
	padding: 15px 20px;
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--std-accent) !important;
	color: #fff !important;
	font: inherit;
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: none !important;
	letter-spacing: normal;
	text-shadow: none !important;
	cursor: pointer;
	transition: background .15s, transform .05s;
	box-shadow: 0 6px 18px var(--std-accent-shadow, rgba(107, 79, 187, .28)) !important;
}
.std-box .std-cta:hover { background: var(--std-accent-dark) !important; }
.std-box .std-cta:active { transform: translateY(1px); }
.std-box .std-cta:disabled, .std-box .std-cta.is-loading { opacity: .65; cursor: default; }

/* 2. lépcső – fejléc sor: vissza + lépésjelző */
.std-step2-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.std-box .std-back {
	appearance: none; -webkit-appearance: none;
	display: inline-flex; align-items: center; gap: 4px;
	background: transparent !important; border: 0 !important;
	color: var(--std-muted) !important; font: inherit; font-size: .9rem; font-weight: 600;
	padding: 4px 6px 4px 0; cursor: pointer;
	text-transform: none !important; box-shadow: none !important;
}
.std-box .std-back:hover { color: var(--std-accent) !important; }
.std-box .std-back .std-ico { width: 16px; height: 16px; }
.std-step-indicator { font-size: .8rem; color: var(--std-muted); }

.std-summary { margin: 0 0 16px; }
.std-summary-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.std-summary-project {
	font-size: .8rem; font-weight: 600; color: var(--std-muted);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.std-box .std-edit-amount {
	appearance: none; -webkit-appearance: none;
	background: var(--std-subtle) !important;
	color: var(--std-accent) !important;
	border: 0 !important;
	border-radius: 10px !important;
	padding: 11px 14px;
	font: inherit; font-weight: 600; cursor: pointer; width: 100%;
	text-align: left;
	text-transform: none !important;
}
.std-box .std-edit-amount em { color: var(--std-muted); font-style: normal; font-weight: 400; }

.std-fields { display: flex; flex-direction: column; gap: 11px; margin: 0 0 16px; }

/* Jelölőnégyzetes sorok – igazított checkbox + szöveg */
.std-company-toggle,
.std-consent {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: flex-start;
	font-size: .92rem;
	color: var(--std-ink);
	line-height: 1.5;
	/* A mezők közti 11px gap-en felül extra levegő, hogy a jelölőnégyzetes
	   sorok ne tapadjanak a szomszédos mezőkhöz. */
	margin: 6px 2px;
}
.std-consent { margin-bottom: 2px; }
.std-company-toggle input,
.std-consent input {
	margin: 2px 0 0 !important;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: var(--std-accent);
}
.std-consent span { flex: 1 1 auto; }
.std-consent a { color: var(--std-accent); }

.std-company-fields { display: flex; flex-direction: column; gap: 11px; }

/* Tájékoztató a vállalati kapcsolatfelvételről: itt nem fizetés következik. */
.std-company-note {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0;
	padding: 11px 13px;
	background: var(--std-subtle);
	border-radius: 12px;
	font-size: .86rem;
	line-height: 1.5;
	color: var(--std-ink);
}
.std-company-note .std-ico { width: 15px; height: 15px; margin-top: 2px; flex: 0 0 auto; color: var(--std-accent); }

.std-payment-method {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0;
}
.std-payment-method label {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: .95rem;
	padding: 11px 14px;
	border: 2px solid var(--std-border);
	border-radius: 12px;
	cursor: pointer;
	flex: 1 1 0;
}
.std-payment-method input { accent-color: var(--std-accent); margin: 0; }

/* Úszó címkés mezők: a címke kitöltéskor felcsúszik, így mindig látszik. */
.std-float { position: relative; display: block; margin: 0; }
.std-box .std-float input {
	padding: 21px 14px 7px !important;
}
.std-float > span:not(.std-field-error) {
	position: absolute;
	left: 16px;
	/* Fix érték az input közepéhez igazítva – az 50% a hibaüzenettel együtt
	   megnyúló konténerhez képest számolna, és lecsúszna a címke. */
	top: 26px;
	transform: translateY(-50%);
	color: var(--std-muted);
	font-size: 1rem;
	line-height: 1;
	pointer-events: none;
	transition: top .12s ease, font-size .12s ease, color .12s ease;
}
.std-float input:focus + span,
.std-float input:not(:placeholder-shown) + span {
	top: 13px;
	font-size: .72rem;
	color: var(--std-accent);
}
.std-float input:not(:focus):not(:placeholder-shown) + span { color: var(--std-muted); }

/* Mezőszintű hiba */
.std-float.has-error input { border-color: #c4322d !important; }
.std-float.has-error > span:not(.std-field-error) { color: #c4322d; }
.std-float > .std-field-error { position: static; }
.std-field-error { display: block; margin: 5px 2px 0; font-size: .82rem; color: #c4322d; }

/* Gyakoriság jelvény: a havi opció kiemelése */
.std-freq-badge {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: .03em;
	background: var(--std-accent);
	color: #fff;
	opacity: .9;
}
.std-box .std-freq.is-active .std-freq-badge { opacity: 1; }

/* Bizalomsor a gomb alatt */
.std-trust {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 12px 2px 0;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--std-muted);
}
.std-trust .std-ico { width: 14px; height: 14px; margin-top: 2px; color: var(--std-muted); }

/* Honeypot + üzenet */
.std-hp { position: absolute !important; left: -9999px !important; width: 0; height: 0; overflow: hidden; }
.std-message { padding: 11px 14px; border-radius: 10px; margin: 12px 0; font-size: .92rem; background: #eaf6ee; color: #1f6b39; }
.std-message.is-error { background: #fbeaea; color: #99231f; }

/* Számláló */
.std-counter { max-width: 540px; margin: 0 auto; font-family: inherit; }
.std-counter-bar { height: 12px; background: var(--std-subtle, #eceaf6); border-radius: 999px; overflow: hidden; }
.std-counter-bar-fill { height: 100%; width: 0; background: var(--std-accent, #6b4fbb); border-radius: 999px; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.std-counter-stats { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-size: .95rem; color: #6b6580; }
.std-counter-stats strong { color: #1f1b2e; font-size: 1.15rem; }

/* Ikonok + finomítások */
.std-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.std-box .std-freq,
.std-box .std-cta,
.std-box .std-amount-other { display: flex; align-items: center; justify-content: center; gap: 8px; }
.std-box .std-cta .std-ico { width: 19px; height: 19px; }
.std-box .std-freq { gap: 6px; }
.std-box .std-freq .std-ico { width: 16px; height: 16px; opacity: .85; }

/* "Egyéb" – normál gomb a 4 oszlopos sorban (kompakt, ikon + felirat) */
.std-box .std-amount-other { gap: 5px; padding: 14px 6px; }
.std-box .std-amount-other .std-ico { width: 15px; height: 15px; }
.std-box .std-amount-other span { font-size: .95rem; }

/* Szám-mező fel/le nyilak elrejtése */
.std-box .std-custom-amount { -moz-appearance: textfield; appearance: textfield; }
.std-box .std-custom-amount::-webkit-outer-spin-button,
.std-box .std-custom-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Egyéb összeg – csak "Egyéb" gombra jelenik meg */
.std-amount-custom { grid-column: auto; margin: -4px 0 16px; }
.std-amount-custom[hidden] { display: none; }

/* Összegzés / módosítás sor a 2. lépcsőben */
.std-box .std-edit-amount { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.std-summary-text { font-weight: 700; color: var(--std-accent); }
.std-edit-label { display: inline-flex; align-items: center; gap: 5px; color: var(--std-muted); font-weight: 500; font-size: .85rem; }
.std-edit-label .std-ico { width: 15px; height: 15px; }

/* Fizetési mód – ikon + kijelölés */
.std-payment-method label .std-ico { color: var(--std-muted); }
.std-payment-method label:has(input:checked) { border-color: var(--std-accent); background: var(--std-subtle); }
.std-payment-method label:has(input:checked) .std-ico { color: var(--std-accent); }

/* Köszönő oldal – önálló, témafüggetlen kártya */
.std-thankyou {
	--std-accent: #6b4fbb;
	--std-accent-dark: #573f9c;
	--std-ink: #1f1b2e;
	--std-muted: #6b6580;
	--std-subtle: #f4f2fb;
	--std-border: #e0dcec;
	max-width: 560px;
	margin: 0 auto;
	padding: 44px 30px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--std-border);
	border-radius: 20px;
	box-shadow: 0 14px 46px rgba(31, 20, 61, .10);
	font-family: inherit;
	color: var(--std-ink);
	box-sizing: border-box;
}
.std-thankyou * { box-sizing: border-box; }
.std-ty-icon { width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.std-ty-success .std-ty-icon { background: #e6f4ec; color: #2f8f5b; }
.std-ty-cancel .std-ty-icon { background: var(--std-subtle); color: var(--std-accent); }
.std-ty-title { font-size: 1.7rem; font-weight: 800; line-height: 1.15; margin: 0 0 6px; color: var(--std-ink); }
.std-ty-amount { margin: 0 0 14px; color: var(--std-muted); font-size: 1.02rem; }
.std-ty-amount strong { color: var(--std-accent); font-size: 1.3rem; }
.std-ty-lead { color: var(--std-muted); font-size: 1.02rem; line-height: 1.6; margin: 0 auto 24px; max-width: 46ch; }
.std-ty-lead strong { color: var(--std-ink); }
.std-ty-details { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--std-border); border-radius: 14px; margin: 0 0 18px; overflow: hidden; }
.std-ty-detail { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 18px; margin: 0; }
.std-ty-detail + .std-ty-detail { border-top: 1px solid var(--std-border); }
.std-ty-detail dt { color: var(--std-muted); font-size: .88rem; margin: 0; flex: 0 0 auto; }
.std-ty-detail dd { color: var(--std-ink); font-weight: 700; font-size: 1rem; margin: 0; text-align: right; word-break: break-word; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
/* Erős reset, mert a téma/Elementor globális gombstílusa (háttér, nagybetű,
   méret) különben felülírná az apró másolás gombot. */
.std-thankyou .std-ty-copy {
	display: inline-flex !important; width: auto !important; min-height: 0 !important;
	align-items: center; gap: 5px; margin: 0 !important; padding: 4px 10px !important;
	border: 1px solid var(--std-border) !important; border-radius: 8px !important;
	background: transparent !important; color: var(--std-accent) !important;
	font-family: inherit !important; font-size: .8rem !important; font-weight: 700 !important;
	line-height: 1.2 !important; text-transform: none !important; letter-spacing: normal !important;
	box-shadow: none !important; cursor: pointer;
}
.std-thankyou .std-ty-copy:hover { border-color: var(--std-accent) !important; background: var(--std-subtle) !important; color: var(--std-accent) !important; }
.std-thankyou .std-ty-copy.is-copied,
.std-thankyou .std-ty-copy.is-copied:hover { background: #e6f4ec !important; border-color: #2f8f5b !important; color: #2f8f5b !important; }
.std-thankyou .std-ty-copy svg { width: 14px; height: 14px; flex: 0 0 auto; }
.std-ty-steps { display: flex; flex-direction: column; gap: 12px; text-align: left; background: var(--std-subtle); border-radius: 14px; padding: 16px 18px; margin: 0 0 26px; }
.std-ty-step { display: flex; gap: 12px; align-items: flex-start; color: var(--std-ink); font-size: .95rem; line-height: 1.45; }
.std-ty-step svg { color: var(--std-accent); flex: 0 0 auto; margin-top: 1px; }
.std-ty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.std-ty-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 13px 22px; border-radius: 12px; font-weight: 700; font-size: 1rem;
	text-decoration: none !important; cursor: pointer; border: 2px solid transparent;
}
.std-ty-btn-primary { background: var(--std-accent) !important; color: #fff !important; box-shadow: 0 6px 18px var(--std-accent-shadow, rgba(107, 79, 187, .28)); }
.std-ty-btn-primary:hover { background: var(--std-accent-dark) !important; }
.std-ty-btn-ghost { background: transparent !important; color: var(--std-accent) !important; border-color: var(--std-border); }
.std-ty-btn-ghost:hover { border-color: var(--std-accent); }

/* Billentyűzetes fókusz: jól látható gyűrű minden interaktív elemen */
.std-box button:focus-visible,
.std-box input:focus-visible,
.std-box summary:focus-visible,
.std-box a:focus-visible {
	outline: 2px solid var(--std-accent) !important;
	outline-offset: 2px;
}

/* Mozgásérzékenység: minden animáció kikapcsolva, ha a rendszer kéri */
@media (prefers-reduced-motion: reduce) {
	.std-box *, .std-box *::before, .std-box *::after,
	.std-counter-bar-fill, .std-thankyou * {
		transition: none !important;
		animation: none !important;
	}
}

/* Mobil: az Elementor az asztalra beállított %-os szekció-/oszlop-/konténer-
   szélességet nem állítja vissza automatikusan 100%-ra, ezért a doboz egy
   keskeny sávba szorulva eltörpül. Itt a dobozt (és a számlálót) tartalmazó
   Elementor-elem lánc mobilon teljes szélességet kap. */
@media (max-width: 767px) {
	.elementor-element:has(.std-box),
	.elementor-element:has(.std-counter),
	.elementor-widget-st_donation_box,
	.elementor-widget-st_donation_counter {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Szűk nézetben a fülek egymás alá kerülnek, mielőtt kilógnának */
@media (max-width: 560px) {
	.std-frequency { flex-direction: column; }
	.std-box .std-freq { white-space: normal; }
}

/* Reszponzív: szűk kártyán 2 oszlop, hogy a "10.000 Ft" is elférjen */
@media (max-width: 480px) {
	.std-box { padding: 20px; }
	.std-amounts { grid-template-columns: repeat(2, 1fr); }
	.std-payment-method label { flex: 1 1 100%; }
	.std-thankyou { padding: 32px 18px; }
	.std-ty-actions .std-ty-btn { flex: 1 1 100%; }
	.std-ty-detail { flex-direction: column; align-items: flex-start; gap: 2px; }
	.std-ty-detail dd { text-align: left; }
}

/* A hidden attribútum mindig rejtsen: a saját display: flex/grid szabályaink
   (pl. cégadatok blokk, gyakoriság-fülek, fizetési mód sor) különben
   felülírnák a böngésző [hidden] szabályát, és a rejtett rész látszana. */
.std-box [hidden] { display: none !important; }