/* ═══════════════════════════════════════════════════════════
   GARDAIMMOBILI — vendite.css
   CSS completo per template: vendite.html
   ═══════════════════════════════════════════════════════════ */

  
:root {  
  --navy:    #0f1f38;  
  --gold:    #b8965a;  
  --gold-lt: #d4b07a;  
  --cream:   #f7f4ef;  
  --warm:    #ede8e0;  
  --text:    #1a1a1a;  
  --muted:   #6b6560;  
  --white:   #ffffff;  
  --serif:   'Cormorant Garamond', Georgia, serif;  
  --sans:    'Jost', sans-serif;  
  --trans:   .35s cubic-bezier(.4,0,.2,1);  
}  

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }  
html { scroll-behavior: smooth; }  
body { font-family: var(--sans); font-weight: 300; color: var(--text); background: var(--white); overflow-x: hidden; }  

/* ── TOPBAR ── */  
.topbar {  
  background: var(--navy);  
  color: rgba(255,255,255,.7);  
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;  
  display: flex; justify-content: space-between; align-items: center;  
  padding: .55rem 3rem;  
}  
.topbar a { color: rgba(255,255,255,.7); text-decoration: none; transition: color var(--trans); }  
.topbar a:hover { color: var(--gold-lt); }  
.topbar-left { display: flex; gap: 2rem; }  
.topbar-right { display: flex; gap: 1.2rem; align-items: center; }  
.lang-btn {  
  background: none; border: 1px solid rgba(255,255,255,.25);  
  color: rgba(255,255,255,.7); padding: .2rem .6rem;  
  font-size: .68rem; letter-spacing: .1em;  
  cursor: pointer; transition: all var(--trans); font-family: var(--sans);  
}  
.lang-btn:hover, .lang-btn.active { border-color: var(--gold); color: var(--gold); }  

/* ── NAVBAR ── */  
nav {  
  position: sticky; top: 0; z-index: 100;  
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);  
  border-bottom: 1px solid rgba(184,150,90,.2);  
  display: flex; align-items: center; justify-content: space-between;  
  padding: 0 3rem; height: 72px;  
  box-shadow: 0 2px 20px rgba(15,31,56,.06);  
  transition: all var(--trans);  
}  
.logo {  
  font-family: var(--serif); font-size: 1.55rem; font-weight: 600;  
  color: var(--navy); text-decoration: none; letter-spacing: .04em;  
  display: flex; align-items: center; gap: .6rem;  
}  
.logo span { color: var(--gold); }  
.logo-sub {  
  font-family: var(--sans); font-size: .58rem;  
  letter-spacing: .25em; text-transform: uppercase;  
  color: var(--muted); display: block; margin-top: -2px;  
}  
.nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; }  
.nav-links a {  
  text-decoration: none; color: var(--navy);  
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;  
  font-weight: 400; position: relative; padding-bottom: 4px;  
  transition: color var(--trans);  
}  
.nav-links a::after {  
  content: ''; position: absolute; bottom: 0; left: 0;  
  width: 0; height: 1px; background: var(--gold);  
  transition: width var(--trans);  
}  
.nav-links a:hover, .nav-links a.active { color: var(--gold); }  
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }  
.nav-cta {  
  background: var(--gold); color: var(--white) !important;  
  padding: .5rem 1.4rem; border: none;  
  font-size: .72rem !important; letter-spacing: .14em;  
  transition: background var(--trans) !important;  
}  
.nav-cta::after { display: none !important; }  
.nav-cta:hover { background: var(--navy) !important; }  

