/* =============================================
   ELECTION COMMISSION SRI LANKA
   Modern Responsive Design with Theme Support
   Primary: #e83e8c (Pink) + White
   ============================================= */

/* ========== CSS Custom Properties - Light Theme (Default) ========== */
:root,
[data-theme="light"] {
    /* Primary Colors */
    --primary: #e83e8c;
    --primary-dark: #d63384;
    --primary-light: #f06595;
    --primary-pale: #fce4ec;
    --primary-rgb: 232, 62, 140;
    
    /* Accent Colors */
    --accent: #e83e8c;
    --accent-dark: #d63384;
    --accent-light: #f06595;
    --accent-pale: #fce4ec;
    --accent-rgb: 232, 62, 140;
    
    /* Secondary Colors */
    --secondary: #28a745;
    --secondary-dark: #218838;
    --secondary-light: #5cb85c;
    
    /* Surface Colors */
    --surface: #ffffff;
    --surface-alt: #ffffff;
    --surface-elevated: #ffffff;
    --surface-hover: #f8f9fa;
    
    /* Text Colors */
    --text: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --text-inverse: #ffffff;
    --text-light: #868e96;
    
    /* Border & Shadows */
    --border: #dee2e6;
    --border-light: #e9ecef;
    --border-dark: #ced4da;
    --shadow-color: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 2px 8px var(--shadow-color);
    --shadow-md: 0 8px 24px var(--shadow-color);
    --shadow-lg: 0 16px 48px var(--shadow-color);
    --shadow-xl: 0 20px 60px var(--shadow-color);
    
    /* Component Colors */
    --nav-bg: #ffffff;
    --card-bg: #ffffff;
    --footer-bg: linear-gradient(135deg, #e83e8c 0%, #f06595 100%);
    --utility-bar-bg: linear-gradient(90deg, #6F2C91, #C7017F);
    --hero-gradient: linear-gradient(135deg, rgba(232, 62, 140, 0.95) 0%, rgba(240, 101, 149, 0.95) 100%);
    
    /* Success/Warning/Info */
    --success: #28a745;
    --warning: #ffc107;
    --info: #17a2b8;
    --danger: #dc3545;
    
    /* Transition */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ========== Dark Theme ========== */
[data-theme="dark"] {
    /* Primary Colors - slightly adjusted for dark mode */
    --primary: #f06595;
    --primary-dark: #e83e8c;
    --primary-light: #f8a4c4;
    --primary-pale: #3d1f2e;
    --primary-rgb: 240, 101, 149;
    
    /* Accent Colors */
    --accent: #f06595;
    --accent-dark: #e83e8c;
    --accent-light: #f8a4c4;
    --accent-pale: #3d1f2e;
    --accent-rgb: 240, 101, 149;
    
    /* Secondary Colors */
    --secondary: #4ade80;
    --secondary-dark: #22c55e;
    --secondary-light: #6ee7b7;
    
    /* Surface Colors - Improved contrast */
    --surface: #0f0f0f;
    --surface-alt: #1a1a1a;
    --surface-elevated: #252525;
    --surface-hover: #2e2e2e;
    
    /* Text Colors - Enhanced readability */
    --text: #f5f5f5;
    --text-secondary: #d1d1d1;
    --text-muted: #a0a0a0;
    --text-inverse: #0f0f0f;
    --text-light: #b8b8b8;
    
    /* Border & Shadows - Better visibility */
    --border: #333333;
    --border-light: #2a2a2a;
    --border-dark: #404040;
    --shadow-color: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12);
    
    /* Component Colors */
    --nav-bg: #1a1a1a;
    --card-bg: #252525;
    --footer-bg: linear-gradient(135deg, #1a1218 0%, #2a1a22 100%);
    --utility-bar-bg: #1a1a1a;
    --hero-gradient: linear-gradient(135deg, rgba(26, 18, 24, 0.95) 0%, rgba(42, 26, 34, 0.95) 100%);
    
    /* Success/Warning/Info */
    --success: #4ade80;
    --warning: #fbbf24;
    --info: #60a5fa;
    --danger: #ff6b7a;
    
    /* Dark mode text rendering */
    --text-shadow-subtle: 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ========== Base Styles ========== */
*,
*::before,
*::after {
    box-sizing:border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
    /* Optimize scrolling */
    scroll-padding-top: 80px;
}

/* GPU-accelerated smooth scrolling */
@supports (scroll-behavior: smooth) {
    html {
        scroll-behavior: smooth;
    }
}

body.modern-home {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--surface-alt);
    transition: var(--theme-transition);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1;
    letter-spacing: 0.01em;
    /* Optimize paint performance */
    /* contain: layout style; */
}

/* Dark mode body optimizations */
[data-theme="dark"] body.modern-home,
body.modern-home[data-theme="dark"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--surface-alt);
    color:#000;
}

/* Optimized theme transitions - only on specific properties */
body.modern-home *:not(.carousel-slide):not(.slide-image):not(.bar):not(.pie-segment) {
    transition: background-color 0.25s ease, 
                color 0.25s ease, 
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

/* Performance: GPU acceleration for animated elements */
.carousel-slide,
.bar,
.pie-segment,
.nav-panel,
[data-animate],
.back-to-top,
.stat-item,
.action-card,
.metric-card,
.info-card {
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
}

[data-animate],
[data-animate].in-view,
[data-animate-stagger] > *,
[data-animate-stagger] > *.in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}
/* Optimize images */
img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Optimize rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering:inherit;
}

/* Optimize links */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

a:hover {
    color: var(--primary-dark);
}

/* Active state for touch feedback */
a:active,
button:active {
    transform: scale(0.98);
}

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Remove black focus outline globally, use custom focus styles */
button:focus,
a:focus {
    outline: none;
}

/* Accessible focus-visible for keyboard navigation */
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

ul, ol {
    list-style: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========== Page Container - Full Width ========== */
.page-shell {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0 0px;
    background: var(--surface-alt);
}

/* ========== Utility Bar ========== */
.utility-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 40px;
    background: var(--utility-bar-bg);
    color: var(--text-inverse);
    font-size: 0.85rem;
    margin: 0;
    width: 100%;
}

[data-theme="dark"] .utility-bar {
    background: var(--utility-bar-bg);
    border-bottom: 1px solid var(--border);
    color: #ffffff;
}

[data-theme="dark"] .utility-left .location,
[data-theme="dark"] .utility-left .phone {
    color: #ffffff;
    opacity: 1;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .utility-left .location .fas,
[data-theme="dark"] .utility-left .phone .fas {
    color: #ffffff;
    opacity: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.utility-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.utility-left .location,
.utility-left .phone {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-inverse);
}

.utility-left .location .fas,
.utility-left .phone .fas {
    color: var(--text-inverse);
    opacity: 0.9;
    font-size: 0.9rem;
}

.utility-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ========== Social Icons ========== */
.social-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.social-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.85rem;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.25s ease;
    cursor: pointer;
}

.social-icon:hover {
    /* background: #fff; */
    /* color: var(--primary); */
    transform: scale(1.15) translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.social-icon:active {
    transform: scale(1.05);
    transition-duration: 0.1s;
}

[data-theme="dark"] .social-icon {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .social-icon:hover {
    /* background: var(--primary); */
    /* color: #fff; */
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.4);
}
/* ========== Language Switcher ========== */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px;
    border-radius: 8px;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #fff;
    background: transparent;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease,
                color 0.2s ease;
    white-space: nowrap;
    outline: none;
}

[data-theme="dark"] .lang-btn {
    color: #fff;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    transform: scale(1.05);
}

.lang-btn:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

.lang-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.lang-btn.is-active {
    background: #fff;
    color: var(--primary);
}

.lang-btn.is-active:hover {
    transform: scale(1.02);
}

.lang-flag {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.lang-btn:hover .lang-flag {
    transform: scale(1.1);
}

/* ========== Theme Toggle Button ========== */
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.25s ease,
                box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    outline: none;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(255, 255, 255, 0.4), 0 0 60px rgba(232, 62, 140, 0.3);
    transform: scale(1.1);
}

.theme-toggle:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

.theme-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

[data-theme="dark"] .theme-toggle:hover {
    box-shadow: 0 0 20px rgba(240, 101, 149, 0.6), 0 0 40px rgba(240, 101, 149, 0.4), 0 0 60px rgba(240, 101, 149, 0.2);
}

.theme-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    transition: opacity 0.3s ease,
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.light-icon {
    opacity: 0;
    transform: translateY(20px) rotate(-90deg);
}

.dark-icon {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

[data-theme="dark"] .light-icon {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

[data-theme="dark"] .dark-icon {
    opacity: 0;
    transform: translateY(-20px) rotate(90deg);
}

[data-theme="dark"] .theme-toggle {
    background: var(--surface-elevated);
    border-color: var(--border);
}

[data-theme="dark"] .theme-icon {
    color: var(--primary);
}

/* ========== Brand Bar ========== */
.brand-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    gap: 30px;
    background: var(--surface);
    transition: var(--theme-transition);
}

.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.brand .brand-logo {
    width: 320px;
    height: auto;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

[data-theme="dark"] .brand .brand-logo {
    filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.1)) brightness(1.05);
}

.brand:hover .brand-logo {
    transform: scale(1.02);
}

.brand-meta {
    flex: 1;
    text-align: right;
}

.brand-meta .tagline {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 10px;
    max-width: 350px;
    margin-left: auto;
}

.brand-cta {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* ========== Buttons ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.5s ease,
                background-color 0.4s ease,
                border-color 0.4s ease,
                color 0.4s ease;
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

/* Button ripple effect */
.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn:active::after {
    width: 200px;
    height: 200px;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.35);
}

.btn-primary:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
    transition-duration: 0.15s;
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.25);
}

.btn-outline:active {
    transform: translateY(-1px);
    transition-duration: 0.15s;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
}

/* ========== Site Navigation ========== */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--nav-bg);
    box-shadow: var(--shadow-sm);
    border-radius: 0;
    margin: 0;
    padding: 0 40px;
    transition: var(--theme-transition);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

[data-theme="dark"] .site-nav {
    background: var(--card-bg);
    border-color: var(--border);
}

.nav-toggle {
    display: none;
    width: 100%;
    padding: 14px 0;
    background: var(--nav-bg);
    border-radius: 0;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    justify-content: space-between;
    align-items: center;
    transition: var(--theme-transition);
    cursor: pointer;
    outline: none;
    border: none;
}

.nav-toggle:hover .nav-toggle-icon::before,
.nav-toggle:hover .nav-toggle-icon::after,
.nav-toggle:hover .nav-toggle-icon span {
    background: var(--primary-dark);
}

.nav-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.nav-toggle-icon {
    width: 24px;
    height: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: var(--primary);
    border-radius: 3px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease;
}

.nav-toggle-icon span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--primary);
    border-radius: 3px;
    transition: opacity 0.2s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease;
}

.site-nav.is-open .nav-toggle-icon::before {
    transform: translateY(8.5px) rotate(45deg);
}

.site-nav.is-open .nav-toggle-icon::after {
    transform: translateY(-8.5px) rotate(-45deg);
}

.site-nav.is-open .nav-toggle-icon span {
    opacity: 0;
    transform: scaleX(0);
}

.nav-list {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 14px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    background: transparent;
    cursor: pointer;
    outline: none;
    border: none;
    border-bottom: 3px solid transparent;
}

/* Remove default focus outline and add custom focus style */
.nav-link:focus {
    outline: none;
    box-shadow: none;
}

.nav-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    border-radius: 4px;
}

.nav-link:hover,
.nav-item.open .nav-link,
.nav-item.is-active .nav-link {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: var(--primary-pale);
}

/* Open state - stronger visual feedback */
.nav-item.open .nav-link {
    color: var(--primary);
    background: var(--primary-pale);
    border-bottom-color: var(--primary);
    box-shadow: inset 0 -3px 0 var(--primary);
}

/* Active state indicator - simple highlight only */
.nav-item.is-active .nav-link {
    background: var(--primary-pale);
    font-weight: 700;
}

/* ========== Navigation Dropdown Panels ========== */
.nav-panel {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 600px;
    max-width: 1050px;
    background: var(--card-bg);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-lg);
    padding: 20px;
    display: none;
    z-index: 100;
    opacity: 0;
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--primary);
}

[data-theme="dark"] .nav-panel {
    background: var(--surface-elevated);
    border-color: var(--border);
    border-top-color: var(--primary);
}

.nav-item.open .nav-panel {
    display: block;
    opacity: 1;
    animation: panelSlide 0.2s ease forwards;
}

/* Position panels for items on the right side */
.nav-item:nth-last-child(-n+3) .nav-panel {
    left: auto;
    right: 0;
}

.nav-item.open .nav-panel {
    display: block;
    opacity: 1;
    animation: panelSlide 0.2s ease forwards;
}

/* Position panels for items on the right side */
.nav-item:nth-last-child(-n+3) .nav-panel {
    left: auto;
    right: 0;
}

@keyframes panelSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.nav-panel-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.nav-panel-grid section {
    border-left: 3px solid var(--primary-pale);
    padding-left: 14px;
}

.nav-panel-grid .panel-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: 8px;
    font-weight: 700;
}

.nav-panel-grid ul {
    margin: 0;
    padding: 0;
}

.nav-panel-grid a {
    display: block;
    padding: 6px 0;
    font-size: 0.85rem;
    color: var(--text);
    transition: color 0.2s ease,
                padding-left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease;
    border-radius: 4px;
}

.nav-panel-grid a:hover {
    color: var(--primary);
    padding-left: 8px;
    background-color: rgba(232, 62, 140, 0.05);
}

.nav-panel-grid a:active {
    padding-left: 6px;
    transition-duration: 0.1s;
}

/* ========== Main Content ========== */
main {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 0 40px;
    max-width: 1600px;
    margin: 0 auto;
}

/* ========== Hero Section - Original Image Colors ========== */
/* ========== Hero Section - Full Width Edge-to-Edge ========== */
.hero-section {
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--card-bg);
    border: none;
    border-bottom: 1px solid var(--border-light);
    margin: 0 0 28px;
    width: 100%;
    position: relative;
    /* Smooth parallax transition */
    will-change: transform, opacity;
    transition: opacity 0.1s ease;
}

[data-theme="dark"] .hero-section {
    border-color: var(--border);
}

.hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    position: relative;
    overflow: hidden;
}

.carousel-slide {
    display: none;
    position: relative;
    min-height: 420px;
    width: 100%;
}

.carousel-slide.is-active {
    display: block;
    animation: fadeIn 0.6s ease;
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    max-width: 650px;
    padding: 50px 60px;
    background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 70%, transparent 100%);
    color: #fff;
    z-index: 2;
    border-radius: 0 20px 0 0;
}

.slide-badge {
    display: inline-block;
    background: var(--primary);
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.slide-content h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.slide-content p {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    opacity: 0.95;
    margin-bottom: 20px;
    line-height: 1.6;
    max-width: 600px;
}

[data-theme="dark"] .slide-content p {
    color: #a8a8a8;
}

.slide-content .btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.slide-content .btn-primary:hover {
    background: #fff;
    color: var(--primary);
    border-color: #fff;
}

/* Carousel Controls - Right Bottom Position */
.carousel-controls {
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    padding: 10px 16px;
    border-radius: 50px;
}

.carousel-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease;
    outline: none;
}

.carousel-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.15);
    box-shadow: 0 4px 16px rgba(232, 62, 140, 0.4);
}

.carousel-btn:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

.carousel-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Carousel Dots - Inside Controls Container */
.carousel-dots {
    display: flex;
    gap: 8px;
}

.carousel-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease,
                border-color 0.25s ease;
    outline: none;
}

.carousel-dots .dot.is-active,
.carousel-dots .dot:hover {
    background: #fff;
    border-color: #fff;
    transform: scale(1.2);
}

.carousel-dots .dot:active {
    transform: scale(0.9);
}

.carousel-dots .dot:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========== Hero Info Unified Section - Full Width Enhanced ========== */
.hero-info-unified {
    width: 100%;
    margin-top: 8px;
}

/* Fullwidth cards variant - no extra padding */
.hero-info-unified.fullwidth-cards {
    margin-top: 0;
    /* Break out of parent padding to go full width */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: none;
}

/* ========== Media Topics Section - Full Width 3x3 Grid ========== */

.services-section1 {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: none;
    padding: 70px 0 80px;
    background: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%);
}

.services-section1 .section-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 5%;
}


/* Eyebrow Badge */
.services-section1 .eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1) 0%, rgba(var(--primary-rgb), 0.15) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 50px;
    margin-bottom: 20px;
    animation: pulse-badge 2s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.1);
}

.services-section1 .eyebrow-badge .fas {
    font-size: 0.85rem;
    color: var(--accent);
    animation: flame 1s ease-in-out infinite alternate;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes flame {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-2px) scale(1.1); opacity: 0.8; }
}

/* Main Section Heading */
.services-section1 .section-heading {
    font-size: 2.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--text) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

[data-theme="dark"] .services-section1 .section-heading {
    background: linear-gradient(135deg, #ffffff 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

[data-theme="dark"] .section-subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .section-title {
    color: var(--text);
}

[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: var(--text);
}

[data-theme="dark"] p {
    color:#000;
}

[data-theme="dark"] a {
    color:#000;
}

[data-theme="dark"] a:hover {
    color:#000;
}

[data-theme="dark"] .nav-link {
    color: var(--text);
}

[data-theme="dark"] .nav-link:hover {
    color: var(--primary-light);
}

.services-section1 .section-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Service Card Base - Modern card button design */
.service-card1 {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 32px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    /* Initial state for scroll animation */
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity, box-shadow;
}

/* Decorative gradient overlay on hover */
.service-card1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light, #ff6b9d));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Subtle background glow on hover */
.service-card1::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(var(--primary-rgb), 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Staggered animation delays - cascade effect */
.service-card1[data-delay="0"] { transition-delay: 0s; }
.service-card1[data-delay="1"] { transition-delay: 0.08s; }
.service-card1[data-delay="2"] { transition-delay: 0.16s; }
.service-card1[data-delay="3"] { transition-delay: 0.24s; }
.service-card1[data-delay="4"] { transition-delay: 0.32s; }
.service-card1[data-delay="5"] { transition-delay: 0.4s; }
.service-card1[data-delay="6"] { transition-delay: 0.48s; }
.service-card1[data-delay="7"] { transition-delay: 0.56s; }
.service-card[data-delay="8"] { transition-delay: 0.64s; }
.service-card[data-delay="9"] { transition-delay: 0.72s; }
.service-card[data-delay="10"] { transition-delay: 0.8s; }
.service-card[data-delay="11"] { transition-delay: 0.88s; }
.service-card[data-delay="12"] { transition-delay: 0.96s; }
.service-card[data-delay="13"] { transition-delay: 1.04s; }
.service-card[data-delay="14"] { transition-delay: 1.12s; }

/* Animated state when in view */
.services-section1.in-view .service-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Hover effects - lift and glow */
.service-card1:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12),
                0 8px 16px rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.services-section1.in-view .service-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card1:hover::after {
    opacity: 1;
}

/* Active/pressed state */
.service-card1:active {
    transform: translateY(-4px) scale(1);
    transition-duration: 0.1s;
}

/* Service Content */
.service-content1 {
    flex: 1;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.service-content1 h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    transition: color 0.3s ease, transform 0.3s ease;
    line-height: 1.4;
}

.service-content1 p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
    transition: color 0.3s ease;
}

.service-card:hover .service-content h3 {
    color: var(--primary);
    transform: translateX(4px);
}

.service-card:hover .service-content p {
    color: var(--text);
}

/* Service Link - Call to action button style */
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
    margin-top: auto;
}

.service-link .fas {
    font-size: 0.8rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card:hover .service-link {
    background: var(--primary);
    color: white;
    gap: 14px;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.35);
}

.service-card:hover .service-link .fas {
    transform: translateX(4px);
}

.service-card:active .service-link {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

/* Service Badge */
.service-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light, #ff6b9d));
    color: white;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
}

.service-card:hover .service-badge {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
}

/* Featured Card Variant */
.service-card.featured {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.04) 0%, var(--card-bg) 100%);
    border-color: rgba(var(--primary-rgb), 0.15);
}

.service-card.featured::before {
    background: linear-gradient(90deg, var(--primary), #ff6b35);
}

/* Highlight Card Variant */
.service-card.highlight {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(var(--primary-rgb), 0.03) 100%);
    border-color: rgba(var(--primary-rgb), 0.12);
}

.service-card.highlight::before {
    background: linear-gradient(90deg, #6366f1, var(--primary));
}

/* Dark Theme for Services */
[data-theme="dark"] .services-section {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-elevated) 100%);
}

[data-theme="dark"] .service-card {
    background: var(--card-bg);
    border-color: var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .service-card:hover {
    background: var(--surface-elevated);
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
                0 8px 16px rgba(var(--primary-rgb), 0.2),
                0 0 0 1px rgba(var(--primary-rgb), 0.3);
}

[data-theme="dark"] .service-card .service-content h3 {
    color: var(--text);
}

[data-theme="dark"] .service-card .service-content p {
    color: var(--text-secondary);
}

[data-theme="dark"] .service-card:hover .service-content h3 {
    color: var(--primary-light);
}

[data-theme="dark"] .service-card:hover .service-content p {
    color: var(--text);
}

[data-theme="dark"] .service-link {
    background: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-light);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
}

[data-theme="dark"] .service-card:hover .service-link {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Responsive Services Grid */
@media (max-width: 1100px) {
    .services-section1 .section-heading {
        font-size: 2.2rem;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0 24px;
    }
}

@media (max-width: 700px) {
    .services-section1 {
        padding: 50px 0 60px;
    }
    
    .services-section1 .section-heading {
        font-size: 1.8rem;
    }
    
    .services-section1 .section-subtitle {
        font-size: 1rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0 16px;
    }
    
    .service-card {
        padding: 28px 24px;
    }
    
    .services-section {
        padding: 40px 0;
    }
    
    .service-card {
        padding: 24px 20px;
    }
}
/* ========== Trending Topics Section - Full Width 3x3 Grid ========== */
.services-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: none;
    padding: 0px 0 0px;
    background: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%);
}

.services-section .section-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 5%;
}

/* Eyebrow Badge */
.services-section .eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1) 0%, rgba(var(--primary-rgb), 0.15) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 50px;
    margin-bottom: 20px;
    animation: pulse-badge 2s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.1);
}

.services-section .eyebrow-badge .fas {
    font-size: 0.85rem;
    color: var(--accent);
    animation: flame 1s ease-in-out infinite alternate;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes flame {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-2px) scale(1.1); opacity: 0.8; }
}

/* Main Section Heading */
.services-section .section-heading {
    font-size: 2.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--text) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

