/* Ciper – komponenty, hlavička, mobilné menu, päta.
   Hodnoty podľa mockupov L-Mobil/L-PC-Domov, L-Mobil-Menu (hlavička, päta, menu)
   a B-Mobil/B-Domov (hliníková doska, LCD, klávesa, zvonček). */

.ikona { width: 24px; height: 24px; flex: 0 0 auto; }

/* ---------- Tlačidlá ---------- */
.btn,
body a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--vyska-btn);
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--zelena);
  color: var(--biela);
  font-family: var(--pismo);
  /* biely text na --zelena (3,26:1) iba ako "veľký text" podľa WCAG: min. 19px/800 */
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover,
body a.btn:hover { background: var(--zelena-tmava); color: var(--biela); }
.btn .ikona { width: 18px; height: 18px; }

.btn--sekundarne,
body a.btn--sekundarne {
  background: var(--biela);
  color: var(--tmava);
  border: 2px solid var(--tmava);
}
.btn--sekundarne:hover,
body a.btn--sekundarne:hover { background: var(--podklad); color: var(--tmava); }

.btn--na-tmavom,
body a.btn--na-tmavom {
  background: transparent;
  color: var(--biela);
  border: 2px solid var(--okraj-na-tmavom);
}
.btn--na-tmavom:hover,
body a.btn--na-tmavom:hover { background: transparent; border-color: var(--text-na-tmavom); color: var(--biela); }

.btn--plna-sirka { width: 100%; }

.dve-tlacidla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dve-tlacidla .btn { padding-inline: 10px; }

/* Mobil: bežné tlačidlá menšie (48 px, 17 px). Pri písme pod 19 px nesplní biely text na --zelena
   kontrast 4,5:1, preto primárne tlačidlo dostane --zelena-tmava (4,7:1). Hlavné nákupné výzvy
   (spodná lišta, košík, rýchly náhľad, úvodná výzva) ostávajú výrazné. */
@media (max-width: 899px) {
  :root { --vyska-btn: 48px; }
  .btn,
  body a.btn { padding: 0 20px; font-size: 17px; }
  .btn:not(.btn--sekundarne):not(.btn--na-tmavom),
  body a.btn:not(.btn--sekundarne):not(.btn--na-tmavom) { background: var(--zelena-tmava); }
  .btn:not(.btn--sekundarne):not(.btn--na-tmavom):hover,
  body a.btn:not(.btn--sekundarne):not(.btn--na-tmavom):hover { background: var(--tmava); }
  .dve-tlacidla .btn { padding-inline: 10px; }
  .spodna-lista .btn,
  .woocommerce .kosik-lista a.btn.kosik-lista__btn,
  .rychly-nahlad__pridat.btn,
  .domov-hero__cta .btn:not(.btn--sekundarne):not(.btn--na-tmavom) { font-size: 19px; background: var(--zelena); }
}

/* ---------- Formulárové pole: label nad poľom ---------- */
.pole {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.pole label {
  font-size: 15px;
  font-weight: 700;
}
.pole input:not([type="checkbox"]):not([type="radio"]),
.pole select,
.pole textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 2px solid var(--linka);
  border-radius: var(--radius-pole);
  background: var(--biela);
  color: var(--tmava);
  font-size: 17px;
}
.pole textarea { min-height: 120px; padding: 12px 14px; line-height: 1.5; }
.pole input:focus,
.pole select:focus,
.pole textarea:focus { border-color: var(--zelena-tmava); }
.pole__pomoc { font-size: 14px; color: var(--text2); }

/* ---------- Karta ---------- */
.karta {
  background: var(--biela);
  border: 1px solid var(--linka);
  border-radius: var(--radius-karta);
  padding: 18px;
}
@media (min-width: 900px) {
  .karta { padding: 24px; }
}

/* ---------- Doska (L: svetlá akcentová) ---------- */
.doska {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
  border-radius: 16px;
  background: var(--doska);
  border: 1px solid var(--linka);
}

/* ---------- Doska hliníková (B: panel vrátnika so 4 skrutkami) ----------
   Horné skrutky = ::before/::after, dolné = 2× <span class="doska__skrutka" aria-hidden="true"></span> */
