/* ============================================================
   SmartLands WebGIS Map — Widget Styles
   Versione: 1.0.0
   Tutte le proprietà usano CSS custom properties (--lcm-*)
   iniettate inline dal widget PHP per supporto multi-istanza.
   ============================================================ */

/* ── Wrapper ──────────────────────────────────────────────── */
.lcm-wrap {
  --lcm-header-bg:    #F5C400;
  --lcm-header-text:  #1A1A1A;
  --lcm-search-bg:    rgba(0, 0, 0, 0.12);
  --lcm-primary:      #F5C400;
  --lcm-primary-dk:   #D4A800;
  --lcm-text:         #333333;
  --lcm-popup-bg:     #F7F7F7;
  --lcm-phone:        #B38600;
  --lcm-white:        #FFFFFF;
  --lcm-font:         'Montserrat', sans-serif;

  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  font-family: var(--lcm-font);
}

/* ── Intestazione ─────────────────────────────────────────── */
.lcm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--lcm-header-bg);
  color: var(--lcm-header-text);
  z-index: 10;
}

.lcm-header-logo {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

/* Nasconde il logo in tempo reale nell'editor quando lo switch è disattivato */
.lcm-logo- .lcm-header-logo {
  display: none !important;
}

/* Header posizionato in basso: nessun bordo superiore arrotondato */
.lcm-header--bottom {
  border-radius: 0 0 inherit inherit;
}

.lcm-header-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Barra di ricerca ─────────────────────────────────────── */
.lcm-search-wrap {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

.lcm-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  color: var(--lcm-header-text, #fff);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 0.15s;
  /* Previene resize da parte di Elementor editor */
  flex: 0 0 auto;
  display: block;
  overflow: visible;
}

/* Nasconde l'icona quando l'utente sta digitando */
.lcm-search-input:not(:placeholder-shown) ~ .lcm-search-icon {
  opacity: 0;
}

.lcm-search-input {
  background: var(--lcm-search-bg);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  color: var(--lcm-header-text);
  font-size: 0.83rem;
  padding: 5px 12px 5px 32px;
  width: 190px;
  outline: none;
  transition: background 0.2s, width 0.2s, padding 0.2s;
}

/* Quando l'input ha testo, riduci il padding sinistro (la lente si nasconde) */
.lcm-search-input:not(:placeholder-shown) {
  padding-left: 14px;
}

/* Input senza icona lente — padding uniforme */
.lcm-search-input.lcm-no-icon {
  padding-left: 14px;
}

.lcm-search-input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.lcm-search-input:focus {
  background: rgba(255, 255, 255, 0.28);
  width: 230px;
}

/* Dropdown risultati */
.lcm-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--lcm-white);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  min-width: 240px;
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  padding: 4px 0;
  z-index: 9999;
}

.lcm-search-results li {
  padding: 9px 14px;
  font-size: 0.84rem;
  color: var(--lcm-text);
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background 0.12s;
}

.lcm-search-results li:last-child {
  border-bottom: none;
}

.lcm-search-results li:hover {
  background: #f0f0f0;
  color: var(--lcm-primary);
}

.lcm-search-results li span {
  display: block;
  font-size: 0.74rem;
  color: #888;
  margin-top: 2px;
}

/* ── Mappa ────────────────────────────────────────────────── */
.lcm-map-container {
  height: 500px; /* fallback; sovrascritta da Elementor slider */
  z-index: 0;
}

