:root{
      --navy:#0C1424;
      --navy-2:#0F1B33;
      --gold:#D7B56D;
      --gold-2:#F1D08A;
      --text:#0B1220;
      --muted:#6B7280;
      --card:#FFFFFF;
      --line:rgba(17,24,39,.10);
      --shadow:0 16px 40px rgba(2,6,23,.18);
      --radius:18px;
    }

    /* Prevent inputs/controls from overflowing */
    *, *::before, *::after { box-sizing: border-box; }

    html, body { height: 100%; margin: 0; }
    body{
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: #0b1220;
      overflow: hidden;
    }

    #map { height: 100vh; width: 100vw; }

    .open-drawer{
      /* Legacy (no longer used) — kept for compatibility */
      display: none;
    }

/* ===== Clear Filters FAB (map-only) ===== */
.clear-fab{
  position: fixed;
  right: 24px;
  bottom: 92px; /* above Search Properties */
  z-index: 1201;
  display: none; /* shown only when filters are active */
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(12,20,36,.96), rgba(17,28,54,.96));
  color: rgba(255,255,255,.96);
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  border: 1px solid rgba(215,181,109,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .2s ease, box-shadow .2s ease;
  font-weight: 800;
}
.clear-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}
.clear-fab .fab-icon{
  width: 28px;
  height: 28px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.95);
}
.clear-fab .fab-text{
  font-size: 14px;
  letter-spacing: .2px;
}
@media (max-width: 900px){
  .clear-fab{ right: 14px; bottom: 86px; }
}
.open-drawer span{ font-weight:800; letter-spacing:.2px; font-size:13px; }
    .open-drawer small{
      min-width: 28px; height: 28px; display:inline-flex; align-items:center; justify-content:center;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      font-size:12px;
    }
    @media (min-width: 900px){
      .open-drawer{ left:auto; right:22px; bottom:22px; transform:none; }
    }

    /* ===== Floating language toggle button =====
       Displays current language code. Positioned in top-right corner above map.
       Inherits similar styling to other floating buttons. */
    .lang-btn{
      position: fixed;
      top: 14px;
      right: 14px;
      min-width: 40px;
      height: 40px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      border: 1px solid rgba(215,181,109,.55);
      background: linear-gradient(135deg, rgba(12,20,36,.96), rgba(17,28,54,.96));
      color: rgba(255,255,255,.96);
      z-index: 1201;
      cursor: pointer;
      box-shadow: 0 14px 34px rgba(0,0,0,.22);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-weight: 800;
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
    }
    .lang-btn:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 42px rgba(0,0,0,.28);
    }

    /* ===== RTL Support =====
       When the document direction is set to RTL, mirror the drawer and align
       text appropriately. These overrides ensure the filter panel slides in
       from the right side and form elements align to the right. */
    [dir="rtl"] .drawer{
      right: 0;
      left: auto;
      transform: translateX(105%);
      /* flip the border and box-shadow so it appears on the left side */
      border-right: none;
      border-left: 1px solid var(--line);
      box-shadow: -16px 0 40px rgba(2,6,23,.25);
    }
    [dir="rtl"] .drawer.open{
      transform: translateX(0);
    }
    /* Align header content in drawer for RTL */
    [dir="rtl"] .drawer-header{
      flex-direction: row-reverse;
      text-align: right;
    }
    /* Align labels and form controls to the right */
    [dir="rtl"] .filters label,
    [dir="rtl"] .filters input,
    [dir="rtl"] .filters select{
      text-align: right;
    }
    /* Reverse direction for lists and actions */
    [dir="rtl"] .subtype-wrap,
    [dir="rtl"] .subtype-grid,
    [dir="rtl"] .stats,
    [dir="rtl"] .applybar,
    [dir="rtl"] .results-actions{
      direction: rtl;
      text-align: right;
    }
    [dir="rtl"] .results-actions{
      flex-direction: row-reverse;
    }
    /* Align CTA text to the right */
    [dir="rtl"] .inline-cta{
      text-align: right;
    }

    .drawer{
      position: fixed;
      top: 0; left: 0;
      height: 100%;
      width: min(380px, 92vw);
      transform: translateX(-105%);
      transition: transform .24s ease;
      z-index: 1300;
      background: rgba(255,255,255,.90);
      backdrop-filter: blur(14px);
      border-right: 1px solid rgba(17,24,39,.10);
      box-shadow: 16px 0 40px rgba(2,6,23,.25);
      display:flex;
      flex-direction:column;
    }
    .drawer.open{ transform: translateX(0); }

    .drawer-header{
      padding: 14px 14px 10px;
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap:10px;
      border-bottom: 1px solid var(--line);
    }
    .drawer-header .h{ display:flex; flex-direction:column; }
    .drawer-header .h b{
      font-size:14px;
      letter-spacing:.12em;
      color: rgba(255,255,255,.92);
    }
    .drawer-header .h span{ font-size:12px; color: var(--muted); }

    .icon-btn{
      width:38px; height:38px;
      border-radius: 12px;
      border:1px solid rgba(17,24,39,.12);
      background: rgba(255,255,255,.75);
      cursor:pointer;
    }

    .filters{
      padding: 12px 14px;
      display:flex;
      flex-direction:column;
      gap:10px;
      border-bottom: 1px solid var(--line);
    }
    .search{
      display:flex;
      align-items:center;
      gap:10px;
      padding: 10px 12px;
      border-radius: 14px;
      border:1px solid rgba(17,24,39,.12);
      background: rgba(255,255,255,.75);
    }
    .search input{
      width:100%;
      border:none;
      outline:none;
      background: transparent;
      font-size:13px;
    }

    .row{ display:flex; gap:10px; align-items:center; }
    select{
      border:1px solid rgba(17,24,39,.12);
      background: rgba(255,255,255,.75);
      border-radius: 14px;
      padding: 10px 12px;
      font-size:13px;
      outline:none;
      width:100%;
      max-width:100%;
    }

    .stats{
      display:flex; gap:8px; flex-wrap:wrap;
      align-items:center;
      font-size:12px; color: var(--muted);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding: 6px 10px;
      border-radius: 999px;
      border:1px solid rgba(17,24,39,.10);
      background: rgba(255,255,255,.65);
      color: rgba(255,255,255,.92);
      font-weight:600;
      font-size:12px;
    }

    .filters .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }
    .filters .field label{
      display:block;
      font-size: 12px;
      opacity: .75;
      margin: 0 0 6px 2px;
    }
    .filters .field input{
      width:100%;
      max-width:100%;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.9);
      outline: none;
    }

    .applybar{ display:flex; gap:10px; margin-top:12px; }
    .applybar .btn{ flex:1; }

    .list{
      padding: 12px 14px 16px;
      flex:1;
    }

    .card{
      display:flex;
      content-visibility:auto;
      contain: layout paint style;
      contain-intrinsic-size: 168px;
      gap:12px;
      padding: 12px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.95);
      border:1px solid rgba(17,24,39,.10);
      box-shadow: 0 10px 24px rgba(2,6,23,.08);
      margin-bottom: 10px;
      cursor:pointer;
      transition: transform .12s ease, box-shadow .12s ease;
      /* Uniform card sizing */
      height: 168px;
      align-items: stretch;
    }
    .card:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(2,6,23,.12); }

    .thumb{
      width: 104px; height: 104px;
      border-radius: 14px;
      overflow:hidden;
      background: linear-gradient(135deg, rgba(12,20,36,.10), rgba(215,181,109,.12));
      flex: none;
      position: relative;
      border: 1px solid rgba(17,24,39,.08);
      align-self: center;
    }
    .thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
    .thumb .type-pill{
      position:absolute;
      bottom:8px; left:8px;
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(10,18,38,.85);
      color: #fff;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .2px;
      box-shadow: 0 10px 20px rgba(2,6,23,.18);
      backdrop-filter: blur(6px);
    }
.thumb .type-pill img{ width:14px; height:14px; object-fit:contain; }

    .meta{ min-width:0; display:flex; flex-direction:column; gap:6px; flex:1; height: 100%; }
    .meta .t{
      font-weight:800;
      font-size:13px;
      color: var(--text);
      line-height:1.25;
      /* Ensure titles can show 2 full lines consistently */
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      min-height: 2.5em; /* 2 lines */
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .meta .d{
      color: var(--muted);
      font-size:12px;
      line-height:1.2;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      min-height: 2.4em; /* reserve space for 2 lines */
    }
    .actions{
      display:flex;
      gap:8px;
      margin-top:auto; /* keep buttons aligned to bottom */
      flex-wrap:wrap;
      align-items:center;
    }



    @media (min-width: 701px){
      .card{
        height: auto;
        min-height: 186px;
        padding: 14px;
        gap: 14px;
      }
      .thumb{
        width: 112px;
        height: 112px;
        align-self: flex-start;
      }
      .meta{
        gap: 7px;
      }
      .meta .t{
        min-height: 2.5em;
      }
      .meta .d{
        -webkit-line-clamp: 2;
        min-height: 2.4em;
      }
      .actions{
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
      }
      .actions .btn{
        flex: 1 1 0;
        min-width: 0;
        min-height: 38px;
        justify-content: center;
        text-align: center;
        padding: 9px 12px;
        font-size: 12px;
      }
    }

    .btn{
      border:1px solid rgba(17,24,39,.12);
      background: rgba(255,255,255,.80);
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 700;
      cursor:pointer;
      text-decoration:none;
      color: rgba(255,255,255,.92);
    }
    .btn.primary{
      background: var(--navy);
      color: #fff;
      border: 1px solid rgba(10,18,38,.08);
      box-shadow: 0 10px 22px rgba(2,6,23,.12);
    }
    .btn.primary:hover{ filter: brightness(.96); }
    .btn.primary:active{ transform: translateY(1px); }
    .btn.ghost{
      background: rgba(10,18,38,.06);
      border: 1px solid rgba(10,18,38,.12);
    }

    .scrim{
      position: fixed;
      inset: 0;
      background: rgba(2,6,23,.35);
      z-index: 1250;
      opacity: 0;
      pointer-events:none;
      transition: opacity .22s ease;
    }
    .scrim.show{ opacity: 1; pointer-events:auto; }

    .leaflet-control-zoom{ margin-top: 18px !important; }

    .leaflet-control.legend{
      background: rgba(255,255,255,.80);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      border: 1px solid rgba(17,24,39,.10);
      box-shadow: 0 10px 24px rgba(2,6,23,.10);
    }
    .leaflet-control.legend img{ vertical-align: middle; }
  
/* Install button (shown when PWA install is available) */
.install-btn{
  display:none;
  position: fixed;
  right: 16px;
  bottom: 76px; /* above Listings pill */
  z-index: 1350;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(12,20,36,.92);
  color: #fff;
  border: 1px solid rgba(215,181,109,.35);
  box-shadow: 0 18px 40px rgba(2,6,23,.22);
}
.install-btn:hover{ filter: brightness(1.05); }
@media (max-width: 520px){
  .install-btn{ right: 12px; bottom: 74px; }
}

.open-browser-btn{
  display:none;
  position: fixed;
  top: 76px;
  right: 16px;
  left: auto;
  bottom: auto;
  z-index: 1350;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: var(--navy);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 18px 40px rgba(2,6,23,.18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  max-width: 168px;
}
.open-browser-btn:hover{ filter: brightness(1.03); }
html[dir="rtl"] .open-browser-btn{
  right: 16px;
  left: auto;
}
@media (max-width: 520px){
  .open-browser-btn{ top: 96px; right: 12px; max-width: 160px; }
  html[dir="rtl"] .open-browser-btn{ right: 12px; left: auto; }
}

/* Install guidance hints (iOS + in-app browsers) */
.hint-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.45);
  z-index: 1400;
  display:none;
}
.hint-sheet{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 24px));
  z-index: 1450;
  display:none;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: 14px;
  color: var(--navy);
  font-family: inherit;
}
.hint-sheet h3{
  margin: 0 0 6px 0;
  font-size: 14px;
  letter-spacing: .06em;
}
.hint-sheet p{
  margin: 0 0 10px 0;
  font-size: 13px;
  color: rgba(15,23,42,.80);
  line-height: 1.35;
}
.hint-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.hint-actions .btn{
  padding: 8px 12px;
  font-size: 12px;
}
.hint-actions .btn.primary{
  background: rgba(12,20,36,.92);
  color:#fff;
  border: 1px solid rgba(215,181,109,.35);
}
.hint-actions .btn.ghost{
  background: rgba(10,18,38,.06);
  border: 1px solid rgba(10,18,38,.12);
}



/* ===== Popup image sizing (desktop + mobile) ===== */
/* Make Leaflet popup wrapper clip content nicely */
.leaflet-popup-content-wrapper{
  padding: 0 !important;
  overflow: hidden;
  border-radius: 18px;
}
.leaflet-popup-content{
  margin: 0 !important;
  width: auto !important;
}

