/* =============================================================
   Combined stylesheet: aaAsCustomCss.css + newAreaHTMLRO.css
   Merge rules:
   - Keep broad body & navigation styling from aaAsCustomCss.css
   - Bring in color variables & specific component styles from newAreaHTMLRO.css
   - Strip top-level body/html overrides from newAreaHTMLRO.css to preserve base layout
   ============================================================= */



/* --- Imported :root variables from newAreaHTMLRO.css --- */
:root {
            /* Primary Colors */
            --primary-color: #005F6E;        /* Teal - main brand color */
            --secondary-color: #6e0f31;      /* Burgundy - accent color */
            --accent-color: #ED8B00;         /* Orange - highlights */
            --accent-color-dark: #C57300;    /* Darker orange - for gradients */
            --success-color: #1ABC9C;        /* Turquoise - positive/success */
            --success-color-dark: #16A085;  /* Darker turquoise - for gradients */
            --dark-color: #1A171B;           /* Dark - text/headers */
            
            /* Neutral Colors */
            --neutral-1: #999967;            /* Olive grey */
            --neutral-2: #CCCCCC;            /* Light grey */
            --neutral-3: #CCCC9A;            /* Beige grey */
            
            /* Additional Colors */
            --positive-color: #3D9919;       /* Green - positive indicators */
            --warm-color: #B67E7F;           /* Dusty rose */
            --light-color: #BEB2B3;          /* Light mauve grey */
            
            /* Applied Colors */
            --background-color: #f8f9fa ;
            --text-color: var(--dark-color);
            --text-muted: #6c757d;
            --border-color: #dee2e6;
            --link-color: var(--primary-color);
            --link-hover: var(--secondary-color);
            --primary-color-bright: var(--primary-color);
            --secondary-color-bright: var(--secondary-color);
            
            /* Component Colors */
            --card-bg: white;
            --card-shadow: rgba(0,0,0,0.035);
            --header-color: var(--dark-color);
            --table-header-bg: #f8f9fa;
            --table-border: var(--border-color);
            
            /* Performance Bar Colors */
            --bar-gradient-start: var(--positive-color);
            --bar-gradient-mid: var(--accent-color);
            --bar-gradient-end: var(--secondary-color);
            --bar-bg: #e9ecef;
            
            /* Icon Colors */
            --icon-bg: var(--primary-color);
            --icon-color: white;
            --icon-filter: brightness(0) saturate(100%) invert(21%) sepia(64%) saturate(1051%) hue-rotate(156deg) brightness(95%) contrast(101%);
            --icon-filter-bright: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(2000%) hue-rotate(150deg) brightness(140%) contrast(100%);
            --icon-filter-secondary: brightness(0) saturate(100%) invert(13%) sepia(68%) saturate(2526%) hue-rotate(327deg) brightness(89%) contrast(101%);
            --icon-filter-secondary-bright: brightness(0) saturate(100%) invert(40%) sepia(68%) saturate(2526%) hue-rotate(327deg) brightness(140%) contrast(101%);
            
            /* RGB values for opacity support */
            --primary-color-rgb: 0, 95, 110;
            --secondary-color-rgb: 110, 15, 49;
            --success-color-rgb: 26, 188, 156;
            --accent-color-rgb: 237, 139, 0;
            --text-muted-rgb: 108, 117, 125;
            
            /* Highlighter filters - will be dynamically updated */
            /* Default filter for success-color (#1ABC9C) */
            --highlighter-filter: brightness(0) saturate(100%) invert(58%) sepia(97%) saturate(1959%) hue-rotate(133deg) brightness(92%) contrast(90%);
            /* Default filter for accent-color (#ED8B00) */
            --highlighter-filter-dark: brightness(0) saturate(100%) invert(51%) sepia(100%) saturate(1068%) hue-rotate(14deg) brightness(101%) contrast(104%);
            
            /* Derived tone colors for SVG icons - more dramatic differences */
            --tone-dark: color-mix(in srgb, var(--primary-color) 40%, black);
            --tone-light: color-mix(in srgb, var(--primary-color) 60%, white);
            --tone-darkest: color-mix(in srgb, var(--primary-color) 20%, black);
            --tone-lightest: color-mix(in srgb, var(--primary-color) 10%, white);
        }



/* --- Base styles from aaAsCustomCss.css (foundation) --- */


/* Root Variables for Colors, Breakpoints, and Fonts */
:root {
    --blue: #14799f;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #6e0f31;
    --orange: #ED8B00;
    --yellow: #ffc107;
    --green: #1ABC9C;
    --teal: #1ABC9C;
    --cyan: #005F6E; /* Cyan color for borders */
    --white: #fff;
    --gray: #999967 ;
    --gray-dark: #343a40;
    --primary: #14799f;
    --secondary: #999967;
    --success: #005F6E;
    --info: #1ABC9C;
    --warning: #ED8B00;
    --danger: #6e0f31;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Universal Box Sizing */
*,
*::after,
*::before {
    box-sizing: border-box;
}

/* Base HTML Styles */
html {
    font-family: var(--font-family-sans-serif);
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Adjust Body Padding to Prevent Content Being Hidden Behind Fixed Navbar */
body {
    padding-top: 80px; /* Adjust based on navbar height */
	/* color: #343a40; /* Dark gray color */
    font-size: 85%;           /* 90% of normal font size */
    line-height: 1.15;          /* 1.1x line spacing */
    color: rgba(0, 0, 0, 0.80); /* 85% darkness for text color */
	margin: 0;
    overflow-x: hidden; /* Prevent horizontal scroll from 100vw full-bleed sections */
	
	font-family: 'Tahoma', sans-serif;
    font-size: 90%;          /* Slightly smaller font for a softer look */
    line-height: 1.4;        /* Increase line height for better readability */
    color: rgba(0, 0, 0, 0.85); /* 85% black for a softer tone */    

}

a {
  color: #1ABC9C; /* Use Bootstrap's info color */
  text-decoration: none !important; /* Remove underline */
}

a:hover {
  color: var(--bs-info); /* Keep the info color on hover */
  /* text-decoration: underline !important;  Add underline on hover */
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Raleway, sans-serif;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2
}

.h1,
h1 {
    font-size: 2.2rem
}

.h2,
h2 {
    font-size: 2rem
}

.h3,
h3 {
    font-size: 1.75rem
}

.h4,
h4 {
    font-size: 1.5rem
}

.h5,
h5 {
    font-size: 1.25rem
}

.h6,
h6 {
    font-size: 1rem
}

/* Full-Width Page Title Section with Background */
.page-title-wrapper {
	margin-top: 60px; 
    background-color: #f5f5f5; /* Light gray background */
    width: 100%; /* Full width background */
    padding: 10px 0; /* Top and bottom padding for spacing */
    position: relative; /* Ensure proper positioning */
    margin-bottom: 20px; /* Space below the section */
}


#page-title {
    position: relative;
    padding: 50px 0;
    background-color: #f5f5f5;   
}

#page-title .container {
    position: relative
}

#page-title h1 {
	font-family: Raleway, sans-serif;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 1px;
    color: #333;
    font-size: 28px;
    text-transform: uppercase;
    text-align: left
}

#page-title span {
    display: block;
    margin-top: 10px;
    font-weight: 300;
    color: #777;
    font-size: 18px
}

.breadcrumb {
    position: absolute !important;
    width: auto !important;
    top: 50% !important;
    left: auto !important;
    right: 15px !important;
    margin: -10px 0 0 0 !important;
    background-color: transparent !important;
    padding: 0 !important;
    font-size: 12px
}

body.stretched .container-fullwidth .breadcrumb {
    right: 60px !important
}


.page-title {
    max-width: 1300px; /* Center content */
    margin: 0 auto; /* Horizontally center content */
    text-align: left; /* Center the title */
}

.page-title h1 {
    font-size: 2.5rem; /* Large title font size */
    font-weight: 700; /* Bold font weight */
    color: #333; /* Dark text color */
    margin-bottom: 10px; /* Spacing between title and breadcrumbs */
}

/* Right-Aligned Breadcrumbs */
.page-title .breadcrumbs {
    font-size: 1rem; /* Normal font size */
    color: #6c757d; /* Muted gray color */
    text-align: right; /* Align breadcrumbs to the right */
    margin-top: 10px; /* Add space above breadcrumbs */
}

.page-title .breadcrumbs a {
    color: black !important; /* Info color (light blue) for links */
    text-decoration: none; /* Remove underline */
    transition: color 0.2s ease-in-out; /* Smooth transition on hover */
}

.page-title .breadcrumbs a:hover {
    color: #0056b3; /* Darker blue color on hover */
    text-decoration: underline; /* Underline on hover */
}

.page-title .breadcrumbs span {
    color: #6c757d; /* Gray color for current page */
}


/* Desktop-only elements visibility - aligned with mobile nav breakpoint */
.desktop-only {
    display: block;
}

@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-title-wrapper {
        padding: 20px 0; /* Reduce padding on smaller screens */
    }

    .page-title h1 {
        font-size: 2rem; /* Smaller title font on mobile */
    }

    .page-title .breadcrumb {
        display: none; 
    }
}

/* Custom Styles for the Navigation Bar */

/* Navbar Initial State */
.topNav-header .topNav-navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    background-color: transparent; /* Make the navbar transparent initially */
    transition: background-color 0.6s ease-in-out, padding 0.6s ease-in-out;
    border: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
	padding-left: 15px;
	padding-right: 15px;
}

/* Navbar Styling - duplicate removed */

/* Custom Container for Navbar */
.custom-navbar-container {
    max-width: 1300px; /* Limit the navbar content width */
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto; /* Center the container */
}

/* Responsive Adjustments */
@media (min-width: 1200px) {
    .custom-navbar-container {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 768px) {
    .topNav-header .topNav-navbar {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    .custom-navbar-container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* Navbar When Scrolled */
.topNav-header .topNav-navbar.navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.975); /* 97.5% white opacity - only 2.5% transparent */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Navbar Shrink on Scroll */
.topNav-header .topNav-navbar.navbar-shrink {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: rgba(255, 255, 255, 0.975) !important; /* 97.5% white opacity - only 2.5% transparent */
}

/* Logo Image Shrink */
.navbar-shrink .navbar-brand img {
    height: 60px;
    transition: height 0.8s ease-in-out;
}

/* Navbar Brand Styling */
.navbar-brand {
    font-size: 1.5rem; /* Navigation heading font size */
    color: var(--white);
    transition: color 0.6s ease-in-out;
    font-family: 'Raleway', sans-serif; /* Ensure consistency with font family */
}

.navbar-brand:hover {
    color: var(--light);
}

/* Ensure the container uses flexbox and aligns items to the bottom */
#primaryHeaderMenu {
    display: flex;
    align-items: flex-end;  /* Align nav items to the bottom of the navbar */
    justify-content: flex-end;  /* Align items to the right */
    list-style-type: none; /* Remove default bullets for list */
    margin: 0;
    padding: 0;
}

#primaryHeaderMenu > li {
    margin-right: 15px; /* Extra space between items */
}

/* Navbar Link Styles */
.nav-link {
    font-size: 0.95rem;
    padding: 0;
    /* padding-right: 0px !important; /* Force the padding on the right */
    color: var(--white);
    transition: color 0.3s ease, background-color 0.3s ease;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #1ABC9C;
}

/* Active Navbar Link */
.nav-link.active {
    background-color: var(--primary);
    color: var(--white);
    font-weight: bold;
}

/* Disabled Navbar Link */
.nav-link.disabled {
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

/* Remove Dropdown Arrows */
.navbar .dropdown-toggle::after {
    display: none !important;	
}

/* Navbar Text Customization */
.navbar-text {
    font-size: 1.1rem;
    color: var(--white);
}

/* Adjust Close Button Styling */
.topNav-close-search {
    background: transparent;
    border: none;
    padding: 0.2rem;
    cursor: pointer;
    font-size: 1rem; /* Adjust size of close icon */
    color: #6c757d; /* Neutral color for the close button */
}

.topNav-close-search:hover {
    color: #1ABC9C; /* Optional: Add hover color change */
}

/* Adjust Search Icon Size */
.topNav-search-icon {
    color: #6c757d;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2rem; /* Make search icon smaller */
    padding: 0.25rem; /* Slightly reduce padding */
}

.topNav-search-icon:hover {
    color: #1ABC9C; /* Color change on hover */
}

/* Dropdown Menu Styles */
.dropdown-menu {
    position: absolute;
    top: 100%; /* Directly below the toggle */
    left: 0;
    padding: 25px 5px 5px 5px;
    border: none; /* Removes existing borders */
    border-radius: 0; /* Removes border radius */
    box-shadow: none; /* Removes box-shadow */
    margin-top: 0; /* Ensure no margin that could cause gaps */
    background-color: white; /* Ensure background color is set */
	border: none !important;
}

/* The border that will appear above the first dropdown item */
.dropdown-border {
    position: absolute;
    top: 0; /* Place it at the top of the dropdown item */
    left: 0;
    width: 100%;
    height: 2px; /* Thickness of the border */
    background-color: var(--orange); /* Orange color */
    z-index: 10; /* Ensure it appears above the dropdown item */
    pointer-events: none; /* Do not interfere with pointer events */
    transition: width 0.2s ease; /* Animate the width */
}

 /* Position the cyan border right above the first dropdown item */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0px; 
    left: 0;
    width: 100%;
    height: 2px; 
    background-color: var(--orange); 
    z-index: 10; 
    pointer-events: none; 
    transition: top 0.2s ease, background-color 0.2s ease, width 0.2s ease; 
} 

/* Dropdown Items */
.dropdown-menu .dropdown-item {
    position: relative;
    z-index: 1;
    font-size: 0.75rem; /* Same as nav-link */
    padding-left: 5px; /* Set left padding to 5px */
    padding-top: 0.75rem;
    padding-right: 1rem;
    padding-bottom: 0.75rem;
    color: grey;
    background-color: transparent; /* Ensure transparent background */
    border: none; /* Remove borders */
}

/* Remove extra padding from the first item */
.dropdown-menu .dropdown-item:first-child {
    padding-top: 0.75rem; /* Adjust if needed */
}

/* Hover effect for dropdown items */
.dropdown-item:hover {
    background-color: rgba(26, 188, 156, 0.1); /* Light cyan hover background */
    color: #1ABC9C; /* Cyan text color on hover */
}

/* Override for section spy dropdown menu - accent color with no indent */
#sectionSpyDropdownMenu .dropdown-item:hover {
    background-color: var(--accent-color) !important;
    color: white !important;
    padding-left: 1rem !important;
    transform: none !important;
}

#sectionSpyDropdownMenu .dropdown-item:hover i {
    color: white !important;
}

/* Responsive Adjustments for Navbar */
@media (max-width: 768px) {
    /* Set Navbar Background to 100% White in Mobile Mode */
    .topNav-header .topNav-navbar {
        background-color: var(--white) !important; /* Ensures the background is white */
        transition: background-color 0.6s ease-in-out; /* Maintain smooth transition */
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
        text-align: center; /* Center-align links in mobile view */
    }

    .dropdown-menu {
        left: 0 !important;
        padding-top: 0; /* Remove padding-top in mobile view */
        background-color: var(--white); /* Ensure dropdown menus are also white */
    }

    .dropdown-menu::before {
        top: 0; /* Adjust cyan border position */
    }
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;	
    bottom: 1rem;
    right: max(1rem, calc(100vw - 100% - 1rem)); /* Viewport-based, stays within visible area */
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.1); /* Light grey background */
    border: 2px solid transparent;
    border-radius: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7; /* Light opacity */
    transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    z-index: 1000;
}

.scroll-to-top:hover {
    opacity: 1; /* Fully visible on hover */
    border-color: #1ABC9C; /* Orange border on hover */
    background-color: rgba(0, 0, 0, 0.2);/* Slightly lighter background on hover */
}

.scroll-to-top.show {
    opacity: 1; /* Fully visible when "show" class is added */
}

/* Nav Tree Styles */
.nav-tree {
    position: relative;
    margin-bottom: 40px;
}

.nav-tree ul {
    margin-bottom: 0;
    list-style: none;
}

.nav-tree > ul {
    margin: -8px 0;
}

.nav-tree li {
    position: relative;
}

.nav-tree li a {
    display: block;
    padding: 8px 0;
    color: #333;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: 'Raleway', sans-serif;
    text-decoration: none; /* Ensure no underline */
}

.nav-tree li a:hover,
.nav-tree li.active > a,
.nav-tree li.current > a {
    color: #1abc9c !important;
}

.nav-tree li i {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.nav-tree li i:not(.icon-angle-down) {
    margin-right: 8px;
    position: relative;
    top: 1px;
}

.nav-tree li a i.icon-angle-down {
    width: auto;
    font-size: 12px;
    margin-left: 2px;
}

.nav-tree ul ul {
    display: none;
}

.nav-tree li.current > ul {
    display: block;
}

.nav-tree ul ul a {
    font-size: 12px;
    padding: 6px 0;
    letter-spacing: 1px;
    font-family: 'Lato', sans-serif;
}

.nav-tree ul ul a i.icon-angle-down {
    font-size: 12px;
}

.nav-tree ul ul a {
    padding-left: 20px;
}

.nav-tree ul ul ul a {
    padding-left: 40px;
}

.nav-tree ul ul ul ul a {
    padding-left: 60px;
}

.nav-tree ul ul ul ul ul a {
    padding-left: 80px;
}

/* @font-face Declarations for Raleway */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCkITw.woff2') format('woff2');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCkITw.woff2') format('woff2');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCkITw.woff2') format('woff2');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCkITw.woff2') format('woff2');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCkITw.woff2') format('woff2');
}

/* Additional Custom Styles */

/* Custom Styling for div.t */
div.t {
    font-size: 500%;
    font-family: 'Century Gothic', sans-serif;
    color: black;
    text-align: left;
}

/* BM Styling */
#bm {
    background-size: 100% 130%;
    margin: 0 auto;
}

#bmgraphs,
#bmconvo,
#bmidea {
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 50% 50%;
    margin: 0 auto;
}

/* Heatmap Menu Styling */
#heatMapMenu {
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
    width: 150px;
    padding: 5px;
}

#heatMapMenu div {
    display: block;
}

#heatMapMenu input[type="radio"],
#heatMapMenu label {
    display: inline;
    color: white;
}

/* Search Container Padding */
.search-container {
    padding-left: 40px;
    padding-right: 40px;
}

/* Option Image Styling */
.option-image {
    width: 5px;
    height: 5px;
    margin-right: 5px;
}

/* Logo SVG */
#asLogoSVG {
    width: 40%;
}

/* Lottie Animation Styling */
.lottie-animation {
    height: 200px;
    margin: 50px;
}

@media (max-width: 767px) { /* Phone */
    .lottie-animation {
        margin: 0px;
        width: 100%;
    }

    .selectpicker {
        text-align: left;
        width: 100%;
    }

    .dropdown-menu {
        left: 0 !important;
        transform: translate(0, 0) !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) { /* Tablet */
    .lottie-animation {
        height: 250px;
        margin: 30px;
    }
}

/* Responsive Logo Scaling */
@media (max-width: 1080px) {
    .search-container {
        padding-left: 10px;
        padding-right: 10px;
    }
    #asLogoSVG {
        width: 60%;
    }
}

@media (max-width: 1024px) {
    .search-container {
        padding-left: 5px;
        padding-right: 5px;
    }
    #asLogoSVG {
        width: 65%;
    }
}

@media (max-width: 900px) {
    .search-container {
        padding-left: 2px;
        padding-right: 2px;
    }
    #asLogoSVG {
        width: 70%;
    }
}

@media (max-width: 768px) {
    .search-container {
        padding-left: 0px;
        padding-right: 0px;
    }
    #asLogoSVG {
        width: 80%;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 576px) {
    .search-container {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    #asLogoSVG {
        width: 80%;
        justify-content: center;
        align-items: center;
    }
}

/* Single-Line Textarea Styling */
.single-line-textarea {
    width: 100%;
    height: 60px;
    padding: 10px;
    resize: none; /* Disable resize */
    overflow: hidden; /* Hide scrollbar */
    line-height: 66px;
}

/* Search Bar */
.searchBar {
    width: 100%;
    height: 66px;
    font-size: 18px;
    border: 0px solid lightgrey;
    border-bottom: 2px solid #ED8B00;
    background-color: #f1f1f1;
    outline: none;
    border-radius: 2px;
    padding: 4px;
    padding-left: 10px;
}

/* Responsive Result Parent Container */
#respResultParent {
    height: 300px;
    z-index: 9999;
    position: relative;
    display: none;
    overflow-y: auto;
}

/* Mapbox Styling */
.mapboxgl-ctrl-geocoder {
    z-index: 10 !important;
}

.mapboxgl-ctrl-geocoder--suggestions {
    margin-top: 0 !important;
    position: relative !important;
}

/* Loading Dots Animation */
@keyframes dots {
    0%, 20% {
        content: '.';
        color: #ccc;
        text-shadow: none;
        font-size: 1.5em;
    }
    40% {
        content: '..';
        color: #ccc;
        font-size: 1.5em;
    }
    60% {
        content: '...';
        color: #ccc;
        font-size: 1.5em;
    }
    80%, 100% {
        content: '';
        color: #ccc;
        text-shadow: 0px 0px 5px #ccc;
        font-size: 1.5em;
    }
}

/* Travel Link */
.travel {
    color: #1ABC9C;
    text-decoration: none;
    cursor: pointer;
}

.travel:hover {
    color: black;
}

/* Table Loading Dots */
td.loading:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.2em;
    vertical-align: middle;
    animation: dots 1.4s infinite;
}

/* Custom Accordion */
.custom-accordion .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    padding: 0 15px;
    margin-top: 8px;
}

.custom-accordion .accordion-item.active .accordion-content {
    max-height: 500px; /* Adjust based on content */
}

.accordion-title {
    cursor: pointer;
    padding: 25px;
    background-color: #f9f9f9;
    border: none;
    text-align: left;
    outline: none;
    width: 100%;
    transition: background-color 0.3s, font-size 0.3s;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    border-radius: 5px 5px 0 0;
}

