/**
 * WebCraft Booking Theme - Custom CSS aggiuntivo
 * Caricato automaticamente da functions.php DOPO style.css principale.
 *
 * Usa questo file per override rapidi, sperimentazioni o CSS
 * che preferisci tenere separato dal file principale style.css.
 **/

/* =============================================================
   WEBCRAFT B&B — CSS completo
   Aspetto → Personalizza → CSS aggiuntivo
   Font: Cormorant Garamond (titoli) + Krub (testo)
   Colori: #0e536d teal · #0d1724 navy · #717171 testo · #f4f4f4 bg
============================================================= */

:root{
  --wc-teal:#0e536d;
  --wc-teal-dark:#0b4256;
  --wc-teal-active:#083140;
  --wc-navy:#0d1724;
  --wc-text:#717171;
  --wc-muted:#a3a3a3;
  --wc-line:#e6e6e6;
  --wc-bg:#f4f4f4;
  --wc-error:#f0506e;
  --wc-serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --wc-sans:Krub,"Helvetica Neue",Helvetica,Arial,sans-serif;
}


/* =============================================================
   1. TEMA — logo ed elementi generali
   ============================================================= */

/* Icona: toglie il riempimento nero di default, testo/contorno navy */
.uk-logo .uk-svg path[stroke]{
  fill:none;
  stroke:var(--wc-navy);
}
.uk-logo .uk-svg path[fill]{
  fill:var(--wc-navy);
}

@media (max-width:767px){
  #logo-hero .el-image{
    max-width:150px;
    display:block;
    margin-left:auto;
    margin-right:auto;
  }
}

.uk-divider-icon{
  background-image:url('/wp-content/uploads/2026/07/beach-slipper-2.svg');
  background-size:32px auto;
  height:32px;
}


/* =============================================================
   2. HBOOK — base condivisa
   ============================================================= */
.hbook-wrapper{
  font-family:var(--wc-sans);
  font-size:13px;
  line-height:1.6;      /* Krub ha ascendenti/discendenti generose: +0.1 */
  color:var(--wc-text);
}

/* Nasconde il titolo "Cerca" sopra il form.
   Sulla CLASSE e non sul tag: inc/class-wcb-hbook-seo.php riscrive quel
   titolo da <h3> a <div> per non sommarlo alla gerarchia della pagina, e
   un selettore basato sul tipo di elemento smetterebbe di trovarlo -
   facendo ricomparire "Cerca" in cima al modulo di ricerca. */
.hb-booking-search-form .hb-title-search-form,
.hb-booking-search-form h3{ display:none; }

/* spaziatura dei blocchi HBook */
.hb-booking-search-form,
.hb-accom-list,
.hb-booking-details-form{
  margin:32px auto !important;
}


/* =============================================================
   3. HBOOK — FORM DI RICERCA
   Usato in home (hero + box "Prenota ora") e su /prenota.
   NB: da qui in poi le regole della pagina Prenota sono scoperte
   su .hb-accom-list / .hb-searched-summary / .hb-booking-details-form
   per non interferire con questo form.
   ============================================================= */

.hb-booking-search-form{
  background:var(--wc-bg);
  /* i 40px laterali valgono anche su mobile: se li vuoi piu' stretti
     cambia il valore qui sotto (es. 12px 20px) */
  padding:24px 40px;
}
@media (min-width:640px){ .hb-booking-search-form{ padding:15px 40px; } }
@media (min-width:960px){ .hb-booking-search-form{ padding:20px 40px; } }

/* ---------- Label ---------- */
.hb-booking-search-form label{
  display:block;
  font-family:var(--wc-sans);
  font-weight:600;          /* il 700 di Krub e' piu' pieno del 700 Montserrat */
  font-size:11px;
  line-height:1.4;
  letter-spacing:.07em;     /* Krub e' stretto: le maiuscole vogliono piu' aria */
  text-transform:uppercase;
  color:var(--wc-navy);
  margin-bottom:4px;
}
.hb-search-submit-wrapper label{ display:none; }

/* ---------- Input / select ---------- */
.hb-booking-search-form input[type="text"],
.hb-booking-search-form select{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  height:34px;
  padding:0 8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:0;
  font-family:inherit;
  font-size:13px;
  color:var(--wc-text);
  transition:.2s ease-in-out;
  transition-property:color,border-color;
}
.hb-booking-search-form input[type="text"]:focus,
.hb-booking-search-form select:focus{
  outline:0;
  color:var(--wc-text);
  border-color:var(--wc-navy) !important;
}

