/* ═══════════════════════════════════════════
   Concreto Immobili Search — search.css v1.7.2
   Tutte le classi usano prefisso cis- per
   evitare conflitti con il tema YooTheme
═══════════════════════════════════════════ */

/* ── TOKENS ── */
.cis-app {
  --gold:    #A38151;
  --gold-lt: #C4A06A;
  --dark:    #242427;
  --darkbr:  #34312D;
  --warm:    #F6F0EB;
  --offwhite:#FAF7F4;
  --textd:   #2B2825;
  --textm:   #6B6560;
  --border:  #E4DDD5;
  --red:     #C23C49;

  --fb-h:      58px;
  --pills-h:   40px;
  --results-w: 420px;
  --mob-tabs-h:46px;
  --mob-pills-h:40px;

  /*
   * Altezza: viewport meno header YooTheme.
   * Sovrascrivibile: :root { --cis-header-h: 80px; }
   */
  --cis-header-h: 68px;

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--textd);
  background: var(--warm);
}

/* RESET scoped al plugin */
.cis-app *, .cis-app *::before, .cis-app *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.cis-app img { display: block; max-width: 100%; }
.cis-app a   { color: inherit; text-decoration: none; }
.cis-app button { font-family: inherit; cursor: pointer; }

/* ── LAYOUT ── */
.cis-app {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--cis-header-h));
  min-height: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── FILTER BAR ── */
.cis-filterbar {
  flex-shrink: 0;
  height: var(--fb-h);
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  overflow-x: auto;
  z-index: 100;
}
.cis-filterbar::-webkit-scrollbar { height: 0; }

.cis-fb-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.cis-fb-search-icon {
  position: absolute;
  left: 10px;
  width: 14px; height: 14px;
  color: var(--textm);
  pointer-events: none;
}
.cis-fb-city {
  background: var(--offwhite);
  border: 1px solid var(--border);
  color: var(--textd);
  padding: 7px 12px 7px 32px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  min-width: 160px;
}
.cis-fb-city:focus { border-color: var(--gold); }

.cis-fb-label {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--textm); white-space: nowrap; flex-shrink: 0; margin-right: 4px;
}
.cis-fb-select {
  appearance: none; background: var(--offwhite); border: 1px solid var(--border);
  color: var(--textd); padding: 7px 28px 7px 10px; font-size: 13px;
  font-family: inherit; flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%236B6560'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; outline: none;
}
.cis-fb-select:focus { border-color: var(--gold); }
.cis-fb-range {
  display: flex; align-items: center; gap: 4px;
  background: var(--offwhite); border: 1px solid var(--border);
  padding: 0 10px; height: 34px; flex-shrink: 0;
}
.cis-fb-range input {
  border: none; background: transparent; font-size: 13px;
  font-family: inherit; color: var(--textd); outline: none; width: 80px;
}
.cis-fb-range input::placeholder { color: var(--textm); }
.cis-fb-sep { color: var(--textm); font-size: 12px; }
.cis-fb-divider { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }
.cis-fb-apply {
  background: var(--gold); color: #fff; border: none;
  padding: 8px 18px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  flex-shrink: 0; margin-left: auto; white-space: nowrap; transition: background .2s;
}
.cis-fb-apply:hover { background: var(--darkbr); }
.cis-fb-reset {
  background: none; border: 1px solid var(--border); color: var(--textm);
  padding: 7px 12px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  flex-shrink: 0; white-space: nowrap;
}

