/* ============================================
   DARK MODE
   ============================================ */
body.dark {
    background: linear-gradient(180deg, #242020 0%, #1a1616 100%) !important;
    background-attachment: fixed !important;
    color: #e8e0d0;
}

body.dark .navbar                    { background-color: #580900 !important; border-bottom-color: #6F1F2B !important; }
body.dark .navbar.scrolled           { background-color: #580900 !important; border-bottom-color: #6F1F2B !important; }
body.page-nature.dark .navbar        { background-color: #1a3009 !important; border-bottom-color: #2D5016 !important; }
body.page-modern.dark .navbar        { background-color: #070e17 !important; border-bottom-color: #0D1B2A !important; }
body.page-historical.dark .navbar    { background-color: #4e261e !important; border-bottom-color: #7A3B2E !important; }
body.dark .page-hero { filter: brightness(0.85); }
body.dark .location-name { color: #f0ead8 !important; }
body.dark .location-desc { color: #b0a898 !important; }
body.dark .location-tag { opacity: 0.9; }
body.dark .location-img-wrap { border-color: rgba(255,255,255,0.1) !important; }
body.dark .page-title { color: #f0ead8; }
body.dark .page-desc { color: #b0a898; }
body.dark .section-title { color: #f0ead8; }
body.dark .body-text { color: #b0a898; }

body.dark .dyk-chip { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); color: #c8b98a; }
body.dark .arabic-block { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
body.dark .arabic-word { color: #f0ead8; }
body.dark .arabic-transliteration { color: #c8b98a; }
body.dark .arabic-meaning { color: #b0a898; }

body.dark .timeline-item { border-left-color: rgba(255,255,255,0.15); }
body.dark .timeline-year { color: #c8b98a; }
body.dark .timeline-event { color: #b0a898; }
body.dark .timeline-dot { background: #c8b98a; }

body.dark .heat-section { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
body.dark .heat-title { color: #f0ead8; }
body.dark .heat-month { background: rgba(255,255,255,0.06); }
body.dark .heat-month:hover { background: rgba(255,255,255,0.12); }
body.dark .heat-month-label { color: #888; }
body.dark .heat-tooltip {
    background: #2a2a2a !important;
    border-color: rgba(201,168,76,0.3) !important;
    color: #f0ead8 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
body.dark .heat-tooltip-month { color: #e8d5a0 !important; }
body.dark .heat-tooltip-row { color: #c8b98a !important; }
body.dark .heat-tooltip::after { border-top-color: rgba(201,168,76,0.3) !important; }

/* back-btn per category in dark mode */
body.dark .back-btn { color: #C9A84C; opacity: 1; }
body.page-nature.dark .back-btn { color: #8BA87A; }
body.page-modern.dark .back-btn { color: #7BA7BC; }
body.page-historical.dark .back-btn { color: #C4856A; }
body.dark .explore-btn { filter: brightness(0.85); }

body.dark .footer { background-color: #0a0a0a !important; }
body.dark .footer-col a { color: rgba(255,255,255,0.45); }
body.dark .footer-col a:hover { color: rgba(255,255,255,0.8); }
body.dark .footer-bottom p { color: rgba(255,255,255,0.2); }

body.dark .map-wrap { border-color: rgba(255,255,255,0.1) !important; filter: invert(0.9) hue-rotate(180deg); }
body.dark .gallery-img { border-color: rgba(255,255,255,0.08) !important; }

body.dark .modal-box { background: #1e1e1e; }
body.dark .modal-box h2, body.dark .highlight-name { color: #f0ead8; }
body.dark .highlight-reason { color: #b0a898; }
body.dark .modal-close, body.dark .comparer-close { color: #aaa; }
body.dark .modal-subtitle, body.dark .modal-cta { color: #888; }

body.dark .comparer-box { background: #1e1e1e; }
body.dark .comparer-header { border-bottom-color: rgba(255,255,255,0.08); }
body.dark .comparer-header h2 { color: #f0ead8; }
body.dark .comparer-selects { border-bottom-color: rgba(255,255,255,0.08); }
body.dark .comparer-select { background: #2a2a2a; color: #f0ead8; border-color: rgba(255,255,255,0.15); }
body.dark .comparer-col:first-child { border-right-color: rgba(255,255,255,0.08); }
body.dark .comparer-col-name { color: #f0ead8; }
body.dark .comparer-stat { background: rgba(255,255,255,0.04); }
body.dark .comparer-stat-value { color: #b0a898; }
body.dark .comparer-empty { color: #666; }

/* index page dark */
body.dark .titles h1 { color: #f0ead8; }
body.dark .titles p { color: #b0a898; }
body.dark .card-overlay { background: linear-gradient(transparent, rgba(0,0,0,0.85)); }

/* ============================================
   DARK MODE TOGGLE BUTTON
   Styled to match the site — maroon/gold theme
   ============================================ */
.dark-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 900;
    background: var(--red, #6F1F2B);
    color: #fff;
    border: 2px solid rgba(201,168,76,0.4);
    border-radius: 6px;
    padding: 0.55rem 1rem;
    font-family: var(--font-body, 'Nunito'), sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    text-transform: uppercase;
}

.dark-toggle:hover {
    background: #8a2535;
    border-color: rgba(201,168,76,0.7);
    transform: translateY(-1px);
}

body.dark .dark-toggle {
    background: #2a2a2a;
    border-color: rgba(201,168,76,0.5);
    color: #e8d5a0;
}

body.dark .dark-toggle:hover {
    background: #333;
    border-color: rgba(201,168,76,0.8);
}

/* chatbot is on the left on index so no shift needed */

/* Dark mode chatbot — black/gold matching other buttons */
body.dark #chat-bubble {
    background: #1a1a1a !important;
    border: 2px solid rgba(201,168,76,0.6) !important;
    color: #e8d5a0 !important;
    box-shadow: 0 4px 16px rgba(201,168,76,0.15) !important;
}
body.dark #chat-bubble:hover {
    background: #2a2a2a !important;
    transform: scale(1.1);
}
body.dark .chat-window {
    background: #1a1a1a !important;
    border: 1px solid rgba(201,168,76,0.3) !important;
}
body.dark .chat-header {
    background: #111 !important;
    color: #e8d5a0 !important;
    border-bottom: 2px solid rgba(201,168,76,0.4) !important;
}
body.dark .chat-messages {
    background: #1a1a1a !important;
}
body.dark .chat-msg.bot {
    background: rgba(255,255,255,0.07) !important;
    color: #e8d5a0 !important;
}
body.dark .chat-msg.user {
    background: #2a1a0a !important;
    border: 1px solid rgba(201,168,76,0.3) !important;
    color: #e8d5a0 !important;
}
body.dark .chat-input-row {
    background: #111 !important;
    border-top: 1px solid rgba(201,168,76,0.2) !important;
}
body.dark .chat-input-row input {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(201,168,76,0.3) !important;
    color: #e8d5a0 !important;
}
body.dark .chat-input-row input::placeholder {
    color: rgba(232,213,160,0.4) !important;
}
body.dark #chat-send {
    background: #1a1a1a !important;
    border: 1px solid rgba(201,168,76,0.5) !important;
    color: #e8d5a0 !important;
    transition: background 0.2s, border-color 0.2s !important;
}
body.dark #chat-send:hover {
    background: #2a2a2a !important;
    border-color: rgba(201,168,76,0.8) !important;
}

/* ============================================
   COMPARE BUTTON — clearer in light mode
   ============================================ */
.comparer-trigger {
    background: var(--red, #6F1F2B) !important;
    color: #fff !important;
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08rem !important;
    text-transform: uppercase !important;
    padding: 0.55rem 1rem !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
    transition: background 0.2s, transform 0.15s !important;
}

.comparer-trigger:hover {
    background: #8a2535 !important;
    transform: translateY(-1px) !important;
}

body.dark .comparer-trigger {
    background: #2a2a2a !important;
    border-color: rgba(201,168,76,0.5) !important;
    color: #e8d5a0 !important;
}

body.dark .divider-gem { color: rgba(201,168,76,0.6) !important; }