/* ==========================================================================
   Fazonetka – vlastní vzhled tlačítka "Otevřít filtr / Zavřít filtr"
   Mění pouze vzhled a text tlačítka, funkce (otevírání/zavírání filtru)
   zůstává 100% beze změny – žádný JavaScript, čisté CSS.
   Otestováno naživo na webu (klik otevírá/zavírá stejně jako doteď).
   ========================================================================== */

/* Základní vzhled tlačítka (zavřený i otevřený stav mají stejný styl) */
.unveil-button[data-unveil="filters"] {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  font-size: 0;                 /* skryje původní text Shoptetu vizuálně   */
  line-height: 1;                /* (zůstává dostupný pro čtečky obrazovky) */
  color: #1f1f1f !important;
  background-color: #eaf4fb !important;
  border: 1px solid #a9cfe8 !important;
  border-radius: 12px !important;
  padding: 20px 56px !important;
  min-width: 340px !important;
  max-width: 100% !important;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cline x1='20' y1='20' x2='15.5' y2='15.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 26px center !important;
  background-size: 19px 19px !important;
  /* Poznámka: transition je schválně JEN u :hover níže, ne tady – kdyby byl
     na základním stavu, prohlížeč by po načtení stránky animoval barvu
     ze staré (výchozí) na novou, a v některých situacích (neaktivní karta
     apod.) tahle animace "zamrzne" uprostřed a tlačítko zůstane špatně
     obarvené. Takhle se základní barva vykreslí vždy okamžitě a správně. */
}

/* Velmi jemná změna při najetí myší */
.unveil-button[data-unveil="filters"]:hover,
.unveil-button[data-unveil="filters"]:focus {
  background-color: #dff0fb !important;
  border-color: #8fc3e6 !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Vlastní text tlačítka – zavřený stav */
.unveil-button[data-unveil="filters"]::before {
  content: "Průvodce výběrem střihů" !important;
  font-family: Roboto, sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #1f1f1f !important;
  white-space: nowrap !important;
}

/* Vlastní text tlačítka – otevřený stav (podle stavu sousedního .filters.visible) */
.filters-unveil-button-wrapper:has(+ .filters.visible) .unveil-button[data-unveil="filters"]::before {
  content: "Zavřít průvodce výběrem střihů" !important;
}

/* Šipka vpravo – dolů (zavřeno) */
.unveil-button[data-unveil="filters"]::after {
  content: "" !important;
  position: absolute !important;
  right: 28px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid #1f1f1f;
  border-bottom: 2px solid #1f1f1f;
  transform: rotate(45deg) !important;
  transition: transform 0.2s ease;
}

/* Šipka vpravo – nahoru (otevřeno) */
.filters-unveil-button-wrapper:has(+ .filters.visible) .unveil-button[data-unveil="filters"]::after {
  transform: rotate(-135deg) !important;
  margin-top: -3px;
}

/* ==========================================================================
   Responzivní úprava pro mobil / menší tablety
   ========================================================================== */
@media (max-width: 767px) {
  .unveil-button[data-unveil="filters"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    /* vlevo záměrně víc místa než jen šířka ikony, aby text nikdy
       nezasahoval do prostoru ikony lupy */
    padding: 18px 44px 18px 54px !important;
    background-position: 18px center !important;
    background-size: 18px 18px !important;
  }

  .unveil-button[data-unveil="filters"]::before {
    font-size: 16px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    /* na mobilu radši zarovnat text doleva než na střed – při zalomení
       na 2 řádky tak text nikdy "nesjede" pod ikonu lupy */
    text-align: left !important;
  }

  .unveil-button[data-unveil="filters"]::after {
    right: 18px !important;
  }

  .filters-unveil-button-wrapper:has(+ .filters.visible) .unveil-button[data-unveil="filters"]::after {
    right: 18px !important;
  }
}

/* Ještě užší telefony – trochu zmenšit padding, ať se text vejde pohodlně */
@media (max-width: 380px) {
  .unveil-button[data-unveil="filters"] {
    padding: 16px 34px 16px 46px !important;
    background-position: 15px center !important;
    background-size: 16px 16px !important;
  }
  .unveil-button[data-unveil="filters"]::before {
    font-size: 15px !important;
  }
}