/* ── PILLS BAR ── */
.cis-pillsbar {
  flex-shrink: 0;
  height: var(--pills-h);
  background: var(--offwhite);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  overflow-x: auto;
  z-index: 90;
}
.cis-pillsbar::-webkit-scrollbar { display: none; }
.cis-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; font-size: 11px; font-weight: 500;
  white-space: nowrap; flex-shrink: 0; cursor: pointer; border-radius: 2px;
}
.cis-pill-a { background: var(--gold); color: #fff; }
.cis-pill-n { background: #fff; color: var(--textm); border: 1px solid var(--border); }
.cis-pill-rm { opacity: .65; font-size: 10px; margin-left: 2px; }

/* ── MAIN LAYOUT ── */
.cis-layout {
  flex: 1;
  display: grid;
  grid-template-columns: var(--results-w) 1fr;
  overflow: hidden;
}

/* ── RESULTS PANEL ── */
.cis-results-panel {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden; background: var(--warm);
}
.cis-rp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--warm); flex-shrink: 0;
}
.cis-rp-count { font-size: 12px; color: var(--textm); }
.cis-rp-count strong { color: var(--textd); font-weight: 600; padding-right: 5px; }
.cis-rp-sort { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--textm); }
.cis-rp-sort select {
  border: none; background: transparent; color: var(--gold); font-weight: 600;
  font-size: 12px; font-family: inherit; outline: none; appearance: none; cursor: pointer;
}
.cis-cards-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cis-cards-scroll::-webkit-scrollbar { width: 3px; }
.cis-cards-scroll::-webkit-scrollbar-thumb { background: var(--border); }
.cis-cards-list { padding: 10px; display: flex; flex-direction: column; gap: 8px; }

/* ── PROPERTY CARD ── */
.cis-card {
  background: #fff; border: 1px solid var(--border);
  display: grid; grid-template-columns: 128px 1fr;
  overflow: hidden; cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
  position: relative;
}
.cis-card:hover { border-color: var(--gold); box-shadow: 0 2px 12px rgba(163,129,81,.1); }
.cis-card.active { border-color: var(--gold); box-shadow: 0 2px 16px rgba(163,129,81,.15); }
.cis-card.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold);
}

.cis-card-thumb { overflow: hidden; min-height: 100px; position: relative; }
.cis-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cis-card:hover .cis-card-thumb img { transform: scale(1.05); }

/* ── BADGE STATO — classi proprie del plugin, no conflitti con tema ── */
.cis-badge {
  position: absolute;
  top: 7px; left: 7px;
  padding: 3px 8px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  line-height: 1.3;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* In vendita: sfondo rosso, testo bianco */
.cis-badge-vendita { background: var(--red); color: #fff; border-color: var(--red); }
/* Venduto: sfondo bianco, bordo rosso, testo rosso */
.cis-badge-venduto { background: #fff; color: var(--red); border-color: var(--red); }
/* In affitto: sfondo nero, testo bianco */
.cis-badge-affitto { background: #000; color: #fff; border-color: #000; }
/* Locato: sfondo bianco, bordo nero, testo nero */
.cis-badge-locato  { background: #fff; color: #000; border-color: #000; }

/* ── CARD BODY ── */
.cis-card-body { padding: 10px 10px 9px; display: flex; flex-direction: column; gap: 3px; }
.cis-card-zone {
  font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--gold); display: flex; align-items: center; gap: 3px;
}
.cis-card-zone svg { width: 9px; height: 9px; flex-shrink: 0; }
.cis-card-title { font-size: 13.5px; font-weight: 500; color: var(--darkbr); line-height: 1.3; }
.cis-card-price { font-size: 15px; font-weight: 700; color: var(--textd); margin-top: 2px; }
.cis-card-meta {
  display: flex; gap: 8px; font-size: 10.5px; color: var(--textm);
  border-top: 1px solid var(--border); padding-top: 6px; margin-top: 3px;
}

/* ── LOADER ── */
.cis-loader { display: flex; justify-content: center; padding: 20px; }
.cis-loader-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border); border-top-color: var(--gold);
  border-radius: 50%; animation: cisSpin .7s linear infinite;
}
@keyframes cisSpin { to { transform: rotate(360deg); } }

/* ── MAP PANEL ── */
.cis-map-panel { position: relative; overflow: hidden; }
.cis-map-panel #cis-map { width: 100%; height: 100%; }
.cis-map-count {
  position: absolute; top: 14px; left: 14px; z-index: 20;
  background: var(--dark); color: #fff; font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 2px; pointer-events: none;
}

/* ── DESKTOP MAP POPUP ── */
/* Posizionato su .cis-map-panel, non su #cis-map, per evitare overflow:hidden */
.cis-map-popup {
  position: absolute;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--border);
  width: 240px;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  display: none;
  flex-direction: column;
  overflow: hidden;
  top: 20px; left: 20px;
}
.cis-map-popup.open { display: flex; }
.cis-mp-img { height: 140px; overflow: hidden; position: relative; flex-shrink: 0; background: var(--border); }
.cis-mp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cis-mp-close {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.48); color: #fff; border: none;
  font-size: 12px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}
