.csat-lunar-wrap{
  border-radius: 24px;
  padding: 18px 18px 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}

.csat-lunar-header{ margin-bottom: 10px; }
.csat-lunar-title{ font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.csat-lunar-sub{ opacity: .85; font-size: 0.95em; }

.csat-lunar-controls{
  display:flex; align-items:center; gap:10px;
  margin: 12px 0 10px;
}
.csat-lunar-month{ flex:1; text-align:center; font-weight:700; }
.csat-lunar-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.10);
  cursor:pointer;
}
.csat-lunar-nav:hover{ background: rgba(0,0,0,.18); }

.csat-lunar-dowrow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 6px;
}
.csat-lunar-dowcell{ text-align:center; font-weight:700; opacity:.9; padding: 6px 0; }

/* Current PHP markup uses .csat-lunar-dow with 7 direct child <div> nodes */
.csat-lunar-dow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 6px;
}
.csat-lunar-dow > div{
  text-align:center;
  font-weight:700;
  opacity:.9;
  padding: 6px 0;
}

/* Grid container (support both class names) */
.csat-lunar-cells,
.csat-lunar-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.csat-lunar-cell,
.csat-lunar-day{
  border-radius: 16px;
  min-height: 64px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
  padding: 8px 8px;
  text-align:left;
  cursor:pointer;
}
.csat-lunar-cell:hover,
.csat-lunar-day:hover{ background: rgba(0,0,0,.18); }
.csat-lunar-cell.csat-empty,
.csat-lunar-day.csat-empty{
  background: transparent;
  border: 1px dashed rgba(255,255,255,.10);
  cursor: default;
}
.csat-lunar-daynum{ font-weight: 800; opacity:.95; }
.csat-lunar-badge{
  display:inline-flex; align-items:center; gap:6px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  font-weight: 700;
  font-size: .9em;
}

/* =========================================================
   Theme Polish (Option A): soften the calendar tiles so they
   feel like soft rectangles (not pills) inside the purple/gold
   wrapper. We explicitly override the wrapper's global button
   styles for lunar cells.
========================================================= */