.auvia-popup{
  box-sizing: border-box;
  width: min(360px, 88vw);
  max-height: min(560px, calc(100vh - 140px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  background: rgba(255,255,255,.96);
}
.auvia-popup-title{
  font-weight: 900;
  font-size: 14px;
  color: #0B1220;
  line-height: 1.25;
  margin-bottom: 4px;
}
.auvia-popup-desc{
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}
.auvia-popup-img{
  width: 100%;
  height: 180px;
  max-height: 28vh;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  margin-top: 10px;
}

@media (max-width: 520px){
  .auvia-popup{ width: min(380px, 92vw); max-height: calc(100vh - 160px); padding: 14px; }
  .auvia-popup-img{ height: 200px; max-height: 32vh; }
}

/* Type pill text: keep compact on small thumbs */
.thumb .type-pill{
  max-width: calc(100% - 16px);
  justify-content: center;
  text-align:center;
}

.thumb .type-pill span{
  font-size: 10px;
  line-height: 1.1;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display:inline-block;
  text-align:center;
  max-width: 100%;
}

/* Listing quick facts row */
.info-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  min-height: 18px; /* reserve a row so cards don't jump when missing */
}
.info{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.65);
}
.info img{
  width:16px;
  height:16px;
  object-fit: contain;
  opacity: .9;
}

/* ===== Search FAB (Search Properties bar) ===== */
.search-fab{
  position: fixed;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px 0 10px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;

  /* Auvia luxury palette */
  background: linear-gradient(135deg, rgba(12,20,36,.96), rgba(17,28,54,.96));
  color: #fff;
  border: 1px solid rgba(215,181,109,.45);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom));

  width: 320px;                 /* desktop pill width */
  max-width: calc(100vw - 44px);
}
.search-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 68px rgba(0,0,0,.45);
  filter: brightness(1.02);
}
.search-fab:active{ transform: translateY(0); }

.search-fab .fab-icon{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;

  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: rgba(255,255,255,.96);
  box-shadow: 0 10px 20px rgba(215,181,109,.28), inset 0 0 0 1px rgba(12,20,36,.12);
}
.search-fab .fab-text{
  font-weight: 950;
  font-size: 14px;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-fab .fab-badge{
  margin-left: auto;
  min-width: 32px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile: center + full width, safe-area friendly */


/* ===== Auvia Luxury Popup ===== */
.leaflet-popup-content-wrapper{
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(2,6,23,.28) !important;
  border: 1px solid rgba(215,181,109,.22);
  background: transparent !important;
}
.leaflet-popup-content{ margin: 0 !important; }
.leaflet-popup-tip{
  background: rgba(12,20,36,.95) !important;
  box-shadow: 0 16px 40px rgba(2,6,23,.18) !important;
}
.auvia-popup{
  background: radial-gradient(circle at 20% 10%, rgba(215,181,109,.25), rgba(12,20,36,.96) 55%);
  padding: 14px;
}
.auvia-card{
  background: rgba(255,255,255,.96);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
}
.auvia-card .head{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(17,24,39,.08);
}
.auvia-card .title{
  font-weight: 900;
  font-size: 14px;
  color: #0B1220;
  line-height: 1.2;
  margin-bottom: 6px;
}
.auvia-card .meta{
  font-size: 12px;
  color: #475569;
  line-height: 1.35;
}
.auvia-card .media{ padding: 12px 14px 0; }
.auvia-card img{
  width: 100%;
  height: min(240px, 34vh);
  object-fit: cover;
  border-radius: 16px;
  display:block;
  border: 1px solid rgba(17,24,39,.10);
}
.auvia-card .actions{
  padding: 12px 14px 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.auvia-a{
  text-decoration:none;
  font-weight: 900;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(12,20,36,.14);
  background: rgba(255,255,255,.86);
  color: rgba(255,255,255,.96);
  transition: transform .12s ease;
}
.auvia-a.primary{
  background: rgba(12,20,36,.92);
  color:#fff;
  border: 1px solid rgba(215,181,109,.35);
}
.auvia-a:hover{ transform: translateY(-1px); }

@media (max-width: 520px){
  .auvia-popup{ padding: 10px; }
  .auvia-card img{ height: min(220px, 32vh); }
  .auvia-card .actions{ gap: 8px; }
}



/* ===== Listing card + popup polish ===== */
.card-price,
.popup-price{
  font-weight: 900;
  letter-spacing: -.01em;
  color: #0B1220;
}
.card-price{
  font-size: 18px;
  line-height: 1.05;
  margin-bottom: 2px;
}
.card-subline,
.popup-subline{
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.card-desc{
  min-height: 0 !important;
  -webkit-line-clamp: 3;
  line-height: 1.3;
}
.popup-price{
  font-size: 18px;
  margin-bottom: 6px;
}
.popup-subline{
  margin-bottom: 8px;
}
.popup-facts{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 0 0 10px;
}
.popup-fact{
  display:inline-flex;
  align-items:center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.08);
  color: #0f172a;
  font-size: 11.5px;
  font-weight: 800;
}
.auvia-card .meta{
  color: #526173;
  line-height: 1.45;
}
@media (max-width: 520px){
  .card-price{ font-size: 17px; }
  .popup-price{ font-size: 17px; }
}

@media (min-width: 701px){
  .list{
    padding: 14px 16px 20px;
  }
  .card{
    border-radius: 22px;
  }
  .card-price{
    font-size: 17px;
    margin-bottom: 4px;
  }
  .card-subline{
    min-height: 1.45em;
  }
  .actions .btn{
    border-radius: 12px;
    box-shadow: none;
  }

  .leaflet-popup-content-wrapper{
    border-radius: 22px !important;
  }
  .auvia-popup{
    width: 332px;
    max-width: min(332px, calc(100vw - 48px));
    max-height: min(520px, calc(100vh - 120px));
    padding: 10px;
  }
  .auvia-card{
    border-radius: 20px;
  }
  .auvia-card .head{
    padding: 12px 12px 8px;
  }
  .auvia-card .title{
    font-size: 13.5px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.5em;
  }
  .popup-subline{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.8em;
    margin-bottom: 8px;
  }
  .auvia-card .meta{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 3.2em;
  }
  .auvia-card .media{
    padding: 10px 12px 0;
  }
  .auvia-card img{
    height: 176px;
    border-radius: 14px;
  }
  .auvia-card .actions{
    padding: 10px 12px 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .auvia-a{
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11.5px;
    padding: 9px 10px;
    border-radius: 12px;
  }
  .popup-facts{
    gap: 6px;
    margin-bottom: 8px;
  }
  .popup-fact{
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* ===== Drawer header social + logo ===== */
.drawer-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.hdr-left{ min-width: 0; }
.hdr-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 1;
  justify-content: center;
}
.soc{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.soc:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(2,6,23,.12);
}
.soc img{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}
.hdr-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex:none;
}
.logo-btn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(215,181,109,.35);
  background: rgba(255,255,255,.72);
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-btn img{
  width: 24px;
  height: 24px;
  border-radius: 9px;
  object-fit: contain;
  display: block;
}

@media (max-width: 520px){
  .hdr-actions{ gap: 8px; }
  .soc{ width: 32px; height: 32px; border-radius: 12px; }
  .soc img{ width: 17px; height: 17px; }
}


/* ===== Luxury drawer layers ===== */
.drawer{
  background: rgba(248,250,252,.88) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.drawer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(600px 240px at 22% 0%, rgba(215,181,109,.22), transparent 60%),
    radial-gradient(520px 220px at 78% 10%, rgba(12,20,36,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,247,252,.90));
  z-index:0;
}
.drawer > *{ position: relative; z-index: 1; }

.drawer-header{
  background: rgba(255,255,255,.70);
  border-bottom: 1px solid rgba(17,24,39,.10);
  position: relative;
}
.drawer-header::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:-1px;
  height:2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(215,181,109,.75), rgba(215,181,109,.15), rgba(12,20,36,.05));
  pointer-events:none;
}

.filters{
  background: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(17,24,39,.08);
}
.search, select, .filters .field input{
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(17,24,39,.10) !important;
}
.card{
  background: rgba(255,255,255,.96);
  border-color: rgba(17,24,39,.10);
}
.scrim{
  background: radial-gradient(circle at 30% 30%, rgba(2,6,23,.42), rgba(2,6,23,.55));
}


/* ===== Mobile polish (legend + luxury controls) ===== */
@media (max-width: 600px){
  /* Legend sizing polish for smaller screens (keep positioning rules only in the 700px block) */
  .leaflet-control.legend{
    max-width: 210px;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(2,6,23,.20);
  }
  .leaflet-control.legend div{ font-size: 12px; }
}

.leaflet-bottom.leaflet-right{
    bottom: calc(14px + 86px + env(safe-area-inset-bottom)) !important; /* lift attribution/controls above bottom action bar */
  }
  .leaflet-control.legend{
    max-width: 210px;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(2,6,23,.20);
  }
  .leaflet-control.legend div{
    font-size: 12px;
  }
}

/* Luxury form controls */
.search, select, .filters .field input{
  border-radius: 16px !important;
  border: 1px solid rgba(12,20,36,.10) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
.search:focus-within, select:focus, .filters .field input:focus{
  border-color: rgba(215,181,109,.65) !important;
  box-shadow: 0 0 0 4px rgba(215,181,109,.18), 0 16px 34px rgba(2,6,23,.10);
}
select{
  color: #0B1220;
  font-weight: 700;
}

/* Chips (All / results) */
.badge{
  background: rgba(12,20,36,.06) !important;
  border-color: rgba(12,20,36,.10) !important;
  color: #0C1424 !important;
  box-shadow: none;
}

/* Buttons */
.btn.primary{
  background: linear-gradient(180deg, rgba(12,20,36,.98), rgba(12,20,36,.90)) !important;
  border-color: rgba(215,181,109,.55) !important;
  box-shadow: 0 16px 36px rgba(2,6,23,.18);
}
.btn.primary:hover{
  filter: brightness(1.03);
  box-shadow: 0 20px 48px rgba(2,6,23,.22);
}
.btn.ghost{
  background: rgba(215,181,109,.10) !important;
  border-color: rgba(215,181,109,.35) !important;
  color: #0C1424 !important;
  font-weight: 800;
}

/* Cards feel more premium */
.card{
  border-radius: 22px !important;
  border: 1px solid rgba(12,20,36,.10) !important;
  box-shadow: 0 18px 44px rgba(2,6,23,.10);
}
.thumb{
  border-radius: 18px !important;
  box-shadow: inset 0 0 0 1px rgba(12,20,36,.06);
}
.thumb .type-pill{
  background: rgba(12,20,36,.92) !important;
  border-color: rgba(215,181,109,.45) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.16);
}

/* Drawer spacing on mobile */
@media (max-width: 600px){
  .drawer{
    width: 100% !important;
  }
  .filters{
    padding: 12px 14px 14px;
  }
  .applybar{
    gap: 12px;
  }
  .applybar .btn{
    padding: 12px 14px;
    font-size: 13px;
  }
  .list{
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
}


/* ===== New Deal/Kind/Subtype filters ===== */
.filters .field label{
  display:block;
  font-size:12px;
  opacity:.78;
  margin: 0 0 6px 2px;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: .02em;
}
.filters-advanced select{ width:100%; }

.subtype-wrap{
  margin-top: 10px;
  padding: 10px 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(215,181,109,.22);
  background: rgba(255,255,255,.60);
  box-shadow: 0 14px 30px rgba(2,6,23,.06);
}
.subtype-title{
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px 2px;
  font-weight: 800;
  letter-spacing:.02em;
}
.subtype-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chipbox{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(12,20,36,.12);
  background: rgba(255,255,255,.72);
  cursor:pointer;
  user-select:none;
  font-size: 12px;
  font-weight: 900;
  color: var(--navy);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.chipbox:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px rgba(2,6,23,.08); }
.chipbox.active{
  border-color: rgba(215,181,109,.70);
  box-shadow: 0 0 0 4px rgba(215,181,109,.16);
  background: rgba(215,181,109,.10);
}

/* Luxe accents around key controls */
.filters .search, .filters select, .filters .field input{
  border-color: rgba(215,181,109,.18) !important;
}


    .watermark { position:fixed; top:0; left:0; width:100%; height:100%; background:url('logo.png') center center no-repeat; background-size:50%; opacity:0.23; z-index:500; pointer-events:none; }
    @media(max-width:768px){ .watermark{ background-size:80%; } }
    @media(max-width:480px){ .watermark{ background-size:90%; } }

  
    /* ===== Premium results/discovery UX ===== */
    .results-bar{
      display:none;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(135deg, rgba(12,20,36,.96), rgba(17,28,54,.96));
      backdrop-filter: blur(12px);
    }
    .drawer.collapsed .results-bar{ display:flex; }
    .results-meta{ display:flex; flex-direction:column; min-width:0; }
    .results-title{
      font-size:12px;
      letter-spacing:.10em;
      font-weight:800;
      color: rgba(255,255,255,.96);
      text-transform:uppercase;
      line-height:1.1;
    }
    .results-sub{
      margin-top:3px;
      font-size:12px;
      color: rgba(255,255,255,.70);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width: 245px;
    }
    .results-edit{
      border:1px solid rgba(17,24,39,.12);
      background: rgba(255,255,255,.75);
      border-radius: 999px;
      padding: 9px 12px;
      font-size:12px;
      cursor:pointer;
    }

    .results-actions{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; flex-shrink:0; }
    .results-edit,
    .results-clear{
      white-space: nowrap;
      line-height: 1.1;
      flex-shrink: 0;
    }
    .results-clear{
      border:1px solid rgba(215,181,109,.45);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
      border-radius: 999px;
      padding: 9px 12px;
      font-size:12px;
      cursor:pointer;
    }
    .results-clear:hover{ background: rgba(17,24,39,.04); }

    @media (max-width: 520px){
      .results-bar{
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px 12px;
      }
      .results-meta{
        width: 100%;
      }
      .results-sub{
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
      }
      .results-actions{
        width: 100%;
        display: grid;
        grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
        gap: 8px;
        align-items: stretch;
      }
      .results-actions .results-edit,
      .results-actions .results-clear{
        min-width: 0;
        min-height: 38px;
        padding: 9px 11px;
        font-size: 12px;
        justify-content: center;
      }
      #clearFiltersBtn{
        grid-column: 1;
        min-width: 84px;
      }
      #showOnMapBtn{
        grid-column: 2;
      }
      #editFiltersBtn{
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 390px){
      .results-actions .results-edit,
      .results-actions .results-clear{
        min-height: 37px;
        padding: 8px 10px;
        font-size: 11px;
      }
      #clearFiltersBtn{
        min-width: 76px;
      }
    }

    .drawer.collapsed .filters{ display:none; }

    /* Visual confirmation when results update */
    .list.flash{
      animation: listFlash 900ms ease-out 1;
    }
    @keyframes listFlash{
      0%{ background: rgba(215,181,109,.18); }
      100%{ background: rgba(0,0,0,0); }
    }
    .card.pulse{
      animation: cardPulse 1200ms ease-out 1;
      border-color: rgba(215,181,109,.55);
      box-shadow: 0 18px 46px rgba(215,181,109,.20);
    }
    @keyframes cardPulse{
      0%{ transform: translateY(0); }
      45%{ transform: translateY(-2px); }
      100%{ transform: translateY(0); }
    }

    /* Keep actions visible when collapsed */
    .drawer.collapsed .drawer-header{
      border-bottom: 1px solid var(--line);
    }


