/* ===== Toolbar ===== */
.ftbar {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  padding: 6px 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;

  position: relative;
  z-index: 1000;

  overflow-x: visible;
  overflow-y: visible;

  width: 100%;
  max-width: 100vw;
}
.ftspacer { flex: 1 0 auto; }

/* ===== Pill/Button ===== */
.ftbtn {
  border: 1px solid #e6e9ee;
  background: #f4f6f8;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}
.ftpill { position: relative; z-index: 1; flex: 0 0 auto; }

.ftcount {
  margin-left: 6px;
  font-size: 11px;
  background: #111;
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
}
.d-none { display: none !important; }

/* ===== Dropdown/Menu (desktop) ===== */
.ftmenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  z-index: 1000;

  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 8px;

  white-space: normal;
  max-height: 360px;
  overflow: auto !important;

  display: none; /* chiuso di default */
}
.ftpill.open > .ftmenu { display: flex; flex-direction: column; }

/* ===== Voci & footer del menu ===== */
.ftmenu-title { font-weight: 600; font-size: 12px; padding: 4px 8px; }
.ftitem { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; }
.ftitem input { margin: 0; }
.ftmenu-actions {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 8px;
  border-top: 1px solid #eef2f7;
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}
.ftlink { border: 0; background: transparent; color: #0a58ca; font-size: 12px; cursor: pointer; }
.ftapply {
  border: 1px solid #0a58ca; background: #0a58ca; color: #fff;
  border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 12px;
}

/* ===== Extra ===== */
.ftprice { font-size: 13px; padding: 6px 8px; }
.ftslider { margin: 8px 10px 4px; }

/* ===== Mobile layer (portal) ===== */
@media (max-width: 1600px) {
  .ftbar {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
  }

  .ftmenu { min-width: 210px; }
  .ftpill.align-right > .ftmenu { left: auto; right: 0; }

  /* Layer che contiene backdrop + menu spostato nel body */
  .ft-layer {
    position: fixed;
    inset: 0;
    z-index: 100000;            /* sopra a tutto */
    pointer-events: none;       /* il layer non cattura, lo fanno i figli */
  }
  .ft-layer .ft-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.25);
    pointer-events: auto;       /* cliccabile per chiudere */
  }
  .ft-layer .ftmenu--mobile {
    position: absolute;
    left: 8px;
    right: 8px;
    top: var(--ftmenu-top, 56px);
    margin: 0;
    min-width: 0;
    width: auto;
    max-width: none;
    max-height: calc(100vh - var(--ftmenu-top, 56px) - 16px);
    display: flex;
    flex-direction: column;
    pointer-events: auto;       /* riceve i click */
  }

  body.ft-no-scroll { overflow: hidden; }
}

/* scrollbar estetica per la toolbar */
.ftbar::-webkit-scrollbar { height: 6px; }
.ftbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 999px; }

