/* =====================================================================
   TUTUMUTU – lišta dopravy zdarma
   ---------------------------------------------------------------------
   Každý selektor začína triedou .tm-doprava, takže tento súbor
   nemôže ovplyvniť nič iné na webe. Žiadne !important,
   žiadne selektory na značky (p, td, strong).

   Farby a rozmery si uprav v premenných hneď na začiatku.
   ===================================================================== */

.tm-doprava {
	/* --- rýchle nastavenia ------------------------------------------ */
	--tm-d-pozadie: #f6f4ef;        /* pozadie lišty */
	--tm-d-text: #1a1a1a;           /* farba textu */
	--tm-d-pas: #e4e0d6;            /* nevyplnená časť pásu */
	--tm-d-vypln: #1a1a1a;          /* vyplnená časť pásu */
	--tm-d-hotovo: #2f7a4f;         /* farba, keď je doprava zdarma */
	--tm-d-hotovo-bg: #eef6f1;
	--tm-d-vyska-pasu: 6px;
	--tm-d-radius: 10px;
	--tm-d-velkost-pisma: 0.95rem;

	/* --- samotná lišta ----------------------------------------------- */
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border-radius: var(--tm-d-radius);
	background: var(--tm-d-pozadie);
	color: var(--tm-d-text);
	font-size: var(--tm-d-velkost-pisma);
	line-height: 1.4;
	text-align: left;
}

/* prázdny košík – lišta sa skryje, ale prvok musí ostať kvôli AJAX */
.tm-doprava.tm-doprava--prazdny {
	display: none;
}


/* =====================================================================
   Text
   ===================================================================== */

.tm-doprava .tm-doprava__text {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem;
	box-sizing: border-box;
	margin: 0 0 0.6rem;
	padding: 0;
	color: inherit;
	font-size: 1.2rem;
	line-height: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.tm-doprava .tm-doprava__popis {
	font-weight: 400;
}

.tm-doprava .tm-doprava__suma {
	font-weight: 600;
	white-space: nowrap;
	color: inherit;
}

/* cena od WooCommerce vo vnútri lišty – len farba a zalomenie */
.tm-doprava .tm-doprava__suma .woocommerce-Price-amount,
.tm-doprava .tm-doprava__suma .woocommerce-Price-currencySymbol {
	color: inherit;
	font-size: inherit;
	white-space: nowrap;
}


/* =====================================================================
   Postupový pás
   ===================================================================== */

.tm-doprava .tm-doprava__pas {
	position: relative;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	height: var(--tm-d-vyska-pasu);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--tm-d-pas);
}

.tm-doprava .tm-doprava__vypln {
	display: block;
	height: 100%;
	min-width: 3px;
	margin: 0;
	border-radius: 999px;
	background: var(--tm-d-vypln);
	transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* =====================================================================
   Odkaz „Čo si dokúpiť“
   Zámerne je to text-link, nie tlačidlo – nemá súperiť
   s tlačidlom „Skontrolovať a objednať“.
   ===================================================================== */

.tm-doprava .tm-doprava__odkaz {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.55rem;
	color: inherit;
	font-size: 0.85em;
	line-height: 1.3;
	text-decoration: none;
	text-underline-offset: 3px;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.tm-doprava .tm-doprava__odkaz:hover,
.tm-doprava .tm-doprava__odkaz:focus {
	color: inherit;
	opacity: 1;
}

.tm-doprava .tm-doprava__sipka {
	transition: transform 0.2s ease;
}

.tm-doprava .tm-doprava__odkaz:hover .tm-doprava__sipka {
	transform: translateX(3px);
}


/* =====================================================================
   Stav, keď zákazník na dopravu zdarma dosiahol
   ===================================================================== */

.tm-doprava.tm-doprava--hotovo {
	background: var(--tm-d-hotovo-bg);
	color: var(--tm-d-hotovo);
}

.tm-doprava.tm-doprava--hotovo .tm-doprava__vypln {
	background: var(--tm-d-hotovo);
}

/* fajka nakreslená čistým CSS, netreba obrázok ani ikonu */
.tm-doprava .tm-doprava__fajka {
	position: relative;
	flex: 0 0 auto;
	display: inline-block;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--tm-d-hotovo);
}

.tm-doprava .tm-doprava__fajka::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 6px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}


/* =====================================================================
   Umiestnenie v súhrne košíka
   (trieda je priamo na bunke, nezasahuje do ostatných buniek tabuľky)
   ===================================================================== */

/* Šablóna dáva VŠETKÝM bunkám súhrnu padding 22px 0 22px 30px cez !important:
   .woocommerce-cart .cart-collaterals .cart_totals table td { … !important }

   Túto jednu bunku z toho potrebujeme vyňať, inak je lišta odsadená o 30 px
   sprava. Preto je tu !important a dlhý selektor – musí mať vyššiu váhu
   než pravidlo šablóny. Platí len na .tm-doprava-bunka, nič iné to nechytí. */
.woocommerce-cart .cart-collaterals .cart_totals table td.tm-doprava-bunka,
td.tm-doprava-bunka,
.tm-doprava-bunka {
	padding: 0 0 0.75rem !important;
	border: 0;
	background: none;
	vertical-align: top;
}

/* WooCommerce na mobile vypisuje pred každú bunku popisok z data-title.
   Do našej bunky nepatrí – vypneme ho len tu, inde ostáva. */
.tm-doprava-bunka::before,
.woocommerce table.shop_table_responsive tr td.tm-doprava-bunka::before,
.woocommerce-page table.shop_table_responsive tr td.tm-doprava-bunka::before {
	content: none;
	display: none;
}

.tm-doprava-bunka .tm-doprava {
	margin: 1rem 0;
	padding: 0.75rem 0.9rem;
}


/* =====================================================================
   Mini-košík – trochu menšia lišta
   ===================================================================== */

.widget_shopping_cart .tm-doprava,
.woocommerce-mini-cart .tm-doprava {
	--tm-d-velkost-pisma: 0.9rem;
	margin-bottom: 1rem;
	padding: 0.75rem 0.9rem;
}


/* =====================================================================
   Mobil
   ===================================================================== */

@media (max-width: 767px) {
	.tm-doprava {
		--tm-d-velkost-pisma: 0.9rem;
		padding: 0.8rem 0.9rem;
	}
}


/* =====================================================================
   Ohľad na vypnuté animácie
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	.tm-doprava .tm-doprava__vypln {
		transition: none;
	}
}