/* ════════════════════════════════════════════════════════════════════════════════
   FROGGY PIXEL — CALENDARIO PREMIUM v3.1
   Design System: Landing + Settings (Space Grotesk + Inter, purple→blue, glassmorphism)
   
   v3.1 CHANGES:
     - Fixed overly broad [style*="0f172a"] selectors that broke platform circles
     - Platform circles now use explicit light-theme classes
     - Removed preview card styles (feature removed)
     - Better distinction between connected/unconnected/selected states
   ════════════════════════════════════════════════════════════════════════════════ */


/* ═══ TOKENS ═══ */
:root {
  --cal-p: #7c3aed;
  --cal-pd: #6d28d9;
  --cal-pl: #8b5cf6;
  --cal-p100: #ede9fe;
  --cal-p50: #f5f3ff;
  --cal-s: #3b82f6;
  --cal-a: #10b981;
  --cal-danger: #ef4444;
  --cal-warn: #f59e0b;
  --cal-n800: #1e293b; --cal-n700: #334155; --cal-n600: #475569;
  --cal-n500: #64748b; --cal-n400: #94a3b8; --cal-n300: #cbd5e1;
  --cal-n200: #e2e8f0; --cal-n100: #f1f5f9; --cal-n50: #f8fafc;
  --cal-w: #ffffff;
  --cal-fd: 'Space Grotesk', system-ui, sans-serif;
  --cal-fb: 'Inter', system-ui, sans-serif;
  --cal-r-sm: 8px; --cal-r-md: 12px; --cal-r-lg: 16px;
  --cal-r-xl: 20px; --cal-r-2xl: 24px; --cal-r-full: 9999px;
  --cal-sh-sm: 0 2px 6px rgba(0,0,0,.06);
  --cal-sh-md: 0 4px 14px rgba(0,0,0,.08);
  --cal-sh-lg: 0 8px 28px rgba(0,0,0,.1);
  --cal-sh-glow: 0 0 36px rgba(124,58,237,.1);
  --cal-ease: 300ms ease-out;
  --cal-spring: 500ms cubic-bezier(.34,1.56,.64,1);
  --cal-glass: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.75));
  --cal-glass-b: 1.5px solid rgba(124,58,237,.1);
  --cal-blur: blur(28px);
  /* Grid lines */
  --cal-grid: rgba(124,58,237,.1);
  --cal-grid-strong: rgba(124,58,237,.15);
}


/* ═══ KEYFRAMES ═══ */
@keyframes calFadeUp    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes calFadeIn    { from{opacity:0} to{opacity:1} }
@keyframes calSlideDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes calScaleIn   { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
@keyframes calCardIn    { from{opacity:0;transform:translateY(16px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes calFloat     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes calPulseRing { 0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.12)} 50%{box-shadow:0 0 0 10px rgba(124,58,237,0)} }
@keyframes calGradFlow  { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes calBadgePop  { from{opacity:0;transform:translateY(-6px) scale(.9)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes calSpin      { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes fbPulseGlow  { 0%,100%{box-shadow:0 0 0 0 rgba(24,119,242,.18)} 50%{box-shadow:0 0 0 12px rgba(24,119,242,0)} }
@keyframes fbShimmer    { 0%{background-position:-200% 0} 100%{background-position:200% 0} }


/* ════════════════════════════════════════════════════════════════════════════
   PAGE BADGE + HEADER
   ════════════════════════════════════════════════════════════════════════════ */

.calendar-page-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(59,130,246,.06));
  border: 1.5px solid rgba(124,58,237,.2);
  border-radius: var(--cal-r-full);
  padding: .4rem 1rem;
  font-family: var(--cal-fd);
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cal-p);
  margin-bottom: .75rem;
  backdrop-filter: blur(8px);
  animation: calBadgePop .5s ease-out .1s both;
}

.calendar-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.75rem;
  padding-bottom: 1.1rem;
  border-bottom: 1.5px solid rgba(124,58,237,.07);
  animation: calSlideDown .6s ease-out;
}

.calendar-header-left {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.calendar-header-right {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.calendar-page-title {
  font-family: var(--cal-fd);
  font-size: clamp(1.35rem,3vw,1.8rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.2;
  margin: 0;
  background: linear-gradient(135deg, #1e1b4b, #312e81 50%, #1e3a8a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.calendar-page-subtitle {
  font-family: var(--cal-fb);
  font-size: .88rem;
  color: var(--cal-n500);
  margin: 0;
  font-weight: 400;
}


/* ════════════════════════════════════════════════════════════════════════════
   CONNECTED ACCOUNTS WIDGET
   ════════════════════════════════════════════════════════════════════════════ */

.connected-accounts-widget {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background: var(--cal-glass);
  backdrop-filter: var(--cal-blur);
  border: var(--cal-glass-b);
  border-radius: var(--cal-r-xl);
  box-shadow: var(--cal-sh-sm), var(--cal-sh-glow);
  animation: calCardIn .5s ease-out .05s both;
}

.connected-accounts-circles { display:flex; align-items:center; }

.connected-circle {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 16px;
  border: 3px solid var(--cal-w);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: all var(--cal-spring);
}
.connected-circle:hover { transform:scale(1.15) translateY(-2px); z-index:20!important; box-shadow:0 6px 18px rgba(124,58,237,.2); }
.connected-circle-more { background:var(--cal-n400); font-size:11px; font-weight:700; }
.no-connections-text { color:var(--cal-n400); font-size:.84rem; font-style:italic; }

.connections-open-btn {
  background: linear-gradient(135deg, var(--cal-p), var(--cal-s)) !important;
  border: none !important; color: white !important;
  padding: .6rem 1.3rem !important; border-radius: var(--cal-r-lg) !important;
  font-family: var(--cal-fb) !important; font-weight: 700 !important;
  font-size: .84rem !important; cursor: pointer;
  transition: all var(--cal-spring) !important;
  box-shadow: 0 6px 20px rgba(124,58,237,.28) !important;
  position: relative !important; overflow: hidden !important;
}
.connections-open-btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transition:left .5s ease; }
.connections-open-btn:hover { transform:translateY(-2px)!important; box-shadow:0 10px 30px rgba(124,58,237,.35)!important; }
.connections-open-btn:hover::before { left:100%; }


/* ════════════════════════════════════════════════════════════════════════════
   CONTROLS BAR
   ════════════════════════════════════════════════════════════════════════════ */

.calendar-controls-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .85rem 1.25rem; margin-bottom: 1rem;
  background: var(--cal-glass);
  backdrop-filter: var(--cal-blur);
  border: var(--cal-glass-b);
  border-radius: var(--cal-r-xl);
  box-shadow: var(--cal-sh-sm), var(--cal-sh-glow);
  animation: calCardIn .5s ease-out .1s both;
}

.calendar-navigation { display:flex; align-items:center; gap:.75rem; }

.calendar-nav-btn {
  width: 38px; height: 38px;
  border-radius: var(--cal-r-md) !important;
  border: 1.5px solid rgba(124,58,237,.12) !important;
  background: var(--cal-w) !important;
  color: var(--cal-n600) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all var(--cal-spring) !important;
  box-shadow: var(--cal-sh-sm) !important;
}
.calendar-nav-btn:hover { border-color:rgba(124,58,237,.3)!important; color:var(--cal-p)!important; transform:translateY(-2px)!important; box-shadow:0 4px 14px rgba(124,58,237,.12)!important; }

.calendar-period-label {
  font-family: var(--cal-fd); font-size: 1.05rem; font-weight: 800;
  color: var(--cal-n800); min-width: 200px; text-align: center;
  text-transform: capitalize; letter-spacing: -.01em;
}

.calendar-today-btn {
  padding: .5rem 1.1rem !important;
  border-radius: var(--cal-r-lg) !important;
  border: 1.5px solid rgba(124,58,237,.2) !important;
  background: rgba(124,58,237,.05) !important;
  color: var(--cal-p) !important;
  font-family: var(--cal-fb) !important;
  font-weight: 700 !important; font-size: .82rem !important;
  transition: all var(--cal-ease) !important; margin-left: .5rem;
}
.calendar-today-btn:hover { background:linear-gradient(135deg,var(--cal-p),var(--cal-s))!important; color:white!important; border-color:transparent!important; transform:translateY(-2px)!important; box-shadow:0 4px 14px rgba(124,58,237,.25)!important; }

.calendar-view-toggle {
  display: flex; background: var(--cal-w);
  border-radius: var(--cal-r-xl); padding: 3px;
  box-shadow: inset 0 1px 3px rgba(124,58,237,.04);
  border: 1.5px solid rgba(124,58,237,.08);
}

.calendar-view-btn {
  padding: .5rem 1.1rem !important;
  border-radius: var(--cal-r-lg) !important;
  border: none !important;
  font-family: var(--cal-fb) !important;
  font-size: .82rem !important; font-weight: 600 !important;
  color: var(--cal-n400) !important;
  background: transparent !important;
  transition: all var(--cal-spring) !important;
}
.calendar-view-btn:hover { color:var(--cal-n700)!important; background:rgba(124,58,237,.04)!important; }
.calendar-view-btn.active { background:linear-gradient(135deg,var(--cal-p),var(--cal-s))!important; color:white!important; box-shadow:0 4px 14px rgba(124,58,237,.3)!important; }


/* ════════════════════════════════════════════════════════════════════════════
   TIP
   ════════════════════════════════════════════════════════════════════════════ */

.calendar-tip {
  display: flex; align-items: center; justify-content: center;
  padding: .7rem 1.25rem; margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(59,130,246,.04));
  border: 1px solid rgba(124,58,237,.12);
  border-radius: var(--cal-r-lg);
  color: var(--cal-p); font-family: var(--cal-fb);
  font-weight: 500; font-size: .82rem;
  animation: calFadeIn .5s ease-out .2s both;
}


/* ════════════════════════════════════════════════════════════════════════════
   CALENDAR CONTAINER
   ════════════════════════════════════════════════════════════════════════════ */

.calendar-container {
  background: var(--cal-w);
  border: 1.5px solid var(--cal-grid-strong);
  border-radius: var(--cal-r-2xl);
  box-shadow: var(--cal-sh-lg), var(--cal-sh-glow);
  overflow: hidden;
  min-height: 600px;
  animation: calCardIn .55s ease-out .3s both;
  position: relative;
}

.calendar-container::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cal-p), var(--cal-s), var(--cal-a));
  border-radius: var(--cal-r-2xl) var(--cal-r-2xl) 0 0;
  z-index: 1;
}