.doska--hlinik {
  position: relative;
  gap: 14px;
  padding: 22px 18px 20px;
  border-radius: 18px;
  background: var(--hlinik);
  border: 2px solid var(--hlinik-okraj);
  box-shadow: 0 18px 36px rgba(38, 42, 43, .18), inset 0 1px 0 var(--doska);
}
.doska--hlinik::before,
.doska--hlinik::after,
.doska__skrutka {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--skrutka);
}
.doska--hlinik::after { left: auto; right: 10px; }
.doska__skrutka { top: auto; bottom: 10px; }
.doska__skrutka + .doska__skrutka { left: auto; right: 10px; }
@media (min-width: 900px) {
  .doska--hlinik { padding: 34px 36px; border-radius: 20px; gap: 22px; box-shadow: 0 30px 60px rgba(38, 42, 43, .22), inset 0 1px 0 var(--doska); }
  .doska--hlinik::before,
  .doska--hlinik::after,
  .doska__skrutka { width: 10px; height: 10px; top: 14px; left: 14px; }
  .doska--hlinik::after { left: auto; right: 14px; }
  .doska__skrutka { top: auto; bottom: 14px; }
  .doska__skrutka + .doska__skrutka { left: auto; right: 14px; }
}

/* ---------- Menovka + zvonček ---------- */
.menovka-riadok {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tmava);
  text-align: left;
  text-decoration: none;
}
body a.menovka-riadok { color: var(--tmava); }
.menovka {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--biela);
  border: 1px solid var(--linka);
}
.doska--hlinik .menovka { border-radius: 6px; border-color: var(--hlinik-okraj); min-height: 56px; padding: 8px 14px; }
.menovka__nazov { font-weight: 700; font-stretch: 112%; font-size: 17px; }
.menovka__popis { display: block; font-size: 13px; color: var(--text2); }

.zvoncek {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--zelena);
  box-shadow: inset 0 -3px 0 var(--zelena-tmava);
  color: var(--biela);
}
.zvoncek .ikona { width: 20px; height: 20px; stroke-width: 2.4; }
.zvoncek--sivy { background: #B4BABD; box-shadow: inset 0 -3px 0 #939A9D; color: var(--tmava); }
.menovka-riadok:hover .zvoncek { background: var(--zelena-tmava); }

/* ---------- LCD displej (iba výsledok/stav) ---------- */
.lcd {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--tmava);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
  font-family: var(--pismo-lcd);
  font-weight: 400;
  font-stretch: normal;
  color: var(--led);
  letter-spacing: .03em;
}
.lcd__riadok { font-size: 20px; line-height: 1.25; }
.lcd__riadok--maly { font-size: 13px; opacity: .8; letter-spacing: 0; }
.lcd--maly {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: none;
}
.lcd--maly .lcd__riadok { font-size: 13px; }
.lcd--led::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 6px var(--led);
}
.lcd--velky .lcd__riadok { font-size: 24px; }

/* ---------- Klávesa (očíslované kroky, iba skutočný postup) ---------- */
.klavesa {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px 18px;
  border-radius: 14px;
  background: var(--klavesa);
  box-shadow: inset 0 -4px 0 var(--klavesa-tien);
  color: var(--biela);
}
.klavesa__cislo { font-weight: 800; font-stretch: 125%; font-size: 30px; line-height: 1.1; }
.klavesa__nazov { font-weight: 700; font-size: 16px; }
.klavesa__popis { font-size: 14px; line-height: 1.45; color: var(--text-na-tmavom); }
.klavesa--zelena { background: var(--zelena-tmava); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); }
.klavesa--zelena .klavesa__popis { color: var(--biela); }

/* ---------- Akordeón (details/summary, riadky s čiarou a šípkou) ---------- */
.akordeon { border-top: 1px solid var(--linka); }
.akordeon details { border-bottom: 1px solid var(--linka); }
.akordeon summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 14px 0;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.akordeon summary::-webkit-details-marker { display: none; }
.akordeon summary::after {
  content: '';
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-left: auto; /* šípka vždy vpravo, aj keď je v summary iba text */
  margin-right: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313853D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 22px no-repeat;
  transition: transform .15s ease;
}
.akordeon summary > :first-child { flex: 1 1 auto; }
.akordeon details[open] > summary { color: var(--zelena-tmava); }
.akordeon details[open] > summary::after { transform: rotate(180deg); }
.akordeon__obsah {
  padding: 0 44px 18px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text2);
}
.akordeon__obsah > :last-child { margin-bottom: 0; }

