/* ==========================================================
   src/main/webapp/css/main.css  (agg. 2025-05-18)
   ========================================================== */
@charset "UTF-8";

/* ────────────────────────────────────────────────────────── */
/* RESET + VARIABLES                                         */
/* ────────────────────────────────────────────────────────── */
:root{
  /* ► Palette PTRS */
  --sr-primary:#eb2f2f;               /* rosso vivo */
  --sr-primary-dark:#C42C44;          /* rosso/magenta scuro */
  --sr-secondary:#b22222;             /* FireBrick */
  --sr-bg:#06111C;                    /* quasi-nero bluastro */
  --sr-surface:#0D1C2A;               /* blu/grigio scuro */
  --sr-text:#F0F8FF;                  /* AliceBlue */
  --sr-muted:#8AD1C9;                 /* acqua chiaro */
  --sr-border:rgba(255,255,255,.08);
  --sr-shadow-light:0 1px 4px rgba(0,0,0,.3);
  --sr-shadow-deep:0 4px 12px rgba(0,0,0,.4);
  --sr-avaible:#4CAF50;               /* success green */

  /* ► Booking (derivati) */
  --booking-available-bg:var(--sr-avaible);
  --booking-mine-bg:var(--sr-muted);
  --booking-booked-bg:var(--sr-primary-dark);
  --booking-unavailable-bg:rgba(255,56,80,.1);
  --booking-unavailable-text:var(--sr-primary);

  /* ► Tipografia & spaziatura */
  --font-base:'Inter',system-ui,sans-serif;
  --font-heading:'Poppins',sans-serif;
  --fs-sm:.875rem;
  --fs-base:1rem;
  --fs-lg:1.125rem;
  --fs-xl:1.5rem;
  --sp-xs:.25rem;
  --sp-sm:.5rem;
  --sp-md:1rem;
  --sp-lg:1.5rem;
  --sp-xl:2rem;
  --radius-sm:.375rem;
  --radius-md:.75rem;

  /* ───────── Legacy alias ───────── */
  --bg:var(--sr-bg);
  --surface:var(--sr-surface);
  --primary:var(--sr-surface);
  --secondary:var(--sr-text);
  --light:var(--sr-text);
  --text:var(--sr-text);
  --shadow:rgba(0,0,0,.4);
  
    
    --card-max: 820px;   /* oppure 860px, l’importante è che sia unico */
  
}

/* ────────────────────────────────────────────────────────── */
/* GLOBAL RESET                                              */
/* ────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{height:auto;}
body{
  margin:0;
  font-family:var(--font-base);
  background:var(--sr-bg);
  color:var(--sr-text);
  line-height:1.6;
}
a{color:var(--sr-primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--sr-primary-dark)}
/* 2. Layout a tutta altezza SOLO per la landing */
body.landing{
  /* fallback prima, override dopo */
  min-height:100vh;      /* vecchi browser */
  min-height:100dvh;     /* moderni */
  display:flex;
  flex-direction:column;
}

/* ────────────────────────────────────────────────────────── */
/* TYPOGRAPHY                                                */
/* ────────────────────────────────────────────────────────── */
h1,h2,h3,h4{
  margin:var(--sp-lg) 0 var(--sp-md);
  font-family:var(--font-heading);
  color:var(--sr-text)
}
h1{font-size:var(--fs-xl)}
h2{font-size:var(--fs-lg)}

/* ────────────────────────────────────────────────────────── */
/* LAYOUT GENERICO                                           */
/* ────────────────────────────────────────────────────────── */
.container{
  width:min(95%,1200px);
  margin:0 auto;
  padding:var(--sp-lg) 0;
}

.hidden{    
	display: none;
}

/* NAVBAR --------------------------------------------------- */
.navbar{
	
  display:flex;justify-content:space-between;align-items:center;
  background:var(--sr-surface);box-shadow:var(--sr-shadow-light);
  padding:var(--sp-md) var(--sp-lg);position:sticky;top:0;z-index:100;
  overflow-x:hidden;
    flex-shrink: 0; 
  
}
.navbar__brand{
  font-family:var(--font-heading);font-size:var(--fs-lg);font-weight:700;
  color:var(--sr-text);white-space:nowrap
}


