.ccm-mini-cal{
  --ccm-dark:#1e3c3c;
  --ccm-light:#d1ffbb;
  --ccm-accent:#ff6e83;
  --ccm-white:#ffffff;
  --ccm-black:#000000;

  background: var(--ccm-dark);
  border-radius:18px;
  padding:18px;
  color: var(--ccm-white);
  max-width: 360px;
}

.ccm-mini-cal *{ box-sizing:border-box; }

.ccm-mini-cal__head{ margin-bottom: 14px; }

.ccm-mini-cal__title{
  font-weight:800;
  color: var(--ccm-light);
  font-size:14px;
  line-height:1.1;
}

/* Month + nav */
.ccm-mini-cal__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
}

.ccm-mini-cal__month{
  font-weight:900;
  font-size:26px;
  line-height:1.05;
  color: var(--ccm-white);
  text-transform: lowercase;
  flex:1;
  text-align:center;
}

.ccm-mini-cal__navbtn{
  width:34px;
  height:34px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--ccm-white);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  font-weight:900;
  cursor:pointer;
}

.ccm-mini-cal__navbtn:hover{
  background: rgba(255,255,255,0.12);
}

/* Grid */
.ccm-mini-cal__grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:10px;
  padding: 10px 6px 14px;
}

/*
  Dot logic requested:
  - weekday: light green
  - weekend: grey
  - event: small red dot inside
  - selected: red ring outside
*/
.ccm-mini-cal__dot{
  position:relative;
  width:24px;
  height:24px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.ccm-mini-cal__dot.is-weekday{ background: var(--ccm-light); }
.ccm-mini-cal__dot.is-weekend{ background: rgba(255,255,255,0.35); }

.ccm-mini-cal__dot.is-out{ opacity:.35; }

.ccm-mini-cal__daynum{
  font-size:11px;
  font-weight:900;
  color: var(--ccm-dark);
  line-height:1;
}

/* Event indicator (red inner dot) */
.ccm-mini-cal__eventdot{
  display:none;
  position:absolute;
  width:7px;
  height:7px;
  border-radius:999px;
  background: var(--ccm-accent);
  bottom:3px;
  right:3px;
}
.ccm-mini-cal__dot.has-events .ccm-mini-cal__eventdot{ display:block; }

/* Today */
.ccm-mini-cal__dot.is-today{
  box-shadow: 0 0 0 2px rgba(255,255,255,0.55) inset;
}

/* Active selection: red ring */
.ccm-mini-cal__dot.is-active{
  box-shadow: 0 0 0 3px rgba(255,110,131,0.95);
  transform: scale(1.05);
}

.ccm-mini-cal__dot:focus-visible{
  outline:2px solid var(--ccm-accent);
  outline-offset:2px;
}

/* List below */
.ccm-mini-cal__list{
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.18);
}

.ccm-mini-cal__list-title{
  font-weight:900;
  font-size:14px;
  margin:0 0 10px;
  color: var(--ccm-white);
}

.ccm-mini-cal__items{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ccm-mini-cal__item{
  display:block;
  text-decoration:none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius:12px;
  padding:10px 10px;
  color: var(--ccm-white);
}

.ccm-mini-cal__item:hover{
  background: rgba(255,255,255,0.10);
}

.ccm-mini-cal__item-title{
  font-weight:900;
  font-size:13px;
  line-height:1.2;
}

.ccm-mini-cal__item-place{
  margin-top:4px;
  color: rgba(255,255,255,0.75);
  font-weight:700;
  font-size:12px;
  line-height:1.2;
}

.ccm-mini-cal__empty{
  color: rgba(255,255,255,0.75);
  font-weight:700;
  font-size:12px;
}

/* Loading state during AJAX */
.ccm-mini-cal.is-loading{
  opacity:.85;
}
.ccm-mini-cal.is-loading .ccm-mini-cal__grid{
  pointer-events:none;
  filter:saturate(.9);
}