/* Brand theming over Bootstrap. Primary colour injected per instance via
   CSS variable on :root in the layout. Accent (green) is secondary highlight. */
:root {
  --cp-primary: #EA580C;
  --cp-accent: #479e61;
  --bs-primary: var(--cp-primary);
  --bs-primary-rgb: 234, 88, 12;
  --bs-link-color: var(--cp-primary);
  --bs-link-hover-color: #C95508;
}

/* Scale all Phosphor icons to 120% of surrounding text size */
.ph, .ph-fill { font-size: 1.2em; }

.btn-primary {
  --bs-btn-bg: var(--cp-primary);
  --bs-btn-border-color: var(--cp-primary);
  --bs-btn-hover-bg: #C95508;
  --bs-btn-hover-border-color: #C95508;
  --bs-btn-active-bg: #B54E08;
  --bs-btn-active-border-color: #B54E08;
}

.text-primary { color: var(--cp-primary) !important; }
.text-accent  { color: var(--cp-accent)  !important; }

body {
  background: var(--bs-body-bg);
}

.cp-app-shell > .row > main {
  background: #f5f7fa;
}
[data-bs-theme="dark"] .cp-app-shell > .row > main {
  background: #1e2124;
}

/* Align the navbar's content with the three-column app shell (same 1400px). */
nav.navbar > .container-fluid {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Orange navigation bar ---- */
nav.cp-navbar {
  background: var(--cp-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* All interactive buttons: transparent with white text */
nav.cp-navbar .btn {
  color: #fff;
  background: transparent;
  border-color: transparent;
}
nav.cp-navbar .btn:hover,
nav.cp-navbar .btn:focus-visible {
  color: #fff;
  background: rgba(0, 0, 0, 0.12);
  border-color: transparent;
}
nav.cp-navbar .btn:active {
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
  border-color: transparent;
}

/* Family name / any plain text */
nav.cp-navbar .fw-semibold,
nav.cp-navbar .text-truncate {
  color: #fff;
}

/* cp-avatar inside the navbar (family initial, user initials) */
nav.cp-navbar .cp-avatar {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* User avatar photo button: subtle white ring */
nav.cp-navbar .rounded-circle {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 1px;
}

/* Search input group */
nav.cp-navbar .input-group-text {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
}
nav.cp-navbar .form-control {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
nav.cp-navbar .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
nav.cp-navbar .form-control:focus {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  box-shadow: none;
}

/* Family selector: frosted-pill so it stands out from the orange */
nav.cp-navbar .cp-family-selector > .btn {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.6rem;
  color: #fff;
}
nav.cp-navbar .cp-family-selector > .btn:hover {
  background: rgba(255, 255, 255, 0.32);
}
nav.cp-navbar .cp-family-selector > .btn:active {
  background: rgba(255, 255, 255, 0.42);
}

/* Search bar — pill shape, white background, wide */
nav.cp-navbar .cp-navbar-search {
  width: min(600px, calc(100% - 460px)); /* stays clear of left/right controls */
}
nav.cp-navbar .cp-navbar-search-input {
  background: #fff;
  border: none;
  color: #333;
  padding: 0.55rem 1rem 0.55rem 2.75rem; /* left pad for the icon */
}
nav.cp-navbar .cp-navbar-search-input::placeholder {
  color: #aaa;
}
nav.cp-navbar .cp-navbar-search-input:focus {
  background: #fff;
  border: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
  color: #333;
}

/* Dropdown menus stay on their own styling (white bg, dark text) */

/* ---- Auth layout ---- */
.auth-wrap {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.auth-card {
  max-width: 420px;
  width: 100%;
}

/* ---- App shell ---- */

/* Centre the three-column layout and cap its width on large screens. */
.cp-app-shell {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* On md+ the shell is locked to the remaining viewport height so that ONLY
   the main content column scrolls. The sidebar is a plain overflow container
   and never needs position:sticky — it simply cannot move because there is
   nothing above it to scroll.  This eliminates the sub-pixel drift that
   position:sticky produces inside a flex row. */
@media (min-width: 768px) {
  .cp-app-shell {
    height: calc(100vh - 57px); /* 57px = navbar height */
    overflow: hidden;
  }
  .cp-app-shell > .row {
    height: 100%;
  }
  aside.cp-sidebar {
    height: 100%;
    overflow: hidden; /* the content div scrolls, not the aside itself */
    display: flex;
    flex-direction: column;
    white-space: nowrap; /* prevent labels wrapping mid-transition */
    transition: width 0.2s ease, max-width 0.2s ease,
                min-width 0.2s ease, flex-basis 0.2s ease;
  }
  /* Scrollable nav list */
  .cp-sidebar-content {
    flex: 1 1 0;
    min-height: 0; /* required: lets flex item shrink below content height */
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* Toggle button — pinned to bottom, never scrolls away */
  .cp-sidebar-foot {
    flex-shrink: 0;
    padding: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
  }
  .cp-app-shell > .row > main {
    height: 100%;
    overflow-y: auto;
  }

  /* Right activity panel — same inner-scroll pattern as the sidebar */
  .cp-right-panel {
    height: 100%;
    overflow: hidden;
  }

  /* Collapsed state — driven by data-sidebar-collapsed on <html> so it
     is applied before first paint (no flash). */
  [data-sidebar-collapsed="1"] .cp-app-shell aside.cp-sidebar {
    flex: 0 0 68px;
    width: 68px;
    min-width: 68px;
    max-width: 68px;
  }
  /* Main expands to fill the freed space */
  [data-sidebar-collapsed="1"] .cp-app-shell > .row > main {
    flex: 1 1 0;
    width: auto;
    max-width: 100%;
  }
  /* Hide text labels */
  [data-sidebar-collapsed="1"] .cp-sidebar .cp-sidebar-label {
    display: none;
  }
  /* Centre icons and remove gap (no text beside them) */
  [data-sidebar-collapsed="1"] aside.cp-sidebar .nav-link,
  [data-sidebar-collapsed="1"] .cp-sidebar-foot .cp-sidebar-toggle {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
  }
}

/* Collapse/expand arrow icons — CSS drives visibility so state is correct
   even before JS runs. */
.cp-sidebar-icon-col { display: none; }
[data-sidebar-collapsed="1"] .cp-sidebar-icon-col { display: inline-block; }
[data-sidebar-collapsed="1"] .cp-sidebar-icon-exp { display: none; }

.cp-sidebar .nav-link {
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  color: var(--bs-body-color);
  border-radius: 0.5rem;
  font-size: 1.05rem;
  padding: 0.75rem 0.85rem;
}
.cp-sidebar .nav-link.active {
  background: rgba(234, 88, 12, 0.10);
  color: var(--cp-primary);
  font-weight: 600;
}
.cp-sidebar .nav-link:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Orange backing circle for avatar photos — shows through transparent PNG areas */
.cp-avatar-photo {
  background: rgba(234, 88, 12, 0.22);
}
[data-bs-theme="dark"] .cp-avatar-photo {
  background: rgba(251, 140, 60, 0.28);
}

/* Avatar uses primary (orange) by default */
.cp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-primary);
  color: #fff;
  border-radius: 50%;
  font-weight: 600;
  text-transform: uppercase;
  flex: 0 0 auto;
}

/* Green accent avatar variant — use on e.g. online indicators, confirmations */
.cp-avatar-accent {
  background: var(--cp-accent);
}

.feed-col {
  max-width: 680px;
}

/* ── Home view toggle ─────────────────────────────────────── */
.cp-view-toggle {
  display: inline-flex;
  background: var(--bs-secondary-bg);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.cp-view-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1.1rem;
  min-height: 44px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
  white-space: nowrap;
}
.cp-view-btn:hover { color: var(--bs-body-color); }
.cp-view-btn.active {
  background: var(--bs-body-bg);
  color: var(--cp-primary);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
[data-bs-theme="dark"] .cp-view-btn.active {
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* ── Home panel crossfade ─────────────────────────────────── */
.cp-home-panel {
  animation: cpFadeIn 200ms ease-out both;
}
@keyframes cpFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-home-panel { animation: none; }
}

/* ── Overview — since-last-visit card ────────────────────── */
.cp-since-card {
  border-left: 3px solid var(--cp-primary) !important;
}
.cp-since-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(234, 88, 12, .10);
  color: var(--cp-primary);
  font-size: 1rem;
}
[data-bs-theme="dark"] .cp-since-icon {
  background: rgba(251, 140, 60, .14);
}

/* ── Overview — post + album compact cards ────────────────── */
.cp-overview-post-card,
.cp-overview-album-card {
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.cp-overview-post-card:hover,
.cp-overview-album-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.09) !important;
}

/* Tighter letter-spacing on headings — Inter reads better at -0.025em on display sizes */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  letter-spacing: -0.025em;
}

/* Post cards are clickable to open the detail page. */
.post-card {
  cursor: pointer;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10) !important;
}
.post-card button,
.post-card a,
.post-card label,
.post-card input { cursor: auto; }

/* ─── Event Cards ─────────────────────────────────────────────── */
.cp-event-card {
  overflow: hidden;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.cp-event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10) !important;
}

/* Date stamp — orange-tinted left column */
.cp-event-datestamp {
  width: 60px;
  min-width: 60px;
  padding: 1rem 0;
  background: rgba(234, 88, 12, 0.08);
  border-right: 1px solid rgba(234, 88, 12, 0.12);
}
[data-bs-theme="dark"] .cp-event-datestamp {
  background: rgba(251, 140, 60, 0.12);
  border-right-color: rgba(251, 140, 60, 0.15);
}
.cp-event-day {
  font-family: 'Nunito', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cp-primary);
  line-height: 1;
}
.cp-event-month {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cp-primary);
  opacity: 0.75;
  margin-top: 2px;
}