.navbar__links::-webkit-scrollbar{display:none}
.navbar__links a{white-space:nowrap}
.navbar__links .btn-primary{background:var(--sr-primary);color:var(--sr-text)}
.navbar__links .btn-primary:hover{background:var(--sr-primary-dark)}

/* NAVBAR MOBILE TOGGLE */



/* SIDEBAR (area admin) ------------------------------------ */
.sidebar{
  width:240px;background:var(--sr-surface);border-right:1px solid var(--sr-border);
  padding:var(--sp-md);height:100vh;position:fixed;top:0;left:0
}
.sidebar__item{
  margin-bottom:var(--sp-sm);padding:var(--sp-sm) var(--sp-md);
  border-radius:var(--radius-md);transition:background .2s;color:var(--sr-text)
}
.sidebar__item:hover{background:rgba(255,255,255,.05)}
.main-content{margin-left:260px;padding:var(--sp-lg)}


/* CARDS ---------------------------------------------------- */
.card{
  background:var(--sr-surface);border-radius:var(--radius-md);
  box-shadow:var(--sr-shadow-light);padding:var(--sp-md);
  transition:box-shadow .2s,transform .2s;color:var(--sr-text)
}
.card:hover{box-shadow:var(--sr-shadow-deep);transform:translateY(-4px)}

/* BUTTONS -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--sp-sm) var(--sp-md);font-size:var(--fs-base);
  border:none;border-radius:var(--radius-md);cursor:pointer;
  transition:background .2s,transform .1s
}
.btn-primary{background:var(--sr-primary);color:var(--sr-text)}
.btn-primary:hover{background:var(--sr-primary-dark);transform:translateY(-2px)}
.btn-secondary{background:var(--sr-secondary);color:var(--sr-bg)}
.btn-secondary:hover,
.btn-secondary:focus {
  color: var(--sr-text);
}
.btn:active{transform:translateY(1px) scale(.98)}
.btn[disabled]{opacity:.5;pointer-events:none}

/* stato loading ri-utilizzato dai form */
.btn-success.loading{pointer-events:none}
.btn-success.loading::after{
  content:'';margin-left:.5em;vertical-align:middle;
  width:1em;height:1em;border:2px solid transparent;border-top-color:var(--sr-text);
  border-radius:50%;animation:spin .8s linear infinite
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--sr-primary);
  color: var(--sr-primary);
}
.btn-outline.active {
  background: var(--sr-primary);
  color: var(--sr-text);
}
/* ————————————————————————————————————————————— */
/* Stato “active” per i bottoni filtro (override di .btn) */
/* ————————————————————————————————————————————— */
.btn.active {
  background: var(--sr-primary);
  color: var(--sr-text);
}
.btn.active:hover {
  background: var(--sr-primary-dark);
  transform: translateY(-2px);
}


/* GRIDS ---------------------------------------------------- */
.grid{display:grid;gap:var(--sp-md)}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:640px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

/* FORMS ---------------------------------------------------- */
.form-group{margin-bottom:var(--sp-md);display:flex;flex-direction:column}
label{margin-bottom:var(--sp-xs);font-weight:600;color:var(--sr-text)}
input,select,textarea{
  padding:var(--sp-sm) var(--sp-md);border:1px solid var(--sr-border);
  border-radius:var(--radius-sm);font-size:var(--fs-base);
  background:var(--sr-surface);color:var(--sr-text);
  transition:border-color .2s,box-shadow .2s
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--sr-primary);
  box-shadow:0 0 0 3px rgba(255,56,80,.2)
}

/* Icon-button per edit email ------------------------------- */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.35rem;border:none;background:none;color:var(--sr-muted);
  cursor:pointer;font-size:1rem;border-radius:50%;transition:background .15s
}
.icon-btn:hover{background:rgba(255,255,255,.08)}
.icon-btn:focus-visible{outline:2px solid var(--sr-primary)}

