/* Muses Suites - availability request panel
   Loaded after main.css. Everything is scoped under .booking so the rest of
   the Cassio theme is untouched. */

.booking {
  --bk-line:  #e4ded4;
  --bk-ink:   #2a2724;
  --bk-muted: #8a8178;
  --bk-gold:  #b8934f;
  --bk-panel: #ffffff;
}

.booking__intro {
  max-width: 30em;
  margin: 0 auto 32px;
  color: var(--bk-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* --- the stay panel -------------------------------------------------- */

.booking__panel {
  background: var(--bk-panel);
  border: 1px solid var(--bk-line);
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
  margin-bottom: 40px;
}

.booking__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Hairlines drawn with box-shadow so neighbouring cells never double up. */
.booking__field {
  position: relative;
  display: block;
  margin: 0;
  padding: 14px 18px 12px;
  cursor: pointer;
  box-shadow: inset -1px -1px 0 var(--bk-line);
}

.booking__field:nth-child(2n) { box-shadow: inset 0 -1px 0 var(--bk-line); }
.booking__field:nth-last-child(-n+2) { box-shadow: inset -1px 0 0 var(--bk-line); }
.booking__field:last-child { box-shadow: none; }

.booking__field:focus-within {
  box-shadow: inset 0 0 0 2px var(--bk-ink);
  border-radius: 12px;
  z-index: 2;
}

.booking__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bk-muted);
  margin-bottom: 4px;
}

.booking__input {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--bk-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 24px;
  min-height: 24px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.booking__input::-webkit-calendar-picker-indicator {
  opacity: .45;
  cursor: pointer;
}

.booking__input_select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8178' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 20px;
}

/* Empty date inputs show a faint placeholder-ish tone. */
.booking__input:invalid,
.booking__input[value=""] { color: var(--bk-muted); }

/* --- nights readout --------------------------------------------------- */

.booking__nights {
  display: none;
  padding: 12px 18px;
  border-top: 1px solid var(--bk-line);
  background: #faf8f5;
  font-size: 14px;
  color: var(--bk-ink);
}

.booking__nights.is-visible { display: block; }
.booking__nights.is-error { color: #a4462d; }
.booking__nights strong { font-weight: 700; }

/* --- guest details ---------------------------------------------------- */

.booking__section-label {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bk-muted);
  margin-bottom: 8px;
}

.booking__note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--bk-muted);
}

/* Honeypot. Off-screen rather than display:none so bots still fill it. */
.booking__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- small screens ---------------------------------------------------- */

@media (max-width: 575px) {
  .booking__grid { grid-template-columns: 1fr; }
  .booking__field,
  .booking__field:nth-child(2n),
  .booking__field:nth-last-child(-n+2) {
    box-shadow: inset 0 -1px 0 var(--bk-line);
  }
  .booking__field:last-child { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .booking * { transition: none !important; }
}

/* --- flatpickr, restyled to match the panel ---------------------------- */

.booking__input_alt {
  cursor: pointer;
  background: transparent;
}

.booking__input_alt::placeholder { color: var(--bk-muted); }

.flatpickr-calendar {
  border: 1px solid var(--bk-line);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(42, 39, 36, .14);
  font-family: inherit;
  padding: 6px;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none; }

.flatpickr-months { padding-top: 6px; }

.flatpickr-current-month {
  font-size: 15px;
  font-weight: 700;
  color: var(--bk-ink);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  padding: 8px 12px;
  color: var(--bk-ink);
  font-size: 22px;
  line-height: 1;
}

.flatpickr-months .flatpickr-prev-month:hover span,
.flatpickr-months .flatpickr-next-month:hover span { color: var(--bk-gold); }

span.flatpickr-weekday {
  color: var(--bk-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.flatpickr-day {
  border-radius: 999px;
  color: var(--bk-ink);
  font-size: 14px;
}

.flatpickr-day:hover {
  background: #f3efe8;
  border-color: transparent;
}

.flatpickr-day.today {
  border-color: var(--bk-gold);
  font-weight: 700;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--bk-ink);
  border-color: var(--bk-ink);
  color: #fff;
}

.flatpickr-day.inRange {
  background: #f3efe8;
  border-color: #f3efe8;
  box-shadow: -5px 0 0 #f3efe8, 5px 0 0 #f3efe8;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #cfc8bd;
}

/* Two months side by side need a touch more room to breathe. */
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer + .dayContainer {
  box-shadow: -1px 0 0 var(--bk-line);
}