/* ============================================================
   THEME (usa i colori che hai già definito)
============================================================ */
:root{
  --primary-dark: #000;   /* tuo */
  --white: #fff;          /* tuo */
  --gold: #db0000;        /* tuo (rosso) */

  /* neutrali di supporto */
  --muted: rgba(255,255,255,.72);
  --muted-dark: rgba(0,0,0,.65);
  --glass: rgba(255,255,255,.10);
  --glass-strong: rgba(255,255,255,.16);

  --radius-lg: 18px;
  --radius-md: 14px;

  --shadow-sm: 0 6px 18px rgba(0,0,0,.18);
  --shadow-md: 0 16px 40px rgba(0,0,0,.28);
}

/* ============================================================
   BASE
============================================================ */
html, body{
  width: 100%;
  overflow-x: hidden;
}

body{
  font-family: 'Roboto', sans-serif, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--primary-dark);
  color: var(--white);
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}
.nav-link,
.btn {
  font-family: 'Montserrat', sans-serif;
}
a{
  color: inherit;
  text-decoration: none;
}

img, video{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Bootstrap: testi muted in sezioni scure */
.text-muted{ color: var(--muted) !important; }

/* Focus visibile e pulito */
:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 10px;
}
/* ============================================================
   NAVBAR – trasparente, NON fissa, sopra la HERO
============================================================ */

/* Icona hamburger */
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  filter: none !important;
}

/* Bottone hamburger */
.navbar-toggler{
  border: 2px solid var(--white) !important;
  border-radius: 10px;
  padding: 6px 10px;
}

/* Navbar */
.navbar-transparent{
  background: transparent !important;
  position: absolute;   /* <-- non fixed */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  padding: 14px 0;
}

/* Nessun overlay */
.navbar-transparent::after{
  display: none !important;
}

/* Link navbar */
.navbar-transparent .nav-link{
  color: var(--white) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .9px;
  font-size: .95rem;
  opacity: .95;
}

.navbar-transparent .nav-link:hover,
.navbar-transparent .nav-link:focus{
  color: var(--gold) !important;
  opacity: 1;
}

/* Logo navbar */
.navbar-logo{
  height: 250px;
  width: auto;
  display: block;
}

/* Allineamento verticale */
.navbar-brand{
  display: flex;
  align-items: center;
}

/* Mobile */
@media (max-width: 768px){
  .navbar-logo{
    margin-top: -35px;
    height: 120px;
  }
  .navbar-toggler{
    margin-top: -35px;
  }
}
/* ============================================================
   HERO
============================================================ */
.hero{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--primary-dark);
}

/* versione con immagine (tuo caso attuale) */
.hero-bg-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  filter: brightness(.60);
  transform: scale(1.02);
}

/* versione con video (se lo rimetti) */
#heroVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  filter: brightness(.55);
}

/* overlay testo/branding */
.hero-text-overlay{
  position:absolute;
  left:50%;
  top:46%;
  transform: translate(-50%, -50%);
  text-align:center;
  z-index: 2;
  width: min(900px, 92vw);
  animation: heroFade 800ms ease forwards;
}

@keyframes heroFade{
  from{ opacity: 0; transform: translate(-50%, -45%); }
  to{ opacity: 1; transform: translate(-50%, -50%); }
}

/* logo al posto del titolo testuale */
.hero-logo{
  width: min(420px, 72vw);
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.45));
}

.hero-title{
  margin: 0;
  line-height: 1.05;
}

.hero-subtitle{
  margin: 10px 0 0;
  color: var(--gold);
  font-weight: 600;
  text-shadow: 0 8px 18px rgba(0,0,0,.35);
}

/* ============================================================
   SEARCH PANEL (Bootstrap-friendly)
============================================================ */
.search-panel{
  /* in HTML è bg-white + shadow-lg: qui lo rendiamo “coerente” sul hero */
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.search-bar{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.92) !important;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,.06);
}

.section-title{
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--muted-dark);
}

.section-heading{
  font-weight: 700;
}

.search-pill{
  border-radius: 999px !important;
}

/* label: non usare muted grigino “sbiadito” */
.search-panel .form-label{
  color: rgba(0,0,0,.65) !important;
  font-weight: 700;
}

