/* Stili minimi per le parti aggiunte dalla versione statica.
   Font e colori di base vengono dal CSS originale del sito. */
:root {
  --ms-ink: #2b2420;
  --ms-muted: #6b5f57;
  --ms-line: #d9cfc4;
  --ms-paper: #ffffff;
  --ms-bronze: #7a3b12;
  --ms-ochre: #c8862e;
}

.ms-explorer { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem; color: var(--ms-ink); }
.ms-explorer h1 { margin: 0 0 1rem; }

.ms-filters { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; margin-bottom: .75rem; }
.ms-filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--ms-muted); }
.ms-filters input, .ms-filters select, .ms-filters button {
  font: inherit; font-size: .95rem; padding: .45rem .6rem; border: 1px solid var(--ms-line);
  border-radius: 4px; background: var(--ms-paper); color: var(--ms-ink); max-width: 16rem;
}
.ms-filters input[type=search] { flex: 1 1 14rem; max-width: none; }
.ms-filters button { cursor: pointer; background: transparent; }
.ms-filters :focus-visible, .ms-list :focus-visible, .ms-itinerary :focus-visible { outline: 2px solid var(--ms-bronze); outline-offset: 2px; }

.ms-count { margin: .25rem 0 .75rem; color: var(--ms-muted); }

.ms-explorer-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; }
.ms-map { height: 70vh; min-height: 360px; border: 1px solid var(--ms-line); }
.ms-list { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow-y: auto; border-top: 1px solid var(--ms-line); }
.ms-item { display: grid; grid-template-columns: 88px 1fr; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--ms-line); position: relative; }
.ms-item img { width: 88px; height: 66px; object-fit: cover; }
.ms-item h3 { font-size: 1rem; margin: 0 2.5rem .2rem 0; line-height: 1.3; }
.ms-item p { margin: 0; font-size: .85rem; color: var(--ms-muted); }
.ms-add {
  position: absolute; right: 0; top: .75rem; width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--ms-bronze); background: transparent; color: var(--ms-bronze); font-size: 1.2rem; cursor: pointer;
}
.ms-add:hover { background: var(--ms-bronze); color: #fff; }
.ms-empty { padding: 1rem 0; color: var(--ms-muted); }

.ms-itinerary { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--ms-ink); }
.ms-itinerary ol { padding-left: 1.25rem; }
.ms-itinerary li { margin: .3rem 0; }
.ms-itinerary li button { border: 0; background: none; color: var(--ms-muted); cursor: pointer; font-size: 1.1rem; }
.ms-trip-actions button { font: inherit; padding: .4rem .8rem; border: 1px solid var(--ms-ink); background: transparent; cursor: pointer; }

.ms-toast {
  position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); transform: translate(-50%, 150%);
  max-width: min(32rem, 92vw); padding: .75rem 1rem; background: var(--ms-ink); color: #fff; z-index: 10000;
  border-radius: 4px; font-size: .95rem; transition: transform .25s ease;
}
.ms-toast a { color: #f3d8a8; }
.ms-toast.ms-show { transform: translate(-50%, 0); }

.ms-404 { font-family: system-ui, sans-serif; max-width: 36rem; margin: 15vh auto; padding: 0 1rem; color: var(--ms-ink); }

@media (max-width: 800px) {
  .ms-explorer-body { grid-template-columns: 1fr; }
  .ms-map { height: 50vh; }
  .ms-list { max-height: none; }
  .ms-filters select { max-width: none; }
  .ms-filters label { flex: 1 1 45%; }
}
@media (prefers-reduced-motion: reduce) { .ms-toast { transition: none; } }
@media print {
  .ms-filters, .ms-map, .ms-add, .ms-trip-actions, .ms-toast { display: none !important; }
}

/* pin di default per le mappe Google convertite in Leaflet */
.ms-gm-pin { background: none; border: 0; }