/**
 * Template 2026-001 — Patička: default (Tmavá patička)
 *
 * NOVÁ VERZE (2026-07) — fixní design podle grafické předlohy.
 * Strukturu markupu viz paticka.latte. Sdílené obaly (#bottom, #in_bottom,
 * pozadí přes celou obrazovku, max-width) zůstávají v sablona.css (sekce I).
 *
 * Barvy z promenne.css:
 *   --tpl-footer-bg #2d2d2d · --tpl-primary #ffd400 (žlutá) · --tpl-cta-bg #46a058 (zelená)
 *
 * POZOR: jádrové pravidlo `div#in_bottom a { color: … }` má vyšší specificitu
 * (obsahuje #id), proto barvy odkazů-tlačítek přebíjíme přes `#in_bottom …`.
 */

/* ---- kontejner ---- */
.tpl-foot {
    max-width: 100%;
}
/* Patička přes CELOU ŠÍŘKU stránky — ignoruje --tpl-max-width (jen postranní padding z #in_bottom).
   !important + vyšší specificita, aby přebilo sablona.css `div#bottom footer { max-width:var(--tpl-max-width) }`. */
div#bottom footer { max-width: none !important; }

/* Skrýt jádrový ComGate banner pod patičkou (#banner_copyright = comgate-pas.webp).
   Platbu už zobrazuje řádek „Platba" v nové patičce, banner by dubloval. */
#banner_copyright {
    display: none !important;
}

/* ==== 1. Horní lišta ==== */
.tpl-foot-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    padding-bottom: 20px;
    margin-bottom: 28px;
}
.tpl-foot-brand {
    color: var(--tpl-footer-heading);
    font-size: 20px;
    font-weight: 700;
}
.tpl-foot-tag {
    color: var(--tpl-footer-text);
    font-size: 14px;
}
.tpl-foot-claim {
    color: var(--tpl-footer-text);
    font-size: 14px;
    font-style: italic;
    opacity: .85;
}

/* ==== 2. Hlavní mřížka: kontakt | sloupce modulů | newsletter ==== */
/* Obsah je DYNAMICKÝ: prostřední buňka drží #paticka_moduly (patičkové moduly
   shopu z adminu) → počet sloupců řeší vnořený grid, ne vnější mřížka. */
.tpl-foot-grid {
    display: grid;
    /* Kontakt | prostřední pásmo modulů | Newsletter (jako původní design podle předlohy). */
    grid-template-columns: minmax(230px, 1.3fr) minmax(0, 2.6fr) minmax(250px, 1.5fr);
    gap: 32px 36px;
    align-items: start;
    padding-bottom: 30px;
}
/* Když shop nemá patičkové moduly → jen kontakt | newsletter. */
.tpl-foot-grid-nomod {
    grid-template-columns: minmax(230px, 1.3fr) minmax(250px, 1.5fr);
}
/* Buňky se smí zúžit pod svůj min-content (jinak nejširší tlačítko drží šířku
   a obsah vytéká na úzkém mobilu). */
.tpl-foot-grid > * {
    min-width: 0;
}

/* --- sloupce odkazů = patičkové moduly shopu (dynamicky) --- */
/* Vnořený grid: rovnoměrné sloupce, které se ZABALÍ do řádků podle počtu modulů.
   POZOR na dřívější `grid-auto-flow: column; grid-auto-columns: minmax(0,1fr)`:
   jádro/klasická patička prosakovala explicitní `grid-template-columns` se 2
   obsahovými sloupci → 1.–2. modul zabral obsahovou šířku a 3.+ moduly spadly do
   implicitních sloupců, které si rozdělily jen zbytek místa → zkolabovaly na ~23px
   a jejich obsah přetekl přes sebe i přes newsletter (bug patička #7, 5 modulů).
   Explicitní `grid-template-columns` níž tu prosakující šablonu přebije; auto-fit
   zabalí N modulů do řádků a drží min. 180px na sloupec (stejný vzor jako mobil). */
/* Napevno přiřazené sloupce → vypnutí kterékoli buňky (--tpl-fel-contact:none atd.)
   NEposune zbytek; prostřední pásmo zůstane uprostřed. */
