/* ============================================================
   Immobili Piacenza — Stili personalizzati
   Complemento a Bootstrap 5.3: qui solo ciò che BS non copre
   o che va ri-mappato sulla palette del logo.
   ============================================================ */

/* --- 1. Palette estratta dal logo ------------------------- */
:root {
  /* Il logo usa il rosso puro #FF0000 del file originale. L'interfaccia usa
     un rosso appena più scuro: su #FF0000 il testo bianco darebbe 4,0:1,
     sotto la soglia AA; #EB0000 arriva a 4,6:1 restando indistinguibile. */
  --sap-red:        #EB0000;
  --sap-red-dark:   #C00000;
  --sap-red-darker: #950000;
  --sap-red-light:  #FFCFCF;
  --sap-red-tint:   #FFF3F3;
  --sap-ink:         #2B3440;
  --sap-muted:       #6B7785;
  --sap-grey:        #F5F7FA;
  --sap-line:        #E2E8F0;
  --sap-accent:      #64748B;

  /* Ri-mappatura dei token Bootstrap: le utility native
     (btn-primary, text-primary, bg-primary...) escono già nel rosso del logo */
  --bs-primary:      #EB0000;
  --bs-primary-rgb:  235, 0, 0;
  --bs-link-color:         #EB0000;
  --bs-link-color-rgb:     235, 0, 0;
  --bs-link-hover-color:   #C00000;
  --bs-body-color:   #2B3440;
  --bs-body-font-family: "Inter", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --bs-border-color: #E2E8F0;

  --sap-radius:  .75rem;
  --sap-shadow:     0 1px 2px rgba(43,52,64,.06), 0 4px 16px rgba(43,52,64,.06);
  --sap-shadow-lg:  0 8px 32px rgba(149,0,0,.16);
}

/* Bootstrap 5.3 genera i suoi bottoni da variabili proprie:
   le sovrascriviamo per btn-primary e btn-outline-primary */
.btn-primary {
  --bs-btn-bg: var(--sap-red);
  --bs-btn-border-color: var(--sap-red);
  --bs-btn-hover-bg: var(--sap-red-dark);
  --bs-btn-hover-border-color: var(--sap-red-dark);
  --bs-btn-active-bg: var(--sap-red-darker);
  --bs-btn-active-border-color: var(--sap-red-darker);
  --bs-btn-disabled-bg: var(--sap-red);
  --bs-btn-disabled-border-color: var(--sap-red);
  --bs-btn-focus-shadow-rgb: 235, 0, 0;
}
.btn-outline-primary {
  --bs-btn-color: var(--sap-red);
  --bs-btn-border-color: var(--sap-red);
  --bs-btn-hover-bg: var(--sap-red);
  --bs-btn-hover-border-color: var(--sap-red);
  --bs-btn-active-bg: var(--sap-red-dark);
  --bs-btn-active-border-color: var(--sap-red-dark);
  --bs-btn-focus-shadow-rgb: 235, 0, 0;
}
.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sap-accent);
  --bs-btn-border-color: var(--sap-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4E5AB;
  --bs-btn-hover-border-color: #4E5A6B;
  --bs-btn-focus-shadow-rgb: 100, 116, 139;
}
.text-sap        { color: var(--sap-red) !important; }
.text-sap-dark   { color: var(--sap-red-dark) !important; }
.bg-sap-tint     { background-color: var(--sap-red-tint) !important; }
.bg-sap-grey     { background-color: var(--sap-grey) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--sap-red);
  box-shadow: 0 0 0 .2rem rgba(235,0,0,.16);
}

/* --- 2. Base ---------------------------------------------- */
body {
  font-family: var(--bs-body-font-family);
  color: var(--sap-ink);
  padding-top: 76px;             /* compensa la navbar fixed-top */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .h1, .h2, .h3 { font-weight: 700; letter-spacing: -.015em; }
.section-title { position: relative; padding-bottom: .75rem; margin-bottom: 1.75rem; }
.section-title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 3px; border-radius: 2px; background: var(--sap-red);
}
.text-center .section-title::after { left: 50%; transform: translateX(-50%); }

/* --- 3. Navbar -------------------------------------------- */
.navbar-sap {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sap-line);
  min-height: 76px;
  transition: box-shadow .25s ease;
}
.navbar-sap.is-scrolled { box-shadow: 0 2px 14px rgba(43,52,64,.09); }
.navbar-sap .navbar-brand img { height: 46px; width: auto; display: block; }
.navbar-sap .nav-link {
  font-weight: 600; color: var(--sap-ink);
  padding: .5rem .95rem; border-radius: .4rem; position: relative;
}
.navbar-sap .nav-link:hover,
.navbar-sap .nav-link:focus-visible { color: var(--sap-red); }
.navbar-sap .nav-link.active { color: var(--sap-red); }
.navbar-sap .nav-link.active::after {
  content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .15rem;
  height: 2px; border-radius: 2px; background: var(--sap-red);
}
@media (max-width: 991.98px) {
  .navbar-sap .nav-link.active::after { display: none; }
  .navbar-sap .nav-link.active { background: var(--sap-red-tint); }
}

