/*
  Mobile filter drawer — readability and reach.

  Why this file exists (Clarity, 2026-07-29): the heatmap showed the
  "FILTRIRAJ I SORTIRAJ" button is one of the hottest targets on the search
  page, but the drawer it opens had three problems:
    1. group names rendered in English (fixed server-side in vault-facet-label)
    2. 15-16px labels with low-contrast grey on near-black
    3. the "Primijeni" button sat under the Shopify chat bubble in the
       bottom-right corner, so the primary action was partly untappable

  Scoped to the mobile drawer (.mobile-facets*) so the desktop facet bar is
  untouched.
*/

/* ---- the trigger ---------------------------------------------------- */

.mobile-facets__wrapper .mobile-facets__open {
  gap: 1rem;
  padding: 1.4rem 1.8rem;
  font-size: 1.6rem !important;
  letter-spacing: 0.06em;
}

.mobile-facets__open .svg-wrapper {
  width: 2.2rem;
  height: 2.2rem;
}

/* ---- drawer shell --------------------------------------------------- */

.mobile-facets__inner {
  padding-bottom: 2rem;
}

.mobile-facets__header {
  padding: 2rem 2.4rem 1.6rem;
  border-bottom: 0.1rem solid rgba(248, 243, 234, 0.14);
}

.mobile-facets__wrapper .mobile-facets__header-title {
  font-size: 2rem !important;
  letter-spacing: 0.02em;
}

.mobile-facets__count {
  font-size: 1.4rem;
  opacity: 0.8;
}

/* ---- filter group rows ---------------------------------------------- */

.mobile-facets__wrapper .mobile-facets__summary {
  padding: 1.9rem 2.4rem;
  font-size: 1.7rem !important;
  letter-spacing: 0.08em;
  /* 60px+ row: comfortably above the 44px minimum touch target */
  min-height: 6rem;
  border-bottom: 0.1rem solid rgba(248, 243, 234, 0.1);
}

.mobile-facets__wrapper .mobile-facets__summary > div,
.mobile-facets__wrapper .mobile-facets__summary span {
  font-size: inherit !important;
}

.mobile-facets__details[open] > .mobile-facets__summary {
  background: rgba(248, 243, 234, 0.04);
}

/* ---- individual filter values --------------------------------------- */

.mobile-facets__item {
  padding: 0;
}

.mobile-facets__wrapper .mobile-facets__label {
  padding: 1.5rem 2.4rem;
  font-size: 1.6rem !important;
  min-height: 5.6rem;
  color: rgb(248, 243, 234);
  align-items: center;
}

.mobile-facets__label .mobile-facets__highlight,
.mobile-facets__label > span:last-child {
  opacity: 0.65;
  font-size: 1.4rem;
}

.mobile-facets__checkbox:checked + .mobile-facets__label,
.mobile-facets__label:has(.mobile-facets__checkbox:checked) {
  background: rgba(212, 175, 55, 0.1);
  font-weight: 600;
}

/* bigger checkbox so it reads as tappable */
.mobile-facets__label > svg {
  width: 2.2rem;
  height: 2.2rem;
  margin-right: 1.4rem;
  flex-shrink: 0;
}

/* ---- price range inputs --------------------------------------------- */

.mobile-facets__details .facets__price {
  padding: 1.6rem 2.4rem 2rem;
  gap: 1.2rem;
}

.mobile-facets__details .field__input {
  font-size: 1.6rem;
  min-height: 5rem;
}

/* ---- sort select ---------------------------------------------------- */

.mobile-facets__sort {
  padding: 2rem 2.4rem;
  gap: 1.2rem;
}

.mobile-facets__wrapper .mobile-facets__sort label {
  font-size: 1.6rem !important;
  letter-spacing: 0.04em;
}

.mobile-facets__wrapper .mobile-facets__sort .select__select {
  font-size: 1.6rem !important;
  min-height: 5.4rem;
}

/* ---- footer: keep the primary action reachable ---------------------- */

.mobile-facets__footer {
  padding: 1.6rem 2.4rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
  gap: 1.6rem;
  background: var(--vault-facets-footer-bg, #0d0d0d);
  border-top: 0.1rem solid rgba(248, 243, 234, 0.14);
  /* above the chat bubble, which is z-index-stacked near the same corner */
  z-index: 5;
}

/*
  "Primijeni" rendered as bare text next to "Očisti", so the two competed as
  equals. It is the action that closes the task, so it gets the solid gold
  treatment used for Add-to-cart; the clear link stays quiet.
*/
.mobile-facets__wrapper .mobile-facets__footer .button {
  flex: 1 1 auto;
  min-height: 5.4rem;
  font-size: 1.6rem !important;
  letter-spacing: 0.06em;
  font-weight: 700;
  background: #d4af37 !important;
  color: #10100f !important;
  border-radius: 0.6rem;
  box-shadow: none;
}

.mobile-facets__wrapper .mobile-facets__footer .button::after,
.mobile-facets__wrapper .mobile-facets__footer .button::before {
  display: none;
}

.mobile-facets__footer .mobile-facets__clear {
  font-size: 1.5rem;
  white-space: nowrap;
  opacity: 0.7;
  flex: 0 0 auto;
}

/*
  The Shopify chat launcher is fixed to the bottom-right and overlapped the
  "Primijeni" button. Hide it only while the drawer is open — the shopper is
  mid-task and the chat is still one tap away once the drawer closes.
*/
body:has(.mobile-facets__disclosure[open]) shopify-chat,
body:has(.mobile-facets__disclosure[open]) #shopify-chat,
body:has(.mobile-facets__disclosure[open]) [id^="ShopifyChat"] {
  display: none !important;
}

@media screen and (min-width: 750px) {
  .mobile-facets__open {
    font-size: 1.5rem;
  }
}