.tpl-foot-contact { grid-column: 1; }
#paticka_moduly.tpl-foot-cols { grid-column: 2; }
.tpl-foot-news { grid-column: 3; }
#paticka_moduly.tpl-foot-cols {
    /* Moduly + Právní: max 3 sloupce, VYCENTROVANÉ v prostředním pásmu. Data jsou
       auto z modulů (admin → Patička → moduly). 5 modulů se zabalí 3+2. */
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 220px));
    justify-content: center;
    gap: 24px 28px;
}
/* Reset jádrového stylu modulu (float/width/border/padding z klasické patičky). */
#paticka_moduly .paticka_modul {
    float: none;
    width: auto;
    margin: 0;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Nadpis modulu → jako .tpl-foot-h (bílý, tučný). */
#in_bottom #paticka_moduly .ramec_top,
#in_bottom #paticka_moduly .tpl-foot-h,
#in_bottom #paticka_moduly .paticka_nadpis {
    color: var(--tpl-footer-heading);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    padding: 0;
    border: none;
    background: none;
}
/* Tělo modulu → seznam odkazů se STEJNÝM rytmem jako „Právní" sloupec
   (rozestup 10px mezi řádky, jako gap v .tpl-foot-col). */
#paticka_moduly .ramec_body { margin: 0; padding: 0; }
#paticka_moduly .ramec_body p { margin: 0 0 10px; padding: 0; line-height: 1.3; }
#paticka_moduly .ramec_body p:last-child { margin-bottom: 0; }
#paticka_moduly .ramec_body ul { list-style: none; margin: 0; padding: 0; }
#paticka_moduly .ramec_body li { margin: 0 0 10px; }
#paticka_moduly .ramec_body li:last-child { margin-bottom: 0; }
#paticka_moduly .ramec_body img { max-width: 100%; height: auto; }
#in_bottom #paticka_moduly .ramec_body,
#in_bottom #paticka_moduly .ramec_body p,
#in_bottom #paticka_moduly .ramec_body span {
    color: var(--tpl-footer-text);
    font-size: 14px;
}
/* Odkazy z patičkových MODULŮ nesou inline styly z admin editoru
   (color:#ffffff + text-decoration:underline) → vypadaly by jinak než čistý
   „Právní" sloupec. Přebijeme je na STEJNÝ vzhled jako Právní (= jádrové
   `div#in_bottom a`): šedá (--tpl-footer-link), BEZ podtržení, hover žlutá.
   !important je nutný, protože inline style jde přepsat jen přes !important. */
#in_bottom #paticka_moduly a { font-size: 14px; line-height: 1.3; }
#in_bottom #paticka_moduly .ramec_body a,
#in_bottom #paticka_moduly .ramec_body a:link,
#in_bottom #paticka_moduly .ramec_body a:visited,
#in_bottom #paticka_moduly .ramec_body a * {
    color: var(--tpl-footer-link) !important;
    text-decoration: none !important;
}
#in_bottom #paticka_moduly .ramec_body a:hover,
#in_bottom #paticka_moduly .ramec_body a:hover * {
    color: var(--tpl-footer-link-hover) !important;
    text-decoration: none !important;
}

/* --- kontaktní / CTA blok --- */
.tpl-foot-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
/* Menu pod footer e-mailem (Gmail / Outlook / zkopírovat / výchozí klient).
   Světlá kartička nad tmavou patičkou; poloha se nastavuje z JS (position:fixed). */
.tpl-foot-mail-pop {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    min-width: 210px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: var(--tpl-border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.20);
    padding: 6px;
}
.tpl-foot-mail-pop a,
.tpl-foot-mail-pop button {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: 6px;
    font: inherit;
    font-size: 14px;
    line-height: 1.3;
    color: #222;
    text-decoration: none;
    cursor: pointer;
}
.tpl-foot-mail-pop a:hover,
.tpl-foot-mail-pop button:hover {
    background: var(--tpl-surface-2, #f1f1f1);
    color: #222;
}
.tpl-foot-call,
.tpl-foot-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--tpl-border-radius);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background var(--tpl-transition), color var(--tpl-transition), border-color var(--tpl-transition);
}
/* zelené plné tlačítko */
#in_bottom .tpl-foot-call {
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    border: 2px solid var(--tpl-cta-bg);
}
#in_bottom .tpl-foot-call:hover {
    background: var(--tpl-cta-bg-hover);
    border-color: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover);
}
/* obrysové tlačítko whatsapp */
#in_bottom .tpl-foot-wa {
    background: transparent;
    color: var(--tpl-footer-heading);
    border: 2px solid var(--tpl-footer-border);
}
#in_bottom .tpl-foot-wa:hover {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}
.tpl-foot-call i,
.tpl-foot-wa i,
.tpl-foot-call svg,
.tpl-foot-wa svg { font-size: 15px; }

