/*
  Paste everything below into Kross Booking → Widget → Appearance → CSS Extra
  Also set Primary color to: #934944
*/

:root {
  --kross_widget_primary: #934944;
}

.kross-container,
.kross-container .form-kross-booking,
#kb-widget-container {
  font-family: "Raleway", Arial, sans-serif !important;
  color: #1f1f1f !important;
}

.kross-container .kross-transparency {
  background: transparent !important;
  padding: 0 !important;
}

.kross-container #kb-widget-container,
.kross-container .form-kross-booking {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12) !important;
  padding: 24px !important;
  display: block !important;
  max-width: 360px;
}

@media (min-width: 1024px) {
  .kross-container .form-kross-booking {
    display: block !important;
    flex-direction: column !important;
  }

  .kross-container .kb-btn,
  .kross-container .kb-btn-submit,
  #kb-widget-container .kb-btn-submit {
    max-width: none !important;
    margin-left: 0 !important;
  }
}

/* ── Date + guests box (matches .booking-form on room pages) ── */

.kross-container .kb-form-group,
#kb-widget-container .kb-form-group {
  border: 1px solid #dcdcdc !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
  background: #fff !important;
  display: block !important;
}

/* Kill Kross default white borders on the field wrapper */
.kross-container .kb-form-group.kb-form-group,
#kb-widget-container .kb-form-group.kb-form-group {
  border: 1px solid #dcdcdc !important;
}

.kross-container .kb-date,
#kb-widget-container .kb-date {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background: #fff !important;
}

/* Top row: arrival | departure */
.kross-container .kb-select-dates,
#kb-widget-container .kb-select-dates {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #dcdcdc !important;
  background: #fff !important;
}

/* If dates are direct children of .kb-date (no .kb-select-dates wrapper) */
.kross-container .kb-date:not(:has(.kb-select-dates)),
#kb-widget-container .kb-date:not(:has(.kb-select-dates)) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border-bottom: 1px solid #dcdcdc !important;
}

.kross-container .kb-date > div,
#kb-widget-container .kb-date > div {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
}

.kross-container .kb-d1,
.kross-container .kb-d2,
.kross-container .kb-date .kb-d1,
.kross-container .kb-date .kb-d2,
.kross-container .kb-select-dates .kb-d1,
.kross-container .kb-select-dates .kb-d2,
.kross-container .kb-date > div:first-child,
.kross-container .kb-select-dates > div:first-child,
#kb-widget-container .kb-d1,
#kb-widget-container .kb-d2,
#kb-widget-container .kb-date .kb-d1,
#kb-widget-container .kb-date .kb-d2,
#kb-widget-container .kb-select-dates .kb-d1,
#kb-widget-container .kb-select-dates .kb-d2,
#kb-widget-container .kb-date > div:first-child,
#kb-widget-container .kb-select-dates > div:first-child {
  position: relative !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-right: 1px solid #dcdcdc !important;
  background: #fff !important;
}

.kross-container .kb-d2,
.kross-container .kb-date .kb-d2,
.kross-container .kb-select-dates .kb-d2,
.kross-container .kb-date > div:last-child,
.kross-container .kb-select-dates > div:last-child,
#kb-widget-container .kb-d2,
#kb-widget-container .kb-date .kb-d2,
#kb-widget-container .kb-select-dates .kb-d2,
#kb-widget-container .kb-date > div:last-child,
#kb-widget-container .kb-select-dates > div:last-child {
  border-right: 0 !important;
}

/* Fallback divider if border-right is stripped by widget CSS */
.kross-container .kb-d1::after,
.kross-container .kb-select-dates .kb-d1::after,
.kross-container .kb-date > div:first-child::after,
.kross-container .kb-select-dates > div:first-child::after,
#kb-widget-container .kb-d1::after,
#kb-widget-container .kb-select-dates .kb-d1::after,
#kb-widget-container .kb-date > div:first-child::after,
#kb-widget-container .kb-select-dates > div:first-child::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 1px !important;
  height: 100% !important;
  background: #dcdcdc !important;
  pointer-events: none !important;
}

/* Bottom row: guests */
.kross-container .kb-adults,
#kb-widget-container .kb-adults {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  background: #fff !important;
}

.kross-container .kb-adults > div,
#kb-widget-container .kb-adults > div {
  width: 100% !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.kross-container .kb-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #1f1f1f !important;
  padding: 0 !important;
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
  display: block !important;
}

.kross-container .kb-date .kb-d,
.kross-container .kb-date .kb-dex,
.kross-container .kb-date .kb-mmmm,
.kross-container .kb-date .kb-ddd,
.kross-container .kb-qt,
#kb-widget-container .kb-date .kb-d,
#kb-widget-container .kb-date .kb-dex,
#kb-widget-container .kb-date .kb-mmmm,
#kb-widget-container .kb-qt {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #555 !important;
  float: none !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
}

.kross-container .kb-date .kb-d {
  display: inline !important;
  margin-right: 4px !important;
}

.kross-container .kb-date .kb-dex {
  display: inline !important;
}

.kross-container .kb-date .kb-ddd {
  display: none !important;
}

.kross-container .kb-date > div:hover,
.kross-container .kb-adults:hover,
.kross-container .kb-d1:hover,
.kross-container .kb-d2:hover,
#kb-widget-container .kb-date > div:hover,
#kb-widget-container .kb-adults:hover,
#kb-widget-container .kb-d1:hover,
#kb-widget-container .kb-d2:hover {
  background-color: #fafafa !important;
}

.kross-container .kb-btn,
.kross-container .kb-btn-submit,
#kb-widget-container .kb-btn-submit {
  width: 100% !important;
  max-width: none !important;
  margin: 6px 0 0 !important;
  border-radius: 10px !important;
  background-color: #934944 !important;
  border-color: #934944 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px 16px !important;
  height: auto !important;
  line-height: 1.4 !important;
  transition: filter 0.2s ease !important;
}

.kross-container .kb-btn:hover,
.kross-container .kb-btn-submit:hover,
#kb-widget-container .kb-btn-submit:hover {
  filter: brightness(0.95) !important;
}

.kross-container .kb-group {
  flex: none !important;
  width: 100% !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
}

.kross-container select#kross_group,
.kross-container select#kross_property,
.select2-container--kross .select2-selection--single .select2-selection__rendered {
  color: #1f1f1f !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

.select2-container--kross .select2-selection--single {
  border: 1px solid #dcdcdc !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
}

.form-kross-booking > .kb-sharebuttonContainer,
.form-kross-booking .kb-availabilityButtonContainer .kb-sharebuttonContainer {
  display: none !important;
}

.form-kross-booking .kb-availabilityButtonContainer {
  display: block !important;
  width: 100% !important;
}

.KB-daterangepicker {
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15) !important;
  font-family: "Raleway", Arial, sans-serif !important;
}

.KB-daterangepicker td.active,
.KB-daterangepicker td.active:hover,
.KB-daterangepicker td.in-range,
.kb-btn-done {
  background-color: #934944 !important;
}

.KB-daterangepicker th.month {
  color: #934944 !important;
}

/* Site embed: sidebar + popup */
.booking-card--kross {
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.booking-card--kross .kross-container {
  width: 100%;
}

.booking-card--kross .form-kross-booking,
.booking-card--kross #kb-widget-container {
  max-width: none !important;
}