/* Going Local - Brand Styles (solid colors, no gradients) */
:root{
  /* COLORI BRAND (unica sorgente) */
  --blue:#4FA3DE;        /* azzurro */
  --orange:#E7803E;      /* arancio */

  /* utilità per trasparenze/gradiente */
  --blue-rgb:79,163,222;
  --orange-rgb:231,128,62;
  --grad-soft: linear-gradient(30deg,
                 rgba(var(--orange-rgb),.88) 0%,
                 rgba(var(--blue-rgb),.88) 100%);

  /* resto invariato */
  --ink:#000000;
  --muted:#444444;
  --bg:#ffffff;
  --panel:#ffffff;
  --border:#e5e7eb;
  --shadow:0 6px 20px rgba(0,0,0,.06);
  --topbar-h: 64px;   /* altezza reale della topbar */
  --footer-h: 56px;   /* 3px barra + ~43px contenuto + padding */
    /* Animazioni globali */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --anim-fast: 500ms;
  --anim-med: 600ms;
  --anim-slow: 700ms;
}

*{ box-sizing:border-box }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:#ffffff; /* sfondo bianco */
  color:var(--ink);
}

/* ===== Header (markup invariato) ===== */
.topbar{ position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--border); }
.wrap{ max-width:1080px; margin:0 auto; padding:0 16px; }
.topbar-inner{ height:64px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; color:inherit; text-decoration:none; }
.logo{
  width:36px; height:36px; border-radius:6px;
  background-image: url('logo/Logo.png'); /* percorso relativo per deploy online */
  background-size:contain; background-repeat:no-repeat; background-position:center;
  box-shadow:none;
}
.accent{ height:3px; background:var(--blue); }
/* Forza il colore della linea nell'header */
.topbar .accent{ background:var(--blue) !important; }

/* ===== Layout ===== */
main{ padding:20px 0 56px; }
h1,h2{ margin:0 0 8px 0; font-size:22px; }
p.sub{ margin:0 0 14px 0; color:var(--muted); font-size:14px }
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }

.table-wrap{
  flex:1 1 100%;
  width:100%;
  max-height:60vh;
  overflow:auto;
}

.grid{ display:grid; gap:18px }

.grid.cols-3{ grid-template-columns: 1fr; }
@media (min-width: 780px){ .grid.cols-3{ grid-template-columns: repeat(3, 1fr); } }

/* ===== Inputs / Buttons ===== */
input, textarea, button{
  font:inherit; border-radius:14px; border:1px solid var(--border);
  background:#fff; color:var(--ink); padding:10px 12px;
}
input::placeholder, textarea::placeholder{ color:#777 }
button{ cursor:pointer; transition: transform .12s ease, box-shadow .2s ease, background .25s ease; }
button:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }
.btn.primary{ background: var(--blue); border-color: transparent; color:#fff; font-weight:800; }
.btn.ghost{ background: transparent; color:var(--ink); }
/* Admin – pulsante "Cerca" (Statistiche) */
/* Admin – pulsanti filtro Statistiche (peso come #saveKey: no bold) */
#searchanalytics{
  background: var(--blue);
  border-color: transparent;
  color: #fff;
  /* nessun font-weight qui -> usa quello base come #saveKey */
}

#resetanalytics{
  background: var(--orange);
  border-color: transparent;
  color: #fff;
  /* nessun font-weight qui -> usa quello base come #saveKey */
}

