/* ==========================================================================
   MOBIL „RAGADÓS" CSELEKVÉS-SÁV  (A2: kosár tovább-gomb, A3: Kosárba gomb)
   --------------------------------------------------------------------------
   Miért külön fájl?  Az `autotire.css` egyetlen, tömörített (4 soros) fájl,
   amihez NINCS forrás (se LESS, se SASS, se build) a repóban. Belenyúlni
   kockázatos és átnézhetetlen, ezért az új szabályok ide kerülnek, és csak
   az a két sablon hivatkozza őket, amelyik használja.

   Miért nincs benne JavaScript?  A meglévő gombokat tesszük fixálttá, NEM
   másolatot teszünk a lap aljára. Így a DOM változatlan marad:
     - a kosár gombja megtartja az `id="cartNextButton"`-t (a szállítási
       mód ellenőrzése és a `beginCheckout()` GTM-esemény rá van kötve),
     - a termékoldal gombja a `<form>`-on BELÜL marad, tehát a beküldés
       ugyanúgy működik (a `position: fixed` csak a megjelenítést mozdítja
       el, a DOM-szülőt nem).
   Ez volt a feltétel: élesítés előtt a rendelési útvonal kódja nem változik.

   Töréspont: 767px — a Bootstrap 3 `xs` határa, ugyanaz, amit az oldal
   többi helyen is használ (`visible-xs`, `hidden-xs`).
   ========================================================================== */

@media (max-width: 767px) {

	/* A lap aljára fixált sáv elfedné az utolsó tartalmi blokkot, ezért
	   helyet hagyunk alatta. Inkább bőven: a fölösleges üres hely a lap
	   alján ártalmatlan, az elfedett gomb viszont nem. A termékoldali sáv
	   több elemet tart (ár + mennyiség + gomb), keskeny kijelzőn két sorba
	   törhet, ezért ott nagyobb a ráhagyás. */
	body.sticky-cta-cart {
		padding-bottom: 80px;
	}

	body.sticky-cta-product {
		padding-bottom: 104px;
	}

	body.sticky-cta-checkout {
		padding-bottom: 72px;
	}

	/* Az „Ugrás az oldal tetejére" sáv az autotire.css-ben 1229px alatt
	   szintén a képernyő aljára, teljes szélességben, 30px magasan kerül
	   (bottom:0, z-index:100). Egymásra csúsznának, ezért föléje emeljük. */
	body.sticky-cta-cart .to-the-top {
		bottom: 70px;
	}

	body.sticky-cta-product .to-the-top {
		bottom: 94px;
	}

	body.sticky-cta-checkout .to-the-top {
		bottom: 62px;
	}

	/* ── Közös sáv-megjelenés ───────────────────────────────────────────
	   z-index: 1001 — a Bootstrap 3 modal (1050) és a háttere (1040) FÖLÉ
	   ne kerüljön: a kosárban pont egy modal figyelmeztet a hiányzó
	   szállítási módra, azt nem takarhatja el a sáv. */

	/* ── A2: kosár — „Tovább a számlázási és szállítási adatokhoz" ────── */
	body.sticky-cta-cart #cartNextButton {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		margin: 0;
		border-radius: 0;
		/* a gomb alap box-shadow-ja lefelé mutató zöld perem — a sávon
		   felfelé vetett árnyék kell helyette, hogy elváljon a tartalomtól */
		box-shadow: 0 -2px 10px rgba(0, 0, 0, .25);
		font-size: 16px;
		line-height: 20px;
		text-align: center;
		/* iPhone: a gesztus-sáv miatt alul még kell egy kis ráhagyás */
		padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px));
	}

	/* ── A3: termékoldal — mennyiség + „Kosárba" ─────────────────────── */
	/*
	 * ⚠️ SZÁNDÉKOSAN NEM `display: flex`.  A doboz mai belső elrendezése
	 *    inline-block elemekre épül (a touchspin `inline-table`, a „db" egy
	 *    szabad szöveg-csomópont), és mobilon MA IS jól néz ki. Flexben
	 *    minden gyerek külön cellává válik — ez a hiba egyszer már megfogott
	 *    a rendeléskövetőnél, ahol a sorok szavanként törtek. Ezért csak a
	 *    doboz HELYÉT mozdítjuk el, a belsejéhez nem nyúlunk.
	 */
	body.sticky-cta-product .quantity-picker-container .quantity-picker {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		margin: 0;
		background-color: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, .25);
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	}

	/* Az ár a sáv elején: a termékoldalon jóval feljebb áll, görgetés után
	   nem látszik — pedig a döntéshez pont ez kell. */
	body.sticky-cta-product .quantity-picker .sticky-cta-price {
		display: inline-block;
		vertical-align: middle;
		margin-right: 12px;
		font-family: "Proxima Nova", Arial, sans-serif;
		font-weight: 800;
		font-size: 19px;
		line-height: 34px;
		color: #b60001;
	}

	/* ⚠️ A `.touchspin` szélességéhez (80px) NE nyúlj: a +/- gombok az
	   autotire.css-ben `margin-left:-40px`-kel csúsznak a mező fölé, tehát
	   a szélesség és a gombok helye össze van kötve. Keskenyebb mezőnél a
	   gombok elcsúsznának. */

	body.sticky-cta-product .quantity-picker .btn-success {
		margin-left: 6px;
		font-size: 15px;
		font-weight: 800;
		padding: 8px 16px;
	}

	/* ── Pénztár: a VÉGÖSSZEG marad a képernyőn, gomb nélkül ─────────── */
	/*
	 * A „Megrendelés elküldése" szándékosan NEM kerül ide — az indoklás a
	 * checkout.html.twig sáv-markupjánál áll. Itt csak kijelzés van, tehát
	 * a flex biztonságos: mindkét gyereket mi írjuk, egy-egy sima span.
	 */
	body.sticky-cta-checkout .sticky-total {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		background-color: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, .25);
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	}

	body.sticky-cta-checkout .sticky-total-label {
		font-family: "Proxima Nova", Arial, sans-serif;
		font-weight: 800;
		font-size: 15px;
		text-transform: uppercase;
		color: #555;
	}

	body.sticky-cta-checkout .sticky-total-value {
		font-family: "Proxima Nova", Arial, sans-serif;
		font-weight: 800;
		font-size: 22px;
		color: #b60001;
	}
}

/* A sáv csak mobilon létezik — asztali nézetben a pénztár változatlan. */
.sticky-total {
	display: none;
}

/* Az ár CSAK a ragadós sávban jelenik meg — a rendes elrendezésben a nagy
   ár a termék adatai között áll, ott nem duplázzuk meg. */
.quantity-picker .sticky-cta-price {
	display: none;
}