.accordion-title:hover {
    background-color: #f1f1f1;
}

.accordion-item.active .accordion-title {
    font-size: 1.15em;
    color: #1ABC9C;
}

.accordion-arrow {
    transition: transform 0.4s ease-in-out, color 0.4s ease-in-out;
    color: #333;
}

.accordion-item.active .accordion-arrow {
    transform: rotate(90deg);
    color: #1ABC9C;
}

.scrollable-table {
			max-width: 100%;  /* Set max width to the screen width */
			overflow-x: auto; /* Enable horizontal scrolling */
			-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
		}
		
.video-container{
  width: 100%;
  max-width: 800px;
  height: 400px; 
  margin: 0 auto; 
}
.video-responsive{
	overflow:hidden;
	padding-bottom:56.25%;
	position:relative;
	height:0;
}
.video-responsive iframe{
	left:0;
	top:0;
	height:400px;
	margin: auto;
	width:100%;
	position:absolute;
}

.step {
	text-align: center;
	margin: 20px 0;
}
.icon-step {
	background-color: #14799f;
	color: white;
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 50%;
	display: inline-block;
	font-size: 24px;
	margin-bottom: 10px;
}
.ccPlanToggle .btn-primary {
	background-color: #14799f !important;
	border-color: #14799f !important;
}
.ccPlanToggle .btn-primary.active {
	background-color: #14799f !important;
	border-color: #14799f !important;
}
.ccPlanToggle .btn-default {
	background-color: #fff !important;
	border-color: #ccc !important;
}

.accordion .card {
	border: none;
	border-radius: 0;
	margin-bottom: 1rem;
	background-color: transparent;
}

.accordion .card-header {
	background-color: #f8f9fa;
	border: 1px solid #C2C2C2;
	border-bottom: none; /* Remove bottom border here */
	border-radius: 0.25rem;
	padding: 0.75rem 1.25rem;
	position: relative; /* Ensure it stays on top */
	z-index: 1; /* Ensure it stays on top */
}

.accordion .btn-link {
	font-weight: 700;
	color: #1ABC9C;
	text-decoration: none;
	width: 100%;
	text-align: left;
	padding: 0;
}

.accordion .btn-link:hover {
	text-decoration: none;
}

.accordion .card-body {
	border: 1px solid #C2C2C2;
	border-top: none;
	padding: 1rem 1.25rem;
}

.accordion .collapse {
	border-top: 1px solid #C2C2C2; /* Add top border to collapsed content */
}


/* Optional: Center content vertically and horizontally */
.carousel-item {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.carousel-section {
  margin: 0 10px;
}

.carousel-section img {
  max-width: 75px;
  height: auto;
}

.carousel-section span {
  font-size: 32px;
  color: #6e0f31;
}

.carousel-section div {
  font-size: 16px;
}

.separator {
  font-size: 24px;
  align-self: center;
}

/* Base Font Styling with Tahoma */

/* Soft Heading Styling */
h1, h2, h3 {
    font-family: 'Tahoma', sans-serif;
    color: rgba(0, 0, 0, 0.85); /* Use a slightly softer black for text */
    margin-bottom: 15px;
}

/* Paragraph Styling */
p {
    font-size: 95%; /* Slightly smaller paragraph text */
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.75); /* Even lighter color for paragraph text */
    margin-bottom: 20px;
}

/* Button Styling for a Soft Theme */
button {
    font-family: 'Tahoma', sans-serif;
    background-color: #e0e0e0; /* Light grey background */
    color: #333;               /* Darker text color for contrast */
    border-radius: 10px;        /* Rounded corners for a soft feel */
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #d3d3d3; /* Slightly darker on hover for contrast */
}

.marker {
	background-size: cover;
	background-color: red; 
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
	}

.transport-popup .mapboxgl-popup-content {
  width: 400px;	
  overflow-x: auto;			 
}

.ccMarker {
  display:flex;
  justify-content:center;
  align-items:center;
  box-sizing:border-box;
  width: 30px;
  height: 30px;
  color:#fff;
  background: #693;
  border:solid 2px;
  border-radius: 50%;
  box-shadow:0 0 2px #000;
  cursor: pointer;	
  transform-origin:0 0;
  transform: rotateZ(-135deg);
}

.ccMarker b { color: white; }
.transparent-background { background-color: rgba(255, 255, 255, 0.2);}

/* Show abbreviations on small screens */
@media (max-width: 600px) {
  .state-button .full-name {
	display: none;
  }
  .state-button .abbreviation {
	display: inline;
  }
  .desktop-only {
	  display: none; /* Hide full text on mobile */
  }
  .mobile-only {
	  display: inline; /* Show shortened text on mobile */
   }		

}


/* Show full names on larger screens */
@media (min-width: 601px) {
  .state-button .full-name {
	display: inline;
  }
  .state-button .abbreviation {
	display: none;
  }

 .desktop-only {
	  display: inline; /* Hide full text on mobile */
  }

  .mobile-only {
	  display: none; /* Show shortened text on mobile */
   }			

}




/* --- Component & object styles from newAreaHTMLRO.css (with body/html removed) --- */


        /* Duplicate color scheme :root removed (already defined at top) */

        
        /* Dark Mode Variables */
        body.dark-mode {
            /* Keep the theme colors from light mode - don't override them
               This allows color themes to work properly in dark mode */
            
            /* Only override text/background colors for dark mode readability */
            --dark-color: #E8E8E8;           /* Light text for dark background */
            
            /* Neutral Colors for dark mode */
            --neutral-2: #6B6B6B;            /* Darker grey for dark mode */
            
            /* Applied Colors */
            --background-color: #1a1a1a;
            --text-color: #E8E8E8;
            --text-muted: #B0B0B0;
            --border-color: #333333;
            --link-color: var(--primary-color-bright);
            --link-hover: var(--secondary-color);
            --primary-color-bright: color-mix(in srgb, var(--primary-color) 60%, white 40%);
            --secondary-color-bright: color-mix(in srgb, var(--secondary-color) 60%, white 40%);
            
            /* Component Colors */
            --card-bg: #242424;
            --card-shadow: rgba(0,0,0,0.5);
            --header-color: #F0F0F0;
            --table-header-bg: #2A2A2A;
            --table-border: #404040;
            
            /* Performance Bar Colors */
            --bar-gradient-start: var(--positive-color);
            --bar-gradient-mid: var(--accent-color);
            --bar-gradient-end: var(--secondary-color);
            --bar-bg: #404040;
            
            /* Icon Colors */
            --icon-bg: var(--primary-color);
            --icon-color: #1a1a1a;
            /* Icon filters will be set by theme - don't override here */
            
            /* RGB values for opacity support in dark mode */
            --primary-color-rgb: 0, 179, 204;
            --text-muted-rgb: 176, 176, 176;
            
            /* Derived tone colors for SVG icons - dark mode - more dramatic differences */
            --tone-dark: color-mix(in srgb, var(--primary-color) 40%, black);
            --tone-light: color-mix(in srgb, var(--primary-color) 60%, white);
            --tone-darkest: color-mix(in srgb, var(--primary-color) 20%, black);
            --tone-lightest: color-mix(in srgb, var(--primary-color) 10%, white);
        }

        
        /* Dark mode specific styles */
        body.dark-mode {
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        
        /* Fix for duplicate items in sales trends dropdown */
        #saleTrendAreas + .dropdown-menu li[data-original-index]::before,
        #saleTrendAreas + .dropdown-menu li[data-original-index]::after {
            content: none !important;
            display: none !important;
        }

        
        /* Prevent duplicate rendering in bootstrap-select */
        .saleTrendAreasWrapper .dropdown-menu {
            transform: none !important;
        }

        
        /* Then apply subtle striping on top */
        body.dark-mode .gridjs-tbody .gridjs-tr:nth-child(odd) {
            background-color: rgba(255, 255, 255, 0.02) !important;
        }

        
        /* Fix gridjs footer in dark mode */
        body.dark-mode .gridjs-footer {
            background-color: var(--card-bg) !important;
            color: var(--text-color);
            border-top-color: var(--table-border);
        }

        
        /* Fix gridjs summary text in footer */
        body.dark-mode .gridjs-summary {
            background-color: transparent !important;
            color: var(--text-color) !important;
        }

        
        /* Education Schools Table - Specific alternating row colors with higher specificity */
        /* Light mode alternating rows */
        #educationSchoolsTableContainer #educationSchoolsTable .gridjs-wrapper .gridjs-tbody .gridjs-tr:nth-child(even),
        #educationSchoolsTableContainer #educationSchoolsTable .gridjs-tbody .gridjs-tr:nth-child(even) .gridjs-td {
            background-color: #f8f9fa !important; /* Light grey */
        }

        
        #educationSchoolsTableContainer #educationSchoolsTable .gridjs-wrapper .gridjs-tbody .gridjs-tr:nth-child(odd),
        #educationSchoolsTableContainer #educationSchoolsTable .gridjs-tbody .gridjs-tr:nth-child(odd) .gridjs-td {
            background-color: #ffffff !important; /* White */
        }

        
        /* Hover effects for education schools table */
        #educationSchoolsTableContainer #educationSchoolsTable .gridjs-tbody .gridjs-tr:hover,
        #educationSchoolsTableContainer #educationSchoolsTable .gridjs-tbody .gridjs-tr:hover .gridjs-td {
            background-color: #e9ecef !important;
        }

        
        /* Transport Stops Table - Same styling as education schools table */
        /* Light mode alternating rows */
        #transportStopsTableContainer #transportStopsTable .gridjs-wrapper .gridjs-tbody .gridjs-tr:nth-child(even),
        #transportStopsTableContainer #transportStopsTable .gridjs-tbody .gridjs-tr:nth-child(even) .gridjs-td {
            background-color: #f8f9fa !important; /* Light grey */
        }

        
        #transportStopsTableContainer #transportStopsTable .gridjs-wrapper .gridjs-tbody .gridjs-tr:nth-child(odd),
        #transportStopsTableContainer #transportStopsTable .gridjs-tbody .gridjs-tr:nth-child(odd) .gridjs-td {
            background-color: #ffffff !important; /* White */
        }

        
        /* Hover effects for transport stops table */
        #transportStopsTableContainer #transportStopsTable .gridjs-tbody .gridjs-tr:hover,
        #transportStopsTableContainer #transportStopsTable .gridjs-tbody .gridjs-tr:hover .gridjs-td {
            background-color: #e9ecef !important;
        }

        
        /* Sales Detail Table - Same styling as education schools table */
        /* Light mode alternating rows */
        #salesDetailTableContainer #salesDetailTable .gridjs-wrapper .gridjs-tbody .gridjs-tr:nth-child(even),
        #salesDetailTableContainer #salesDetailTable .gridjs-tbody .gridjs-tr:nth-child(even) .gridjs-td {
            background-color: #f8f9fa !important; /* Light grey */
        }

        
        #salesDetailTableContainer #salesDetailTable .gridjs-wrapper .gridjs-tbody .gridjs-tr:nth-child(odd),
        #salesDetailTableContainer #salesDetailTable .gridjs-tbody .gridjs-tr:nth-child(odd) .gridjs-td {
            background-color: #ffffff !important; /* White */
        }

        
        /* Hover effects for sales detail table */
        #salesDetailTableContainer #salesDetailTable .gridjs-tbody .gridjs-tr:hover,
        #salesDetailTableContainer #salesDetailTable .gridjs-tbody .gridjs-tr:hover .gridjs-td {
            background-color: #e9ecef !important;
        }

        
        /* Center align buttons in first column of sales detail table */
        #salesDetailTable .gridjs-td:first-child {
            text-align: center !important;
        }

        
        #salesDetailTable .gridjs-td:first-child button {
            min-width: 35px;
            white-space: nowrap;
            overflow: visible !important;
        }

        
        /* Reduce GridJS footer bulk - less padding and height */
        .gridjs-footer {
            padding: 8px 12px !important; /* Reduced from default */
            margin: 0 !important;
            min-height: auto !important;
            border-top: none !important; /* Remove the grey line */
        }

        
        /* Compact pagination */
        .gridjs-pagination {
            padding: 4px 0 !important; /* Reduced padding since grey line is removed */
            margin: 0 !important;
            gap: 4px !important;
        }

        
        /* Smaller pagination buttons */
        .gridjs-pagination button {
            padding: 4px 10px !important;
            margin: 0 2px !important;
            font-size: 0.85rem !important;
            min-height: auto !important;
            line-height: 1.2 !important;
        }

        
        /* Reduce summary text spacing */
        .gridjs-summary {
            margin: 0 !important;
            padding: 0 !important;
            font-size: 0.85rem !important;
            line-height: 1.4 !important;
        }

        
        /* Ensure footer container is compact */
        .gridjs-footer > div {
            padding: 0 !important;
            margin: 0 !important;
        }

        
        /* Fix gridjs pagination pages */
        body.dark-mode .gridjs-pages {
            background-color: transparent !important;
        }

        
        /* GridJS table header styles for all tables */
        .gridjs-thead,
        .gridjs-thead .gridjs-tr,
        .gridjs-thead .gridjs-th {
            background-color: #f5f5f5 !important;
            color: #333 !important;
            font-weight: 600 !important;
        }


        /* Tabulator dark mode styles */
        body.dark-mode .tabulator {
            background-color: var(--card-bg);
            border-color: var(--border-color);
        }

        
        /* Dark mode scrollbar styling */
        body.dark-mode .main-summary::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        
        /* Population count text in dark mode - use accent color */
        body.dark-mode #outPersonsLatestEst {
            color: var(--accent-color) !important;
        }


        /* Metric icon styling */
        .metric-icon-box {
            width: 24px;
            height: 24px;
            background: #e0e0e0;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3px;
        }

        
        .metric-icon-svg {
            width: 17px;
            height: 17px;
            /* Use color scheme variable for SVG color */
            filter: var(--icon-filter);
            transition: filter 0.3s ease;
        }

        
        /* Dark mode metric icons */
        body.dark-mode .metric-icon-box {
            background: rgba(255, 255, 255, 0.226);
        }

        
        /* Get My Report button styling */
        /* merged into canonical get-report-btn below */

        
        /* Button Carousel Styles */
        .button-slider-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            position: relative;
            padding: 20px 0;
            overflow: hidden;
        }

        
        .button-slider {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 100%;
            max-width: 400px;
            height: 80px;
            overflow: hidden;
        }

        
        .slider-btn {
            position: absolute;
            transition: all 0.4s ease;
            white-space: nowrap;
            cursor: pointer;
        }

        
        .slider-btn.center {
            opacity: 1;
            transform: scale(1) translateX(0);
            z-index: 10;
            background-color: #ffffff !important;
            color: var(--accent-color) !important;
            border-color: #000000 !important;
        }

        
        .slider-btn.left {
            transform: scale(0.85) translateX(-120px);
            z-index: 5;
            filter: brightness(0.7) contrast(0.8);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        
        .slider-btn.right {
            transform: scale(0.85) translateX(120px);
            z-index: 5;
            filter: brightness(0.7) contrast(0.8);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        
        /* Carousel Navigation Dots */
        .carousel-dots {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 15px;
            width: 100%;
        }

        
        .carousel-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #cccccc;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        
        .carousel-dot.active {
            background-color: var(--accent-color);
            transform: scale(1.3);
        }

        
        /* Responsive: Vertical layout for tablets and smaller */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Additional dark mode styles */
        body.dark-mode .card {
            background-color: var(--card-bg);
            border-color: var(--border-color);
        }


        /* Dark mode styles for linksContainer buttons */
        body.dark-mode #linksContainer .btn-outline-primary {
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.5) !important;
            background-color: transparent !important;
        }

        
        /* Custom styling for get-report-btn - bright light teal background */
        .get-report-btn {
            background-color: color-mix(in srgb, var(--primary-color) 10%, white 90%) !important; /* Very light tint of primary color */
            border-color: var(--primary-color) !important; /* Use the scheme's primary-color */
            color: var(--accent-color) !important; /* Use accent color (3rd theme color) */
            min-width: 200px !important; /* Fixed minimum width */
            width: 200px !important; /* Constant width */
            white-space: normal !important; /* Allow text wrapping */
            line-height: 1.2 !important; /* Tighter line spacing */
            min-height: 44px !important; /* Ensure minimum touch target */
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
        }

        
        .get-report-btn:hover {
            background-color: color-mix(in srgb, var(--primary-color) 15%, white 85%) !important; /* Slightly more color on hover */
            border-color: var(--primary-color) !important;
            color: var(--accent-color) !important; /* Keep accent color on hover */
        }

        
        .get-report-btn:active,
        .get-report-btn:focus,
        .get-report-btn.active {
            background-color: color-mix(in srgb, var(--primary-color) 15%, white 85%) !important; /* Remove blue click effect */
            border-color: var(--primary-color) !important;
            color: color-mix(in srgb, var(--primary-color) 80%, black 20%) !important;
            box-shadow: none !important; /* Remove blue focus shadow */
        }

        
        /* Dark mode version */
        body.dark-mode .get-report-btn {
            background-color: transparent !important;
            border-color: white !important;
            color: var(--accent-color) !important; /* Orange text */
        }


        /* Circular button styling */
        .circular-btn {
            width: 33px !important;
            height: 33px !important;
            border-radius: 50% !important;
            padding: 0 !important;
            background-color: color-mix(in srgb, var(--primary-color) 10%, white 90%) !important; /* Same light tint as main button */
            border-width: 1px !important;
            border-style: solid !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
            opacity: 0.85 !important;
        }


        /* Both buttons - turquoise border with increased brightness */
        #leftButton {
            border-color: color-mix(in srgb, var(--success-color) 70%, white 30%) !important;
        }


        #rightButton {
            border-color: color-mix(in srgb, var(--success-color) 70%, white 30%) !important;
        }


        /* All circular button SVGs - match main button text color */
        .circular-btn img {
            filter: var(--icon-filter) !important; /* Use color scheme primary color */
        }


        #leftButton:hover {
            background-color: color-mix(in srgb, var(--primary-color) 15%, white 85%) !important;
            border-color: color-mix(in srgb, var(--success-color) 70%, white 30%) !important;
            transform: scale(1.1) !important;
            opacity: 1 !important;
            box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
        }


        #rightButton:hover {
            background-color: color-mix(in srgb, var(--primary-color) 15%, white 85%) !important;
            border-color: color-mix(in srgb, var(--success-color) 70%, white 30%) !important;
            transform: scale(1.1) !important;
            opacity: 1 !important;
            box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
        }


        .circular-btn:active,
        .circular-btn:focus,
        .circular-btn.active {
            box-shadow: none !important;
        }


        /* Dark mode for circular buttons */
        body.dark-mode .circular-btn {
            background-color: transparent !important; /* Same as main button */
            border-width: 1px !important;
            box-shadow: 0 2px 4px rgba(255,255,255,0.1) !important;
            opacity: 0.85 !important;
        }

        
        /* Dark mode - SVGs use orange to match main button text */
        body.dark-mode .circular-btn img {
            filter: var(--icon-filter-bright) !important; /* Use brighter primary color in dark mode */
        }


        /* Carousel container - prevent text selection during drag */
        #buttonCarousel {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            touch-action: pan-y; /* Allow vertical scroll but handle horizontal swipes */
        }


        /* Carousel dots styling */
        .carousel-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            align-items: center;
        }


        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #dee2e6;
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.5;
        }


        .dot.active {
            background-color: var(--success-color);
            opacity: 1;
            transform: scale(1.2);
        }


        .dot:hover {
            opacity: 0.8;
            transform: scale(1.1);
        }


        /* Dark mode dots */
        body.dark-mode .dot {
            background-color: #6c757d;
        }


        /* Mobile responsive styling */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Very small screens */
        