/* ════════════════════════════════════════════════════════════════════════════
   WEEK VIEW — HIGH CONTRAST GRID
   ════════════════════════════════════════════════════════════════════════════ */

.calendar-week-grid {
  display: grid;
  grid-template-columns: 65px repeat(7, 1fr);
  gap: 0;
}

.calendar-week-header {
  background: linear-gradient(135deg, var(--cal-p50), rgba(124,58,237,.06));
  color: var(--cal-n700);
  padding: .9rem .65rem;
  text-align: center;
  border-right: 1px solid var(--cal-grid);
  border-bottom: 2px solid var(--cal-grid-strong);
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
}
.calendar-week-header:last-child { border-right:none; }

.calendar-time-header {
  font-family: var(--cal-fd); font-weight: 700; font-size: .65rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--cal-n400);
}

.calendar-day-name {
  font-family: var(--cal-fd); font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--cal-n600);
}

.calendar-day-number {
  font-family: var(--cal-fd); font-size: 1.15rem; font-weight: 800;
  color: var(--cal-n800);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: all var(--cal-ease);
}

.calendar-today-header {
  background: linear-gradient(135deg, rgba(16,185,129,.1), rgba(16,185,129,.05)) !important;
  border-bottom-color: rgba(16,185,129,.25) !important;
}

.calendar-today-number {
  background: linear-gradient(135deg, var(--cal-p), var(--cal-s));
  color: white;
  box-shadow: 0 3px 10px rgba(124,58,237,.25);
}

/* Time column */
.calendar-time-slot {
  grid-column: 1;
  background: var(--cal-n50);
  padding: .55rem .35rem;
  text-align: center;
  font-family: var(--cal-fd);
  font-size: .62rem; font-weight: 600;
  color: var(--cal-n500);
  border-right: 2px solid var(--cal-grid-strong);
  border-bottom: 1px solid var(--cal-grid);
}

/* Week cells */
.calendar-week-cell {
  min-height: 68px;
  padding: .35rem;
  border-right: 1px solid var(--cal-grid);
  border-bottom: 1px solid var(--cal-grid);
  background: var(--cal-w);
  transition: all .2s ease;
  position: relative;
}
.calendar-week-cell:nth-child(8n+1) { border-right:none; }
.calendar-week-cell:hover { background:rgba(124,58,237,.03); }

.calendar-today-cell {
  background: rgba(124,58,237,.035) !important;
}
.calendar-today-cell:hover {
  background: rgba(124,58,237,.06) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   MONTH VIEW — HIGH CONTRAST GRID
   ════════════════════════════════════════════════════════════════════════════ */

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}

.calendar-month-header {
  background: linear-gradient(135deg, var(--cal-p50), rgba(124,58,237,.06));
  color: var(--cal-n600);
  padding: .85rem .65rem;
  text-align: center;
  font-family: var(--cal-fd); font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  border-right: 1px solid var(--cal-grid);
  border-bottom: 2px solid var(--cal-grid-strong);
}
.calendar-month-header:last-child { border-right:none; }

.calendar-month-cell {
  min-height: 110px; padding: .7rem;
  border-right: 1px solid var(--cal-grid);
  border-bottom: 1px solid var(--cal-grid);
  background: var(--cal-w);
  transition: all .2s ease;
  position: relative; overflow: hidden;
}
.calendar-month-cell:nth-child(7n) { border-right:none; }
.calendar-month-cell:hover { background:rgba(124,58,237,.025); }

.calendar-other-month { background:var(--cal-n50); opacity:.45; }
.calendar-other-month:hover { opacity:.65; }

.calendar-month-day-number {
  font-family: var(--cal-fd); font-size: .82rem; font-weight: 700;
  color: var(--cal-n700); margin-bottom: .45rem;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: all var(--cal-ease);
}
.calendar-month-cell.calendar-today-cell .calendar-month-day-number {
  background: linear-gradient(135deg, var(--cal-p), var(--cal-s));
  color: white; box-shadow: 0 2px 8px rgba(124,58,237,.25);
}

.calendar-month-events {
  display: flex; flex-direction: column; gap: 3px;
  overflow: hidden; max-width: 100%;
}


/* ════════════════════════════════════════════════════════════════════════════
   EVENTS & POST CARDS — LIGHT PREMIUM THEME
   ════════════════════════════════════════════════════════════════════════════ */

.calendar-event-item {
  padding: .4rem .55rem; border-radius: var(--cal-r-sm);
  color: white; font-family: var(--cal-fb);
  font-size: .68rem; font-weight: 600;
  cursor: grab; transition: all .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  user-select: none; display: flex; align-items: center;
  gap: .35rem; overflow: hidden;
}
.calendar-event-item:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(124,58,237,.15); }
.calendar-event-item:active { cursor:grabbing; transform:scale(.98); }
.calendar-event-item.dragging { opacity:.5; transform:scale(.95); }
.calendar-event-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.calendar-event-time { font-size:.6rem; opacity:.9; flex-shrink:0; }
.calendar-event-month { padding:.3rem .45rem; font-size:.62rem; }

/* ── WEEK VIEW post cards — override dark inline styles ── */
.calendar-event-item.post-card-item:not(.calendar-event-month) {
  background: var(--cal-w) !important;
  border: 1.5px solid var(--cal-n200) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(124,58,237,.04) !important;
  color: var(--cal-n700) !important;
  border-radius: var(--cal-r-sm) !important;
  padding: 5px !important;
}

/* Remove the left color bar in light theme */
.calendar-event-item.post-card-item:not(.calendar-event-month) > div:first-child[style*="width: 3px"] {
  display: none !important;
}

/* Content area */
.calendar-event-item.post-card-item:not(.calendar-event-month) > div:last-child {
  padding: 4px 5px !important;
}
.calendar-event-item.post-card-item:not(.calendar-event-month):hover {
  background: var(--cal-n50) !important;
  border-color: rgba(124,58,237,.22) !important;
  box-shadow: 0 4px 16px rgba(124,58,237,.12), 0 0 0 1px rgba(124,58,237,.08) !important;
  transform: translateY(-2px) !important;
}