/* MODALI --------------------------------------------------- */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-lg);z-index:2000
}
.modal.hidden{display:none!important}
.modal-box{
  background:var(--sr-surface);border-radius:var(--radius-md);
  max-width:400px;width:100%;padding:var(--sp-md);
  box-shadow:var(--sr-shadow-deep)
}
.modal-box p{margin:0;line-height:1.5;color:var(--sr-text)}
.modal-actions{
  display:flex;justify-content:flex-end;gap:var(--sp-md);margin-top:var(--sp-md)
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--sr-text);
  padding: 0 var(--sp-xs);
}

/* TABLES --------------------------------------------------- */
.table-wrapper{margin-top:var(--sp-md);overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrapper table{width:100%;border-collapse:collapse}
.table-wrapper th,.table-wrapper td{
  padding:var(--sp-sm) var(--sp-md);text-align:left;border-bottom:1px solid var(--sr-border);
  white-space:nowrap;font-size:.95rem;color:var(--sr-text)
}
.table-wrapper td.text-right{text-align:right}
td.price::after{content:" €"}

  .table-wrapper td{
    position:relative;padding-left:50%;white-space:normal;
    margin-bottom:var(--sp-xs);padding:.4rem .6rem;font-size:.85rem
  }
  .table-wrapper td:before{
    position:absolute;top:var(--sp-sm);left:var(--sp-sm);width:45%;
    padding-right:var(--sp-sm);white-space:nowrap;font-weight:600;color:var(--sr-secondary)
  }


/* ────────────────────────────────────────────────────────── */
/* PROFILE SPECIFIC OVERRIDES                                */
/* ────────────────────────────────────────────────────────── */
.container{padding-inline:clamp(1rem,4vw,2rem)}
.mt-xl{margin-top:var(--sp-xl)}

.profile-header{
  display:flex;align-items:center;gap:var(--sp-lg);
  max-width:860px;margin:var(--sp-lg) auto
}
.avatar{
  width:128px;height:128px;flex:0 0 auto;border-radius:50%;
  object-fit:cover;border:3px solid var(--sr-primary);
  box-shadow:0 2px 6px rgba(0,0,0,.4)
}
.profile-heading{
  margin:0;font-size:clamp(1.5rem,1.1rem + 1vw,2rem)
}
.profile-sub{margin-top:var(--sp-xs);font-size:var(--fs-base);opacity:.8}

#personalForm{max-width:780px;margin:auto}
.form-actions{
  display:flex;gap:var(--sp-md);justify-content:flex-end;flex-wrap:wrap
}
.email-edit{position:relative}
.email-edit__wrapper{display:flex;align-items:center}
.email-edit input[readonly]{padding-right:2.5rem;cursor:default}
.email-edit .icon-btn{position:absolute;right:.25rem}

/* Badge stato prenotazione -------------------------------- */
.badge{
  display:inline-block;padding:.2em .6em;font-size:.75em;font-weight:500;
  border-radius:999px;text-transform:uppercase;letter-spacing:.02em
}
.badge--live{background:var(--sr-avaible);color:#031}
.badge--past{background:rgba(255,255,255,.15);color:#889}

/* Toast ---------------------------------------------------- */


/* toast */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  min-width: 200px;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  opacity: 0;
  animation: fadeIn 0.5s forwards, fadeOut 0.5s 2.5s forwards;
  z-index: 10000;
}
.toast.success { background-color: #28a745; }
.toast.error   { background-color: #dc3545; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}





/* Spinner keyframes --------------------------------------- */
@keyframes spin{to{transform:rotate(360deg)}}

/* ────────────────────────────────────────────────────────── */
/* LANDING PAGE (ex-index.css)                               */
/* ────────────────────────────────────────────────────────── */
.header{
  background:var(--surface);box-shadow:0 2px 4px var(--shadow);
  padding:var(--sp-md) var(--sp-lg);
  display:flex;justify-content:space-between;align-items:center
}
.header__brand{
  font-family:var(--font-heading);font-size:var(--fs-lg);font-weight:700;color:var(--light)
}
.header__nav a{
  margin-left:var(--sp-md);font-size:var(--fs-base);color:var(--light);
  text-decoration:none;padding:var(--sp-sm) var(--sp-md);
  border-radius:var(--radius-sm);transition:background .2s
}
.header__nav a:hover{background:rgba(255,255,255,.1)}

.hero{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--sp-xl) var(--sp-md);
  background:var(--sr-bg);color:var(--light)
}
.hero .logo{
  width:640px;height:auto;display:block;margin:0 auto var(--sp-md);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))
}
.hero h1{
  font-family:var(--font-heading);font-size:var(--fs-xl);margin-bottom:var(--sp-sm)
}
.hero p{font-size:var(--fs-base);margin-bottom:var(--sp-lg)}

/* CTA BUTTONS --------------------------------------------- */
.button-group{display:flex;flex-direction:column;gap:var(--sp-md);width:100%;max-width:300px}
.app-btn{
  padding:var(--sp-md);font-size:var(--fs-lg);font-weight:600;border:none;border-radius:var(--radius-md);
  cursor:pointer;transition:transform .1s,box-shadow .2s;width:100%
}
.app-btn-primary{
  background:var(--primary);color:var(--light);box-shadow:0 4px 12px var(--shadow)
}
.app-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px var(--shadow)}
.app-btn-secondary{
  background:var(--secondary);color:var(--bg);box-shadow:0 4px 12px var(--shadow)
}
.app-btn-secondary:hover{transform:translateY(-2px);box-shadow:0 6px 16px var(--shadow)}