.btn-request-contacts{ background: var(--orange) !important; border-color: transparent !important; color:#fff !important; font-weight:800 !important; min-width: 180px; }

/* ===== Cards / Elements ===== */
.card{ border:1px solid var(--border); border-radius:18px; padding:14px; background:#fff; box-shadow: var(--shadow); }
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#fff; background:var(--orange); border-radius:999px; padding:4px 10px; }
.muted{ color:var(--muted); font-size:12px }
.exp{ display:grid; grid-template-columns: 1fr auto; gap:14px; border:1px solid var(--border); border-radius:16px; padding:14px; background:#fff; transition: transform .12s ease, box-shadow .2s ease; }
.exp:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.exp-title{ font-weight:800; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.price-tag{ font-weight:900; font-size:18px; padding:6px 10px; border-radius:10px; background: var(--orange); color:#fff; }
.thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap }
.thumb{ width:92px; height:72px; border-radius:10px; border:1px solid var(--border); object-fit:cover; background:#f5f7fb; }

/* Skeleton loader */
.skeleton{ position:relative; overflow:hidden; background:#f1f5f9; border-radius:14px; height:92px; border:1px solid var(--border) }
.skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent); transform: translateX(-100%); animation: loading 1.1s infinite; }
@keyframes loading{ to{ transform: translateX(100%) } }
/* Toast */
.toast{ position: fixed; left:50%; bottom:18px; transform:translateX(-50%); background: #000; color:#fff; padding:10px 14px; border-radius:999px; box-shadow: var(--shadow); opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; z-index:1201; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }


/* Modal – overlay con sfocatura come la conferma Eliminazione */
.modal{position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 50;}
.modal.show{ display:flex; }
.modal-card{ width:min(520px, 92vw); background:#fff; border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow: 0 20px 60px rgba(0,0,0,.25); color:#000; }
.modal .row{ gap:10px }
.modal h3{ margin:0 0 10px 0 }
.modal .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px }
.hidden{ display:none !important }


/* === GoingLocal overrides for header harmony (admin + host) === */
.topbar .brand{ font-weight:800; letter-spacing:.2px; gap:10px; }
.logo{
  width:180px; height:62px;
  background-size: contain; background-repeat:no-repeat; background-position:left center;
  border-radius:0; box-shadow:none;
}
/* Base pill style for buttons AND links with .btn */
.btn{
  padding:10px 14px; border-radius:14px; border:1px solid var(--border);
  background:#fff; color:var(--ink);
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
}
a.btn{ display:inline-flex; } /* ensure anchors adopt pill shape */
.btn.primary{ background: var(--blue); border-color: transparent; color:#fff; font-weight:800; justify-content: center; text-align: center !important; }
.btn.ghost{ background: #f1f5f9; color:var(--ink); } /* keeps the border from .btn */

/* === Vertical rhythm & alignment (harmonize spacing) === */
/* Space between the blue accent bar and the page content */
.topbar + main.wrap{ padding-top:20px; padding-bottom: 30px; }

/* Title spacing (no extra top gap, small gap below) */
main.wrap > h1{ margin-top:0; margin-bottom:12px; text-align:left; }

/* First block spacing under the title */
main.wrap > .card,
main.wrap > .grid,
main.wrap > .row{ margin-top:10px; }



/* === Accordion (schede a espansione) === */
.accordion{ display:grid; gap:16px; }
.acc-card{ border:1px solid var(--border); border-radius:18px; background:#fff; box-shadow:var(--shadow); overflow:hidden; }
.acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px; border:0; background:#fff; font-weight:800; cursor:pointer; }
/* Corpo accordion animato: chiuso = zero altezza, aperto = scorre */
/* Corpo accordion animato: chiuso senza occupare spazio */
.acc-card .acc-body{
  overflow:hidden;
  max-height:0;
  padding:0 16px;
  opacity:0;
  transition:
    max-height var(--anim-med) var(--ease-out),
    padding    var(--anim-med) var(--ease-out),
    opacity    var(--anim-med) var(--ease-out);
  will-change:max-height;
}
/* Reveal universale per corpi che oggi vengono show/hide */
.revealable{
  display:flex;                 /* default: flex (compatibile con Tourist) */
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform: translateY(4px);
  transition:
    max-height var(--anim-med) var(--ease-out),
    opacity    var(--anim-med) var(--ease-out),
    transform  var(--anim-med) var(--ease-out),
    padding    var(--anim-med) var(--ease-out);
}
.revealable.block{ display:block; }        /* variante block per contenuti a flusso */
/* Sezioni rivelabili: niente tagli su liste molto lunghe */
.revealable.is-open{
  max-height:20000px;
  opacity:1;
  transform:none;
}

.revealable[hidden]{ display:block; }      /* se lo script usa hidden, non andare in display:none */

/* evita display:none quando lo script mette [hidden] */
.acc-card .acc-body[hidden]{ display:block; }

/* Apertura accordion: alzo il cap per non troncare liste lunghe */
.acc-card[data-open="true"] .acc-body{
  /* fallback per browser senza max() */
  max-height:20000px;
  padding:0 16px 16px 16px;
  opacity:1;
  overflow:visible;   /* evita clipping di ombre/badge */
}

.btn-danger{
  background: var(--orange) !important;
  color: #fff;
  border-color: var(--orange);
  color: #FFF !important;
}

/* rotazione della freccia nella testata */
.acc-card > .acc-head .chev{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  min-height:32px;
  padding-left:8px;
  padding-right:4px;
  transition: transform var(--anim-med) var(--ease-out);
}

.acc-card[data-open="true"]  > .acc-head .chev { transform: rotate(180deg); }
/* Remove inner card chrome inside accordion bodies to avoid double borders */
.acc-card .acc-body .card{ border:0; box-shadow:none; padding:0; }
/* Orange button utility */
.btn.orange{ background: var(--orange); border-color: transparent; color:#fff; font-weight:800; }
/* === Admin accordion spacing & alignment === */
.acc-card{ margin-top:12px; }
.acc-body .row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.acc-body label{ font-weight:600; color:var(--muted); margin-left:6px; margin-right:4px; }
.acc-body input[type="date"], .acc-body input[type="text"], .acc-body select{ min-height:40px; }
.acc-body table{
  width:100%;
  margin-top:10px;
  border-radius:14px;
  overflow:hidden;
  padding-top: 11px;
}
.acc-body th, .acc-body td{ padding:10px 12px; }
.acc-head{ font-size:18px; }

/* Checkbox header line aligns baseline */
th:first-child input[type="checkbox"]{ transform: translateY(1px); }

/* Top controls card spacing */
main .card > .row{ gap:12px; align-items:center; }

/* Buttons tighter look inside toolbars */
.acc-body .btn{ padding:8px 12px; }
/* === Table readability: light column separators & zebra === */
.acc-body table th+th, .acc-body table td+td{ border-left:1px solid var(--border); }
.acc-body table tbody tr:nth-child(odd){ background: #fafafa; }
.acc-body table tbody tr:hover{ background:#f5f7fa; }

/* Compact buttons for table actions */
.btn.sm{ padding:6px 10px; border-radius:8px; font-size:9px; }
td .btn{ vertical-align:middle; }
td .btn + .btn{ margin-left:8px; }

/* Make action cell align right on wide screens */
@media (min-width: 900px){
  table td:last-child, table th:last-child{ text-align:right; }
}
/* === Drawers generici (tutti i "Modifica") -> come drawer Attività === */
#genericDrawer.overlay{
  background: transparent !important;         /* niente velo scuro */
  pointer-events: none;                       /* clic passano fuori */
  display: flex;
  justify-content: flex-end;                  /* pannello a destra */
}
#genericDrawer .drawer-panel{
  pointer-events: auto;
  width: 520px;
  max-width: 96vw;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-right: 0;
  box-shadow: -8px 0 24px rgba(0,0,0,.18);
  padding: 16px;
  overflow: auto;

  /* slide-in da destra */
  transform: translateX(100%);
  transition: transform .25s ease-in-out;
}
#genericDrawer.overlay.show .drawer-panel{
  transform: translateX(0);
}
#genericDrawer .drawer-actions{
  display:flex; gap:10px; justify-content:flex-end; margin-top:12px;
}

/* === Toolbar + upload file (usato nei 2 drawer Foto) === */
#photoToolbarStep2, .photo-toolbar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}

/* input file nativo (Nuova attività -> Foto) */
.drawer input[type="file"]{
  border:1px dashed var(--border);
  background:#fff;
  border-radius:12px;
  padding:8px 12px;
  font-size:14px;
  color:var(--ink);
  max-width:360px;
}

/* bottone "Scegli file" del nativo */
.drawer input[type="file"]::file-selector-button,
.drawer input[type="file"]::-webkit-file-upload-button{
  background: var(--blue);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:10px 14px;
  margin-right:10px;
  font-weight:800;
  cursor:pointer;
}
.drawer input[type="file"]:hover::file-selector-button,
.drawer input[type="file"]::-webkit-file-upload-button:hover{
  background: color-mix(in srgb, var(--blue) 88%, #000 12%);
}

/* bottone custom usato nel drawer Foto attività */
.drawer label.file-btn{
  background: var(--blue);
  color:#fff;
  border:1px solid transparent;
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
.drawer label.file-btn:hover{
  background: color-mix(in srgb, var(--blue) 88%, #000 12%);
}
.drawer label.file-btn::before{
  content: "📎";
  font-size:16px;
  line-height:1;
  margin-right:6px;
}

/* pill con il nome file */
.drawer .file-name{
  background:#f1f5f9;
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 12px;
  font-size:14px;
}

/* utility nascosta per input duplicati */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* Smooth open animation for generic drawers */
@keyframes genericSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
#genericDrawer .drawer-panel{
  transform: translateX(100%);
  transition: none !important;          /* ensure transition timing doesn't block */
  will-change: transform;
}
#genericDrawer.overlay.show .drawer-panel{
  animation: genericSlideIn .28s ease-out both;
}

/* Photo-first/compact layout when the text is short */
#detailsCard.compact{ grid-template-columns: 1.35fr 0.65fr !important; }
#detailsCard.ultra  { grid-template-columns: 1.60fr 0.40fr !important; }
#detailsCard.compact #detailsRight{ max-width:520px !important; }
#detailsCard.ultra  #detailsRight{ max-width:460px !important; }

@media (max-width: 720px){
  #detailsCard,
  #detailsCard.compact,
  #detailsCard.ultra{ grid-template-columns: 1fr !important; }
}


/* === Host Modal: fixed preview (left), fixed right width; transparent controls === */
:root{
  --gl-modal-left: 680px;      /* fixed left preview width on desktop */
  --gl-modal-right: 360px;     /* fixed right column width */
  --gl-modal-img-h: 420px;     /* fixed preview height (desktop) */
}

/* Card width and grid columns are fixed; height grows with content up to 90vh */
#detailsCard{
  width: min(calc(var(--gl-modal-left) + var(--gl-modal-right)), 96vw) !important;
  height: auto !important;
  max-height: 90vh !important;
  grid-template-columns: var(--gl-modal-left) var(--gl-modal-right) !important;
}


#detailsImg{
  max-width:90% !important; max-height:90% !important;
  object-fit: cover !important;
}

/* Right column has fixed width; content may extend card vertically */
#detailsRight{
  width: var(--gl-modal-right) !important;
  overflow: visible !important;
}

/* Desktop "stretto": rendi la card fluida e fai andare a capo il testo a destra */
@media (min-width: 981px) and (max-width: 1120px){
  #detailsCard{
    /* usa tutta la larghezza disponibile dell'overlay (viewport - padding 12+12) */
    width: calc(100vw - 24px) !important;
    /* colonne fluide: sinistra un po' più grande, destra leggermente più stretta */
    grid-template-columns: 1.2fr 0.8fr !important;
  }
  #detailsRight{
    width: auto !important;
    max-width: 100% !important;
  }
}

/* Thumbnails uniform */
#thumbStrip img{
  width:72px !important; height:72px !important; object-fit:cover !important;
  border-radius:8px !important;
}

/* Transparent controls — BASE comune (no chip) */
#detailsClose, #lightboxClose, .nav-arrow{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width:36px !important; height:36px !important; padding:0 !important; line-height:0 !important;
  display:inline-grid !important; place-items:center !important;
  cursor:pointer !important;
}

/* Frecce di navigazione (NON il lightbox) — nere.
   Il colore del lightbox viene deciso in details_modal.css */
.nav-arrow{
  color:#000 !important;
}


/* X della scheda dettagli: nera fissa */
#detailsClose{
  color:#000 !important;
  filter:none !important;
}