[data-theme="dark"] .services-section .section-heading {
    background: linear-gradient(135deg, #ffffff 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

[data-theme="dark"] .section-subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .section-title {
    color: var(--text);
}

[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: var(--text);
}

[data-theme="dark"] p {
    color:#000;
}

[data-theme="dark"] a {
    color: #666;
}

[data-theme="dark"] a:hover {
    color: black;
}

[data-theme="dark"] .nav-link {
    color: var(--text);
}

[data-theme="dark"] .nav-link:hover {
    color: var(--primary-light);
}

.services-section .section-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Service Card Base - Modern card button design */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 32px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    /* Initial state for scroll animation */
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity, box-shadow;
}

/* Decorative gradient overlay on hover */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light, #ff6b9d));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Subtle background glow on hover */
.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(var(--primary-rgb), 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Staggered animation delays - cascade effect */
.service-card[data-delay="0"] { transition-delay: 0s; }
.service-card[data-delay="1"] { transition-delay: 0.08s; }
.service-card[data-delay="2"] { transition-delay: 0.16s; }
.service-card[data-delay="3"] { transition-delay: 0.24s; }
.service-card[data-delay="4"] { transition-delay: 0.32s; }
.service-card[data-delay="5"] { transition-delay: 0.4s; }
.service-card[data-delay="6"] { transition-delay: 0.48s; }
.service-card[data-delay="7"] { transition-delay: 0.56s; }
.service-card[data-delay="8"] { transition-delay: 0.64s; }
.service-card[data-delay="9"] { transition-delay: 0.72s; }
.service-card[data-delay="10"] { transition-delay: 0.8s; }
.service-card[data-delay="11"] { transition-delay: 0.88s; }
.service-card[data-delay="12"] { transition-delay: 0.96s; }
.service-card[data-delay="13"] { transition-delay: 1.04s; }
.service-card[data-delay="14"] { transition-delay: 1.12s; }

/* Animated state when in view */
.services-section.in-view .service-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Hover effects - lift and glow */
.service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12),
                0 8px 16px rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.services-section.in-view .service-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover::after {
    opacity: 1;
}

/* Active/pressed state */
.service-card:active {
    transform: translateY(-4px) scale(1);
    transition-duration: 0.1s;
}

/* Service Content */
.service-content {
    flex: 1;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.service-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    transition: color 0.3s ease, transform 0.3s ease;
    line-height: 1.4;
}

.service-content p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
    transition: color 0.3s ease;
}

.service-card:hover .service-content h3 {
    color: var(--primary);
    transform: translateX(4px);
}

.service-card:hover .service-content p {
    color: var(--text);
}

/* Service Link - Call to action button style */
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
    margin-top: auto;
}

.service-link .fas {
    font-size: 0.8rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card:hover .service-link {
    background: var(--primary);
    color: white;
    gap: 14px;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.35);
}

.service-card:hover .service-link .fas {
    transform: translateX(4px);
}

.service-card:active .service-link {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

/* Service Badge */
.service-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light, #ff6b9d));
    color: white;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
}

.service-card:hover .service-badge {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
}

/* Featured Card Variant */
.service-card.featured {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.04) 0%, var(--card-bg) 100%);
    border-color: rgba(var(--primary-rgb), 0.15);
}

.service-card.featured::before {
    background: linear-gradient(90deg, var(--primary), #ff6b35);
}

/* Highlight Card Variant */
.service-card.highlight {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(var(--primary-rgb), 0.03) 100%);
    border-color: rgba(var(--primary-rgb), 0.12);
}

.service-card.highlight::before {
    background: linear-gradient(90deg, #6366f1, var(--primary));
}

/* Dark Theme for Services */
[data-theme="dark"] .services-section {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-elevated) 100%);
}

[data-theme="dark"] .service-card {
    background: var(--card-bg);
    border-color: var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .service-card:hover {
    background: var(--surface-elevated);
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
                0 8px 16px rgba(var(--primary-rgb), 0.2),
                0 0 0 1px rgba(var(--primary-rgb), 0.3);
}

[data-theme="dark"] .service-card .service-content h3 {
    color: var(--text);
}

[data-theme="dark"] .service-card .service-content p {
    color: var(--text-secondary);
}

[data-theme="dark"] .service-card:hover .service-content h3 {
    color: var(--primary-light);
}

[data-theme="dark"] .service-card:hover .service-content p {
    color: var(--text);
}

[data-theme="dark"] .service-link {
    background: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-light);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
}

[data-theme="dark"] .service-card:hover .service-link {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Responsive Services Grid */
@media (max-width: 1100px) {
    .services-section .section-heading {
        font-size: 2.2rem;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0 24px;
    }
}

@media (max-width: 700px) {
    .services-section {
        padding: 50px 0 60px;
    }
    
    .services-section .section-heading {
        font-size: 1.8rem;
    }
    
    .services-section .section-subtitle {
        font-size: 1rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0 16px;
    }
    
    .service-card {
        padding: 28px 24px;
    }
    
    .services-section {
        padding: 40px 0;
    }
    
    .service-card {
        padding: 24px 20px;
    }
}

/* Legacy fullwidth cards support */
.hero-info-unified.fullwidth-cards .unified-card {
    border-radius: 0;
    padding: 24px 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--border-light);
    background: var(--card-bg);
}

.hero-info-unified.fullwidth-cards .unified-card::before {
    display: none;
}

.hero-info-unified.fullwidth-cards .unified-actions-scroll {
    padding: 10px 40px 20px;
    margin: 0;
    gap: 20px;
}

.hero-info-unified.fullwidth-cards .action-card-unified {
    min-width: 300px;
    max-width: 340px;
    flex: 1 0 300px;
}

.unified-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 36px 40px;
    box-shadow: var(--shadow-md), 0 4px 30px rgba(var(--primary-rgb), 0.08);
    border: 1px solid var(--border-light);
    transition: var(--theme-transition), box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}

.unified-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
}

[data-theme="dark"] .unified-card {
    background: var(--surface-elevated);
    border-color: var(--border);
    box-shadow: var(--shadow-md), 0 4px 40px rgba(var(--primary-rgb), 0.15);
}

.unified-main-content {
    display: flex;
    gap: 32px;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border-light);
}

[data-theme="dark"] .unified-main-content {
    border-bottom-color: var(--border);
}

.unified-left {
    flex: 1;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.unified-left .card-icon {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    flex-shrink: 0;
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.35);
}

.unified-left .card-body {
    flex: 1;
}

.unified-left .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.unified-left .eyebrow::before {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}

.unified-left h1 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin: 0 0 12px;
    color: var(--text);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.unified-left .lead {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    max-width: 600px;
}

.unified-left .hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.unified-left .hero-actions .btn {
    padding: 14px 28px;
    font-size: 0.95rem;
    border-radius: 10px;
    font-weight: 600;
}

.unified-left .hero-actions .btn-primary {
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.35);
}

.unified-left .hero-actions .btn-primary:hover {
    box-shadow: 0 10px 35px rgba(var(--primary-rgb), 0.5);
}

/* ========== Horizontal Scrollable Actions ========== */
.unified-actions-wrapper {
    position: relative;
}

.unified-actions-scroll {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 8px 4px 16px;
    margin: 0 -4px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--border-light);
    -webkit-overflow-scrolling: touch;
}

/* Custom Scrollbar */
.unified-actions-scroll::-webkit-scrollbar {
    height: 8px;
}

.unified-actions-scroll::-webkit-scrollbar-track {
    background: var(--surface-alt);
    border-radius: 10px;
}

.unified-actions-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 10px;
    border: 2px solid var(--surface-alt);
}

.unified-actions-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.fullwidth-cards .scroll-indicator {
    right: 30px;
}

.scroll-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 600;
    background: linear-gradient(90deg, transparent 0%, var(--card-bg) 30%);
    padding: 8px 12px 8px 40px;
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(3px); opacity: 0.9; }
}

.unified-actions-scroll:hover + .scroll-indicator {
    opacity: 0;
}

/* ========== Enhanced Action Cards ========== */
.action-card-unified {
    background: var(--surface-alt);
    border-radius: 16px;
    padding: 24px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--border-light);
    min-width: 260px;
    max-width: 280px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.5s ease,
                background-color 0.5s ease;
    cursor: pointer;
}

.action-card-unified::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.04) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.action-card-unified::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-theme="dark"] .action-card-unified {
    background: var(--card-bg);
    border-color: var(--border);
}

.action-card-unified:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(var(--primary-rgb), 0.15),
                0 6px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--primary);
    background: var(--card-bg);
}

.action-card-unified:hover::before {
    opacity: 1;
}

.action-card-unified:hover::after {
    transform: scaleX(1);
}

[data-theme="dark"] .action-card-unified:hover {
    background: var(--surface-elevated);
    box-shadow: 0 16px 40px rgba(var(--primary-rgb), 0.2),
                0 6px 20px rgba(0, 0, 0, 0.25);
}

.action-card-unified:active {
    transform: translateY(-3px);
    transition-duration: 0.2s;
}

/* Highlight Card Variant */
.action-card-unified.highlight-card {
    background: linear-gradient(135deg, var(--primary-pale) 0%, var(--surface-alt) 100%);
    border-color: rgba(var(--primary-rgb), 0.3);
}

[data-theme="dark"] .action-card-unified.highlight-card {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15) 0%, var(--card-bg) 100%);
}

.action-card-unified .action-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-pale) 0%, rgba(var(--primary-rgb), 0.15) 100%);
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 16px;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background 0.5s ease,
                color 0.5s ease,
                box-shadow 0.5s ease;
}

.action-card-unified:hover .action-icon {
    transform: scale(1.05);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.3);
}

[data-theme="dark"] .action-card-unified .action-icon {
    background: rgba(240, 101, 149, 0.15);
}

[data-theme="dark"] .action-card-unified:hover .action-icon {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.action-card-unified h3 {
    font-size: 1.05rem;
    margin: 0 0 8px;
    color: var(--text);
    font-weight: 700;
    transition: color 0.5s ease;
}

.action-card-unified:hover h3 {
    color: var(--primary);
}

.action-card-unified p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0 0 14px;
    line-height: 1.55;
    flex: 1;
}

.action-card-unified .action-link {
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.5s ease;
}

.action-card-unified .action-link .fas {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.action-card-unified:hover .action-link {
    gap: 10px;
}

.action-card-unified:hover .action-link .fas {
    transform: translateX(3px);
}

/* Original hero-info styles preserved for backwards compatibility */
.hero-info {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    margin-top: 8px;
}


.info-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    border: 1px solid var(--border-light);
}

.info-card:hover {
    box-shadow: var(--shadow-md), 0 12px 40px rgba(var(--primary-rgb), 0.1);
    transform: translateY(-4px);
    border-color: var(--primary-pale);
}

.info-card:active {
    transform: translateY(-1px);
    transition-duration: 0.1s;
}

[data-theme="dark"] .info-card {
    border-color: var(--border);
    background: var(--surface-elevated);
}

[data-theme="dark"] .info-card:hover {
    box-shadow: var(--shadow-md), 0 12px 40px rgba(var(--primary-rgb), 0.2);
    border-color: var(--primary);
}

.info-card.main-card {
    display: flex;
    gap: 20px;
}

.info-card .card-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.info-card .card-body {
    flex: 1;
}

.info-card .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 4px;
}

.info-card h1 {
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    margin: 0 0 8px;
    color: var(--text);
    font-weight: 700;
}

.info-card .lead {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 14px;
}

.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Metric Cards */
.info-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    text-decoration: none;
    border: 2px solid var(--border);
    background: var(--card-bg);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.2s ease,
                box-shadow 0.3s ease;
    cursor: pointer;
}

.metric-card:hover {
    border-color: var(--primary);
    transform: translateX(6px) scale(1.02);
    box-shadow: var(--shadow-sm), -4px 0 20px rgba(var(--primary-rgb), 0.15);
}

.metric-card:active {
    transform: translateX(2px) scale(0.99);
    transition-duration: 0.1s;
}

.metric-card .card-icon {
    width: auto;
    height: auto;
    background: none;
    color: var(--primary);
    font-size: 1.3rem;
}

.metric-card .metric-label {
    flex: 1;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    font-size: 0.85rem;
}

.metric-card .metric-action {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 600;
}

/* ========== Common Section Styles ========== */
.media-wall,
.link-board,
.districts {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    transition: var(--theme-transition);
}

[data-theme="dark"] .media-wall,
[data-theme="dark"] .link-board,
[data-theme="dark"] .districts {
    border-color: var(--border);
    background: var(--surface-elevated);
}

/* ========== Breaking News Ticker (Top Bar) ========== */
.breaking-news {
    background: var(--surface);
    border-bottom: 1px solid var(--border-light);
    width: 100%;
    padding: 0;
    margin: 0;
}

[data-theme="dark"] .breaking-news {
    background: var(--surface-elevated);
    border-bottom-color: var(--border);
}

.section-header {
    margin-bottom: 16px;
    position: relative;
}

.section-header .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 700;
}

.section-title {
    font-size: 1.2rem;
    margin: 4px 0 0;
    color: var(--text);
}

/* ========== Ticker ========== */
.breaking-news .ticker {
    margin: 0;
    border-radius: 0;
    border: none;
    overflow: hidden;
    background: transparent;
}

[data-theme="dark"] .breaking-news .ticker {
    border: none;
    background: transparent;
}

.ticker-track {
    display: flex;
    gap: 60px;
    padding: 12px 40px;
    animation: ticker 35s linear infinite;
}

.ticker-track a {
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    font-size: 0.875rem;
    position: relative;
    padding-left: 16px;
    transition: color 0.2s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}

.ticker-track a::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
    transition: transform 0.3s ease;
}

.ticker-track a:hover {
    color: var(--primary);
    transform: scale(1.05);
}

.ticker-track a:hover::before {
    transform: scale(1.3);
}

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ========== Visitor Statistics Section ========== */
/* ========== VISITOR STATS - LIGHT CARD BACKGROUND ========== */
.visitor-stats {
    position: relative;
    width: 100%;
    margin: 60px auto 0;
    padding: 60px 0 80px;
    background: var(--surface);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    overflow: hidden;
    box-shadow: inset 0 40px 80px rgba(0, 0, 0, 0.02);
}

.visitor-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(var(--primary-rgb), 0.1) 0%, transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
    pointer-events: none;
    animation: statsGlow 8s ease-in-out infinite alternate;
}

@keyframes statsGlow {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Animated grid pattern overlay */
.visitor-stats::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

[data-theme="dark"] .visitor-stats {
    background: var(--surface-alt);
    border-color: var(--border);
    box-shadow: inset 0 40px 80px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .visitor-stats::after {
    background-image: 
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
}

.visitor-stats .section-header {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
}

.visitor-stats .eyebrow {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
    display: inline-block;
    background: rgba(16, 185, 129, 0.1);
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .visitor-stats .eyebrow {
    color: #d1fae5;
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.35);
}

.visitor-stats .section-title {
    color: var(--text);
    font-size: 1.3rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 8px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.visitor-stats .section-subtitle {
    color: var(--text-secondary);
    text-align: center;
    font-size: 1.1rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    gap: 32px;
    margin-top: 40px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

.stats-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    color: var(--text);
    position: relative;
    overflow: visible;
    box-shadow: none;
    border: none;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stats-card:hover {
    transform: translateY(-4px);
}

.stats-card::before {
    display: none;
}

.stats-card::after {
    display: none;
}

[data-theme="dark"] .stats-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

[data-theme="dark"] .stats-card:hover {
    background: transparent;
    border: none;
    box-shadow: none;
}

.stats-numbers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.stat-item {
    text-align: center;
    padding: 28px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 20px;
    border: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25),
                0 4px 12px rgba(16, 185, 129, 0.15);
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.8s ease;
}

.stat-item:hover::before {
    left: 100%;
}

.stat-item:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 16px 32px rgba(16, 185, 129, 0.4),
                0 8px 16px rgba(16, 185, 129, 0.25);
}

.stat-item.highlight {
    grid-column: span 2;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    padding: 32px 24px;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.25),
                0 4px 12px rgba(14, 165, 233, 0.15);
}

.stat-item.highlight:hover {
    box-shadow: 0 16px 32px rgba(14, 165, 233, 0.4),
                0 8px 16px rgba(14, 165, 233, 0.25);
}

.stat-item.online {
    position: relative;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25),
                0 4px 12px rgba(139, 92, 246, 0.15);
}

.stat-item.online:hover {
    box-shadow: 0 16px 32px rgba(139, 92, 246, 0.4),
                0 8px 16px rgba(139, 92, 246, 0.25);
}

[data-theme="dark"] .stat-item {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

[data-theme="dark"] .stat-item.highlight {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}

[data-theme="dark"] .stat-item.online {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    margin-left: 6px;
    animation: pulse-dot 1.5s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.stat-value {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.02em;
}

.stat-item.highlight .stat-value {
    font-size: 3rem;
    font-weight: 900;
}

.stat-item.online .stat-value {
    font-size: 2.2rem;
}

.stat-label {
    font-size: 0.85rem;
    opacity: 0.98;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.98);
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ========== Chart Containers - Modern Card Design ========== */
.chart-container {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: visible;
}

.chart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981, #3b82f6, #f59e0b, #8b5cf6);
    border-radius: 24px 24px 0 0;
    opacity: 0.8;
}

.chart-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 24px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.chart-container:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

.chart-container:hover::after {
    opacity: 1;
}

[data-theme="dark"] .chart-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .chart-container:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .chart-title {
    color: var(--text);
}

[data-theme="dark"] .chart-title .fas {
    color: var(--primary-light);
}

.chart-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chart-title .fas {
    color: var(--primary-light);
    font-size: 1.3rem;
    filter: drop-shadow(0 2px 4px rgba(240, 101, 149, 0.3));
}

[data-theme="dark"] .chart-title {
    color: #ffffff;
}

/* Pie Chart - Modern Donut Style */
.pie-chart-wrapper {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 28px;
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.3));
}

.pie-chart {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pie-segment {
    fill: none;
    stroke-width: 24;
    stroke-linecap: round;
    transition: stroke-dasharray 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
                stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.3));
}

.pie-segment:hover {
    filter: drop-shadow(0 0 15px currentColor);
}

.pie-segment.today {
    stroke: #10b981; /* Emerald green */
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
}

.pie-segment.yesterday {
    stroke: #3b82f6; /* Blue */
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}

.pie-segment.others {
    stroke: #f59e0b; /* Amber */
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.5));
}

[data-theme="dark"] .pie-segment.today {
    stroke: #34d399;
}

[data-theme="dark"] .pie-segment.yesterday {
    stroke: #60a5fa;
}

[data-theme="dark"] .pie-segment.others {
    stroke: #fbbf24;
}

.pie-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    width: 110px;
    height: 110px;
    display: flex;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
                inset 0 2px 8px rgba(255, 255, 255, 0.1);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(16, 185, 129, 0.15),
        inset 0 2px 10px rgba(255, 255, 255, 0.9);
    border: 3px solid #10b981;
}

.pie-total {
    display: block;
    font-size: 1.8rem;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.02em;
}