/* --- 4. Hero ---------------------------------------------- */
.hero {
  position: relative;
  /* Nessun motivo: solo il gradiente di base più due sorgenti di luce.
     Una schiarisce in alto a sinistra, l'altra scurisce in basso a destra,
     dove il gradiente arriverebbe troppo chiaro sotto al box di ricerca. */
  background-color: #7A0000;
  background-image:
    /* scrim laterale: garantisce il contrasto del testo sul lato sinistro,
       dove la sorgente di luce schiarirebbe il fondo sotto la soglia AA */
    linear-gradient(90deg, rgba(42, 0, 0,.30) 0%, rgba(42, 0, 0,0) 65%),
    radial-gradient(55% 55% at 22% 18%, rgba(255,132,132,.30) 0%, rgba(255,132,132,0) 100%),
    radial-gradient(60% 60% at 88% 90%, rgba( 56, 0, 0,.55) 0%, rgba( 56, 0, 0,0) 100%),
    linear-gradient(118deg, #4D0000 0%, #7A0000 40%, #C00000 78%, #F03A3A 100%);
  color: #fff;
  padding: 5rem 0 7rem;
}
.hero > .container { position: relative; }
.hero h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); text-shadow: 0 2px 18px rgba(0,0,0,.28); }
.hero .lead { color: rgba(255,255,255,.92); max-width: 46rem; }

/* Box di ricerca rapida sovrapposto all'hero */
.search-box {
  background: #fff;
  border-radius: var(--sap-radius);
  box-shadow: var(--sap-shadow-lg);
  padding: 1.5rem;
  margin-top: -4.5rem;
  position: relative; z-index: 3;
}
.search-box label { font-size: .8rem; font-weight: 600; color: var(--sap-muted); text-transform: uppercase; letter-spacing: .04em; }

/* --- 5. Card immobile ------------------------------------- */
.card-immobile {
  border: 1px solid var(--sap-line);
  border-radius: var(--sap-radius);
  overflow: hidden;
  background: #fff;
  height: 100%;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.card-immobile:hover,
.card-immobile:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--sap-shadow-lg);
  border-color: var(--sap-red-light);
}
.card-immobile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sap-red-tint);
}
.card-immobile__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.card-immobile:hover .card-immobile__media img { transform: scale(1.06); }

.card-immobile__badges {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.badge-sap {
  background: var(--sap-red); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .35rem .6rem; border-radius: 999px;
}
.badge-sap--outline { background: rgba(255,255,255,.94); color: var(--sap-red-dark); }
.badge-sap--accent  { background: var(--sap-accent); }
.badge-sap--muted   { background: var(--sap-muted); }

.card-immobile__prezzo {
  position: absolute; bottom: .75rem; left: .75rem; z-index: 2;
  background: rgba(43,52,64,.86); color: #fff;
  padding: .4rem .8rem; border-radius: .5rem;
  font-weight: 700; font-size: 1.05rem;
  backdrop-filter: blur(4px);
}
.card-immobile__body { padding: 1.15rem; display: flex; flex-direction: column; gap: .6rem; }
.card-immobile__titolo {
  font-size: 1.05rem; font-weight: 700; line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-immobile__luogo { font-size: .875rem; color: var(--sap-muted); margin: 0; }
.card-immobile__desc {
  font-size: .875rem; color: var(--sap-muted); margin: 0; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-immobile__specs {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  padding-top: .7rem; margin-top: auto;
  border-top: 1px solid var(--sap-line);
  font-size: .82rem; color: var(--sap-ink);
}
.card-immobile__specs span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.card-immobile__specs svg { flex: none; color: var(--sap-red); }
.card-immobile__link::after {   /* rende cliccabile l'intera card */
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.card-immobile { position: relative; }

/* --- 6. Sidebar filtri ------------------------------------ */
.filtri-panel {
  background: #fff;
  border: 1px solid var(--sap-line);
  border-radius: var(--sap-radius);
  padding: 1.25rem;
}
@media (min-width: 992px) {
  .filtri-panel { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
}
.filtri-panel h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sap-muted); }
.filtro-group { padding: 1rem 0; border-top: 1px solid var(--sap-line); }
.filtro-group:first-of-type { border-top: 0; padding-top: .25rem; }
.filtro-group > legend {
  font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--sap-ink); margin-bottom: .6rem; float: none;
}
.form-check-label { font-size: .9rem; cursor: pointer; }
.form-check-input:checked { background-color: var(--sap-red); border-color: var(--sap-red); }
.form-check-input:focus { border-color: var(--sap-red); box-shadow: 0 0 0 .2rem rgba(235,0,0,.18); }

/* Chip dei filtri attivi */
.chip-filtro {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--sap-red-tint); color: var(--sap-red-dark);
  border: 1px solid var(--sap-red-light);
  border-radius: 999px; padding: .25rem .5rem .25rem .75rem;
  font-size: .8rem; font-weight: 600;
}
.chip-filtro button {
  border: 0; background: transparent; color: inherit;
  line-height: 1; padding: 0 .1rem; font-size: 1.1rem; cursor: pointer; opacity: .65;
}
.chip-filtro button:hover { opacity: 1; }

/* --- 7. Modal dettaglio ----------------------------------- */
.modal-dettaglio .modal-content { border: 0; border-radius: var(--sap-radius); overflow: hidden; }
.modal-dettaglio .modal-header {
  background: var(--sap-red-dark); color: #fff; border-bottom: 0; padding: 1.25rem 1.5rem;
}
.modal-dettaglio .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.dettaglio-hero { aspect-ratio: 16 / 8; max-height: 300px; background: var(--sap-red-tint); }
.dettaglio-hero img { width: 100%; height: 100%; object-fit: cover; }
.dettaglio-stat {
  background: var(--sap-red-tint); border-radius: .5rem; padding: .85rem;
  text-align: center; height: 100%;
}
.dettaglio-stat__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sap-muted); }
.dettaglio-stat__valore { font-size: 1.1rem; font-weight: 700; color: var(--sap-red-dark); line-height: 1.3; }
.tabella-catastale th { width: 42%; font-weight: 600; color: var(--sap-muted); font-size: .875rem; }
.tabella-catastale td { font-size: .875rem; }
.lista-caratteristiche { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.5rem; }
.lista-caratteristiche li {
  font-size: .9rem; padding: .3rem 0 .3rem 1.4rem; position: relative; break-inside: avoid;
}
.lista-caratteristiche li::before {
  content: ""; position: absolute; left: 0; top: .72rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sap-red);
}
@media (max-width: 575.98px) { .lista-caratteristiche { columns: 1; } }

