/* ============================================================
   THEME SWITCHER - Trader's Circle
   ============================================================ */

/* ---- Theme Toggle Button ---- */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 0.3rem;
    margin-left: 0.5rem;
}

.theme-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: rgba(245, 245, 245, 0.6);
    transition: all 0.2s ease;
    padding: 0;
}

.theme-btn:hover {
    color: #EEC652;
    background: rgba(238, 198, 82, 0.15);
}

.theme-btn.active {
    background: #EEC652;
    color: #0F3A47;
}

@media (max-width: 768px) {
    .theme-switcher {
        background: rgba(255, 255, 255, 0.1);
        margin-left: 0;
        margin-right: 0.5rem;
    }
}

/* ============================================================
   WHITE THEME
   ============================================================ */

[data-theme="white"] {
    color-scheme: light;
}

[data-theme="white"] body {
    background-color: #f5f7fa !important;
    color: #1a1a2e !important;
}

[data-theme="white"] nav {
    background-color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="white"] .nav-links a {
    color: #1a1a2e !important;
}

[data-theme="white"] .nav-links a:hover {
    color: #b8951e !important;
}

[data-theme="white"] .nav-links a.active {
    color: #b8951e !important;
}

[data-theme="white"] .nav-social a {
    color: #1a1a2e !important;
}

[data-theme="white"] .nav-social a:hover {
    color: #b8951e !important;
}

[data-theme="white"] .mobile-menu-btn {
    color: #1a1a2e !important;
}

[data-theme="white"] .theme-switcher {
    background: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="white"] .theme-btn {
    color: rgba(26, 26, 46, 0.5) !important;
}

[data-theme="white"] .theme-btn:hover {
    color: #b8951e !important;
    background: rgba(184, 149, 30, 0.12) !important;
}

[data-theme="white"] .theme-btn.active {
    background: #b8951e !important;
    color: #ffffff !important;
}

[data-theme="white"] .hero {
    background: linear-gradient(135deg, rgba(245, 247, 250, 0.18) 0%, rgba(220, 230, 240, 0.45) 100%), url('https://www.traderscircle.ch/bilder/header.png') center center/cover no-repeat !important;
}

[data-theme="white"] .features {
    background: linear-gradient(135deg, #eef2f7 0%, #e4ecf5 100%) !important;
}

[data-theme="white"] .feature-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(184, 149, 30, 0.3) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="white"] .feature-card:hover {
    border-color: #b8951e !important;
    box-shadow: 0 10px 30px rgba(184, 149, 30, 0.2) !important;
}

[data-theme="white"] .feature-card h3 {
    color: #b8951e !important;
}

[data-theme="white"] .feature-card li::before {
    color: #b8951e !important;
}

[data-theme="white"] .feature-icon {
    color: #b8951e !important;
}

[data-theme="white"] .dropdown-header {
    background: rgba(0, 60, 80, 0.07) !important;
    border-color: rgba(184, 149, 30, 0.2) !important;
}

[data-theme="white"] .dropdown-header:hover {
    background: rgba(0, 60, 80, 0.13) !important;
    border-color: rgba(184, 149, 30, 0.4) !important;
}

[data-theme="white"] .dropdown-header strong {
    color: #1a1a2e !important;
}

[data-theme="white"] .dropdown-icon {
    color: #b8951e !important;
}

[data-theme="white"] .dropdown-content {
    color: #1a1a2e !important;
}

[data-theme="white"] .questions {
    background: #f5f7fa !important;
}

[data-theme="white"] .questions h2 {
    color: #b8951e !important;
}

[data-theme="white"] .strategy {
    background: #f5f7fa !important;
}

[data-theme="white"] .strategy-text h2 {
    color: #b8951e !important;
}

[data-theme="white"] .strategy-text h3 {
    color: #1a1a2e !important;
}

[data-theme="white"] .strategy-list li::before {
    color: #b8951e !important;
}

[data-theme="white"] .strategy-image {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(184, 149, 30, 0.4) !important;
    color: #b8951e !important;
}

[data-theme="white"] .pricing {
    background: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="white"] .pricing h2 {
    color: #b8951e !important;
}

[data-theme="white"] .pricing-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(184, 149, 30, 0.25) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="white"] .pricing-card:hover {
    border-color: #b8951e !important;
    box-shadow: 0 10px 40px rgba(184, 149, 30, 0.25) !important;
}

[data-theme="white"] .pricing-card.featured {
    background: rgba(184, 149, 30, 0.08) !important;
    border-color: #b8951e !important;
}