.hb-booking-search-form select:not([multiple]):not([size]){
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:18px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22%230D1724%22%20points%3D%2212%201%209%206%2015%206%22%2F%3E%3Cpolygon%20fill%3D%22%230D1724%22%20points%3D%2212%2013%209%208%2015%208%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;
  background-position:100% 50%;
}
.hb-booking-search-form select option{ color:#444; }

/* ---------- Bottone di ricerca ---------- */
.hb-booking-search-form input[type="submit"]{
  display:inline-block;
  box-sizing:border-box;
  width:100%;
  height:34px;
  padding:0 15px;
  border:1px solid transparent;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
  background-color:var(--wc-teal);
  color:#fff;
  font-family:var(--wc-sans);
  font-weight:600;
  font-size:11px;
  line-height:32px;
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
  cursor:pointer;
  transition:.1s ease-in-out;
  transition-property:background-color;
}
.hb-booking-search-form input[type="submit"]:hover { background-color:var(--wc-teal-dark); }
.hb-booking-search-form input[type="submit"]:active{ background-color:var(--wc-teal-active); }

/* ---------- Layout campi ---------- */
.hb-horizontal-search-form .hb-search-fields{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
}

/* mobile: uno sotto l'altro */
.hb-horizontal-search-form .hb-search-fields > p{
  flex:1 1 100%;
  min-width:0;
  margin:0;
}

/* >=640px: due colonne
   NB: .hb-search-submit-wrapper e' anch'esso un <p> dentro .hb-search-fields.
   Il selettore di sola classe (0,2,0) PERDE contro ".hb-search-fields > p"
   (0,2,1): senza la versione col ">" il bottone restava a meta' larghezza
   tra 640 e 959px. Tengo entrambi i selettori nel caso il tema renda il
   wrapper fuori da .hb-search-fields. */
@media (min-width:640px){
  .hb-horizontal-search-form .hb-search-fields > p{
    flex:1 1 calc(50% - 5px);
  }
  .hb-horizontal-search-form .hb-search-submit-wrapper,
  .hb-horizontal-search-form .hb-search-fields > .hb-search-submit-wrapper{
    flex:1 1 100%;
    min-width:0;
  }
}

/* >=960px: tutto su una riga, bottone a larghezza piena della sua colonna */
@media (min-width:960px){
  .hb-horizontal-search-form .hb-search-fields > p{
    flex:1 1 0;
  }
  .hb-horizontal-search-form .hb-search-submit-wrapper,
  .hb-horizontal-search-form .hb-search-fields > .hb-search-submit-wrapper{
    flex:1 1 0;
    min-width:0;
  }
  .hb-horizontal-search-form .hb-search-submit-wrapper input[type="submit"]{
    width:100%;
    min-width:0;
  }
}

/* variante verticale */
.hb-vertical-search-form .hb-search-fields > p{ margin:0 0 10px; }

/* ---------- Messaggi ---------- */
.hb-search-error,
.hb-search-no-result{
  color:var(--wc-error);
  font-size:11px;
  line-height:1.4;
  margin:6px 0 0;
}
.hb-booking-searching{
  color:var(--wc-muted);
  font-size:11px;
  line-height:1.4;
  margin:6px 0 0;
}

/* ---------- Datepicker ---------- */
.hb-datepick-check-in-out-trigger,
.hb-datepick-check-in-out-mobile-trigger{ opacity:.6; }

/* ---------- Mobile: evita lo zoom automatico su iOS ---------- */
@media (max-width:639px){
  .hb-booking-search-form input[type="text"],
  .hb-booking-search-form select{
    height:40px;
    font-size:16px;
  }
  .hb-booking-search-form input[type="submit"]{
    height:40px;
    line-height:38px;
  }
}

/* ---------- Box "Prenota ora" in home (form-2): trasparente ----------
   Deve restare DOPO le regole di .hb-booking-search-form qui sopra. */
form.hb-form-2{
  padding:0;
  background:inherit;
}
#hb-form-2-check-in-date,
#hb-form-2-check-out-date,
#hb-form-2-adults,
#hb-form-2-children{
  background:var(--wc-bg) !important;
}


/* =============================================================
   4. PAGINA PRENOTA — barra riepilogo ricerca
   IMPORTANTE: il plugin tiene la barra nascosta e la mostra dopo
   la ricerca impostando style="display:block" inline. Va quindi
   agganciata a [style*="block"], altrimenti compare una riga
   vuota ("Check-in: Check-out: ...") sopra il form di ricerca.
   ============================================================= */

.hbook-wrapper .hb-searched-summary[style*="block"]{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:20px 48px;
  font-family:var(--wc-sans);
}

/* in home resta comunque sempre nascosta */
body.home .hbook-wrapper .hb-searched-summary{ display:none !important; }