/* === Animazioni mobile === */
@media (max-width: 1600px) {
  .ft-layer .ft-backdrop {
    opacity: 0;
    transition: opacity .18s ease-out;
  }
  .ft-layer.in .ft-backdrop {
    opacity: 1;
  }

  .ft-layer .ftmenu--mobile {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease-out, transform .18s ease-out;
  }
  .ft-layer.in .ftmenu--mobile {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ===========================================================
   IKEA-LIKE FILTER BAR (chips + dropdown card + radio ring)
   Incolla DOPO il tuo CSS originale. Nessuna logica cambiata.
   =========================================================== */

/* Palette/scale */
:root{
  --ik-ink: #111111;        /* testo/icone */
  --ik-muted: #6b7280;      /* testi secondari */
  --ik-chip: #f3f3f3;       /* bg chip */
  --ik-chip-hover: #ececec; /* bg chip hover */
  --ik-border: #e6e6e6;     /* bordi soft */
  --ik-card: #ffffff;       /* card/menu */
  --ik-focus: rgba(17,17,17,.25);
  --ik-radius: 9999px;
}

/* ---------- Toolbar pulita (sottile) ---------- */
.ftbar{
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  gap: 14px;
  padding: 12px 10px;
}

/* ---------- CHIP / BUTTON ---------- */
.ftbtn{
  border-radius: var(--ik-radius);
  border: 1px solid transparent;
  background: var(--ik-chip);
  color: var(--ik-ink);
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .04s ease, color .15s ease;
}

/* chevron (via SVG mask, niente markup extra) */
.ftbtn::after{
  content: "";
  width: 12px; height: 12px; flex: 0 0 12px;
  background: var(--ik-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.4 8.6a1 1 0 0 1 1.4 0L12 11.8l3.2-3.2a1 1 0 1 1 1.4 1.4l-3.9 3.9a1.5 1.5 0 0 1-2.1 0L7.4 10a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.4 8.6a1 1 0 0 1 1.4 0L12 11.8l3.2-3.2a1 1 0 1 1 1.4 1.4l-3.9 3.9a1.5 1.5 0 0 1-2.1 0L7.4 10a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .18s ease;
}

.ftbtn:hover{ background: var(--ik-chip-hover); }
.ftbtn:active{ transform: translateY(1px); }
.ftbtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--ik-focus);
}

/* stato “aperto” = stile IKEA: bordo nero + bg bianco + chevron su */
.ftpill.open > .ftbtn{
  background: #fff;
  border-color: var(--ik-ink);
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.ftpill.open > .ftbtn::after{ transform: rotate(180deg); }

/* badge conteggio: piccolo pallino grigio */
.ftcount{
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  color: var(--ik-ink);
}
.ftpill.open .ftcount{
  background: rgba(0,0,0,.12);
}

/* ---------- MENU / CARD ---------- */
.ftmenu{
  background: var(--ik-card);
  border: 1px solid var(--ik-border);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  padding: 12px;
  min-width: 320px;
  animation: ik-pop .16s ease-out;
}
@keyframes ik-pop{
  from{ opacity: 0; transform: translateY(8px) scale(.985); }
  to  { opacity: 1; transform: translateY(0)   scale(1); }
}

.ftmenu-title{
  font-weight: 700;
  font-size: 12px;
  color: var(--ik-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 8px 10px 6px;
}

/* righe del menu */
.ftitem{
  padding: 10px 12px;
  border-radius: 12px;
  gap: 12px;
  transition: background .12s ease;
}
.ftitem:hover{ background: #f7f7f7; }

/* ---------- RADIO ad anello (look IKEA) ---------- */
.ftitem input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ik-ink);
  background: #fff;
  display: inline-grid;
  place-content: center;
  position: relative;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.ftitem input[type="radio"]::after{
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ik-ink);
  transform: scale(0);
  transition: transform .12s ease;
}
.ftitem input[type="radio"]:checked::after{ transform: scale(1); }

/* checkbox coerenti ma non stravolte */
.ftitem input[type="checkbox"]{
  accent-color: var(--ik-ink);
}

/* footer del menu */
.ftmenu-actions{
  background: linear-gradient(180deg, rgba(255,255,255,.9), #fff);
  border-top: 1px solid #f0f0f0;
  padding: 12px;
  gap: 10px;
}
.ftlink{
  color: var(--ik-ink);
  font-weight: 700;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
}
.ftlink:hover{ background: #f2f2f2; }

.ftapply{
  background: var(--ik-ink);
  border: 1px solid #000;
  color: #fff;
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: 800;
}

/* ---------- Mobile sheet ---------- */
@media (max-width: 1600px){
  .ftbar{ gap: 12px; padding: 12px 10px; }
  .ftbtn{ padding: 12px 16px; }

  .ft-layer .ft-backdrop{ background: rgba(0,0,0,.45); }
  .ft-layer .ftmenu--mobile{
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,.2);
  }
  .ft-layer .ftmenu--mobile{
    transform: translateY(14px);
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
  }
  .ft-layer.in .ftmenu--mobile{
    opacity: 1; transform: translateY(0);
  }
}

/* ---------- Scrollbar leggere ---------- */
.ftmenu::-webkit-scrollbar{ width: 10px; }
.ftmenu::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}


/* === Azzera tutto: stile distinto (outline rosso + icona) === */
/* Il bottone ha id #ft-clear-all nel tuo JS */
#ft-clear-all.ftbtn{
  background: #fff;
  color: #e11d48;                 /* rosa/rosso */
  border: 2px solid #e11d48;
  font-weight: 700;
}

/* rimuove il chevron generico dei filtri */
#ft-clear-all.ftbtn::after{ display:none; }

/* icona cestino prima del testo (no markup extra) */
#ft-clear-all.ftbtn::before{
  content:"";
  width: 14px; height: 14px;
  margin-right: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6a1 1 0 0 1 1 1v1h4a1 1 0 1 1 0 2h-1.1l-1.2 12.3A3 3 0 0 1 14.7 23H9.3a3 3 0 0 1-2.98-2.7L5.1 7H4a1 1 0 1 1 0-2h4V4a1 1 0 0 1 1-1Zm1 2h4V5h-4V5Zm-2.9 2 1.2 12.1A1 1 0 0 0 9.3 21h5.4a1 1 0 0 0 .99-.9L16.9 7H7.1ZM10 9a1 1 0 0 1 1 1v7a1 1 0 1 1-2 0v-7a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v7a1 1 0 1 1-2 0v-7a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6a1 1 0 0 1 1 1v1h4a1 1 0 1 1 0 2h-1.1l-1.2 12.3A3 3 0 0 1 14.7 23H9.3a3 3 0 0 1-2.98-2.7L5.1 7H4a1 1 0 1 1 0-2h4V4a1 1 0 0 1 1-1Zm1 2h4V5h-4V5Zm-2.9 2 1.2 12.1A1 1 0 0 0 9.3 21h5.4a1 1 0 0 0 .99-.9L16.9 7H7.1ZM10 9a1 1 0 0 1 1 1v7a1 1 0 1 1-2 0v-7a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v7a1 1 0 1 1-2 0v-7a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* hover/active/focus */
#ft-clear-all.ftbtn:hover{
  background: #ffe7ed;            /* leggero fill */
  border-color: #be123c;
  color: #be123c;
}
#ft-clear-all.ftbtn:active{
  background: #e11d48;            /* pieno */
  color: #fff;
  border-color: #e11d48;
}
#ft-clear-all.ftbtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(225,29,72,.25);
}

