/**
 * KeyTube Immobiliare - stili front-end
 * Ripulito dallo style.css del child theme OceanWP originale: tolte tutte le
 * regole non legate agli immobili (menu, footer widgets, whatsapp, ecc.) e i
 * colori "di marca" fissi. I colori sono centralizzati in poche variabili qui
 * sotto: per adattare il plugin a un nuovo sito basta modificare queste
 * variabili (nel CSS del tema o in un plugin di CSS personalizzato), senza
 * toccare il resto del foglio. Font-family non è mai impostato: eredita
 * sempre dal tema attivo.
 */

:root {
	--gestim-colore-primario: #2c3e50;      /* prezzo, CTA principali, filtro attivo */
	--gestim-colore-testo-secondario: #54595f; /* tipologia, dettagli, testo secondario */
	--gestim-colore-accento: #6aa84f;        /* pulsante di ricerca */
	--gestim-colore-bordo: #e9e9e9;
	--gestim-raggio-bordo: 8px;              /* stesso arrotondamento per .immobile e .btn-dettaglio */
	--gestim-colore-prezzo: #2c3e50;         /* prezzo nelle card/liste immobili */
	--gestim-colore-pulsante: #2c3e50;       /* sfondo (e bordo) del pulsante "Vedi dettagli" */
	--gestim-colore-pulsante-testo: #ffffff; /* testo del pulsante "Vedi dettagli" */
	--gestim-colore-sfondo-ricerca: #2c3e50; /* sfondo del modulo [ricerca_immobili] */
	--gestim-colore-testo-ricerca: #ffffff;  /* colore delle label nel modulo [ricerca_immobili] */
}

/* Ancora dei risultati di ricerca: quando il browser scrolla su "#risultati"
   (dopo l'invio di un form o il click su un link con "#risultati"), lascia
   questo margine sopra invece di attaccare il contenuto al bordo dello
   schermo. */
#risultati { scroll-margin-top: 90px; }

/* ==== Liste immobili in homepage (shortcode [immobili], [immobili_evidenza], [ultimi_immobili]) ==== */
.immobili-home-page { display: flex; flex-direction: row; }
.immobili-home-page .immobile { width: 100%; text-align: center; margin: 20px 5px; display: block; }
.immobili-home-page .immobile img { max-width: 100%; width: 100%; }
.immobili-home-page .immobile h3 { text-align: center; margin: 10px 0; padding: 0 10px; }

/* ==== Filtro comuni (bottoni desktop / dropdown mobile) ==== */
.solo-mobile { display: none; }
.btn-filtra { padding: 4px 8px; text-decoration: none !important; border: 1px solid var(--gestim-colore-bordo); border-radius: var(--gestim-raggio-bordo); background-color: var(--gestim-colore-sfondo-card, transparent); margin: 5px; display: inline-block; }
.btn-filtra span { position: absolute; background-color: var(--gestim-colore-primario); border: 2px solid white; border-radius: 50%; color: white; font-size: 12px !important; width: 18px; height: 18px; text-align: center; margin-top: -10px; margin-left: -4px; opacity: 0; transition: all .4s; }
.btn-filtra:hover span { opacity: 1; }

/* Pulsanti "Data" / "Prezzo" di [risultati_immobili mostra_ordinamento="si"] */
.ordinamento-immobili { margin: 5px 0 15px; }
.ordinamento-immobili-etichetta { margin-right: 5px; }
.btn-attivo { background-color: var(--gestim-colore-bordo); color: white; }
.btn-attivo:hover { color: white; }
.btn-attivo span { opacity: 1; }

/* Tendina comuni per mobile (dentro .gestim-filtro-comuni .solo-mobile) */
.gestim-filtro-comuni select {
	border: 1px solid var(--gestim-colore-bordo);
	border-radius: var(--gestim-raggio-bordo);
	height: 40px;
	width: 100%;
	padding: 10px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><polygon points='0,0 10,0 5,6' fill='%23333'/></svg>");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 10px 6px;
	padding-right: 40px;
}