/* i <p> del plugin sono floated a larghezza fissa: li resetto */
.hbook-wrapper .hb-searched-summary > p{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 0 auto;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--wc-muted);
  line-height:1.4;
}

/* il valore (data, n. adulti...) va sotto l'etichetta, piu' grande */
.hbook-wrapper .hb-searched-summary > p span{
  display:block;
  margin-top:5px;
  font-size:15px;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--wc-navy);
}

/* bottone "Change search" spinto a destra */
.hbook-wrapper .hb-searched-summary > p.hb-change-search-wrapper{
  margin-left:auto !important;
}

/* filetto teal solo sulla barra dei risultati, non sui form di ricerca */
.hb-booking-search-form:has(> .hb-searched-summary[style*="block"]){
  border-left:3px solid var(--wc-teal);
}


/* =============================================================
   5. PAGINA PRENOTA — intestazione risultati
   "We have found X types..." diventa il kicker grigio maiuscolo
   gia' usato in home sopra i titoli serif.
   ============================================================= */
.hbook-wrapper .hb-search-result-title-section{
  margin:56px 0 32px;
}
.hbook-wrapper .hb-search-result-title-section p{
  margin:0 0 10px;
  font-family:var(--wc-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--wc-muted);
}
.hbook-wrapper .hb-title{
  font-family:var(--wc-serif);
  font-weight:600;      /* in Cormorant il 700 e' pesante: 600 e' piu' elegante */
  font-size:44px;       /* era 36px con Playfair: Cormorant ha x-height minore */
  line-height:1.15;
  letter-spacing:.005em;
  color:var(--wc-navy);
  margin:0;
}


/* =============================================================
   6. PAGINA PRENOTA — card sistemazione
   Griglia: [immagine a tutta altezza] [contenuto] [azione]
   ============================================================= */
.hbook-wrapper .hb-accom{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) auto;
  grid-template-rows:minmax(26px,1fr) auto auto auto auto minmax(26px,1fr);
  column-gap:36px;
  align-items:center;
  background:#fff;
  border:1px solid var(--wc-line);
  border-radius:0;
  padding:0 36px 0 0;
  margin:0 0 20px;
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.hbook-wrapper .hb-accom:hover{
  border-color:var(--wc-teal);
  box-shadow:0 10px 30px rgba(13,23,36,.10);
  transform:translateY(-2px);
}

/* immagine: tutta la colonna 1, da bordo a bordo */
.hbook-wrapper .hb-accom-img{
  float:none;
  grid-column:1;
  grid-row:1 / -1;
  align-self:stretch;
  width:100%;
  height:100%;
  min-height:190px;
  margin:0;
  object-fit:cover;
  display:block;
}

/* titolo camera — stesso stile dei titoli camera in home */
.hbook-wrapper .hb-accom-title{
  grid-column:2 / 4;
  grid-row:2;
  font-family:var(--wc-serif);
  font-weight:600;
  font-size:31px;       /* era 25px con Playfair */
  line-height:1.2;
  letter-spacing:.005em;
  color:var(--wc-navy);
  margin:0;
}

.hbook-wrapper .hb-accom-desc{
  grid-column:2 / 4;
  grid-row:3;
  font-family:var(--wc-sans);
  font-size:14px;
  line-height:1.75;
  color:var(--wc-text);
  margin:10px 0 0;
}
.hbook-wrapper .hb-accom-desc:empty{ display:none; }

/* blocco prezzo: importo, didascalia e link su righe separate */
.hbook-wrapper .hb-accom-price-total{
  grid-column:2;
  grid-row:4;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin:18px 0 0;
}
.hbook-wrapper .hb-accom-price{
  font-family:var(--wc-sans);
  font-weight:600;
  font-size:30px;
  line-height:1;
  letter-spacing:0;     /* il tracking negativo serviva a Montserrat, non a Krub */
  color:var(--wc-teal);
  margin:0;
}
.hbook-wrapper .hb-accom-price-caption{
  font-family:var(--wc-sans);
  font-size:12px;
  line-height:1.5;
  color:var(--wc-muted);
  margin-top:8px;
  padding-right:20px;
}
/* il trattino separatore non serve piu': link su riga propria */
.hbook-wrapper .hb-accom-price-caption-dash{ display:none; }
.hbook-wrapper .hb-view-price-breakdown{
  display:block;
  width:fit-content;
  margin-top:6px;
  color:var(--wc-navy);
  text-decoration:none;
  border-bottom:1px solid var(--wc-line);
  padding-bottom:1px;
  transition:color .2s ease, border-color .2s ease;
}
.hbook-wrapper .hb-view-price-breakdown:hover{
  color:var(--wc-teal);
  border-color:var(--wc-teal);
}

