/* CLM Floating Controls v2 — stacked pill column, USA flag lang, filled chat bubble */

/* Hide any legacy chat/lang/theme fragments */
#clm-chathub-root,
.clm-chathub-legacy,
.clm-topbar .clm-theme-toggle,
.clm-topbar-right .clm-theme-toggle,
#clm-lang-toggle,
.clm-fc-lang-globe { display: none !important; }

/* Kill Utah Homes Help / floating text next to old bubble */
.cre8wp-hub__label,
.cre8wp-hub__title { display: none !important; }

/* --- Container: stacked column, bottom-right --- */
#clm-floating-controls {
  position: fixed;
  right: 20px;
  bottom: 96px; /* clear the chat bubble below */
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
#clm-floating-controls > * { pointer-events: auto; }

/* --- Circular pill buttons (lang + theme) --- */
.clm-fc-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(15,23,32,0.08);
  box-shadow: 0 4px 12px rgba(15,23,32,0.12), 0 1px 3px rgba(15,23,32,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.clm-fc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15,23,32,0.18), 0 2px 4px rgba(15,23,32,0.10);
}
.clm-fc-btn:focus-visible {
  outline: 2px solid #D4A017;
  outline-offset: 2px;
}

/* Language button — shows current flag */
.clm-fc-lang .clm-fc-btn { padding: 0; }
.clm-fc-lang .clm-fc-flag {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

/* Theme toggle icon */
.clm-fc-theme .clm-fc-btn svg {
  width: 22px;
  height: 22px;
  color: #0F1720;
  transition: transform 0.4s ease;
}
[data-theme="dark"] .clm-fc-theme .clm-fc-btn svg { transform: rotate(360deg); }

/* --- Chat bubble: filled circle with white icon --- */
#cre8wp-hub .cre8wp-hub__bubble,
.cre8wp-hub__bubble,
#clm-fc-chat-bubble {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #D4A017 0%, #B8860B 100%) !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(212,160,23,0.35), 0 2px 6px rgba(15,23,32,0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #FFFFFF !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  padding: 0 !important;
  position: relative !important;
}
#cre8wp-hub .cre8wp-hub__bubble:hover,
.cre8wp-hub__bubble:hover,
#clm-fc-chat-bubble:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 24px rgba(212,160,23,0.45), 0 3px 8px rgba(15,23,32,0.18) !important;
}
#cre8wp-hub .cre8wp-hub__bubble svg,
.cre8wp-hub__bubble svg,
#clm-fc-chat-bubble svg {
  width: 26px !important;
  height: 26px !important;
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  stroke: none !important;
}
#cre8wp-hub .cre8wp-hub__bubble::before,
.cre8wp-hub__bubble::before {
  content: none !important;
}

/* Force cre8wp-hub wrapper to bottom-right, floating-controls stacks above it */
#cre8wp-hub {
  position: fixed !important;
  right: 16px !important;
  bottom: 20px !important;
  z-index: 999998 !important;
  width: 56px !important;
  height: 56px !important;
}

/* Notification pulse on chat */
#clm-fc-chat-bubble::after,
.cre8wp-hub__bubble::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #EF4444;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 rgba(239,68,68,0.6);
  animation: clm-fc-pulse 2s ease-out infinite;
}
@keyframes clm-fc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* --- Language dropdown --- */
.clm-fc-lang-menu {
  position: absolute;
  right: 60px;
  bottom: 0;
  background: #FFFFFF;
  border: 1px solid rgba(15,23,32,0.08);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,32,0.18), 0 4px 8px rgba(15,23,32,0.08);
  padding: 6px;
  min-width: 180px;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.clm-fc-lang.is-open .clm-fc-lang-menu { display: flex; }
.clm-fc-lang-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: Inter, -apple-system, sans-serif;
  font-size: 14px;
  color: #0F1720;
  text-align: left;
  width: 100%;
  transition: background 0.15s ease;
}
.clm-fc-lang-menu button:hover { background: rgba(15,23,32,0.05); }
.clm-fc-lang-menu button.is-active { background: rgba(212,160,23,0.12); font-weight: 600; }
.clm-fc-lang-menu img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

/* --- Global dark mode (actually works) --- */
html[data-theme="dark"],
body[data-theme="dark"] {
  background: #0F1720 !important;
  color: #E8E8E6 !important;
}
html[data-theme="dark"] body,
body[data-theme="dark"] {
  background: #0F1720 !important;
  color: #E8E8E6 !important;
}
[data-theme="dark"] .clm-header,
[data-theme="dark"] .clm-topbar { background: #0A0F17 !important; }
[data-theme="dark"] .clm-header { border-bottom-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .clm-nav a { color: #E8E8E6 !important; }
[data-theme="dark"] .clm-nav a:hover { color: #D4A017 !important; }
[data-theme="dark"] .clm-saved,
[data-theme="dark"] .clm-logo-text { color: #E8E8E6 !important; }
[data-theme="dark"] .clm-search-cta { background: #D4A017 !important; border-color: #D4A017 !important; color: #0F1720 !important; }
[data-theme="dark"] .clm-serp-tile,
[data-theme="dark"] .clm-video-card,
[data-theme="dark"] .clm-card,
[data-theme="dark"] .clm-section--alt { background: #1A2332 !important; color: #E8E8E6 !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .clm-section { background: #0F1720 !important; }
[data-theme="dark"] .clm-serp-tile__label,
[data-theme="dark"] .clm-video-card__title,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #FFFFFF !important; }
[data-theme="dark"] .clm-serp-tile__sub,
[data-theme="dark"] .clm-video-card__caption,
[data-theme="dark"] p { color: #B8B7B4 !important; }
[data-theme="dark"] .clm-eyebrow { color: #D4A017 !important; }

/* Floating column stays light-surface in dark mode (buttons remain readable) */
[data-theme="dark"] .clm-fc-btn { background: #1A2332; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .clm-fc-theme .clm-fc-btn svg { color: #FFD54A; }
[data-theme="dark"] .clm-fc-lang-menu { background: #1A2332; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .clm-fc-lang-menu button { color: #E8E8E6; }
[data-theme="dark"] .clm-fc-lang-menu button:hover { background: rgba(255,255,255,0.06); }

/* Mobile */
@media (max-width: 640px) {
  #clm-floating-controls { right: 12px; bottom: 12px; gap: 10px; }
  .clm-fc-btn { width: 44px; height: 44px; }
  #cre8wp-hub .cre8wp-hub__bubble,
  #clm-fc-chat-bubble { width: 52px !important; height: 52px !important; }
}

/* Fix header nav wrap: increase gap and make links readable when compact */
.clm-nav { flex-wrap: wrap; }
.clm-header .clm-mm-trigger {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease;
}
.clm-header .clm-mm-trigger:hover { background: rgba(255,255,255,0.15); }