/*
 * The date picker. Big round day cells, one accent colour, state carried by a
 * dot under the number rather than by colouring the number itself - a red 14 and
 * a green 14 are the same shape at arm's length, and a coloured numeral is
 * unreadable for the eight per cent of men who cannot separate the two hues.
 */

.cal-anchor{position:relative;}

.cal-pop{
  /* Placed by Calendar.place() in viewport coordinates - see calendar.js. The
     values here are only what it looks like before the first placement. */
  /* Above Leaflet. The pickup map sits in the same stacking context inside the
     booking dialog and its panes run from 200 to 1000 (controls, popups), so a
     panel at 60 was painted over by the map next to it - it looked clipped. */
  position:fixed; z-index:2000; top:0; left:0;
  width:312px; max-width:min(92vw, 340px);
  background:var(--panel, #16233B);
  border:1px solid var(--panel-line, #243252);
  border-radius:14px;
  padding:14px 14px 10px;
  box-shadow:0 18px 44px rgba(4,8,16,.46), 0 2px 6px rgba(4,8,16,.32);
  /* Opens without moving anything: absolutely positioned, so nothing below it
     reflows, and it never pushes the form it belongs to down the page. */
  animation:cal-in .13s ease-out;
}
.cal-pop[hidden]{display:none;}
@keyframes cal-in{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .cal-pop{animation:none;} }

/* Right-aligned when the field sits at the right edge of a two-column row. */
.cal-pop.align-right{left:auto; right:0;}

.cal-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;}
.cal-title{
  font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px; letter-spacing:-.01em;
  color:var(--snow, #F4F6F8);
}
.cal-nav{
  width:32px; height:32px; flex:none; display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:50%; cursor:pointer; color:var(--mist, #B9C4D6);
  transition:background-color .12s ease, color .12s ease;
}
.cal-nav:hover{background:rgba(255,255,255,.07); color:var(--snow, #F4F6F8);}
.cal-nav:focus-visible{outline:2px solid var(--aurora-teal, #4FD1C5); outline-offset:1px;}
.cal-nav svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;}

.cal-weekdays, .cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px;}
.cal-weekdays{margin-bottom:4px;}
.cal-weekdays span{
  text-align:center; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em;
  color:var(--mist-dim, #7C8AA6); text-transform:uppercase; padding-bottom:4px;
}
.cal-weekdays abbr{text-decoration:none; border:none;}

.cal-blank{aspect-ratio:1;}

.cal-day{
  position:relative; aspect-ratio:1; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:none; border:none; border-radius:50%; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:500;
  color:var(--snow, #F4F6F8);
  transition:background-color .11s ease, color .11s ease;
}
.cal-day:hover:not(:disabled){background:rgba(255,255,255,.09);}
.cal-day:focus-visible{outline:2px solid var(--aurora-teal, #4FD1C5); outline-offset:-2px;}
.cal-day:disabled{cursor:default; color:var(--mist-dim, #7C8AA6); opacity:.5;}

.cal-num{line-height:1;}

/* The state dot. Reserved on every cell, filled only where it means something,
   so no row changes height when a month's states arrive. */
.cal-dot{width:4px; height:4px; border-radius:50%; background:transparent;}
.cal-day.is-open .cal-dot{background:var(--aurora-green, #6FE7B5);}
.cal-day.is-limited .cal-dot{background:var(--lantern, #E8A33D);}
.cal-day.is-soldOut .cal-dot{background:var(--red, #F0665B);}

/* Full nights stay legible rather than being greyed into the closed ones: a
   guest scanning for a free night needs to see that this one is taken, not that
   it does not exist. */
.cal-day.is-soldOut{opacity:.85; color:var(--mist, #B9C4D6);}
.cal-day.is-soldOut .cal-num{text-decoration:line-through; text-decoration-thickness:1px;}
.cal-day.is-past, .cal-day.is-closed{opacity:.32;}
.cal-day.is-loading{color:var(--mist-dim, #7C8AA6);}

.cal-day.is-today{box-shadow:inset 0 0 0 1px var(--panel-line, #243252);}
.cal-day.is-selected,
.cal-day.is-selected:hover{background:var(--aurora-green, #6FE7B5); color:#08130E;}
.cal-day.is-selected .cal-dot{background:rgba(8,19,14,.55);}

.cal-legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; padding-top:10px; border-top:1px solid var(--panel-line, #243252);}
.cal-key{display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--mist-dim, #7C8AA6);}
.cal-key::before{content:""; width:5px; height:5px; border-radius:50%;}
.cal-key.open::before{background:var(--aurora-green, #6FE7B5);}
.cal-key.limited::before{background:var(--lantern, #E8A33D);}
.cal-key.soldOut::before{background:var(--red, #F0665B);}

.cal-foot{margin-top:8px; font-size:11px; color:var(--mist-dim, #7C8AA6); line-height:1.5;}

/* The field that opens it: looks like the other inputs in the form, reads as a
   button to the keyboard and to a screen reader. */
.date-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  text-align:left; cursor:pointer;
}
.date-trigger .dt-placeholder{color:var(--mist-dim, #7C8AA6);}
.date-trigger svg{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.75;}

/* On a light section (the "check a date" block) the panel needs the dark
   treatment anyway - it is the same control - so only the trigger changes. */
.on-light .date-trigger{background:#fff; border-color:#D8DCE2; color:#0B1220;}
.on-light .date-trigger .dt-placeholder{color:#5A6478;}

/* Inline: the calendar is the content, not a popover over something else. */
.cal-inline{
  position:static; width:100%; max-width:none;
  background:none; border:none; box-shadow:none; padding:0; animation:none;
}
.cal-inline .cal-day{font-size:14.5px;}