/* input/select */
.search-panel .form-control,
.search-panel .form-select{
  border-color: rgba(0,0,0,.12) !important;
}

.search-panel .form-control:focus,
.search-panel .form-select:focus{
  border-color: rgba(219,0,0,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(219,0,0,.15) !important;
}

/* bottone principale: usa il tuo rosso (variabile --gold) */
.search-panel .btn-dark{
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--white) !important;
  font-weight: 800;
  border-radius: 999px !important;
}

.search-panel .btn-dark:hover{
  filter: brightness(.92);
}

/* bottone outline: restiamo “bootstrap” ma coerenti */
.search-panel .btn-outline-secondary{
  border-radius: 999px !important;
  font-weight: 700;
}

/* Bottone “Vedi mappa…” (btn-outline-primary nel markup) */
#btnMappaCompleta.btn-outline-primary{
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  font-weight: 800;
}
#btnMappaCompleta.btn-outline-primary:hover{
  background: var(--gold) !important;
  color: var(--white) !important;
}

/* ============================================================
   IMMOBILI (cards)
============================================================ */
#immobili{
  background: var(--white) !important;
  color: #000;
}

#immobili .section-title,
#immobili .section-heading{
  color: #000;
}

.property-card{
  background: #fff !important;
  color: #000 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  transition: transform .20s ease, box-shadow .20s ease;
}

.property-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.property-card .immagine-principale{
  height: 240px;
  object-fit: cover;
}

.property-card .badge-luxury{
  background: var(--gold) !important;
  color: var(--white) !important;
  font-weight: 800;
  border-radius: 999px;
  padding: 6px 12px;
}

.property-card .titolo{
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
}

.property-card .descrizione{
  color: rgba(0,0,0,.65) !important;
}

.icons-feature{
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap;
}

.icon-imm{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.property-card .prezzo{
  font-weight: 900;
  color: var(--gold) !important;
  white-space: nowrap;
}

.property-card .dettagli-btn{
  color: var(--gold) !important;
  font-weight: 900;
  text-decoration: none !important;
}
.property-card .dettagli-btn:hover{
  text-decoration: underline !important;
}

/* Bottone “Visualizza tutti” */
#btnMostraTutti.btn-outline-dark{
  border-radius: 999px !important;
  font-weight: 800;
}

/* Pulsante “Chiudi” lista completa */
.btn-close-custom{
  border: 0;
  background: var(--primary-dark);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.btn-close-custom:hover{
  background: var(--gold);
}

/* ============================================================
   DETTAGLIO IMMOBILE (modalità show-details)
============================================================ */
#dettaglio{
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(
    to bottom,
    #0b0b0b,
    #000
  );
}


body.show-details #dettaglio{
  display: block !important;
  border-radius: 0 !important;
  width: 100vw;
  max-width: 100vw;
  padding: 28px 18px;
}

body.show-details nav,
body.show-details .hero,
body.show-details #immobili,
body.show-details #servizi,
body.show-details #agenzia,
body.show-details #vendi,
body.show-details #googleReviews,
body.show-details footer,
body.show-details .search-panel,
body.show-details .btn-contact{
  display: none !important;
}

/* Carousel */
#carouselDettagli{
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

#carouselDettagli img,
#carouselDettagli video{
  width: 100%;
  height: 440px;
  object-fit: cover;
}

#carouselDettagli .carousel-control-prev-icon,
#carouselDettagli .carousel-control-next-icon{
  filter: invert(1) brightness(2);
}

/* Titoli nel dettaglio */
#dettaglioTitolo{
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 6px;
}

#dettaglioPrezzo{
  font-size: 1.6rem;
  letter-spacing: .5px;
}


/* Box tecnici */
.tech-box{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: .9rem;
}

.tech-box strong{
  display: block;
  margin-top: 4px;
  font-weight: 700;
}

/* Mappa dettaglio */
#mapDettaglio{
  width: 100%;
  height: 340px;
  border-radius: var(--radius-md);
  background: #222;
  overflow: hidden;
}

