/*  Generated: 2026-10-29 13:12:57 */
/* Phase 99 / VZ — prvek vzhledu „termin-akce" (registr core/app/Model/Vzhled/Registr.php; zadání P. Beneše 21. 10. 2026,
   Z4 a Z8): termín a odpočet do konce akce na kartě produktu (v bloku EXTRA CENA prvku „nakup-s-kodem") a ve slotu karty
   ve výpisu a v karuselech. Šablona helper/ds-akce-termin.latte, odpočet core/js/src/ds-odpocet.js.

   Načítá se jen ve vzhledu s tímto prvkem (VzhledStranky::cssSoubory). Barvy jen z tokenů (--ds-akce-*). Ozdoby motivů
   jsou v ds/motivy/. Do 23. 10. 2026 část ds/components/akcni.css. */

/* ---------- Termín a odpočet akce (Z4 karta produktu, Z8 karta ve výpisu) ---------- */
.ds-akce-termin {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.ds-akce-termin[hidden] {
    display: none;
}

.ds-akce-termin__datum,
.ds-akce-termin__odpocet {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.ds-akce-termin__ikona {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

/* karta produktu — desktop: jeden vínový rámeček se dvěma řádky (návrh cena-1) */
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-akce-termin--detail {
    padding: 12px 14px;
    border: 2px solid var(--ds-akce-termin-border);
    border-radius: var(--ds-radius-sm);
    background-color: var(--ds-akce-termin-bg);
    color: var(--ds-akce-termin-fg);
    font-size: 16px;
    line-height: 22px;
}

:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-akce-termin--detail .ds-akce-termin__odpocet {
    color: var(--ds-akce-odpocet-fg);
    font-size: 17px;
}

/* karta produktu — telefon a tablet: dvě lišty pod sebou, vínová s datem a zlatá s odpočtem (návrh cena-3) */
html.ds-mobile #productDetailRight .ds-akce-termin--detail {
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
}

html.ds-mobile #productDetailRight .ds-akce-termin--detail .ds-akce-termin__datum {
    padding: 10px 12px;
    border: 2px solid var(--ds-akce-termin-border);
    border-radius: var(--ds-radius-sm);
    background-color: var(--ds-akce-termin-bg);
    font-size: 16px;
    line-height: 22px;
}

html.ds-mobile #productDetailRight .ds-akce-termin--detail .ds-akce-termin__odpocet {
    padding: 10px 12px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-akce-odpocet-bar-bg);
    color: var(--ds-akce-odpocet-bar-fg);
    font-size: 18px;
    line-height: 24px;
}

/* karta ve výpisu a v karuselech: slot s termínem stojí tam, kde box s kupónem a VIP box — pod cenou a dostupností
   (listing.css řadí bloky karty přes order; tyhle selektory jsou jeho dvojčata pro nový slot) */
html.ds-desktop.ds-vypis .productListing .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .ds-akce-termin:not([hidden])),
html.ds-desktop .ds-karty .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .ds-akce-termin:not([hidden])),
html.ds-jednotna-karta .productListing .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .ds-akce-termin:not([hidden])),
html.ds-jednotna-karta .ds-karty .centerBoxContentsProducts-in > .product-info--out > .product-info:has(> .ds-akce-termin:not([hidden])) {
    order: 6;
    margin-top: 12px;
}

/* karta ve výpisu a v karuselech — desktop: světle červený rámeček (návrh cena-2) */
.ds-akce-termin--karta {
    text-align: left;
    gap: 2px;
    padding: 8px 10px;
    border: 1.5px solid var(--ds-price-discount);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-akce-karta-bg);
    color: var(--ds-price-discount);
    font-size: 14px;
    line-height: 19px;
}

/* .product-info je řádkový flex (listing.css) a box v něm měl flex: 0 1 auto → smrskl se na šířku textu (na desktopu
   213 z 234,5 px, vlastník 22. 10.); přes celou šířku karty jako box s kupónem a VIP box */
.product-info > .ds-akce-termin--karta {
    flex: 1 1 auto;
}

.ds-akce-termin--karta .ds-akce-termin__ikona {
    width: 18px;
    height: 18px;
}

/* desktop (návrh cena-2): kalendář větší a svisle uprostřed přes oba řádky, odpočet pod datem bez vlastní ikony
   a v normální tučnosti — tučné je jen „Platí do …" */
html.ds-desktop .ds-akce-termin--karta {
    position: relative;
    padding-left: 44px;
}

html.ds-desktop .ds-akce-termin--karta .ds-akce-termin__datum .ds-akce-termin__ikona {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
}

html.ds-desktop .ds-akce-termin--karta .ds-akce-termin__odpocet {
    font-weight: 400;
}

html.ds-desktop .ds-akce-termin--karta .ds-akce-termin__odpocet .ds-akce-termin__ikona {
    display: none;
}

/* telefon a tablet: nahoře datum na světle červené, dole červená lišta s odpočtem (návrh cena-4) */
html.ds-mobile .ds-akce-termin--karta {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

html.ds-mobile .ds-akce-termin--karta .ds-akce-termin__datum {
    padding: 7px 10px;
    font-size: 13px;
    line-height: 17px;
}

html.ds-mobile .ds-akce-termin--karta .ds-akce-termin__odpocet {
    padding: 6px 10px;
    background: var(--ds-price-discount);
    color: var(--ds-akce-fg);
}

/* jen telefon (P. Beneš 22. 10. večer, „Mobil Bibik červený blok EXTRA CENA"; varianta B vlastníka): „Platí do …"
   netučně a bez ikony kalendáře, aby se datum vešlo na jeden řádek a box byl nižší (82 → 65 px při 393–402 px).
   Bez ikony zbývá na text 144 px, „Platí do pondělí 26. 10." potřebuje 141 px; na telefonu 375 px (iPhone mini, SE)
   se pořád zalomí — vlastník to přijal. Tablet (html.ds-tablet) zůstává beze změny. */
html.ds-mobile:not(.ds-tablet) .ds-akce-termin--karta .ds-akce-termin__datum {
    font-weight: 400;
}

html.ds-mobile:not(.ds-tablet) .ds-akce-termin--karta .ds-akce-termin__datum .ds-akce-termin__ikona {
    display: none;
}