/* AP-R V2 hero filter — interactive layer (этап 8)
   Дополняет статичный CSS из header.php стилями для дропдаунов,
   чипов, dual-range слайдеров, тоста и live-обновления. */

/* ===== Cell as button (cursor + a11y) ===== */
.hfb-cell:not(.range){cursor:pointer; user-select:none}
.hfb-cell:not(.range):hover{background:rgba(255,255,255,.08)}
.hfb-cell.active:not(.range):hover{background:rgba(163,217,119,.30)}
.hfb-cell:focus-visible{outline:2px solid var(--green); outline-offset:2px}

/* ===== Popover ===== */
.hfb-pop{
  position:absolute; z-index:60;
  min-width:280px; max-width:min(420px, 92vw);
  background:#fff; color:#1a2030;
  border-radius:14px;
  box-shadow:0 18px 48px rgba(15,30,55,.28), 0 2px 6px rgba(15,30,55,.12);
  padding:14px 16px 12px;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .15s, transform .15s;
}
.hfb-pop.open{opacity:1; transform:translateY(0); pointer-events:auto}
.hfb-pop-h{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.hfb-pop-title{font-size:13px; font-weight:800; color:#13374f; letter-spacing:.02em}
.hfb-pop-close{
  background:transparent; border:0; cursor:pointer;
  width:24px; height:24px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#5a6b80; font-size:20px; line-height:1;
}
.hfb-pop-close:hover{background:#eef2f7; color:#1a2030}
.hfb-pop-body{display:flex; flex-direction:column; gap:6px}
.hfb-pop-f{
  display:flex; justify-content:space-between; gap:8px;
  margin-top:10px; padding-top:10px; border-top:1px solid #eef2f7;
}
.hfb-pop-f button{
  flex:1; padding:8px 12px; border-radius:8px; border:0; cursor:pointer;
  font-size:13px; font-weight:700;
}
.hfb-pop-reset{background:transparent; color:#5a6b80}
.hfb-pop-reset:hover{background:#eef2f7; color:#1a2030}
.hfb-pop-apply{background:var(--green); color:#163d10}
.hfb-pop-apply:hover{background:#8cc55f}

/* ===== Generic options list (city, type, location, etc.) ===== */
.hfb-pop-opt{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 10px; border-radius:8px;
  cursor:pointer; transition:background .12s;
  font-size:14px; color:#1a2030;
}
.hfb-pop-opt:hover{background:#f4f7fb}
.hfb-pop-opt.selected{background:rgba(163,217,119,.18); color:#163d10; font-weight:700}
.hfb-pop-opt.selected::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:#56a82f; flex-shrink:0;
}
.hfb-pop-opt .ct{font-size:12px; color:#7a8a9c; font-weight:500}
.hfb-pop-opt.selected .ct{color:#3d6f1a}
.hfb-pop-opt.disabled{opacity:.5; cursor:not-allowed}

/* ===== Chips (rooms) ===== */
.hfb-chips{display:flex; flex-wrap:wrap; gap:6px; padding:4px 0 6px}
.hfb-chip{
  padding:8px 14px; border-radius:8px; border:1.5px solid #d8e0e8;
  background:#fff; cursor:pointer;
  font-size:13.5px; font-weight:700; color:#1a2030;
  display:inline-flex; align-items:center; gap:6px;
  transition:all .12s;
}
.hfb-chip:hover{border-color:#a3d977; background:#f7fcf2}
.hfb-chip.selected{border-color:#56a82f; background:rgba(163,217,119,.22); color:#163d10}
.hfb-chip[disabled]{opacity:.4; cursor:not-allowed; pointer-events:none}
.hfb-chip .ct{font-size:11px; color:#7a8a9c; font-weight:500}
.hfb-chip.selected .ct{color:#3d6f1a}

/* Особый чип «Пентхаусы» — отделён фоном от обычных комнат, акцент янтарём */
.hfb-chip-penthouse{
  border-color:#e3b06b; background:#fff7e8; color:#7a4a10;
  margin-right:8px;
  /* визуальный разделитель справа после чипа */
  position:relative;
}
.hfb-chip-penthouse:hover{border-color:#c8902c; background:#fdeac1}
.hfb-chip-penthouse.selected{border-color:#c8902c; background:#fde2a2; color:#5f3409}

/* ===== Dual range slider — большие live значения сверху ===== */
.hfb-dr-live{
  display:flex; align-items:baseline; justify-content:center; gap:10px;
  margin:4px 0 10px;
  font-size:20px; color:var(--navy); font-weight:800;
  font-variant-numeric:tabular-nums;
}
.hfb-dr-live .hfb-dr-sep{color:var(--muted); font-weight:500}
.hfb-dr-live strong{font-weight:800}
.hfb-dr-edges{
  display:flex; justify-content:space-between;
  margin:8px 4px 0;
  font-size:11.5px; color:var(--muted); font-weight:600;
}

/* ===== Dual range slider ===== */
.hfb-dr{position:relative; padding:18px 8px 6px}
.hfb-dr-track{
  position:absolute; left:8px; right:8px; top:24px; height:4px;
  background:#e3e8ef; border-radius:2px;
}
.hfb-dr-fill{
  position:absolute; height:100%; background:#56a82f; border-radius:2px;
}
.hfb-dr input[type=range]{
  position:absolute; left:0; right:0; top:14px; width:100%;
  -webkit-appearance:none; appearance:none;
  background:transparent; pointer-events:none;
  height:24px;
}
.hfb-dr input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2.5px solid #56a82f; cursor:grab;
  pointer-events:auto;
  box-shadow:0 1px 3px rgba(15,30,55,.18);
}
.hfb-dr input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2.5px solid #56a82f; cursor:grab;
  pointer-events:auto;
  box-shadow:0 1px 3px rgba(15,30,55,.18);
}
.hfb-dr input[type=range]:active::-webkit-slider-thumb{cursor:grabbing; transform:scale(1.08)}
.hfb-dr-labels{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; gap:8px;
}
.hfb-dr-num{
  display:flex; align-items:center; gap:4px;
  background:#f4f7fb; border-radius:6px; padding:6px 10px;
  font-size:13px; font-weight:700; color:#1a2030;
}
.hfb-dr-num input{
  width:60px; border:0; background:transparent;
  font:inherit; color:inherit; text-align:right; padding:0;
  -moz-appearance:textfield;
}
.hfb-dr-num input::-webkit-inner-spin-button,
.hfb-dr-num input::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.hfb-dr-num input:focus{outline:none}
.hfb-dr-num .u{color:#7a8a9c; font-size:11px; font-weight:500; text-transform:none}
.hfb-dr-sep{color:#7a8a9c; font-weight:500}

/* ===== Loading shimmer для CTA ===== */
.hfb-cta.loading{position:relative; overflow:hidden; pointer-events:none}
.hfb-cta.loading::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation:hfb-shimmer 1s infinite;
}
@keyframes hfb-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.hfb-preset .ct.loading,
.hfb-cta .l2 .loading{opacity:.5}

/* ===== Toast ===== */
.hfb-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 60px);
  z-index:100; max-width:min(440px, 92vw);
  background:#13374f; color:#fff;
  padding:12px 16px; border-radius:10px;
  font-size:14px; line-height:1.4;
  box-shadow:0 10px 30px rgba(15,30,55,.32);
  opacity:0; transition:opacity .25s, transform .25s;
}
.hfb-toast.show{opacity:1; transform:translate(-50%, 0)}

/* ===== Mobile/Tablet overrides ===== */
@media (max-width:1023px){
  .hfb-pop{
    position:fixed; left:50%; top:50%;
    transform:translate(-50%, calc(-50% + 6px));
    width:min(440px, 92vw); max-height:80vh; overflow-y:auto;
  }
  .hfb-pop.open{transform:translate(-50%, -50%)}
  /* Backdrop */
  .hfb-pop-backdrop{
    position:fixed; inset:0; background:rgba(15,30,55,.55);
    z-index:55; opacity:0; pointer-events:none;
    transition:opacity .15s;
  }
  .hfb-pop-backdrop.show{opacity:1; pointer-events:auto}
}

/* ===== range cell — visual sync с реальным state (показываем выбранный диапазон) ===== */
.hfb-cell.range .vals span:first-child,
.hfb-cell.range .vals span:last-child{font-variant-numeric:tabular-nums}

/* ===== Highlight при изменении счётчика ===== */
.hfb-preset .ct.flash,
.hfb-cta .l2 .flash{animation:hfb-flash .6s ease}
@keyframes hfb-flash{
  0%  {background:rgba(163,217,119,.6); border-radius:4px; padding:0 4px;}
  100%{background:transparent; padding:0;}
}