.pie-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .pie-center {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
                inset 0 2px 8px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .pie-total {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .pie-label {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: rgba(247, 244, 244, 0.9);
    padding: 10px 18px;
    border-radius: 16px;
    background: black;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-weight: 500;
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
    cursor: default;
}

.legend-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
    color: black;
}

[data-theme="dark"] .legend-item {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .legend-item:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.2);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.legend-item:hover .legend-dot {
    transform: scale(1.4);
    box-shadow: 0 0 12px currentColor;
}

.legend-dot.today {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.legend-dot.yesterday {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.legend-dot.others {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

[data-theme="dark"] .legend-dot.today {
    background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
}

[data-theme="dark"] .legend-dot.yesterday {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
}

[data-theme="dark"] .legend-dot.others {
    background: linear-gradient(135deg, #fde047 0%, #fbbf24 100%);
}

/* Bar Chart - Modern Style */
.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 220px;
    padding: 30px 10px 0;
    gap: 12px;
    position: relative;
    z-index: 1;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 43px,
            rgba(0,0,0,0.04) 43px,
            rgba(0,0,0,0.04) 44px
        );
}

[data-theme="dark"] .bar-chart {
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 43px,
            rgba(255,255,255,0.03) 43px,
            rgba(255,255,255,0.03) 44px
        );
}

.bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.bar-item .bar {
    width: 100%;
    max-width: 50px;
    background: linear-gradient(180deg, #6ee7b7 0%, #10b981 100%);
    border-radius: 10px 10px 4px 4px;
    height: var(--bar-height, 0%);
    transition: height 1s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
    position: relative;
    margin-top: auto;
    will-change: transform;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

/* Different neon colors for each bar */
.bar-item:nth-child(1) .bar { 
    background: linear-gradient(180deg, #93c5fd 0%, #3b82f6 100%); 
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}
.bar-item:nth-child(2) .bar { 
    background: linear-gradient(180deg, #6ee7b7 0%, #10b981 100%); 
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}
.bar-item:nth-child(3) .bar { 
    background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%); 
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}
.bar-item:nth-child(4) .bar { 
    background: linear-gradient(180deg, #c4b5fd 0%, #8b5cf6 100%); 
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}
.bar-item:nth-child(5) .bar { 
    background: linear-gradient(180deg, #fca5a5 0%, #ef4444 100%); 
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}
.bar-item:nth-child(6) .bar { 
    background: linear-gradient(180deg, #67e8f9 0%, #06b6d4 100%); 
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
}
.bar-item:nth-child(7) .bar { 
    background: linear-gradient(180deg, #86efac 0%, #22c55e 100%); 
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}
.bar-item:nth-child(8) .bar { 
    background: linear-gradient(180deg, #c45ba9 0%, #bd7eaf 100%); 
    box-shadow: 0 0 15px rgba(136, 89, 148, 0.4);
}
.bar-item:nth-child(9) .bar { 
    background: linear-gradient(180deg, #67e8f9 0%, #06b6d4 100%); 
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
}
.bar-item:nth-child(10) .bar { 
    background: linear-gradient(180deg, #86efac 0%, #22c55e 100%); 
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}
.bar-item.active .bar {
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.6);
}

.bar-item:hover .bar {
    transform: scaleY(1.1) scaleX(1.2);
    transform-origin: bottom;
}

/* Intensify glow on hover */
.bar-item:nth-child(1):hover .bar { box-shadow: 0 0 30px rgba(59, 130, 246, 0.7), 0 0 60px rgba(59, 130, 246, 0.3); }
.bar-item:nth-child(2):hover .bar { box-shadow: 0 0 30px rgba(16, 185, 129, 0.7), 0 0 60px rgba(16, 185, 129, 0.3); }
.bar-item:nth-child(3):hover .bar { box-shadow: 0 0 30px rgba(245, 158, 11, 0.7), 0 0 60px rgba(245, 158, 11, 0.3); }
.bar-item:nth-child(4):hover .bar { box-shadow: 0 0 30px rgba(139, 92, 246, 0.7), 0 0 60px rgba(139, 92, 246, 0.3); }
.bar-item:nth-child(5):hover .bar { box-shadow: 0 0 30px rgba(239, 68, 68, 0.7), 0 0 60px rgba(239, 68, 68, 0.3); }
.bar-item:nth-child(6):hover .bar { box-shadow: 0 0 30px rgba(6, 182, 212, 0.7), 0 0 60px rgba(6, 182, 212, 0.3); }
.bar-item:nth-child(7):hover .bar { box-shadow: 0 0 30px rgba(34, 197, 94, 0.7), 0 0 60px rgba(34, 197, 94, 0.3); }

.bar-item:active .bar {
    transform: scaleY(1.05) scaleX(1.1);
    transition-duration: 0.1s;
}

.bar-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bar-item:hover .bar-label {
    color: var(--text);
    transform: scale(1.15);
}

[data-theme="dark"] .bar-label {
    color: rgba(255,255,255,0.6);
}

[data-theme="dark"] .bar-item:hover .bar-label {
    color: #ffffff;
}

.bar-value {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text);
    opacity: 0;
    transition: opacity 0.4s ease,
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: var(--surface-elevated);
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    border: 1px solid var(--border-light);
}

.bar-item:nth-child(1) .bar-value { 
    color: #3b82f6; 
    border-color: rgba(59, 130, 246, 0.2);
}
.bar-item:nth-child(2) .bar-value { 
    color: #10b981; 
    border-color: rgba(16, 185, 129, 0.2);
}
.bar-item:nth-child(3) .bar-value { 
    color: #f59e0b; 
    border-color: rgba(245, 158, 11, 0.2);
}
.bar-item:nth-child(4) .bar-value { 
    color: #8b5cf6; 
    border-color: rgba(139, 92, 246, 0.2);
}
.bar-item:nth-child(5) .bar-value { 
    color: #ef4444; 
    border-color: rgba(239, 68, 68, 0.2);
}
.bar-item:nth-child(6) .bar-value { 
    color: #06b6d4; 
    border-color: rgba(6, 182, 212, 0.2);
}
.bar-item:nth-child(7) .bar-value { 
    color: #22c55e; 
    border-color: rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .bar-value {
    background: rgba(30, 41, 59, 0.95);
    color: #ffffff;
    border-color: rgba(255,255,255,0.1);
}

.bar-item:hover .bar-value,
.bar-item.active .bar-value {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Chart Animation States */
.visitor-stats .stats-card,
.visitor-stats .chart-container {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.visitor-stats.animate-in .stats-card {
    opacity: 1;
    transform: translateY(0);
}

.visitor-stats.animate-in .chart-container:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.visitor-stats.animate-in .chart-container:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.stat-item {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.visitor-stats.animate-in .stat-item:nth-child(1) { opacity: 1; transform: scale(1); transition-delay: 0.1s; }
.visitor-stats.animate-in .stat-item:nth-child(2) { opacity: 1; transform: scale(1); transition-delay: 0.2s; }
.visitor-stats.animate-in .stat-item:nth-child(3) { opacity: 1; transform: scale(1); transition-delay: 0.3s; }
.visitor-stats.animate-in .stat-item:nth-child(4) { opacity: 1; transform: scale(1); transition-delay: 0.4s; }

/* Pie chart entrance */
.pie-chart-wrapper {
    opacity: 0;
    transform: scale(0.5) rotate(-180deg);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.visitor-stats.animate-in .pie-chart-wrapper {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.3s;
}

/* Bar items entrance */
.bar-item .bar {
    transform-origin: bottom;
}

/* Responsive Charts */
@media (max-width: 991px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-numbers {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .stat-item.highlight {
        grid-column: span 2;
    }
}

@media (max-width: 767px) {
    .stats-numbers {
        grid-template-columns: 1fr 1fr;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .stat-item.highlight .stat-value {
        font-size: 1.8rem;
    }
    
    .bar-chart {
        height: 140px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        gap: 16px;
    }
    
    .chart-container {
        padding: 16px;
    }
    
    .pie-chart-wrapper {
        width: 140px;
        height: 140px;
    }
}

/* ========== Quick Actions ========== */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.action-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 22px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    text-decoration: none;
    display: block;
    border: 1px solid var(--border-light);
    cursor: pointer;
}

[data-theme="dark"] .action-card {
    border-color: var(--border);
    background: var(--surface-elevated);
}

.action-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--shadow-md), 0 10px 40px rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary);
}

.action-card:active {
    transform: translateY(-2px) scale(0.99);
    transition-duration: 0.1s;
}

.action-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-pale);
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 12px;
}

[data-theme="dark"] .action-icon {
    background: rgba(240, 101, 149, 0.15);
}

.action-card h3 {
    font-size: 1rem;
    margin: 0 0 4px;
    color: var(--text);
}

.action-card p {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0;
}

/* ========== Media Wall ========== */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.media-embed {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .media-embed {
    border-color: var(--border);
}

.media-embed iframe {
    width: 100%;
    border: none;
    display: block;
}

/* ========== Trending Topics Section ========== */
.trending-section {
    padding: 60px 5%;
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
    position: relative;
    overflow: hidden;
}

.trending-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--primary));
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.trending-section .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.trending-section .eyebrow .fas {
    color: #ff6b35;
    animation: fireGlow 1.5s ease-in-out infinite alternate;
}

@keyframes fireGlow {
    from { filter: drop-shadow(0 0 2px #ff6b35); }
    to { filter: drop-shadow(0 0 8px #ff6b35); }
}

.trending-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}

/* Trending Card Base */
.trending-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border-light);
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    /* Initial state for scroll animation */
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    will-change: transform, opacity;
}

/* Staggered animation delays */
.trending-card[data-delay="0"] { transition-delay: 0s; }
.trending-card[data-delay="1"] { transition-delay: 0.08s; }
.trending-card[data-delay="2"] { transition-delay: 0.16s; }
.trending-card[data-delay="3"] { transition-delay: 0.24s; }
.trending-card[data-delay="4"] { transition-delay: 0.32s; }
.trending-card[data-delay="5"] { transition-delay: 0.40s; }
.trending-card[data-delay="6"] { transition-delay: 0.48s; }
.trending-card[data-delay="7"] { transition-delay: 0.56s; }

/* Animated state when in view */
.trending-section.in-view .trending-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Card hover glow effect */
.trending-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
                rgba(var(--primary-rgb), 0.08) 0%, 
                transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-radius: inherit;
}

.trending-card:hover::before {
    opacity: 1;
}

.trending-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(var(--primary-rgb), 0.15),
                0 8px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--primary);
}

/* Card Icon */
.card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-pale) 0%, rgba(var(--primary-rgb), 0.1) 100%);
    border-radius: 14px;
    margin-bottom: 16px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s ease;
}

.card-icon .fas {
    font-size: 1.5rem;
    color: var(--primary);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.trending-card:hover .card-icon {
    transform: scale(1.1) rotate(-5deg);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.trending-card:hover .card-icon .fas {
    color: white;
    transform: scale(1.1);
}

/* Card Content */
.card-content {
    flex: 1;
}

.card-content h4 {    
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    transition: color 0.3s ease;
    line-height: 1.3;
}

.card-content p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.trending-card:hover .card-content h4 {
    color: var(--primary);
}

/* Card Arrow */
.card-arrow {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-alt);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.trending-card:hover .card-arrow {
    background: var(--primary);
    color: white;
    transform: translateX(4px);
}

/* Card Badge (New, Event, Report) */
.card-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 10px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0); }
}

/* Featured Card Variant */
.trending-card.featured {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05) 0%, var(--card-bg) 100%);
    border-color: rgba(var(--primary-rgb), 0.2);
}

/* Highlight Card Variant */
.trending-card.highlight {
    border-color: rgba(var(--primary-rgb), 0.3);
}

.trending-card.highlight .card-icon {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.trending-card.highlight .card-icon .fas {
    color: white;
}

/* Dark Theme Adjustments */
[data-theme="dark"] .trending-section {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
}

[data-theme="dark"] .trending-card {
    background: var(--surface-elevated);
    border-color: var(--border);
}

[data-theme="dark"] .trending-card:hover {
    border-color: var(--primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
                0 0 30px rgba(var(--primary-rgb), 0.1);
}

[data-theme="dark"] .card-arrow {
    background: var(--surface);
}

/* Responsive Grid */
@media (max-width: 1200px) {
    .trending-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .trending-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .trending-section {
        padding: 40px 4%;
    }
}

@media (max-width: 600px) {
    .trending-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .trending-card {
        padding: 20px;
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    
    .card-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .card-icon .fas {
        font-size: 1.2rem;
    }
    
    .card-content h4 {
        font-size: 0.95rem;
    }
    
    .card-content p {
        font-size: 0.75rem;
    }
    
    .card-arrow {
        position: static;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }
    
    .card-badge {
        top: 10px;
        right: 10px;
        padding: 3px 8px;
        font-size: 0.6rem;
    }
}

/* Legacy link-grid support */
.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.link-grid a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--surface-alt);
    color: var(--text);
    font-weight: 600;
    font-size: 0.85rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-light);
    cursor: pointer;
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] .link-grid a {
    background: var(--surface-elevated);
    border-color: var(--border);
}

.link-grid a:hover {
    background: var(--primary-pale);
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15), var(--shadow-sm);
}

.link-grid a:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.08s;
    box-shadow: 0 1px 4px rgba(var(--primary-rgb), 0.1);
}

.link-grid a .fas {
    color: var(--primary);
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.link-grid a:hover .fas {
    transform: translateX(3px);
}

/* ========== Districts ========== */
.district-grid {
    column-count: 4;
    column-gap: 20px;
    margin-top: 16px;
}

.district-grid li {
    break-inside: avoid;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.2s ease, 
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.2s ease;
    border-radius: 4px;
    cursor: default;
}

.district-grid li:hover {
    background: var(--primary-pale);
    border-color: var(--primary);
    transform: translateX(4px);
}

.district-grid a {
    color: var(--text);
    font-weight: 500;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.district-grid a:hover {
    color: var(--primary);
    padding-left: 4px;
}

.district-grid a::before {
    content: '\f3c5';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--primary);
    opacity: 0.6;
}

/* ========== Insight Panels ========== */
.insight-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.insight-panels > article {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 22px;
    border: 1px solid var(--border-light);
    transition: var(--theme-transition), box-shadow 0.25s ease;
}

[data-theme="dark"] .insight-panels > article {
    border-color: var(--border);
    background: var(--surface-elevated);
}

.insight-panels > article:hover {
    box-shadow: var(--shadow-md);
}

.insight-panels h3 {
    font-size: 1rem;
    margin: 0 0 12px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.insight-panels h3 .fas {
    color: var(--primary);
}

.insight-panels ul {
    margin: 0;
    padding: 0;
}

.insight-panels li {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.insight-panels li:last-child {
    border-bottom: none;
}

.insight-panels a {
    color: var(--text);
    font-size: 0.85rem;
}

.insight-panels a:hover {
    color: var(--primary);
}

/* ========== Pre-Footer Section ========== */
.pre-footer {
    background: var(--surface-alt);
    padding: 50px 60px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 40px;
    border-top: 1px solid var(--border-light);
}

.pre-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 500px));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
}

.pre-footer-panel {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid var(--border-light);
    transition: var(--theme-transition), box-shadow 0.25s ease;
}

.pre-footer-panel:hover {
    box-shadow: var(--shadow-md);
}

.pre-footer-panel h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--text);
}

.pre-footer-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pre-footer-panel li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}

.pre-footer-panel li:last-child {
    border-bottom: none;
}

.pre-footer-panel a {
    color: var(--text-secondary);
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: block;
}

.pre-footer-panel a:hover {
    color: var(--primary);
    padding-left: 6px;
}

.pre-footer-panel .social-links {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: 12px;
}

.pre-footer-panel .social-links a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-alt);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    transition: all 0.2s ease;
    padding: 0;
}

.pre-footer-panel .social-links a:hover {
    background: var(--primary);
    color: white;
    padding-left: 0;
}

/* Dark theme for pre-footer */
[data-theme="dark"] .pre-footer {
    background: var(--surface);
    border-top-color: var(--border);
}

[data-theme="dark"] .pre-footer-panel {
    background: var(--surface-elevated);
    border-color: var(--border);
}

[data-theme="dark"] .pre-footer-panel .social-links a {
    background: var(--surface);
}

/* Responsive pre-footer */
@media (max-width: 768px) {
    .pre-footer {
        padding: 40px 24px;
    }
    
    .pre-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .pre-footer-panel {
        padding: 24px;
    }
}

/* ========== Visitor Stats Responsive ========== */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    
    .stats-card {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .visitor-stats {
        padding: 50px 0 60px;
    }
    
    .visitor-stats .section-title {
        font-size: 2rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 20px;
    }
    
    .stats-card {
        grid-column: span 1;
        padding: 24px;
    }
    
    .chart-container {
        padding: 24px;
    }
    
    .pie-chart-wrapper {
        width: 160px;
        height: 160px;
    }
    
    .pie-center {
        width: 80px;
        height: 80px;
    }
    
    .pie-total {
        font-size: 1.3rem;
    }
    
    .bar-chart {
        height: 180px;
        gap: 8px;
    }
    
    .bar-item .bar {
        max-width: 35px;
    }
    
    .legend-item {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .visitor-stats {
        padding: 40px 0 50px;
    }
    
    .visitor-stats .section-title {
        font-size: 1.6rem;
    }
    
    .stats-grid {
        padding: 0 16px;
    }
    
    .stats-numbers {
        gap: 12px;
    }
    
    .stat-item {
        padding: 14px 10px;
    }
    
    .stat-value {
        font-size: 1.6rem;
    }
    
    .stat-item.highlight .stat-value {
        font-size: 2rem;
    }
    
    .bar-chart {
        height: 150px;
        gap: 6px;
    }
    
    .bar-item .bar {
        max-width: 28px;
        border-radius: 6px 6px 2px 2px;
    }
    
    .bar-label {
        font-size: 0.65rem;
    }
}

/* ========== Footer ========== */
/* ========== Footer - Full Width ========== */
.site-footer {
    background: linear-gradient(90deg, #6F2C91, #C7017F);
    color: #fff;
    border-radius: 0;
    padding: 50px 60px 40px;
    margin: 0;
    border: none;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 28px;
}

[data-theme="dark"] .site-footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--border);
    color: var(--text);
}

[data-theme="dark"] .site-footer h3 {
    color: var(--text);
}

[data-theme="dark"] .site-footer p,
[data-theme="dark"] .site-footer li {
    color: var(--text);
}

[data-theme="dark"] .site-footer a {
    color: var(--text);
}

[data-theme="dark"] .site-footer a:hover {
    color: var(--primary);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 28px;
}

.site-footer h4 {
    font-size: 0.9rem;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.9;
}

.site-footer ul {
    margin: 0;
    padding: 0;
}

.site-footer li {
    padding: 4px 0;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    transition: color 0.25s ease,
                padding-left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}

.site-footer a:hover {
    color: #fff;
    padding-left: 6px;
}

.site-footer a:active {
    padding-left: 4px;
    transition-duration: 0.1s;
}

.footer-note {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Modern Social Links in Footer */
.site-footer .social-links {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.site-footer .social-links a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    padding: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer .social-links a:hover {
    transform: translateY(-4px) scale(1.1);
    padding: 0;
}

.site-footer .social-links a:active {
    transform: translateY(-2px) scale(1.05);
    padding: 0;
}


/* Facebook */
.site-footer .social-links a[aria-label="Facebook"]:hover {
    background: #1877f2;
    border-color: #1877f2;
    box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4);
}

/* Twitter/X */
.site-footer .social-links a[aria-label="Twitter"]:hover {
      background: #000;
    border-color: #000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* YouTube */
.site-footer .social-links a[aria-label="YouTube"]:hover {
    background: #ff0000;
    border-color: #ff0000;
    box-shadow: 0 8px 20px rgba(255, 0, 0, 0.4);
}

/* tikrok */
.site-footer .social-links a[aria-label="TikTok"]:hover {
     background: #000;
    border-color: #000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* ========== Back to Top ========== */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #642a69;
    color: #fff;
    box-shadow: var(--shadow-md);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 999;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease,
                box-shadow 0.3s ease,
                opacity 0.3s ease;
    cursor: pointer;
}

[data-theme="dark"] .back-to-top {
    background:#642a69;
    color: #fff;
    box-shadow: var(--shadow-md);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 999;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease,
                box-shadow 0.3s ease,
                opacity 0.3s ease;
    cursor: pointer;
}

.back-to-top:hover {
    background: #642a69;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 30px #642a69;
}

.back-to-top:active {
    transform: translateY(-2px) scale(1.05);
    transition-duration: 0.1s;
}

.back-to-top.is-visible {
    display: flex;
    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== Scroll Animations - Smooth & Elegant ========== */
/* Base state - hidden */
[data-animate] {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fade Up Animation */
[data-animate="fade-up"] {
    transform: translateY(30px);
}

[data-animate="fade-up"].in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Down Animation */
[data-animate="fade-down"] {
    transform: translateY(-30px);
}

[data-animate="fade-down"].in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Left Animation */
[data-animate="fade-left"] {
    transform: translateX(50px);
}

[data-animate="fade-left"].in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Fade Right Animation */
[data-animate="fade-right"] {
    transform: translateX(-50px);
}

[data-animate="fade-right"].in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Scale Up Animation */
[data-animate="scale-up"] {
    transform: scale(0.9);
}

[data-animate="scale-up"].in-view {
    opacity: 1;
    transform: scale(1);
}

/* Zoom In Animation */
[data-animate="zoom-in"] {
    transform: scale(0.8);
}

[data-animate="zoom-in"].in-view {
    opacity: 1;
    transform: scale(1);
}

/* Flip Animation */
[data-animate="flip"] {
    transform: perspective(1000px) rotateX(8deg);
    transform-origin: center bottom;
}

[data-animate="flip"].in-view {
    opacity: 1;
    transform: perspective(1000px) rotateX(0);
}

/* Slide animations - smooth */
[data-animate="bounce-up"] {
    transform: translateY(40px);
    transition: opacity 0.9s ease, 
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-animate="bounce-up"].in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children animations - slower */
[data-animate-stagger] > * {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-animate-stagger].in-view > *:nth-child(1) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
[data-animate-stagger].in-view > *:nth-child(2) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
[data-animate-stagger].in-view > *:nth-child(3) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
[data-animate-stagger].in-view > *:nth-child(4) { transition-delay: 0.32s; opacity: 1; transform: translateY(0); }
[data-animate-stagger].in-view > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
[data-animate-stagger].in-view > *:nth-child(6) { transition-delay: 0.48s; opacity: 1; transform: translateY(0); }
[data-animate-stagger].in-view > *:nth-child(7) { transition-delay: 0.56s; opacity: 1; transform: translateY(0); }
[data-animate-stagger].in-view > *:nth-child(8) { transition-delay: 0.64s; opacity: 1; transform: translateY(0); }

/* Animation delays */
[data-animate-delay="100"] { transition-delay: 0.1s; }
[data-animate-delay="200"] { transition-delay: 0.2s; }
[data-animate-delay="300"] { transition-delay: 0.3s; }
[data-animate-delay="400"] { transition-delay: 0.4s; }
[data-animate-delay="500"] { transition-delay: 0.5s; }

/* Section-specific animations */
.hero-info .info-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-info.in-view .info-card.main-card {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.hero-info.in-view .info-cards-grid {
    opacity: 1;
    transform: translateY(0);
}

.hero-info .info-cards-grid .metric-card {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-info.in-view .info-cards-grid .metric-card:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.2s; }
.hero-info.in-view .info-cards-grid .metric-card:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.3s; }
.hero-info.in-view .info-cards-grid .metric-card:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.4s; }

/* Quick Actions stagger */
.quick-actions .action-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quick-actions.in-view .action-card:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.1s; }
.quick-actions.in-view .action-card:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.2s; }
.quick-actions.in-view .action-card:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.3s; }
.quick-actions.in-view .action-card:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.4s; }

/* Link Board grid animation */
.link-board .link-grid li {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.link-board.in-view .link-grid li:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.link-board.in-view .link-grid li:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.1s; }
.link-board.in-view .link-grid li:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.15s; }
.link-board.in-view .link-grid li:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.2s; }
.link-board.in-view .link-grid li:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.25s; }
.link-board.in-view .link-grid li:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.3s; }
.link-board.in-view .link-grid li:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.35s; }
.link-board.in-view .link-grid li:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.4s; }

/* Districts grid animation */
.districts .district-grid li {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.districts.in-view .district-grid li {
    opacity: 1;
    transform: scale(1);
}

/* Stagger district items */
.districts.in-view .district-grid li:nth-child(1) { transition-delay: 0.02s; }
.districts.in-view .district-grid li:nth-child(2) { transition-delay: 0.04s; }
.districts.in-view .district-grid li:nth-child(3) { transition-delay: 0.06s; }
.districts.in-view .district-grid li:nth-child(4) { transition-delay: 0.08s; }
.districts.in-view .district-grid li:nth-child(5) { transition-delay: 0.1s; }
.districts.in-view .district-grid li:nth-child(6) { transition-delay: 0.12s; }
.districts.in-view .district-grid li:nth-child(7) { transition-delay: 0.14s; }
.districts.in-view .district-grid li:nth-child(8) { transition-delay: 0.16s; }
.districts.in-view .district-grid li:nth-child(9) { transition-delay: 0.18s; }
.districts.in-view .district-grid li:nth-child(10) { transition-delay: 0.2s; }
.districts.in-view .district-grid li:nth-child(11) { transition-delay: 0.22s; }
.districts.in-view .district-grid li:nth-child(12) { transition-delay: 0.24s; }
.districts.in-view .district-grid li:nth-child(13) { transition-delay: 0.26s; }
.districts.in-view .district-grid li:nth-child(14) { transition-delay: 0.28s; }
.districts.in-view .district-grid li:nth-child(15) { transition-delay: 0.3s; }
.districts.in-view .district-grid li:nth-child(16) { transition-delay: 0.32s; }
.districts.in-view .district-grid li:nth-child(17) { transition-delay: 0.34s; }
.districts.in-view .district-grid li:nth-child(18) { transition-delay: 0.36s; }
.districts.in-view .district-grid li:nth-child(19) { transition-delay: 0.38s; }
.districts.in-view .district-grid li:nth-child(20) { transition-delay: 0.4s; }
.districts.in-view .district-grid li:nth-child(21) { transition-delay: 0.42s; }
.districts.in-view .district-grid li:nth-child(22) { transition-delay: 0.44s; }
.districts.in-view .district-grid li:nth-child(23) { transition-delay: 0.46s; }
.districts.in-view .district-grid li:nth-child(24) { transition-delay: 0.48s; }
.districts.in-view .district-grid li:nth-child(25) { transition-delay: 0.5s; }

/* Insight Panels animation */
.insight-panels article {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.insight-panels.in-view article:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.15s; }
.insight-panels.in-view article:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.35s; }

/* Unified Section animations - Smooth & Elegant */
.hero-info-unified .unified-card {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-info-unified.in-view .unified-card {
    opacity: 1;
    transform: translateY(0);
}

.hero-info-unified .action-card-unified {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-info-unified.in-view .action-card-unified:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.2s; }
.hero-info-unified.in-view .action-card-unified:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.35s; }
.hero-info-unified.in-view .action-card-unified:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.5s; }
.hero-info-unified.in-view .action-card-unified:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.65s; }
.hero-info-unified.in-view .action-card-unified:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.8s; }
.hero-info-unified.in-view .action-card-unified:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.95s; }
.hero-info-unified.in-view .action-card-unified:nth-child(7) { opacity: 1; transform: none; transition-delay: 1.1s; }