/* SVG/glifi coerenti */
#detailsClose svg, #lightboxClose svg, .nav-arrow svg{
  width:22px !important; height:22px !important; stroke: currentColor !important;
}
.nav-arrow{ font-size:22px !important; }

/* 🔒 Reset “a prova di inline” per la Tourist (toglie il riquadro) */
.nav-arrow,
.nav-arrow::before,
.nav-arrow::after{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#detailsRight{ width:auto !important; }

/* Colonna ID più compatta */
/* SOLO le celle dati della colonna ID diventano più piccole */
td.col-id {
  font-size: 0.70rem;
  white-space: nowrap;
}
/* =========== TABELLA BnB: layout e allineamenti =========== */

/* Larghezze colonne (evita lo "schiacciamento" del link) */
.table-bnb { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-bnb col.c-name    { width: 12%; }
.table-bnb col.c-addr    { width: 20%; }
.table-bnb col.c-prov    { width: 10%; }
.table-bnb col.c-comune  { width: 12%; }
.table-bnb col.c-link    { width: 24%; }   /* più spazio al link ospite */
.table-bnb col.c-actions { width: 10%; }

/* Centro verticale ovunque */
.table-bnb th,
.table-bnb td { vertical-align: middle; }

/* Allineamenti orizzontali: tutto a sinistra tranne "Azioni" */
.table-bnb td.col-id,
.table-bnb td.col-name,
.table-bnb td.col-addr,
.table-bnb td.col-prov,
.table-bnb td.col-comune,
.table-bnb td.col-link,
.table-bnb th { text-align: left; }

/* Azioni a destra (header e celle) */
.table-bnb th:nth-child(7),
.table-bnb td.col-actions { text-align: right; }

/* Link ospite: input comodo e non schiacciato */
.table-bnb td.col-link input[type="text"],
.table-bnb td.col-link input[type="url"]{
  width: 100%;
  max-width: 640px;     /* evita pill troppo lunga su schermi giganti */
  margin: 0;
  display: block;
}

/* Bottoni "Copia/Rigenera" con respiro */
.table-bnb td.col-link .row{
  gap: 12px;
  flex-wrap: wrap;
}
.table-bnb td.col-link .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Azioni: bottoni compatti, allineati a destra */
.table-bnb td.col-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.table-bnb td.col-actions .btn:not(.btn-sm){
  padding:10px 14px;
  min-height:40px;
  border-radius:14px;
}
.table-bnb td.col-actions .btn.btn-sm{
  padding:4px 10px;
  min-height:30px;
  border-radius:12px;
  font-size:.90rem;
}

/* Colonna ID: niente wrap e larghezza minima al contenuto */
.table-bnb td.col-id,
.table-bnb th:first-child {
  white-space: nowrap;       /* non andare a capo */
  word-break: normal;
  overflow-wrap: normal;
  width: 1%;                 /* trucco per "shrink-to-fit" */
  padding-right: 12px;       /* un po' di respiro a destra */
}
/* Provincia su 2 righe */
.table-bnb td.col-prov .prov-cell { line-height: 1.2; }
.table-bnb td.col-prov .prov-code {
  font-weight: 600;
  white-space: nowrap;
}
.table-bnb td.col-prov .prov-name {
  white-space: nowrap;
}
/* Bottoni compatti (small) */
.btn-sm {
  padding: 2px 5px;     /* più piccolo */
  font-size: 0.80rem;    /* testo leggermente ridotto */
  min-height: 8px;      /* altezza minima più bassa */
  border-radius: 8px;   /* un po’ più snello */
  line-height: 1.1;      
}
/* Riduci lo spazio fra i bottoni nella cella Link ospite */
.table-bnb td.col-link .row { gap: 8px; }
/* ======= Modal conferma ======= */
.gl-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.55); /* blu scuro traslucido */
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.gl-modal {
  background: #fff; border-radius: 18px; padding: 20px 22px; width: min(480px, 92vw);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.gl-modal h3 {
  margin: 0 0 8px; font-size: 1.25rem;
}
.gl-modal p {
  margin: 0 0 18px; color: #475569; line-height: 1.45;
}
.gl-modal .btn-row {
  display: flex; gap: 10px; justify-content: flex-end;
}
.btn-outline {
  background: #fff; border: 2px solid #d1d5db; color: #374151;
}
.btn-danger {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
/* Banda BnB */
.bnb-band{
  background:#F5F8FF;
  border:1px solid #E5E7EB;
  border-radius:16px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;   /* sinistra vs destra */
  gap:12px;
  text-align:left;                  /* forza allineamento a sx */
}

/* Contenitore sinistro (chevron + titolo) */
.bnb-band .left{
  display:flex;
  align-items:center;
  justify-content:flex-start;       /* niente centrature */
  gap:10px;
  flex:0 0 auto;                    /* non allargarti */
}

/* Titolo a sinistra, no auto-centering */
.bnb-band .bnb-name{
  font-weight:700;
  text-align:left;
  margin:0;
}

/* Località a destra */
.bnb-band .bnb-loc{
  color:#475569;
  font-weight:600;
  margin:0;
}

/* Elimina ogni residuo di “stanghetta blu” */
.bnb-band::before{ content:none !important; }

/* Toggle */
.bnb-toggle{
  width:28px;height:28px;border-radius:999px;border:1px solid #dbe2ea;background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.bnb-toggle::before{ content:"▸"; font-size:14px; transition:transform .18s; }
.bnb-group.open .bnb-toggle::before{ transform:rotate(90deg); }

/* Chiudi la griglia quando il gruppo non è open */
/* Nearby (BnB) – animazione apertura/chiusura */
.nearby-grid{
  /* è già display:grid grazie a .grid */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(4px);
  margin-top: 0 !important; /* sovrascrive l'inline 10px quando chiuso */
  transition:
    max-height var(--anim-med) var(--ease-out),
    opacity    var(--anim-med) var(--ease-out),
    transform  var(--anim-med) var(--ease-out),
    margin-top var(--anim-med) var(--ease-out);
}
:root{ --nearby-max: 20000px; }          /* cap alto: evita clipping anche con liste lunghe */
.bnb-group .nearby-grid{
  transition-duration: 120ms; /* ✅ chiusura super veloce (solo bnb-group) */
  will-change: max-height, opacity, transform, margin-top;
}
.bnb-group.open .nearby-grid{
  transition-duration: var(--anim-slow); /* ✅ apertura resta come prima */
  max-height: var(--nearby-max);         /* ✅ animabile: 0 -> valore */
  opacity: 1;
  transform: none;
  margin-top: 10px !important;           /* combacia con lo stile inline esistente */
}

/* ===== Nearby categorie (Bar/Ristoranti/...) — NO “barretta” + animazione simmetrica ===== */
/* Override robusto: host_dashboard.css mette padding:12px e display:none -> qui vinciamo noi */
#sec-nearby .cat-body{
  display:block !important;
  overflow:hidden;
  max-height:0 !important;
  min-height:0 !important;
  opacity:0;
  transform: translateY(4px);

  /* ✅ fondamentale: azzera padding/margini quando chiuso, altrimenti resta “barretta” */
  padding:0 !important;
  margin:0 !important;
  border:0 !important;

  transition:
    max-height var(--anim-med) var(--ease-out),
    opacity    var(--anim-med) var(--ease-out),
    transform  var(--anim-med) var(--ease-out),
    padding    var(--anim-med) var(--ease-out);
  will-change: max-height, opacity, transform, padding;
}

#sec-nearby .cat-group.open .cat-body{
  max-height:20000px !important; /* cap alto: evita clipping */
  opacity:1;
  transform:none;
  padding:12px !important;       /* padding SOLO quando aperto */
}

/* Se c’è una sola categoria, resta aperta e senza “salti” */
#sec-nearby .cat-group.single .cat-body{
  max-height:20000px !important;
  opacity:1;
  transform:none;
  padding:12px !important;
}