.fab-icon svg{ width:18px; height:18px; }

    /* ===== Floating action stack ===== */
    .fab-stack{
      position: fixed;
      right: 24px;
      bottom: calc(22px + env(safe-area-inset-bottom));
      z-index: 1200;
      display:flex;
      flex-direction:column;
      gap:12px;
      align-items:flex-end;
    }
    .fab-stack .search-fab, .fab-stack .add-fab{
      display:flex; align-items:center; gap:12px;
      padding:14px 16px;
      border-radius:18px;
      background: linear-gradient(135deg, rgba(12,20,36,.96), rgba(17,28,54,.96));
      border: 1px solid rgba(215,181,109,.55);
      box-shadow: 0 14px 30px rgba(0,0,0,.22);
      color:#0C1424;
      cursor:pointer;
    }
    .add-fab-icon{
      width:34px;height:34px;border-radius:14px;
      display:grid;place-items:center;
      background:#0C1424;color:#fff;
      font-size:18px;line-height:1;
      flex:0 0 auto;
    }
    .add-fab-text{ font-weight:900; font-size:14px; letter-spacing:.01em; }

    @media (max-width: 520px){
      /* Mobile: keep Search CTA aligned with Legends (same baseline) */
      .fab-stack{
        left: calc(var(--mobileSide, 12px) + var(--legendRowW, 150px) + 10px);
        right: var(--mobileSide, 12px);
        bottom: var(--mobileBottom, calc(16px + env(safe-area-inset-bottom)));
        align-items:stretch;
      }
      .fab-stack .search-fab, .fab-stack .add-fab{ width: 100%; }
      .fab-stack .search-fab{ order: 2; }
      .fab-stack .add-fab{ order: 1; }
    }


/* Keep scrollbar from overlaying card titles (desktop) */
#list{
  scrollbar-gutter: stable both-edges;
  padding-right: 10px;
}
.listing-title, .card-title, .title, .listing-card-title{
  overflow-wrap: anywhere;
  word-break: break-word;
}
.listing-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  min-height: 2.5em;
  overflow-wrap:anywhere;
  word-break:break-word;
}


/* Legend placement tuning */
.leaflet-top.leaflet-left .legend{ margin-top: 64px; }
@media (max-width:520px){ .leaflet-top.leaflet-left .legend{ margin-top: 58px; } }

.fab-stack button{ opacity:1 !important; }

/* Keep Leaflet attribution clear of bottom-right actions */
.leaflet-bottom.leaflet-right{ bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (max-width:520px){ .leaflet-bottom.leaflet-right{ bottom: calc(140px + env(safe-area-inset-bottom)); } }


    /* Safety clamp for social icons */
    .hdr-right .soc img{ width:18px; height:18px; max-width:18px; max-height:18px; object-fit:contain; display:block; }

/* =========================
   Mobile Lux UI pass (Search bar + Legend)
   ========================= */
@media (max-width: 520px){
  /* Make the "Search Properties" CTA feel like a premium bottom search bar */
  .search-fab{
    height: 56px !important;
    padding: 0 14px 0 8px !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(12,20,36,.94), rgba(17,28,54,.94)) !important;
    color: #fff !important;
    border: 1px solid rgba(215,181,109,.45) !important;
    box-shadow: 0 18px 44px rgba(2,6,23,.20) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .search-fab .fab-icon{
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
    color: #0B1220 !important;
    box-shadow: 0 10px 20px rgba(215,181,109,.32) !important;
    flex: 0 0 44px !important;
  }
  .search-fab .fab-text{
    font-weight: 900 !important;
    letter-spacing: .2px;
    font-size: 15px !important;
    color: #fff !important;
  }
  .search-fab .fab-badge{
    margin-left: auto !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    font-weight: 900 !important;
  }

  /* Ensure the Clear Filters button stays reachable and not overlapping */
  .clear-fab{
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    right: 12px !important;
    border-radius: 16px !important;
    background: rgba(12,20,36,.92) !important;
    border: 1px solid rgba(215,181,109,.30) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .clear-fab .fab-text{ font-weight: 700 !important; }

  /* Legend: compact, premium, and lifted above the search bar */
  .leaflet-control.legend{
    margin-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    margin-left: 12px !important;
  }
  .legend{
    padding: 10px 10px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(12,20,36,.10) !important;
    box-shadow: 0 16px 40px rgba(2,6,23,.16) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    max-width: 190px;
  }
  .legend .legend-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom: 8px;
  }
  .legend .legend-title{
    font-weight: 900;
    letter-spacing: .8px;
    font-size: 11px;
    color: var(--navy);
    opacity: .9;
  }
  .legend .legend-toggle{
    width: 34px;
    height: 34px;
    border-radius: 14px;
    border: 1px solid rgba(12,20,36,.12);
    background: rgba(12,20,36,.04);
    color: var(--navy);
    font-weight: 900;
    line-height: 1;
  }
  .legend .legend-items{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .legend .legend-row{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight: 650;
    font-size: 12px;
    color: rgba(12,20,36,.90);
    white-space: nowrap;
  }
  .legend .legend-row img{
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 6px 10px rgba(2,6,23,.10));
  }
}

/* Desktop/Tablet: refine legend typography slightly (safe override) */
.legend .legend-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
}
.legend .legend-title{
  font-weight: 900;
  letter-spacing: .8px;
  font-size: 11px;
  color: var(--navy);
  opacity: .9;
}
.legend .legend-toggle{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(12,20,36,.12);
  background: rgba(12,20,36,.04);
  color: var(--navy);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.legend .legend-items{ display:flex; flex-direction:column; gap:6px; }
.legend .legend-row{ display:flex; align-items:center; gap:8px; font-weight:650; font-size:12px; color: rgba(12,20,36,.90); }


  .chip { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid rgba(11,30,52,.18); background:#fff; font-weight:800; font-size:12px; color:#0B1E34; }
  .chip input{ width:16px; height:16px; }

  /* Modal scroll safety */
  .modal-card{max-height:calc(100vh - 80px); overflow:auto;}


/* === Add Listing modal: force native controls to render in LIGHT scheme (fixes black bar / unreadable dropdown on some browsers) === */
#addListingBackdrop, #addListingModal { color-scheme: light; }
#addListingModal select, 
#addListingModal input, 
#addListingModal textarea, 
#addListingModal button { color-scheme: light; }

/* Use native select rendering inside modal to avoid broken custom appearance in some environments */
#addListingModal select{
  -webkit-appearance: menulist;
  appearance: menulist;
  background-image: none !important;
  padding-right: 14px !important;
}

/* Make option list readable */
#addListingModal option{
  color: #0b1220;
  background: #ffffff;
}

/* Ensure helper text never gets overlapped by accidental pseudo elements */
#addListingModal .help-text, 
#addListingModal small{
  position: relative;
  z-index: 1;
}



/* Custom Subtype dropdown (fixes native <select> overlay/glitch inside modal on some browsers) */
.customSelect{ position:relative; width:100%; }
.customSelectBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid rgba(13,27,42,.18);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  color:#0d1b2a;
  font-weight:700;
  box-shadow:0 10px 22px rgba(13,27,42,.08);
  cursor:pointer;
}
.customSelectBtn:focus{ outline: none; box-shadow:0 0 0 3px rgba(205,160,73,.25), 0 10px 22px rgba(13,27,42,.10); border-color: rgba(205,160,73,.55); }
.customSelectCaret{ opacity:.7; font-weight:900; }
.customSelectMenu{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 10px);
  background: #fff;
  border: 1px solid rgba(13,27,42,.14);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(13,27,42,.18);
  max-height: 260px;
  overflow:auto;
  z-index: 999999; /* over modal */
  display:none;
  padding:8px;
}
.customSelectMenu.open{ display:block; }
.customSelectOption{
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  padding:12px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  color:#0d1b2a;
}
.customSelectOption:hover{ background: rgba(205,160,73,.12); }
.customSelectOption[aria-selected="true"]{
  background: rgba(13,27,42,.92);
  color:#fff;
}

  /* Make the drawer scrollable when its content exceeds the viewport height */
  .drawer {
    overflow-y: auto;
    overflow-x: hidden;
  }

    /* Show on Map */
    #showOnMapBtn{ white-space:nowrap; }
  
/* Performance: lazy render offscreen listing cards */
.listing-card{content-visibility:auto;contain-intrinsic-size:220px;}


/* ===== Inline Add Listing CTA (Drawer) ===== */
.inline-cta{
  margin: 2px 0 10px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(215,181,109,.35);
  background: rgba(255,255,255,.70);
  box-shadow: 0 14px 30px rgba(2,6,23,.06);
}
.inline-cta-btn{
  width: 100%;
  justify-content: center;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
}
.inline-cta-sub{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(12,20,36,.70);
  text-align: center;
  font-weight: 700;
}

/* ===== Map location picker toast ===== */
.pick-toast{
  position: fixed;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 1600;
  width: min(560px, calc(100vw - 24px));
  border-radius: 18px;
  padding: 12px 12px;
  background: rgba(12,20,36,.94);
  color: #fff;
  border: 1px solid rgba(215,181,109,.35);
  box-shadow: 0 26px 70px rgba(2,6,23,.35);
  display:none;
}
.pick-toast .row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.pick-toast b{ font-size: 13px; letter-spacing:.02em; }
.pick-toast span{ font-size: 12px; opacity:.9; }
.pick-toast .pick-actions{ display:flex; gap:8px; align-items:center; }
.pick-toast .pick-btn{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  padding: 9px 12px;
  border-radius: 14px;
  font-weight: 900;
  cursor:pointer;
}
.pick-toast .pick-btn.primary{
  background: rgba(215,181,109,.95);
  color:#0C1424;
  border-color: rgba(215,181,109,.55);
}
.modal-backdrop{position:fixed;inset:0;background:rgba(6,16,32,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:1300;}
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:1400;padding:14px;}
.modal-card{width:min(860px, 96vw);max-height:90vh;overflow:auto;background:rgba(255,255,255,.98);
  border-radius:22px;border:1px solid rgba(215,181,109,.45);box-shadow:0 30px 80px rgba(0,0,0,.35);padding:18px;}
