/* ============================================================
   SpOki — mobile toolbar sort (spoki-toolbar-sort) v1
   Purpose: make the EXISTING sort <select> visible next to the
   filter control on mobile archives. No new orderby values,
   no markup contract changes, no colour-law changes.
   Kill switch: disable wp-content/novamira-sandbox/spoki-toolbar-sort.php
   Owner-locked styling preserved: top control = white pill,
   sticky bottom = navy. Sort mirrors the white pill.
   ============================================================ */

:root {
  --spoki-ts-h: 48px;
  --spoki-ts-gap: 8px;
  --spoki-ts-border: #E7DED3;
  --spoki-ts-ink: #2A2D34;
  --spoki-ts-icon: #19B0B6;
  --spoki-ts-muted: #54656B;
}

/* The short active-value mirror is a mobile-only affordance. Hidden by default so
   desktop keeps rendering the select's own full wording and nothing else. */
.spoki-ts-active { display: none; }

/* ---------- FAMILY A: pilot categories / brands / age-skill-need ---------- */

@media (max-width: 767px) {

  body .spoki-cat__resultbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--spoki-ts-gap);
    align-items: stretch;
    flex-wrap: nowrap;
  }

  body .spoki-cat__resultbar > .spoki-cat__filterbtn { order: 1; }
  body .spoki-cat__resultbar > .spoki-cat__sort      { order: 2; }
  body .spoki-cat__resultbar > p                     { order: 3; }

  body .spoki-cat__resultbar > .spoki-cat__filterbtn {
    display: inline-flex !important;
    width: 100% !important;
    min-height: var(--spoki-ts-h) !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
  }

  body .spoki-cat__resultbar > .spoki-cat__sort {
    display: flex !important;
    position: relative;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    align-items: stretch;
  }

  body .spoki-cat__resultbar > .spoki-cat__sort > span:not(.spoki-ts-active) {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }

  body .spoki-cat__resultbar > .spoki-cat__sort::before {
    content: "";
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319B0B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11M3 12h7M3 18h4M17 8v11M17 19l3-3M17 19l-3-3'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  body .spoki-cat__resultbar > .spoki-cat__sort > select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--spoki-ts-h) !important;
    margin: 0 !important;
    padding: 8px 30px 8px 34px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319B0B6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px 14px !important;
    border: 1px solid var(--spoki-ts-border) !important;
    border-radius: 999px !important;
    color: var(--spoki-ts-ink) !important;
    font-family: Nunito, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    text-overflow: ellipsis;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  body .spoki-cat__resultbar > .spoki-cat__sort > select:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--spoki-ts-icon) 55%, transparent);
    outline-offset: 2px;
  }

  body .spoki-cat__resultbar > p {
    grid-column: 1 / -1;
    margin: 2px 0 0 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--spoki-ts-muted) !important;
  }

  body .spoki-cat__facetrail > .spoki-cat__sort { display: none !important; }
}

/* ---------- FAMILY B: non-pilot product categories ---------- */

@media (max-width: 767px) {

  body .spoki-archive-topbar.spoki-ts-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--spoki-ts-gap);
    align-items: stretch;
    justify-content: stretch !important;
    margin: 4px 0 12px !important;
  }

  body .spoki-archive-topbar.spoki-ts-bar > .spoki-ts-filterbtn { order: 1; }
  body .spoki-archive-topbar.spoki-ts-bar > .spoki-archive-sort { order: 2; }
  body .spoki-archive-topbar.spoki-ts-bar > .spoki-ts-count     { order: 3; }

  body .spoki-ts-filterbtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: var(--spoki-ts-h);
    margin: 0;
    padding: 8px 16px;
    background: #fff !important;
    border: 1px solid var(--spoki-ts-border) !important;
    border-radius: 999px !important;
    color: var(--spoki-ts-ink) !important;
    font-family: Nunito, sans-serif !important;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
  }
  body .spoki-ts-filterbtn:hover {
    background: #E8F7F5 !important;
    border-color: var(--spoki-ts-border) !important;
    color: var(--spoki-ts-ink) !important;
  }
  body .spoki-ts-filterbtn::before {
    content: "";
    width: 16px; height: 16px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319B0B6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5h18M6 12h12M10 19h4'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  body .spoki-archive-topbar.spoki-ts-bar > .spoki-archive-sort {
    position: relative;
    display: flex !important;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    align-items: stretch;
  }
  body .spoki-archive-topbar.spoki-ts-bar > .spoki-archive-sort > span:not(.spoki-ts-active) {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  body .spoki-archive-topbar.spoki-ts-bar > .spoki-archive-sort::before {
    content: "";
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319B0B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11M3 12h7M3 18h4M17 8v11M17 19l3-3M17 19l-3-3'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  body .spoki-archive-topbar.spoki-ts-bar > .spoki-archive-sort > select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--spoki-ts-h) !important;
    margin: 0 !important;
    padding: 8px 30px 8px 34px !important;
    background-color: #fff !important;
    background-position: right 10px center !important;
    background-size: 14px 14px !important;
    border: 1px solid var(--spoki-ts-border) !important;
    border-radius: 999px !important;
    color: var(--spoki-ts-ink) !important;
    font-family: Nunito, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis;
    box-shadow: none !important;
  }

  body .spoki-ts-count {
    grid-column: 1 / -1;
    display: block !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    float: none !important;
    font-family: Nunito, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--spoki-ts-muted) !important;
  }

  body aside.spoki-arch-drawer > .spoki-archive-sort { display: none !important; }
}