/* --- 8. Stato vuoto / skeleton ---------------------------- */
.stato-vuoto { padding: 4rem 1rem; text-align: center; color: var(--sap-muted); }
.stato-vuoto svg { color: var(--sap-red-light); margin-bottom: 1rem; }
.skeleton-card {
  border: 1px solid var(--sap-line); border-radius: var(--sap-radius); overflow: hidden; background: #fff;
}
.skeleton-box {
  background: linear-gradient(90deg, #EEF2F6 25%, #E2E8F0 37%, #EEF2F6 63%);
  background-size: 400% 100%;
  animation: sap-shimmer 1.4s ease infinite;
}
@keyframes sap-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-box { animation: none; }
  .card-immobile, .card-immobile__media img, .whatsapp-float { transition: none; }
  .card-immobile:hover, .whatsapp-float:hover { transform: none; }
}

/* --- 9. Footer -------------------------------------------- */
.footer-sap { background: var(--sap-ink); color: rgba(255,255,255,.75); padding: 3.5rem 0 0; }
.footer-sap h5 {
  color: #fff; font-size: .9rem; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 1.1rem;
}
.footer-sap a { color: rgba(255,255,255,.75); text-decoration: none; }
.footer-sap a:hover { color: #fff; text-decoration: underline; }
/* il footer carica già la variante monocroma bianca: nessun filtro necessario */
.footer-sap .footer-logo { height: 44px; opacity: .92; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2.5rem; padding: 1.25rem 0; font-size: .82rem;
}

/* --- 10. Utility ------------------------------------------ */
.icona-tonda {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--sap-red-tint); color: var(--sap-red);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
/* --- Azioni fisse in basso a destra ---------------------- */
/* WhatsApp e "torna su" condividono l'angolo: impilati, non sovrapposti.
   Il WhatsApp resta in basso perché è sempre presente; il "torna su"
   compare sopra di esso solo dopo lo scroll. */
.whatsapp-float {
  position: fixed; right: 24px; bottom: 28px; z-index: 1031;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  color: #fff;
}
.whatsapp-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.whatsapp-float svg { width: 30px; height: 30px; fill: currentColor; }

.back-to-top {
  /* 28 (bottom del WhatsApp) + 56 (sua altezza) + 12 di respiro */
  position: fixed; bottom: 96px; z-index: 1030;
  /* centrato sulla colonna del WhatsApp, che è più largo di 12 px */
  right: 30px;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--sap-red); color: #fff; box-shadow: var(--sap-shadow-lg);
  display: none; align-items: center; justify-content: center;
}
.back-to-top.is-visible { display: flex; }

@media (max-width: 575.98px) {
  .whatsapp-float { right: 16px; bottom: 20px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
  /* 16 + (52-40)/2 = 22, così resta centrato sulla colonna del WhatsApp */
  .back-to-top { right: 22px; bottom: 84px; width: 40px; height: 40px; }
}
.visually-focusable:focus { position: static; width: auto; height: auto; overflow: visible; }