/**
 * Mini košík (vysúvací panel Menu Cart v Elementore) v rovnakom vzhľade
 * ako zhrnutie objednávky na pokladni.
 *
 * Elementor si panel štýluje pravidlami na úrovni widgetu, napr.
 * `.elementor-50 .elementor-element.elementor-element-526396e
 * .elementor-menu-cart__product-name a` – sila (0,4,1), pri tlačidlách
 * `… .elementor-menu-cart__footer-buttons a.elementor-button--checkout`
 * (0,5,1). Každé pravidlo tu preto začína `body.tlpb-checkout-design
 * .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main` a pri
 * odkazoch a tlačidlách má aj značku (a.elementor-button) – vyjde vždy o prvok
 * silnejšie, takže vyhrá bez ohľadu na to, či sa súbor Elementora načíta
 * pred nami alebo za nami.
 *
 * Trieda tlpb-checkout-design je na <body> na celom webe, keď je zapnutá
 * úprava vzhľadu pokladne – vypnutím sa vráti pôvodný vzhľad aj tu.
 *
 * @package TulipoBox\CheckoutFlow
 */

/* --- Tlačidlo v hlavičke ------------------------------------------------ */

/*
 * Na mobile tlačidlo košíka ukazuje len ikonu s počtom kusov. Medzisúčet
 * („139,99 €“) vedľa ikony spolu s ďalšími tlačidlami v hlavičke pretlačil
 * hlavičku cez pravý okraj – stránka sa potom dala posúvať do strany
 * a prehliadač ju oddialil. Doteraz ho skrývalo len vlastné CSS hlavičky
 * v Elementore, ktoré sa pri ukladaní šablóny už raz stratilo. Suma je aj
 * tak hneď v otvorenom paneli.
 */
@media ( max-width: 767px ) {
	body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button-text {
		display: none;
	}
}

/* --- Panel -------------------------------------------------------------- */

/*
 * Elementor dáva panelu 30 px po stranách. S kartou vnútri by na mobile
 * prepínaču typu nákupu zostalo málo miesta a orezal by sa – stačí 16 px.
 */
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
	padding: var( --tlpb-space-4 );
	background: var( --tlpb-surface );
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-body );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button {
	margin-bottom: var( --tlpb-space-3 );
}

/*
 * Prihlásenému WordPress kreslí navrchu lištu správcu (32 px, na mobile
 * 46 px) nad všetkým. Panel začína pri hornom okraji okna, takže krížik bol
 * pod lištou a sekcia o predplatnom pod ňou vyzerala, akoby krížik sedel na
 * nej. Obsah panelu preto posunieme o výšku lišty – návštevníci ju nemajú.
 */
body.tlpb-checkout-design.admin-bar .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
	padding-top: calc( var( --tlpb-space-4 ) + var( --wp-admin--admin-bar--height, 32px ) );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button::before,
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button::after {
	background: var( --tlpb-ink );
}

/* --- Sekcia o predplatnom – ako na pokladni ------------------------------- */

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .tlpb-subnote--mini {
	--tlpb-subnote-figure: 52px;

	flex: 0 0 auto;
	gap: var( --tlpb-space-3 );
	margin-bottom: var( --tlpb-space-3 );
	padding: var( --tlpb-space-3 ) var( --tlpb-space-4 );
	border-radius: var( --tlpb-radius-md );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .tlpb-subnote--mini .tlpb-subnote__figure {
	width: var( --tlpb-subnote-figure );
}

/* Štítok opakuje nadpis hneď pod ním – na pokladni ho tiež nemáme. */
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .tlpb-subnote--mini .tlpb-subnote__badge {
	display: none;
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .tlpb-subnote--mini .tlpb-subnote__title {
	margin-bottom: 0;
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-body );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .tlpb-subnote--mini .tlpb-subnote__text {
	font-size: var( --tlpb-text-sm );
	line-height: 1.45;
}

/* --- Karta s položkami a medzisúčtom ----------------------------------- */

/*
 * Položky a medzisúčet sú v HTML dva súrodenci, ale majú vyzerať ako jedna
 * biela karta. Každý má vlastný tieň, a aby sa na styku nezjavil šedý pás,
 * tieň položiek je orezaný dole a tieň medzisúčtu hore (clip-path).
 *
 * Karta je zároveň kontajner pre @container nižšie – rozhoduje šírka karty,
 * nie okna (panel má na mobile aj na počítači rovnakých 350 px).
 */
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__products {
	padding: var( --tlpb-space-1 ) var( --tlpb-space-4 ) 0;
	border-radius: var( --tlpb-radius-md ) var( --tlpb-radius-md ) 0 0;
	background: var( --tlpb-panel );
	box-shadow: var( --tlpb-shadow-card );
	clip-path: inset( -32px -32px 0 -32px );
	container-type: inline-size;
}

/*
 * Výška položiek býva necelé číslo (324,66 px) a na styku dvoch bielych
 * plôch potom presvitne vlasová krémová čiara. Medzisúčet preto prekrýva
 * položky o 1 px.
 */
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__subtotal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 var( --tlpb-space-3 );
	margin: -1px 0 0;
	padding: 1px var( --tlpb-space-4 ) var( --tlpb-space-4 );
	border: 0;
	border-radius: 0 0 var( --tlpb-radius-md ) var( --tlpb-radius-md );
	background: var( --tlpb-panel );
	box-shadow: var( --tlpb-shadow-card );
	clip-path: inset( 0 -32px -32px -32px );
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-h3 );
	font-weight: 800;
	line-height: 1.35;
	text-align: left;
}

