/* ============================================================
   HDO Booking UI v1.4.0 - skin per VikBooking
   Hotel degli Olivi, Garda
   ------------------------------------------------------------
   Tutte le regole sono prefissate con body.hdo-booking-ui
   (classe aggiunta dal plugin) per vincere sui CSS originali.

   PERSONALIZZAZIONE RAPIDA: cambia i colori qui sotto.
   ============================================================ */

body.hdo-booking-ui {
  --hdo-gold: #c59a48;        /* oro brand del tema (bottone PRENOTA ORA) */
  --hdo-gold-hover: #b0863a;  /* oro scuro: hover                         */
  --hdo-btn-text: #ffffff;    /* testo sui bottoni oro (come il tema)     */
  --hdo-ink: #3a2f14;         /* testi scuri di rilievo (prezzi, valori)  */
  --hdo-border: #e6e0d2;      /* bordi schede                             */
  --hdo-text: #666666;        /* testo descrizioni (come il tema)         */
  --hdo-bg-soft: #faf8f3;     /* sfondi leggeri (testate, riepiloghi)     */
  --hdo-radius: 0;            /* il tema usa angoli squadrati             */
  --hdo-title-font: 'Raleway', sans-serif;  /* font titoli del tema       */
  --hdo-title-color: #c59a48; /* oro titoli (versione leggibile)          */
}

/* ============================================================
   1. PULSANTI E ACCENTI - ovunque nel flusso di prenotazione
   ============================================================ */

body.hdo-booking-ui .vbo-pref-color-btn,
body.hdo-booking-ui a.vbo-pref-color-btn,
body.hdo-booking-ui input.vbsubmit,
body.hdo-booking-ui .vbsearchmainsbmt,
body.hdo-booking-ui .vbo-search-submit button,
body.hdo-booking-ui .vbo-search-submit input[type="submit"],
body.hdo-booking-ui .vbdivsearch input[type="submit"],
body.hdo-booking-ui .vbdivsearch button[type="submit"] {
  background: var(--hdo-gold) !important;
  border: 1px solid var(--hdo-gold) !important;
  color: var(--hdo-btn-text) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 13px 26px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: background .2s ease;
}

body.hdo-booking-ui .vbo-pref-color-btn:hover,
body.hdo-booking-ui a.vbo-pref-color-btn:hover,
body.hdo-booking-ui input.vbsubmit:hover,
body.hdo-booking-ui .vbsearchmainsbmt:hover,
body.hdo-booking-ui .vbo-search-submit button:hover,
body.hdo-booking-ui .vbdivsearch input[type="submit"]:hover,
body.hdo-booking-ui .vbdivsearch button[type="submit"]:hover {
  background: var(--hdo-gold-hover) !important;
  border-color: var(--hdo-gold-hover) !important;
}

body.hdo-booking-ui .vbo-pref-color-btn-secondary {
  background: transparent !important;
  border: 1px solid var(--hdo-gold) !important;
  color: var(--hdo-gold-hover) !important;
  border-radius: 0 !important;
}

body.hdo-booking-ui .vbo-pref-color-element { color: var(--hdo-gold) !important; }
body.hdo-booking-ui .vbo-pref-color-text { color: var(--hdo-gold-hover) !important; }

/* ============================================================
   2. FORM DI RICERCA (check-in / check-out / ospiti)
   Viste: [vikbooking view="search"] e widget orizzontale
   ============================================================ */

body.hdo-booking-ui .vbdivsearch {
  background: #fff;
  border: 1px solid var(--hdo-border);
  border-radius: var(--hdo-radius);
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
  max-width: 1100px;
  margin: 0 auto 28px;
}

body.hdo-booking-ui .vbdivsearch .vbo-search-inpblock,
body.hdo-booking-ui .vbdivsearch .vbo-search-num-aduchild-block,
body.hdo-booking-ui .vbdivsearch .vbo-roomsnum,
body.hdo-booking-ui .vbdivsearch .vbo-formcategories {
  margin-bottom: 14px;
}