/* ── HERO MINI ── */  
.hero-mini {  
  height: 320px; position: relative;  
  display: flex; align-items: center; justify-content: center;  
  text-align: center; overflow: hidden;  
}  
.hero-mini-bg {  
  position: absolute; inset: 0;  
  background:  
    linear-gradient(160deg, rgba(15,31,56,.75) 0%, rgba(15,31,56,.5) 100%),  
    url('/assets/images/hero/porto-desenzano-lago-garda.webp') center/cover no-repeat;  
}  
.hero-mini-content { position: relative; z-index: 2; }  
.hero-mini-content h1 {
  font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 300; color: var(--white); line-height: 1.1; margin-bottom: .8rem;
}
.hero-mini-content h1 em { font-style: italic; color: var(--gold-lt); }  
.hero-mini-content p {  
  color: rgba(255,255,255,.75); font-size: .88rem;  
  letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1rem;  
}  
.breadcrumb { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }  
.breadcrumb a { color: var(--gold-lt); text-decoration: none; }  

/* ── LAYOUT ── */
.listings-layout {
  display: block; padding: 4rem 3rem;
}

/* ── GRIGLIA ── */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 2rem;
}  
.prop-card {
  background: var(--white); border: 1px solid rgba(184,150,90,.15);
  overflow: hidden; opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease, box-shadow var(--trans);
  display: flex; flex-direction: column;
}
.prop-card.visible { opacity: 1; transform: translateY(0); }

