/* 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;
}

/* ==========================================================================
   MOBILE SCROLL PERFORMANCE
   --------------------------------------------------------------------------
   `backdrop-filter: blur()` is one of the most expensive things to repaint
   while scrolling: the browser must re-sample and blur everything behind the
   element on every single frame. ios26.css applies it to common components
   (.card, buttons, inputs, badges, table rows, dropdowns, the scrollbar…),
   but the overrides above repaint those same components with OPAQUE
   backgrounds — so the blur is not actually visible, yet it still forces a
   full-region GPU repaint each frame. On mobile GPUs that is what makes
   scrolling stutter / drop below 60fps.

   Disabling it at phone/tablet widths restores smooth scrolling with no
   visible change, because the elements are already opaque. The genuinely
   translucent glass classes (.glass / .liquid-glass / .ios-navbar) are not
   used in any template, so they are unaffected either way.
   ========================================================================== */
@media (max-width: 768px) {
    .glass, .glass-light, .glass-dark,
    .liquid-glass, .liquid-glass-strong, .liquid-glass-dark,
    .glass-card, .glass-card-light, .glass-card-dark,
    .card, .card:hover,
    .btn-primary, .btn-primary:hover,
    .btn-secondary, .btn-secondary:hover,
    .btn-outline-primary, .btn-outline-primary:hover,
    .form-control, .form-control:focus,
    .form-select, .form-select:focus,
    .ios-navbar, .ios-navbar.scrolled,
    .modal-content, .modal-backdrop,
    .table thead, .table tbody tr, .table tbody tr:hover,
    .badge, .alert,
    .nav-tabs, .nav-tabs .nav-link.active,
    .breadcrumb,
    .pagination .page-link,
    .progress,
    .dropdown-menu, .dropdown-item:hover,
    .tooltip-inner,
    .blur-backdrop,
    ::-webkit-scrollbar-thumb {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}