/* =========================================================
   GymSupps – vyhledávací pole v hlavičce ve stylu Aktin
   - bez samostatného tlačítka HLEDAT
   - světle šedé zaoblené pole
   - lupa uvnitř vlevo
   - desktop + mobil
   ========================================================= */

/* Wrapper vyhledávání */
fieldset:has(.search-input) {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Samotný input */
.search-input,
.query-input.search-input,
input[data-testid="searchInput"] {
  width: 100% !important;
  height: 54px !important;

  margin: 0 !important;
  padding: 0 20px 0 52px !important;

  color: #24242b !important;
  background: #f5f5f6 !important;

  border: 1px solid transparent !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  outline: none !important;

  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 54px !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease !important;
}

/* Placeholder */
.search-input::placeholder,
input[data-testid="searchInput"]::placeholder {
  color: #9a9aa0 !important;
  opacity: 1 !important;
}

/* Focus */
.search-input:focus,
input[data-testid="searchInput"]:focus {
  background: #fff !important;
  border-color: #d8d8dc !important;
  box-shadow: none !important;
}

/* Původní tlačítko HLEDAT skrýt */
button[data-testid="searchBtn"],
fieldset:has(.search-input) > button.btn {
  display: none !important;
}

/* Lupa vytvořená čistě přes CSS */
fieldset:has(.search-input)::before {
  content: "" !important;

  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  z-index: 3 !important;

  width: 16px !important;
  height: 16px !important;

  border: 2px solid #8f9096 !important;
  border-radius: 50% !important;

  transform: translateY(-58%) !important;
  pointer-events: none !important;
}

/* Rukojeť lupy */
fieldset:has(.search-input)::after {
  content: "" !important;

  position: absolute !important;
  left: 34px !important;
  top: 50% !important;
  z-index: 3 !important;

  width: 8px !important;
  height: 2px !important;

  background: #8f9096 !important;
  border-radius: 2px !important;

  transform:
    translateY(5px)
    rotate(45deg) !important;

  transform-origin: left center !important;
  pointer-events: none !important;
}

/* Desktop – o něco subtilnější než původní Shoptet pole */
@media (min-width: 992px) {
  .search-input,
  .query-input.search-input,
  input[data-testid="searchInput"] {
    height: 50px !important;
    padding-left: 50px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    line-height: 50px !important;
  }

  fieldset:has(.search-input)::before {
    left: 18px !important;
  }

  fieldset:has(.search-input)::after {
    left: 32px !important;
  }
}

/* Mobil */
@media (max-width: 767px) {
  .search-input,
  .query-input.search-input,
  input[data-testid="searchInput"] {
    height: 52px !important;
    padding: 0 16px 0 48px !important;
    border-radius: 15px !important;
    font-size: 16px !important;
    line-height: 52px !important;
  }

  fieldset:has(.search-input)::before {
    left: 17px !important;
    width: 15px !important;
    height: 15px !important;
  }

  fieldset:has(.search-input)::after {
    left: 30px !important;
  }
}