/*
 * Kivágott dísz termékoldala: a prototípus csempéi, névmezője és mobil alsó sávja. Csak a KVD-oldalon töltődik be,
 * a gravír termékoldalát nem érinti. Méretek: mockup/forras/Kivágott nevű karácsonyfadísz.dc.html, design system.
 */

/* A WooCommerce mezői működve maradnak, csak a csempék alatt rejtve. */
form.is-csempes {
	position: relative;
}

form.is-csempes table.variations,
form.is-csempes .azugen__mezo--betu > select,
form.is-csempes .azugen__mezo--betu > label {
	position: absolute !important;
	left: 0;
	display: block;
	width: 1px;
	max-width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

form.is-csempes .reset_variations,
form.is-csempes .woocommerce-variation-price,
form.is-csempes .woocommerce-variation-description,
form.is-csempes .quantity {
	display: none !important;
}

.azu-kvd-valasztok {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wp--preset--color--homok, #e3d8c6);
}

.azu-kvd-csoport__cim {
	margin-bottom: 10px;
	color: var(--wp--preset--color--grafit, #2b2826);
	font-size: 14px;
	font-weight: 600;
}

.azu-kvd-csoport__ertek {
	color: var(--wp--preset--color--grafit-70, #57504a);
	font-weight: 400;
}

.azu-kvd-csoport__sor {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.azu-kvd-csoport--szin .azu-kvd-csoport__sor {
	gap: 4px;
}

.azu-kvd-kapszula,
.azu-kvd-szin,
.azu-kvd-betu {
	border-radius: 4px;
	color: var(--wp--preset--color--grafit, #2b2826);
	font-family: inherit;
	cursor: pointer;
	transition: background-color 160ms cubic-bezier(0.2, 0, 0, 1);
}

.azu-kvd-kapszula:focus-visible,
.azu-kvd-szin:focus-visible,
.azu-kvd-betu:focus-visible {
	outline: 2px solid var(--wp--preset--color--fenyo, #1f3a2f);
	outline-offset: 2px;
}

.azu-kvd-kapszula {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--kavics, #8e857c);
	border-radius: 999px;
	background: transparent;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
}

.azu-kvd-csoport--meret .azu-kvd-kapszula {
	padding: 6px 18px;
}

.azu-kvd-kapszula[aria-checked="true"],
.azu-kvd-betu[aria-checked="true"] {
	border: 1.5px solid var(--wp--preset--color--grafit, #2b2826);
	background: var(--wp--preset--color--kartyafeher, #fffdf9);
	font-weight: 600;
}

.azu-kvd-kapszula__ar {
	color: var(--wp--preset--color--grafit-70, #57504a);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}

.azu-kvd-szin {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 76px;
	padding: 6px 2px;
	border: 0;
	background: transparent;
}

.azu-kvd-szin__kor {
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 2px;
	border: 1px solid var(--wp--preset--color--kavics, #8e857c);
	border-radius: 50%;
}

.azu-kvd-szin[aria-checked="true"] .azu-kvd-szin__kor {
	box-shadow: 0 0 0 3px var(--wp--preset--color--tortfeher, #fbf7f0), 0 0 0 5px var(--wp--preset--color--grafit, #2b2826);
}

.azu-kvd-szin__nev {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
}

.azu-kvd-szin[aria-checked="true"] .azu-kvd-szin__nev {
	font-weight: 600;
}

.azu-kvd-szin__megj {
	color: var(--wp--preset--color--grafit-70, #57504a);
	font-size: 12px;
	line-height: 1.3;
}

.azu-kvd-kapszula:hover,
.azu-kvd-szin:hover,
.azu-kvd-betu:hover {
	background-color: var(--wp--preset--color--krem, #f3ece1);
}

.azu-kvd-kapszula[aria-checked="true"]:hover,
.azu-kvd-betu[aria-checked="true"]:hover {
	background-color: var(--wp--preset--color--kartyafeher, #fffdf9);
}

/* Név */
.azugen--kivagott {
	gap: 24px;
}

.azugen--kivagott .azugen__mezo {
	gap: 8px;
}

.azugen__mezo-keret {
	position: relative;
}

.azugen--kivagott input#azu_name {
	padding: 0 64px 0 14px;
	border-color: var(--wp--preset--color--grafit, #2b2826);
}

.azugen__mezo-keret .azugen__szamlalo {
	position: absolute;
	top: 15px;
	right: 14px;
	color: var(--wp--preset--color--grafit-60, #6e665f);
	font-size: 13px;
	pointer-events: none;
}

/* Betűtípus */
.azu-kvd-betu {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	box-sizing: border-box;
	min-width: 120px;
	min-height: 64px;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--kavics, #8e857c);
	background: transparent;
}

.azu-kvd-betu__minta {
	overflow: hidden;
	max-width: 180px;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.azu-kvd-betu__nev {
	color: var(--wp--preset--color--grafit-70, #57504a);
	font-size: 12px;
	font-weight: 500;
}

.azu-kvd-betu[aria-checked="true"] .azu-kvd-betu__nev {
	font-weight: 600;
}

/* Előnézet */
.azu-kvd-elonezet.azugen__elonezet {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	border: 1px solid var(--wp--preset--color--homok, #e3d8c6);
	border-radius: 4px;
	background: var(--wp--preset--color--krem, #f3ece1);
}

.azu-kvd-elonezet.azugen__elonezet iframe {
	position: absolute;
	inset: 1%;
	width: 98%;
	height: 98%;
	aspect-ratio: auto;
	border: 0;
	background: transparent;
}

.azu-kvd-elonezet__jelveny,
.azu-kvd-elonezet__allapot {
	position: absolute;
	left: 12px;
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 2px;
	background: var(--wp--preset--color--kartyafeher, #fffdf9);
	font-size: 12px;
}

.azu-kvd-elonezet__jelveny {
	top: 12px;
	font-weight: 600;
}

.azu-kvd-elonezet__allapot {
	bottom: 12px;
	color: var(--wp--preset--color--grafit-70, #57504a);
}

.azu-kvd-elonezet__allapot[hidden] {
	display: none;
}

/* Kosárgomb: ikon, teljes szélesség */
form.is-csempes .woocommerce-variation-add-to-cart,
form.is-csempes .single_variation_wrap {
	display: block;
	width: 100%;
}

form.is-csempes .azugen {
	margin-bottom: 24px;
}

.azu-konfigurator .single_add_to_cart_button {
	box-sizing: border-box;
	margin: 0;
	padding-block: 0;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	min-height: 48px;
	border-radius: 999px;
}

.azu-konfigurator .single_add_to_cart_button::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.1 6h17.8'/%3E%3Cpath d='M3.4 5.5 2 21h20L20.6 5.5A2 2 0 0 0 18.6 4H5.4a2 2 0 0 0-2 1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.1 6h17.8'/%3E%3Cpath d='M3.4 5.5 2 21h20L20.6 5.5A2 2 0 0 0 18.6 4H5.4a2 2 0 0 0-2 1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Mobil alsó sáv, alsó lap, üzenet */
.azu-kvd-sav,
.azu-kvd-uzenet {
	display: none;
}

.azu-kvd-lap {
	box-sizing: border-box;
	width: min(100%, 560px);
	max-width: 100%;
	max-height: 80vh;
	margin: auto auto 0;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
	border: 0;
	border-top: 1px solid var(--wp--preset--color--homok, #e3d8c6);
	border-radius: 4px 4px 0 0;
	background: var(--wp--preset--color--kartyafeher, #fffdf9);
}

.azu-kvd-lap::backdrop {
	background: rgba(43, 40, 38, 0.6);
}

.azu-kvd-lap[open] {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.azu-kvd-lap__cim {
	margin: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	outline: none;
}

.azu-kvd-lap__kesz {
	min-height: 48px;
	border: 1px solid var(--wp--preset--color--grafit, #2b2826);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--grafit, #2b2826);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

@media (max-width: 767px) {
	.azu-kvd-sav {
		position: fixed;
		z-index: 40;
		inset: auto 0 calc(var(--azu-mobilsav, 65px) + env(safe-area-inset-bottom)) 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
		box-sizing: border-box;
		padding: 8px 16px;
		border-top: 1px solid var(--wp--preset--color--homok, #e3d8c6);
		background: var(--wp--preset--color--kartyafeher, #fffdf9);
		box-shadow: 0 8px 24px rgba(43, 40, 38, 0.12);
	}

	body.azu-billentyuzet .azu-kvd-sav {
		bottom: 0;
	}

	body.azu-billentyuzet .azu-kvd-sav__gyors {
		display: none;
	}

	.azu-kvd-sav__gyors {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}

	.azu-kvd-sav__gyors button {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		min-width: 0;
		min-height: 44px;
		padding: 2px 10px;
		border: 1px solid var(--wp--preset--color--kavics, #8e857c);
		border-radius: 2px;
		background: var(--wp--preset--color--tortfeher, #fbf7f0);
		color: var(--wp--preset--color--grafit, #2b2826);
		font-family: inherit;
		text-align: left;
		cursor: pointer;
	}

	.azu-kvd-sav__cimke {
		color: var(--wp--preset--color--grafit-60, #6e665f);
		font-size: 12px;
		line-height: 1.3;
	}

	.azu-kvd-sav__ertek {
		overflow: hidden;
		max-width: 100%;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.azu-kvd-sav__sor {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.azu-kvd-sav__adat {
		display: flex;
		flex: 1;
		flex-direction: column;
		min-width: 0;
	}

	.azu-kvd-sav__valtozat {
		overflow: hidden;
		color: var(--wp--preset--color--grafit-60, #6e665f);
		font-size: 13px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.azu-kvd-sav__gomb {
		min-height: 48px;
		padding: 0 24px;
		border: 0;
		border-radius: 999px;
		background: var(--wp--preset--color--arany-szoveg, #7a5b26);
		color: var(--wp--preset--color--tortfeher, #fbf7f0);
		font-family: inherit;
		font-size: 15px;
		font-weight: 500;
		cursor: pointer;
	}

	.azu-kvd-sav__gomb:disabled {
		background: #ede6da;
		color: #9c948b;
		cursor: not-allowed;
	}

	.azu-kvd-uzenet:not([hidden]) {
		position: fixed;
		z-index: 45;
		inset: auto 12px calc(190px + env(safe-area-inset-bottom)) 12px;
		display: block;
		padding: 10px 14px;
		border-radius: 4px;
		background: var(--wp--preset--color--grafit, #2b2826);
		color: var(--wp--preset--color--tortfeher, #fbf7f0);
		font-size: 14px;
		line-height: 1.45;
		box-shadow: 0 8px 24px rgba(43, 40, 38, 0.12);
	}
}

/* A WooCommerce üres változatblokkja nem adhat plusz közt a választók és a név közé. */
form.is-csempes .single_variation,
form.is-csempes .woocommerce-variation {
	margin: 0;
	padding: 0;
	min-height: 0;
}

form.is-csempes .single_variation_wrap > *:empty {
	display: none;
}

.azu-kvd-valasztok {
	margin-bottom: 0;
}

.azu-konfigurator .single_add_to_cart_button::before {
	margin-right: 8px;
}