/* Booking / datepicker theme — modern override for the legacy jQuery UI theme
   that ships inside the minified per-page bundles (alaverdicss/pages/*.css).
   Loaded on every page from head.php, after the per-page bundle, so these
   rules win by order and by #id specificity. !important is used where the
   bundle theme is otherwise too sticky.
   Design language: white surface, NimbusRom body, ArimaKoshi title,
   gold (#8c6e47) accent, no bevels, no PNG sprite icons. */

#ui-datepicker-div {
  /* jQuery UI has no base stylesheet rule hiding this div by default — it only
     ever gets display:none/block via inline styles set by .show()/.hide() JS
     calls. That's fine once the picker has been shown+hidden at least once,
     but a freshly-created instance that's populated via .datepicker('setDate', ...)
     (e.g. pre-filling arrival/departure from URL params on the booking results
     page) never goes through a hide() call first, so it sits at this rule's
     display value the instant it's first populated. Default to hidden here;
     jQuery's inline display:block (set only on a real show()) overrides it. */
  display: none;
  box-sizing: border-box;
  width: 21em;
  max-width: calc(100vw - 24px);
  padding: 18px 18px 12px;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12) !important;
  color: #000000 !important;
  font-family: "NimbusRom", serif !important;
  font-size: 14px;
  letter-spacing: .02em;
  overflow: visible !important;
  z-index: 100000 !important;
}

/* --- Header (month title + arrows) --- */
#ui-datepicker-div .ui-datepicker-header {
  position: relative;
  padding: 0 0 10px;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #000000 !important;
  font-weight: 400 !important;
}

#ui-datepicker-div .ui-datepicker-title {
  margin: 0 34px;
  line-height: 30px;
  text-align: center;
  color: #000000 !important;
  font-family: "ArimaKoshi", Georgia, serif !important;
  font-size: 17px;
  font-weight: 400 !important;
  letter-spacing: .03em;
}

/* Prev / next buttons: plain CSS arrows, no sprite icons, no bevel boxes. */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
  position: absolute !important;
  top: 0 !important;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #000000;
  cursor: pointer;
  transition: color .18s ease;
}

#ui-datepicker-div .ui-datepicker-prev {
  left: 0 !important;
  right: auto !important;
}

#ui-datepicker-div .ui-datepicker-next {
  right: 0 !important;
  left: auto !important;
}

#ui-datepicker-div .ui-datepicker-prev-hover,
#ui-datepicker-div .ui-datepicker-next-hover,
#ui-datepicker-div .ui-datepicker-prev.ui-state-hover,
#ui-datepicker-div .ui-datepicker-next.ui-state-hover {
  top: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #8c6e47;
}

#ui-datepicker-div .ui-datepicker-prev::before {
  content: "\2039"; /* ‹ */
}

#ui-datepicker-div .ui-datepicker-next::before {
  content: "\203A"; /* › */
}

#ui-datepicker-div .ui-datepicker-prev::before,
#ui-datepicker-div .ui-datepicker-next::before {
  display: block;
  font-family: "NimbusRom", Georgia, serif;
  font-size: 24px;
  line-height: 1;
  color: currentColor;
}

/* Kill the PNG sprite icons entirely. */
#ui-datepicker-div .ui-icon,
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
  display: none !important;
  background-image: none !important;
}

/* --- Calendar grid --- */
#ui-datepicker-div .ui-datepicker-calendar {
  width: 100% !important;
  margin: 0 0 6px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13.5px;
}

#ui-datepicker-div .ui-datepicker-calendar th {
  padding: 7px 2px;
  border: 0;
  color: #9a8c7e;
  font-size: 11.5px;
  font-weight: 400 !important;
  letter-spacing: .06em;
}

#ui-datepicker-div .ui-datepicker-calendar td {
  padding: 2px;
  border: 0;
}

#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
  display: block;
  width: auto;
  padding: 0;
  min-height: 32px;
  line-height: 32px;
  text-align: center !important;
  text-decoration: none;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #000000 !important;
  font-weight: 400 !important;
  transition: background-color .15s ease, color .15s ease;
}

/* Hover / keyboard focus day: gold text on a soft gold wash. */
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-hover,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-focus,
#ui-datepicker-div .ui-datepicker-calendar td a:hover {
  background: rgba(140, 110, 71, .12) !important;
  color: #8c6e47 !important;
}

/* Today. */
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight,
#ui-datepicker-div .ui-datepicker-calendar td span.ui-state-highlight {
  background: none !important;
  color: #8c6e47 !important;
  box-shadow: inset 0 -1px 0 #8c6e47;
}

/* Selected day: solid gold, white text. */
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active.ui-state-hover {
  background: #8c6e47 !important;
  color: #ffffff !important;
  box-shadow: none;
}

/* Disabled / past / other-month days: muted gray, no box. */
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable {
  opacity: 1 !important;
  background: none !important;
}

#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable span,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month a,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month span {
  color: #c4bbb0 !important;
}

/* --- Optional button pane (Today / Done) --- */
#ui-datepicker-div .ui-datepicker-buttonpane {
  margin: 6px 0 0;
  padding: 8px 0 4px;
  border: 0 !important;
  border-top: 1px solid #e8ded2 !important;
  background: none !important;
}

#ui-datepicker-div .ui-datepicker-buttonpane button {
  padding: 6px 2px;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  background: none !important;
  color: #8c6e47 !important;
  font-family: "NimbusRom", serif !important;
  font-size: 13px;
  font-weight: 400 !important;
  letter-spacing: .04em;
  text-transform: none;
  cursor: pointer;
}

#ui-datepicker-div .ui-datepicker-buttonpane button:hover {
  opacity: .7;
}

@media (max-width: 420px) {
  #ui-datepicker-div {
    width: calc(100vw - 24px) !important;
    padding: 15px 14px 10px;
    font-size: 13px;
  }

  #ui-datepicker-div .ui-datepicker-title {
    font-size: 15px;
  }

  #ui-datepicker-div .ui-datepicker-calendar td a,
  #ui-datepicker-div .ui-datepicker-calendar td span {
    min-height: 30px;
    line-height: 30px;
  }
}