.jcc-wrap{
  display:grid;
  grid-template-columns: repeat(var(--jcc-cols, 3), minmax(260px, 1fr));
  gap: 24px;
  direction: rtl;
  font-family: inherit;
}

.jcc-month{
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 14px;
  background:#fff;
  position: relative;
  overflow: visible; /* allow tooltip */
}

.jcc-month-title{
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
  text-align: center;
}

.jcc-weekdays{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  opacity: .75;
}

.jcc-days{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px; /* restore gap */
}

.jcc-day{
  position:relative;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  border: 1px solid rgba(0,0,0,.05);
  background:#e9edf2;
  z-index: 9999;
}

.jcc-empty{
  background: transparent;
  border:0;
}

.jcc-num{ font-weight:700; }

/* ===== Range overlay (RTL-safe) ===== */
.jcc-day.jcc-has-event{
  background: transparent; /* use ::before */
  border-color: transparent; /* remove seams */
}
.jcc-day.jcc-has-event::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--jcc-ev);
  z-index:-1;
}

.jcc-range-start::before{
  inset-inline-end: -12px;
  border-radius: 0 999px 999px 0; /* RTL start (right side rounded) */
}

.jcc-range-mid::before{
  z-index:-1;
  inset-inline-start: -12px;
  inset-inline-end: -12px;
  border-radius: 0;
}

.jcc-range-end::before{
  inset-inline-start: -12px;
  border-radius: 999px 0 0 999px; /* RTL end (left side rounded) */
}

.jcc-range-single::before{
  border-radius:999px;
}

/* ===== Tooltip ===== */
.jcc-tooltip{
  position:absolute;
  left:50%;
  top:-2px;
  transform: translate(-50%, -100%);
  width: 260px;
  max-width: min(340px, 90vw);
  z-index: 9999;
  display:none;
}

.jcc-tip-card{
  border-radius: 16px;
  padding: 14px;
  background: rgba(10,20,30,.92);
  color:#fff;
  text-align:center;
}

.jcc-tip-btn{
  display:inline-block;
  margin-top:8px;
  padding:10px 16px;
  border-radius:999px;
  background:#fff;
  color:#111;
  text-decoration:none;
  font-weight:700;
}

/* hover */
@media (hover:hover){
  .jcc-day[data-jcc-day="1"]:hover .jcc-tooltip{ display:block; }
}

.jcc-day.jcc-open .jcc-tooltip{ display:block; }

@media (max-width:768px){
  .jcc-wrap{ grid-template-columns:1fr; }
}


/* Make whole day clickable (desktop). On mobile first tap opens tooltip via JS */
.jcc-day-hit{
  position:absolute;
  inset:0;
  z-index: 5;
  border-radius: inherit;
  text-decoration:none;
}

/* Prevent range overlays from stealing taps/clicks */
.jcc-day::before,
.jcc-day::after{ pointer-events:none; }


@media (max-width:768px){
  /* On mobile, don't extend range overlays into neighbor cells to avoid wrong tap target */
  .jcc-range-start::before,
  .jcc-range-mid::before,
  .jcc-range-end::before{
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
  }
  /* Mobile tooltip: JS positions it near the tapped day */
  .jcc-tooltip{
    left:0; top:0; right:auto; bottom:auto;
    transform:none;
    width: 260px;
    max-width: min(340px, 92vw);
  }
}