/* ===========================
   Trip Sicily – MAP (MapLibre)
   CSS pulito e unificato (aggiornato)
   =========================== */

/* ---- Viewport & Canvas ---- */
.map-viewport{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  height: 820px;                 /* 680–700px per più compatta */
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
}
#map{ height:100%; width:100%; border-radius:16px; }
.maplibregl-canvas{ touch-action: pan-y pinch-zoom; }

@media (max-width:768px){
  .map-viewport{ height:62vh; width:94%; max-width:none; }
}

/* ===== Full-bleed ===== */
html,body{ overflow-x:hidden; }
.map-viewport.full-bleed{
  position:relative; width:100vw; max-width:100vw;
  left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  background:transparent; height:auto!important; overflow:visible;
}
.map-viewport.full-bleed #map{
  width:100%; height:900px!important; border-radius:0;
  box-shadow:0 20px 48px rgba(2,8,23,.08); overflow:hidden;
}
.maplibregl-ctrl{ z-index:5; }

/* ===========================
   Etichette città (dot + label)
   =========================== */
.city-poi{ position:relative; transform:translate(-50%,-50%); user-select:none; cursor:pointer; }
.city-poi .dot{
  position:absolute; left:50%; top:50%;
  width:6px; height:6px; transform:translate(-50%,-50%);
  background:#fff; border:2px solid #fff; border-radius:50%;
}
.city-poi .label{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  color:#fff; font:700 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  white-space:nowrap; padding:6px 8px; border-radius:6px;
  text-shadow:0 2px 4px rgba(0,0,0,.85),0 0 1px rgba(0,0,0,.85);
  transition:transform .2s ease;
}
.city-poi:hover .label{ transform:translateX(-50%) scale(1.12); }

/* ===========================
   Popup città (menu categorie)
   =========================== */