.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px;}
.modal-title{font-size:16px;font-weight:1000;letter-spacing:.4px;color:#0C1424;}
.modal-sub{font-size:12px;color:rgba(12,20,36,.7);margin-top:3px;}
.icon-x{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:#0C1424;padding:4px 8px;border-radius:10px;}
.icon-x:hover{background:rgba(12,20,36,.06);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:680px){.grid2{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0;}
.field label{font-size:12px;font-weight:800;color:#0C1424;}
.field input,.field select{padding:12px 12px;border-radius:14px;border:1px solid rgba(12,20,36,.12);outline:none;font-size:14px;}
.field input:focus,.field select:focus{border-color:rgba(215,181,109,.85);box-shadow:0 0 0 4px rgba(215,181,109,.18);}
.hint-inline{font-size:12px;color:rgba(12,20,36,.65);font-weight:600;}
.hint{font-size:12px;color:rgba(12,20,36,.7);}
.checkline{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:16px;border:1px solid rgba(215,181,109,.35);background:rgba(215,181,109,.08);font-size:12px;font-weight:750;color:#0C1424;}
.checkline input{margin-top:3px;}
.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}
.btn-ghost{padding:12px 16px;border-radius:14px;border:1px solid rgba(12,20,36,.18);background:transparent;font-weight:900;cursor:pointer;}
.btn-primary{padding:12px 16px;border-radius:14px;border:1px solid rgba(215,181,109,.75);background:rgba(12,20,36,.95);color:#fff;font-weight:1000;cursor:pointer;}
.note{margin-top:10px;font-size:12px;color:rgba(12,20,36,.65);}

@media (max-width: 600px){
    }
@media (max-width: 420px){
  /* keep map visible: shorten button */
    }

/* ===== UI polish fixes (mobile + clickability) ===== */
.legend{
  position: relative;
  z-index: 2000; /* above popups */
  pointer-events: auto;
}
.legend .legend-head{
  cursor: pointer;
  user-select: none;
}
.legend.is-collapsed{
  padding-bottom: 10px !important;
}
.legend.is-collapsed .legend-toggle{
  transform: rotate(90deg);
}
.legend-toggle{
  border: 1px solid rgba(12,20,36,.12);
  background: rgba(255,255,255,.9);
  border-radius: 10px;
  width: 36px;
  height: 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* Mobile layout: keep map usable and avoid bottom “fucked up” overlaps */
@media (max-width: 700px){
  :root{ --mobileBottom: calc(16px + env(safe-area-inset-bottom)); --legendRowW: 150px; --mobileSide: 12px; --rowGap: 10px; }
  /* Search button becomes a bottom-row pill that leaves room for the legend */
  .fab-stack{
    position: fixed;
    left: calc(var(--mobileSide) + var(--legendRowW) + var(--rowGap)) !important;
    right: var(--mobileSide) !important;
    transform: none !important;
    align-items: stretch !important;
    width: auto !important;
    bottom: var(--mobileBottom) !important;
  }
  .fab-stack .add-fab,
  .fab-stack .search-fab{ width: 100% !important; }
  /* Keep legend at same baseline (in case Leaflet injects inline positioning) */
  .leaflet-bottom.leaflet-left{ bottom: var(--mobileBottom) !important; }
  /* Push leaflet attribution up so it doesn’t sit under the bottom row */
  .leaflet-bottom.leaflet-right{ bottom: calc(var(--mobileBottom) + 56px) !important; }
  /* Keep legends away from iOS notch a bit */
  .leaflet-top.leaflet-left{ margin-top: 6px; }
}


/* Hide legend while the add-listing modal is open */
body.modal-open .legend{
  opacity: 0;
  pointer-events: none;
}



/* ===== AUVIA stability overrides: prevent global img rules breaking Leaflet + icons ===== */
.leaflet-marker-icon, .leaflet-marker-shadow{
  width:30px !important; height:30px !important;
  max-width:none !important; max-height:none !important;
  min-width:30px !important; min-height:30px !important;
  object-fit: contain !important;
}
.type-pill .type-icon{
  width:18px !important; height:18px !important;
  max-width:18px !important; max-height:18px !important;
  object-fit: contain !important;
  display:block;
}
.info .mini-ico{
  width:16px; height:16px;
  margin-right:6px;
  vertical-align:-3px;
  opacity:.92;
}
.info .mini-ico path{ fill: currentColor; }
.info{ color:#0C1424; }
.drawer .soc img, .drawer .social img{
  width:26px !important; height:26px !important;
  max-width:26px !important; max-height:26px !important;
  object-fit: contain !important;
}

/* === AUVIA: Unified Primary Button Theme (navy bg + white text) === */
:root{
  --auvia-navy:#0B1E34;
  --auvia-navy-2:#0F2A4A;
  --auvia-gold:#D9B56A;
  --auvia-white:#FFFFFF;
}

/* Base button elements */
button,
a.btn,
input[type="button"],
input[type="submit"],
.fab,
.fab-pill,
.search-fab,
.clear-filters-fab,
#applyFiltersBtn,
#resetFiltersBtn,
#clearFiltersBtn,
#editFiltersBtn,
.results-bar button,
.results-bar .btn,
.drawer-footer button,
.drawer-footer .btn,
.card-actions button,
.card-actions .btn,
.card-actions a,
.listing-card button,
.listing-card a.button,
.listing-card a.btn,
.leaflet-control a,
.leaflet-bar a{
  background: var(--auvia-navy) !important;
  color: var(--auvia-white) !important;
  border: 1px solid rgba(217,181,106,.55) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  text-decoration: none !important;
}

/* Prevent leaflet +/- controls from becoming pills; keep readable */
.leaflet-bar a{
  border-radius: 10px !important;
  width: 34px !important;
  height: 34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Hover / active */
button:hover,
a.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover{
  background: var(--auvia-navy-2) !important;
  border-color: rgba(217,181,106,.85) !important;
}

/* Focus visibility */
button:focus,
a.btn:focus,
input[type="button"]:focus,
input[type="submit"]:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(217,181,106,.35) !important;
}

/* Secondary/ghost buttons that should still be navy for option (1) */
button.ghost,
button.secondary,
.results-bar .ghost,
.results-bar .secondary{
  background: var(--auvia-navy) !important;
  color: var(--auvia-white) !important;
}

/* Pills/badges */
.pill,
.badge,
.filter-pill,
.quick-pill,
#resultsPill,
#allPill{
  background: var(--auvia-navy) !important;
  color: var(--auvia-white) !important;
  border: 1px solid rgba(217,181,106,.65) !important;
}

/* Inputs should stay light; only fix their focus ring */
input[type="text"], input[type="search"], input[type="number"], select, textarea{
  color: #0B1E34 !important;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus, select:focus, textarea:focus{
  box-shadow: 0 0 0 3px rgba(217,181,106,.35) !important;
  border-color: rgba(217,181,106,.85) !important;
}

/* Make text on dark toolbars readable */
.results-bar, .drawer-topbar, .filters-header, .sticky-results{
  color: var(--auvia-white) !important;
}
.results-bar * , .drawer-topbar *, .filters-header *, .sticky-results *{
  color: var(--auvia-white) !important;
}

/* Ensure icon SVGs inside buttons are visible */
button svg, a.btn svg, .fab svg{ fill: currentColor !important; stroke: currentColor !important; }



/* --- Add Listing modal: scrolling + select dropdown fix --- */
.modal-card{ max-height: 92vh; overflow: hidden; }
.modal-scroll{ padding: 18px 22px 22px; max-height: calc(92vh - 70px); overflow: auto; }
@media (max-width: 820px){
  .modal-card{ max-height: 94vh; }
  .modal-scroll{ max-height: calc(94vh - 64px); padding: 14px 14px 16px; }
}
/* ensure native select dropdown isn't visually clipped by stacked layers */
.modal-card select{ position: relative; z-index: 5; }


/* Hotfix: native <select> menus can render incorrectly when backdrop-filter is applied */
.modal-backdrop{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Ensure form controls keep readable colors in all browsers (incl. forced-dark modes) */
#addListingModal select,
#addListingModal option,
#addListingModal input,
#addListingModal textarea{
  color:#0b1220 !important;
}
#addListingModal select{
  background:#ffffff !important;
}
#addListingModal option{
  background:#ffffff !important;
}


/* iPhone Safari auto-zoom fix for Add Listing modal */
.ios-device #addListingModal input[type="text"],
.ios-device #addListingModal input[type="tel"],
.ios-device #addListingModal input[type="number"],
.ios-device #addListingModal input[type="email"],
.ios-device #addListingModal select,
.ios-device #addListingModal textarea{
  font-size:16px !important;
}
.ios-device #addListingModal .field input,
.ios-device #addListingModal .field select,
.ios-device #addListingModal .field textarea{
  font-size:16px !important;
}


/* ===== v8.1 HOTFIX: Add Listing modal centered + ALWAYS scrollable + blur behind ===== */

/* Backdrop */
#addListingBackdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 20000 !important;
  display: none;
  background: rgba(6,16,32,.46) !important;
  /* keep it simple: backdrop-filter can break native selects on some mobile browsers */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Modal wrapper */
#addListingModal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 20010 !important;
  display: none; /* JS sets flex */
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

/* Card */
#addListingModal .modal-card{
  width: min(860px, calc(100vw - 32px)) !important;
  height: min(92dvh, calc(100dvh - 32px)) !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;               /* ONE scroll owner: the card */
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 22px !important;
}

/* Header */
#addListingModal .modal-head{
  flex: 0 0 auto !important;
  padding: 18px 18px 10px !important;
}

/* Body wrapper (no scrolling here; the card scrolls) */
#addListingModal .modal-scroll{
  flex: 1 1 auto !important;
  overflow: visible !important;
  padding: 0 18px 0 !important;
}

/* Sticky top action bar (always visible while form scrolls) */
#addListingModal form#addListingForm .actions.actions-top{
  position: sticky;
  top: 6px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(12,20,36,.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.02);
  backdrop-filter: blur(10px) saturate(1.02);
  box-shadow: 0 6px 18px rgba(2,6,23,.08);
}
#addListingModal form#addListingForm .actions.actions-top .btn-ghost,
#addListingModal form#addListingForm .actions.actions-top .btn-primary{
  min-height: 40px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}
#addListingModal form#addListingForm .actions.actions-top .btn-ghost{
  flex: 0 0 auto;
  min-width: 88px;
  padding-inline: 12px;
  background: rgba(12,20,36,.035);
  border: 1px solid rgba(12,20,36,.08);
  color: #0f172a;
  box-shadow: none;
}
#addListingModal form#addListingForm .actions.actions-top .btn-primary{
  flex: 1 1 auto;
  min-width: 0;
  box-shadow: 0 8px 18px rgba(205,160,73,.16);
}
#addListingModal form#addListingForm .actions.actions-top::before{
  content: none;
}

/* Keep enough room around the last fields and submission state */
#addListingModal form#addListingForm{
  padding-bottom: 10px;
  padding-top: 0;
}
/* Mobile */
@media (max-width: 720px){
  #addListingModal{ padding: 10px !important; }
  #addListingModal .modal-card{
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 20px) !important;
    border-radius: 20px !important;
  }
  #addListingModal .modal-head{ padding: 14px 14px 8px !important; }
  #addListingModal .modal-scroll{ padding: 0 14px 14px !important; }
  #addListingModal form#addListingForm .actions.actions-top{ top: 4px; margin: 0 0 10px; padding: 5px; border-radius: 12px; }
}

/* Blur behind the modal */
body.modal-open #map,
body.modal-open .drawer,
body.modal-open .watermark{
  filter: blur(10px) saturate(1.06);
  transform: translateZ(0);
}
body.modal-open{ overflow: hidden !important; }

/* ===== v10 FIX: robust modal scrolling (fixes “can’t scroll to Submit”) ===== */
/* Root cause: overflow:auto inside flex children can fail unless min-height:0; also some browsers ignore inner scroll */
#addListingModal{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  align-items: flex-start !important; /* allows wrapper scrolling if content is taller */
}
#addListingModal .modal-card{
  margin: auto !important;
  min-height: 0 !important;
  overflow: auto !important; /* fallback: card itself scrolls */
  -webkit-overflow-scrolling: touch;
}
#addListingModal .modal-scroll{
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important; /* let modal-card handle the scroll */
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}
/* Ensure touch scroll works on mobile */
#addListingModal, #addListingModal *{
  touch-action: pan-y;
}

/* v12: ensure first fields are not visually clipped under rounded corners */
#addListingModal .modal-scroll{
  padding-top: 18px !important;
  scroll-padding-top: 18px;
}


/* ===== v13: Fix Add Listing modal layout (grid + spacing) ===== */
#addListingModal .modal-card{ box-sizing:border-box; }
#addListingModal .modal-scroll{ padding: 18px 18px 22px !important; }
#addListingModal .modal-scroll form{ display:block; }

#addListingModal .modal-scroll .grid2,
#addListingModal .modal-scroll .grid3{
  display:grid;
  gap: 12px;
  align-items: start;
}

#addListingModal .modal-scroll .grid2{ grid-template-columns: 1fr 1fr; }
#addListingModal .modal-scroll .grid3{ grid-template-columns: repeat(3, 1fr); }

/* Remove extra margins that were making the grid feel broken */
#addListingModal .modal-scroll .field{ margin: 0 !important; }

/* Ensure controls never overflow their grid cells */
#addListingModal .modal-scroll .field input,
#addListingModal .modal-scroll .field select,
#addListingModal .modal-scroll .field textarea{
  width: 100% !important;
  max-width: 100% !important;
}

/* Better label spacing */
#addListingModal .modal-scroll .field label{
  margin: 0 0 2px 2px;
  line-height: 1.15;
}

/* Mobile: stack everything cleanly */
@media (max-width: 720px){
  #addListingModal .modal-scroll{ padding: 14px 14px 18px !important; }
  #addListingModal .modal-scroll .grid2,
  #addListingModal .modal-scroll .grid3{
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
}