/* pannello dettaglio prezzo */
.hbook-wrapper .hb-price-breakdown{
  grid-column:2 / 4;
  grid-row:5;
  font-family:var(--wc-sans);
  font-size:13px;
  line-height:1.75;
  color:var(--wc-text);
  background:var(--wc-bg);
  border-left:2px solid var(--wc-teal);
  padding:16px 20px;
  margin:20px 0 0;
}
.hbook-wrapper .hb-price-breakdown-title,
.hbook-wrapper .hb-price-breakdown-section{ display:block; }
.hbook-wrapper .hb-price-breakdown-title{
  font-weight:600;
  color:var(--wc-navy);
  margin-bottom:4px;
}

/* colonna azione: bottone oppure messaggio "selezionata" */
.hbook-wrapper .hb-select-accom-wrapper,
.hbook-wrapper .hb-accom-selected-left-wrapper{
  grid-column:3;
  grid-row:4;
  margin:18px 0 0;
  text-align:right;
}
.hbook-wrapper .hb-select-accom{ margin:0; }

.hbook-wrapper .hb-accom-selected-left-wrapper span{
  font-family:var(--wc-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--wc-teal);
}

/* stato "selezionata": cornice teal sulla card */
.hbook-wrapper .hb-accom:has(> .hb-accom-selected-left-wrapper[style*="block"]){
  border-color:var(--wc-teal);
  box-shadow:inset 0 0 0 1px var(--wc-teal);
}


/* =============================================================
   7. PAGINA PRENOTA — bottoni degli step
   Scoperti su risultati / riepilogo / form dati, cosi' il bottone
   del form di ricerca (sezione 3) resta com'era.
   ============================================================= */
.hbook-wrapper .hb-searched-summary input[type="submit"],
.hbook-wrapper .hb-accom-list input[type="submit"],
.hbook-wrapper .hb-booking-details-form input[type="submit"]{
  width:auto;
  font-family:var(--wc-sans);
  font-weight:600;
  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#fff;
  background:var(--wc-teal);
  border:1px solid var(--wc-teal);
  border-radius:0;
  padding:0 26px;
  height:44px;
  line-height:42px;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:none;
  transition:background-color .2s ease, border-color .2s ease;
}
.hbook-wrapper .hb-searched-summary input[type="submit"]:hover,
.hbook-wrapper .hb-accom-list input[type="submit"]:hover,
.hbook-wrapper .hb-booking-details-form input[type="submit"]:hover{
  background:var(--wc-teal-dark);
  border-color:var(--wc-teal-dark);
}
.hbook-wrapper .hb-searched-summary input[type="submit"]:focus-visible,
.hbook-wrapper .hb-accom-list input[type="submit"]:focus-visible,
.hbook-wrapper .hb-booking-details-form input[type="submit"]:focus-visible{
  outline:2px solid var(--wc-navy);
  outline-offset:2px;
}

/* bottone "Previous / Indietro": versione outline */
.hbook-wrapper .hb-accom-list input[type="submit"][value*="Previous" i],
.hbook-wrapper .hb-accom-list input[type="submit"][value*="Indietro" i],
.hbook-wrapper .hb-booking-details-form input[type="submit"][value*="Previous" i],
.hbook-wrapper .hb-booking-details-form input[type="submit"][value*="Indietro" i]{
  background:transparent;
  color:var(--wc-navy);
  border-color:var(--wc-navy);
}
.hbook-wrapper .hb-accom-list input[type="submit"][value*="Previous" i]:hover,
.hbook-wrapper .hb-accom-list input[type="submit"][value*="Indietro" i]:hover,
.hbook-wrapper .hb-booking-details-form input[type="submit"][value*="Previous" i]:hover,
.hbook-wrapper .hb-booking-details-form input[type="submit"][value*="Indietro" i]:hover{
  background:var(--wc-navy);
  border-color:var(--wc-navy);
  color:#fff;
}


/* =============================================================
   8. PAGINA PRENOTA — step dati cliente (campi del form)
   ============================================================= */