/* ==== Card in griglia (shortcode [immobili], [immobili_evidenza], [ultimi_immobili]) ==== */
/* Contenitore dell'immagine di copertina: rapporto 3:4 fisso, angoli arrotondati
   solo in alto (la card prosegue sotto con titolo/prezzo). L'immagine dentro
   riempie il contenitore mantenendo le proporzioni (object-fit: cover). */
.immobile-thumb { border-radius: 8px 8px 0 0; aspect-ratio: 4 / 3; overflow: hidden; }
.immobile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==== Lista/risultati immobili (shortcode [risultati_immobili], nuovo shortcode lista) ==== */
.immobile { display: flex; align-items: center; padding: 0; border: 1px solid var(--gestim-colore-bordo); border-radius: var(--gestim-raggio-bordo); background-color: var(--gestim-colore-sfondo-card, transparent); margin-bottom: 20px; position: relative; }
.immobile h3 { margin: 20px 0 0 0; }
.immobile .lista-prezzo { color: var(--gestim-colore-prezzo); font-weight: bold; font-size: 1.5rem; margin-bottom: 0; }
.lista-immobili-img { flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
@media (min-width: 769px) {
	.lista-immobili-img { width: 380px; }
}
.lista-immobili-img img { width: 100%; height: 100%; border-radius: 8px 0 0 8px; object-fit: cover; display: block; }
.lista-immobili-dati { flex: 1; display: flex; flex-direction: column; align-self: stretch; padding: 0 20px; }
.lista-immobili-dati p { margin: 0 !important; }
.btn-dettaglio { display: inline-block; margin: 20px 0; padding: 8px 12px; background-color: var(--gestim-colore-pulsante); color: var(--gestim-colore-pulsante-testo); text-decoration: none !important; border-radius: var(--gestim-raggio-bordo); border: 1px solid var(--gestim-colore-pulsante); }
.btn-dettaglio:hover { background-color: var(--gestim-colore-pulsante-testo); color: var(--gestim-colore-pulsante); }
.lista-immobili-icone-dati { display: flex; gap: 15px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--gestim-colore-bordo); }
.lista-immobili-icone-dati-colonna { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.lista-immobili-icone-dati-colonna i { font-size: 1.1rem; color: var(--gestim-colore-primario); }
.lista-immobili-icone-dati-colonna span { color: var(--gestim-colore-testo-secondario); }

/* ==== Modulo di ricerca avanzata (shortcode [ricerca_immobili]) ==== */
.ricerca-immobili { background-color: var(--gestim-colore-sfondo-ricerca); border-radius: var(--gestim-raggio-bordo); padding: 15px; color: var(--gestim-colore-testo-ricerca); }
.ricerca-immobili select, .ricerca-immobili input { width: 100%; height: 40px; margin-bottom: 7px; }
.ricerca-immobili select {
	border: none !important;
	background-color: white !important;
	border-radius: var(--gestim-raggio-bordo) !important;
	padding: 10px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><polygon points='0,0 10,0 5,6' fill='%23333'/></svg>");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 10px 6px;
	padding-right: 40px;
}
.ricerca-immobili button { width: 100%; max-width: 100%; height: 40px; font-size: 1.3rem; border-radius: var(--gestim-raggio-bordo) !important; border: 1px solid var(--gestim-colore-pulsante) !important; margin-top: 20px; background-color: var(--gestim-colore-pulsante) !important; color: var(--gestim-colore-pulsante-testo) !important; }
.ricerca-immobili button:hover { background-color: var(--gestim-colore-pulsante-testo) !important; color: var(--gestim-colore-pulsante) !important; }

/* Slider "Budget massimo": linea orizzontale con pallino trascinabile, valore
   libero (non più a scaglioni fissi). All'estremo destro = nessun limite. */
.ricerca-budget-valore { font-weight: 600; }
.ricerca-budget-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 40px;
	margin-bottom: 7px;
	background: transparent;
}
/* Segmento a sinistra del pallino (parte già "selezionata"): colorato con
   --gestim-colore-prezzo. Chrome/Edge/Safari non hanno un pseudo-elemento
   nativo per questo, quindi si usa un gradiente sulla track, la cui soglia
   (--gestim-budget-percent) viene aggiornata via JS ad ogni trascinamento.
   Firefox invece supporta nativamente ::-moz-range-progress. */
