/* ============================================================
   VelaCalendar — "Nocturne" theme
   Fully restyled skin for the VelaCalendar date picker.
   ============================================================ */

/* ---------- Cell states ---------- */
.vela-picker-cell.-year-.-adjacent-decade-,
.vela-picker-cell.-day-.-adjacent-month- { color: var(--vp-muted) }

.vela-picker-cell.-year-.-adjacent-decade-:hover,
.vela-picker-cell.-day-.-adjacent-month-:hover { color: var(--vp-muted-strong) }

.-is-locked-.-is-highlighted-.vela-picker-cell.-year-.-adjacent-decade-,
.-is-locked-.-is-highlighted-.vela-picker-cell.-day-.-adjacent-month- { color: var(--vp-muted) }

.-is-chosen-.vela-picker-cell.-year-.-adjacent-decade-,
.-is-chosen-.vela-picker-cell.-day-.-adjacent-month- {
  color: #10131f;
  background: var(--vp-adjacent-chosen)
}

.-is-chosen-.-is-highlighted-.vela-picker-cell.-year-.-adjacent-decade-,
.-is-chosen-.-is-highlighted-.vela-picker-cell.-day-.-adjacent-month- {
  background: var(--vp-adjacent-chosen-hover)
}

.-is-between-.vela-picker-cell.-year-.-adjacent-decade-,
.-is-between-.vela-picker-cell.-day-.-adjacent-month- {
  background-color: var(--vp-between-bg);
  color: var(--vp-text)
}

.-is-between-.-is-highlighted-.vela-picker-cell.-year-.-adjacent-decade-,
.-is-between-.-is-highlighted-.vela-picker-cell.-day-.-adjacent-month- {
  background-color: var(--vp-between-bg-hover)
}

.vela-picker-cell.-year-.-adjacent-decade-:empty,
.vela-picker-cell.-day-.-adjacent-month-:empty { background: none; border: none }

.vela-picker-cell {
  border-radius: var(--vp-cell-radius);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-weight: 500;
  transition: background-color .18s ease, color .18s ease, transform .18s ease
}

.vela-picker-cell.-is-highlighted- {
  background: var(--vp-cell-hover);
  transform: scale(.92)
}

.vela-picker-cell.-is-today- { color: var(--vp-today) }

.vela-picker-cell.-is-today-::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--vp-today-dot)
}

.vela-picker-cell.-is-today-.-is-highlighted- { color: var(--vp-text) }
.vela-picker-cell.-is-today-.-is-between- { color: var(--vp-today) }

.vela-picker-cell.-is-locked- {
  cursor: default;
  color: var(--vp-locked);
  text-decoration: line-through;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px
}

.vela-picker-cell.-is-locked-.-is-highlighted- { color: var(--vp-locked) }
.vela-picker-cell.-is-locked-.-is-between- { color: var(--vp-locked-between) }
.vela-picker-cell.-is-locked-.-is-today-.-is-highlighted- { color: var(--vp-locked) }

.vela-picker-cell.-is-between- {
  background: var(--vp-between-bg);
  border-radius: 0
}

.vela-picker-cell.-is-between-:hover,
.vela-picker-cell.-is-between-.-is-highlighted- { background: var(--vp-between-bg-hover) }

.vela-picker-cell.-span-start- {
  border-radius: var(--vp-cell-radius) 0 0 var(--vp-cell-radius);
  background: linear-gradient(135deg, var(--vp-accent-1), var(--vp-accent-2));
  color: #ffffff
}

.vela-picker-cell.-span-end- {
  border-radius: 0 var(--vp-cell-radius) var(--vp-cell-radius) 0;
  background: linear-gradient(135deg, var(--vp-accent-2), var(--vp-accent-1));
  color: #ffffff
}

.vela-picker-cell.-span-end-.-span-start- { border-radius: var(--vp-cell-radius) }

.vela-picker-cell.-is-chosen- {
  color: #ffffff;
  border: none;
  background: linear-gradient(135deg, var(--vp-accent-1), var(--vp-accent-2));
  font-weight: 700
}

