/* ==========================
   Calendar base styles - always white background
   ========================== */

[data-vc=calendar],
[data-vc=calendar].vc {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* ==========================
   Product-themed calendar
   Overrides for vanilla-calendar-pro so it uses product CSS variables
   ========================== */

[data-vc=calendar] .vc-date[data-vc-date-selected] .vc-date__btn,
[data-vc=calendar] .vc-date[data-vc-date-selected=middle] .vc-date__btn,
[data-vc=calendar] .vc-date[data-vc-date-selected=first] .vc-date__btn,
[data-vc=calendar] .vc-date[data-vc-date-selected=last] .vc-date__btn {
  background-color: var(--product-primary) !important;
  color: var(--product-text) !important;
}

[data-vc=calendar] .vc-date__btn:hover {
  background-color: var(--product-primary-hover) !important;
  color: var(--product-text-hover, var(--product-text)) !important;
}

[data-vc=calendar] .vc-months__month[data-vc-months-month-selected],
[data-vc=calendar] .vc-years__year[data-vc-years-year-selected] {
  background-color: var(--product-primary) !important;
  color: var(--product-text) !important;
}

[data-vc=calendar] .vc-date[data-vc-date-today] .vc-date__btn {
  color: var(--product-primary) !important;
}

[data-vc=calendar] .vc-header__content,
[data-vc=calendar] .vc-month,
[data-vc=calendar] .vc-year {
  color: var(--product-primary) !important;
}

[data-vc=calendar] [tabindex="0"]:focus-visible,
[data-vc=calendar] button:focus-visible,
[data-vc=calendar]:focus-visible {
  outline-color: var(--product-primary-hover) !important;
}