/* Pulsanti contatto nel dettaglio */
#dettaglio .btn{
  border-radius: 999px !important;
  font-weight: 900;
}

#whatsappBtn{
  background: #25D366 !important;
  border: none !important;
  color: #fff !important;
}

#callBtn{
  background: var(--gold) !important;
  border: none !important;
  color: var(--white) !important;
}

#idealistaBtn{
  border-color: rgba(255,255,255,.25) !important;
  color: var(--white) !important;
}

#idealistaBtn:hover{
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}
#dettaglio h2,
#dettaglio h4,
#dettaglio h5{
  font-family: 'Playfair Display', serif;
}
#dettaglio p{
  line-height: 1.65;
  font-size: .95rem;
  color: rgba(255,255,255,.85);
}
#dettaglio h5{
  margin-top: 28px;
  margin-bottom: 10px;
  letter-spacing: .04em;
}

#dettaglio p,
#dettaglio .tech-box,
#dettaglio button{
  font-family: 'Roboto', sans-serif;
}

/* ============================================================
   MAPPA COMPLETA
============================================================ */
#mappaCompleta{
  width: 100%;
  height: 70vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* bottone chiudi mappa completa */
#chiudiMappaCompleta{
  border-radius: 999px !important;
  font-weight: 900;
  border-color: rgba(255,255,255,.35) !important;
  color: var(--white) !important;
}
#chiudiMappaCompleta:hover{
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* ============================================================
   SERVIZI / AGENZIA / VENDI (sezioni Bootstrap)
   - Mantengo un look pulito e coerente.
============================================================ */
/* Pulsante HOME nel dettaglio immobile */
.btn-home{
  background: #fff !important;
  color: var(--gold) !important;
  font-weight: 800;
  border-radius: 999px;
  padding: 12px 18px;
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-home i{
  font-size: 1.2rem;
}

/* Hover */
.btn-home:hover{
  background: var(--gold) !important;
  color: #fff !important;
}






/* box icone servizi */
.servizi-img-box{
  width: 110px;
  height: 110px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  transition: transform .20s ease, box-shadow .20s ease;
}

.servizi-img-box:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}


/* ============================================================
   FOOTER
============================================================ */
footer.bg-dark,
footer{
  background: var(--primary-dark) !important;
  color: var(--white) !important;
  border-top: 1px solid rgba(255,255,255,.12);
}

footer a{
  color: var(--white) !important;
  opacity: .95;
}

footer a:hover{
  color: var(--gold) !important;
  opacity: 1;
}

/* social icons */
.footer-social .social-link{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.2rem;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.footer-social .social-link:hover{
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-3px);
}

/* ============================================================
   CTA FIXED (WhatsApp / Call) - se presenti
============================================================ */
/* CONTENITORE PULSANTI – fisso in basso a destra */
.contact-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

/* STILE BASE PULSANTI */
.btn-contact {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: #fff;
}

/* WHATSAPP */
.btn-whatsapp {
  background-color: #25D366;
}
.btn-whatsapp:hover {
  background-color: #1ebe5d;
}

/* TELEFONO */
.btn-phone {
  background-color: #0d6efd;
}
.btn-phone:hover {
  background-color: #0b5ed7;
}

