/* ===============================================
   Vanilla Calendar — custom theme (concentric circles)
   Scope: .calendar-widget  (wrap your calendar in this)
   =============================================== */

/* Geometry tokens (tweak if you change sizes) */
.calendar-widget {
  --vc-btn: 30px;     /* button size */
  --vc-dot: 24px;     /* inner fill circle */
  --vc-ring: 30px;    /* ring diameter (use 28px if you want a tiny gap) */
  --vc-ring-w: 2px;   /* ring width */
  --vc-ring-color: #E65513;
  --vc-today-fill: #E65513;
  --vc-event-fill: #FFB195;
  --vc-text: #121212;
  --vc-text-invert: #F0F0F0;
}

/* Base button & stacking */
.calendar-widget .vc-date__btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vc-btn);
  height: var(--vc-btn);
  line-height: var(--vc-btn); /* guard */
  border-radius: 50%;         /* circle, not rounded rect */
  background: transparent;
  color: var(--vc-text);
}

/* Pseudos never catch clicks */
.calendar-widget .vc-date__btn::before,
.calendar-widget .vc-date__btn::after {
  pointer-events: none;
}

/* --- Inner fill (event/today) UNDER the number --- */
.calendar-widget .vc-date__btn::before {
  content: "";
  position: absolute;
  z-index: -1;           /* behind number */
  width: var(--vc-dot);
  height: var(--vc-dot);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* perfect centering */
  background: transparent;
}

/* Event day fill */
.calendar-widget .vc-date.has-event .vc-date__btn::before {
  background: var(--vc-event-fill);
}

/* Today fill + text color */
.calendar-widget .vc-date[data-vc-date-today] .vc-date__btn::before {
  background: var(--vc-today-fill);
}
.calendar-widget .vc-date[data-vc-date-today] .vc-date__btn {
  color: var(--vc-text-invert);
}

/* Kill library's today bg/text in LIGHT */
.calendar-widget [data-vc-theme="light"] .vc-date[data-vc-date-today] .vc-date__btn {
  background: transparent !important;
  color: var(--vc-text-invert) !important;
}

/* --- Selected ring as a true circle (not inset shadow) --- */
.calendar-widget .vc-date__btn::after {
  content: "";
  position: absolute;
  inset: 0; /* we'll size explicitly below */
  width: var(--vc-ring);
  height: var(--vc-ring);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: var(--vc-ring-w) solid transparent; /* default: hidden */
}

/* Show ring for any selected state (light + dark) */
.calendar-widget [data-vc-theme="light"] .vc-date[data-vc-date-selected] .vc-date__btn::after,
.calendar-widget [data-vc-theme="light"] .vc-date.is-selected .vc-date__btn::after,
.calendar-widget [data-vc-theme="light"] .vc-date[data-vc-date-selected="first"] .vc-date__btn::after,
.calendar-widget [data-vc-theme="light"] .vc-date[data-vc-date-selected="middle"] .vc-date__btn::after,
.calendar-widget [data-vc-theme="light"] .vc-date[data-vc-date-selected="last"] .vc-date__btn::after,
.calendar-widget [data-vc-theme="light"] .vc-date[data-vc-date-selected="first-and-last"] .vc-date__btn::after,
.calendar-widget [data-vc-theme="dark"]  .vc-date[data-vc-date-selected] .vc-date__btn::after,
.calendar-widget [data-vc-theme="dark"]  .vc-date.is-selected .vc-date__btn::after {
  border-color: var(--vc-ring-color);
}

/* Remove ANY vendor fill on selected (cyan, etc.) */
.calendar-widget [data-vc-theme="light"] .vc-date[data-vc-date-selected] .vc-date__btn,
.calendar-widget [data-vc-theme="light"] .vc-date.is-selected .vc-date__btn,
.calendar-widget [data-vc-theme="dark"]  .vc-date[data-vc-date-selected] .vc-date__btn,
.calendar-widget [data-vc-theme="dark"]  .vc-date.is-selected .vc-date__btn {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important; /* we use ::after ring instead */
}

/* Hover/focus should NOT introduce bg or color flips */
.calendar-widget .vc-date .vc-date__btn:hover,
.calendar-widget .vc-date .vc-date__btn:focus,
.calendar-widget .vc-date .vc-date__btn:active {
  background: transparent !important;
  color: inherit !important;
}

/* Weekend text color (light) */
.calendar-widget [data-vc-theme="light"] .vc-week__day[data-vc-week-day-off],
.calendar-widget [data-vc-theme="light"] .vc-date[data-vc-date-weekend] .vc-date__btn {
  color: var(--vc-text);
}

/* Dark theme basics */
.calendar-widget [data-vc-theme="dark"] .vc-week__day { color: #c7c7c7; }
.calendar-widget [data-vc-theme="dark"] .vc-date .vc-date__btn { color: #e8e8e8; }
.calendar-widget [data-vc-theme="dark"] .vc-date[data-vc-date-weekend] .vc-date__btn,
.calendar-widget [data-vc-theme="dark"] .vc-week__day[data-vc-week-day-off] { color: #dcdcdc; }
.calendar-widget [data-vc-theme="dark"] .vc-month,
.calendar-widget [data-vc-theme="dark"] .vc-year { color: #fafafa; }

/* Today on dark: keep orange dot + white text */
.calendar-widget [data-vc-theme="dark"] .vc-date[data-vc-date-today] .vc-date__btn::before { background: var(--vc-today-fill); }
.calendar-widget [data-vc-theme="dark"] .vc-date[data-vc-date-today] .vc-date__btn { color: #fff; }

/* TODAY + SELECTED: force white text and visible ring */
.calendar-widget .vc-date[data-vc-date-today][data-vc-date-selected] .vc-date__btn,
.calendar-widget .vc-date[data-vc-date-today].is-selected .vc-date__btn {
  color: #fff !important;
}
.calendar-widget .vc-date[data-vc-date-today][data-vc-date-selected] .vc-date__btn::after,
.calendar-widget .vc-date[data-vc-date-today].is-selected .vc-date__btn::after {
  border-color: var(--vc-ring-color);
}

/* Headings and weekday/date baseline color in light */
.calendar-widget [data-vc-theme="light"] .vc-header__content,
.calendar-widget [data-vc-theme="light"] .vc-month,
.calendar-widget [data-vc-theme="light"] .vc-year,
.calendar-widget [data-vc-theme="light"] .vc-week__day,
.calendar-widget [data-vc-theme="light"] .vc-week-number,
.calendar-widget [data-vc-theme="light"] .vc-date .vc-date__btn {
  color: var(--vc-text);
}

/* Cancel greying-out of month/year titles when disabled (only-arrows) */
.calendar-widget [data-vc-theme="light"] .vc-month[disabled],
.calendar-widget [data-vc-theme="light"] .vc-year[disabled],
.calendar-widget [data-vc-theme="light"] .vc-month[aria-disabled="true"],
.calendar-widget [data-vc-theme="light"] .vc-year[aria-disabled="true"] {
  color: var(--vc-text) !important;
  opacity: 1 !important;
}

/* Remove plugin padding on calendar root if you set it */
.calendar-widget [data-vc="calendar"] {
  padding: 0 !important;
}

.dark .calendar-widget [data-vc-theme="dark"].vc {
  background-color: #242424 !important;
  color: #F0F0F0 !important;
}