.cis-mp-body { padding: 10px 12px 12px; }
.cis-mp-zone { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.cis-mp-title { font-size: 14px; font-weight: 500; color: var(--darkbr); line-height: 1.3; margin-bottom: 6px; display: block; }
.cis-mp-title:hover { color: var(--gold); text-decoration:none ; }
.cis-mp-price { font-size: 15px; font-weight: 700; color: var(--textd); margin-bottom: 8px; }
.cis-mp-meta { display: flex; gap: 10px; font-size: 11px; color: var(--textm); border-top: 1px solid var(--border); padding-top: 8px; margin-bottom: 10px; }
.cis-mp-cta {
  display: block; text-align: center; background: var(--gold); color: #fff;
  font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; padding: 8px;
  transition: background .2s; font-weight: 900;
}
.cis-mp-cta:hover { background: var(--darkbr); color: #fff !important; text-decoration: none; }

/* ── CITY DROPDOWN — position:fixed per sfuggire all'overflow:hidden dei parent ── */
.cis-city-dropdown {
  position: fixed;        /* NON absolute — così non viene clippato da overflow:hidden */
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 9999;          /* sopra tutto */
  list-style: none;
  margin: 0; padding: 0;
  max-height: 220px;
  overflow-y: auto;
  min-width: 200px;
}
.cis-city-dropdown li { padding: 10px 14px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--border); }
.cis-city-dropdown li:last-child { border-bottom: none; }
.cis-city-dropdown li:hover { background: var(--offwhite); color: var(--gold); }

/* ── MOBILE TOGGLE BAR (hidden desktop) ── */
.cis-mob-togglebar { display: none; }
.cis-mob-pillsbar  { display: none; }

/* ── BOTTOM SHEET ── */
.cis-sheet-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.28); z-index: 700; }
.cis-sheet-overlay.open { display: block; }
.cis-bottom-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: #fff; border-radius: 14px 14px 0 0;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.cis-bottom-sheet.open { transform: translateY(0); }
.cis-bs-handle-wrap { padding: 10px 0 4px; display: flex; justify-content: center; flex-shrink: 0; }
.cis-bs-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; }

/* Immagine copertina — padding laterale + angoli arrotondati in alto */
.cis-bs-img {
  height: 195px; overflow: hidden; position: relative; flex-shrink: 0;
  padding-left: 10px; padding-right: 10px; margin-top: -5px;
}
.cis-bs-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-top-left-radius: 5px; border-top-right-radius: 5px;
}