[data-theme="white"] .pricing-card h3 {
    color: #b8951e !important;
}

[data-theme="white"] .price {
    color: #b8951e !important;
}

[data-theme="white"] .price-annual {
    color: #555577 !important;
}

[data-theme="white"] .price-new {
    color: #b8951e !important;
}

[data-theme="white"] .pricing-card li::before {
    color: #b8951e !important;
}

[data-theme="white"] .contact {
    background: linear-gradient(135deg, #eef2f7 0%, #e4ecf5 100%) !important;
}

[data-theme="white"] .contact-form h2 {
    color: #b8951e !important;
}

[data-theme="white"] .contact-form p {
    color: #1a1a2e !important;
}

[data-theme="white"] .contact-form form {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(184, 149, 30, 0.2) !important;
}

[data-theme="white"] .form-group label {
    color: #b8951e !important;
}

[data-theme="white"] .form-group input,
[data-theme="white"] .form-group textarea {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #1a1a2e !important;
    border-color: rgba(184, 149, 30, 0.3) !important;
}

[data-theme="white"] .form-group input:focus,
[data-theme="white"] .form-group textarea:focus {
    border-color: #b8951e !important;
    background: #ffffff !important;
}

[data-theme="white"] .about {
    background: #f5f7fa !important;
}

[data-theme="white"] .about h2 {
    color: #b8951e !important;
}

[data-theme="white"] .team-member {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(184, 149, 30, 0.25) !important;
}

[data-theme="white"] .team-info h3 {
    color: #b8951e !important;
}

[data-theme="white"] .team-photo {
    background: rgba(184, 149, 30, 0.08) !important;
    border-color: #b8951e !important;
    color: #b8951e !important;
}

[data-theme="white"] .quote {
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="white"] .quote blockquote {
    color: #b8951e !important;
}

[data-theme="white"] .quote cite {
    color: #1a1a2e !important;
}

[data-theme="white"] .social-links {
    background: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="white"] .social-links h3 {
    color: #b8951e !important;
}

[data-theme="white"] .social-icons a {
    color: #1a1a2e !important;
}

[data-theme="white"] .social-icons a:hover {
    color: #b8951e !important;
}

[data-theme="white"] footer {
    background-color: rgba(0, 0, 0, 0.07) !important;
}

[data-theme="white"] .footer-section h3 {
    color: #b8951e !important;
}

[data-theme="white"] .footer-section p {
    color: #1a1a2e !important;
}

[data-theme="white"] .footer-links a {
    color: #1a1a2e !important;
}

[data-theme="white"] .footer-links a:hover {
    color: #b8951e !important;
}

[data-theme="white"] .footer-social a {
    color: #1a1a2e !important;
}

[data-theme="white"] .footer-social a:hover {
    color: #b8951e !important;
}

[data-theme="white"] .footer-bottom {
    color: #1a1a2e !important;
    border-color: rgba(184, 149, 30, 0.25) !important;
}

[data-theme="white"] .modal-content {
    background-color: #ffffff !important;
    color: #1a1a2e !important;
}

[data-theme="white"] .modal-content h2 {
    color: #b8951e !important;
}

[data-theme="white"] .modal-content h3 {
    color: #b8951e !important;
}

[data-theme="white"] .close {
    color: #b8951e !important;
}

[data-theme="white"] .cookie-banner {
    background: linear-gradient(135deg, rgba(238, 244, 250, 0.99) 0%, rgba(220, 232, 244, 0.99) 100%) !important;
    border-color: rgba(184, 149, 30, 0.4) !important;
}

[data-theme="white"] .cookie-text p,
[data-theme="white"] .cookie-text a {
    color: #1a1a2e !important;
}

[data-theme="white"] .content-container {
    background-color: #f5f7fa !important;
    color: #1a1a2e !important;
}

[data-theme="white"] .content-container h1,
[data-theme="white"] .content-container h2,
[data-theme="white"] .content-container h3 {
    color: #b8951e !important;
}

/* ============================================================
   DARK THEME
   ============================================================ */

[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: #0b0b0b !important;
    color: #e0e0e0 !important;
}

/* ============================================================
   PORTAL CSS VARIABLE OVERRIDES (uses :root vars from portal.css)
   ============================================================ */

[data-theme="white"] {
    --bg:           #f0f4f7;
    --bg-dark:      #e6ecf0;
    --bg-card:      #ffffff;
    --bg-card-hover:#f5f8fa;
    --border:       #c8d8e0;
    --gold:         #c9a63a;
    --gold-dark:    #a88520;
    --text:         #1a2a35;
    --text-muted:   #4a6a78;
    --green:        #16a34a;
    --red:          #dc2626;
    --shadow:       0 4px 20px rgba(0,0,0,0.10);
}

[data-theme="white"] .hero h1 {
    color: #b8951e !important;
    text-shadow: 0 1px 6px rgba(255,255,255,0.7), 1px 1px 4px rgba(0,0,0,0.25) !important;
}

[data-theme="white"] .hero p {
    color: #1a1a2e !important;
    text-shadow: 0 1px 4px rgba(255,255,255,0.75) !important;
}

[data-theme="white"] .badge-win,
[data-theme="white"] .badge-long {
    background: rgba(22,163,74,.12) !important;
}

[data-theme="white"] .badge-loss,
[data-theme="white"] .badge-short {
    background: rgba(220,38,38,.12) !important;
}

[data-theme="white"] .alert-success {
    background: rgba(22,163,74,.10) !important;
    border-color: rgba(22,163,74,.30) !important;
}

[data-theme="white"] .alert-error {
    background: rgba(220,38,38,.10) !important;
    border-color: rgba(220,38,38,.30) !important;
}

[data-theme="white"] .btn-danger {
    background: rgba(220,38,38,.10) !important;
    border-color: rgba(220,38,38,.25) !important;
}

[data-theme="white"] .progress-bar.pb-green {
    background: var(--green) !important;
}

[data-theme="white"] .emotion.calm {
    background: rgba(22,163,74,.12) !important;
}

[data-theme="white"] .emotion.fearful {
    background: rgba(220,38,38,.12) !important;
}

[data-theme="white"] .topbar {
    background: var(--bg-dark) !important;
    border-bottom-color: var(--border) !important;
}

[data-theme="white"] .sidebar {
    background: var(--bg-dark) !important;
    border-right-color: var(--border) !important;
}

[data-theme="dark"] {
    --bg:           #080808;
    --bg-dark:      #030303;
    --bg-card:      #0f0f0f;
    --bg-card-hover:#161616;
    --border:       #1a1a1a;
    --text:         #e0e0e0;
    --text-muted:   #6a8898;
}


[data-theme="dark"] .nav-links a {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .nav-social a {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .mobile-menu-btn {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .hero {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, rgba(10, 10, 10, 0.88) 100%), url('https://www.traderscircle.ch/bilder/header.png') center center/cover no-repeat !important;
}

[data-theme="dark"] .features {
    background: linear-gradient(135deg, #111111 0%, #191919 100%) !important;
}

[data-theme="dark"] .feature-card {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .dropdown-header {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .dropdown-header:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .dropdown-header strong {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .dropdown-content {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .questions {
    background: #0b0b0b !important;
}

[data-theme="dark"] .strategy {
    background: #0b0b0b !important;
}

[data-theme="dark"] .strategy-text h3 {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .strategy-image {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .pricing {
    background: rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .pricing-card {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .pricing-card.featured {
    background: rgba(238, 198, 82, 0.08) !important;
}

[data-theme="dark"] .price-annual {
    color: #aaaaaa !important;
}

[data-theme="dark"] .contact {
    background: linear-gradient(135deg, #111111 0%, #191919 100%) !important;
}

[data-theme="dark"] .contact-form p {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .contact-form form {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #e0e0e0 !important;
    border-color: rgba(238, 198, 82, 0.25) !important;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .about {
    background: #0b0b0b !important;
}

[data-theme="dark"] .team-member {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .quote {
    background: rgba(0, 0, 0, 0.55) !important;
}

[data-theme="dark"] .quote cite {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .social-links {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .social-icons a {
    color: #e0e0e0 !important;
}

[data-theme="dark"] footer {
    background-color: rgba(0, 0, 0, 0.65) !important;
}

[data-theme="dark"] .footer-section p {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .footer-links a {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .footer-social a {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .footer-bottom {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .modal-content {
    background-color: #111111 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .cookie-banner {
    background: linear-gradient(135deg, rgba(15, 15, 15, 0.98) 0%, rgba(25, 25, 25, 0.98) 100%) !important;
}

[data-theme="dark"] .content-container {
    background-color: #0b0b0b !important;
    color: #e0e0e0 !important;
}

/* Mobile nav overlay */
@media (max-width: 768px) {
    [data-theme="white"] .nav-links {
        background-color: #ffffff !important;
    }

    [data-theme="dark"] .nav-links {
        background-color: #111111 !important;
    }
}