/* The check-in / check-out calendars on a property page (the Enquire Now box
   and the Instant Booking popup), dressed as one month of the Availability
   calendar further down the page: same grey card, same "October 2026"
   heading, italic day letters, and booked nights in the same green with the
   half-day diagonal on the arrival and departure days. (15 Oct 2026)

   The day bands come from enquiry-form.js (dayBand): ye-dp-start is an
   arrival day (booked from the afternoon), ye-dp-end a departure day (booked
   until the morning), ye-dp-mid a night in between. */

body.single-properties #ui-datepicker-div {
  width: 262px; margin-top: 4px; padding: 10px 12px 12px;
  border: 1px solid #f0f0f0 !important; border-radius: 4px; background: #f9f9f9 !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
  font-family: gill-sans-nova, sans-serif;
}
body.single-properties #ui-datepicker-div .ui-datepicker-header {
  position: relative; margin: 0; padding: 0 0 6px; border: 0; background: none;
}
body.single-properties #ui-datepicker-div .ui-datepicker-title {
  margin: 0 34px; padding: 4px 0 4px; text-align: left;
  font-family: orpheuspro, serif; font-size: 17px; line-height: 24px; font-weight: 500; color: #948685;
}
body.single-properties #ui-datepicker-div .ui-datepicker-prev,
body.single-properties #ui-datepicker-div .ui-datepicker-next { top: 2px; }
body.single-properties #ui-datepicker-div .ui-datepicker-prev { left: 0; }
body.single-properties #ui-datepicker-div .ui-datepicker-next { right: 0; }

body.single-properties #ui-datepicker-div table.ui-datepicker-calendar {
  width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0 2px; background: none;
}
body.single-properties #ui-datepicker-div th {
  padding: 0 0 5px; border: 0; background: none;
  font-family: gill-sans-nova, sans-serif; font-size: 11px; font-style: italic; font-weight: 500; color: #948685; text-align: center;
}
body.single-properties #ui-datepicker-div td { width: 14.28%; height: 30px; padding: 0; border: 0; background: none; }
body.single-properties #ui-datepicker-div td a,
body.single-properties #ui-datepicker-div td span {
  display: block; height: 30px; margin: 0; padding: 0; border: 0 !important; border-radius: 4px;
  background: none !important; box-shadow: none;
  font-size: 12px; line-height: 30px; font-weight: 400 !important; text-align: center; text-decoration: none;
  color: #484848 !important; opacity: 1;
}
/* Days that cannot be chosen (past, beyond the window, or booked). */
body.single-properties #ui-datepicker-div td.ui-state-disabled { opacity: 1; }
body.single-properties #ui-datepicker-div td.ui-state-disabled span { color: #ccc !important; cursor: not-allowed; }
body.single-properties #ui-datepicker-div td.ui-datepicker-other-month span { visibility: hidden; }

/* A day inside a gap long enough to book stays white with dark text even
   when it cannot be the check-in day itself: those nights can be booked. */
body.single-properties #ui-datepicker-div td.ye-dp-gap span { color: #484848 !important; cursor: default; }

/* Booked, in the Availability calendar's green. */
body.single-properties #ui-datepicker-div td.ye-dp-mid,
body.single-properties #ui-datepicker-div td.ye-dp-block { background: #abc8a9; }
/* Booked nights, past days and days the minimum stay rules out: the number
   fades into the green. Arrival and departure days keep a dark number: they
   are half free and can be picked. */
body.single-properties #ui-datepicker-div td.ye-dp-mid span, body.single-properties #ui-datepicker-div td.ye-dp-mid a,
body.single-properties #ui-datepicker-div td.ye-dp-block span, body.single-properties #ui-datepicker-div td.ye-dp-block a { text-decoration: none; color: rgba(72, 72, 72, .38) !important; }
body.single-properties #ui-datepicker-div td.ye-dp-start { background: linear-gradient(135deg, #f9f9f9 0%, #f9f9f9 50%, #abc8a9 51%, #abc8a9 100%); }
body.single-properties #ui-datepicker-div td.ye-dp-end { background: linear-gradient(135deg, #abc8a9 0%, #abc8a9 50%, #f9f9f9 51%, #f9f9f9 100%); }
body.single-properties #ui-datepicker-div td.ye-dp-start span, body.single-properties #ui-datepicker-div td.ye-dp-start a,
body.single-properties #ui-datepicker-div td.ye-dp-end span, body.single-properties #ui-datepicker-div td.ye-dp-end a { color: #484848 !important; }

/* Pointing at an open day, and the day chosen: the Availability calendar's hover and the site green. */
body.single-properties #ui-datepicker-div td:not(.ui-state-disabled) a:hover { background: #abc8a9 !important; color: rgba(255, 255, 255, .85) !important; }
body.single-properties #ui-datepicker-div td a.ui-state-active { background: #6da08f !important; color: #fff !important; }
/* Today is just today, not green: green means booked here. */
body.single-properties #ui-datepicker-div td a.ui-state-highlight:not(.ui-state-active),
body.single-properties #ui-datepicker-div td span.ui-state-highlight { background: none !important; color: #484848 !important; text-decoration: underline; text-underline-offset: 3px; }

/* The single dates field's calendar (15 Oct 2026): a caption saying which
   date is being picked, the chosen check-in / check-out in the site green,
   and the nights between them tinted. */
body.single-properties #ui-datepicker-div .ye-dp-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; padding: 2px 0 8px; border-bottom: 1px solid #ececec; font-size: 12px; letter-spacing: .3px; color: #948685; }
body.single-properties #ui-datepicker-div .ye-dp-cap a { color: #6da08f; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
body.single-properties #ui-datepicker-div td.ye-dp-range { background: rgba(109, 160, 143, .22); }
body.single-properties #ui-datepicker-div td.ye-dp-range span, body.single-properties #ui-datepicker-div td.ye-dp-range a { color: #484848 !important; }
body.single-properties #ui-datepicker-div td.ye-dp-sel a, body.single-properties #ui-datepicker-div td.ye-dp-sel span { background: #6da08f !important; color: #fff !important; }
body.single-properties #ui-datepicker-div td.ye-dp-sel-in a, body.single-properties #ui-datepicker-div td.ye-dp-sel-in span { border-radius: 4px 0 0 4px; }
body.single-properties #ui-datepicker-div td.ye-dp-sel-out a, body.single-properties #ui-datepicker-div td.ye-dp-sel-out span { border-radius: 0 4px 4px 0; }
body.single-properties #ui-datepicker-div td.ye-dp-sel-in.ye-dp-sel-out a { border-radius: 4px; }