/* =========================================================================
   TEMA "BOSCO" — Booking engine WBHotel
   Concept: Bosco Wellness — spa / eco resort. Calmo, arioso, naturale.
   CSS self-contained: caricato AL POSTO di style.css quando il tenant sceglie
   il tema Bosco. Re-stila il DOM Bootstrap reale (selettore, risultati, modal,
   pagina grazie) mantenendo la foto della struttura come sfondo, sotto una
   leggera foschia verde/bianca che preserva la leggibilita'.
   Palette salvia/eucalipto · deep forest · off-white/pietra calda.
   Serif umanista per titoli/camere/prezzi · sans di sistema per il corpo.
   ========================================================================= */

:root{
  --ink:#2f4739; --muted:#54685a; --faint:#8a9686;
  --line:#e2e0d3; --mist:#f5f7f2; --surface:#ffffff;
  --stone:#e7e3d7; --stone-soft:#efece2;
  --airy:rgba(245,247,242,.86); --airy-brd:rgba(255,255,255,.66);
  --forest:#2f4739; --forest-deep:#243a2d;
  --sage:#5b7a5e; --sage-2:#6f8f6a; --moss:#6d7a68;
  --leaf-bg:#e6efe4; --leaf:#3f6a45;
  --r:16px; --r-sm:12px;
  --shadow:0 18px 46px -20px rgba(47,71,57,.38);
  --shadow-sm:0 8px 22px -14px rgba(47,71,57,.32);
  --ff-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --ff-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Ground: foto struttura + foschia verde chiara ---------- */
body{
  font-family:var(--ff-sans); color:var(--ink); font-size:15px; line-height:1.7;
  background-size:cover; background-position:center; background-attachment:fixed;
  -webkit-font-smoothing:antialiased; position:relative; min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(245,247,242,.55), rgba(226,239,228,.30) 42%, rgba(47,71,57,.28));
}
/* z-index differenziati: l'header (e il suo dropdown lingua) deve stare SOPRA
   la console/i risultati, altrimenti il menu lingua finisce dietro le card. */
.header-content{ position:relative; z-index:3; }
.page-content{ position:relative; z-index:1; }

/* ---------- Header ---------- */
.header-content{ padding-top:6px; }
.header-content .logo{ max-width:190px; height:auto; filter:drop-shadow(0 2px 10px rgba(36,58,45,.30)); }
.header-content .nav-link{
  color:#fff; font-weight:500; letter-spacing:.015em; transition:color .25s ease, opacity .25s ease;
}
.header-content .nav-link:hover{ color:#fff; opacity:.82; }
.header-content .dropdown-menu{
  border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-sm); padding:6px;
}
.header-content .dropdown-item{ border-radius:9px; font-size:14px; }
.header-content .dropdown-item.active{ background:var(--sage); }
.header-content .nav .lang, .header-content .dropdown-toggle{
  border:1px solid rgba(255,255,255,.30); border-radius:999px; padding:5px 13px;
}

/* ---------- Hero copy (schermata iniziale) ---------- */
h1{ font-family:var(--ff-display); font-weight:500; letter-spacing:.005em; }
#risultati h1{ font-size:clamp(28px,4vw,44px); line-height:1.1; text-wrap:balance; }
.text-shadow{ text-shadow:0 2px 20px rgba(36,58,45,.45); }

/* ---------- Console di ricerca (off-white arioso) — l'elemento firma ---------- */
.page-content .col-md-3 .card{
  background:var(--airy)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.05); backdrop-filter:blur(14px) saturate(1.05);
  border:1px solid var(--airy-brd)!important; border-radius:var(--r)!important;
  box-shadow:var(--shadow)!important;
}
.page-content .col-md-3 .card-body{ padding:24px 24px 26px; }

.form-label{
  font-weight:600; font-size:.85rem; color:var(--muted); margin-bottom:.45rem; letter-spacing:.01em;
}
.form-label .text-muted{ color:var(--faint)!important; font-weight:500; }