.ricerca-budget-slider::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--gestim-colore-prezzo) var(--gestim-budget-percent, 0%), white var(--gestim-budget-percent, 0%));
}
.ricerca-budget-slider::-moz-range-track {
	height: 4px;
	background-color: white;
	border-radius: 2px;
}
.ricerca-budget-slider::-moz-range-progress {
	height: 4px;
	border-radius: 2px;
	background-color: var(--gestim-colore-prezzo);
}
.ricerca-budget-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -7px;
	border-radius: 50%;
	background-color: var(--gestim-colore-pulsante);
	border: 2px solid white;
	cursor: pointer;
}
.ricerca-budget-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--gestim-colore-pulsante);
	border: 2px solid white;
	cursor: pointer;
}

/* ==== Ricerca rapida (shortcode [ricerca_immobili_rapida]) ==== */
.ricerca-rapida-riga { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.ricerca-rapida-campo-termine { position: relative; flex: 1 1 220px; }
.ricerca-rapida-campo-termine input[type="text"] {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px solid var(--gestim-colore-bordo);
	border-radius: var(--gestim-raggio-bordo);
}
.ricerca-rapida-suggerimenti {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: white;
	border: 1px solid var(--gestim-colore-bordo);
	border-radius: var(--gestim-raggio-bordo);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	max-height: 260px;
	overflow-y: auto;
}
.ricerca-rapida-suggerimenti[hidden] { display: none; }
.ricerca-rapida-suggerimenti li { padding: 8px 14px; cursor: pointer; color: #222; }
.ricerca-rapida-suggerimenti li:hover { background-color: #fff; color: var(--gestim-colore-primario); }
.ricerca-rapida-tipologia {
	flex: 0 1 200px;
	min-width: 0;
	height: 44px;
	padding: 0 10px;
	box-sizing: border-box;
	border: 1px solid var(--gestim-colore-bordo);
	border-radius: var(--gestim-raggio-bordo);
	background-color: white;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><polygon points='0,0 10,0 5,6' fill='%23333'/></svg>");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 10px 6px;
	padding-right: 40px;
}
.ricerca-rapida-filtri {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--gestim-colore-bordo);
	border-radius: var(--gestim-raggio-bordo);
	background-color: white;
	cursor: pointer;
}
.ricerca-rapida-cerca {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 24px;
	border: 1px solid var(--gestim-colore-pulsante);
	border-radius: var(--gestim-raggio-bordo);
	background-color: var(--gestim-colore-pulsante);
	color: var(--gestim-colore-pulsante-testo);
	cursor: pointer;
}
.ricerca-rapida-cerca:hover { background-color: var(--gestim-colore-pulsante-testo); color: var(--gestim-colore-pulsante); }

/* Popup con la ricerca avanzata completa, aperto dal bottone "filtri" */
.ricerca-rapida-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 9998; }
.ricerca-rapida-modal-box {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	width: calc(100% - 40px);
	max-width: 480px;
	max-height: calc(100% - 40px);
	overflow-y: auto;
	background: white;
	border-radius: var(--gestim-raggio-bordo);
	padding: 0;
}
.ricerca-rapida-modal-chiudi {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	color: var(--gestim-colore-testo-secondario);
}

/* ==== Scheda singolo immobile ==== */
/* Il titolo (h1) non è più stampato da questo blocco: dalla v3.4 la scheda
   immobile non sostituisce più il template del tema, quindi il titolo che si
   vede in pagina è quello standard stampato dal tema stesso (the_title()),
   con lo stesso valore composto in Immobili > Impostazioni. */
.descrizione-intro { font-size: 2rem; margin-bottom: 30px; }
.tipologia-immobile { color: var(--gestim-colore-testo-secondario); margin-bottom: 20px; }
.prezzo-immobile h3 { color: var(--gestim-colore-prezzo); }
.ottieni-informazioni-immobile { text-align: center; margin: 25px 0; }
.ottieni-informazioni-immobile { background-color: var(--gestim-colore-pulsante) !important; padding: 12px 25px; color: var(--gestim-colore-pulsante-testo); border-radius: var(--gestim-raggio-bordo); border: 1px solid var(--gestim-colore-pulsante); max-width: 100%; }
.ottieni-informazioni-immobile:hover { color: var(--gestim-colore-pulsante); background-color: var(--gestim-colore-pulsante-testo) !important; }
.ottieni-informazioni-immobile:hover a { color: var(--gestim-colore-pulsante); }
.ottieni-informazioni-immobile a { text-decoration: none; color: var(--gestim-colore-pulsante-testo); }
.cerca-altri-immobili, .torna-alla-lista { margin: 35px 0; text-align: center; }
.torna-alla-lista span { padding: 12px 25px; color: var(--gestim-colore-primario); border-width: 0; max-width: 100%; display: block; }
.cerca-altri-immobili span { padding: 12px 25px; color: var(--gestim-colore-primario); border-radius: var(--gestim-raggio-bordo); border: 1px solid var(--gestim-colore-primario); max-width: 100%; display: block; }

.immobile-dettagli { display: flex; flex-wrap: wrap; border: 1px solid var(--gestim-colore-bordo); border-radius: var(--gestim-raggio-bordo); background-color: var(--gestim-colore-sfondo-card, transparent); overflow: hidden; margin-top: 20px; }
.immobile-dettagli i { font-size: 1.8rem; margin-right: 5px; }
.immobile-dettagli-cella { display: flex; align-items: center; flex: 1 1 calc(33.333% - 1px); padding: 12px; border-left: 1px solid var(--gestim-colore-bordo); border-top: 1px solid var(--gestim-colore-bordo); text-align: left; box-sizing: border-box; }
.immobile-dettagli-cella p { margin: 0; font-size: inherit; }
.immobile-dettagli-cella img { height: 25px; width: auto; }
.immobile-dettagli-cella:nth-child(-n+3) { border-top: none; }
.immobile-dettagli-cella:nth-child(3n+1) { border-left: none; }

/* ==== Form (WPForms incorporato nella scheda immobile) ==== */
.wpforms-container .wpforms-field { clear: inherit !important; }

/* ==== Galleria (Swiper) ==== */
.swiper { border-radius: var(--gestim-raggio-bordo); }
.immobile-gallery-main { width: 100%; aspect-ratio: 134 / 89; overflow: hidden; position: relative; }
.immobile-gallery-main img { position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%, -50%); object-fit: cover; }
.swiper-slide img { width: 100%; aspect-ratio: 134 / 89; overflow: hidden; }
.immobile-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 15px; }
.immobile-gallery-thumbs .swiper-slide { width: auto; flex: 0 0 auto; cursor: pointer; opacity: 0.6; }
.immobile-gallery-thumbs .swiper-slide-thumb-active { opacity: 1; border-radius: 10px; }
.immobile-gallery-thumbs .swiper-slide img { height: 90px; width: auto; margin: 15px 15px 15px 0; object-fit: cover; display: block; border-radius: var(--gestim-raggio-bordo); }
.swiper-button-next, .swiper-button-prev { color: white !important; }

