/* ── Floating Filter FAB ─────────────────────────────────────── */

#filter-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: transform 0.2s ease, opacity 0.2s ease;
}


/* ── Huvudknapp ─── */
.fab-main-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--accent-yellow);
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
  overflow: hidden; /* för ripple */
  position: relative;
}

.fab-main-btn:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

#filter-fab.open .fab-main-btn {
  background: var(--gray-dark);
  transform: rotate(90deg) scale(1.1);
}

/* ── Ripple ─── */
.fab-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  pointer-events: none;
}

.fab-ripple--active {
  animation: fab-ripple-anim 0.5s ease-out forwards;
}

@keyframes fab-ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ── Popup ─── */
/* A small sheet above the button rather than a free-standing column of pills:
   with four groups there are sixteen options, too many to stand on their own
   without headings to say which filter each belongs to. */
.fab-popup {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(78vw, 320px);
  max-height: min(72vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-bottom: 12px;
  padding: 14px;
  background: var(--bg-light);
  border: 1px solid var(--accent-light);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  /* The sheet itself animates, so the options do not each need to fly in */
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

#filter-fab.open .fab-popup {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: auto;
}

/* The button rides up above the footer as you reach the bottom of the page, and
   can end up high enough that a sheet above it would be squeezed against the
   top of the screen — or hidden behind the header. So it slides back down to
   its resting corner as the sheet opens, and the sheet is always the same full
   size in the same place, whatever the button was doing beforehand. The slide
   is only animated then: the rest of the time the button tracks the footer on
   every scroll frame, where a transition would just lag behind. */
#filter-fab.fab--sliding {
  transition: transform 0.2s ease, opacity 0.2s ease, bottom 0.25s ease;
}

.fab-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.fab-group-label {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dark);
}

.fab-group-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fab-filter-btn {
  background: var(--white);
  color: var(--text-dark);
  border: 2px solid var(--accent-yellow);
  padding: 6px 13px;
  border-radius: 16px;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s, color 0.2s;
}

.fab-filter-btn:active {
  transform: scale(0.95);
}

.fab-filter-btn.active {
  background: var(--accent-yellow-dark);
  color: var(--text-dark);
}

/* Dölj FAB på desktop – filterbaren används istället */
@media (min-width: 961px) {
  #filter-fab {
    display: none !important;
  }
}