/* ============================================================
   Override CSS per il widget Krossbooking — adattamento allo stile luxury.
   Caricato DOPO https://data.krossbooking.com/widget/v6/hemeras/1.css
   ============================================================ */

.kross-container,
.kross-container * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: 0.01em;
}

/* Wrapper di lusso intorno al widget nelle property pages */
.booking-card-luxe {
  background: var(--white, #fff);
  border-radius: var(--radius-lg, 14px);
  padding: 26px 24px 24px;
  box-shadow: 0 14px 40px rgba(20,15,5,0.06), 0 2px 10px rgba(20,15,5,0.04);
  border: 1px solid var(--line-soft, #ece6d8);
  position: sticky;
  top: 100px;
}
.booking-card-luxe > h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  color: var(--ink, #0a0a0a);
  font-weight: 500;
  margin: 0 0 18px 0;
  border-bottom: 1px solid var(--line-soft, #ece6d8);
  padding-bottom: 14px;
}

/* Bottoni del widget → palette gold/ink */
.kross-container .kb-btn,
.kross-container .btn-primary,
.kross-container button[type="submit"] {
  background-color: var(--ink, #0a0a0a) !important;
  border-color: var(--ink, #0a0a0a) !important;
  color: #fff !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 14px 24px !important;
  transition: background 0.18s !important;
}
.kross-container .kb-btn:hover,
.kross-container .btn-primary:hover,
.kross-container button[type="submit"]:hover {
  background-color: var(--gold, #b8954a) !important;
  border-color: var(--gold, #b8954a) !important;
}

/* Date picker accent */
.KB-daterangepicker td.active,
.KB-daterangepicker td.active:hover {
  background-color: var(--gold, #b8954a) !important;
  border-color: var(--gold, #b8954a) !important;
  color: #fff !important;
}
.KB-daterangepicker td.in-range {
  background-color: rgba(184, 149, 74, 0.12) !important;
  color: var(--ink, #0a0a0a) !important;
}

/* Input fields */
.kross-container input,
.kross-container select,
.kross-container .kg-select {
  border-radius: 6px !important;
  border-color: var(--line, #e5e0d5) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  color: var(--ink, #0a0a0a) !important;
}
.kross-container input:focus,
.kross-container select:focus,
.kross-container .kg-select:focus {
  border-color: var(--gold, #b8954a) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(184,149,74,0.15) !important;
}

/* Hero search container variant — homepage */
.hero-kross-wrap {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-lg, 14px);
  padding: 8px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.18), 0 4px 14px rgba(0,0,0,0.10);
  max-width: 880px;
}
.hero-kross-wrap .kross-container {
  background: transparent !important;
}

/* ===== Krossbooking widget date layout fix ===== */
/* Il widget v6 usa float-based layout che si rompe in colonne strette.
   Forziamo un grid pulito: label sopra, numero grande a sx, mese+giorno a dx. */
.kross-container .kb-form-group {
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--line-soft, #ece6d8) !important;
}
.kross-container .kb-form-group:last-of-type {
  border-bottom: none !important;
}
.kross-container .kb-form-group.kb-date {
  display: flex !important;
  gap: 14px !important;
}
.kross-container .kb-form-group.kb-date .kb-d1,
.kross-container .kb-form-group.kb-date .kb-d2 {
  flex: 1 1 50% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  align-items: center !important;
}
.kross-container .kb-form-group .kb-label {
  grid-column: 1 / -1 !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--gold-dark, #9a7a3a) !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}
.kross-container .kb-form-group.kb-date .kb-d {
  grid-column: 1 !important;
  grid-row: 2 !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  color: var(--ink, #0a0a0a) !important;
  line-height: 1 !important;
  float: none !important;
}
.kross-container .kb-form-group.kb-date .kb-dex {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: center !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  float: none !important;
}
.kross-container .kb-form-group.kb-date .kb-dex .kb-mmmm,
.kross-container .kb-form-group.kb-date .kb-dex .kb-ddd {
  display: block !important;
  color: var(--text, #2a2a2a) !important;
}
.kross-container .kb-form-group.kb-date .kb-dex .kb-ddd {
  color: var(--text-muted, #6b6b6b) !important;
}
.kross-container .clearfix { display: none !important; }

/* Guests block — layout pulito */
.kross-container .kb-form-group.kb-adults .kb-d2 {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
}
.kross-container .kb-form-group.kb-adults .kb-d2 .kb-label {
  grid-column: 1 !important;
  margin-bottom: 0 !important;
}
.kross-container .kb-form-group.kb-adults .kb-qt {
  grid-column: 2 !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--ink, #0a0a0a) !important;
}

/* ===== FIX: bottone "Verifica Disponibilità" finisce fuori dalla sidebar =====
   Il widget v6 mette form.form-kross-booking in display:flex orizzontale, con
   3 colonne (date | ospiti | bottone). In una sidebar 300px il bottone overflow
   a destra (x=1539 vs container x=1350). Forza stack verticale. */
.kross-container .form-kross-booking {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
}
.kross-container .kb-availabilityButtonContainer {
  width: 100% !important;
  margin: 6px 0 0 !important;
  flex: 0 0 auto !important;
}
.kross-container .kb-btn-submit,
.kross-container .kb-availabilityButtonContainer .kb-btn {
  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.kross-container .kb-btn-submit-svg .kb-rotating {
  display: none;
}
.kross-container .kb-btn-submit.is-loading .kb-btn-submit-svg .kb-rotating {
  display: inline-block;
}