/* TL_PROPERTY_ADS_MOBILE_V9 (2026-01-26)
   Mobile-first UX upgrades for the Real-Estate listing page.

   What changed
   - Fix: Horizontal side-scroll on mobile when opening Filters/Sort sheets (overflow-x hardening)
   - Fix: Proper scroll-lock while a sheet is open (prevents background scroll)
   - Keep: Reduce bottom blank space on mobile (safe above bottom nav)
   - Keep: tl-mbar pinned flush to top (no floating gap)
   - Keep: Mobile ad card style = rectangle + thumbnail on the right (RTL)

   Notes
   - This file only targets mobile (max-width: 1023px) + a small ss-mobile fallback.
   - Overlay open/close class is expected to be `.is-open` on the relevant elements.
*/

:root{
  /* This is dynamically measured in layouts/site.blade.php via JS.
     We keep a fallback value for safety. */
  --tl-bottom-nav-h: 74px;

  /* Safe-area bottom (iOS notch/home-indicator) */
  --tl-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* */
  --tl-bottom-gap: 4px;

  /* */
  --tl-mbar-top: var(--tl-site-header-offset, var(--tl-site-header-h, 0px));
}

@media (max-width: 1023px), ((hover: none) and (pointer: coarse) and (max-width: 1366px)){

  /* Tight (safe) spacing above the fixed bottom navigation */
  main{
    padding-bottom: calc(var(--tl-bottom-nav-h, 74px) + var(--tl-bottom-gap, 6px)) !important;
  }

  /* Prevent sideways pan on mobile. This is the core fix for the horizontal scroll bug. */
  html,
  body{
    overflow-x: hidden;
  }

  /* Better scroll anchoring on mobile */
  html{
    scroll-padding-bottom: calc(var(--tl-bottom-nav-h, 74px) + var(--tl-bottom-gap, 6px));
  }

  body{
    padding-bottom: 0 !important;
  }

  .tl-wrap{
    padding-bottom: 0 !important;
  }

  .tl-dbar{ display:none !important; }

  /* Mobile top action bar (Filters / Sort / Map) */
  .tl-mbar{
    position: -webkit-sticky !important;
    position: sticky !important;

    /* */
    top: var(--tl-mbar-top, 0px) !important;

    bottom: auto !important;
    left: auto !important;
    right: auto !important;

    z-index: 45;

    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    border: 1px solid #e5e7eb;
    border-radius: 18px;

    padding: 10px 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;

    box-shadow: 0 10px 22px rgba(2,6,23,.08);

    margin-top: 0;

    transform: translateZ(0);
    will-change: transform;
  }

  .tl-mbtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 10px;
    border-radius:16px;
    border:1px solid #e5e7eb;
    background:#fff;
    box-shadow:0 8px 18px rgba(2,6,23,.06);
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
  }
  .tl-mbtn:hover{ background:var(--tl-soft); box-shadow:0 10px 22px rgba(2,6,23,.10); }
  .tl-mbtn:active{ transform:translateY(1px); }

  /* Highlight an active entry point (JS can add `.is-active`) */
  .tl-mbtn.is-active{
    border-color: rgba(37,188,207,.32);
    background: rgba(37,188,207,.08);
    box-shadow: 0 10px 22px rgba(2,6,23,.10);
  }

  .tl-mbtn .ic{ width:18px; height:18px; display:inline-flex; }
  .tl-mbtn svg{ width:18px; height:18px; fill:var(--tl-ink); opacity:.85; }
  .tl-mbtn .txt{ font-size:12px; color:var(--tl-ink); }

  .tl-count{
    min-width:22px;
    height:22px;
    border-radius:999px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--tl-accent);
    color:var(--tl-ink);
    font-size:11px;
  }

  /* Filters panel becomes bottom sheet */
  .tl-filter-panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    z-index:65;

    border-radius:20px 20px 0 0;
    transform:translateY(110%);
    transition:transform .18s ease;

    max-height:86vh;
    max-height:86dvh;

    /* ✅ Critical: prevent horizontal scroll / sideways pan inside the sheet */
    width: 100%;
    max-width: 100vw;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overscroll-behavior-x: none;
    touch-action: pan-y;
    box-sizing: border-box;



    /* Precise focus scrolling (iOS): keep focused controls above sticky bars/keyboard */
    scroll-padding-top: 140px;
    scroll-padding-bottom: calc(140px + var(--tl-safe-bottom, 0px) + var(--tl-vv-bottom, 0px));

    /* App-like feel */
    box-shadow: 0 -18px 44px rgba(2,6,23,.18);
  }
  .tl-filter-panel.is-open{ transform:translateY(0); }

  /* iOS keyboard-safe: lift the sheet above the keyboard with a comfortable gap */
  html.tl-kb-open .tl-filter-panel.is-open{
    bottom: calc(var(--tl-vv-bottom, 0px) + 10px);
    max-height: calc(100vh - var(--tl-vv-bottom, 0px) - 10px);
  }

  /* When the sheet itself is lifted, avoid double-padding sticky action bars */
  html.tl-kb-open .tl-filter-panel .tl-actions{
    padding-bottom: calc(12px + var(--tl-safe-bottom, 0px));
  }


  .tl-filter-head{
    position:sticky;
    top:0;
    background:#fff;
    z-index:2;
  }

  .tl-handle{ display:block; }

  /* Mobile filter actions sticky bottom (Apply / Reset)
     - Uses safe area on iOS
  */
  .tl-filter-panel .tl-actions{
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 12px;
    padding-bottom: calc(12px + var(--tl-safe-bottom, 0px) + var(--tl-vv-bottom, 0px));
    border-top: 1px solid #eef2f7;
    margin: 0 -12px -12px;
  }
  .tl-filter-panel .tl-actions .btn,
  .tl-filter-panel .tl-actions .btn-lite{
    flex: 1;
  }

  /* iOS zoom prevention: keep inputs at 16px */
  .tl-input,
  .tl-select{
    font-size: 16px;
  }

  /* Sort sheet uses same look (FIX: should NOT take layout space when closed) */
  #sortSheetReal{
    position:fixed;
    inset:0;
    z-index:70;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    padding:0 12px calc(var(--tl-safe-bottom, 0px) + var(--tl-vv-bottom, 0px) + 8px);

    /* ✅ Prevent sideways pan when sort sheet is open */
    overflow-x: hidden;
    touch-action: pan-y;

    opacity:0;
    pointer-events:none;
    transition:opacity .12s ease;
  }
  #sortSheetReal .tl-filter-inner{
    width:100%;
    background:#fff;
    border-radius:20px 20px 0 0;
    border:1px solid #e5e7eb;
    box-shadow:0 18px 40px rgba(2,6,23,.12);
    max-height:80vh;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior: contain;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
  }
  #sortSheetReal.is-open{ opacity:1; pointer-events:auto; }

  /* Mobile ad cards */
  .ad-list{ display:grid; gap:12px; }

  .ad-card{
    display:flex !important;
    flex-direction:row-reverse;
    gap:12px;
    align-items:stretch;

    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    overflow:hidden;

    text-decoration:none;
    color:inherit;

    padding:10px;
    box-shadow: 0 10px 22px rgba(2,6,23,.06);
  }

  .ad-thumb{
    flex:0 0 auto;
    width:118px;
    height:96px;
    border-radius:16px;
    overflow:hidden;
    background:#f1f5f9;
  }

  .ad-thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover;
    display:block;
  }

  .ad-body{
    flex:1;
    min-width:0;
    padding:0 !important;
    display:flex;
    flex-direction:column;
  }

  .ad-title{
    margin:0;
    font-size:14px;
    line-height:1.35;
    color:var(--tl-ink);

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .ad-loc{
    margin-top:6px;
    display:flex;
    align-items:center;
    gap:6px;
    color:#64748b;
    font-size:12px;
    min-width:0;
  }

  .ad-loc .txt{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-width:0;
  }

  .ad-price{ margin-top:8px; }

  .ad-price .badge{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(225,186,65,.35);
    background:rgba(225,186,65,.16);
    color:var(--tl-ink);
    font-size:12px;

    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .ad-meta{
    margin-top:8px;
    color:#64748b;
    font-size:12px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }

  @media (min-width: 640px){
    .ad-thumb{ width:132px; height:104px; }
    .ad-title{ font-size:15px; }
  }
}

/* ss-mobile fallback */
html.ss-mobile{
  scroll-padding-bottom: calc(var(--tl-bottom-nav-h, 74px) + var(--tl-bottom-gap, 6px));
  overflow-x: hidden;
}
html.ss-mobile body{
  padding-bottom: 0;
  overflow-x: hidden;
}
html.ss-mobile main{
  padding-bottom: calc(var(--tl-bottom-nav-h, 74px) + var(--tl-bottom-gap, 6px)) !important;
}
html.ss-mobile .tl-wrap{
  padding-bottom: 0 !important;
}
html.ss-mobile .tl-mbar{
  position: sticky;
  top: var(--tl-mbar-top, 0px);
  z-index: 45;
}

/* Map overlay ordering */
/*
  When the map overlay is open we still need Filters/Sort sheets to be usable.
  Some iOS/Safari builds are sensitive to stacking contexts (Leaflet + transforms),
  so we keep these comfortably above the map overlay.
*/
html.tl-map-open .tl-backdrop{ z-index: 220 !important; }
html.tl-map-open .tl-filter-panel{ z-index: 230 !important; }
html.tl-map-open #sortSheetReal{ z-index: 230 !important; }

/* Mobile-only polish for the smart filter steps (app-like) */
@media (max-width: 1023px), ((hover: none) and (pointer: coarse) and (max-width: 1366px)){
  .tl-filter .tl-smart-steps{ gap:12px; }
  .tl-filter .tl-step{ padding:14px; }
  .tl-filter .tl-pill-row{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .tl-filter .tl-pill{
    justify-content:center;
    padding:12px 14px;
  }
}

/* ------------------------------------------
   Filters V3 (Sub-screens navigation)
   - App-like, iOS-friendly bottom sheet UX
   - Keeps the original form inputs (no backend changes)
------------------------------------------- */
@media (max-width: 1023px), ((hover: none) and (pointer: coarse) and (max-width: 1366px)){
  .tl-filter-panel.tl-fnav-on .tl-grid{ display:none !important; }
  .tl-filter-panel .tl-fnav{ display:none; }
  .tl-filter-panel.tl-fnav-on .tl-fnav{ display:block; }

  .tl-fnav{ direction:rtl; }
  .tl-fnav-screens{ position:relative; }
  .tl-fnav-screen{ display:none; padding:12px 12px calc(86px + var(--tl-safe-bottom, 0px) + var(--tl-vv-bottom, 0px)); }
  .tl-fnav-screen.is-active{ display:block; }

  .tl-fnav-subhead{
    position:sticky;
    /* Stick below the sheet header (handle + close). JS sets --tl-fnav-top dynamically. */
    top: var(--tl-fnav-top, 72px);
    z-index:3;
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom:1px solid rgba(226,232,240,.9);
    padding:10px 10px;
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:16px;
  }
  .tl-fnav-back{
    appearance:none;
    border:1px solid rgba(148,163,184,.35);
    background:rgba(255,255,255,.92);
    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:rgba(2,6,23,.88);
  }
  .tl-fnav-back:active{ transform: translateY(1px); }
  .tl-fnav-back .ico{ font-size:20px; line-height:1; margin-top:-1px; }
  .tl-fnav-back .txt{ font-size:13px; font-weight:900; }
  .tl-fnav-subtitle{ font-weight:900; font-size:15px; color:rgba(2,6,23,.92); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .tl-fnav-group{ margin-top:14px; }
  .tl-fnav-gtitle{ font-weight:900; color:rgba(2,6,23,.72); font-size:12px; margin:6px 4px 10px; }
  .tl-fnav-list{ display:flex; flex-direction:column; gap:10px; }
  .tl-fnav-item{
    width:100%;
    text-align:right;
    direction:rtl;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 14px;
    border-radius:16px;
    border:1px solid rgba(148,163,184,.28);
    background:#fff;
    box-shadow:0 10px 22px rgba(2,6,23,.05);
    cursor:pointer;
  }
  .tl-fnav-item:active{ transform: translateY(1px); }
  .tl-fnav-item__meta{ flex:1; min-width:0; }
  .tl-fnav-item__title{ font-weight:900; font-size:14px; color:rgba(2,6,23,.92); }
  .tl-fnav-item__hint{ margin-top:4px; font-size:12px; color:rgba(71,85,105,.9); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tl-fnav-item__chev{ flex:0 0 auto; margin-inline-start:auto; opacity:.75; font-size:20px; line-height:1; color:rgba(71,85,105,.9); }
  .tl-fnav-item.is-set{ border-color:rgba(59,130,246,.55); }
  .tl-fnav-item.is-set .tl-fnav-item__title::after{
    content:"";
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:999px;
    background:rgba(59,130,246,.92);
    margin-inline-start:8px;
    vertical-align:middle;
  }

  .tl-fnav-actions{
    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,.9);
    padding:10px 12px calc(10px + var(--tl-safe-bottom, 0px) + var(--tl-vv-bottom, 0px));
    display:flex;
    gap:10px;
    border-radius:16px;
  }
  .tl-fnav-actions .btn,
  .tl-fnav-actions .btn-lite{
    flex:1;
    min-width:0;
    height:46px;
    border-radius:14px;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* When a details accordion is moved into a screen, we don't need its summary */
  .tl-filter-panel.tl-fnav-on .tl-fnav-screen details.tl-acc{
    border:0;
    box-shadow:none;
    background:transparent;
  }
  .tl-filter-panel.tl-fnav-on .tl-fnav-screen details.tl-acc > summary{ display:none; }
  .tl-filter-panel.tl-fnav-on .tl-fnav-screen details.tl-acc .tl-acc-body{ padding:0; }
}