/* ── SKELETON (CLS prevention) ── */
.prop-card.skeleton {
  opacity: 1; transform: none; pointer-events: none;
  border: 1px solid rgba(184,150,90,.1);
}
.prop-card.skeleton .card-img {
  background: linear-gradient(90deg, var(--warm) 25%, var(--white) 50%, var(--warm) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.prop-card.skeleton .card-body-sk {
  padding: 1.5rem; flex: 1;
  background: var(--cream);
  display: flex; flex-direction: column; gap: .8rem;
}
.prop-card.skeleton .sk-line {
  height: 14px; border-radius: 4px;
  background: linear-gradient(90deg, var(--warm) 25%, var(--white) 50%, var(--warm) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.prop-card.skeleton .sk-line.sk-short { width: 55%; }
.prop-card.skeleton .sk-line.sk-tall { height: 20px; width: 80%; }
@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}  
.prop-card:hover { box-shadow: 0 20px 50px rgba(15,31,56,.12); }  
.card-img {  
  position: relative; aspect-ratio: 4/3;  
  overflow: hidden; background: var(--warm);  
}  
.card-img img {  
  width: 100%; height: 100%; object-fit: cover;  
  transition: transform .6s ease;  
}  
.prop-card:hover .card-img img { transform: scale(1.05); }  
.badge-type {  
  position: absolute; top: 1rem; left: 1rem;  
  background: var(--navy); color: var(--gold);  
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;  
  padding: .3rem .8rem;  
}  
.price-overlay {  
  position: absolute; bottom: 1rem; right: 1rem;  
  background: rgba(15,31,56,.85); color: var(--white);  
  font-family: var(--serif); font-size: 1.1rem;  
  padding: .4rem .9rem; backdrop-filter: blur(4px);  
}  
.card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }  
.card-location {  
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;  
  color: var(--gold); margin-bottom: .4rem;  
}  
.card-title {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 400;
  color: var(--navy); line-height: 1.25; margin-bottom: .4rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}  
.card-title-repeat {  
  font-size: .82rem; color: var(--muted); line-height: 1.5;  
  margin-bottom: 1rem; font-style: italic; font-family: var(--serif);  
}  
.card-specs {  
  display: flex; gap: 1.2rem; font-size: .68rem;  
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);  
  border-top: 1px solid var(--warm); padding-top: .9rem; margin-bottom: 1rem;  
}  
.card-buttons { display: flex; gap: .8rem; align-items: center; margin-top: auto; }  
.btn-details {  
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;  
  color: var(--gold); text-decoration: none;  
  border-bottom: 1px solid rgba(184,150,90,.4); padding-bottom: 2px;  
  transition: all var(--trans);  
}  
.btn-details:hover { color: var(--navy); border-color: var(--navy); }  
.btn-wa {  
  background: #1A6B1A; color: var(--white);  
  padding: .45rem 1rem; font-size: .68rem; letter-spacing: .1em;  
  text-transform: uppercase; font-weight: 500;  
  text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;  
  transition: background var(--trans); margin-left: auto;  
}  
.btn-wa:hover { background: #1da851; }  

/* ── STATO VUOTO ── */  
.empty-state {  
  grid-column: 1 / -1; text-align: center;  
  padding: 5rem 2rem; background: var(--cream);  
  border: 1px solid rgba(184,150,90,.15);  
}  
.empty-state h3 {  
  font-family: var(--serif); font-size: 1.8rem;  
  font-weight: 300; color: var(--navy); margin-bottom: .8rem;  
}  
.empty-state p { font-size: .88rem; color: var(--muted); margin-bottom: 2rem; }  
.btn-cta-empty {  
  background: var(--gold); color: var(--white);  
  padding: .8rem 2rem; border: none; font-family: var(--sans);  
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;  
  font-weight: 500; cursor: pointer; transition: background var(--trans);  
  text-decoration: none; display: inline-block;  
}  
.btn-cta-empty:hover { background: var(--navy); }  

/* ── PAGINAZIONE ── */  
.pagination {  
  display: flex; justify-content: center; gap: .8rem;  
  padding: 2rem 3rem 4rem; align-items: center;  
}  
.page-item {  
  cursor: pointer; padding: .5rem 1rem; font-size: .78rem;  
  letter-spacing: .1em; color: var(--navy);  
  border: 1px solid rgba(184,150,90,.25); background: var(--white);  
  transition: all var(--trans); font-family: var(--sans);  
}  
.page-item:hover { border-color: var(--gold); color: var(--gold); }  
.page-item.active-page { background: var(--gold); color: var(--white); border-color: var(--gold); }  
.page-item.disabled { opacity: .4; cursor: default; pointer-events: none; }  

/* ── FOOTER ── */  
footer { background: #0a1628; padding: 4rem 3rem 2rem; color: rgba(255,255,255,.5); }  
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }  
.footer-logo { font-family: var(--serif); font-size: 1.4rem; color: var(--white); margin-bottom: 1.5rem; display: block; }  
.footer-about { font-size: .82rem; line-height: 1.8; margin-bottom: 2rem; }  
.footer-col h4 { font-size: .65rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; }  
.footer-col ul { list-style: none; }  
.footer-col li { margin-bottom: .6rem; }  
.footer-col a { color: rgba(255,255,255,.5); text-decoration: none; font-size: .82rem; transition: color var(--trans); }  
.footer-col a:hover { color: var(--gold-lt); }  
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 2rem;
  display: flex; justify-content: space-between; align-items: center; font-size: .72rem;
}
.footer-bottom a { color: rgba(255,255,255,.4); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-lt); }