/* Status badge text */
.post-card-item [style*="borderRadius: 20px"],
.post-card-item [style*="border-radius: 20px"] {
  font-size: 9px !important;
}

/* Content text in card */
.post-card-item p[style*="text-secondary"],
.post-card-item p[style*="94a3b8"] {
  color: var(--cal-n500) !important;
}

/* ── MONTH VIEW post cards ── */
.calendar-event-month.post-card-item {
  background: var(--cal-w) !important;
  border: 1.5px solid var(--cal-n200) !important;
  border-left: 3px solid var(--cal-p) !important;
  border-radius: var(--cal-r-sm) !important;
  padding: .3rem .5rem !important;
  color: var(--cal-n700) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
  transition: all .2s ease !important;
  max-width: 100% !important; overflow: hidden !important;
}
.calendar-event-month.post-card-item:hover {
  border-color: rgba(124,58,237,.2) !important;
  box-shadow: 0 3px 10px rgba(124,58,237,.1) !important;
  transform: translateY(-1px) !important;
}
.calendar-event-month.post-card-item .calendar-event-title {
  color: var(--cal-n600) !important; font-size: .6rem !important;
  font-weight: 600 !important;
}

/* Visual-only post cards (overflow preview) */
.post-card-item:not([id]) {
  border-radius: var(--cal-r-sm) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════════════════ */

.calendar-btn-primary {
  background: linear-gradient(135deg, var(--cal-p), var(--cal-s)) !important;
  border: none !important; color: white !important;
  padding: .62rem 1.3rem !important; border-radius: var(--cal-r-lg) !important;
  font-family: var(--cal-fb) !important; font-weight: 700 !important;
  font-size: .84rem !important; cursor: pointer;
  transition: all var(--cal-spring) !important;
  box-shadow: 0 6px 20px rgba(124,58,237,.28) !important;
  display: flex; align-items: center; gap: .5rem;
  position: relative !important; overflow: hidden !important;
}
.calendar-btn-primary::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transition:left .5s ease; }
.calendar-btn-primary:hover { transform:translateY(-2px)!important; box-shadow:0 10px 30px rgba(124,58,237,.35)!important; }
.calendar-btn-primary:hover::before { left:100%; }

.calendar-btn-secondary {
  background: rgba(124,58,237,.05) !important;
  border: 1.5px solid rgba(124,58,237,.18) !important;
  color: var(--cal-p) !important;
  padding: .55rem 1.15rem !important; border-radius: var(--cal-r-lg) !important;
  font-family: var(--cal-fb) !important; font-weight: 600 !important;
  font-size: .84rem !important; cursor: pointer;
  transition: all var(--cal-ease) !important;
}
.calendar-btn-secondary:hover { background:rgba(124,58,237,.1)!important; border-color:var(--cal-pl)!important; transform:translateY(-2px)!important; box-shadow:0 6px 18px rgba(124,58,237,.12)!important; }


/* ════════════════════════════════════════════════════════════════════════════
   MODALS — Premium glassmorphism (light)
   ════════════════════════════════════════════════════════════════════════════ */

.calendar-modal .modal-content {
  border: 1.5px solid rgba(124,58,237,.12) !important;
  border-radius: var(--cal-r-2xl) !important;
  box-shadow: 0 32px 80px rgba(124,58,237,.16) !important;
  overflow: hidden !important;
  animation: calScaleIn .3s ease-out !important;
  background: var(--cal-w) !important;
}

.calendar-modal-header {
  background: linear-gradient(135deg, rgba(124,58,237,.04), rgba(59,130,246,.03)) !important;
  color: var(--cal-n800) !important;
  padding: 1.1rem 1.3rem !important;
  border-bottom: 1px solid rgba(124,58,237,.07) !important;
  display: flex; justify-content: space-between; align-items: center;
}

.calendar-modal-title-wrapper { display:flex; align-items:center; }
.calendar-modal-title-wrapper h4 {
  font-family: var(--cal-fd); font-size: .98rem; font-weight: 700;
  color: var(--cal-n800); margin: 0;
}

.calendar-modal-close-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(124,58,237,.12) !important;
  background: rgba(124,58,237,.04) !important;
  color: var(--cal-n500) !important;
  cursor: pointer; transition: all var(--cal-ease);
  display: flex; align-items: center; justify-content: center;
}
.calendar-modal-close-btn:hover { background:rgba(124,58,237,.1)!important; border-color:rgba(124,58,237,.25)!important; color:var(--cal-p)!important; transform:rotate(90deg); }

.calendar-modal-body { padding: 1.5rem 1.3rem !important; background: var(--cal-w); }

.calendar-modal-footer {
  padding: .85rem 1.3rem !important;
  border-top: 1px solid rgba(124,58,237,.06) !important;
  background: rgba(248,250,252,.5) !important;
  gap: .65rem !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ════════════════════════════════════════════════════════════════════════════ */

.calendar-form-group { margin-bottom: 1.25rem; }
.calendar-form-row { margin-bottom: 1.25rem; }

.calendar-form-label {
  display: block; font-family: var(--cal-fd);
  font-size: .7rem; font-weight: 700; color: var(--cal-n500);
  margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .06em;
}

.calendar-form-input {
  width: 100%; padding: .7rem .95rem !important;
  border: 1.5px solid rgba(124,58,237,.1) !important;
  border-radius: var(--cal-r-md) !important;
  font-family: var(--cal-fb) !important; font-size: .88rem !important;
  transition: all var(--cal-ease) !important;
  background: var(--cal-w) !important; color: var(--cal-n800) !important;
}
.calendar-form-input:focus { border-color:var(--cal-p)!important; box-shadow:0 0 0 3px rgba(124,58,237,.08)!important; outline:none!important; }

.calendar-color-picker { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.5rem; }
.calendar-color-option {
  width: 40px; height: 40px; border-radius: var(--cal-r-md);
  border: 3px solid transparent; cursor: pointer;
  transition: all var(--cal-spring); box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.calendar-color-option:hover { transform:scale(1.15) translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.15); }
.calendar-color-option:focus,
.calendar-color-option.selected { border-color:var(--cal-n800); transform:scale(1.15); }


/* ════════════════════════════════════════════════════════════════════════════
   CONNECTIONS MODAL
   ════════════════════════════════════════════════════════════════════════════ */

.connections-modal .modal-content {
  border: 1.5px solid rgba(124,58,237,.12) !important;
  border-radius: var(--cal-r-2xl) !important;
  box-shadow: 0 32px 80px rgba(124,58,237,.16) !important;
  background: var(--cal-w) !important;
}

.connections-modal-header {
  background: linear-gradient(135deg, rgba(124,58,237,.04), rgba(59,130,246,.03)) !important;
  color: var(--cal-n800) !important;
  padding: 1.1rem 1.3rem !important;
  border-bottom: 1px solid rgba(124,58,237,.07) !important;
}
.connections-modal-title-wrapper { display:flex; align-items:center; }
.connections-modal-title-wrapper h4 { font-family:var(--cal-fd); font-size:.98rem; font-weight:700; margin:0; color:var(--cal-n800); }
.connections-modal-body { padding: 1.5rem 1.3rem !important; background: var(--cal-w); }
.connections-modal-description { color:var(--cal-n500); font-family:var(--cal-fb); font-size:.86rem; margin-bottom:1.5rem; text-align:center; }
.connections-modal-footer { padding:.85rem 1.3rem!important; border-top:1px solid rgba(124,58,237,.06)!important; background:rgba(248,250,252,.5)!important; justify-content:center; }
.connections-list { display:flex; flex-direction:column; gap:.75rem; }

.connections-network-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.15rem; background: var(--cal-w);
  border: 1.5px solid rgba(124,58,237,.08); border-radius: var(--cal-r-lg);
  transition: all var(--cal-spring);
}
.connections-network-item:hover { border-color:rgba(124,58,237,.2); box-shadow:0 4px 16px rgba(124,58,237,.08); transform:translateY(-2px); }
.connections-network-left { display:flex; align-items:center; gap:1rem; }
.connections-network-icon { width:44px; height:44px; border-radius:var(--cal-r-md); display:flex; align-items:center; justify-content:center; color:white; font-size:20px; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.connections-network-info { display:flex; flex-direction:column; gap:.15rem; }
.connections-network-name { font-family:var(--cal-fd); font-size:.92rem; font-weight:700; color:var(--cal-n800); }
.connections-network-status { font-family:var(--cal-fb); font-size:.78rem; color:var(--cal-n400); }
.connections-network-status.connected { color:var(--cal-a); font-weight:600; }
.connections-account-name { font-family:var(--cal-fd); font-size:.92rem; font-weight:700; color:var(--cal-n800); display:block; }

.connections-btn {
  padding: .55rem 1.25rem !important; border-radius: var(--cal-r-lg) !important;
  font-family: var(--cal-fb) !important; font-weight: 600 !important;
  font-size: .82rem !important; transition: all var(--cal-spring) !important;
  border: 1.5px solid var(--cal-p) !important;
  background: transparent !important; color: var(--cal-p) !important;
}
.connections-btn:hover { background:linear-gradient(135deg,var(--cal-p),var(--cal-s))!important; color:white!important; border-color:transparent!important; transform:translateY(-2px)!important; box-shadow:0 6px 18px rgba(124,58,237,.25)!important; }
.connections-btn.connected { border-color:var(--cal-danger)!important; color:var(--cal-danger)!important; background:transparent!important; }
.connections-btn.connected:hover { background:var(--cal-danger)!important; color:white!important; border-color:transparent!important; box-shadow:0 6px 18px rgba(239,68,68,.25)!important; }


/* ════════════════════════════════════════════════════════════════════════════
   POST DETAIL MODAL — Force light theme
   
   v3.1 FIX: Selectors now target div/textarea/input specifically,
   NOT buttons — this was causing platform circle backgrounds to be
   overridden to white, making white icons invisible.
   ════════════════════════════════════════════════════════════════════════════ */

/* Textarea + inputs */
.post-detail-modal .calendar-modal-body textarea,
.post-detail-modal .calendar-modal-body input[type="date"],
.post-detail-modal .calendar-modal-body input[type="time"],
.post-detail-modal .calendar-modal-body .form-control {
  background-color: var(--cal-w) !important;
  background: var(--cal-w) !important;
  border: 1.5px solid rgba(124,58,237,.1) !important;
  border-radius: var(--cal-r-md) !important;
  color: var(--cal-n800) !important;
  font-family: var(--cal-fb) !important; font-size: .88rem !important;
  padding: .75rem .95rem !important;
  transition: all var(--cal-ease) !important;
}
.post-detail-modal .calendar-modal-body textarea:focus,
.post-detail-modal .calendar-modal-body input:focus {
  border-color: var(--cal-p) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.08) !important; outline: none !important;
}