body.hdo-booking-ui .vbdivsearch label {
  font-size: 13px;
  font-weight: 600;
  color: var(--hdo-text);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
  display: inline-block;
}

body.hdo-booking-ui .vbdivsearch input[type="text"],
body.hdo-booking-ui .vbdivsearch input.vbcheckind,
body.hdo-booking-ui .vbdivsearch input.vbcheckoutd,
body.hdo-booking-ui .vbdivsearch select {
  height: 48px !important;
  border: 1px solid #d9d2c0 !important;
  border-radius: 0 !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  background-color: #fff !important;
  box-shadow: none !important;
  width: 100%;
  max-width: 100%;
}

body.hdo-booking-ui .vbdivsearch input:focus,
body.hdo-booking-ui .vbdivsearch select:focus {
  border-color: var(--hdo-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(197, 154, 72, .25) !important;
}

/* Icona calendario allineata al campo */
body.hdo-booking-ui .vbo-caltrigger {
  color: var(--hdo-gold);
  cursor: pointer;
}

/* Disposizione orizzontale dei campi da tablet in su */
@media (min-width: 768px) {
  body.hdo-booking-ui .vbdivsearch form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
  }
  body.hdo-booking-ui .vbdivsearch .vbo-search-inpblock,
  body.hdo-booking-ui .vbdivsearch .vbo-search-num-aduchild-block,
  body.hdo-booking-ui .vbdivsearch .vbo-roomsnum {
    flex: 1 1 180px;
    margin-bottom: 0;
  }
  body.hdo-booking-ui .vbdivsearch .vbo-search-submit {
    flex: 0 0 auto;
  }
}

/* ============================================================
   3. BARRA DEI PASSAGGI (ricerca > scelta camera > conferma)
   ============================================================ */

body.hdo-booking-ui .vbstepsbarcont { margin: 0 auto 24px; max-width: 1100px; }

body.hdo-booking-ui .vbo-stepbar .vbo-step {
  border: none !important;
  background: var(--hdo-bg-soft) !important;
  color: #9a9174 !important;
  border-radius: 0 !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
}

body.hdo-booking-ui .vbo-stepbar .vbo-step-current {
  background: var(--hdo-gold) !important;
  color: var(--hdo-btn-text) !important;
  font-weight: 600 !important;
}

body.hdo-booking-ui .vbo-stepbar .vbo-step-complete {
  background: #efe9da !important;
  color: var(--hdo-gold-hover) !important;
}

/* ============================================================
   4. RISULTATI RICERCA (riepilogo date + camere trovate)
   ============================================================ */

body.hdo-booking-ui .vbo-results-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

body.hdo-booking-ui .vbo-results-head {
  background: var(--hdo-bg-soft) !important;
  border: 1px solid var(--hdo-border) !important;
  border-radius: var(--hdo-radius) !important;
  padding: 16px 20px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-bottom: 20px;
}

body.hdo-booking-ui .vbo-results-head-det-lbl {
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8c8468 !important;
  display: block;
}

body.hdo-booking-ui .vbo-results-head-det-val {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--hdo-ink) !important;
}

/* ============================================================
   5. ELENCO CAMERE  [vikbooking view="roomslist"]
   Schede: foto sopra, nome + descrizione, prezzo, pulsante
   ============================================================ */

body.hdo-booking-ui .vblist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  body.hdo-booking-ui .vblist { grid-template-columns: 1fr 1fr; }
}

body.hdo-booking-ui .vblistroomblock {
  border: 1px solid var(--hdo-border) !important;
  border-radius: var(--hdo-radius) !important;
  overflow: hidden;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
}

body.hdo-booking-ui .vbimglistdiv { margin: 0 !important; }

body.hdo-booking-ui .vblistimg,
body.hdo-booking-ui .vbimglistdiv img {
  width: 100% !important;
  height: 230px !important;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}

body.hdo-booking-ui .vbdescrlistdiv {
  padding: 20px 24px !important;
  flex: 1;
}