/* Centra il testo del bottone "Invia suggerimento" */
#sec-support .btn,
#sec-support button[type="submit"] {
  justify-content: center !important; /* se .btn è flex/inline-flex */
  text-align: center;                 /* fallback */
}

/* === PATCH TD-1 CSS ::after === */
.has-bnb-addr::after {
  content: attr(data-bnb-addr);
  display: block;
  margin-top: 4px;
  font-size: .95rem;
  opacity: .9;
}
/* TD: riga indirizzo sotto l'ID turista */
.td-bnb-addr {
  margin-top: 4px;
  font-size: .95rem;
  opacity: .9;
}

/* === Footer (unificato: stile Host per tutte le pagine) === */
/* Layout: il contenuto occupa tutta la viewport tra topbar e footer */
main{ min-height: calc(100vh - var(--topbar-h) - var(--footer-h)); }

.site-footer{
  background:#fff;
  border-top:1px solid var(--border);
  position:relative; z-index:5;
  margin-top:0;
}
.site-footer .accent{ height:3px; background: var(--orange) !important; }

/* Riga principale */
.site-footer .footer-row{
  max-width:1100px;
  margin:6px auto 0;
  padding:6px 16px 10px;   /* contribuisce alla --footer-h */
  min-height:43px;         /* contribuisce alla --footer-h */
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* Brand a sinistra */
.site-footer .brand-tagline{ display:flex; align-items:center; gap:10px; margin:0; padding:0; text-align:left; }
.site-footer .brand-tagline .txt,
.site-footer .legal{ line-height:0; white-space:nowrap; margin:0; display:flex; align-items:center; }
.site-footer .brand-logo{ width:36px; height:auto; object-fit:contain; flex-shrink:0; transform:translateY(1px); }

/* Nota legale a destra */
/* Tagline a sinistra – effetto “serigrafia” + brand in bold */
.site-footer .brand-tagline .txt{ color: rgba(0,0,0,.55); }
.site-footer .brand-tagline .txt strong{ font-weight:700; }

/* Spazio tra “Email” e indirizzo (lato destro) */
.site-footer .legal a{ margin-left:6px; }
/* Nota legale a destra – effetto “serigrafia” */
.site-footer .legal {
    display: block;
    flex: 0 0 auto;
    margin: 4px 0 0;
    line-height: 3.3;
    text-wrap: balance;
}
.site-footer .legal{ text-align:right; color: rgba(0,0,0,.55); font-size:12px; }
.site-footer .legal a{ margin-left:6px; }      /* spazio tra “Email” e la mail */
.site-footer .legal strong{ font-weight:700; } /* “waylho” in grassetto */

/* Mobile: impila a sinistra, con più aria sotto */
@media (max-width:560px){
  .site-footer .footer-row{ flex-direction:column; align-items:flex-start; gap:6px; padding:0 12px 20px; }
  .site-footer .brand-tagline .txt{ font-size:16px; }
  .site-footer .brand-tagline .brand-logo{ height:56px !important; transform:none; }
}

/* Variante centrata (compatibilità con vecchio markup) */
.site-footer.centered .footer-row{ justify-content:center; text-align:center; }

/* === Modal Dettagli: altezza indipendente dalle foto === */
:root{
  /* altezza minima della card (svincola dalla foto) + altezza anteprima foto */
  --gl-modal-min-h: 540px;
  --gl-modal-img-h: 320px;     /* preview foto, costante e piccola */
}

/* La card cresce col contenuto ma NON scende sotto --gl-modal-min-h */
#detailsCard{
  height: auto !important;
  min-height: var(--gl-modal-min-h) !important;
  max-height: 90vh !important;
  align-items: start !important;             /* allinea tutto in alto */
  /* lasciamo la larghezza e le colonne dettate dallo stile inline 1fr 1fr */
}