/* Disabled — visible but locked */
.post-detail-modal .calendar-modal-body textarea:disabled,
.post-detail-modal .calendar-modal-body input:disabled,
.post-detail-modal .calendar-modal-body .form-control:disabled {
  background-color: var(--cal-n50) !important;
  background: var(--cal-n50) !important;
  color: var(--cal-n700) !important;
  opacity: 1 !important;
  border: 1.5px solid rgba(124,58,237,.06) !important;
  -webkit-text-fill-color: var(--cal-n700) !important;
}

/* ── Dark-bg overrides — ONLY divs, NOT buttons ── */
.post-detail-modal .calendar-modal-body div[style*="surface-2"],
.post-detail-modal .calendar-modal-body div[style*="1e293b"],
.post-detail-modal .calendar-modal-body div[style*="0f172a"],
.post-detail-modal .calendar-modal-body div[style*="151f2e"],
.post-detail-modal .calendar-modal-body div[style*="1e2a3a"] {
  background: var(--cal-w) !important;
  background-color: var(--cal-w) !important;
  border-color: rgba(124,58,237,.08) !important;
}

/* Text → dark */
.post-detail-modal .calendar-modal-body div[style*="e2e8f0"],
.post-detail-modal .calendar-modal-body span[style*="e2e8f0"],
.post-detail-modal .calendar-modal-body [style*="text-primary"] { color: var(--cal-n800) !important; }
.post-detail-modal .calendar-modal-body div[style*="94a3b8"],
.post-detail-modal .calendar-modal-body span[style*="94a3b8"],
.post-detail-modal .calendar-modal-body [style*="text-secondary"] { color: var(--cal-n500) !important; }
.post-detail-modal .calendar-modal-body div[style*="64748b"],
.post-detail-modal .calendar-modal-body span[style*="64748b"],
.post-detail-modal .calendar-modal-body [style*="text-muted"] { color: var(--cal-n500) !important; }

/* Labels */
.post-detail-modal .calendar-modal-body label {
  color: var(--cal-n500) !important;
  font-family: var(--cal-fd) !important; font-size: .68rem !important;
  font-weight: 700 !important; letter-spacing: .06em !important;
}
.post-detail-modal .calendar-modal-body label i { color: var(--cal-p) !important; opacity: .7; }

/* Not-editable banner */
.post-detail-modal .calendar-modal-body div[style*="rgba(245, 158, 11"] {
  background-color: rgba(245,158,11,.06) !important;
  border: 1.5px solid rgba(245,158,11,.15) !important;
  border-left: 3px solid #f59e0b !important;
  border-radius: var(--cal-r-md) !important;
}

/* Quick-time buttons */
.post-detail-modal .calendar-modal-body button[id*="quick-time"] {
  background: rgba(124,58,237,.04) !important;
  border: 1px solid rgba(124,58,237,.1) !important;
  color: var(--cal-n600) !important; border-radius: var(--cal-r-sm) !important;
}
.post-detail-modal .calendar-modal-body button[id*="quick-time"]:hover {
  background: rgba(124,58,237,.1) !important; border-color: rgba(124,58,237,.25) !important;
  color: var(--cal-p) !important; transform: translateY(-1px) !important;
}

/* ── Platform circle labels ── */
.post-detail-modal .calendar-modal-body span[id*="edit-platform-label"] {
  color: var(--cal-n600) !important; font-weight: 600 !important;
}

/* Character count */
.post-detail-modal #edit-char-count {
  color: var(--cal-pl) !important; font-weight: 600 !important;
}

/* Footer */
.post-detail-modal .calendar-modal-footer {
  background: rgba(248,250,252,.5) !important;
  border-top: 1px solid rgba(124,58,237,.06) !important;
}

/* Engagement icons */
.post-detail-modal .calendar-modal-body .far { color: var(--cal-n400); }

/* Fix: date/time icon overlap */
.post-detail-modal .calendar-modal-body input[type="date"],
.post-detail-modal .calendar-modal-body input[type="time"] {
  padding-left: 42px !important;
}