/* Media query removed - responsive styles should be in main CSS */

        body.dark-mode .alert {
            background-color: var(--card-bg);
            border-color: var(--border-color);
            color: var(--text-color);
        }

        
        /* Dark mode styles for infrastructure container */
        body.dark-mode .infrastructure-container {
            background-color: var(--card-bg);
            color: var(--text-color);
            box-shadow: 0 0.125rem 0.25rem rgba(255,255,255,0.1);
        }

        
        /* Dark mode styles for chart select options */
        body.dark-mode .form-select[id$="ChartSelect"] option {
            background-color: var(--card-bg);
            color: var(--text-color);
        }

        
        /* Page theme toggle button */
        .page-theme-toggle {
            display: none !important;            
            position: fixed;
            bottom: 20px;
            right: 2vw; /* Viewport-based positioning */
            z-index: 10001;
            background-color: var(--card-bg);
            border: 2px solid var(--border-color);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            padding: 0;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px var(--card-shadow);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        
        .page-theme-toggle:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px var(--card-shadow);
        }

        
        .page-theme-toggle .theme-icon {
            width: 24px;
            height: 24px;
            transition: transform 0.3s ease;
            color: var(--text-color);
        }

        
        .page-theme-toggle:hover .theme-icon {
            transform: rotate(20deg);
        }

        
        /* Color scheme toggle button */
        .color-scheme-toggle {
            position: fixed;
            bottom: 20px; /* Same as scroll-to-top initial position */
            right: max(1rem, calc(100vw - 100% - 1rem)); /* Same x-position as scroll-to-top */
            z-index: 10001;
            background-color: var(--card-bg);
            border: 2px solid var(--border-color);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            padding: 0;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px var(--card-shadow);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Move color-scheme-toggle up when scroll-to-top is visible */
        body:has(.scroll-to-top.show) .color-scheme-toggle {
            bottom: 70px; /* Move up to make room for scroll-to-top, but closer */
        }
        
        /* Fallback for browsers that don't support :has() */
        @supports not selector(:has(*)) {
            .scroll-to-top-visible .color-scheme-toggle {
                bottom: 70px; /* Move up to make room for scroll-to-top */
            }
        }

        
        .color-scheme-toggle:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px var(--card-shadow);
        }

        
        .color-scheme-toggle .color-icon {
            width: 24px;
            height: 24px;
            transition: transform 0.3s ease;
            color: var(--text-color);
        }

        
        .color-scheme-toggle:hover .color-icon {
            transform: rotate(20deg);
        }

        
        /* Color scheme panel */
        .color-scheme-panel {
            position: fixed;
            bottom: 80px;
            right: calc(2vw + 60px); /* Positioned to the left of the button, viewport-based */
            z-index: 10000;
            background-color: var(--card-bg);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 6px 20px var(--card-shadow);
            opacity: 0;
            visibility: hidden;
            transform: translateX(20px);
            transition: all 0.3s ease;
            min-width: 250px;
        }

        
        .color-scheme-panel.active {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }

        
        .color-scheme-panel h6 {
            color: var(--header-color);
            margin-bottom: 15px;
            font-size: 0.95rem;
            font-weight: 600;
        }

        
        .color-scheme-panel .form-select {
            margin-bottom: 10px;
        }

        
        .color-scheme-panel .custom-color-tooltip {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: 5px;
        }

        
        /* Mobile responsiveness */
        @media (max-width: 480px) {
            .page-theme-toggle,
            .color-scheme-toggle,
            .scroll-to-top {
                right: max(1rem, calc(100vw - 100% - 1rem)) !important; /* Same x-position for all buttons */
                width: 45px;
                height: 45px;
            }
            
            .color-scheme-panel {
                right: 3vw !important;
                left: 3vw !important;
                width: auto !important;
                min-width: unset !important;
            }
        }

        /* Apply color variables throughout */
        body {
            background-color: var(--background-color);
            color: var(--text-color);
            padding: 20px;
        }

        
        .table-container {
            background: var(--card-bg);
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem var(--card-shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
            display: block;
            visibility: visible;
        }


        .map-container {
            background: var(--card-bg);
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem var(--card-shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        
        /* Borderless map container - no visual styling */
        .map-container-borderless {
            background: transparent;
            border-radius: 0;
            box-shadow: none;
            padding: 0;
            margin-bottom: 2rem;
        }

        
        .table {
            width: 100% !important;
        }

        
        .area-name {
            font-weight: 600;
            color: var(--link-color);
        }

        
        .filter-select {
            border: 1px solid var(--border-color);
            font-size: 0.875rem;
            padding: 0.25rem 0.5rem;
            width: 100%;
        }

        
        .metric-label {
            font-weight: 500;
            color: var(--text-muted);
        }

        
        .value-cell {
            text-align: right;
            font-family: 'Courier New', monospace;
        }

        
        .no-data {
            color: var(--text-muted);
            font-style: italic;
            font-family: inherit;
        }

        
        .table thead th {
            background-color: var(--table-header-bg);
            border-bottom: 2px solid var(--table-border);
            font-weight: 600;
            vertical-align: middle;
            text-align: right;
        }

        
        /* Keep first column (metric column) left-aligned */
        .table thead th:first-child {
            text-align: left;
        }

        
        /* Right-align text within dropdown in table headers */
        .table thead th .filter-select {
            text-align-last: right;
            padding-right: 0.5rem;
            padding-left: 2rem;
        }

        
        /* Override Bootstrap's default dropdown arrow positioning */
        .table thead th .form-select {
            background-position: left 0.375rem center;
            background-size: 16px 12px;
            direction: ltr;
            text-align: right;
            text-align-last: right;
        }

        
        /* Ensure dropdown options are left-aligned for readability */
        .table thead th .filter-select option {
            direction: ltr;
            text-align: left;
        }

        
        /* Right-align area names in table headers */
        .table thead th .area-name {
            display: block;
            text-align: right;
        }

        
        .table tbody tr:hover {
            background-color: var(--table-header-bg);
        }

        
        .section-text {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--text-color);
            background: var(--card-bg);
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem var(--card-shadow);
        }

        
        .summary-text {
            font-weight: 500;
            color: var(--link-color);
            margin-bottom: 1rem;
        }

        
        section {
            padding-top: 2rem;
        }

        
        h2 {
            color: var(--header-color);
            margin-bottom: 1.5rem;
            font-weight: 600;
        }

        
        /* Grid.js table cell tooltip styling */
        .gridjs-wrapper td[title] {
            cursor: help;
            position: relative;
        }

        
        /* Truncate long text in cells */
        .gridjs-wrapper td {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        
        /* Allow stop name and routes columns to expand naturally */
        .gridjs-wrapper td:nth-child(1),
        .gridjs-wrapper td:nth-child(4) {
            white-space: normal;
            line-height: 1.4;
            min-width: 150px;
        }

        
        /* Routes column specific styling */
        .gridjs-wrapper td:nth-child(4) {
            min-width: 200px;
        }

        
        /* Ensure links in cells don't break */
        .gridjs-wrapper td a {
            display: inline-block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        
        /* Style for route count indicator */
        .gridjs-wrapper small.text-muted {
            font-size: 0.75rem;
            opacity: 0.7;
        }

        
        /* Transport popup styling */
        .mapboxgl-popup-content {
            padding: 10px !important;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }


        /* School marker styling */
        .school-marker {
            transition: transform 0.2s ease;
        }

        
        .school-marker:hover {
            transform: scale(1.1);
        }


        /* Schools table button styling */
        .gridjs-wrapper .btn-sm {
            padding: 2px 8px;
            font-size: 11px;
            border-radius: 4px;
        }

        
        /* Center align buttons in first column of schools table */
        #educationSchoolsTable .gridjs-td:first-child {
            text-align: center !important;
        }

        
        /* Remove any pseudo-elements that might show '..' */
        #educationSchoolsTable .gridjs-td:first-child::before,
        #educationSchoolsTable .gridjs-td:first-child::after {
            content: none !important;
        }

        
        /* Ensure button doesn't get truncated */
        #educationSchoolsTable .gridjs-td:first-child button {
            min-width: 35px;
            white-space: nowrap;
            overflow: visible !important;
        }

        
        .mapboxgl-popup-content div {
            font-size: 14px;
            line-height: 1.5;
        }

        
        .mapboxgl-popup-content a:hover {
            text-decoration: underline !important;
        }

        
        /* Keep Mapbox popups in light mode even when page is in dark mode */
        body.dark-mode .mapboxgl-popup-content {
            background-color: white !important;
            color: #1A171B !important; /* Use the original dark text color */
        }

        
        /* Infrastructure section styling */
        .infrastructure-container {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
            padding: 1.5rem;
        }

        
        .infrastructure-container .row {
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;
        }

        
        .infrastructure-container h4 {
            color: #0d6efd;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        
        /* Image wrapper with aspect ratio constraint */
        .infrastructure-container .image-constraint {
            position: relative;
            width: 100%;
            max-height: 0;
            padding-bottom: 56.35%; /* 5.77/10.24 * 100 = 56.35% */
            overflow: hidden;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
        }

        
        .infrastructure-container .image-constraint img {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: auto;
            transform: translateY(-50%);
        }

        
        .infrastructure-container hr {
            margin: 1.5rem 0;
            border-color: #dee2e6;
            opacity: 0.25;
        }

        
        .infrastructure-container a {
            color: #0d6efd;
            text-decoration: none;
        }

        
        .infrastructure-container a:hover {
            text-decoration: underline;
        }


        /* Show More button styling to match existing buttons */
        .show-more-btn {
            background-color: white;
            color: var(--primary-color);
            border: 1px solid var(--success-color);
            border-radius: 20px;
            padding: 6px 16px;
            font-size: 0.875rem;
            font-weight: normal;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-block;
            text-align: center;
            line-height: 1.5;
        }

        
        .show-more-btn:hover {
            background-color: var(--success-color);
            color: white;
        }

        
        .show-more-btn i {
            font-size: 0.75rem;
            transition: transform 0.3s ease;
            margin-left: 6px;
            display: inline-block;
            vertical-align: middle;
        }

        
        .show-more-btn.expanded i {
            transform: rotate(180deg);
        }

        
        /* Dark mode Show More button */
        body.dark-mode .show-more-btn {
            background-color: var(--card-bg);
            color: var(--accent-color);
            border-color: var(--accent-color);
        }

        
        /* Enable horizontal scrolling on mobile */
        
/* Media query removed - responsive styles should be in main CSS */

        .chart-container {
            background: var(--card-bg);
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 0.125rem 0.25rem var(--card-shadow);
            margin-bottom: 2rem;
            min-height: 400px;
        }

        
        .apexcharts-title-text {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
        }

        
        .apexcharts-legend {
            padding: 10px !important;
        }

        
        .apexcharts-tooltip {
            border-radius: 6px !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        }


        .text-container {
            background: var(--card-bg);
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 15px;
            margin-top: 0; /* Ensure no default top margin */
            box-shadow: 0 0.125rem 0.25rem var(--card-shadow);
        }

        
        /* Remove top border radius when performance bar is present */
        .section-performance-bar + .text-container,
        .section-performance-bar + .faq-container {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            margin-top: 0 !important;
            padding-top: 1.5rem; /* Keep internal padding */
        }

        
        /* Specific rule for FAQ containers following performance bars */
        .section-performance-bar ~ [id$="FAQContainer"] {
            margin-top: 0 !important;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        
        /* When FAQ containers are visible and follow performance bar */
        .section-performance-bar + .text-container[style*="display: none"] + [id$="FAQContainer"],
        .section-performance-bar + [id$="FAQContainer"] {
            margin-top: 0 !important;
            border-top-left-radius: 0 !important;
            border-top-right-radius: 0 !important;
        }

        
        /* Ensure no gap between performance bar and next element */
        .section-performance-bar + * {
            margin-top: 0 !important;
        }

        
        /* Make performance bar flush with container below */
        .section-performance-bar {
            margin-bottom: 0 !important;
            border-bottom: 0;
            line-height: 1;
            font-size: 0; /* Eliminate any text spacing */
        }

        
        .faq-container {
            background: var(--card-bg);
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 15px; 
            margin-top: 0 !important; /* Force no gap when following performance bar */
            box-shadow: 0 0.125rem 0.25rem var(--card-shadow);
        }

        
        .faq-container h4 {
            color: var(--header-color);
            margin-bottom: 1rem;
            font-size: 1.2rem;
            font-weight: 600;
        }

        
        /* Ensure all FAQ containers (by ID pattern) also get proper styling */
        [id$="FAQContainer"] {
            background: var(--card-bg);
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 15px;
            margin-top: 0 !important;
            box-shadow: 0 0.125rem 0.25rem var(--card-shadow);
        }

        
        .faq-item {
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        
        .faq-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        
        .faq-question {
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 0.5rem;
        }

        
        .faq-answer {
            color: var(--text-muted);
            line-height: 1.6;
        }

        
        /* Mobile responsive styles */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Fix scrollbar and padding issues */
        * {
            box-sizing: border-box;
        }

        
        /* Prevent horizontal overflow from any element */
        /* Removed global max-width clamp to avoid layout/perf issues */

        
        /* Additional overflow fixes */
        .get-report-btn {
            max-width: calc(100vw - 30px) !important; /* Account for padding */
        }

        
        /* Note: Spotlight elements should be handled in responsive CSS for mobile-only hiding */
        
        .table-container, .gridjs-wrapper {
            max-width: 100vw !important;
            overflow-x: auto !important;
        }

        
        /* Fix Bootstrap container on mobile */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Fix navbar container stretching on mobile - applies to all screen sizes up to 768px */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Tabulator custom styling */
        #transportStopsTableContainer {
            width: 100%;
            overflow-x: auto;
            display: block;
            visibility: visible;
        }

        
        #transportStopsTable {
            width: 100%;
            display: block;
        }

        
        /* Transport table styling */
        #transportTableContainer {
            width: 100%;
            overflow-x: auto;
            display: block;
            visibility: visible;
        }

        
        #transportTableContainer table,
        #transportTableContainer .gridjs-wrapper {
            width: 100%;
        }

        
        /* Education schools table styling */
        #educationSchoolsTableContainer {
            width: 100%;
            overflow-x: auto;
            display: block;
            visibility: visible;
        }

        
        #educationSchoolsTable {
            width: 100%;
            display: block;
        }

        
        #educationSchoolsTable table,
        #educationSchoolsTable .gridjs-wrapper {
            width: 100%;
        }

        
        .tabulator {
            border: 1px solid #dee2e6;
            background-color: #fff;
            font-size: 0.875rem;
            width: 100%;
        }

        
        .tabulator .tabulator-header {
            background-color: #f8f9fa;
            border-bottom: 2px solid #dee2e6;
        }

        
        .tabulator .tabulator-header .tabulator-col {
            background-color: #f8f9fa;
        }

        
        .tabulator-row {
            min-height: 2.5rem;
        }

        
        .tabulator-row:hover {
            background-color: #f8f9fa !important;
        }

        
        /* Responsive collapse styling */
        /* .tabulator-responsive-collapse-toggle duplicate removed */

        
        .tabulator-responsive-collapse-toggle:hover {
            background: #0b5ed7;
        }

        
        .tabulator-responsive-collapse-toggle.open {
            background: #6c757d;
        }

        
        .tabulator-responsive-collapse {
            padding: 10px;
            background: var(--table-header-bg);
            border-top: 1px solid var(--table-border);
        }

        
        .tabulator-responsive-collapse-table {
            width: 100%;
        }

        
        .tabulator-responsive-collapse-table .tabulator-responsive-collapse-table-body .tabulator-responsive-collapse-table-row {
            border-bottom: 1px solid var(--table-border);
            padding: 5px 0;
        }

        
        .tabulator-responsive-collapse-table .tabulator-responsive-collapse-table-body .tabulator-responsive-collapse-table-row .tabulator-responsive-collapse-table-col-title {
            font-weight: bold;
            margin-right: 10px;
            color: var(--text-muted);
        }

        
        /* Tooltip styling */
        .tabulator-tooltip {
            background: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.875rem;
            max-width: 300px;
            word-wrap: break-word;
        }

        
        .tabulator .tabulator-header-filter input,
        .tabulator .tabulator-header-filter select {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            line-height: 1.5;
            border-radius: 0.2rem;
        }

        
        .tabulator-paginator {
            background-color: #fff;
            border-top: 1px solid #dee2e6;
            padding: 0.5rem;
        }

        
        .tabulator-page {
            background: #fff;
            border: 1px solid #dee2e6;
            color: #0d6efd;
        }

        
        .tabulator-page.active {
            background: #0d6efd;
            color: #fff;
        }

        
        .tabulator-page:hover:not(.active) {
            background: #e9ecef;
        }

        
        /* Responsive collapse styling */
        .tabulator-responsive-collapse-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #0d6efd;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 3px;
            cursor: pointer;
        }

        
        .tabulator-responsive-collapse-toggle.open {
            background: #6c757d;
        }

        
        .tabulator-responsive-collapse {
            padding: 10px;
            background: #f8f9fa;
            border-top: 1px solid #dee2e6;
        }

        
        /* Mobile specific styles */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Standouts Section Styles */
        .standouts-container {
            background: var(--card-bg);
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem var(--card-shadow);
            padding: 2rem;
            margin-bottom: 2rem;
        }

        
        .standouts-chart {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        
        .performance-bar-row {
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.6s ease;
        }

        
        .performance-bar-row.animate {
            opacity: 1;
            transform: translateY(0);
        }

        
        .performance-label {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--link-color);
            text-transform: capitalize;
            margin-bottom: 0.125rem;
            cursor: pointer;
            position: relative;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        
        .performance-label:hover {
            color: black;
            text-decoration: underline;
        }

        
        .performance-label:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 0;
            background: #333;
            color: white;
            padding: 0.5rem;
            border-radius: 4px;
            font-size: 0.75rem;
            white-space: nowrap;
            z-index: 1000;
            font-weight: normal;
            text-transform: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        
        .performance-bar-container {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        
        .performance-bar {
            flex: 1;
            height: 10px;
            background: var(--bar-bg);
            border-radius: 3px;
            overflow: hidden;
            position: relative;
        }

        
        .performance-bar-fill {
            height: 100%;
            width: 0%;
            border-radius: 3px;
            position: relative;
            transition: width 2.5s cubic-bezier(0.25, 0.1, 0.25, 1);
            background: var(--success-color);
            overflow: hidden;
        }

        
        /* Create gradient effect using pseudo-element with darkening overlay */
        .performance-bar-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to right, 
                rgba(0, 0, 0, 0) 0%, 
                rgba(0, 0, 0, 0.15) 100%
            );
            pointer-events: none;
        }

        
        /* Dark mode: use orange gradient for performance bars */
        body.dark-mode .performance-bar-fill {
            background: var(--accent-color);
        }

        
        /* Dark mode gradient overlay - slightly different for better visibility */
        body.dark-mode .performance-bar-fill::after {
            background: linear-gradient(to right, 
                rgba(0, 0, 0, 0) 0%, 
                rgba(0, 0, 0, 0.2) 100%
            );
        }

        
        /* Standouts Section specific - darker gradient for performance bars */
        #standoutsSection .performance-bar-fill::after {
            background: linear-gradient(to right, 
                rgba(0, 0, 0, 0) 0%, 
                rgba(0, 0, 0, 0.35) 100%
            );
        }

        
        /* Standouts Section dark mode - even darker gradient */
        body.dark-mode #standoutsSection .performance-bar-fill::after {
            background: linear-gradient(to right, 
                rgba(0, 0, 0, 0) 0%, 
                rgba(0, 0, 0, 0.4) 100%
            );
        }

        
        .performance-score {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text-color);
            font-family: 'Courier New', monospace;
            min-width: 2.5rem;
            text-align: right;
        }

        
        /* Dynamic colors are set via JavaScript based on individual scores */
        
        /* Small Sale Factors Carousel Styles */
        .sale-factors-carousel {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border-color);
        }


        .sale-factors-wrapper {
            overflow: hidden;
            position: relative;
        }


        .sale-factors-track {
            display: flex;
            transition: transform 0.5s ease;
        }


        .sale-factor-item {
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 0 1rem;
            opacity: 0;
            transform: translateY(15px);
            transition: all 0.5s ease;
        }


        .sale-factor-item.animate {
            opacity: 1;
            transform: translateY(0);
        }


        .sale-factor-icon {
            width: 55px;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.5rem;
            color: var(--icon-color);
            font-size: 1rem;
            overflow: visible; /* Allow SVG to be fully visible */
        }


        /* Multi-tone SVG support - let CSS variables in SVG work naturally */
        .sale-factor-svg-multitone,
        .amenity-svg-multitone {
            display: block;
            width: 100%;
            height: 100%;
        }


        .sale-factor-icon {
            width: 60px;  /* Reduced from 80px */
            height: 60px; /* Reduced from 80px */
            overflow: visible;
        }


        /* Remove aggressive overrides - let SVG's internal CSS variables work */
        /* REMOVED: The !important overrides that forced everything to primary-color */

        /* Fallback for img elements */
        .sale-factor-icon img {
            width: 100%;
            height: 100%;
            max-width: 80px;
            max-height: 80px;
            object-fit: contain;
            object-position: center;
        }


        /* Theme SVG images using CSS filters - only for img elements */
        .sale-factor-svg-img {
            /* Use color scheme primary color */
            filter: var(--icon-filter);
            transition: filter 0.3s ease;
        }


        /* Special class for SVGs that use internal CSS variables - no filter */
        .sale-factor-svg-css-vars {
            /* No filter - let the SVG's internal CSS variables handle theming */
            filter: none !important;
            transition: none;
        }


        /* StandoutsSection SVGs - use secondary color */
        #standoutsSection .sale-factor-svg-img {
            filter: var(--icon-filter-secondary);
        }


        /* Dark mode for sale factor SVGs */
        body.dark-mode .sale-factor-svg-img {
            /* Use brighter color scheme primary color in dark mode */
            filter: var(--icon-filter-bright) !important;
        }


        /* Dark mode StandoutsSection SVGs - use brighter secondary color */
        body.dark-mode #standoutsSection .sale-factor-svg-img {
            filter: var(--icon-filter-secondary-bright) !important;
        }


        /* PNG images get a more subtle filter */
        .sale-factor-png-img {
            filter: brightness(0.8) saturate(1.1);
        }


        .sale-factor-text {
            font-size: 0.75rem;
            color: var(--text-muted, #6c757d);  /* Added fallback color matching the root variable */
            line-height: 1.4;
            font-weight: 500;
        }

        /* Removed temp debug override to avoid linter noise; runtime style will be injected from JS when needed */


        /* Ensure tone variables are available */
        :root {
            /* These should already be in your CSS */
            --tone-dark: color-mix(in srgb, var(--primary-color) 40%, black);
            --tone-light: color-mix(in srgb, var(--primary-color) 60%, white);
            --tone-darkest: color-mix(in srgb, var(--primary-color) 20%, black);
            --tone-lightest: color-mix(in srgb, var(--primary-color) 10%, white);
        }


        /* Amenity carousel specific styles */
        .amenity-icon .amenity-svg-multitone {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
        }


        .amenity-icon {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .amenity-icon .icon-content {
            position: relative;
            width: 70px; 
            height: 70px;
            min-width: 40px;  /* guard against collapse on small screens */
            min-height: 40px;
            overflow: visible; /* allow scaled paths to show fully */
        }


        .icon-content .amenity-svg-multitone {
            display: block;
            width: 100%;
            height: 100%;
        }


        /* Fallback icon */
        .fallback-icon {
            font-size: 20px;
            color: var(--primary-color);
        }

        
        /* CSS Custom Properties for Amenity Sizing */
        :root {
            --amenity-box: 70px;
            --amenity-inner: 0.72;
        }


/* Media query removed - responsive styles should be in main CSS */

        /* Mobile-specific adjustments for amenity icons */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Responsive item widths */
        
/* Media query removed - responsive styles should be in main CSS */

/* Media query removed - responsive styles should be in main CSS */

/* Media query removed - responsive styles should be in main CSS */

/* Media query removed - responsive styles should be in main CSS */

/* Media query removed - responsive styles should be in main CSS */

        /* Mobile styles for sale factors */
        
/* Media query removed - responsive styles should be in main CSS */

/* Media query removed - responsive styles should be in main CSS */

        /* Header Section Styles */
        header {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: auto;
            padding: 0 !important;
            margin-bottom: 1.25rem !important;
            margin-top: 1.25rem !important;
        }

        
        header h1 {
            margin-bottom: 0.25rem !important;
            margin-top: 0 !important;
            font-size: 1.75rem !important;
            line-height: 1.2 !important;
        }

        
        header p {
            margin-bottom: 0 !important;
            margin-top: 0 !important;
            font-size: 1.1rem;
            line-height: 1.2 !important;
        }


/* Media query removed - responsive styles should be in main CSS */

        /* Color Scheme Selector Styles */
        .color-scheme-container {
            background: var(--card-bg);
            border-radius: 0.5rem;
            padding: 1rem 1.5rem;
            box-shadow: 0 0.125rem 0.25rem var(--card-shadow);
        }

        
        .custom-color-tooltip {
            margin-top: 0.5rem;
            font-size: 0.875rem;
            padding: 0.5rem 1rem;
            background: var(--neutral-2);
            border-radius: 0.25rem;
            border-left: 3px solid var(--accent-color);
        }

        
        /* Color preview boxes in dropdown */
        .color-preview-container {
            display: flex;
            gap: 3px;
            margin-left: 8px;
            align-items: center;
        }

        
        .color-preview-box {
            width: 12px;
            height: 12px;
            border-radius: 2px;
            border: 1px solid rgba(0,0,0,0.2);
            display: inline-block;
        }

        
        /* Enhanced select styling */
        #colorSchemeSelect {
            min-height: 40px;
        }

        
        .select-option-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        
        /* Section Navigation Toggle Styles */
        .sectionNav {
            display: inline-block;
            padding: 6px 12px;
            margin: 0 4px;
            border-radius: 20px;
            background-color: rgba(255, 255, 255, 0.4) !important;
            backdrop-filter: blur(8px) !important;
            -webkit-backdrop-filter: blur(8px) !important;
            color: var(--text-color);
            border: 2px solid var(--border-color);
            font-size: 0.875rem;
            font-weight: 600;
            transition: all 0.3s ease;
            cursor: pointer;
            user-select: none;
            position: relative;
        }

        
        /* Remove container styling - buttons are independent */
        div[id$="Toggles"] {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        
        /* Hover state - fill with primary color */
        .sectionNav:hover {
            background-color: var(--primary-color);
            color: var(--icon-color);
            border-color: var(--primary-color);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px var(--card-shadow);
        }

        
        /* Active state - outline style with themed text */
        .sectionNav.active {
            background-color: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            color: var(--primary-color) !important;
            border-color: var(--primary-color);
            border-width: 2px;
        }

        
        /* Dark mode - ensure text colors change */
        body.dark-mode .sectionNav {
            background-color: rgba(36, 36, 36, 0.4) !important;
            backdrop-filter: blur(8px) !important;
            -webkit-backdrop-filter: blur(8px) !important;
            color: var(--text-color);
            border-color: var(--border-color);
        }

        
        /* Ensure theme colors are applied correctly */
        .sectionNav {
            color: var(--text-color) !important;
        }

        
        .sectionNav.active {
            color: var(--primary-color) !important;
        }

        
        /* Override any potential wine/burgundy colors */
        .sectionNav.active,
        .sectionNav.active:hover,
        .sectionNav.active:focus {
            color: var(--primary-color) !important;
        }

        
        /* Icon Navigation Styles */
        .iconNav {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            padding: 0;
            margin: 0 2px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            /* Removed backdrop-filter to allow true transparency */
            border: 1px solid rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
            color: var(--text-color);
            box-sizing: border-box;
        }

        
            .iconNav:hover {
            background: rgba(var(--primary-color-rgb), 0.9);   /* fixed alpha */
            backdrop-filter: blur(25px) saturate(1.5);
            -webkit-backdrop-filter: blur(25px) saturate(1.5);
            color: var(--icon-color);
            border-color: var(--primary-color);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px var(--card-shadow);
        }

        
        .iconNav i {
            font-size: 16px;
            color: var(--text-color);
        }

        
        /* SVG icon styles for table and chart buttons */
        .iconNav img {
            width: 14px;
            height: 14px;
            display: inline-block;
            vertical-align: middle;
        }

        
        /* Active state for iconNav - transparent with outline only */
        .iconNav.active {
            background-color: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            color: var(--primary-color) !important;
            border-color: var(--primary-color);
            border-width: 2px;
        }

        
        /* Dark mode active state for iconNav */
        body.dark-mode .iconNav.active {
            background-color: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            color: var(--primary-color-bright) !important;
            border-color: var(--primary-color-bright);
        }

        @keyframes dance-celebration {
            0%, 100% {
                transform: rotate(0deg) translateX(0);
            }

            10% {
                transform: rotate(-10deg) translateX(-2px);
            }

            20% {
                transform: rotate(10deg) translateX(2px);
            }

            30% {
                transform: rotate(-8deg) translateX(-1px);
            }

            40% {
                transform: rotate(8deg) translateX(1px);
            }

            50% {
                transform: rotate(-12deg) translateX(0);
            }

            60% {
                transform: rotate(12deg) translateX(0);
            }

            70% {
                transform: rotate(-5deg) translateX(-1px);
            }

            80% {
                transform: rotate(5deg) translateX(1px);
            }

            90% {
                transform: rotate(-2deg) translateX(0);
            }
        }

        
        .iconNav.animated-helper {
            /* Make it circular like other buttons */
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            padding: 0;
            box-sizing: border-box;
            /* Fix SVG overflow issue */
            overflow: hidden;
            position: relative;
            transform-origin: center center;
        }

        
        /* Apply dance animation only when button has dance-active class */
        .iconNav.animated-helper.dance-active {
            animation: dance-celebration 2s ease-in-out infinite;
        }

        
        .iconNav.animated-helper:hover {
            animation-play-state: paused;
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

        
        /* Dark mode animated helper button */
        body.dark-mode .iconNav.animated-helper {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        @keyframes helper-rotate-out {
            0% {
                transform: rotate(0deg) scale(1);
                opacity: 1;
            }

            100% {
                transform: rotate(360deg) scale(0);
                opacity: 0;
            }
        }

        @keyframes helper-rotate-in {
            0% {
                transform: rotate(-360deg) scale(0);
                opacity: 0;
            }

            100% {
                transform: rotate(0deg) scale(1);
                opacity: 1;
            }
        }

        @keyframes helper-rotateY-out {
            0% {
                transform: rotateY(0deg) scale(1);
                opacity: 1;
            }

            100% {
                transform: rotateY(180deg) scale(0);
                opacity: 0;
            }
        }

        @keyframes helper-rotateY-in {
            0% {
                transform: rotateY(-180deg) scale(0);
                opacity: 0;
            }

            100% {
                transform: rotateY(0deg) scale(1);
                opacity: 1;
            }
        }

        @keyframes helper-rotate-double-out {
            0% {
                transform: rotate(0deg) scale(1);
                opacity: 1;
            }

            100% {
                transform: rotate(720deg) scale(0);
                opacity: 0;
            }
        }

        @keyframes helper-rotate-double-in {
            0% {
                transform: rotate(-720deg) scale(0);
                opacity: 0;
            }

            100% {
                transform: rotate(0deg) scale(1);
                opacity: 1;
            }
        }

        @keyframes helper-scale-out {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            100% {
                transform: scale(0);
                opacity: 0;
            }
        }

        @keyframes helper-scale-in {
            0% {
                transform: scale(0);
                opacity: 0;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        
        .iconNav.animated-helper i,
        .iconNav.animated-helper svg,
        .iconNav.animated-helper img {
            display: inline-block;
            transition: none;
            font-size: 12px !important;
            line-height: 1;
            vertical-align: middle;
            width: 16px !important;
            height: 16px !important;
            max-width: 16px;
            max-height: 16px;
            position: relative;
            z-index: 1;
        }

        
        /* Override any default sizes and ensure consistent rendering */
        .iconNav.animated-helper i::before {
            font-size: 12px !important;
            display: inline-block;
            text-align: center;
        }


        /* Out animations */
        .iconNav.animated-helper i.spinning-out,
        .iconNav.animated-helper svg.spinning-out,
        .iconNav.animated-helper img.spinning-out {
            animation: iconSpinOut 0.3s ease-in forwards;
        }

        
        .iconNav.animated-helper i.flipping-out,
        .iconNav.animated-helper svg.flipping-out,
        .iconNav.animated-helper img.flipping-out {
            animation: iconFlipOut 0.3s ease-in forwards;
        }

        
        .iconNav.animated-helper i.twisting-out,
        .iconNav.animated-helper svg.twisting-out,
        .iconNav.animated-helper img.twisting-out {
            animation: iconTwistOut 0.4s ease-in forwards;
        }

        
        .iconNav.animated-helper i.zooming-out,
        .iconNav.animated-helper svg.zooming-out,
        .iconNav.animated-helper img.zooming-out {
            animation: iconZoomOut 0.25s ease-in forwards;
        }

        
        /* In animations */
        .iconNav.animated-helper i.spinning-in,
        .iconNav.animated-helper svg.spinning-in,
        .iconNav.animated-helper img.spinning-in {
            animation: iconSpinIn 0.3s ease-out forwards;
        }

        
        .iconNav.animated-helper i.flipping-in,
        .iconNav.animated-helper svg.flipping-in,
        .iconNav.animated-helper img.flipping-in {
            animation: iconFlipIn 0.3s ease-out forwards;
        }

        
        .iconNav.animated-helper i.twisting-in,
        .iconNav.animated-helper svg.twisting-in,
        .iconNav.animated-helper img.twisting-in {
            animation: iconTwistIn 0.4s ease-out forwards;
        }

        
        .iconNav.animated-helper i.zooming-in,
        .iconNav.animated-helper svg.zooming-in,
        .iconNav.animated-helper img.zooming-in {
            animation: iconZoomIn 0.25s ease-out forwards;
        }

        
        /* SVG icon styles */
        .iconNav img {
            width: 16px;
            height: 16px;
            display: inline-block;
            vertical-align: middle;
            /* Ensure browser caches the images */
            image-rendering: optimizeQuality;
        }

        
        /* Lightbulb icon yellow filter */
        .iconNav.animated-helper img {
            filter: brightness(1.2) saturate(2) hue-rotate(45deg); /* Creates yellow tint */
        }

        
        .iconNav.animated-helper:hover img {
            filter: brightness(0) invert(1); /* White on hover */
        }

        
        /* Dark mode icon adjustments */
        /* Theme-aware icon colors for table and chart icons */
        .iconNav img[src*="table3.svg"],
        .iconNav img[src*="chart3.svg"] {
            filter: drop-shadow(0 0 0.5px rgba(0,0,0,0.2));
        }

        
        /* Apply semi-transparent background to table and chart buttons like animated-helper */
        .iconNav:has(img[src*="table3.svg"]),
        .iconNav:has(img[src*="chart3.svg"]) {
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        
        /* Triangle button styles */
        .triangle-btn {
            width: 50px;
            height: 50px;
            border: none;
            background: transparent;
            position: relative;
            padding: 0;
            overflow: visible;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        
        .triangle-btn::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            z-index: -1;
        }

        
        /* Left triangle pointing left */
        .triangle-left::before {
            border-width: 25px 43px 25px 0;
            border-color: transparent #e9ecef transparent transparent;
            left: 0;
        }

        
        /* Right triangle pointing right */
        .triangle-right::before {
            border-width: 25px 0 25px 43px;
            border-color: transparent transparent transparent #e9ecef;
            right: 0;
        }

        
        /* Hover effects */
        .triangle-btn:hover::before {
            border-color: transparent var(--primary-color) transparent transparent;
        }

        
        .triangle-right:hover::before {
            border-color: transparent transparent transparent var(--primary-color);
        }

        
        /* Position images in center of triangles */
        .triangle-btn img {
            position: relative;
            z-index: 1;
        }

        
        .triangle-left img {
            margin-left: 8px;
        }

        
        .triangle-right img {
            margin-right: 8px;
        }

        
        /* Dark mode support */
        body.dark-mode .triangle-left::before {
            border-color: transparent #2d3748 transparent transparent;
        }

        
        /* Faded look for circular buttons on all devices */
        .circular-btn {
            opacity: 0.3 !important;
        }

        
        /* But keep them clickable on desktop */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Disable interaction on mobile only */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Table and chart button hover effects - match animated-helper */
        .iconNav:has(img[src*="table3.svg"]):hover,
        .iconNav:has(img[src*="chart3.svg"]):hover {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

        
        .iconNav:has(img[src*="table3.svg"]):hover img,
        .iconNav:has(img[src*="chart3.svg"]):hover img {
            filter: brightness(0) invert(1); /* White on hover */
        }

        
        /* Active helper button indicator */
        .iconNav.animated-helper.active-helper {
            background: var(--primary-color) !important;
            color: white !important;
        }

        
        .iconNav.animated-helper.active-helper i {
            color: white !important;
        }

        
        /* Speech bubble styles */
        .speech-bubble {
            position: absolute;
            background: white;
            border: 2px solid var(--primary-color);
            border-radius: 20px;
            padding: 0;
            min-width: 280px;
            max-width: min(90vw, 600px);
            max-height: 70vh;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            opacity: 0;
            transform: scale(0) translateX(var(--origin-x, 0)) translateY(var(--origin-y, 0));
            transform-origin: var(--transform-origin, center);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
            font-size: 0.875rem;
            line-height: 1.6;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            user-select: text;
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
        }

        
        /* Responsive adjustments */
        
/* Media query removed - responsive styles should be in main CSS */

        .speech-bubble.show {
            opacity: 1;
            transform: scale(1) translateX(0) translateY(0);
            pointer-events: auto;
        }
        @keyframes bubbleFadeIn {
            0% {
                opacity: 0;
                transform: scale(0.1);
                filter: blur(10px);
            }
            50% {
                opacity: 0.8;
                filter: blur(2px);
            }
            100% {
                opacity: 1;
                transform: scale(1);
                filter: blur(0);
            }
        }

        @keyframes expandFromButton {
            0% {
                opacity: 0;
                transform: scale(0.1);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .speech-bubble.expand-animation {
            animation: expandFromButton 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            pointer-events: auto;
            user-select: text;
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
        }

        
        .speech-bubble-content {
            padding: 20px 24px;
            overflow-y: auto;
            overflow-x: hidden;
            flex: 1;
            user-select: text;
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            cursor: text;
        }

        
        /* Scrollbar styling */
        .speech-bubble-content::-webkit-scrollbar {
            width: 6px;
        }

        
        .speech-bubble-content::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 3px;
        }

        
        .speech-bubble-content::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 3px;
        }

        
        .speech-bubble-content::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
        }

        
        /* Container needs relative positioning for absolute bubble */
        div[id$="Toggles"] {
            position: relative;
            overflow: visible !important;
            z-index: 10;
            align-self: flex-end; /* Ensure toggles align to bottom */
        }

        
        /* Ensure bubble content is interactive */
        .speech-bubble-content {
            cursor: text;
            user-select: text;
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
        }

        
        .speech-bubble-content a {
            color: var(--primary-color);
            text-decoration: underline;
            cursor: pointer;
        }

        
        .speech-bubble-content a:hover {
            text-decoration: none;
        }

        
        /* Alternative styling with gradient */
        .speech-bubble.style-gradient {
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }

        
        .speech-bubble.style-gradient::before {
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
        }

        
        /* Playful style with animation */
        .speech-bubble.style-playful.show {
            animation: bubbleBounce 0.5s ease-out forwards;
        }

@keyframes bubbleBounce {
    0% { transform: translateY(20px) scale(0.8); opacity: 0; }
    50% { transform: translateY(-5px) scale(1.02); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

        
        /* Dark mode gradient style */
        body.dark-mode .speech-bubble.style-gradient {
            background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.05) 100%);
        }

        
        /* Dark mode speech bubble */
        body.dark-mode .speech-bubble {
            background: var(--card-bg);
            border-color: var(--primary-color);
            color: var(--text-color);
        }

        
        .speech-bubble-close {
            position: absolute;
            top: 4px;
            right: 8px;
            cursor: pointer;
            font-size: 18px;
            color: #999;
            line-height: 1;
            transition: color 0.2s;
        }

        
        .speech-bubble-close:hover {
            color: var(--primary-color);
        }

        
        /* Read More functionality styles */
        .read-more-container {
            position: relative;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        
        .read-more-container.collapsed {
            max-height: 150px; /* Default height, will be set dynamically by JS */
        }

        
        .read-more-container.expanded {
            max-height: none;
        }

        
        .read-more-fade {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(to bottom, transparent, var(--card-bg));
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        
        .read-more-container.expanded .read-more-fade {
            opacity: 0;
        }

        
        .read-more-btn {
            display: inline-block;
            margin-top: 10px;
            padding: 6px 16px;
            background-color: white;
            color: var(--primary-color);
            border: 1px solid var(--success-color);
            border-radius: 20px;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        
        .read-more-btn:hover {
            background-color: var(--success-color);
            color: white;
            border-color: var(--success-color);
        }

        
        /* Dark mode Read More styles */
        body.dark-mode .read-more-fade {
            background: linear-gradient(to bottom, transparent, var(--card-bg));
        }

        
        /* Mobile responsive */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Population Summary Section */
        #populationSummarySection {
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border-radius: 15px;
            padding: 2rem;
            margin: 2rem 0;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            border: 1px solid var(--border-color);
            opacity: 1 !important;
            transform: none !important;
        }

        
        #populationSummarySection .row {
            display: flex;
            align-items: stretch !important; /* Override align-items-end and make columns same height */
            min-height: 0; /* Allow flexbox to work properly */
        }

        
        #populationSummarySection .col-md-6 {
            display: flex;
            flex-direction: column;
            padding-top: 0 !important; /* Remove Bootstrap's top padding */
            padding-bottom: 0 !important; /* Remove Bootstrap's bottom padding */
            /* Keep horizontal padding for spacing */
        }

        
        #populationSummarySection .col-md-6:last-child {
            position: relative; /* For absolute positioning of child */
            justify-content: flex-start; /* Align content to top */
            /* Debug: background: rgba(255,0,0,0.1); */
        }

        
        /* Right column doesn't need special positioning */

        .population-counters {
            padding: 0.5rem 1rem; /* Reduced top/bottom padding */
            opacity: 1 !important;
            transform: none !important;
            visibility: visible !important;
        }


        .main-population {
            text-align: left;
            padding: 0rem 0; /* Reduced padding     0.5rem */
            margin-bottom: 0 !important; /* Remove margin */
        }

        
        .population-counters h3 {
            margin-bottom: 0.75rem !important; /* Reduce gap after "estimated as @" */
        }


        .main-population .Count {
            font-family: 'Arial Black', sans-serif;
            text-shadow: 0 1px 2px rgba(var(--primary-color-rgb), 0.15);
            display: inline-block;
            animation: countUp 2s ease-out;
            color: var(--success-color) !important;
        }

        
        /* Dark mode: use orange for population count */
        body.dark-mode .main-population .Count {
            color: var(--accent-color) !important;
            text-shadow: 0 1px 2px rgba(var(--primary-color-rgb), 0.15);
        }

            from { opacity: 0; transform: scale(0.5); }

            to { opacity: 1; transform: scale(1); }


        .area-stats {
            background: rgba(255,255,255,0.7);
            border-radius: 10px;
            padding: 1rem;
            border-left: 4px solid var(--success-color);
        }

        
        /* Dark mode: use orange border for area stats */
        body.dark-mode .area-stats {
            border-left-color: var(--accent-color);
        }


        .stat-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }


        .stat-item i {
            color: var(--primary-color);
            width: 20px;
            text-align: center;
        }


        .stat-item .Count {
            font-weight: 600;
            color: var(--dark-color);
            min-width: 60px;
        }


        .main-summary {
            padding: 0;
            background: transparent;
            border-radius: 10px;
            position: relative;
            overflow-x: hidden;
            margin: 0;
        }

        
        /* Custom scrollbar styling - Light mode (green) */
        .main-summary::-webkit-scrollbar {
            width: 8px;
        }

        
        .main-summary::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 4px;
        }

        
        .main-summary::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 4px;
            transition: background 0.2s ease;
        }

        
        .main-summary::-webkit-scrollbar-thumb:hover {
            background: var(--primary-color);
            filter: brightness(0.85);
        }

        
        /* Firefox scrollbar styling - Light mode */
        .main-summary {
            scrollbar-width: thin;
            scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.05);
        }

        
        /* Dark mode scrollbar styling - Orange */
        body.dark-mode .main-summary::-webkit-scrollbar-thumb {
            background: var(--primary-color-bright);
        }


        .main-summary .lead {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--text-color);
            padding: 1rem; /* 0.5rem from population-counters + 0.5rem from main-population */
            padding-right: 1.5rem; /* Extra padding to avoid text touching scrollbar */
            margin: 0; /* Remove default margins */
        }

        
        .main-summary .lead p:first-child {
            margin-top: 0; /* Remove top margin from first paragraph */
        }

        
        .main-summary .lead p:last-child {
            margin-bottom: 0; /* Remove bottom margin from last paragraph */
        }


        /* Fix excessive margins/padding */
        #populationSummarySection .container-fluid {
            padding-left: 0;
            padding-right: 0;
        }

        
        /* Adjust column padding for better spacing */
        #populationSummarySection .col-md-6 {
            padding-left: 15px;
            padding-right: 15px;
        }

        
        /* Responsive adjustments */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Reduce padding on mainString text */
        #mainString {
            padding: 0;
            margin: 0;
        }

        
        /* Desktop-only left border with secondary color */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Brighten the border in dark mode for better visibility */
        
