/* TL_PROPERTY_ADS_FILTERS_V2 (2026-02-24)
   Modern filters UX (global real-estate apps style)
   - Root screen + sub-screens
   - No dropdowns for key options (pricing/payment/rent, etc.)
   - USD-facing price UI (auto converts to SYP for backend)
   - Works on mobile bottom-sheet + desktop sidebar
*/

/* Enable calm, app-like hierarchy inside the filter panel */
.tl-filter-panel .tl-fv2{ margin-top:10px; }

/* Screens */
.tl-fv2-screens{ position:relative; }
.tl-fv2-screen{ display:none; }
.tl-fv2-screen.is-active{ display:block; }

/* Root list */
.tl-fv2-nav{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.tl-fv2-item{
  width:100%;
  text-align:right;
  direction:rtl;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.28);
  background:#fff;
  box-shadow:0 12px 26px rgba(2,6,23,.05);
  cursor:pointer;
}
.tl-fv2-item:active{ transform: translateY(1px); }
.tl-fv2-item__meta{ flex:1; min-width:0; }
.tl-fv2-item__title{ font-weight:900; font-size:14px; color:rgba(2,6,23,.92); display:flex; align-items:center; gap:8px; }
.tl-fv2-item__hint{ margin-top:4px; font-size:12px; color:rgba(71,85,105,.92); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-fv2-item__chev{ flex:0 0 auto; margin-inline-start:auto; opacity:.78; font-size:22px; line-height:1; color:rgba(71,85,105,.92); }

.tl-fv2-item.is-set{ border-color:rgba(37,188,207,.55); }
.tl-fv2-item.is-set .tl-fv2-item__title::after{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(37,188,207,.92);
}

/* Sub-screen header */
.tl-fv2-subhead{
  position:sticky;
  top: var(--tl-fv2-top, 0px);
  z-index:4;
  direction: rtl;
  /* Premium app-like header */
  background: linear-gradient(135deg, rgba(34,47,117,.96), rgba(37,188,207,.92));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:10px 10px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}
.tl-fv2-back{
  appearance:none;
  border:1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  height:40px;
  padding:0 12px;
  border-radius:14px;
  font-size:13px;
  font-weight:900;
  color:#fff;
}
.tl-fv2-back:active{ transform: translateY(1px); }
.tl-fv2-subtitle{
  flex:1;
  text-align:center;
  font-weight:950;
  font-size:15px;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Section blocks inside a sub-screen */
.tl-fv2-block{ margin-top:12px; }
.tl-fv2-btitle{ font-weight:950; color:rgba(2,6,23,.78); font-size:12px; margin:6px 4px 10px; }

/* Fields */
.tl-fv2-field{ margin-top:10px; }
.tl-fv2-label{ font-size:12px; color:rgba(2,6,23,.88); margin-bottom:6px; font-weight:900; }

/* Choice chips (segmented / multi-row) */
.tl-choice-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tl-choice{
  appearance:none;
  border:1px solid rgba(148,163,184,.30);
  background:#fff;
  color:rgba(2,6,23,.90);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(2,6,23,.04);
}
.tl-choice:active{ transform: translateY(1px); }
.tl-choice.is-active{
  border-color: rgba(37,188,207,.55);
  background: rgba(37,188,207,.10);
}

/* Compact chips row (price presets, etc.) */
.tl-chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.tl-chip{
  appearance:none;
  border:1px solid rgba(148,163,184,.26);
  background:#fff;
  border-radius:999px;
  padding:9px 12px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  color:rgba(2,6,23,.86);
}
.tl-chip.is-active{ border-color:rgba(34,47,117,.35); background:rgba(34,47,117,.06); }

/* Sub-screen bottom action (Done) */
.tl-fv2-subactions{
  position:sticky;
  bottom:0;
  z-index:5;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top:1px solid rgba(226,232,240,.92);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px) + var(--tl-vv-bottom, 0px));
  margin-top:14px;
  border-radius:18px;
}

/* iOS keyboard-safe: when the sheet is lifted above the keyboard, avoid double bottom padding */
html.tl-kb-open .tl-filter-panel .tl-fv2-subactions{
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.tl-fv2-subactions .btn{ width:100%; height:46px; border-radius:14px; font-weight:950; }

/* Apply button count (root) */
.tl-actions .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.tl-actions .btn .n{
  display:none;
  align-items:center;
  justify-content:center;
  min-width:44px;
  font-weight:950;
  font-size:12px;
  line-height:1.6;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.16);
  color:#fff;
}
.tl-actions .btn.has-count .n{ display:inline-flex; }
.tl-actions .btn.is-count-loading .n{
  opacity:.82;
}

/* Location dropdown (district) */
.tl-dd{ margin-top:10px; }
.tl-dd-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.30);
  background:#fff;
  box-shadow:0 10px 22px rgba(2,6,23,.04);
  cursor:pointer;
  text-align:right;
  direction:rtl;
}
.tl-dd-btn:active{ transform: translateY(1px); }
.tl-dd-btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.tl-dd-btn .t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:900; color:rgba(2,6,23,.90); }
.tl-dd-btn .ic{ opacity:.75; font-size:18px; line-height:1; color:rgba(71,85,105,.92); }

.tl-dd-menu{
  display:none;
  margin-top:10px;
  border:1px solid rgba(148,163,184,.22);
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 45px rgba(2,6,23,.10);
  overflow:hidden;
}
.tl-dd.is-open .tl-dd-menu{ display:block; }

.tl-dd-search{ padding:10px; border-bottom:1px solid rgba(226,232,240,.92); }
.tl-dd-list{ max-height: 320px; overflow:auto; -webkit-overflow-scrolling: touch; padding:10px; display:flex; flex-direction:column; gap:8px; }
.tl-dd-opt{
  appearance:none;
  border:1px solid rgba(148,163,184,.22);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  text-align:right;
  direction:rtl;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(2,6,23,.04);
}
.tl-dd-opt:active{ transform: translateY(1px); }
.tl-dd-opt.is-active{ border-color: rgba(37,188,207,.55); background: rgba(37,188,207,.10); }
.tl-dd-empty{ padding:12px; text-align:center; color:rgba(71,85,105,.92); font-weight:800; font-size:12px; }

/* Helper text */
.tl-fv2-hint{ margin-top:8px; font-size:12px; color:rgba(71,85,105,.92); line-height:1.8; }

/* Price range grid */
.tl-fv2-grid-2{ display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px){ .tl-fv2-grid-2{ grid-template-columns: 1fr; } }

/* Hide wrappers (smart schema) */
.tl-filter-panel .is-hidden{ display:none !important; }

/* Desktop polish */
@media ((min-width: 1024px) and (hover: hover) and (pointer: fine)), (min-width: 1367px){
  .tl-fv2-item{ padding:12px 12px; border-radius:16px; }
  .tl-fv2-subhead{ border-radius:16px; }
  .tl-fv2-subactions{ border-radius:16px; }
}

/* Disabled states */
.tl-choice:disabled,
.tl-chip:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}