/* Title & meta */
.cp-event-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--bs-body-color);
}
.cp-event-meta {
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}
.cp-event-desc {
  font-size: 0.925rem;
  color: var(--bs-secondary-color);
  white-space: pre-wrap;
}

/* RSVP counts */
.cp-rsvp-counts { font-size: 0.875rem; }
.cp-rsvp-count  { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--bs-secondary-color); }
.cp-rsvp-yes    { color: #479e61; }
.cp-rsvp-no     { color: #dc3545; }
.cp-rsvp-maybe  { color: #d97706; }
[data-bs-theme="dark"] .cp-rsvp-yes   { color: #5cb87a; }
[data-bs-theme="dark"] .cp-rsvp-no    { color: #f17070; }
[data-bs-theme="dark"] .cp-rsvp-maybe { color: #fbbf24; }

/* RSVP pill buttons */
.cp-rsvp-btn {
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.cp-rsvp-btn:hover {
  border-color: var(--cp-primary);
  color: var(--cp-primary);
  background: rgba(234, 88, 12, 0.06);
}
.cp-rsvp-active-yes {
  background: var(--cp-primary) !important;
  border-color: var(--cp-primary) !important;
  color: #fff !important;
}
.cp-rsvp-active-maybe {
  background: rgba(217, 119, 6, 0.12) !important;
  border-color: #d97706 !important;
  color: #d97706 !important;
}
.cp-rsvp-active-no {
  background: rgba(220, 53, 69, 0.10) !important;
  border-color: #dc3545 !important;
  color: #dc3545 !important;
}

/* ─── Visit Scheduling ────────────────────────────────────────── */

/* Schedule header icon */
.cp-visit-person-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(234, 88, 12, 0.10);
  color: var(--cp-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
[data-bs-theme="dark"] .cp-visit-person-icon {
  background: rgba(251, 140, 60, 0.14);
  color: #FB8C3C;
}

/* Slot row — three states */
.cp-visit-slot {
  background: var(--bs-tertiary-bg);
  transition: background 150ms ease;
}
.cp-visit-slot[data-state="mine"] {
  background: rgba(234, 88, 12, 0.07);
}
[data-bs-theme="dark"] .cp-visit-slot[data-state="mine"] {
  background: rgba(251, 140, 60, 0.10);
}

/* State badges */
.cp-slot-badge {
  display: inline-flex; align-items: center;
  font-size: 0.8rem; font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.cp-slot-badge-free {
  background: rgba(71, 158, 97, 0.12);
  color: #479e61;
}
.cp-slot-badge-mine {
  background: rgba(234, 88, 12, 0.12);
  color: var(--cp-primary);
}
[data-bs-theme="dark"] .cp-slot-badge-mine {
  background: rgba(251, 140, 60, 0.15);
  color: #FB8C3C;
}

/* Claim / Release buttons */
.cp-slot-btn {
  border-radius: 999px;
  font-size: 0.875rem;
  padding: 0.5rem 0.9rem;
  transition: all 150ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.cp-slot-btn-claim {
  border: 1px solid var(--cp-primary);
  color: var(--cp-primary);
  background: transparent;
}
.cp-slot-btn-claim:hover {
  background: var(--cp-primary);
  color: #fff;
}
.cp-slot-btn-release {
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  background: transparent;
}
.cp-slot-btn-release:hover {
  border-color: #dc3545;
  color: #dc3545;
}

/* ─── Inline Composer ─────────────────────────────────────────── */

/* Tab row */
.cp-composer-tabs {
  display: flex;
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0 0.25rem;
}
.cp-composer-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem 0.5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease, border-color 200ms ease;
}
.cp-composer-tab:hover  { color: var(--bs-body-color); }
.cp-composer-tab.active {
  color: var(--cp-primary);
  font-weight: 600;
  border-bottom-color: var(--cp-primary);
}
[data-bs-theme="dark"] .cp-composer-tab.active { color: #FB8C3C; border-bottom-color: #FB8C3C; }

/* Panels */
.cp-composer-panels { padding: 1rem; }

.cp-panel { display: none; }

.cp-panel.cp-panel-active {
  display: block;
  animation: cpPanelIn 200ms ease-out both;
}
@keyframes cpPanelIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Post textarea — height driven by JS; transition on expand class only */
.cp-composer-textarea {
  resize: none;
  overflow: hidden;
  min-height: 2.75rem;
  transition: min-height 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cp-composer-textarea.cp-textarea-expanded { min-height: 5.5rem; }
.cp-composer-textarea:focus,
#cp-panel-post .form-control:focus { box-shadow: none; background: transparent; }

/* Actions reveal (max-height from 0 → known max; element is one row of btn-sm = ~36px) */
.cp-post-actions-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 220ms ease-out, opacity 180ms ease-out;
}
.cp-post-actions-wrap.cp-actions-revealed {
  max-height: 56px;
  opacity: 1;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .cp-panel.cp-panel-active   { animation: none; }
  .cp-composer-textarea        { transition: none; }
  .cp-post-actions-wrap        { transition: none; }
}

/* ---- Dark mode overrides ---- */

/* btn-light doesn't invert automatically — make it theme-aware globally */
[data-bs-theme="dark"] .btn-light {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--bs-secondary-bg);
  --bs-btn-border-color: var(--bs-border-color-translucent);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-tertiary-bg);
  --bs-btn-active-border-color: var(--bs-border-color);
}

/* Mobile offcanvas sidebar */
[data-bs-theme="dark"] .offcanvas {
  --bs-offcanvas-bg: var(--bs-body-bg);
}

[data-bs-theme="dark"] {
  /* Keep orange primary readable on dark surfaces */
  --cp-primary: #FB8C3C;
  --bs-primary: #FB8C3C;
  --bs-primary-rgb: 251, 140, 60;
  --bs-link-color: #FB8C3C;
  --bs-link-hover-color: #FCA96A;
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #FB8C3C;
  --bs-btn-border-color: #FB8C3C;
  --bs-btn-hover-bg: #E8780A;
  --bs-btn-hover-border-color: #E8780A;
  --bs-btn-active-bg: #D06A00;
  --bs-btn-active-border-color: #D06A00;
}

[data-bs-theme="dark"] .cp-sidebar .nav-link.active {
  background: rgba(251, 140, 60, 0.15);
  color: #FB8C3C;
}

[data-bs-theme="dark"] .cp-sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.07);
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #FB8C3C;
  --bs-btn-border-color: #FB8C3C;
  --bs-btn-hover-bg: #FB8C3C;
  --bs-btn-hover-border-color: #FB8C3C;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #E8780A;
  --bs-btn-active-border-color: #E8780A;
}

/* ---- Green accent touches ---- */

/* Online presence dot */
.cp-online-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cp-accent);
  border: 2px solid #fff;
}

/* Bookmark filled state */
.js-bookmark.text-primary i.bi-bookmark-fill {
  color: var(--cp-accent) !important;
}

/* Outline-primary uses orange */
.btn-outline-primary {
  --bs-btn-color: var(--cp-primary);
  --bs-btn-border-color: var(--cp-primary);
  --bs-btn-hover-bg: var(--cp-primary);
  --bs-btn-hover-border-color: var(--cp-primary);
  --bs-btn-active-bg: #C95508;
  --bs-btn-active-border-color: #C95508;
}

/* Green accent outline variant */
.btn-outline-accent {
  --bs-btn-color: var(--cp-accent);
  --bs-btn-border-color: var(--cp-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cp-accent);
  --bs-btn-hover-border-color: var(--cp-accent);
  color: var(--cp-accent);
  border-color: var(--cp-accent);
  background: transparent;
}
.btn-outline-accent:hover {
  color: #fff;
  background: var(--cp-accent);
  border-color: var(--cp-accent);
}

/* ── Right-panel mini calendar ──────────────────────────── */

.cp-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.cp-cal-header {
  text-align: center;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
  padding: .1rem 0 .3rem;
}
.cp-cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .15rem 0 .2rem;
  border-radius: .35rem;
  position: relative;
  min-height: 2rem;
}
.cp-cal-empty { pointer-events: none; }
.cp-cal-day {
  font-size: .75rem;
  line-height: 1.6rem;
  width: 1.6rem;
  text-align: center;
  border-radius: 50%;
  color: var(--bs-body-color);
}
.cp-cal-today .cp-cal-day {
  background: var(--cp-primary);
  color: #fff;
  font-weight: 700;
}
.cp-cal-dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cp-primary);
  margin-top: 1px;
}
.cp-cal-today .cp-cal-dot {
  background: rgba(255,255,255,.85);
}

/* Upcoming event rows */
.cp-cal-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  background: rgba(234, 88, 12, .08);
  border-radius: .5rem;
}
[data-bs-theme="dark"] .cp-cal-event-date {
  background: rgba(251, 140, 60, .12);
}
.cp-cal-event-day {
  font-size: .85rem;
  font-weight: 700;
  color: var(--cp-primary);
  line-height: 1;
}
.cp-cal-event-month {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cp-primary);
  opacity: .75;
}