/* Media query removed - responsive styles should be in main CSS */

        #mainString.lead {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
        }

        
        /* Reduce paragraph margins inside mainString */
        #mainString p {
            margin-bottom: 0.75rem;
        }

        
        #mainString p:last-child {
            margin-bottom: 0;
        }

        /* Mobile top padding for mainString */
        @media (max-width: 768px) {
            #mainString {
                padding-top: 1.5rem;
            }
        }
        
        /* Thin Section Performance Bars */
        .section-performance-bar {
            width: 100%;
            height: 3px; /* Back to original height */
            background: #e0e0e0; /* Darker background for contrast */
            border-radius: 1.5px 1.5px 0 0; /* Back to original radius */
            overflow: hidden;
            margin: 0 !important; /* Remove all margins */
            padding: 0 !important; /* Remove all padding */
            position: relative;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.08); /* Subtle shadow for depth */
            display: block; /* Ensure block display */
        }

        
        .section-performance-fill {
            height: 100%;
            width: 0%;
            background: var(--success-color);
            border-radius: 2px; /* Back to original radius */
            transition: width 2.5s cubic-bezier(0.25, 0.1, 0.25, 1);
            position: relative;
            overflow: hidden;
        }

        
        /* Create gradient effect using pseudo-element with darkening overlay */
        .section-performance-fill::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to right, 
                rgba(0, 0, 0, 0) 0%, 
                rgba(0, 0, 0, 0.15) 100%
            );
            pointer-events: none;
        }

        
        /* Dark mode: use orange for section performance bars */
        body.dark-mode .section-performance-fill {
            background: var(--accent-color);
        }

        
        /* Dark mode gradient overlay */
        body.dark-mode .section-performance-fill::before {
            background: linear-gradient(to right, 
                rgba(0, 0, 0, 0) 0%, 
                rgba(0, 0, 0, 0.2) 100%
            );
        }

        
        .section-performance-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, 
                rgba(255,255,255,0) 0%, 
                rgba(255,255,255,0.3) 50%, 
                rgba(255,255,255,0) 100%);
            animation: shimmer 3s ease-in-out infinite;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        
        .section-performance-bar.animate .section-performance-fill::after {
            opacity: 1;
        }