/* INSTAGRAM */
.btn-instagram {
  background: radial-gradient(circle at 30% 30%, 
    #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}
.btn-instagram:hover {
  filter: brightness(0.9);
}

/* FACEBOOK */
.btn-facebook {
  background-color: #1877f2;
}
.btn-facebook:hover {
  background-color: #145dbf;
}

/* ICONE */
.btn-contact i {
  font-size: 24px;
}

/* HOVER GENERALE */
.btn-contact:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* MOBILE */
@media (max-width: 576px) {
  .btn-contact {
    width: 48px;
    height: 48px;
  }
  .btn-contact i {
    font-size: 22px;
  }
}


/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 992px){
  .hero-text-overlay{ top: 48%; }
  .property-card .immagine-principale{ height: 220px; }
  #carouselDettagli img, #carouselDettagli video{ height: 360px; }
}

@media (max-width: 768px){
  .hero-logo{ width: min(320px, 78vw); }
  #carouselDettagli img, #carouselDettagli video{ height: 280px; }
  .btn-contact{ right: 12px; padding: 10px 14px !important; }
}
/* HERO: centra davvero il contenuto dell’overlay */
.hero-text-overlay{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Logo: centratura + niente “inline gap” */
.hero-logo{
  display: block;
  margin: 0 auto;
}
/* Reveal on scroll */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.reveal.reveal-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Varianti facoltative */
.reveal-left{ transform: translateX(-18px); }
.reveal-right{ transform: translateX(18px); }
.reveal-zoom{ transform: scale(.98); }

.reveal-left.reveal-visible,
.reveal-right.reveal-visible{
  transform: translateX(0);
}

.reveal-zoom.reveal-visible{
  transform: scale(1);
}

/* Accessibilità: se l’utente disattiva le animazioni */
@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-zoom{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/*.hero-text-overlay{
  background: rgba(0, 0, 0, 0.28);   
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  padding: 26px 34px;
  border-radius: 22px;

  box-shadow:
    0 14px 36px rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(255,255,255,.10);

  display: flex;
  align-items: center;
  justify-content: center;
}*/
/* TITOLI DI SEZIONE SEMPRE ROSSI */
.section-heading,
section h2 {
  color: var(--gold) !important;
}

.section-title {
  color: var(--gold) !important;
  opacity: 0.9;
}
/* SEZIONI CHIARE – testo nero coerente */
#servizi,
#vendi {
  background: #fff !important;
  color: #000 !important;
}

#servizi p,
#vendi p,
#servizi h5,
#vendi h5 {
  color: #000 !important;
}

#servizi .text-muted,
#vendi .text-muted {
  color: rgba(0,0,0,.65) !important;
}
section {
  border-top: 1px solid rgba(0,0,0,.05);
}
/* AGENZIA – versione chiara */
#agenzia {
  background: var(--white) !important;
  color: #000 !important;
}

#agenzia p,
#agenzia h5 {
  color: #000 !important;
}

#agenzia .text-muted {
  color: rgba(0,0,0,.65) !important;
}
/* SEZIONI SCURE (prima chiare) */
#servizi,
#vendi {
  background: var(--primary-dark) !important;
  color: var(--white) !important;
}

/* Testi nelle sezioni scure */
#servizi p,
#vendi p,
#servizi h5,
#vendi h5 {
  color: var(--white) !important;
}

/* Muted nelle sezioni scure */
#servizi .text-muted,
#vendi .text-muted {
  color: rgba(255,255,255,.75) !important;
}
/* SEZIONI SCURE (prima chiare) */
#servizi,
#vendi {
  background: var(--primary-dark) !important;
  color: var(--white) !important;
}

/* Testi nelle sezioni scure */
#servizi p,
#vendi p,
#servizi h5,
#vendi h5 {
  color: var(--white) !important;
}

/* Muted nelle sezioni scure */
#servizi .text-muted,
#vendi .text-muted {
  color: rgba(255,255,255,.75) !important;
}
/* Footer: ordine e leggibilità */
.footer-link{
  color: rgba(255,255,255,.9) !important;
  text-decoration: none !important;
}
.footer-link:hover{
  color: var(--gold) !important;
}

.footer-info{
  color: rgba(255,255,255,.78);
}

.footer-map{
  border: 1px solid rgba(255,255,255,.10);
}

.footer-bottom{
  color: rgba(255,255,255,.72);
}
/* #vendi: immagini leggermente più grandi */
#vendi .servizi-img-box{
  width: 150px;
  height: 150px;
  padding: 18px;
}

#vendi .servizi-img-box img{
  width: 135px;
  height: 135;
  object-fit: contain;
}
/* MOBILE: hamburger a sinistra, logo centrato */
@media (max-width: 991px){



  .navbar-toggler{
    order: 1;
    margin-left: 0;
  }


  .navbar-collapse{
    order: 3;
  }
}
.navbar-logo {
    margin-left: -27px;
}
/* Logo navbar */
.navbar-logo{
  height: 250px;
  width: auto;
  display: block;
}
.text-primary {
    --bs-text-opacity: 1;
    color: var(--gold) !important;
}