/* e-mailový odkaz — velikost na úrovni tel. čísla v tlačítku (15px/600),
   vycentrovaný na střed vůči tlačítkům (plná šířka + justify center) */
#in_bottom .tpl-foot-mail {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tpl-footer-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    margin-top: 2px;
}
#in_bottom .tpl-foot-mail:hover { color: var(--tpl-footer-link-hover); }

/* --- sloupce odkazů --- */
.tpl-foot-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tpl-foot-h {
    color: var(--tpl-footer-heading);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}
.tpl-foot-col a {
    font-size: 14px;
    line-height: 1.3;
    width: fit-content;
}
/* (barva/hover odkazů dědí z jádrového `#in_bottom a` — šedá → žlutá) */
/* mobil: větší tap plocha odkazů ve sloupcích (byly ~18px vysoké → hůř se trefí).
   #3: cíl ~44px výšky (WCAG 2.5.5) — padding + inline-flex se středem. */
@media (max-width: 768px) {
    .tpl-foot-col { gap: 2px; }
    .tpl-foot-col a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 4px 0;
    }
}

/* --- newsletter box --- */
.tpl-foot-news {
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    border-radius: var(--tpl-border-radius);
    padding: 20px 20px 18px;
    container-type: inline-size; /* form reaguje na šířku boxu (container query níže) */
}
.tpl-foot-news-h {
    font-size: 16px;
    font-weight: 700;
    color: var(--tpl-primary-text);
    margin-bottom: 12px;
    line-height: 1.25;
}
.tpl-foot-news-form {
    display: flex;
    gap: 8px;
}
.tpl-foot-news-form input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 14px;
    border: none;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-card-bg);
    color: var(--tpl-text);
    font-size: 14px;
    font-family: var(--tpl-font);
}
.tpl-foot-news-form input[type="email"]::placeholder { color: #999; }
.tpl-foot-news-form button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: none;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--tpl-font);
    transition: background var(--tpl-transition);
}
.tpl-foot-news-form button:hover { background: var(--tpl-cta-bg-hover); color: var(--tpl-cta-text-hover); }
/* Úzký newsletter box → input přes plnou šířku a tlačítko „Odeslat" pod něj
   (jinak se input zmenšuje tak, že mizí placeholder). Container query reaguje na
   šířku boxu → funguje na mobilu i na úzkém sloupci na desktopu. */
@container (max-width: 300px) {
    .tpl-foot-news-form { flex-direction: column; align-items: stretch; }
    .tpl-foot-news-form button { justify-content: center; }
}
.tpl-foot-news-note {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.62);
}

/* ==== 3. Pruh ikon: social | Platba | Doručení ==== */
.tpl-foot-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    padding: 22px 0;
    border-bottom: 1px solid var(--tpl-footer-border);
}
/* ikony vycentrované pod tlačítky (1. sloupec = Kontakt). Navázáno na .tpl-foot-grid
   (1.3 + 2.6 + 1.5 = 5.4fr, 2× gap 36px = 72px). ≤1100px → width:100%. */