@keyframes sectionBarShimmer {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

        
        /* Animation for section bars */
        .section-performance-bar.animate .section-performance-fill {
            width: var(--bar-width, 0%);
        }

        
        /* Amenities Carousel Styles */
        /* Desktop Carousel Styles */
        .amenities-carousel-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            min-height: 160px;
            padding: 1rem 0 0;
            /* background: var(--card-bg); */
            border-radius: 0.5rem;
            margin-top: 0rem;
        }


        #amenitiesText {
            position: relative;
            overflow: hidden;
            /* background-color: white; */
        }

        
        #amenitiesText::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50%;
            height: 50%;
            background-image: url('https://areasearch.com.au/images/editSVG/laserEyes.svg');
            background-size: contain;
            background-position: bottom left;
            background-repeat: no-repeat;
            z-index: 0;
            opacity: 0.2;
            pointer-events: none;
        }


        /* Mobile override */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Ensure all content is above the background */
        #amenitiesText > * {
            position: relative;
            z-index: 1;
        }

        
        .amenities-carousel-wrapper {
            position: relative;
            width: 100%;
            min-height: 160px; /* Make sure this is tall enough */
            overflow: hidden; /* This should be hidden, not visible */
        }


        .amenities-carousel {
            display: flex;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            align-items: center;
            height: 100%;
            /* Remove the transform: none !important; */
        }


        .amenity-carousel-item {
            /* Remove all the !important overrides */
            flex: 0 0 auto;
            text-align: center;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            padding: 1rem;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            width: calc(100% / 5); /* ADD THIS - it was missing */

        }

        
        /* Active item styling (rightmost) */
        .amenity-carousel-item.active {
            z-index: 10;
        }

        
        .amenity-carousel-item.active .amenity-icon {
            transform: scale(1.3);
            filter: none;
        }

        
        .amenity-carousel-item.active h5 {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary-color);
        }

        
        /* Adjacent items */
        .amenity-carousel-item.adjacent-1 {
            z-index: 8;
            opacity: 0.85;
        }

        
        .amenity-carousel-item.adjacent-1 .amenity-icon {
            transform: scale(1.1);
            filter: grayscale(50%) brightness(0.85);
        }

        
        .amenity-carousel-item.adjacent-2 {
            z-index: 6;
            opacity: 0.7;
        }

        
        .amenity-carousel-item.adjacent-2 .amenity-icon {
            transform: scale(0.9);
            filter: grayscale(75%) brightness(0.75);
        }

        
        .amenity-carousel-item.adjacent-3 {
            z-index: 4;
            opacity: 0.5;
        }

        
        .amenity-carousel-item.adjacent-3 .amenity-icon {
            transform: scale(0.75);
            filter: grayscale(100%) brightness(0.65);
        }

       
        .amenity-carousel-item.adjacent-4 {
            z-index: 2;
            opacity: 0;
        }

        
        .amenity-carousel-item.adjacent-4 .amenity-icon {
            transform: scale(0.6);
            filter: grayscale(100%) brightness(0.45);
        }


        /* .amenity-carousel-item.adjacent-5 {
            z-index: 2;
            opacity: 0;
        }

        
        .amenity-carousel-item.adjacent-5 .amenity-icon {
            transform: scale(0.4);
            filter: grayscale(100%) brightness(0.45);
        }
 */

        /* Icon styling */
        .amenity-carousel-item .amenity-icon {
            width: 70px;
            height: 70px;
            margin: 0 auto 1.5rem;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        
        .amenity-carousel-item .amenity-icon .radial-progress {
            width: 110%;
            height: 110%;
            position: relative;
            top: 0;
            left: 0;
        }

        
        .amenity-carousel-item .amenity-icon .icon-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70%;
            height: 70%;
        }

        
        .amenity-carousel-item .amenity-icon .icon-content img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }


        .amenity-carousel-item .amenity-icon .amenity-svg-multitone {
            width: 100%;
            height: 100%;
            display: block;
        }


        .amenity-carousel-item h5 {
            color: var(--header-color);
            margin-bottom: 0.5rem;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.9rem;
        }


        /* Hide all h5 titles by default */
        .amenity-carousel-item h5 {
            display: none !important;
        }


        /* Only show center item title */
        .amenity-carousel-item.active h5 {
            display: block !important;
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-top: 0.2rem;
        }

        /* Responsive visibility for amenities carousels */
        .mobile-carousel-container { display: none; }

        @media (max-width: 768px) {
            .amenities-carousel-container { display: none !important; }
            .mobile-carousel-container { display: block !important; }
        }

        @media (min-width: 769px) {
            .mobile-carousel-container { display: none !important; }
        }

        
        /* Desktop Card Area */
        .desktop-content-area {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2rem;
            /* padding: 2rem; */
            margin-top: 1rem;
        }

        
        .description-card-container {
            grid-column: 2;
            perspective: 1000px;
            min-height: 250px; /* Optional: keeps a minimum height */
            height: auto; /* Let it grow with content */
            padding-right: 40px;
            padding-bottom: 40px;
        }


        .description-card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s;

        }

        
        .description-card.flipped {
            transform: rotateY(180deg);
        }

        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
            background: white;
            overflow-y: auto;
        }

        
        .card-face-front {
            position: relative; /* Change from absolute */
        }


        .card-face-back {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            transform: rotateY(180deg);
            background: #f8f9fa;
            /* Add these for centering */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        
        .card-face h3 {
            margin: 0 0 1rem 0;
            color: var(--primary-color);
        }

        
        .card-face p {
            margin: 0;
            line-height: 1.6;
            color: var(--text-color);
        }

        
        /* Progress ring animation */
        .amenity-carousel-item .progress-ring {
            transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }


        /* Mobile Styles */
        
/* Media query removed - responsive styles should be in main CSS */

/* Media query removed - responsive styles should be in main CSS */

        .mobile-carousel-track.dragging {
            transition: none;
        }


        .mobile-amenity-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.5rem 0;
            cursor: pointer;
            opacity: 0.3;
            transition: all 0.3s ease;
            height: 100px;
            justify-content: center;
        }


        .mobile-amenity-item.active {
            opacity: 1;
        }


        .mobile-amenity-item.adjacent {
            opacity: 0.6;
        }


        .mobile-amenity-item .amenity-icon {
            width: 40px;
            height: 40px;
            position: relative;
            transition: all 0.3s ease;
            filter: grayscale(100%) brightness(0.6);
        }


        .mobile-amenity-item.active .amenity-icon {
            transform: scale(1.3);
            filter: none;
            width: 50px;
            height: 50px;
        }


        .mobile-amenity-item.adjacent .amenity-icon {
            transform: scale(0.9);
            filter: grayscale(50%) brightness(0.8);
        }


        .mobile-amenity-item h6 {
            display: none !important; /* Hide all titles */
        }


        .mobile-content-area {
            flex: 1;
            perspective: 1000px; /* Add back perspective */
            padding: 0;
        }


        .mobile-card {
            width: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s;
            min-height: 200px; /* Reduced from 300px */
        }


        .mobile-card.flipped {
            transform: rotateY(180deg);
        }


        .mobile-card-face {
            width: 100%;
            position: relative; /* Keep relative for height */
            backface-visibility: hidden;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 1rem;
            background: white;
            /* Remove height: 100% and top/left */
        }


        .mobile-card-back {
            position: absolute;
            top: 0;
            left: 0;
            right: 0; /* Add right: 0 */
            bottom: 0; /* Add bottom: 0 */
            transform: rotateY(180deg);
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            backface-visibility: hidden; /* Add this to hide when not flipped */
        }


        .mobile-card-face h3 {
            margin: 0 0 0.75rem 0;
            color: var(--primary-color);
            font-size: 1.1rem;
        }


        .mobile-card-face p {
            margin: 0;
            line-height: 1.5;
            font-size: 0.9rem;
            color: var(--text-color);
        }


        .mobile-amenity-item .progress-ring {
            transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }


        .mobile-amenity-item .amenity-icon .radial-progress {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }


        .mobile-amenity-item .amenity-icon .icon-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 45%;
            height: 45%;
        }


        .mobile-amenity-item .amenity-icon .icon-content img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }


        /* Dark mode support */
        body.dark-mode {
            background: #1a1a1a;
            color: white;
        }


        /* body.dark-mode .mobile-card-face-back {
            background: #333;
        }
 */

        body.dark-mode .amenity-carousel-item .progress-ring {
            /* stroke: color-mix(in srgb, var(--secondary-color) 60%, white 40%); */
            stroke: var(--secondary-color);
            filter: brightness(2);
        }

        
        .desktop-intro-content {
            flex: 0 0 40%; /* Takes up 40% of the width */
            padding: 40px;
            color: #333; /* Adjust based on your background */
            z-index: 1;
        }


        .desktop-intro-content h2 {
            font-size: 2.2rem;
            margin-bottom: 1rem;
        }


        .desktop-intro-content p {
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }


        .desktop-intro-content .cta-button {
            background: var(--primary-color, #007bff);
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s;
        }


        .desktop-intro-content .cta-button:hover {
            background: var(--primary-color-dark, #0056b3);
        }

        /* Button Container for Side-by-Side Layout */
        .button-container {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        /* Secondary Modal Launch Button Styling */
        .cta-button.sectorModalLaunch {
            flex: 1;
            background: var(--secondary-color);
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .cta-button.sectopModalLaunch:hover {
            background: color-mix(in srgb, var(--secondary-color) 80%, black 20%);
        }


        /* Chart Selector Styling */
        .form-select[id$="ChartSelect"] {
            background-color: var(--primary-color);
            color: var(--light-color);
            border: 1px solid var(--primary-color);
            font-weight: 500;
            transition: all 0.3s ease;
        }

        
        .form-select[id$="ChartSelect"]:hover {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }

        
        .form-select[id$="ChartSelect"]:focus {
            background-color: var(--primary-color);
            border-color: var(--accent-color);
            box-shadow: 0 0 0 0.2rem rgba(237, 139, 0, 0.25);
            color: white;
        }

        
        /* Custom dropdown arrow for chart selectors */
        .form-select[id$="ChartSelect"] {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        }

        
        /* Ensure option text is readable */
        .form-select[id$="ChartSelect"] option {
            background-color: white;
            color: var(--text-color);
        }

        
        /* Selected option styling */
        .form-select[id$="ChartSelect"] option:checked {
            background-color: var(--primary-color);
            color: white;
        }


        /* Base chart container */
        .chart-container {
            border-radius: 12px;
            padding: 20px;
            padding-bottom: 25px; /* Minimal padding for button */
            margin-bottom: 20px;
            position: relative;
            transition: all 0.3s ease;
            overflow: hidden;
        }


        /* Light mode neumorphic shadow - ONLY when entire page is in light mode */
        body:not(.dark-mode) .chart-container:not(.dark-mode) {
            box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
        }

        
        /* Dark mode shadow */
        .chart-container.dark-mode {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

@keyframes cornerSweep {
    0% { transform: translateX(-100%) translateY(-100%); }
    100% { transform: translateX(100%) translateY(100%); }
}

        
        .chart-container {
            background: transparent !important;
        }

        
        /* Background is always present */
        .chart-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);
            border: 2px solid #909090;
            border-radius: 12px;
            z-index: -2;
        }

        
        .chart-container.dark-mode::before {
            background: linear-gradient(135deg, #1a1a1a 0%, #242424 50%, #181818 100%);
            border: none;
        }

        
        /* Chart container border - light mode only, very faint */
        body:not(.dark-mode) div[id*="ChartWrapper"] {
            border: 1px solid #e0e0e0 !important;
        }


        /* ANIMATED MESH OVERLAY - Only when both page AND chart are light mode */
        body:not(.dark-mode) .chart-container.light-mode::before {
            content: '';
            position: absolute;
            top: -75%;
            left: -75%;
            width: 300%;
            height: 300%;
            background: 
                radial-gradient(circle at 35% 35%, rgba(var(--primary-color-rgb), 0.12) 0px, transparent 40%),
                radial-gradient(circle at 65% 55%, rgba(var(--success-color-rgb), 0.08) 0px, transparent 40%),
                radial-gradient(circle at 50% 70%, rgba(var(--accent-color-rgb), 0.04) 0px, transparent 40%);
            animation: meshRotate 25s ease-in-out infinite;
            filter: blur(40px);
            pointer-events: none;
            z-index: 1;
            border-radius: 12px;
        }

@keyframes loaderRotate {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
}


        /* Wave effect overlay */
        .chart-container.chart-loading::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(0,0,0,0.08) 0%, transparent 70%);
            z-index: 2;
            animation: waveEffect 2s ease-out forwards;
            transform-origin: center;
            pointer-events: none;
        }

        
        .chart-container.dark-mode.chart-loading::after {
            background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
        }


        /* Ensure ApexCharts doesn't overflow */
        .chart-container .apexcharts-canvas {
            position: relative !important;
        }

        
        /* Ensure button stays visible above chart */
        .chart-container > div:not(.chart-theme-toggle) {
            position: relative;
            z-index: 1;
        }


        /* Light and dark mode backgrounds are now handled by ::before pseudo-element */

        /* Dark mode chart text */
        .chart-container.dark-mode .apexcharts-text {
            fill: #ffffff !important;
        }


        .chart-container.dark-mode .apexcharts-legend-text {
            color: #ffffff !important;
        }


        .chart-container.dark-mode .apexcharts-title-text,
        .chart-container.dark-mode .apexcharts-subtitle-text {
            fill: #ffffff !important;
        }


        .chart-container.dark-mode .apexcharts-xaxis-label,
        .chart-container.dark-mode .apexcharts-yaxis-label {
            fill: #cccccc !important;
        }


        .chart-container.dark-mode .apexcharts-gridline {
            stroke: rgba(255, 255, 255, 0.1);
        }


        /* Fix ApexCharts tooltips in dark mode */
        .chart-container.dark-mode .apexcharts-tooltip {
            background: #2d2d2d !important;
            color: #ffffff !important;
            border: 1px solid #444 !important;
        }


        .chart-container.dark-mode .apexcharts-tooltip-title {
            background: #1a1a1a !important;
            color: #ffffff !important;
            border-bottom: 1px solid #444 !important;
        }


        .chart-container.dark-mode .apexcharts-tooltip-y-group {
            color: #ffffff !important;
        }


        .chart-container.dark-mode .apexcharts-tooltip-series-group {
            background: #2d2d2d !important;
        }


        .chart-container.dark-mode .apexcharts-tooltip-text {
            color: #ffffff !important;
        }


        .chart-container.dark-mode .apexcharts-tooltip-marker {
            background: #2d2d2d !important;
        }


        /* Ensure all text elements in tooltips are visible */
        .chart-container.dark-mode .apexcharts-tooltip * {
            color: #ffffff !important;
        }

        
        /* Fix tooltips for resTrendsChart in dark mode */
        body.dark-mode #resTrendsChart .apexcharts-tooltip {
            background: #2d2d2d !important;
            color: #ffffff !important;
            border: 1px solid #444 !important;
        }


        /* Fix data labels in dark mode */
        .chart-container.dark-mode .apexcharts-datalabels {
            fill: #000000 !important;
        }


        .chart-container.dark-mode .apexcharts-datalabel {
            fill: #000000 !important;
        }


        .chart-container.dark-mode .apexcharts-datalabel-label {
            fill: #000000 !important;
        }


        .chart-container.dark-mode .apexcharts-datalabel-value {
            fill: #000000 !important;
        }


        /* Additional selectors for data labels */
        .chart-container.dark-mode .apexcharts-text.apexcharts-datalabel-label {
            fill: #000000 !important;
        }


        .chart-container.dark-mode .apexcharts-text.apexcharts-datalabel-value {
            fill: #000000 !important;
        }


        /* Radial bar specific data labels */
        .chart-container.dark-mode .apexcharts-radialbar-track .apexcharts-text {
            fill: #ffffff !important;
        }


        /* Radial bar center text (value and label) */
        .chart-container.dark-mode .apexcharts-datalabel-value {
            fill: #ffffff !important;
        }


        .chart-container.dark-mode .apexcharts-datalabel-label {
            fill: #cccccc !important;
        }


        /* Additional radial bar text selectors */
        .chart-container.dark-mode .apexcharts-radialbar .apexcharts-text {
            fill: #ffffff !important;
        }


        .chart-container.dark-mode .apexcharts-radialbar-value {
            fill: #ffffff !important;
        }


        /* Pie/Donut chart data labels */
        .chart-container.dark-mode .apexcharts-pie-label,
        .chart-container.dark-mode .apexcharts-datalabels-group text {
            fill: #000000 !important;
        }


        /* Chart theme toggle button */
        .chart-theme-toggle {
            position: absolute;
            bottom: 6px;
            right: 6px;
            background: rgba(33, 33, 33, 0.9);
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            width: 22px !important;
            height: 22px !important;
            min-width: 22px;
            min-height: 22px;
            max-width: 22px;
            max-height: 22px;
            padding: 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            z-index: 9999;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            color: #ffffff; /* Set color for currentColor in SVG */
        }

        
        .chart-theme-toggle svg {
            width: 12px !important;
            height: 12px !important;
            stroke: #ffffff !important;
            stroke-width: 2 !important;
            fill: none !important;
            display: block !important;
            pointer-events: none;
        }


        .chart-container.dark-mode .chart-theme-toggle {
            background: rgba(33, 33, 33, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #ffffff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        
        .chart-container.dark-mode .chart-theme-toggle svg {
            stroke: currentColor;
        }


        .chart-theme-toggle:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            background: rgba(50, 50, 50, 0.95);
        }


        .chart-theme-toggle svg {
            width: 12px;
            height: 12px;
            fill: none; /* Ensure fill is none for proper icon display */
        }

        
        /* Chart refresh button */
        .chart-refresh-btn {
            position: absolute;
            bottom: 6px;
            right: 35px; /* Position to the left of theme toggle */
            background: rgba(33, 33, 33, 0.9);
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            width: 22px !important;
            height: 22px !important;
            min-width: 22px;
            min-height: 22px;
            max-width: 22px;
            max-height: 22px;
            padding: 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            /* z-index: 9999; */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            color: #ffffff; /* Set color for currentColor in SVG */
        }

        
        .chart-refresh-btn svg {
            width: 12px !important;
            height: 12px !important;
            stroke: #ffffff !important;
            stroke-width: 2 !important;
            fill: none !important;
            display: block !important;
            pointer-events: none;
        }

        
        .chart-container.dark-mode .chart-refresh-btn {
            background: rgba(33, 33, 33, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        
        .chart-refresh-btn:hover {
            transform: translateY(-1px) rotate(180deg);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            background: rgba(50, 50, 50, 0.95);
        }

        
        /* Position ApexCharts toolbar consistently */
        .apexcharts-toolbar {
            top: 10px !important;
            right: 10px !important;
            z-index: 12 !important;
        }

        
        /* Ensure toolbar is visible even in small containers */
        .chart-container {
            min-height: 250px;
            position: relative;
        }

        
        /* Move toolbar below title on mobile or when space is tight */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Hide ApexCharts toolbar on mobile */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Ensure adequate spacing for the toolbar */
        .apexcharts-title-text {
            max-width: calc(100% - 300px); /* Leave space for toolbar */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 10px;
        }

        
        /* For charts without zoom capabilities, adjust toolbar position */
        .apexcharts-toolbar-minimal {
            top: 10px !important;
            right: 10px !important;
        }

        
        /* Style the toolbar buttons consistently */
        .apexcharts-toolbar > div > svg {
            width: 20px;
            height: 20px;
        }

        
        .apexcharts-menu-item {
            padding: 5px 10px;
            font-size: 12px;
        }


        /* cunt */
        /* Typing Animation Styles */
        .typing-background {
            position: absolute;
            top: -5px;
            left: 0;
            right: 0;
            z-index: 0;
            font-size: clamp(0.9rem, 2vw, 1.2rem);
            font-weight: 300;
            color: rgba(0, 95, 110, 0.25);  /* Using explicit RGB values */
            font-family: 'Courier New', monospace;
            white-space: normal;
            overflow: visible;
            pointer-events: none;
            user-select: none;
            letter-spacing: 0.02em;
            line-height: 1.5;
            text-align: left;
            padding: 0 5%;
            max-width: 100%;
            box-sizing: border-box;
        }

        body.dark-mode .typing-background {
            color: rgba(255, 255, 255, 0.15);
        }

        
        /* Ensure typing animation is visible on mobile */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Additional mobile-specific fixes */
        
/* Media query removed - responsive styles should be in main CSS */

        .typing-line {
            display: inline;
        }

        
        section {
            position: relative;
            overflow: visible;
        }

        @keyframes char-fade-in {
            0% { 
                opacity: 0;
            }
            100% { 
                opacity: 1;
            }
        }

        @keyframes blink {
            0%, 50% { 
                opacity: 1;
            }
            51%, 100% { 
                opacity: 0;
            }
        }

        .typing-char {
            opacity: 0;
            display: inline-block;
            animation: char-fade-in 0.4s ease-out forwards;
        }

        .typing-cursor {
            display: inline-block;
            width: 2px;
            height: 1.2em;
            background-color: rgba(0, 95, 110, 0.5);  /* Using explicit RGB values */
            animation: blink 1s infinite;
            margin-left: 2px;
            vertical-align: text-bottom;
        }

        .typing-container {
            display: inline-block;
            margin-left: 10px;
        }

        .typing-main-container {
            display: block;
            white-space: nowrap;
            overflow: hidden;
        }

        .typing-followup-container {
            display: block;
            text-align: left;
            margin-top: 5px;
        }


        .typing-followup-char {
            opacity: 0;
            display: inline-block;
            color: rgba(0, 95, 110, 0.35);  /* Using explicit RGB values */
            font-style: italic;
            animation: char-fade-in 0.3s ease-out forwards;
        }

/* keyframes already defined earlier: @keyframes char-fade-in */


        .section-header {
            position: relative;
            z-index: 1;
        }


        /* Hide typing animation when disabled */
        body.typing-animation-disabled .typing-background {
            display: none;
        }


        /* Mobile button layout - two rows on phones */
        
/* Media query removed - responsive styles should be in main CSS */

        .chart-info-icon {
            background: rgba(33, 33, 33, 0.9);
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            width: 22px;
            height: 22px;
            padding: 0;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }


        .chart-info-icon:hover {
            background: rgba(66, 66, 66, 0.9);
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
        }


        .dark-mode .chart-info-icon {
            background: rgba(45, 45, 45, 0.9);
            border-color: #555;
            color: #fff;
        }


        .dark-mode .chart-info-icon:hover {
            background: #333;
        }


        .chart-info-tooltip {
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 12px 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            max-width: 400px;
            z-index: 1001;
            font-size: 13px;
            line-height: 1.5;
        }


        .dark-mode .chart-info-tooltip {
            background: #2d2d2d;
            border-color: #555;
            color: #fff;
        }


        .chart-info-content {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }


        .info-row {
            margin: 0;
        }


        .info-row strong {
            color: #666;
            margin-right: 8px;
        }


        .dark-mode .info-row strong {
            color: #aaa;
        }


        /* Show More functionality for tables on mobile */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Hide show more button on desktop */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Additional styling for specific tables on mobile */
        
/* Media query removed - responsive styles should be in main CSS */

        /* ApexCharts Menu Dark Mode Styles */
        body.dark-mode .apexcharts-menu {
            background: #242424 !important;
            border: 1px solid #404040 !important;
            color: #E8E8E8 !important;
        }

        
        /* Ensure the menu text doesn't turn white on white background */
        body.dark-mode .apexcharts-menu-item span {
            color: #E8E8E8 !important;
        }

        
        /* Export submenu */
        body.dark-mode .apexcharts-submenu {
            background: #242424 !important;
            border: 1px solid #404040 !important;
        }

        
        /* Highlighter SVG colors */
        .mt-5.text-center img[src*="highlighter"] {
            /* Use success-color filter in light mode */
            filter: var(--highlighter-filter);
            opacity: 0.1;
        }

        
        /* Desktop action button text colors */
        .desktop-action-btn {
            color: #666666; /* Dark grey in light mode */
            transition: color 0.2s ease;
            min-width: 140px; /* Ensure button is wide enough for text */
            width: 140px; /* Fixed width to prevent text wrapping to 3 lines */
        }

        
        /* Animation for desktop action buttons container */
        #populationSummarySection .mt-5.text-center.d-none.d-md-block {
            opacity: 0;
            transform: translateY(30px);
        }

        
        #populationSummarySection .mt-5.text-center.d-none.d-md-block.animate-in {
            opacity: 1;
            transform: translateY(0);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        
        /* Individual button animations with stagger */
        #populationSummarySection .mt-5.text-center.d-none.d-md-block.animate-in > div > div:nth-child(1) {
            animation: buttonFadeInScale 0.6s ease-out 0.2s both;
        }

        
        #populationSummarySection .mt-5.text-center.d-none.d-md-block.animate-in > div > div:nth-child(2) {
            animation: buttonFadeInScale 0.6s ease-out 0.4s both;
        }

        
        #populationSummarySection .mt-5.text-center.d-none.d-md-block.animate-in > div > div:nth-child(3) {
            animation: buttonFadeInScale 0.6s ease-out 0.6s both;
        }

            from {
                opacity: 0;
                transform: scale(0.8) translateY(20px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }

        
        .desktop-action-btn:hover {
            color: #000000; /* Pure black on hover in light mode */
        }

        
        /* Adjust desktop buttons on medium screens (768px-991px) */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Generic Animation Classes for ScrollAnimator */
        .fade-in {
            opacity: 1 !important;
            transition: opacity 0.6s ease;
        }

        
        .slide-up {
            opacity: 1 !important;
            transform: translateY(0) !important;
            transition: all 0.6s ease;
        }

        
        .slide-in-left {
            opacity: 1 !important;
            transform: translateX(0) !important;
            transition: all 0.6s ease;
        }

        
        .slide-in-right {
            opacity: 1 !important;
            transform: translateX(0) !important;
            transition: all 0.6s ease;
        }

        
        .custom-zoom-in {
            opacity: 1 !important;
            transform: scale(1) !important;
            transition: all 0.6s ease;
        }

       
        /* <!-- Additional CSS for proper styling --> cunt */
        #salesSearchContainer .search-results {
            max-height: 200px;
            overflow-y: auto;
        }

        
        .search-results-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        
        .search-results-list li {
            padding: 8px;
            border-bottom: 1px solid var(--border-color);
        }

        
        .search-results-list li:hover {
            background-color: var(--background-color);
        }

        
        .search-results-list a {
            color: var(--link-color);
            text-decoration: none;
        }

        
        .search-results-list a:hover {
            color: var(--link-hover);
        }

        
        .ccMarker {
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 12px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
            transition: transform 0.2s;
        }

        
        .ccMarker:hover {
            transform: scale(1.1);
        }

        
        .transport-popup {
            max-width: 300px;
        }

        
        .transport-popup h5 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        
        .transport-popup h6 {
            color: var(--text-color);
            margin-bottom: 8px;
        }

        
        .strataLink {
            color: var(--success-color);
            text-decoration: underline;
            cursor: pointer;
        }

        
        .strataLink:hover {
            color: var(--success-color-dark);
        }

        
        .sales-summary {
            font-size: 14px;
            line-height: 1.6;
            max-height: none !important;
            overflow: visible !important;
            -webkit-line-clamp: unset !important;
            display: block !important;
        }

        
        .sales-summary p {
            display: block !important;
            max-height: none !important;
            overflow: visible !important;
        }

        
        #salesTableText .show-more-btn,
        #salesTableText .read-more-btn {
            display: none !important;
        }

        
        /* Remove top curved corners from salesTrendsContainer */
        #salesTrendsContainer {
            border-top-left-radius: 0 !important;
            border-top-right-radius: 0 !important;
        }

        
        /* Right-align criteria summary text */
        #criteriaOut {
            text-align: right;
        }

        
        .faq-item {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }

        
        .faq-item:last-child {
            border-bottom: none;
        }

        
        .faq-item strong {
            color: var(--primary-color);
        }

        
        /* GridJS Custom Styling */
        .sales-grid-container {
            margin: 0;
            padding: 0;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            max-width: 100%;
        }

        
        .gridjs-wrapper {
            border-radius: 8px;
            overflow-x: auto;
            overflow-y: visible;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            width: 100%;
            -webkit-overflow-scrolling: touch;
        }

        
        /* Mobile-specific adjustments for sales table */
        