/* ==== Lightbox ==== */
/* Qui i colori restano fissi (nero/bianco): non sono un accento di brand ma
   servono per garantire contrasto leggibile sull'overlay a schermo intero,
   indipendentemente dal tema. */
#lightbox-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 10001; }
#lightbox-content { position: absolute; top: 0; left: 0; height: calc(100% - 40px); width: calc(100% - 40px); margin: 20px; display: flex; }
/* Il "wrap" si stringe attorno alla foto (non all'intero overlay): così il
   bottone di chiusura, posizionato rispetto a questo elemento, resta sempre
   sovrapposto all'angolo in alto a destra della fotografia. */
#lightbox-image-wrap { position: relative; display: inline-flex; max-width: 100%; max-height: 100%; margin: auto; }
#lightbox-image-wrap img { max-width: 100%; max-height: 100%; display: block; border-radius: var(--gestim-raggio-bordo); }
/* Scorrimento laterale gestito via JS (immobili-single.js): durante il
   passaggio da una foto all'altra, il wrap assume temporaneamente una
   dimensione fissa e mostra due <img> sovrapposte (quella uscente e quella
   entrante) che scorrono l'una accanto all'altra, senza mai mostrare lo
   sfondo scuro dell'overlay in mezzo. */
#lightbox-image-wrap.gestim-lightbox-scorrimento { overflow: hidden; }
#lightbox-image-wrap.gestim-lightbox-scorrimento img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	transition: transform 0.3s ease;
}
#lightbox-close { position: absolute; top: 0px; right: 10px; font-size: 35px; line-height: 1; color: white; cursor: pointer; user-select: none; z-index: 2; }
.lightbox-arrow { position: absolute; top: 50%; font-size: 2rem; color: white; padding: 0 10px; cursor: pointer; user-select: none; transform: translateY(-50%); background: black; border-radius: 3px; z-index: 99; }
#lightbox-prev { left: 10px; }
#lightbox-next { right: 10px; }

