/* ════════════════════════════════════════════
   Filterable Gallery – gallery.css
   Sidebar bg: #F5F6F729 (semi-transparent)
   All text: white
════════════════════════════════════════════ */
.fg-wrapper {
  display: flex;
  min-height: 60vh;
  --fg-bg:         #151720;
  --fg-sidebar-bg: rgba(245,246,247,0.16);
  --fg-card-bg:    #242736;
  --fg-border:     rgba(255,255,255,0.12);
  --fg-text:       #ffffff;
  --fg-muted:      rgba(255,255,255,0.55);
  --fg-accent:     #000000;
  --fg-glow:       rgba(124,92,252,0.3);
  --fg-pink:       #fc5c8a;
  --fg-radius:     10px;
}

/* ── Sidebar ─────────────────────────────── */
.fg-sidebar {
  width: 264px; min-width: 264px;
  background: var(--fg-sidebar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid var(--fg-border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.fg-sidebar::-webkit-scrollbar { width: 3px; }
.fg-sidebar::-webkit-scrollbar-thumb { background: var(--fg-border); border-radius: 4px; }

.fg-sidebar-section { padding: 15px 20px; border-bottom: 1px solid var(--fg-border); }
.fg-sidebar-section:last-child { border-bottom: none; }

.fg-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase; margin-bottom: 12px;
}

/* Toggle */
.fg-toggle-label { display: flex; align-items: center; justify-content: space-between; }
.fg-toggle-label > span { font-size: 13.5px; font-weight: 500; color: #fff; }
.fg-toggle { position: relative; width: 46px; height: 26px; cursor: pointer; flex-shrink: 0; display: inline-block; }
.fg-toggle input { display: none; }
.fg-toggle-slider { position: absolute; inset: 0; border-radius: 26px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); transition: .25s; }
.fg-toggle-slider::after { content:''; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; background: rgba(255,255,255,0.7); border-radius: 50%; transition: .25s; }
.fg-toggle input:checked ~ .fg-toggle-slider { background: var(--fg-accent); border-color: var(--fg-accent); }
.fg-toggle input:checked ~ .fg-toggle-slider::after { transform: translateX(20px); background: #fff; }

/* Radio */
.fg-radio-label { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 5px 6px; border-radius: 7px; font-size: 13.5px; color: #fff; user-select: none; transition: background .15s; }
.fg-radio-label:hover { background: rgba(255,255,255,0.08); }
.fg-radio-label input { display: none; }
.fg-radio-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: .2s; }
.fg-radio-label input:checked ~ .fg-radio-dot { border-color: var(--fg-accent); background: var(--fg-accent); box-shadow: 0 0 0 3px var(--fg-glow); }
.fg-radio-label input:checked ~ .fg-radio-dot::after { content:''; width: 5px; height: 5px; background: #fff; border-radius: 50%; }

/* Checkbox */
.fg-checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 5px 6px; border-radius: 7px; font-size: 13.5px; color: #fff; user-select: none; transition: background .15s; }
.fg-checkbox-label:hover { background: rgba(255,255,255,0.08); }
.fg-checkbox-label input { display: none; }
.fg-checkbox-box { width: 16px; height: 16px; border-radius: 4px; border: 2px solid rgba(255,255,255,0.4); flex-shrink: 0; transition: .2s; display: flex; align-items: center; justify-content: center; }
.fg-checkbox-label input:checked ~ .fg-checkbox-box { background: var(--fg-accent); border-color: var(--fg-accent); }
.fg-checkbox-label input:checked ~ .fg-checkbox-box::after { content:''; width: 4px; height: 7px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(42deg) translateY(-1px); }
.fg-svc-count { margin-left: auto; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); padding: 1px 7px; border-radius: 10px; }

/* Col buttons */
.fg-col-btns { display: flex; gap: 6px; }
.fg-col-btn { flex: 1; padding: 7px 0; border-radius: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 700; cursor: pointer; transition: .2s; }
.fg-col-btn:hover { border-color: var(--fg-accent); color: #fff; }
.fg-col-btn.active { background: var(--fg-accent); border-color: var(--fg-accent); color: #fff; }

.fg-result-count { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 10px; padding: 0 6px; }
.fg-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 8px; padding: 0 6px; }
.fg-legend-dot { width: 7px; height: 7px; background: var(--fg-accent); border-radius: 50%; flex-shrink: 0; }

/* ── Grid ────────────────────────────────── */
.fg-main { flex: 1; padding: 28px 28px 60px; min-width: 0; }
.fg-grid { display: grid; gap: 5px; grid-template-columns: repeat(4,1fr); }

/* ── Cards ───────────────────────────────── */
.fg-item { position: relative; overflow: hidden; border-radius: var(--fg-radius); background: var(--fg-card-bg); cursor: pointer; aspect-ratio: 1; transition: transform .2s, box-shadow .2s; }
.fg-item:hover { transform: scale(1.025); box-shadow: 0 12px 36px rgba(0,0,0,.7); z-index: 4; }
.fg-item.fg-hidden { display: none; }
.fg-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s, filter .3s; }
.fg-item:hover .fg-thumb { transform: scale(1.07); }
.fg-item.fg-nsfw .fg-thumb { filter: blur(16px) saturate(.3); }
.fg-wrapper.fg-no-blur .fg-item.fg-nsfw .fg-thumb { filter: none; }
.fg-wrapper.fg-relaxed .fg-item { aspect-ratio: 3/4; }
.fg-placeholder { width: 100%; height: 100%; background: var(--fg-card-bg); }

.fg-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .22s; background: linear-gradient(to top, rgba(6,6,14,.97) 0%, rgba(6,6,14,.5) 45%, transparent 100%); display: flex; align-items: flex-end; }
.fg-item:hover .fg-overlay { opacity: 1; }
.fg-overlay-inner { padding: 12px; width: 100%; }
.fg-overlay-case { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.4); margin-bottom: 7px; text-transform: uppercase; }
.fg-overlay-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.fg-tag { padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; background: var(--fg-accent); color: #fff; letter-spacing: .04em; }
.fg-multi::after { content:''; position: absolute; inset: 0; border-radius: var(--fg-radius); border: 2px solid var(--fg-accent); opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 3; }
.fg-multi:hover::after { opacity: .5; }
.fg-multi-dot { position: absolute; top: 9px; left: 9px; z-index: 5; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-accent); box-shadow: 0 0 8px var(--fg-glow); }
.fg-nsfw-badge { position: absolute; top: 9px; right: 9px; z-index: 5; background: rgba(0,0,0,.75); color: var(--fg-pink); font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .1em; pointer-events: none; }
.fg-empty-state { display: none; text-align: center; padding: 80px 20px; color: var(--fg-muted); grid-column: 1/-1; font-size: 14px; }
.fg-empty-state.show { display: block; }

/* ── Before/After — button swap ────────────── */
.fg-ba-wrap {
  position: absolute; inset: 0;
}
.fg-ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
  transition: opacity .3s ease, filter .3s;
}
.fg-ba-img.fg-ba-hidden { opacity: 0; }