.form-control,
input[type=date], input[type=number], input[type=text], input[type=email], input[type=tel]{
  width:100%; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:var(--r-sm); padding:.66rem .85rem; font:inherit; font-weight:500;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
input[type=date]:focus, input[type=number]:focus, input[type=text]:focus,
input[type=email]:focus, input[type=tel]:focus{
  border-color:var(--sage); box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 24%, transparent); outline:none;
}
.form-control-sm{ padding:.46rem .62rem; }
/* riga ospiti: input piccolo + label affiancata */
.form-group.d-flex .form-label{ margin-bottom:0; color:var(--ink); font-weight:600; }
.form-select{ border:1px solid var(--line); border-radius:var(--r-sm); padding:.52rem .72rem; }

/* nota ospiti + errore date */
.page-content .col-md-3 .card .text-success{ color:var(--leaf)!important; }
#errore_date .text-danger{ color:#a94a3f!important; }

/* ---------- Bottoni ---------- */
.btn-primary{
  background:linear-gradient(180deg,var(--sage),var(--forest))!important;
  border:0!important; color:#fff!important; border-radius:var(--r-sm)!important;
  font-weight:700!important; letter-spacing:.015em; padding:.72rem 1rem;
  box-shadow:0 12px 26px -14px rgba(47,71,57,.60);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.05); color:#fff!important; }
.btn-primary:focus-visible{ outline:3px solid color-mix(in srgb,var(--sage) 60%, transparent); outline-offset:2px; }
#check_disponibilita{ font-size:1rem; padding:.88rem 1rem; }

.btn-secondary{
  background:var(--surface)!important; border:1px solid var(--line)!important; color:var(--forest)!important;
  border-radius:var(--r-sm)!important; font-weight:600!important;
}
.btn-secondary:hover{ background:var(--mist)!important; color:var(--forest-deep)!important; }

/* bottone "Prenota" della tariffa: CTA piena forest green. Specificita' (0,2,0)
   per vincere su .btn-secondary a prescindere dall'ordine sorgente. */
.prenota_camera.btn-secondary{
  background:var(--forest)!important; border:1px solid var(--forest)!important; color:#fff!important;
  font-weight:700!important;
}
.prenota_camera.btn-secondary:hover{ background:var(--forest-deep)!important; border-color:var(--forest-deep)!important; color:#fff!important; }

/* ---------- Pannello risultati ---------- */
#risultati .card{
  background:var(--surface)!important; border:1px solid var(--line)!important;
  border-radius:var(--r)!important; box-shadow:var(--shadow)!important;
}
#risultati .card .card-body h5{ font-family:var(--ff-display); font-weight:500; }
.lista-impostazioni{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; }
.lista-impostazioni li{
  padding:0 15px 4px 0; margin-right:15px; color:var(--muted); font-weight:600; font-size:.86rem;
  border-right:1px solid var(--line);
}
.lista-impostazioni li:last-child{ border-right:0; margin-right:0; }
.contieni-risultati{ height:60vh; overflow-y:auto; padding-right:6px; }
.contieni-risultati::-webkit-scrollbar{ width:8px; }
.contieni-risultati::-webkit-scrollbar-thumb{ background:var(--stone); border-radius:8px; }