/* Media query removed - responsive styles should be in main CSS */

/*             
        .gridjs-head {
            background-color: var(--primary-color);
        }

            */

        .gridjs-th {
            background-color: var(--primary-color) !important;
            color: white !important;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 0.5px;
        }

        
        .gridjs-td {
            padding: 12px !important;
            vertical-align: middle;
        }

        
        .gridjs-tr:hover td {
            background-color: rgba(0, 95, 110, 0.05);
        }

        
        .gridjs-search {
            margin-bottom: 20px;
        }

        
        .gridjs-search-input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
        }

        
        .gridjs-search-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(0, 95, 110, 0.25);
        }

        
        .gridjs-pagination {
            margin-top: 20px;
            padding: 15px;
            border-top: 1px solid var(--border-color);
        }

        
        .gridjs-pagination button {
            background: white;
            border: 1px solid var(--border-color);
            color: var(--text-color);
            padding: 6px 12px;
            margin: 0 2px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
        }

        
        .gridjs-pagination button:hover:not([disabled]) {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        
        .gridjs-pagination button[disabled] {
            opacity: 0.5;
            cursor: not-allowed;
        }

        
        .gridjs-pagination .gridjs-currentPage {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        
        .gridjs-loading {
            background-color: rgba(255, 255, 255, 0.9);
        }

        
        .gridjs-loading-bar {
            background-color: var(--primary-color);
        }

        
        /* Sort indicators */
        .gridjs-th-sort {
            cursor: pointer;
            user-select: none;
        }

        
        .gridjs-th-sort:hover {
            background-color: rgba(0, 0, 0, 0.1) !important;
        }

        
        .gridjs-sort-asc::after,
        .gridjs-sort-desc::after,
        .gridjs-sort-neutral::after {
            margin-left: 5px;
            font-size: 12px;
        }

        
        .gridjs-sort-asc::after {
            content: '↑';
        }

        
        .gridjs-sort-desc::after {
            content: '↓';
        }

        
        .gridjs-sort-neutral::after {
            content: '↕';
            opacity: 0.3;
        }

        
        /* Enhanced Sales Criteria Panel Styling */
        .sales-criteria-panel {
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0;
        }

        
        .criteria-title-simple {
            color: #333;
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 20px;
        }

        
        .criteria-body {
            padding: 0;
            background: transparent;
        }

        
        .criteria-body .form-select {
            border: 1.5px solid #e0e6ed;
            border-radius: 6px;
            padding: 6px 12px;
            font-size: 13px;
            transition: all 0.3s ease;
            background-color: #f8f9fa;
            height: auto;
            min-height: 36px;
        }

        
        .criteria-body .form-select:hover {
            border-color: #14799f;
            background-color: white;
        }

        
        .criteria-body .form-select:focus {
            border-color: #14799f;
            box-shadow: 0 0 0 0.2rem rgba(20, 121, 159, 0.15);
            background-color: white;
        }

        
        /* Custom Sales Outline Buttons */
        .btn-sales-outline {
            display: inline-block;
            background-color: var(--background-color);
            border: 2px solid var(--secondary-color);
            border-radius: 20px;
            padding: 6px 16px;
            font-size: 0.875rem;
            color: black;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            cursor: pointer;
        }

        
        .btn-sales-outline.btn-sm {
            padding: 6px 16px;
            font-size: 0.875rem;
        }

        
        .btn-sales-outline:hover {
            background-color: var(--secondary-color);
            color: white;
            border-color: var(--secondary-color);
        }

        
        .btn-sales-outline:active {
            transform: translateY(0);
        }

        
        /* Dark mode styling for sales buttons */
        body.dark-mode .btn-sales-outline {
            background-color: color-mix(in srgb, var(--secondary-color) 10%, var(--card-bg) 90%);
            color: white !important;
            border-color: white !important;
        }

        
        /* SVG styling for sales buttons */
        .btn-sales-outline svg {
            fill: var(--primary-color);
            transition: all 0.3s ease;
        }

        
        .btn-sales-outline:hover svg {
            fill: white;
        }

        
        /* Dark mode SVG styling - brighter primary */
        body.dark-mode .btn-sales-outline svg {
            fill: var(--primary-color);
            filter: brightness(1.5);
        }

        
        /* Ripple effect on click */
        .btn-sales-outline::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: color-mix(in srgb, var(--primary-color) 30%, transparent 70%);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        
        .btn-sales-outline:focus::before {
            width: 300px;
            height: 300px;
        }

        
        .criteria-footer {
            background: transparent;
            padding: 12px 0;
            border-top: none;
        }

        
        .criteria-summary {
            color: var(--primary-color);
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        
        /* Sales Options Divs Enhancement */
        .salesOptionDiv {
            transition: all 0.3s ease;
            margin-bottom: 0.5rem !important;
        }

        
        .salesOptionDiv label {
            color: #495057;
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        
        /* Bootstrap Select Customization for Sales Criteria */
        #salesCriteriaContainer .bootstrap-select .btn {
            background-color: #f8f9fa;
            border: 1.5px solid #e0e6ed;
            color: #495057;
            border-radius: 6px;
            padding: 6px 12px;
            transition: all 0.3s ease;
            font-size: 13px;
            height: 36px;
            display: flex;
            align-items: center;
        }

        
        #salesCriteriaContainer .bootstrap-select .btn:hover {
            background-color: white;
            border-color: #14799f;
        }

        
        #salesCriteriaContainer .dropdown-menu {
            border: 1px solid #e0e6ed;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        
        #salesCriteriaContainer .dropdown-item {
            padding: 10px 20px;
            transition: all 0.2s ease;
        }

        
        #salesCriteriaContainer .dropdown-item:hover {
            background-color: rgba(20, 121, 159, 0.1);
            color: #14799f;
        }

        
        #salesCriteriaContainer .dropdown-item.selected {
            background-color: #14799f;
            color: white;
        }

        
        /* Responsive adjustments */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Dark mode support for sales buttons */
        body.dark-mode .btn-sales-outline {
            background: var(--dark-bg);
            border-color: var(--primary-color-bright);
            color: var(--primary-color-bright);
        }

        
        /* Sales summary highlights */
        .sales-highlight {
            color: var(--success-color);
            font-size: 18px;
            font-weight: 500;
        }

        
        /* Dark mode for table container */
        body.dark-mode #salesTableContainer {
            background-color: transparent !important;
            border: none !important;
        }

        
        /* Sales intro text primary color */
        #salesIntroText {
            color: var(--primary-color);
            font-weight: 500;
        }
   /* padding-bottom: 1rem; */
        
        body.dark-mode #salesIntroText {
            color: var(--primary-color-bright);
        }

        
        /* Sales infographics */
        .info-stat {
            width: 120px;
            height: 60px;
        }

        
        .info-icon {
            /* opacity: 0.1; */
            opacity: 0 !important;
        }

        
        /* Light mode circle styles - extremely light grey scale */
        .info-circle-primary {
            background-color: #f8f8f8;
            filter: none;
            opacity: 1 !important;
        }

        
        .info-circle-secondary {
            background-color: #fbfbfb;
            filter: none;
            opacity: 1 !important;
        }

        
        .info-circle-orbit {
            background-color: #fdfdfd;
            filter: none;
            opacity: 1 !important;
        }

        
        /* Dark mode adjustments for infographics */
        body.dark-mode .info-icon {
            opacity: 1;
            filter: brightness(10);
        }

        
        /* Force all info-circle elements to have no transparency */
        .info-circle {
            opacity: 1 !important;
            display: none !important; /* Temporarily hidden */
        }

        
        /* Ultra-specific dark mode circle rules */
        body.dark-mode .sales-infographics .info-stat .info-circle {
            opacity: 1 !important;
            background-color: #1a1a1a !important;
        }

        
        /* Dark mode info value color */
        body.dark-mode .info-value {
            color: var(--accent-color) !important;
        }

        
        /* Sales Trend Submit button styles */
        #salesTrendSubmit {
            color: white !important;
        }

        
        /* Sales Trend Submit button hover state */
        #salesTrendSubmit:hover {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            filter: brightness(0.85);
            color: white !important;
        }

        
        /* Ensure table container stays within bounds */
        #salesTableContainer {
            max-width: 100%;
            overflow-x: auto;
            width: 100%;
            box-sizing: border-box;
        }

        
        #salesTable {
            width: 100%;
            overflow-x: auto;
        }

        
        /* Remove any default margins from gridjs components */
        #salesTable .gridjs-wrapper {
            margin: 0 !important;
            padding: 0 !important;
        }

        
        /* Hide Show More button only in sales table */
        #salesTableContainer .show-more-btn,
        #salesTableContainer button[aria-expanded],
        #salesTable + .show-more-btn,
        #salesTable + button[aria-expanded] {
            display: none !important;
        }

        
        /* Ensure sales table is fully visible and interactive */
        #salesTableContainer,
        #salesTable,
        #salesTable .gridjs-wrapper {
            max-height: none !important;
            overflow: visible !important;
            position: relative !important;
        }

        
        /* Remove any fade overlays */
        #salesTableContainer::before,
        #salesTableContainer::after,
        #salesTable::before,
        #salesTable::after {
            display: none !important;
        }

        
        /* Ensure table rows are not masked or faded */
        #salesTable tr,
        #salesTable tbody {
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }

        
        #salesTable .gridjs-container {
            margin: 0 !important;
            padding: 0 !important;
        }

        
        #salesTable table {
            margin: 0 !important;
        }

        
        /* Mobile visibility fix */
        
/* Media query removed - responsive styles should be in main CSS */
   /* cunt */

        /* Spotlight Background Effect Styles */
        :root {
            /* Spotlight blur control - adjust this value to change blur intensity */
            --spotlight-blur: 0px; /* Reduced blur for clearer effect */
        }


        /* Spotlight container */
        .spotlight-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -5; /* Behind all content but above background */
            overflow: hidden;
            opacity: 0;
            transition: opacity 1s ease-in;
        }

        
        .spotlight-container.visible {
            opacity: 1;
        }


        /* Individual spotlights */
        .spotlight {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle at center, 
                rgba(255, 255, 255, 0.4) 0%, 
                rgba(255, 246, 246, 0.2) 40%, 
                transparent 70%);
            filter: blur(var(--spotlight-blur));
            will-change: transform;
            opacity: 0.3; /* Subtle spotlight effect */
        }


        .spotlight-1 {
            width: 300px;
            height: 300px;
            top: -150px;
            left: -150px;
            background: radial-gradient(circle at center, 
                rgba(255, 255, 255, 0.5) 0%, 
                rgba(202, 202, 202, 0.3) 30%, 
                transparent 70%);
        }


        .spotlight-2 {
            width: 400px;
            height: 400px;
            top: 50%;
            right: -200px;
            background: radial-gradient(circle at center, 
                rgba(128, 128, 128, 0.5) 0%, 
                rgba(128, 128, 128, 0.3) 30%, 
                transparent 75%);
        }


        .spotlight-3 {
            width: 250px;
            height: 250px;
            bottom: -100px;
            left: 30%;
            background: radial-gradient(circle at center, 
                rgba(128, 128, 128, 0.5) 0%, 
                rgba(128, 128, 128, 0.3) 30%, 
                transparent 80%);
        }


        /* Keep spotlight container at the very back */
        body > .spotlight-container {
            z-index: -5 !important;
        }


        /* Dark mode spotlight adjustments */
        body.dark-mode .spotlight {
            opacity: 0.2; /* More subtle in dark mode */
            background: radial-gradient(circle at center, 
                rgba(255, 255, 255, 0.3) 0%, 
                rgba(255, 255, 255, 0.15) 40%, 
                transparent 90%) !important;
        }


        /* H2 glow effect when spotlight is near - subtle */
        h2.spotlight-active {
            text-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 
                         0 0 1px rgba(0, 0, 0, 0.2);
            transition: all 0.5s ease;
        }

        
        /* Dark mode h2 glow - subtle */
        body.dark-mode h2.spotlight-active {
            text-shadow: 0 0 1px rgba(255, 255, 255, 0.3), 
                         0 0 1px rgba(255, 255, 255, 0.2);
        }

        
        /* Mobile optimizations */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Scroll Animation for H2 - Preserves existing styles */
        h2.scroll-animate {
            overflow: visible;
            position: relative;
        }


        /* Word wrapper to preserve word boundaries for proper line breaking */
        h2.scroll-animate .word {
            display: inline-block;
            white-space: nowrap; /* Prevent word from breaking */
        }


        /* Space between words should not break */
        h2.scroll-animate > .letter {
            white-space: pre; /* Preserve space character */
        }


        /* Letter wrapper - inherits all parent styles */
        h2.scroll-animate .letter {
            display: inline-block;
            transform-origin: center bottom;
            opacity: 0;
            transform: rotateX(-90deg) translateY(20px);
            transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            color: inherit;
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
            line-height: inherit;
        }


        /* Visible state */
        h2.scroll-animate.in-view .letter {
            opacity: 1;
            transform: rotateX(0deg) translateY(0);
        }


        /* Stagger delays for smooth wave effect */
        h2.scroll-animate.in-view .letter:nth-child(1) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(2) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(3) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(4) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(5) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(6) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(7) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(8) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(9) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(10) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(11) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(12) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(13) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(14) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(15) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(16) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(17) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(18) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(19) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(20) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(21) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(22) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(23) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(24) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(25) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(26) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(27) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(28) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(29) { transition-delay: 0.02s; }

        h2.scroll-animate.in-view .letter:nth-child(30) { transition-delay: 0.02s; }


        /* Preserve spotlight glow effect if present */
        h2.scroll-animate.spotlight-active .letter {
            text-shadow: inherit;
            /* text-shadow: none; */
        }


        /* Multi-tone SVG Support */
        .sale-factor-svg-multitone,
        .amenity-svg-multitone {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        
        /* Ensure SVGs with CSS variables display correctly */
        .sale-factor-svg-multitone svg,
        .amenity-svg-multitone svg {
            width: 100%;
            height: 100%;
        }

        
        /* Fallback styles for img tags when SVG fetch fails */
        .sale-factor-svg-img,
        .amenity-carousel-item .icon-content img,
        .mobile-amenity-item .icon-content img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            /* Since img tags can't use CSS variables, we'll need to use filters in dark mode */
        }


        /* Ethnicity Flags Styles */
        .ethnicity-flags-wrapper {
            position: relative;
            overflow: hidden;
            margin: 0 -1.5rem;
            padding: 0 1.5rem;
        }


        .ethnicity-flags-row {
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 1rem 0 2rem 0;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
        }


        .ethnicity-flags-row::-webkit-scrollbar {
            height: 6px;
        }


        .ethnicity-flags-row::-webkit-scrollbar-track {
            background: transparent;
        }


        .ethnicity-flags-row::-webkit-scrollbar-thumb {
            background-color: var(--border-color);
            border-radius: 3px;
        }


        .ethnicity-flag-item {
            flex: 0 0 auto;
            text-align: center;
            position: relative;
        }


        .flag-container {
            position: relative;
            width: 80px;
            height: 80px;
            margin: 0 auto 0.5rem;
        }

        
        /* Custom tooltip for flag containers */
        .flag-container[title] {
            cursor: pointer;
        }

        
        .flag-container[title]:hover::after {
            content: attr(title);
            position: absolute;
            bottom: -35px;
            left: 50%;
            transform: translateX(-50%);
            padding: 4px 8px;
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            font-size: 12px;
            white-space: nowrap;
            border-radius: 4px;
            z-index: 1000;
            pointer-events: none;
        }

        
        .flag-container[title]:hover::before {
            content: '';
            position: absolute;
            bottom: -11px;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-bottom-color: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            pointer-events: none;
        }


        .flag-progress-ring {
            position: absolute;
            top: -4px;
            left: -4px;
            width: 88px;
            height: 88px;
            transform: rotate(-90deg);
        }


        .flag-progress-background {
            fill: none;
            stroke: var(--border-color);
            stroke-width: 3;
        }


        .flag-progress-bar {
            fill: none;
            stroke: var(--primary-color);
            stroke-width: 3;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.6s ease;
        }

        
        /* Brighter primary color for flag progress rings in dark mode */
        body.dark-mode .flag-progress-bar {
            stroke: color-mix(in srgb, var(--primary-color) 70%, white 30%);
        }

        
        /* Brighter colors for sale factor SVG elements in dark mode */
        body.dark-mode .sale-factor-icon svg [fill*="var(--primary-color)"] {
            fill: color-mix(in srgb, var(--primary-color) 70%, white 30%);
        }


        /* STANDOUTS MOBILE SIZING FIX - Place at end to win cascade */
        /* Desktop/base */
        #standoutsSection { --sf-size: 48px; }


        /* Mobile override (80% of 60px = 48px) */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Apply the variable - wins over all other rules */
        #standoutsSection .sale-factor-icon{
            width: var(--sf-size) !important;
            height: var(--sf-size) !important;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
        }


        /* Make the art fill the container, regardless of IMG or inline SVG */
        #standoutsSection .sale-factor-icon > svg,
        #standoutsSection .sale-factor-icon > img{
            width: 100% !important;
            height: 100% !important;
            max-width: none !important;
            max-height: none !important;
            object-fit: contain;
            object-position: center;
        }


        .flag-image {
            position: absolute;
            top: 4px;
            left: 4px;
            width: 72px;
            height: 72px;
            border-radius: 50%;
            object-fit: cover;
            background: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }


        .ethnicity-name {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-color);
            margin-bottom: 0.25rem;
            white-space: nowrap;
        }


        .ethnicity-percentage {
            font-size: 0.75rem;
            color: var(--text-muted);
        }


        /* Percentile label - commented out as no longer used
        .ethnicity-percentile {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--primary-color);
            color: white;
            font-size: 0.625rem;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 10px;
            z-index: 1;
        }
 */

        /* Dark mode adjustments */
        body.dark-mode .flag-image {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
        }


        /* Mobile adjustments */
        
