/* Calendar Customizations for Bancard Commerce Portal */
/* Vanilla Calendar Base Styles */
.vanilla-calendar {
  padding: 24px;
}

.vanilla-calendar-grid {
  gap: 16px !important;
}

.vanilla-calendar-days {
  row-gap: 0px;
}

/* Month and year title */
.vanilla-calendar-header .vanilla-calendar-month,
.vanilla-calendar-header .vanilla-calendar-year {
  left: 112.5px;
  top: 12px;
  height: 48px;
  color: var(--Color-text-default) !important;
  text-align: center;
  font-size: var(--Typography-heading-font-size-medium) !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: var(--Typography-heading-line-height-medium) !important;
}

/* Calendar columns */
.vanilla-calendar-column_year,
.vanilla-calendar_year,
.vanilla-calendar_month,
.vanilla-calendar-column_month {
  width: 336px;
}

/* Calendar days - normal state */
.vanilla-calendar-day {
  display: flex !important;
  width: 48px !important;
  height: 48px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px;
  color: var(--color-fg-subtle) !important;
  text-align: center;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 20px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.vanilla-calendar-day > .vanilla-calendar-day__btn {
  color: var(--color-fg-subtle, #69769B);
  border-radius: 4px;
}

.vanilla-calendar-day > .vanilla-calendar-day__btn:hover {
  border-radius: 4px;
}

/* Previous/Next month days */
.vanilla-calendar-day__btn.vanilla-calendar-day__btn_next,
.vanilla-calendar-day__btn.vanilla-calendar-day__btn_prev,
.vanilla-calendar-day__btn.vanilla-calendar-day__btn_next.vanilla-calendar-day__btn_selected,
.vanilla-calendar-day__btn.vanilla-calendar-day__btn_prev.vanilla-calendar-day__btn_selected {
  color: var(--Color-text-disabled, #BAC1D5) !important;
  background-color: var(--Color-text-inverse, #FFF) !important;
  border-radius: 4px !important;
}

/* Selected days - first and last */
.vanilla-calendar-day_selected-first > .vanilla-calendar-day__btn_selected,
.vanilla-calendar-day_selected-last > .vanilla-calendar-day__btn_selected,
.vanilla-calendar-day_selected-first > .vanilla-calendar-day__btn_selected:hover,
.vanilla-calendar-day_selected-last > .vanilla-calendar-day__btn_selected:hover {
  background: var(--Color-fill-primary-default, #1589DD) !important;
  color: var(--Color-text-inverse, #FFF) !important;
}

/* Hover states */
.vanilla-calendar-day > .vanilla-calendar-day__btn:not(.vanilla-calendar-day__btn_selected):hover {
  border-radius: 4px;
  background: var(--Color-fill-selected-pressed, #C5E7FF) !important;
  color: var(--color-fg-selected, #1589DD) !important;
}

.vanilla-calendar-day_selected-intermediate > .vanilla-calendar-day__btn_selected:hover {
  background: var(--Color-fill-selected-pressed, #C5E7FF) !important;
  color: var(--color-fg-selected, #1589DD) !important;
}

/* Range selection shapes */
.vanilla-calendar-day_hover-first > .vanilla-calendar-day__btn_selected,
.vanilla-calendar-day_selected-first > .vanilla-calendar-day__btn_selected,
.vanilla-calendar-day_selected-first > .vanilla-calendar-day__btn_selected:hover {
  border-radius: 4px 0px 0px 4px !important;
}

.vanilla-calendar-day_hover-last > .vanilla-calendar-day__btn_selected,
.vanilla-calendar-day_selected-last > .vanilla-calendar-day__btn_selected,
.vanilla-calendar-day_selected-last > .vanilla-calendar-day__btn_selected:hover {
  border-radius: 0px 4px 4px 0px !important;
}

[data-calendar-theme=light] .vanilla-calendar-day__btn_hover:not(.vanilla-calendar-day__btn_selected) {
  border-radius: 0px;
}

/* Arrow navigation */
.vanilla-calendar-arrow {
  color: var(--Color-fill-primary-default) !important;
  fill: var(--Color-fill-primary-default) !important;
}

[data-calendar-theme=light] .vanilla-calendar-arrow:before {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/v2/assets/icons/arrow-down-blue-e80ed2ea.svg");
  top: 0;
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
}

.vanilla-calendar-column_year > .vanilla-calendar-header > .vanilla-calendar-arrow.vanilla-calendar-arrow_next,
.vanilla-calendar-column_year > .vanilla-calendar-header > .vanilla-calendar-arrow.vanilla-calendar-arrow_prev,
.vanilla-calendar-header > .vanilla-calendar-arrow.vanilla-calendar-arrow_next,
.vanilla-calendar-header > .vanilla-calendar-arrow.vanilla-calendar-arrow_prev {
  width: 48px;
  height: 48px;
  display: block;
  position: relative;
  top: 0px;
  left: 0px;
}

/* Header and content */
.vanilla-calendar-header {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.vanilla-calendar-content {
  padding: 0 !important;
}

.vanilla-calendar-controls {
  padding-right: 40px !important;
  padding-top: 8px !important;
}

/* Footer and buttons */
.calendar-month-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
}

.strech-btn {
  flex: 1 1 50%;
}

/* Calendar dropdown */
.calendar-dropdown {
  position: absolute;
  top: 100%;
  background: white;
  z-index: 50;
  overflow: hidden;
}

.calendar-dropdown[data-months-to-show="1"] {
  min-width: 336px;
}

.calendar-dropdown[data-months-to-show="2"] {
  min-width: 738px;
}

@media (max-width: 1120px) {
  .calendar-dropdown[data-months-to-show="2"] {
    min-width: 386px;
    width: 386px;
  }
}

/* Theme-specific styles */
[data-calendar-theme=light] .vanilla-calendar-day__btn_selected,
[data-calendar-theme=light] .vanilla-calendar-day__btn_selected:hover {
  background: var(--Color-fill-primary-default, #1589DD) !important;
  color: var(--Color-text-inverse, #FFF) !important;
}

[data-calendar-theme=light] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected {
  background: var(--Color-fill-selected-pressed, #C5E7FF) !important;
  color: var(--color-fg-selected, #1589DD) !important;
}

.vanilla-calendar-day__btn.vanilla-calendar-day__btn_selected,
.vanilla-calendar-years__year.vanilla-calendar-years__year_selected,
.vanilla-calendar-months__month.vanilla-calendar-months__month_selected {
  background: var(--Color-fill-primary-default, #1589DD) !important;
  color: var(--Color-text-inverse, #FFF) !important;
}

[data-calendar-theme=light] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_prev, 
[data-calendar-theme=light] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_next, 
[data-calendar-theme=light] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_prev:hover, 
[data-calendar-theme=light] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_next:hover {
  background-color: #FFF !important;
  color: #BAC1D5 !important;
}

[data-calendar-theme=light] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected {
  @apply bg-[#C5E7FF] text-[#1589DD];
}

.vanilla-calendar-day__btn.vanilla-calendar-day__btn_selected,
.vanilla-calendar-years__year.vanilla-calendar-years__year_selected,
.vanilla-calendar-months__month.vanilla-calendar-months__month_selected {
  @apply bg-[#1589DD] text-white;
}

[data-calendar-theme=light] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_prev, 
[data-calendar-theme=light] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_next, 
[data-calendar-theme=light] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_prev:hover, 
[data-calendar-theme=light] .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_next:hover {
  @apply bg-white text-[#BAC1D5];
}