.vela-picker-cell.-is-chosen-.-is-today- { color: #10131f }

.vela-picker-cell.-is-chosen-.-is-highlighted- {
  background: linear-gradient(135deg, var(--vp-accent-1-strong), var(--vp-accent-2-strong));
  transform: scale(.92)
}

/* ---------- Body / grid ---------- */
.vela-picker-body { transition: opacity var(--vp-anim) ease }
.vela-picker-body.-is-hidden- { display: none }

.vela-picker-body--day-names {
  display: grid;
  grid-template-columns: repeat(7, var(--vp-day-col));
  margin: 10px 0 6px
}

.vela-picker-body--day-name {
  color: var(--vp-dayname);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  text-transform: uppercase;
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .08em
}

.vela-picker-body--day-name.-interactive- { cursor: pointer }
.vela-picker-body--day-name.-interactive-:hover { color: var(--vp-dayname-hover) }

.vela-picker-body--cells { display: grid }

.vela-picker-body--cells.-days- {
  grid-template-columns: repeat(7, var(--vp-day-col));
  grid-auto-rows: var(--vp-day-row)
}

.vela-picker-body--cells.-months- {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: var(--vp-month-row)
}

.vela-picker-body--cells.-years- {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: var(--vp-year-row)
}

/* ---------- Navigation ---------- */
.vela-picker-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: none;
  min-height: var(--vp-nav-height);
  padding: var(--vp-pad);
  box-sizing: content-box;
  background: var(--vp-nav-bg);
  margin: calc(var(--vp-pad) * -1) calc(var(--vp-pad) * -1) 0;
  border-radius: var(--vp-radius) var(--vp-radius) 0 0
}

.-time-only- .vela-picker-nav { display: none }

.vela-picker-nav--title,
.vela-picker-nav--action {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center
}

.vela-picker-nav--action {
  width: var(--vp-nav-btn);
  height: var(--vp-nav-btn);
  border-radius: 50%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: var(--vp-nav-btn-bg);
  transition: background-color .18s ease
}

.vela-picker-nav--action:hover { background: var(--vp-nav-btn-bg-hover) }
.vela-picker-nav--action:active { background: var(--vp-nav-btn-bg-active) }
.vela-picker-nav--action.-is-locked- { visibility: hidden }

.vela-picker-nav--action svg { width: 24px; height: 24px }
.vela-picker-nav--action path {
  fill: none;
  stroke: var(--vp-nav-arrow);
  stroke-width: 2.4px
}

.vela-picker-nav--title {
  border-radius: var(--vp-radius);
  padding: 0 10px;
  font-weight: 700;
  letter-spacing: .02em
}

.vela-picker-nav--title i {
  font-style: normal;
  color: var(--vp-title-muted);
  margin-right: .35em
}

.vela-picker-nav--title:hover { background: var(--vp-nav-btn-bg-hover) }
.vela-picker-nav--title:active { background: var(--vp-nav-btn-bg-active) }
.vela-picker-nav--title.-is-locked- { cursor: default; background: none }

/* ---------- Buttons ---------- */
.vela-picker-buttons {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 8px
}

.vela-picker-button {
  display: inline-flex;
  color: var(--vp-btn-text);
  border-radius: 999px;
  cursor: pointer;
  height: var(--vp-btn-height);
  border: 1px solid var(--vp-btn-border);
  background: var(--vp-btn-bg);
  font-weight: 600;
  letter-spacing: .02em;
  transition: all .18s ease
}

.vela-picker-button:hover {
  color: var(--vp-btn-text-hover);
  background: var(--vp-btn-bg-hover);
  border-color: var(--vp-btn-border-hover)
}

.vela-picker-button:focus {
  color: var(--vp-btn-text-hover);
  background: var(--vp-btn-bg-hover);
  outline: none
}

.vela-picker-button:active { background: var(--vp-btn-bg-active) }

.vela-picker-button span {
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%
}

/* ---------- Time picker ---------- */
.vela-picker-time {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-column-gap: 14px;
  align-items: center;
  position: relative;
  padding: 0 var(--vp-time-pad)
}

.-time-only- .vela-picker-time { border-top: none }

.vela-picker-time--current {
  display: flex;
  align-items: center;
  flex: 1;
  font-size: 14px;
  text-align: center
}

.vela-picker-time--now-sep {
  margin: 0 3px 3px;
  line-height: 1;
  color: var(--vp-title-muted)
}