/* ── WHATSAPP FLOAT ── */
.whatsapp-float {  
  position: fixed; bottom: 25px; right: 25px;  
  background: #1A6B1A; color: white; width: 60px; height: 60px;  
  border-radius: 50%; display: flex; align-items: center; justify-content: center;  
  font-size: 28px; box-shadow: 0 4px 15px rgba(0,0,0,.2);  
  z-index: 1000; transition: all .3s; text-decoration: none;  
}  
.whatsapp-float:hover { transform: scale(1.1); background: #20b358; }  

/* ── COOKIE BANNER ── */  
.cookie-banner {  
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;  
  background: rgba(10,22,40,.97); backdrop-filter: blur(10px);  
  padding: 1.5rem 3rem; display: flex; align-items: center;  
  justify-content: space-between; gap: 2rem;  
  transform: translateY(100%); transition: transform .5s ease;  
}  
.cookie-banner.show { transform: translateY(0); }  
.cookie-text { font-size: .8rem; color: rgba(255,255,255,.65); line-height: 1.6; max-width: 600px; }  
.cookie-text a { color: var(--gold-lt); }  
.cookie-btns { display: flex; gap: .8rem; flex-shrink: 0; }  
.cookie-accept {  
  background: var(--gold); color: var(--white); border: none;  
  padding: .6rem 1.6rem; font-family: var(--sans); font-size: .72rem;  
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;  
  transition: background var(--trans);  
}  
.cookie-accept:hover { background: var(--gold-lt); }  
.cookie-refuse {  
  background: none; color: rgba(255,255,255,.5);  
  border: 1px solid rgba(255,255,255,.2); padding: .6rem 1.6rem;  
  font-family: var(--sans); font-size: .72rem; letter-spacing: .12em;  
  text-transform: uppercase; cursor: pointer; transition: all var(--trans);  
}  
.cookie-refuse:hover { border-color: var(--gold); color: var(--gold); }  

/* ── RESPONSIVE ── */
@media (max-width: 1400px) {
  .topbar-left span { display: none; }
  .topbar { padding: .55rem 1.5rem; }
  .topbar-left { gap: 1.2rem; }
}

@media (max-width: 1024px) {
  .properties-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}  
.menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: .4rem; }  
.menu-toggle span { width: 24px; height: 2px; background: var(--navy); display: block; transition: var(--trans); }  

/* ── FILTRI MOBILE TOGGLE ── */  
.filter-toggle-btn {  
  display: none;  
  width: 100%; background: var(--navy); color: var(--white);  
  border: none; padding: .85rem 1.5rem;  
  font-family: var(--sans); font-size: .75rem; letter-spacing: .16em;  
  text-transform: uppercase; font-weight: 500; cursor: pointer;  
  align-items: center; justify-content: space-between;  
  transition: background var(--trans);  
}  
.filter-toggle-btn:hover { background: var(--gold); }  
.filter-toggle-btn .arrow { display: inline-block; transition: transform .3s ease; }  
.filter-toggle-btn.open .arrow { transform: rotate(180deg); }  

@media (max-width: 768px) {  
  .topbar { display: none; }  
  nav { padding: 0 1.5rem; position: relative; }  
  .nav-links {  
    display: none; flex-direction: column;  
    position: fixed; top: 64px; left: 0; right: 0;  
    background: rgba(255,255,255,.98); backdrop-filter: blur(12px);  
    padding: 1.5rem; gap: 1.2rem; z-index: 99;  
    border-bottom: 1px solid rgba(184,150,90,.2);  
    box-shadow: 0 8px 20px rgba(15,31,56,.08);  
    list-style: none;  
  }  
  .nav-links.show { display: flex; }  
  .menu-toggle { display: flex; }  
  .listings-layout { padding: 1.5rem 1rem; }
  .properties-grid { grid-template-columns: 1fr; }  
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }  
  .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }  
  .cookie-banner { flex-direction: column; align-items: flex-start; padding: 1.5rem; }  
  .pagination { padding: 2rem 1.5rem; flex-wrap: wrap; }  
  .card-title-repeat { font-size: .95rem; }  
  .card-title { font-size: 1.2rem; }  
}  

/* ── SELETTORE LINGUA MOBILE (navbar) ── */  
.nav-lang-select {  
  display: none;  
  background: none;  
  border: 1px solid rgba(184,150,90,.5);  
  color: var(--navy);  
  font-family: var(--sans);  
  font-size: .72rem;  
  letter-spacing: .08em;  
  padding: .3rem .5rem;  
  cursor: pointer;  
  outline: none;  
  transition: border-color var(--trans);  
}  
.nav-lang-select:focus { border-color: var(--gold); }  
@media (max-width: 768px) {  
  .nav-lang-select { display: block; }  
}  
.logo-img {
  height: 36px;
  width: auto;
  display: block;
}
.footer-logo-img {
  height: 28px;
  width: auto;
  display: block;
  opacity: 0.9;
}
@media (max-width: 768px) {
  .logo-img { height: 28px; }
  .footer-logo-img { height: 22px; }
}