/* Čiara nad sumou ako pri „Cena spolu“ – ťahá sa len po šírke obsahu karty. */
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__subtotal::before {
	content: '';
	flex: 1 0 100%;
	margin-bottom: var( --tlpb-space-3 );
	border-top: 1px solid var( --tlpb-line );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__subtotal strong {
	font-weight: inherit;
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__subtotal .woocommerce-Price-amount {
	white-space: nowrap;
}

/* --- Položka ------------------------------------------------------------ */

/*
 * Rovnaká mriežka ako položka v zhrnutí na pokladni: obrázok vľavo, vedľa
 * neho pod sebou názov, suma, prepínač a množstvo. Panel je užší než
 * zhrnutie, preto suma ide pod názov, nie vedľa neho – inak by názvu zostal
 * stĺpec na jedno slovo. Krížik na odstránenie sedí vpravo hore.
 *
 * Bunky názvu a ceny „rozpustíme“ (display: contents), nech ich deti sedia
 * priamo v mriežke. Riadok „meta“ je pre údaje položky, ktoré by do názvu
 * pridal iný plugin (dl.variation) – keď nie sú, má nulovú výšku.
 */
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product {
	grid-template-columns: 56px minmax( 0, 1fr ) auto;
	grid-template-rows: none;
	grid-template-areas:
		"thumb name   remove"
		"thumb price  price"
		"thumb meta   meta"
		"thumb switch switch"
		"thumb qty    qty";
	align-items: start;
	column-gap: var( --tlpb-space-3 );
	row-gap: 0;
	padding: var( --tlpb-space-4 ) 0;
	border-bottom: 1px solid var( --tlpb-line );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product:last-child {
	border-bottom: 0;
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-image {
	grid-area: thumb;
	width: 56px;
	line-height: 0;
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-image img {
	width: 56px;
	height: 56px;
	border-radius: var( --tlpb-radius-sm );
	object-fit: cover;
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-name,
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-price {
	display: contents;
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-name > * {
	grid-area: meta;
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-name > a {
	grid-area: name;
	min-width: 0;
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-body );
	font-size: var( --tlpb-text-body );
	font-weight: 400;
	line-height: 1.35;
	text-decoration: none;
	overflow-wrap: anywhere;
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-name > a:hover {
	color: var( --tlpb-plum );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-price > .quantity {
	grid-area: price;
	margin: 2px 0 0;
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-body );
	font-size: var( --tlpb-text-sm );
	font-weight: 400;
	line-height: 1.45;
}

/* „/ Mesiac“ od SUBS je doplnok k sume – tichší, suma zostáva v plnej farbe. */
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-price .wpsubs-subscription-timing {
	color: var( --tlpb-ink-muted );
}

/*
 * Prepínač aj množstvo môžu byť v bunke názvu (Elementor spúšťa hák
 * woocommerce_after_cart_item_name) alebo v bunke ceny (filter pri
 * množstve) – oblasť mriežky im dáme v oboch prípadoch.
 */
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product .tlpb-cart-switch {
	grid-area: switch;
	justify-self: start;
	max-width: 100%;
	margin: var( --tlpb-space-2 ) 0 0;
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product .tlpb-qty {
	grid-area: qty;
	justify-self: start;
	margin: var( --tlpb-space-2 ) 0 0;
}

/* Prepínač v rovnakej veľkosti ako v zhrnutí na pokladni. */
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product .tlpb-seg__label {
	padding: 0 var( --tlpb-space-3 );
	font-size: var( --tlpb-text-sm );
}

/*
 * Na úzkom telefóne (panel 320 px) by sa prepínač vedľa obrázka nezmestil
 * a orezal by sa. Vtedy ide spolu s množstvom pod obrázok cez celú šírku
 * položky a zmenší sa. Obrázok potom zaberá len riadky s názvom a sumou,
 * takže pri krátkom názve na prepínač nezasahuje.
 */
@container ( max-width: 279px ) {
	body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product {
		grid-template-areas:
			"thumb  name   remove"
			"thumb  price  price"
			"thumb  meta   meta"
			"switch switch switch"
			"qty    qty    qty";
	}

	body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product .tlpb-seg__label {
		padding: 0 var( --tlpb-space-2 );
		font-size: 13px;
	}
}

/* --- Odstránenie položky ------------------------------------------------ */

/*
 * Krížik od Elementora je absolútne v rohu so šedým rámikom. Dáme ho do
 * mriežky a nakreslíme ako tlačidlá množstva: bez rámika, pri prejdení
 * marhuľový kruh. Odkaz vnútri je neviditeľný a zaberá celú plochu – terč
 * ho rozšíri na 44 px, nech sa doň na mobile dá trafiť.
 */
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove {
	position: relative;
	inset: auto;
	grid-area: remove;
	align-self: start;
	width: 28px;
	height: 28px;
	margin: -2px -6px 0 0;
	overflow: visible;
	border: 0;
	border-radius: 50%;
	transition: background-color 0.15s ease;
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove::before,
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove::after {
	left: 30%;
	width: 40%;
	height: 2px;
	border-radius: 1px;
	background: var( --tlpb-ink-muted );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove:hover {
	border: 0;
	background: var( --tlpb-apricot );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove:hover::before,
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove:hover::after {
	background: var( --tlpb-ink );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove > a {
	inset: -8px;
	width: auto;
	height: auto;
	border-radius: 50%;
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove:has( > a:focus-visible ) {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 1px;
}

/* --- Tlačidlá ----------------------------------------------------------- */

/*
 * Pokladňa je hlavná výzva – slivková pilulka ako tlačidlo Objednať.
 * Ide prvá a cez celú šírku; Zobraziť košík (ak je) je pod ňou, tichšie.
 */
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --tlpb-space-2 );
	padding-top: var( --tlpb-space-4 );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: var( --tlpb-space-3 ) var( --tlpb-space-5 );
	border-radius: var( --tlpb-radius-pill );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-lg );
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

/* Elementor dáva tlačidlám vlastnú farbu aj pri prejdení a zameraní (ružovú) – držíme slivkovú. */
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--checkout,
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover,
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--checkout:focus {
	order: -1;
	border: 0;
	background: var( --tlpb-plum );
	color: var( --tlpb-on-accent );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover {
	filter: brightness( 1.08 );
	transform: translateY( -1px );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--view-cart,
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover,
body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--view-cart:focus {
	min-height: 44px;
	border: 1px solid var( --tlpb-field-line );
	background: transparent;
	color: var( --tlpb-ink );
	font-size: var( --tlpb-text-body );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover {
	border-color: var( --tlpb-ink );
}

body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button:focus-visible {
	outline: 3px solid var( --tlpb-ink );
	outline-offset: 3px;
}

/*
 * Keď sa stránka košíka presmerúva na pokladňu, vedú obe tlačidlá na to
 * isté miesto. Zobraziť košík vtedy len mätie – necháme jedno.
 */
body.tlpb-checkout-design.tlpb-no-cart-page .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--view-cart {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button,
	body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__product-remove {
		transition: none;
	}

	body.tlpb-checkout-design .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover {
		transform: none;
	}
}