/* ============================================================
   oceanparksm.com — css/datepicker.css — the OTA-style pickers
   (js/datepicker.js): the calendar popover for check-in / check-out
   and the stepper popover for guests. Shared tokens only.
   ============================================================ */

/* the field inside a search-bar cell (.ss-field): css/searchbar.css */
.dp-cell{cursor:pointer}
.dp-cell:hover{background:color-mix(in srgb, var(--op-ocean) 6%, var(--op-white))}

/* -- popover ------------------------------------------------------ */
.dp-pop{
  position:absolute;left:0;top:calc(100% + 8px);z-index:40;
  background:var(--op-white);color:var(--op-ink);
  border-radius:16px;box-shadow:0 14px 40px color-mix(in srgb, var(--op-ink) 28%, transparent);
  border:1px solid color-mix(in srgb, var(--op-ink) 12%, transparent);
  padding:14px 16px 12px;
}
.dp-pop[hidden]{display:none}
.dp-range{width:max-content;max-width:calc(100vw - 32px)}
.dp-guests{min-width:260px;right:0;left:auto}

/* -- calendar ----------------------------------------------------- */
.dp-head{position:relative;height:0}
.dp-nav{
  position:absolute;top:-2px;width:34px;height:34px;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--op-ink) 14%, transparent);background:var(--op-white);
  font-family:inherit;font-size:1.3rem;line-height:1;font-weight:800;color:var(--op-ink);cursor:pointer;
}
.dp-prev{left:0}.dp-next{right:0}
.dp-nav:hover{background:color-mix(in srgb, var(--op-ocean) 10%, var(--op-white))}
.dp-nav:disabled{opacity:.3;cursor:default}
.dp-months{display:flex;gap:28px}
.dp-month{width:294px}
.dp-month-name{text-align:center;font-weight:900;font-size:1rem;color:var(--op-ink);height:34px;line-height:34px}
.dp-weekdays,.dp-grid{display:grid;grid-template-columns:repeat(7,42px)}
.dp-weekdays span{
  text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--op-ocean);padding:8px 0 4px;
}
.dp-day{
  height:42px;border:0;background:none;font-family:inherit;font-size:.95rem;font-weight:700;
  color:var(--op-ink);cursor:pointer;border-radius:50%;
}
.dp-day:hover{background:color-mix(in srgb, var(--op-ocean) 14%, var(--op-white))}
.dp-day.dp-today{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--op-ink) 30%, transparent)}
.dp-day.dp-off{color:color-mix(in srgb, var(--op-ink) 30%, transparent);cursor:default;background:none}
.dp-day.dp-in{background:color-mix(in srgb, var(--op-ocean) 16%, var(--op-white));border-radius:0}
.dp-day.dp-start,.dp-day.dp-end{background:var(--op-ocean);color:var(--op-white)}
.dp-day.dp-start{border-radius:50% 0 0 50%}
.dp-day.dp-end{border-radius:0 50% 50% 0}
.dp-day.dp-start.dp-end{border-radius:50%}
.dp-foot{
  display:flex;align-items:center;gap:14px;margin-top:10px;padding-top:10px;
  border-top:1px solid color-mix(in srgb, var(--op-ink) 12%, transparent);
}
.dp-summary{flex:1 1 auto;font-weight:800;color:var(--op-ink);font-size:var(--fs-small)}
.dp-clear{
  font-family:inherit;font-size:var(--fs-small);font-weight:800;color:var(--op-ink);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.dp-done{
  font-family:inherit;font-size:var(--fs-small);font-weight:800;color:var(--op-white);
  background:var(--op-ink);border:0;border-radius:var(--radius-pill);padding:9px 18px;cursor:pointer;
}
.dp-done:hover{background:var(--op-ocean)}

/* -- list (a time, a kind of activity) ------------------------------ */
.dp-pick{min-width:220px;padding:8px}
.dp-list{display:flex;flex-direction:column;max-height:300px;overflow-y:auto}
.dp-opt{
  text-align:left;font-family:inherit;font-size:.95rem;font-weight:700;color:var(--op-ink);
  background:none;border:0;border-radius:10px;padding:9px 12px;cursor:pointer;white-space:nowrap;
}
.dp-opt:hover{background:color-mix(in srgb, var(--op-ocean) 10%, var(--op-white))}
.dp-opt.dp-on{background:var(--op-ocean);color:var(--op-white)}

/* -- guests stepper ------------------------------------------------ */
.dp-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:6px 0}
.dp-row-label{font-weight:800;color:var(--op-ink)}
.dp-stepper{display:flex;align-items:center;gap:10px}
.dp-step{
  width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in srgb, var(--op-ink) 20%, transparent);
  background:var(--op-white);font-family:inherit;font-size:1.2rem;font-weight:800;color:var(--op-ink);cursor:pointer;
}
.dp-step:hover{border-color:var(--op-ocean);color:var(--op-ocean)}
.dp-step:disabled{opacity:.3;cursor:default}
.dp-val{min-width:1.6em;text-align:center;font-weight:900;color:var(--op-ink);font-variant-numeric:tabular-nums}

/* -- phones: the calendar is a bottom sheet ------------------------ */
@media (max-width:760px){
  .dp-range{
    position:fixed;left:0;right:0;bottom:0;top:auto;max-width:none;width:auto;
    border-radius:18px 18px 0 0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 40px color-mix(in srgb, var(--op-ink) 35%, transparent);
  }
  .dp-months{justify-content:center}
  .dp-month{width:100%;max-width:340px}
  .dp-weekdays,.dp-grid{grid-template-columns:repeat(7,1fr)}
  .dp-day{height:44px}
  .dp-nav{top:0}
}
/* dimmed page behind the phone sheet; a tap on it closes the sheet */
.dp-backdrop{position:fixed;inset:0;z-index:39;background:color-mix(in srgb, var(--op-ink) 45%, transparent)}
.dp-backdrop[hidden]{display:none}