.vip-global-date-picker[hidden] {

  display: none !important;

}



.vip-global-date-picker {

  position: fixed;

  z-index: 200000;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 16px;

  font-family: inherit;

}



.vip-date-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, .62);

}



.vip-date-dialog {

  position: relative;

  z-index: 1;

  width: min(360px, calc(100vw - 24px));

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.12);

  border-radius: 8px;

  color: #f5f5f5;

  background: #272727;

  box-shadow: 0 16px 46px rgba(0,0,0,.55);

}



.vip-date-head {

  height: 52px;

  display: grid;

  grid-template-columns: 46px 1fr 46px;

  align-items: center;

  border-bottom: 1px solid rgba(255,255,255,.08);

}



.vip-date-head button {

  height: 100%;

  border: 0;

  color: #fff;

  background: transparent;

  font-size: 28px;

  cursor: pointer;

}



.vip-date-title {

  min-width: 0;

  overflow: hidden;

  font-size: 15px;

  font-weight: 700;

  text-align: center;

  text-overflow: ellipsis;

  white-space: nowrap;

  text-transform: capitalize;

}



.vip-date-weekdays,

.vip-date-days {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

}



.vip-date-weekdays {

  padding: 10px 10px 4px;

  color: #a6a6a6;

  font-size: 11px;

  text-align: center;

}



.vip-date-days {

  padding: 4px 10px 10px;

}



.vip-date-day {

  aspect-ratio: 1;

  display: grid;

  place-items: center;

  padding: 0;

  border: 0;

  border-radius: 50%;

  color: #eee;

  background: transparent;

  font: inherit;

  font-size: 13px;

  cursor: pointer;

}



.vip-date-day.is-empty {

  pointer-events: none;

}



.vip-date-day:hover {

  background: rgba(255,255,255,.08);

}



.vip-date-day.is-today {

  box-shadow: inset 0 0 0 1px #35dfb2;

}



.vip-date-day.is-selected {

  color: #103a31;

  background: #35dfb2;

  font-weight: 800;

}



.vip-date-time {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  padding: 10px;

  border-top: 1px solid rgba(255,255,255,.08);

}



.vip-date-time[hidden] {

  display: none !important;

}



.vip-date-time select {

  height: 36px;

  padding: 0 10px;

  border: 1px solid rgba(255,255,255,.14);

  border-radius: 5px;

  outline: none;

  color: #fff;

  background: #333;

  font: inherit;

}



.vip-date-actions {

  display: flex;

  justify-content: flex-end;

  gap: 8px;

  padding: 10px;

  border-top: 1px solid rgba(255,255,255,.08);

}



.vip-date-actions button {

  width: 42px;

  height: 36px;

  border: 0;

  border-radius: 5px;

  font-size: 19px;

  cursor: pointer;

}



.vip-date-cancel {

  color: #ddd;

  background: #454545;

}



.vip-date-apply {

  color: #103a31;

  background: #35dfb2;

  font-weight: 800;

}



body.vip-date-picker-open {

  overflow: hidden !important;

}



@media (max-width: 600px) {

  .vip-date-dialog {

    width: min(350px, calc(100vw - 18px));

  }



  .vip-date-day {

    font-size: 14px;

  }

}