/* ============================================================
   BASTLIK.CZ — Košík, krok 2: výběr dopravy a platby (v3)

   Nahrát do Správce souborů a v Záhlaví načíst ÚPLNĚ POSLEDNÍ,
   za style_feb.css — přepisuje z něj část pravidel pro košík.

   UPRAVUJE POUZE DVA BLOKY:
     #order-shipping-methods   (Zvolte způsob dopravy)
     #order-billing-methods    (Zvolte způsob platby)

   ŽÁDNÉ TEXTY SE NEPŘEPISUJÍ. Jediné, co přibývá, je doba
   doručení u dopravců — přes ::after.

   ------------------------------------------------------------
   ZMĚNY PROTI v1

   1) OTAZNÍK S VYSVĚTLIVKOU
      Sedí v bezejmenném <span> hned za názvem:
        <b class="shipping-billing-name">Bankovním převodem</b>
        <span><span class="show-tooltip question-tooltip">?</span></span>
      Ve sloupcovém flexu si vzal vlastní řádek a s výchozím
      order:0 skočil nad název. Teď je .payment-info řádkový flex
      s wrapem: název a otazník mají order 1 a 2 a drží se vedle
      sebe, ostatní prvky mají flex-basis 100 % a zalomí se pod ně.

   2) NIŽŠÍ ŘÁDKY
      Odsazení dolů z 12 na 7 px, karta z 2/14 na 0/12, mezera
      mezi kartami z 8 na 6 px, menší logo. Řádek je o zhruba
      třetinu nižší.

   3) LOGO MEZI TEXTEM A CENOU
      Padalo pod cenu, protože šablona dává .payment-info pevný
      flex-basis calc(100% - 100px - 7.2em) a součet přetekl.
      Teď je basis auto, logo i cena 0 0 auto a řádek se na
      desktopu nezalamuje.

   4) ZDARMA ZELENĚ
      Pravidlo pro cenu v v1 přebíjelo šablonovou třídu .for-free.
      Ta má teď vlastní, konkrétnější pravidlo.

   5) SVISLE VYCENTROVANÝ OBSAH
      align-items: center na řádku i uvnitř textu, kolečko
      dotažené na svislý střed (šablona ho kotví na .75em odshora).

   ZMĚNY VE v3 — VZDUCH A VĚTŠÍ LOGA
   v2 byla příliš stažená. Řádky i mezery mezi kartami jsou
   zpět vzdušnější, ale řádek se pořád nezalamuje, takže je
   celý seznam níž než v původní verzi. Loga jsou skoro
   dvojnásobná (24 -> 42 px), což je zároveň strop, který
   šablona obrázkům dává.

   Výška řádku je teď řízená logem, ne textem: 42 px logo
   plus 2x14 px odsazení. Text se do toho pohodlně vejde
   i s dobou doručení.
   ------------------------------------------------------------ */

#order-shipping-methods,
#order-billing-methods {
  --bstlck2-navy: #16233a;
  --bstlck2-blue: #3b82f6;
  --bstlck2-line: #e5e7eb;
  --bstlck2-muted: #64748b;

  /* zelená z tvého style_feb.css */
  --bstlck2-green-bg: #e8f5e2;
  --bstlck2-green-line: #94cf79;
  /* tmavší odstín téže zelené — na bílé je čitelný, světlá ne */
  --bstlck2-green-text: #4e8c2f;
}

/* ============================================================
   1) KARTA VOLBY
   ============================================================ */
#order-shipping-methods .radio-wrapper:not(.unselected-option),
#order-billing-methods .radio-wrapper:not(.unselected-option) {
  margin: 0 0 10px;
  padding: 0 18px;
  background-color: #ffffff;
  border: 1px solid var(--bstlck2-line);
  border-radius: 10px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Šablona poslednímu prvku ruší rámeček — vracíme ho */
#order-shipping-methods .radio-wrapper:last-child:not(.unselected-option),
#order-billing-methods .radio-wrapper:last-child:not(.unselected-option) {
  border: 1px solid var(--bstlck2-line);
  margin-bottom: 0;
}

/* Hover jen na desktopu (třídu .desktop dává šablona),
   ať na dotyku nezůstává zelená viset po klepnutí */
.desktop #order-shipping-methods .radio-wrapper:not(.unselected-option):hover,
.desktop #order-billing-methods .radio-wrapper:not(.unselected-option):hover {
  background-color: var(--bstlck2-green-bg);
  border-color: var(--bstlck2-green-line);
  box-shadow: none;
}

