/* CV Filters Universal — samostalan CSS (bez Tailwind ovisnosti) */
.cvfu-panel, .cvfu-shortcode { font-family: inherit; color: var(--cvfu-text, #000); }

.cvfu-panel-inner { position: relative; }
.cvfu-panel-inner.is-loading { opacity: .6; pointer-events: none; transition: opacity .15s; }
.cvfu-panel-inner.is-loading::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,.35);
}

.cvfu-block { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(0,0,0,.08); }
.cvfu-block:last-of-type { border-bottom: 0; }
.cvfu-block-title {
  font-family: inherit;
  font-weight: 600; font-size: 15px; letter-spacing: .02em;
  margin: 0 0 10px; text-transform: uppercase; color: var(--cvfu-text, #000);
}

.cvfu-input {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.18); border-radius: 4px;
  font-size: 14px; background: #fff; color: var(--cvfu-text, #000);
}
.cvfu-input:focus { outline: none; border-color: var(--cvfu-accent, #bf1d2e); }

.cvfu-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.cvfu-list li { margin: 0 0 6px; }
.cvfu-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; line-height: 1.35; }
.cvfu-check input { accent-color: var(--cvfu-accent, #bf1d2e); margin: 0; flex: 0 0 auto; }
.cvfu-check em { color: #888; font-style: normal; font-size: 12px; margin-left: auto; }

.cvfu-price-fields { display: flex; align-items: center; gap: 8px; }
.cvfu-price-fields .cvfu-input { text-align: center; }
.cvfu-dash { color: #999; }

.cvfu-chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.cvfu-chip {
  border: 1px solid rgba(0,0,0,.2); background: #fff; color: var(--cvfu-text, #000);
  padding: 5px 11px; border-radius: 999px; font-size: 13px; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.cvfu-chip:hover { border-color: var(--cvfu-accent, #bf1d2e); }
.cvfu-chip.is-active { background: var(--cvfu-accent, #bf1d2e); border-color: var(--cvfu-accent, #bf1d2e); color: #fff; }

.cvfu-active { margin-bottom: 18px; }
.cvfu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cvfu-active-chip {
  background: var(--cvfu-accent, #bf1d2e); color: #fff; border: 0; border-radius: 999px;
  padding: 5px 12px; font-size: 13px; cursor: pointer;
}
.cvfu-active-chip span { opacity: .85; margin-left: 3px; }

.cvfu-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.cvfu-btn {
  border: 1px solid transparent; border-radius: 4px; padding: 9px 18px;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background .18s, opacity .18s;
}
.cvfu-btn-primary { background: var(--cvfu-accent, #bf1d2e); color: #fff; }
.cvfu-btn-primary:hover { opacity: .88; }
.cvfu-btn-ghost { background: transparent; border-color: rgba(0,0,0,.22); color: var(--cvfu-text, #000); }
.cvfu-btn-ghost:hover { border-color: var(--cvfu-accent, #bf1d2e); }

/* Mreža proizvoda (AJAX rezultati) */
.cvfu-product { display: block; text-decoration: none; color: inherit; }
.cvfu-product .product-box { position: relative; }
.cvfu-product-title { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.cvfu-product-price { font-weight: 600; }

body.cvfu-loading { cursor: progress; }

/* Responsive */
@media (max-width: 768px) {
  .cvfu-list { max-height: 200px; }
  .cvfu-actions .cvfu-btn { flex: 1 1 auto; }
}

/* ==========================================================================
   MOBILNI MODAL — identična mehanika kao na newbimsport.dev.codevision.eu
   (FAB "Filteri" → overlay → full-screen panel sa sticky headom i sticky
    footerom "Primijeni / Poništi"; scroll lock; Escape/overlay/× zatvaraju)
   Desktop (≥1025px): nepromijenjen sticky sidebar.
   ========================================================================== */
.cvfu-fab,
.cvfu-overlay,
.cvfu-modal-head,
.cvfu-modal-title,
.cvfu-modal-close {
  display: none;
}

@media (max-width: 1024px) {

  /* ---------- FAB ---------- */
  .cvfu-fab {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 999999998;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .78rem 1.3rem;
    border: 1px solid var(--cvfu-accent, #bf1d2e);
    border-radius: 9999px;
    background: var(--cvfu-accent, #bf1d2e);
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
    transition: opacity .2s ease, transform .22s ease;
  }

  .cvfu-fab svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
  }

  .cvfu-fab:active {
    transform: translateX(-50%) scale(.97);
  }

  .cvfu-fab.is-hidden-near-footer {
    opacity: 0;
    transform: translate(-50%, 16px);
    pointer-events: none;
  }

  .cvfu-fab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 9999px;
    background: #fff;
    color: var(--cvfu-accent, #bf1d2e);
    font-size: 11px;
    font-weight: 800;
  }

  .cvfu-fab__count[hidden] {
    display: none;
  }

  /* ---------- Overlay ---------- */
  .cvfu-overlay {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999999999;
    background: rgba(7, 10, 14, .68);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
  }

  .cvfu-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* ---------- Scroll lock ---------- */
  html.cvfu-modal-open,
  body.cvfu-modal-open {
    overflow: hidden !important;
  }

  /* ---------- Sidebar postaje full-screen panel ---------- */
  .cvfu-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1000000000 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh;
    max-height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f2f3f4 !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18) !important;
    overflow: hidden !important;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .26s ease, opacity .2s ease, visibility .26s ease;
  }

  .cvfu-sidebar.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  /* ---------- Sticky head ---------- */
  .cvfu-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 14px 16px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }

  .cvfu-modal-title {
    display: block;
    margin: 0;
    color: var(--cvfu-accent, #bf1d2e);
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .cvfu-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    background: #f7f7f7;
    color: #000;
    font-family: "Roboto", sans-serif;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s, border-color .18s;
  }

  .cvfu-modal-close:hover {
    background: #efefef;
    border-color: var(--cvfu-accent, #bf1d2e);
  }

  /* Fokus u brendu (bez default zutog ring-a) */
  .cvfu-modal-close:focus {
    outline: none;
  }

  .cvfu-modal-close:focus-visible {
    outline: 2px solid var(--cvfu-accent, #bf1d2e);
    outline-offset: 2px;
    background: #efefef;
  }

  .cvfu-fab:focus {
    outline: none;
  }

  .cvfu-fab:focus-visible {
    outline: 3px solid var(--cvfu-accent, #bf1d2e);
    outline-offset: 3px;
  }

  .cvfu-sidebar .cvfu-actions .cvfu-btn:focus {
    outline: none;
  }

  .cvfu-sidebar .cvfu-actions .cvfu-btn:focus-visible {
    outline: 2px solid var(--cvfu-accent, #bf1d2e);
    outline-offset: 2px;
  }

  /* ---------- Tijelo: panel scrolla, blokovi su bijele kartice ---------- */
  .cvfu-sidebar .cvfu-panel,
  .cvfu-sidebar #cvf-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 16px 4px !important;
  }

  .cvfu-sidebar .cvfu-block {
    background: #fff;
    border: 0;
    border-radius: 14px;
    padding: 16px;
    margin: 0 0 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
  }

  .cvfu-sidebar .cvfu-block-title {
    color: #000;
    font-size: 13px;
    letter-spacing: .1em;
  }

  /* Tamni inputi na bijelim karticama */
  .cvfu-sidebar .cvfu-input {
    border-color: rgba(0, 0, 0, .16);
    background: #fff;
    color: #000;
  }

  /* Liste bez unutarnjeg scrolla — scrolla cijeli panel */
  .cvfu-sidebar .cvfu-list {
    max-height: none !important;
    overflow: visible !important;
  }

  .cvfu-sidebar .cvfu-active {
    margin: 0 0 12px;
  }

  .cvfu-sidebar .cvfu-active .cvfu-block-title {
    color: #000;
  }

  /* ---------- Sticky footer s akcijama ---------- */
  .cvfu-sidebar .cvfu-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 12px -16px 0;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
  }

  .cvfu-sidebar .cvfu-actions .cvfu-btn {
    flex: 1 1 0;
    min-height: 48px;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 700;
  }

  .cvfu-sidebar .cvfu-actions .cvfu-btn-ghost {
    background: #fff;
    border-color: rgba(0, 0, 0, .22);
    color: #000;
  }

  .cvfu-sidebar .cvfu-actions .cvfu-btn-ghost:hover {
    background: #fff;
    border-color: var(--cvfu-accent, #bf1d2e);
    color: var(--cvfu-accent, #bf1d2e);
  }

  /* Dok je modal otvoren, FAB se skriva */
  .cvfu-fab.is-modal-open {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .cvfu-sidebar,
  .cvfu-overlay,
  .cvfu-fab {
    transition: none !important;
  }
}