.conj-theme.conj-astro .csat-lunar-cell,
.conj-theme.conj-astro .csat-lunar-day{
  border-radius: 12px !important;
  background: rgba(0,0,0,.14) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;

  /*
    Some WP themes apply aggressive global BUTTON styles (e.g.,
    inline-flex + large border-radius) that can collapse a 7-col
    calendar into pill rows. These overrides force true tile behavior.
  */
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 72px !important;
  padding: 10px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

.conj-theme.conj-astro .csat-lunar-grid{
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 12px !important;
  grid-auto-rows: minmax(72px, auto) !important;
  align-items: stretch !important;
}

/* Weekday header must match the 7-column grid */
.conj-theme.conj-astro .csat-lunar-dow{
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: center !important;
  justify-items: center !important;
}

.conj-theme.conj-astro .csat-lunar-dow > div{
  text-align: center !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

.conj-theme.conj-astro .csat-lunar-cell:hover,
.conj-theme.conj-astro .csat-lunar-day:hover{
  background: rgba(0,0,0,.20) !important;
}

.conj-theme.conj-astro .csat-lunar-cell.csat-selected,
.conj-theme.conj-astro .csat-lunar-day.csat-selected{
  outline: 2px solid rgba(246,217,138,.28) !important;
  background: rgba(0,0,0,.26) !important;
}

.conj-theme.conj-astro .csat-lunar-cell.csat-empty,
.conj-theme.conj-astro .csat-lunar-day.csat-empty{
  background: transparent !important;
  border: 1px dashed rgba(255,255,255,.14) !important;
}

.conj-theme.conj-astro .csat-lunar-badge{
  border: 1px solid rgba(246,217,138,.35) !important;
  background: rgba(0,0,0,.18) !important;
}

.csat-lunar-detail{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.csat-lunar-detail-title{ font-weight: 900; }
.csat-lunar-detail-meta{ opacity:.85; margin-top: 4px; font-size: .95em; }
.csat-lunar-detail-text{ margin-top: 8px; opacity:.95; }

/* ---------------------------------------------------------
   Layout safety: some themes/plugins apply aggressive rules
   that can collapse grids (e.g. setting empty cells to
   display:none or overriding display:grid). We force the
   calendar to remain a 7-column grid and keep placeholder
   cells occupying space.
--------------------------------------------------------- */

.conj-theme.conj-astro .csat-lunar-dowrow,
.csat-lunar-dowrow{
  display:grid !important;
  grid-template-columns:repeat(7,1fr) !important;
}

.conj-theme.conj-astro .csat-lunar-cells,
.conj-theme.conj-astro .csat-lunar-grid,
.csat-lunar-cells,
.csat-lunar-grid{
  display:grid !important;
  grid-template-columns:repeat(7,1fr) !important;
}

.conj-theme.conj-astro .csat-lunar-cell.csat-empty,
.csat-lunar-cell.csat-empty{
  display:block !important;
  visibility:hidden !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

.csat-lunar-loading, .csat-lunar-error{ padding: 12px; opacity:.9; }

/* Phase 2A: richer day detail panel */
.csat-lunar-cell.csat-selected{
  outline: 2px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.22);
}

.csat-lunar-detail-header{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 6px;
}

.csat-lunar-detail-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  font-size: 18px;
}

.csat-lunar-detail-titlewrap{ flex:1; }
.csat-lunar-detail-date{ font-weight: 900; }
.csat-lunar-detail-phase{ opacity: .9; font-weight: 700; }

.csat-lunar-detail-blurb{ margin-top: 6px; opacity: .95; }

/* Phase 2B: personalization callout */
.csat-lunar-personal{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 10px 10px;
}

.csat-lunar-personal-tag{
  font-weight: 900;
  opacity: .95;
  margin-bottom: 6px;
}

.csat-lunar-personal-text{ opacity: .95; }

.csat-lunar-sections{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 740px){
  .csat-lunar-sections{ grid-template-columns: 1fr; }
}

.csat-lunar-section{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 10px 10px;
}

.csat-lunar-section-title{
  font-weight: 900;
  margin-bottom: 8px;
  opacity: .95;
}

.csat-lunar-pills{ display:flex; flex-wrap:wrap; gap: 6px; }

.csat-lunar-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-weight: 700;
  font-size: .9em;
  opacity: .98;
}


/* Phase 2C: Premium + CTA */
.csat-lunar-cta{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}
.csat-lunar-cta-title{
  font-weight: 700;
  margin-bottom: 6px;
}
.csat-lunar-cta-text{
  opacity: 0.9;
  margin-bottom: 10px;
}
.csat-lunar-cta-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.csat-lunar-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
}
.csat-lunar-cta-btn:hover{ filter: brightness(1.05); }
.csat-lunar-cta-btn--vip{
  background: rgba(255,255,255,0.24);
}

.csat-lunar-premium{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
}
.csat-lunar-premium-title{
  font-weight: 800;
  margin-bottom: 8px;
}
.csat-lunar-premium-note{
  opacity: 0.9;
  margin-bottom: 10px;
}
.csat-lunar-premium-cols{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 860px){
  .csat-lunar-premium-cols{ grid-template-columns: 1fr 1fr; }
}
.csat-lunar-premium-coltitle{
  font-weight: 700;
  margin-bottom: 6px;
}
.csat-lunar-premium-list{
  margin: 0;
  padding-left: 18px;
}
.csat-lunar-premium-list li{
  margin: 4px 0;
}

/* Back-compat pills rendered by lunar-calendar.js */
.csat-phase-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(211, 175, 55, 0.55);
  border-radius: 999px;
  background: rgba(0,0,0,0.10);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.csat-phase-ico{ font-size: 14px; line-height: 1; }
.csat-phase-txt{ white-space: nowrap; }