.tpl-foot-social {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: max(230px, calc((100% - 72px) / 5.4 * 1.3));
    max-width: 100%;
}
#in_bottom .tpl-foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--tpl-footer-icon-bg, #3a3a3a);
    color: var(--tpl-footer-icon, #fff);
    font-size: 16px;
    text-decoration: none !important;
    transition: background var(--tpl-transition), color var(--tpl-transition);
}
#in_bottom .tpl-foot-social a:hover {
    background: var(--tpl-primary);
    color: #fff;
}
#in_bottom .tpl-foot-social a svg { width: 17px; height: 17px; }
.tpl-foot-pay,
.tpl-foot-del {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.tpl-foot-items { display: contents; }   /* odznaky (JS-plněné z customizeru) tečou do flexu rodiče */
.tpl-foot-strip-label {
    color: var(--tpl-footer-text);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 2px;
}
.tpl-foot-pay i {
    font-size: 30px;
    color: var(--tpl-footer-icon, #fff);
    opacity: 0.9;
    line-height: 1;
}
.tpl-foot-pay svg {
    height: 30px;
    width: auto;
    color: var(--tpl-footer-icon, #fff);
    opacity: 0.9;
}
.tpl-foot-pay i:hover,
.tpl-foot-pay svg:hover { opacity: 1; }
.tpl-foot-badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--tpl-footer-border);
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-footer-badge-bg, #3a3a3a);
    color: var(--tpl-footer-badge-text, #e6e6e6);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ==== 4. Spodní lišta: copyright + vlajky ==== */
/* copyright nahoře (na střed), pod ním větší vlajky (na střed) */
.tpl-foot-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    text-align: center;
}
/* copyright: přebít jádrový centrovaný blok s border-top */
#in_bottom .tpl-foot-bottom .copyright_podpis {
    display: block;
    text-align: center;
    border-top: 0;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: var(--tpl-footer-text);
}
.tpl-foot-flags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
#in_bottom .tpl-foot-flags a {
    display: inline-flex;
    line-height: 0;
    border-radius: var(--tpl-radius-sm);
    overflow: hidden;
    opacity: 0.85;
    transition: opacity var(--tpl-transition), transform var(--tpl-transition);
}
#in_bottom .tpl-foot-flags a:hover { opacity: 1; transform: translateY(-1px); }
.tpl-foot-flags img {
    display: block;
    width: 42px;
    height: 28px;
    object-fit: cover;
}
/* Jen 1 jazyk = 1 vlajka → přepínač nemá smysl, skryjeme ho.
   Jakmile má shop 2+ jazyky (2+ vlajky), blok se sám zobrazí. */
.tpl-foot-flags:has(> a:only-child) {
    display: none;
}

/* ==== Responsivita ==== */
@media (max-width: 1100px) {
    /* vše na plnou šířku pod sebe: kontakt / moduly / newsletter */
    .tpl-foot-grid,
    .tpl-foot-grid-nomod {
        grid-template-columns: 1fr;
    }
    /* Napevno přiřazené sloupce (.tpl-foot-contact/news + #paticka_moduly mají
       grid-column: 1/2/3) by jinak vytvořily IMPLICITNÍ sloupce i při 1fr templatu
       → stack by nefungoval a footer přetéká vodorovně (bug: patička rozbořená při
       úzké šířce / inspektoru vpravo). Reset na auto = buňky jdou pod sebe. */
    .tpl-foot-contact,
    #paticka_moduly.tpl-foot-cols,
    .tpl-foot-news { grid-column: auto; }
    .tpl-foot-contact { flex-direction: row; flex-wrap: wrap; }
    .tpl-foot-contact > * { flex: 1 1 200px; }
    /* moduly: zabalit do auto-fit sloupců (ne jeden vysoký sloupec) */
    #paticka_moduly.tpl-foot-cols {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    /* kontakt je tu přes celou šířku → ikony taky na plnou šířku a na střed */
    .tpl-foot-social { width: 100%; }
}
@media (max-width: 720px) {
    .tpl-foot-grid,
    .tpl-foot-grid-nomod { gap: 26px 24px; }
    #paticka_moduly.tpl-foot-cols { grid-template-columns: 1fr 1fr; }
    .tpl-foot-contact { flex-direction: column; }
    .tpl-foot-contact > * { flex: 1 1 auto; }
    .tpl-foot-strip { justify-content: flex-start; }
    .tpl-foot-bottom { justify-content: center; text-align: center; }
    #in_bottom .tpl-foot-bottom .copyright_podpis { text-align: center; }
}
@media (max-width: 460px) {
    #paticka_moduly.tpl-foot-cols { grid-template-columns: 1fr; }
    .tpl-foot-head { flex-direction: column; gap: 4px; }
    /* sloupce odkazů vycentrované (sladí se s vycentrovaným e-mailem, ikonami,
       copyrightem a vlajkami — celá mobilní patička pak působí symetricky) */
    .tpl-foot-col,
    #paticka_moduly .paticka_modul { align-items: center; text-align: center; }
    .tpl-foot-col a { width: auto; }
}
@media (max-width: 360px) {
    /* Platba/Doručení se přestávají vejít na řádek → popisek („Platba"/„Doručení")
       na plnou šířku jako nadpis NAD ikony (badges/ikony se zalomí do řádku pod něj),
       místo aby zůstal vedle a zbytek se rozházel. */
    .tpl-foot-strip-label { flex-basis: 100%; margin-right: 0; }
}