/* ============================================================
   birev.az — Premium real estate
   Editorial / light theme · accent red
   ============================================================ */

:root{
  --paper:    #f4f4f4;
  --white:    #FFFFFF;
  --ink:      #1B1916;
  --ink-2:    #6E695F;
  --ink-3:    #A39C8E;
  --line:     rgba(27,25,22,.12);
  --line-soft:rgba(27,25,22,.08);
  --accent:   #D6215F;
  --price:    var(--ink);
  --maxw:     1280px;
  --rest-shadow:  0 2px 10px rgba(27,25,22,.07), 0 1px 2px rgba(27,25,22,.05);
}

*{ box-sizing:border-box; }
input,textarea,select{ font-size:16px; }
html,body{ margin:0; padding:0; overflow-x:clip; }
*{ -webkit-tap-highlight-color:transparent; }
*:focus,*:focus-visible{ outline:none; }
body{
  background:var(--paper);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; -webkit-appearance:none; appearance:none; }
img{ max-width:100%; display:block; }
::selection{ background:rgba(255,33,83,.16); }

.serif{ font-family:'Playfair Display',Georgia,serif; }
.container{ max-width:var(--maxw); width:100%; margin:0 auto; padding:0 40px; box-sizing:border-box; }

/* ---------- HEADER ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,241,234,.8);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(27,25,22,.1);
}
.header-inner{
  height:60px; display:flex; align-items:center;
  justify-content:space-between; gap:28px;
}
.logo{ display:flex; align-items:center; }
.logo-img{ height:30px; width:auto; display:block; }
.footer-brand .logo-img{ height:32px; }

.main-nav{ display:flex; align-items:center; gap:34px; white-space:nowrap; }
.main-nav a{ font-size:13.5px; font-weight:500; color:var(--ink-2); transition:color .15s; }
.main-nav a:hover,.main-nav a.active{ color:var(--ink); }

.header-actions{ display:flex; align-items:center; gap:11px; }
.globe{ font-size:19px; color:var(--ink-2); cursor:pointer; }

/* ---------- LANGUAGE SWITCHER ---------- */
.lang-switch{ position:relative; }
.globe-btn{ display:flex; align-items:center; gap:6px; color:var(--ink-2); font-size:13px; font-weight:600; transition:color .15s; }
.globe-btn:hover{ color:var(--ink); }
.globe-btn .globe{ cursor:inherit; }
.lang-dropdown{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  min-width:160px; z-index:60; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 50px -18px rgba(27,25,22,.3); padding:6px; list-style:none; margin:0;
  display:none;
}
.lang-switch.open .lang-dropdown{ display:block; }
.lang-dropdown li a{ display:block; padding:9px 14px; border-radius:9px; font-size:13.5px; color:var(--ink-2); transition:.12s; }
.lang-dropdown li a:hover{ background:var(--paper); color:var(--ink); }
.lang-dropdown li a.active{ color:var(--accent); font-weight:600; }
.icon-btn{
  width:42px; height:42px; border-radius:50%; background:#fff;
  border:1px solid rgba(27,25,22,.12); display:flex; align-items:center; justify-content:center;
  color:var(--ink-2); font-size:18px;
  box-shadow:0 2px 8px -2px rgba(27,25,22,.14), 0 1px 2px rgba(27,25,22,.06);
  transition:border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.icon-btn:hover{ border-color:rgba(27,25,22,.3); box-shadow:0 4px 12px -2px rgba(27,25,22,.18), 0 1px 2px rgba(27,25,22,.08); transform:translateY(-1px); }
.icon-btn.active{ color:var(--accent); border-color:var(--accent); }
.user-btn{ width:auto; padding:0 14px 0 10px; gap:8px; border-radius:12px; }
.user-btn:hover{ border-color:var(--accent); color:var(--accent); }
.user-btn-label{ font-size:13px; font-weight:600; white-space:nowrap; }
.user-avatar-btn{
  width:42px; height:42px; border-radius:12px; flex:none;
  background:none; border:none; padding:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative;
}
.user-avatar-img{
  width:42px; height:42px; border-radius:12px;
  background:#fff; border:1px solid rgba(27,25,22,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--ink-2);
  box-shadow:0 2px 8px -2px rgba(27,25,22,.14), 0 1px 2px rgba(27,25,22,.06);
  overflow:hidden; flex:none; transition:border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.user-avatar-btn:hover .user-avatar-img{
  border-color:rgba(27,25,22,.3);
  box-shadow:0 4px 12px -2px rgba(27,25,22,.18), 0 1px 2px rgba(27,25,22,.08);
  transform:translateY(-1px);
}
.user-avatar-bell{
  position:absolute; top:-6px; right:-6px;
  width:20px; height:20px; border-radius:50%;
  background:#d1d5db; border:2.5px solid #fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#6b7280;
  transition:background .2s, color .2s;
}
.user-avatar-bell--active{
  background:var(--accent); color:#fff;
  animation:bell-pulse 2s ease-in-out infinite;
}
@keyframes bell-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(220,38,80,.5); }
  60%{ box-shadow:0 0 0 6px rgba(220,38,80,.0); }
}
.user-avatar{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:#fff; border:1px solid rgba(27,25,22,.12);
  color:var(--ink); font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; user-select:none;
}
.user-dropdown-head{
  display:flex; align-items:center; gap:10px; padding:10px 12px 12px;
}
.user-dropdown-head .user-avatar{ width:38px; height:38px; border-radius:11px; font-size:16px; flex:none; }
.user-dropdown-name{ font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.3; }
.user-dropdown-phone{ font-size:12px; color:var(--ink-3); margin-top:1px; }
.user-menu{ position:relative; }
.user-dropdown{
  position:absolute; top:calc(100% + 8px); right:0; min-width:180px;
  background:#fff; border:1px solid var(--line); border-radius:13px;
  box-shadow:0 8px 24px rgba(0,0,0,.10); padding:6px; z-index:200;
}
.user-dropdown-item{
  display:flex; align-items:center; gap:9px; width:100%; padding:9px 12px;
  font-size:13.5px; font-weight:500; color:var(--ink); border-radius:9px;
  background:none; border:none; cursor:pointer; text-align:left; transition:background .12s;
  text-decoration:none;
}
.user-dropdown-item:hover{ background:var(--bg); }
.user-dropdown-item i{ font-size:16px; color:var(--ink-2); }
.user-dropdown-item--danger{ color:#c0163a; }
.user-dropdown-item--danger i{ color:#c0163a; }
.dropdown-notif-badge,
.sidebar-notif-badge{
  margin-left:auto; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--accent); color:#fff;
  font-size:11px; font-weight:700; line-height:18px; text-align:center;
  flex:none;
}
.user-dropdown-sep{ height:1px; background:var(--line); margin:4px 0; }

.fav-link{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px; flex:none; position:relative;
  background:#fff; border:1px solid rgba(27,25,22,.12);
  color:var(--ink-2); font-size:18px;
  box-shadow:0 2px 8px -2px rgba(27,25,22,.14), 0 1px 2px rgba(27,25,22,.06);
  transition:color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.fav-link:hover{ color:var(--accent); border-color:rgba(27,25,22,.3); box-shadow:0 4px 12px -2px rgba(27,25,22,.18), 0 1px 2px rgba(27,25,22,.08); transform:translateY(-1px); }
.fav-link.active{ color:var(--accent); border-color:var(--accent); }
.fav-link-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:19px; height:19px; padding:0 4px; border-radius:10px;
  background:var(--accent); color:#fff; font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}

.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; transition:filter .15s; }
.btn[hidden],
.ghost-btn[hidden]{ display:none; }
.btn-primary{
  height:42px; padding:0 22px; border-radius:12px;
  background:var(--accent); color:#fff; font-size:13.5px;
  box-shadow:0 6px 16px -4px rgba(255,33,83,.45);
  transition:filter .15s, box-shadow .15s, transform .15s;
}
.btn-primary:hover{ filter:brightness(1.06); box-shadow:0 8px 20px -4px rgba(255,33,83,.55); transform:translateY(-1px); }
.btn-lg{ height:56px; padding:0 30px; border-radius:16px; font-size:15px; }

.btn-spinner{ display:none; }
.btn.is-loading{ pointer-events:none; opacity:.85; }
.btn.is-loading .btn-spinner{
  display:inline-block;
  width:16px; height:16px; border-radius:50%; flex:none;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:btn-spin .6s linear infinite;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
.reveal-phone-btn.is-loading > i,
.reveal-whatsapp-btn.is-loading > i{ display:none; }
.btn-outline.is-loading .btn-spinner{ border-color:rgba(27,25,22,.2); border-top-color:var(--ink); }

/* ── Contact bottom sheet (mobile "call" icon in the sticky CTA) ── */
.contact-sheet .bs-body{ display:flex; flex-direction:column; gap:2px; padding:6px 16px 22px; }
.contact-sheet-item{
  display:flex; align-items:center; gap:13px;
  width:100%; padding:11px 8px; border-radius:12px;
  background:none; border:none; text-align:left; text-decoration:none;
  font-family:inherit; font-size:15px; font-weight:600; color:var(--ink);
  transition:background .12s;
}
.contact-sheet-item:hover{ background:var(--paper); }
.contact-sheet-item.is-loading{ opacity:.6; pointer-events:none; }
.cs-icon{
  width:40px; height:40px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,33,83,.08); color:var(--accent); font-size:19px;
  box-shadow:0 3px 8px -3px rgba(255,33,83,.35);
}
#csCall .cs-icon{ background:rgba(37,99,235,.1); color:#2563eb; box-shadow:0 3px 8px -3px rgba(37,99,235,.35); }
.contact-sheet-item--wa .cs-icon{ background:rgba(37,211,102,.14); color:#1DA851; box-shadow:0 3px 8px -3px rgba(37,211,102,.35); }
.cs-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-copy{
  flex:none; width:36px; height:36px; border-radius:10px;
  background:var(--paper); border:none; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.cs-copy i{ font-size:15px; }
.cs-copy:hover{ background:#ebebeb; color:var(--ink); }
.cs-copy--done{ background:rgba(31,138,91,.14); color:#1F8A5B; }

/* ---------- DEV NOTICE ---------- */
.dev-notice{
  display:flex; align-items:center; gap:14px; margin-top:20px; padding:14px 16px;
  background:rgba(214,33,95,.13);
  border:1.5px solid rgba(214,33,95,.4); border-radius:9px;
  box-shadow:0 2px 10px -2px rgba(214,33,95,.15);
}
.dev-notice[hidden]{ display:none; }
.dev-notice-icon{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; border-radius:9px;
  background:linear-gradient(135deg, var(--accent), #a8154a);
  color:#fff; font-size:17px;
  box-shadow:0 4px 10px -2px rgba(214,33,95,.55);
}
.dev-notice-body{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.dev-notice-body strong{ font-size:14px; font-weight:700; color:var(--accent); }
.dev-notice-body span{ font-size:13px; color:var(--ink-2); line-height:1.4; }
.dev-notice-badge{
  display:inline-flex; align-self:flex-start; align-items:center; gap:6px; margin-top:4px;
  font-size:12px; font-weight:700; color:var(--accent);
  background:rgba(214,33,95,.12); padding:6px 12px; border-radius:9px;
}
.dev-notice-badge i{ font-size:13px; }
.dev-notice-close{
  display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0;
  background:#fff; border:1px solid rgba(214,33,95,.3); border-radius:50%; color:var(--ink-3);
  font-size:13px; cursor:pointer; transition:border-color .15s, color .15s, transform .15s;
}
.dev-notice-close:hover{ border-color:var(--accent); color:var(--accent); transform:rotate(90deg); }

@media (max-width: 640px){
  .dev-notice{ align-items:flex-start; }
}

/* ---------- HERO ZONE ---------- */
.hero-zone{
  padding-top:36px; padding-bottom:52px; position:relative; isolation:isolate;
}
.hero-zone::before{
  content:''; pointer-events:none; position:absolute; z-index:0;
  width:860px; height:860px; border-radius:50%;
  top:-360px; right:-240px;
  background:radial-gradient(circle, rgba(255,33,83,.075) 0%, transparent 66%);
}
.hero-zone::after{
  content:''; pointer-events:none; position:absolute; z-index:0;
  width:460px; height:460px; border-radius:50%;
  bottom:-100px; left:-120px;
  background:radial-gradient(circle, rgba(255,33,83,.035) 0%, transparent 70%);
}

/* ---------- MASTHEAD ---------- */
.masthead{ margin-bottom:48px; margin-left:4px; position:relative; z-index:1; }
.search-card{ position:relative; z-index:1; }
.hero-watermark{
  position:absolute; z-index:0; pointer-events:none;
  width:120px; right:60px; top:47%; transform:translateY(-50%);
  opacity:.09;
}
.kicker{ font-size:11.5px; letter-spacing:.34em; font-weight:700; color:var(--accent); margin-bottom:22px; }
.edit-mode-kicker{ display:inline-flex; align-items:center; gap:6px; }
.edit-mode-kicker i{ font-size:13px; }
.kicker.small{ letter-spacing:.28em; margin-bottom:16px; }
.masthead h1{ font-weight:700; font-size:68px; line-height:1.05; letter-spacing:-.025em; margin:0; }
.accent-word{ font-style:italic; font-weight:500; color:var(--accent); }
#typeword::after{
  content:'|'; display:inline-block;
  color:var(--accent); margin-left:2px;
  font-size:.75em; vertical-align:.15em;
  animation:typeblink 1.2s step-end infinite;
}
@keyframes typeblink{ 0%,100%{opacity:1} 50%{opacity:0} }
.lead{ margin:26px 0 0; font-size:17px; color:var(--ink-2); max-width:520px; line-height:1.6; }

/* ---------- SEARCH CARD ---------- */
.search-card{
  background:#fff;
  border-radius:24px;
  border:1px solid rgba(27,25,22,.09);
  box-shadow:0 24px 64px -20px rgba(27,25,22,.18), 0 4px 16px -4px rgba(27,25,22,.06);
  overflow:hidden;
  opacity:0; transition:opacity .22s ease;
}
.search-card.is-ready{ opacity:1; }

/* ---------- CATEGORY TABS (inside search-card) ---------- */
.tabs.swiper{
  padding:0 20px;
  border-radius:24px 24px 0 0;
  overflow-x:clip;
  overflow-y:visible;
  position:relative;
}
.tabs.swiper .swiper-wrapper{
  display:flex; flex-wrap:nowrap; align-items:stretch;
}
.tabs.swiper .swiper-slide{
  width:auto; flex-shrink:0;
}
/* fade overlays — real divs, siblings of #tabs inside .search-card */
.tabs-fade{
  position:absolute; top:0; height:54px;
  width:72px; pointer-events:none; z-index:20;
  transition:opacity .2s;
}
.tabs-fade--r{
  right:0;
  background:linear-gradient(to right, rgba(255,255,255,0), #fff 70%);
}
.tabs-fade--l{
  left:0;
  background:linear-gradient(to left, rgba(255,255,255,0), #fff 70%);
  opacity:0;
}
.tabs-fade--r.is-hidden{ opacity:0; }
.tabs-fade--l.is-visible{ opacity:1; }
/* Filter UI (bar, advanced modal, location modal, sort/category dropdowns,
   mobile bottom sheet) — disable text selection on the chrome (pills,
   buttons, labels) so quick clicks/drags don't accidentally select text.
   Real text inputs (search boxes, range min/max) stay selectable. */
.search-card, .search-card *,
#advModal, #advModal *,
#locModal, #locModal *,
.sort-select, .sort-select *,
.dropdown, .dropdown *,
.bs-panel, .bs-panel *{
  user-select:none;
}
.search-card input, .search-card textarea,
#advModal input, #advModal textarea,
#locModal input, #locModal textarea,
.sort-select input,
.dropdown input,
.bs-panel input{
  user-select:text;
}

.filter-bar{ border-top:1px solid rgba(27,25,22,.07); }
.tabs .swiper-slide{ width:auto; }
.tab{
  display:flex; align-items:center; gap:9px;
  padding:16px 14px 15px; margin-bottom:-1px;
  border-bottom:2px solid transparent; color:var(--ink-3);
  white-space:nowrap; transition:color .14s; cursor:pointer;
}
.tab i{ font-size:18px; }
.tab span{ font-size:14px; font-weight:500; }
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
.tab.active span{ font-weight:600; }
.tab.active i{ color:var(--accent); }

/* ---------- FILTER BAR ---------- */
/* ========= FILTER BAR ========= */
.filter-bar{
  position:relative;
  display:flex; align-items:stretch;
  background:#fff; overflow:visible;
}
.filter-seg{
  position:relative; flex:1; padding:8px 20px;
  display:flex; flex-direction:column; gap:4px; justify-content:center;
  cursor:pointer; transition:background .15s;
}
.filter-seg + .filter-seg{
  border-left:1px solid rgba(27,25,22,.07);
}
.filter-seg:hover{ background:rgba(244,241,234,.5); }
.filter-seg.open{ background:var(--paper); }

.seg-label{
  font-size:10.5px; color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.08em; font-weight:700; line-height:1;
  display:flex; align-items:center; gap:5px;
}
.seg-label i{ font-size:12px; position:relative; top:.5px; }
.seg-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.seg-val{ font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seg-val.muted{ color:var(--ink-3); font-weight:400; }
.seg-ph .seg-val.muted{ color:var(--ink-2); font-weight:500; font-size:14px; }
.seg-row .ph-caret-down{ font-size:12px; color:var(--ink-3); transition:transform .2s; flex-shrink:0; }
.filter-seg.open .seg-row .ph-caret-down{ transform:rotate(180deg); }

/* address segment */
.seg-address{ flex:2; cursor:pointer; flex-direction:row; align-items:center; gap:8px; padding:8px 16px; }
.seg-input{
  border:none; outline:none; background:none; padding:0; width:100%;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink);
  pointer-events:none; cursor:pointer; caret-color:transparent; user-select:none;
}
.seg-input::placeholder{ color:var(--ink-3); font-weight:400; }

/* search button */
.search-wrap{ display:flex; align-items:center; gap:6px; flex:none; }
.adv-btn{
  width:46px; height:46px; border-radius:14px; flex:none;
  background:#fff; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-2); transition:.15s; cursor:pointer;
  box-shadow:0 1px 4px rgba(27,25,22,.06);
}
.adv-btn i{ font-size:17px; }
.adv-btn:hover{ border-color:var(--ink-2); color:var(--ink); }
.adv-btn.active{ border-color:var(--accent); color:var(--accent); }
.search-btn{
  height:46px; padding:0 18px; border-radius:14px; flex:none;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  gap:7px; color:#fff; box-shadow:0 6px 18px -4px rgba(255,33,83,.45); transition:.17s;
  font-size:14px; font-weight:700; font-family:inherit; white-space:nowrap;
}
.search-btn::after{ content:'Axtar'; }
.search-btn i{ font-size:18px; }
.search-btn:hover{ box-shadow:0 10px 24px -4px rgba(255,33,83,.55); transform:scale(1.04); }

/* dropdown popover */
.dropdown{
  position:fixed; min-width:200px; z-index:200;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 20px 50px -16px rgba(27,25,22,.28); padding:6px; list-style:none; margin:0;
}
.dropdown li{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-radius:10px; font-size:14px; color:var(--ink-2);
  cursor:pointer; transition:.12s; line-height:1.3; gap:12px;
}
.dropdown li:hover{ background:var(--paper); color:var(--ink); }
.dropdown li.sel{ color:var(--ink); font-weight:600; }
.dd-opt-label{ flex:1; }
.dd-tick{ font-size:13px; color:var(--accent); flex:none; transition:opacity .15s; }
.dd-tick--hidden{ opacity:0; }

/* range picker dropdown (price, rent) */
.dd-range{
  position:fixed; z-index:200;
  padding:16px;
  background:#fff; border:1px solid var(--line);
  border-radius:16px; width:260px;
  box-shadow:0 20px 50px -16px rgba(27,25,22,.28);
  display:flex; flex-direction:column; gap:12px;
}
.dd-range-label{
  font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
.dd-range-inputs{
  display:flex; align-items:center;
  background:#fff; border:1.5px solid var(--line);
  border-radius:10px; overflow:hidden;
}
.dd-range-inp{
  flex:1; height:40px; min-width:0;
  border:none; background:#fff;
  padding:0 12px; font-size:14px; font-family:inherit; font-weight:500;
  color:var(--ink); outline:none;
  -moz-appearance:textfield;
}
.dd-range-inp::-webkit-inner-spin-button,
.dd-range-inp::-webkit-outer-spin-button{ -webkit-appearance:none; }
.dd-range-inp::placeholder{ color:var(--ink-3); }
.dd-range-inp:focus{ background:#fff; }
.dd-range-sep{
  width:1px; height:24px; background:var(--line); flex:none;
}
.dd-range-apply{
  height:38px; border-radius:9px;
  background:var(--accent); color:#fff;
  font-size:13px; font-weight:700; font-family:inherit;
  border:none; cursor:pointer; transition:opacity .15s;
}
.dd-range-apply:hover{ opacity:.85; }

/* chip-style picker dropdown (rooms, floor) */
.dd-chips{
  position:fixed; z-index:200;
  display:flex; align-items:center; gap:4px;
  padding:5px;
  background:#fff; border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 12px 32px -8px rgba(27,25,22,.2);
}
.dd-chip{
  width:36px; height:36px; border-radius:9px;
  font-size:13px; font-weight:600; color:var(--ink-2);
  background:var(--paper); border:none;
  display:flex; align-items:center; justify-content:center;
  transition:all .12s; cursor:pointer; flex:none;
}
.dd-chip:hover{ background:#e8e4db; color:var(--ink); }
.dd-chip.active{ background:var(--accent); color:#fff; box-shadow:0 3px 10px -3px rgba(255,33,83,.4); }
.dd-chip.dd-chip-reset{ width:30px; color:var(--ink-3); background:transparent; font-size:12px; }
.dd-chip.dd-chip-reset:hover{ background:var(--paper); color:var(--ink); }
.dropdown.scroll{ max-height:280px; overflow-y:auto; }
.dropdown.addr{ min-width:280px; padding:6px; }
.dropdown.addr li{ display:flex; align-items:center; gap:10px; border-radius:10px; padding:10px 12px; }
.dropdown.addr li:hover{ background:var(--paper); }
.dropdown.addr li span{ font-size:14px; color:var(--ink-2); }
.dropdown.addr .addr-empty{ color:var(--ink-3); justify-content:center; cursor:default; }
.addr-ic{ font-size:14px; color:var(--ink-3); flex-shrink:0; }
/* ---------- ADVANCED PANEL ---------- */
.adv-panel{ display:none; border-top:1px solid rgba(27,25,22,.07); }
.adv-panel-inner{ display:flex; flex-wrap:wrap; gap:0; padding:20px 24px 22px; }
.adv-group{
  display:flex; flex-direction:column; gap:10px;
  padding:0 28px 0 0; min-width:160px;
  border-right:1px solid var(--line-soft); margin-right:28px;
}
.adv-group:last-child{ border-right:none; margin-right:0; padding-right:0; }
.adv-group-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.adv-range{ display:flex; align-items:center; gap:6px; }
.adv-inp{
  width:64px; height:32px; border:1.5px solid var(--line); border-radius:9px;
  padding:0 10px; font-family:inherit; font-size:13.5px; color:var(--ink);
  background:#fff; outline:none; transition:border-color .15s;
}
.adv-inp:focus{ border-color:var(--accent); }
.adv-inp::-webkit-inner-spin-button{ -webkit-appearance:none; }
.adv-dash{ color:var(--ink-3); font-size:13px; }
.adv-checks{ display:flex; flex-direction:column; gap:7px; }
.adv-check-lbl{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--ink-2); cursor:pointer; transition:color .12s;
}
.adv-check-lbl:hover{ color:var(--ink); }
.adv-check-lbl input[type="checkbox"]{ accent-color:var(--accent); width:15px; height:15px; cursor:pointer; }

.dropdown li.sub-opt{
  padding-left:16px; font-size:13px; color:var(--ink-3);
  display:flex; align-items:center; gap:7px;
}
.sub-opt-ic{ font-size:14px; color:var(--ink-3); flex-shrink:0; }
.dropdown li.sub-opt--hidden{ display:none; }
.dropdown li.sub-opt:hover{ color:var(--ink); }
.dropdown li.sub-opt:hover .sub-opt-ic{ color:var(--ink-2); }
.dropdown li.sub-opt.sel{ color:var(--accent); }
.dropdown li.sub-opt.sel .sub-opt-ic{ color:var(--accent); }

/* ---------- SECTION HEAD ---------- */
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:84px; padding-top:26px; margin-bottom:28px;
  border-top:none;
  background:linear-gradient(to right, transparent, var(--line) 15%, var(--line) 85%, transparent) no-repeat top/100% 1px;
}
.hero-zone + .section-head{ background:none; padding-top:0; margin-top:0; }
.section-title-wrap{ display:flex; align-items:center; gap:12px; }
.section-index{ display:flex; align-items:center; justify-content:center; flex:none; color:var(--accent); }
.section-index i{ font-size:23px; line-height:1; position:relative; top:.09em; }
.section-head h2{ font-weight:700; font-size:24px; letter-spacing:-.01em; margin:0; }
.see-all{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink); transition:color .15s; }
.see-all i{ font-size:14px; }
.see-all:hover{ color:var(--accent); }
.section-seo-note{ font-size:13px; color:var(--ink-3); margin:0; text-align:right; max-width:340px; }

/* ---------- GRIDS ---------- */
.grid{ display:grid; }
.grid-4{ grid-template-columns:repeat(4,1fr); gap:18px; }
.grid-5{ grid-template-columns:repeat(5,1fr); gap:18px; }
.grid-7{ grid-template-columns:repeat(7,1fr); gap:18px; }

/* ---------- INFINITE SCROLL ---------- */
.infinite-scroll-sentinel{ display:flex; align-items:center; justify-content:center; height:1px; margin-top:32px; }
.infinite-scroll-sentinel.is-loading{ height:auto; padding:20px 0; }
.infinite-scroll-spinner{
  display:none; width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(27,25,22,.12); border-top-color:var(--accent);
  animation:infiniteScrollSpin .7s linear infinite;
}
.infinite-scroll-sentinel.is-loading .infinite-scroll-spinner{ display:block; }
@keyframes infiniteScrollSpin{ to{ transform:rotate(360deg); } }

/* ---------- LISTING CARD ----------
   Literal port of the "Property Card — Final" design handoff. Wrapper/media/
   fav keep their original class names since main.js/favorites.js/search-results.js
   bind to them (.card, .card-media, .card-media-img, .fav, data-listing-id)
   — everything else uses the handoff's own property-card__ class names,
   verbatim. --card-accent is set inline per card from the listing's category
   color (config/listing_types.php); the compare button in the handoff was
   dropped since there's no comparison feature on the site yet. */
.card{
  --card-accent: var(--accent);
  position:relative; cursor:pointer;
  background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:var(--rest-shadow);
  transition:transform .15s ease-out, box-shadow .4s ease;
  will-change:transform;
  min-width:0; /* let the grid track shrink instead of growing to fit nowrap text */
  display:flex; flex-direction:column; height:100%;
}
.card:hover{
  box-shadow:0 34px 54px -22px color-mix(in srgb, var(--card-accent) 32%, transparent), 0 16px 26px -14px rgba(27,25,22,.22);
}
/* cursor-tracking glare, driven by --glare-x/--glare-y/--glare-o set in main.js */
.card::after{
  content:''; position:absolute; inset:0; border-radius:10px; pointer-events:none;
  background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%), rgba(255,255,255,var(--glare-o,0)), transparent 60%);
  transition:background .25s ease;
}

.card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#e9e4da; }
.card-media-img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1); transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-media-img{ transform:scale(1.06); }
/* Portrait photos would lose their top/bottom on a landscape crop —
   letterbox those instead. Landscape/square photos fill the box edge to
   edge (only a sliver gets cropped off the sides, never anything important).
   Toggled by main.js after checking each photo's real width/height. */
.card-media.is-portrait .card-media-img{ object-fit:cover; }

/* shimmer shown until the photo finishes loading — main.js toggles is-loaded */
.property-card__skeleton{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, #e9e4da 30%, #f4f0ec 50%, #e9e4da 70%);
  background-size:250% 100%;
  animation:skeletonShimmer 1.4s ease-in-out infinite;
  opacity:1; transition:opacity .6s ease;
}
.property-card__skeleton.is-loaded{ opacity:0; }
@keyframes skeletonShimmer{
  0%{ background-position:-150% 0; }
  100%{ background-position:150% 0; }
}

.property-card__tag{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center; gap:5px; max-width:calc(100% - 90px);
  padding:4px 10px 4px 8px; border-radius:100px;
  background:rgba(255,255,255,.95); box-shadow:0 1px 4px rgba(27,25,22,.12);
}
.property-card__tag i{ font-size:12px; color:var(--card-accent); flex:none; }
.property-card__tag span{ min-width:0; font-size:11px; font-weight:600; letter-spacing:.01em; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.property-card__bottom-badges{ position:absolute; bottom:14px; left:14px; z-index:2; display:flex; gap:6px; }
.property-card__mortgage{
  width:28px; height:28px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:#2563EB; color:#fff;
  box-shadow:0 2px 6px rgba(27,25,22,.15);
}
.property-card__mortgage i{ font-size:14px; }

/* handoff's .property-card__actions counter-rotates against the card's tilt
   (main.js) so its buttons stay upright/clickable — kept (holding the
   premium badge + heart) even though the compare button next to them in
   the handoff was dropped. */
.property-card__actions{
  position:absolute; top:12px; right:9px; z-index:2;
  display:flex; align-items:center; gap:8px;
  transition:transform .15s ease-out;
}

/* our own real, working favorite button — kept as-is regardless of the
   handoff's placeholder heart styling/markup. */
.fav{
  position:relative; z-index:2;
  width:28px; height:28px; border-radius:50%;
  background:rgba(27,25,22,.32);
  backdrop-filter:blur(6px) saturate(160%);
  -webkit-backdrop-filter:blur(6px) saturate(160%);
  border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 3px 10px -2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  transition:color .18s, transform .18s, background .18s, border-color .18s, box-shadow .18s;
}
.fav i{ font-size:13px; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.fav:hover{
  transform:scale(1.08);
  background:rgba(27,25,22,.5);
  border-color:rgba(255,255,255,.55);
}
.fav:active{ transform:scale(.92); }
.fav.is-fav{
  color:#fff;
  background:linear-gradient(135deg, #ff4d79, var(--accent));
  border-color:rgba(255,255,255,.55);
  box-shadow:0 4px 14px -3px rgba(255,33,83,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
.fav.is-fav i{ animation:favPop .4s cubic-bezier(.34,1.56,.64,1); }
.fav.is-fav:hover{ background:linear-gradient(135deg, #ff4d79, var(--accent)); }
.fav.fav-pop{ animation:favBtnPop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes favBtnPop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.28); }
  100%{ transform:scale(1); }
}
@keyframes favPop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.3); }
  65%{ transform:scale(.9); }
  100%{ transform:scale(1); }
}

/* Not part of the handoff (their demo has no premium listings) — kept as
   a real, data-driven addition, sitting in the actions cluster left of
   the heart so it tilts/counter-rotates along with it. */
.card-premium-badge{
  position:relative; z-index:2;
  width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--gold,#f59e0b); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.card-premium-badge i{ font-size:15px; }

/* lightweight CSS tooltip — add data-tooltip="..." to any .tooltip element */
.tooltip{ position:relative; }
.tooltip::before,
.tooltip::after{
  position:absolute; left:50%; transform:translateX(-50%);
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:20;
}
.tooltip::after{
  content:attr(data-tooltip); bottom:calc(100% + 9px);
  background:var(--ink); color:#fff; font-size:11px; font-weight:600; white-space:nowrap;
  padding:6px 10px; border-radius:8px;
}
.tooltip::before{
  content:""; bottom:calc(100% + 4px);
  border:5px solid transparent; border-top-color:var(--ink);
}
/* Only real pointer devices get the hover tooltip — on touch, :hover sticks
   after a tap with no real way to dismiss it, so it's just off entirely. */
@media (hover: hover) and (pointer: fine) {
  .tooltip:hover::after,
  .tooltip:hover::before{ opacity:1; transform:translateX(-50%) translateY(-2px); }
}

.property-card__body{ padding:20px 22px 22px; position:relative; display:flex; flex-direction:column; flex:1; min-width:0; }

.property-card__price-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 5px; }
.property-card__price{ font-weight:700; font-size:23px; line-height:1; color:var(--ink); letter-spacing:-.01em; white-space:nowrap; }
.property-card__currency{ font-weight:700; font-size:16px; line-height:1; color:var(--ink); }
.property-card__price-per-m2{ font-size:12.5px; font-weight:600; color:var(--ink-3); margin-left:auto; white-space:nowrap; }

.property-card__location{ display:flex; align-items:center; gap:6px; margin-top:12px; min-width:0; }
.property-card__location i{ font-size:14px; color:var(--card-accent); flex:none; }
.property-card__location span{ flex:1; min-width:0; font-size:13.5px; font-weight:500; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.property-card__divider{
  height:1px; margin:11px 0;
  background:linear-gradient(to right, transparent, color-mix(in srgb, var(--card-accent) 30%, var(--line)) 25%, color-mix(in srgb, var(--card-accent) 30%, var(--line)) 75%, transparent);
}

.property-card__facts{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.property-card__fact{ display:flex; align-items:center; gap:6px; }
.property-card__fact i{ font-size:14px; color:var(--ink-3); }
.property-card__fact span{ font-size:13px; font-weight:600; color:var(--ink-2); }
.property-card__fact + .property-card__fact::before{ content:'·'; color:var(--ink-3); }

/* footer: posted-date on the left, "Ətraflı" link on the right */
.property-card__footer{ display:flex; align-items:center; justify-content:space-between; margin-top:15px; gap:10px; }
.property-card__meta{ display:flex; align-items:center; gap:5px; color:var(--ink-3); min-width:0; }
.property-card__meta i{ font-size:13px; flex:none; }
.property-card__meta span{ flex:1; min-width:0; font-size:11.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.property-card__more{ display:flex; align-items:center; gap:3px; color:var(--card-accent); font-size:12px; font-weight:700; white-space:nowrap; flex:none; }
.property-card__more i{ font-size:12px; }

/* manat mark — used on the listing detail page's price displays
   (.mob-price-val/.pc-price etc.), not just the card. Sized as a small
   svg container so the hand-drawn glyph in partials/manat.blade.php lines
   up with whatever text it sits in. */
.cur{
  display:inline-flex; align-items:center; flex:none;
  width:.76em; height:.62em; margin-left:2px; vertical-align:-.03em;
}
.cur svg{ width:100%; height:100%; display:block; }

/* ---------- REALTOR ---------- */
.realtor{ display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; cursor:pointer; transition:transform .25s; min-width:0; }
.realtor:hover{ transform:translateY(-6px); }
.avatar{ width:92px; height:92px; border-radius:50%; border:1px solid rgba(27,25,22,.1); background-size:cover; background-position:center; }
.realtor-name{ font-size:14px; font-weight:600; color:var(--ink); line-height:1.3; margin-top:6px; }
.realtor-sub{ font-size:12px; color:var(--ink-3); }
.realtor-from{ font-family:'Manrope',system-ui,-apple-system,sans-serif; font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--accent); margin-top:2px; }

/* ---------- DEVELOPER ---------- */
.dev-card{
  background:#fff; border-radius:16px; overflow:hidden; cursor:pointer;
  border:1px solid rgba(27,25,22,.07); transition:all .25s; min-width:0;
}
.dev-card:hover{ transform:translateY(-6px); box-shadow:0 22px 44px -20px rgba(27,25,22,.25); }
.dev-logo{
  height:118px; display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid rgba(27,25,22,.06);
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:18px;
  letter-spacing:.04em; color:var(--ink); text-align:center; padding:0 14px;
}
.dev-body{ padding:16px; }
.dev-name{ font-size:14px; font-weight:600; color:var(--ink); }
.dev-sub{ font-size:12px; color:var(--ink-3); margin-top:5px; }

/* ---------- BANNER ---------- */
.banner{
  position:relative; margin-top:40px; margin-bottom:40px; border-radius:22px; overflow:hidden;
  background:#fff; border:1px solid rgba(27,25,22,.08);
  box-shadow:0 4px 16px -6px rgba(27,25,22,.1);
  padding:54px 56px; display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.banner-bar{ position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--accent); }
.banner-brand-logo{ display:block; height:32px; width:auto; margin-bottom:22px; }
.banner-text h2{ font-weight:700; font-size:38px; letter-spacing:-.015em; margin:0; color:var(--ink); }
.banner-text p{ margin:14px 0 0; font-size:15.5px; color:var(--ink-2); max-width:500px; line-height:1.6; }

/* Uses the shared site accent (var(--accent), set globally above) instead
   of Birbank's own brand red — .banner-bar/.kicker/.btn-primary all read
   it, so the bar/button match birev's own pink, not the partner's. */
.banner--birbank .btn-primary{ box-shadow:0 6px 16px -4px rgba(214,33,95,.45); }
.banner--birbank .btn-primary:hover{ box-shadow:0 8px 20px -4px rgba(214,33,95,.55); }

/* ---------- FOOTER ---------- */
.site-footer{ margin-top:40px; border-top:1px solid var(--line); }
.footer-grid{ padding:56px 40px 32px; display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:44px; }
.footer-brand .logo-img{ margin-bottom:18px; }
.footer-brand p{ font-size:13.5px; color:var(--ink-2); line-height:1.65; max-width:300px; margin:0 0 20px; }
.socials{ display:flex; gap:14px; }
.socials i{ font-size:20px; color:var(--ink-2); cursor:pointer; transition:color .15s; }
.socials i:hover{ color:var(--ink); }
.footer-h{ font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em; margin-bottom:18px; }
.footer-col{ display:flex; flex-direction:column; }
.footer-col a{ font-size:13.5px; color:var(--ink-2); margin-bottom:13px; transition:color .15s; }
.footer-col a:hover{ color:var(--ink); }
.footer-col a.phone{ font-weight:600; color:var(--ink); }
.footer-bottom{ padding:20px 40px 40px; border-top:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ink-3); }

/* ============================================================
   DETAIL PAGE
   ============================================================ */
.breadcrumb{ display:flex; align-items:center; gap:9px; padding-top:20px; font-size:12px; color:var(--ink-2); flex-wrap:nowrap; overflow:hidden; }
.breadcrumb a{ white-space:nowrap; flex-shrink:0; }
.breadcrumb span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb i{ font-size:10px; color:var(--ink-3); }
.breadcrumb span{ color:var(--ink); font-weight:600; }

.detail-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-top:10px; }
.detail-badges{ display:flex; gap:8px; margin-bottom:14px; }
.detail-badges .badge{ position:static; }
.detail-head h1{ font-family:'Inter',system-ui,-apple-system,sans-serif; font-weight:700; font-size:32px; letter-spacing:-.015em; line-height:1.08; margin:0; }
.detail-loc{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:14px; color:var(--ink-2); }
.detail-loc i{ font-size:17px; color:var(--ink-3); }
.detail-meta{ display:flex; align-items:center; gap:8px; margin:14px 0 0; font-size:13.5px; font-weight:500; color:var(--ink-2); }
.detail-meta span{ display:inline-flex; align-items:center; gap:5px; }
.detail-meta i{ font-size:14px; }
.detail-meta-dot{ font-weight:700; }
.detail-actions{ display:flex; gap:12px; }
.detail-actions .detail-back{ display:none; }
.ghost-btn{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border-radius:24px; border:1px solid var(--line); background:#fff; font-size:13.5px; font-weight:600; color:var(--ink); transition:.15s; }
.ghost-btn i{ font-size:17px; }
.ghost-btn:hover{ border-color:rgba(27,25,22,.32); }
.ghost-btn.is-fav{ color:var(--accent); border-color:var(--accent); }
#markAllReadBtn{ height:50px; padding:10px 20px; border-radius:9px; }
.ghost-btn.icon-only{ width:42px; padding:0; justify-content:center; }

.detail-layout{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:44px; margin-top:20px; }
.detail-main{ min-width:0; }
.detail-side{ min-width:0; align-self:start; }
.mob-price-bar{ display:none; }

.gallery-main{ position:relative; height:582px; border-radius:18px; overflow:hidden; }
.gallery-zoom-hint{
  position:absolute; right:16px; top:16px; z-index:5; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:rgba(27,25,22,.55); backdrop-filter:blur(6px);
  color:#fff;
}
.gallery-zoom-hint i{ font-size:22px; }
.gallery-count{
  position:absolute; left:16px; bottom:16px; z-index:5; pointer-events:none;
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 13px; border-radius:50px;
  background:rgba(27,25,22,.55); backdrop-filter:blur(6px);
  color:#fff; font-size:13px; font-weight:600;
}
.gallery-count i{ font-size:15px; }
.gallery-main .swiper-wrapper{ height:100% !important; }
.gallery-main .swiper-slide{ height:100% !important; width:100% !important; }
.swiper-backface-hidden .swiper-slide{ transform:none !important; }
.gallery-slide-img{ display:block; width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; background-color:#f0ede6; cursor:pointer; }
.gallery-slide-img.is-portrait{ position:relative; background-size:contain; background-color:transparent; }
/* Portrait photos letterbox — fill the empty sides with a blurred, darkened
   copy of the same photo instead of a flat color (same background-image,
   just zoomed/blurred and pushed behind via negative z-index). */
.gallery-slide-img.is-portrait::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:inherit; background-size:cover; background-position:center;
  filter:blur(20px) brightness(.6); transform:scale(1.15);
}
/* Real <img> (SEO/alt-text) replacing the old background-image div — cover
   fill for landscape, contain (letterboxed over the blurred ::before
   backdrop above) for portrait. */
.gallery-slide-img img{ display:block; width:100%; height:100%; object-fit:cover; }
.gallery-slide-img.is-portrait img{ position:relative; z-index:1; object-fit:contain; }
.gallery-lightbox-triggers{ position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
/* fsLightbox's own injected backdrop is rgba(30,30,30,.9) — bumped a bit
   darker/more opaque here (not all the way to solid) since .9 still let
   bold page text bleed through slightly on mobile. */
.fslightbox-container{ background:rgba(20,20,20,.98) !important; }
/* NOTE: earlier attempts to fix the photo's vertical centering (neutralizing
   fslightbox-transform-transition's inline transform, then compensating with
   a padding-bottom reservation on the per-photo stage wrapper) were reverted
   — that transform is also what fsLightbox applies to the current + incoming
   slide during an active drag, and forcing it to transform:none broke that
   geometry specifically mid-swipe (slides visibly misaligned/overlapping
   while dragging, both on touch and mouse-drag). Left at the vendor default;
   the off-center look for some photos is a lesser problem than broken swipe. */
/* fsLightbox's own thumbnail strip renders each <img> at its native aspect
   ratio (width:auto!important, height:100%) — mismatched shapes, tall bar.
   Force a smaller, uniform crop matching the main embedded gallery's own
   thumbnail proportions (3/2) instead. */
.fslightbox-thumbs{ height:70px !important; padding-bottom:10px !important; }
/* flex-shrink:0 is required — .fslightbox-thumbs-inner is a flex container
   and without it the browser squishes every wrapper (and the fixed-width
   img inside) equally to fit the strip into a narrow mobile viewport,
   which the vendor's own JS horizontal-drag scrolling is meant to handle
   instead of shrinking. Only showed up on mobile because desktop viewports
   were wide enough to fit every thumb without shrinking. */
.fslightbox-thumb-wrapper{ height:52px !important; width:78px !important; flex-shrink:0 !important; }
/* Compound selector (not just .fslightbox-thumb) for higher specificity —
   the vendor's own width:auto!important would otherwise win, since its
   <style> tag is injected after ours, letting each thumb's native aspect
   ratio through instead of a uniform crop. */
.fslightbox-thumb-wrapper .fslightbox-thumb{ width:78px !important; height:52px !important; object-fit:cover; border-radius:10px !important; opacity:.62; transition:.18s; }
/* Compound selector (not just .fslightbox-thumb-active) for higher
   specificity — the vendor's own !important border rule on that single
   class would otherwise win, since its <style> tag is injected after ours. */
.fslightbox-thumb.fslightbox-thumb-active{ opacity:1 !important; border-color:var(--accent) !important; }
.gallery-main .swiper-button-prev,
.gallery-main .swiper-button-next{
  width:42px; height:42px; margin-top:-21px; border-radius:50%;
  background:rgba(27,25,22,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:none;
  box-shadow:0 6px 28px -4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.gallery-main .swiper-button-prev:hover,
.gallery-main .swiper-button-next:hover{
  background:rgba(27,25,22,.82);
  transform:scale(1.08);
  box-shadow:0 10px 36px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15);
}
.gallery-main .swiper-button-prev:active,
.gallery-main .swiper-button-next:active{ transform:scale(.94); }
.gallery-main .swiper-button-prev:after,
.gallery-main .swiper-button-next:after{ display:none; }
.gallery-main .swiper-button-prev i,
.gallery-main .swiper-button-next i{ font-size:20px; color:#fff; line-height:1; pointer-events:none; }

.gallery-thumbs{ margin-top:10px; width:100%; overflow:hidden; }
.gallery-thumbs .swiper-slide{ width:auto; }
/* aspect-ratio matches .gallery-main's own proportions (~776px wide ×
   520px tall at desktop container width ≈ 3/2), so thumbs read as the
   same shape as the big photo instead of a squarer 4/3 crop. */
.thumb{ width:92px; aspect-ratio:3/2; border-radius:10px; overflow:hidden; cursor:pointer; opacity:.62; border:2px solid transparent; transition:.18s; }
.thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.thumb:hover{ opacity:.85; }
.gallery-thumbs .swiper-slide-thumb-active .thumb{ opacity:1; border-color:var(--accent); }

.specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 16px; }
.price-card .specs{
  display:flex; gap:6px; margin:0 0 22px;
  background:none; border:none; padding:0;
  padding-bottom:18px; border-bottom:1px solid var(--line-soft);
}
.price-card .specs .spec{
  flex:0 1 auto; max-width:150px; background:none; border:none; border-radius:0; box-shadow:none;
  padding:8px 6px; gap:8px;
  flex-direction:row; align-items:center; text-align:left;
  position:relative; transform:none !important;
}
.price-card .specs .spec:hover{ box-shadow:none; transform:none !important; }
.price-card .specs .spec-icon{
  width:28px; height:28px; border-radius:8px; flex:none;
  background:rgba(255,33,83,.07);
}
.price-card .specs .spec-icon i{ font-size:13px; color:var(--accent); }
.price-card .specs .spec-info{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.price-card .specs .spec-v{ font-size:13px; font-weight:700; color:var(--ink); }
.price-card .specs .spec-l{ font-size:10px; color:var(--ink-3); font-weight:500; }
.spec{
  display:flex; align-items:center; gap:12px;
  padding:15px 17px; border-radius:14px;
  background:#fff; border:1px solid var(--line-soft);
  box-shadow:0 1px 0 rgba(27,25,22,.02);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.spec:hover{
  border-color:rgba(27,25,22,.18);
  box-shadow:0 14px 28px -18px rgba(27,25,22,.2);
  transform:translateY(-1px);
}
.spec-icon{
  width:40px; height:40px; border-radius:11px; flex:none;
  background:var(--paper); display:flex; align-items:center; justify-content:center;
}
.spec-icon i{ font-size:18px; color:var(--ink-2); }
.spec-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.spec-v{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.3; }
.spec-l{ font-size:11.5px; color:var(--ink-3); line-height:1.3; }

.detail-section{ margin-top:40px; padding-top:30px; border-top:1px solid var(--line); }
.detail-section h2{ font-weight:700; font-size:24px; letter-spacing:-.01em; margin:0 0 20px; }
.detail-section p{ font-size:15.5px; line-height:1.8; color:var(--ink-2); margin:0 0 14px; max-width:68ch; }

.desc-body{ background:transparent; padding:4px 0 4px 20px; border-left:3px solid rgba(255,33,83,.2); }
.desc-body p{ font-size:15.5px; line-height:1.85; color:var(--ink); margin:0 0 12px; white-space:pre-line; }
.desc-body p:last-of-type{ margin-bottom:20px; }
.desc-highlights{ display:flex; flex-wrap:wrap; gap:10px; border-top:1px solid var(--line-soft); padding-top:18px; }
.desc-hl{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:50px; background:var(--paper); border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink-2); }
.desc-hl i{ font-size:15px; color:var(--accent); }

.features{ position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:0 28px; }
.features::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--line-soft); }
.feature{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:14.5px; padding:9px 0; border-bottom:1px solid var(--line-soft);
}
.features > .feature:nth-last-child(-n+2){ border-bottom:none; }
.feature-label{ display:flex; align-items:center; gap:10px; color:var(--ink-2); }
.feature-icon{
  width:28px; height:28px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,33,83,.07);
}
.feature-icon i{ font-size:14px; color:var(--accent); }
.feature-value{ color:var(--ink); font-weight:600; text-align:right; }

.map-ph{ height:280px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--ink-2); background:repeating-linear-gradient(45deg,#ECE8DF 0 14px,#F1EDE4 14px 28px); border:1px solid var(--line-soft); }
.listing-map{ height:320px; border-radius:16px; overflow:hidden; border:1px solid var(--line-soft); }
.map-nav-actions{ display:flex; gap:10px; margin-top:12px; }
.map-nav-actions .btn{
  flex:1; height:44px; padding:0 14px; border-radius:12px;
  justify-content:center; font-size:13.5px;
}
.map-nav-actions .btn i{ font-size:16px; }
.map-ph i{ font-size:34px; color:var(--ink-3); }
.map-ph span{ font-size:13px; }

/* price / agent card */
.detail-side{ position:sticky; top:80px; }
.price-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px 28px 28px;
  box-shadow:0 28px 70px -32px rgba(27,25,22,.32);
}
.price-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--accent),#ff7a93);
}
.pc-kicker{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
.pc-price-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin-bottom:12px; }
.pc-price{ font-family:'Manrope',system-ui,-apple-system,sans-serif; font-weight:800; letter-spacing:-.01em; font-size:33px; color:var(--ink); white-space:nowrap; }
.pc-perm2{ font-size:13px; color:var(--ink-3); white-space:nowrap; }

.pc-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.pc-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:50px;
  background:#fff; border:1px solid var(--line);
  font-size:12px; font-weight:600; color:var(--ink-2);
}
.pc-chip i{ font-size:13px; }
.pc-chip--green i{ color:#16a34a; }
.pc-chip--blue  i{ color:#2563eb; }
.pc-chip--red   i{ color:var(--accent); }

.pc-credit{
  display:flex; align-items:center; gap:12px; margin-top:18px;
  padding:13px 15px; border-radius:14px; background:var(--paper); border:1px solid var(--line-soft);
  font-size:13px; color:var(--ink-2); line-height:1.4;
}
.pc-credit-icon{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:linear-gradient(155deg,var(--accent),#ff5478); color:#fff;
  box-shadow:0 6px 14px -4px rgba(255,33,83,.55);
  display:flex; align-items:center; justify-content:center;
}
.pc-credit-icon i{ font-size:17px; }
.pc-credit strong{ color:var(--ink); font-weight:700; }

.pc-agent-wrap{
  display:flex; align-items:center; gap:13px; margin:22px 0;
  padding:14px; border-radius:15px; background:var(--paper);
}
.agent-avatar{
  width:50px; height:50px; border-radius:50%; background-size:cover; background-position:center; flex:none;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--line-soft);
  background-color:#f0ede6; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.agent-avatar i{ font-size:38px; color:var(--ink-3); line-height:1; }
.agent-name{ display:flex; align-items:center; gap:5px; font-size:14.5px; font-weight:600; color:var(--ink); }
.agent-name i{ font-size:14px; color:var(--accent); }
.agent-role{ font-size:12.5px; color:var(--ink-3); margin-top:3px; }

.pc-actions{ display:flex; flex-direction:column; gap:10px; }
.btn-block{ width:100%; justify-content:center; height:51px; border-radius:14px; font-size:14.5px; }
.pc-actions .btn-primary{ box-shadow:0 6px 12px -8px rgba(255,33,83,.35); }
.btn-outline{ background:#fff; border:1px solid var(--line); color:var(--ink); transition:border-color .15s,color .15s; }
.btn-outline:hover{ border-color:#25D366; color:#1DA851; filter:none; }
.btn-outline i{ font-size:18px; }

/* fraud-prevention reminder — replaces the old generic "verified" line */
.pc-safety{
  display:flex; gap:11px; align-items:flex-start; margin-top:20px;
  padding:14px 15px; border-radius:14px;
  background:rgba(193,144,30,.08); border:1px solid rgba(193,144,30,.2);
}
.pc-safety-icon{
  width:26px; height:26px; border-radius:50%; flex:none; margin-top:1px;
  background:rgba(193,144,30,.16); color:#B97A0E;
  display:flex; align-items:center; justify-content:center;
}
.pc-safety-icon i{ font-size:14px; }
.pc-safety p{ margin:0; font-size:12px; line-height:1.55; color:var(--ink-2); }
.mob-only-safety{ display:none; }
.pc-safety strong{ color:var(--ink); }

/* ---------- MOBILE STICKY CTA ---------- */
.mob-cta{
  display:none;
  position:fixed; bottom:calc(14px + env(safe-area-inset-bottom));
  left:50%; transform:translateX(-50%);
  width:calc(100% - 64px); max-width:360px; z-index:200;
  background:rgba(255,255,255,.18); backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-radius:18px; border:1px solid rgba(27,25,22,.08);
  padding:8px 8px 8px 12px;
  box-shadow:0 16px 48px -8px rgba(27,25,22,.22);
  align-items:center; justify-content:space-between;
}
.mob-cta-agent{ display:flex; align-items:center; gap:9px; min-width:0; }
.mob-cta-avatar{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:#f0ede6; background-size:cover; background-position:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.8), 0 0 0 3px var(--line-soft);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.mob-cta-avatar i{ font-size:28px; color:var(--ink-3); line-height:1; }
.mob-cta-info{ display:flex; flex-direction:column; gap:0; min-width:0; }
.mob-cta-name{ font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; letter-spacing:-.01em; }
.mob-cta-role{ font-size:10.5px; color:var(--ink-3); margin-top:1px; }
.mob-cta-actions{ display:flex; gap:7px; flex:none; }
.mob-cta-call{
  width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line-soft); background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:inherit; cursor:pointer; transition:.15s;
}
.mob-cta-call:active{ background:var(--line-soft); }
.mob-cta-call i{ font-size:18px; }

/* ============================================================
   FORM CONTROLS (auth / listing form)
   ============================================================ */

.field{ display:block; margin-top:18px; }
.field:first-child{ margin-top:0; }
.field-label{ display:block; font-size:11.5px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.field-input{
  display:flex; align-items:center; gap:10px; height:50px; padding:0 16px;
  background:#fff; border:1px solid var(--line); border-radius:13px; transition:border-color .15s;
}
.field-input:focus-within{ border-color:var(--accent); }
.field-input--error{ border-color:#c0163a !important; }
.checkbox.field-input--error{ color:#c0163a; }
.checkbox.field-input--error input{ outline:2px solid #c0163a; outline-offset:3px; border-radius:3px; }
.field-input--disabled{ background:var(--bg); color:var(--ink-2); cursor:default; pointer-events:none; }
.field-input--disabled span{ font-size:16px; color:var(--ink-2); }
.field-error{ display:block; font-size:12px; color:#c0163a; margin-top:4px; padding-left:2px; }
.field-required{ color:var(--accent); font-weight:700; }
.field-input i{ font-size:18px; color:var(--ink-3); flex:none; }
.field-input .ph-whatsapp-logo{ color:#25D366; }
.phone-prefix{
  font-size:16px; font-weight:600; color:var(--ink); flex:none;
  padding-right:6px; border-right:1.5px solid var(--line); margin-right:2px;
  user-select:none; pointer-events:none;
}
.field-input input,
.field-input select{
  flex:1; min-width:0; height:100%; border:none; outline:none; background:none;
  font-family:inherit; font-size:16px; color:var(--ink);
}
.field-input input::placeholder{ color:var(--ink-3); }
.field-input select{ appearance:none; cursor:pointer; }
.field-input input[readonly]{ color:var(--ink-2); }

textarea{
  width:100%; margin-top:0; padding:14px 16px; background:#fff; border:1px solid var(--line);
  border-radius:13px; font-family:inherit; font-size:16px; color:var(--ink); outline:none;
  resize:vertical; transition:border-color .15s;
}
textarea:focus{ border-color:var(--accent); }
textarea::placeholder{ color:var(--ink-3); }

.field-input--with-action{ pointer-events:auto; }
.field-action-link{
  display:inline-flex; align-items:center; gap:4px; flex:none;
  font-size:13px; font-weight:500; color:var(--accent);
  text-decoration:none; padding:4px 0 4px 12px;
  border-left:1.5px solid var(--line);
  transition:opacity .15s;
}
.field-action-link:hover{ opacity:.7; }
.link-muted{ font-size:14px; color:var(--ink-3); text-decoration:none; }
.link-muted:hover{ color:var(--ink-2); }

.date-select-row{ display:flex; gap:8px; }
.date-select-part{ flex:1; min-width:0; }
.date-select-part select{ font-size:14px; }
.field-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.field-grid-2 .field{ margin-top:0; }
.field-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.field-grid-3 .field{ margin-top:0; }

.field-row{ display:flex; align-items:center; gap:18px; margin-top:18px; }
.field-row.between{ justify-content:space-between; }

.checkbox{ display:flex; align-items:flex-start; gap:10px; margin-top:18px; font-size:13.5px; color:var(--ink-2); cursor:pointer; line-height:1.5; }
.checkbox input{ margin-top:3px; width:16px; height:16px; accent-color:var(--accent); flex:none; cursor:pointer; }
.field-sub-check{
  margin-top:0 !important; margin-left:2px; padding:8px 0 0 11px;
  border-left:2px solid var(--line); font-size:12.5px;
}

.field-inline-check{
  display:flex; align-items:center; gap:6px; cursor:pointer; flex:none;
  font-size:11.5px; font-weight:600; color:var(--ink-3); user-select:none;
}
.field-inline-check input{ width:14px; height:14px; margin:0; accent-color:var(--accent); cursor:pointer; }
.field-inline-check input:checked ~ span{ color:var(--accent); }

.link-accent{ color:var(--accent); font-weight:600; font-size:inherit; background:none; border:none; padding:0; cursor:pointer; }
.link-accent:hover{ text-decoration:underline; }

/* ---------- AUTH PAGE ---------- */
.auth-wrap{ display:flex; justify-content:center; padding:80px 0 20px; }
.auth-card{
  width:100%; max-width:460px; background:#fff; border:1px solid var(--line);
  border-radius:22px; padding:40px; box-shadow:0 30px 70px -30px rgba(27,25,22,.25);
}
.auth-tabs{ display:flex; gap:6px; padding:5px; background:var(--paper); border-radius:13px; margin-bottom:30px; }
.auth-tab{ flex:1; height:42px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink-2); transition:.15s; }
.auth-tab.active{ background:#fff; color:var(--ink); box-shadow:0 6px 16px -8px rgba(27,25,22,.25); }
.auth-title{ font-weight:700; font-size:26px; letter-spacing:-.01em; margin:0; }
.auth-sub{ font-size:13.5px; color:var(--ink-2); margin:10px 0 26px; line-height:1.6; }
.auth-switch{ text-align:center; font-size:13.5px; color:var(--ink-2); margin:22px 0 0; }
.auth-card .btn.btn-block{ margin-top:26px; }

.auth-back{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:18px; transition:color .15s; }
.auth-back:hover{ color:var(--ink); }
.auth-back i{ font-size:15px; }

.auth-alert{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:9px; font-size:13.5px; font-weight:500; margin-top:16px; margin-bottom:16px; }
.auth-alert[hidden]{ display:none; }
.auth-alert i{ font-size:17px; flex:none; }
.auth-alert--error{ background:#fff1f3; color:#c0163a; border:1px solid #f9c6cf; }
.auth-alert--success{ background:#f0faf4; color:#1a7a42; border:1px solid #b8e6cc; }
.auth-alert:has(ul){ align-items:flex-start; padding:16px 18px; gap:12px; }
.auth-alert ul{ margin:0; padding-left:18px; }
.auth-alert ul li{ margin-top:6px; }
.auth-alert ul li:first-child{ margin-top:0; }
.auth-alert:has(ul) i{ margin-top:1px; }

.field-optional{ text-transform:none; font-weight:500; color:var(--ink-3); letter-spacing:0; }

/* ---------- OTP ---------- */
.otp-row{ display:flex; gap:12px; margin-top:8px; }
.otp-digit{
  width:100%; height:64px; text-align:center; font-size:24px; font-weight:700; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:13px; outline:none;
  font-family:inherit; transition:border-color .15s;
}
.otp-digit:focus{ border-color:var(--accent); }
.otp-digit.error{ border-color:var(--accent); background:rgba(255,33,83,.05); }
.otp-row--error .otp-digit,
.otp-digit--error{ border-color:#c0163a !important; background:#fff1f3; animation:shake .3s ease; }
.otp-row--error .otp-digit:focus,
.otp-digit--error:focus{ border-color:#c0163a !important; }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }

.otp-resend{ display:flex; justify-content:center; margin-top:20px; font-size:13px; color:var(--ink-2); }
.otp-resend strong{ color:var(--ink); }

/* ---------- LISTING FORM ---------- */
/* Hidden until add-listing.js has restored the correct step/autosaved
   fields — otherwise step 1 briefly flashes before JS jumps to whatever
   step the user actually left off on. Revealed via .js-ready (or immediately
   if JS never runs, via <noscript> below). */
.form-steps-row,
.listing-form{ visibility:hidden; }
.form-steps-row.js-ready,
.listing-form.js-ready{ visibility:visible; }

.form-steps-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:40px; flex-wrap:wrap; }
.form-steps{ display:flex; gap:8px; margin-top:0; flex-wrap:wrap; }
.form-reset-btn{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  height:38px; padding:0 16px; border-radius:10px;
  background:#fff; border:1px solid rgba(192,22,58,.22);
  font-size:13px; font-weight:600; color:#c0163a;
  transition:border-color .15s, background .15s;
}
.form-reset-btn i{ font-size:15px; }
.form-reset-btn:hover{ border-color:#c0163a; background:rgba(192,22,58,.05); }
.form-step{
  display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--ink-3);
  padding:9px 16px 9px 9px; border-radius:20px; background:#fff; border:1px solid var(--line-soft);
}
.form-step-num{ width:22px; height:22px; border-radius:50%; background:var(--paper); color:var(--ink-3); display:flex; align-items:center; justify-content:center; font-size:11.5px; }
.form-step.active{ color:var(--ink); border-color:var(--line); }
.form-step.active .form-step-num{ background:var(--accent); color:#fff; }

.form-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:18px;
  padding:32px; margin-top:22px;
}
.form-card-title{ font-weight:700; font-size:21px; letter-spacing:-.01em; margin:0 0 22px; }

.deal-type{ margin-top:24px; }
.radio-pill{ position:relative; }
.radio-pill input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.radio-pill span{
  display:flex; align-items:center; height:44px; padding:0 20px; border-radius:12px;
  border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink-2); transition:.15s;
}
.radio-pill input:checked + span{ background:var(--accent); border-color:var(--accent); color:#fff; }

.upload-add-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  aspect-ratio:1; border:2px dashed var(--line); border-radius:11px; cursor:pointer;
  color:var(--ink-2); transition:border-color .15s, background .15s;
}
.upload-add-tile:hover{ border-color:var(--accent); background:#FBFAF7; }
.upload-add-tile i{ font-size:22px; color:var(--ink-3); }
.upload-add-label{ font-size:11.5px; font-weight:600; color:var(--ink-2); }
.upload-add-tile--empty{
  grid-column:1 / -1; gap:8px; padding:48px 20px; aspect-ratio:auto;
}
.upload-add-tile--empty i{ font-size:36px; }
.upload-preview.is-dragover .upload-add-tile{ border-color:var(--accent); background:#FBFAF7; }
.upload-title{ font-size:14.5px; font-weight:600; color:var(--ink); }
.upload-sub{ font-size:12.5px; color:var(--ink-3); }
.upload-zone--error{ border-color:#c0163a !important; background:#fff1f3; animation:shake .3s ease; }

/* ── Toast notifications (replace native alert()) ── */
.toast-stack{
  position:fixed; top:20px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:10px; max-width:360px; width:calc(100% - 40px);
}
.toast{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 16px; border-radius:12px;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 14px 32px -10px rgba(27,25,22,.24);
  font-size:13.5px; font-weight:500; color:var(--ink); line-height:1.5;
  animation:toast-in .25s ease;
}
.toast i{ font-size:18px; flex:none; margin-top:1px; }
.toast span{ flex:1; }
.toast-action{
  flex:none; align-self:center; font-size:12.5px; font-weight:700;
  text-decoration:underline; text-underline-offset:2px; color:inherit;
  white-space:nowrap; padding:2px 0 2px 4px;
}
.toast--error{ border-color:#f9c6cf; background:#fff1f3; color:#c0163a; }
.toast--success{ border-color:#b8e6cc; background:#f0faf4; color:#1a7a42; }
.toast.toast-hide{ animation:toast-out .2s ease forwards; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-10px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes toast-out{ to{ opacity:0; transform:translateX(24px); } }
@media (max-width:560px){
  .toast-stack{ left:10px; right:10px; top:10px; max-width:none; width:auto; }
}

.upload-preview{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:18px; }
.upload-thumb{ position:relative; aspect-ratio:1; border-radius:11px; overflow:hidden; background:var(--paper); cursor:grab; }
.upload-thumb:active{ cursor:grabbing; }
.upload-thumb img{ width:100%; height:100%; object-fit:contain; background:var(--paper); }
.upload-thumb .remove{
  position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%;
  background:rgba(27,25,22,.65); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px;
  z-index:2;
}
.upload-thumb-grip{
  position:absolute; top:6px; left:6px; width:22px; height:22px; border-radius:50%;
  background:rgba(27,25,22,.5); pointer-events:none;
  display:grid; grid-template-columns:repeat(2,3px); grid-template-rows:repeat(3,3px);
  gap:3px 4px; align-content:center; justify-content:center;
}
.upload-thumb-grip i{ width:3px; height:3px; border-radius:50%; background:#fff; font-style:normal; }
.upload-thumb-main{
  position:absolute; bottom:6px; left:6px; padding:3px 9px; border-radius:7px;
  background:var(--accent); color:#fff; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em;
}
.upload-thumb-move{
  position:absolute; bottom:6px; display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; z-index:2;
  background:rgba(27,25,22,.65); color:#fff; font-size:13px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.upload-thumb-move:hover{ background:var(--accent); }
.upload-thumb-move--left{ right:34px; }
.upload-thumb-move--right{ right:6px; }
.upload-thumb-move:disabled{ opacity:.3; pointer-events:none; }
.upload-thumb-ghost{ opacity:.35; }
.upload-thumb-drag{ box-shadow:0 8px 20px -4px rgba(27,25,22,.35); z-index:5; }
.upload-thumb--uploading img{ opacity:.45; }
.upload-thumb-spinner{
  position:absolute; top:50%; left:50%; width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%; border:3px solid rgba(255,255,255,.5); border-top-color:#fff;
  animation:uploadThumbSpin .7s linear infinite;
}
@keyframes uploadThumbSpin{ to{ transform:rotate(360deg); } }

/* property-type picker (add-listing step 1) */
.prop-type-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.prop-type-grid--error .prop-type-btn{ border-color:#c0163a; animation:shake .3s ease; }
.prop-type-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  height:96px; border-radius:14px; border:1.5px solid var(--line);
  background:#fff; color:var(--ink-2); transition:.15s; font-size:13px; font-weight:600;
}
.prop-type-btn i{ font-size:26px; color:var(--ink-3); transition:.15s; }
.prop-type-btn:hover{ border-color:var(--ink-2); }
.prop-type-btn.active{ border-color:var(--accent); background:rgba(255,33,83,.05); color:var(--accent); }
.prop-type-btn.active i{ color:var(--accent); }

/* Sticky (docked) only on steps 2/3 — toggled via .form-actions--sticky by
   add-listing.js's showStep(). Steps 1/4 stay in normal page flow so the
   bar doesn't permanently eat screen space while scrolling. */
.form-actions{
  display:flex; align-items:center; justify-content:flex-end; gap:14px;
  margin-top:30px; padding:16px 0;
}
.form-actions--sticky{
  position:sticky; bottom:0; z-index:30;
  background:rgba(244,244,244,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line-soft);
  box-shadow:0 -8px 20px -12px rgba(27,25,22,.12);
}
.form-actions .ghost-btn{ border-radius:12px; }
/* .btn-primary's default glow shadow makes it visually taller than the
   plain ghost buttons stacked right under it (esp. on step 4's 3-button
   column) even though the actual heights match — flatten it here. */
.form-actions .btn-primary{ box-shadow:none; }
.form-actions .btn-primary:hover{ box-shadow:none; }

/* ============================================================
   STATIC PAGE (about / terms / faq / generic content)
   ============================================================ */
.page-hero{ padding:56px 0 0; max-width:760px; }
.page-hero h1{ font-weight:700; font-size:48px; letter-spacing:-.02em; line-height:1.06; margin:18px 0 0; }
.page-hero .lead{ margin-top:18px; }

.page-body{ max-width:760px; margin-top:48px; padding-top:40px; border-top:1px solid var(--line); }
.page-body h2{ font-weight:700; font-size:24px; letter-spacing:-.01em; margin:40px 0 14px; }
.page-body h2:first-child{ margin-top:0; }
.page-body p{ font-size:15.5px; line-height:1.75; color:var(--ink-2); margin:0 0 16px; }
.page-body ul{ margin:0 0 16px; padding-left:20px; }
.page-body li{ font-size:15.5px; line-height:1.75; color:var(--ink-2); margin-bottom:8px; }
.page-body strong{ color:var(--ink); }

.page-updated{ font-size:12.5px; color:var(--ink-3); margin-top:10px; }

/* stats row (about page) */
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:56px; padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat{ text-align:center; }
.stat-num{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:38px; color:var(--ink); }
.stat-label{ font-size:12.5px; color:var(--ink-3); margin-top:8px; }

/* values grid (about page) */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px; }
.value-card{ background:#fff; border:1px solid var(--line-soft); border-radius:18px; padding:28px; }
.value-card i{ font-size:28px; color:var(--accent); }
.value-card h3{ font-size:16px; font-weight:700; color:var(--ink); margin:16px 0 8px; }
.value-card p{ font-size:13.5px; line-height:1.65; color:var(--ink-2); margin:0; }

/* team (about page) */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:30px; }
.team-card{ text-align:center; }
.team-avatar{ width:100%; aspect-ratio:1; border-radius:16px; background-size:cover; background-position:center; }
.team-name{ font-size:14.5px; font-weight:600; color:var(--ink); margin-top:14px; }
.team-role{ font-size:12.5px; color:var(--ink-3); margin-top:3px; }

/* ============================================================
   ACCOUNT LAYOUT (profile / my-listings / favorites)
   ============================================================ */
.account-layout{ display:grid; grid-template-columns:260px 1fr; gap:32px; margin-top:36px; align-items:start; }

.account-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px; box-shadow:0 24px 60px -32px rgba(27,25,22,.22); }

.account-user{ display:flex; align-items:center; gap:13px; padding-bottom:20px; border-bottom:1px solid var(--line-soft); margin-bottom:14px; }
.account-nav-toggle{ display:none; margin-left:auto; width:38px; height:38px; font-size:17px; }
.account-nav-toggle.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.account-avatar{ width:50px; height:50px; border-radius:50%; background-size:cover; background-position:center; flex:none; display:flex; align-items:center; justify-content:center; }
.account-avatar--placeholder{ background:linear-gradient(135deg,var(--accent) 0%,#8b1a2e 100%); }
.account-avatar--placeholder span{ font-size:18px; font-weight:700; color:#fff; line-height:1; }
.account-name{ font-size:14.5px; font-weight:600; color:var(--ink); }
.account-phone{ font-size:12.5px; color:var(--ink-3); margin-top:3px; }

.account-nav{ display:flex; flex-direction:column; gap:3px; }
.account-nav a{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:11px;
  font-size:14px; font-weight:600; color:var(--ink-2); transition:.15s;
}
.account-nav a i{ font-size:18px; color:var(--ink-3); }
.account-nav a:hover{ background:var(--paper); color:var(--ink); }
.account-nav a.active{ background:var(--paper); color:var(--ink); }
.account-nav a.active i{ color:var(--accent); }
.account-nav a.danger{ color:var(--accent); margin-top:8px; padding-top:14px; border-top:1px solid var(--line-soft); }
.account-nav a.danger i{ color:var(--accent); }

.account-content{ min-width:0; }
.account-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.account-head h1{ font-weight:700; font-size:32px; letter-spacing:-.01em; margin:0; }
.account-head p{ font-size:13.5px; color:var(--ink-2); margin:8px 0 0; }

.profile-panel{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:34px; }
.profile-photo-row{ display:flex; align-items:center; gap:18px; padding-bottom:28px; margin-bottom:28px; border-bottom:1px solid var(--line-soft); }
.profile-photo{ width:84px; height:84px; border-radius:50%; background-size:cover; background-position:center; flex:none; display:flex; align-items:center; justify-content:center; border:2px solid var(--line); }
.profile-photo--placeholder{ background:linear-gradient(135deg,var(--accent) 0%,#8b1a2e 100%); }
.profile-photo-initials{ font-size:30px; font-weight:700; color:#fff; line-height:1; pointer-events:none; letter-spacing:-0.5px; }
.profile-photo-actions{ display:flex; gap:10px; }
.ghost-btn--danger{ color:#c0163a !important; border-color:rgba(192,22,58,.25) !important; }
.ghost-btn--danger:hover{ border-color:#c0163a !important; background:rgba(192,22,58,.05) !important; }

/* ---------- LISTING ROW (my-listings) ---------- */
.listing-row{
  display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:16px; margin-bottom:14px;
}
.listing-row-media{ display:block; width:108px; height:80px; border-radius:11px; flex:none; background-size:cover; background-position:center; }
.listing-row-body{ flex:1; min-width:0; }
.listing-row-title{ display:block; font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.listing-row-title:hover{ color:var(--accent); text-decoration:none; }
.listing-row-meta{ display:flex; align-items:center; gap:14px; margin-top:7px; font-size:12.5px; color:var(--ink-3); }
.listing-row-meta i{ font-size:14px; margin-right:4px; vertical-align:-2px; }
.listing-row-badges{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; }
.listing-row-expiry{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  color:var(--ink-3); background:var(--paper); padding:5px 11px; border-radius:9px;
}
.listing-row-expiry i{ font-size:13px; }
.listing-row-foot{ display:flex; align-items:center; gap:18px; flex:none; }
.listing-row-price{ font-family:'Manrope',system-ui,-apple-system,sans-serif; font-weight:800; letter-spacing:-.01em; font-size:17px; color:var(--ink); white-space:nowrap; }
.listing-row-actions{ display:flex; align-items:center; gap:8px; flex:none; }
.listing-row-actions .icon-btn{ width:38px; height:38px; }

.status-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:5px 11px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; }
.status-pill.active{ background:rgba(31,138,91,.12); color:#1F8A5B; }
.status-pill.pending{ background:rgba(224,150,16,.14); color:#B97A0E; }
.status-pill.archived{ background:var(--paper); color:var(--ink-3); }
.status-pill.draft{ background:rgba(107,114,128,.12); color:#6b7280; }
.status-pill.rejected{ background:rgba(192,22,58,.1); color:#c0163a; }
.status-pill--pending-edit{ background:rgba(37,99,235,.12); color:#2563EB; }

.account-tabs{
  display:inline-flex; gap:6px; padding:5px; background:var(--paper); border-radius:13px; margin-bottom:24px;
  max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.account-tabs::-webkit-scrollbar{ display:none; }
.account-tab{ display:flex; align-items:center; flex:none; height:40px; padding:0 18px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink-2); transition:.15s; white-space:nowrap; }
.account-tab.is-loading{ opacity:.55; pointer-events:none; }
.account-tab.active{ background:#fff; color:var(--ink); box-shadow:0 6px 16px -8px rgba(27,25,22,.25); }

/* ---------- EMPTY STATE ---------- */
/* ---- Notifications ---- */
.notif-list{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.notif-item{ display:flex; align-items:flex-start; gap:14px; padding:16px 20px; background:#fff; text-decoration:none; color:inherit; transition:background .15s; position:relative; border-bottom:1px solid var(--line-soft); }
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:var(--bg); }
.notif-item--unread{ background:#fff9f9; cursor:pointer; }
.notif-item--unread:hover{ background:#fef2f2; }
.notif-item.is-loading{ opacity:.6; pointer-events:none; }
.notif-icon{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.notif-icon--price{ background:#fff3cd; color:#b45309; }
.notif-icon--message{ background:#e0f2fe; color:#0369a1; }
.notif-icon--system{ background:#dcfce7; color:#166534; }
.notif-icon--welcome{ background:rgba(214,33,95,.12); color:var(--accent); }
.notif-body{ flex:1; min-width:0; }
.notif-title{ font-size:14px; font-weight:500; color:var(--ink); margin-bottom:3px; }
.notif-text{ font-size:13px; color:var(--ink-2); line-height:1.5; }
.notif-time{ font-size:12px; color:var(--ink-3); margin-top:6px; display:flex; align-items:center; gap:4px; }
.notif-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; margin-top:6px; }

.empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:80px 20px; background:#fff; border:1px dashed var(--line); border-radius:20px; }
.empty-state[hidden]{ display:none; }
.empty-state i{ font-size:46px; color:var(--ink-3); }
.empty-state h3{ font-size:18px; font-weight:700; color:var(--ink); margin:0; }
.empty-state p{ font-size:13.5px; color:var(--ink-2); margin:0; max-width:340px; }

/* ============================================================
   CATALOG PAGE
   ============================================================ */
.page-catalog .site-header{ position:relative; }
.page-catalog .catalog-bar{ top:0; }

/* ============================================================
   CATALOG BAR (sticky filter on /elanlar)
   ============================================================ */
.catalog-bar{
  position:sticky; top:60px; z-index:100;
  background:#fff;
  border-bottom:1px solid rgba(27,25,22,.09);
  box-shadow:0 2px 12px -4px rgba(27,25,22,.10);
  padding:8px 40px;
}
.catalog-bar .tabs.swiper{ display:none !important; }
.catalog-bar .search-card{
  opacity:1 !important;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(27,25,22,.04);
  border:1px solid rgba(27,25,22,.08);
  transition:border-color .15s, box-shadow .15s;
}
.catalog-bar .search-card:hover{
  border-color:rgba(27,25,22,.14);
  box-shadow:0 4px 14px -6px rgba(27,25,22,.10);
}
/* Compact segments inside catalog bar */
.catalog-bar .filter-seg{ padding:6px 18px; gap:2px; }
.catalog-bar .seg-address{ padding:6px 16px 6px 14px; }
.catalog-bar .seg-label{ font-size:9.5px; letter-spacing:.07em; }
.catalog-bar .seg-val{ font-size:13px; }
.catalog-bar .search-wrap{ gap:8px; }
.catalog-bar .adv-btn{
  width:42px; height:42px; border-radius:12px;
  box-shadow:0 1px 3px rgba(27,25,22,.05);
}
.catalog-bar .adv-btn i{ font-size:17px; }
.catalog-bar .search-btn{
  height:42px; width:42px; padding:0; border-radius:12px;
  box-shadow:0 3px 10px -2px rgba(255,33,83,.38);
}
.catalog-bar .search-btn::after{ display:none; }
.catalog-bar .search-btn i{ font-size:18px; }

/* Category picker segment */
.seg-category{
  flex:0 0 auto; min-width:0;
  border-right:1px solid rgba(27,25,22,.07);
  padding:10px 18px;
}
.seg-category .seg-row{ gap:8px; }
.seg-cat-icon{ font-size:17px; color:var(--accent); flex-shrink:0; }
.seg-category .seg-val{ font-weight:600; color:var(--ink); font-size:13.5px; }
.seg-category .ph-caret-down{ font-size:12px; color:var(--ink-3); margin-left:2px; }
.seg-category:hover .seg-val{ color:var(--accent); }

/* Category dropdown */
.dd-cats{
  display:flex; flex-direction:column;
  min-width:200px; padding:6px;
}
.dd-cat-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:9px;
  font-size:13px; font-weight:500; color:var(--ink-2);
  text-align:left; width:100%; transition:background .12s, color .12s;
}
.dd-cat-item i:first-child{ font-size:17px; flex-shrink:0; }
.dd-cat-item:hover{ background:var(--paper); color:var(--ink); }
.dd-cat-item.active{ color:var(--accent); font-weight:600; }
.dd-cat-item .dd-tick{ margin-left:auto; font-size:13px; color:var(--accent); }

/* Mobile category bottom sheet */
.bs-body--cats{ display:flex; flex-direction:column; gap:2px; }
.bs-cat-item{
  display:flex; align-items:center; gap:12px;
  padding:13px 16px; border-radius:10px;
  font-size:14px; font-weight:500; color:var(--ink-2);
  text-align:left; width:100%; transition:background .12s;
}
.bs-cat-item i:first-child{ font-size:20px; flex-shrink:0; }
.bs-cat-item.active{ color:var(--accent); font-weight:700; background:rgba(255,33,83,.04); }
.bs-cat-item .bs-cat-tick{ margin-left:auto; font-size:15px; color:var(--accent); }

/* ============================================================
   SEARCH RESULTS PAGE
   ============================================================ */
.results-layout{ display:grid; grid-template-columns:300px 1fr; gap:32px; margin-top:30px; align-items:start; }

/* ---------- CONTACT PAGE ---------- */
.contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:56px; align-items:stretch; }
.contact-layout .map-ph{ height:100%; min-height:360px; }
.contact-layout .form-card{ margin-top:0; }
.value-card.value-card-link{ display:block; transition:border-color .15s; }
.value-card.value-card-link:hover{ border-color:rgba(27,25,22,.22); }

.filters-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px; position:sticky; top:80px; }
.filters-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.filters-card-head h2{ font-size:16px; font-weight:700; margin:0; }
.filters-card-head button{ font-size:12.5px; font-weight:600; color:var(--accent); }

.filter-group{ padding:18px 0; border-top:1px solid var(--line-soft); }
.filter-group:first-of-type{ border-top:none; padding-top:0; }
.filter-group-title{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:13px; }
.filter-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.filter-chip{ position:relative; }
.filter-chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.filter-chip span{
  display:flex; align-items:center; height:36px; padding:0 14px; border-radius:18px;
  border:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--ink-2); transition:.15s;
}
.filter-chip input:checked + span{ background:var(--ink); border-color:var(--ink); color:#fff; }
.filter-range{ display:flex; align-items:center; gap:10px; }
.filter-range .field-input{ height:44px; }

.results-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:4px; }
.results-count{ display:flex; align-items:center; gap:12px; }
.results-cat-tag{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 12px; border-radius:9px;
  background:rgba(214,33,95,.08); color:var(--accent);
  font-size:13px; font-weight:600;
}
.results-cat-tag i{ font-size:15px; }
.results-total{ font-size:14px; color:var(--ink-3); }
.results-total strong{ color:var(--ink); font-weight:700; font-size:15px; }

.results-sort{ display:flex; align-items:center; gap:8px; }

.sort-select{ position:relative; }
.sort-select-btn{
  display:flex; align-items:center; gap:8px;
  height:36px; padding:0 12px 0 14px; border-radius:10px;
  border:1.5px solid var(--line); background:#fff;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ink);
  cursor:pointer; white-space:nowrap; transition:border-color .15s;
}
.sort-select-btn .ph-arrows-down-up{ font-size:15px; color:var(--ink-3); }
.sort-select-btn .ph-caret-down{ font-size:12px; color:var(--ink-3); transition:transform .2s; }
.sort-select.open .sort-select-btn{ border-color:var(--ink-2); }
.sort-select.open .sort-select-btn .ph-caret-down{ transform:rotate(180deg); }

.sort-select-dd{
  position:absolute; top:calc(100% + 6px); right:0;
  background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 8px 24px -4px rgba(27,25,22,.12);
  list-style:none; margin:0; padding:5px;
  min-width:160px; z-index:200;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .16s, transform .16s;
}
.sort-select.open .sort-select-dd{
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.sort-select-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:9px 12px; border-radius:8px;
  font-size:13px; font-weight:500; color:var(--ink-2);
  cursor:pointer; transition:background .12s, color .12s;
}
.sort-select-item:hover{ background:var(--paper); color:var(--ink); }
.sort-select-item.active{ color:var(--ink); font-weight:700; }
.sort-select-item .ph-check{ font-size:13px; color:var(--accent); }
.results-view{ display:flex; gap:6px; }
.results-view button{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink-3); display:flex; align-items:center; justify-content:center; }
.results-view button.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

.active-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.active-filter{ display:flex; align-items:center; gap:8px; height:34px; padding:0 8px 0 14px; border-radius:18px; background:#fff; border:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--ink); }
.active-filter button{ width:20px; height:20px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; }
.active-filter button i{ font-size:11px; }

.results-grid{ margin-top:26px; }

/* ---------- PAGINATION ---------- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:32px; flex-wrap:wrap; }
.page-btn{
  min-width:38px; height:38px; padding:0 6px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:500; color:var(--ink-2);
  background:#fff; border:1.5px solid var(--line);
  text-decoration:none; cursor:pointer; transition:border-color .15s, color .15s, background .15s;
}
.page-btn:hover{ border-color:var(--accent); color:var(--accent); }
.page-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.page-btn.disabled{ opacity:.4; pointer-events:none; }
.page-btn--icon{ font-size:16px; }
.page-btn{
  min-width:40px; height:40px; padding:0 8px; border-radius:11px; border:1px solid var(--line);
  background:#fff; font-size:13.5px; font-weight:600; color:var(--ink-2); display:flex; align-items:center; justify-content:center; transition:.15s;
}
.page-btn:hover{ border-color:rgba(27,25,22,.32); color:var(--ink); }
.page-btn.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.page-btn.dots{ border:none; color:var(--ink-3); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- ≤1200: tighten gutters ---- */
@media (max-width:1200px){
  .container{ padding:0 28px; }
  .catalog-bar{ padding-left:28px; padding-right:28px; }
  .masthead h1{ font-size:58px; }
}

/* ---- ≤1024: tablet landscape ---- */
@media (max-width:1024px){
  .main-nav{ display:none; }
  .hero-zone{ padding-top:52px; padding-bottom:52px; }
  .masthead h1{ font-size:46px; }
  .grid-4{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .grid-5{ grid-template-columns:repeat(4,1fr); gap:16px; }
  .grid-7{ grid-template-columns:repeat(5,1fr); gap:16px; }

  /* no hover affordance on touch devices — avoid stuck :hover state */
  .realtor:hover{ transform:none; }
  .dev-card:hover{ transform:none; box-shadow:none; }

  /* detail */
  .detail-layout{ grid-template-columns:1fr; gap:0; }
  .detail-side{ display:none; }
  .mob-price-bar{
    display:block; margin:14px 0 0;
    background:#fff; border:1px solid var(--line); border-radius:18px; padding:0;
    box-shadow:0 4px 20px -6px rgba(27,25,22,.14);
    overflow:hidden; position:relative;
  }
  .mob-price-bar::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--accent),#ff7a93);
  }
  .mob-price-bar .specs{
    display:flex; gap:6px; margin:0;
    padding:12px 14px 14px; border-top:1px solid var(--line-soft);
  }
  .mob-price-bar .specs .spec{
    flex:0 1 auto; max-width:150px; background:none; border:none; border-radius:0; box-shadow:none;
    padding:8px 6px; gap:6px;
    flex-direction:row; align-items:center; text-align:left;
    position:relative; transform:none !important;
  }
  .mob-price-bar .specs .spec:hover{ box-shadow:none; transform:none !important; }
  .mob-price-bar .specs .spec-icon{ width:32px; height:32px; border-radius:9px; background:rgba(255,33,83,.07); }
  .mob-price-bar .specs .spec-icon i{ font-size:14px; color:var(--accent); }
  .mob-price-bar .specs .spec-v{ font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
  .mob-price-bar .specs .spec-l{ font-size:10.5px; color:var(--ink-3); font-weight:500; }
  .mob-price-main{ display:flex; align-items:baseline; gap:10px; margin-bottom:0; padding:16px 18px 12px; }
  .mob-price-val{ font-family:'Manrope',system-ui,sans-serif; font-weight:800; font-size:28px; letter-spacing:-.01em; color:var(--ink); }
  .mob-price-perm2{ font-size:13px; color:var(--ink-3); }
  .mob-price-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; padding:0 18px; }
  .mob-only-safety{ display:flex; margin:20px 0 0; }
  .gallery-main{ height:420px; border-radius:16px; }
  .listing-map{ height:220px; }
  .specs{ gap:8px; }
  .detail-head h1{ font-size:34px; }
  .mob-cta{ display:flex; }
  main.container{ padding-bottom:20px; }

  .account-layout,.results-layout,.contact-layout{ grid-template-columns:1fr; }
  .filters-card{ position:static; }
  .stats-row,.values-grid{ grid-template-columns:repeat(2,1fr); }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---- ≤768: tablet portrait ---- */
@media (max-width:768px){
  .container{ padding:0 22px; }
  .catalog-bar{ padding-left:22px; padding-right:22px; }
  .header-inner{ height:56px; }
  .masthead h1{ font-size:38px; }
  .lead{ font-size:15.5px; }

  .grid-4,.grid-5{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .grid-7{ grid-template-columns:repeat(4,1fr); gap:12px; }

  .section-head{ margin-top:60px; }
  .section-head h2{ font-size:26px; }
  .section-seo-note{
    font-size:11px; max-width:180px; line-height:1.4;
    display:-webkit-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis;
  }

  /* hero + search card */
  .hero-zone{ padding-top:40px; padding-bottom:32px; }
  .masthead{ margin-bottom:32px; }
  .masthead h1{ font-size:38px; }
  .search-card{ border-radius:20px; }
  .tabs.swiper{ padding:0 16px; }
  .tab{ padding:14px 10px 13px; }
  .tab span{ font-size:13.5px; }
  .hero-watermark{ display:none; }

  /* ---- MOBILE FILTER REDESIGN ---- */
  .filter-bar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:rgba(27,25,22,.08);
    border-top:1px solid rgba(27,25,22,.08);
    min-height:108px;
  }

  /* every segment: label + value stacked, clean card */
  .filter-seg{
    flex:none; flex-direction:column; align-items:flex-start;
    justify-content:center;
    padding:12px 16px 11px;
    background:#fff; gap:2px;
    border-radius:0; border:none;
  }
  .filter-seg + .filter-seg{ border-left:none; }
  .filter-seg:hover{ background:#fafaf8; }
  .filter-seg.open{ background:#f7f5f1; }

  /* label — small muted tag */
  .seg-label{
    display:flex; font-size:10px; letter-spacing:.05em;
    text-transform:uppercase; font-weight:700; color:var(--ink-3);
    line-height:1; margin-bottom:0;
  }
  .seg-label i{ font-size:11px; }

  /* value row */
  .seg-row{ width:100%; justify-content:space-between; }
  .seg-val{ font-size:14px; font-weight:600; color:var(--ink); }
  .seg-val.muted{ color:var(--ink-2); font-weight:500; }
  .seg-row .ph-caret-down{ font-size:11px; color:var(--ink-3); }

  /* last odd segment gets full width — no orphan cells */
  .filter-seg.seg-full{ grid-column:1/-1; }

  /* Catalog page only: drop the whole property-specific filter row (category,
     deal type, price/rooms/area…) from the mobile bar — the catalog-bar's own
     category picker already covers this, so keep just the address/search row.
     Home page keeps its full filter set untouched. */
  body.page-catalog .filter-seg:not(.seg-address){
    display:none;
  }
  body.page-catalog .filter-bar{ min-height:0; }

  /* Catalog mobile: slim down the address/search bar a touch */
  body.page-catalog .seg-address{ padding:6px 10px; }
  body.page-catalog .adv-btn{ width:36px; height:36px; border-radius:9px; }
  body.page-catalog .search-btn{ height:36px; width:36px; border-radius:9px; }
  body.page-catalog .search-btn i{ font-size:15px; }

  /* address row — full width, contains input + action buttons inline */
  .seg-address{
    grid-column:1/-1;
    flex-direction:row; align-items:center;
    padding:8px 12px; gap:6px; cursor:text;
    background:#fff; border-radius:0 0 16px 16px;
  }
  .seg-address .seg-label{
    display:flex; text-transform:none; letter-spacing:0;
    font-size:16px; color:var(--ink-3); margin:0; font-weight:400;
    align-items:center; flex:none;
  }
  .seg-address .seg-row{ display:none; }
  .seg-input{ font-size:13px; font-weight:400; color:var(--ink); flex:1; min-width:0; }
  .search-wrap{ padding:0; gap:6px; }
  .adv-btn{ height:38px; width:38px; border-radius:9px; flex:none; box-shadow:none; }
  .search-btn{ height:38px; flex:none; border-radius:9px; padding:0 16px; }
  .search-btn i{ font-size:17px; }

  .dropdown{ left:14px; right:14px; width:auto !important; min-width:0; }
  .dd-chips{ flex-wrap:nowrap; }
  .dd-range{ left:14px !important; right:14px !important; width:auto !important; }


  /* detail */
  .detail-head{ flex-direction:column; align-items:flex-start; gap:18px; }
  .thumb{ width:76px; }
  .features{ grid-template-columns:1fr; }
  .features::before{ display:none; }
  .features > .feature:nth-last-child(-n+2){ border-bottom:1px solid var(--line-soft); }
  .features > .feature:last-child{ border-bottom:none; }
  .desc-body{ padding-right:24px; }

  /* banner + footer stack */
  .banner{ flex-direction:column; align-items:flex-start; gap:26px; padding:38px 30px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; padding:44px 22px 28px; }

  /* forms */
  .auth-card{ padding:28px; }
  .field-grid-2,.field-grid-3{ grid-template-columns:1fr; }
  .form-card{ padding:22px; }
  .upload-preview{ grid-template-columns:repeat(4,1fr); gap:10px; }
  .upload-thumb .remove,
  .upload-thumb-move{ width:26px; height:26px; font-size:13px; }
  .upload-thumb-move--left{ right:34px; }
  .prop-type-grid{ grid-template-columns:repeat(3,1fr); }

  .page-hero h1{ font-size:36px; }
  .stats-row{ grid-template-columns:repeat(2,1fr); gap:24px 14px; }
  .values-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .breadcrumb{ padding-top:16px; }
  .account-layout{ margin-top:18px; gap:18px; }
  .account-head{
    flex-direction:column; align-items:stretch; gap:20px;
    background:#fff; border:1px solid var(--line); border-radius:20px;
    padding:24px; box-shadow:0 24px 60px -32px rgba(27,25,22,.22);
  }
  .account-head h1{ font-size:24px; }
  .account-head .section-index i{ font-size:20px; }
  .account-head p{ margin-top:10px; line-height:1.5; }
  .account-head .btn-primary{ justify-content:center; height:50px; border-radius:14px; font-size:14.5px; }
  .profile-panel{ padding:22px; }

  /* Account sidebar collapses behind a burger toggle — the full nav list
     was pushing the actual page content (Elanlarım, etc.) far below the
     fold on narrow screens. */
  .account-card{ padding:18px; }
  .account-user{ padding-bottom:0; border-bottom:none; margin-bottom:0; }
  .account-nav-toggle{ display:flex; }
  .account-nav{
    display:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft);
  }
  .account-nav.account-nav--open{ display:flex; }
  .listing-row{ flex-direction:column; align-items:stretch; }
  .listing-row-media{ width:100%; height:auto; aspect-ratio:16/9; }
  .listing-row-body{ width:100%; }
  .listing-row-title{
    white-space:normal; display:-webkit-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis;
  }
  .listing-row-meta{ flex-wrap:wrap; row-gap:4px; }
  .listing-row-foot{ width:100%; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); }
  .listing-row-price{ margin-right:0; }
  .results-head{ align-items:flex-start; }
}

/* ---- ≤560: large phone ---- */
@media (max-width:560px){
  .header-actions .btn-primary{ height:42px; padding:0 16px; border-radius:12px; }
  .user-btn{ width:42px; height:42px; padding:0; justify-content:center; border-radius:12px; }
  .user-btn-label{ display:none; }

  .kicker{ letter-spacing:.22em; }
  .masthead h1{ font-size:31px; letter-spacing:-.02em; }
  .hero-zone{ padding-top:36px; padding-bottom:36px; }
  .masthead{ margin-bottom:26px; }
  .filter-seg{ flex:1 1 100%; border-right:none !important; }

  .container{ padding:0 10px; }
  .catalog-bar{ padding-left:10px; padding-right:10px; }
  .grid-4,.grid-5,.grid-7{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .section-head h2{ font-size:22px; }
  .section-index i{ font-size:21px; }
  .see-all{ font-size:12px; }

  .filter-seg,.filter-seg + .filter-seg{ flex:1 1 100%; border-radius:0; }
  .dd-range{ left:8px !important; right:8px !important; width:auto !important; min-width:0; }
  .dd-chips{ width:auto !important; flex-wrap:nowrap; gap:5px; }
  .search-wrap{ gap:6px; }

  .detail-head h1{ font-size:26px; }
  .detail-actions{ width:100%; }
  .detail-actions .detail-back{ display:inline-flex; }
  .ghost-btn{ flex:1; justify-content:center; }
  .ghost-btn.icon-only{ flex:none; }
  .specs{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
  .thumb{ width:72px; }
  .map-ph{ height:220px; }

  .gallery-main{ height:280px; border-radius:14px; }
  .gallery-main .swiper-button-prev,
  .gallery-main .swiper-button-next{ width:30px; height:30px; margin-top:-15px; }
  .gallery-main .swiper-button-prev i,
  .gallery-main .swiper-button-next i{ font-size:13px; }
  .gallery-zoom-hint{ width:34px; height:34px; right:12px; top:12px; }
  .gallery-zoom-hint i{ font-size:17px; }
  .gallery-count{ height:26px; padding:0 10px; left:12px; bottom:12px; font-size:11px; gap:4px; }
  .gallery-count i{ font-size:13px; }
  /* Fullscreen API is awkward/inconsistent on mobile browsers (notably iOS
     Safari) — hide fsLightbox's toolbar button for it there. No distinct
     class exists per toolbar button in the vendor markup, so target it by
     its title text (toggles between these two strings). */
  .fslightbox-toolbar-button[title="Enter fullscreen"],
  .fslightbox-toolbar-button[title="Exit fullscreen"]{ display:none !important; }
  .specs{
    display:flex; gap:0; margin:0 0 14px;
    background:none; border:none; box-shadow:none; border-radius:0; padding:0;
  }
  .spec{
    flex:1; background:none; border:none; border-radius:0; box-shadow:none;
    padding:8px 4px; gap:5px;
    flex-direction:column; align-items:center; text-align:center;
    position:relative; transform:none !important;
  }
  .spec+.spec::before{
    content:''; position:absolute; left:0; top:15%; height:70%;
    width:1px; background:var(--line-soft);
  }
  .spec:hover{ box-shadow:none; transform:none !important; }
  .spec-icon{ width:30px; height:30px; border-radius:9px; background:rgba(255,33,83,.08); }
  .spec-icon i{ font-size:14px; color:var(--accent); }
  .spec-v{ font-size:13px; font-weight:700; color:var(--ink); line-height:1.1; }
  .spec-l{ font-size:10px; color:var(--ink-3); font-weight:500; }

  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; padding:36px 22px 36px!important; }
  .footer-brand{ grid-column:1/-1; }
  .footer-bottom{ flex-direction:column; gap:8px; align-items:flex-start; padding:24px 22px 40px!important; }

  /* forms */
  .upload-preview{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .prop-type-grid{ grid-template-columns:repeat(2,1fr); }
  .form-actions{ flex-direction:column-reverse; align-items:stretch; gap:10px; }
  .form-actions .btn,
  .form-actions .ghost-btn{
    justify-content:center; box-sizing:border-box;
    height:50px !important; min-height:50px !important; line-height:1;
  }
  .form-actions--sticky{
    flex-direction:row; align-items:stretch;
    padding:14px 0 calc(14px + env(safe-area-inset-bottom));
  }
  .form-actions--sticky .btn,
  .form-actions--sticky .ghost-btn{ flex:1; }
}

/* ---- ≤480: listing card — the handoff itself is a fixed-width demo with
   no mobile rules, so these are our own proportional scale-down, not a
   copied breakpoint. ---- */
@media (max-width:480px){
  /* Premium crown next to the heart crowded a ~180px-wide photo — drop it
     from the photo on mobile (desktop keeps it) and let the heart sit
     alone at its normal size/spot instead of being shrunk to make room. */
  .card-premium-badge{ display:none; }

  .property-card__tag{ top:9px; left:8px; gap:5px; padding:4px 8px 4px 6px; max-width:calc(100% - 59px); }
  .property-card__tag i{ font-size:11px; }
  .property-card__tag span{ font-size:10px; font-weight:600; }
  .property-card__bottom-badges{ bottom:8px; left:8px; }
  .property-card__mortgage{ width:24px; height:24px; }
  .property-card__mortgage i{ font-size:12px; }
  .property-card__body{ padding:12px 12px 14px; }
  .property-card__price{ font-size:16px; }
  .property-card__currency{ font-size:11px; }
  .property-card__price-per-m2{ font-size:10px; }
  .property-card__location{ margin-top:9px; }
  .property-card__location span{ font-size:12px; }
  .property-card__divider{ margin:8px 0; }
  /* one truncating line instead of flex-wrap — wrapping left a dot
     separator stranded alone at the start of the second line whenever
     a card had 3 facts and ran out of room. */
  .property-card__facts{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .property-card__fact{ display:inline; }
  .property-card__fact i{ display:none; }
  .property-card__fact span{ font-size:10.5px; }
  .property-card__fact + .property-card__fact::before{ content:'·'; margin:0 3px; color:var(--ink-3); }
  .property-card__footer{ margin-top:11px; }
  .property-card__meta span{ flex:none; }
  .property-card__more{ display:none; }
}

/* ---- ≤400: small phone ---- */
@media (max-width:400px){
  .container{ padding:0 8px; }
  .catalog-bar{ padding-left:8px; padding-right:8px; }
  .grid-7{ grid-template-columns:repeat(2,1fr); }
  .grid-4,.grid-5{ gap:6px; }
  .price-card{ padding:20px; }
  .banner{ padding:30px 22px; }
  .banner-text h2{ font-size:30px; }
}

/* ============================================================
   MOBILE BOTTOM SHEET (filter segments)
   ============================================================ */
.bs-overlay{
  position:fixed; inset:0; z-index:400;
  background:rgba(10,8,6,.45);
  opacity:0; transition:opacity .25s;
}
.bs-overlay.show{ opacity:1; }
.bs-panel{
  position:fixed; left:0; right:0; bottom:0; z-index:401;
  background:#fff; border-radius:20px 20px 0 0;
  padding-bottom:env(safe-area-inset-bottom,16px);
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
}
.bs-panel.show{ transform:translateY(0); }
.bs-handle{ width:36px; height:4px; border-radius:2px; background:var(--line); margin:12px auto 0; }
.bs-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 10px;
}
.bs-title{ font-size:17px; font-weight:700; color:var(--ink); }
.bs-body{ padding:4px 16px 12px; }
.bs-chips{ display:flex; gap:8px; }
.bs-chip{
  flex:1; height:48px; border-radius:9px;
  font-size:14px; font-weight:600; color:var(--ink-2);
  background:var(--paper); border:none; cursor:pointer; transition:.12s;
  display:flex; align-items:center; justify-content:center;
}
.bs-chip:active{ opacity:.8; }
.bs-chip.active{ background:var(--accent); color:#fff; box-shadow:0 4px 12px -4px rgba(255,33,83,.4); }
.bs-list{ list-style:none; margin:0; padding:0; }
.bs-list-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 4px; border-bottom:1px solid var(--line-soft);
  font-size:15px; color:var(--ink-2); cursor:pointer; transition:.1s;
}
.bs-list-item:last-child{ border-bottom:none; }
.bs-list-item.sel{ color:var(--ink); font-weight:600; }
.bs-tick{ font-size:15px; color:var(--accent); }
.bs-tick--hidden{ visibility:hidden; }
/* ======================================
   LOCATION MODAL — complete design
   ====================================== */
.loc-overlay{
  position:fixed; inset:0; z-index:900;
  background:rgba(10,8,6,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .25s;
}
.loc-overlay.is-open{ opacity:1; }

.loc-modal{
  position:fixed; z-index:901;
  top:50%; left:50%; transform:translate(-50%,-46%) scale(.97);
  width:min(900px, calc(100vw - 24px));
  max-height:min(94vh, 700px);
  background:#fff;
  border-radius:22px;
  box-shadow:0 32px 80px rgba(10,8,6,.3), 0 8px 24px rgba(10,8,6,.1);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; pointer-events:none;
  transition:opacity .28s, transform .28s cubic-bezier(.32,.72,0,1);
}
.loc-modal.is-open{
  opacity:1; pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

/* header */
.loc-top{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:16px 20px 14px; flex:none;
}
.loc-top .loc-eyebrow{ justify-self:start; }
.loc-top .loc-city-tab{ justify-self:center; }
.loc-top .loc-close-btn{ justify-self:end; }
.loc-eyebrow{
  font-size:11px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.loc-close-btn{
  width:30px; height:30px; border-radius:50%; border:none;
  background:rgba(27,25,22,.1); display:flex; align-items:center;
  justify-content:center; font-size:13px; color:var(--ink-2);
  cursor:pointer; transition:.15s;
}
.loc-close-btn:hover{ background:rgba(27,25,22,.18); color:var(--ink); }

/* city button in header */
.loc-city-tab{
  display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 14px 0 10px; border:1px solid var(--line-soft); background:var(--paper);
  border-radius:9px;
  font-family:inherit; font-size:13px; font-weight:700; color:var(--ink);
  cursor:pointer; transition:background .15s, border-color .15s, box-shadow .15s; white-space:nowrap; flex:none;
}
.loc-city-tab .ph-map-pin{
  font-size:12px; color:var(--accent); flex:none;
  width:18px; height:18px; border-radius:50%;
  background:rgba(255,33,83,.12);
  display:flex; align-items:center; justify-content:center;
}
.loc-city-caret{ font-size:10px !important; color:var(--ink-3) !important; transition:transform .2s; }
.loc-city-tab:hover{ background:#fff; border-color:var(--line); box-shadow:0 2px 8px -3px rgba(27,25,22,.18); }
.loc-city-tab.active .loc-city-caret{ transform:rotate(180deg); }

/* city picker panel */
.loc-city-panel{
  display:flex; flex-direction:column; flex:1; min-height:0;
}
.loc-city-s-wrap{ padding:0 20px 12px; flex:none; }
.loc-city-list{ flex:1; overflow-y:auto; }
.loc-city-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border:none; background:none;
  width:100%; font-family:inherit; cursor:pointer; text-align:left;
  transition:background .1s;
}
.loc-city-row+.loc-city-row{ border-top:1px solid rgba(27,25,22,.06); }
.loc-city-row:hover{ background:var(--paper); }
.loc-city-name{ font-size:14px; font-weight:500; color:var(--ink-2); }
.loc-city-row.active .loc-city-name{ color:var(--ink); font-weight:700; }

/* main content */
#locMain{ display:flex; flex-direction:column; flex:1; overflow:hidden; min-height:0; }

/* tabs — segmented control */
.loc-pills-row{
  display:flex; margin:10px 16px 8px; flex:none;
  background:rgba(27,25,22,.07); border-radius:13px; padding:3px;
}
.loc-pills-track{ display:contents; }
.loc-pill{
  flex:1; height:36px; border:none; padding:0; outline:none;
  background:transparent; border-radius:10px; font-family:inherit;
  font-size:13px; font-weight:600; color:var(--ink-3);
  cursor:pointer; position:relative;
  transition:background .22s, color .22s, box-shadow .22s;
}
.loc-pill::after{ display:none; }
.loc-pill.active{
  background:#fff; color:var(--ink);
  box-shadow:0 1px 4px rgba(10,8,6,.13), 0 0.5px 1.5px rgba(10,8,6,.08);
}
.loc-pill.active::after{ display:none; }

/* search box */
.loc-s-wrap{ padding:8px 16px 8px; flex:none; }
.loc-sbox{
  display:flex; align-items:center; gap:8px;
  background:#fff; border-radius:11px; padding:10px 14px;
  border:1.5px solid var(--line); transition:.15s;
}
.loc-sbox:focus-within{ border-color:rgba(27,25,22,.3); }
.loc-sbox > i{ font-size:15px; color:var(--ink-3); flex:none; }
.loc-search-inp,.loc-city-search-inp{
  flex:1; border:none; background:none; outline:none;
  font-family:inherit; font-size:14px; color:var(--ink);
}
.loc-search-inp::placeholder,.loc-city-search-inp::placeholder{ color:var(--ink-3); }
.loc-search-clear,.loc-city-search-clear{
  background:none; border:none; cursor:pointer; color:var(--ink-3); font-size:13px; padding:0; flex:none;
}

/* chip scroll area */
.loc-scroll{ flex:1; overflow-y:auto; padding:10px 16px 10px; }
.loc-panel{ display:none; }
/* flat panel */
.loc-panel.active{ display:flex; flex-wrap:wrap; gap:7px; align-content:flex-start; }

/* flat chips */
.loc-chip{
  flex:none; height:34px; padding:0 14px; border-radius:9px;
  border:1.5px solid rgba(27,25,22,.16); background:transparent;
  font-family:inherit; font-size:13px; font-weight:500; color:var(--ink-2);
  cursor:pointer; transition:.15s;
  display:inline-flex; align-items:center; white-space:nowrap;
}
.loc-chip:hover{ border-color:var(--ink); color:var(--ink); }
.loc-chip.active{
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;
  box-shadow:0 4px 14px -4px rgba(255,33,83,.4);
}

/* grouped panel */
.loc-panel--grouped.active{ display:block; }
.loc-group-cols{ columns:3; column-gap:10px; padding:2px 0 8px; }
.loc-group{
  break-inside:avoid; margin-bottom:8px;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line-soft);
}

/* group header */
.loc-group-head{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:9px 12px; border:none;
  background:var(--paper); font-family:inherit;
  font-size:13px; font-weight:700; color:var(--ink);
  cursor:pointer; text-align:left; transition:.15s;
}
.loc-group-head:hover{ background:#ebe7df; }
.loc-group-head.active{
  background:var(--accent); color:#fff;
}
.loc-group-head-name{ flex:1; }
.loc-group-count{
  font-size:11px; font-weight:600; color:var(--ink-3);
  background:rgba(27,25,22,.1); border-radius:6px; padding:2px 7px; flex:none;
}
.loc-group-head.active .loc-group-count{ background:rgba(255,255,255,.25); color:#fff; }
.loc-group-count--has{ background:rgba(255,33,83,.12); color:var(--accent); }
.loc-group-head.active .loc-group-count--has{ background:rgba(255,255,255,.25); color:#fff; }

/* group items */
.loc-gitem{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:7px 12px; border:none;
  border-top:1px solid var(--line-soft);
  background:#fff; font-family:inherit;
  font-size:13px; font-weight:400; color:var(--ink-2);
  cursor:pointer; text-align:left; transition:.12s;
}
.loc-gitem:hover{ background:#fafaf9; color:var(--ink); }
.loc-gitem.active{ color:var(--ink); font-weight:600; background:#fff9fa; }

/* checkmark icon */
.loc-gmark{
  width:18px; height:18px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:transparent; transition:.15s;
}
.loc-gitem.active .loc-gmark{
  background:var(--accent); color:#fff;
}

/* radio (city list) */
.loc-radio{
  width:18px; height:18px; border-radius:50%; border:2px solid var(--line);
  flex:none; transition:.15s; position:relative;
}
.loc-radio.checked{ border-color:var(--accent); background:var(--accent); }
.loc-radio.checked::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:#fff; }

/* footer */
.loc-foot{
  display:flex; gap:10px; padding:12px 16px 18px; flex:none;
}
.loc-foot-reset{
  flex:1; height:44px; border-radius:12px; border:none;
  background:rgba(27,25,22,.08); font-family:inherit;
  font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:.15s;
}
.loc-foot-reset:hover{ background:rgba(27,25,22,.14); }
.loc-foot-apply{
  flex:1; height:44px; border-radius:12px; border:none;
  background:var(--accent); color:#fff; font-family:inherit;
  font-size:14px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px; transition:.15s;
}
.loc-foot-apply:hover{ background:#e01847; }

.loc-empty{ padding:24px; text-align:center; color:var(--ink-3); font-size:14px; margin:0; }

/* address bottom sheet */
.bs-addr-search{
  display:flex; align-items:center; gap:10px;
  margin:10px 16px 6px; padding:10px 14px;
  background:var(--paper); border-radius:12px;
}
.bs-addr-search i{ font-size:17px; color:var(--ink-3); flex:none; }
.bs-addr-inp{
  flex:1; border:none; background:none; outline:none;
  font-family:inherit; font-size:15px; color:var(--ink);
}
.bs-addr-inp::placeholder{ color:var(--ink-3); }
.bs-addr-clear{ background:none; border:none; cursor:pointer; color:var(--ink-3); font-size:15px; padding:0; flex:none; }
.bs-addr-list{ list-style:none; margin:0; padding:0 8px 8px; max-height:55vh; overflow-y:auto; }
.bs-addr-list li{
  display:flex; align-items:center; gap:10px;
  padding:12px 10px; border-radius:10px;
  font-size:15px; color:var(--ink-2); cursor:pointer; transition:.1s;
}
.bs-addr-list li:hover{ background:var(--paper); }
.bs-addr-list .addr-ic{ font-size:15px; color:var(--ink-3); flex:none; }
.bs-addr-list .addr-empty{ color:var(--ink-3); cursor:default; justify-content:center; }
.bs-addr-panel{ max-height:85vh; }

.bs-body .dd-range-inputs{ border-radius:12px; }
.bs-body .dd-range-inp{ height:50px; font-size:15px; }
.bs-foot{
  display:flex; gap:10px;
  padding:0 16px 16px;
}
.bs-reset{
  flex:1; height:40px; border-radius:10px;
  background:var(--paper); color:var(--ink-2);
  font-size:14px; font-weight:600; font-family:inherit;
  border:none; cursor:pointer;
}
.bs-reset:active{ opacity:.7; }
.bs-apply{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  height:40px; border-radius:10px; background:var(--accent); color:#fff;
  font-size:14px; font-weight:700; font-family:inherit; border:none; cursor:pointer;
  box-shadow:0 4px 14px -4px rgba(255,33,83,.4);
}

/* ============================================================
   ADVANCED FILTER MODAL
   ============================================================ */
.adv-overlay{
  display:none; position:fixed; inset:0; z-index:900;
  background:rgba(10,8,6,.62);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.adv-overlay.is-open{ display:block; animation:advFadeIn .24s ease; }

.adv-modal{
  position:fixed; z-index:901;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(900px, calc(100vw - 24px));
  max-height:min(94vh, 960px);
  background:var(--paper);
  border-radius:24px;
  box-shadow:0 48px 120px -24px rgba(10,8,6,.4), 0 8px 32px -8px rgba(10,8,6,.14);
  flex-direction:column; overflow:hidden; display:none;
}
.adv-modal.is-open{ display:flex; animation:advSlideUp .32s cubic-bezier(.16,1,.3,1); }

@keyframes advFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes advSlideUp{
  from{ opacity:0; transform:translate(-50%,-45%) scale(.95); }
  to{   opacity:1; transform:translate(-50%,-50%) scale(1); }
}

/* HEAD */
.adv-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 14px; flex:none; background:var(--paper);
}
.adv-modal-title-wrap{ display:flex; align-items:center; }
.adv-modal-title-wrap::before{ display:none; }
.adv-modal-title{
  font-size:11px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin:0;
}
.adv-modal-close{
  width:30px; height:30px; border-radius:50%; border:none;
  background:rgba(27,25,22,.1); display:flex; align-items:center;
  justify-content:center; font-size:13px; color:var(--ink-2);
  cursor:pointer; transition:.15s; flex:none;
}
.adv-modal-close:hover{ background:rgba(27,25,22,.18); color:var(--ink); }

/* BODY */
.loc-search-wrap{
  padding:10px 20px; background:#fff;
  border-bottom:1px solid var(--line-soft);
}
.loc-search-box{
  display:flex; align-items:center; gap:10px;
  background:var(--paper); border-radius:12px;
  padding:10px 14px;
}
.loc-search-box i{ font-size:16px; color:var(--ink-3); flex:none; }
.loc-search-inp{
  flex:1; border:none; background:none; outline:none;
  font-family:inherit; font-size:14px; color:var(--ink);
}
.loc-search-inp::placeholder{ color:var(--ink-3); }
.loc-search-clear{ background:none; border:none; cursor:pointer; color:var(--ink-3); font-size:14px; padding:0; flex:none; }
.loc-search-clear:hover{ color:var(--ink); }
.loc-count{ font-size:12px; color:var(--ink-3); }

.adv-modal-body{
  flex:1; overflow-y:auto; overflow-x:hidden;
  background:#fff;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.adv-modal-body::-webkit-scrollbar{ width:3px; }
.adv-modal-body::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }

/* GRID */
.adv-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line-soft);
  width:100%;
}
.adv-section{
  background:#fff;
  padding:20px 24px;
  display:flex; flex-direction:column; gap:12px;
  min-width:0;
}
.adv-section--full{ grid-column:1/-1; }

.adv-section-label{
  font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3);
}

/* PILLS */
.adv-pills{ display:flex; flex-wrap:wrap; gap:7px; width:100%; }
.adv-pills--multi .adv-pill.active{
  background:var(--accent); color:#fff; border-color:var(--accent);
  box-shadow:0 4px 14px -4px rgba(255,33,83,.35);
}

.adv-pill{
  height:34px; padding:0 14px;
  border-radius:9px;
  font-size:13px; font-weight:600;
  color:var(--ink-2);
  background:var(--paper);
  border:1.5px solid #ddd8ce;
  transition:all .14s;
  white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.adv-pill:hover{ border-color:var(--ink-3); color:var(--ink); background:#f0ece3; }
.adv-pill.active{
  background:var(--accent); color:#fff;
  border-color:var(--accent);
  box-shadow:0 4px 14px -4px rgba(255,33,83,.35);
}
.adv-pill--neutral.active{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--ink-2);
  box-shadow:none;
}

/* number pills — compact square */
.adv-pill--num{
  width:34px; padding:0;
  border-radius:10px; font-size:13px;
}

/* RANGE */
.adv-range-row{
  display:flex; align-items:stretch;
  background:var(--paper);
  border:1.5px solid #ddd8ce;
  border-radius:12px; overflow:hidden;
  transition:border-color .14s;
  width:100%; min-width:0;
}
.adv-range-row:focus-within{ border-color:var(--ink-2); }

.adv-modal-inp{
  flex:1; height:40px; min-width:0;
  border:none; background:transparent;
  padding:0 14px; font-size:13.5px; font-family:inherit; font-weight:500;
  color:var(--ink); outline:none;
  -moz-appearance:textfield;
}
.adv-modal-inp::-webkit-inner-spin-button,
.adv-modal-inp::-webkit-outer-spin-button{ -webkit-appearance:none; }
.adv-modal-inp::placeholder{ color:var(--ink-3); font-weight:400; }

.adv-dash{
  width:1px; background:#ddd8ce;
  flex:none; align-self:stretch;
}

/* FOOTER */
.adv-modal-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px; flex:none; background:var(--paper);
}
.adv-reset{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--ink-3);
  background:none; border:none; padding:0; transition:color .14s; cursor:pointer;
}
.adv-reset i{ font-size:14px; }
.adv-reset:hover{ color:var(--ink); }

.adv-foot-right{ display:flex; align-items:center; gap:14px; }

.adv-count{
  font-size:12px; font-weight:600; color:var(--ink-3);
}

.adv-submit{
  height:44px; padding:0 24px; border-radius:12px;
  font-size:14px; font-weight:700; color:#fff;
  background:var(--accent);
  box-shadow:0 6px 20px -4px rgba(255,33,83,.42);
  display:inline-flex; align-items:center; gap:8px;
  border:none; cursor:pointer;
  transition:box-shadow .15s, transform .12s;
}
.adv-submit:hover{ box-shadow:0 10px 28px -4px rgba(255,33,83,.52); transform:translateY(-1px); }
.adv-submit:active{ transform:none; }
.adv-submit i{ font-size:15px; }

body.adv-lock{ overflow:hidden; }

/* ---- Modal ≤900px: still centered, tighter ---- */
@media(max-width:900px){
  .adv-modal{ width:min(740px, calc(100vw - 20px)); }
}

/* ---- Modal ≤768px: bottom sheet, single column ---- */
@media(max-width:768px){
  /* prevent iOS Safari zoom on focus (only real inputs, not readonly display fields) */
  input:not([readonly]), textarea, select{ font-size: 16px !important; }

  .adv-modal{
    border-radius:20px 20px 0 0;
    top:auto; bottom:0; left:0; right:0;
    transform:none; width:100%;
    max-height:85vh;
    max-height:85svh;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .adv-modal.is-open{ animation:advSlideSheet .3s cubic-bezier(.16,1,.3,1); }
  @keyframes advSlideSheet{ from{transform:translateY(100%)} to{transform:translateY(0)} }

  /* Drag handles — swipe the header down to close (see enableSwipeToClose
     in filter.js). Purely a visual affordance here; .bs-panel already has
     its own .bs-handle element instead since it's built fresh per open. */
  .adv-modal-head, .loc-top{ position:relative; }
  .adv-modal-head::before, .loc-top::before{
    content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:36px; height:4px; border-radius:2px; background:var(--line);
  }

  .loc-modal{
    border-radius:20px 20px 0 0;
    top:auto; bottom:0; left:0; right:0; width:100%;
    transform:translateY(6%) scale(1);
    max-height:85vh;
    max-height:85svh;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .loc-modal.is-open{ transform:translateY(0) scale(1); }
  .loc-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 16px 14px;
  }
  .loc-top .loc-eyebrow{ display:none; }
  .loc-top .loc-city-tab{ margin:0; }
  .loc-top .loc-close-btn{ margin-left:0; }
  .loc-group-cols{ columns:2; column-gap:10px; padding:4px 0 12px; }
  .loc-group-head{ padding:10px 12px; }
  .loc-gitem{ padding:9px 12px; }
  .loc-pills-row{ margin:12px 16px 10px; padding:3px; }
  .loc-s-wrap{ padding:14px 16px 12px; }
  .loc-scroll{ padding:12px 16px 12px; }

  .adv-grid{ grid-template-columns:1fr; width:100%; box-sizing:border-box; }
  .adv-section--full{ grid-column:1; }
  .adv-section{ padding:16px 20px; min-width:0; box-sizing:border-box; }
  .adv-pill{ max-width:100%; }

  .adv-modal-head{ padding:20px 20px 14px; }

  .adv-modal-foot{ padding:12px 20px; gap:10px; }
  .adv-foot-right{ flex:1; justify-content:flex-end; gap:10px; }
  .adv-count{ display:none; }
  .adv-submit{ height:42px; padding:0 20px; font-size:13px; }
}

/* ---- Modal ≤480px: compact pills & inputs ---- */
@media(max-width:480px){
  .adv-modal{ max-height:85vh; max-height:85svh; }
  .loc-group-cols{ columns:2; }
  .loc-group{ margin-bottom:8px; }
  .adv-section{ padding:14px 16px; gap:10px; }
  .adv-section-label{ font-size:10px; }
  .adv-pill{ height:32px; padding:0 12px; font-size:12px; }
  .adv-pill--num{ width:32px; }
  .adv-modal-inp{ height:38px; font-size:13px; }
  .adv-modal-foot{ padding:10px 16px; }
  .adv-reset{ font-size:12px; }
  .adv-submit{ height:40px; font-size:12.5px; padding:0 16px; border-radius:10px; }
}

/* ---------- ERROR PAGES (404 / generic) ----------
   404 gets its own editorial treatment: a big soft "404" watermark
   sitting behind the content for depth/personality, upright at a safe,
   already-loaded font weight (800) — no italic, no synthetic styles.
   The plain generic error page (500/403/etc, errors/generic.blade.php)
   reuses the shared icon/kicker/title/desc/actions rules + the older
   orb decoration below, kept intact for that template. */
.page-404{
  position:relative; isolation:isolate;
  min-height:calc(100vh - 380px);
  display:flex; align-items:center; justify-content:center;
  padding:80px 40px;
  text-align:center;
}

.page-404__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:640px; height:640px; border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-52%);
  background:radial-gradient(circle, rgba(255,33,83,.09) 0%, transparent 68%);
}
.page-404__watermark{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  top:50%; left:50%; transform:translate(-50%,-56%);
  font-family:'Playfair Display',Georgia,serif; font-weight:800; font-style:normal;
  font-size:min(34vw, 300px); line-height:1; letter-spacing:-.03em;
  color:var(--ink); opacity:.055; white-space:nowrap;
}

/* shared with errors/generic.blade.php (500/403/etc) */
.page-404__orb{
  content:''; pointer-events:none; position:absolute; z-index:0;
  border-radius:50%;
}
.page-404__orb--1{
  width:820px; height:820px;
  top:-380px; right:-260px;
  background:radial-gradient(circle, rgba(255,33,83,.08) 0%, transparent 66%);
}
.page-404__orb--2{
  width:460px; height:460px;
  bottom:-160px; left:-140px;
  background:radial-gradient(circle, rgba(255,33,83,.045) 0%, transparent 70%);
}

.page-404__inner{ position:relative; z-index:1; max-width:440px; }

.page-404__icon{
  width:76px; height:76px; margin:0 auto 24px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:#fff;
  box-shadow:0 16px 32px -14px rgba(214,33,95,.35), 0 0 0 1px rgba(27,25,22,.05);
}
.page-404__icon i{ font-size:32px; color:var(--accent); }

.page-404__kicker{ justify-content:center; margin-bottom:14px; }

.page-404__title{
  font-weight:700; font-size:34px; letter-spacing:-.015em;
  line-height:1.2; margin:0 0 14px;
}
.page-404__desc{ font-size:15px; line-height:1.65; color:var(--ink-2); margin:0 0 32px; }

.page-404__actions{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.page-404__btn-secondary{
  display:inline-flex; align-items:center; gap:8px;
  height:56px; padding:0 26px; border-radius:16px;
  border:1px solid var(--line); background:#fff;
  font-size:14.5px; font-weight:600; color:var(--ink);
  transition:border-color .15s, background .15s, transform .15s;
}
.page-404__btn-secondary i{ font-size:17px; color:var(--ink-3); }
.page-404__btn-secondary:hover{ border-color:rgba(27,25,22,.28); background:var(--paper); transform:translateY(-1px); }

/* generic (500/403/etc) shares this layout with a warning-toned icon */
.page-404--error .page-404__icon{ background:rgba(214,158,33,.12); box-shadow:0 16px 32px -14px rgba(184,134,11,.3); }
.page-404--error .page-404__icon i{ color:#B8860B; }
.page-404--error .page-404__kicker{ color:#B8860B; }

@media(max-width:600px){
  .page-404{ padding:52px 24px; min-height:calc(100vh - 300px); }
  .page-404__glow{ width:420px; height:420px; }
  .page-404__icon{ width:64px; height:64px; margin-bottom:20px; }
  .page-404__icon i{ font-size:28px; }
  .page-404__title{ font-size:24px; }
  .page-404__actions{ flex-direction:column; width:100%; }
  .page-404__actions .btn-lg,
  .page-404__btn-secondary{ width:100%; justify-content:center; }
}
/* Visually hidden but present in the DOM/accessibility tree — for a
   semantic <h1> on pages whose visual heading is already handled by other
   markup (e.g. the catalog's category tag + result count row). */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.landing-links{ padding:32px 0; border-top:1px solid var(--line); }
.landing-links__title{ font-size:13px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.landing-links__list{ display:flex; flex-wrap:wrap; gap:10px; }
.landing-links__chip{ display:inline-flex; align-items:center; padding:9px 16px; border-radius:9px; background:var(--paper); color:var(--ink-2); font-size:13.5px; font-weight:500; transition:.15s; }
.landing-links__chip:hover{ background:var(--accent); color:#fff; }