/* ===== V14 modal layout hardening (fix overlaps + phone prefix) ===== */
#addListingModal .modal-content {
  overflow-x: hidden;
}
#addListingModal .field {
  margin: 0 !important;
  min-width: 0;
}
#addListingModal .field label {
  display:block !important;
  position: relative !important;
  margin: 0 0 8px 0 !important;
}
#addListingModal input[type="text"],
#addListingModal input[type="tel"],
#addListingModal input[type="number"],
#addListingModal select,
#addListingModal textarea {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  height: 46px;
}
#addListingModal textarea {
  height: auto;
  min-height: 110px;
  resize: vertical;
}
#addListingModal .input-group {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  background: #f6f7fb;
  border: 1px solid #e6e8ef;
  border-radius: 14px;
  padding: 10px 12px;
}
#addListingModal .input-group .prefix {
  font-weight: 800;
  letter-spacing: .2px;
  color: #0f172a;
  opacity: .85;
  white-space: nowrap;
}
#addListingModal .input-group input {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  height: 26px;
  box-shadow: none !important;
}
#addListingModal .input-group input:focus {
  outline: none;
}
#addListingModal .grid2,
#addListingModal .grid3 {
  align-items: start;
}
#addListingModal .grid2 {
  margin-bottom: 14px;
}
#addListingModal .grid3 {
  margin-bottom: 14px;
}
@media (max-width: 880px){
  #addListingModal .modal-shell{ max-width: 96vw; }
}


  /* Final responsive layout override for Add Listing modal
     - Mobile first: single column everywhere
     - Tablet/Desktop: 2 columns (grid2), 3 columns (grid3)
     This block comes late in CSS to win over earlier rules.
  */
  #addListingModal .modal-content{ max-width: min(980px, 94vw); }

  /* Mobile-first: stack everything */
  #addListingModal form{ display:flex; flex-direction:column; gap:14px; }
  #addListingModal .grid2,
  #addListingModal .grid3{ display:grid; grid-template-columns: 1fr !important; gap:12px !important; align-items:start; }

  #addListingModal .field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
  #addListingModal .field label{ display:block; margin:0; font-weight:800; }
  #addListingModal input,
  #addListingModal select,
  #addListingModal textarea{ width:100%; box-sizing:border-box; }

  /* Keep any explicit full-width fields truly full-width */
  #addListingModal .grid2 .field[style*="grid-column"],
  #addListingModal .grid3 .field[style*="grid-column"]{ grid-column: 1 / -1 !important; }

  /* Tablet/Desktop: allow multi-column */
  @media (min-width: 740px){
    #addListingModal .grid2{ grid-template-columns: 1fr 1fr !important; }
  }
  @media (min-width: 980px){
    #addListingModal .grid3{ grid-template-columns: 1fr 1fr 1fr !important; }
  }

/* =========================================================
   FINAL MOBILE BOTTOM ROW OVERRIDES (iOS + Android)
   - Keeps LEGENDS + Search Properties on same baseline
   - Prevents duplicate older media rules from overriding
   - Keeps Leaflet attribution tiny at the very bottom
   ========================================================= */
@media (max-width: 700px){
  :root{
    --auvia-safe: env(safe-area-inset-bottom);
    --auvia-gutter: 12px;
    --auvia-row-gap: 10px;
    --auvia-attr-h: 16px; /* reserved space for tiny attribution line */
    --auvia-row-bottom: calc(12px + var(--auvia-safe) + var(--auvia-attr-h));
    --auvia-legend-w: 158px; /* will be auto-updated by JS when possible */
  }

  /* Make Leaflet attribution as small as possible and ALWAYS below everything */
  .leaflet-control-attribution{
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(2px + var(--auvia-safe)) !important;
    z-index: 500 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    padding: 1px 4px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(17,24,39,.10) !important;
    white-space: nowrap !important;
    max-width: calc(100vw - 16px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Force LEGENDS control (bottom-left) baseline */
  .leaflet-bottom.leaflet-left{
    bottom: var(--auvia-row-bottom) !important;
    left: var(--auvia-gutter) !important;
  }
  .leaflet-bottom.leaflet-left .leaflet-control{
    margin: 0 !important;
  }
  .leaflet-control.legend{
    width: var(--auvia-legend-w) !important;
    max-width: var(--auvia-legend-w) !important;
  }

  /* Search pill: align to same baseline, start AFTER LEGENDS (no full-width centering) */
  .search-fab{
    left: calc(var(--auvia-gutter) + var(--auvia-legend-w) + var(--auvia-row-gap)) !important;
    right: var(--auvia-gutter) !important;
    bottom: var(--auvia-row-bottom) !important;

    width: auto !important;
    max-width: none !important;

    height: 52px !important;       /* slightly smaller for iOS fit */
    padding: 0 14px 0 10px !important;
    gap: 10px !important;
    transform: none !important;
  }
  .search-fab .label{
    font-size: 16px !important;
    letter-spacing: .2px !important;
  }

  /* Ensure other leaflet bottom-right controls never collide with the row */
  .leaflet-bottom.leaflet-right{
    bottom: calc(var(--auvia-row-bottom) + 64px) !important;
    right: var(--auvia-gutter) !important;
  }
}


    @media (max-width: 640px){
      :root{
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --attrib-h: 16px;   /* reserved height for attribution line */
        --attrib-gap: 6px;  /* gap between attribution and buttons row */
        --mobile-row-bottom: calc(var(--safe-bottom) + var(--attrib-h) + var(--attrib-gap));
      }

      /* 1) Put Leaflet attribution at the very bottom (license required, but keep it tiny) */
      .leaflet-control-attribution{
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        bottom: calc(var(--safe-bottom) + 2px) !important;
        transform: translateX(-50%) !important;

        margin: 0 !important;
        padding: 0 6px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,.55) !important;
        backdrop-filter: blur(10px);
        font-size: 9px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        max-width: calc(100vw - 16px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;

        z-index: 500 !important; /* below buttons */
        pointer-events: auto !important; /* keep clickable for license */
      }

      /* 2) Lift legend control row above the attribution, and lock baseline */
      .leaflet-bottom.leaflet-left{
        bottom: var(--mobile-row-bottom) !important;
      }

      /* 3) Search pill baseline match legend */
      .search-fab{
        bottom: var(--mobile-row-bottom) !important;
        transform: none !important;
      }

      /* 4) Ensure our floating elements are above Leaflet controls */
      .search-fab, .fab-stack, .install-btn{
        z-index: 1200 !important;
      }

      /* 5) Make legends a touch smaller on iOS so both fit */
      .leaflet-control.legend{
        border-radius: 14px !important;
      }
      .leaflet-control.legend .legend-title{
        font-size: 12px !important;
        letter-spacing: .08em !important;
      }
      .leaflet-control.legend{
        transform: translateZ(0); /* iOS compositing */
      }
    }
  

/* === AUVIA Mobile Final Bottom-Bar + Attribution Fix (iOS/Android) === */
@media (max-width: 768px) {
  :root{
    --auvia-safe-b: env(safe-area-inset-bottom, 0px);
    --auvia-attrib-h: 16px;            /* reserved height for attribution */
    --auvia-attrib-gap: 4px;           /* gap above safe area */
    --auvia-bottom-baseline: calc(var(--auvia-safe-b) + var(--auvia-attrib-h) + var(--auvia-attrib-gap) + 10px);
  }

  /* 1) Make Leaflet attribution tiny and pin it to the very bottom */
  .leaflet-control-attribution{
    font-size: 10px !important;
    line-height: 1.1 !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.65) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    color: rgba(20,30,50,.85) !important;
    max-width: calc(100vw - 16px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: auto !important;
  }
  /* Pin the attribution container to bottom center (below everything) */
  .leaflet-bottom.leaflet-right{
    position: fixed !important;
    right: 8px !important;
    left: 8px !important;
    bottom: calc(var(--auvia-safe-b) + 2px) !important;
    z-index: 999 !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: none !important; /* lets map drag work; attribution itself re-enables */
  }
  .leaflet-bottom.leaflet-right .leaflet-control{
    margin: 0 !important;
    pointer-events: auto !important;
  }

  /* 2) Ensure Legends (Leaflet bottom-left) sits on SAME baseline as Search bar */
  .leaflet-bottom.leaflet-left{
    bottom: var(--auvia-bottom-baseline) !important;
    left: 10px !important;
    z-index: 1200 !important;
  }

  /* 3) Make Search bar align to the same baseline and not span full width */
  .search-fab{
    bottom: var(--auvia-bottom-baseline) !important;
    left: auto !important;
    transform: none !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
  }

  /* If you have a wrapper that sets search-fab width, keep it in check */
  .search-fab .search-pill{
    height: 56px !important;
    max-width: calc(100vw - 20px) !important;
  }

  /* 4) Slightly reduce both controls on iOS to prevent baseline drift */
  .search-fab .search-pill,
  .legend-pill,
  .legend-toggle,
  .legend-btn{
    transform: translateZ(0); /* iOS rendering stability */
  }
}



/* === AUVIA Mobile Footer Attribution + Baseline Unify (final) === */
@media (max-width: 768px) {
  :root{
    --auvia-safe-b: env(safe-area-inset-bottom, 0px);
    --auvia-footer-h: 14px;
    --auvia-controls-bottom: calc(var(--auvia-safe-b) + var(--auvia-footer-h) + 10px);
  }

  /* Footer container that will host Leaflet attribution (can't be removed) */
  #auvia-attrib{
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(var(--auvia-safe-b) + 2px);
    height: var(--auvia-footer-h);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 600; /* below the buttons */
    pointer-events: none;
  }
  #auvia-attrib .leaflet-control-attribution{
    font-size: 9px !important;
    line-height: 1.05 !important;
    padding: 1px 6px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.45) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    color: rgba(20,30,50,.75) !important;
    max-width: calc(100vw - 16px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: auto; /* allow click for license */
  }

  /* Prevent Leaflet default attribution placement from taking space / interfering */
  .leaflet-bottom.leaflet-right{
    display: none !important;
  }

  /* Baseline unify: Legends (leaflet bottom-left) and Search (fixed) */
  .leaflet-bottom.leaflet-left{
    bottom: var(--auvia-controls-bottom) !important;
    left: 10px !important;
    z-index: 1200 !important;
  }
  .leaflet-bottom.leaflet-left .leaflet-control{
    margin: 0 !important;
  }
  .search-fab{
    bottom: var(--auvia-controls-bottom) !important;
    right: 10px !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
  }
}


/* Mobile bottom UI stack (iOS + Android) - prevent Legends/Search overlap and keep attribution readable */
@media (max-width: 700px) {
  :root{
    --auvia-gap: 10px;
    --auvia-search-h: 56px; /* bottom pill height incl. padding */
    --auvia-stack: calc(env(safe-area-inset-bottom) + var(--auvia-gap));
  }

  /* Search Properties pill: fixed bottom, full width */
  #openFilterBtn, #openSearchBtn, .open-search, .search-pill, #searchPill {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: var(--auvia-stack) !important;
    z-index: 9999 !important;
  }

  /* LEGENDS: your legends is a Leaflet control div.legend inside .leaflet-control.legend */
  .leaflet-control.legend,
  #legendContainer, #legend, .legend-box, .legends-box, #legendsBox {
    position: fixed !important;
    left: 10px !important;
    right: auto !important;
    bottom: calc(var(--auvia-stack) + var(--auvia-search-h) + 10px) !important;
    z-index: 9998 !important;
    max-width: calc(100vw - 20px) !important;
  }

  /* Expanded legends: grow upward only and stay scrollable (your code uses .is-collapsed) */
  .leaflet-control.legend:not(.is-collapsed),
  #legendContainer.open, #legendContainer.active, #legend.open, #legend.active,
  .legend-box.open, .legend-box.active, .legends-box.open, .legends-box.active, #legendsBox.open, #legendsBox.active {
    max-height: calc(100vh - (var(--auvia-stack) + var(--auvia-search-h) + 110px)) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Leaflet attribution/controls: move above the bottom stack */
  .leaflet-bottom.leaflet-left,
  .leaflet-bottom.leaflet-right {
    bottom: calc(var(--auvia-stack) + var(--auvia-search-h) + 8px) !important;
  }

  /* Make attribution smaller + readable */
  .leaflet-control-attribution {
    font-size: 10px !important;
    line-height: 1.2 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    margin: 0 6px 0 6px !important;
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* Mobile fix: Add Listing consent line should wrap and not overflow */
.checkline{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  box-sizing:border-box;
}
.checkline span{
  flex:1;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Ensure consent checkbox doesn't stretch (prevents huge box + vertical text) */
.checkline input[type="checkbox"]{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:2px;
}
.checkline span{display:block;}

/* Consent checkbox hard-override (input styles elsewhere set width:100% + padding) */
.checkline input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  padding:0 !important;
  margin:2px 0 0 0 !important;
  border-radius:4px !important;
  border:1px solid rgba(12,20,36,.25) !important;
  background:#fff !important;
  box-shadow:none !important;
  flex:0 0 18px !important;
  display:inline-block !important;
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
}

/* --- Toast (success) --- */
#auviaToast{
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 99999;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.2;
  max-width: min(92vw, 520px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
#auviaToast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}


  /* Task 4: Add-listing validation banner should be visible without jumping/zoom */
  #addListingModal #addWarnings{
    position: sticky;
    top: 0;
    z-index: 25;
    margin: 0 0 12px 0 !important;
    backdrop-filter: blur(10px);
  }

/* === iPhone-only drawer viewport fix === */
@supports (-webkit-touch-callout: none){
  html.ios-device, body.ios-device{
    overscroll-behavior-y: none;
  }

  @media (max-width: 700px){
    html.ios-device.keyboard-open,
    body.ios-device.keyboard-open{
      overflow: hidden !important;
      overscroll-behavior: none !important;
    }

    .ios-device.keyboard-open #map,
    .ios-device.keyboard-open .watermark{
      visibility: hidden !important;
      pointer-events: none !important;
    }
  }

  @media (max-width: 700px){
    .ios-device .drawer{
      top: var(--vv-top, 0px) !important;
      bottom: auto !important;
      left: 0 !important;
      width: 100vw !important;
      max-width: 100vw !important;
      height: calc(var(--app-vh, 1vh) * 100) !important;
      max-height: calc(var(--app-vh, 1vh) * 100) !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      overscroll-behavior-y: contain !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      touch-action: pan-y !important;
    }

    .ios-device .drawer-header{
      position: relative !important;
      top: auto !important;
      z-index: 2 !important;
      padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
      padding-bottom: 8px !important;
      min-height: 0 !important;
      align-items: flex-start !important;
      background: rgba(248,250,252,.94) !important;
      backdrop-filter: blur(18px) saturate(1.15);
      -webkit-backdrop-filter: blur(18px) saturate(1.15);
    }

    .ios-device .drawer-header::after{
      left: 12px !important;
      right: 12px !important;
    }

    .ios-device .filters{
      padding-top: 8px !important;
      min-height: 0 !important;
    }

    .ios-device .hdr-left{
      flex: 0 1 auto !important;
      min-width: 0 !important;
    }

    .ios-device .hdr-actions{
      flex: 1 1 auto !important;
      min-width: 0 !important;
      gap: 6px !important;
      flex-wrap: wrap !important;
      align-content: flex-start !important;
    }

    .ios-device .hdr-right{
      flex: 0 0 auto !important;
      gap: 8px !important;
      margin-left: auto !important;
    }

    .ios-device .logo-btn,
    .ios-device .icon-btn{
      width: 34px !important;
      height: 34px !important;
      border-radius: 11px !important;
    }

    .ios-device .logo-btn img{
      width: 21px !important;
      height: 21px !important;
    }

    .ios-device .soc{
      width: 30px !important;
      height: 30px !important;
      border-radius: 11px !important;
    }

    .ios-device .soc img{
      width: 16px !important;
      height: 16px !important;
    }

    .ios-device .list{
      padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
      min-height: 0 !important;
    }

  .ios-device .filters .field input.ios-prompt-input{
    caret-color: transparent !important;
    cursor: pointer !important;
  }
    .ios-device .drawer > .drawer-header,
    .ios-device .drawer > .filters,
    .ios-device .drawer > .list{
      scroll-margin-top: 0 !important;
    }

  }

  @media (max-width: 390px){
    .ios-device .drawer-header{
      gap: 8px !important;
    }

    .ios-device .drawer-header .h b{
      display: none !important;
    }

    .ios-device #subCount{
      font-size: 11px !important;
      line-height: 1.2 !important;
    }

    .ios-device .hdr-actions{
      gap: 5px !important;
    }

    .ios-device .soc{
      width: 28px !important;
      height: 28px !important;
      border-radius: 10px !important;
    }

    .ios-device .soc img{
      width: 15px !important;
      height: 15px !important;
    }
  }

  @media (max-width: 700px){
    .ios-device.keyboard-open .fab-stack,
    .ios-device.keyboard-open .search-fab,
    .ios-device.keyboard-open .clear-fab,
    .ios-device.keyboard-open .install-btn{
      opacity: 0 !important;
      pointer-events: none !important;
      visibility: hidden !important;
    }
  }
}