/* Media query removed - responsive styles should be in main CSS */

        /* STANDOUTS MOBILE SIZING FIX - Place at end to win cascade */
        /* Desktop/base */
        #standoutsSection { --sf-size: 60px; }


        /* Mobile override (80% of 60px = 48px) */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Apply the variable - wins over all other rules */
        #standoutsSection .sale-factor-icon{
            width: var(--sf-size) !important;
            height: var(--sf-size) !important;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
        }


        /* Make the art fill the container, regardless of IMG or inline SVG */
        #standoutsSection .sale-factor-icon > svg,
        #standoutsSection .sale-factor-icon > img{
            width: 100% !important;
            height: 100% !important;
            max-width: none !important;
            max-height: none !important;
            object-fit: contain;
            object-position: center;
        }


        /* Infrastructure container background pattern */
        #infrastructureOut {
            position: relative;
        }


        /* SVG background pattern - light grey, fits edges, 4% opacity desktop, behind content */
        /* #infrastructureOut::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('https://areasearch.com.au/images/editSVG/infra.svg');
            background-size: 100% auto;
            background-repeat: repeat-y;
            background-position: center top;
            opacity: 0.04;
            pointer-events: none;
            z-index: 0;
            /* Light grey color #f9f9f9 
            filter: brightness(0) saturate(100%) invert(98%) sepia(3%) saturate(0%) hue-rotate(38deg) brightness(102%) contrast(96%);
        }  */
        

        
        /* Mobile gets higher opacity */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Light mode needs much higher opacity to be visible */
        body:not(.dark-mode) #infrastructureOut::before {
            opacity: 1;
        }

        
        /* Light mode mobile */
        
/* Media query removed - responsive styles should be in main CSS */

        /* Ensure content appears above the overlay */
        #infrastructureOut > * {
            position: relative;
            z-index: 2;
        }

        /* Content wrapper max width */
        .content-wrap {
            width: 100%;
            max-width: 1200px !important;
            margin: 0 auto;
        }

        /* Edge-to-edge background for Page Title */
        .page-title-wrapper {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
        }

        /* Ensure inner content remains centered in page title */
        .page-title-wrapper .container {
            max-width: 1200px !important;
            margin-left: auto;
            margin-right: auto;
        }

        /* Edge-to-edge footer background */
        body > .bg-dark.text-secondary.py-5.text-center,
        .container > .bg-dark.text-secondary.py-5.text-center,
        .content-wrap > .bg-dark.text-secondary.py-5.text-center {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
        }

        /* Remove horizontal gutters in footer */
        .bg-dark.text-secondary.py-5.text-center .row {
            --bs-gutter-x: 0;
            margin-left: 0;
            margin-right: 0;
        }

        /* Section header bars: title + toggles */
        section > .d-flex.justify-content-between.align-items-end {
            flex-wrap: wrap;
            gap: 8px 12px;
        }
        section > .d-flex.justify-content-between.align-items-end h2 {
            flex: 1 1 auto;
            min-width: 200px;
            margin-right: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        section > .d-flex.justify-content-between.align-items-end #secSalesToggles,
        section > .d-flex.justify-content-between.align-items-end [id$="Toggles"] {
            flex: 0 1 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            max-width: 100%;
        }
        @media (max-width: 576px) {
            section > .d-flex.justify-content-between.align-items-end h2 {
                white-space: normal;
            }
        }

        /* Swiper styles for amenities */
        .amenities-swiper {
            width: 100%;
            padding: 20px 0;
        }

        .amenity-swiper-item {
            text-align: center;
            padding: 20px;
            background: var(--white);
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .amenity-swiper-item .amenity-icon {
            width: 120px;
            height: 120px;
            margin: 0 auto 15px;
            position: relative;
        }

        .amenity-swiper-item .icon-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60%;
            height: 60%;
        }

        .amenity-swiper-item .icon-content img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .amenity-swiper-item h5 {
            color: var(--primary-color);
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        .amenity-swiper-item .amenity-description {
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        /* Swiper navigation customization */
        .amenities-swiper .swiper-button-next,
        .amenities-swiper .swiper-button-prev {
            color: var(--accent-color);
            width: 40px;
            height: 40px;
        }

        .amenities-swiper .swiper-button-next:after,
        .amenities-swiper .swiper-button-prev:after {
            font-size: 20px;
        }

        .amenities-swiper .swiper-pagination-bullet {
            background: var(--accent-color);
            opacity: 0.3;
        }

        .amenities-swiper .swiper-pagination-bullet-active {
            opacity: 1;
            background: var(--accent-color);
        }

        /* Mobile specific styles */
        @media (max-width: 768px) {
            #secAmenities > .d-flex.justify-content-between.align-items-end {
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                flex-wrap: nowrap !important;
            }

            #secAmenities h2 {
                margin-bottom: 0 !important;
                font-size: 1.5rem !important;
            }

            #secAmenitiesToggles {
                display: flex !important;
                align-items: center !important;
                gap: 8px !important;
            }

            .amenity-swiper-item {
                padding: 15px;
            }

            .amenity-swiper-item .amenity-icon {
                width: 100px;
                height: 100px;
            }

            .amenity-swiper-item h5 {
                font-size: 1rem;
            }

            .amenities-swiper .swiper-button-next,
            .amenities-swiper .swiper-button-prev {
                display: none; /* Hide arrows on mobile */
            }
        }

        /* Sale Factors Swiper duplicate removed (keep single definition below) */

        /* Sale Factors Swiper duplicate removed (keep single definition below) */

        /* Sale Factors Swiper styles */
        .sale-factors-swiper {
            width: 100%;
            padding: 10px 0;
        }

        .sale-factor-swiper-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background: var(--white);
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
            height: 80px;
        }

        .sale-factor-icon {
            font-size: 2rem;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .sale-factor-text {
            font-size: 0.95rem;
            line-height: 1.3;
            color: var(--text-primary);
        }

        .sale-factors-swiper .swiper-pagination {
            position: relative;
            margin-top: 10px;
        }

        .sale-factors-swiper .swiper-pagination-bullet {
            background: var(--accent-color);
            opacity: 0.3;
        }

        .sale-factors-swiper .swiper-pagination-bullet-active {
            opacity: 1;
        }

        @media (max-width: 768px) {
            .sale-factor-swiper-item {
                height: 70px;
                padding: 12px;
            }

            .sale-factor-icon {
                font-size: 1.5rem;
                margin-right: 10px;
            }

            .sale-factor-text {
                font-size: 0.85rem;
            }
        }

        /* Utility: full-bleed container forcing 100vw edge-to-edge */
        .full-bleed {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
            padding-left: 0;
            padding-right: 0;
        }

        /* Remove horizontal gutters inside full-bleed rows */
        .full-bleed > .row,
        .full-bleed footer .row {
            --bs-gutter-x: 0;
            margin-left: 0;
            margin-right: 0;
        }

        /* Footer containment override: keep footer within max width when injected at #footerMenu */
        #footerMenu .bg-dark.text-secondary.py-5.text-center {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        #footerMenu .bg-dark.text-secondary.py-5.text-center > .container,
        #footerMenu .bg-dark.text-secondary.py-5.text-center > .container-fluid {
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 12px;
            padding-right: 12px;
        }
        

/* OVERRIDE: Fix chart button visibility */
.chart-theme-toggle,
.chart-refresh-btn {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    padding: 0 !important;
    overflow: visible !important;
}

.chart-theme-toggle svg,
.chart-refresh-btn svg {
    width: 14px !important;
    height: 14px !important;
    stroke: #ffffff !important;
    stroke-width: 2 !important;
    fill: none !important;
    display: block !important;
    pointer-events: none !important;
    opacity: 1 !important;
}

/* Ensure SVG path is visible */
.chart-theme-toggle svg path,
.chart-refresh-btn svg path {
    stroke: #ffffff !important;
    stroke-width: 2 !important;
    fill: none !important;
    opacity: 1 !important;
}

/* =============================================================
   Bootstrap 5 Modal Styles
   ============================================================= */

/* Modal Base Styles */
.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-bg: #fff;
  --bs-modal-border-color: rgba(0, 0, 0, 0.2);
  --bs-modal-border-width: 1px;
  --bs-modal-border-radius: 0.5rem;
  --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-modal-inner-border-radius: calc(0.5rem - 1px);
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: #dee2e6;
  --bs-modal-header-border-width: 1px;
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: transparent;
  --bs-modal-footer-border-color: #dee2e6;
  --bs-modal-footer-border-width: 1px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--bs-modal-margin);
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

.modal.show .modal-dialog {
  transform: none;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: #212529;
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
  margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
  background-color: var(--bs-modal-footer-bg);
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}

.modal-footer > * {
  margin: calc(var(--bs-modal-footer-gap) * 0.5);
}

/* Modal Sizes - Small screens and up */
@media (min-width: 576px) {
  .modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
  
  .modal-dialog {
    max-width: var(--bs-modal-width);
    margin-right: auto;
    margin-left: auto;
  }
  
  .modal-sm {
    --bs-modal-width: 300px;
  }
  
  .modal-dialog-centered {
    min-height: calc(100% - var(--bs-modal-margin) * 2);
  }
  
  .modal-dialog-scrollable {
    height: calc(100% - var(--bs-modal-margin) * 2);
  }
}

/* Modal Sizes - Large */
@media (min-width: 768px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: 800px;
  }
}

/* Modal Sizes - Extra Large */
@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 1140px;
  }
}

/* Fullscreen Modals */
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}

.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  border-radius: 0;
}

.modal-fullscreen .modal-body {
  overflow-y: auto;
}

/* Responsive Fullscreen Modals */
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  
  .modal-fullscreen-sm-down .modal-header,
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
  
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}

@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  
  .modal-fullscreen-md-down .modal-header,
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
  
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
}

@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  
  .modal-fullscreen-lg-down .modal-header,
  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
  
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
}

@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  
  .modal-fullscreen-xl-down .modal-header,
  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
  
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
}

@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  
  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  
  .modal-fullscreen-xxl-down .modal-header,
  .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0;
  }
  
  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto;
  }
}

/* Modal Open State - Body */
.modal-open {
  overflow: hidden;
  padding-right: 0;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Static Modal */
.modal-static .modal-dialog {
  transform: scale(1.02);
}

/* Fade animation classes */
.fade {
  transition: opacity 0.15s linear;
}

.fade:not(.show) {
  opacity: 0;
}

/* =============================================================
   Navbar Max Width Fixes
   ============================================================= */

/* Keep navbar background full width but constrain content */
.navbar.navbar-expand-lg.topNav-navbar {
    width: 100%;
    /* Don't override background-color here - let scroll classes handle it */
}

/* Create a centered container for navbar content */
.navbar.navbar-expand-lg.topNav-navbar > .container,
.navbar.navbar-expand-lg.topNav-navbar > .container-fluid {
    max-width: 1400px !important;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Ensure scroll background changes work properly */
.navbar.navbar-expand-lg.topNav-navbar.navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.975) !important; /* 97.5% white opacity - only 2.5% transparent */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Initial transparent state */
.navbar.navbar-expand-lg.topNav-navbar:not(.navbar-scrolled) {
    background-color: transparent !important;
    transition: background-color 0.3s ease-in-out;
}

/* Medium screens */
@media (min-width: 768px) {
    .navbar.navbar-expand-lg.topNav-navbar > .container,
    .navbar.navbar-expand-lg.topNav-navbar > .container-fluid {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Large screens */
@media (min-width: 1200px) {
    .navbar.navbar-expand-lg.topNav-navbar > .container,
    .navbar.navbar-expand-lg.topNav-navbar > .container-fluid {
        max-width: 1400px !important;
        padding-left: 50px;
        padding-right: 50px;
    }
}

/* Extra large screens */
@media (min-width: 1400px) {
    .navbar.navbar-expand-lg.topNav-navbar > .container,
    .navbar.navbar-expand-lg.topNav-navbar > .container-fluid {
        max-width: 1400px !important;
    }
}

/* If using custom-navbar-container, ensure it's properly constrained */
.navbar.navbar-expand-lg.topNav-navbar .custom-navbar-container {
    max-width: 1400px !important;
    margin: 0 auto;
    width: 100%;
}

/* =============================================================
   Modal Width Fixes - Force proper sizing
   ============================================================= */

/* Default modal width */
.modal-dialog {
  width: 100%;
  max-width: 500px !important;
  margin: 0.5rem auto !important;
}

/* Small screens */
@media (max-width: 575.98px) {
  .modal-dialog {
    max-width: calc(100% - 1rem) !important;
    margin: 0.5rem !important;
  }
}

/* Medium screens and up */
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px !important;
    margin: 1.75rem auto !important;
  }
  
  .modal-sm .modal-dialog {
    max-width: 300px !important;
  }
  
  .modal-dialog.modal-lg {
    max-width: 800px !important;
  }
  
  .modal-dialog.modal-xl {
    max-width: 800px !important;
  }
}

/* Large screens */
@media (min-width: 1200px) {
  .modal-dialog.modal-xl {
    max-width: 1140px !important;
  }
}

/* Ensure modal-content doesn't overflow */
.modal-content {
  width: 100% !important;
  max-width: 100% !important;
}

/* Fix for specific modals in your HTML */
#modalBase .modal-dialog,
#loginFormOptions .modal-dialog,
#joinCCModalBS5_modal .modal-dialog {
  width: 100%;
}

#modalBase .modal-dialog.modal-lg,
#loginFormOptions .modal-dialog.modal-lg,
#joinCCModalBS5_modal .modal-dialog.modal-lg {
  max-width: 800px !important;
}

#mapModalBS5 .modal-dialog.modal-xl {
  max-width: 1140px !important;
}

/* Fullscreen responsive modals should still work */
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down .modal-dialog {
    width: 100vw !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
}

