/* Core Theme Variables (Normal/Light by default) */
:root {
    --bg-body: #ffffff;
    --text-primary: #212529; /* Dark grey/black text color */
    --text-secondary: #555555;
    --white: #ffffff;
    
    /* Glass Effect Variables - Light */
    --glass-bg: rgba(255, 255, 255, 0.80);
    --glass-bg-light: rgba(255, 255, 255, 0.70);
    --glass-bg-lighter: rgba(255, 255, 255, 0.60);
    --glass-bg-dark: rgba(26, 82, 118, 0.9);
    --glass-border: rgba(255, 255, 255, 0.6);
    
    /* Page specific backgrounds (Defaults for Light) */
    --bg-page: #f8f9fa; /* Light grey body background */
    --bg-card: #ffffff;
    --border-card: #dee2e6;
    --text-card: #212529;
    --text-card-muted: #555555;
    
    /* Navbar Light Colors - Matching Screenshot */
    --nav-bg: #ffffff; /* Solid white navbar */
    --nav-backdrop-filter: none;
    --nav-dark: #080e16;
    --nav-text: #212529;
    --nav-logo-sub: #555555;
    --nav-search-bg: #ffffff;
    --nav-search-border: #cccccc;
    --nav-search-text: #212529;
    --nav-search-placeholder: #999999;
    --nav-mobile-panel-bg: #ffffff;
    --nav-border: #eaeaea;
    --topbar-bg: #080e16; /* Dark top utility bar */
    --topbar-text: #ffffff;
    
    /* Sidebar / Hero Category - Dark Sidebar in Light Mode */
    --hero-bg: #f8f9fa;
    --sidebar-bg: #1e293b;
    --sidebar-item-hover: rgba(255, 255, 255, 0.08);
    --sidebar-text: #ffffff;
    
    /* Footer Light - Dark Footer in Light Mode */
    --footer-bg: #0f2355;
    --footer-text: rgba(255, 255, 255, 0.65);
    --footer-border: rgba(255, 255, 255, 0.06);
    --footer-heading: #ffffff;
    --footer-logo-filter: brightness(0) invert(1);
}

/* Dark Theme Variables */
html[data-theme="dark"] {
    --bg-body: #080d16;
    --text-primary: #f8fafc;
    --text-secondary: rgba(248, 250, 252, 0.7);
    --white: #0f172a;
    
    /* Glass Effect Variables - Dark */
    --glass-bg: rgba(15, 23, 42, 0.85);
    --glass-bg-light: rgba(30, 41, 59, 0.75);
    --glass-bg-lighter: rgba(30, 41, 59, 0.60);
    --glass-bg-dark: rgba(15, 23, 42, 0.95);
    --glass-border: rgba(255, 255, 255, 0.1);
    
    /* Page specific backgrounds (Dark) */
    --bg-page: #080d16;
    --bg-card: #111c2b;
    --border-card: rgba(255, 255, 255, 0.08);
    --text-card: #f8fafc;
    --text-card-muted: rgba(248, 250, 252, 0.6);
    
    /* Navbar Dark Colors */
    --nav-bg: #111c2b;
    --nav-backdrop-filter: none;
    --nav-dark: #080e16;
    --nav-text: rgba(255, 255, 255, 0.85);
    --nav-logo-sub: rgba(255, 255, 255, 0.7);
    --nav-search-bg: rgba(255, 255, 255, 0.07);
    --nav-search-border: rgba(255, 255, 255, 0.12);
    --nav-search-text: rgba(255, 255, 255, 0.85);
    --nav-search-placeholder: rgba(255, 255, 255, 0.35);
    --nav-mobile-panel-bg: #1e293b;
    --nav-border: rgba(255, 255, 255, 0.06);
    --topbar-bg: #080e16;
    --topbar-text: #ffffff;
    
    /* Sidebar / Hero Category */
    --hero-bg: #111c2b;
    --sidebar-bg: #1e293b;
    --sidebar-item-hover: rgba(255, 255, 255, 0.05);
    --sidebar-text: #ffffff;
    
    /* Footer Dark */
    --footer-bg: #080e16;
    --footer-text: rgba(255, 255, 255, 0.6);
    --footer-border: rgba(255, 255, 255, 0.05);
    --footer-heading: #ffffff;
    --footer-logo-filter: brightness(0) invert(1);
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: 'Source Serif 4', serif;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme="dark"] body {
    background-image: none;
}