body.hdo-booking-ui .vbrowcname,
body.hdo-booking-ui .vbrowcname a {
  font-family: var(--hdo-title-font) !important;
  font-size: 26px !important;
  font-weight: 300 !important;
  letter-spacing: 2px !important;
  color: var(--hdo-title-color) !important;
  text-decoration: none !important;
  margin-bottom: 8px;
  display: inline-block;
}

body.hdo-booking-ui .vbrowcdescr {
  color: var(--hdo-text) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

body.hdo-booking-ui .vbsrowpricediv,
body.hdo-booking-ui .vbliststartfrom {
  padding: 14px 24px 20px !important;
  border-top: 1px solid var(--hdo-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

body.hdo-booking-ui .vbo_price {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--hdo-ink) !important;
}

body.hdo-booking-ui .vbliststartfrom-subtxt {
  font-size: 13px !important;
  color: #8c8468 !important;
}

/* ============================================================
   6. CALENDARIO DISPONIBILITA'  [vikbooking view="roomsavailability"]
   Versione "schede camera" (griglia giorni nascosta).
   Se vuoi rivedere la griglia dei giorni: elimina questa sezione.
   ============================================================ */

body.hdo-booking-ui .plugin-container > h3 { display: none !important; }

body.hdo-booking-ui .vbo-availability-controls,
body.hdo-booking-ui .vbo-availability-room-monthcal { display: none !important; }

body.hdo-booking-ui .vbo-availability-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  body.hdo-booking-ui .vbo-availability-wrapper { grid-template-columns: 1fr 1fr; }
}

/* Le 3 camere su un'unica riga da desktop in su */
@media (min-width: 1024px) {
  body.hdo-booking-ui .vbo-availability-wrapper { grid-template-columns: 1fr 1fr 1fr; }
}

body.hdo-booking-ui .vbo-availability-room-container {
  border: 1px solid var(--hdo-border);
  border-radius: var(--hdo-radius);
  padding: 24px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  display: flex;
  flex-direction: column;
}

body.hdo-booking-ui .vbo-availability-room-details {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body.hdo-booking-ui .vbo-availability-room-details-right h4 {
  margin: 0 0 8px;
  font-family: var(--hdo-title-font);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--hdo-title-color);
  line-height: 1.2;
}

body.hdo-booking-ui .vbo-availability-room-details-descr {
  color: var(--hdo-text);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Il contenitore del bottone nel CSS originale e' una colonnina
   fissa (~60px): va allargato, altrimenti il bottone resta mozzato */
body.hdo-booking-ui .vbo-availability-room-details-last,
body.hdo-booking-ui .vbo-availability-room-details-last-inner {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

body.hdo-booking-ui .vbo-availability-room-details-last { margin-top: auto; }

body.hdo-booking-ui .vbo-availability-room-details-last a.vbo-pref-color-btn {
  display: block;
  width: 100%;
  text-align: center;
}

body.hdo-booking-ui .vbo-availability-room-details-last-checkin:empty,
body.hdo-booking-ui .vbo-availability-room-details-last-checkin span:empty { display: none; }

/* ============================================================
   7. DETTAGLIO CAMERA E RIFINITURE GLOBALI
   ============================================================ */

body.hdo-booking-ui .vbo-info-room { border-radius: var(--hdo-radius); }

/* Le tabelle larghe scorrono nel proprio riquadro, mai la pagina */
body.hdo-booking-ui .plugin-container .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Quando lo script riporta al widget, lascia spazio all'header sticky */
body.hdo-booking-ui .plugin-container,
body.hdo-booking-ui .vbdivsearch,
body.hdo-booking-ui .vbo-results-wrapper {
  scroll-margin-top: 130px;
}

/* Il blocco prenotazione eredita il font del tema (Elementor) */
body.hdo-booking-ui .plugin-container,
body.hdo-booking-ui .vbdivsearch,
body.hdo-booking-ui .vbo-results-wrapper {
  font-family: inherit !important;
}

/* ============================================================
   8. BARRA DATE + OSPITI  [hdo_booking_bar]
   Riga: Arrivo | Partenza | Adulti | Bambini | Verifica
   ============================================================ */

body.hdo-booking-ui .hdo-booking-bar {
  background: #fff;
  border: 1px solid var(--hdo-border);
  border-radius: var(--hdo-radius);
  padding: 22px 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
  max-width: 1100px;
  margin: 28px auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.hdo-booking-ui .hdo-bb-field { display: flex; flex-direction: column; }

body.hdo-booking-ui .hdo-booking-bar label {
  font-size: 13px;
  font-weight: 600;
  color: var(--hdo-text);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

body.hdo-booking-ui .hdo-booking-bar input[type="date"],
body.hdo-booking-ui .hdo-booking-bar select {
  height: 48px;
  border: 1px solid #d9d2c0;
  border-radius: 0;
  padding: 0 12px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: #2b2b2b;
  width: 100%;
}

body.hdo-booking-ui .hdo-booking-bar input[type="date"]:focus,
body.hdo-booking-ui .hdo-booking-bar select:focus {
  border-color: var(--hdo-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(197, 154, 72, .25);
}

body.hdo-booking-ui .hdo-bb-submit {
  background: var(--hdo-gold);
  border: 1px solid var(--hdo-gold);
  color: var(--hdo-btn-text);
  border-radius: 0;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
  height: 48px;
  padding: 0 28px;
  cursor: pointer;
  transition: background .2s ease;
  white-space: nowrap;
}

body.hdo-booking-ui .hdo-bb-submit:hover {
  background: var(--hdo-gold-hover);
  border-color: var(--hdo-gold-hover);
}

/* Su tablet/desktop tutto su una riga, allineato in basso */
@media (min-width: 768px) {
  body.hdo-booking-ui .hdo-booking-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
  }
  body.hdo-booking-ui .hdo-bb-field { flex: 1 1 170px; }
  body.hdo-booking-ui .hdo-bb-field-small { flex: 0 1 110px; }
  body.hdo-booking-ui .hdo-bb-submit { flex: 0 0 auto; }
}

/* ============================================================
   9. SCHEDE CAMERA SELEZIONABILI (attivate dal JS del plugin)
   Click sulla scheda = scegli la camera; azzurro = selezionata.
   Colori selezione personalizzabili qui sotto.
   ============================================================ */

body.hdo-booking-ui .hdo-selectable {
  --hdo-azure: #3a8dde;        /* azzurro selezione                */
  --hdo-azure-soft: #eaf3fb;   /* sfondo scheda selezionata        */
  --hdo-azure-ink: #1d5c9e;    /* testo/accenti su fondo azzurro   */
}

/* Il "Prenota ora" originale sparisce solo quando la selezione e' attiva */
body.hdo-booking-ui .hdo-selectable .vbo-availability-room-details-last {
  display: none !important;
}

body.hdo-booking-ui .hdo-selectable .vbo-availability-room-details { height: auto; }

body.hdo-booking-ui .hdo-selectable-card {
  cursor: pointer;
  user-select: none;
  border: 2px solid var(--hdo-border);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

body.hdo-booking-ui .hdo-selectable-card:hover {
  border-color: var(--hdo-azure);
  transform: translateY(-2px);
}

body.hdo-booking-ui .hdo-selectable-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(58, 141, 222, .35);
}

/* Finto bottone in fondo alla scheda: invito al click */
body.hdo-booking-ui .hdo-selectable-card::after {
  content: "Scegli questa camera";
  display: block;
  margin-top: auto;
  padding: 13px 20px;
  text-align: center;
  border: 1px solid var(--hdo-azure);
  border-radius: 0;
  color: var(--hdo-azure-ink);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: background .15s ease, color .15s ease;
}

/* Stato selezionato: scheda azzurra */
body.hdo-booking-ui .hdo-selectable-card.hdo-selected {
  border-color: var(--hdo-azure) !important;
  background: var(--hdo-azure-soft) !important;
}

body.hdo-booking-ui .hdo-selectable-card.hdo-selected::after {
  content: "\2713  Camera selezionata \2014 scegli le date qui sotto";
  background: var(--hdo-azure);
  border-color: var(--hdo-azure);
  color: #fff;
}