/* === iPhone-only map top controls safe-area fix === */
@supports (-webkit-touch-callout: none){
  @media (max-width: 700px){
    .ios-device .lang-btn{
      top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
      right: 12px !important;
    }

    html[dir="rtl"].ios-device .lang-btn{
      right: 12px !important;
      left: auto !important;
    }

    .ios-device .leaflet-top{
      top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    }

    .ios-device .leaflet-control-zoom{
      margin-top: 0 !important;
    }

    .ios-device .open-browser-btn{
      top: calc(env(safe-area-inset-top, 0px) + 62px) !important;
      right: 12px !important;
    }

    html[dir="rtl"].ios-device .open-browser-btn{
      right: 12px !important;
      left: auto !important;
    }
  }
}



/* ===== Safe Round 1: mobile polish without logic changes ===== */
.btn,
.actions .btn,
.auvia-a,
.card-actions .btn,
.listing-card a.btn,
.listing-card button{
  min-height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.actions .btn,
.auvia-card .actions .auvia-a{
  justify-content: center;
}

@media (max-width: 520px){
  /* Make result cards breathe more on small screens without changing behavior */
  .list{
    padding: 10px 12px 18px;
  }
  .card{
    height: auto;
    min-height: 176px;
    padding: 12px;
    gap: 10px;
    align-items: flex-start;
  }
  .thumb{
    width: 96px;
    height: 96px;
    border-radius: 12px;
    align-self: flex-start;
  }
  .meta{
    gap: 5px;
  }
  .meta .t{
    font-size: 13px;
    line-height: 1.3;
    min-height: 2.6em;
  }
  .meta .d{
    -webkit-line-clamp: 2;
    min-height: 2.4em;
  }
  .actions{
    width: 100%;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: nowrap;
  }
  .actions .btn{
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 10px;
    font-size: 12px;
  }

  /* Keep map popup actions readable and tap-friendly */
  .auvia-card .actions{
    flex-wrap: wrap;
    gap: 8px;
  }
  .auvia-card .actions .auvia-a{
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  /* Slightly cleaner floating actions spacing on mobile */
  .fab-stack{
    gap: 10px;
  }
}

@media (max-width: 380px){
  .card{
    padding: 10px;
    gap: 8px;
  }
  .thumb{
    width: 88px;
    height: 88px;
  }
  .actions{
    flex-wrap: wrap;
  }
  .actions .btn,
  .auvia-card .actions .auvia-a{
    flex: 1 1 100%;
  }
}

html[dir="rtl"] .actions{
  direction: rtl;
}
html[dir="rtl"] .actions .btn,
html[dir="rtl"] .auvia-card .actions .auvia-a{
  text-align: center;
}

/* ===== Safe Round 2: iOS search zoom + calmer listing cards ===== */
.search input,
.drawer .search input,
.drawer input[type="text"],
.drawer input[type="search"],
.drawer input[type="number"],
.drawer select,
.drawer textarea{
  font-size: 16px;
}

@supports (-webkit-touch-callout: none){
  .drawer .search input,
  .drawer input[type="text"],
  .drawer input[type="search"],
  .drawer input[type="number"],
  .drawer select,
  .drawer textarea{
    font-size: 16px !important;
  }
}

@media (max-width: 640px){
  .card{
    min-height: 154px;
    gap: 12px;
  }
  .thumb{
    width: 112px;
    height: 112px;
    border-radius: 14px;
  }
  .meta{
    gap: 4px;
  }
  .meta .t{
    font-size: 13px;
    min-height: 2.4em;
  }
  .meta .d{
    font-size: 11.5px;
    min-height: 2.2em;
  }
  .info-row{
    gap: 6px;
  }
  .actions{
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .actions .btn{
    flex: 0 1 auto;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 10px;
    box-shadow: none;
    white-space: nowrap;
  }
  .actions .btn.primary{
    background: rgba(10,18,38,.07);
    color: #0b2346;
    border-color: rgba(10,18,38,.12);
  }
}

@media (max-width: 420px){
  .card{
    min-height: 148px;
    padding: 10px;
  }
  .thumb{
    width: 108px;
    height: 108px;
  }
  .actions .btn{
    padding: 6px 9px;
    font-size: 10.5px;
  }
}





/* ===== Safe Round 3: smaller map popups on Android/mobile touch devices ===== */
@media (max-width: 700px) and (pointer: coarse){
  html:not(.ios-device) .auvia-popup{
    width: min(292px, calc(100vw - 28px)) !important;
    max-width: min(292px, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 112px) !important;
    max-height: calc(100dvh - 112px) !important;
    overflow: auto !important;
    padding: 8px !important;
  }
  html:not(.ios-device) .auvia-card .head{
    padding: 10px 10px 8px !important;
  }
  html:not(.ios-device) .popup-facts{
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  html:not(.ios-device) .auvia-card .media{
    padding: 8px 10px 0 !important;
  }
  html:not(.ios-device) .auvia-card img{
    height: min(148px, 24vh) !important;
    border-radius: 12px !important;
  }
  html:not(.ios-device) .auvia-card .actions{
    padding: 8px 10px 10px !important;
    gap: 7px !important;
  }
  html:not(.ios-device) .auvia-card .actions .auvia-a{
    min-height: 38px !important;
    height: 38px !important;
    font-size: 10.5px !important;
    padding: 7px 9px !important;
  }
}

/* ===== Desktop-only fix: reserve stable space for content + action buttons ===== */
@media (min-width: 701px){
  .list .card{
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    height: 206px;
    min-height: 206px;
    max-height: 206px;
    padding: 14px;
    align-items: stretch;
  }
  .list .card .thumb{
    width: 112px;
    height: 112px;
    align-self: center;
  }
  .list .card .meta{
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto auto auto minmax(40px, auto);
    align-content: start;
    gap: 5px;
  }
  .list .card .card-price{
    font-size: 17px;
    line-height: 1.05;
    margin-bottom: 0;
  }
  .list .card .meta .t{
    min-height: 2.5em;
    max-height: 2.5em;
    line-height: 1.25;
  }
  .list .card .card-subline{
    min-height: 1.3em;
    max-height: 1.3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .list .card .card-desc{
    min-height: 1.3em !important;
    max-height: 1.3em;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
  }
  .list .card .info-row{
    min-height: 20px;
    align-items: center;
    overflow: hidden;
    flex-wrap: nowrap;
  }
  .list .card .actions{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    align-items: stretch;
  }
  .list .card .actions .btn{
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .list .card .actions .btn:only-child{
    grid-column: 1 / -1;
  }
  html[dir="rtl"] .list .card .actions{
    direction: rtl;
  }
}


/* ===== Desktop-only final fit fix: uniform cards + no popup scroll ===== */
@media (min-width: 701px){
  .list .card{
    display:grid !important;
    grid-template-columns:112px minmax(0,1fr) !important;
    gap:14px !important;
    height:214px !important;
    min-height:214px !important;
    max-height:214px !important;
    padding:14px !important;
    align-items:stretch !important;
    overflow:hidden !important;
  }
  .list .card .thumb{
    width:112px !important;
    height:112px !important;
    align-self:center !important;
  }
  .list .card .meta{
    min-height:0 !important;
    display:grid !important;
    grid-template-rows:auto auto auto minmax(18px,auto) minmax(18px,1fr) auto !important;
    gap:4px !important;
    align-content:start !important;
  }
  .list .card .card-price{
    font-size:17px !important;
    line-height:1.05 !important;
    margin:0 !important;
  }
  .list .card .meta .t{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    min-height:2.45em !important;
    max-height:2.45em !important;
    line-height:1.22 !important;
  }
  .list .card .card-subline,
  .list .card .card-desc{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .list .card .card-subline{
    -webkit-line-clamp:1 !important;
    min-height:1.3em !important;
    max-height:1.3em !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }
  .list .card .card-desc{
    -webkit-line-clamp:1 !important;
    line-clamp:1 !important;
    min-height:1.25em !important;
    max-height:1.25em !important;
    line-height:1.25 !important;
    margin:0 !important;
  }
  .list .card .info-row{
    min-height:18px !important;
    margin-top:0 !important;
    overflow:hidden !important;
    flex-wrap:nowrap !important;
  }
  .list .card .actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
    margin-top:0 !important;
    align-items:stretch !important;
    align-self:end !important;
  }
  .list .card .actions .btn{
    width:100% !important;
    min-width:0 !important;
    min-height:40px !important;
    height:40px !important;
    padding:7px 8px !important;
    font-size:11px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
  .list .card .actions .btn:only-child{
    grid-column:1 / -1 !important;
  }

  .list .card.empty-state-card{
    display:block !important;
    grid-template-columns:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    overflow:visible !important;
  }
  .list .card.empty-state-card > div{
    width:100% !important;
    min-height:220px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  html[dir="rtl"] .list .card.empty-state-card > div{
    text-align:right;
  }

  .leaflet-popup-content-wrapper{
    overflow:hidden !important;
  }
  .leaflet-popup-content{
    width:auto !important;
    margin:0 !important;
  }
  .auvia-popup{
    width:320px !important;
    max-width:min(320px, calc(100vw - 48px)) !important;
    max-height:none !important;
    overflow:hidden !important;
    padding:10px !important;
  }
  .auvia-card{
    display:grid !important;
    grid-template-rows:auto auto auto !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }
  .auvia-card .head{
    padding:12px 12px 8px !important;
  }
  .auvia-card .title{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    min-height:2.45em !important;
    line-height:1.22 !important;
    margin-bottom:6px !important;
  }
  .popup-subline,
  .auvia-card .meta{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .popup-subline{
    -webkit-line-clamp:1 !important;
    min-height:1.35em !important;
    margin-bottom:8px !important;
  }
  .auvia-card .meta{
    -webkit-line-clamp:2 !important;
    min-height:2.8em !important;
    max-height:2.8em !important;
    line-height:1.4 !important;
  }
  .popup-facts{
    gap:6px !important;
    margin:0 0 8px !important;
    flex-wrap:nowrap !important;
    overflow:hidden !important;
  }
  .auvia-card .media{
    padding:10px 12px 0 !important;
  }
  .auvia-card img{
    height:158px !important;
    border-radius:14px !important;
  }
  .auvia-card .actions{
    padding:10px 12px 12px !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .auvia-card .actions .auvia-a{
    min-width:0 !important;
    min-height:40px !important;
    height:40px !important;
    padding:8px 10px !important;
    font-size:11px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    border-radius:12px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
  .auvia-card .actions .auvia-a:last-child{
    grid-column:1 / -1 !important;
  }
}



/* ===== Phase 3 safe UI polish ===== */
.filters{
  gap: 12px;
}
.filters .grid2,
.filters-advanced{
  gap: 12px;
}
.search,
select,
.filters .field input{
  min-height: 44px;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.search{
  border-color: rgba(17,24,39,.10);
}
.search:focus-within,
select:focus,
.filters .field input:focus{
  border-color: rgba(215,181,109,.58);
  box-shadow: 0 0 0 3px rgba(215,181,109,.14);
  background: rgba(255,255,255,.94);
}
.applybar,
.results-actions,
.card .actions,
.auvia-card .actions{
  gap: 10px;
}
.btn,
.results-edit,
.results-clear,
.auvia-a{
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 800;
}
.btn,
.results-edit,
.results-clear{
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}
.btn.ghost,
.results-edit{
  background: rgba(255,255,255,.86);
}
.card{
  box-shadow: 0 12px 28px rgba(2,6,23,.08);
}
.meta{
  gap: 7px;
}
.meta .t{
  line-height: 1.3;
}
.meta .d,
.card-subline,
.popup-subline{
  color: #5f6f81;
}
.info-row{
  gap: 8px;
  margin-top: 4px;
}
.info,
.popup-fact{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.list .card.empty-state-card > div{
  padding: 18px;
}
html[dir="rtl"] .search{
  flex-direction: row-reverse;
}
html[dir="rtl"] .search input,
html[dir="rtl"] .results-meta,
html[dir="rtl"] .card,
html[dir="rtl"] .auvia-card .head{
  text-align: right;
}
html[dir="rtl"] .card .actions,
html[dir="rtl"] .auvia-card .actions{
  justify-content: flex-end;
}
@media (max-width: 520px){
  .filters{
    padding: 12px;
  }
  .list{
    padding: 12px 12px 16px;
  }
  .card{
    padding: 11px;
    border-radius: 20px;
  }
  .thumb{
    border-radius: 13px;
  }
  .btn,
  .results-edit,
  .results-clear,
  .auvia-a{
    min-height: 38px;
    padding-inline: 12px;
  }
}

body.hint-open{overflow:hidden;touch-action:none;}
.hint-sheet[aria-hidden="true"], .hint-backdrop[aria-hidden="true"]{display:none !important;}

/* ===== Round 1 premium mobile polish ===== */
@media (max-width: 640px){
  .list{
    padding: 12px 12px calc(26px + env(safe-area-inset-bottom)) !important;
    gap: 12px;
  }

  .list .card:not(.empty-state-card){
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(104px, 118px) minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: 184px !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(215,181,109,.18) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
    box-shadow: 0 18px 38px rgba(2,6,23,.09), 0 4px 10px rgba(2,6,23,.04) !important;
    overflow: hidden !important;
    align-items: start !important;
  }
  .list .card:not(.empty-state-card)::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 24%, transparent 76%, rgba(215,181,109,.06));
  }

  .list .card .thumb{
    width: 100% !important;
    height: 118px !important;
    border-radius: 18px !important;
    align-self: start !important;
    box-shadow: 0 12px 24px rgba(15,23,42,.10) !important;
  }
  .list .card .thumb img{
    transform: scale(1.01);
  }
  .list .card .thumb .type-pill{
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    border-radius: 999px !important;
    justify-content: center !important;
    background: rgba(11,30,52,.82) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 10px 22px rgba(2,6,23,.16) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .list .card .thumb .type-pill span{
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
  }

  .list .card .meta{
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    gap: 7px !important;
    align-content: start !important;
  }
  .list .card .card-price{
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em;
    color: #0b1e34 !important;
  }
  .list .card .meta .t{
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
    min-height: 2.6em !important;
    max-height: none !important;
    color: #0f172a !important;
  }
  .list .card .card-subline{
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #475569 !important;
    min-height: 1.35em !important;
    white-space: normal !important;
    max-height: none !important;
  }
  .list .card .card-desc{
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #64748b !important;
    min-height: 2.75em !important;
    max-height: 2.75em !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  .list .card .info-row{
    margin-top: 1px !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .list .card .info-row .info{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(148,163,184,.10);
    border: 1px solid rgba(148,163,184,.16);
    color: #334155;
    font-size: 11px;
    font-weight: 750;
  }
  .list .card .info-row .mini-ico{
    width: 13px;
    height: 13px;
    opacity: .78;
  }

  .list .card .actions{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 2px !important;
    align-self: end !important;
  }
  .list .card .actions .btn{
    min-height: 38px !important;
    height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 18px rgba(11,30,52,.10) !important;
  }
  .list .card .actions .btn:only-child{
    grid-column: 1 / -1 !important;
  }

  .leaflet-popup-content-wrapper{
    border-radius: 22px !important;
    box-shadow: 0 22px 50px rgba(2,6,23,.22) !important;
  }
  .auvia-popup{
    width: min(340px, calc(100vw - 24px)) !important;
    max-width: min(340px, calc(100vw - 24px)) !important;
    padding: 10px !important;
  }
  .auvia-card{
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  .auvia-card .head{
    padding: 12px 12px 8px !important;
  }
  .auvia-card .title{
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  .popup-price{
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }
  .popup-subline{
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  .auvia-card .meta{
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  .popup-facts{
    gap: 7px !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
  }
  .popup-fact{
    min-height: 28px;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(148,163,184,.10) !important;
    border: 1px solid rgba(148,163,184,.16) !important;
    color: #334155 !important;
    font-size: 11px !important;
    font-weight: 750 !important;
  }
  .auvia-card .media{
    padding: 0 12px !important;
  }
  .auvia-card img{
    height: min(188px, 28vh) !important;
    border-radius: 16px !important;
  }
  .auvia-card .actions{
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .auvia-card .actions .auvia-a{
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    padding: 8px 10px !important;
    box-shadow: 0 8px 18px rgba(11,30,52,.10) !important;
  }
  .auvia-card .actions .auvia-a:last-child{
    grid-column: 1 / -1 !important;
  }

  html[dir="rtl"] .list .card .meta,
  html[dir="rtl"] .auvia-card .head{
    text-align: right;
  }
}

@media (max-width: 390px){
  .list .card:not(.empty-state-card){
    grid-template-columns: 100px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }
  .list .card .thumb{
    height: 104px !important;
    border-radius: 16px !important;
  }
  .list .card .card-price{
    font-size: 16px !important;
  }
  .list .card .meta .t{
    font-size: 13px !important;
  }
  .list .card .card-subline,
  .list .card .card-desc,
  .list .card .actions .btn,
  .popup-fact,
  .auvia-card .actions .auvia-a{
    font-size: 11px !important;
  }
}

/* ===== Round 4 desktop refinement ===== */
@media (min-width: 1024px){
  .drawer{
    width: min(430px, 34vw) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,249,252,.93)) !important;
    box-shadow: 22px 0 56px rgba(2,6,23,.22) !important;
  }

  .drawer-header{
    padding: 18px 18px 12px !important;
    gap: 14px !important;
  }
  .drawer-header .h b{
    font-size: 15px !important;
    letter-spacing: .14em !important;
  }
  .drawer-header .h span{
    font-size: 12.5px !important;
  }
  .hdr-actions,
  .hdr-right{
    gap: 10px !important;
  }
  .icon-btn,
  .logo-btn{
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }

  .filters{
    padding: 16px 18px 14px !important;
    gap: 14px !important;
  }
  .filters .grid2,
  .filters-advanced{
    gap: 14px !important;
  }
  .search,
  select,
  .filters .field input{
    min-height: 46px !important;
    font-size: 14px !important;
  }
  .search{
    padding: 11px 14px !important;
    border-radius: 16px !important;
  }
  .stats{
    gap: 10px !important;
  }
  .badge{
    padding: 7px 11px !important;
    font-size: 12px !important;
  }
  .applybar{
    gap: 12px !important;
    margin-top: 14px !important;
  }

  .list{
    padding: 18px 18px 22px !important;
    display: grid !important;
    gap: 14px !important;
    align-content: start !important;
  }
  .list .card:not(.empty-state-card){
    display: grid !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    gap: 16px !important;
    min-height: 224px !important;
    height: auto !important;
    max-height: none !important;
    padding: 16px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
    box-shadow: 0 18px 40px rgba(2,6,23,.09), 0 4px 12px rgba(2,6,23,.04) !important;
  }
  .list .card .thumb{
    width: 128px !important;
    height: 128px !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 30px rgba(15,23,42,.10) !important;
    align-self: start !important;
  }
  .list .card .thumb .type-pill{
    left: 10px !important;
    right: auto !important;
    bottom: 10px !important;
    border-radius: 999px !important;
  }
  .list .card .meta{
    gap: 8px !important;
    grid-template-rows: auto auto auto auto minmax(20px,auto) auto !important;
  }
  .list .card .card-price{
    font-size: 20px !important;
    line-height: 1.02 !important;
  }
  .list .card .meta .t{
    font-size: 15px !important;
    line-height: 1.32 !important;
    min-height: 2.64em !important;
    max-height: none !important;
  }
  .list .card .card-subline{
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
  }
  .list .card .card-desc{
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    min-height: 2.7em !important;
    max-height: 2.7em !important;
    line-height: 1.35 !important;
  }
  .list .card .info-row{
    gap: 8px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .list .card .info-row .info{
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
  }
  .list .card .actions{
    gap: 10px !important;
    margin-top: 4px !important;
  }
  .list .card .actions .btn{
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    padding: 9px 12px !important;
  }

  .leaflet-popup-content-wrapper{
    border-radius: 24px !important;
    box-shadow: 0 26px 60px rgba(2,6,23,.22) !important;
  }
  .auvia-popup{
    width: 360px !important;
    max-width: min(360px, calc(100vw - 64px)) !important;
    padding: 12px !important;
  }
  .auvia-card{
    border-radius: 20px !important;
  }
  .auvia-card .head{
    padding: 14px 14px 10px !important;
  }
  .auvia-card .title{
    font-size: 16px !important;
    line-height: 1.32 !important;
  }
  .popup-price{
    font-size: 20px !important;
    margin-bottom: 7px !important;
  }
  .popup-subline{
    font-size: 12.5px !important;
    line-height: 1.42 !important;
    margin-bottom: 10px !important;
  }
  .popup-facts{
    gap: 8px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
  }
  .popup-fact{
    min-height: 30px !important;
    padding: 0 11px !important;
  }
  .auvia-card .media{
    padding: 0 14px !important;
  }
  .auvia-card img{
    height: 196px !important;
    border-radius: 18px !important;
  }
  .auvia-card .actions{
    padding: 12px 14px 14px !important;
    gap: 10px !important;
  }
  .auvia-card .actions .auvia-a{
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    padding: 9px 12px !important;
  }

  .leaflet-top.leaflet-right,
  .leaflet-bottom.leaflet-right{
    right: 18px !important;
  }
  .leaflet-top.leaflet-left,
  .leaflet-bottom.leaflet-left{
    left: 18px !important;
  }
}

@media (min-width: 1400px){
  .drawer{
    width: min(460px, 32vw) !important;
  }
  .list{
    padding: 20px 20px 24px !important;
  }
  .list .card:not(.empty-state-card){
    grid-template-columns: 136px minmax(0, 1fr) !important;
    gap: 18px !important;
    min-height: 232px !important;
    padding: 18px !important;
  }
  .list .card .thumb{
    width: 136px !important;
    height: 136px !important;
  }
  .auvia-popup{
    width: 376px !important;
    max-width: min(376px, calc(100vw - 72px)) !important;
  }
}



/* ===== Round 5 micro polish + final QA ===== */
:root{
  --auvia-ring: 0 0 0 3px rgba(217,181,106,.22), 0 10px 24px rgba(11,30,52,.10);
}

button,
a.btn,
.btn,
.auvia-a,
.card,
.search,
.filters .field input,
select,
textarea,
.leaflet-popup-content-wrapper,
.modal-card,
.social-row a,
.icon-btn,
.lang-btn,
.logo-btn{
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease, background-color .18s ease, opacity .18s ease;
}

button:focus-visible,
a.btn:focus-visible,
.btn:focus-visible,
.auvia-a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.leaflet-bar a:focus-visible,
.icon-btn:focus-visible,
.lang-btn:focus-visible,
.logo-btn:focus-visible,
.social-row a:focus-visible{
  outline: none !important;
  box-shadow: var(--auvia-ring) !important;
}

button:disabled,
.btn:disabled,
.auvia-a[aria-disabled="true"],
input:disabled,
select:disabled,
textarea:disabled{
  cursor: not-allowed !important;
  opacity: .62;
  box-shadow: none !important;
}

.status-card > div{
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.list .card.empty-state-card > div{
  gap: 6px;
}

.search input::placeholder,
textarea::placeholder,
.filters .field input::placeholder{
  color: #728197;
}

#addListingModal .input-group label,
#addListingModal .field label{
  letter-spacing: .01em;
}

@media (hover: hover) and (pointer: fine){
  .list .card:not(.empty-state-card):hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(2,6,23,.10), 0 6px 18px rgba(2,6,23,.06) !important;
  }
  .btn:hover,
  .auvia-a:hover,
  .icon-btn:hover,
  .lang-btn:hover,
  .logo-btn:hover,
  .social-row a:hover{
    transform: translateY(-1px);
  }
  .leaflet-popup-content-wrapper:hover{
    box-shadow: 0 16px 36px rgba(2,6,23,.16) !important;
  }
}

html[dir="rtl"] .status-card > div,
html[dir="rtl"] #addListingModal .input-group label,
html[dir="rtl"] #addListingModal .field label{
  text-align: right;
}

@media (max-width: 640px){
  .status-card > div{
    border-radius: 20px;
  }
  .search input::placeholder,
  textarea::placeholder,
  .filters .field input::placeholder{
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== Business Round 1: submit flow + conversion polish ===== */
#addListingModal .modal-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
#addListingModal .modal-trust-badge{padding:8px 10px;border-radius:999px;background:linear-gradient(180deg, rgba(215,181,109,.16), rgba(215,181,109,.08));border:1px solid rgba(215,181,109,.28);font-size:11px;font-weight:850;color:#0b1e34;}
#addListingModal .field-help{font-size:11px;line-height:1.45;color:rgba(12,20,36,.64);font-weight:700;margin-top:2px;}
#addListingModal .review-note{padding:12px 14px;border-radius:16px;background:linear-gradient(180deg, rgba(11,30,52,.05), rgba(215,181,109,.08));border:1px solid rgba(215,181,109,.22);color:#334155;}
#addListingModal .review-promise{margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(15,118,110,.08);border:1px solid rgba(15,118,110,.18);color:#0f766e;font-size:12px;font-weight:800;}
#addListingModal #addSubmit{min-width:170px;}
#addListingModal #addSubmitStatus{font-size:12px;line-height:1.5;font-weight:800;}
.list .card .actions .btn.primary, .auvia-card .actions .auvia-a:first-child{letter-spacing:.01em;}
@media (max-width: 700px){
  #addListingModal .modal-trust{gap:6px;}
  #addListingModal .modal-trust-badge{width:100%;border-radius:14px;}
  #addListingModal #addSubmit{min-width:0;}
}
html[dir="rtl"] #addListingModal .modal-trust{justify-content:flex-start;}
html[dir="rtl"] #addListingModal .field-help, html[dir="rtl"] #addListingModal .review-promise, html[dir="rtl"] #addListingModal .review-note{text-align:right;}

/* ===== Add Listing UX cleanup ===== */
#addListingModal #addListingForm{
  display:flex;
  flex-direction:column;
  gap:14px;
}
#addListingModal .form-section{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(12,20,36,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,248,251,.96));
  box-shadow: 0 10px 28px rgba(15,23,42,.05);
}
#addListingModal .form-section + .form-section{ margin-top: 0; }
#addListingModal .form-section-head{
  margin-bottom: 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
#addListingModal .form-section-kicker{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0b1e34;
}
#addListingModal .form-section-sub{
  font-size: 12px;
  line-height: 1.45;
  color: rgba(12,20,36,.64);
  font-weight: 700;
}
#addListingModal .form-section .grid2,
#addListingModal .form-section .grid3{
  gap: 12px;
}
#addListingModal .form-section .field + .field,
#addListingModal .form-section .grid2 + .grid2,
#addListingModal .form-section .grid3 + .grid2,
#addListingModal .form-section .grid2 + .grid3,
#addListingModal .form-section .grid3 + .grid3,
#addListingModal .form-section .grid2 + .field,
#addListingModal .form-section .grid3 + .field,
#addListingModal .form-section .field + .grid2,
#addListingModal .form-section .field + .grid3{
  margin-top: 12px;
}
#addListingModal .form-section-review .review-note,
#addListingModal .form-section-review .review-promise{
  margin-top: 12px;
}
#addListingModal #addWarnings{
  position: sticky;
  top: 58px;
  z-index: 20;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(245,158,11,.12), rgba(251,191,36,.08)) !important;
  border: 1px solid rgba(217,119,6,.22) !important;
  color: #7c2d12 !important;
  box-shadow: 0 10px 26px rgba(245,158,11,.12);
  backdrop-filter: blur(10px);
}
#addListingModal #addWarnings .warning-title{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9a3412;
}
#addListingModal #addWarnings .warning-sub{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(124,45,18,.82);
  font-weight: 700;
}
#addListingModal #addWarnings .warning-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
#addListingModal #addWarnings .warning-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(217,119,6,.18);
  color:#7c2d12;
  font-size:11px;
  font-weight:900;
  line-height:1.1;
}
#addListingModal #addWarnings .warning-pill::before{
  content:'•';
  font-size:14px;
  line-height:1;
  color:#ea580c;
}
#addListingModal .field[data-optional="1"] label,
#addListingModal .field.is-optional label{
  color: rgba(12,20,36,.72);
}
#addListingModal .field[data-optional="1"] select,
#addListingModal .field[data-optional="1"] input,
#addListingModal .field.is-optional select,
#addListingModal .field.is-optional input{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.92));
}
@media (max-width: 720px){
  #addListingModal #addListingForm{ gap:12px; }
  #addListingModal .form-section{ padding:12px; border-radius:16px; }
  #addListingModal .form-section-sub{ font-size: 11px; }
  #addListingModal #addWarnings{ top: 52px; padding: 11px 12px !important; }
  #addListingModal #addWarnings .warning-list{ gap:6px; }
  #addListingModal #addWarnings .warning-pill{ max-width: 100%; }
}
html[dir="rtl"] #addListingModal .form-section-head,
html[dir="rtl"] #addListingModal #addWarnings,
html[dir="rtl"] #addListingModal #addWarnings .warning-sub{
  text-align:right;
}
html[dir="rtl"] #addListingModal #addWarnings .warning-list{
  justify-content:flex-start;
}


/* ===== Add Listing modal single-scroll fix ===== */
#addListingModal{
  display:none;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  align-items:flex-start !important;
  justify-content:center !important;
  -webkit-overflow-scrolling:touch;
}
#addListingModal .modal-card{
  display:block !important;
  width:min(860px, calc(100vw - 32px)) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:16px auto !important;
  overflow:visible !important;
}
#addListingModal .modal-head{
  position:sticky;
  top:0;
  z-index:12;
  margin-bottom:0 !important;
  padding:18px 18px 12px !important;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(12,20,36,.06);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#addListingModal .modal-scroll{
  display:block !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  overflow:visible !important;
  padding:18px 18px 22px !important;
}
#addListingModal form#addListingForm{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  padding:0 0 6px !important;
}
#addListingModal form#addListingForm .actions.actions-top{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#addListingModal form#addListingForm .actions.actions-top .btn-ghost,
#addListingModal form#addListingForm .actions.actions-top .btn-primary{
  min-height:44px;
}
#addListingModal .form-section,
#addListingModal #addWarnings{
  scroll-margin-top:96px;
}
@media (max-width: 720px){
  #addListingModal{ padding:10px !important; }
  #addListingModal .modal-card{
    width:calc(100vw - 20px) !important;
    margin:10px auto !important;
    border-radius:20px !important;
  }
  #addListingModal .modal-head{
    padding:14px 14px 10px !important;
  }
  #addListingModal .modal-scroll{
    padding:14px 14px 18px !important;
  }
  #addListingModal form#addListingForm .actions.actions-top{
    flex-direction:column-reverse;
    align-items:stretch;
  }
  #addListingModal form#addListingForm .actions.actions-top .btn-ghost,
  #addListingModal form#addListingForm .actions.actions-top .btn-primary{
    width:100%;
  }
}


