/* ==========================================================================
   KWOTAi V2.0 - Deep Tech Enterprise Theme (Port for American Relocators)
   ========================================================================== */

/* Core Design Architecture (Shared Colors) */
:root {
  --text-main: #F1F5F9;
  --text-muted: #94A3B8;
  --text-dark: #FFFFFF;
}

/* Base Theme 0: Cyber Cyan (Default) - Bold Slate */
:root, .theme-cyber-cyan {
  --bg-dark: #0A1128;
  --bg-darker: #020617;
  --bg-panel: rgba(10, 17, 40, 0.65);
  --bg-card: rgba(15, 23, 42, 0.7);
  --accent-cyan: #00F0FF;
  --accent-azure: #0088FF;
  --shadow-neon: 0 0 20px rgba(0, 229, 255, 0.15);
  --border-cyan: rgba(0, 229, 255, 0.3);
  --border-subtle: rgba(255,255,255,0.06);
}

/* Theme 1: Neon Purple - Bold Amethyst */
.theme-neon-purple {
  --bg-dark: #4C1D95;
  --bg-darker: #2E1065;
  --bg-panel: rgba(76, 29, 149, 0.7);
  --bg-card: rgba(46, 16, 101, 0.7);
  --accent-cyan: #B018DB;
  --accent-azure: #9333EA;
  --shadow-neon: 0 0 20px rgba(217, 70, 239, 0.15);
  --border-cyan: rgba(217, 70, 239, 0.3);
  --border-subtle: rgba(217, 70, 239, 0.08);
}

/* Theme 2: Matrix Green - Bold Emerald */
.theme-matrix-green {
  --bg-dark: #065F46;
  --bg-darker: #022C22;
  --bg-panel: rgba(6, 95, 70, 0.7);
  --bg-card: rgba(2, 44, 34, 0.7);
  --accent-cyan: #10B981;
  --accent-azure: #047857;
  --shadow-neon: 0 0 20px rgba(16, 185, 129, 0.15);
  --border-cyan: rgba(16, 185, 129, 0.3);
  --border-subtle: rgba(16, 185, 129, 0.08);
}

/* Theme 3: Sunset Orange - Bold Mocha */
.theme-sunset-orange {
  --bg-dark: #7C2D12;
  --bg-darker: #431407;
  --bg-panel: rgba(124, 45, 18, 0.7);
  --bg-card: rgba(67, 20, 7, 0.7);
  --accent-cyan: #F97316;
  --accent-azure: #EA580C;
  --shadow-neon: 0 0 20px rgba(249, 115, 22, 0.15);
  --border-cyan: rgba(249, 115, 22, 0.3);
  --border-subtle: rgba(249, 115, 22, 0.08);
}

/* Theme 4: Quantum Gold - Bold Amber */
.theme-quantum-gold {
  --bg-dark: #713F12;
  --bg-darker: #451A03;
  --bg-panel: rgba(113, 63, 18, 0.7);
  --bg-card: rgba(69, 26, 3, 0.7);
  --accent-cyan: #FBBF24;
  --accent-azure: #D97706;
  --shadow-neon: 0 0 20px rgba(251, 191, 36, 0.15);
  --border-cyan: rgba(251, 191, 36, 0.3);
  --border-subtle: rgba(251, 191, 36, 0.08);
}


/* GLOBAL BODY THEME INJECTION (SAFE) */
/* This safely binds the dark mode to the outermost layers */
body {
    background-color: var(--bg-darker);
    background: radial-gradient(circle at 50% 0%, var(--bg-dark) 0%, var(--bg-darker) 100%);
    color: var(--text-main);
    transition: background-color 0.5s ease, background 0.5s ease, color 0.5s ease;
}

/* EXPLICIT SAFETY: Ensure the specific burgundy sidebar and hero text stay exactly matching original */
.sidebar {
    color: #fff !important; /* Sidebar text is always white based on Base.css */
}

/* ==========================================================================
   Theme Picker Widget Buttons
   ========================================================================== */
.theme-picker-widget {
  position: absolute;
  top: 85px;
  transform: none;
  right: 20px;
}

/* If the page has a 400px sidebar, shift the picker left so it lives under the main navigation (near "Contact"), NOT on the Right Nav sidebar */
body:has(.sidebar) .theme-picker-widget {
  right: calc(400px + 180px); 
}

@media (max-width: 1200px) {
  body:has(.sidebar) .theme-picker-widget {
    right: 20px;
  }
}

/* Mobile Specific: Shrink and center horizontally to avoid overlapping left-aligned hero text */
@media (max-width: 768px) {
  .theme-picker-widget {
    top: 15px;
    right: 50%;
    transform: translateX(50%);
    padding: 6px 12px;
    gap: 8px;
  }
  .theme-circle {
    width: 20px;
    height: 20px;
  }
}

.theme-picker-widget {
  bottom: auto;
  flex-direction: row;
  background: var(--bg-card);
  border: 1px solid var(--border-cyan);
  padding: 8px 15px;
  border-radius: 30px;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: var(--shadow-neon), 0 10px 30px rgba(0,0,0,0.5);
  z-index: 9999;
  backdrop-filter: blur(10px);
}

.theme-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid transparent;
}

.theme-circle:hover {
  transform: scale(1.2);
}
.theme-circle.active {
  transform: scale(1.2);
  border-color: #FFFFFF;
  box-shadow: 0 0 15px currentColor;
}
.tc-cyan { background: #00E5FF; color: #00E5FF; }
.tc-purple { background: #D946EF; color: #D946EF; }
.tc-green { background: #10B981; color: #10B981; }
.tc-orange { background: #F97316; color: #F97316; }
.tc-gold { background: #FBBF24; color: #FBBF24; }

/* DYNAMIC BOX OVERRIDES FOR KWOTAI THEME */
.kwotai-box {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-top: 4px solid var(--accent-cyan) !important;
    box-shadow: var(--shadow-neon) !important;
    transition: all 0.4s ease !important;
}
.kwotai-box:hover {
    border-color: var(--border-cyan) !important;
    transform: translateY(-5px) !important;
}
.kwotai-text-main { color: var(--text-main) !important; }
.kwotai-text-cyan { color: var(--accent-cyan) !important; }
.kwotai-text-muted { color: var(--text-muted) !important; }

/* Force standard text formatting to match KWOTAi in the center elements */
.center-content h2, .center-content h3 { color: var(--text-main) !important; }
.center-content p { color: var(--text-muted) !important; }

/* ==========================================================================
   ElevenLabs Widget Resizing (Desktop Only)
   ========================================================================== */
@media (min-width: 1025px) {
    elevenlabs-convai {
        /* Because applying a transform makes the element a new containing block, we must fix it to the viewport */
        position: fixed !important;
        bottom: 0 !important;
        right: 0 !important;
        z-index: 10000 !important;
        
        /* Shrink the widget size here (0.8 = 80% size) */
        transform: scale(0.8) !important;
        transform-origin: bottom right !important;
    }
}