/* ── Platform icon position indicator inside date/time ── */
.post-detail-modal .calendar-modal-body div[style*="pointerEvents: none"] i {
  color: var(--cal-p) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM BLOCKER MODAL
   ════════════════════════════════════════════════════════════════════════════ */

.calendar_modal-container .modal-content {
  border: 1.5px solid rgba(124,58,237,.15) !important;
  border-radius: var(--cal-r-2xl) !important;
  box-shadow: 0 32px 80px rgba(124,58,237,.2) !important;
  max-width: 480px; margin: 0 auto;
  animation: calScaleIn .3s ease-out;
}
.calendar_modal-container .modal-dialog { max-width: 480px; }
.calendar_modal-body {
  background: linear-gradient(135deg, var(--cal-w), var(--cal-n50));
  padding: 2rem; padding-top: 2.5rem; text-align: center;
  position: relative; border-radius: var(--cal-r-2xl);
}
.calendar_modal-close-btn {
  position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(124,58,237,.04);
  border: 1.5px solid rgba(124,58,237,.1); display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  transition: all var(--cal-ease); text-decoration: none;
  color: var(--cal-n500); z-index: 10;
}
.calendar_modal-close-btn:hover { background:rgba(124,58,237,.1); border-color:rgba(124,58,237,.25); color:var(--cal-p); transform:rotate(90deg); }
.calendar_modal-icon-wrapper {
  width: 90px; height: 90px; margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(59,130,246,.07));
  border: 1.5px solid rgba(124,58,237,.15); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: calPulseRing 2.5s ease-in-out infinite;
}
.calendar_modal-icon-wrapper i {
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--cal-p), var(--cal-s));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.calendar_modal-title { font-family:var(--cal-fd); font-size:1.35rem; font-weight:800; color:var(--cal-n800); margin-bottom:.5rem; letter-spacing:-.02em; }
.calendar_modal-description { font-family:var(--cal-fb); font-size:.9rem; color:var(--cal-n500); margin-bottom:.25rem; line-height:1.6; }
.calendar_modal-subdescription { font-family:var(--cal-fb); font-size:.82rem; color:var(--cal-n400); margin-bottom:1.25rem; line-height:1.5; }
.calendar_modal-benefits-list {
  background: linear-gradient(135deg, rgba(124,58,237,.03), rgba(59,130,246,.02));
  border: 1px solid rgba(124,58,237,.08); border-radius: var(--cal-r-lg);
  padding: 1rem; margin-bottom: 1.25rem; text-align: left;
}
.calendar_modal-benefit-item { display:flex; align-items:center; padding:.55rem 0; font-family:var(--cal-fb); font-size:.84rem; color:var(--cal-n700); }
.calendar_modal-benefit-item:not(:last-child) { border-bottom:1px solid rgba(124,58,237,.06); }
.calendar_modal-benefit-item i { color:var(--cal-a); margin-right:.65rem; font-size:1rem; flex-shrink:0; }
.calendar_modal-buttons { display:flex; flex-direction:column; gap:.65rem; }
.calendar_modal-btn-upgrade {
  background: linear-gradient(135deg, var(--cal-p), var(--cal-s)) !important;
  border: none !important; padding: .75rem 1.5rem;
  font-family: var(--cal-fb); font-size: .92rem; font-weight: 700;
  border-radius: var(--cal-r-lg); color: white;
  transition: all var(--cal-spring); box-shadow: 0 6px 22px rgba(124,58,237,.3);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; text-decoration: none; position: relative; overflow: hidden;
}
.calendar_modal-btn-upgrade::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transition:left .5s ease; }
.calendar_modal-btn-upgrade:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(124,58,237,.4); color:white; }
.calendar_modal-btn-upgrade:hover::before { left:100%; }
.calendar_modal-blurred-content { filter:blur(4px); pointer-events:none; user-select:none; opacity:.5; }
.calendar_modal-container.show { display:flex!important; align-items:center; justify-content:center; }


/* ════════════════════════════════════════════════════════════════════════════
   PROCESSING SPINNER
   ════════════════════════════════════════════════════════════════════════════ */

.processing-spinner {
  width: 50px; height: 50px;
  border: 3.5px solid rgba(124,58,237,.1);
  border-top: 3.5px solid var(--cal-p);
  border-right: 3.5px solid var(--cal-s);
  border-radius: 50%;
  animation: calSpin .8s linear infinite;
}


/* ════════════════════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════════════════════ */

.calendar-toast {
  border-radius: var(--cal-r-lg) !important;
  box-shadow: var(--cal-sh-lg) !important;
  border: 1.5px solid rgba(124,58,237,.1) !important;
  font-family: var(--cal-fb);
}


/* ════════════════════════════════════════════════════════════════════════════
   DRAG & DROP + SCROLLBAR
   ════════════════════════════════════════════════════════════════════════════ */

.calendar-week-cell.drag-over,
.calendar-month-cell.drag-over {
  background: rgba(124,58,237,.06) !important;
  border: 2px dashed var(--cal-p) !important;
  box-shadow: inset 0 0 20px rgba(124,58,237,.06);
}

.calendar-container::-webkit-scrollbar { height:6px; width:6px; }
.calendar-container::-webkit-scrollbar-track { background:var(--cal-n100); border-radius:3px; }
.calendar-container::-webkit-scrollbar-thumb { background:linear-gradient(135deg,var(--cal-p),var(--cal-s)); border-radius:3px; }
.calendar-container::-webkit-scrollbar-thumb:hover { background:var(--cal-pd); }


/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */

@media(max-width:1200px) {
  .calendar-week-grid { grid-template-columns:55px repeat(7,1fr); }
  .calendar-week-cell { min-height:58px; padding:.3rem; }
  .calendar-event-item { padding:.3rem .45rem; font-size:.62rem; }
}
@media(max-width:992px) {
  .calendar-controls-bar { flex-direction:column; gap:.85rem; }
  .calendar-navigation { width:100%; justify-content:center; }
  .calendar-view-toggle { width:100%; justify-content:center; }
  .calendar-period-label { min-width:auto; }
}
@media(max-width:768px) {
  .calendar-page-header { flex-direction:column; align-items:flex-start; gap:.85rem; }
  .calendar-header-right { width:100%; }
  .calendar-btn-primary { width:100%; justify-content:center; }
  .calendar-page-title { font-size:1.3rem; }
  .calendar-week-grid { grid-template-columns:45px repeat(7,minmax(75px,1fr)); overflow-x:auto; }
  .calendar-month-cell { min-height:85px; padding:.45rem; }
  .calendar-month-day-number { font-size:.72rem; width:22px; height:22px; }
  .calendar-event-month { padding:.2rem .35rem; font-size:.58rem; }
  .calendar-tip { font-size:.75rem; padding:.55rem .85rem; }
  .connected-accounts-widget { flex-direction:column; gap:.85rem; text-align:center; }
  .connected-accounts-circles { justify-content:center; }
  .connections-open-btn { width:100%!important; justify-content:center!important; }
  .connections-network-item { flex-direction:column; gap:.85rem; text-align:center; }
  .connections-network-left { flex-direction:column; }
  .connections-btn { width:100%!important; }
  .calendar_modal-body { padding:1.5rem; padding-top:2rem; }
  .calendar_modal-icon-wrapper { width:72px; height:72px; }
  .calendar_modal-icon-wrapper i { font-size:2rem; }
  .calendar_modal-title { font-size:1.15rem; }
}
@media(max-width:576px) {
  .calendar-container { border-radius:var(--cal-r-xl); }
  .calendar-controls-bar, .connected-accounts-widget { border-radius:var(--cal-r-xl); padding:.75rem .85rem; }
}


/* ════════════════════════════════════════════════════════════════════════════
   A11Y
   ════════════════════════════════════════════════════════════════════════════ */

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
::selection { background:rgba(124,58,237,.2); color:var(--cal-n800); }


/* ════════════════════════════════════════════════════════════════════════════
   FACEBOOK / LINKEDIN PAGE SELECTOR MODALS — Premium v2
   ════════════════════════════════════════════════════════════════════════════ */

/* ── FACEBOOK PREMIUM MODAL ── */



#modal-facebook-pages .modal-content {
  border: 1.5px solid rgba(24,119,242,.15) !important;
  border-radius: var(--cal-r-2xl) !important;
  box-shadow: 0 32px 80px rgba(24,119,242,.12), 0 0 0 1px rgba(24,119,242,.04) !important;
  overflow: hidden !important;
  background: var(--cal-w) !important;
  animation: calScaleIn .35s ease-out !important;
}

#modal-facebook-pages .connections-modal-header {
  background: linear-gradient(135deg, rgba(24,119,242,.06), rgba(24,119,242,.02)) !important;
  border-bottom: 1.5px solid rgba(24,119,242,.08) !important;
  padding: 1.15rem 1.4rem !important;
  border-radius: var(--cal-r-2xl) var(--cal-r-2xl) 0 0 !important;
}

#modal-facebook-pages .connections-modal-header h4 {
  font-family: var(--cal-fd) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--cal-n800) !important;
  letter-spacing: -0.01em !important;
}

#modal-facebook-pages .connections-modal-body {
  padding: 2rem 1.75rem 2.25rem !important;
  border-radius: 0 0 var(--cal-r-2xl) var(--cal-r-2xl) !important;
  background: linear-gradient(180deg, var(--cal-w) 0%, var(--cal-n50) 100%) !important;
}

/* Facebook icon hero area */
.fb-pages-hero-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, rgba(24,119,242,.1), rgba(24,119,242,.04));
  border: 1.5px solid rgba(24,119,242,.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fbPulseGlow 2.5s ease-in-out infinite;
}
.fb-pages-hero-icon i {
  font-size: 2rem;
  color: #1877F2;
}

.fb-pages-title {
  font-family: var(--cal-fd);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--cal-n800);
  text-align: center;
  margin-bottom: .45rem;
  letter-spacing: -0.02em;
}