/* ==== Popup mappa (shortcode [mappa_immobili]) ==== */
/* Anteprima con prima foto, titolo e prezzo al click sul marker. */
.gestim-mappa-popup { min-width: 160px; }
.gestim-mappa-popup img { width: 100%; height: 100px; object-fit: cover; border-radius: var(--gestim-raggio-bordo); display: block; margin-bottom: 6px; }
.gestim-mappa-popup-titolo,
.gestim-mappa-popup-titolo:hover,
.leaflet-popup-content a:hover .gestim-mappa-popup-titolo { font-weight: 600; color: var(--gestim-colore-titolo, inherit); }
.gestim-mappa-popup-prezzo { color: var(--gestim-colore-prezzo); font-weight: bold; margin-top: 2px; }
.leaflet-popup-content a { text-decoration: none; color: inherit; }

/* ==== Responsive (sotto i 768px) ==== */
@media (max-width: 768px) {
	.immobile-dettagli-cella { flex: 1 1 100%; border-left: none; }
	.immobili-home-page { display: flex; flex-direction: column; }
	.immobile h3 { margin-bottom: 0; }
	.immobile { display: block; }
	.immobile-thumb { width: 100%; height: auto; display: block; margin-bottom: 15px; border-radius: 8px 8px 0 0; }
	.lista-immobili-img { margin-bottom: 15px; }
	.lista-immobili-img img { width: 100%; height: 100%; display: block; border-radius: 8px 8px 0 0; }
	.lista-immobili-dati { text-align: center; }
	.immobile h3, .immobile p { text-align: center; }
	.lista-immobili-icone-dati { justify-content: center; }
	.immobile-dettagli-cella:nth-child(-n+3) { border-top: 1px solid var(--gestim-colore-bordo); }
	.immobile-dettagli-cella:first-child { border-top: none; }
	.solo-mobile { display: block; }
	.no-mobile { display: none; }

	/* Barra di ricerca rapida: prima riga solo il campo di testo (a tutta
	   larghezza), seconda riga con tendina Tipologia, bottone filtri e
	   bottone Cerca affiancati. */
	.ricerca-rapida-riga { gap: 6px; }
	.ricerca-rapida-campo-termine { flex-basis: 100%; }
	.ricerca-rapida-tipologia { flex: 1 1 auto; }
	.ricerca-rapida-cerca { padding: 0 14px; }
}