/* ===== Add Listing modal sticky controls cleanup ===== */
#addListingModal .modal-head{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  border-bottom: 0 !important;
}
#addListingModal .modal-trust{
  overflow: visible !important;
}
#addListingModal form#addListingForm .actions.actions-top{
  position: sticky !important;
  top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(12,20,36,.08) !important;
  box-shadow: 0 8px 24px rgba(2,6,23,.08) !important;
  backdrop-filter: blur(10px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.02) !important;
}
#addListingModal form#addListingForm .actions.actions-top .btn-ghost,
#addListingModal form#addListingForm .actions.actions-top .btn-primary{
  min-height: 44px !important;
}
#addListingModal #addWarnings{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  margin: 0 0 12px 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#addListingModal #addWarnings .warning-title{
  font-size: 11px !important;
  letter-spacing: .04em !important;
}
#addListingModal #addWarnings .warning-sub{
  margin-top: 6px !important;
}
#addListingModal #addWarnings .warning-list{
  margin-top: 8px !important;
}
#addListingModal .form-section,
#addListingModal #addWarnings{
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 98px) !important;
}
@media (max-width: 720px){
  #addListingModal form#addListingForm .actions.actions-top{
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  }
  #addListingModal form#addListingForm .actions.actions-top{
    flex-direction: row !important;
    align-items: stretch !important;
  }
  #addListingModal form#addListingForm .actions.actions-top .btn-ghost{
    flex: 0 0 34% !important;
    width: auto !important;
  }
  #addListingModal form#addListingForm .actions.actions-top .btn-primary{
    flex: 1 1 auto !important;
    width: auto !important;
  }
  html[dir="rtl"] #addListingModal form#addListingForm .actions.actions-top{
    flex-direction: row-reverse !important;
  }
}