/* Badge nel bottom sheet — stesse classi cis-badge */
.cis-bs-badge {
  position: absolute; top: 10px; left: 20px;
  padding: 4px 10px; font-size: 10px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  border-radius: 2px; border: 1px solid transparent;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.cis-bs-close {
  position: absolute; top: 10px; right: 20px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; border: none;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.cis-bs-body { padding: 16px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Zona/quartiere — oro come nella lista */
.cis-bs-zone {
  font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
  display: flex; align-items: center; gap: 4px;
}

/* Titolo — colore scuro identico alla lista (.cis-card-title → var(--darkbr)) */
.cis-bs-title {
  font-size: 20px; font-weight: 500; color: #000;
  line-height: 1.25; margin-bottom: 8px; display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Prezzo — stesso peso/colore della lista (.cis-card-price) */
.cis-bs-price {
  font-size: 18px; font-weight: 700; color: #000;
  margin-bottom: 12px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Meta dati — stesse dimensioni/colori della lista */
.cis-bs-meta {
  display: flex; gap: 16px; font-size: 14px; color: #000;
  border-top: 1px solid var(--border); padding-top: 10px; margin-bottom: 14px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cis-bs-cta {
  display: block; text-align: center; background: var(--gold); color: #fff;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 15px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cis-bs-cta:hover {
    text-decoration: none;
}
.cis-bs-cta:active { background: var(--darkbr); }
.cis-bs-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.cis-bs-nav-btn {
  display: flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); background: none;
  padding: 8px 14px; font-size: 12px; color: var(--textm); font-family: inherit;
}
.cis-bs-nav-btn:active { border-color: var(--gold); color: var(--gold); }
.cis-bs-nav-ct { font-size: 12px; color: var(--textm); }

/* ── FILTRI DRAWER (mobile) ── */
.cis-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 900; }
.cis-drawer-overlay.open { display: block; }
.cis-filters-drawer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 950;
  background: #fff; border-radius: 16px 16px 0 0;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cis-filters-drawer.open { transform: translateY(0); }

/* Handle bar */
.cis-dr-handle-wrap { padding: 10px 0 4px; display: flex; justify-content: center; flex-shrink: 0; }
.cis-dr-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; }

/* Header */
.cis-dr-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 0px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cis-dr-head-left { display: flex; align-items: center; gap: 10px; }
.cis-dr-title { font-size: 18px; font-weight: 500; color: #242427; letter-spacing: -.3px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.cis-dr-badge {
  background: #A38151; color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; letter-spacing: .5px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cis-dr-close {
  width: 32px; height: 32px; border: 1px solid var(--gold); background-color: #FDF8F2;
  border-radius: 50%; font-size: 16px; color: #000;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cis-dr-close:active { background: var(--border); }

/* Body — sezioni separate da divisori */
.cis-dr-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0;
}
.cis-dr-row {
  padding: 16px 20px 0 20px; border-bottom: 1px solid var(--border);
}
.cis-dr-row:last-child { border-bottom: none; }

/* Label */
.cis-dr-lbl {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--brown); font-weight: 500; margin-bottom: 10px; display: flex;
  align-items: center; gap: 8px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cis-dr-lbl-dot {
  width: 6px; height: 6px; background: #A38151; border-radius: 50%; flex-shrink: 0;
}

/* Select — sfondo caldo + bordo oro */
.cis-dr-select-wrap { position: relative; }
.cis-dr-select-wrap::after {
  content: ''; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid #6B6560; pointer-events: none;
}
.cis-dr-select {
  width: 100%; appearance: none;
  background: #FDF8F2; border: 1.5px solid #A38151; color: #2B2825;
  padding: 10px; font-size: 15px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-radius: 6px; outline: none; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cis-dr-select:focus { border-color: #242427; background: #fff; }

/* Range row */
.cis-dr-range-row { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; gap: 6px; }
.cis-dr-pfx { position: relative; }
.cis-dr-pfx-lbl {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--textm); pointer-events: none;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cis-dr-rinput {
  width: 100%; box-sizing: border-box;
  background: #FDF8F2; border: 1.5px solid #A38151; color: #2B2825;
  padding: 10px 10px 10px 30px; font-size: 15px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-radius: 6px; outline: none; transition: border-color .15s, background .15s;
}
.cis-dr-rinput.no-pfx { padding-left: 14px; }
.cis-dr-rinput:focus { border-color: #242427; background: #fff; }
.cis-dr-sep { text-align: center; color: var(--textm); font-size: 16px; }

/* Chips locali — stesso stile dei campi */
.cis-dr-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cis-dr-chip {
  padding: 10px 18px;
  border: 1.5px solid #A38151; background: #FDF8F2; color: #2B2825;
  font-size: 14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-radius: 6px; cursor: pointer; transition: all .15s; flex: 1;
}
.cis-dr-chip:active { background: #fff; }
.cis-dr-chip.on { border-color: #A38151; background: #A38151; color: #fff; font-weight: 500; }

/* Footer */
.cis-dr-foot {
  padding: 14px 20px; border-top: 1.5px solid var(--border);
  display: grid; grid-template-columns: 1fr 2fr; gap: 10px;
  flex-shrink: 0; background: #fff;
}
.cis-dr-reset {
  border: 1.5px solid var(--border); background: #fff; padding: 15px;
  font-size: 13px; color: var(--textm);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-radius: 6px; cursor: pointer; transition: border-color .15s, color .15s;
}
.cis-dr-reset:active { border-color: #A38151; color: #A38151; }
.cis-dr-apply {
  background: #242427; border: none; color: #fff; padding: 15px;
  font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-radius: 6px; cursor: pointer; transition: background .15s;
}
.cis-dr-apply:active { background: #A38151; }


/* ── FABs mobile ── */
.cis-fab {
  display: none; position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%); background: var(--dark); color: #fff; border: none;
  padding: 13px 24px; font-size: 13px; font-weight: 600; letter-spacing: 1px;
  font-family: inherit; border-radius: 28px; box-shadow: 0 4px 20px rgba(0,0,0,.28);
  align-items: center; gap: 8px; white-space: nowrap; z-index: 400;
  transition: opacity .2s, transform .2s; background-color: #000;
}
.cis-fab svg { width: 16px; height: 16px; }
.cis-fab-gone { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(12px); }

/* ── MOBILE TAB BAR ── */
.cis-mob-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--textm); background: none;
  border: none; border-bottom: 2px solid transparent;
}
.cis-mob-tab.on { color: var(--gold); border-bottom-color: var(--gold); }
.cis-mob-tab svg { width: 15px; height: 15px; }
.cis-mob-ct {
  width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.cis-mob-tab.on .cis-mob-ct { background: var(--gold); color: #fff; }
.cis-mob-tab:not(.on) .cis-mob-ct { background: var(--border); color: var(--textm); }
.cis-mob-div { width: 1px; background: var(--border); align-self: center; height: 22px; flex-shrink: 0; }
.cis-mob-filter-btn {
  display: flex; align-items: center; gap: 6px; padding: 0 14px;
  border-left: 1px solid var(--border); background: none;
  border-top: none; border-right: none; border-bottom: 2px solid transparent;
  font-size: 12px; font-weight: 500; color: var(--textm);
  flex-shrink: 0; font-family: inherit;
}
.cis-mob-filter-btn svg { width: 14px; height: 14px; }
.cis-mob-badge {
  background: var(--gold); color: #fff; width: 16px; height: 16px;
  border-radius: 50%; font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── EMPTY STATE ── */
.cis-empty { padding: 40px 20px; text-align: center; color: var(--textm); font-size: 14px; }
.cis-empty svg { width: 48px; height: 48px; color: var(--border); margin: 0 auto 16px; }

/* ══ RESPONSIVE ══ */
@media (max-width: 768px) {
  .cis-app {
    --cis-header-h: 52px;
  }
  .cis-filterbar { display: none; }
  .cis-pillsbar  { display: none; }

  .cis-mob-togglebar {
    display: flex;
    flex-shrink: 0;
    height: var(--mob-tabs-h);
    background: #fff;
    border-bottom: 1px solid var(--border);
    align-items: stretch;
    z-index: 100;
    margin-top: 90px;
  }
  .cis-mob-pillsbar {
    display: flex;
    flex-shrink: 0;
    height: var(--mob-pills-h);
    background: var(--offwhite);
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 8px; padding: 0 12px; overflow-x: auto;
    z-index: 90;
  }
  .cis-mob-pillsbar::-webkit-scrollbar { display: none; }

  .cis-layout { grid-template-columns: 1fr; }

  .cis-results-panel { display: none; }
  .cis-results-panel.mob-on { display: flex; }

  .cis-card { grid-template-columns: 1fr; cursor: pointer; }
  .cis-card-thumb { min-height: 180px; }
  .cis-card.active::before { width: 100%; height: 3px; bottom: auto; top: 0; left: 0; }

  /* Su mobile tutta la card è il link → nascondi il link "Vedi" ridondante */
  .cis-card-loc-link { display: none; }

  .cis-map-panel { display: none; }
  .cis-map-panel.mob-on { display: block; }

  .cis-map-popup { display: none !important; }

  .cis-fab { display: flex; }
}

/* ── AGGIUNTE v1.2 ── */

/* Badge nell'immagine del popup mappa */
.cis-mp-badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 8px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  border-radius: 2px; border: 1px solid transparent;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.3; z-index: 2;
}

/* Wrapper immagine popup */
.cis-mp-img-wrap {
  height: 180px; overflow: hidden;
  position: relative; flex-shrink: 0;
  background: var(--border);
}
/* Img dentro il wrap: riempie il box, ma il "soggetto" ancorato in basso-centro
   (es. per foto di immobili dove l'edificio sta in basso) */
.cis-mp-img-wrap .cis-mp-img-el {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Price row con link location allineato a destra */
.cis-card-price-row {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 8px;
  margin-top: 2px;
}
.cis-card-price { font-size: 15px; font-weight: 700; color: var(--textd); }
.cis-card-loc-link {
  font-size: 10px; color: var(--gold); white-space: nowrap;
  text-decoration: none; flex-shrink: 0;
}
.cis-card-loc-link:hover { text-decoration: none; }

/* Popup mappa price row */
.cis-mp-price-row {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 6px;
  margin-bottom: 8px;
}
.cis-mp-loc-link {font-size: 0px; color: var(--gold); white-space: nowrap; flex-shrink: 0;}
.cis-bs-loc-link,
.cis-mp-loc-link svg {display: none !important;}
.cis-mp-loc-link:hover { text-decoration: none; }

/* Bottom sheet price row */
.cis-bs-price-row {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 8px;
  margin-bottom: 12px;
}
.cis-bs-loc-link {
  font-size: 0px; color: var(--gold); white-space: nowrap; flex-shrink: 0;
}
.cis-bs-loc-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════
   v1.7.0 — Input città nel drawer mobile
   Replica lo stile del desktop (input con icona
   lente + dropdown), ma il dropdown è posizionato
   ASSOLUTAMENTE sotto l'input (non fixed) così
   segue lo scroll del drawer.
═══════════════════════════════════════════ */

/* Wrap input città nel drawer: posizione relativa per ancorare il dropdown */
.cis-dr-search-wrap {
  position: relative;
}

/* Icona lente dentro l'input (riusa pattern del desktop) */
.cis-dr-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--textm);
  pointer-events: none;
  z-index: 1;
}

/* Input città nel drawer: stesso look degli altri input del drawer, ma con padding per l'icona */
.cis-dr-city-input {
  width: 100%;
  box-sizing: border-box;
  background: #FDF8F2;
  border: 1.5px solid #A38151;
  color: #2B2825;
  padding: 10px 10px 10px 38px;
  font-size: 15px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-radius: 6px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.cis-dr-city-input:focus {
  border-color: #242427;
  background: #fff;
}

/*
 * Override del dropdown SOLO quando è dentro il drawer mobile.
 * Sul desktop resta position:fixed (calcolato da JS).
 * Qui lo vogliamo position:absolute sotto l'input, così segue lo
 * scroll del drawer e il width si adatta al wrap.
 */
.cis-filters-drawer .cis-city-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  max-height: 240px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
  border-radius: 6px;
  overflow-y: auto;
  z-index: 10;
}
.cis-filters-drawer .cis-city-dropdown li {
  padding: 12px 16px;
  font-size: 15px;
}