.hbook-wrapper .hb-booking-details-form label{
  display:block;
  font-family:var(--wc-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wc-navy);
  margin-bottom:6px;
}
.hbook-wrapper .hb-booking-details-form input[type="text"],
.hbook-wrapper .hb-booking-details-form input[type="email"],
.hbook-wrapper .hb-booking-details-form input[type="tel"],
.hbook-wrapper .hb-booking-details-form input[type="number"],
.hbook-wrapper .hb-booking-details-form textarea,
.hbook-wrapper .hb-booking-details-form select{
  /* senza box-sizing i 14px di padding si sommavano al width:100% del
     plugin e i campi sbordavano dal contenitore su mobile */
  box-sizing:border-box;
  max-width:100%;
  font-family:var(--wc-sans);
  font-size:14px;
  color:var(--wc-navy);
  background:#fff;
  border:1px solid var(--wc-line);
  border-radius:0;
  padding:11px 14px;
  height:auto;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.hbook-wrapper .hb-booking-details-form textarea{
  width:100%;
  resize:vertical;
}
.hbook-wrapper .hb-booking-details-form input[type="text"]:focus,
.hbook-wrapper .hb-booking-details-form input[type="email"]:focus,
.hbook-wrapper .hb-booking-details-form input[type="tel"]:focus,
.hbook-wrapper .hb-booking-details-form input[type="number"]:focus,
.hbook-wrapper .hb-booking-details-form textarea:focus,
.hbook-wrapper .hb-booking-details-form select:focus{
  border-color:var(--wc-teal);
  box-shadow:0 0 0 3px rgba(14,83,109,.10);
  outline:none;
}

/* mobile: sotto i 16px iOS zooma da solo al focus (come gia' fatto
   per il form di ricerca in sezione 3) */
@media (max-width:639px){
  .hbook-wrapper .hb-booking-details-form input[type="text"],
  .hbook-wrapper .hb-booking-details-form input[type="email"],
  .hbook-wrapper .hb-booking-details-form input[type="tel"],
  .hbook-wrapper .hb-booking-details-form input[type="number"],
  .hbook-wrapper .hb-booking-details-form textarea,
  .hbook-wrapper .hb-booking-details-form select{
    font-size:16px;
    padding:10px 12px;
  }
}


/* =============================================================
   9. PAGINA PRENOTA — step pagamento
   ============================================================= */
.hbook-wrapper .hb-title-payment{ margin-top:48px; }

/* riquadro "You will be charged ..." */
.hbook-wrapper .hb-payment-type-explanation{
  font-family:var(--wc-sans);
  font-size:15px;
  line-height:1.65;
  color:var(--wc-navy);
  background:var(--wc-bg);
  border-left:2px solid var(--wc-teal);
  padding:14px 18px;
  margin:20px 0 28px;
}
.hbook-wrapper .hb-payment-type-explanation span{
  font-weight:600;
  font-size:18px;
  color:var(--wc-teal);
}

/* ---------- Scelta del metodo di pagamento ----------
   Il markup del plugin e' <input radio> + <label> separati da <br>:
   i <br> restano e fanno da separatore di riga. */
.hbook-wrapper .hb-payment-method{
  margin:0 0 24px;
  line-height:2.2;
}

.hbook-wrapper .hb-resa-summary-title{
  line-height:2.2;
}
.hbook-wrapper .hb-payment-method > b{
  display:block;
  margin-bottom:0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wc-navy);
  line-height:1.4;
}
.hbook-wrapper .hb-payment-method input[type="radio"]{
  accent-color:var(--wc-teal);
  width:16px;
  height:16px;
  margin:0 10px 0 0;
  vertical-align:middle;
  cursor:pointer;
}
.hbook-wrapper .hb-payment-method label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  vertical-align:middle;
  font-family:var(--wc-sans);
  font-size:14px;
  color:var(--wc-navy);
  cursor:pointer;
}
/* opzione selezionata */
.hbook-wrapper .hb-payment-method input[type="radio"]:checked + label{
  font-weight:600;
  color:var(--wc-teal);
}
/* loghi con proporzioni diverse (PayPal 75x20, circuiti 32x32):
   si uniformano per altezza */
.hbook-wrapper .hb-payment-method label img{
  height:22px;
  width:auto;
  display:block;
}

/* ---------- Riquadro del form di pagamento ---------- */
.hbook-wrapper .hb-payment-form{
  background:#fff;
  border:1px solid var(--wc-line);
  padding:22px 24px;
  margin:0 0 20px;
}
.hbook-wrapper .hb-payment-form p{
  margin:0 0 12px;
  font-family:var(--wc-sans);
  font-size:13px;
  line-height:1.65;
  color:var(--wc-text);
}
.hbook-wrapper .hb-payment-form p:last-child{ margin-bottom:0; }
.hbook-wrapper .hb-stripe-loading-form{ color:var(--wc-muted); }
.hbook-wrapper .hb-stripe-payment-element-wrapper:not(:empty){ margin:16px 0; }

/* riga "Safe and secure payments" */
.hbook-wrapper .hb-stripe-payment-form-txt-bottom{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wc-muted);
}
.hbook-wrapper .hb-padlock-img{
  height:14px;
  width:auto;
  flex:0 0 auto;
}