/* ---------------- Footer generale ---------------- */
.footer{
  background-color: var(--surface);
  color: var(--light);
  box-shadow: 0 -1px 3px var(--shadow);
  font-size: var(--fs-sm);
  padding: var(--sp-sm) var(--sp-md);

  /* === nuove proprietà per l’ancoraggio === */
  margin-top: auto;   /* lo spinge in fondo al flex-container */
  flex-shrink: 0;     /* impedisce che si schiacci se lo spazio si riduce */
}


/* Container flessibile per allineare le 3 sezioni */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;               /* garantisce le sezioni affiancate */
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Ogni “colonna” dentro il footer */
.footer-section {
  display: flex;
  align-items: center;
}

/* ------------ Sezione Social Icons ------------ */
.social {
  flex: 1;
}

/* Spazio tra le icone: applicato al link che contiene l’SVG */
.social a {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;          /* spazio extra tra un’icona e l’altra */
}
.social a:last-child {
  margin-right: 0;             /* rimuove il margin dell’ultima icona */
}

/* Uniforma le icone SVG a 24×24 */
.social-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  color: #fff;                 /* icona bianca su footer scuro */
}

/* Se avevi ancora selettori per <img> (ma ormai usi inline SVG) */
.social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------ Sezione Contatti ------------ */
.contacts {
  flex: 1;
  justify-content: center;
  text-align: center;
}

/* Desktop: mostra i numeri per esteso */
.contacts-desktop a {
  margin-left: 8px;
  color: var(--light);
  text-decoration: none;
}

/* Mobile: link “Contatti” */
.contacts-mobile {
  display: none;               /* di default nascosto; sarà visibile in mobile */
}
.contacts-mobile a {
  color: var(--light);
  text-decoration: none;
  font-weight: bold;
}

/* ------------ Sezione Install ------------ */
.install {
  flex: 1;
  text-align: right;
}

/* 1. Stile base del pulsante “Scarica l’app” */
.btn-install {
  display: inline-flex;           /* inline-flex per text+icona in fila */
  align-items: center;
  justify-content: center;
  white-space: nowrap;            /* impedisce il wrapping */
  background-color: var(--primary);
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;              /* spazio interno standard */
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1;                 /* per centrare verticalmente */
  transition: background-color 0.2s;
}

/* Icona “download” nel pulsante */
.btn-install .btn-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;              /* spazio tra icona e testo */
  fill: currentColor;             /* eredita il colore #fff */
}

/* Se vuoi un hover effect */
.btn-install:hover {
  background-color: darken(var(--primary), 10%);
}

/* ------------ Address Text (solo per il pin) ------------ */
.address-text {
  display: none;               /* di default nascosto su mobile */
  margin-left: 8px;            /* spazio fra icona pin e testo */
  font-size: 0.875rem;
  color: var(--light);
  line-height: 1.2;
}

/* ────────────────────────────────────────────────────────── */
/* UTILITY                                                   */
/* ────────────────────────────────────────────────────────── */
.mt-sm{margin-top:var(--sp-sm)}
.mt-md{margin-top:var(--sp-md)}
.mb-md{margin-bottom:var(--sp-md)}
.text-center{text-align:center}
.hidden{display:none!important}

/* ────────────────────────────────────────────────────────── */
/* CALENDARIO mensile (booking.js)                           */
/* ────────────────────────────────────────────────────────── */
.calendar-header{
  display:grid;grid-template-columns:repeat(7,1fr);
  text-align:center;font-weight:bold;padding:6px 0;background:#f0f4f8;
}
.calendar-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  border:1px solid #ccc;border-top:none;border-left:none;
}
.calendar-cell{
  border-top:1px solid #ccc;border-left:1px solid #ccc;
  min-height:70px;padding:4px;font-size:.85em;cursor:pointer
}
.calendar-wrapper{max-width:800px;margin:0 auto}