/* Colonna sinistra (foto): altezza fissa e contenimento (no sgranature) */
#detailsCard > .left{
  height: var(--gl-modal-img-h) !important;
  display:grid !important;                 /* centro robusto su entrambi gli assi */
  place-items:center !important;
  background:#f5f7fa !important;
  position:relative; overflow:hidden;
}

#detailsImg{
  width:auto !important;                    /* lascia le proporzioni */
  height:100% !important;                   /* usa l’altezza del riquadro foto */
  object-fit: contain !important;           /* niente sgranature */
  object-position: center center !important;/* centrato dentro il box dell’immagine */
  display:block;                            /* niente gap baseline */
}


/* Colonna destra (testi): è quella che si allunga; se supera 90vh scorre solo lei */
#detailsCard > .right{
  overflow:auto !important;
  max-height: calc(90vh - 32px) !important; /* margine per padding/bordi */
}

/* Mobile: una colonna; la foto resta contenuta, il testo usa il resto dell’altezza */
@media (max-width: 980px){
  #detailsCard{ grid-template-columns: 1fr !important; max-height: 92vh !important; }
  #detailsCard > .left{ height: clamp(220px, 36vh, var(--gl-modal-img-h)) !important; }
  #detailsCard > .right{ max-height: calc(92vh - clamp(220px, 36vh, var(--gl-modal-img-h)) - 28px) !important; }
}
/* === FOOTER mobile (≤480px): 4 righe, no sovrapposizioni — 2025-10-20 === */
@media (max-width: 480px){

  /* Footer in colonna e centrato */
  .site-footer .footer-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 10px 12px 14px !important;
  }

  /* Blocco logo + testi in colonna */
  .site-footer .brand-tagline{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* 1) LOGO: riga dedicata e NON assoluto (evita overlay) */
  .site-footer .brand-tagline .brand-logo{
    position: static !important;
    transform: none !important;
    display: block !important;
    margin: 0 auto !important;
    height: auto !important;         /* mantieni stile originale */
    max-height: 56px !important;     /* limite prudente */
    width: auto !important;
  }

  /* 2) + 3) Testi: mantieni stile, solo layout su due righe */
  .site-footer .brand-tagline .txt{
    display: block !important;
    white-space: normal !important;
    line-height: inherit !important;
    font-size: inherit !important;
  }
  /* “waylho:” su riga propria, il resto (tagline) va sotto */
  .site-footer .brand-tagline .txt strong,
  .site-footer .brand-tagline .txt b{
    display: block !important;       /* riga 2 */
    margin: 0 !important;
  }

  /* 4) LEGAL: ultima riga, centrato */
  .site-footer .legal{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 4px !important;
  }
}