/* versione “small” su mobile: un filo più compatto */
@media (max-width:1600px){
  #ft-clear-all.ftbtn{ padding: 11px 14px; }
  #ft-clear-all.ftbtn::before{ width: 13px; height: 13px; }
}


/* Rimuovi padding sinistro della toolbar */
.ftbar{ padding-left: 0 !important; }

/* Anche in mobile */
@media (max-width: 1600px){
  .ftbar{ padding-left: 0 !important; }
}

/* (opzionale) se vuoi togliere anche quello destro: */
/* .ftbar{ padding-right: 0 !important; } */

.ftbar .ftpill:first-child{ margin-left: 0 !important; }

/* Mobile: togli qualsiasi spazio iniziale della toolbar */
@media (max-width: 1600px){
  .ftbar{
    padding-left: 0 !important;     /* sovrascrive il 12px/10px del media originale */
    margin-left: 0 !important;      /* nel dubbio */
    scrollbar-gutter: auto !important; /* rimuove il gutter “both-edges” */
  }

  /* niente bleed/margini speciali lato container */
  .ftbar{ margin-right: 0 !important; }  /* opzionale simmetria */

  /* assicura che il primo chip non aggiunga spazio */
  .ftbar .ftpill:first-child{ margin-left: 0 !important; }

  /* se avessi pseudo-elementi decorativi, spegnili su mobile */
  .ftbar::before, .ftbar::after{ content: none !important; }
}