.vela-picker-time--now-hours,
.vela-picker-time--now-minutes {
  line-height: 1;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1
}

.vela-picker-time--now-hours::after,
.vela-picker-time--now-minutes::after {
  content: "";
  background: var(--vp-cell-hover);
  border-radius: var(--vp-radius);
  position: absolute;
  left: -3px;
  top: -4px;
  right: -3px;
  bottom: -2px;
  z-index: -1;
  opacity: 0;
  transition: opacity .18s ease
}

.vela-picker-time--now-hours.-is-highlighted-::after,
.vela-picker-time--now-minutes.-is-highlighted-::after { opacity: 1 }

.vela-picker-time--now-meridiem {
  text-transform: uppercase;
  align-self: flex-end;
  color: var(--vp-title-muted);
  margin-left: 6px;
  font-size: 11px;
  margin-bottom: 1px
}

.vela-picker-time--row {
  display: flex;
  align-items: center;
  font-size: 11px;
  height: 18px;
  background: linear-gradient(to right, var(--vp-track), var(--vp-track)) left 50% / 100% var(--vp-track-h) no-repeat
}

.vela-picker-time--row:first-child { margin-bottom: 6px }

.vela-picker-time--row input[type=range] {
  background: none;
  cursor: pointer;
  flex: 1;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  -webkit-appearance: none
}

.vela-picker-time--row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none }
.vela-picker-time--row input[type=range]::-ms-tooltip { display: none }
.vela-picker-time--row input[type=range]:hover::-webkit-slider-thumb { border-color: var(--vp-track-hover) }
.vela-picker-time--row input[type=range]:hover::-moz-range-thumb { border-color: var(--vp-track-hover) }
.vela-picker-time--row input[type=range]:hover::-ms-thumb { border-color: var(--vp-track-hover) }
.vela-picker-time--row input[type=range]:focus { outline: none }
.vela-picker-time--row input[type=range]:focus::-webkit-slider-thumb {
  background: var(--vp-accent-1);
  border-color: var(--vp-accent-1)
}
.vela-picker-time--row input[type=range]:focus::-moz-range-thumb {
  background: var(--vp-accent-1);
  border-color: var(--vp-accent-1)
}
.vela-picker-time--row input[type=range]:focus::-ms-thumb {
  background: var(--vp-accent-1);
  border-color: var(--vp-accent-1)
}

.vela-picker-time--row input[type=range]::-webkit-slider-thumb {
  box-sizing: border-box;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border: 2px solid var(--vp-track);
  background: var(--vp-thumb-bg);
  cursor: pointer;
  -webkit-transition: background var(--vp-anim);
  transition: background var(--vp-anim)
}

.vela-picker-time--row input[type=range]::-moz-range-thumb {
  box-sizing: border-box;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border: 2px solid var(--vp-track);
  background: var(--vp-thumb-bg);
  cursor: pointer;
  -moz-transition: background var(--vp-anim);
  transition: background var(--vp-anim)
}

.vela-picker-time--row input[type=range]::-ms-thumb {
  box-sizing: border-box;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border: 2px solid var(--vp-track);
  background: var(--vp-thumb-bg);
  cursor: pointer;
  -ms-transition: background var(--vp-anim);
  transition: background var(--vp-anim)
}

.vela-picker-time--row input[type=range]::-webkit-slider-thumb { margin-top: calc(var(--vp-thumb-h) / 2 * -1) }

.vela-picker-time--row input[type=range]::-webkit-slider-runnable-track {
  border: none;
  height: var(--vp-track-h);
  cursor: pointer;
  color: rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0)
}

.vela-picker-time--row input[type=range]::-moz-range-track {
  border: none;
  height: var(--vp-track-h);
  cursor: pointer;
  color: rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0)
}

.vela-picker-time--row input[type=range]::-ms-track {
  border: none;
  height: var(--vp-track-h);
  cursor: pointer;
  color: rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0)
}

.vela-picker-time--row input[type=range]::-ms-fill-lower { background: rgba(0, 0, 0, 0) }
.vela-picker-time--row input[type=range]::-ms-fill-upper { background: rgba(0, 0, 0, 0) }

