/* One shared date picker for search, individual stays and booking requests. */
.date-range-panel,
.holiday-search .date-range-panel,
.listing-enquiry .date-range-panel {
  position:fixed;
  inset:50% auto auto 50%;
  z-index:35;
  width:760px;
  max-width:calc(100vw - 32px);
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  margin:0;
  padding:20px 24px 16px;
  transform:translate(-50%,-50%);
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid #e2e8f1;
  border-radius:16px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 16px 64px #112c5026,0 2px 10px #112c500c;
  text-align:left;
  font-size:.875rem;
}
.date-range-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
  padding:4px;
  border-radius:10px;
  background:#f4f7fb;
}
.date-range-tabs button {
  min-height:44px;
  padding:10px 16px;
  border:1px solid transparent;
  border-radius:8px;
  color:#63748b;
  font-size:.875rem;
  font-weight:600;
}
.date-range-tabs button[aria-selected=true] {
  border-color:#e1e8f3;
  background:#fff;
  color:var(--green);
  box-shadow:0 1px 4px #1b3d6a09;
}
.date-range-panel .date-range-status {
  min-height:26px;
  margin:0 0 10px;
  padding:2px 0;
  color:#63748b;
  font-size:.8125rem;
  line-height:1.6;
}
.date-range-calendar {position:relative}
.date-range-calendar-nav {
  position:absolute;
  top:0;
  right:0;
  left:0;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
}
.date-range-calendar-nav button {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid #e2e8f1;
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  font-size:1.6rem;
  font-weight:400;
  line-height:1;
  pointer-events:auto;
}
.date-range-calendar-nav button:hover:not(:disabled) {border-color:#b7cce9;background:#f4f8ff;color:var(--green)}
.date-range-calendar-nav button:disabled {opacity:.28;cursor:default}
.date-range-calendar-nav button svg {display:block;width:24px;height:24px;margin:0;pointer-events:none}
.date-range-months {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.date-range-month {min-width:0}
.date-range-month h3 {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin:0 0 16px;
  padding:0 44px;
  color:var(--ink);
  font-size:1rem;
  font-weight:650;
  line-height:1.3;
  letter-spacing:-.15px;
  text-align:center;
}
.date-range-panel .date-range-weekdays,
.date-range-panel .date-range-grid {grid-template-columns:repeat(7,minmax(0,1fr));gap:0}
.date-range-panel .date-range-weekdays {min-height:28px;margin:0;color:#8190a4;font-size:.6875rem;font-weight:500}
.date-range-panel .date-range-day,
.date-range-panel .date-range-empty {min-width:0;min-height:44px}
.date-range-panel .date-range-day {
  position:relative;
  margin:0 0 3px;
  padding:0;
  border:1px solid transparent;
  border-radius:7px;
  color:#24364d;
  font-size:.8125rem;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.date-range-panel .date-range-day[aria-current=date]:not(.selected) {color:var(--green);font-weight:700}
.date-range-panel .date-range-day:disabled {opacity:.3;cursor:default}
.date-range-panel .date-range-day:hover:not(:disabled) {border-color:#c4d6ee;background:#f0f5fd}
.date-range-panel .date-range-day.in-range,
.date-range-panel .date-range-day.range-preview {border-radius:0;background:#edf3fc;color:var(--green)}
.date-range-panel .date-range-day.preview-end {border-color:#b4cbea;border-radius:0 7px 7px 0;background:#e2ecfb}
.date-range-panel .date-range-day.range-start {border-radius:7px 0 0 7px}
.date-range-panel .date-range-day.range-end {border-radius:0 7px 7px 0}
.date-range-panel .date-range-day.selected {border-color:var(--green);background:var(--green);color:#fff;font-weight:650}
.date-range-panel .date-range-day.selected:hover:not(:disabled) {background:var(--green-dark)}
.date-range-panel .date-range-day:focus-visible {outline:2px solid #70a2eb;outline-offset:-3px;z-index:1}
.date-range-flexibility {margin-top:14px;padding-top:18px;border-top:1px solid #e8edf5}
.date-range-section-label {display:block;margin:0 0 12px;color:var(--ink);font-size:.8125rem;font-weight:650}
.date-range-pills {display:flex;gap:8px;flex-wrap:wrap}
.date-range-pills button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  min-width:88px;
  padding:9px 15px;
  border:1px solid #dce4ee;
  border-radius:7px;
  background:#fff;
  color:#52647c;
  font-size:.8125rem;
  white-space:nowrap;
}
.date-range-pills button span {font-size:1.125rem;line-height:1}
.date-range-pills button[aria-pressed=true],
.date-range-lengths button[aria-pressed=true],
.date-range-flex-months button[aria-pressed=true] {border-color:#a9c4e9;background:#edf4ff;color:var(--green);box-shadow:inset 0 0 0 1px #a9c4e9}
.date-range-pills button:hover,
.date-range-lengths button:hover,
.date-range-flex-months button:hover {border-color:#a9c4e9;background:#f4f8ff}
.date-range-hint {margin:10px 0 0;color:#718197;font-size:.75rem;font-weight:400;line-height:1.6}
.date-range-panel .date-range-actions {align-items:center;gap:12px;margin:18px 0 0;padding-top:14px;border-top:1px solid #e8edf5}
.date-range-panel .date-range-actions button {min-height:44px;font-size:.8125rem}
.date-range-panel .date-range-actions .button {padding:11px 22px;border-radius:8px;font-weight:600}
.date-range-panel .date-range-actions .button:disabled {opacity:.45;cursor:default}
.date-range-lengths {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:24px}
.date-range-lengths button {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:84px;padding:14px 8px;border:1px solid #dce4ee;border-radius:8px;color:#52647c}
.date-range-lengths strong {font-size:.875rem;font-weight:600;line-height:1.4}
.date-range-lengths span {font-size:.75rem;font-weight:400;line-height:1.5;color:#718197}
.date-range-lengths button[aria-pressed=true] span {color:var(--green)}
.date-range-flex-months {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.date-range-flex-months button {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:72px;padding:12px 8px;border:1px solid #dce4ee;border-radius:10px;color:#52647c;font-size:.8125rem}
.date-range-flex-months small {color:#8190a4;font-size:.6875rem}
.date-range-flex-months button[aria-pressed=true] small {color:var(--green)}
.date-options {margin-top:18px;padding-top:16px;border-top:1px solid #e8edf5}
.date-options h3 {margin:0 0 10px;color:var(--ink);font-size:.8125rem;font-weight:650}
.date-options-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:220px;padding:2px;overflow:auto;overscroll-behavior:contain}
.date-option {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:76px;min-width:0;padding:12px;border:1px solid #dce4ee;border-radius:10px;background:#fff;text-align:left;color:#344963}
.date-option>span {display:flex;flex-direction:column;gap:4px;min-width:0}
.date-option>span:last-child {flex-shrink:0;text-align:right}
.date-option strong {font-size:.8125rem;font-weight:600;line-height:1.5}
.date-option small {font-size:.6875rem;line-height:1.5;color:#718197}
.date-option:hover {border-color:#a9c4e9;background:#f4f8ff}
.date-option.selected {border-color:#a9c4e9;background:#edf4ff;box-shadow:inset 0 0 0 1px #a9c4e9;color:var(--green)}
.date-options-note {margin:12px 0 0;color:#718197;font-size:.75rem;line-height:1.6}
.date-options-note button {min-height:44px;padding:4px 8px;font-size:inherit}
/* Desktop dates use the page's scroll; phone and booking dialogs contain theirs. */
@media(min-width:641px) {
  .search-box .holiday-search .date-range {position:static}
  .search-box .holiday-search .date-range-panel {
    position:absolute;
    inset:calc(100% + 10px) 0 auto;
    width:100%;
    max-width:none;
    height:auto;
    max-height:none;
    padding-block:16px 14px;
    overflow:visible;
    overscroll-behavior-y:auto;
    transform:none;
  }
  .search-box .holiday-search .date-range-panel .date-range-tabs {margin-bottom:8px}
  .search-box .holiday-search .date-range-panel .date-range-status {margin-bottom:6px}
  .search-box .holiday-search .date-range-panel .date-range-month h3 {margin-bottom:8px}
  .search-box .holiday-search .date-range-panel .date-range-flexibility {margin-top:12px;padding-top:12px}
  .search-box .holiday-search .date-range-panel .date-range-section-label {margin-bottom:8px}
  .search-box .holiday-search .date-range-panel .date-range-hint {margin-top:8px}
  .search-box .holiday-search .date-range-panel .date-range-actions {margin-top:14px;padding-top:12px}
  .search-box .holiday-search .date-range-panel .date-options-list {overscroll-behavior-y:auto}
}
@media(min-width:641px) and (max-width:760px) {
  .date-range-panel,
  .holiday-search .date-range-panel,
  .listing-enquiry .date-range-panel {padding:16px}
  .date-range-months {gap:16px}
  .date-range-month h3 {font-size:.875rem;padding-inline:36px}
  .date-range-calendar-nav button {width:36px;height:44px;border-radius:8px}
  .date-range-pills {gap:6px}
  .date-range-pills button {flex:1 0 auto;min-width:80px;padding-inline:10px}
}
@media(max-width:640px) {
  .date-range-panel,
  .holiday-search .date-range-panel,
  .listing-enquiry .date-range-panel {width:420px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 24px);padding:16px 12px 12px;border-radius:14px}
  .date-range-months {grid-template-columns:minmax(0,1fr);gap:20px}
  .date-range-month h3 {margin-bottom:10px}
  .date-range-month+.date-range-month {padding-top:16px;border-top:1px solid #e8edf5}
  .date-range-calendar-nav {z-index:1}
  .date-range-panel .date-range-status {margin-bottom:12px;font-size:.75rem}
  .date-range-flexibility {margin-top:16px}
  .date-range-pills {gap:7px}
  .date-range-pills button {flex:1 0 auto;min-width:80px;padding:9px 12px}
  .date-range-flex-months {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .date-range-lengths {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .date-range-lengths button {min-height:72px;padding:10px 6px;gap:5px}
  .date-range-lengths strong {font-size:.875rem}
  .date-options-list {grid-template-columns:minmax(0,1fr);max-height:248px}
}
@media(max-width:360px) {
  .date-range-panel,
  .holiday-search .date-range-panel,
  .listing-enquiry .date-range-panel {max-width:calc(100vw - 8px);padding-inline:6px}
  .date-range-months {grid-template-columns:minmax(0,1fr)}
  .date-range-panel .date-range-weekdays,
  .date-range-panel .date-range-grid {grid-template-columns:repeat(7,minmax(0,1fr))}
  .date-range-panel .date-range-day,
  .date-range-panel .date-range-empty {min-width:0}
}

/* A single month fits in a compact phone dialog, with scrolling when needed. */
@media(max-width:640px) {
  .holiday-search .date-range-panel {
    inset:50% auto auto 50%;
    width:420px;
    height:auto;
    max-width:calc(100vw - 24px);
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
    padding:16px 12px 12px;
    transform:translate(-50%,-50%);
    border-radius:14px;
  }
  .holiday-search .date-range-panel .search-popup-heading {
    position:sticky;
    top:-16px;
    z-index:4;
    margin:-16px -4px 12px;
    padding:12px 4px 8px;
    background:#fff;
    border-bottom:1px solid #edf0f5;
  }
  .holiday-search .date-range-panel .date-range-months {grid-template-columns:minmax(0,1fr)}
  .holiday-search .date-range-panel .date-range-weekdays,
  .holiday-search .date-range-panel .date-range-grid {grid-template-columns:repeat(7,minmax(0,1fr))}
  .holiday-search .date-range-panel .date-range-day,
  .holiday-search .date-range-panel .date-range-empty {min-width:0}
  .holiday-search .date-range-panel .date-range-actions {gap:8px;padding-bottom:max(0px,env(safe-area-inset-bottom))}
  .holiday-search .date-range-panel .date-range-actions .button {min-width:112px}
}
@media(max-width:360px) {
  .holiday-search .date-range-panel {max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);padding-inline:8px}
}

/* Custom month and duration choices sit above any open date picker. */
body:has(.date-custom-overlay:not([hidden])) {overflow:hidden}
.date-custom-overlay {
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  width:100%;
  max-width:none;
  height:100%;
  max-height:none;
  margin:0;
  padding:24px;
  overflow:auto;
  overscroll-behavior:contain;
  border:0;
  border-radius:0;
  background:#13253d70;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  animation:date-custom-fade-in 160ms ease-out both;
}
.date-custom-overlay[hidden],
dialog.date-custom-overlay:not([open]) {display:none}
.date-custom-overlay::backdrop {background:transparent;backdrop-filter:none}
.date-custom-dialog {
  width:100%;
  max-width:420px;
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  margin:auto;
  padding:24px;
  overflow:auto;
  border:1px solid #e2e8f1;
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 18px 70px #112c5030;
  text-align:left;
  font-size:.875rem;
  animation:date-custom-dialog-in 180ms cubic-bezier(.2,.7,.3,1) both;
}
.date-custom-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.date-custom-heading h2 {margin:0;padding:0;font-size:1.125rem;font-weight:650;line-height:1.4;letter-spacing:-.25px}
.date-custom-heading button {display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0;border:1px solid #e2e8f1;border-radius:50%;background:#fff;color:#63748b;font-size:1.5rem;line-height:1}
.date-custom-heading button:hover {background:#f4f7fb;color:var(--ink)}
.date-custom-heading button svg {width:18px;height:18px}
.date-custom-wheels {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 -4px;border:1px solid #e5ebf3;border-radius:10px;background:#fff;overflow:hidden}
.date-wheel-column {position:relative;min-width:0;padding-top:14px}
.date-wheel-column+.date-wheel-column {border-left:1px solid #e5ebf3}
.date-wheel-column>label,
.date-wheel-column>.date-wheel-label {display:block;margin:0 0 8px;padding:0 8px;color:#718197;font-size:.6875rem;font-weight:600;line-height:20px;letter-spacing:.45px;text-align:center;text-transform:uppercase}
.date-wheel-column::after {content:"";position:absolute;right:8px;bottom:88px;left:8px;height:44px;z-index:0;border-top:1px solid #dce7f5;border-bottom:1px solid #dce7f5;border-radius:6px;background:#f1f6fe;pointer-events:none}
.date-wheel {
  position:relative;
  z-index:1;
  height:220px;
  padding:88px 0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  touch-action:pan-y;
  cursor:grab;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 76%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 76%,transparent);
}
.date-wheel::-webkit-scrollbar {display:none}
.date-wheel:focus-visible {outline:2px solid #70a2eb;outline-offset:-3px;border-radius:8px}
.date-wheel-item {display:block;width:100%;height:44px;min-height:44px;margin:0;padding:0 12px;border:0;border-radius:6px;background:transparent;color:#7a879a;font-size:.9375rem;font-weight:400;line-height:44px;text-align:center;font-variant-numeric:tabular-nums;scroll-snap-align:center;cursor:grab;touch-action:pan-y;transition:color 120ms ease}
.date-wheel-item:hover {color:var(--green)}
.date-wheel-item.is-selected {color:var(--green);font-weight:650}
.date-wheel-item:disabled {opacity:.35;cursor:default}
.date-wheel.is-dragging {scroll-snap-type:none;scroll-behavior:auto}
.date-wheel.is-dragging,
.date-wheel.is-dragging .date-wheel-item {cursor:grabbing;-webkit-user-select:none;user-select:none}
.date-custom-summary {min-height:22px;margin:18px 0 0;color:#63748b;font-size:.8125rem;line-height:1.6;text-align:center}
.date-custom-summary[role=alert] {color:#994232}
.date-custom-actions {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid #e8edf5}
.date-custom-actions button {display:flex;align-items:center;justify-content:center;min-height:46px;padding:11px 16px;border:1px solid #dce4ee;border-radius:7px;background:#fff;color:#52647c;font-size:.8125rem;font-weight:600;line-height:1.5}
.date-custom-actions button:hover:not(:disabled) {border-color:#a9c4e9;background:#f4f8ff}
.date-custom-actions .button {border-color:var(--green);background:var(--green);color:#fff}
.date-custom-actions .button:hover:not(:disabled) {border-color:var(--green-dark);background:var(--green-dark)}
.date-custom-actions button:disabled {opacity:.45;cursor:default}
.date-custom-nights {display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:12px;max-width:260px;margin:28px auto 12px}
.date-custom-nights button {display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #dce4ee;border-radius:7px;color:var(--green);font-size:1.5rem;font-weight:400;line-height:1}
.date-custom-nights button:hover:not(:disabled) {border-color:#a9c4e9;background:#f4f8ff}
.date-custom-nights input {display:block;width:100%;min-width:0;height:56px;padding:8px;border:1px solid #dce4ee;border-radius:7px;background:#fff;color:var(--ink);font-size:1.75rem;font-weight:500;font-variant-numeric:tabular-nums;text-align:center;-moz-appearance:textfield;appearance:textfield}
.date-custom-nights input::-webkit-inner-spin-button,
.date-custom-nights input::-webkit-outer-spin-button {-webkit-appearance:none;margin:0}
.date-custom-dialog>.date-range-hint {text-align:center}
.date-custom-overlay.is-closing {pointer-events:none;animation:date-custom-fade-out 140ms ease-in both}
@keyframes date-custom-fade-in {from {opacity:0} to {opacity:1}}
@keyframes date-custom-fade-out {from {opacity:1} to {opacity:0}}
@keyframes date-custom-dialog-in {from {opacity:0;transform:translateY(8px) scale(.985)} to {opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:640px) {
  .date-custom-overlay {padding:16px}
  .date-custom-dialog {max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:20px}
  .date-custom-heading {gap:12px;margin-bottom:16px}
  .date-custom-heading h2 {font-size:1rem}
  .date-custom-heading button {width:52px;height:44px;padding:0;border-radius:6px}
  .date-custom-heading button svg {display:block;width:20px;height:20px;margin:0;pointer-events:none}
}
@media(prefers-reduced-motion:reduce) {
  .date-custom-overlay,
  .date-custom-dialog {animation:none}
  .date-wheel {scroll-behavior:auto}
  .date-wheel-item {transition:none}
}