/* ============================================================
   bazaroveregaly.cz — Sjednocení barev (color unification)
   Systém: MODRÁ = navigace, menu, odkazy | ZELENÁ = akce (tlačítka)
           ČERVENÁ = VÝHRADNĚ sleva | zelený TEXT = "skladem"
   Workflow: ověřit přes audit/preview-and-verify.js, pak vložit do
             Vzhled a obsah → Editor vzhledu → vlastní CSS.

   ZMĚNA 24. 7. 2026 (v2): plná tlačítka přebarvena z modré na zelenou
   z banneru. Modrá zůstává menu a odkazům. Detaily a proč právě takhle
   → PLAN-zelena-tlacitka.md
   Klíčové: zelenou má motiv nativně v --color-secondary, loňská verze
   tohoto souboru ji přebíjela na modrou. Teď ji vracíme motivu zpět
   a jen dorovnáme proměnné — viz sekce 3.
   Pozn.: zelený text "Skladem" zůstává schválně — zelená proto už
   neznamená výhradně "skladem", vědomý ústupek.

   Pozn. ke specificitě/!important:
   - Tlačítka styluje šablona přes dvojí třídu -> selektory .btn.X.
   - "Výprodej" vlajka má admin-inline barvu -> nutné !important.
   - Slevová vlajka má UVNITŘ .price-save (= "–52 %") a .price-standard
     (= původní cena). Ty musí zůstat BÍLÉ (čitelné na červené), proto
     scoping .flag-discount .price-* přebíjí globální pravidlo cenou.
   ============================================================ */