/* fascia "Secured payments by PayPal" */
.hbook-wrapper .hb-bottom-area-content i{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  font-style:normal;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wc-muted);
}
.hbook-wrapper .hb-bottom-area-content img{
  height:18px;
  width:auto;
}


/* =============================================================
   10. PAGINA PRENOTA — responsive
   ============================================================= */
@media (max-width:900px){
  .hbook-wrapper .hb-accom{
    grid-template-columns:160px minmax(0,1fr);
    grid-template-rows:minmax(20px,auto) auto auto auto auto auto;
    column-gap:22px;
    padding:0 22px 0 0;
  }
  .hbook-wrapper .hb-accom-title,
  .hbook-wrapper .hb-accom-desc,
  .hbook-wrapper .hb-price-breakdown{ grid-column:2; }
  .hbook-wrapper .hb-accom-price-total{ grid-column:2; grid-row:4; }
  .hbook-wrapper .hb-select-accom-wrapper,
  .hbook-wrapper .hb-accom-selected-left-wrapper{
    grid-column:2;
    grid-row:6;
    text-align:left;
    margin:16px 0 22px;
  }
  .hbook-wrapper .hb-accom-title{ font-size:28px; }
}

/* 639 e non 640: il form di ricerca passa a 2 colonne da min-width:640px,
   quindi a 640px esatti card e form usavano due breakpoint diversi */
@media (max-width:639px){
  .hbook-wrapper .hb-searched-summary[style*="block"]{ gap:16px 28px; }
  .hbook-wrapper .hb-searched-summary > p.hb-change-search-wrapper{
    margin-left:0 !important;
    flex-basis:100%;
  }
  .hbook-wrapper .hb-accom-list .hb-select-accom input[type="submit"]{ width:100%; }

  .hbook-wrapper .hb-accom{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
    padding:0 0 24px;
    column-gap:0;
  }
  .hbook-wrapper .hb-accom-img{
    grid-column:1;
    grid-row:1;
    height:190px;
    min-height:0;
  }
  .hbook-wrapper .hb-accom-title,
  .hbook-wrapper .hb-accom-desc,
  .hbook-wrapper .hb-accom-price-total,
  .hbook-wrapper .hb-price-breakdown,
  .hbook-wrapper .hb-select-accom-wrapper,
  .hbook-wrapper .hb-accom-selected-left-wrapper{
    grid-column:1;
    grid-row:auto;
    margin-left:24px;
    margin-right:24px;
    text-align:left;
  }
  .hbook-wrapper .hb-accom-title{ margin-top:24px; font-size:27px; }
  .hbook-wrapper .hb-title{ font-size:34px; }   /* era 28px con Playfair */

  .hbook-wrapper .hb-payment-form{ padding:18px 20px; }
  .hbook-wrapper .hb-payment-type-explanation{ padding:12px 16px; }
}



/* nuovo css successivo a refactoring */

/* -------------------------------------------------------------
   Il form di ricerca su questa pagina è nudo: niente fondo, niente
   imbottitura, niente margini.

   Perché tutti e tre gli !important servono davvero:
   - margin  combatte ".hb-booking-search-form{margin:32px auto
     !important}" della riga 77, che è a sua volta !important: qui
     vince la specificità maggiore (0,2,0 contro 0,1,0);
   - padding e background combattono le regole della riga 90 e le
     tre media query che le seguono, che !important non ce l'hanno.
   ---------------------------------------------------------- */
.page-id-286 .hb-booking-search-form{
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}

/*
 * NOTA: la regola qui sotto è ormai coperta per intero da quella
 * sopra ed è tenuta solo perché toglierla è una decisione tua.
 * Fino a poco fa sembrava non funzionare, ma non era colpa sua:
 * la riga di commento sopra era scritta con "//", che in CSS non
 * apre un commento, e faceva scartare questa regola dal parser.
 */
.page-id-286 form.hb-booking-search-form{
    background: transparent;
    padding: 0;
}
.page-id-286 form.hb-booking-search-form label{
    color:#ffffff;
}
.page-id-286 .hb-booking-search-form input[type="submit"]{
    background-color: #ffffff;
    color: #717171;
}

/* =============================================================
   MODULO PRENOTAZIONI HBOOK — etichette, caselle, griglia campi
   ============================================================= */

.hb-checkbox-wrapper label,
.hbook-wrapper .hb-booking-details-form label{
  font-family: var(--wc-sans);
  font-weight: 600;
  font-size: 14px !important;
}

/* Il pulsante fisso di contatto usa lo stesso carattere del resto. */
.wcb-contact-button{
  font-family: var(--wc-sans);
}