.city-popup h3{ margin:0 0 6px; font-size:16px; color:#0f172a; }
.city-popup .chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.city-popup .chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:8px 12px; border-radius:999px; font-weight:600; text-decoration:none;
  background:#e0f2fe; color:#075985; border:1px solid #bae6fd;
  transition:background .2s ease, transform .2s ease;
}
.city-popup .chip:hover{ background:#bae6fd; transform:translateY(-1px); }

.partner-near{ filter:drop-shadow(0 0 6px rgba(14,165,233,.7)); }

/* ===========================
   Popup partner / POI – MapLibre
   =========================== */
.maplibregl-popup.modern-popup .maplibregl-popup-content{
  background:#fff; border-radius:12px; padding:12px 14px;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-shadow:0 10px 28px rgba(0,0,0,.15); border:none;
}
.maplibregl-popup.modern-popup .maplibregl-popup-close-button{ color:#94a3b8; font-size:18px; }

.ts-popup-title{ margin:0; font-size:16px; font-weight:650; color:#0f172a; }
.ts-popup-sub  { margin:6px 0 0; color:#475569; font-size:13px; }
.ts-popup-row  { margin-top:6px; color:#0f172a; font-size:13px; }
.ts-popup-foot { margin-top:6px; font-size:15px; font-weight:650; color:#0ea5e9; letter-spacing:.3px; }

.maplibregl-popup-content .btn-inline{
  display:inline-block; padding:6px 10px; border-radius:999px; font-weight:600; text-decoration:none; margin-right:8px;
}
.btn-primary-inline{ background:#0ea5e9; color:#fff; }
.btn-outline-inline{ border:1px solid #0ea5e9; color:#0ea5e9; background:#fff; }

/* ===========================
   Marker a goccia (DOM) per pilastri
   =========================== */
.ts-pin{
  --pin:#6b7280;
  position:relative; width:18px; height:18px;
  border-radius:50% 50% 50% 0;
  background:linear-gradient(180deg, var(--pin), color-mix(in oklab, var(--pin) 80%, black));
  transform:rotate(-45deg);
  border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.ts-pin::after{
  content:""; position:absolute; top:2px; left:2px; width:35%; height:35%;
  border-radius:50%; background:rgba(255,255,255,.35); transform:rotate(45deg);
}

/* ===========================
   Map Search Control (facoltativo)
   =========================== */
.maplibregl-ctrl.ml-search-ctl{
  background:#fff; border-radius:16px; padding:8px; box-shadow:0 12px 28px rgba(2,8,23,.10);
  min-width:220px;
}
.ml-search-input{
  width:100%; border:0; outline:0; padding:6px 8px; font-size:14px; border-radius:10px;
  background:transparent; color:#0f172a;
}
.ml-search-list{ margin-top:6px; display:grid; gap:6px; }
.ml-search-list button{
  text-align:left; border:0; padding:8px; border-radius:10px; background:#f1f5f9; cursor:pointer;
}
.ml-search-list button:hover{ background:#e9eef6; }

/* ===========================
   Card "Seleziona Servizi" + Select (drop-up intelligente)
   =========================== */
.maplibregl-ctrl,
.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-group{ overflow:visible!important; }

.ts-servizi-ctl.ts-card{
  background:#fff; border-radius:16px; box-shadow:0 12px 28px rgba(2,8,23,.10);
  width:260px; padding:12px; pointer-events:auto;
  font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; z-index:50;
  padding-bottom:6px; /* spazio per il drop-up */
}
.ts-servizi-title{ font-weight:700; color:#0f172a; margin-bottom:8px; }

.ts-select{ position:relative; }
.ts-select-btn{
  width:100%; display:flex; align-items:center; gap:8px;
  border:1px solid #e5e7eb; border-radius:12px;
  background:#f9fafb; color:#0f172a;
  padding:10px 12px; cursor:pointer;
}
.ts-select-btn:hover{ background:#f3f4f6; }
/* stato aperto: feedback visivo */
.ts-select.open .ts-select-btn{ background:#eef2f7; border-color:#dbe2ea; }

.ts-select-menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  z-index:10000; /* sempre sopra */
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 14px 28px rgba(2,8,23,.12);
  padding:6px; display:none; gap:4px; max-height:280px; overflow:auto;
}
/* drop-up (default in bottom-left) */
.ts-card.ts-drop-up .ts-select-menu{ top:auto; bottom:calc(100% + 8px); }
/* variante esplicita drop-down (se forzata via JS) */
.ts-card.ts-drop-down .ts-select-menu{ top:calc(100% + 6px); bottom:auto; }

.ts-option{
  width:100%; display:flex; align-items:center; gap:8px;
  border:0; background:#fff; border-radius:10px; padding:10px; cursor:pointer; text-align:left;
}
.ts-option:hover{ background:#f8fafc; }
.ts-dot{
  width:10px; height:10px; border-radius:999px; background:var(--dot,#94a3b8);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--dot,#94a3b8) 18%, transparent);
}
.ts-label{ font-weight:600; }

.ts-select.open .ts-select-menu{ display:grid; }

.ts-services{
  margin-top:10px; display:grid; gap:8px;
  max-height:240px; overflow:auto;          /* scroll se tanti */
}

/* Toggle switch */
.ts-switch{ display:flex; align-items:center; gap:10px; user-select:none; }
.ts-switch input{ position:absolute; opacity:0; pointer-events:none; }
.ts-switch .slider{
  width:42px; height:24px; border-radius:999px; background:#e5e7eb; position:relative;
  transition:background .2s ease; box-shadow:inset 0 0 0 1px #d1d5db;
}
.ts-switch .slider::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:transform .2s ease;
}
.ts-switch input:checked + .slider{
  background:var(--accent,#0ea5e9); box-shadow:inset 0 0 0 1px var(--accent,#0ea5e9);
}
.ts-switch input:checked + .slider::after{ transform:translateX(18px); }
.ts-switch .label{ font-weight:600; color:#0f172a; line-height:1.2; }

@media (max-width:768px){
  .ts-servizi-ctl.ts-card{ width:280px; }
}