/* ---------- Card camera ---------- */
.camera{
  background:var(--surface)!important; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:20px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.camera:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.camera .img-camera{ width:100%; height:100%; min-height:172px; object-fit:cover; }
.camera h6.fw-bold{ font-family:var(--ff-display); font-weight:500; font-size:1.32rem; letter-spacing:.01em; color:var(--forest); }
.camera .text-truncate{ color:var(--muted); }
.lista-proprieta-camera, .lista-servizi-camera{ list-style:none; padding:0; margin:.25rem 0; display:flex; flex-wrap:wrap; gap:15px; color:var(--moss); font-size:.85rem; }
.camera .a_partire_da, .camera p.mb-1.fst-italic{ color:var(--faint); text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; }
.camera .prezzo{ font-family:var(--ff-display); font-weight:600; font-size:1.5rem; color:var(--forest); font-variant-numeric:tabular-nums; }
.mostra_informazioni{ font-size:.8rem; padding:.52rem .9rem; }

/* ---------- Riga tariffa ---------- */
.tariffa{ border-bottom:1px solid var(--line); }
.tariffa:last-child{ border-bottom:none!important; }
.tariffa h6{ font-family:var(--ff-display); font-style:normal!important; font-weight:500; font-size:1.02rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tariffa .mb-0{ color:var(--faint); font-size:.82rem; }
.tariffa .border-start{ border-left:1px solid var(--line)!important; }
.tariffa-prezzo{
  font-family:var(--ff-display); font-weight:600; font-size:1.4rem; color:var(--forest);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.risalta{ font-weight:700; color:var(--sage); }

/* badge trattamento + Uso singola */
.badge-trattamento{
  display:inline-block; background:var(--leaf-bg); color:var(--leaf);
  font-size:.7rem; font-weight:700; padding:.2rem .55rem; border-radius:8px;
  margin-left:.3rem; vertical-align:middle; white-space:nowrap; letter-spacing:.01em;
}
.badge.bg-info{ background:var(--stone-soft)!important; color:var(--moss)!important; font-weight:700; border-radius:8px; padding:.28rem .55rem; }

/* ---------- Modal prenotazione ---------- */
#modalPrenotaCamera .modal-content, #modalInformazioniCamera .modal-content{
  border:0; border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden;
}
#modalPrenotaCamera .modal-header, #modalInformazioniCamera .modal-header{
  background:linear-gradient(180deg,var(--mist),transparent); border-bottom:1px solid var(--line); padding:20px 24px;
}
#modalPrenotaCamera .modal-title, #modalInformazioniCamera .modal-title{ font-family:var(--ff-display); font-weight:500; color:var(--forest); }
#modalPrenotaCamera .modal-body, #modalInformazioniCamera .modal-body{ padding:24px 26px; }
#modalPrenotaCamera .table{ margin-bottom:0; }
#modalPrenotaCamera .table td{ padding:.44rem .2rem; }
#modalPrenotaCamera .form-label.small{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700; }
#modalPrenotaCamera h5, #modalPrenotaCamera h6{ font-family:var(--ff-display); font-weight:500; }
#modalPrenotaCamera .modal-footer{ border-top:1px solid var(--line); }
/* input telefono intl-tel-input: lasciato funzionante, allineato al tema */
.iti{ width:100%; }
.iti__tel-input, .iti input[type=tel]{ width:100%; }

/* ---------- Pagina "grazie" ---------- */
body.thank-you-page{
  background:linear-gradient(rgba(47,71,57,.62), rgba(36,58,45,.74), rgba(36,58,45,.82)), url('../../immagini/bg2.jpg') center/cover fixed;
}
body.thank-you-page::before{ display:none; }
.thank-you-page h1{ font-family:var(--ff-display); font-weight:500; font-size:clamp(32px,5vw,54px); line-height:1.12; }
/* CTA "nuova prenotazione": rimpiazza l'animazione a maschera con un pill pulito */
.button-container-3{
  position:static!important; width:auto!important; height:auto!important;
  overflow:visible!important; border:0!important; background:transparent!important;
  display:inline-block;
}
.button-container-3 .mas{ display:none!important; }
.button-container-3 .torna_home{
  position:static!important; width:auto!important; height:auto!important;
  -webkit-mask:none!important; mask:none!important; animation:none!important;
  background:var(--mist)!important; color:var(--forest-deep)!important;
  border:1px solid rgba(255,255,255,.6)!important;
  border-radius:999px!important; padding:.8rem 1.7rem!important; font-weight:700!important;
  letter-spacing:.01em; box-shadow:0 14px 30px -14px rgba(0,0,0,.45); cursor:pointer;
  transition:transform .16s ease, background .16s ease;
}
.button-container-3 .torna_home:hover{ transform:translateY(-1px); background:#fff!important; }

/* ---------- Responsive ---------- */
@media (max-width:767px){
  .contieni-risultati{ height:auto; max-height:none; overflow:visible; }
  .camera .img-camera{ min-height:152px; }
  .lista-impostazioni{ font-size:.8rem; }
}

/* ---------- Accessibilita' ---------- */
:focus-visible{ outline:3px solid color-mix(in srgb,var(--sage) 58%, transparent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }