/* ============================================================
   Qaraj Web App — «Поиск гаража» filter page (#/filters/garage)
   Tokens come from styles/app.css :root — nothing is redefined here.
   ============================================================ */

.gf{
  width:min(960px,92%);
  margin:0 auto;
  padding:26px 0 0;
  animation:gf-in .34s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes gf-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Header ---------- */
.gf-head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:16px;
  padding-bottom:22px;
}
.gf-back,.gf-info{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.gf-back:hover,.gf-info:hover{background:var(--bg-soft);border-color:var(--ink-mute)}
.gf-back:active,.gf-info:active{transform:scale(.94)}
.gf-head-tx h1{font-size:30px;letter-spacing:-.02em;margin-bottom:4px}
.gf-head-tx p{color:var(--ink-soft);font-size:15px}

/* ---------- Section shell ---------- */
.gf-sec{
  border-top:1px solid var(--line);
  padding:26px 0;
}
.gf-sec:first-of-type{border-top:0;padding-top:6px}
.gf-sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.gf-sec-head h2{font-size:20px;letter-spacing:-.01em}
.gf-sec-head p{color:var(--ink-soft);font-size:14px;margin-top:3px}

/* ---------- 1. Vehicle type ---------- */
.gf-veh{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.gf-veh-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:18px 16px 16px;border-radius:var(--radius);text-align:left;
  border:1.5px solid var(--line-strong);background:#fff;color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.gf-veh-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--ink-mute)}
.gf-veh-card:active{transform:translateY(-1px)}
.gf-veh-art{
  display:grid;place-items:center;width:100%;height:62px;margin-bottom:8px;
  color:var(--ink-soft);transition:color .2s ease,transform .3s cubic-bezier(.22,.9,.3,1);
}
.gf-veh-card:hover .gf-veh-art{transform:translateX(3px)}
.gf-veh-name{font-weight:700;font-size:16px}
.gf-veh-sub{font-size:13px;color:var(--ink-mute);font-weight:600}
.gf-veh-card.on{border-color:var(--brand);background:var(--brand-tint);box-shadow:0 8px 22px rgba(31,157,85,.16)}
.gf-veh-card.on .gf-veh-art{color:var(--brand-deep)}

/* ---------- 2. Parking type ---------- */
.gf-park{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gf-park-card{
  position:relative;display:flex;align-items:center;gap:14px;text-align:left;
  padding:20px;border-radius:var(--radius);
  border:1.5px solid var(--line-strong);background:#fff;color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.gf-park-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--ink-mute)}
.gf-park-ic{
  width:48px;height:48px;border-radius:var(--radius-md);display:grid;place-items:center;flex:0 0 auto;
  background:var(--bg-soft);color:var(--ink-soft);transition:background .2s ease,color .2s ease;
}
.gf-park-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.gf-park-tx b{font-size:16px}
.gf-park-tx small{color:var(--ink-soft);font-size:13px;line-height:1.35}
.gf-park-card.on{border-color:var(--brand);background:var(--brand-tint);box-shadow:0 8px 22px rgba(31,157,85,.16)}
.gf-park-card.on .gf-park-ic{background:#fff;color:var(--brand-deep)}

/* shared selected tick — pops in when the card becomes active */
.gf-tick{
  position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center;
  transform:scale(0);opacity:0;transition:transform .26s cubic-bezier(.34,1.56,.64,1),opacity .16s ease;
}
.gf-veh-card.on .gf-tick,.gf-park-card.on .gf-tick{transform:scale(1);opacity:1}

/* ---------- 3. Price ---------- */
.gf-price{padding-top:4px}
.gf-hist{
  display:flex;align-items:flex-end;gap:2px;height:74px;padding:0 10px;
  border-bottom:1px solid var(--line);
}
.gf-bar{
  flex:1;border-radius:3px 3px 0 0;background:var(--line);
  transition:background .22s ease,opacity .22s ease;
}
.gf-bar.on{background:var(--brand-2)}

.gf-slider{position:relative;height:38px;margin:0 10px}
.gf-rail,.gf-rail-on{position:absolute;top:16px;height:5px;border-radius:var(--radius-pill)}
.gf-rail{left:0;right:0;background:var(--line)}
.gf-rail-on{background:var(--brand);transition:left .08s linear,right .08s linear}
.gf-range{
  position:absolute;left:-10px;right:-10px;top:6px;width:calc(100% + 20px);height:24px;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;margin:0;
}
.gf-range:focus{outline:none}
.gf-range::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;width:26px;height:26px;border-radius:50%;
  background:#fff;border:1.5px solid var(--line-strong);box-shadow:var(--shadow-md);cursor:grab;
  transition:transform .16s ease,border-color .16s ease;
}
.gf-range::-moz-range-thumb{
  pointer-events:auto;width:26px;height:26px;border-radius:50%;
  background:#fff;border:1.5px solid var(--line-strong);box-shadow:var(--shadow-md);cursor:grab;
  transition:transform .16s ease,border-color .16s ease;
}
.gf-range::-webkit-slider-thumb:hover{transform:scale(1.12);border-color:var(--brand)}
.gf-range::-moz-range-thumb:hover{transform:scale(1.12);border-color:var(--brand)}
.gf-range:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.18)}
.gf-range:focus-visible::-webkit-slider-thumb{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.gf-range:focus-visible::-moz-range-thumb{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}

.gf-price-out{display:flex;align-items:center;gap:12px;margin-top:18px}
.gf-price-box{
  flex:1;border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:12px 16px;
  display:flex;flex-direction:column;gap:2px;
}
.gf-price-box small{font-size:12px;font-weight:700;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.05em}
.gf-price-box b{font-size:20px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.gf-price-dash{width:14px;height:1.5px;background:var(--line-strong);border-radius:2px;flex:0 0 auto}

/* ---------- 4 & 5. Chips ---------- */
.gf-chips{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.gf-chips::-webkit-scrollbar{display:none}
.gf-chips.wrap{flex-wrap:wrap;overflow:visible}
.gf-chip{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:0 0 auto;
  border:1.5px solid var(--line-strong);border-radius:var(--radius-pill);
  padding:11px 18px;font-weight:600;font-size:14px;background:#fff;color:var(--ink);
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease;
}
.gf-chip svg{color:var(--ink-mute);transition:color .18s ease}
.gf-chip:hover{border-color:var(--ink-soft);transform:translateY(-1px)}
.gf-chip.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-deep)}
.gf-chip.on svg{color:var(--brand)}

/* ---------- 6. Availability ---------- */
.gf-switch{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px;cursor:pointer;flex:0 0 auto}
.gf-switch input{position:absolute;opacity:0;width:0;height:0}
.gf-switch-ui{
  width:44px;height:26px;border-radius:var(--radius-pill);background:var(--line-strong);position:relative;
  transition:background .22s ease;flex:0 0 auto;
}
.gf-switch-ui::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(15,23,34,.28);
  transition:transform .24s cubic-bezier(.34,1.4,.64,1);
}
.gf-switch input:checked + .gf-switch-ui{background:var(--brand)}
.gf-switch input:checked + .gf-switch-ui::after{transform:translateX(18px)}
.gf-switch input:focus-visible + .gf-switch-ui{box-shadow:0 0 0 4px var(--brand-tint)}

/* read-only mirror of the dates picked in the search bar — no calendar here */
.gf-dates{display:flex;align-items:stretch;gap:12px}
.gf-date{
  flex:1;text-align:left;border:1.5px solid var(--line-strong);border-radius:var(--radius-md);padding:11px 16px;
  display:flex;flex-direction:column;gap:1px;background:#fff;color:var(--ink);
}
.gf-date small{font-size:12px;font-weight:700;color:var(--ink-mute)}
.gf-date b{font-size:15px;font-weight:700}
.gf-date:not(.set) b{color:var(--ink-mute);font-weight:600}
.gf-date.set{border-color:var(--brand)}
.gf-opt{font-weight:600;text-transform:none;letter-spacing:0;opacity:.75}
.gf-avail-note{
  display:flex;align-items:center;gap:8px;margin-top:12px;
  font-size:14px;font-weight:600;color:var(--ink-soft);
}
.gf-avail-note svg{stroke:var(--ink-mute);flex:0 0 auto}
.gf-avail-note .linkbtn{margin-left:auto;color:var(--brand-deep);font-size:14px}

/* ---------- 7. Sorting ---------- */
.gf-select{
  position:relative;display:flex;align-items:center;gap:12px;max-width:420px;
  border:1.5px solid var(--line-strong);border-radius:var(--radius-md);padding:0 16px;
  color:var(--ink-soft);transition:border-color .18s ease;
}
.gf-select:hover,.gf-select:focus-within{border-color:var(--brand)}
.gf-select select{
  flex:1;-webkit-appearance:none;appearance:none;border:0;background:none;outline:none;
  padding:14px 0;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;
}
.gf-select > svg:last-child{transform:rotate(90deg);flex:0 0 auto;pointer-events:none}

/* ---------- Sticky footer ---------- */
.gf-foot-spacer{height:26px}
.gf-foot{
  position:sticky;bottom:0;z-index:30;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line);
}
.gf-foot-in{
  width:min(960px,92%);margin:0 auto;padding:14px 0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.gf-reset{gap:8px}
.gf-reset[disabled]{opacity:.45;pointer-events:none}
.gf-show{min-width:210px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gf-show[disabled]{opacity:.5;pointer-events:none;box-shadow:none}
.gf-badge{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--radius-pill);background:var(--brand);color:#fff;font-size:12px;font-weight:800;
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .gf{width:92%;padding-top:18px}
  .gf-head-tx h1{font-size:26px}
  .gf-veh{
    display:flex;gap:12px;overflow-x:auto;margin:0 -4%;padding:4px 4% 8px;
    scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .gf-veh::-webkit-scrollbar{display:none}
  .gf-veh-card{flex:0 0 148px;scroll-snap-align:start}
  .gf-veh-card:hover{transform:none}
  .gf-park{grid-template-columns:1fr}
  .gf-sec-head{flex-direction:column;gap:12px}
  .gf-foot-in{width:92%}
  .gf-show{min-width:0;flex:1 1 auto;padding-left:14px;padding-right:14px}
  .gf-reset{flex:0 0 auto;padding-left:14px;padding-right:14px}
  .gf-reset .gf-badge{display:none}
}
@media (max-width:560px){
  .gf-head{grid-template-columns:auto 1fr;gap:12px}
  .gf-info{display:none}
  .gf-head-tx h1{font-size:22px}
  .gf-price-out{flex-direction:column;align-items:stretch;gap:10px}
  .gf-price-dash{display:none}
  .gf-dates{flex-wrap:wrap}
  .gf-date{flex:1 1 100%}
  .gf-foot-in{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  .gf,.gf-veh-card,.gf-park-card,.gf-tick,.gf-chip,.gf-switch-ui::after,.gf-bar,.gf-rail-on{
    animation:none !important;transition:none !important;
  }
}

/* ============================================================
   Фильтры modal
   The Airbnb filter-sheet proportions — 840×760, 32px radius, 72px header,
   92px footer, 36px gutters — on Qaraj's own tokens and type. The sections
   inside are the same .gf-sec blocks the filter set already renders, so only
   the shell and a few density overrides live here.
   ============================================================ */
.overlay:has(.fmodal){padding:24px}
.fmodal{
  width:840px;max-width:100%;height:760px;max-height:100%;
  background:var(--bg);border-radius:32px;overflow:hidden;
  box-shadow:0 8px 28px rgba(15,23,34,.12), 0 2px 8px rgba(15,23,34,.08);
  display:flex;flex-direction:column;
}
.fm-head{
  position:relative;flex:0 0 auto;height:72px;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line);
}
.fm-head h2{font-size:18px;font-weight:700;letter-spacing:-.01em}
.fm-close{
  position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink);transition:background .15s ease;
}
.fm-close:hover{background:var(--bg-soft)}
.fm-close svg{stroke:currentColor}

.fm-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 36px}
/* inside the sheet the sections carry the gutters, and the first one keeps the
   same 28px rhythm as the rest rather than the page's tightened top */
.fm-body .gf-sec{padding:28px 0}
.fm-body .gf-sec:first-of-type{border-top:0;padding-top:28px}

/* the footer bar the filter module renders becomes the sheet's action row */
.fmodal .gf-foot{
  position:static;flex:0 0 auto;height:92px;
  background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-top:1px solid var(--line);
}
.fmodal .gf-foot-in{width:auto;margin:0;padding:0 36px;height:100%}
.fmodal .gf-show{height:56px;padding:0 32px;border-radius:var(--radius);font-size:16px}
.fmodal .gf-reset{height:48px}
/* the sizing summary the Площадь set puts in its footer */
.fmodal .sf-foot-sum{gap:24px}

@media (max-width:900px){
  .overlay:has(.fmodal){padding:0}
  .fmodal{width:100%;height:100%;border-radius:0}
  .fm-body{padding:0 20px}
  .fmodal .gf-foot-in{padding:0 20px;gap:10px}
  .fmodal .gf-show{min-width:0;flex:1}
}