.fb-pages-description {
  font-family: var(--cal-fb);
  font-size: .86rem;
  color: var(--cal-n500);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.fb-pages-dropdown-wrapper {
  background: var(--cal-w);
  border: 1.5px solid rgba(24,119,242,.1);
  border-radius: var(--cal-r-lg);
  padding: .25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(24,119,242,.06);
  transition: all var(--cal-ease);
}
.fb-pages-dropdown-wrapper:focus-within {
  border-color: #1877F2;
  box-shadow: 0 0 0 3px rgba(24,119,242,.1), 0 4px 16px rgba(24,119,242,.1);
}

.facebook-pages-selector .Select-control,
.facebook-pages-selector .dash-dropdown .Select-control {
  border: none !important;
  border-radius: var(--cal-r-md) !important;
  background: var(--cal-w) !important;
  min-height: 48px !important;
  box-shadow: none !important;
  font-family: var(--cal-fb) !important;
  font-size: .92rem !important;
}

.facebook-pages-selector .Select.is-focused .Select-control {
  border: none !important;
  box-shadow: none !important;
}

.facebook-pages-selector .Select-placeholder {
  color: var(--cal-n400) !important;
  font-size: .88rem !important;
}

.facebook-pages-selector .Select-value-label {
  font-weight: 600 !important;
  color: var(--cal-n800) !important;
  font-size: .92rem !important;
}

.facebook-pages-selector .Select-menu-outer {
  border: 1.5px solid rgba(24,119,242,.12) !important;
  border-radius: var(--cal-r-md) !important;
  box-shadow: 0 12px 40px rgba(24,119,242,.12) !important;
  margin-top: 6px !important;
  overflow: hidden;
}

.facebook-pages-selector .VirtualizedSelectOption {
  font-family: var(--cal-fb) !important;
  font-size: .9rem !important;
  padding: .75rem 1rem !important;
  transition: all var(--cal-ease) !important;
}

.facebook-pages-selector .VirtualizedSelectFocusedOption {
  background: rgba(24,119,242,.06) !important;
  color: #1877F2 !important;
}

.fb-pages-connect-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .6rem !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto !important;
  padding: .85rem 1.75rem !important;
  background: linear-gradient(135deg, #1877F2, #0d65d9) !important;
  border: none !important;
  border-radius: var(--cal-r-lg) !important;
  color: white !important;
  font-family: var(--cal-fb) !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all var(--cal-spring) !important;
  box-shadow: 0 6px 22px rgba(24,119,242,.3) !important;
  position: relative !important;
  overflow: hidden !important;
}
.fb-pages-connect-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .5s ease;
}
.fb-pages-connect-btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(24,119,242,.4) !important;
}
.fb-pages-connect-btn:hover:not(:disabled)::before {
  left: 100%;
}
.fb-pages-connect-btn:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.fb-pages-security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.25rem;
  font-family: var(--cal-fb);
  font-size: .72rem;
  color: var(--cal-n400);
  letter-spacing: 0.02em;
}
.fb-pages-security-badge i {
  font-size: .68rem;
  color: var(--cal-a);
}


/* ── LINKEDIN — inherit from connections-modal ── */

.linkedin-pages-selector .Select-control,
.linkedin-pages-selector .dash-dropdown .Select-control {
  border: 1.5px solid rgba(124,58,237,.12) !important;
  border-radius: var(--cal-r-md) !important;
  background: var(--cal-w) !important;
  min-height: 44px !important;
  box-shadow: var(--cal-sh-sm) !important;
  transition: all var(--cal-ease) !important;
}

.linkedin-pages-selector .Select.is-focused .Select-control {
  border-color: var(--cal-p) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.08) !important;
}

.linkedin-pages-selector .Select-menu-outer {
  border: 1.5px solid rgba(124,58,237,.1) !important;
  border-radius: var(--cal-r-md) !important;
  box-shadow: var(--cal-sh-lg) !important;
  margin-top: 4px !important;
  overflow: hidden;
}

.linkedin-pages-selector .VirtualizedSelectOption {
  font-family: var(--cal-fb) !important;
  font-size: .88rem !important;
  padding: .65rem .95rem !important;
  transition: all var(--cal-ease) !important;
}

.linkedin-pages-selector .VirtualizedSelectFocusedOption {
  background: rgba(124,58,237,.06) !important;
  color: var(--cal-p) !important;
}

.linkedin-pages-selector .calendar-btn-primary {
  max-width: 280px !important;
  margin: 0 auto !important;
  justify-content: center !important;
  border-radius: var(--cal-r-lg) !important;
}

.connections-modal-body .connections-modal-description {
  font-family: var(--cal-fb);
  font-size: .86rem;
  color: var(--cal-n500);
  margin-bottom: 1.5rem;
}

.facebook-pages-selector,
.linkedin-pages-selector {
  padding: .5rem 0 !important;
}

.facebook-pages-selector > div,
.linkedin-pages-selector > div {
  max-width: 100%;
}

.linkedin-pages-selector .w-100 {
  width: auto !important;
  max-width: 280px !important;
  margin: 0 auto !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   LINKEDIN PAGE SELECTOR — Modal size + shape fix
   ════════════════════════════════════════════════════════════════════════════ */

#modal-linkedin-pages .modal-dialog {
  max-width: 480px !important;
  margin: 1.75rem auto !important;
}

#modal-linkedin-pages .modal-content {
  border: 1.5px solid rgba(124,58,237,.12) !important;
  border-radius: var(--cal-r-2xl) !important;
  box-shadow: 0 32px 80px rgba(124,58,237,.16) !important;
  overflow: hidden !important;
  background: var(--cal-w) !important;
}

#modal-linkedin-pages .connections-modal-header {
  border-radius: var(--cal-r-2xl) var(--cal-r-2xl) 0 0 !important;
}

#modal-linkedin-pages .connections-modal-body {
  border-radius: 0 0 var(--cal-r-2xl) var(--cal-r-2xl) !important;
  padding: 1.5rem 1.5rem 2rem !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   FACEBOOK MODAL — NEW CLASS-BASED STYLES (v3.1)
   ════════════════════════════════════════════════════════════════════════════ */

.fbm-modal .modal-content {
  border: 1.5px solid rgba(24,119,242,.15) !important;
  border-radius: var(--cal-r-2xl) !important;
  box-shadow: 0 32px 80px rgba(24,119,242,.12) !important;
  background: var(--cal-w) !important;
  animation: calScaleIn .35s ease-out !important;
  overflow: hidden !important;
}
.fbm-modal .modal-dialog {
  max-width: 500px !important;
}

.fbm-header {
  background: linear-gradient(135deg, rgba(24,119,242,.06), rgba(24,119,242,.02)) !important;
  border-bottom: 1.5px solid rgba(24,119,242,.08) !important;
  padding: 1rem 1.3rem !important;
}
.fbm-header-title {
  font-family: var(--cal-fd) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--cal-n800) !important;
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  margin: 0 !important;
}

.fbm-body {
  padding: 2rem 1.75rem 2.25rem !important;
  background: linear-gradient(180deg, var(--cal-w) 0%, var(--cal-n50) 100%) !important;
  text-align: center !important;
}

.fbm-hero-icon {
  width: 76px; height: 76px;
  margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, rgba(24,119,242,.1), rgba(24,119,242,.04));
  border: 1.5px solid rgba(24,119,242,.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: fbPulseGlow 2.5s ease-in-out infinite;
  font-size: 2rem; color: #1877F2;
}

.fbm-title {
  font-family: var(--cal-fd);
  font-size: 1.2rem; font-weight: 800;
  color: var(--cal-n800);
  margin-bottom: .45rem; letter-spacing: -.02em;
}

.fbm-description {
  font-family: var(--cal-fb);
  font-size: .86rem; color: var(--cal-n500);
  line-height: 1.6; margin-bottom: 1.5rem;
  max-width: 360px; margin-left: auto; margin-right: auto;
}

.fbm-dropdown-wrap {
  background: var(--cal-w);
  border: 1.5px solid rgba(24,119,242,.1);
  border-radius: var(--cal-r-lg);
  padding: .25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(24,119,242,.06);
  transition: all var(--cal-ease);
  text-align: left;
}
.fbm-dropdown-wrap:focus-within {
  border-color: #1877F2;
  box-shadow: 0 0 0 3px rgba(24,119,242,.1), 0 4px 16px rgba(24,119,242,.1);
}