/* Counter Animation Styles */
@keyframes counterAnimation {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes counterNumberAnimation {
  from {
    transform: scale(1.1);
    opacity: 0.7;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.counter-animate {
  animation: counterAnimation 0.8s ease-out forwards;
}

.counter-number-animate {
  animation: counterNumberAnimation 2s ease-out forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.counter-counting {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Smooth counter transition */
#outPersonsLatestEst {
  transition: all 0.3s ease-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
  position: relative;
}

/* Counter number display */
.counter-display {
  position: relative;
  display: inline-block;
}

/* =============================================================
   Extracted inline styles from newAreaHTMLCF2.php
   (deduplicated and placed at end of combined CSS)
   ============================================================= */

/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.dotP-container { display: flex; gap: 8px; }
.dotP { width: 20px; height: 20px; border-radius: 50%; background-color: #ED8B00; animation: bounce 0.6s infinite ease-in-out; }
.dot1P { animation-delay: 0s; }
.dot2P { animation-delay: 0.1s; }
.dot3P { animation-delay: 0.2s; }
@keyframes bounce { 0%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-20px); } }

/* Amenities swiper icon coloring: neutrals non-active, theme for active */
.amenities-swiper .swiper-slide .amenity-icon .amenity-svg-multitone { --primary-color: var(--neutral-1, #999967); --secondary-color: var(--neutral-3, #CCCC9A); }
.amenities-swiper .swiper-slide.as-amenity-active .amenity-icon .amenity-svg-multitone { --primary-color: unset; --secondary-color: unset; }
.amenities-swiper .swiper-slide .radial-progress .progress-ring { stroke: var(--neutral-1, #999967) !important; }
.amenities-swiper .swiper-slide.as-amenity-active .radial-progress .progress-ring { stroke: var(--secondary-color, #6e0f31) !important; }
.amenities-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; }
.amenities-swiper .amenities-prev, .amenities-swiper .amenities-next { width: auto; height: auto; border-radius: 0; background: transparent; border: 0; box-shadow: none; color: var(--neutral-1, #999967); --swiper-navigation-size: 16px; }
.amenities-swiper .amenities-prev::after, .amenities-swiper .amenities-next::after { font-size: 16px; font-weight: 600; }
.amenities-swiper .amenities-prev { left: 2px; }
.amenities-swiper .amenities-next { right: 2px; }
.amenities-swiper:hover .amenities-prev, .amenities-swiper:hover .amenities-next { opacity: 1; }
.amenities-swiper .amenities-prev, .amenities-swiper .amenities-next { opacity: 0.85; transition: opacity 200ms ease, transform 200ms ease; }
.amenities-swiper .amenities-prev:hover, .amenities-swiper .amenities-next:hover { opacity: 1; transform: scale(1.05); }

/* Inset description card fixed height for this page */
.description-card-container { perspective: 1000px; height: 500px !important; overflow: hidden; }
.description-card-container.desktop-only { height: 500px !important; min-height: 500px !important; max-height: 500px !important; display: block !important; position: relative; z-index: 1; }
.amenities-summary-row.desktop-only { margin-top: 30px !important; position: relative; z-index: 1; }
.description-card-container.desktop-only .description-card { height: 100% !important; min-height: 480px; }
.description-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 375ms ease; border-radius: 8px; padding: 10px 14px; background: #fff; border: 1px solid rgba(0,0,0,0.06); overflow: visible; box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
.description-card.flipped { transform: rotateY(180deg); }
.card-face { position: absolute; top: 0; left: 0; right: 0; bottom: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-face-front { display: block; }
.card-face-back { transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; }

/* Mobile amenities specific */
@media (max-width: 767px) {
  .amenities-swiper-mobile { height: 500px !important; display: block !important; }
  .amenities-swiper { display: none !important; }
  .amenities-summary-row.desktop-only { display: none !important; }
  .description-card-container.desktop-only { display: none !important; }
  .amenities-swiper-mobile .swiper-wrapper { height: 100% !important; }
  .amenities-swiper-mobile .swiper-slide { height: calc(500px / 3 - 10px) !important; display: flex; align-items: center; justify-content: center; }
  .amenities-swiper-mobile .amenity-icon { width: 80px !important; height: 80px !important; position: relative; }
  .amenities-swiper-mobile .amenity-icon svg.radial-progress { width: 80px !important; height: 80px !important; position: absolute; top: 0; left: 0; }
  .amenities-swiper-mobile .icon-content { width: 50px !important; height: 50px !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .mobile-amenities-top-row { margin-bottom: 20px; }
  .mobile-amenities-top-row .col-8 { padding-right: 5px !important; padding-left: 5px !important; }
  .mobile-amenities-top-row .col-4 { padding-right: 5px !important; padding-left: 10px !important; }
  .mobile-amenities-top-row .description-card-container { margin-right: 0; padding-right: 0; }
  .mobile-intro-content { padding: 15px; text-align: center; }
}
.amenities-swiper-mobile { display: none; }

/* Sale Factors Track Animation */
.sale-factors-track { display: flex; animation: scroll-sale-factors 30s linear infinite; white-space: nowrap; }
.sale-factors-track:hover { animation-play-state: paused; }
@keyframes scroll-sale-factors { 0% { transform: translateX(0); } 100% { transform: translateX(-33.33%); } }
.sale-factor-item { display: inline-flex; align-items: center; padding: 0 30px; white-space: nowrap; }
#saleFactorsContent { overflow: hidden; width: 100%; }

/* Mobile overflow fix */
@media (max-width: 768px) { #content { overflow-x: hidden !important; } }
@media (min-width: 769px) { #content { overflow-x: visible !important; } }

/* Side Navigation - Dark Dock (Spotify) Style */
.side-nav {
    position: sticky; top: 112px; z-index: 1000;
    background: transparent;
    border-radius: 0;
    border-left: none;
    padding: 0;
    box-shadow: none;
    transition: all 0.3s ease;
    width: 93%; margin: 0 auto;
}
.side-nav.sticky-top { position: sticky; top: 112px; left: auto; transform: none; width: 93%; border-radius: 0; }

.side-nav .nav-item {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.side-nav .nav-item:last-child { border-bottom: none; }

/* Base nav-link (icon-only, non-sticky fallback) */
.side-nav .nav-link {
    display: flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; border-radius: 50%;
    background: transparent; color: rgba(255, 255, 255, 0.7);
    text-decoration: none; transition: all 0.25s ease;
    position: relative; overflow: hidden; border: none;
}

/* Sticky-top: full-width list items */
.side-nav.sticky-top .nav-link {
    width: 100%; height: auto; border-radius: 6px;
    justify-content: flex-start;
    padding: 9px 12px; gap: 10px;
    background: transparent; border: none;
    color: rgba(255, 255, 255, 0.65); font-size: 0.88rem;
    border-left: 3px solid transparent;
    margin-left: -1px;
}

.side-nav .nav-link i {
    font-size: 17px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.5);
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    transform: scale(1);
}

.side-nav .nav-link .nav-text {
    position: absolute; left: 70px; background: #2a2a3e;
    padding: 5px 15px; border-radius: 20px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: all 0.25s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.85);
}
.side-nav.sticky-top .nav-link .nav-text {
    position: static; opacity: 1; pointer-events: auto;
    box-shadow: none; margin-left: 0; background: transparent; padding: 0;
    font-weight: 500; letter-spacing: 0.01em;
}

/* Hover */
.side-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transform: none;
}
.side-nav.sticky-top .nav-link:hover {
    border-left-color: rgba(237, 139, 0, 0.4);
}
.side-nav .nav-link:hover i {
    background: rgba(237, 139, 0, 0.12);
    color: #e0e0e0;
    transform: scale(1.15);
}
.side-nav .nav-link:hover .nav-text { opacity: 1; left: 65px; color: #fff; }

/* Active */
.side-nav .nav-link.active {
    background: rgba(237, 139, 0, 0.12);
    color: #fff;
    transform: none; box-shadow: none;
}
.side-nav.sticky-top .nav-link.active {
    border-left-color: var(--accent-color, #ED8B00);
    font-weight: 600;
}
.side-nav .nav-link.active i {
    color: var(--accent-color, #ED8B00);
    background: rgba(237, 139, 0, 0.2);
    animation: none;
    transform: scale(1.2);
}
.side-nav .nav-link.active .nav-text {
    color: #fff;
    font-weight: 600;
}

@media (max-width: 1199px) {
    .side-nav .nav-link { width: 42px; height: 42px; }
    .side-nav .nav-link i { font-size: 16px; width: 26px; height: 26px; }
    .side-nav.sticky-top .nav-link { padding: 7px 10px; font-size: 0.84rem; }
}
.mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.98); box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1); z-index: 1000; padding: 10px 0; display: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mobile-bottom-nav.show { display: block; }
.mobile-bottom-nav .nav-scroll-container { display: flex; padding: 0 10px; gap: 10px; overflow-x: auto; scroll-behavior: smooth; }
.mobile-bottom-nav .nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 60px; padding: 8px; border-radius: 12px; background: #f8f9fa; color: #6c757d; text-decoration: none; transition: all 0.3s ease; flex-shrink: 0; }
.mobile-bottom-nav .nav-link i { font-size: 20px; margin-bottom: 4px; }
.mobile-bottom-nav .nav-link span { font-size: 10px; font-weight: 500; }
.mobile-bottom-nav .nav-link:active, .mobile-bottom-nav .nav-link.active { background: var(--accent-color); color: white; transform: scale(0.95); }
@media (max-width: 991px) { body.mobile-nav-active { padding-bottom: 80px; } }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 100px; }
/* Sidenav viewport & scroll controls */
.side-nav .nav-viewport { overflow: hidden; position: relative; background: #1a1a2e; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); padding: 6px; }
.side-nav .nav-viewport .nav { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(0); }

.nav-scroll-btn {
    width: 100%; height: 24px;
    background: transparent;
    border: none;
    color: #9B2335;
    cursor: pointer; transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center;
    margin: 2px 0;
}
.nav-scroll-btn:hover { color: #B33A5E; transform: none; }
.nav-scroll-btn:disabled { opacity: 0.15; cursor: not-allowed; }
.nav-scroll-btn:disabled:hover { color: #9B2335; transform: none; }
.nav-scroll-btn i { font-size: 14px; }

/* Viewport gradient fades */
.nav-viewport::before, .nav-viewport::after {
    content: ''; position: absolute; left: 0; right: 0;
    height: 24px; pointer-events: none; z-index: 2;
    opacity: 0; transition: opacity 0.3s ease;
}
.nav-viewport::before { top: 0; background: linear-gradient(to bottom, #1a1a2e, transparent); }
.nav-viewport::after { bottom: 0; background: linear-gradient(to top, #1a1a2e, transparent); }
.nav-viewport.has-scroll-up::before { opacity: 1; }
.nav-viewport.has-scroll-down::after { opacity: 1; }
#sectionSpyDropdownMenu .nav-link.active { background-color: var(--accent-color); color: white; }
#sectionSpyDropdownMenu .nav-link.active i { color: white; }
#sectionSpyDropdownMenu .dropdown-item { padding: 0.5rem 1rem !important; transition: background-color 0.2s ease, color 0.2s ease; }
#sectionSpyDropdownMenu .dropdown-item:hover { background-color: var(--accent-color) !important; color: white !important; padding-left: 1rem !important; transform: none !important; }
#sectionSpyDropdownMenu .dropdown-item:hover i { color: white !important; }
#sectionSpyDropdown { min-width: 160px; }
#sectionIcon { color: var(--secondary); }
@media (max-width: 991px) {
  #sectionSpyDropdownMenu { min-width: 250px; max-width: calc(100vw - 20px); max-height: 70vh; overflow-y: auto; overflow-x: hidden; right: 5px !important; left: auto !important; }
  #sectionSpyDropdownMenu::-webkit-scrollbar { width: 6px; }
  #sectionSpyDropdownMenu::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 3px; }
  #sectionSpyDropdownMenu::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 3px; transition: background 0.2s ease; }
  #sectionSpyDropdownMenu::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }
  #sectionSpyDropdownMenu { scrollbar-width: thin; scrollbar-color: var(--secondary) rgba(0, 0, 0, 0.05); }
  #sectionSpyDropdownMenu .dropdown-item { padding: 0.5rem 1rem; white-space: nowrap; }
}

/* Body padding fix: remove page padding while preserving navbar offset */
body { 
  padding: 0 !important; 
  padding-top: 80px !important; 
}

/* Ensure modals overlay all UI layers */
.modal { z-index: 110000 !important; }
.modal-backdrop { z-index: 109990 !important; }

/* Keep explicit mobile override as well (redundant but safe) */
@media (max-width: 991px) {
  .modal { z-index: 110000 !important; }
  .modal-backdrop { z-index: 109990 !important; }
}

/* Show abbreviations on small screens */
@media (max-width: 600px) {
  .state-button .full-name {
    display: none;
  }
  .state-button .abbreviation {
    display: inline;
  }
  .desktop-only {
      display: none; /* Hide full text on mobile */
  }
  .mobile-only {
      display: inline; /* Show shortened text on mobile */
   }
}

/* Show full names on larger screens */
@media (min-width: 601px) {
  .state-button .full-name {
    display: inline;
  }
  .state-button .abbreviation {
    display: none;
  }

 .desktop-only {
      display: inline; /* Hide full text on mobile */
  }

  .mobile-only {
      display: none; /* Show shortened text on mobile */
   }
}

@media (max-width: 767px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: inline !important; }
}
@media (min-width: 768px) {
  .mobile-only { display: none !important; }
  .desktop-only { display: inline !important; }
}

/* Map loading spinner animation and common selectors */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#topMap .spinner, #topMap .loading-spinner,
#topAreaMap .spinner, #topAreaMap .loading-spinner,
.map-loading .spinner, .map-loading .loading-spinner {
  animation: spin 0.9s linear infinite;
}

/* Order Report modal sizing (explicit and predictable) */
#orderCcShortReportModal .modal-dialog {
  width: auto !important;
  max-width: 500px !important;
  margin: 1rem auto !important;
}
@media (min-width: 768px) {
  #orderCcShortReportModal .modal-dialog { max-width: 800px !important; }
}
@media (min-width: 1200px) {
  #orderCcShortReportModal .modal-dialog { max-width: 800px !important; }
}

/* Amenities: enforce proper single-row layout */
#secAmenities .amenities-summary-row { display: flex !important; flex-wrap: nowrap !important; }
#secAmenities .amenities-summary-row .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
#secAmenities .amenities-summary-row .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
#secAmenities #amenitiesDesktopContainer .row { display: flex; flex-wrap: nowrap; }
#secAmenities #amenitiesDesktopContainer .col-md-6 { flex: 0 0 auto; width: 50%; }
#secAmenities #amenitiesText { width: 100%; }
#secAmenities .amenities-carousel-container { width: 100%; }
#secAmenities .desktop-intro-content { width: 100%; }
#secAmenities .description-card-container { width: 100%; }
@media (max-width: 991.98px) {
  #secAmenities .amenities-summary-row { flex-wrap: wrap !important; }
  #secAmenities .amenities-summary-row .col-md-7,
  #secAmenities .amenities-summary-row .col-lg-5 { width: 100%; }
}
@media (max-width: 767.98px) {
  #secAmenities #amenitiesDesktopContainer .row { flex-wrap: wrap; }
  #secAmenities #amenitiesDesktopContainer .col-md-6 { width: 100%; }
}

/* Swiper should be visible on mobile and sized correctly */
#secAmenities .amenities-swiper { width: 100%; }
#secAmenities .amenities-swiper .swiper-slide { box-sizing: border-box; }

/* Silver outline button utilities */
:root { --as-silver: #c0c0c0; }
.btn-outline-silver { --bs-btn-color: #495057; --bs-btn-border-color: var(--as-silver); --bs-btn-hover-bg: rgba(0,0,0,.03); --bs-btn-hover-color: #212529; --bs-btn-hover-border-color: var(--as-silver); --bs-btn-active-bg: rgba(0,0,0,.05); --bs-btn-active-color: #212529; --bs-btn-active-border-color: var(--as-silver); background-color: transparent; }
.as-split-toggle { flex: 0 0 42px; display: flex; align-items: center; justify-content: center; padding-left: 0; padding-right: 0; background-color: var(--bs-primary); border-color: var(--bs-primary); color: white; }
.as-split-toggle:hover { background-color: var(--bs-primary); border-color: var(--bs-primary); filter: brightness(0.9); }
.as-split-toggle.dropdown-toggle::after { width: 0.4em; height: 0.4em; margin-left: 0; }
.as-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.as-levels .btn { padding: .35rem .65rem; }
.as-levels .btn-check { display: none; }

/* Full-Screen Accordion Mobile Navigation */
@media (max-width: 991px) {
  #navbarNavDropdown { position: fixed !important; top: 85px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: calc(100vh - 85px) !important; max-height: calc(100vh - 85px) !important; background: white !important; z-index: 1040 !important; display: none !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 0 !important; margin: 0 !important; border: none !important; transform: none !important; transition: none !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; }
  #navbarNavDropdown.show { display: block !important; }
  body.dark-mode #navbarNavDropdown { background: #1a1a1a !important; }
  #navbarNavDropdown .navbar-nav { flex-direction: column !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  #navbarNavDropdown .nav-item { width: 100% !important; margin: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
  body.dark-mode #navbarNavDropdown .nav-item { border-bottom-color: rgba(255, 255, 255, 0.08); }
  #navbarNavDropdown .nav-link { padding: 18px 20px !important; font-size: 17px !important; color: var(--text-color, #333) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; text-decoration: none !important; background: transparent !important; border: none !important; width: 100% !important; text-align: left !important; cursor: pointer !important; }
  #navbarNavDropdown .nav-link:hover, #navbarNavDropdown .nav-link:focus { background-color: rgba(237, 139, 0, 0.08) !important; outline: none !important; }
  #navbarNavDropdown .dropdown-toggle::after { content: '+' !important; border: none !important; font-size: 24px !important; font-weight: 300 !important; color: #999 !important; margin-left: auto !important; transition: transform 0.3s ease !important; width: auto !important; height: auto !important; vertical-align: unset !important; }
  #navbarNavDropdown .dropdown.show .dropdown-toggle::after { content: '−' !important; transform: none !important; }
  #navbarNavDropdown .dropdown-menu { position: static !important; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; background: rgba(0, 0, 0, 0.02) !important; box-shadow: none !important; transform: none !important; display: none !important; max-height: 0 !important; overflow: hidden !important; transition: max-height 0.3s ease-out !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; }
  body.dark-mode #navbarNavDropdown .dropdown-menu { background: rgba(255, 255, 255, 0.02) !important; }
  #navbarNavDropdown .dropdown.show .dropdown-menu { display: block !important; max-height: 500px !important; transition: max-height 0.3s ease-in !important; }
  #navbarNavDropdown .dropdown-item { padding: 14px 20px 14px 40px !important; font-size: 16px !important; color: var(--text-color, #666) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; background: transparent !important; border-radius: 0 !important; white-space: normal !important; word-wrap: break-word !important; }
  body.dark-mode #navbarNavDropdown .dropdown-item { color: #ccc !important; border-bottom-color: rgba(255, 255, 255, 0.05) !important; }
  #navbarNavDropdown .dropdown-item:last-child { border-bottom: none !important; }
  #navbarNavDropdown .dropdown-item:hover, #navbarNavDropdown .dropdown-item:focus { background-color: rgba(237, 139, 0, 0.1) !important; color: var(--text-color, #333) !important; }
  #navbarNavDropdown .dropdown-menu[data-bs-popper] { position: static !important; inset: unset !important; transform: none !important; }
  body.mobile-menu-open { overflow: hidden !important; position: fixed !important; width: 100% !important; height: 100% !important; }
  #navbarNavDropdown .topNav-search-icon { margin: 20px !important; width: calc(100% - 40px) !important; justify-content: center !important; background: var(--accent-color) !important; color: white !important; border: none !important; padding: 12px !important; border-radius: 8px !important; font-size: 16px !important; }
  #navbarNavDropdown, #navbarNavDropdown * { -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; }
}

/* =============================================================
   Small fixes per user feedback
   - Remove top line in navigation dropdown
   - Remove left margin/padding in footer
   ============================================================= */

/* Remove decorative line at top of nav dropdown */
.topNav-header .dropdown-menu::before { content: none !important; display: none !important; }

/* Footer: remove left margin and container padding */
body > .bg-dark.text-secondary.py-5.text-center,
#footerMenu .bg-dark.text-secondary.py-5.text-center { 
  width: 100% !important;
  margin-left: 0 !important; 
  margin-right: 0 !important; 
}

#footerMenu .bg-dark.text-secondary.py-5.text-center > .container,
#footerMenu .bg-dark.text-secondary.py-5.text-center > .container-fluid {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Speech bubble mobile/overflow improvements (appended at end) */
.speech-bubble-content {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-wrap: anywhere;
    word-break: break-word;
    touch-action: pan-y;
}

@media (max-width: 576px) {
    .speech-bubble {
        min-width: auto;
        max-width: 94vw;
    }
}

/* Align with JS fixed positioning to avoid jumps */
.speech-bubble {
    position: fixed;
}

@media (max-width: 576px) {
    .speech-bubble {
        max-height: 95dvh; /* Progressive enhancement on modern browsers */
        box-sizing: border-box;
    }
}

/* Bootstrap 5 Popover sizing for helper content */
.popover.speech-popover {
    max-width: min(92vw, 620px);
    margin: 0;
}
.popover.speech-popover .popover-body { padding: 0; }
.popover.speech-popover .popover-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    max-height: 70vh;
    padding: 20px 24px;
}
@media (max-width: 576px) {
    .popover.speech-popover .popover-scroll { max-height: 90dvh; }
}

/* Make the close button clearly visible and spaced */
.popover.speech-popover .popover-header {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--secondary-color);
    color: white;
}
.popover.speech-popover .popover-title { font-weight: 600; color: white; }
.popover.speech-popover .popover-sep { margin: 0 8px; color: rgba(255,255,255,0.5); }
.popover.speech-popover .popover-close-x {
    appearance: none;
    line-height: 1;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: transparent;
    border: 0;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    cursor: pointer;
}
.popover.speech-popover .popover-close-x:hover,
.popover.speech-popover .popover-close-x:focus {
    opacity: 1;
    background: rgba(255,255,255,0.15);
    outline: none;
}
body.dark-mode .popover.speech-popover .popover-close-x {
    color: white;
}

/* Grid.js header sizing and truncation for long titles */
.gridjs .gridjs-thead .gridjs-th {
    font-size: 12px;
    line-height: 1.2;
    padding: 4px 8px;
    white-space: nowrap;
}
.gridjs .gridjs-thead .gridjs-th .gridjs-th-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: var(--gridjs-th-max, 180px);
}

/* ============================================================
   TABLE CONTAINER HEIGHT RESERVATION + SKELETON (reduce CLS)
   Source: previously in-page; centralized here for maintenance
   ============================================================ */
/* Desktop heights (based on measured dimensions from live site) */
#salesDetailTableContainer { min-height: 900px; }
#populationTableContainer { min-height: 400px; }
#developmentTableContainer { min-height: 650px; }
#employmentTableContainer { min-height: 400px; }
#incomeTableContainer { min-height: 450px; }
#housingTableContainer { min-height: 600px; }
#householdsTableContainer { min-height: 380px; }
#educationTableContainer { min-height: 500px; } /* adjusted */
#educationSchoolsTableContainer { min-height: 400px; } /* adjusted */
#transportStopsTableContainer { min-height: 1000px; } /* adjusted */
#healthTableContainer { min-height: 420px; }
#diversityTableContainer { min-height: 670px; }
#ageTableContainer { min-height: 380px; }

/* Mobile/Tablet adjustments */
@media (max-width: 992px) {
    #salesDetailTableContainer { min-height: 600px; }
    #populationTableContainer { min-height: 300px; }
    #developmentTableContainer { min-height: 450px; }
    #employmentTableContainer { min-height: 300px; }
    #incomeTableContainer { min-height: 350px; }
    #housingTableContainer { min-height: 450px; }
    #householdsTableContainer { min-height: 280px; }
    #educationTableContainer { min-height: 500px; }
    #educationSchoolsTableContainer { min-height: 400px; }
    #transportStopsTableContainer { min-height: 800px; }
    #healthTableContainer { min-height: 320px; }
    #diversityTableContainer { min-height: 500px; }
    #ageTableContainer { min-height: 280px; }
}

/* Very small mobile screens */
@media (max-width: 576px) {
    #salesDetailTableContainer { min-height: 500px; }
    #transportStopsTableContainer { min-height: 600px; }
    #developmentTableContainer { min-height: 350px; }
    #housingTableContainer { min-height: 350px; }
    #educationTableContainer { min-height: 400px; }
    #educationSchoolsTableContainer { min-height: 350px; }
    #diversityTableContainer { min-height: 400px; }
    /* Other tables can stay at their tablet sizes */
    #populationTableContainer { min-height: 250px; }
    #employmentTableContainer { min-height: 250px; }
    #incomeTableContainer { min-height: 300px; }
    #householdsTableContainer { min-height: 250px; }
    #healthTableContainer { min-height: 280px; }
    #ageTableContainer { min-height: 250px; }
}

/* ============================================================
   SKELETON LOADER - SHOWS WHILE TABLES ARE LOADING
   ============================================================ */
.table-container {
    position: relative;
}

/* Skeleton animation when container is empty */
.table-container:empty::before,
.table-container:not(:has(*))::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit; /* Use the min-height from parent */
    background: linear-gradient(90deg, #f0f0f0 0%, #f8f8f8 20%, #f0f0f0 40%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s ease-in-out infinite;
    border-radius: 8px;
    opacity: 0.7;
}

/* Skeleton shimmer animation */
@keyframes skeletonLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Optional: subtle skeleton "rows" pattern */
.table-container:empty::after,
.table-container:not(:has(*))::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 48px,
        rgba(255, 255, 255, 0.3) 48px,
        rgba(255, 255, 255, 0.3) 50px
    );
    border-radius: 8px;
    pointer-events: none;
}

/* Dark mode skeleton */
@media (prefers-color-scheme: dark) {
    .table-container:empty::before,
    .table-container:not(:has(*))::before {
        background: linear-gradient(90deg, #2a2a2a 0%, #333333 20%, #2a2a2a 40%, #2a2a2a 100%);
    }
    .table-container:empty::after,
    .table-container:not(:has(*))::after {
        background-image: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 48px,
            rgba(0, 0, 0, 0.3) 48px,
            rgba(0, 0, 0, 0.3) 50px
        );
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .table-container:empty::before,
    .table-container:not(:has(*))::before {
        animation: none;
        background: #f0f0f0;
    }
}

/* Hide skeleton once content is present */
.table-container:has(table)::before,
.table-container:has(table)::after,
.table-container:has(.gridjs-wrapper)::before,
.table-container:has(.gridjs-wrapper)::after {
    display: none !important;
}