/* MOBILE fix: centra "waylho" nella riga del brand — 2025-10-20 */
@media (max-width: 480px){
  /* il contenitore del testo viene centrato */
  .site-footer .brand-tagline .txt,
  .site-footer .brand-tagline .txt-sub{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding-left: 0 !important;   /* evita trascinamenti a sinistra */
    text-indent: 0 !important;
  }

  /* il testo "waylho" (strong/b) centrato */
  .site-footer .brand-tagline .txt > strong,
  .site-footer .brand-tagline .txt > b{
    display: inline-block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}
/* === 2025-10-25 | Tourist: aria tra header e titolo (≤430px) === */
@media (max-width: 430px){
  /* Titolo: <h2 id="tourist-title"> (tourist_dashboard.html riga ~236) */
  #tourist-title{
    margin-top: 12px !important; /* più spazio sopra al titolo */
  }
}
/* 2025-10-25 — Estendi lo stile "sub" anche agli <span> nei filtri */
span.sub,
label .sub{
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: .2px !important;
  color: #6b7280 !important; /* identico aspetto di "Scelte di qualità, esperienze uniche." */
}
/* Evita doppio-tap zoom su mobile, lasciando scroll/pan */
html, body { touch-action: pan-x pan-y; }
a, button, input, label { touch-action: manipulation; }
/* === Bottoni: peso testo allineato all'Admin === */
:root{
  --btn-font-weight: 600; /* regola unica (medio, non in grassetto) */
}