/* ---------- Spodná lišta (mobil: prilepená dole; PC: v toku) ---------- */
.spodna-lista {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--biela);
  border-top: 1px solid var(--linka-svetla);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, .08);
}
.spodna-lista .btn { flex: 1 1 auto; min-height: 56px; }
.spodna-lista__suma { display: flex; flex-direction: column; }
.spodna-lista__popis { font-size: 13px; color: var(--text2); }
.spodna-lista__hodnota { font-weight: 800; font-stretch: 112%; font-size: 24px; line-height: 1.15; }
body.ma-spodnu-listu { padding-bottom: 100px; }
@media (min-width: 900px) {
  .spodna-lista { position: static; padding: 0; border: 0; box-shadow: none; background: transparent; }
  body.ma-spodnu-listu { padding-bottom: 0; }
}

/* ---------- Logo prepravcu ---------- */
.logo-prepravcu { height: 22px; width: auto; max-width: 60px; object-fit: contain; object-position: left; }
/* balikovo.png je už jednofarebné (tmavé), bez CSS filtra */
.logo-prepravcu--ikona { display: inline-flex; width: 22px; color: var(--zelena-tmava); }
.logo-prepravcu--ikona .ikona { width: 22px; height: 22px; }

/* =====================================================================
   Hlavička (L): biela, tmavé logo, zelená pilulka košíka
   ===================================================================== */
.hlavicka {
  position: relative;
  z-index: 40;
  background: var(--biela);
  border-bottom: 1px solid var(--linka-svetla);
}
.hlavicka__vnutro {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 60px;
  padding: 0 12px 0 6px;
}
.hlavicka__ikona {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tmava);
}
.hlavicka a.hlavicka__ikona { color: var(--tmava); }
.hlavicka__ikona:hover { background: var(--podklad); color: var(--tmava); }
.hlavicka__logo {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 48px;
}
.hlavicka__logo img { display: block; height: 22px; width: auto; }
.hlavicka__nav,
.hlavicka__telefon,
.hlavicka__ucet { display: none; }

/* Odkaz košíka má dotykovú výšku 48 px, viditeľná pilulka 40 px (mobil) / 44 px (PC) */
.hlavicka__kosik {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
}
.hlavicka__kosik-pilulka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  background: var(--zelena-tmava); /* drobný biely text → tmavozelená (4,6:1) */
  color: var(--biela);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.hlavicka__kosik:hover .hlavicka__kosik-pilulka { background: var(--tmava); }
.hlavicka__kosik-pilulka .ikona { width: 18px; height: 18px; }
.hlavicka__kosik-text { /* mobil: vizuálne skryté (.skryte), odkaz si ponechá názov "Košík" */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.kosik-suma, .kosik-suma .amount, .kosik-suma bdi { color: inherit; font-weight: inherit; }

@media (min-width: 900px) {
  .hlavicka__vnutro {
    height: 76px;
    gap: 40px;
    max-width: calc(var(--sirka-obsahu) + 2 * var(--okraj-stranky));
    margin-inline: auto;
    padding: 0 var(--okraj-stranky);
  }
  .hlavicka__menu-tlacidlo { display: none; }
  .hlavicka__logo { flex: 0 0 auto; }
  .hlavicka__logo img { height: 26px; }
  .hlavicka__nav { display: block; flex: 1 1 auto; }
  .hlavicka__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .hlavicka .hlavicka__menu a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    color: var(--text2);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }
  .hlavicka .hlavicka__menu a:hover,
  .hlavicka .hlavicka__menu .current-menu-item > a,
  .hlavicka .hlavicka__menu a[aria-current="page"] { color: var(--tmava); }
  .hlavicka .hlavicka__menu .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--zelena); }
  .hlavicka a.hlavicka__telefon {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    color: var(--tmava);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  .hlavicka a.hlavicka__telefon:hover { color: var(--zelena-tmava); }
  .hlavicka__ucet { display: inline-flex; }
  .hlavicka__kosik-pilulka { height: 44px; padding: 0 18px; gap: 10px; border-radius: 22px; }
  .hlavicka__kosik-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}