.fbm-connect-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .6rem !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 1rem auto 0 !important;
  padding: .85rem 1.75rem !important;
  background: linear-gradient(135deg, #1877F2, #0d65d9) !important;
  border: none !important;
  border-radius: var(--cal-r-lg) !important;
  color: white !important;
  font-family: var(--cal-fb) !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all var(--cal-spring) !important;
  box-shadow: 0 6px 22px rgba(24,119,242,.3) !important;
  position: relative !important;
  overflow: hidden !important;
}
.fbm-connect-btn::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .5s ease;
}
.fbm-connect-btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(24,119,242,.4) !important;
}
.fbm-connect-btn:hover:not(:disabled)::before { left: 100%; }
.fbm-connect-btn:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.fbm-security {
  display: flex; align-items: center; justify-content: center;
  gap: .4rem; margin-top: 1.25rem;
  font-family: var(--cal-fb); font-size: .72rem;
  color: var(--cal-n400); letter-spacing: .02em;
}
.fbm-security i { font-size: .68rem; color: var(--cal-a); }


/* ════════════════════════════════════════════════════════════════════════════
   CONFIRMATION MODALS — Premium light overrides (v3.1)
   Covers: save, delete, disconnect confirmation modals
   ════════════════════════════════════════════════════════════════════════════ */

.cal-confirm-modal .modal-content {
  border: 1.5px solid rgba(124,58,237,.12) !important;
  border-radius: var(--cal-r-2xl) !important;
  box-shadow: 0 32px 80px rgba(124,58,237,.18), 0 0 60px rgba(124,58,237,.06) !important;
  background: var(--cal-w) !important;
  overflow: hidden !important;
  animation: calScaleIn .25s ease-out !important;
}

.cal-confirm-modal .modal-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cal-p), var(--cal-s), var(--cal-a));
  z-index: 1;
}

.cal-confirm-modal .modal-body {
  padding: 1.75rem 1.5rem !important;
  background: var(--cal-w) !important;
  border-radius: var(--cal-r-2xl) !important;
}

/* Icon circle */
.cal-confirm-modal .modal-body div[style*="borderRadius: 50%"]:first-child {
  box-shadow: 0 4px 20px rgba(124,58,237,.1) !important;
}

/* Title */
.cal-confirm-modal .modal-body h4 {
  color: var(--cal-n800) !important;
  font-family: var(--cal-fd) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Description */
.cal-confirm-modal .modal-body p {
  color: var(--cal-n500) !important;
  font-family: var(--cal-fb) !important;
}

/* Cancel button */
.cal-confirm-modal .modal-body .btn:first-child {
  background: var(--cal-n50) !important;
  border: 1.5px solid rgba(124,58,237,.1) !important;
  color: var(--cal-n500) !important;
}
.cal-confirm-modal .modal-body .btn:first-child:hover {
  background: var(--cal-n100) !important;
  border-color: rgba(124,58,237,.2) !important;
  color: var(--cal-n700) !important;
  transform: translateY(-1px) !important;
}

/* ── Danger variant (disconnect, delete) ── */
.cal-confirm-danger .modal-content::before {
  background: linear-gradient(90deg, #ef4444, #f59e0b, #ef4444) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   FACEBOOK PAGES MODAL — Size constraint fix (v3.2)
   ════════════════════════════════════════════════════════════════════════════ */

.fbm-modal .modal-dialog {
  max-width: 480px !important;
  margin: 1.75rem auto !important;
}

.fbm-modal .modal-content {
  border: 1.5px solid rgba(24,119,242,.15) !important;
  border-radius: var(--cal-r-2xl) !important;
  box-shadow: 0 32px 80px rgba(24,119,242,.14), 0 0 60px rgba(24,119,242,.06) !important;
  background: var(--cal-w) !important;
  overflow: hidden !important;
  animation: calScaleIn .3s ease-out !important;
}

.fbm-modal .modal-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1877F2, #42a5f5, #1877F2);
  z-index: 1;
}


/* ════════════════════════════════════════════════════════════════════════════
   FACEBOOK PAGES MODAL — Complete restyle (v3.2)
   Prefix: fp-modal-  (facebook pages modal)
   
   NOTE: In Dash, dbc.Modal puts id + className on the SAME div as
   .modal-dialog, so we use #id.modal-dialog (no space) for size.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Dialog size constraint (same element, no space!) ── */
#modal-facebook-pages.modal-dialog {
  max-width: 480px !important;
  width: 480px !important;
  margin: 1.75rem auto !important;
}

/* ── Content card (child, with space) ── */
#modal-facebook-pages .modal-content {
  border: 1.5px solid rgba(24,119,242,.15) !important;
  border-radius: 24px !important;
  box-shadow: 0 32px 80px rgba(24,119,242,.14), 0 0 60px rgba(24,119,242,.06) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  animation: calScaleIn .3s ease-out !important;
  position: relative;
}

#modal-facebook-pages .modal-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1877F2, #42a5f5, #1877F2);
  z-index: 1;
}

/* ── Header ── */
.fp-modal-header {
  background: linear-gradient(135deg, rgba(24,119,242,.06), rgba(24,119,242,.02)) !important;
  border-bottom: 1.5px solid rgba(24,119,242,.08) !important;
  padding: 1rem 1.3rem !important;
}

.fp-modal-header-title {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}

.fp-modal-header-title i {
  color: #1877F2;
  font-size: 1.1rem;
}

/* ── Body ── */
.fp-modal-body {
  padding: 2rem 1.75rem 2.25rem !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  text-align: center !important;
}

.fp-modal-hero-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, rgba(24,119,242,.1), rgba(24,119,242,.04));
  border: 1.5px solid rgba(24,119,242,.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #1877F2;
  animation: fbPulseGlow 2.5s ease-in-out infinite;
}

.fp-modal-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: .45rem;
  letter-spacing: -0.02em;
}

.fp-modal-description {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .86rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.fp-modal-selector {
  text-align: left;
  margin-bottom: .5rem;
}

.fp-modal-selector .fp-modal-dropdown-wrap {
  background: #ffffff;
  border: 1.5px solid rgba(24,119,242,.1);
  border-radius: 16px;
  padding: .25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(24,119,242,.06);
  transition: all 300ms ease-out;
}

.fp-modal-selector .fp-modal-dropdown-wrap:focus-within {
  border-color: #1877F2;
  box-shadow: 0 0 0 3px rgba(24,119,242,.1), 0 4px 16px rgba(24,119,242,.1);
}

.fp-modal-selector .fp-modal-connect-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .6rem !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 1rem auto 0 !important;
  padding: .85rem 1.75rem !important;
  background: linear-gradient(135deg, #1877F2, #0d65d9) !important;
  border: none !important;
  border-radius: 12px !important;
  color: white !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 500ms cubic-bezier(.34,1.56,.64,1) !important;
  box-shadow: 0 6px 22px rgba(24,119,242,.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

.fp-modal-selector .fp-modal-connect-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .5s ease;
}

.fp-modal-selector .fp-modal-connect-btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(24,119,242,.4) !important;
}

.fp-modal-selector .fp-modal-connect-btn:hover:not(:disabled)::before {
  left: 100%;
}

.fp-modal-selector .fp-modal-connect-btn:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.fp-modal-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.25rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  color: #94a3b8;
  letter-spacing: .02em;
}

.fp-modal-security i {
  font-size: .68rem;
  color: #10b981;
}

/* ── Dropdown internals ── */
.fp-modal-selector .Select-control,
.fp-modal-selector .dash-dropdown .Select-control {
  border: none !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  min-height: 48px !important;
  box-shadow: none !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .92rem !important;
}

.fp-modal-selector .Select.is-focused .Select-control {
  border: none !important;
  box-shadow: none !important;
}

.fp-modal-selector .Select-placeholder {
  color: #94a3b8 !important;
  font-size: .88rem !important;
}

.fp-modal-selector .Select-value-label {
  font-weight: 600 !important;
  color: #1e293b !important;
  font-size: .92rem !important;
}

