/**
 * NejenHra - hodnoceni v hlavicce a v kosiku
 *
 * Vklada se do Editoru HTML kodu (hlavicka):
 *   <link rel="stylesheet" href="/user/documents/upload/RKupravy/hodnoceni.css?v=4">
 * Pri kazde zmene bumpnout ?v=.
 *
 * POZOR: eshop ma DVE slozky RKupravy. Tenhle soubor patri do te s /upload/.
 *
 * Patri k hodnoceni.js - bloky jsou v obou souborech oznacene stejnym markerem.
 *
 * Barvy jsou odebrane pipetou z predloh v `predlohy/` (badge i kosik),
 * ne odhadnute. Zdroj: predlohy/vzor hodnoceni_*.png a kos_i_k hodnoceni_.png.
 */

:root {
  --nh-pozadi: #372E57;   /* tmava fialova badge */
  --nh-zlata: #EBB63E;    /* hvezdy a pecet rozety */
  --nh-zlata-tmava: #C79232;  /* stuhy rozety */
  --nh-zelena: #96E0AC;   /* procenta */
  --nh-svetla: #D3D1DA;   /* popisek pod procenty */
  --nh-hvezda-rec: #F5B300;   /* hvezdy v recenzi */
  --nh-text-rec: #2F2A46;
  --nh-autor: #6B6588;
}

/* ========================================================================
   1-badge-hodnoceni
   Rozeta + procenta + hvezdy + pocet na tmave fialovem pozadi.
   PC:    v hlavicce vlevo od pole hledani, mezi logem a vyhledavanim.
   Mobil: vlastni radek pod vyhledavanim - tam je hlavicka display:block
          a vedle pole uz neni misto.
   Kosik: stejny badge pres celou sirku praveho sloupce.
   Vlozene jsou oba uzly hlavicky, jeden z nich je vzdy skryty. O tom,
   ktery se ukaze, rozhoduje jen @media, takze po otoceni displeje sedi
   stav sam od sebe.
   ======================================================================== */

.nh-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--nh-pozadi);
  text-decoration: none !important;
  line-height: 1.15;
  white-space: nowrap;
}

/* Dokud se cisla nenactou, badge nezabira misto - at hlavicka nepodskoci. */
.nh-badge:not(.je-nactene) { display: none; }

.nh-badge:hover,
.nh-badge:focus-visible {
  background: #413765;
  text-decoration: none !important;
}

.nh-badge:focus-visible {
  outline: 2px solid var(--nh-zlata);
  outline-offset: 2px;
}

/* ---- rozeta ---- */
.nh-rozeta {
  flex: 0 0 auto;
  display: block;
  width: 36px;
  height: 36px;
}

.nh-rozeta__pecet { fill: var(--nh-zlata); }
.nh-rozeta__stuha { fill: var(--nh-zlata-tmava); }
.nh-rozeta__fajfka { stroke: #fff; }

/* ---- texty ---- */
.nh-badge__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nh-badge__radek {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nh-badge__pct {
  font-size: 18px;
  font-weight: 800;
  color: var(--nh-zelena);
  letter-spacing: -.01em;
}

.nh-badge__hvezdy {
  display: inline-flex;
  gap: 2px;
}

.nh-badge__hvezda {
  display: block;
  width: 14px;
  height: 14px;
  fill: var(--nh-zlata);
}

.nh-badge__pocet {
  font-size: 13px;
  color: var(--nh-svetla);
}

/* ---- PC: v hlavicce vlevo od pole hledani ---- */
.nh-badge--hledani {
  flex: 0 0 auto;
  align-self: center;
  margin-right: 16px;
}

.nh-badge--hlavicka { display: none; }

/* .header-top ma od sablony flex-wrap: wrap a logo, hledani ani ikony se
   samy nezuzi. Po pridani badge uz se ctyri prvky na radek nevejdou
   a .navigation-buttons (prihlaseni, oblibene, kosik) spadnou na druhy
   radek - zmereno na 1440, 1200 i 1024 px, vzdy skoncily na x=23.
   .header-top ma pevnou vysku, takze to neni videt jako vyssi hlavicka,
   ale jako ikony prekryvajici obsah pod ni.
   Nowrap to drzi na jednom radku a misto poskytnou logo a hledani, ktere
   se zuzit umi. min-width: 0 je nutne, jinak zuzeni zablokuje min-width: auto.
   Logo pritom zustava 80x80 px i na 1024 (zmereno sondou 37). */
@media (min-width: 992px) {
  .header-top { flex-wrap: nowrap !important; }
  .site-name { min-width: 0 !important; }
}

/* Na uzsim PC si badge nechava jen rozetu, procenta a hvezdy,
   at poli hledani zbyde sirka. */
@media (min-width: 992px) and (max-width: 1279px) {
  .nh-badge--hledani { padding: 6px 12px; gap: 8px; margin-right: 10px; }
  .nh-badge--hledani .nh-rozeta { width: 30px; height: 30px; }
  .nh-badge--hledani .nh-badge__pocet { display: none; }
}

@media (max-width: 991px) {
  .nh-badge--hledani { display: none !important; }

  /* .header-top je na mobilu display:block, badge tedy dostane vlastni radek */
  .nh-badge--hlavicka.je-nactene {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/* ========================================================================
   2-kosik-hodnoceni
   Pravy sloupec kosiku se sklada shora dolu takto:
     1) hodnoceni  2) souhrn s Pokracovat  3) recenze  4) potrebujete pomoc
   Poradi resi JS presunem uzlu, tenhle blok jen obleka dva nove bloky.
   ======================================================================== */

.nh-badge--kosik {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  padding: 14px 16px;
}

/* ---- blok recenze: bila karta na sedem podkladu, podle predlohy ---- */
.nh-rec-box {
  display: block;
  margin: 24px 0;
  padding: 14px;
  background: #E7E6EB;
  text-decoration: none !important;
}

.nh-rec__karta {
  display: block;
  padding: 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(47, 42, 70, .10);
}

.nh-rec-box:hover .nh-rec__karta,
.nh-rec-box:focus-visible .nh-rec__karta {
  box-shadow: 0 4px 16px rgba(47, 42, 70, .18);
}

.nh-rec-box:focus-visible {
  outline: 2px solid var(--nh-pozadi);
  outline-offset: 2px;
}

.nh-rec__hvezdy {
  margin-bottom: 12px;
}

.nh-rec__hvezdy .nh-badge__hvezda {
  width: 15px;
  height: 15px;
  fill: var(--nh-hvezda-rec);
}

.nh-rec__text {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nh-text-rec);
}

.nh-rec__jmeno {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--nh-autor);
}

.nh-rec__vice {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nh-autor);
  text-decoration: underline;
}

/* ---- "Potrebujete pomoc" ctvrtym blokem i na mobilu ---- */
/* Sablona ho pod 992 px schovava (vyska 0). Zadani ho chce jako ctvrtou
   sekci, takze ho vracime - jinak by mobil skoncil u treti. */
@media (max-width: 991px) {
  .sidebar-in-cart .cart-content.checkout-box-wrapper,
  .sidebar-in-cart .checkout-box-wrapper .contact-box {
    display: block !important;
  }
}