/* Vybraná volba */
#order-shipping-methods .radio-wrapper.active.selected-option,
#order-billing-methods .radio-wrapper.active.selected-option {
  background-color: var(--bstlck2-green-bg);
  border-color: var(--bstlck2-green-line);
  box-shadow: 0 0 0 1px var(--bstlck2-green-line);
}

/* ============================================================
   2) ŘÁDEK — text, logo, cena na jedné lince
   ============================================================ */
#order-shipping-methods .radio-wrapper input[type="radio"] + label,
#order-billing-methods .radio-wrapper input[type="radio"] + label {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 32px;
  min-height: 0;
  line-height: 1.35;
}

/* Šablona dává .payment-info pevný flex-basis, kvůli kterému
   cena padala pod logo — přepínáme na pružný */
#order-shipping-methods .payment-info,
#order-billing-methods .payment-info {
  flex: 1 1 auto;
  flex-basis: auto;
  max-width: none;
  min-width: 0;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 9px;
}

/* ---------- název + otazník na jednom řádku ---------- */
#order-shipping-methods .payment-info > .shipping-billing-name,
#order-billing-methods .payment-info > .shipping-billing-name {
  order: 1;
  flex: 0 1 auto;
  padding-right: 0;
  font-size: 15px;
  font-weight: var(--bstl-w-strong, 650);
  line-height: 1.3;
  color: var(--bstlck2-navy);
}
/* bezejmenný <span> s otazníkem — zůstává vedle názvu */
#order-billing-methods .payment-info > span:not([class]),
#order-shipping-methods .payment-info > span:not([class]) {
  order: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
#order-shipping-methods .payment-info .question-tooltip,
#order-billing-methods .payment-info .question-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  font-size: 11px;
  line-height: 1;
}

/* šablona barví název vybrané volby primární barvou — sjednocujeme */
#order-shipping-methods .radio-wrapper input[type="radio"]:checked + label > span b,
#order-billing-methods .radio-wrapper input[type="radio"]:checked + label > span b {
  color: var(--bstlck2-navy);
}

/* ---------- prvky, které se zalomí pod název ---------- */
#order-shipping-methods .payment-info .sublabel,
#order-billing-methods .payment-info .sublabel {
  order: 4;
  flex: 1 0 100%;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--bstlck2-muted);
}
#order-shipping-methods .payment-info .sublabel a {
  font-weight: var(--bstl-w-strong, 650);
  color: var(--bstlck2-blue);
  text-decoration: none;
}
#order-shipping-methods .payment-info .sublabel a:hover {
  color: var(--bstlck2-navy);
  text-decoration: underline;
}
#order-billing-methods .payment-info .not-possible-info {
  order: 5;
  flex: 1 0 100%;
}

/* ============================================================
   3) KOLEČKO — prázdné, když není vybráno, svisle na střed
   ============================================================ */

/* šablona kotví kroužek na .75em odshora; u nižšího řádku
   to sedí lépe na svislý střed */
#order-shipping-methods .radio-wrapper input[type="radio"] + label::before,
#order-billing-methods .radio-wrapper input[type="radio"] + label::before,
#order-shipping-methods .radio-wrapper input[type="radio"] + label::after,
#order-billing-methods .radio-wrapper input[type="radio"] + label::after {
  top: 50%;
  transform: translateY(-50%);
}

/* nevybrané: jen kroužek, uvnitř volno */
#order-shipping-methods .radio-wrapper input[type="radio"]:not(:checked) + label::after,
#order-billing-methods .radio-wrapper input[type="radio"]:not(:checked) + label::after {
  background-color: transparent;
  border-color: transparent;
}
#order-shipping-methods .radio-wrapper input[type="radio"]:not(:checked) + label::before,
#order-billing-methods .radio-wrapper input[type="radio"]:not(:checked) + label::before {
  border-color: #cbd5e1;
  background-color: #ffffff;
}

/* vybrané: navy kroužek s navy tečkou — na zeleném podkladu
   čte líp než zelená na zelené */