/* -------------------------------------------------------------
   Casella e testo sulla stessa riga.

   A FLETTERE È IL CONTENITORE, NON L'ETICHETTA.

   La struttura di HBook (utils/resa-options.php) è questa, ed è
   l'unico punto del plugin in cui compare .hb-checkbox-wrapper:

     <span class="hb-checkbox-wrapper">
       <input type="checkbox"> <label for="...">Nome — 15 €</label>
     </span>

   La casella è SORELLA dell'etichetta, non dentro di essa. Mettere
   "display:flex" sulla label la trasforma in un blocco, che va a
   capo: casella sopra, testo sotto. È il difetto che si vedeva allo
   step delle opzioni extra.

   Nota: il consenso ai termini ha invece la casella DENTRO la
   label. Flettere il contenitore va bene per entrambe le forme,
   flettere la label solo per la seconda.
   ---------------------------------------------------------- */
.hbook-wrapper .hb-checkbox-wrapper,
.hb-checkbox-wrapper{
  display: flex;

  /* flex-start e non center: con il prezzo in coda l'etichetta va a
     capo su schermo stretto, e con "center" la casella scivolerebbe
     a metà del blocco di testo invece di restare sulla prima riga. */
  align-items: flex-start;
  gap: 0.6em;
}

.hbook-wrapper .hb-checkbox-wrapper label,
.hb-checkbox-wrapper label{
  /* Esplicito: la regola della riga 569 impone display:block a ogni
     label del modulo, e un blocco dentro un contenitore flesso
     occuperebbe tutto lo spazio residuo. */
  display: inline;
  cursor: pointer;

  /* Quella stessa regola impone 6px sotto ogni label: qui il testo
     sta ACCANTO alla casella e quel margine sfalserebbe la riga. */
  margin-bottom: 0;
}

/* Allinea la casella alla PRIMA riga del testo, non al centro del
   blocco: (interlinea - lato della casella) / 2. */
.hbook-wrapper .hb-checkbox-wrapper input[type="checkbox"],
.hb-checkbox-wrapper input[type="checkbox"]{
  margin-top: 0.22em;
}

/* -------------------------------------------------------------
   CASELLE DI SPUNTA
   -------------------------------------------------------------
   AMBITO: solo dentro il modulo di prenotazione.

   Il selettore nudo input[type="checkbox"] vale (0,1,1) e batte
   .uk-checkbox, che vale (0,1,0): applicato a tutto il sito
   riscriverebbe anche le caselle di UIkit, a partire dal consenso
   privacy della finestra di contatto. Lì UIkit disegna la spunta con
   un background-image su .uk-checkbox:checked, che vale (0,2,0) e
   quindi RESTA: si otterrebbe la spunta bianca di UIkit con sopra il
   quadratino teal di questa regola, sovrapposti.

   Circoscrivere a .hbook-wrapper e .hb-checkbox-wrapper dà lo stesso
   aspetto dove serve e lascia intatto tutto il resto.
   ---------------------------------------------------------- */

/* Quadrato esterno */
.hbook-wrapper input[type="checkbox"],
.hb-checkbox-wrapper input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  flex: 0 0 auto;           /* impedisce che si schiacci accanto al testo */
  width: 1.15em;
  height: 1.15em;
  border: 1px solid #767676;
  border-radius: 0;
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transform: translateY(-0.05em);
}

/* Quadratino interno */
.hbook-wrapper input[type="checkbox"]::before,
.hb-checkbox-wrapper input[type="checkbox"]::before{
  content: "";
  width: 0.6em;
  height: 0.6em;
  background: #0e536d;
  border-radius: 0;
  transform: scale(0);
  transition: transform .12s ease-in-out;
}

.hbook-wrapper input[type="checkbox"]:checked::before,
.hb-checkbox-wrapper input[type="checkbox"]:checked::before{ transform: scale(1); }