/* Section headers animation */
.section-header {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-animate].in-view .section-header,
.in-view .section-header {
    opacity: 1;
    transform: none;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    [data-animate],
    [data-animate-stagger] > *,
    .hero-info .info-card,
    .hero-info-unified .unified-card,
    .hero-info-unified .action-card-unified,
    .quick-actions .action-card,
    .link-board .link-grid li,
    .districts .district-grid li,
    .insight-panels article {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =============================================
   RESPONSIVE DESIGN - MOBILE OPTIMIZED
   ============================================= */

/* Tablet and below */
@media (max-width: 991px) {
    main {
        padding: 0 24px;
    }
    
    /* Unified Section Responsive */
    .unified-main-content {
        flex-direction: column;
        gap: 24px;
    }
    
    .unified-left {
        flex: 1;
    }
    
    /* Unified Section Tablet */
    .unified-card {
        padding: 28px;
    }
    
    .unified-main-content {
        flex-direction: column;
        gap: 24px;
    }
    
    .unified-left {
        flex: 1;
    }
    
    .unified-left .card-icon {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
    }
    
    .action-card-unified {
        min-width: 240px;
    }
    
    .scroll-indicator {
        display: block;
    }
    
    .utility-bar {
        padding: 8px 24px;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
    }
    
    .utility-left {
        width: 100%;
        justify-content: center;
    }
    
    .utility-right {
        width: 100%;
        justify-content: center;
    }
    
    .brand-bar {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 16px 24px;
    }
    
    .brand .brand-logo {
        width: 260px;
    }
    
    .brand-meta {
        text-align: center;
    }
    
    .brand-meta .tagline {
        margin: 0 auto 10px;
        font-size: 0.85rem;
    }
    
    .brand-cta {
        justify-content: center;
    }
    
    /* Mobile Navigation */
 .site-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--nav-bg);
    box-shadow: var(--shadow-sm);
    border-radius: 0;
    margin: 0;
    padding: 0 40px;
    transition: var(--theme-transition);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

[data-theme="dark"] .site-nav {
    background: var(--card-bg);
    border-color: var(--border);
}
    
    .nav-toggle {
        display: flex;
        border-radius: 0;
    }
    
    .nav-list {
        display: block;
        flex-direction: column;
        width: 100%;
        padding: 0 12px 12px;
        background: var(--nav-bg);
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .site-nav.is-open .nav-list {
        display: flex;
    }
    
    .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--border);
    }
    
    .nav-link {
        justify-content: space-between;
        padding: 14px 8px;
        font-size: 0.9rem;
        border-bottom: none;
        border-left: 4px solid transparent;
    }
    
    .nav-link:hover,
    .nav-item.open .nav-link,
    .nav-item.is-active .nav-link {
        border-bottom: none;
        border-left-color: var(--primary);
        background: var(--primary-pale);
    }
    
    .nav-item.is-active .nav-link::after {
        display: none;
    }
    
    .nav-item.has-panel .nav-link::after {
        content: '\f107';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 0.8rem;
        color: var(--primary);
        transition: transform 0.3s ease;
        margin-left: auto;
    }
    
    .nav-item.has-panel.open .nav-link::after {
        transform: rotate(180deg);
    }
    
    
    .nav-panel {
        position: relative;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        min-width: 100%;
        box-shadow: none;
        border-radius: 8px;
        padding: 14px;
        background: var(--surface-alt);
        margin-top: 6px;
        border: 1px solid var(--border);
    }
    
    .nav-item.open .nav-panel {
        animation: none;
    }
    
    .nav-panel-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Hero - Full width on tablet */
    .hero-section {
        margin: 0 0 20px;
        width: 100%;
        border-radius: 0;
    }
    
    .carousel-slide {
        min-height: 420px;
    }
    
    .slide-content {
        width: 100%;
        max-width: none;
        padding: 30px;
        border-radius: 0;
        background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
    }
    
    .carousel-controls {
        bottom: 20px;
        right: 20px;
        padding: 8px 14px;
        gap: 10px;
    }
    
    .carousel-btn {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    
    .carousel-dots .dot {
        width: 10px;
        height: 10px;
    }
    
    .hero-info {
        grid-template-columns: 1fr;
    }
    
    .info-cards-grid {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .metric-card {
        flex: 1 1 calc(50% - 5px);
    }
    
    .district-grid {
        column-count: 2;
    }
}

/* Mobile */
@media (max-width: 767px) {
    main {
        padding: 0 16px;
        gap: 20px;
    }
    
    /* Unified Section Mobile */
    .unified-card {
        padding: 20px 16px;
        border-radius: 16px;
    }
    
    .unified-card::before {
        height: 3px;
    }
    
    .unified-main-content {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    
    .unified-left {
        flex-direction: column;
        gap: 16px;
    }
    
    .unified-left .card-icon {
        width: 56px;
        height: 56px;
        font-size: 1.4rem;
        border-radius: 14px;
    }
    
    .unified-left h1 {
        font-size: 1.35rem;
    }
    
    .unified-left .lead {
        font-size: 0.9rem;
    }
    
    .unified-left .eyebrow::before {
        width: 16px;
    }
    
    .unified-left .hero-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .unified-left .hero-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }
    
    .unified-actions-scroll {
        gap: 14px;
        padding: 6px 2px 14px;
    }
    
    .action-card-unified {
        min-width: 220px;
        max-width: 240px;
        padding: 20px;
        border-radius: 14px;
    }
    
    .action-card-unified .action-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        margin-bottom: 14px;
        border-radius: 12px;
    }
    
    .action-card-unified h3 {
        font-size: 0.95rem;
    }
    
    .action-card-unified p {
        font-size: 0.8rem;
    }
    
    .scroll-hint {
        font-size: 0.7rem;
        padding: 6px 10px 6px 30px;
    }
    
    .utility-bar {
        padding: 8px 16px;
    }
    
    .utility-left .location {
        font-size: 0.7rem;
    }
    
    .utility-left .phone {
        display: none;
    }
    
    .social-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .lang-btn {
        padding: 5px 8px;
        font-size: 0.75rem;
    }
    
    .theme-toggle {
        width: 36px;
        height: 36px;
    }
    
    .brand-bar {
        padding: 12px 16px;
    }
    
    .brand .brand-logo {
        width: 220px;
    }
    
    .brand-meta .tagline {
        display: none;
    }
    
    .site-nav {
        padding: 0 16px;
    }
    
    .btn {
        padding: 10px 18px;
        font-size: 0.85rem;
    }
    
    .hero-section {
        margin: 0 0 16px;
        width: 100%;
    }
    
    .carousel-slide {
        min-height: 360px;
    }
    
    .slide-content h2 {
        font-size: 1.4rem;
    }
    
    .slide-content p {
        font-size: 0.85rem;
        margin-bottom: 14px;
    }
    
    .carousel-controls {
        bottom: 16px;
        right: 16px;
        padding: 6px 12px;
        gap: 8px;
    }
    
    .carousel-btn {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    
    .carousel-dots .dot {
        width: 8px;
        height: 8px;
    }
    
    .info-card.main-card {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .metric-card {
        flex: 1 1 100%;
    }
    
    .quick-actions,
    .media-grid,
    .link-grid,
    .insight-panels {
        grid-template-columns: 1fr;
    }
    
    .media-wall,
    .link-board,
    .districts {
        padding: 20px;
    }
    
    .ticker-track {
        padding: 10px 20px;
        gap: 40px;
    }
    
    .ticker-track a {
        font-size: 0.8rem;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .site-footer {
        padding: 28px 20px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    main {
        padding: 0 12px;
        gap: 16px;
    }
    
    .utility-bar {
        padding: 6px 12px;
    }
    
    .utility-left .location {
        display: none;
    }
    
    .language-switcher {
        gap: 2px;
        padding: 3px;
    }
    
    .lang-btn {
        padding: 4px 6px;
        font-size: 0.7rem;
        gap: 3px;
    }
    
    .lang-flag {
        font-size: 0.9rem;
    }
    
    .brand-bar {
        padding: 10px 12px;
    }
    
    .brand .brand-logo {
        width: 180px;
    }
    
    .sign{
        width:2px;
        height: 2px;
    }
    .site-nav {
        padding: 0 12px;
    }
    
    .brand-cta {
        flex-direction: column;
        width: 100%;
    }
    
    .brand-cta .btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero-section {
        margin: 0 0 12px;
        width: 100%;
    }
    
    .carousel-slide {
        min-height: 300px;
    }
    
    .slide-content {
        padding: 20px;
    }
    
    .slide-badge {
        padding: 4px 12px;
        font-size: 0.65rem;
    }
    
    .slide-content h2 {
        font-size: 1.2rem;
    }
    
    .slide-content p {
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .carousel-controls {
        bottom: 12px;
        right: 12px;
        padding: 5px 10px;
        gap: 6px;
    }
    
    .carousel-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .carousel-dots .dot {
        width: 6px;
        height: 6px;
    }
    
    .district-grid {
        column-count: 1;
    }
    
    .back-to-top {
        width: 42px;
        height: 42px;
        bottom: 16px;
        right: 16px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn:hover,
    .action-card:hover,
    .metric-card:hover,
    .link-grid a:hover,
    .info-card:hover {
        transform: none;
    }
    
    .social-icon:hover {
        transform: none;
    }
    
    /* Keep active states for touch devices */
    .nav-item.open .nav-link,
    .nav-item.is-active .nav-link {
        color: var(--primary);
        background: var(--primary-pale);
        border-left-color: var(--primary);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .ticker-track {
        animation: none;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ========== Dark Mode Text Optimization ========== */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color:#a8a8a8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 600;
}

[data-theme="dark"] .nav-link {
    font-weight: 500;
    color: var(--text);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.is-active {
    color: var(--primary-light);
}

[data-theme="dark"] .brand-meta .tagline {
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

[data-theme="dark"] .btn-primary:hover {
    background: var(--primary-light);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--primary);
    color: var(--primary-light);
}

[data-theme="dark"] .btn-outline:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

[data-theme="dark"] .utility-bar {
    background: var(--utility-bar-bg);
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .utility-left .location,
[data-theme="dark"] .utility-left .phone {
    color: #ffffff;
    opacity: 1;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .utility-left .location .fas,
[data-theme="dark"] .utility-left .phone .fas {
    color: #ffffff;
    opacity: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

[data-theme="dark"] .visitor-stats .eyebrow {
    color: var(--text);
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.3);
}

[data-theme="dark"] .visitor-stats .section-title {
    color: var(--text);
}

[data-theme="dark"] .stat-label {
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .pie-center {
    color: var(--text);
}

[data-theme="dark"] .pie-total {
    color: var(--text);
}

[data-theme="dark"] .pie-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .chart-legend {
    color: var(--text-secondary);
}

[data-theme="dark"] .legend-item {
    color: var(--text-secondary);
}

[data-theme="dark"] .bar-label,
[data-theme="dark"] .bar-value {
    color: var(--text-secondary);
}

[data-theme="dark"] .section-title,
[data-theme="dark"] .info-card h1,
[data-theme="dark"] .action-card h3,
[data-theme="dark"] .insight-panels h3 {
    color: var(--text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .nav-link {
    font-weight: 500;
    color: var(--text);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.is-active {
    color: var(--primary-light);
}

[data-theme="dark"] .brand-meta .tagline {
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

[data-theme="dark"] .btn-primary:hover {
    background: var(--primary-light);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--primary);
    color: var(--primary-light);
}

[data-theme="dark"] .btn-outline:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

[data-theme="dark"] .utility-bar {
    background: var(--utility-bar-bg);
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .utility-left .location,
[data-theme="dark"] .utility-left .phone {
    color: #ffffff;
    opacity: 1;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .utility-left .location .fas,
[data-theme="dark"] .utility-left .phone .fas {
    color: #ffffff;
    opacity: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

[data-theme="dark"] .visitor-stats .eyebrow {
    color: var(--text);
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.3);
}

[data-theme="dark"] .visitor-stats .section-title {
    color: var(--text);
}

[data-theme="dark"] .stat-label {
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .pie-center {
    color: var(--text);
}

[data-theme="dark"] .pie-total {
    color: var(--text);
}

[data-theme="dark"] .pie-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .chart-legend {
    color: var(--text-secondary);
}

[data-theme="dark"] .legend-item {
    color: var(--text-secondary);
}

[data-theme="dark"] .bar-label,
[data-theme="dark"] .bar-value {
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-outline {
    border-width: 2px;
}

[data-theme="dark"] .ticker-track a {
    color: var(--text);
}

[data-theme="dark"] .district-grid a,
[data-theme="dark"] .nav-panel-grid a,
[data-theme="dark"] .insight-panels a {
    color: var(--text-secondary);
}

[data-theme="dark"] .district-grid a:hover,
[data-theme="dark"] .nav-panel-grid a:hover,
[data-theme="dark"] .insight-panels a:hover {
    color: var(--primary);
}

/* Dark mode input/form elements */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--surface-elevated);
    border-color: var(--border);
    color: var(--text);
}

/* Dark mode scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--surface);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Print Styles */
/* =============================================
   ENHANCED MOBILE RESPONSIVENESS
   Comprehensive mobile optimization for all devices
   ============================================= */

/* Extra Small Devices (phones, 320px and up) */
@media (max-width: 575px) {
    html {
        font-size: 14px;
    }
    
    .utility-bar {
        padding: 8px 12px;
        font-size: 0.75rem;
        gap: 8px;
    }
    
    .utility-left {
        flex-direction: column;
        gap: 6px;
        width: 100%;
    }
    
    .utility-left .location,
    .utility-left .phone {
        font-size: 0.7rem;
        justify-content: center;
    }
    
    .utility-right {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    
    .social-icons {
        justify-content: center;
    }
    
    .language-switcher {
        width: 100%;
        justify-content: center;
    }
    
    .lang-btn {
        font-size: 0.7rem;
        padding: 5px 10px;
    }
    
    .brand-bar {
        padding: 12px 16px;
    }
    
    .brand .brand-logo {
        width: 180px;
        max-width: 100%;
    }
    
    .brand-cta {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    
    .brand-cta .btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    .site-nav {
        padding: 0 12px;
    }
    
    .nav-link {
        padding: 14px 12px;
        font-size: 0.95rem;
    }
    
    .hero-section {
        margin: 0;
        border-radius: 0;
    }
    
    .carousel-slide {
        min-height: 300px;
        padding: 30px 20px;
    }
    
    .slide-content h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
    
    .slide-content p {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
    
    .carousel-controls {
        padding: 0 12px;
    }
    
    .carousel-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    
    .services-section {
        padding: 40px 0 50px;
    }
    
    .services-section .section-header {
        padding: 0 16px;
        margin-bottom: 30px;
    }
    
    .section-heading {
        font-size: 1.8rem;
    }
    
    .section-subtitle {
        font-size: 0.9rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 16px;
    }
    
    .service-card {
        padding: 24px 20px;
    }
    
    .service-content h3 {
        font-size: 1.1rem;
    }
    
    .service-content p {
        font-size: 0.85rem;
    }
    
    .service-link {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
    
    .visitor-stats {
        padding: 40px 0 50px;
    }
    
    .visitor-stats .section-header {
        padding: 0 16px;
        margin-bottom: 30px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 16px;
    }
    
    .stats-numbers {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .stat-item.highlight {
        grid-column: span 2;
    }
    
    .stat-value {
        font-size: 1.8rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    
    .chart-container {
        padding: 20px 16px;
    }
    
    .chart-title {
        font-size: 1rem;
    }
    
    .pie-chart-wrapper {
        width: 140px;
        height: 140px;
    }
    
    .pie-total {
        font-size: 1.2rem;
    }
    
    .bar-chart {
        gap: 8px;
    }
    
    .bar-item {
        min-width: 35px;
    }
    
    .bar-label {
        font-size: 0.7rem;
    }
    
    .bar-value {
        font-size: 0.75rem;
    }
    
    .breaking-news {
        padding: 10px 0;
    }
    
    .ticker-track {
        font-size: 0.8rem;
        padding: 8px 0;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 20px;
    }
    

}

/* Small Devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 20px;
    }
    
    .service-card {
        padding: 28px 24px;
    }
    
    .stats-numbers {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .brand .brand-logo {
        width: 240px;
    }
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .service-card:hover {
        transform: none;
    }
    
    .service-card:active {
        transform: scale(0.98);
    }
    
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-link {
        min-height: 44px;
        padding: 12px 16px;
    }
    
    .social-icon {
        min-width: 44px;
        min-height: 44px;
    }
    
    .theme-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-section {
        min-height: auto;
    }
    
    .carousel-slide {
        min-height: 250px;
        padding: 20px;
    }
    
    .utility-bar {
        padding: 6px 20px;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .brand-logo {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Print Styles */
@media print {
    .utility-bar,
    .site-nav,
    .carousel-controls,
    .back-to-top,
    .theme-toggle,
    .btn {
        display: none !important;
    }
    
    body.modern-home {
        background: #fff;
        color: #000;
    }
    
    .page-shell {
        max-width: 100%;
        padding: 0;
    }
    
    .carousel-slide {
        min-height: auto;
    }
    
    .slide-content {
        position: relative;
        background: none;
        color: #000;
    }
}

[data-theme="dark"] .myButton {
    color: #FFF;

}

[data-theme="dark"] .btnpp {
    color: #FFF;

}

/* Election Results */
.title-section {
     margin-left: 60px;
}

.title-section h3 {
    margin-left: 0;
}

.sub-content {
    margin-left: 30px;
}

.sub-content h5 {
    margin-top: 10px;
}

.sub-content .table-responsive {
    width: 100%;
}

/* Main Title */
.title {
    font-size: 21px;
    font-weight: 600;
    color: #4b2354;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #9a258f;
    max-width: 800px;
}

.sub-title {
    margin-top: 8px;
    margin-left: 15px;
    margin-bottom: 5px;

    font-size: 18px;
    font-weight: 600;
    color: #642a69;
}

/* =========================================
   Year List
   ========================================= */

.year-list {
    margin: 0;
    padding-left: 42px;
    max-width: 850px;
}


/* =========================================
   YEAR ITEM
   ========================================= */
.year-item {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin-bottom: 12px;
    padding: 8px 12px;

    background: #faf8fb;
    border: 1px solid #eee4f0;
    border-left: 4px solid #9a258f;

    border-radius: 6px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.year-item:hover {
    background: #fff;
    border-left-color: #642a69;

    box-shadow: 0 4px 12px rgba(100, 42, 105, 0.12);

    transform: translateX(4px);
}


/* =========================================
   YEAR NUMBER
   ========================================= */

.year {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 70px;
    height: 32px;

    padding: 0 12px;

    background: #642a69;
    color: #fff;

    font-size: 15px;
    font-weight: 600;

    border-radius: 5px;

    margin-right: 15px;

    box-shadow: 0 2px 5px rgba(100, 42, 105, 0.15);
}

.year a{
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 70px;
    height: 32px;

    padding: 0 12px;

    background: #642a69;
    color: #fff;

    font-size: 15px;
    font-weight: 600;

    border-radius: 5px;

    margin-right: 15px;

    box-shadow: 0 2px 5px rgba(100, 42, 105, 0.15);
}


/* =========================================
   DASH
   ========================================= */

.dash {
    color: #888;
    font-weight: 500;
    margin-right: 15px;
}


/* =========================================
   DIRECT LINK
   ========================================= */

.direct-link {
    display: inline-flex;
    align-items: center;

    padding: 6px 13px;

    color: #642a69;
    background: #f3eaf5;

    text-decoration: none;
    font-size: 14px;
    font-weight: 500;

    border-radius: 4px;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.direct-link:hover {
    background: #642a69;
    color: #fff;

    transform: translateY(-1px);
}


/* =========================================
   2024 SUB LIST
   ========================================= */

.sub-list {
    margin-left: 25px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.sub-item {
        position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin-bottom: 12px;
    padding: 8px 12px;

    background: #faf8fb;
    border: 1px solid #eee4f0;
    border-left: 4px solid #9a258f;

    border-radius: 6px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.sub-item:hover {
    background: #fff;
    border-left-color: #642a69;

    box-shadow: 0 4px 12px rgba(100, 42, 105, 0.12);

    transform: translateX(4px);
}
.roman {
    width: 35px;

    color: #642a69;
    font-weight: 600;
}

.sub-item a {
    color: #333;
    text-decoration: none;
}

.sub-item a:hover {
    color: #9a258f;
    text-decoration: underline;
}


/* =========================================
   2023 MONTHLY TABLE
   ========================================= */

.monthly-table {
    width: 90%;
    max-width: 750px;

    border-collapse: separate;
    border-spacing: 0;

    margin-left: 15px;
    margin-top: 8px;

    overflow: hidden;

    border: 1px solid #ddd;
    border-radius: 5px;
}

.monthly-table td:hover {
    background: linear-gradient(
        90deg,
        #f3eaf5,
        #faf7fb
    );

    box-shadow: inset 4px 0 0 #9a258f;
}
.monthly-table td {
    padding: 7px 12px;

    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;

    background: #fff;

    transition: background 0.2s ease;
}

.monthly-table tr:last-child td {
    border-bottom: none;
}

.monthly-table td:last-child {
    border-right: none;
}

.monthly-table td:hover a {
    color: #642a69;
    font-weight: 500;
}

.monthly-table a {
    color: #333;
    text-decoration: none;
}

.monthly-table a:hover {
    color: #9a258f;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    body {
        margin: 20px;
    }

    .title {
        font-size: 19px;
    }

    .year-list {
        padding-left: 30px;
    }

    .year-item {
        min-height: 42px;
        padding: 6px 8px;
    }

    .year {
        min-width: 60px;
        height: 30px;

        font-size: 14px;

        margin-right: 10px;
    }

    .dash {
        margin-right: 10px;
    }

    .monthly-table {
        width: 100%;
        margin-left: 0;
    }
}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 500px) {

    body {
        margin: 15px;
    }

    .year-list {
        padding-left: 25px;
    }

    .year-item {
        flex-wrap: wrap;
        gap: 5px;

        padding: 7px;
    }

    .year {
        min-width: 55px;
        padding: 0 8px;
    }

    .direct-link {
        padding: 5px 9px;
        font-size: 13px;
    }

    .monthly-table {
        font-size: 13px;
    }

    .monthly-table td {
        padding: 6px;
    }
}


/* =========================================
   FONT RESIZE
   ========================================= */
.font-resize {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 5px;

    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each Icon */
.font-resize .resize-item {
    display: inline-block !important;
    margin: 0;
    padding: 0;
}

/* Icon Button */
.font-resize .resize-item a {
    width: 36px;
    height: 36px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    background-color: #642a69;
    color: #ffffff;

    text-decoration: none;
    border-radius: 4px;

    cursor: pointer;
}

/* Hover */
.font-resize .resize-item a:hover {
    background-color: #92098b;
    color: #ffffff;
}

/* Icon size */
.font-resize .resize-item a i {
    font-size: 16px;
}

 /* =====================================================
   EVENTS CENTER PAGE
   ===================================================== */
.events-overlay {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.50);

    z-index: 9998;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.35s ease;
}

.events-overlay.show {
    opacity: 1;
    visibility: visible;
}


/* =====================================================
   EVENTS POPUP
   ===================================================== */
.events-fly-page {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 90%;
    max-width: 1150px;

    min-height: 65vh;

    background: #fff;

    z-index: 9999;

    border-radius: 10px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);

    transform: translate(-50%, -50%) scale(0.75);

    opacity: 0;
    visibility: hidden;

    transition:
        transform 0.45s ease,
        opacity 0.35s ease,
        visibility 0.35s ease;
}


.events-fly-page.show {
    transform: translate(-50%, -50%) scale(1);

    opacity: 1;
    visibility: visible;
}
/* =====================================================
   POPUP HEADER
   ===================================================== */

.events-fly-header {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 20px;

    background: #642a69;

    color: #fff;

    z-index: 10;
}


.events-fly-header h2 {
    margin: 0;

    font-size: 24px;
    font-weight: 600;
}


/* Close button */

.events-close {
    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,0.15);

    color: #fff;

    font-size: 24px;

    cursor: pointer;

    transition: all 0.3s ease;
}

.events-close:hover {
    background: #fff;
    color: #642a69;

    transform: rotate(90deg);
}


/* =====================================================
   POPUP SCROLL AREA
   ===================================================== */

.events-content {

    flex: 1;

    overflow-y: auto;

    overflow-x: hidden;

    padding: 30px;

    min-height: 0;
}


/* =====================================================
   INNER SECTIONS
   ===================================================== */

.events-inner-section {

    margin-bottom: 30px;

    padding: 25px;

    background: #f8f3fa;

    border-radius: 8px;

    border-left: 4px solid #642a69;
}


.events-inner-section:last-child {
    margin-bottom: 0;
}


.events-inner-section .section-header {
    margin-bottom: 25px;
}


/* =====================================================
   INNER CARDS
   ===================================================== */

.events-inner-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.events-inner-card {

    padding: 22px;

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 8px;

    transition: all 0.3s ease;
}


.events-inner-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 8px 20px rgba(0,0,0,0.10);
}


.events-inner-card h3 {

    margin-top: 12px;

    color: #642a69;

    font-size: 20px;
}


.events-inner-card p {

    color: #555;

    line-height: 1.6;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 768px) {

    .events-fly-page {

        width: 94%;

        height: 92vh;
        max-height: 92vh;

        border-radius: 8px;
    }


    .events-fly-header {

        padding: 15px 18px;
    }


    .events-fly-header h2 {

        font-size: 20px;
    }


    .events-content {

        padding: 20px;
    }


    .events-inner-grid {

        grid-template-columns: 1fr;
    }

}


/* =========================================================
   STRATEGIC DIRECTION SECTION
========================================================= */

.strategic-section {
    width: 100%;
    max-width: 1250px;
    margin: 60px auto;
    padding: 20px;
    box-sizing: border-box;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.strategic-heading {
    text-align: center;
    margin-bottom: 40px;
}

.strategic-heading h2 {
    margin: 0;
    color: #642a69;
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.strategic-heading p {
    margin: 8px 0 15px;
    color: #777;
    font-size: 15px;
}

.strategic-line {
    display: inline-block;
    width: 55px;
    height: 3px;
    margin: 0 8px;
    vertical-align: middle;
    background: #9a258f;
    border-radius: 5px;
}


/* =========================================================
   VISION + MISSION
========================================================= */

.vision-mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 55px;
}


.strategic-card {
    position: relative;
    min-height: 270px;
    padding: 38px 35px 35px;
    border-radius: 22px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #eadcf0;
    box-shadow: 0 8px 25px rgba(100, 42, 105, 0.12);
    transition: all 0.35s ease;
}


.strategic-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(
        90deg,
        #9a258f,
        #642a69
    );
}


.strategic-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(100, 42, 105, 0.20);
}


.strategic-icon {
    width: 68px;
    height: 68px;
    margin-bottom: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        #b474d4,
        #642a69
    );
    color: #ffffff;
    font-size: 28px;
    box-shadow: 0 6px 15px rgba(100, 42, 105, 0.25);
}


.strategic-content h3 {
    margin: 0 0 15px;
    color: #642a69;
    font-size: 25px;
    font-weight: 700;
}


.strategic-content p {
    margin: 0;
    color: #555;
    font-size: 16px;
    line-height: 1.9;
    text-align: justify;
}


/* =========================================================
   SUB SECTION HEADING
========================================================= */

.sub-section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 35px 0 25px;
}


.sub-section-heading h2 {
    margin: 0;
    color: #642a69;
    font-size: 26px;
    font-weight: 700;
}


.heading-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #642a69;
    color: #ffffff;
    font-size: 18px;
}


/* =========================================================
   VALUES
========================================================= */

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 55px;
}


.value-card {
    position: relative;
    min-height: 175px;
    padding: 25px 18px;
    background: linear-gradient(
        145deg,
        #ffffff,
        #f8eefb
    );
    border: 1px solid #eadcf0;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(100, 42, 105, 0.10);
    transition: all 0.35s ease;
    overflow: hidden;
}


.value-card:hover {
    transform: translateY(-7px);
    background: #faf4fc;
    border-color: #b474d4;
    box-shadow: 0 12px 25px rgba(100, 42, 105, 0.18);
}


.value-number {
    position: absolute;
    top: 10px;
    right: 14px;
    color: #d8c2df;
    font-size: 28px;
    font-weight: 700;
}


.value-icon {
    width: 52px;
    height: 52px;
    margin: 12px auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #642a69;
    color: #ffffff;
    font-size: 21px;
    transition: all 0.35s ease;
}


.value-card:hover .value-icon {
    background: #642a69;
    color: #ffffff;
    transform: rotate(8deg);
}


.value-card h3 {
    margin: 0;
    color: #642a69;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
}

.value-card p {
    margin: 0;
    color: #555;
    font-size: 15px;
    line-height: 1.5;

}


/* =========================================================
   RISK AREAS
========================================================= */

.risk-heading {
    margin-top: 10px;
}


.risk-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


.risk-card {
    position: relative;
    min-height: 190px;
    padding: 28px 18px;
    text-align: center;
    border-radius: 20px;
    background: linear-gradient(
        145deg,
        #ffffff,
        #f8eefb
    );
    border: 1px solid #dfc7e5;
    box-shadow: 0 7px 20px rgba(100, 42, 105, 0.11);
    transition: all 0.35s ease;
    overflow: hidden;
}


.risk-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #642a69;
}


.risk-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 14px 28px rgba(100, 42, 105, 0.20);
}


.risk-number {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #d6bddc;
    font-size: 26px;
    font-weight: 700;
}


.risk-icon {
    width: 58px;
    height: 58px;
    margin: 10px auto 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #642a69;
    color: #ffffff;
    font-size: 23px;
}


.risk-card h3 {
    margin: 0;
    color: #642a69;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
}

.risk-card p {
    margin: 0;
    color: #555;
    font-size: 16px;
    line-height: 1.9;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .risk-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .strategic-card {
        min-height: 300px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .strategic-section {
        margin: 35px auto;
        padding: 15px;
    }

    .strategic-heading h2 {
        font-size: 25px;
    }

    .strategic-heading p {
        font-size: 13px;
    }

    .vision-mission-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .strategic-card {
        min-height: auto;
        padding: 30px 25px;
    }

    .strategic-content p {
        font-size: 15px;
        line-height: 1.8;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .risk-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .strategic-heading h2 {
        font-size: 22px;
    }

    .strategic-heading p {
        font-size: 12px;
    }

    .strategic-line {
        width: 35px;
    }

    .strategic-content h3 {
        font-size: 22px;
    }

    .strategic-content p {
        font-size: 14px;
        text-align: left;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .risk-grid {
        grid-template-columns: 1fr;
    }

    .value-card {
        min-height: 150px;
    }

    .risk-card {
        min-height: 160px;
    }
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.election-category-container {
    width: 100%;
    max-width: 1200px;

    margin: 35px auto;
    padding: 0 20px;
}


/* =========================================================
   ROW 1
   01 = 70%
   02 = 30%
   ========================================================= */

.featured-row {
    display: grid;

    grid-template-columns: 7fr 3fr;

    gap: 24px;

    width: 100%;

    margin-bottom: 24px;
}


/* =========================================================
   ROW 2
   03 = 33.33%
   04 = 33.33%
   05 = 33.33%
   ========================================================= */

.secondary-row {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    width: 100%;
}


/* =========================================================
   COMMON CARD
   ========================================================= */

.election-card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;

    background: #ffffff;

    border: 1px solid #eadff0;

    border-radius: 16px;

    overflow: hidden;

    text-decoration: none !important;

    box-shadow: 0 5px 18px rgba(98, 42, 105, 0.10);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.election-card:hover {
    transform: translateY(-6px);

    border-color: #b474d4;

    box-shadow: 0 14px 30px rgba(98, 42, 105, 0.20);
}


/* =========================================================
   IMAGE AREA
   ========================================================= */

.election-image {
    width: 100%;

    height: 170px;

    padding: 10px;

    background: #f6f0f8;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;
}


.election-image img {
    width: 100%;
    height: 100%;

    /*
       IMPORTANT:
       Image crop වෙන්නේ නැහැ.
       සම්පූර්ණ image එක පෙන්වනවා.
    */

    object-fit: contain;

    transition: transform 0.4s ease;
}


.election-card:hover .election-image img {
    transform: scale(1.03);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.election-card-content {
    position: relative;

    min-height: 125px;

    padding: 16px 18px 18px;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   NUMBER
   ========================================================= */

.election-number {
    position: absolute;

    top: 15px;
    right: 16px;

    width: 31px;
    height: 31px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #642a69;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;
}


/* =========================================================
   TITLE
   ========================================================= */

.election-title-area {
    padding-right: 42px;
}


.election-title-area h3 {
    margin: 0 0 6px;

    color: #642a69;

    font-size: 19px;

    font-weight: 600;

    line-height: 1.3;
}


.election-title-area p {
    margin: 0;

    color: #777777;

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   VIEW RESULTS
   ========================================================= */

.view-results {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 12px;

    color: #9a258f;

    font-size: 14px;

    font-weight: 600;

    transition: all 0.25s ease;
}


.view-results i {
    font-size: 12px;

    transition: transform 0.25s ease;
}


.election-card:hover .view-results {
    color: #642a69;
}


.election-card:hover .view-results i {
    transform: translateX(5px);
}


/* =========================================================
   PURPLE TOP ACCENT
   ========================================================= */

.featured-card::before,
.secondary-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #642a69,
        #9a258f,
        #b474d4
    );

    z-index: 2;
}


/* =========================================================
   FEATURED CARD TEXT
   ========================================================= */

.featured-card .election-title-area h3 {
    font-size: 20px;
}


/* =========================================================
   SECONDARY CARD TEXT
   ========================================================= */

.secondary-card .election-title-area h3 {
    font-size: 17px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 992px) {

    .featured-row {
        gap: 20px;
    }

    .secondary-row {
        gap: 20px;
    }

    .election-image {
        height: 160px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .featured-row,
    .secondary-row {

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .election-image {
        height: 210px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .election-category-container {
        padding: 0 15px;
    }

    .election-image {
        height: 190px;
    }

    .election-card-content {
        padding: 15px;
    }

}

.featured-row .featured-card:first-child .election-image img {
    object-fit: fill;
    width: 100%;
    height: 100%;
}


/* Main page heading */
.page-main-heading {
    margin: 0;
    padding: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: #642a69;
    font-family: "Segoe UI", "Noto Sans", sans-serif;
}

.strategic-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 25px 0 30px;
}

.strategic-line {
    width: 70px;
    height: 2px;
    background: #642a69;
    display: block;
}

@media (max-width: 768px) {
    .page-main-heading {
        font-size: 24px;
    }

    .strategic-line {
        width: 40px;
    }

    .strategic-heading {
        gap: 12px;
    }
}


.district-table-wrapper {
    width: 100%;
    margin: 25px 0;
}

/* Mobile horizontal scroll */
.district-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(80, 40, 90, 0.10);
}


/* Main table */
.district-office-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    font-family: "Segoe UI", "Noto Sans Sinhala",
                 "Noto Sans Tamil", Arial, sans-serif;
    font-size: 14px;
    color: #333;
}


/* =========================================
   HEADER
   ========================================= */
.district-office-table thead th {
    padding: 15px 12px;

    background: #eadcf7;
    color: #4f2858;

    font-weight: 600;
    text-align: center;
    vertical-align: middle;

    border-bottom: 2px solid #9a6bb0;
    line-height: 1.4;
}


/* Rounded top corners */
.district-office-table thead th:first-child {
    border-top-left-radius: 12px;
}

.district-office-table thead th:last-child {
    border-top-right-radius: 12px;
}


/* =========================================
   COLUMN WIDTHS
   ========================================= */

.district-office-table {
    width: 100%;
    table-layout: fixed;
}

.district-office-table th:nth-child(1),
.district-office-table td:nth-child(1) {
    width: 17%;
}

.district-office-table th:nth-child(2),
.district-office-table td:nth-child(2) {
    width: 20%;
}

.district-office-table th:nth-child(3),
.district-office-table td:nth-child(3) {
    width: 10%;
}

.district-office-table th:nth-child(4),
.district-office-table td:nth-child(4) {
    width: 10%;
}

.district-office-table th:nth-child(5),
.district-office-table td:nth-child(5) {
    width: 23%;
}

.district-office-table th:nth-child(6),
.district-office-table td:nth-child(6) {
    width: 20%;
}


/* =========================================
   TABLE CELLS
   ========================================= */

.district-office-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid #e7ddea;
    border-right: 1px solid #eee8f1;

    vertical-align: middle;
    line-height: 1.5;

    background: #ffffff;
}


/* Alternating rows */
.district-office-table tbody tr:nth-child(even) td {
    background: #faf6fc;
}


/* Hover effect */
.district-office-table tbody tr:hover td {
    background: #f1e6f6;
}


/* =========================================
   DISTRICT
   ========================================= */

.district-office-table .district-name {
    color: #642a69;
    font-size: 15px;
    text-align: left;
}


/* =========================================
   POSITION
   ========================================= */

.district-office-table .position {
    display: block;
    margin-top: 4px;
    color: #777;
    font-size: 13px;
    font-weight: 400;
}


/* =========================================
   CONTACT NUMBERS
   ========================================= */

.district-office-table .contact-number {
    text-align: left;
    white-space: nowrap;
}


/* =========================================
   EMAIL
   ========================================= */

.district-office-table .email {
    text-align: left;
    word-break: break-word;
}

.district-office-table .email a {
    display: block;
    margin: 2px 0;
    color: #642a69;
    text-decoration: none;
    transition: all 0.2s ease;
}

.district-office-table .email a:hover {
    color: #9A258F;
    text-decoration: underline;
}


/* =========================================
   CHIEF MANAGEMENT ASSISTANT
   ========================================= */

.district-office-table .cma {
    color: #444;
    font-weight: 500;
}


/* =========================================
   ADDITIONAL OFFICERS
   ========================================= */

.district-office-table .additional-officer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #d9c5df;
}


/* =========================================
   SECONDARY NUMBER
   ========================================= */

.district-office-table .secondary-number {
    display: inline-block;
    margin-top: 5px;
}


/* =========================================
   LAST ROW
   ========================================= */

.district-office-table tbody tr:last-child td {
    border-bottom: none;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .district-table-wrapper {
        margin: 15px 0;
    }

    .district-office-table {
        min-width: 950px;
        font-size: 13px;
    }

    .district-office-table thead th {
        padding: 12px 10px;
        font-size: 13px;
    }

    .district-office-table tbody td {
        padding: 12px 10px;
    }

    .district-office-table .district-name {
        font-size: 14px;
    }

    .district-office-table .position {
        font-size: 12px;
    }
}



/* =========================================================
   PARTY LIST
   ========================================================= */

.party-table-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 30px auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Main Table */
.party-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);

    font-family: "Segoe UI",
                 "Noto Sans Sinhala",
                 "Noto Sans Tamil",
                 sans-serif;
}

/* Header */
.party-table th {
    padding: 13px 12px;
    background: #642a69;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid rgba(255,255,255,0.15);
    white-space: nowrap;
}

.party-table th:last-child {
    border-right: none;
}

/* Table Cells */
.party-table td {
    padding: 12px 10px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    color: #333;
}

.party-table td:last-child {
    border-right: none;
}

.party-table tbody tr:last-child td {
    border-bottom: none;
}

/* Party Number */
.party-table td:first-child {
    width: 55px;
    min-width: 55px;
    font-weight: 600;
    color: #642a69;
}

/* Party Name */
.party-table td:nth-child(2) {
    min-width: 300px;
    text-align: left;
    font-weight: 500;
}

/* Alternate Rows */
.party-table tbody tr:nth-child(even) {
    background: #fcf9fd;
}

/* Row Hover */
.party-table tbody tr:hover {
    background: #f7eef8;
}


/* =========================================================
   DOWNLOAD BUTTON
   ========================================================= */

.party-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-width: 110px;
    padding: 8px 14px;

    background: #642a69;
    color: #fff;

    border: 1px solid #9b0fa7;
    border-radius: 5px;

    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* Enabled Hover */
.party-download-btn:not(.disabled):hover {
    background: #9A258F;
    border-color: #9A258F;
    color: #fff;
    text-decoration: none;

    transform: translateY(-1px);

    box-shadow:
        0 3px 8px rgba(100, 42, 105, 0.18);
}


/* Disabled Button */
.party-download-btn.disabled {
    background: transparent;
    color: #642a69;
    border: 1px solid #642a69;

    cursor: default;
    pointer-events: none;
    box-shadow: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .party-table-wrapper {
        width: 100%;
        max-width: 100%;
        margin: 20px auto;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }

    .party-table {
        min-width: 900px;
        font-size: 13px;
    }

    .party-table th {
        padding: 11px 9px;
        font-size: 13px;
    }

    .party-table td {
        padding: 10px 8px;
        font-size: 13px;
    }

    .party-table td:first-child {
        width: 45px;
        min-width: 45px;
    }

    .party-table td:nth-child(2) {
        min-width: 250px;
    }

    .party-download-btn {
        min-width: 105px;
        padding: 7px 10px;
        font-size: 12px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .party-table {
        min-width: 850px;
    }

    .party-table th {
        padding: 10px 8px;
        font-size: 12px;
    }

    .party-table td {
        padding: 9px 7px;
        font-size: 12px;
    }

    .party-table td:nth-child(2) {
        min-width: 230px;
    }

    .party-download-btn {
        min-width: 100px;
        padding: 7px 9px;
        font-size: 11px;
    }
}

/* =========================================================
   LAST UPDATED
   ========================================================= */

.party-last-updated {
    width: 100%;
    max-width: 100%;
    margin: 18px 0 8px;
    padding: 9px 14px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;

    font-family: "Segoe UI",
                 "Noto Sans Sinhala",
                 "Noto Sans Tamil",
                 sans-serif;

    font-size: 16px;
    color: #642a69;

    background: #fcf9fd;
    border-top: 1px solid #eadcf0;
    border-bottom: 1px solid #eadcf0;
}

.party-last-updated-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #9A258F;
    font-size: 16px;
}

.party-last-updated-label {
    font-weight: 500;
}

.party-last-updated-date {
    font-weight: 600;
    color: #555;
}

@media (max-width: 600px) {

    .party-last-updated {
        justify-content: flex-start;
        padding: 8px 10px;
        font-size: 12px;
        flex-wrap: wrap;
    }

}

/* =========================================================
   KATHIRAYE BALAYA
   ========================================================= */

.books-list {
    width: 100%;

    margin: 30px auto;
}

.book-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.book-item:hover {
    transform: translateY(-3px);
    border-color: #9A258F;
    box-shadow: 0 6px 18px rgba(100, 42, 105, 0.18);
    background-color: #fff;
}

.book-name {
    font-size: 17px;
    max-width: 80%;
    font-weight: 500;
    color: #333;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: #642a69;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    transition: 0.3s;
}

[data-theme="dark"] a.download-btn
 {
    color: #fff;
}

.download-btn:hover {
    background: #9A258F;
    color: #fff;
    text-decoration: none;
}

/* Mobile */
@media (max-width: 600px) {
    .book-item {
        padding: 12px 14px;
    }

    .book-name {
        font-size: 15px;
        padding-right: 10px;
    }

    .download-btn {
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
    }
}


/* =====================================================
   STATISTICS POPUP
   Existing Events Popup - DO NOT MODIFY
   ===================================================== */

.stats-overlay {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.50);

    z-index: 10000;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.35s ease;
}

.stats-overlay.show {
    opacity: 1;
    visibility: visible;
}


/* =====================================================
   STATISTICS POPUP WINDOW
   ===================================================== */

.stats-fly-page {
   position: fixed;
top: 68%;
left: 50%;

    width: 90%;
    max-width: 950px;

    height: 75vh;
    max-height: 750px;

    background: #fff;

    z-index: 10001;

    border-radius: 10px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);

    transform: translate(-50%, -50%) scale(0.75);

    opacity: 0;
    visibility: hidden;

    transition:
        transform 0.45s ease,
        opacity 0.35s ease,
        visibility 0.35s ease;

    overflow: hidden;
}

.stats-fly-page.show {
    transform: translate(-50%, -50%) scale(1);

    opacity: 1;
    visibility: visible;
}


/* =====================================================
   POPUP HEADER
   ===================================================== */

.stats-fly-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 20px;

    background: #642a69;

    color: #fff;
}

.stats-fly-header h2 {
    margin: 0;

    font-size: 23px;
    font-weight: 600;
}


/* =====================================================
   CLOSE BUTTON
   ===================================================== */

.stats-close {
    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,0.15);

    color: #fff;

    font-size: 23px;

    cursor: pointer;

    transition: all 0.3s ease;
}

.stats-close:hover {
    background: #fff;
    color: #642a69;

    transform: rotate(90deg);
}


/* =====================================================
   POPUP CONTENT
   ===================================================== */

.stats-content {
    height: calc(100% - 70px);

    overflow-y: auto;
    overflow-x: hidden;

    padding: 30px;

    background: #fff;
}


/* =====================================================
   DOWNLOAD LIST
   ===================================================== */

.stats-books-list {
    width: 100%;
    max-width: 850px;

    margin: 0 auto;
}


/* Individual download item */

.stats-book-item {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 15px 18px;

    margin-bottom: 12px;

    background: #f8f3fa;

    border: 1px solid #e4d8e8;

    border-radius: 8px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.stats-book-item:hover {
    background: #fff;

    border-color: #9A258F;

    box-shadow: 0 5px 15px rgba(100, 42, 105, 0.10);

    transform: translateY(-2px);
}


/* PDF / document name */

.stats-book-name {
    flex: 1;

    color: #444;

    font-size: 16px;
    font-weight: 500;

    line-height: 1.5;
}


/* Download button */

.stats-download-btn {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-width: 115px;

    padding: 9px 16px;

    background: #642a69;

    color: #fff !important;

    border: 1px solid #642a69;

    border-radius: 6px;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none !important;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.stats-download-btn:hover {
    background: #fff;

    color: #642a69 !important;

    border-color: #642a69;

    box-shadow: 0 4px 10px rgba(100, 42, 105, 0.15);
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 768px) {

    .stats-fly-page {
        width: 94%;

        height: 92vh;
        max-height: 92vh;

        border-radius: 8px;
    }

    .stats-fly-header {
        padding: 13px 16px;
    }

    .stats-fly-header h2 {
        font-size: 19px;
    }

    .stats-close {
        width: 38px;
        height: 38px;

        font-size: 20px;
    }

    .stats-content {
        padding: 20px 15px;
    }

    .stats-book-item {
        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        padding: 15px;
    }

    .stats-book-name {
        font-size: 15px;
    }

    .stats-download-btn {
        width: 100%;
    }
}


/* =========================================
   POLLING DIVISION STATISTICS
   ========================================= */

/* Main Statistics Section */
.polling-statistics-section {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}


/* =========================================
   DISTRICT COLLAPSE
   ========================================= */

.polling-statistics-district {
    width: 100%;
    max-width: 100%;
    margin: 0 0 15px 0;
    box-sizing: border-box;
    overflow: hidden;
}


/* Remove default marker */

.polling-statistics-district summary {
    list-style: none;
}

.polling-statistics-district summary::-webkit-details-marker {
    display: none;
}


/* =========================================
   DISTRICT HEADER
   ========================================= */

.polling-statistics-district > summary {
    position: relative;

    display: flex;
    align-items: center;

    gap: 12px;

    width: 100%;
    min-height: 58px;

    padding: 12px 55px 12px 20px;
    border-radius: 8px;

    box-sizing: border-box;

    cursor: pointer;

    background: linear-gradient(
        90deg,
        #f3e8f6,
        #faf7fb
    );

    color: #642a69;

    font-size: 18px;
    font-weight: 600;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* District Number */

.polling-statistics-district-no {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 34px;

    padding: 0 8px;

    border-radius: 7px;

    background: #642a69;
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    box-sizing: border-box;
}


/* District Name */

.polling-statistics-district-name {
    font-size: 19px;
    font-weight: 700;
}


/* Hover */

.polling-statistics-district > summary:hover {
    background: linear-gradient(
        90deg,
        #eadcf2,
        #f8f3fa
    );
}


/* =========================================
   ARROW
   ========================================= */

.polling-statistics-arrow {
    position: absolute;

    right: 22px;
    top: 50%;

    width: 9px;
    height: 9px;

    border-right: 2px solid #642a69;
    border-bottom: 2px solid #642a69;

    transform: translateY(-65%) rotate(45deg);

    transition: transform 0.25s ease;
}


/* Arrow when open */

.polling-statistics-district[open] .polling-statistics-arrow {
    transform: translateY(-35%) rotate(225deg);
}


/* =========================================
   CONTENT
   ========================================= */

.polling-statistics-content {
    width: 100%;

    padding: 18px;

    background: #ffffff;

    border-top: 1px solid #e4d9e7;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================
   TABLE WRAPPER
   ========================================= */

.polling-statistics-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}


.polling-statistics-table-scroll {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;

    box-sizing: border-box;
}


/* =========================================
   TABLE
   ========================================= */

.polling-statistics-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    box-sizing: border-box;
}


/* =========================================
   TABLE CELLS
   ========================================= */

.polling-statistics-table th,
.polling-statistics-table td {
    padding: 11px 8px;

    border: 1px solid #ddd0e3;

    box-sizing: border-box;
}


/* =========================================
   TABLE HEADER
   ========================================= */

.polling-statistics-table thead th {
    background: #642a69;
    color: #ffffff;

    text-align: center;
    vertical-align: middle;

    font-weight: 700;

    white-space: normal;
}


/* =========================================
   POLLING DIVISION COLUMN
   ========================================= */

.polling-statistics-table th.polling-division-column {
    width: 180px;
    min-width: 180px;

    text-align: left;
}


/* Polling Division Cells */

.polling-statistics-table td.polling-division-name {
    width: 180px;
    min-width: 180px;

    text-align: left;

    color: #3f2942;

    font-weight: 500;

    white-space: nowrap;
}


/* =========================================
   POLLING DIVISION LETTER
   ========================================= */

.polling-statistics-table td.polling-division-name strong {
    color: #642a69;
    font-weight: 700;
}


/* =========================================
   NUMBER COLUMNS
   ========================================= */

.polling-statistics-table tbody td:not(.polling-division-name) {
    text-align: right;

    white-space: nowrap;
}


/* =========================================
   ALTERNATE ROWS
   ========================================= */

.polling-statistics-table tbody tr:nth-child(even) {
    background: #fbf8fc;
}


/* =========================================
   HOVER
   ========================================= */

.polling-statistics-table tbody tr:not(.polling-statistics-total):hover {
    background: #f3e8f6;
}


/* =========================================
   YEAR NOTE
   ========================================= */

.polling-statistics-note {
    display: block;

    margin-top: 4px;

    font-size: 9px;
    line-height: 1.25;

    font-weight: 400;

    color: #eee4f0;

    white-space: normal;
}


/* =========================================
   TOTAL
   ========================================= */

.polling-statistics-total td {
    background: #eadcf2 !important;

    color: #642a69;

    font-weight: 700;

    border-top: 2px solid #642a69;
}


.polling-statistics-total td:first-child {
    text-align: left;
}


/* =========================================
   SCROLLBAR
   ========================================= */

.polling-statistics-table-scroll::-webkit-scrollbar {
    height: 8px;
}

.polling-statistics-table-scroll::-webkit-scrollbar-track {
    background: #f3edf5;
    border-radius: 10px;
}

.polling-statistics-table-scroll::-webkit-scrollbar-thumb {
    background: #bda4c3;
    border-radius: 10px;
}

.polling-statistics-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #642a69;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .polling-statistics-section {
        width: 100%;

        padding-left: 10px;
        padding-right: 10px;
    }


    .polling-statistics-heading {
        gap: 10px;
        margin-bottom: 18px;
    }


    .polling-statistics-heading h2 {
        font-size: 22px;
    }


    .polling-statistics-line {
        width: 40px;
    }


    /* District */

    .polling-statistics-district {
        width: 100%;
        max-width: 100%;
    }


    .polling-statistics-district > summary {
        min-height: 52px;

        padding: 10px 45px 10px 14px;
    }


    .polling-statistics-district-no {
        min-width: 32px;
        height: 30px;

        font-size: 13px;
    }


    .polling-statistics-district-name {
        font-size: 17px;
    }


    .polling-statistics-arrow {
        right: 18px;
    }


    /* Content */

    .polling-statistics-content {
        padding: 10px;
    }


    /* Table */

    .polling-statistics-table-scroll {
        overflow-x: auto;
    }


    .polling-statistics-table {
        min-width: 1050px;

        table-layout: auto;

        font-size: 13px;
    }


    .polling-statistics-table th,
    .polling-statistics-table td {
        padding: 9px 10px;
    }


    .polling-statistics-note {
        font-size: 8px;
    }

}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

    .polling-statistics-heading h2 {
        font-size: 19px;
    }


    .polling-statistics-line {
        width: 25px;
    }


    .polling-statistics-district-name {
        font-size: 16px;
    }


    .polling-statistics-content {
        padding: 7px;
    }

}
/* =========================================
   STATISTICS DOWNLOAD BUTTON
   ========================================= */

.statistics-download {
    width: 100%;
    display: flex;
    justify-content: left;
    margin: 20px 1px 25px;
}

.statistics-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 24px;

    background: #642a69;
    color: #ffffff;

    border: 2px solid #642a69;
    border-radius: 6px;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.statistics-download-btn:hover {
    background: #ffffff;
    color: #642a69;

    border-color: #642a69;

    box-shadow: 0 4px 12px rgba(100, 42, 105, 0.18);

    text-decoration: none;

    transform: translateY(-1px);
}

.statistics-download-btn i {
    font-size: 14px;
}


/* =========================================
   TAMIL POLLING STATISTICS
   ========================================= */

.tamil-polling-statistics .polling-statistics-table {
    font-size: 13px;
}

.tamil-polling-statistics .polling-statistics-table th,
.tamil-polling-statistics .polling-statistics-table td {
    padding: 9px 6px;
}

.tamil-polling-statistics .polling-statistics-table thead th {
    font-size: 13px;
    line-height: 1.3;
}

.tamil-polling-statistics .polling-statistics-note {
    font-size: 9px;
    line-height: 1.2;
}

.tamil-polling-statistics .polling-division-column {
    font-size: 13px;
}

.tamil-polling-statistics .polling-division-name {
    font-size: 13px;
}

/* Mobile */
@media (max-width: 768px) {

    .tamil-polling-statistics .polling-statistics-table {
        font-size: 12px;
    }

    .tamil-polling-statistics .polling-statistics-table thead th {
        font-size: 12px;
    }

    .tamil-polling-statistics .polling-statistics-note {
        font-size: 8px;
    }

    .tamil-polling-statistics .polling-division-name {
        font-size: 12px;
    }
}

@media (max-width: 480px) {

    .tamil-polling-statistics .polling-statistics-table {
        font-size: 11px;
    }

    .tamil-polling-statistics .polling-statistics-table thead th {
        font-size: 11px;
    }

    .tamil-polling-statistics .polling-statistics-note {
        font-size: 7px;
    }

    .tamil-polling-statistics .polling-division-name {
        font-size: 11px;
    }
}



    /* =========================================
   ANNUAL REVISION STEPS TABLE
   ========================================= */

.annual-revision-table-wrapper {
    width: 100%;
    margin: 15px 0 30px;
}

.annual-revision-table-scroll {
    width: 100%;
    /* overflow-x: auto; */
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(100, 42, 105, 0.10);
}

.annual-revision-table {
    width: 100%;
    min-width: 700px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid #dfcce8;
    border-radius: 12px;
    overflow: hidden;
}

/* Header */
.annual-revision-table thead th {
    background: #642a69;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    padding: 17px 20px;
    border: none;
    vertical-align: middle;
}

.annual-revision-table thead th:first-child {
    width: 68%;
}

.annual-revision-table thead th:last-child {
    width: 32%;
    text-align: center;
}

/* Body cells */
.annual-revision-table tbody td {
    padding: 15px 20px;
    font-size: 14px;
    line-height: 1.65;
    color: #333333;
    vertical-align: middle;
    border-bottom: 1px solid #e5d8ea;
    text-align: justify;
}

/* Activity column */
.annual-revision-table tbody td:first-child {
    width: 68%;
}

/* Date column */
.annual-revision-table tbody td:last-child {
    width: 32%;
    text-align: justify;
    font-weight: 600;
    color: #642a69;
}

/* Alternating rows */
.annual-revision-table tbody tr:nth-child(odd) {
    background: #f6edfa;
}

.annual-revision-table tbody tr:nth-child(even) {
    background: #ffffff;
}

/* Hover */
.annual-revision-table tbody tr {
    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}

.annual-revision-table tbody tr:hover {
    background: #eadcf7;
}

/* Remove last border */
.annual-revision-table tbody tr:last-child td {
    border-bottom: none;
}

/* First and last corners */
.annual-revision-table thead tr th:first-child {
    border-top-left-radius: 12px;
}

.annual-revision-table thead tr th:last-child {
    border-top-right-radius: 12px;
}

.annual-revision-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.annual-revision-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}


.annual-revision-intro,
.annual-revision-note {
    text-align: justify;
    line-height: 1.8;
}
/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .annual-revision-table-wrapper {
        margin-top: 10px;
    }

    .annual-revision-table {
        min-width: 650px;
    }

    .annual-revision-table thead th {
        font-size: 14px;
        padding: 14px 15px;
    }

    .annual-revision-table tbody td {
        font-size: 13px;
        padding: 13px 15px;
        line-height: 1.55;
    }

    .annual-revision-table thead th:first-child,
    .annual-revision-table tbody td:first-child {
        width: 65%;
    }

    .annual-revision-table thead th:last-child,
    .annual-revision-table tbody td:last-child {
        width: 35%;
    }
}

.sinhala-revision-table {
    font-family: "Noto Sans Sinhala", "Noto Sans", sans-serif;
}

.sinhala-revision-table thead th {
    font-size: 15px;
    line-height: 1.6;
}

.sinhala-revision-table tbody td {
    font-size: 14px;
    line-height: 1.8;
    text-align: justify;
}

.sinhala-revision-table tbody td:last-child {
    text-align: justify;
    font-weight: 600;
    color: #642a69;
}

.tamil-revision-table {
    font-family: "Noto Sans Tamil", "Noto Sans", sans-serif;
}

.tamil-revision-table thead th {
    font-size: 15px;
    line-height: 1.7;
}

.tamil-revision-table tbody td {
    font-size: 14px;
    line-height: 1.8;
    text-align: justify;
}

.tamil-revision-table tbody td:last-child {
    text-align: justify;
    font-weight: 600;
    color: #642a69;
}

/* Tamil paragraphs */
.annual-revision-intro,
.annual-revision-note {
    text-align: justify;
    line-height: 1.8;
    font-size: 13px;
}

/* =========================================
   MEDIA GUIDELINES TABLE
   ========================================= */

.media-guidelines-wrapper {
    width: 100%;
    margin: 20px 0 30px;
}

.media-guidelines-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(100, 42, 105, 0.10);
}

.media-guidelines-table {
    width: 100%;
    min-width: 850px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid #dfcce8;
    border-radius: 12px;
    overflow: hidden;
}

/* Header */
.media-guidelines-table thead th {
    background: #642a69;
    color: #ffffff;
    padding: 15px 12px;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    vertical-align: middle;
    border: none;
}

.media-guidelines-table thead th.mg-number {
    width: 12%;
}

.media-guidelines-table thead th.mg-date {
    width: 12%;
}

.media-guidelines-table thead th.mg-description {
    width: 56%;
}

.media-guidelines-table thead th.mg-download {
    width: 20%;
    text-align: center;
}

/* Body */
.media-guidelines-table tbody td {
    padding: 14px 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #333333;
    vertical-align: middle;
    border-bottom: 1px solid #e5d8ea;
}

.media-guidelines-table tbody td:nth-child(3) {
    text-align: justify;
}

/* Number */
.media-guidelines-table tbody td:first-child {
    font-weight: 600;
    color: #642a69;
    white-space: nowrap;
}

/* Date */
.media-guidelines-table tbody td:nth-child(2) {
    white-space: nowrap;
}

/* Language download cells */
.media-guidelines-table tbody td.mg-lang {
    width: 6.66%;
    text-align: center;
    padding: 10px 5px;
}

.media-guidelines-table tbody td.mg-lang .btnpp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 30px;
    padding: 5px 10px;

    background-color: #642a69;
    color: #ffffff;
    border: 1px solid #642a69;
    border-radius: 6px;

    text-decoration: none;
    font-weight: 600;

    transition: background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.media-guidelines-table tbody td.mg-lang .btnpp:hover {
    background-color: #9A258F;
    border-color: #9A258F;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(100, 42, 105, 0.20);
}

/* Alternating rows */
.media-guidelines-table tbody tr:nth-child(odd) {
    background: #f6edfa;
}

.media-guidelines-table tbody tr:nth-child(even) {
    background: #ffffff;
}

/* Hover */
.media-guidelines-table tbody tr {
    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}

.media-guidelines-table tbody tr:hover {
    background: #eadcf7;
}

/* Remove last border */
.media-guidelines-table tbody tr:last-child td {
    border-bottom: none;
}

/* Rounded corners */
.media-guidelines-table thead th:first-child {
    border-top-left-radius: 12px;
}

.media-guidelines-table thead th:last-child {
    border-top-right-radius: 12px;
}

.media-guidelines-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.media-guidelines-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .media-guidelines-wrapper {
        margin-top: 15px;
    }

    .media-guidelines-table {
        min-width: 820px;
    }

    .media-guidelines-table thead th {
        font-size: 14px;
        padding: 13px 10px;
    }

    .media-guidelines-table tbody td {
        font-size: 13px;
        padding: 12px 10px;
        line-height: 1.55;
    }

    .media-guidelines-table tbody td.mg-lang {
        padding: 8px 4px;
    }

    .media-guidelines-table tbody td.mg-lang .btnpp {
        min-width: 30px;
        min-height: 28px;
        padding: 4px 7px;
    }
}


.media-guidelines-table {
    font-family: "Noto Sans Sinhala", "Noto Sans", "Segoe UI", sans-serif;
}

.media-guidelines-table thead th {
    line-height: 1.6;
}

.media-guidelines-table tbody td {
    line-height: 1.8;
}

.media-guidelines-table tbody td.mg-description {
    text-align: justify;
}

.media-guidelines-table tbody td.mg-number {
    font-weight: 600;
    color: #642a69;
    white-space: nowrap;
}

.media-guidelines-table tbody td.mg-date {
    white-space: nowrap;
    text-align: center;
}

.media-guidelines-table tbody td.mg-lang {
    text-align: center;
}

```css
.media-guidelines-table {
    font-family: "Noto Sans Tamil", "Noto Sans", "Segoe UI", sans-serif;
}

.media-guidelines-table tbody td.mg-description {
    text-align: justify;
    line-height: 1.8;
}

.media-guidelines-table tbody td.mg-number {
    font-weight: 600;
    color: #642a69;
    white-space: nowrap;
}

.media-guidelines-table tbody td.mg-date {
    white-space: nowrap;
    text-align: center;
}

.media-guidelines-table tbody td.mg-lang {
    text-align: center;
    vertical-align: middle;
}


/* =========================================================
   Annual Reports Table
   Same Design as Media Guidelines
   ========================================================= */

.annual-reports-table {
    width: 100%;
    min-width: 700px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid #dfcce8;
    border-radius: 12px;
    overflow: hidden;
}


/* ---------------------------------------------------------
   Column Widths
   --------------------------------------------------------- */

.annual-reports-table .col-description {
    width: 80%;
}

.annual-reports-table .col-lang {
    width: 6.666%;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.annual-reports-table thead th {
    background: #642a69;
    color: #ffffff;

    padding: 15px 12px;

    font-size: 15px;
    font-weight: 700;

    text-align: left;
    vertical-align: middle;

    border: none;
}

.annual-reports-table thead th.mg-download {
    text-align: center;
}


/* ---------------------------------------------------------
   Body Cells
   --------------------------------------------------------- */

.annual-reports-table tbody td {
    padding: 14px 12px;

    font-size: 14px;
    line-height: 1.6;

    color: #333333;

    vertical-align: middle;

    border-bottom: 1px solid #e5d8ea;
}


/* Description */

.annual-reports-table tbody td.mg-description {
    text-align: left;
    line-height: 1.7;
}


/* Download cells */

.annual-reports-table tbody td.mg-lang {
    padding: 10px 4px;

    text-align: center;
    vertical-align: middle;
}


/* ---------------------------------------------------------
   Active Download Buttons
   --------------------------------------------------------- */

.annual-reports-table tbody td.mg-lang .btnpp {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 30px;

    padding: 0;

    background-color: #642a69;
    color: #ffffff;

    border: 1px solid #642a69;
    border-radius: 6px;

    text-decoration: none;
    font-weight: 600;

    box-sizing: border-box;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* Active Hover */

.annual-reports-table tbody td.mg-lang .btnpp:hover {
    background-color: #9A258F;
    border-color: #9A258F;
    color: #ffffff;

    box-shadow: 0 3px 8px rgba(100, 42, 105, 0.20);
}


/* ---------------------------------------------------------
   Disabled Buttons
   --------------------------------------------------------- */

.annual-reports-table tbody td.mg-lang .btnpp:disabled,
.annual-reports-table tbody td.mg-lang .btnpp.disabled {

    width: 34px;
    height: 30px;

    padding: 0;

    background-color: transparent !important;

    color: #642a69 !important;

    border: 1px solid #642a69;
    border-radius: 6px;

    opacity: 0.45;

    cursor: not-allowed;

    box-sizing: border-box;

    box-shadow: none !important;

    pointer-events: none;
}


/* Disabled Hover */

.annual-reports-table tbody td.mg-lang .btnpp:disabled:hover,
.annual-reports-table tbody td.mg-lang .btnpp.disabled:hover {

    background-color: transparent !important;
    color: #642a69 !important;
    border-color: #642a69 !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   Alternating Row Background
   --------------------------------------------------------- */

.annual-reports-table tbody tr:nth-child(odd) {
    background: #f6edfa;
}

.annual-reports-table tbody tr:nth-child(even) {
    background: #ffffff;
}


/* ---------------------------------------------------------
   Row Hover
   --------------------------------------------------------- */

.annual-reports-table tbody tr {
    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}

.annual-reports-table tbody tr:hover {
    background: #eadcf7;
}


/* ---------------------------------------------------------
   Last Row
   --------------------------------------------------------- */

.annual-reports-table tbody tr:last-child td {
    border-bottom: none;
}


/* ---------------------------------------------------------
   Rounded Corners
   --------------------------------------------------------- */

.annual-reports-table thead th:first-child {
    border-top-left-radius: 12px;
}

.annual-reports-table thead th:last-child {
    border-top-right-radius: 12px;
}

.annual-reports-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.annual-reports-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .annual-reports-table {
        min-width: 700px;
    }

    .annual-reports-table thead th {
        font-size: 14px;
        padding: 13px 10px;
    }

    .annual-reports-table tbody td {
        font-size: 13px;
        padding: 12px 10px;
        line-height: 1.55;
    }

    .annual-reports-table tbody td.mg-lang {
        padding: 8px 4px;
    }

    .annual-reports-table tbody td.mg-lang .btnpp,
    .annual-reports-table tbody td.mg-lang .btnpp:disabled,
    .annual-reports-table tbody td.mg-lang .btnpp.disabled {
        width: 30px;
        height: 28px;
    }
}


/* ---------------------------------------------------------
   Sinhala / Tamil Support
   --------------------------------------------------------- */

.annual-reports-table {
    font-family:
        "Segoe UI",
        "Noto Sans Sinhala",
        "Noto Sans Tamil",
        sans-serif;
}

   .edr-app-wrapper {
    text-align: left
    margin: 10px 0 20px;
}

.edr-app-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    padding: 11px 24px;
    background: #ffffff;
    color: #642a69;
    border: 2px solid #642a69;
    border-radius: 8px;
    text-decoration: none !important;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(100, 42, 105, 0.20);
    transition: all 0.25s ease;
}

.edr-app-button:hover {
    background: #642a69;
    color: #ffffff !important;
    border-color: #642a69;
    text-decoration: none !important;
    box-shadow: 0 6px 14px rgba(100, 42, 105, 0.25);
    transform: translateY(-2px);
}

.edr-app-button:hover .edr-app-text {
    color: #ffffff;
}

.edr-app-button:hover .edr-logo {
    transform: none;
    opacity: 1;
}


.edr-blink {
    animation: edrBlink 1.2s ease-in-out infinite;
}

@keyframes edrBlink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

@media (max-width: 767px) {
    .edr-app-button {
        min-width: 170px;
        padding: 10px 18px;
        font-size: 14px;
    }
}

    /* =========================================================
   COUNTING OF VOTES - PROFESSIONAL CONTENT
   ========================================================= */

.counting-votes-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    font-family: "Segoe UI", "Noto Sans", sans-serif;
    color: #333333;
    line-height: 1.75;
}

/* ---------- Tabs ---------- */

.counting-votes-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid #642a69;
}

.counting-votes-tabs .tablinks {
    border: 1px solid #d8c4df;
    border-bottom: none;
    background: #f6edfa;
    color: #642a69;
    padding: 14px 18px;
    min-height: 58px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.counting-votes-tabs .tablinks:hover {
    background: #eadcf7;
    border-color: #9A258F;
    color: #642a69;
}

.counting-votes-tabs .tablinks.active {
    background: #642a69;
    color: #ffffff;
    border-color: #642a69;
    box-shadow: 0 -2px 8px rgba(100, 42, 105, 0.12);
}

/* ---------- Tab Content ---------- */

.counting-votes-content {
    background: #ffffff;
}

.counting-votes-content .tabcontent {
    display: none;
    width: 100%;
    margin: 0;
    padding: 10px 24px 30px;
    animation: countingFade 0.25s ease;
    box-sizing: border-box;
}


@keyframes countingFade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* ---------- Paragraphs ---------- */

.counting-votes-content .counting-intro p,
.counting-votes-content .counting-text p {
    margin: 0 0 18px;
    text-align: justify;
    font-size: 15px;
    line-height: 1.8;
}

.counting-votes-content .counting-text p.indented {
    padding-left: 28px;
}

.counting-votes-content .counting-text p.sub-indented {
    padding-left: 52px;
}

/* ---------- Section Headings ---------- */

.counting-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 18px;
}

.counting-section-heading::before {
    content: "";
    width: 5px;
    min-width: 5px;
    height: 30px;
    background: #642a69;
    border-radius: 4px;
}

.counting-section-heading span {
    color: #642a69;
    font-size: 18px;
    font-weight: 700;
}

.counting-subheading {
    margin: 22px 0 12px;
    color: #642a69;
    font-size: 16px;
    font-weight: 700;
}

/* ---------- Stage Table ---------- */

.counting-stage-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 10px 0 28px;
    border-radius: 10px;
    border: 1px solid #dfcce8;
}

.counting-stage-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    background: #ffffff;
}

.counting-stage-table th {
    background: #642a69;
    color: #ffffff;
    padding: 13px 16px;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
}

.counting-stage-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e5d8ea;
    vertical-align: top;
    font-size: 14px;
}

.counting-stage-table tbody tr:nth-child(odd) {
    background: #f6edfa;
}

.counting-stage-table tbody tr:nth-child(even) {
    background: #ffffff;
}

.counting-stage-table tbody tr:hover {
    background: #eadcf7;
}

.counting-stage-table td.stage-number {
    width: 100px;
    color: #642a69;
    font-weight: 700;
    white-space: nowrap;
}

.counting-stage-table td.stage-dash {
    width: 40px;
    text-align: center;
    color: #9A258F;
    font-weight: 700;
}

/* ---------- Highlight Text ---------- */

.counting-highlight {
    color: #642a69;
    font-weight: 700;
}

.counting-votes-content strong {
    color: #642a69;
}

/* ---------- Preference Lists ---------- */

.counting-list {
    margin: 8px 0 20px 28px;
    padding-left: 22px;
}

.counting-list li {
    padding: 4px 0;
    font-size: 15px;
    line-height: 1.7;
}

.counting-list li::marker {
    color: #642a69;
    font-weight: 700;
}

/* ---------- Declaration ---------- */

.counting-result-box {
    background: #f6edfa;
    border-left: 5px solid #642a69;
    border-radius: 8px;
    padding: 20px 22px;
    margin-top: 10px;
}

.counting-result-box p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {

    .counting-votes-tabs {
        grid-template-columns: 1fr;
        gap: 5px;
        border-bottom: none;
    }

    .counting-votes-tabs .tablinks {
        border: 1px solid #d8c4df;
        border-radius: 7px;
        min-height: auto;
        padding: 12px 14px;
        font-size: 13px;
    }

    .counting-votes-tabs .tablinks.active {
        border-color: #642a69;
    }

  

    .counting-votes-content .tabcontent {
        width: 100%;
        margin: 0;
        padding: 8px 15px 25px;
    }



    .counting-votes-content .counting-intro p,
    .counting-votes-content .counting-text p {
        font-size: 14px;
        line-height: 1.75;
    }

    .counting-votes-content .counting-text p.indented {
        padding-left: 15px;
    }

    .counting-votes-content .counting-text p.sub-indented {
        padding-left: 25px;
    }

    .counting-section-heading span {
        font-size: 16px;
    }

    .counting-list {
        margin-left: 12px;
        padding-left: 20px;
    }

    .counting-list li {
        font-size: 14px;
    }

    .counting-result-box {
        padding: 16px;
    }
}

/* =========================================================
   LOCAL AUTHORITIES ELECTIONS
   Scoped CSS
   ========================================================= */

.local-authorities-elections-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    /* padding: 10px 20px 40px; */
    box-sizing: border-box;

    font-family: "Segoe UI", "Noto Sans Sinhala", "Noto Sans Tamil", Arial, sans-serif;
    color: #444;
    line-height: 1.7;
}


/* =========================================================
   SECTION
   ========================================================= */

.local-authorities-elections-content .lae-section {
    width: 100%;
    margin: 0 0 30px;
    padding: 0 0 25px;
    border-bottom: 1px solid #e7dce9;
}

.local-authorities-elections-content .lae-section:last-child {
    border-bottom: none;
}


/* =========================================================
   HEADING
   ========================================================= */

.local-authorities-elections-content .lae-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 20px;
}

.local-authorities-elections-content .lae-heading h4 {
    flex: 0 1 auto;
    margin: 0;
    padding: 0;

    color: #642a69;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.local-authorities-elections-content .lae-heading-line {
    flex: 1;
    height: 2px;
    min-width: 25px;
    background: linear-gradient(
        90deg,
        #b474d4,
        #b2a9af
    );
}


/* =========================================================
   TEXT
   ========================================================= */

.local-authorities-elections-content p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.8;
}

.local-authorities-elections-content h5 {
    margin: 18px 0 12px;
    color: #642a69;
    font-size: 16px;
    font-weight: 700;
}


/* =========================================================
   LINKS
   ========================================================= */

/* .local-authorities-elections-content a {
    color: #642a69;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
} */

.local-authorities-elections-content a:hover {
    color: #d10687;
    text-decoration: underline;
}


/* =========================================================
   ACT LIST
   ========================================================= */

.local-authorities-elections-content .lae-act-list {
    display: grid;
    gap: 10px;
}

.local-authorities-elections-content .lae-act-list p {
    margin: 0;
    padding: 12px 16px;

    background: #faf7fc;
    border: 1px solid #e6d8e9;
    border-left: 3px solid #642a69;
    border-radius: 7px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.local-authorities-elections-content .lae-act-list p:hover {
    background: #f4eaf7;
    border-color: #caa9d0;
    box-shadow: 0 4px 12px rgba(100, 42, 105, 0.08);
}


/* =========================================================
   PERCENTAGE CARDS
   ========================================================= */

.local-authorities-elections-content .lae-percentage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 700px;
    margin: 22px auto 5px;
}

.local-authorities-elections-content .lae-percentage-card {
    min-height: 120px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #f5eafa,
        #ffffff
    );

    border: 1px solid #dfcde4;
    border-top: 3px solid #642a69;
    border-radius: 10px;

    text-align: center;
    box-shadow: 0 4px 14px rgba(100, 42, 105, 0.08);
}

.local-authorities-elections-content .lae-percent {
    color: #642a69;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
}


/* =========================================================
   CATEGORY GRID
   ========================================================= */

.local-authorities-elections-content .lae-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 18px 0;
}

.local-authorities-elections-content .lae-category-grid div {
    padding: 13px 16px;

    background: #faf7fc;
    border-left: 3px solid #9A258F;
    border-radius: 6px;

    color: #555;
    font-weight: 600;
}


/* =========================================================
   TABLE SCROLL
   ========================================================= */

.local-authorities-elections-content .lae-table-scroll {
    width: 100%;
    margin: 18px 0 22px;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    border: 1px solid #dfd2e2;
    border-radius: 8px;

    background: #fff;
}


/* =========================================================
   TABLE
   ========================================================= */

.local-authorities-elections-content .lae-table {
    width: 100%;
    min-width: 650px;

    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;

    font-size: 14px;
}

.local-authorities-elections-content .lae-table th {
    padding: 12px 10px;

    background: #642a69;
    color: #fff;

    border: 1px solid #805186;

    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    vertical-align: middle;
}

.local-authorities-elections-content .lae-table td {
    padding: 10px;

    background: #fff;
    color: #444;

    border: 1px solid #e5dce7;

    line-height: 1.6;
    vertical-align: middle;
}

.local-authorities-elections-content .lae-table tbody tr:nth-child(even) td {
    background: #fbf8fc;
}

.local-authorities-elections-content .lae-table tbody tr:hover td {
    background: #f3eafa;
}

.local-authorities-elections-content .lae-table .lae-total td {
    background: #eee1f1 !important;
    color: #642a69;
}


/* =========================================================
   SMALL TABLE
   ========================================================= */

.local-authorities-elections-content .lae-small-table {
    min-width: 600px;
}

.local-authorities-elections-content .lae-small-table td:nth-child(2) {
    width: 60px;
    text-align: center;
}


/* =========================================================
   DISQUALIFICATION TABLE
   ========================================================= */

.local-authorities-elections-content .lae-disqualification-table {
    min-width: 760px;
}

.local-authorities-elections-content .lae-disqualification-table td:first-child {
    width: 60px;
    min-width: 60px;
    text-align: center;
    font-weight: 700;
    color: #642a69;
}


/* =========================================================
   RESULTS TABLE
   ========================================================= */

.local-authorities-elections-content .lae-results-table {
    min-width: 1000px;
}

.local-authorities-elections-content .lae-results-table th,
.local-authorities-elections-content .lae-results-table td {
    text-align: center;
}

.local-authorities-elections-content .lae-results-table td:first-child {
    white-space: nowrap;
    font-weight: 600;
}


/* =========================================================
   EXAMPLE / CALCULATION
   ========================================================= */

.local-authorities-elections-content .lae-example-title {
    margin: 18px 0 10px;
    color: #642a69;
    font-size: 17px;
    font-weight: 700;
}

.local-authorities-elections-content .lae-calculation-box {
    margin: 15px 0;
    padding: 16px 20px;

    background: #faf7fc;
    border-left: 4px solid #9A258F;
    border-radius: 7px;
}

.local-authorities-elections-content .lae-calculation-box p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   INFORMATION CARDS
   ========================================================= */

.local-authorities-elections-content .lae-info-card {
    margin: 15px 0;
    padding: 17px 20px;

    background: #faf7fc;
    border: 1px solid #e5d9e8;
    border-left: 4px solid #642a69;
    border-radius: 8px;
}

.local-authorities-elections-content .lae-info-card h5 {
    margin-top: 0;
}


/* =========================================================
   HIGHLIGHT
   ========================================================= */

.local-authorities-elections-content .lae-highlight {
    margin: 18px 0;
    padding: 17px 20px;

    background: linear-gradient(
        90deg,
        #f3e8f7,
        #faf7fc
    );

    border: 1px solid #dfcde4;
    border-left: 4px solid #642a69;
    border-radius: 8px;

    color: #642a69;
    font-size: 16px;
    font-weight: 600;
}


/* =========================================================
   REJECTION LIST
   ========================================================= */

.local-authorities-elections-content .lae-rejection-list {
    display: grid;
    gap: 10px;
}

.local-authorities-elections-content .lae-rejection-list p {
    margin: 0;
    padding: 12px 16px;

    background: #faf8fb;
    border: 1px solid #e8dce9;
    border-left: 3px solid #9A258F;
    border-radius: 6px;
}


/* =========================================================
   FOUR POINTS
   ========================================================= */

.local-authorities-elections-content .lae-four-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    margin: 18px 0 22px;
}

.local-authorities-elections-content .lae-four-points div {
    padding: 12px 15px;

    background: #faf7fc;
    border: 1px solid #e4d7e7;
    border-left: 3px solid #642a69;
    border-radius: 6px;

    font-weight: 600;
}


/* =========================================================
   SUB SECTIONS
   ========================================================= */

.local-authorities-elections-content .lae-sub-section {
    padding: 20px 0 25px;
}

.local-authorities-elections-content .lae-sub-section h5 {
    padding: 10px 14px;

    background: #f5edf8;
    border-left: 4px solid #642a69;
    border-radius: 5px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .local-authorities-elections-content {
        padding: 8px 12px 30px;
    }

    .local-authorities-elections-content .lae-heading {
        gap: 8px;
    }

    .local-authorities-elections-content .lae-heading h4 {
        font-size: 15px;
        line-height: 1.55;
    }

    .local-authorities-elections-content .lae-heading-line {
        min-width: 15px;
    }

    .local-authorities-elections-content p {
        font-size: 14px;
        line-height: 1.75;
    }

    .local-authorities-elections-content .lae-percentage-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .local-authorities-elections-content .lae-percentage-card {
        min-height: 95px;
    }

    .local-authorities-elections-content .lae-percent {
        font-size: 29px;
    }

    .local-authorities-elections-content .lae-category-grid {
        grid-template-columns: 1fr;
    }

    .local-authorities-elections-content .lae-four-points {
        grid-template-columns: 1fr;
    }

    .local-authorities-elections-content .lae-table {
        font-size: 13px;
    }

    .local-authorities-elections-content .lae-table th,
    .local-authorities-elections-content .lae-table td {
        padding: 9px 8px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .local-authorities-elections-content {
        padding-left: 8px;
        padding-right: 8px;
    }

    .local-authorities-elections-content .lae-heading h4 {
        font-size: 14px;
    }

    .local-authorities-elections-content p {
        font-size: 13.5px;
    }

    .local-authorities-elections-content .lae-table {
        min-width: 620px;
    }

    .local-authorities-elections-content .lae-results-table {
        min-width: 1000px;
    }

    .local-authorities-elections-content .lae-disqualification-table {
        min-width: 760px;
    }
}

  .vacancy-listing-content .vacancy-download-btn.disabled {
    background: #eeeeee;
    border: 1px solid #cfcfcf;
    color: #999999;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    text-decoration: none;
}

.vacancy-listing-content .vacancy-download-btn.disabled:hover {
    background: #eeeeee;
    border-color: #cfcfcf;
    color: #999999;
    box-shadow: none;
}
 /* =========================================================
   VACANCY LISTING - ALTERNATIVE LAYOUT
   ========================================================= */

.vacancy-listing-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 20px 45px;
    box-sizing: border-box;

    font-family: "Segoe UI",
                 "Noto Sans Sinhala",
                 "Noto Sans Tamil",
                 Arial, sans-serif;

    color: #444;
}


/* Heading */
.vacancy-listing-content .vacancy-listing-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 30px;
}

.vacancy-listing-content .vacancy-listing-heading span {
    flex: 1;
    height: 2px;
    background: linear-gradient(
        90deg,
        #b474d4,
        #b2a9af
    );
}

.vacancy-listing-content .vacancy-listing-heading h2 {
    margin: 0;
    color: #642a69;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}


/* Listing */
.vacancy-listing-content .vacancy-listing {
    width: 100%;
}


/* Vacancy item */
.vacancy-listing-content .vacancy-listing-item {
    display: grid;
    grid-template-columns: 125px 1fr 145px;
    align-items: center;

    width: 100%;
    min-height: 105px;

    margin-bottom: 16px;

    background: #ffffff;
    border: 1px solid #e3d8e6;
    border-left: 4px solid #642a69;
    border-radius: 8px;

    overflow: hidden;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.vacancy-listing-content .vacancy-listing-item:hover {
    background: #fcf9fd;
    border-color: #cdb6d2;
    box-shadow: 0 5px 14px rgba(100, 42, 105, 0.10);
    transform: translateY(-2px);
}


/* Date */
.vacancy-listing-content .vacancy-date {
    align-self: stretch;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #f7f1f9;
    border-right: 1px solid #e7dce9;
}

.vacancy-listing-content .vacancy-date strong {
    color: #642a69;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.vacancy-listing-content .vacancy-date span {
    margin-top: 2px;
    color: #777;
    font-size: 14px;
    font-weight: 600;
}


/* Description */
.vacancy-listing-content .vacancy-description {
    padding: 18px 24px;
}

.vacancy-listing-content .vacancy-description h3 {
    margin: 0 0 8px;

    color: #642a69;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}

.vacancy-listing-content .vacancy-description p {
    margin: 0;

    color: #777;
    font-size: 13px;
    line-height: 1.6;
}

.vacancy-listing-content .vacancy-description p strong {
    color: #642a69;
    font-weight: 600;
}


/* Download */
.vacancy-listing-content .vacancy-download {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 18px;
}

.vacancy-listing-content .vacancy-download a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 110px;
    padding: 9px 18px;

    border: 1px solid #642a69;
    border-radius: 5px;

    background: #642a69;
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
    text-decoration: none;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.vacancy-listing-content .vacancy-download a:hover {
    background: #9A258F;
    border-color: #9A258F;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(100, 42, 105, 0.18);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .vacancy-listing-content {
        padding: 10px 12px 30px;
    }

    .vacancy-listing-content .vacancy-listing-heading {
        gap: 8px;
        margin-bottom: 22px;
    }

    .vacancy-listing-content .vacancy-listing-heading h2 {
        font-size: 20px;
    }


    .vacancy-listing-content .vacancy-listing-item {
        grid-template-columns: 75px 1fr;
        min-height: auto;
    }


    .vacancy-listing-content .vacancy-date {
        min-height: 125px;
    }


    .vacancy-listing-content .vacancy-description {
        padding: 15px;
    }

    .vacancy-listing-content .vacancy-description h3 {
        font-size: 15px;
        line-height: 1.6;
    }

    .vacancy-listing-content .vacancy-description p {
        font-size: 13px;
    }


    .vacancy-listing-content .vacancy-download {
        grid-column: 1 / -1;

        padding: 12px 15px;

        border-top: 1px solid #e8dfea;
        background: #fcfafc;
    }

    .vacancy-listing-content .vacancy-download a {
        width: 100%;
    }
}

/* =========================================================
   NO VACANCIES - EMPTY STATE
   ========================================================= */

.vacancy-listing-content .vacancy-empty-state {
    width: 100%;
    max-width: 700px;
    margin: 30px auto 20px;
    padding: 42px 25px;

    box-sizing: border-box;
    text-align: center;

    background: #fbf8fc;
    border: 1px solid #e4d9e7;
    border-top: 3px solid #642a69;
    border-radius: 10px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.vacancy-listing-content .vacancy-empty-state:hover {
    background: #f8f2fa;
    border-color: #d5c2d9;
    box-shadow: 0 5px 15px rgba(100, 42, 105, 0.08);
}


/* Icon */
.vacancy-listing-content .vacancy-empty-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #9A258F;
    border-radius: 50%;

    color: #9A258F;
    font-size: 25px;
    font-weight: 700;
}

.vacancy-listing-content .vacancy-empty-state h3 {
    margin: 0 0 8px;

    color: #642a69;
    font-size: 20px;
    font-weight: 700;
}

.vacancy-listing-content .vacancy-empty-state p {
    margin: 0;

    color: #777;
    font-size: 14px;
    line-height: 1.7;
}


/* Mobile */
@media (max-width: 768px) {

    .vacancy-listing-content .vacancy-empty-state {
        margin: 20px auto;
        padding: 32px 18px;
    }

    .vacancy-listing-content .vacancy-empty-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }

    .vacancy-listing-content .vacancy-empty-state h3 {
        font-size: 17px;
    }

    .vacancy-listing-content .vacancy-empty-state p {
        font-size: 13px;
    }
}


/* =========================================================
   EMPTY PROCUREMENT STATE
   ========================================================= */

.procurement-listing-content .procurement-empty-state {
    width: 100%;
    max-width: 700px;

    margin: 30px auto 20px;
    padding: 42px 25px;

    box-sizing: border-box;
    text-align: center;

    background: #fbf8fc;
    border: 1px solid #e4d9e7;
    border-top: 3px solid #642a69;
    border-radius: 10px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.procurement-listing-content .procurement-empty-state:hover {
    background: #f8f2fa;
    border-color: #d5c2d9;
    box-shadow: 0 5px 15px rgba(100, 42, 105, 0.08);
}


/* Icon */

.procurement-listing-content .procurement-empty-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #9A258F;
    border-radius: 50%;

    color: #9A258F;
    font-size: 25px;
    font-weight: 700;
}


/* Heading */

.procurement-listing-content .procurement-empty-state h3 {
    margin: 0 0 8px;

    color: #642a69;
    font-size: 20px;
    font-weight: 700;
}


/* Text */

.procurement-listing-content .procurement-empty-state p {
    margin: 0;

    color: #777;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .procurement-listing-content .procurement-empty-state {
        margin: 20px auto;
        padding: 32px 18px;
    }

    .procurement-listing-content .procurement-empty-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }

    .procurement-listing-content .procurement-empty-state h3 {
        font-size: 17px;
    }

    .procurement-listing-content .procurement-empty-state p {
        font-size: 13px;
    }

}
/* ==========================================
   PUBLICATIONS - MODERN CARD DESIGN
   ========================================== */

.ec-publications {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 25px 15px 40px;
    box-sizing: border-box;
    font-family: "Segoe UI", "Noto Sans Sinhala",
                 "Noto Sans Tamil", sans-serif;
    color: #30243a;
}

/* Heading */

.ec-pub-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 12px;
}

.ec-pub-heading h2 {
    margin: 0;
    color: #642a69;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
}

.ec-pub-heading-line {
    width: 55px;
    height: 2px;
    background: #9A258F;
    border-radius: 5px;
}

.ec-pub-intro {
    max-width: 700px;
    margin: 0 auto 28px;
    text-align: center;
    color: #706779;
    font-size: 15px;
    line-height: 1.8;
}

/* Search */

.ec-pub-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 25px;
}

.ec-pub-search {
    position: relative;
    width: 100%;
    max-width: 350px;
}

.ec-pub-search input {
    width: 100%;
    height: 44px;
    padding: 10px 42px 10px 15px;
    border: 1px solid #ded3e7;
    border-radius: 9px;
    background: #fff;
    color: #30243a;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.ec-pub-search input:focus {
    border-color: #9A258F;
    box-shadow: 0 0 0 3px rgba(154, 37, 143, 0.10);
}

.ec-pub-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #642a69;
    font-size: 19px;
    pointer-events: none;
}

/* Cards Grid */

.ec-pub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

/* Individual Card */

.ec-pub-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px;
    background: #fff;
    border: 1px solid #e5dced;
    border-top: 3px solid #642a69;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(54, 27, 65, 0.045);
    box-sizing: border-box;
    transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease;
}

.ec-pub-card:hover {
    transform: translateY(-4px);
    border-color: #cdb3d8;
    box-shadow: 0 9px 24px rgba(54, 27, 65, 0.10);
}

/* Card Header */

.ec-pub-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.ec-pub-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #f1e8f7;
    color: #642a69;
    font-size: 25px;
}

.ec-pub-tag {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 20px;
    background: #f5edf8;
    color: #642a69;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

/* Card Title */

.ec-pub-card h3 {
    margin: 0 0 20px;
    color: #35233e;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

/* Card Footer */

.ec-pub-card-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #f0eaf3;
}

.ec-pub-file-type {
    color: #82768b;
    font-size: 12px;
}

.ec-pub-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid #642a69;
    border-radius: 7px;
    background: #642a69;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: background-color 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.ec-pub-download span {
    font-size: 19px;
    line-height: 1;
}

.ec-pub-download:hover,
.ec-pub-download:focus {
    background: #4d1e53;
    border-color: #4d1e53;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(100, 42, 105, 0.18);
}

/* Empty Search Result */

.ec-pub-no-results {
    margin: 25px 0;
    padding: 25px;
    border: 1px dashed #d8c7e1;
    border-radius: 9px;
    color: #706779;
    text-align: center;
}

.ec-pub-no-results[hidden] {
    display: none !important;
}

/* Tablet */

@media (max-width: 991px) {
    .ec-pub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .ec-pub-card {
        padding: 18px;
    }
}

/* Mobile */

@media (max-width: 575px) {
    .ec-publications {
        padding: 20px 12px 30px;
    }

    .ec-pub-heading {
        gap: 10px;
    }

    .ec-pub-heading h2 {
        font-size: 23px;
    }

    .ec-pub-heading-line {
        width: 28px;
    }

    .ec-pub-intro {
        font-size: 14px;
        margin-bottom: 22px;
    }

    .ec-pub-toolbar {
        margin-bottom: 18px;
    }

    .ec-pub-search {
        max-width: none;
    }

    .ec-pub-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
    }

    .ec-pub-card {
        padding: 18px;
    }

    .ec-pub-card h3 {
        font-size: 15px;
        line-height: 1.7;
    }
}

/* ========================================
   ACTS TABLE - STYLING
   ======================================== */

.acts-table {
    width: 100%;
    min-width: 700px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid #dfcce8;
    border-radius: 12px;
    overflow: hidden;
}

/* Table Header */
.acts-table thead th {
    background: #642a69;
    color: #ffffff;

    padding: 15px 12px;

    font-size: 15px;
    font-weight: 700;

    text-align: left;
    vertical-align: middle;

    border: none;
    
}

/* Table Body */
.acts-table tbody td {
    padding: 12px;
    vertical-align: middle;
    border: 1px solid #e5e0e8;
    line-height: 1.6;
}

/* Alternate Row Colors */
.acts-table tbody tr:nth-child(even) {
    background-color: #faf7fc;
}

.acts-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Row Hover */
.acts-table tbody tr:hover {
    background-color: #f1e8f5;
    transition: background-color 0.2s ease;
}

/* Number Column */
.acts-table th:first-child,
.acts-table td:first-child {
    width: 65px;
    text-align: center;
}

/* Date Column */
.acts-table th:nth-child(2),
.acts-table td:nth-child(2) {
    width: 120px;
    white-space: nowrap;
}

/* Description Column */
.acts-table td:nth-child(3) {
    min-width: 250px;
}

/* Download Columns */
.acts-table th:nth-child(n+4),
.acts-table td:nth-child(n+4) {
    text-align: center;
    width: 85px;
}

/* Download Links */
.acts-table tbody td a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #642a69;
    border-radius: 5px;
    color: #642a69;
    background: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.acts-table tbody td a:hover {
    background: #642a69;
    color: #ffffff;
    border-color: #642a69;
}

/* Disabled Language Buttons */
.acts-table tbody td button:disabled {
    padding: 6px 12px;
    border: 1px solid #d8d2dc;
    border-radius: 5px;
    color: #aaa3b0;
    background: #f5f3f6;
    cursor: not-allowed;
    font-size: 12px;
}

/* Responsive Table */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .acts-table {
        font-size: 13px;
        min-width: 700px;
    }

    .acts-table thead th {
        padding: 10px 8px;
    }

    .acts-table tbody td {
        padding: 9px 8px;
    }

    .acts-table tbody td a,
    .acts-table tbody td button:disabled {
        padding: 5px 8px;
        font-size: 11px;
    }
}

/* ========================================
   ACTS PAGE - SEARCH
======================================== */

.acts-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 25px;
}

.acts-search {
    position: relative;
    width: 100%;
    max-width: 350px;
}

.acts-search input {
    width: 100%;
    height: 44px;
    padding: 10px 42px 10px 15px;
    border: 1px solid #ded3e7;
    border-radius: 9px;
    background: #fff;
    color: #30243a;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.acts-search input:focus {
    border-color: #9A258F;
    box-shadow: 0 0 0 3px rgba(154, 37, 143, 0.10);
}

.acts-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #642a69;
    font-size: 19px;
    pointer-events: none;
} 

      
/* =====================================
   LOCAL AUTHORITIES
   ===================================== */

.ec-local-authorities {
    width: 100%;
    box-sizing: border-box;
}

.ec-la-intro {
    list-style: none;
    padding: 0;
    margin: 15px 0 22px;
}

.ec-la-intro li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.ec-la-star {
    flex: 0 0 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #642a69;
    color: #ffffff;
    font-size: 18px;
}

.ec-la-intro h4 {
    margin: 3px 0 0;
    font-size: 16px;
    line-height: 1.7;
}

.ec-la-intro h4 a {
    color: #642a69;
    text-decoration: none;
}

.ec-la-intro h4 a:hover {
    color: #92098b;
    text-decoration: underline;
}

.ec-la-main-download {
    margin: 15px 0 22px;
}

.ec-la-main-download table {
    width: 100%;
    max-width: 650px;
    border-collapse: collapse;
}

.ec-la-main-download td {
    padding: 12px 15px;
    border: 1px solid #e5dce9;
    background: #faf7fb;
}

.ec-la-main-download td:first-child {
    width: 65%;
}

.ec-la-main-download td:last-child {
    text-align: center;
}

.ec-la-search {
    margin: 20px 0 14px;
}

.ec-la-search input {
    display: block;
    width: 100%;
    min-height: 45px;
    padding: 11px 15px;
    box-sizing: border-box;
    border: 1px solid #d8c9df;
    border-radius: 6px;
    background: #ffffff;
    font-size: 15px;
    outline: none;
}

.ec-la-search input:focus {
    border-color: #642a69;
    box-shadow: 0 0 0 3px rgba(100, 42, 105, 0.10);
}

.ec-la-accordion .panel {
    border: 1px solid #e5dce9;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(47, 22, 55, 0.05);
}

.ec-la-accordion .panel-heading {
    padding: 0;
    background: #f7f1fa;
}

.ec-la-accordion .panel-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.ec-la-accordion .panel-title a {
    display: block;
    position: relative;
    padding: 16px 45px 16px 18px;
    color: #642a69;
    text-decoration: none;
    line-height: 1.5;
}

.ec-la-accordion .panel-title a::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
}

.ec-la-accordion .panel-title a[aria-expanded="true"]::after {
    content: "−";
}

.ec-la-accordion .panel-title a:hover {
    background: #eee2f3;
}

.ec-la-accordion .panel-body {
    padding: 14px;
}

.ec-la-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: #ffffff;
}

.ec-la-table thead th {
    padding: 13px 12px;
    background: #f4edf7;
    color: #642a69;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 2px solid #d9c4e1;
}

.ec-la-table tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid #eee7f1;
    vertical-align: middle;
}

.ec-la-table tbody tr:last-child td {
    border-bottom: none;
}

.ec-la-table tbody tr:hover {
    background: #fcf8fd;
}

.ec-la-table th:first-child,
.ec-la-table td:first-child {
    width: 65px;
    text-align: center;
}

.ec-la-table th:last-child,
.ec-la-table td:last-child {
    width: 150px;
    text-align: center;
    white-space: nowrap;
}

.ec-local-authorities a.btn.myButton {
    text-decoration: none;
}

.ec-la-no-results {
    padding: 15px;
    margin: 10px 0;
    color: #716878;
    text-align: center;
    border: 1px dashed #d8c9df;
    border-radius: 6px;
}

@media (max-width: 600px) {
    .ec-la-intro h4 {
        font-size: 14px;
    }

    .ec-la-main-download td {
        padding: 9px 7px;
        font-size: 13px;
    }

    .ec-la-accordion .panel-body {
        padding: 7px;
    }

    .ec-la-table thead th,
    .ec-la-table tbody td {
        padding: 9px 6px;
        font-size: 12px;
    }

    .ec-la-table th:first-child,
    .ec-la-table td:first-child {
        width: 35px;
    }

    .ec-la-table th:last-child,
    .ec-la-table td:last-child {
        width: 100px;
    }

    .ec-local-authorities a.btn.myButton {
        padding: 6px 8px;
        font-size: 11px;
    }
}

/* Fix table header visibility */
.ec-info-table thead {
    display: table-header-group !important;
}

.ec-info-table thead tr {
    display: table-row !important;
}

.ec-info-table thead th {
    display: table-cell !important;
    background-color: #642a69 !important;
    color: #ffffff !important;
    padding: 15px 13px !important;
    text-align: left !important;
    vertical-align: middle !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #9A258F !important;
}

/* ==========================================
   ELECTION COMMISSION - OFFICER DIRECTORY
=========================================== */

.ec-info-officers {
    --ec-purple: #642a69;
    --ec-purple-light: #f4edf6;
    --ec-pink: #9A258F;
    --ec-border: #e6dce9;
    --ec-text: #34303a;

    width: 100%;
    max-width: 100%;
    margin: 20px auto;
    color: var(--ec-text);
    font-family: "Segoe UI", Arial, sans-serif;
    box-sizing: border-box;
}

.ec-info-officers *,
.ec-info-officers *::before,
.ec-info-officers *::after {
    box-sizing: border-box;
}

/* Search toolbar */

.ec-info-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
}

.ec-info-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 320px;
    max-width: 650px;
    min-width: 0;
    min-height: 46px;
    padding: 0 15px;
    background: #ffffff;
    border: 1px solid #d8c8df;
    border-radius: 7px;
    transition: border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.ec-info-search:focus-within {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 3px rgba(100, 42, 105, 0.10);
}

.ec-info-search-icon {
    font-size: 17px;
    flex-shrink: 0;
}

.ec-info-search input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #34303a;
    font-size: 14px;
    box-shadow: none;
}

.ec-info-search input::placeholder {
    color: #827887;
}

.ec-info-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 20px;
    background: var(--ec-purple-light);
    color: var(--ec-purple);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Responsive table container */

.ec-info-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--ec-border);
    border-top: 3px solid var(--ec-purple);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(62, 35, 69, 0.06);
    -webkit-overflow-scrolling: touch;
}

/* Table */

.ec-info-table {
    width: 100%;
    /* min-width: 1250px; */
    margin: 0;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    background: #ffffff;
    font-size: 13px;
    line-height: 1.65;
}

.ec-info-table thead th {
    padding: 15px 13px;
    background: var(--ec-purple);
    color: #ffffff;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 2px solid #9A258F;
    text-align: left;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.ec-info-table thead th:last-child {
    border-right: none;
}

.ec-info-table tbody td {
    padding: 13px;
    border: none;
    border-right: 1px solid #eee7f0;
    border-bottom: 1px solid #eae3ed;
    background: #ffffff;
    color: #403a43;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
    transition: background-color 0.2s ease;
}

.ec-info-table tbody td:last-child {
    border-right: none;
}

.ec-info-table tbody tr:last-child td {
    border-bottom: none;
}

/* Alternating rows */

.ec-info-table tbody tr:nth-child(even) td {
    background: #faf7fb;
}

/* Hover effect */

.ec-info-table tbody tr:hover td {
    background: #f0e5f3;
}

/* Institution name */

.ec-info-table tbody td:first-child {
    min-width: 175px;
    color: var(--ec-purple);
    font-weight: 600;
}

/* Officer badges */

.ec-officer-badge {
    display: inline-block;
    padding: 5px 9px;
    border: 1px solid #e4cbe9;
    border-radius: 5px;
    background: #f5edf7;
    color: #642a69;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.ec-officer-badge.ec-designated {
    background: #642a69;
    color: #ffffff;
    border-color: #642a69;
}

/* Email links */

.ec-info-table tbody td a {
    color: #842b85;
    text-decoration: none;
    font-weight: 500;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.ec-info-table tbody td a:hover,
.ec-info-table tbody td a:focus {
    color: #c00087;
    text-decoration: underline;
}

/* Empty search results */

.ec-info-no-results {
    padding: 28px 15px;
    color: #6b5b70;
    background: #faf7fb;
    text-align: center;
    font-size: 14px;
}

.ec-info-no-results[hidden] {
    display: none !important;
}

/* Tablet */

@media (max-width: 768px) {
    .ec-info-officers {
        margin: 14px auto;
    }

    .ec-info-toolbar {
        align-items: stretch;
        gap: 10px;
    }

    .ec-info-search {
        flex-basis: 100%;
        max-width: 100%;
    }

    .ec-info-count {
        align-self: flex-start;
    }

    .ec-info-table {
        font-size: 12px;
    }

    .ec-info-table thead th,
    .ec-info-table tbody td {
        padding: 11px 10px;
    }
}

/* Small mobile */

@media (max-width: 480px) {
    .ec-info-search {
        padding: 0 10px;
    }

    .ec-info-search input {
        font-size: 13px;
    }

    .ec-info-table-wrap {
        border-radius: 6px;
    }
}

/* =========================================
   ELECTION REPORTS TABLE
   ========================================= */

.ec-reports-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    -webkit-overflow-scrolling: touch;
}

.ec-reports-table {
    width: 100%;
    min-width: 600px;
    margin-bottom: 0;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}

.ec-reports-table th,
.ec-reports-table td {
    padding: 12px 14px;
    border: 1px solid #e3d9e8;
    vertical-align: middle;
}

.ec-reports-table thead th {
    background-color: #642a69;
    color: #fff;
    font-weight: 600;
}

.ec-reports-table thead th:first-child {
    text-align: left;
}

.ec-reports-table thead th:not(:first-child) {
    text-align: center;
}

.ec-reports-table tbody tr:nth-child(even) {
    background-color: #f8f4fa;
}

.ec-reports-table tbody tr:hover {
    background-color: #eee3f2;
}

.ec-reports-table .ec-report-description {
    width: 82%;
    text-align: left;
}

.ec-reports-table .ec-report-download {
    width: 6%;
    text-align: center;
}

.ec-reports-table .btnpp,
.ec-reports-table .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
}

.ec-reports-table .btnpp {
    background-color: #642a69;
    color: #fff;
    border: 1px solid #642a69;
}

.ec-reports-table .btnpp:hover {
    background-color: #9A258F;
    border-color: #9A258F;
    color: #fff;
}

.ec-reports-table .button:disabled {
    background-color: #eeeeee;
    color: #999;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.75;
}

@media screen and (max-width: 600px) {
    .ec-reports-table th,
    .ec-reports-table td {
        padding: 9px 10px;
        font-size: 13px;
    }
}


/* =========================================
   ELECTORAL FORMS - MODERN PURPLE DESIGN
   ========================================= */

.ec-voter-forms {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", "Noto Sans Sinhala",
                 "Noto Sans Tamil", sans-serif;
}

/* Introduction */

.ec-voter-forms .ec-forms-intro {
    margin-bottom: 24px;
    padding: 0 0 16px;
    border-bottom: 2px solid #e9dcef;
}

.ec-voter-forms .ec-forms-intro h2 {
    margin: 0 0 8px;
    color: #642a69;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
}

.ec-voter-forms .ec-forms-intro p {
    margin: 0;
    color: #716779;
    font-size: 14px;
    line-height: 1.7;
}

/* Forms List */

.ec-voter-forms .ec-forms-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Document Cards */

.ec-voter-forms .ec-form-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-width: 0;
    padding: 18px;
    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid #e8dced;
    border-left: 4px solid #642a69;
    border-radius: 10px;

    text-decoration: none !important;
    color: #302638;

    box-shadow: 0 3px 12px rgba(77, 35, 86, 0.05);
    transition: background 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease;
}

/* Hover Effect */

.ec-voter-forms .ec-form-card:hover {
    background: #fcf9fe;
    border-color: #d6b9e2;
    border-left-color: #9A258F;
    box-shadow: 0 7px 20px rgba(100, 42, 105, 0.12);
    transform: translateY(-2px);
    text-decoration: none !important;
}

/* PDF Icon */

.ec-voter-forms .ec-form-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;

    width: 50px;
    height: 50px;
    border-radius: 10px;

    background: #f1e7f7;
    color: #642a69;
    font-size: 23px;

    transition: background 0.25s ease,
                color 0.25s ease;
}

.ec-voter-forms .ec-form-card:hover .ec-form-icon {
    background: #642a69;
    color: #ffffff;
}

/* Card Content */

.ec-voter-forms .ec-form-content {
    flex: 1 1 auto;
    min-width: 0;
}

.ec-voter-forms .ec-form-content h3 {
    margin: 0 0 6px;
    color: #642a69;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ec-voter-forms .ec-form-card:hover .ec-form-content h3 {
    color: #9A258F;
}

.ec-voter-forms .ec-form-content p {
    margin: 0 0 7px;
    color: #62596a;
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.ec-voter-forms .ec-form-meta {
    display: inline-block;
    color: #81768a;
    font-size: 12px;
    line-height: 1.5;
}

/* Right Arrow */

.ec-voter-forms .ec-form-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 7px;

    color: #642a69;
    font-size: 16px;
}

.ec-voter-forms .ec-form-action span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #642a69;
    border-radius: 5px;

    color: #642a69;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.ec-voter-forms .ec-form-card:hover .ec-form-action {
    color: #9A258F;
}

/* Claim Forms Section Heading */

.ec-voter-forms .ec-claim-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 30px 0 16px;
    color: #642a69;
}

.ec-voter-forms .ec-claim-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5d5ec;
}

.ec-voter-forms .ec-claim-heading span {
    display: inline-block;
    padding: 7px 13px;
    border-radius: 5px;

    background: #f1e7f7;
    color: #642a69;

    font-size: 12px;
    font-weight: 750;
    letter-spacing: 1px;
}

/* Claim Form Letter Icons */

.ec-voter-forms .ec-letter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;

    width: 44px;
    height: 44px;
    border-radius: 9px;

    background: #642a69;
    color: #ffffff;

    font-size: 21px;
    font-weight: 700;

    transition: background 0.25s ease;
}

.ec-voter-forms .ec-claim-card:hover .ec-letter-icon {
    background: #9A258F;
}

/* Keyboard Accessibility */

.ec-voter-forms .ec-form-card:focus-visible {
    outline: 3px solid #d10687;
    outline-offset: 3px;
}

/* Responsive Layout */

@media screen and (max-width: 768px) {

    .ec-voter-forms {
        margin: 15px auto;
    }

    .ec-voter-forms .ec-forms-intro h2 {
        font-size: 22px;
    }

    .ec-voter-forms .ec-form-card {
        gap: 12px;
        padding: 14px;
    }

    .ec-voter-forms .ec-form-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .ec-voter-forms .ec-letter-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .ec-voter-forms .ec-form-content h3 {
        font-size: 14px;
    }

    .ec-voter-forms .ec-form-content p {
        font-size: 12px;
    }

    .ec-voter-forms .ec-form-action span {
        padding: 5px 8px;
    }
}

@media screen and (max-width: 480px) {

    .ec-voter-forms .ec-form-card {
        gap: 10px;
        padding: 12px;
    }

    .ec-voter-forms .ec-form-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 17px;
    }

    .ec-voter-forms .ec-letter-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .ec-voter-forms .ec-form-content h3 {
        font-size: 13px;
    }

    .ec-voter-forms .ec-form-meta {
        font-size: 11px;
    }

    .ec-voter-forms .ec-form-action {
        font-size: 13px;
    }

    .ec-voter-forms .ec-form-action span {
        padding: 4px 6px;
        font-size: 10px;
    }
}


/* ==========================================
   POLITICAL PARTY DOCUMENTS - PURPLE THEME
   ========================================== */

.ec-political-documents {
    width: 100%;
    max-width: 100%;
    margin: 22px auto;
    box-sizing: border-box;
    font-family: "Segoe UI", "Noto Sans Sinhala",
                 "Noto Sans Tamil", sans-serif;
    color: #302638;
}

/* Search toolbar */
.ec-political-documents .ec-doc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ec-political-documents .ec-doc-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 440px;
    min-width: 0;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #e3d5e9;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.ec-political-documents .ec-doc-search:focus-within {
    border-color: #9A258F;
    box-shadow: 0 0 0 3px rgba(154, 37, 143, .10);
}

.ec-political-documents .ec-doc-search i {
    color: #642a69;
    font-size: 15px;
}

.ec-political-documents .ec-doc-search input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: #302638;
    font-size: 14px;
}

.ec-political-documents .ec-doc-search input::placeholder {
    color: #92879a;
}

.ec-political-documents .ec-doc-count {
    padding: 7px 12px;
    border-radius: 20px;
    background: #f1e7f7;
    color: #642a69;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Responsive table wrapper */
.ec-political-documents .ec-doc-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e7ddeb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(77, 35, 86, .06);
}

/* Table */
.ec-political-documents .ec-doc-table {
    width: 100%;
    min-width: 570px;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}

.ec-political-documents .ec-doc-table thead th {
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid #e5d5ec;
    background: #642a69;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 700;
}

.ec-political-documents .ec-doc-table thead tr:first-child th {
    padding-top: 15px;
    padding-bottom: 8px;
}

.ec-political-documents .ec-doc-table thead tr:first-child th:first-child {
    text-align: left;
}

.ec-political-documents .ec-doc-table thead .ec-language-heading th {
    padding-top: 7px;
    padding-bottom: 12px;
    background: #f1e7f7;
    color: #642a69;
    font-size: 11px;
    font-weight: 700;
}

.ec-political-documents .ec-doc-table thead .ec-language-heading th:first-child {
    background: #f1e7f7;
}

.ec-political-documents .ec-doc-table .ec-description-col {
    width: 76%;
}

.ec-political-documents .ec-doc-table .ec-download-col {
    width: 24%;
}

.ec-political-documents .ec-doc-table tbody td {
    padding: 13px 14px;
    border-top: 0;
    border-bottom: 1px solid #eee7f1;
    background: #fff;
    vertical-align: middle;
    font-size: 13px;
    line-height: 1.65;
}

.ec-political-documents .ec-doc-table tbody tr:nth-child(even) td {
    background: #fcf9fd;
}

.ec-political-documents .ec-doc-table tbody tr:hover td {
    background: #f6effa;
}

.ec-political-documents .ec-doc-table tbody tr:last-child td {
    border-bottom: 0;
}

.ec-political-documents .ec-doc-table tbody td:first-child {
    overflow-wrap: anywhere;
}

.ec-political-documents .ec-doc-title {
    color: #403449;
    font-weight: 550;
}

/* Language buttons - reuse existing btnpp class */
.ec-political-documents .ec-doc-table tbody td:not(:first-child) {
    width: 8%;
    text-align: justify;
    white-space: nowrap;
}

.ec-political-documents .ec-doc-table .btnpp,
.ec-political-documents .ec-doc-table .ec-disabled-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* min-width: 37px; */
    min-height: 32px;
    padding: 5px 9px;
    box-sizing: border-box;
    border: 1px solid #642a69;
    border-radius: 5px;
    background: #fff;
    color: #642a69;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease,
                border-color .2s ease, box-shadow .2s ease;
}

.ec-political-documents .ec-doc-table .btnpp:hover,
.ec-political-documents .ec-doc-table .btnpp:focus {
    border-color: #9A258F;
    background: #642a69;
    color: #fff;
    box-shadow: 0 3px 8px rgba(100, 42, 105, .16);
    text-decoration: none !important;
}

.ec-political-documents .ec-doc-table .ec-disabled-btn,
.ec-political-documents .ec-doc-table .ec-disabled-btn:disabled {
    border-color: #ddd5e0;
    background: #f3f0f4;
    color: #aaa0af;
    cursor: not-allowed;
    opacity: 1;
}

/* No results */
.ec-political-documents .ec-no-results {
    margin: 0;
    padding: 28px 15px;
    color: #716779;
    font-size: 14px;
    text-align: center;
}

/* Keyboard accessibility */
.ec-political-documents .ec-doc-table a:focus-visible,
.ec-political-documents .ec-doc-search input:focus-visible {
    outline: 2px solid #d10687;
    outline-offset: 3px;
}

/* Tablet and mobile */
@media screen and (max-width: 768px) {
    .ec-political-documents {
        margin: 16px auto;
    }

    .ec-political-documents .ec-doc-toolbar {
        align-items: stretch;
    }

    .ec-political-documents .ec-doc-search {
        max-width: 100%;
    }

    .ec-political-documents .ec-doc-count {
        align-self: flex-start;
    }

    .ec-political-documents .ec-doc-table {
        min-width: 520px;
    }

    .ec-political-documents .ec-doc-table thead th {
        padding: 11px 9px;
        font-size: 12px;
    }

    .ec-political-documents .ec-doc-table tbody td {
        padding: 11px 9px;
        font-size: 12px;
    }
}

@media screen and (max-width: 480px) {
    .ec-political-documents .ec-doc-search input {
        height: 42px;
        font-size: 13px;
    }

    .ec-political-documents .ec-doc-table {
        min-width: 490px;
    }

    .ec-political-documents .ec-doc-table .btnpp,
    .ec-political-documents .ec-doc-table .ec-disabled-btn {
        min-width: 32px;
        min-height: 30px;
        padding: 4px 7px;
        font-size: 11px;
    }
}

/* Remove pink outline when search bar is focused */
.ec-doc-search input:focus,
#ecPoliticalSearch:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #ccc !important;
}