#order-shipping-methods .radio-wrapper input[type="radio"]:checked + label::before,
#order-billing-methods .radio-wrapper input[type="radio"]:checked + label::before {
  border-color: var(--bstlck2-navy);
  background-color: #ffffff;
}
#order-shipping-methods .radio-wrapper input[type="radio"]:checked + label::after,
#order-billing-methods .radio-wrapper input[type="radio"]:checked + label::after {
  background-color: var(--bstlck2-navy);
}

/* ============================================================
   4) DOBA DORUČENÍ
   Přibývá jako ::after, obsah stránky se nemění. Rozlišeno
   podle data-code na inputu, takže to přežije i změnu ID metody.

   PŘIDÁVÁŠ DOPRAVCE S JINOU LHŮTOU?
   Dopiš mu pravidlo podle vzoru GLS níž.
   ============================================================ */
#order-shipping-methods .radio-wrapper input[type="radio"] + label .payment-info::after {
  content: "Doručíme za 1–2 pracovní dny";
  order: 3;
  flex: 1 0 100%;
  padding-left: 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 12px 12px;
  font-size: 12px;
  font-weight: var(--bstl-w-medium, 520);
  line-height: 1.35;
  color: var(--bstlck2-muted);
}

/* GLS — delší lhůta */
#order-shipping-methods .radio-wrapper input[type="radio"][data-code="logistics-gls"] + label .payment-info::after {
  content: "Doručíme za 2–3 pracovní dny";
}

/* ============================================================
   5) LOGO A CENA
   ============================================================ */
#order-shipping-methods .payment-logo,
#order-billing-methods .payment-logo {
  order: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  max-width: 120px;
  text-align: right;
}
#order-shipping-methods .payment-logo img,
#order-billing-methods .payment-logo img {
  display: block;
  max-width: 120px;
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
}

#order-shipping-methods .payment-shipping-price,
#order-billing-methods .payment-shipping-price {
  flex: 0 0 auto;
  min-width: 68px;
  text-align: right;
  font-size: 15px;
  font-weight: var(--bstl-w-title, 750);
  color: var(--bstlck2-navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ZDARMA zeleně — vlastní pravidlo, ať ho nepřebije obecná cena */
#order-shipping-methods .payment-shipping-price.for-free,
#order-billing-methods .payment-shipping-price.for-free,
#order-shipping-methods .radio-wrapper.active .payment-shipping-price.for-free,
#order-billing-methods .radio-wrapper.active .payment-shipping-price.for-free {
  color: var(--bstlck2-green-text);
  font-size: 13.5px;
}

/* ============================================================
   6) RESPONZIVITA
   Tablet: užší mezery a logo.
   Mobil:  logo se skryje, text a cena zůstanou na jedné lince —
           zalamovat řádek by výšku zase zvedlo.
   ============================================================ */
@media (max-width: 991px) {
  #order-shipping-methods .radio-wrapper input[type="radio"] + label,
  #order-billing-methods .radio-wrapper input[type="radio"] + label {
    gap: 16px;
  }
  #order-shipping-methods .payment-logo,
  #order-billing-methods .payment-logo {
    max-width: 100px;
  }
  #order-shipping-methods .payment-logo img,
  #order-billing-methods .payment-logo img {
    max-width: 100px;
    max-height: 38px;
  }
}

@media (max-width: 600px) {
  #order-shipping-methods .radio-wrapper:not(.unselected-option),
  #order-billing-methods .radio-wrapper:not(.unselected-option) {
    padding: 0 14px;
  }
  #order-shipping-methods .radio-wrapper input[type="radio"] + label,
  #order-billing-methods .radio-wrapper input[type="radio"] + label {
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 30px;
  }
  #order-shipping-methods .payment-info > .shipping-billing-name,
  #order-billing-methods .payment-info > .shipping-billing-name {
    font-size: 14px;
  }
  #order-shipping-methods .payment-logo,
  #order-billing-methods .payment-logo {
    max-width: 78px;
  }
  #order-shipping-methods .payment-logo img,
  #order-billing-methods .payment-logo img {
    max-width: 78px;
    max-height: 32px;
  }
  #order-shipping-methods .payment-shipping-price,
  #order-billing-methods .payment-shipping-price {
    min-width: 0;
    font-size: 14.5px;
  }
}

@media (max-width: 420px) {
  #order-shipping-methods .payment-logo,
  #order-billing-methods .payment-logo {
    display: none;
  }
  #order-shipping-methods .radio-wrapper input[type="radio"] + label .payment-info::after {
    font-size: 11.5px;
  }
}