/*  seconda definizione (migliorata)                         */
.calendar-header{
  display:grid;grid-template-columns:repeat(7,1fr);
  text-align:center;font-weight:600;padding:6px 0;
  background:#f4f9ff;color:#006;border:1px solid #d0d7e2;border-bottom:none;
}
.calendar-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  border:1px solid #d0d7e2;border-top:none;
}
.calendar-cell{
  background:#fff;border-top:1px solid #d0d7e2;border-left:1px solid #d0d7e2;
  min-height:90px;padding:6px 4px;font-size:.85em;display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;transition:background .15s
}
.calendar-cell.empty{background:#f8fafc;cursor:default}
.calendar-cell:hover:not(.empty){background:#eef6ff}
.calendar-cell.selected{outline:3px solid #2a8bf2;outline-offset:-3px}
.date-number{font-weight:600;color:#114;font-size:.9em}
.slot-time{font-size:.75em;color:#555;text-align:right}
.calendar-grid>.calendar-cell:nth-child(7n){border-right:1px solid #d0d7e2}
.calendar-grid>.calendar-cell:nth-last-child(-n+7){border-bottom:1px solid #d0d7e2}

.calendar-cell{position:relative}
.slot-dur{font-size:.75em;color:#444;text-align:right;margin-top:4px}
.slot-asterisk{
  position:absolute;top:2px;right:4px;color:#d60000;font-weight:bold;font-size:1.1em;display:none
}
.calendar-cell.booked .slot-asterisk{display:block}
.calendar-cell.selected{outline:2px solid #007bff}
.calendar-cell,.calendar-cell *{
  user-select:none;-webkit-user-select:none;-ms-user-select:none
}
.calendar-header div,#cal-controls button,#selMonth{
  user-select:none;-webkit-user-select:none;-ms-user-select:none
}





/* spinner dentro al bottone */
button .spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin: 0 auto;
}

/* keyframes per la rotazione */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* opzionale: quando è loading, centra meglio */
button.loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}





.welcome-box{
  text-align:center;
  padding:3rem 1rem;
  border:1px dashed var(--sr-border);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.03);
}
.welcome-box h1{
  margin-top:0;
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);
}

.calendar-cell.past {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}



/* ────────────────────────────────────────────────────────── */
/* SKELETON + form-errors (componenti comuni)                */
/* ────────────────────────────────────────────────────────── */
.skeleton-container{display:flex;flex-direction:column;gap:var(--sp-md)}
.skeleton.table-row{height:2.5rem;border-radius:var(--radius-sm)}

.form-errors{
  list-style:none;padding:0;margin:var(--sp-sm) 0;color:#e74c3c;font-size:var(--fs-sm)
}
.form-errors li{margin-bottom:var(--sp-xs)}

/* overlay condiviso per vecchie pagine -------------------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;
  align-items:center;justify-content:center;z-index:2000
}

/* ────────────────────────────────────────────────────────── */
/* MOBILE DEFAULT (≤767px)                                   */
/* ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero .logo {
    max-width: 320px;
  }

  /* Profile header */
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
  .avatar {
    margin-bottom: var(--sp-sm);
  }
  .container {
    padding-inline: var(--sp-md);
  }

  /* Navbar buttons sizing */
  .navbar__links .btn {
    width: auto !important;
    flex: 0 0 auto;
    padding: 0.4em 0.8em;
  }

  /* Tables → card-like rows + labels via CSS Grid */
  .table-wrapper table,
  .table-wrapper thead,
  .table-wrapper tbody,
  .table-wrapper th,
  .table-wrapper td,
  .table-wrapper tr {
    display: block;
  }
  .table-wrapper thead {
    display: none;
  }
  .table-wrapper tr {
    border: 1px solid var(--sr-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-md);
    background: var(--sr-surface);
    padding: var(--sp-sm);
  }
  .table-wrapper td {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    white-space: normal;
    margin-bottom: var(--sp-xs);
    font-size: .85rem;
  }
  .table-wrapper td:before {
    content: attr(data-label)":";
    font-weight: 600;
    color: var(--sr-secondary);
    position: static;
    width: auto;
    padding: 0;
    white-space: nowrap;
    align-self: start;
  }

  /* ─── NAVBAR ─── */
  .navbar__brand {
    display: none;             /* nasconde "Pannello Admin" */
  }
  .navbar__links-wrapper {
    position: relative;
    overflow: hidden;          /* maschera scroll sotto le frecce */
    flex: 1 1 auto;
  }
  .navbar__links {
    display: flex;
    gap: var(--sp-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 2.5rem;
    scroll-padding-inline: 2.5rem;
  }
  .navbar__links::-webkit-scrollbar {
    display: none;
  }
  .navbar__links .btn {
    width: auto !important;
    flex: 0 0 auto;
    padding: 0.4em 0.8em;
  }

  /* Su mobile, tutte le sezioni rimangono affiancate, testo indirizzo nascosto */
  .footer-container {
    /* display:flex; già dichiarato nel base, non serve rimettere */
    justify-content: center;
    text-align: center;
  }
  .social,
  .install {
    width: 100%;
    margin-bottom: 12px;
    justify-content: center;
  }
  .contacts {
    width: 100%;
  }
  /* Numeri estesi nascosti, link “Contatti” visibile */
  .contacts-desktop {
    display: none;
  }
  .contacts-mobile {
    display: block;
  }
  /* Pulsante install va più grande */
  .btn-install {
    padding: 6px 10px;            /* leggermente meno orizzontale per adattarsi */
    font-size: 0.875rem;          /* può rimanere lo stesso o ridursi un filo */
  }
  .btn-install .btn-icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;            /* meno gap per evitare wrap */
  }
  /* Assicura che il testo indirizzo rimanga nascosto */
  .address-text {
    display: none;
  }
}


@media (min-width: 768px) {
  /* Su desktop, mostra il testo indirizzo e i numeri estesi */
  .contacts-desktop {
    display: block;
  }
  .contacts-mobile {
    display: none;
  }
  .address-text {
    display: inline;          /* mostra nome della strada accanto all’icona pin */
  }
    .btn-install {
    padding: 6px 14px;            /* un po’ più largo su desktop */
    font-size: 0.875rem;
  }
  .btn-install .btn-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
  }
}
@supports (height: 100dvh){
  body.landing{min-height:100dvh;}
}
@supports not (height: 100dvh){
  body.landing{min-height:100vh;}
}