/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

.idezetdesign
{
	background-color: #9B1B30;
}

.h5p-press-to-go
{
background-color: #751f3d;
}

/* === Footer (Elementor icon-list) link/email: hoverre is olvasható maradjon (ne legyen sötét) === */
.elementor-icon-list-item a:hover,
.elementor-icon-list-item a:hover .elementor-icon-list-text {
	color: #ffd27a !important;
}
.elementor-icon-list-item a:hover .elementor-icon-list-icon svg {
	fill: #ffd27a !important;
}

/* === Pénztár / kosár / fiókom háttér: a főoldal reddish gradiense a lapos sötét helyett === */
body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-account,
body.page-id-10858,
body.page-id-10857,
body.page-id-10859 {
	background-color: #2C0B0E !important;
	background-image:
		radial-gradient(at 82% 8%, #9B1B30 0%, rgba(44, 11, 14, 0) 48%),
		radial-gradient(at 12% 95%, #E63946 0%, rgba(44, 11, 14, 0) 42%) !important;
	background-attachment: fixed !important;
	background-repeat: no-repeat !important;
}

/* === Oldal címek (h1.entry-title) – Fiókom + Pénztár + kosár: kisebb betűméret + 600-as vastagság === */
body.woocommerce-account .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-cart .entry-title,
body.page-id-10859 .entry-title {
	font-weight: 600 !important;
	font-size: 36px !important;
}

/* === Címek / Számlázási cím fejlécek (h2/h3): kisebb + vékonyabb === */
.woocommerce-account .woocommerce-Address-title h3,
.woocommerce-account .addresses .woocommerce-Address h3,
.woocommerce-account .woocommerce-MyAccount-content .addresses header.title h3,
.woocommerce-account .woocommerce-MyAccount-content .u-columns h3,
.woocommerce-account .woocommerce-MyAccount-content form h2 {
	font-size: 24px !important;
	font-weight: 400 !important;
}

/* === Fiók-terület űrlapmezők (login, regisztráció, jelszó-igénylés, Fiókadatok, Számlázási cím):
       5px lekerekítés + olvasható (sötét) szöveg a fehér mezőkön === */
.woocommerce-account input.input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account select,
.woocommerce-account textarea {
	border-radius: 5px !important;
	color: #1a1a1a !important;
}
.woocommerce-account .password-input,
.woocommerce-EditAccountForm .password-input {
	border-radius: 5px !important;
}
/* A fiók-űrlap mezők placeholdere is legyen olvasható (sötét) a fehér mezőn */
.woocommerce-account input::placeholder,
.woocommerce-account textarea::placeholder {
	color: #5a5a5a !important;
	opacity: 1 !important;
}

/* === Fiókom értesítések (pl. "Még nem történt rendelés"): kék sáv + világos háttér el, fehér szöveg === */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-Message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
	background-color: transparent !important;
	border-top: 0 !important;
	box-shadow: none !important;
	color: #ffffff !important;
}
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before {
	color: rgba(255, 255, 255, 0.85) !important;
}

/* === Bankkártyás Stripe elem: a fizetési iframe háttere SÖTÉT, ÁTTETSZŐ === */
/* A Customizer egyedi CSS-ében lévő globális "iframe { background: black }" szabályt
   itt felülírjuk – CSAK a fizetési iframe-eken (a videós/H5P iframe-ek érintetlenek).
   Sötét, áttetsző háttér: a fehér szöveg mindenhol olvasható marad (akkor is, ha
   alatta világos oldalrész van), de a doboz még mindig áttetsző hatású. */
.wc-block-checkout__payment-method iframe,
.wc-stripe-blocks-payment-method-content iframe,
.wc-stripe-upe-element iframe,
.payment_method_stripe_cc iframe,
.StripeElement iframe,
.__PrivateStripeElement iframe {
	background: rgba(28, 10, 13, 0.72) !important;
}

/* === Pénztár (checkout) – beírt szöveg olvashatósága a fehér mezőkben === */

/* Beírt érték / kiválasztott szöveg legyen jól olvasható (fehér mezőkön) */
.wc-block-checkout input,
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select select,
.wc-block-components-select__select,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select {
	color: #1a1a1a !important;
}

/* Üres (nyugalmi) lebegő címke + placeholder a FEHÉR mezőkön: sötét, hogy olvasható legyen */
.wc-block-components-text-input label,
.wc-block-components-text-input .wc-block-components-text-input__label,
.wc-block-checkout input::placeholder,
.wc-block-checkout textarea::placeholder,
.wc-block-components-text-input input::placeholder,
.wc-block-components-text-input textarea::placeholder,
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {
	color: #5a5a5a !important;
	opacity: 1 !important;
}

/* === Termékfotók: 5px lekerekítés === */
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image a,
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product div.images img,
.woocommerce div.product .flex-control-thumbs li img,
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-image img {
	border-radius: 5px !important;
}

/* === Pénztár "Rendelés összesítő" – termékkép 5px lekerekítés === */
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image img,
.wc-block-components-order-summary-item__image > img,
.wc-block-components-order-summary .wc-block-components-order-summary-item img {
	border-radius: 5px !important;
}

/* === Pénztár "Adj egy megjegyzést a rendelésedhez" mező elrejtése (nincs rá szükség) === */
.wp-block-woocommerce-checkout-order-note-block,
.wc-block-checkout__add-note {
	display: none !important;
}

/* === Stripe block: előfizetési feltétel-szöveg és "Fizetési adatok mentése" checkbox szétválasztása === */
.wc-stripe-blocks-mandate {
	margin-bottom: 16px !important;
	line-height: 1.5;
}

.wc-stripe-save-payment-method,
.wc-block-components-payment-methods__save-card-info {
	margin-top: 16px !important;
	clear: both;
}

/* === WooCommerce "Kosárba teszem" gomb az oldal Elementor gombstílusához igazítva === */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce-variation-add-to-cart .single_add_to_cart_button,
.woocommerce a.button.add_to_cart_button,
.woocommerce button.button.alt {
	background-color: transparent !important;
	background-image: linear-gradient(90deg, #2C0B0E 17%, #9B1B30 72%) !important;
	color: #ffffff !important;
	border: 1px solid #ffffff !important;
	border-radius: 7px !important;
	padding: 12px 24px !important;
	font-family: "Be Vietnam Pro", sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1px !important;
	line-height: 1.2em !important;
	text-shadow: none !important;
	transition: filter .2s ease, box-shadow .2s ease !important;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce-variation-add-to-cart .single_add_to_cart_button:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.button.alt:hover {
	background-image: linear-gradient(90deg, #2C0B0E 17%, #9B1B30 72%) !important;
	color: #ffffff !important;
	filter: brightness(1.12) !important;
	box-shadow: 0 0 12px rgba(155, 27, 48, 0.45) !important;
}

/* === Pénztár "Kuponok hozzáadása" – körbefutó fény (animált keret) a TELJES dobozon === */
@property --voa-coupon-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	position: relative;
	border-radius: 8px;
}

/* A körbefutó fény maga: rotáló kúp-gradiens, maszkkal csak a keretre */
.wp-block-woocommerce-checkout-order-summary-coupon-form-block::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	padding: 2px; /* a fény "keret" vastagsága */
	background: conic-gradient(
		from var(--voa-coupon-angle),
		rgba(155, 27, 48, 0) 0deg,
		#9B1B30 40deg,
		#ffd27a 70deg,
		#ffffff 90deg,
		#ffd27a 110deg,
		#9B1B30 140deg,
		rgba(155, 27, 48, 0) 180deg,
		rgba(155, 27, 48, 0) 360deg
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
	animation: voa-coupon-spin 3.5s linear infinite;
}

/* Lágy ragyogás a doboz körül */
.wp-block-woocommerce-checkout-order-summary-coupon-form-block::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	box-shadow: 0 0 16px 1px rgba(255, 210, 122, 0.30);
	pointer-events: none;
	z-index: 1;
}

@keyframes voa-coupon-spin {
	to { --voa-coupon-angle: 360deg; }
}

/* Ha a böngésző nem támogatja a @property-t, legyen legalább statikus arany keret */
@supports not (background: conic-gradient(from var(--voa-coupon-angle), red, blue)) {
	.wp-block-woocommerce-checkout-order-summary-coupon-form-block::before {
		background: linear-gradient(90deg, #9B1B30, #ffd27a, #9B1B30);
		animation: none;
	}
}

/* ===================================================================== */
/* === Fiókom (My Account) – stílusos megjelenés az oldal hangulatában === */
/* ===================================================================== */

/* Navigáció: bullet-ek el, kártya/gomb stílusú menüpontok */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	text-decoration: none !important;
	color: #ffffff !important;
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	padding: 13px 18px;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: linear-gradient(90deg, rgba(44, 11, 14, 0.65) 0%, rgba(155, 27, 48, 0.35) 100%);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: linear-gradient(90deg, #2C0B0E 0%, #9B1B30 95%);
	border-color: rgba(255, 255, 255, 0.55);
	transform: translateX(4px);
	box-shadow: 0 0 16px rgba(155, 27, 48, 0.5);
}

/* Aktív menüpont – kiemelt, élénkebb piros + ragyogás */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: linear-gradient(90deg, #9B1B30 0%, #E63946 100%) !important;
	border-color: #ffffff !important;
	box-shadow: 0 0 18px rgba(230, 57, 70, 0.5);
}

/* Tartalmi rész: finom üveghatású kártya */
.woocommerce-account .woocommerce-MyAccount-content {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	padding: 26px 28px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

/* Tartalmi linkek: arany accent, aláhúzás hoverre */
.woocommerce-account .woocommerce-MyAccount-content a {
	color: #ffd27a !important;
	text-decoration: none !important;
	transition: color .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-content a:hover {
	color: #ffffff !important;
	text-decoration: underline !important;
}

/* "Üdv ..." sor kiemelése */
.woocommerce-account .woocommerce-MyAccount-content p:first-of-type {
	font-size: 16px;
}

/* WooCommerce táblázatok (rendelések, letöltések) – sötét témára hangolva */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	border-color: rgba(255, 255, 255, 0.12) !important;
}
.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce-MyAccount-content table td {
	border-color: rgba(255, 255, 255, 0.12) !important;
}

/* === Fiók-terület gombok: egységes oldal-gombstílus (login, jelszó-igénylés, mentés, stb.) === */
.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-account .woocommerce-Button {
	background-color: transparent !important;
	background-image: linear-gradient(90deg, #2C0B0E 17%, #9B1B30 72%) !important;
	color: #ffd27a !important;
	border: 1px solid #ffffff !important;
	border-radius: 7px !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	letter-spacing: 0.1px !important;
	font-size: 14px !important;
	font-family: "Be Vietnam Pro", sans-serif !important;
}

/* Gombok hoverre fehér szöveg (egységesen a link-gombok viselkedésével) */
.woocommerce-account .button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover,
.woocommerce-account .woocommerce-Button:hover {
	color: #ffffff !important;
}

/* Letiltott (disabled) gomb is olvasható, egységes maradjon (pl. jelszó-erősség előtt a MENTÉS) */
.woocommerce-account .button:disabled,
.woocommerce-account button.button:disabled,
.woocommerce-account button.button[disabled],
.woocommerce-account input.button:disabled,
.woocommerce-account .woocommerce-Button:disabled {
	background-image: linear-gradient(90deg, #2C0B0E 17%, #9B1B30 72%) !important;
	color: rgba(255, 255, 255, 0.85) !important;
	border-color: rgba(255, 255, 255, 0.6) !important;
	opacity: 0.7 !important;
	cursor: not-allowed !important;
}

/* "Módosítások mentése" gomb (Jelszó módosítás űrlap): kicsit lejjebb */
.woocommerce-account .woocommerce-EditAccountForm button.button,
.woocommerce-account form.edit-account button.button,
.woocommerce-account .woocommerce-EditAccountForm button[name="save_account_details"] {
	margin-top: 18px !important;
}

/* ===================================================================== */
/* === WooCommerce "jelszó megjelenítése" (szem) ikon szépítése (SVG) === */
/* ===================================================================== */

.woocommerce form .password-input,
.woocommerce-account .password-input,
.woocommerce-EditAccountForm .password-input {
	position: relative;
	display: block;
}

.woocommerce form .show-password-input,
.woocommerce-account .show-password-input {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	margin: 0;
	cursor: pointer;
	border-radius: 6px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B1B30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
	transition: background-color .2s ease, transform .15s ease;
}

/* a régi (font) glyph elrejtése, hogy ne legyen dupla ikon / "tofu" */
.woocommerce form .show-password-input::after,
.woocommerce-account .show-password-input::after {
	content: none !important;
}

.woocommerce form .show-password-input:hover,
.woocommerce-account .show-password-input:hover {
	background-color: rgba(155, 27, 48, 0.12);
	transform: translateY(-50%) scale(1.08);
}

/* aktív állapot: jelszó látható -> áthúzott szem (élénkpiros) */
.woocommerce form .show-password-input.display-password,
.woocommerce-account .show-password-input.display-password {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E63946' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>");
}


/* === Köszönő oldal (rendelés fogadva) – szekciócímek kisebbre: 26px / 400 ===
   Bank adatok, Rendelés részletei, Kapcsolódó előfizetés, Számlázási cím, További információk.
   Klasszikus és block-os (Order Confirmation) markupot is lefedi, csak ezen az oldalon. */
body.woocommerce-order-received .woocommerce-order h2,
body.woocommerce-order-received .woocommerce-order h3,
body.woocommerce-order-received [class*="wc-block-order-confirmation"] h2,
body.woocommerce-order-received [class*="wc-block-order-confirmation"] h3,
body.woocommerce-order-received h2[class*="wc-block-order-confirmation"],
body.woocommerce-order-received h3[class*="wc-block-order-confirmation"],
body.woocommerce-order-received .wc-bacs-bank-details-heading,
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title {
	font-size: 26px !important;
	font-weight: 400 !important;
}


/* === Fiókom – Előfizetéseim / rendelés nézet: szekciócímek kisebbre, vékonyabbra ===
   Előfizetés részletei, Kapcsolódó rendelések, Számlázási cím, További információk. */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details__title {
	font-size: 24px !important;
	font-weight: 400 !important;
}

/* === Termékoldal – variáció-választó (pl. IDŐSZAK): fehér háttér + sötét szöveg, olvasható lenyíló ===
   Magas specificitású szelektorok, mert az Elementor kit CSS-e a téma után töltődik és felülírta. */
html body table.variations select,
html body form.cart select,
html body select#idoszak {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #1a1a1a !important;
	-webkit-text-fill-color: #1a1a1a !important;
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	border-radius: 5px !important;
	padding: 10px 36px 10px 12px !important;
}

/* A lenyíló lista elemei is sötét szöveggel, fehér háttéren */
html body table.variations select option,
html body form.cart select option {
	background: #ffffff !important;
	color: #1a1a1a !important;
	-webkit-text-fill-color: #1a1a1a !important;
}

/* Kiválasztás után megjelenő variáció-infók (ár, leírás, készlet) a sötét háttéren fehéren */
html body .woocommerce-variation-price,
html body .woocommerce-variation-price .price,
html body .woocommerce-variation-description,
html body .woocommerce-variation-availability {
	color: #ffffff !important;
}

/* "Törlés" (variáció visszaállítás) link olvashatóan */
html body table.variations ~ * .reset_variations,
html body .reset_variations {
	color: #ffd27a !important;
}


/* === Pénztár (block checkout) – validációs hibaüzenetek olvashatóan a sötét háttéren ===
   Pl. kupon hiba: alapból sötétvörös szöveg, ami elveszik a bordó háttéren. */
html body .wc-block-components-validation-error,
html body .wc-block-components-validation-error p {
	color: #ffb4a8 !important;
}
html body .wc-block-components-validation-error svg {
	fill: #ffb4a8 !important;
}


/* === Fiókom / Címek – "Számlázási cím szerkesztése" link balra igazítva, mint a többi szöveg === */
html body .woocommerce-MyAccount-content .woocommerce-Address-title,
html body .woocommerce-MyAccount-content header.title {
	text-align: left !important;
}
html body .woocommerce-MyAccount-content .woocommerce-Address-title a.edit,
html body .woocommerce-MyAccount-content header.title a.edit {
	display: inline-block !important;
	float: none !important;
	margin: 0 !important;
	text-align: left !important;
}


/* === Fiókom – gombok egységesen: 12px / 700, csak az első betű nagybetű === */
html body.woocommerce-account .button,
html body.woocommerce-account button.button,
html body.woocommerce-account input.button,
html body.woocommerce-account a.button,
html body.woocommerce-account .woocommerce-Button {
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: none !important;
}