/* ===== Launch QA polish: image fallbacks, photo preview, floating CTA spacing ===== */
.thumb .thumb-media,
.auvia-card .media.media-photo{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(12,20,36,.08), rgba(215,181,109,.16));
}
.thumb .thumb-media img,
.auvia-card .media.media-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb .thumb-media.is-empty::after,
.auvia-card .media.media-photo.is-empty::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 28%),
    linear-gradient(135deg, rgba(12,20,36,.06), rgba(215,181,109,.18));
}
.thumb .thumb-media.is-empty::before,
.auvia-card .media.media-photo.is-empty::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  border: 1px solid rgba(12,20,36,.12);
  background: rgba(255,255,255,.7);
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
}
.auvia-card .media.media-photo{
  height: min(240px, 34vh);
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,.10);
}
@media (max-width: 520px){
  .auvia-card .media.media-photo{ height: min(220px, 32vh); }
}

.file-preview{
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(12,20,36,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
}
.file-preview[hidden]{ display:none !important; }
.file-preview-thumb{
  width: 76px;
  height: 76px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(12,20,36,.08), rgba(215,181,109,.16));
  border: 1px solid rgba(17,24,39,.08);
}
.file-preview-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.file-preview-meta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.file-preview-name{
  font-size: 13px;
  font-weight: 800;
  color: #0b1e34;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.file-preview-note{
  font-size: 11px;
  color: #64748b;
}
.file-preview-clear{
  white-space: nowrap;
  min-height: 40px;
}
@media (max-width: 640px){
  .file-preview{
    grid-template-columns: 68px minmax(0, 1fr);
  }
  .file-preview-clear{
    grid-column: 1 / -1;
    width: 100%;
  }
}

body.install-cta-visible .clear-fab{
  bottom: 148px;
}
@media (max-width: 900px){
  body.install-cta-visible .clear-fab{
    bottom: 140px;
  }
}

/* ===== Final fit fix: desktop drawer/card CTAs + popup media fill ===== */
@media (min-width: 1024px){
  .drawer{
    width: min(430px, 34vw) !important;
  }

  .list{
    padding: 18px 18px 24px !important;
  }

  .list .card:not(.empty-state-card){
    grid-template-columns: 120px minmax(0, 1fr) !important;
    min-height: 222px !important;
    max-height: 222px !important;
  }

  .list .card .thumb{
    width: 120px !important;
    height: 120px !important;
  }

  .list .card .actions{
    gap: 10px !important;
  }

  .list .card .actions .btn{
    min-height: 44px !important;
    height: auto !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

.auvia-card .media.media-photo{
  aspect-ratio: 16 / 10;
  height: auto !important;
  min-height: 0 !important;
}

.auvia-card .media.media-photo img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  display: block !important;
}

/* ===== Hotfix: desktop drawer width + result CTA fit ===== */
@media (min-width: 1024px){
  .drawer{
    width: min(476px, 36vw) !important;
  }

  .list{
    padding: 18px 18px 26px !important;
  }

  .list .card:not(.empty-state-card){
    grid-template-columns: 122px minmax(0, 1fr) !important;
    min-height: 230px !important;
    height: auto !important;
    max-height: none !important;
    align-items: start !important;
  }

  .list .card .thumb{
    width: 122px !important;
    height: 122px !important;
    align-self: start !important;
  }

  .list .card .meta{
    gap: 8px !important;
    grid-template-rows: auto auto auto auto minmax(24px, auto) auto !important;
  }

  .list .card .actions{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 6px !important;
    align-self: end !important;
  }

  .list .card .actions .btn{
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (min-width: 1024px) and (max-width: 1240px){
  .drawer{
    width: min(500px, 39vw) !important;
  }
}

@media (min-width: 1400px){
  .drawer{
    width: min(500px, 34vw) !important;
  }
}