/* ---------- Theme tokens ---------- */
.vela-picker {
  --vp-font-family: "Trebuchet MS", "Segoe UI", Verdana, Ubuntu, sans-serif;
  --vp-font-size: 14px;
  --vp-width: 280px;
  --vp-z-index: 100;
  --vp-pad: 6px;
  --vp-grid-areas: "nav" "body" "timepicker" "buttons";
  --vp-anim: .22s;
  --vp-anim-ease: cubic-bezier(.4, 0, .2, 1);
  --vp-offset: 10px;

  /* Nocturne palette */
  --vp-bg: #171b29;
  --vp-cell-hover: #232a3f;
  --vp-bg-hover: #232a3f;
  --vp-bg-active: #2b3350;
  --vp-text: #e6e9f5;
  --vp-muted: #4a5372;
  --vp-muted-strong: #667194;
  --vp-title-muted: #8b94b8;
  --vp-today: #ffd166;
  --vp-today-dot: #ffd166;
  --vp-locked: #39415e;
  --vp-locked-between: #454e6e;
  --vp-accent-1: #7ef0c3;
  --vp-accent-2: #56c8ff;
  --vp-accent-1-strong: #9df5d6;
  --vp-accent-2-strong: #7fd7ff;
  --vp-adjacent-chosen: #47628a;
  --vp-adjacent-chosen-hover: #55719b;
  --vp-between-bg: rgba(126, 240, 195, .12);
  --vp-between-bg-hover: rgba(126, 240, 195, .2);
  --vp-border: #2a3147;
  --vp-border-inner: #262d43;
  --vp-radius: 16px;
  --vp-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55);

  --vp-nav-height: 36px;
  --vp-nav-bg: rgba(126, 240, 195, .07);
  --vp-nav-arrow: #9aa5c9;
  --vp-nav-btn: 32px;
  --vp-nav-btn-bg: rgba(255, 255, 255, .04);
  --vp-nav-btn-bg-hover: rgba(255, 255, 255, .1);
  --vp-nav-btn-bg-active: rgba(255, 255, 255, .16);

  --vp-dayname: #ff9d76;
  --vp-dayname-hover: #7ef0c3;
  --vp-day-col: 1fr;
  --vp-day-row: 34px;
  --vp-month-row: 46px;
  --vp-year-row: 58px;

  --vp-cell-radius: 10px;
  --vp-pointer-size: 8px;

  --vp-btn-height: 32px;
  --vp-btn-text: #7ef0c3;
  --vp-btn-text-hover: #171b29;
  --vp-btn-bg: transparent;
  --vp-btn-bg-hover: #7ef0c3;
  --vp-btn-bg-active: #56e3af;
  --vp-btn-border: rgba(126, 240, 195, .45);
  --vp-btn-border-hover: #7ef0c3;

  --vp-track-h: 1px;
  --vp-track: #39415e;
  --vp-track-hover: #667194;
  --vp-thumb-h: 14px;
  --vp-thumb-bg: #e6e9f5;
  --vp-time-pad: 12px;

  --vp-mobile-font-size: 16px;
  --vp-mobile-nav-height: 42px;
  --vp-mobile-width: 320px;
  --vp-mobile-day-row: 40px;
  --vp-mobile-month-row: 50px;
  --vp-mobile-year-row: 64px; 


  --vp-bg: #ffffff;
  --vp-text: #152033;
  --vp-border: #e7eaf0;
  --vp-border-inner: #eef1f6;
  --vp-shadow: 0 18px 40px rgba(11,24,45,.12);
  --vp-cell-hover: #f7f8fa;
  --vp-bg-hover: #f7f8fa;
  --vp-bg-active: #eef1f6;
  --vp-muted: #c9cedb;
  --vp-muted-strong: #9aa3b2;
  --vp-title-muted: #667085;
  --vp-today: #d98d00;
  --vp-today-dot: #f6a800;
  --vp-locked: #c1c2c5;
  --vp-locked-between: #a8adb8;
  --vp-accent-1: #f6a800;
  --vp-accent-2: #d98d00;
  --vp-accent-1-strong: #ffb61b;
  --vp-accent-2-strong: #eca000;
  --vp-adjacent-chosen: #e8d5a3;
  --vp-adjacent-chosen-hover: #e0c98d;
  --vp-between-bg: rgba(246,168,0,.12);
  --vp-between-bg-hover: rgba(246,168,0,.2);
  --vp-nav-bg: #fdf8ef;
  --vp-nav-arrow: #667085;
  --vp-nav-btn-bg: rgba(21,32,51,.05);
  --vp-nav-btn-bg-hover: rgba(21,32,51,.1);
  --vp-nav-btn-bg-active: rgba(21,32,51,.16);
  --vp-dayname: #d98d00;
  --vp-dayname-hover: #071021;
  --vp-btn-text: #b37600;
  --vp-btn-text-hover: #ffffff;
  --vp-btn-bg-hover: #f6a800;
  --vp-btn-bg-active: #d98d00;
  --vp-btn-border: #f0c878;
  --vp-btn-border-hover: #f6a800;
  --vp-track: #dce2ea;
  --vp-track-hover: #9aa3b2;
  --vp-thumb-bg: #ffffff;  
}