/* Theme Switcher Button Styling */
.theme-toggle-btn {
    background: transparent;
    border: none;
    color: var(--nav-text);
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.2s, color 0.2s;
    outline: none;
}

.theme-toggle-btn:hover {
    background-color: rgba(30, 58, 138, 0.07);
    transform: scale(1.08);
}

html[data-theme="dark"] .theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.theme-toggle-btn i {
    transition: transform 0.3s ease;
}

.theme-toggle-btn:active i {
    transform: rotate(30deg) scale(0.9);
}

/* Glass Effect Utility Classes */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: background-color 0.3s, border-color 0.3s;
}

.glass-card-light {
    background: var(--glass-bg-light);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.glass-card-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    color: var(--text-primary);
}

/* Card General Overrides */
.card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    color: var(--text-primary);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s, border-color 0.3s !important;
}

.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.btn-primary {
    background-color: #1A5276;
    border-color: #1A5276;
    color: #FFFFFF;
}

.btn-primary:hover {
    background-color: #21618C;
    border-color: #21618C;
    color: #FFFFFF;
}

.card-title,
.card-text,
.card-subtitle {
    color: var(--text-primary) !important;
}

.list-group-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-card) !important;
    color: var(--text-primary) !important;
}

.bg-light-green {
    background-color: var(--bg-page);
}

/* Carousel image sizing */
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0;
}

/* ==========================================================================
   HIGH SPECIFICITY OVERRIDES FOR THEMED SUBPAGES
   ========================================================================== */