/* ── Ricerca in basso ─────────────────────────────────────── */
.lcm-search-bottom {
  position: relative;
  padding: 12px 16px;
  background: var(--lcm-white);
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lcm-search-bottom .lcm-search-input {
  background: var(--lcm-search-bg);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  color: var(--lcm-text);
  flex: 1;
  padding: 8px 14px 8px 32px;
  font-size: 0.83rem;
  outline: none;
  transition: background 0.2s, border-color 0.2s;
}

.lcm-search-bottom .lcm-search-input::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.lcm-search-bottom .lcm-search-input:focus {
  background: var(--lcm-white);
  border-color: var(--lcm-primary);
}

/* ── Filtro gruppi (mappa) ────────────────────────────────── */
.lcm-groups {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--lcm-popup-bg, #f7f7f7);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.lcm-group-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  background: transparent;
  color: var(--lcm-text, #333);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}

.lcm-group-chip:hover,
.lcm-group-chip.active {
  background: var(--lcm-primary, #F5C400);
  border-color: var(--lcm-primary, #F5C400);
  color: #1a1a1a;
}

.lcm-search-bottom .lcm-search-icon {
  position: absolute;
  left: 26px;
  color: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.lcm-search-bottom .lcm-search-input:not(:placeholder-shown) ~ .lcm-search-icon {
  opacity: 0;
}

.lcm-search-bottom .lcm-search-input:not(:placeholder-shown) {
  padding-left: 14px;
}

/* ── Popup Leaflet ────────────────────────────────────────── */
.lcm-popup {
  min-width: 200px;
  padding: 2px 0;
  background: var(--lcm-popup-bg);
}

.lcm-popup-img {
  display: block;
  width: 100%;
  max-height: 130px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}

.lcm-popup h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--lcm-primary);
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e0e0e0;
}

.lcm-popup p {
  font-size: 0.81rem;
  color: var(--lcm-text);
  margin: 3px 0;
  line-height: 1.4;
}

.lcm-popup .lcm-tel {
  color: var(--lcm-phone);
  font-weight: 600;
  text-decoration: none;
}

.lcm-popup .lcm-tel:hover {
  text-decoration: underline;
}

.lcm-popup .lcm-btn-sede {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 12px;
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--lcm-white);
  background: var(--lcm-primary);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s;
  border: none;
  cursor: pointer;
}

.lcm-popup .lcm-btn-sede:hover {
  background: var(--lcm-primary-dk);
}

/* ── Leaflet popup wrapper: sfondo coerente ───────────────── */
.leaflet-popup-content-wrapper {
  border-radius: 6px !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2) !important;
  padding: 0 !important;
  overflow: hidden;
}

.leaflet-popup-content {
  margin: 12px 14px !important;
}

.leaflet-popup-tip-container {
  margin-top: -1px;
}

/* ── Popup layer: tabella proprietà GeoJSON ───────────────── */
.lcm-layer-props {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.lcm-layer-props th,
.lcm-layer-props td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid #e8e8e8;
  color: var(--lcm-text);
  word-break: break-word;
}

.lcm-layer-props th {
  font-weight: 600;
  color: var(--lcm-primary);
  width: 40%;
}

.lcm-layer-props tr:last-child th,
.lcm-layer-props tr:last-child td {
  border-bottom: none;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .lcm-header-title {
    font-size: 0.85rem;
  }

  .lcm-search-input {
    width: 130px;
  }

  .lcm-search-input:focus {
    width: 155px;
  }
}

/* ── Toolbar custom (fullscreen, locate, measure, print) ─────────────── */
.lcm-tool-bar { box-shadow: 0 1px 5px rgba(0,0,0,.4); }
.lcm-tool-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	background: #fff;
	color: #333;
	cursor: pointer;
	transition: background .15s, color .15s;
	border: none;
	text-decoration: none !important;
}
.lcm-tool-btn:hover { background: #F5C400; color: #000; }
.lcm-tool-btn.active { background: #F5C400; color: #000; }
.lcm-tool-btn.lcm-loading {
	pointer-events: none;
	opacity: .6;
	animation: lcm-pulse 1s infinite;
}
@keyframes lcm-pulse { 50% { opacity: 1; } }

/* Tooltip per la misura */
.lcm-measure-tooltip span {
	display: inline-block;
	background: #F5C400;
	color: #000;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* Layer control: stile coordinato */
.lcm-wrap .leaflet-control-layers {
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
	background: #fff;
}
.lcm-wrap .leaflet-control-layers-list {
	max-height: 320px;
	overflow-y: auto;
}
.lcm-wrap .leaflet-control-layers-expanded {
	padding: 10px 14px;
	max-width: 280px;
}
.lcm-wrap .leaflet-control-layers label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 2px;
	font-size: 13px;
	cursor: pointer;
	margin: 0;
	color: #333;
}
.lcm-wrap .leaflet-control-layers label:hover { color: #F5C400; }
.lcm-wrap .leaflet-control-layers input[type="checkbox"],
.lcm-wrap .leaflet-control-layers input[type="radio"] {
	margin: 0;
	flex-shrink: 0;
}
.lcm-wrap .leaflet-control-layers-separator { margin: 8px 0; }
/* Header opzionale del pannello layer */
.lcm-wrap .leaflet-control-layers-expanded::before {
	content: 'Livelli';
	display: block;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #888;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid #eee;
}

/* Modalità stampa */
@media print {
	/* Strategia visibility: nasconde tutto e poi mostra solo il widget mappa */
	body.lcm-printing * { visibility: hidden !important; }
	body.lcm-printing .lcm-wrap,
	body.lcm-printing .lcm-wrap * { visibility: visible !important; }
	body.lcm-printing .lcm-wrap {
		position: fixed !important;
		top: 0; left: 0; right: 0; bottom: 0;
		width: 100% !important;
		height: 100vh !important;
		max-width: 100% !important;
		box-shadow: none !important;
	}
	/* Toolbar/controlli/header: invisibili (anche se il loro spazio resta nullo) */
	body.lcm-printing .lcm-tool-bar,
	body.lcm-printing .lcm-tool-bar *,
	body.lcm-printing .leaflet-control-zoom,
	body.lcm-printing .leaflet-control-zoom *,
	body.lcm-printing .leaflet-control-layers,
	body.lcm-printing .leaflet-control-layers *,
	body.lcm-printing .lcm-search-wrap,
	body.lcm-printing .lcm-search-wrap *,
	body.lcm-printing .lcm-geocode-bar,
	body.lcm-printing .lcm-geocode-bar *,
	body.lcm-printing .lcm-info-panel,
	body.lcm-printing .lcm-info-panel * { visibility: hidden !important; }
	body.lcm-printing .lcm-map-container { height: 100vh !important; }
}

/* ── Geocoding (ricerca indirizzi) ────────────────────────────────────── */
.lcm-wrap .lcm-geocode-bar {
	border-radius: 6px !important;
	overflow: visible;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.lcm-wrap .lcm-geocode-wrap {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
	overflow: hidden;
	position: relative;
	min-width: 240px;
}
.lcm-wrap .lcm-geocode-input {
	flex: 1;
	border: none;
	padding: 8px 10px;
	outline: none;
	font-size: 13px;
	background: transparent;
	min-width: 180px;
	min-height: 28px;
	color: #333;
}
.lcm-wrap .lcm-geocode-btn {
	width: 36px;
	height: 36px;
	border: none;
	background: #F5C400;
	color: #000;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lcm-wrap .lcm-geocode-btn:hover { background: #e6b800; }
.lcm-wrap .lcm-geocode-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
	max-height: 280px;
	overflow-y: auto;
	display: none;
	z-index: 1000;
}
.lcm-wrap .lcm-geocode-results li {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 12px;
	border-bottom: 1px solid #eee;
	line-height: 1.4;
}
.lcm-wrap .lcm-geocode-results li:last-child { border-bottom: none; }
.lcm-wrap .lcm-geocode-results li:hover { background: #fff8d6; }

/* ── Filter dialog ─────────────────────────────────────────────────────── */
.lcm-filter-modal {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--lcm-font);
}
.lcm-filter-box {
	background: #fff;
	border-radius: 8px;
	width: 90%; max-width: 480px;
	box-shadow: 0 8px 32px rgba(0,0,0,.3);
	overflow: hidden;
}
.lcm-filter-head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 14px 18px;
	background: #F5C400;
	color: #000;
}
.lcm-filter-close {
	background: none; border: none; font-size: 24px;
	cursor: pointer; color: #000; line-height: 1;
}
.lcm-filter-body { padding: 18px; }
.lcm-filter-body label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; color: #333; }
.lcm-filter-body select, .lcm-filter-body input[type="text"] {
	width: 100%; padding: 8px 10px;
	border: 1px solid #ccc; border-radius: 4px;
	font-size: 13px;
	box-sizing: border-box;
}
.lcm-filter-actions {
	display: flex; justify-content: flex-end; gap: 8px;
	margin-top: 16px; padding-top: 12px;
	border-top: 1px solid #eee;
}
.lcm-filter-actions button {
	padding: 8px 16px; border-radius: 4px;
	border: 1px solid #ccc; background: #f6f6f6;
	cursor: pointer; font-size: 13px;
}
.lcm-filter-actions .lcm-btn-apply {
	background: #F5C400; border-color: #F5C400; color: #000; font-weight: 600;
}
.lcm-filter-actions button:hover { opacity: .85; }

/* ── Popup attachments list ───────────────────────────────────────────── */
.lcm-popup .lcm-popup-attach {
	list-style: none; padding: 8px 0 0; margin: 8px 0 0;
	border-top: 1px solid #e0e0e0;
}
.lcm-popup .lcm-popup-attach li {
	padding: 3px 0;
	font-size: 0.81rem;
}
.lcm-popup .lcm-popup-attach a {
	color: var(--lcm-primary, #F5C400);
	text-decoration: none;
}
.lcm-popup .lcm-popup-attach a:hover { text-decoration: underline; }

/* ── Toast loading ─────────────────────────────────────────────────────── */
.lcm-toast {
	position: fixed; top: 20px; right: 20px;
	background: #1a1a1a; color: #fff;
	padding: 10px 16px; border-radius: 4px;
	z-index: 100000; font-size: 13px;
	box-shadow: 0 4px 12px rgba(0,0,0,.3);
	animation: lcm-toast-in .2s ease-out;
}
@keyframes lcm-toast-in {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

/* ── Force-expand del pannello layer (override comportamento collapsed) ── */
/* Quando NON è collapsed nei dati Leaflet, garantisce visibilità totale */
.lcm-wrap .leaflet-control-layers:not(.leaflet-control-layers-expanded) {
	min-width: 32px;
	min-height: 32px;
}
.lcm-wrap .leaflet-control-layers-toggle {
	width: 32px !important;
	height: 32px !important;
	background-size: 22px 22px !important;
	display: block;
}
/* Forza visibilità della lista quando il control è expanded */
.lcm-wrap .leaflet-control-layers.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block !important;
}
.lcm-wrap .leaflet-control-layers.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none !important;
}

/* ── Pannello info (alternativa al popup classico) ──────────────────── */
.lcm-wrap { position: relative; }

.lcm-info-panel {
	position: absolute;
	background: #fff;
	box-shadow: 0 0 16px rgba(0,0,0,.15);
	z-index: 800;
	display: flex;
	flex-direction: column;
	transition: transform .3s ease;
	pointer-events: auto;
	font-family: var(--lcm-font);
}

/* Side panel (laterale destro) */
.lcm-info-side {
	top: 0; right: 0; bottom: 0;
	width: 320px;
	max-width: 90%;
	transform: translateX(100%);
	border-left: 1px solid #ddd;
}
.lcm-info-side.lcm-info-open { transform: translateX(0); }

/* Bottom panel (footer mappa) */
.lcm-info-bottom {
	left: 0; right: 0; bottom: 0;
	height: 240px;
	max-height: 50%;
	transform: translateY(100%);
	border-top: 1px solid #ddd;
}
.lcm-info-bottom.lcm-info-open { transform: translateY(0); }

/* Header pannello */
.lcm-info-panel .lcm-info-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--lcm-primary, #F5C400);
	color: #1a1a1a;
	flex-shrink: 0;
}
.lcm-info-panel .lcm-info-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lcm-info-panel .lcm-info-close {
	background: transparent;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #1a1a1a;
	padding: 0 4px;
}
.lcm-info-panel .lcm-info-close:hover { opacity: .6; }

/* Body pannello */
.lcm-info-panel .lcm-info-body {
	flex: 1;
	overflow-y: auto;
	padding: 14px 16px;
	color: var(--lcm-text, #333);
	font-size: 13px;
}
.lcm-info-panel .lcm-info-search {
	width: 100%;
	padding: 7px 10px;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 13px;
	box-sizing: border-box;
}
.lcm-info-panel .lcm-layer-props {
	width: 100%;
	border-collapse: collapse;
}
.lcm-info-panel .lcm-layer-props th,
.lcm-info-panel .lcm-layer-props td {
	padding: 6px 8px;
	border-bottom: 1px solid #f0f0f0;
	text-align: left;
	vertical-align: top;
	word-break: break-word;
}
.lcm-info-panel .lcm-layer-props th {
	font-weight: 600;
	color: #555;
	width: 40%;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.lcm-info-panel .lcm-layer-props td {
	color: #1a1a1a;
}

/* Pannello laterale = overlay sopra la mappa (non restringe per non rompere flex column del wrap) */
@media (max-width: 720px) {
	.lcm-info-side { width: 88%; max-width: 360px; }
}

/* Pannello footer: il map-container resta della stessa altezza, il pannello
   slide-in dal basso coprendo l'ultima parte. */

/* ── Banner modalità editor Elementor ─────────────────────────────────── */
.lcm-editor-badge {
	position: absolute;
	bottom: 8px; left: 8px;
	z-index: 1100;
	background: rgba(245, 196, 0, 0.95);
	color: #1a1a1a;
	font-size: 11px;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0,0,0,.2);
	pointer-events: none;
	font-family: var(--lcm-font);
}