.vela-picker-overlay {
  --vp-overlay-bg: rgba(8, 10, 18, .55);
  --vp-overlay-anim: .25s;
  --vp-overlay-ease: cubic-bezier(.4, 0, .2, 1);
  --vp-overlay-z-index: 99
}

/* ---------- Shell ---------- */
.vela-picker {
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  box-shadow: var(--vp-shadow);
  border-radius: var(--vp-radius);
  box-sizing: content-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, max-content);
  grid-template-areas: var(--vp-grid-areas);
  font-family: var(--vp-font-family);
  font-size: var(--vp-font-size);
  color: var(--vp-text);
  width: var(--vp-width);
  position: absolute;
  transition: opacity var(--vp-anim) var(--vp-anim-ease), transform var(--vp-anim) var(--vp-anim-ease);
  z-index: var(--vp-z-index)
}

.vela-picker:not(.-js-position-) { opacity: 0 }

.vela-picker.-from-top- { transform: translateY(calc(var(--vp-offset) * -1)) }
.vela-picker.-from-right- { transform: translateX(var(--vp-offset)) }
.vela-picker.-from-bottom- { transform: translateY(var(--vp-offset)) }
.vela-picker.-from-left- { transform: translateX(calc(var(--vp-offset) * -1)) }

.vela-picker.-is-open-:not(.-js-position-) { transform: translate(0, 0); opacity: 1 }
.vela-picker.-is-open-.-js-position- { transition: none }

.vela-picker.-embedded- {
  border-color: var(--vp-border);
  box-shadow: none;
  position: static;
  left: auto;
  right: auto;
  opacity: 1;
  transform: none
}

.vela-picker.-embedded- .vela-picker--pointer { display: none }

.vela-picker.-device-mode- {
  --vp-font-size: var(--vp-mobile-font-size);
  --vp-day-row: var(--vp-mobile-day-row);
  --vp-month-row: var(--vp-mobile-month-row);
  --vp-year-row: var(--vp-mobile-year-row);
  --vp-nav-height: var(--vp-mobile-nav-height);
  --vp-nav-btn: var(--vp-mobile-nav-height);
  position: fixed;
  width: var(--vp-mobile-width);
  border: none
}

.vela-picker.-device-mode- * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) }
.vela-picker.-device-mode- .vela-picker--pointer { display: none }

.vela-picker.-device-mode-:not(.-js-position-) {
  transform: translate(-50%, calc(-50% + var(--vp-offset)))
}

.vela-picker.-device-mode-.-is-open-:not(.-js-position-) { transform: translate(-50%, -50%) }

.vela-picker.-js-position- { transition: none }

.vela-picker-global-container { position: absolute; left: 0; top: 0 }

/* ---------- Pointer (kept minimal, redesigned) ---------- */
.vela-picker--pointer {
  --pointer-half-size: calc(var(--vp-pointer-size) / 2);
  position: absolute;
  width: var(--vp-pointer-size);
  height: var(--vp-pointer-size);
  z-index: -1
}

.vela-picker--pointer::after {
  content: "";
  position: absolute;
  background: var(--vp-bg);
  border-top: 1px solid var(--vp-border-inner);
  border-right: 1px solid var(--vp-border-inner);
  border-top-right-radius: 2px;
  width: var(--vp-pointer-size);
  height: var(--vp-pointer-size);
  box-sizing: border-box
}