:root {
  --c-brand:        #239ceb;
  --c-brand-cta:    #1577c2;
  --c-brand-cta-dk: #11629f;
  --c-sale:         #d7263d;
  --c-sale-dk:      #b71d31;
  --c-instock:      #2e7d32;
  --c-ink:          #1f1f1f;
  --c-muted:        #767676;
  --c-border:       #dadada;

  /* CTA zelená. Základ NEPÍŠEME natvrdo — bereme ho z proměnné motivu
     (--color-secondary = #74ae4b z administrace), která je na 1/255
     shodná se zelenou z banneru #75ae4b. Když někdo změní barvu v
     Editoru vzhledu, tlačítka ji převezmou. #75ae4b je jen záloha,
     kdyby proměnná motivu jednou zmizela.
     Pozor: --color-secondary používá motiv i jinde (.price-save,
     slider cen, dárkové odkazy), proto ji nepřepisujeme.
     Kontrast s bílým textem: 2,65 / 3,75 / 4,94. Základ je pod WCAG AA
     (14px normální řez chce 4,5) — vědomé rozhodnutí ve prospěch shody
     s bannerem, viz PLAN-zelena-tlacitka.md */
  --c-cta:          var(--color-secondary, #75ae4b);
  --c-cta-hover:    #5f9139;
  --c-cta-active:   #4e7c2f;
}

/* ============================================================
   1) SLEVA = ČERVENÁ
   ============================================================ */
.flag.flag-discount,
.flag.flag-akcia-vypredaj {
  background-color: var(--c-sale) !important;
  color: #fff !important;
}
/* Text UVNITŘ slevové vlajky nechat bílý (na červené čitelný):
   .price-save = "–52 %", .price-standard = původní cena v ribbonu */
.flag-discount .price-save,
.flag-discount .price-standard,
.flag-discount span,
.flag-akcia-vypredaj span {
  color: #fff !important;
}

/* MIMO vlajku: samostatná úspora červeně, přeškrtnutá cena šedě.
   (Specificita 0,1,0 — uvnitř vlajky vyhrává pravidlo výše 0,2,0.) */
.price-save     { color: var(--c-sale) !important; }
.price-standard { color: var(--c-muted) !important; }
/* finální cena ZŮSTÁVÁ tmavá (NE červená) */
.price-final    { color: var(--c-ink); }

/* ============================================================
   2) BRAND modrá: odkazy + druhá modrá + zelené akcenty filtru
   ============================================================ */
a        { color: var(--c-brand); }
a:hover  { color: var(--c-brand-cta-dk); }
.menu-item a               { border-color: var(--c-brand) !important; }
.ui-slider-range,
.ui-slider-handle          { background-color: var(--c-brand) !important; border-color: var(--c-brand) !important; }
.filter-more,
.filter-more--more         { color: var(--c-brand) !important; border-color: var(--c-brand) !important; }

/* ============================================================
   3) PLNÁ (PRIMÁRNÍ) TLAČÍTKA = ZELENÁ — přes proměnné motivu

   ZJIŠTĚNÍ 24. 7. 2026: motiv barví .btn-cart a .btn-conversion sám
   přes var(--color-secondary), která je v adminu nastavená na #74ae4b
   — tedy prakticky na zelenou z banneru. Loňské sjednocení ji přebilo
   na modrou. Správná oprava proto NENÍ další !important přes tlačítka,
   ale vrátit motivu jeho vlastní barvu a dorovnat proměnné.

   Motiv měl --color-secondary-hover STEJNOU jako základ, takže tlačítka
   na hover vůbec nereagovala. To je ta část zadání "nějaký hover".
   Pozn.: jde to nastavit i v administraci (Editor vzhledu → barvy).
   Držíme to v CSS, ať je změna verzovaná spolu se zbytkem souboru;
   kdyby to někdo přepsal v adminu, přebije to tento soubor.
   ============================================================ */
:root {
  /* JEDINÁ potřebná změna pro nákupní tlačítka: dát hoveru jinou barvu
     než základu. Základ (--color-secondary) necháváme na motivu. */
  --color-secondary-hover: var(--c-cta-hover);
}

/* .btn-cart a .btn-conversion (Do košíku, Přidat do košíku, Pokračovat,
   Zobrazit více) NEPŘEBÍJÍME — motiv je obarví sám podle proměnné výše.

   Selektor .btn.btn-lg ze staré verze zmizel jako nadbytečný: všechna
   nákupní tlačítka nesou zároveň .btn-cart nebo .btn-conversion, takže
   .btn-lg nic nepřidával. Navíc ho nese i "Zpět do obchodu"
   (.next-step-back) — ověřeno, že to tlačítko zůstává průhledné i se
   starým pravidlem (motiv si ho drží), ale je zbytečné na něj mířit. */

/* .btn-primary ("Registrovat", "Přihlásit se", "Odeslat komentář") je
   nativně modré (--color-primary = barva menu) -> na zelenou. */
.btn.btn-primary {
  background-color: var(--c-cta) !important;
  border-color:     var(--c-cta) !important;
  color: #fff !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: var(--c-cta-hover) !important;
  border-color:     var(--c-cta-hover) !important;
  color: #fff !important;
}
.btn.btn-primary:active {
  background-color: var(--c-cta-active) !important;
  border-color:     var(--c-cta-active) !important;
}

/* Stisknutý stav pro nativně zelená tlačítka (motiv žádný nemá) */
.btn.btn-cart:active,
.btn.btn-conversion:active {
  background-color: var(--c-cta-active) !important;
  border-color:     var(--c-cta-active) !important;
}

/* Viditelné zaostření pro klávesnici (motiv žádné nemá) */
.btn.btn-cart:focus-visible,
.btn.btn-conversion:focus-visible,
.btn.btn-primary:focus-visible,
.btn.btn-default:focus-visible {
  outline: 2px solid var(--c-cta-active) !important;
  outline-offset: 2px;
}

/* ============================================================
   4) SEKUNDÁRNÍ tlačítko: pryč žlutá/oranžová -> neutrální outline
      Základ zůstává bílý; hover má nově ZELENÝ akcent (dřív modrý),
      ať sedí k zeleným akcím.
   ============================================================ */
.btn.btn-default {
  background-color: #fff !important;
  border-color: var(--c-border) !important;
  color: var(--c-ink) !important;
}
.btn.btn-default:hover, .btn.btn-default:focus {
  background-color: #f6f6f6 !important;
  border-color: var(--c-cta) !important;
  color: var(--c-cta-active) !important;
}

/* .btn-secondary ("Přidat" v košíku) je nativně bílé s modrým rámečkem —
   mezi zelenými tlačítky zůstávalo osamocené. Sjednoceno na zelené.

   VÝJIMKA .login-button ("Přihlásit se do mého účtu" ve 2. kroku
   objednávky): tam by plná zelená soupeřila s "Objednat s povinností
   platby" a odváděla od dokončení nákupu. Zůstává outline, jen se
   modrý akcent mění na zelený, ať na webu nikde nezbyla cizí modrá. */
.btn.btn-secondary {
  background-color: var(--c-cta) !important;
  border-color:     var(--c-cta) !important;
  color: #fff !important;
}
.btn.btn-secondary:hover, .btn.btn-secondary:focus {
  background-color: var(--c-cta-hover) !important;
  border-color:     var(--c-cta-hover) !important;
  color: #fff !important;
}
.btn.btn-secondary:active {
  background-color: var(--c-cta-active) !important;
  border-color:     var(--c-cta-active) !important;
}
.btn.btn-secondary.login-button {
  background-color: #fff !important;
  border-color: var(--c-cta) !important;
  color: var(--c-cta-active) !important;
}
.btn.btn-secondary.login-button:hover,
.btn.btn-secondary.login-button:focus {
  background-color: #f6f6f6 !important;
  border-color: var(--c-cta-hover) !important;
  color: var(--c-cta-active) !important;
}
.btn.btn-secondary:focus-visible {
  outline: 2px solid var(--c-cta-active) !important;
  outline-offset: 2px;
}

/* ============================================================
   5) DOSTUPNOST: jeden instock token (jen text)
   ============================================================ */
.availability-label        { color: var(--c-instock) !important; }

/* ============================================================
   6) VYHLEDÁVÁNÍ = akce -> zelené tlačítko
      Scoped na .search-form, ať se to NEdotkne filtračních .btn-default.
      (.search-form .btn.btn-default = 0,3,0 > generické 0,2,0 výše)
      Rámeček inputu zůstává modrý — je to pole, ne akce.
   ============================================================ */
.search-form .query-input,
.search-form .search-input {
  border-color: var(--c-brand) !important;
}
.search-form .query-input:focus,
.search-form .search-input:focus {
  border-color: var(--c-brand-cta) !important;
  box-shadow: 0 0 0 2px rgba(35, 156, 235, .2);
}
/* tlačítko HLEDAT: byl žlutý .btn-default -> plné zelené */
.search-form .btn.btn-default {
  background-color: var(--c-cta) !important;
  border-color:     var(--c-cta) !important;
  color: #fff !important;
}
.search-form .btn.btn-default:hover,
.search-form .btn.btn-default:focus {
  background-color: var(--c-cta-hover) !important;
  border-color:     var(--c-cta-hover) !important;
  color: #fff !important;
}
.search-form .btn.btn-default:active {
  background-color: var(--c-cta-active) !important;
  border-color:     var(--c-cta-active) !important;
}