/* ---------- active-value label ----------
   The full option wording ("Цена: ниска към висока") is ~153px and the pill is
   172px wide with icon and chevron, so a native select would clip it and the two
   price directions would look identical. spoki-toolbar-sort.js paints a short
   mirror label instead. The .spoki-ts-sort class is added by that script only, so
   if the script is unavailable the raw select text stays visible as a fallback. */

@media (max-width: 767px) {
  body .spoki-cat__resultbar > .spoki-cat__sort.spoki-ts-sort > select,
  body .spoki-archive-topbar.spoki-ts-bar > .spoki-archive-sort.spoki-ts-sort > select {
    color: transparent !important;
  }

  /* <option> inherits the select's color, so transparency would blank out the whole
     native dropdown list — only the highlighted row stays legible. Restore the ink
     on the options themselves; the closed control still shows the short mirror. */
  body .spoki-cat__resultbar > .spoki-cat__sort.spoki-ts-sort > select option,
  body .spoki-archive-topbar.spoki-ts-bar > .spoki-archive-sort.spoki-ts-sort > select option {
    color: var(--spoki-ts-ink) !important;
    background-color: #fff !important;
  }

  body .spoki-ts-sort > .spoki-ts-active {
    display: block;
    position: absolute;
    left: 34px; right: 30px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Nunito, sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--spoki-ts-ink);
  }
}

/* ---------- primary filter control = navy, matching the sticky pill ----------
   Owner decision 2026-07-31: the top filter control adopts the same navy #2E3A67
   and pill radius as the sticky „Филтри“ button, so the two read as one control in
   two positions. Sort stays the white outline pill as the secondary action.
   Baseline corrected here: the top button computed border-radius:0 while the
   sticky and the sort were both 999px — three shapes in one toolbar.
   Orange remains reserved for the buy CTA; no teal on the large filter pills. */

@media (max-width: 767px) {

  body .spoki-cat__resultbar > .spoki-cat__filterbtn,
  body .spoki-ts-filterbtn {
    background: #2E3A67 !important;
    border: 1px solid #2E3A67 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  body .spoki-cat__resultbar > .spoki-cat__filterbtn:hover,
  body .spoki-ts-filterbtn:hover,
  body .spoki-cat__resultbar > .spoki-cat__filterbtn:active,
  body .spoki-ts-filterbtn:active {
    background: #1F2A4D !important;
    border-color: #1F2A4D !important;
    color: #fff !important;
  }

  body .spoki-cat__resultbar > .spoki-cat__filterbtn:focus-visible,
  body .spoki-ts-filterbtn:focus-visible {
    outline: 2px solid #2E3A67;
    outline-offset: 2px;
  }

  /* the filter glyph flips from teal to white so it survives on the navy fill */
  body .spoki-cat__resultbar > .spoki-cat__filterbtn::before,
  body .spoki-ts-filterbtn::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5h18M6 12h12M10 19h4'/%3E%3C/svg%3E") no-repeat center / contain !important;
  }
}

/* ---------- closed control reads „Сортирай“ ----------
   Owner decision 2026-07-31: the pill shows the static word „Сортирай“ rather than
   the active value. The full option wording stays untouched inside the native
   dropdown. This reuses the <span>Сортирай</span> that already exists in the
   markup instead of painting anything new, so there is one label, one control.
   These rules sit after the visually-hidden ones above and win on source order. */

@media (max-width: 767px) {

  body .spoki-cat__resultbar > .spoki-cat__sort.spoki-ts-sort > span:not(.spoki-ts-active),
  body .spoki-archive-topbar.spoki-ts-bar > .spoki-archive-sort.spoki-ts-sort > span:not(.spoki-ts-active) {
    position: absolute !important;
    left: 34px; right: 30px; top: 50%;
    width: auto; height: auto;
    margin: 0; padding: 0;
    transform: translateY(-50%);
    clip: auto !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    font-family: Nunito, sans-serif !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    line-height: 1.2;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--spoki-ts-ink) !important;
  }

  /* the short active-value mirror is retired by this decision */
  body .spoki-ts-sort > .spoki-ts-active { display: none !important; }
}

/* Desktop is untouched: everything above is inside max-width:767px. */
/* ==== SpOki mobile toolbar sort — END ==== */