.btn,
button.btn,
a.btn,
input[type="button"].btn,
input[type="submit"].btn{
  font-weight: var(--btn-font-weight) !important;
}
/* ===== Modal – stile unico per tutte le dialog (Edit/Elimina/Suggerisci/Rigenera) ===== */
body:has(.modal.show),
body:has(.confirm-modal[data-show="1"]){
  overflow: hidden; /* blocco scroll quando una modale è aperta */
}

.modal,
.confirm-modal{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(17,24,39,.45);      /* overlay offuscato */
  backdrop-filter: blur(2px);
  z-index: 9999;
  opacity: 0; visibility: hidden;
  transition: opacity var(--anim-med,360ms) cubic-bezier(.22,1,.36,1);
}
.modal.show,
.confirm-modal[data-show="1"]{
  opacity: 1; visibility: visible;
}

.modal .modal-card,
.confirm-modal .confirm-card{
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 64px);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 20px 20px 16px;
  color: #000;
}

.modal .modal-card h3,
.confirm-modal .confirm-card h3{
  margin: 0 0 10px 0;
  font-size: 20px;
}
.modal .modal-card p,
.confirm-modal .confirm-card p{
  margin: 10px 0;
  line-height: 1.7; /* più aria tra le righe */
}
.modal .actions,
.confirm-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* --- Alias opzionali, nel caso alcuni overlay NON abbiano la classe .modal --- */
/* Se i container si chiamano così, erediteranno lo stesso stile senza toccare l'HTML */
#editModal, #deleteModal, #suggestModal { 
  position: fixed; inset:0; display:grid; place-items:center;
  background: rgba(17,24,39,.45); backdrop-filter: blur(2px);
  z-index: 9999; opacity: 0; visibility: hidden;
  transition: opacity var(--anim-med,360ms) cubic-bezier(.22,1,.36,1);
}
#editModal.show, #editModal.show, #deleteModal.show, #suggestModal.show { opacity:1; visibility:visible; }
#deleteModal .modal-card, #suggestModal .modal-card { 
  width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 64px);
  overflow:auto; background:#fff; border:1px solid var(--border);
  border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.25); padding:20px 20px 16px;
}
/* ===== Uniforma overlay & scroll lock per TUTTE le modali ===== */
/* 1) Blocca lo scroll quando QUALSIASI modale è aperta */
html.modal-open,
body.modal-open,
body:has(.modal.show),
body:has(.confirm-modal[data-show="1"]),
/* Elimina (gl-modal / gl-modal-backdrop) */
body:has(.gl-modal[style*="display: block"]),
body:has(.gl-modal.show),
body:has(.gl-modal[aria-modal="true"]),
body:has(.gl-modal-backdrop[style*="display: block"]),
body:has(.gl-modal-backdrop.show),
/* Suggerisci (noteModal/backdrop) */
body:has(#noteModal.backdrop[style*="display: block"]),
body:has(#noteModal.backdrop.show) {
  overflow: hidden !important;
}


/* 2) Overlay offuscato (Elimina = .gl-modal-backdrop, Suggerisci = #noteModal.backdrop) */
.gl-modal-backdrop,
#noteModal.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .45);
  backdrop-filter: blur(2px);
  z-index: 9998; /* sotto alla card */
  /* quando sono display:none restano invisibili; quando diventano display:block, l'overlay è attivo */
}