.-top-left- .vela-picker--pointer,
.-top-center- .vela-picker--pointer,
.-top-right- .vela-picker--pointer,
[data-popper-placement^=top] .vela-picker--pointer { top: calc(100% - var(--pointer-half-size) + 1px) }

.-top-left- .vela-picker--pointer::after,
.-top-center- .vela-picker--pointer::after,
.-top-right- .vela-picker--pointer::after,
[data-popper-placement^=top] .vela-picker--pointer::after { transform: rotate(135deg) }

.-right-top- .vela-picker--pointer,
.-right-center- .vela-picker--pointer,
.-right-bottom- .vela-picker--pointer,
[data-popper-placement^=right] .vela-picker--pointer { right: calc(100% - var(--pointer-half-size) + 1px) }

.-right-top- .vela-picker--pointer::after,
.-right-center- .vela-picker--pointer::after,
.-right-bottom- .vela-picker--pointer::after,
[data-popper-placement^=right] .vela-picker--pointer::after { transform: rotate(225deg) }

.-bottom-left- .vela-picker--pointer,
.-bottom-center- .vela-picker--pointer,
.-bottom-right- .vela-picker--pointer,
[data-popper-placement^=bottom] .vela-picker--pointer { bottom: calc(100% - var(--pointer-half-size) + 1px) }

.-bottom-left- .vela-picker--pointer::after,
.-bottom-center- .vela-picker--pointer::after,
.-bottom-right- .vela-picker--pointer::after,
[data-popper-placement^=bottom] .vela-picker--pointer::after { transform: rotate(315deg) }

.-left-top- .vela-picker--pointer,
.-left-center- .vela-picker--pointer,
.-left-bottom- .vela-picker--pointer,
[data-popper-placement^=left] .vela-picker--pointer { left: calc(100% - var(--pointer-half-size) + 1px) }

.-left-top- .vela-picker--pointer::after,
.-left-center- .vela-picker--pointer::after,
.-left-bottom- .vela-picker--pointer::after,
[data-popper-placement^=left] .vela-picker--pointer::after { transform: rotate(45deg) }

.-top-left- .vela-picker--pointer,
.-bottom-left- .vela-picker--pointer { left: 18px }

.-top-right- .vela-picker--pointer,
.-bottom-right- .vela-picker--pointer { right: 18px }

.-top-center- .vela-picker--pointer,
.-bottom-center- .vela-picker--pointer { left: calc(50% - var(--vp-pointer-size) / 2) }

.-left-top- .vela-picker--pointer,
.-right-top- .vela-picker--pointer { top: 18px }

.-left-bottom- .vela-picker--pointer,
.-right-bottom- .vela-picker--pointer { bottom: 18px }

.-left-center- .vela-picker--pointer,
.-right-center- .vela-picker--pointer { top: calc(50% - var(--vp-pointer-size) / 2) }

/* ---------- Layout areas ---------- */
.vela-picker--navigation { grid-area: nav }

.vela-picker--content {
  box-sizing: content-box;
  padding: var(--vp-pad);
  grid-area: body
}

.-time-only- .vela-picker--content { display: none }

.vela-picker--time { grid-area: timepicker }
.vela-picker--buttons { grid-area: buttons }

.vela-picker--buttons,
.vela-picker--time {
  padding: var(--vp-pad);
  border-top: 1px solid var(--vp-border-inner)
}

/* ---------- Mobile overlay ---------- */
.vela-picker-overlay {
  position: fixed;
  background: var(--vp-overlay-bg);
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  transition:
    opacity var(--vp-overlay-anim) var(--vp-overlay-ease),
    left 0s, height 0s, width 0s;
  transition-delay: 0s, var(--vp-overlay-anim), var(--vp-overlay-anim), var(--vp-overlay-anim);
  z-index: var(--vp-overlay-z-index)
}

.vela-picker-overlay.-is-open- {
  opacity: 1;
  width: 100%;
  height: 100%;
  transition:
    opacity var(--vp-overlay-anim) var(--vp-overlay-ease),
    height 0s, width 0s
}

/* ---------- Weekend marker (opt-in class emitted by the script) ---------- */
.vela-picker-cell.-rest-day-:not(.-is-locked-):not(.-is-chosen-) {
  color: #d9534f
}