/* 1. Global Page Wrapper Backgrounds */
html .about-page-wrapper,
html .store-page-section,
html .contact-page-wrapper,
html .blog-page-wrapper,
html .blog-detail-wrapper,
html .related-products-section {
    background: var(--bg-page) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 2. Heading and Subtitle Colors */
html .about-hero h1,
html .about-block h2,
html .timeline-item h6,
html .value-text h6,
html .location-section h2,
html .contact-page-title,
html .group-title,
html .bl-hero-title,
html .bl-grid-title,
html .bl-card-title,
html .bl-featured-title,
html .bd-hero-title,
html .bd-widget-title,
html .bd-cta-title,
html .bd-author-name,
html .bd-recent-title,
html .bd-lead,
html .product-title,
html .detail-heading,
html .spec-value,
html .rel-name,
html .tsm-item {
    color: var(--text-primary) !important;
}

html .about-hero p,
html .about-block p,
html .timeline-item p,
html .value-text p,
html .contact-page-subtitle,
html .bl-hero-sub,
html .bl-card-excerpt,
html .bl-featured-excerpt,
html .bd-cta-text,
html .bd-recent-date,
html .bd-author-bio,
html .product-short-desc,
html .product-description-content,
html .spec-label {
    color: var(--text-secondary) !important;
}

/* 3. Card Elements Across Subpages */
html .store-card,
html .contact-info-card,
html .contact-form-wrapper,
html .filter-form,
html .bl-featured,
html .bl-card,
html .bd-article,
html .bd-sidebar-widget,
html .bd-sidebar-cta,
html .product-image-wrap,
html .detail-card,
html .rel-card,
html .trust-signal-mini,
html .no-results-box,
html .cat-card,
html .mv-sidebar-panel {
    background: var(--bg-card) !important;
    border-color: var(--border-card) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s !important;
}

html[data-theme="dark"] .store-card,
html[data-theme="dark"] .contact-info-card,
html[data-theme="dark"] .contact-form-wrapper,
html[data-theme="dark"] .filter-form,
html[data-theme="dark"] .bl-featured,
html[data-theme="dark"] .bl-card,
html[data-theme="dark"] .bd-article,
html[data-theme="dark"] .bd-sidebar-widget,
html[data-theme="dark"] .bd-sidebar-cta,
html[data-theme="dark"] .product-image-wrap,
html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .rel-card,
html[data-theme="dark"] .trust-signal-mini,
html[data-theme="dark"] .no-results-box,
html[data-theme="dark"] .cat-card,
html[data-theme="dark"] .mv-sidebar-panel {
    box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
}

/* 4. Sub-sections and hero areas */
html .about-hero,
html .location-section,
html .bl-hero,
html .bd-hero-plain,
html .bd-body,
html .bd-author-card,
html .bd-recent-no-img,
html .bl-featured-no-img,
html .bl-card-no-img,
html .cat-no-image,
html .mcs-body,
html .mv-no-img {
    background: var(--about-hero-bg) !important;
    transition: background-color 0.3s !important;
}

html .timeline::before,
html .detail-heading::after,
html .value-item,
html .contact-info-item,
html .specs-table tr,
html .mcs-header {
    border-color: var(--border-card) !important;
    background-color: transparent !important;
}

html .specs-table tr {
    border-bottom: 1px solid var(--border-card) !important;
}

/* 5. Interactive controls (Selects, inputs, forms) */
html .filter-select,
html .search-input,
html .availability-check,
html .contact-form .form-control,
html .mobile-search-form input {
    background: var(--bg-body) !important;
    border-color: var(--border-card) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s !important;
}

html .availability-check .form-check-input {
    border-color: var(--border-card) !important;
    background-color: transparent !important;
}

html .availability-check .form-check-input:checked {
    background-color: #EE5A1E !important;
    border-color: #EE5A1E !important;
}

/* 6. Brand Elements and Buttons */
html .brand-name,
html .logo-main,
html .mv-sidebar-title,
html .mv-product-name,
html .cat-card-body,
html .mcs-header {
    color: var(--text-primary) !important;
}

html .cat-arrow-icon,
html .mcs-chevron,
html .mv-tab-chevron,
html .rel-arrow-icon,
html .store-arrow-icon,
html .cs-icon,
html .cs-arrow {
    color: var(--text-secondary) !important;
}

html .about-page-wrapper .contact-cta {
    background: var(--topbar-bg) !important;
    color: #fff !important;
}

/* Timeline & Location specifics */
html .timeline-item::before {
    border-color: var(--bg-page) !important;
}

html .map-frame {
    border-color: var(--border-card) !important;
    filter: none !important;
    transition: filter 0.3s, border-color 0.3s !important;
}

html[data-theme="dark"] .map-frame {
    filter: grayscale(0.2) invert(0.9) hue-rotate(180deg) !important;
}

/* HTML-rendered blog content styling */
html .bd-content,
html .bd-content p,
html .bd-content li,
html .bd-content span {
    color: var(--text-secondary) !important;
}

html .bd-content h1,
html .bd-content h2,
html .bd-content h3,
html .bd-content h4,
html .bd-content h5,
html .bd-content h6 {
    color: var(--text-primary) !important;
}

/* Specs table styling */
html .spec-label {
    background: rgba(0, 0, 0, 0.02) !important;
}

html[data-theme="dark"] .spec-label {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Homepage Hero Sidebar overrides */
html .hero-section {
    background: var(--bg-page) !important;
    transition: background-color 0.3s !important;
}

html .category-sidebar {
    background: var(--sidebar-bg) !important;
    border: 1px solid var(--border-card) !important;
}

html .cs-header {
    background: var(--topbar-bg) !important;
    color: var(--topbar-text) !important;
}

html .cs-item {
    color: var(--sidebar-text) !important;
    border-bottom: 1px solid var(--border-card) !important;
}

html .cs-item:hover {
    background: var(--sidebar-item-hover) !important;
}

html .cs-footer {
    background: #EE5A1E !important;
    border-top: none !important;
    color: #ffffff !important;
}

html .cs-footer:hover {
    background: #d44d18 !important;
}

html .mobile-cat-section {
    background: var(--bg-page) !important;
    border-top: 1px solid var(--border-card) !important;
}

/* 7. Footer Theme Overrides */
html .main-footer {
    background-color: var(--footer-bg) !important;
    color: var(--footer-text) !important;
    border-top: 1px solid var(--footer-border) !important;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s !important;
}

html .footer-logo {
    filter: var(--footer-logo-filter) !important;
    transition: filter 0.3s !important;
}

html .brand-name,
html .footer-title {
    color: var(--footer-heading) !important;
}

html .footer-description,
html .footer-social-text,
html .footer-links a,
html .footer-contact li,
html .footer-legal-link,
html .footer-bottom p {
    color: var(--footer-text) !important;
}

html .footer-contact i {
    color: #EE5A1E !important;
}

html .footer-top {
    border-bottom: 1px solid var(--footer-border) !important;
}

html .footer-bottom {
    background-color: var(--nav-dark) !important;
    border-top: 1px solid var(--footer-border) !important;
}

html .social-link {
    border-color: var(--footer-border) !important;
    color: var(--footer-text) !important;
}

html .social-link:hover {
    background-color: rgba(30, 58, 138, 0.05) !important;
}

html[data-theme="dark"] .social-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}