/* 3) Carte delle modali “Elimina” e “Suggerisci” (aspetto coerente con le altre) */
.gl-modal,      /* contenitore card per Elimina */
#noteCard {     /* contenitore card per Suggerisci */
  z-index: 9999;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 64px);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 20px 20px 16px;
  color: #000;
}

/* tipografia/coerenza spacing dentro le card */
.gl-modal h3,
#noteCard h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
}
.gl-modal p,
#noteCard p {
  margin: 10px 0;
  line-height: 1.7;
}
/* Blocca lo scroll quando decido io via JS */
body.modal-open{ 
  overflow: hidden !important;
  overscroll-behavior: contain;
}
.table-bnb td.col-actions {
  min-width: 170px;
  padding-right: 16px;         /* spazio dal bordo destro */
}
.table-bnb td.col-actions .stack{
  display: grid;
  gap: 12px;                   /* più spazio tra i bottoni */
  justify-items: end;          /* allineati a destra */
}
.table-bnb td.col-actions .stack > *{
  margin: 0 !important;        /* annulla eventuali margin inline */
}
.table-bnb td.col-actions .btn.btn-sm{
  min-height: 34px;
}

/* === Host: colonna Azioni nella tabella dei BnB ======================== */
#propRows td.col-actions{
  padding-right: 16px !important;  /* stacca dal bordo destro */
  width: 1%;                       /* evita allargamenti strani */
  white-space: nowrap;
}

/* Forza wrapper dei bottoni a GRID con gap verticale */
#propRows td.col-actions .stack{
  display: grid !important;        /* vince su eventuale flex inline */
  gap: 12px !important;            /* spazio uniforme tra i bottoni */
  justify-items: end;              /* allineati a destra come prima */
  align-items: start !important;   /* ignora align-items inline */
  width: 100%;
}

/* Niente margin “a sorpresa” sui singoli bottoni */
#propRows td.col-actions .stack > *{
  margin: 0 !important;
}
/* Evidenzia riga che richiede verifica posizione */
.needs-verify {
  outline: 2px dashed var(--orange);
  outline-offset: 4px;
}

/* Sezione inline tipo "Cambia password/API key" */
.pwd-inline-hint{
  font-size:12px;
  color:#6b7280;
  margin:0;
}
.pwd-wrap{
  display:flex;
  gap:8px;
  align-items:center;
}
.pwd-wrap .eye-toggle{
  font-size:12px;
  padding:6px 10px;
  white-space:nowrap;
}
.pwd-inline-panel{
  margin-top:8px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px;
}

/* --- breakpoints esistenti --- */
@media (min-width: 400px) and (max-width: 1070px){

.btn.btn-sm{
  height: 38.67px;
 }
 .table-bnb td.col-actions .btn.btn-sm{
  font-size:18px !important; 
}}
@media (max-width: 1070px){
 .table-bnb td.col-actions .btn.btn-sm{
  font-size:18px !important; 
}}