.fg-ba-btns {
  position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%);
  z-index: 20; display: flex; border-radius: 20px;
  overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.5);
  pointer-events: all; white-space: nowrap;
}
.fg-ba-btn {
  padding: 5px 14px; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: rgba(0,0,0,.6); color: rgba(255,255,255,.6);
  border: none; cursor: pointer; transition: .18s;
}
.fg-ba-btn:first-child { border-right: 1px solid rgba(255,255,255,.1); }
.fg-ba-btn.active { background: var(--fg-accent, #7c5cfc); color: #fff; }

/* NSFW blur on BA images */
.fg-item.fg-nsfw .fg-ba-img { filter: blur(16px) saturate(.3); }
.fg-wrapper.fg-no-blur .fg-item.fg-nsfw .fg-ba-img { filter: none; }

/* ════════════════════════════════════════════
   MOBILE — topbar + drawer
════════════════════════════════════════════ */
.fg-topbar {
  display: none;
  position: sticky; top: 0; z-index: 200;
  background: rgba(245,246,247,0.16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 10px 14px;
  align-items: center; justify-content: space-between; gap: 10px;
}
.fg-drawer-btn {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; padding: 8px 14px; border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 500; transition: .2s; flex-shrink: 0;
}
.fg-drawer-btn:hover { border-color: var(--fg-accent); }
.fg-filter-pill { display: none; background: var(--fg-accent); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; }
.fg-filter-pill.show { display: inline-block; }
.fg-topbar-count { font-size: 12px; color: rgba(255,255,255,0.6); }
.fg-mob-cols { display: flex; gap: 5px; }
.fg-mob-col-btn { width: 32px; height: 32px; border-radius: 7px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); font-size: 11px; font-weight: 700; cursor: pointer; transition: .2s; display: flex; align-items: center; justify-content: center; }
.fg-mob-col-btn.active { background: var(--fg-accent); border-color: var(--fg-accent); color: #fff; }

.fg-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 300; backdrop-filter: blur(2px); }
.fg-overlay.open { display: block; }

.fg-drawer {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-height: 80vh;
  background: rgba(21,23,32,0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px 20px 0 0;
  z-index: 400; display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.fg-drawer.open { transform: translateY(0); }
.fg-drawer::-webkit-scrollbar { width: 3px; }
.fg-drawer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.fg-drawer::before {
  content:''; display:block; width:40px; height:4px;
  background:rgba(255,255,255,0.25); border-radius:4px;
  margin: 12px auto 0; flex-shrink:0;
}
.fg-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 14px; border-bottom: 1px solid rgba(255,255,255,0.12); position: sticky; top: 0; background: rgba(21,23,32,0.97); z-index: 1; }
.fg-drawer-header h2 { font-size: 15px; font-weight: 700; color: #fff; }
.fg-drawer-close { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .2s; }
.fg-drawer-close:hover { border-color: var(--fg-accent); }
.fg-drawer-inner { display: flex; flex-wrap: wrap; padding: 4px 8px 20px; }
.fg-drawer-inner .fg-sidebar-section { display: inline-block; vertical-align: top; min-width: 140px; }

/* Responsive */
@media (max-width: 900px) {
  .fg-wrapper  { flex-direction: column; }
  .fg-sidebar  { display: none !important; }
  .fg-topbar   { display: flex; }
  .fg-main     { padding: 16px 12px 60px; }
  .fg-grid     { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 540px) {
  .fg-grid   { grid-template-columns: repeat(2,1fr) !important; }
  .fg-main   { padding: 10px 8px 60px; }
  .fg-overlay-case { display: none; }
}