/* =====================================================================
   Mobilné menu (L-Mobil-Menu): celoplošné, otvára menu.js
   ===================================================================== */
.mobilne-menu {
  position: fixed;
  inset: 0;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 1000;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--biela);
}
.mobilne-menu[hidden] { display: none; }
.mobilne-menu__hlavicka { border-bottom: 1px solid var(--linka-svetla); }
.mobilne-menu__nav { padding: 8px 16px 0; }
.mobilne-menu__zoznam { margin: 0; padding: 0; list-style: none; }
.mobilne-menu .mobilne-menu__zoznam a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid var(--linka-svetla);
  color: var(--tmava);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}
.mobilne-menu .mobilne-menu__zoznam--hlavne a { font-weight: 800; }
.mobilne-menu .mobilne-menu__zoznam a:hover,
.mobilne-menu .mobilne-menu__zoznam .current-menu-item > a { color: var(--zelena-tmava); }
.mobilne-menu__text { flex: 1 1 auto; }
.mobilne-menu__zoznam .ikona { width: 20px; height: 20px; color: var(--zelena-tmava); stroke-width: 2.2; }
.mobilne-menu__kontakt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 16px;
}
.mobilne-menu__casy { margin: 0; font-size: 14px; color: var(--text2); text-align: center; }
html.menu-otvorene { overflow: hidden; }
@media (min-width: 900px) {
  .mobilne-menu { display: none !important; }
  html.menu-otvorene { overflow: auto; }
}

/* =====================================================================
   Päta (L): tmavá, biele logo, kontakty, časy, 3 menu
   ===================================================================== */
.paticka {
  background: var(--tmava);
  color: var(--text-na-tmavom);
  font-size: 15px;
  padding: 32px 0 24px;
}
.paticka__mriezka {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.paticka__kontakt {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.paticka__logo { display: block; height: 22px; width: 124px; object-fit: contain; object-position: left; }
.paticka__tlacidla { margin: 4px 0 6px; }
.paticka a.paticka__velky-odkaz {
  color: var(--biela);
  font-weight: 700;
  text-decoration: none;
  align-self: flex-start;
}
.paticka a.paticka__velky-odkaz:hover { color: var(--led); }
.paticka__casy { margin: 0; }
.paticka__nadpis {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--text-na-tmavom-drobny);
}
.paticka__menu { margin: 0; padding: 0; list-style: none; }
.paticka .paticka__menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--linka-na-tmavom);
  color: var(--biela);
  text-decoration: none;
}
.paticka .paticka__menu li:last-child a { border-bottom: 0; }
.paticka .paticka__menu a:hover { color: var(--led); }
.paticka__spodok { margin-top: 22px; font-size: 13px; color: var(--text-na-tmavom-drobny); }
.paticka__spodok p { margin: 0; }

@media (min-width: 900px) {
  .paticka { padding: 56px 0 28px; }
  .paticka__mriezka {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
  }
  .paticka__logo { height: 24px; width: 136px; }
  .paticka__tlacidla { display: none; }
  .paticka a.paticka__velky-odkaz { font-size: 17px; }
  .paticka__nadpis { margin-bottom: 10px; font-size: 15px; color: var(--biela); }
  .paticka .paticka__menu { display: flex; flex-direction: column; gap: 10px; }
  .paticka .paticka__menu a { display: inline; min-height: 0; border: 0; color: var(--text-na-tmavom); }
  .paticka .paticka__menu a:hover { color: var(--biela); text-decoration: underline; }
  .paticka__spodok { margin-top: 36px; }
  .paticka__spodok p { border-top: 1px solid var(--linka-na-tmavom); padding-top: 20px; font-size: 14px; }
}

/* Complianz „Spravovať súhlas“ (plávajúce tlačidlo dole) – na mobile nad spodnou lištou, nie cez ňu.
   --spodna-lista-h nastavuje menu.js podľa skutočnej výšky lišty. */
@media (max-width: 899px) {
  body.ma-listu .cmplz-manage-consent { bottom: calc(var(--spodna-lista-h, 90px) - 35px) !important; z-index: 40 !important; }
}