.fp-modal-selector .Select-menu-outer {
  border: 1.5px solid rgba(24,119,242,.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(24,119,242,.12) !important;
  margin-top: 6px !important;
  overflow: hidden;
}

.fp-modal-selector .VirtualizedSelectOption {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .9rem !important;
  padding: .75rem 1rem !important;
  transition: all 300ms ease-out !important;
}

.fp-modal-selector .VirtualizedSelectFocusedOption {
  background: rgba(24,119,242,.06) !important;
  color: #1877F2 !important;
}

/* ── Responsive ── */
@media (max-width: 576px) {
  #modal-facebook-pages.modal-dialog {
    max-width: calc(100vw - 2rem) !important;
    width: calc(100vw - 2rem) !important;
    margin: 1rem auto !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   FACEBOOK PAGES MODAL — Dropdown refinements (v3.3)
   ════════════════════════════════════════════════════════════════════════════ */

/* Dropdown wrapper — tighter, centered */
.fp-modal-selector .fp-modal-dropdown-wrap {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

/* Control — pill shape, subtle border */
.fp-modal-selector .Select-control {
  border: 1.5px solid rgba(24,119,242,.12) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  min-height: 46px !important;
  box-shadow: none !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .88rem !important;
  cursor: pointer !important;
  transition: all 300ms ease-out !important;
}

.fp-modal-selector .Select.is-focused .Select-control,
.fp-modal-selector .Select.is-open .Select-control {
  border-color: #1877F2 !important;
  box-shadow: 0 0 0 3px rgba(24,119,242,.1) !important;
}

/* Placeholder */
.fp-modal-selector .Select-placeholder {
  color: #94a3b8 !important;
  font-size: .86rem !important;
  padding-left: 14px !important;
}

/* Selected value */
.fp-modal-selector .Select-value-label {
  font-weight: 600 !important;
  color: #1e293b !important;
  font-size: .88rem !important;
}

/* Arrow */
.fp-modal-selector .Select-arrow-zone {
  padding-right: 14px !important;
}

.fp-modal-selector .Select-arrow {
  border-color: #94a3b8 transparent transparent !important;
}

.fp-modal-selector .Select.is-open .Select-arrow {
  border-color: transparent transparent #1877F2 !important;
}

/* ── Dropdown menu ── */
.fp-modal-selector .Select-menu-outer {
  border: 1.5px solid rgba(24,119,242,.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(24,119,242,.12) !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  max-width: 380px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Options */
.fp-modal-selector .VirtualizedSelectOption,
.fp-modal-selector .Select-option {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .86rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  padding: .7rem 1rem !important;
  transition: all 200ms ease-out !important;
  cursor: pointer !important;
  border-bottom: 1px solid rgba(24,119,242,.04);
}

.fp-modal-selector .VirtualizedSelectOption:last-child,
.fp-modal-selector .Select-option:last-child {
  border-bottom: none;
}

/* Hover / focused option */
.fp-modal-selector .VirtualizedSelectFocusedOption,
.fp-modal-selector .Select-option.is-focused {
  background: rgba(24,119,242,.06) !important;
  color: #1877F2 !important;
  font-weight: 600 !important;
}

/* Selected option */
.fp-modal-selector .VirtualizedSelectSelectedOption,
.fp-modal-selector .Select-option.is-selected {
  background: rgba(24,119,242,.1) !important;
  color: #1877F2 !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FACEBOOK DROPDOWN — Surgical fix via #facebook-page-dropdown (v3.4)
   ════════════════════════════════════════════════════════════════════════════ */

/* Wrapper */
.fp-modal-dropdown-wrap {
  max-width: 360px !important;
  margin: 0 auto 1.25rem !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(24,119,242,.12) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  box-shadow: 0 2px 8px rgba(24,119,242,.06) !important;
  transition: all 300ms ease-out !important;
}

.fp-modal-dropdown-wrap:focus-within {
  border-color: #1877F2 !important;
  box-shadow: 0 0 0 3px rgba(24,119,242,.08), 0 4px 14px rgba(24,119,242,.08) !important;
}

/* Control */
#facebook-page-dropdown .Select-control {
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  min-height: 42px !important;
  box-shadow: none !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .86rem !important;
  cursor: pointer !important;
}

#facebook-page-dropdown .Select.is-focused .Select-control,
#facebook-page-dropdown .Select.is-open .Select-control {
  border: none !important;
  box-shadow: none !important;
}

/* Placeholder */
#facebook-page-dropdown .Select-placeholder {
  color: #94a3b8 !important;
  font-size: .84rem !important;
  line-height: 42px !important;
}

/* Selected value */
#facebook-page-dropdown .Select-value-label {
  font-weight: 600 !important;
  color: #1e293b !important;
  font-size: .86rem !important;
}

/* Arrow */
#facebook-page-dropdown .Select-arrow-zone {
  padding-right: 12px !important;
}

#facebook-page-dropdown .Select-arrow {
  border-color: #94a3b8 transparent transparent !important;
  border-width: 5px 5px 2.5px !important;
}

#facebook-page-dropdown .Select.is-open .Select-arrow {
  border-color: transparent transparent #1877F2 !important;
}

/* ── Menu (the dropdown list) ── */
#facebook-page-dropdown .Select-menu-outer {
  border: 1.5px solid rgba(24,119,242,.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(24,119,242,.12) !important;
  margin-top: 6px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  animation: calScaleIn .2s ease-out !important;
}

/* Options */
#facebook-page-dropdown .VirtualizedSelectOption {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  padding: .65rem 1rem !important;
  cursor: pointer !important;
  transition: all 150ms ease-out !important;
  border-bottom: 1px solid rgba(24,119,242,.04) !important;
}

#facebook-page-dropdown .VirtualizedSelectOption:last-child {
  border-bottom: none !important;
}

#facebook-page-dropdown .VirtualizedSelectFocusedOption {
  background: rgba(24,119,242,.06) !important;
  color: #1877F2 !important;
  font-weight: 600 !important;
}

#facebook-page-dropdown .VirtualizedSelectSelectedOption {
  background: rgba(24,119,242,.1) !important;
  color: #1877F2 !important;
  font-weight: 700 !important;
}


/* ── Remove purple focus outlines ── */
#facebook-page-dropdown .Select-input input,
#facebook-page-dropdown .Select-input input:focus,
#facebook-page-dropdown .Select-control,
#facebook-page-dropdown .Select-control:focus,
#facebook-page-dropdown .Select.is-focused,
#facebook-page-dropdown .Select.is-open {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

#facebook-page-dropdown .Select-input input {
  border: none !important;
  outline: none !important;
}


/* ── Center selected value vertically ── */
#facebook-page-dropdown .Select-value {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding-left: 10px !important;
}

#facebook-page-dropdown .Select-value-label {
  line-height: 42px !important;
}

#facebook-page-dropdown .Select--single > .Select-control .Select-value {
  line-height: 42px !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   PROCESSING MODAL — Premium spinner + sizing (v3.4)
   ════════════════════════════════════════════════════════════════════════════ */

#modal-processing.modal-dialog {
  max-width: 400px !important;
  width: 400px !important;
  margin: 1.75rem auto !important;
}

.cal-processing-modal .modal-content::before {
  background: linear-gradient(90deg, var(--cal-p), var(--cal-s), var(--cal-p)) !important;
  background-size: 200% 100% !important;
  animation: calGradFlow 2s ease-in-out infinite !important;
}

/* Override dark colors in dynamic message content */
.cal-processing-modal .modal-body p,
.cal-processing-modal .modal-body span {
  color: #64748b !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

.cal-processing-modal .modal-body div[style*="backgroundColor: rgba(24, 119, 242"],
.cal-processing-modal .modal-body div[style*="backgroundColor: rgba(124, 58, 237"] {
  background-color: rgba(124,58,237,.05) !important;
  border: 1.5px solid rgba(124,58,237,.1) !important;
  border-radius: 12px !important;
}

.cal-processing-modal .modal-body i.fab,
.cal-processing-modal .modal-body i.fas {
  color: var(--cal-p) !important;
}

/* Animated gradient top bar */
@media (max-width: 576px) {
  #modal-processing.modal-dialog {
    max-width: calc(100vw - 2rem) !important;
    width: calc(100vw - 2rem) !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   DISCONNECT MODAL — Button alignment fix
   Scoped classNames to avoid affecting other modals
   ════════════════════════════════════════════════════════════════════════════ */

.disconnect-modal-inner {
  width: 100%;
}

.disconnect-modal-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.disconnect-modal-actions .btn {
  width: 100% !important;
  flex: none !important;
}