/* ================================================
   mappa.css — PrenotaStile v1.0
   Layout full-screen mappa + pannello laterale
   ================================================ */

/* ---- Layout ---- */
.mappa-body {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mappa-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* ---- Topbar filtri ---- */
.mappa-topbar {
  height: 60px;
  background: rgba(10,10,10,.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 0 1.25rem;
  z-index: 10;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.mappa-topbar::-webkit-scrollbar { display: none; }
.mappa-topbar-brand {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: .25rem;
}
.mappa-topbar-brand span { color: var(--text); }
.mappa-divider-v { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }

/* Search input nel topbar */
.mappa-search {
  position: relative;
  flex-shrink: 0;
  width: 220px;
}
.mappa-search svg {
  position: absolute;
  left: .7rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.mappa-search input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .83rem;
  padding: .5rem .75rem .5rem 2rem;
  width: 100%;
  transition: border-color var(--transition);
}
.mappa-search input:focus { outline: none; border-color: var(--accent); }
.mappa-search input::placeholder { color: var(--text-muted); }

/* Filtri tipo */
.filter-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .875rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-input);
  font-size: .78rem; font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition);
}
.filter-chip:hover  { border-color: var(--border-hover); color: var(--text); }
.filter-chip.active { background: var(--accent-glow); border-color: rgba(201,169,110,.35); color: var(--accent); }

/* Btn localizzazione */
.btn-locate {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: all var(--transition);
}
.btn-locate:hover    { border-color: var(--accent); color: var(--accent); }
.btn-locate.locating { color: var(--accent); border-color: var(--accent); animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(201,169,110,.3); } 50% { box-shadow: 0 0 0 6px rgba(201,169,110,0); } }

/* ---- Mappa ---- */
#map {
  flex: 1;
  height: 100%;
  z-index: 1;
}

/* Override Leaflet per dark theme */
.leaflet-container { background: #111 !important; }
.leaflet-control-zoom a {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.leaflet-control-zoom a:hover { background: var(--bg-elevated) !important; }
.leaflet-popup-content-wrapper {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
}
.leaflet-popup-tip { background: var(--bg-card) !important; }
.leaflet-popup-close-button { color: var(--text-secondary) !important; }

/* Custom marker */
.marker-outer {
  position: relative;
  width: 32px; height: 32px;
}

.marker-verified-badge {
  position: absolute;
  top: -4px; right: -5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 0 6px rgba(201,169,110,.6);
  animation: verifiedPulse 2s ease-in-out infinite;
}

@keyframes verifiedPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(201,169,110,.5); }
  50%       { box-shadow: 0 0 10px rgba(201,169,110,.9); }
}
.marker-pulse-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(201,169,110,.22);
  transform: translate(-50%,-50%) scale(.5);
  animation: marker-ring 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes marker-ring {
  0%   { transform: translate(-50%,-50%) scale(.5); opacity:.85; }
  100% { transform: translate(-50%,-50%) scale(2.6); opacity:0; }
}
.map-marker {
  width: 32px; height: 32px;
  background: var(--bg-card);
  border: 2px solid var(--accent);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(201,169,110,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.map-marker svg { transform: rotate(45deg); color: var(--accent); }
.map-marker.selected {
  background: var(--accent); border-color: var(--accent-light);
  box-shadow: 0 4px 20px rgba(201,169,110,.6);
  transform: rotate(-45deg) scale(1.15);
}
.map-marker.selected svg { color: #0a0a0a; }

/* ---- Pannello laterale ---- */
.mappa-panel {
  width: 360px;
  flex-shrink: 0;
  height: 100%;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 5;
  overflow: hidden;
  transition: transform var(--transition-md);
}
.mappa-panel-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.mappa-panel-title { font-weight: 600; font-size: .9rem; }
.mappa-panel-count { font-size: .78rem; color: var(--text-muted); }
.mappa-panel-list  { flex: 1; overflow-y: auto; }

/* Card salone nel pannello */
.panel-salon-card {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
  display: flex; align-items: flex-start; gap: .875rem;
}
.panel-salon-card:hover    { background: var(--bg-elevated); }
.panel-salon-card.selected { background: var(--accent-glow); border-left: 2px solid var(--accent); padding-left: calc(1.25rem - 2px); }
.panel-salon-thumb {
  width: 62px; height: 62px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.panel-salon-thumb img { width: 100%; height: 100%; object-fit: cover; }
.panel-salon-info { flex: 1; min-width: 0; }
.panel-salon-type { font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-bottom: .2rem; }
.panel-salon-name { font-weight: 600; font-size: .88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-salon-addr { font-size: .75rem; color: var(--text-secondary); margin: .2rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-salon-meta { display: flex; align-items: center; gap: .625rem; margin-top: .35rem; }

/* Popup dettaglio sulla mappa */
.map-popup { min-width: 200px; }
.map-popup-name  { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.map-popup-type  { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-bottom: .5rem; }
.map-popup-meta  { font-size: .78rem; color: var(--text-secondary); margin-bottom: .75rem; }
.map-popup-stars { display: flex; align-items: center; gap: .3rem; margin-bottom: .75rem; }

/* ---- Toggle mobile pannello ---- */
.panel-toggle-btn {
  display: none;
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 20;
  padding: .6rem 1.5rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-full); font-size: .85rem; font-weight: 500;
  color: var(--text); box-shadow: var(--shadow-lg);
  cursor: pointer; white-space: nowrap;
  transition: all var(--transition);
}
.panel-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Empty state pannello ---- */
.panel-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem; text-align: center; color: var(--text-secondary);
}
.panel-empty-icon { font-size: 2rem; opacity: .35; margin-bottom: .875rem; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .mappa-panel {
    position: absolute;
    top: 0; right: 0;
    width: 100%; height: 60%;
    bottom: 0; top: auto;
    border-left: none; border-top: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
    z-index: 15;
  }
  .mappa-panel.open { transform: translateY(0); }
  .panel-toggle-btn { display: flex; align-items: center; gap: .5rem; }
  .mappa-search { width: 160px; }
}