.hbook-wrapper input[type="checkbox"]:checked,
.hb-checkbox-wrapper input[type="checkbox"]:checked{ border-color: #0e536d; }

.hbook-wrapper input[type="checkbox"]:focus-visible,
.hb-checkbox-wrapper input[type="checkbox"]:focus-visible{
  outline: 2px solid #0e536d;
  outline-offset: 2px;
}

.hbook-wrapper input[type="checkbox"]:disabled,
.hb-checkbox-wrapper input[type="checkbox"]:disabled{
  border-color: #bdbdbd;
  background: #f5f5f5;
  cursor: not-allowed;
}

.hbook-wrapper input[type="checkbox"]:disabled::before,
.hb-checkbox-wrapper input[type="checkbox"]:disabled::before{ background: #bdbdbd; }

.hbook-wrapper input[type="checkbox"]:disabled + span,
.hbook-wrapper label:has(input[type="checkbox"]:disabled),
.hb-checkbox-wrapper input[type="checkbox"]:disabled + span,
.hb-checkbox-wrapper label:has(input[type="checkbox"]:disabled){ color: #8a8a8a; }

.hb-title-extra{
  margin-bottom: 12px !important;
}

/* -------------------------------------------------------------
   DATI DEL CLIENTE SU DUE COLONNE
   ---------------------------------------------------------- */

.hb-details-fields{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  align-items: start;
}

/* Il titolo occupa tutta la riga */
.hb-details-fields > .hb-title{
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* Ogni campo è una cella */
.hb-details-fields > p{
  margin: 0;
  min-width: 0; /* evita overflow degli input */
}

/* Label sopra il campo.
   Anche qui il selettore lungo serve a battere la riga 569, che
   impone 6px di margine sotto: senza, il 4px non arriverebbe. */
.hbook-wrapper .hb-details-fields label,
.hb-details-fields label{
  display: block;
  margin-bottom: 4px;
}

/* Input e select a larghezza piena della cella */
.hb-details-fields input[type="text"],
.hb-details-fields select,
.hb-details-fields .selectize-control{
  width: 100%;
  box-sizing: border-box;
}

/* Mobile: una colonna */
@media (max-width: 600px){
  .hb-details-fields{
    grid-template-columns: 1fr;
  }
}


/* =============================================================
   UTILITÀ
   ============================================================= */

/**
 * Nasconde alla vista lasciando il testo agli screen reader.
 *
 * Serve per le etichette che sullo schermo sono ovvie dal contesto
 * ma che, lette ad alta voce da sole, non direbbero nulla.
 *
 * Non si usa "display:none" né "visibility:hidden": entrambi tolgono
 * l'elemento anche alla tecnologia assistiva, che è l'opposto dello
 * scopo. Il testo resta nel flusso, ridotto a un pixel e ritagliato.
 *
 * Gli !important servono perché questa classe deve vincere su
 * qualunque regola di componente la incontri: è una dichiarazione di
 * intenti, non un suggerimento.
 *
 * NB: wc-contact.css contiene lo stesso ritaglio scritto per esteso
 * al proprio interno, e resta così di proposito. Quel foglio è un
 * modulo autonomo che gira anche su siti dove custom.css non esiste:
 * fargli dipendere da una classe definita qui lo romperebbe in
 * silenzio proprio dove nessuno andrebbe a cercare.
 */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* -------------------------------------------------------------
   CAMPO PAESE — pareggia l'altezza agli altri campi

   Il campo Paese non è un <select>: HBook lo sostituisce con
   selectize, che nasconde il select vero e disegna un <div>
   .selectize-input al suo posto. Quel div prende le proprie
   misure dal foglio di selectize (font 13px, interlinea 18px,
   imbottitura 8px) più alcuni stili INLINE che selectize copia
   dal select originale - fra cui "line-height: 34px".

   Risultato misurato prima della correzione: 36px contro i 41px
   di ogni altro campo del modulo. Cinque pixel di scalino, su una
   riga sola, che è esattamente quanto basta per notarlo.

   Gli !important non sono decorativi: gli stili che si combattono
   sono INLINE sull'elemento, e senza non si vincono.

   Si usa flex e non un'interlinea calcolata: l'altezza resta
   corretta anche quando selectize inserisce il <div class="item">
   con il paese scelto, che con "line-height" andrebbe fuori asse.
   ---------------------------------------------------------- */

.hbook-wrapper .hb-details-fields .selectize-control .selectize-input,
.hbook-wrapper .hb-booking-details-form .selectize-control .selectize-input{
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 41px;               /* misurato sugli altri campi */
  padding: 0 14px !important;     /* l'inline impone padding-left: 8px */
  line-height: 1.4 !important;    /* l'inline impone line-height: 34px */
  font-family: var(--wc-sans);
  font-size: 14px;
  color: var(--wc-navy);
  background: #fff !important;
  border: 1px solid var(--wc-line) !important;
  border-radius: 0 !important;
  box-shadow: none;
}

/* Il campo di testo interno non deve aggiungere altezza propria. */
.hbook-wrapper .hb-details-fields .selectize-input > input,
.hbook-wrapper .hb-booking-details-form .selectize-input > input{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit !important;
}

/* La tendina segue lo stesso bordo, per non stonare all'apertura. */
.hbook-wrapper .hb-details-fields .selectize-dropdown,
.hbook-wrapper .hb-booking-details-form .selectize-dropdown{
  border: 1px solid var(--wc-line);
  border-radius: 0;
  font-family: var(--wc-sans);
  font-size: 14px;
}