/* ── SEARCH BAR ── */
.search-section {
  background: var(--navy);
  padding: 2rem 3rem;
}
.search-form {
  display: grid;
  grid-template-columns: repeat(5, 1fr) auto;
  gap: 1px; background: rgba(255,255,255,.1);
  max-width: 1400px; margin: 0 auto;
}
.search-field {
  background: rgba(255,255,255,.06);
  padding: 1rem 1.4rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.search-field label {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-lt); white-space: nowrap;
}
.search-field select, .search-field input {
  background: none; border: none; outline: none;
  color: var(--white); font-family: var(--sans);
  font-size: .85rem; font-weight: 300;
  cursor: pointer;
}
.search-field select option { background: var(--navy); }
.search-btn {
  background: var(--gold); border: none; cursor: pointer;
  color: var(--white); padding: 0 2rem;
  font-family: var(--sans); font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase;
  font-weight: 500; transition: background .2s;
}
.search-btn:hover { background: var(--gold-lt); }

/* fix altezza uniforme select/input */
.search-field select,
.search-field input {
  min-height: 2rem;
}

@media (max-width: 900px) {
  .search-form { grid-template-columns: 1fr 1fr; }
  /* nasconde Codice Immobile su tablet/mobile */
  .search-field:has(#srch-codice) { display: none; }
}
@media (max-width: 900px) {
  .search-btn { grid-column: 1 / -1; padding: 1.2rem 0; }
}
@media (max-width: 600px) {
  .search-section { padding: 1.5rem 1rem; }
  .search-form { grid-template-columns: 1fr 1fr; gap: 2px; }
  .search-btn { grid-column: 1 / -1; padding: 1rem 0; font-size: .8rem; }
}
@media (max-width: 480px) {
  .search-field select,
  .search-field input {
    font-size: 1rem;
    min-height: 48px;
  }
  .search-field label { font-size: .75rem; }
}

.footer-col li { font-size: .82rem; }
.footer-col li span { font-size: inherit; color: rgba(255,255,255,.5); }

.footer-social { display: flex; gap: .8rem; margin-top: 1.4rem; }
.footer-social-link { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.2); transition: background .2s, border-color .2s; }
.footer-social-link:hover { background: var(--gold); border-color: var(--gold); }
.footer-social-link svg { width: 16px; height: 16px; fill: rgba(255,255,255,.9); }
.footer-social-link:hover svg { fill: var(--white); }
/* SEO content block (accordion) */
.vendite-seo{background:var(--cream,#f7f3ec);padding:2.4rem 1.5rem;border-top:1px solid rgba(0,0,0,.06);}
.vendite-seo-inner{max-width:900px;margin:0 auto;}
.vendite-seo-head{margin:0;}
.vendite-seo-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:none;padding:0;margin:0;cursor:pointer;text-align:left;font-family:var(--serif,Georgia,serif);color:var(--navy,#1c2b45);font-size:1.55rem;line-height:1.25;font-weight:400;}
.vendite-seo-toggle em{font-style:italic;color:var(--gold-lt,#d4b07a);}
.vseo-chev{flex:none;width:26px;height:26px;stroke:var(--gold,#b8965a);transition:transform .3s ease;}
.vendite-seo-toggle[aria-expanded="true"] .vseo-chev{transform:rotate(180deg);}
.vendite-seo-panel{overflow:hidden;max-height:0;transition:max-height .35s ease;}
.vendite-seo-panel-inner{padding-top:1.1rem;}
.vendite-seo p{color:var(--text,#3a4658);line-height:1.85;font-size:.95rem;margin:0 0 .8rem;}
.vendite-seo-panel-inner p:last-child{margin-bottom:0;}
.vendite-seo strong{color:var(--navy,#1c2b45);font-weight:600;}