/*
========================================
FANSBOOK - Theme System
========================================
Advanced dark/light mode toggle with smooth transitions
*/

/* ========================================
   GLOBAL DROPDOWN BUTTON - ENHANCED VISIBILITY
   ======================================== */
/* Make dropdownButton larger and more visible across all pages */
.logo {
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none;
}


/* User profile info in header - display in column */
header .right .user-profile-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    gap: 2px !important;
}

header .right .user-profile-info .user-name {
    display: block !important;
    line-height: 1.2 !important;
}

header .right .user-profile-info .user-handle {
    display: block !important;
    line-height: 1.2 !important;
}

/* Ensure dropdown arrow is visible - Dark Mode (default) */
/* Dropdown Arrow - Dark Mode - High Specificity - FORCE VISIBLE */
.headerdropdown .dropdownButton .dropdown-arrow,
.headerdropdown .dropdownButton img.dropdown-arrow,
.headerdropdown .dropdownButton img:not(.pfp),
header .right .headerdropdown .dropdownButton .dropdown-arrow,
header .right .headerdropdown .dropdownButton img.dropdown-arrow,
header .right .headerdropdown .dropdownButton img:not(.pfp),
.headerdropdown .dropdownButton img[src*="arrow_drop_down"],
header .right .headerdropdown .dropdownButton img[src*="arrow_drop_down"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    margin-left: 8px !important;
    object-fit: contain !important;
    background: transparent !important;
    filter: none !important; /* Dark mode - no filter needed */
    pointer-events: auto !important;
    content: "" !important;
}

/* Light Mode - Make arrow darker/visible - High Specificity - FORCE VISIBLE */
[data-theme="light"] .headerdropdown .dropdownButton .dropdown-arrow,
[data-theme="light"] .headerdropdown .dropdownButton img.dropdown-arrow,
[data-theme="light"] .headerdropdown .dropdownButton img:not(.pfp),
[data-theme="light"] header .right .headerdropdown .dropdownButton .dropdown-arrow,
[data-theme="light"] header .right .headerdropdown .dropdownButton img.dropdown-arrow,
[data-theme="light"] header .right .headerdropdown .dropdownButton img:not(.pfp),
[data-theme="light"] .headerdropdown .dropdownButton img[src*="arrow_drop_down"],
[data-theme="light"] header .right .headerdropdown .dropdownButton img[src*="arrow_drop_down"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: grayscale(100%) brightness(0.3) contrast(1.4) !important; /* Darken for light mode */
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    margin-left: 8px !important;
    object-fit: contain !important;
    background: transparent !important;
    pointer-events: auto !important;
    content: "" !important;
}

/* Light Mode - Hover state - High Specificity */
[data-theme="light"] .headerdropdown .dropdownButton:hover .dropdown-arrow,
[data-theme="light"] .headerdropdown .dropdownButton:hover img.dropdown-arrow,
[data-theme="light"] .headerdropdown .dropdownButton:hover img:not(.pfp),
[data-theme="light"] header .right .headerdropdown .dropdownButton:hover .dropdown-arrow,
[data-theme="light"] header .right .headerdropdown .dropdownButton:hover img.dropdown-arrow,
[data-theme="light"] header .right .headerdropdown .dropdownButton:hover img:not(.pfp) {
    filter: grayscale(100%) brightness(0.2) contrast(1.5) !important; /* Even darker on hover */
}

/* User profile info in header - display in column */
header .right .user-profile-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    gap: 2px !important;
}

header .right .user-profile-info .user-name {
    display: block !important;
    line-height: 1.2 !important;
}

header .right .user-profile-info .user-handle {
    display: block !important;
    line-height: 1.2 !important;
}

.dropdownButton,
.dropdown .dropdownButton,
.post .postHeader .dropdownButton,
.postHeader .dropdownButton,
.mainSection .post .postHeader .time .postOptions .dropdown .dropdownButton,
.forgotpassword_area .post.gallery .postHeader .dropdownButton,
.mainSection.publicProfile .post .postHeader .dropdownButton,
.chat .dropdownButton,
.contact-header-bar .dropdownButton,
.mobileHeader .dropdownButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-radius: 50% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Override for mobile user profile dropdownButton to allow proper flex layout */
.mobileHeader .mobile-user-profile .dropdownButton {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    gap: 10px !important;
    justify-content: flex-start !important;
}

.dropdownButton:hover,
.dropdown .dropdownButton:hover,
.post .postHeader .dropdownButton:hover,
.postHeader .dropdownButton:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.05) !important;
}

[data-theme="light"] .dropdownButton:hover,
[data-theme="light"] .dropdown .dropdownButton:hover,
[data-theme="light"] .post .postHeader .dropdownButton:hover,
[data-theme="light"] .postHeader .dropdownButton:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Dropdown Button Image - Larger and more visible */
.dropdownButton img,
.dropdown .dropdownButton img,
.post .postHeader .dropdownButton img,
.postHeader .dropdownButton img,
.dropdownButton img[src*="postOption"],
.dropdownButton img[src*="postOption.png"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    filter: brightness(1) contrast(1.1) !important;
    transition: filter 0.3s ease !important;
}

/* Dark Mode - Dropdown Button Image */
[data-theme="dark"] .dropdownButton img,
[data-theme="dark"] .dropdown .dropdownButton img,
[data-theme="dark"] .post .postHeader .dropdownButton img,
[data-theme="dark"] .postHeader .dropdownButton img,
[data-theme="dark"] .dropdownButton img[src*="postOption"] {
    filter: brightness(1.1) contrast(1.2) invert(0) !important;
    opacity: 1 !important;
}

/* Light Mode - Dropdown Button Image (darken for visibility) */
[data-theme="light"] .dropdownButton img,
[data-theme="light"] .dropdown .dropdownButton img,
[data-theme="light"] .post .postHeader .dropdownButton img,
[data-theme="light"] .postHeader .dropdownButton img,
[data-theme="light"] .dropdownButton img[src*="postOption"] {
    filter: brightness(0) contrast(1.3) invert(0) !important;
    opacity: 1 !important;
}

/* Ensure loaded class doesn't override visibility */
.dropdownButton img.loaded,
.dropdown .dropdownButton img.loaded {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mobile Responsive - Dropdown Button (Tablet) */
@media (max-width: 768px) {
    
    .dropdownButton,
    .dropdown .dropdownButton,
    .post .postHeader .dropdownButton,
    .postHeader .dropdownButton,
    .forgotpassword_area .post.gallery .postHeader .dropdownButton,
    .mainSection.publicProfile .post .postHeader .dropdownButton {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        padding: 9px !important;
    }

    .dropdownButton img,
    .dropdown .dropdownButton img,
    .post .postHeader .dropdownButton img,
    .postHeader .dropdownButton img,
    .dropdownButton img[src*="postOption"] {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }
    .row {
    width: 100%;
    }
   
}

/* Mobile Responsive - Dropdown Button (Small Mobile) */
@media (max-width: 576px) {
    .dropdownButton,
    .dropdown .dropdownButton,
    .post .postHeader .dropdownButton,
    .postHeader .dropdownButton,
    .forgotpassword_area .post.gallery .postHeader .dropdownButton,
    .mainSection.publicProfile .post .postHeader .dropdownButton {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        padding: 8px !important;
    }

    .dropdownButton img,
    .dropdown .dropdownButton img,
    .post .postHeader .dropdownButton img,
    .postHeader .dropdownButton img,
    .dropdownButton img[src*="postOption"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
}

/* ========================================
   LOGO CLICKABILITY FIX
   ======================================== */
/* Ensure logo is always clickable */
.logo,
header .logo,
.logo img,
header .logo img {
    cursor: pointer !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
    position: relative !important;
}

.logo:hover,
header .logo:hover {
    opacity: 0.8 !important;
    transform: scale(1.02) !important;
    transition: all 0.2s ease !important;
}

/* Override any hiding rules for logo */
header .logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override styleNew.css hiding rules */
header .logo,
header .right form,
header .right button {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure logo is always visible and clickable on all screen sizes */
@media (max-width: 768px) {

    header .logo {

        display: none !important;
        visibility: hidden !important;
        opacity: 1 !important;
    }
}

@media (max-width: 480px) {
    header .logo {
        display: none !important;

        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ========================================
   NAVBAR THEME STYLING
   ======================================== */
/* Dark mode navbar (default) */
[data-theme-navbar] {
    background-color: #212529 !important;
    border-bottom: 1px solid #495057 !important;
}



/* Light mode navbar */
[data-theme="light"] [data-theme-navbar] {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

[data-theme="light"] [data-theme-navbar] .navbar-brand,
[data-theme="light"] [data-theme-navbar] .nav-link,
[data-theme="light"] [data-theme-navbar] .user-name {
    color: #212529 !important;
}

[data-theme="light"] [data-theme-navbar] .nav-link:hover {
    color: #495057 !important;
}

[data-theme="light"] [data-theme-navbar] .nav-link.active {
    color: #2196f3 !important;
    font-weight: 600 !important;
}

/* ========================================
   CSS CUSTOM PROPERTIES (Theme Variables)
======================================== */

:root {
    /* Original Design Variables - Dark Theme by Default */
    --primary-dark: #1a1a1a;
    --secondary-dark: #2a2a2a;
    --accent-pink: #e91e63;
    --accent-blue: #2196f3;
    --accent-purple: #9c27b0;
    --gradient-primary: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
    --gradient-pink: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    --text-light: #ffffff;
    --text-muted: #b0b0b0;
    
    /* Theme System Variables for Light Mode */
    --theme-primary: #ffffff;
    --theme-secondary: #f8f9fa;
    --theme-tertiary: #e9ecef;
    --theme-accent: #2196f3;
    --theme-accent-hover: #1976d2;
    --theme-text-primary: #212529;
    --theme-text-secondary: #6c757d;
    --theme-text-muted: #adb5bd;
    --theme-border: #dee2e6;
    --theme-shadow: rgba(0, 0, 0, 0.1);
    --theme-shadow-hover: rgba(0, 0, 0, 0.15);
    --theme-gradient: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
    --theme-gradient-hover: linear-gradient(270deg, #8B1248 0%, #0198D4 100%);
    
    /* Font Family Variables */
    --font-family-primary: "Aileron-Bold", "Outfit", sans-serif;
    --font-family-secondary: "Aileron-Regular", "Outfit", sans-serif;
    --font-family-heading: "Aileron-Bold", "Outfit", sans-serif;
    --font-family-body: "Aileron-Regular", "Outfit", sans-serif;
    
    /* Card Variables */
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
    
    /* Background Colors - Default to Dark */
    --bg-primary: var(--primary-dark);
    --bg-secondary: #0E1012;
    --bg-tertiary: #404040;
    
    /* Text Colors - Default to Light */
    --text-primary: var(--text-light);
    --text-secondary: var(--text-muted);
    --text-muted: var(--text-muted);
    
    /* Pending Call Requests Theme Variables */
    --card-bg: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    --card-shadow: 0 2px 8px rgba(0,0,0,0.3);
    --card-shadow-hover: 0 4px 16px rgba(0,0,0,0.4);
    --primary-gradient: linear-gradient(135deg, #007bff, #0056b3);
    --success-bg: rgba(40, 167, 69, 0.15);
    --success-border: rgba(40, 167, 69, 0.3);
    --success-color: #28a745;
    --warning-bg: rgba(255, 193, 7, 0.15);
    --warning-border: rgba(255, 193, 7, 0.3);
    --warning-color: #ffc107;
    --info-bg: rgba(13, 202, 240, 0.15);
    --info-border: rgba(13, 202, 240, 0.3);
    --info-color: #17a2b8;
    --message-bg: rgba(108, 117, 125, 0.1);
    
    /* Border Colors */
    --border-color: #404040;
    
    /* Shadow Colors */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    
    /* Transition Properties */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
}

/* Dark theme variables removed - preserve original dark styling */

/* Light Theme Variables */
[data-theme="light"] {
    --bg-primary: var(--theme-primary);
    --bg-secondary: var(--theme-secondary);
    --text-primary: var(--theme-text-primary);
    --text-secondary: var(--theme-text-secondary);
    --text-muted: var(--theme-text-muted);
    --border-color: var(--theme-border);
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Preserve original dark theme - NO overrides for dark mode */
/* Only add light theme support - dark mode stays exactly as original */

/* Light Theme Support - Only add light mode without changing dark mode */
[data-theme="light"] {
    /* Override only for light theme - preserve original dark styling */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --border-color: #dee2e6;
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    
    /* Pending Call Requests Light Theme Variables */
    --card-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --card-shadow: 0 2px 8px rgba(0,0,0,0.1);
    --card-shadow-hover: 0 4px 16px rgba(0,0,0,0.15);
    --primary-gradient: linear-gradient(135deg, #007bff, #0056b3);
    --success-bg: rgba(40, 167, 69, 0.1);
    --success-border: rgba(40, 167, 69, 0.2);
    --success-color: #28a745;
    --warning-bg: rgba(255, 193, 7, 0.1);
    --warning-border: rgba(255, 193, 7, 0.2);
    --warning-color: #ffc107;
    --info-bg: rgba(13, 202, 240, 0.1);
    --info-border: rgba(13, 202, 240, 0.2);
    --info-color: #17a2b8;
    --message-bg: rgba(108, 117, 125, 0.05);
}

/* ========================================
   LIGHT THEME COMPREHENSIVE STYLING
======================================== */

/* Base body and container styling */
[data-theme="light"] body {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .section,
[data-theme="light"] .content-area,
[data-theme="light"] .container,
[data-theme="light"] main {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Typography styling */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .hero-title,
[data-theme="light"] .section-title {
    color: #212529 !important;
}

[data-theme="light"] p,
[data-theme="light"] .hero-subtitle,
[data-theme="light"] .section-subtitle {
    color: #6c757d !important;
}

/* Remove white background from row justify-content-center text-center in light mode */
[data-theme="light"] .row.justify-content-center.text-center {
    background-color: transparent !important;
}

/* ========================================
   HERO SECTION LIGHT MODE
======================================== */
[data-theme="light"] .hero-section {
    /* Preserve background image for hero section in light mode */
    background-image: url('../images/hero-bg.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: visible !important;
    min-height: 100vh !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-theme="light"] .hero-section::before {
    /* Use subtle overlay so background image stays visible */
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
    z-index: 1 !important;
}

[data-theme="light"] .hero-section .container {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    width: 100% !important;
}

[data-theme="light"] .hero-section .row {
    background: transparent !important;
}

[data-theme="light"] .hero-section .col-lg-8 {
    background: transparent !important;
}

[data-theme="light"] .hero-title {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
    background: transparent !important;
    text-align: center !important;
}

[data-theme="light"] .hero-subtitle {
    text-align: center !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
    background: transparent !important;
}

[data-theme="light"] .hero-section .btn-gradient {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .hero-section .btn-gradient:hover {
    background: linear-gradient(270deg, #8B1248 0%, #0198D4 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ========================================
   CREATORS SECTION LIGHT MODE
======================================== */
[data-theme="light"] .creators-section {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .creators-section .section-title {
    color: #212529 !important;
}

[data-theme="light"] .creators-section .section-subtitle {
    color: #6c757d !important;
}

/* Ensure creators section images are not affected by global filters */
[data-theme="light"] .creators-section .left img,
[data-theme="light"] .creators-section .right img {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ========================================
   FEATURE ICONS - LIGHT MODE CONTRAST & VISIBILITY
   Enhanced contrast for better visibility on light backgrounds
   ======================================== */

/* Base rule for feature icons - improved contrast */
[data-theme="light"] .featuresSection .featuresContainer .feature .icon img {
    filter: grayscale(100%) brightness(0.3) contrast(1.5) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: 50px !important;
    height: auto !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

/* More specific rule for loaded images in features section */
[data-theme="light"] .featuresSection .featuresContainer .feature .icon img.img-fluid.loaded {
    filter: grayscale(100%) brightness(0.3) contrast(1.5) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: 50px !important;
    height: auto !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

/* Even more specific rule for any image in features section */
[data-theme="light"] .featuresSection img[data-lazy="image"] {
    filter: grayscale(100%) brightness(0.3) contrast(1.5) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Maximum specificity rule to override any conflicting styles */
[data-theme="light"] .featuresSection .featuresContainer .feature .icon img.img-fluid.loaded[data-lazy="image"] {
    filter: grayscale(100%) brightness(0.3) contrast(1.5) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: 50px !important;
    height: auto !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

/* Additional rule for lazy-loaded class (from JavaScript) */
[data-theme="light"] .featuresSection .featuresContainer .feature .icon img.img-fluid.lazy-loaded[data-lazy="image"] {
    filter: grayscale(100%) brightness(0.3) contrast(1.5) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: 50px !important;
    height: auto !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

/* Ultimate fallback rule for any image in features section */
[data-theme="light"] .featuresSection img {
    filter: grayscale(100%) brightness(0.3) contrast(1.5) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* ========================================
   FEATURES SECTION LIGHT MODE
======================================== */
[data-theme="light"] .featuresSection {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .featuresSection .section-title {
    color: #212529 !important;
}

[data-theme="light"] .featuresSection .section-subtitle {
    color: #6c757d !important;
}

[data-theme="light"] .featuresSection .featuresContainer .feature {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .featuresSection .featuresContainer .feature:hover {
    background-color: #f8f9fa !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .featuresSection .featuresContainer .feature h2 {
    color: #212529 !important;
}

[data-theme="light"] .featuresSection .featuresContainer .feature p {
    color: #6c757d !important;
}

/* Feature icon container - enhanced visibility with better contrast */
[data-theme="light"] .featuresSection .featuresContainer .feature .icon {
    background-color: #ffffff !important;
    border: 2px solid #dee2e6 !important;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 70px !important;
    min-height: 70px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .featuresSection .featuresContainer .feature:hover .icon {
    border-color: #2196f3 !important;
    box-shadow: 2px 2px 12px rgba(33, 150, 243, 0.3) !important;
    background-color: #f8f9fa !important;
    transform: translateY(-2px) !important;
}

[data-theme="light"] .feature {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .feature h2 {
    color: #212529 !important;
}

[data-theme="light"] .feature p {
    color: #6c757d !important;
}

/* ========================================
   MEMBER FEATURES SECTION LIGHT MODE
======================================== */
[data-theme="light"] .member-features-section {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .member-features-section .section-title {
    color: #212529 !important;
}

[data-theme="light"] .member-features-section .tabContainer {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .member-features-section .feature-content {
    background-color: transparent !important;
}

[data-theme="light"] .member-features-section .feature-list li {
    color: #212529 !important;
}

/* ========================================
   SOCIAL LINKS CENTERING FIX
======================================== */
/* Social links CSS has been moved to main.css - see SOCIAL MEDIA LINKS section */

/* ========== Member Features Image Styling ========== */
.tabContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.tabContainer > img,
.tabContainer .img-fluid {
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 250px;
    width: 100%;
    height: auto;
    border: 4px solid transparent;
    border-radius: 20px;
    padding: 8px;
    background: 
        linear-gradient(#1a1a2e, #1a1a2e) padding-box,
        linear-gradient(135deg, #c9447a, #01ADF1) border-box;
    box-shadow: 0 10px 30px rgba(201, 68, 122, 0.3);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.tabContainer > img:hover,
.tabContainer .img-fluid:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(201, 68, 122, 0.4);
}

/* Tab Content Area */
.tab-content-area {
    flex: 1;
    min-width: 0;
}

/* Light Mode */
[data-theme="light"] .tabContainer > img,
[data-theme="light"] .tabContainer .img-fluid,
body.light .tabContainer > img,
body.light .tabContainer .img-fluid {
    background: 
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #c9447a, #01ADF1) border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Tablet View */
@media screen and (max-width: 991px) {
    .tabContainer {
        flex-direction: column;
        gap: 30px;
    }
    
    .tabContainer > img,
    .tabContainer .img-fluid {
        max-width: 220px;
        margin-top: 20px;
        order: 2;
    }
    
    .tab-content-area {
        order: 1;
        width: 100%;
    }
}
@media screen and (max-width: 320px) {
    .tabContainer {
        flex-direction: row !important;
        gap: 5px !important;
        padding: 0 15px !important;
    }
    
    .tabContainer > img,
    .tabContainer .img-fluid {
        max-width: 180px !important;
        /* margin: 20px auto 0 !important; */
        display: block !important;
    }
    
    .tab-content-area {
        width: 100%;
    }
    
    .feature-list {
        padding-left: 0 !important;
    }
    
    .feature-list li {
        font-size: 8px !important;
        padding: 8px 0 !important
    }
}


/* Mobile View */
@media screen and (max-width: 768px) {
    .tabContainer {
        flex-direction: column;
        gap: 25px;
        padding: 0 15px;
    }
    
    .tabContainer > img,
    .tabContainer .img-fluid {
        max-width: 180px;
        margin: 20px auto 0;
        display: block;
    }
    
    .tab-content-area {
        width: 100%;
    }
    
    .feature-list {
        padding-left: 0;
    }
    
    .feature-list li {
        font-size: 14px;
        padding: 8px 0;
    }
}

/* Small Mobile View */
@media screen and (max-width: 576px) {
    .tabContainer {
        gap: 20px;
        padding: 0 10px;
    }
    
    .tabContainer > img,
    .tabContainer .img-fluid {
        max-width: 150px;
        padding: 5px;
        border-width: 3px;
    }
    
    .feature-tabs {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .feature-tabs .tab-item {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    .feature-list li {
        font-size: 13px;
    }
}

/* Extra Small Mobile */
@media screen and (max-width: 400px) {
    .tabContainer > img,
    .tabContainer .img-fluid {
        max-width: 130px;
    }
}


/* ========================================
   FOOTER TITLE AND SOCIAL LINKS POSITIONING
======================================== */
.footer-title {
    color: var(--text-light) !important;
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

[data-theme="light"] .footer-title {
    color: #212529 !important;
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

/* Social links CSS has been moved to main.css - see SOCIAL MEDIA LINKS section */

[data-theme="light"] .feature-toggle .toggle-btn {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .feature-toggle .toggle-btn.active {
    background-color: #2196f3 !important;
    color: #ffffff !important;
    border-color: #2196f3 !important;
}

[data-theme="light"] .feature-tabs .tab-item {
    color: #212529 !important;
    border-bottom: 2px solid transparent !important;
}

[data-theme="light"] .feature-tabs .tab-item.active {
    color: #2196f3 !important;
    border-bottom-color: #2196f3 !important;
}

[data-theme="light"] .feature-list li {
    color: #212529 !important;
}

[data-theme="light"] .feature-list svg path {
    fill: #2196f3 !important;
}

/* ========================================
   FAQ SECTION LIGHT MODE
======================================== */
[data-theme="light"] .faq-section {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .faq-section .section-title {
    color: #212529 !important;
}

[data-theme="light"] .accordion-item {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .accordion-button {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border: none !important;
}

[data-theme="light"] .accordion-button:not(.collapsed) {
    background-color: #e9ecef !important;
    color: #212529 !important;
    box-shadow: none !important;
}

[data-theme="light"] .accordion-button:focus,
[data-theme="light"] .accordion-button:focus-visible,
[data-theme="light"] .accordion-button:focus-within,
[data-theme="light"] .accordion-button:active:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

[data-theme="light"] .accordion-body {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* ========================================
   TESTIMONIALS SECTION LIGHT MODE
======================================== */
[data-theme="light"] .testimonials-section {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .testimonials-title {
    color: #212529 !important;
}

/* Override inline styles for Reviews text in light mode */
[data-theme="light"] .testimonials-title[style*="color"],
[data-theme="light"] h2.testimonials-title,
[data-theme="light"] .section-title.testimonials-title {
    color: #212529 !important;
}

[data-theme="light"] .testimonial-card {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .testimonial-content p {
    color: #212529 !important;
}

[data-theme="light"] .author-info h5 {
    color: #212529 !important;
}

[data-theme="light"] .author-info span {
    color: #6c757d !important;
}

/* ========================================
   GALLERY SECTION LIGHT MODE
======================================== */
[data-theme="light"] .gallery-section {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .gallery-section .section-title {
    color: #212529 !important;
}

[data-theme="light"] .gallery {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .gallery h2 {
    color: #212529 !important;
}

[data-theme="light"] .gallery span {
    color: #6c757d !important;
}

[data-theme="light"] .gallery button {
    background-color: #2196f3 !important;
    color: #ffffff !important;
    border: none !important;
}

[data-theme="light"] .arrows button {
    background-color: transparent !important;
    border: none !important;
    color: #212529 !important;
    outline: none !important;
    box-shadow: none !important;
}

[data-theme="light"] .arrows button:hover {
    background-color: transparent !important;
}

/* Light mode - arrow images should be dark/visible */
[data-theme="light"] .gallery-section .arrows button img,
[data-theme="light"] .arrows button img {
    filter: brightness(0) !important;
    opacity: 1 !important;
}

[data-theme="light"] .gallery-section .arrows button:hover img,
[data-theme="light"] .arrows button:hover img {
    opacity: 0.7 !important;
    filter: brightness(0) !important;
}

/* Dark mode - arrow images should be light/visible */
.gallery-section .arrows button img,
.arrows button img {
    filter: brightness(0) invert(1);
}

/* Remove focus outline in light mode */
[data-theme="light"] .gallery-section .arrows button:focus,
[data-theme="light"] .gallery-section .arrows button.prev:focus,
[data-theme="light"] .gallery-section .arrows button.next:focus,
[data-theme="light"] .gallery-section .arrows button:focus-visible,
[data-theme="light"] .gallery-section .arrows button.prev:focus-visible,
[data-theme="light"] .gallery-section .arrows button.next:focus-visible,
[data-theme="light"] .gallery-section .arrows button:active,
[data-theme="light"] .gallery-section .arrows button.prev:active,
[data-theme="light"] .gallery-section .arrows button.next:active,
[data-theme="light"] .arrows button:focus,
[data-theme="light"] .arrows button:focus-visible,
[data-theme="light"] .arrows button:active {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* ========================================
   CTA SECTION LIGHT MODE
======================================== */
[data-theme="light"] .cta-section {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .cta-title {
    color: #212529 !important;
}

[data-theme="light"] .cta-title span {
    color: #2196f3 !important;
}

[data-theme="light"] .cta-description {
    color: #6c757d !important;
}

/* ========================================
   BUTTONS LIGHT MODE
======================================== */
[data-theme="light"] .btn-outline-light {
    color: #212529 !important;
    border-color: #212529 !important;
}

[data-theme="light"] .btn-outline-light:hover {
    background-color: #212529 !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn-gradient {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

[data-theme="light"] .btn-gradient:hover {
    background: linear-gradient(270deg, #8B1248 0%, #0198D4 100%) !important;
    color: #ffffff !important;
}

/* ========================================
   FORM ELEMENTS LIGHT MODE
======================================== */
[data-theme="light"] .form-control {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .form-control:focus {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25) !important;
}

[data-theme="light"] .form-label {
    color: #212529 !important;
}

/* ========================================
   NAVIGATION LIGHT MODE
======================================== */
[data-theme="light"] .navbar {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

[data-theme="light"] .navbar-brand,
[data-theme="light"] .nav-link {
    color: #212529 !important;
}

[data-theme="light"] .nav-link:hover {
    color: #2196f3 !important;
}

[data-theme="light"] .nav-link.active {
    color: #2196f3 !important;
}

[data-theme="light"] .user-name {
    color: #212529 !important;
}

/* ========================================
   SCROLLED NAVBAR - KEEP WHITE IN LIGHT MODE
======================================== */
[data-theme="light"] .navbar.scrolled,
[data-theme="light"] .navbar.navbar-scrolled {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .navbar.scrolled .navbar-brand,
[data-theme="light"] .navbar.navbar-scrolled .navbar-brand {
    color: #212529 !important;
}

[data-theme="light"] .navbar.scrolled .nav-link,
[data-theme="light"] .navbar.navbar-scrolled .nav-link {
    color: #212529 !important;
}

[data-theme="light"] .navbar.scrolled .nav-link:hover,
[data-theme="light"] .navbar.navbar-scrolled .nav-link:hover {
    color: #2196f3 !important;
}

[data-theme="light"] .navbar.scrolled .nav-link.active,
[data-theme="light"] .navbar.navbar-scrolled .nav-link.active {
    color: #2196f3 !important;
}

[data-theme="light"] .navbar.scrolled .user-name,
[data-theme="light"] .navbar.navbar-scrolled .user-name {
    color: #212529 !important;
}

/* Override navbar-dark and bg-dark classes in light theme */
[data-theme="light"] .navbar.navbar-dark,
[data-theme="light"] .navbar.bg-dark {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .navbar.navbar-dark .navbar-brand,
[data-theme="light"] .navbar.bg-dark .navbar-brand,
[data-theme="light"] .navbar.navbar-dark .nav-link,
[data-theme="light"] .navbar.bg-dark .nav-link {
    color: #212529 !important;
}

[data-theme="light"] .navbar.navbar-dark .nav-link:hover,
[data-theme="light"] .navbar.bg-dark .nav-link:hover {
    color: #2196f3 !important;
}

[data-theme="light"] .navbar.navbar-dark .user-name,
[data-theme="light"] .navbar.bg-dark .user-name {
    color: #212529 !important;
}

/* ========================================
   HEADER NAVIGATION ICONS - LIGHT MODE
======================================== */
[data-theme="light"] .navbar .nav-link i,
[data-theme="light"] .navbar .nav-link .fas,
[data-theme="light"] .navbar .nav-link .fal,
[data-theme="light"] .navbar .nav-link .far,
[data-theme="light"] .navbar .nav-link .fab {
    color: #212529 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    font-size: 16px !important;
    transition: color var(--transition-normal, 0.3s ease) !important;
}

[data-theme="light"] .navbar .nav-link:hover i,
[data-theme="light"] .navbar .nav-link:hover .fas,
[data-theme="light"] .navbar .nav-link:hover .fal,
[data-theme="light"] .navbar .nav-link:hover .far,
[data-theme="light"] .navbar .nav-link:hover .fab {
    color: #2196f3 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

[data-theme="light"] .navbar .nav-link.active i,
[data-theme="light"] .navbar .nav-link.active .fas,
[data-theme="light"] .navbar .nav-link.active .fal,
[data-theme="light"] .navbar .nav-link.active .far,
[data-theme="light"] .navbar .nav-link.active .fab {
    color: #2196f3 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Search icon in header */
[data-theme="light"] .desktop_nav_search i,
[data-theme="light"] .search-form i {
    color: #212529 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

[data-theme="light"] .desktop_nav_search:hover i,
[data-theme="light"] .search-form:hover i {
    color: #2196f3 !important;
}

/* Close icon for mobile menu */
[data-theme="light"] .nav-close-icon i {
    color: #212529 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    font-size: 18px !important;
}

[data-theme="light"] .nav-close-icon:hover i {
    color: #dc3545 !important;
}

/* Message and notification icons */
[data-theme="light"] .message-icon-wrapper i,
[data-theme="light"] .message-icon-wrapper .fas {
    color: #212529 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

[data-theme="light"] .message-icon-wrapper:hover i,
[data-theme="light"] .message-icon-wrapper:hover .fas {
    color: #2196f3 !important;
}

/* Massage ball icon (notification counter) */
[data-theme="light"] .massage-ball-icon {
    background: #dc3545 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Header profile image */
[data-theme="light"] .navbar .dropdown img {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    border: 2px solid #dee2e6 !important;
    transition: border-color var(--transition-normal, 0.3s ease) !important;
}

[data-theme="light"] .navbar .dropdown:hover img {
    border-color: #2196f3 !important;
}

/* Header image icons - light mode */
[data-theme="light"] .navbar img,
[data-theme="light"] .search-form img,
[data-theme="light"] .navbar .right img {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
    transition: filter var(--transition-normal, 0.3s ease) !important;
}

[data-theme="light"] .navbar button:hover img,
[data-theme="light"] .search-form:hover img,
[data-theme="light"] .navbar .right button:hover img {
    filter: grayscale(100%) brightness(0.3) contrast(1.4) !important;
}

/* Specific styling for notification and chat icons */
[data-theme="light"] .navbar .right button img {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
}

/* Dropdown arrow icon */
[data-theme="light"] .dropdown img[src*="arrow_drop_down"] {
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
    width: 12px !important;
    height: 12px !important;
    margin-left: 5px !important;
}

[data-theme="light"] .dropdown:hover img[src*="arrow_drop_down"] {
    filter: grayscale(100%) brightness(0.3) contrast(1.4) !important;
}

/* ========================================
   HEADER DROPDOWN - UNIFIED STYLING
   All headerdropdown CSS consolidated here
======================================== */

/* Ultimate search icon fix for light mode */
[data-theme="light"] img[src*="search.png"] {
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
}

[data-theme="light"] img[src*="search.png"].loaded {
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
}

[data-theme="light"] img[src*="search.png"][style*="opacity: 1"] {
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
}

/* Ensure button backgrounds are not affected by icon filters */
[data-theme="light"] .navbar .right button {
    background: transparent !important;
    border: none !important;
}

[data-theme="light"] .search-form button {
    background: transparent !important;
    border: none !important;
}

/* Header Dropdown Base Styles - Common for all themes */
/* ========================================
   HEADER STYLES - ALL HEADER CSS CONSOLIDATED
   ======================================= */

/* Main Header Container */
header {
    position: sticky;
    margin: 26px auto 40px auto;
    padding: 14px 40px;
    border-radius: 50px;
    max-width: 1228px;
    display: flex;
    z-index: 1000;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: var(--bg-secondary, #0E1012);
    color: var(--text-primary, #ffffff);
    top: 26px;
    box-shadow: var(--shadow-md, 5px 5px 5px #15191c63);
    transition: background-color var(--transition-normal, 0.3s ease), color var(--transition-normal, 0.3s ease), box-shadow var(--transition-normal, 0.3s ease);
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    min-width: 0;
}

/* Header Logo Link - Fixed, No Shrink */
header .logo-link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

header::before {
    content: "";
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 70px;
    z-index: 1;
}

/* Header Logo */
header .logo {
    width: 105px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Header Search Form - Center, Flexible */
header form,
header .search-form {
    background: var(--bg-primary, #15191C);
    display: flex;
    padding: 10px 16px;
    border-radius: 5rem;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    transition: background-color var(--transition-normal, 0.3s ease);
    flex: 1 1 0;
    min-width: 200px;
    max-width: 500px;
    flex-shrink: 1;
    overflow: visible;
    margin: 0;
}

header form input {
    background: transparent;
    color: var(--text-primary, #ffffff);
    border: 0;
    font-size: 16px;
    flex: 1;
    min-width: 0;
    outline: none;
    transition: color var(--transition-normal, 0.3s ease);
    overflow: visible;
}

/* Header Right Section - All Elements Visible */
header .right {
    gap: 12px;
    position: relative;
    z-index: 2;
    display: flex;
    margin-left: auto;
    margin-right: 0;
    flex-shrink: 0;
    flex-grow: 0;
    align-items: center;
    flex-wrap: nowrap;
    min-width: fit-content;
    width: auto;
    max-width: none;
    overflow: hidden;
    box-sizing: border-box;
}

/* Header Right Buttons - Fixed Size, No Shrink */
header .right button {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 44px;
    border: 0;
    height: 44px;
    border-radius: 100%;
    background: var(--bg-primary, #15191C);
    transition: background-color var(--transition-normal, 0.3s ease);
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin: 0;
    padding: 0;
    min-width: 44px !important;
    max-width: 44px !important;
    cursor: pointer;
}

header .right form button {
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* Header Search Form in Right Section */
header .right .search-form {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    flex-shrink: 1;
    flex-grow: 0;
    margin: 0;
    padding: 0;
    min-width: 200px;
    max-width: 400px;
    overflow: visible;
}

/* General Dropdown Styles */
.dropdown {
    position: relative;
}

.dropdown .dropdownButton {
    position: relative;
}

.dropdown .dropdownButton input {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    cursor: pointer;
    top: 0;
}

.dropdown .dropdownMenu {
    display: none;
    padding: 16px 18px;
    border-radius: 10px;
    right: 0;
    z-index: 12;
    width: max-content;
    position: absolute;
    top: calc(100% + 16px);
    box-shadow: var(--shadow-md, 0px -5px 20px 0px #0000001A);
    background: var(--bg-primary, #F8F8F8);
    color: var(--text-primary, #000000);
    flex-direction: column;
    gap: 8px;
    transition: background-color var(--transition-normal, 0.3s ease), color var(--transition-normal, 0.3s ease), box-shadow var(--transition-normal, 0.3s ease);
}

.dropdown .bg {
    display: none;
    width: 100%;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 11;
}

.dropdown:has(input:checked) .bg,
.dropdown:has(input:checked) .dropdownMenu,
.dropdown .bg[style*="display: flex"],
.dropdown .bg[style*="display:flex"] {
    display: flex !important;
}

.dropdown .dropdownMenu a {
    color: var(--text-primary, #000000);
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    align-items: center;
    transition: color var(--transition-normal, 0.3s ease);
}

/* Header Dropdown Container - Match Image Design */
.headerdropdown {
    height: max-content;
    position: relative;
    margin-left: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: fit-content;
    max-width: none;
    overflow: visible;
}

.headerdropdown .dropdownButton {
    position: relative;
    gap: 12px;
    align-items: center;
    display: flex;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 4px 12px 4px 12px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    width: auto;
    min-width: fit-content;
    max-width: none;
    flex-shrink: 0;
    overflow: visible;
    box-sizing: border-box;
    height: auto;
}

.headerdropdown .dropdownButton:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .headerdropdown .dropdownButton:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.headerdropdown .dropdownButton input {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    opacity: 0 !important;
    outline: none !important;
    border: none !important;
}

.headerdropdown .dropdownButton > img.pfp {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    border-radius: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1 / 1;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    order: 2;
    margin-left: 0;
    margin-right: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 2;
}

/* Ensure profile picture has no focus/hover effects */
.headerdropdown .dropdownButton > img.pfp:hover,
.headerdropdown .dropdownButton:hover > img.pfp,
.headerdropdown .dropdownButton > img.pfp:focus,
.headerdropdown .dropdownButton > img.pfp:active {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remove focus from desktop dropdown button and profile picture */
.headerdropdown .dropdownButton:focus-visible,
.headerdropdown .dropdownButton:focus,
.headerdropdown .dropdownButton:focus-visible > img.pfp,
.headerdropdown .dropdownButton:focus > img.pfp {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* Remove any focus-like effects on hover for desktop */
.headerdropdown .dropdownButton:hover,
.headerdropdown .dropdownButton:hover > img.pfp,
.headerdropdown .dropdownButton:active,
.headerdropdown .dropdownButton:active > img.pfp {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.headerdropdown .dropdownButton h2 {
    font-size: 15px;
    font-weight: 500;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    color: var(--text-primary, #ffffff) !important;
    letter-spacing: 0 !important;
    line-height: 1.2;
    transition: color var(--transition-normal, 0.3s ease);
    margin: 0;
    margin-right: 12px;
    padding: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 200px;
    min-width: fit-content;
    width: auto;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto;
    flex-shrink: 0;
    flex-grow: 0;
}

.headerdropdown .dropdownButton h2 span {
    font-size: 13px;
    color: var(--text-muted, #9CA3AF);
    transition: color var(--transition-normal, 0.3s ease);
    font-weight: 400;
    white-space: nowrap;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
}

/* User profile info structure - Match Image Design */
.headerdropdown .dropdownButton .user-profile-info {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    min-width: 100px;
    width: auto;
    flex: 0 0 auto;
    order: 1;
    max-width: 150px;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden;
    flex-shrink: 1;
    height: auto;
    position: relative;
    z-index: 1;
}

/* Force visibility of user profile info content */
.headerdropdown .dropdownButton .user-profile-info * {
    visibility: visible !important;
    opacity: 1 !important;
}

.headerdropdown .dropdownButton .user-profile-info .user-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary, #ffffff) !important;
    letter-spacing: 0 !important;
    transition: color var(--transition-normal, 0.3s ease);
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    line-height: 1.2;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto;
    min-width: 0;
    flex-shrink: 0;
    height: auto;
}

.headerdropdown .dropdownButton .user-profile-info .user-handle {
    font-size: 13px;
    color: var(--text-muted, #9CA3AF);
    transition: color var(--transition-normal, 0.3s ease);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    line-height: 1.2;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto;
    min-width: 0;
    flex-shrink: 0;
    height: auto;
}

.headerdropdown .dropdownButton img:not(.pfp),
.headerdropdown .dropdownButton .dropdown-arrow,
.headerdropdown .dropdownButton #header-dropdown-arrow {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    order: 3;
    margin-left: 8px !important;
    margin-right: 0 !important;
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10 !important;
    cursor: pointer !important;
    outline: none !important;
}

/* Focus on dropdown arrow icon - not the button */
.headerdropdown .dropdownButton .dropdown-arrow:focus,
.headerdropdown .dropdownButton .dropdown-arrow:focus-visible,
.headerdropdown .dropdownButton #header-dropdown-arrow:focus,
.headerdropdown .dropdownButton #header-dropdown-arrow:focus-visible {
    outline: 2px solid var(--theme-accent, #01ADF1) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(1, 173, 241, 0.2) !important;
    border-radius: 2px !important;
    z-index: 11 !important;
}

/* Remove focus from dropdown button itself - focus should be on arrow */
.headerdropdown .dropdownButton:focus,
.headerdropdown .dropdownButton:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove focus from profile image - focus should be on arrow */
.headerdropdown .dropdownButton .pfp:focus,
.headerdropdown .dropdownButton .pfp:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   HEADER SPACING AND LAYOUT - CONSISTENT DESIGN
   ======================================= */

/* Header Right Section - Additional Spacing Rules */
header .right button:last-of-type:not(.headerdropdown button) {
    margin-right: 0;
    flex-shrink: 0;
}

/* Headerdropdown spacing from other elements */
header .right .headerdropdown {
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
    flex-grow: 0;
    min-width: fit-content;
    max-width: none;
    overflow: visible;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    header .right {
        gap: 8px !important;
    }
    
    header .right .headerdropdown {
        max-width: calc(100% - 150px);
    }
    
    .headerdropdown .dropdownButton .user-profile-info {
        max-width: 120px;
    }
    
    .headerdropdown .dropdownButton .user-profile-info .user-name,
    .headerdropdown .dropdownButton .user-profile-info .user-handle {
        max-width: 100%;
    }
}

.headerdropdown .dropdownButton:hover img:not(.pfp) {
    opacity: 1;
}

.headerdropdown .bg {
    display: none;
    width: 100%;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 11;
}

.headerdropdown.open .bg,
.headerdropdown .bg[style*="display: flex"],
.headerdropdown .bg[style*="display:flex"] {
    display: flex !important;
}

.headerdropdown .dropdownMenu {
    padding: 8px 0;
    flex-direction: column;
    background: var(--bg-secondary, #0E1012);
    color: var(--text-primary, #ffffff);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
    gap: 0;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 99999 !important;
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    min-width: 200px;
    transition: background-color var(--transition-normal, 0.3s ease), color var(--transition-normal, 0.3s ease), box-shadow var(--transition-normal, 0.3s ease), opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    transform: translateY(-8px);
}

.headerdropdown.open .dropdownMenu,
.headerdropdown .dropdownMenu[style*="display: flex"],
.headerdropdown .dropdownMenu[style*="display:flex"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0);
}

/* Force show when open class is present - override any inline styles */
.headerdropdown.open .dropdownMenu,
.headerdropdown.open > .dropdownMenu,
.headerdropdown[class*="open"] .dropdownMenu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    z-index: 99999 !important;
    position: absolute !important;
}

/* Override any inline styles that might hide it */
.headerdropdown.open .dropdownMenu[style*="display: none"],
.headerdropdown.open .dropdownMenu[style*="display:none"],
.headerdropdown.open .dropdownMenu[style*="visibility: hidden"],
.headerdropdown.open .dropdownMenu[style*="visibility:hidden"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Ensure header and right container don't clip the dropdown */
header,
header .right,
header .right .headerdropdown {
    overflow: visible !important;
    position: relative !important;
}

/* Ensure dropdown menu can escape parent containers */
.headerdropdown {
    position: relative !important;
    z-index: 1000 !important;
    overflow: visible !important;
}

.headerdropdown.open {
    z-index: 1001 !important;
    overflow: visible !important;
}

.headerdropdown .dropdownMenu a {
    font-size: 14px;
    color: var(--text-primary, #ffffff);
    white-space: nowrap;
    text-decoration: none;
    padding: 10px 16px;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: block;
    border-radius: 0;
}

.headerdropdown .dropdownMenu a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #ffffff);
}

.headerdropdown .dropdownMenu a:first-child {
    border-radius: 12px 12px 0 0;
}

.headerdropdown .dropdownMenu a:last-child {
    border-radius: 0 0 12px 12px;
}

.headerdropdown .dropdownMenu a:focus,
.headerdropdown .dropdownMenu a:focus-visible,
.headerdropdown .dropdownMenu a:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Responsive adjustments for header dropdown */
@media (max-width: 768px) {
    .headerdropdown {
        margin-left: 0;
    }
    
    .headerdropdown .dropdownButton h2 {
        max-width: 150px;
    }
    
    .headerdropdown .dropdownButton .user-profile-info {
        max-width: 150px;
    }
    
    .headerdropdown .dropdownButton .user-profile-info .user-name,
    .headerdropdown .dropdownButton .user-profile-info .user-handle {
        max-width: 150px;
    }
    
    header .right .user-name-button {
        margin-right: 8px;
    }
    
    header .right .user-name-button .user-name {
        font-size: 12px;
    }
    
    header .right .user-name-button .user-handle {
        font-size: 11px;
    }
}

/* Light Mode Overrides */
[data-theme="light"] .headerdropdown .dropdownButton {
    background: transparent !important;
    border: none !important;
}

[data-theme="light"] .headerdropdown .dropdownButton:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .headerdropdown .dropdownButton h2 {
    color: var(--text-primary, #212529) !important;
}

[data-theme="light"] .headerdropdown .dropdownButton h2 span {
    color: var(--text-muted, #6c757d) !important;
}

[data-theme="light"] .headerdropdown .dropdownButton .user-profile-info .user-name {
    color: var(--text-primary, #212529) !important;
}

[data-theme="light"] .headerdropdown .dropdownButton .user-profile-info .user-handle {
    color: var(--text-muted, #6c757d) !important;
}

[data-theme="light"] .headerdropdown .dropdownMenu {
    background: var(--bg-secondary, #ffffff) !important;
    color: var(--text-primary, #212529) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .headerdropdown .dropdownMenu a {
    color: var(--text-primary, #212529) !important;
}

[data-theme="light"] .headerdropdown .dropdownMenu a:hover {
    color: var(--text-primary, #212529) !important;
    background-color: rgba(0, 0, 0, 0.06) !important;
}

/* Header Dropdown Images - Light Mode */
[data-theme="light"] .headerdropdown img {
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
    transition: filter var(--transition-normal, 0.3s ease) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

[data-theme="light"] .headerdropdown:hover img {
    filter: grayscale(100%) brightness(0.3) contrast(1.4) !important;
}

/* Profile image should not be grayscale, only the arrow */
[data-theme="light"] .headerdropdown .pfp {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Ensure logged-in user profile images display correctly in both modes */
/* Header profile images */
#header-profile-image,
#header-profile-image-pfp,
.headerdropdown .pfp,
.headerdropdown img.pfp,
.user-avatar,
.user-profile .user-avatar,
.user-profile-nav .user-avatar,
.user-profile-link .user-avatar,
.user-profile-img {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    /* Ensure proper brightness and colors */
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
}

/* Add margin-left to header profile image */
#header-profile-image-pfp {
    margin-left: 10px !important;
}

/* Light mode - ensure profile images are visible with correct colors */
[data-theme="light"] #header-profile-image,
[data-theme="light"] #header-profile-image-pfp,
[data-theme="light"] .headerdropdown .pfp,
[data-theme="light"] .headerdropdown img.pfp,
[data-theme="light"] .user-avatar,
[data-theme="light"] .user-profile .user-avatar,
[data-theme="light"] .user-profile-nav .user-avatar,
[data-theme="light"] .user-profile-link .user-avatar,
[data-theme="light"] .user-profile-img {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    /* No brightness or color adjustments */
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
}

/* Add margin-left to header profile image in light mode */
[data-theme="light"] #header-profile-image-pfp {
    margin-left: 10px !important;
}

/* Dark mode - ensure profile images are visible with correct colors */
[data-theme="dark"] #header-profile-image,
[data-theme="dark"] #header-profile-image-pfp,
[data-theme="dark"] .headerdropdown .pfp,
[data-theme="dark"] .headerdropdown img.pfp,
[data-theme="dark"] .user-avatar,
[data-theme="dark"] .user-profile .user-avatar,
[data-theme="dark"] .user-profile-nav .user-avatar,
[data-theme="dark"] .user-profile-link .user-avatar,
[data-theme="dark"] .user-profile-img {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    /* No brightness or color adjustments */
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
}

/* User profile link avatar - larger size in dark mode */
[data-theme="dark"] .user-profile-link .user-avatar,
[data-theme="dark"] .user-profile-link img.user-avatar,
[data-theme="dark"] .user-profile-link .user-avatar.rounded-circle,
[data-theme="dark"] .user-profile-link img.user-avatar.rounded-circle,
[data-theme="dark"] .user-profile-link .user-avatar.loaded,
[data-theme="dark"] .user-profile-link img.user-avatar.loaded {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
}

[data-theme="light"] .headerdropdown img.loaded {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
}

/* Exclude user-avatar from loaded image filters */
[data-theme="light"] .user-avatar.loaded,
[data-theme="light"] img.user-avatar.loaded,
[data-theme="light"] .user-avatar.rounded-circle.loaded,
[data-theme="light"] img.user-avatar.rounded-circle.loaded {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
    /* Ensure proper size */
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
}

/* User profile link avatar - larger size in light mode (override default) */
[data-theme="light"] .user-profile-link .user-avatar.loaded,
[data-theme="light"] .user-profile-link img.user-avatar.loaded,
[data-theme="light"] .user-profile-link .user-avatar.rounded-circle.loaded,
[data-theme="light"] .user-profile-link img.user-avatar.rounded-circle.loaded {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
}

/* ========================================
   REMOVE FOCUS FROM HEADER NAVIGATION AND PROFILE - BOTH THEMES
======================================== */

/* Remove focus from header navigation in both themes */
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link:focus-within,
.navbar-nav .nav-item .nav-link:focus,
.navbar-nav .nav-item .nav-link:focus-visible,
.navbar-nav .nav-item .nav-link:focus-within,
header .navbar-nav .nav-link:focus,
header .navbar-nav .nav-link:focus-visible,
.main-header .navbar-nav .nav-link:focus,
.main-header .navbar-nav .nav-link:focus-visible,
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible,
.navbar .nav-link:focus-within,
.navbar .nav-item:focus,
.navbar .nav-item:focus-visible,
.navbar .nav-item:focus-within,
.navbar .nav-item .nav-link:focus,
.navbar .nav-item .nav-link:focus-visible,
.navbar .nav-item .nav-link:focus-within,
.navbar-brand:focus,
.navbar-brand:focus-visible,
.navbar-brand:focus-within,
header .navbar-brand:focus,
header .navbar-brand:focus-visible,
.navbar .navbar-brand:focus,
.navbar .navbar-brand:focus-visible,
.navbar-toggler:focus,
.navbar-toggler:focus-visible,
.navbar-toggler:focus-within,
header .navbar-toggler:focus,
header .navbar-toggler:focus-visible,
.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:focus-visible,
#navbarToggler:focus,
#navbarToggler:focus-visible {
    outline: none !important;
    
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Remove focus from user profile elements in both themes */
.user-profile-nav:focus,
.user-profile-nav:focus-visible,
.user-profile-nav:focus-within,
.user-profile-nav *:focus,
.user-profile-nav *:focus-visible,
.user-profile-nav *:focus-within,
.user-profile-link:focus,
.user-profile-link:focus-visible,
.user-profile-link:focus-within,
.user-profile-link *:focus,
.user-profile-link *:focus-visible,
.user-profile-link *:focus-within,
.user-name:focus,
.user-name:focus-visible,
.user-name:focus-within,
.headerdropdown:focus,
.headerdropdown:focus-visible,
.headerdropdown:focus-within,
.headerdropdown *:focus,
.headerdropdown *:focus-visible,
.headerdropdown *:focus-within,
/* Comprehensive dropdownButton focus removal - all contexts */
.dropdownButton:focus,
.dropdownButton:focus-visible,
.dropdownButton:focus-within,
.dropdownButton:active:focus,
.dropdownButton:active:focus-visible,
.dropdown .dropdownButton:focus,
.dropdown .dropdownButton:focus-visible,
.dropdown .dropdownButton:focus-within,
.dropdown .dropdownButton:active:focus,
.dropdown .dropdownButton:active:focus-visible,
.post .postHeader .dropdownButton:focus,
.post .postHeader .dropdownButton:focus-visible,
.post .postHeader .dropdownButton:focus-within,
.post .postHeader .dropdownButton:active:focus,
.post .postHeader .dropdownButton:active:focus-visible,
.postHeader .dropdownButton:focus,
.postHeader .dropdownButton:focus-visible,
.postHeader .dropdownButton:focus-within,
.postHeader .dropdownButton:active:focus,
.postHeader .dropdownButton:active:focus-visible,
.mainSection .post .postHeader .time .postOptions .dropdown .dropdownButton:focus,
.mainSection .post .postHeader .time .postOptions .dropdown .dropdownButton:focus-visible,
.mainSection .post .postHeader .time .postOptions .dropdown .dropdownButton:focus-within,
.mainSection .post .postHeader .time .postOptions .dropdown .dropdownButton:active:focus,
.mainSection .post .postHeader .time .postOptions .dropdown .dropdownButton:active:focus-visible,
.forgotpassword_area .post.gallery .postHeader .dropdownButton:focus,
.forgotpassword_area .post.gallery .postHeader .dropdownButton:focus-visible,
.forgotpassword_area .post.gallery .postHeader .dropdownButton:focus-within,
.forgotpassword_area .post.gallery .postHeader .dropdownButton:active:focus,
.forgotpassword_area .post.gallery .postHeader .dropdownButton:active:focus-visible,
.mainSection.publicProfile .post .postHeader .dropdownButton:focus,
.mainSection.publicProfile .post .postHeader .dropdownButton:focus-visible,
.mainSection.publicProfile .post .postHeader .dropdownButton:focus-within,
.mainSection.publicProfile .post .postHeader .dropdownButton:active:focus,
.mainSection.publicProfile .post .postHeader .dropdownButton:active:focus-visible,
.chat .dropdownButton:focus,
.chat .dropdownButton:focus-visible,
.chat .dropdownButton:focus-within,
.chat .dropdownButton:active:focus,
.chat .dropdownButton:active:focus-visible,
.contact-header-bar .dropdownButton:focus,
.contact-header-bar .dropdownButton:focus-visible,
.contact-header-bar .dropdownButton:focus-within,
.contact-header-bar .dropdownButton:active:focus,
.contact-header-bar .dropdownButton:active:focus-visible,
.mobileHeader .dropdownButton:focus,
.mobileHeader .dropdownButton:focus-visible,
.mobileHeader .dropdownButton:focus-within,
.mobileHeader .dropdownButton:active:focus,
.mobileHeader .dropdownButton:active:focus-visible,
.mobile-user-profile:focus,
.mobile-user-profile:focus-visible,
.mobile-user-profile:focus-within,
.mobile-user-profile *:focus,
.mobile-user-profile *:focus-visible,
.mobile-user-profile *:focus-within,
.mobileHeader .headerdropdown:focus,
.mobileHeader .headerdropdown:focus-visible,
.mobileHeader .headerdropdown:focus-within,
.mobileHeader .headerdropdown *:focus,
.mobileHeader .headerdropdown *:focus-visible,
.mobileHeader .headerdropdown *:focus-within {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Remove focus from navigation containers */
.navbar:focus,
.navbar:focus-visible,
.navbar:focus-within,
.navbar-collapse:focus,
.navbar-collapse:focus-visible,
.navbar-collapse:focus-within,
#navbarNav:focus,
#navbarNav:focus-visible,
#navbarNav:focus-within {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

[data-theme="light"] .headerdropdown img[style*="opacity: 1"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
}

[data-theme="light"] .headerdropdown img[style*="display: none"],
[data-theme="light"] .headerdropdown img[style*="opacity: 0"],
[data-theme="light"] .headerdropdown img[style*="visibility: hidden"] {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
}

/* Mobile Responsive - Smaller sizes */
@media screen and (max-width: 768px) {
    .headerdropdown .dropdownButton h2 {
        font-size: 10px;
    }
    
    .headerdropdown .dropdownButton > img.pfp {
        width: 38px;
        height: 38px;
    }
    
    .headerdropdown .dropdownMenu {
        background: #323232;
        top: calc(100% + 10px);
    }
    
    [data-theme="light"] .headerdropdown .dropdownMenu {
        background: #ffffff !important;
    }
}

/* ULTIMATE ICON VISIBILITY FIX - Maximum Priority */
[data-theme="light"] .navbar .right img,
[data-theme="light"] .search-form img {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
}

/* Force visibility for all header images */
[data-theme="light"] .navbar img,
[data-theme="light"] .search-form img,
[data-theme="light"] .navbar .right img,
[data-theme="light"] .search-form .navbar-toggler img,
[data-theme="light"] .search-form .header-nav-menu img {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
}

[data-theme="light"] .navbar .right img.loaded,
[data-theme="light"] .search-form img.loaded {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
}

/* Exclude user-avatar from navbar loaded image filters */
[data-theme="light"] .navbar .right .user-avatar.loaded,
[data-theme="light"] .navbar .right img.user-avatar.loaded,
[data-theme="light"] .search-form .user-avatar.loaded,
[data-theme="light"] .search-form img.user-avatar.loaded {
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
}

[data-theme="light"] .navbar .right img[style*="opacity: 1"],
[data-theme="light"] .search-form img[style*="opacity: 1"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
}

/* FORCE VISIBILITY FOR SPECIFIC ICON IMAGES */
[data-theme="light"] img[src*="search.png"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    background: transparent !important;
}

[data-theme="light"] img[src*="notif.png"],
[data-theme="light"] img[src*="chat.png"],
[data-theme="light"] img[src*="arrow_drop_down.png"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
}

[data-theme="light"] img[src*="search.png"].loaded {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    background: transparent !important;
}

[data-theme="light"] img[src*="notif.png"].loaded,
[data-theme="light"] img[src*="chat.png"].loaded,
[data-theme="light"] img[src*="arrow_drop_down.png"].loaded {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
}

[data-theme="light"] img[src*="search.png"][style*="opacity: 1"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    background: transparent !important;
}

[data-theme="light"] img[src*="notif.png"][style*="opacity: 1"],
[data-theme="light"] img[src*="chat.png"][style*="opacity: 1"],
[data-theme="light"] img[src*="arrow_drop_down.png"][style*="opacity: 1"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
}

/* OVERRIDE ANY HIDING RULES FOR HEADER ICONS */
[data-theme="light"] .navbar .right img[style*="display: none"],
[data-theme="light"] .search-form img[style*="display: none"],
[data-theme="light"] .navbar .right img[style*="opacity: 0"],
[data-theme="light"] .search-form img[style*="opacity: 0"],
[data-theme="light"] .navbar .right img[style*="visibility: hidden"],
[data-theme="light"] .search-form img[style*="visibility: hidden"] {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
}

/* ========================================
   NAVBAR TOGGLER & HEADER NAV MENU LIGHT MODE
======================================== */

/* Navbar Toggler - Light Mode */
[data-theme="light"] .navbar-toggler {
    background: transparent !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: #212529 !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .navbar-toggler:hover {
    background: transparent !important;
    border-color: #adb5bd !important;
    color: #2196f3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .navbar-toggler:focus {
    background: transparent !important;
    border-color: transparent !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
}

[data-theme="light"] .navbar-toggler:active {
    background: transparent !important;
    border-color: #6c757d !important;
    transform: translateY(0) !important;
}

/* Navbar Toggler Icon - Light Mode */
[data-theme="light"] .navbar-toggler-icon {
    background-color: #212529 !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .navbar-toggler-icon::before,
[data-theme="light"] .navbar-toggler-icon::after {
    background-color: #212529 !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .navbar-toggler-icon::before {
    top: -6px !important;
}

[data-theme="light"] .navbar-toggler-icon::after {
    top: 6px !important;
}

[data-theme="light"] .navbar-toggler:hover .navbar-toggler-icon {
    background-color: #2196f3 !important;
}

[data-theme="light"] .navbar-toggler:hover .navbar-toggler-icon::before,
[data-theme="light"] .navbar-toggler:hover .navbar-toggler-icon::after {
    background-color: #2196f3 !important;
}

[data-theme="light"] .navbar-toggler:focus .navbar-toggler-icon {
    background-color: #212529 !important;
}

[data-theme="light"] .navbar-toggler:focus .navbar-toggler-icon::before,
[data-theme="light"] .navbar-toggler:focus .navbar-toggler-icon::after {
    background-color: #212529 !important;
}

/* Header Nav Menu - Light Mode */
[data-theme="light"] .header-nav-menu {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: #212529 !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .header-nav-menu:hover {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
    color: #2196f3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .header-nav-menu:focus {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
    outline: none !important;
    box-shadow: none !important;
}

[data-theme="light"] .header-nav-menu:active {
    background: #e9ecef !important;
    border-color: #6c757d !important;
    transform: translateY(0) !important;
}

/* Header Nav Menu Icon - Light Mode */
[data-theme="light"] .header-nav-menu .navbar-toggler-icon {
    background-color: #212529 !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .header-nav-menu .navbar-toggler-icon::before,
[data-theme="light"] .header-nav-menu .navbar-toggler-icon::after {
    background-color: #212529 !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .header-nav-menu .navbar-toggler-icon::before {
    top: -6px !important;
}

[data-theme="light"] .header-nav-menu .navbar-toggler-icon::after {
    top: 6px !important;
}

[data-theme="light"] .header-nav-menu:hover .navbar-toggler-icon {
    background-color: #2196f3 !important;
}

[data-theme="light"] .header-nav-menu:hover .navbar-toggler-icon::before,
[data-theme="light"] .header-nav-menu:hover .navbar-toggler-icon::after {
    background-color: #2196f3 !important;
}

[data-theme="light"] .header-nav-menu:focus .navbar-toggler-icon {
    background-color: #212529 !important;
}

[data-theme="light"] .header-nav-menu:focus .navbar-toggler-icon::before,
[data-theme="light"] .header-nav-menu:focus .navbar-toggler-icon::after {
    background-color: #212529 !important;
}

/* Sidebar Toggle - Light Mode */
[data-theme="light"] .sidebar-toggle {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: #212529 !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .sidebar-toggle:hover {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
    color: #2196f3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .sidebar-toggle:focus {
    background: #f8f9fa !important;
    border-color: #2196f3 !important;
    color: #2196f3 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.25) !important;
}

[data-theme="light"] .sidebar-toggle .navbar-toggler-icon {
    background-color: #212529 !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .sidebar-toggle .navbar-toggler-icon::before,
[data-theme="light"] .sidebar-toggle .navbar-toggler-icon::after {
    background-color: #212529 !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .sidebar-toggle .navbar-toggler-icon::before {
    top: -6px !important;
}

[data-theme="light"] .sidebar-toggle .navbar-toggler-icon::after {
    top: 6px !important;
}

[data-theme="light"] .sidebar-toggle:hover .navbar-toggler-icon {
    background-color: #2196f3 !important;
}

[data-theme="light"] .sidebar-toggle:hover .navbar-toggler-icon::before,
[data-theme="light"] .sidebar-toggle:hover .navbar-toggler-icon::after {
    background-color: #2196f3 !important;
}

/* Mobile Navigation - Light Mode */
[data-theme="light"] .navbar.navbar-expand-lg.navbar-dark.feed-navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .navbar.navbar-expand-lg.navbar-dark.feed-navbar .navbar-toggler {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: #212529 !important;
}

[data-theme="light"] .navbar.navbar-expand-lg.navbar-dark.feed-navbar .navbar-toggler:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #2196f3 !important;
}

/* Main Header - Light Mode */
[data-theme="light"] .main-header {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

[data-theme="light"] .main-header .header-logo .logo-text {
    color: #212529 !important;
}

/* ========================================
   LIGHT MODE SEARCH - EXACTLY MATCH DARK MODE
   ======================================== */
/* Search container - match dark mode exactly */
[data-theme="light"] .main-header .header-search .search-container,
[data-theme="light"] .header-search .search-container,
[data-theme="light"] .search-container {
    position: relative !important;
    width: 100% !important;
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 25px !important;
}

/* Search input - match dark mode padding exactly */
[data-theme="light"] .main-header .header-search .search-container .search-input,
[data-theme="light"] .header-search .search-container .search-input,
[data-theme="light"] .search-container .search-input,
[data-theme="light"] .main-header .header-search .search-input,
[data-theme="light"] .header-search .search-input {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 20px 12px 45px !important;
    color: #212529 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    line-height: normal !important;
}

[data-theme="light"] .main-header .header-search .search-container .search-input::placeholder,
[data-theme="light"] .header-search .search-container .search-input::placeholder,
[data-theme="light"] .search-container .search-input::placeholder,
[data-theme="light"] .main-header .header-search .search-input::placeholder,
[data-theme="light"] .header-search .search-input::placeholder {
    color: #6c757d !important;
    opacity: 0.6 !important;
}

[data-theme="light"] .main-header .header-search .search-container .search-input:focus,
[data-theme="light"] .header-search .search-container .search-input:focus,
[data-theme="light"] .search-container .search-input:focus {
    outline: none !important;
    background: transparent !important;
    border: none !important;
}

/* Search icon - match dark mode positioning exactly */
[data-theme="light"] .main-header .header-search .search-container .search-icon,
[data-theme="light"] .header-search .search-container .search-icon,
[data-theme="light"] .search-container .search-icon,
[data-theme="light"] .main-header .header-search .search-icon,
[data-theme="light"] .header-search .search-icon,
[data-theme="light"] .search-icon {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #6c757d !important;
    font-size: 16px !important;
    z-index: 1 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* Responsive override for light mode search - match dark mode */
@media (max-width: 768px) {
    [data-theme="light"] .main-header .header-search .search-container .search-input,
    [data-theme="light"] .header-search .search-container .search-input,
    [data-theme="light"] .search-container .search-input {
        padding: 10px 15px 10px 35px !important;
        font-size: 13px !important;
    }
    
    [data-theme="light"] .main-header .header-search .search-container .search-icon,
    [data-theme="light"] .header-search .search-container .search-icon,
    [data-theme="light"] .search-container .search-icon {
        left: 10px !important;
        font-size: 14px !important;
    }
}

[data-theme="light"] .main-header .header-user .header-notifications,
[data-theme="light"] .main-header .header-user .header-messages {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .main-header .header-user .header-notifications:hover,
[data-theme="light"] .main-header .header-user .header-messages:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #2196f3 !important;
    transform: translateY(-1px) !important;
}

[data-theme="light"] .main-header .header-user .user-profile {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    transition: all 0.3s ease !important;
    gap: 10px !important;
}

[data-theme="light"] .main-header .header-user .user-profile:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px) !important;
}

[data-theme="light"] .main-header .header-user .user-profile .user-info {
    display: flex !important;
    visibility: visible !important;
    gap: 2px !important;
    margin-right: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

/* Ensure user-info is visible on desktop for all themes */
@media (min-width: 993px) {
    .main-header .header-user .user-profile .user-info,
    .header-user .user-profile .user-info,
    .user-profile .user-info {
        display: flex !important;
        visibility: visible !important;
    }
    
    .main-header .header-user .user-profile .user-name,
    .header-user .user-profile .user-name,
    .user-profile .user-name {
        display: block !important;
        visibility: visible !important;
    }
    
    .main-header .header-user .user-profile .user-handle,
    .header-user .user-profile .user-handle,
    .user-profile .user-handle {
        display: block !important;
        visibility: visible !important;
    }
}

[data-theme="light"] .main-header .header-user .user-profile .user-name {
    color: #212529 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 200px !important;
}

[data-theme="light"] .main-header .header-user .user-profile .user-handle {
    color: #6c757d !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 200px !important;
}

[data-theme="light"] .main-header .header-user .user-profile .user-dropdown {
    flex-shrink: 0 !important;
    margin-left: 4px !important;
}

[data-theme="light"] .main-header .header-user .user-profile .user-avatar {
    flex-shrink: 0 !important;
}

[data-theme="light"] .main-header .header-user .user-profile .user-dropdown {
    color: #6c757d !important;
}

/* Search Form with Image Button - Dark Mode (Default) */
.search-form {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 25px !important;
    padding: 12px 20px 12px 45px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    min-width: 300px !important;
    max-width: 500px !important;
    flex: 1 !important;
    margin: 0 40px !important;
    transition: all 0.3s ease !important;
}

/* Comments Section - Transparent Background */
.hidden_comment {
    background: transparent !important;
    border: none !important;
    margin-top: 5px !important;
    padding: 10px !important;
}

.hidden_comment .comments {
    background: transparent !important;
}

.hidden_comment .hidden_comment_input_box {
    background: transparent !important;
}

/* Comments Section - Light Mode */
[data-theme="light"] .hidden_comment {
    background: transparent !important;
    border: none !important;
    margin-top: 5px !important;
    padding: 10px !important;
}

[data-theme="light"] .hidden_comment .comments {
    background: transparent !important;
}

[data-theme="light"] .hidden_comment .hidden_comment_input_box {
    background: transparent !important;
}

.search-form .navbar-toggler.header-nav-menu {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
    z-index: 2 !important;
}

.search-form .navbar-toggler.header-nav-menu:hover {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.search-form .navbar-toggler.header-nav-menu:focus {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.8) !important;
    outline: none !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
}

.search-form .navbar-toggler.header-nav-menu img {
    transition: all 0.3s ease !important;
    width: 18px !important;
    height: 18px !important;
    filter: brightness(0) invert(1) !important;
    background: transparent !important;
    opacity: 0.6 !important;
}

.search-form .navbar-toggler.header-nav-menu:hover img {
    opacity: 0.8 !important;
    transform: scale(1.1) !important;
}

.search-form input[type="text"] {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    outline: none !important;
    flex: 1 !important;
    font-size: 14px !important;
    padding: 0 !important;
    width: 100% !important;
}

.search-form input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px !important;
}

.search-form input[type="text"]:focus {
    color: #ffffff !important;
}

.search-form:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.search-form:focus-within {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* Header styling to match the image */
header {
    background: var(--bg-secondary, #0E1012) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Light mode header - match dark mode design */
[data-theme="light"] header {
    background: var(--bg-secondary, #0E1012) !important;
    border-radius: 50px !important;
    box-shadow: var(--shadow-md, 5px 5px 5px #15191c63) !important;
    color: var(--text-primary, #ffffff) !important;
    position: sticky !important;
    margin: 26px auto !important;
    padding: 14px 40px !important;
    max-width: 1228px !important;
    top: 26px !important;
}

/* Light mode header form - match dark mode */
[data-theme="light"] header form {
    background: var(--bg-primary, #15191C) !important;
    color: var(--text-primary, #ffffff) !important;
}

/* Light mode header form input - match dark mode */
[data-theme="light"] header form input {
    background: transparent !important;
    color: var(--text-primary, #ffffff) !important;
}

/* Light mode header form input placeholder - match dark mode */
[data-theme="light"] header form input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Ensure the search form is properly positioned in the header */
header .right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* Responsive design for search form */
@media (max-width: 768px) {
    .search-form {
        min-width: 200px !important;
        max-width: 300px !important;
        margin: 0 10px !important;
        padding: 10px 15px 10px 35px !important;
    }
    
    .search-form .navbar-toggler.header-nav-menu {
        left: 10px !important;
    }
    
    .search-form .navbar-toggler.header-nav-menu img {
        width: 16px !important;
        height: 16px !important;
    }
}

@media (max-width: 480px) {
    .search-form {
        min-width: 150px !important;
        max-width: 250px !important;
        margin: 0 5px !important;
        padding: 8px 12px 8px 30px !important;
    }
    
    .search-form input[type="text"] {
        font-size: 13px !important;
    }
    
    .search-form input[type="text"]::placeholder {
        font-size: 13px !important;
    }
}

/* Search Form with Image Button - Light Mode - EXACTLY match dark mode */
[data-theme="light"] .search-form {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 25px !important;
    padding: 12px 20px 12px 45px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    min-width: 300px !important;
    max-width: 500px !important;
    flex: 1 !important;
    margin: 0 40px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .search-form:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .search-form:focus-within {
    background: #ffffff !important;
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.25) !important;
}

/* Light mode search button - EXACTLY match dark mode positioning */
[data-theme="light"] .search-form .navbar-toggler.header-nav-menu {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #6c757d !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
    z-index: 2 !important;
}

[data-theme="light"] .search-form .navbar-toggler.header-nav-menu:hover {
    background: transparent !important;
    color: #2196f3 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

[data-theme="light"] .search-form .navbar-toggler.header-nav-menu:focus {
    background: transparent !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
}

[data-theme="light"] .search-form .navbar-toggler.header-nav-menu img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    transition: all 0.3s ease !important;
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    background: transparent !important;
}

/* Higher specificity for search images */
[data-theme="light"] .search-form .navbar-toggler.header-nav-menu img.loaded {
    filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
}

[data-theme="light"] .search-form .navbar-toggler.header-nav-menu img[style*="opacity: 1"] {
    filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
}

[data-theme="light"] .search-form .navbar-toggler.header-nav-menu:hover img {
    filter: brightness(0) saturate(100%) invert(10%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(85%) contrast(95%) !important;
    transform: scale(1.1) !important;
    background: transparent !important;
}

[data-theme="light"] .search-form .navbar-toggler.header-nav-menu:focus img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    transform: none !important;
    background: transparent !important;
}

/* Light mode search input - EXACTLY match dark mode (no padding, uses form padding) */
[data-theme="light"] .search-form input[type="text"] {
    background: transparent !important;
    border: none !important;
    color: #212529 !important;
    outline: none !important;
    flex: 1 !important;
    font-size: 14px !important;
    padding: 0 !important;
    width: 100% !important;
}

[data-theme="light"] .search-form input[type="text"]::placeholder {
    color: #6c757d !important;
    opacity: 0.6 !important;
    font-size: 14px !important;
}

[data-theme="light"] .search-form input[type="text"]:focus {
    color: #212529 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

/* Alternative search form styling for different layouts */
[data-theme="light"] form.searchBar {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] form.searchBar:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] form.searchBar:focus-within {
    background: #ffffff !important;
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.25) !important;
}

[data-theme="light"] form.searchBar button[type="submit"] {
    background: transparent !important;
    border: none !important;
    padding: 4px !important;
    color: #6c757d !important;
    transition: all 0.3s ease !important;
    border-radius: 4px !important;
}

[data-theme="light"] form.searchBar button[type="submit"]:hover {
    background: #ffffff !important;
    color: #2196f3 !important;
    transform: scale(1.1) !important;
}

[data-theme="light"] form.searchBar button[type="submit"]:focus {
    background: #ffffff !important;
    color: #2196f3 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.25) !important;
}

[data-theme="light"] form.searchBar button[type="submit"] img {
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
    transition: all 0.3s ease !important;
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Higher specificity for searchBar images */
[data-theme="light"] form.searchBar button[type="submit"] img.loaded {
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] form.searchBar button[type="submit"] img[style*="opacity: 1"] {
    filter: grayscale(100%) brightness(0.5) contrast(1.2) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] form.searchBar button[type="submit"]:hover img {
    filter: grayscale(100%) brightness(0.3) contrast(1.4) !important;
    transform: scale(1.1) !important;
}

[data-theme="light"] form.searchBar button[type="submit"]:focus img {
    filter: grayscale(100%) brightness(0.3) contrast(1.4) !important;
    transform: scale(1.1) !important;
}

[data-theme="light"] form.searchBar input[type="text"] {
    background: transparent !important;
    border: none !important;
    color: #212529 !important;
    outline: none !important;
    flex: 1 !important;
    font-size: 14px !important;
    padding: 4px 8px !important;
}

[data-theme="light"] form.searchBar input[type="text"]::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] form.searchBar input[type="text"]:focus {
    color: #212529 !important;
}

/* General search image styling for any search form */
[data-theme="light"] img[src*="search.png"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    transition: all 0.3s ease !important;
    filter: none !important;
}

[data-theme="light"] img[src*="search.png"].loaded {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    transition: all 0.3s ease !important;
    filter: none !important;
}

[data-theme="light"] img[src*="search.png"][style*="opacity: 1"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    transition: all 0.3s ease !important;
    filter: none !important;
}

/* Hover effects for search images - subtle brightness change */
[data-theme="light"] button:hover img[src*="search.png"],
[data-theme="light"] .navbar-toggler:hover img[src*="search.png"],
[data-theme="light"] .header-nav-menu:hover img[src*="search.png"] {
    filter: brightness(1.2) !important;
    transform: scale(1.1) !important;
}

[data-theme="light"] button:focus img[src*="search.png"],
[data-theme="light"] .navbar-toggler:focus img[src*="search.png"],
[data-theme="light"] .header-nav-menu:focus img[src*="search.png"] {
    filter: none !important;
    transform: none !important;
}

/* Additional overrides for any scrolled state classes */
[data-theme="light"] .navbar[class*="scrolled"],
[data-theme="light"] .navbar[class*="scroll"],
[data-theme="light"] .navbar[class*="fixed"] {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* ========================================
   FIXED HEADER HEIGHT - 74px
======================================== */
.main-header,
.navbar,
header {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
}

/* Ensure header content is properly aligned */
.main-header .header-content,
.navbar .navbar-nav,
header .right {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* ========================================
   LOGO HEIGHT - 60px - IDENTICAL ACROSS ALL BROWSERS & THEMES
======================================== */
.logo,
.logo img,
.navbar-brand img,
header .logo,
header .logo img,
.logo-image,
.navbar-brand .logo-image,
.header-logo .logo-image {
    height: 60px !important;
    max-height: 60px !important;
    min-height: 60px !important;
    width: auto !important;
    max-width: 143px !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    /* Ensure identical rendering across browsers */
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    image-rendering: auto !important;
    /* No filters - logo should look identical in all modes */
    filter: none !important;
    -webkit-filter: none !important;
    /* Consistent opacity and visibility */
    opacity: 1 !important;
    visibility: visible !important;
    /* Prevent any browser-specific image adjustments */
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    /* Consistent border and outline */
    border: none !important;
    outline: none !important;
    /* Consistent background */
    background: transparent !important;
    /* Prevent any transforms that might affect appearance */
    transform: none !important;
    -webkit-transform: none !important;
}

/* Logo icon height */
.logo-icon {
    height: 60px !important;
    width: 60px !important;
    max-height: 60px !important;
    min-height: 60px !important;
}

/* Ensure logo text aligns properly with 60px height */
.logo-text {
    line-height: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
}

[data-theme="light"] .navbar[class*="scrolled"] .navbar-brand,
[data-theme="light"] .navbar[class*="scroll"] .navbar-brand,
[data-theme="light"] .navbar[class*="fixed"] .navbar-brand {
    color: #f7f7f8 !important;
}

[data-theme="light"] .navbar[class*="scrolled"] .nav-link,
[data-theme="light"] .navbar[class*="scroll"] .nav-link,
[data-theme="light"] .navbar[class*="fixed"] .nav-link {
    color: #e0e7ed !important;
}

[data-theme="light"] .navbar[class*="scrolled"] .nav-link:hover,
[data-theme="light"] .navbar[class*="scroll"] .nav-link:hover,
[data-theme="light"] .navbar[class*="fixed"] .nav-link:hover {
    color: #2196f3 !important;
}

[data-theme="light"] .navbar[class*="scrolled"] .user-name,
[data-theme="light"] .navbar[class*="scroll"] .user-name,
[data-theme="light"] .navbar[class*="fixed"] .user-name {
    color: #e8ecf0 !important;
}

/* ========================================
   CARDS AND COMPONENTS LIGHT MODE
======================================== */
[data-theme="light"] .card {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .card-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .card-body {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* ========================================
   OVERRIDE SPECIFIC COMMON ELEMENTS
======================================== */
[data-theme="light"] .container,
[data-theme="light"] .section,
[data-theme="light"] .content,
[data-theme="light"] .main-content {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ========================================
   ADDITIONAL LIGHT MODE STYLING
======================================== */

/* Ensure all text elements are properly styled in light mode */
[data-theme="light"] .text-white {
    color: #212529 !important;
}

[data-theme="light"] .text-muted {
    color: #6c757d !important;
}

[data-theme="light"] .text-secondary {
    color: #6c757d !important;
}

/* Light mode for badges and labels */
[data-theme="light"] .badge {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

[data-theme="light"] .badge-primary {
    background-color: #2196f3 !important;
    color: #ffffff !important;
}

/* Light mode for dropdowns */
[data-theme="light"] .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .dropdown-item {
    color: #212529 !important;
}

[data-theme="light"] .dropdown-item:hover {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* Light mode for modals */
[data-theme="light"] .modal-content {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .modal-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
}

[data-theme="light"] .modal-footer {
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
}

/* Light mode for tables */
[data-theme="light"] .table {
    color: #212529 !important;
    background-color: #ffffff !important;
}

[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .table-hover > tbody > tr:hover > td {
    background-color: #e9ecef !important;
}

/* Light mode for alerts */
[data-theme="light"] .alert {
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .alert-success {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
}

[data-theme="light"] .alert-danger {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

[data-theme="light"] .alert-warning {
    background-color: #fff3cd !important;
    border-color: #ffeaa7 !important;
    color: #856404 !important;
}

[data-theme="light"] .alert-info {
    background-color: #d1ecf1 !important;
    border-color: #bee5eb !important;
    color: #0c5460 !important;
}

/* Light mode for progress bars */
[data-theme="light"] .progress {
    background-color: #e9ecef !important;
}

[data-theme="light"] .progress-bar {
    background-color: #2196f3 !important;
}

/* Light mode for pagination */
[data-theme="light"] .pagination .page-link {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .pagination .page-link:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}

[data-theme="light"] .pagination .page-item.active .page-link {
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
}

/* Light mode for breadcrumbs */
[data-theme="light"] .breadcrumb {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .breadcrumb-item a {
    color: #2196f3 !important;
}

[data-theme="light"] .breadcrumb-item.active {
    color: #6c757d !important;
}

/* ========================================
   CREATOR PAGE LIGHT MODE STYLING
======================================== */

/* Main creator page container */
[data-theme="light"] .creators-main {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Search section */
[data-theme="light"] .search-section {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .search-bar {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

/* Light mode search input - EXACTLY match dark mode structure */
[data-theme="light"] .search-input {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 20px 12px 45px !important;
    color: #212529 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

[data-theme="light"] .search-input::placeholder {
    color: #6c757d !important;
    opacity: 0.6 !important;
}

[data-theme="light"] .search-input:focus {
    outline: none !important;
    background: transparent !important;
    border: none !important;
}

/* Light mode search icon - EXACTLY match dark mode positioning */
[data-theme="light"] .search-icon {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #6c757d !important;
    font-size: 16px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Filters section */
[data-theme="light"] .filters-section {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .filter-group {
    background-color: transparent !important;
}

[data-theme="light"] .filter-item {
    background-color: transparent !important;
}

[data-theme="light"] .filter-select {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.5rem !important;
}

/* Creator page filter selects - ensure proper arrow alignment */
.creators-main .filter-select,
.creators-main .form-select.filter-select {
    padding-right: 2.5rem !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

[data-theme="light"] .creators-main .filter-select,
[data-theme="light"] .creators-main .form-select.filter-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    padding-right: 2.5rem !important;
    background-position: right 0.75rem center !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

[data-theme="light"] .filter-select:focus {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25) !important;
}

[data-theme="light"] .filter-select option {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .filters-btn {
    background-color: transparent !important;
    border: 2px solid #2196f3 !important;
    color: #2196f3 !important;
}

[data-theme="light"] .filters-btn:hover {
    background-color: #2196f3 !important;
    color: #ffffff !important;
}

/* Creator grid and cards */
[data-theme="light"] .creator-grid {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .creator-card {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .creator-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    border-color: #2196f3 !important;
}

[data-theme="light"] .creator-image {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .creator-info {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .creator-name {
    color: #212529 !important;
    text-decoration: none !important;
}

[data-theme="light"] .creator-name-link {
    color: #212529 !important;
    text-decoration: none !important;
}

[data-theme="light"] .creator-name-link:hover {
    color: #2196f3 !important;
    text-decoration: none !important;
}

[data-theme="light"] .creator-name-link:focus {
    text-decoration: none !important;
}

[data-theme="light"] .creator-name-link:visited {
    text-decoration: none !important;
}

[data-theme="light"] .creator-name-link .creator-name {
    text-decoration: none !important;
}

[data-theme="light"] .creator-name-link:hover .creator-name {
    text-decoration: none !important;
}

[data-theme="light"] .creator-status {
    color: #6c757d !important;
}

[data-theme="light"] .creator-price {
    color: #2196f3 !important;
    font-weight: 600 !important;
}

/* Creator actions buttons */
[data-theme="light"] .creator-actions {
    background-color: transparent !important;
}

[data-theme="light"] .btn-follow {
    background-color: #2196f3 !important;
    border: 1px solid #2196f3 !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn-follow:hover {
    background-color: #1976d2 !important;
    border-color: #1976d2 !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn-message {
    background-color: transparent !important;
    border: 1px solid #2196f3 !important;
    color: #2196f3 !important;
}

[data-theme="light"] .btn-message:hover {
    background-color: #2196f3 !important;
    color: #ffffff !important;
}

/* Status badges */
[data-theme="light"] .status-badges {
    background-color: transparent !important;
}

[data-theme="light"] .badge {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

[data-theme="light"] .badge-live {
    background-color: #ff4757 !important;
    color: #ffffff !important;
}

[data-theme="light"] .badge-new {
    background-color: #2ed573 !important;
    color: #ffffff !important;
}

[data-theme="light"] .badge-top {
    background-color: #ffa502 !important;
    color: #ffffff !important;
}

[data-theme="light"] .badge-verified {
    background-color: #2196f3 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* Verified badge image/icon - ensure visibility in both modes */
/* Base styles - Dark mode default */
.verified,
img.verified,
.postHeader .verified,
.user .verified,
.mainSection .post .postHeader .user .verified,
.post .postHeader .user .verified,
.postHeader .user .verified,
.feed .postHeader .verified,
.mainSection .feed .postHeader .verified {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: none !important;
    -webkit-filter: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Minimum gap between username and verified badge in postHeader */
.postHeader .user p + .verified,
.postHeader .user p + img.verified,
.post .postHeader .user p + .verified,
.post .postHeader .user p + img.verified,
.mainSection .post .postHeader .user p + .verified,
.mainSection .post .postHeader .user p + img.verified,
.feed .postHeader .user p + .verified,
.feed .postHeader .user p + img.verified,
.mainSection .feed .postHeader .user p + .verified,
.mainSection .feed .postHeader .user p + img.verified {
    margin-left: 8px !important;
    min-width: 8px !important;
}


/* Profile name verified badge - larger and more prominent */
/* Maximum specificity to override all other rules */
.profileInfo .name .verified,
.name .verified,
h2.name .verified,
h2.name img.verified,
.name img.verified,
.profileInfo .name img.verified,
h2.name img[class*="verified"],
.name img[class*="verified"],
.profileInfo .name img[class*="verified"],
h2.name img[src*="verified"],
.name img[src*="verified"],
.profileInfo .name img[src*="verified"],
.mainSection.publicProfile .middleSec .row .left .name .verified,
.mainSection.publicProfile .middleSec .row .left h2.name .verified,
.mainSection.publicProfile .middleSec .row .left .name img.verified,
.mainSection.publicProfile .middleSec .row .left h2.name img.verified {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin-left: 10px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: none !important;
    -webkit-filter: none !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Profile username verified badge - larger and more visible */
/* Maximum specificity to override all other rules */
.profileInfo .username .verified,
.username .verified,
p.username .verified,
p.username img.verified,
.username img.verified,
.profileInfo .username img.verified,
p.username img[class*="verified"],
.username img[class*="verified"],
.profileInfo .username img[class*="verified"],
p.username img[src*="verified"],
.username img[src*="verified"],
.profileInfo .username img[src*="verified"],
.mainSection.publicProfile .middleSec .row .left .username .verified,
.mainSection.publicProfile .middleSec .row .left p.username .verified,
.mainSection.publicProfile .middleSec .row .left .username img.verified,
.mainSection.publicProfile .middleSec .row .left p.username img.verified {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: none !important;
    -webkit-filter: none !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Comment verified badge - consistent size */
.comment-username + .verified,
.comment-user .verified,
.comment-item .verified,
.comment-header .verified {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: none !important;
    -webkit-filter: none !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Profile stat item verified badge */
.profile-stat-item .verified,
.profile-stat-item h4 .verified {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: none !important;
    -webkit-filter: none !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.profile-stat-item p .verified {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    margin-left: 4px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: none !important;
    -webkit-filter: none !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* Light mode verified badge - Maximum specificity to override all filters */
/* Match profile name color (#212529) in light mode */
[data-theme="light"] .verified,
[data-theme="light"] img.verified,
[data-theme="light"] .postHeader .verified,
[data-theme="light"] .user .verified,
[data-theme="light"] .mainSection .post .postHeader .user .verified,
[data-theme="light"] .post .postHeader .user .verified,
[data-theme="light"] .postHeader .user .verified,
[data-theme="light"] a.user .verified,
[data-theme="light"] .user a .verified,
[data-theme="light"] img[src*="verified"],
[data-theme="light"] img[src*="verified.png"],
[data-theme="light"] .post .user .verified,
[data-theme="light"] .gallery .postHeader .user .verified,
[data-theme="light"] .feed .postHeader .verified,
[data-theme="light"] .feed .postHeader .user .verified,
[data-theme="light"] .mainSection .feed .postHeader .verified,
[data-theme="light"] .mainSection .feed .postHeader .user .verified,
[data-theme="light"] .mainSection .post .user .verified,
[data-theme="light"] .mainSection.publicProfile .post .postHeader .user .verified,
[data-theme="light"] .mainSection.publicProfile .middleSec .row .left .name .verified,
[data-theme="light"] .mainSection.publicProfile .middleSec .row .left .username .verified,
html[data-theme="light"] .verified,
html[data-theme="light"] img.verified,
html[data-theme="light"] .postHeader .verified,
html[data-theme="light"] .user .verified,
html[data-theme="light"] .feed .postHeader .verified,
html[data-theme="light"] .feed .postHeader .user .verified,
html[data-theme="light"] .mainSection .post .postHeader .user .verified,
body[data-theme="light"] .verified,
body[data-theme="light"] img.verified,
body[data-theme="light"] .postHeader .verified,
body[data-theme="light"] .user .verified,
body[data-theme="light"] .feed .postHeader .verified,
body[data-theme="light"] .feed .postHeader .user .verified {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain !important;
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
    border: none !important;
    margin-left: 6px !important;
    padding: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Override any global image filters for verified badge in light mode */
/* Match profile name color (#212529) */
[data-theme="light"] .user img.verified,
[data-theme="light"] .postHeader .user img.verified,
[data-theme="light"] .post .postHeader .user img.verified,
[data-theme="light"] .mainSection .post .postHeader .user img.verified,
html[data-theme="light"] .user img.verified,
html[data-theme="light"] .postHeader .user img.verified,
body[data-theme="light"] .user img.verified,
body[data-theme="light"] .postHeader .user img.verified {
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Global override - Ensure verified badge is always visible in light mode regardless of parent filters */
/* Match profile name color (#212529) */
[data-theme="light"] img[class*="verified"],
[data-theme="light"] img[src*="verified"],
[data-theme="light"] .verified img,
[data-theme="light"] * .verified,
[data-theme="light"] * img.verified {
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
}

/* Dark mode verified badge */
[data-theme="dark"] .verified,
[data-theme="dark"] img.verified,
[data-theme="dark"] .postHeader .verified,
[data-theme="dark"] .user .verified,
[data-theme="dark"] .mainSection .post .postHeader .user .verified,
[data-theme="dark"] .post .postHeader .user .verified,
[data-theme="dark"] .postHeader .user .verified,
[data-theme="dark"] a.user .verified,
[data-theme="dark"] .user a .verified,
[data-theme="dark"] img[src*="verified"],
[data-theme="dark"] img[src*="verified.png"],
[data-theme="dark"] .post .user .verified,
[data-theme="dark"] .gallery .postHeader .user .verified,
[data-theme="dark"] .mainSection .post .user .verified,
html[data-theme="dark"] .verified,
html[data-theme="dark"] img.verified,
body[data-theme="dark"] .verified,
body[data-theme="dark"] img.verified {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: none !important;
    -webkit-filter: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
    flex-shrink: 0 !important;
}

/* Dark mode - Profile name verified badge (larger) */
[data-theme="dark"] .profileInfo .name .verified,
[data-theme="dark"] .name .verified,
[data-theme="dark"] h2.name .verified,
html[data-theme="dark"] .profileInfo .name .verified,
html[data-theme="dark"] .name .verified,
html[data-theme="dark"] h2.name .verified,
body[data-theme="dark"] .profileInfo .name .verified,
body[data-theme="dark"] .name .verified,
body[data-theme="dark"] h2.name .verified {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin-left: 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: none !important;
    -webkit-filter: none !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Dark mode - Profile username verified badge */
[data-theme="dark"] .profileInfo .username .verified,
[data-theme="dark"] .username .verified,
[data-theme="dark"] p.username .verified,
html[data-theme="dark"] .profileInfo .username .verified,
html[data-theme="dark"] .username .verified,
html[data-theme="dark"] p.username .verified,
body[data-theme="dark"] .profileInfo .username .verified,
body[data-theme="dark"] .username .verified,
body[data-theme="dark"] p.username .verified {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    margin-left: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: none !important;
    -webkit-filter: none !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Dark mode - Comment verified badge */
[data-theme="dark"] .comment-username + .verified,
[data-theme="dark"] .comment-user .verified {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin-left: 5px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: none !important;
    -webkit-filter: none !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Font Awesome verified icons - ensure visibility */
.fa-check-circle,
i.fa-check-circle,
.fas.fa-check-circle,
.far.fa-check-circle {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: #2196f3 !important;
}

[data-theme="light"] .fa-check-circle,
[data-theme="light"] i.fa-check-circle,
[data-theme="light"] .fas.fa-check-circle,
[data-theme="light"] .far.fa-check-circle {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: #2196f3 !important;
}

[data-theme="dark"] .fa-check-circle,
[data-theme="dark"] i.fa-check-circle,
[data-theme="dark"] .fas.fa-check-circle,
[data-theme="dark"] .far.fa-check-circle {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    color: #2196f3 !important;
}

/* No data message */
[data-theme="light"] #no-data-message {
    background-color: transparent !important;
}

[data-theme="light"] #no-data-message h2 {
    color: #212529 !important;
}

/* Load more section */
[data-theme="light"] .load-more-section {
    background-color: transparent !important;
}

[data-theme="light"] .spinner-border {
    color: #2196f3 !important;
}

/* End of results */
[data-theme="light"] .end-of-results {
    background-color: transparent !important;
}

[data-theme="light"] .end-of-results p {
    color: #6c757d !important;
}

/* Creator links */
[data-theme="light"] .creator-link {
    color: #212529 !important;
}

[data-theme="light"] .creator-link:hover {
    color: #2196f3 !important;
}

/* Form elements in creator page */
[data-theme="light"] .form-select {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .form-select:focus {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25) !important;
}

[data-theme="light"] .form-select option {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Pagination for creator page */
[data-theme="light"] .pagination {
    background-color: transparent !important;
}

[data-theme="light"] .pagination .page-link {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .pagination .page-link:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}

[data-theme="light"] .pagination .page-item.active .page-link {
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
}

/* Creator card hover effects in light mode */
[data-theme="light"] .creator-card:hover .creator-name {
    color: #2196f3 !important;
}

[data-theme="light"] .creator-card:hover .creator-price {
    transform: scale(1.05) !important;
}

/* Mobile responsive adjustments for creator page */
@media (max-width: 768px) {
    header {
        display: none !important;
    }
    [data-theme="light"] .search-section {
        background-color: #ffffff !important;
    }
    
    [data-theme="light"] .filters-section {
        background-color: #ffffff !important;
    }
    
    [data-theme="light"] .creator-grid {
        background-color: #ffffff !important;
    }
}

/* ========================================
   MOBILE HEADER DARK THEME STYLING
======================================== */

/* Dark theme mobile header - only visible on mobile */
@media (max-width: 768px) {
    [data-theme="dark"] .mobileHeader {
        padding: 12px 16px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        z-index: 1000 !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Dark theme mobile header - hamburger menu button */
    [data-theme="dark"] .mobileHeader > button:first-child {
        background: none !important;
        border: none !important;
        padding: 6px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        width: auto !important;
    }

    [data-theme="dark"] .mobileHeader > button:first-child img {
        width: 20px !important;
        height: 20px !important;
        filter: brightness(0) invert(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    [data-theme="light"] .mobileHeader > button:first-child img {
        width: 20px !important;
        height: 20px !important;
        filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    /* Dark theme mobile header - search bar */
    [data-theme="dark"] .mobileHeader .searchBar {
        background-color: #2d2d2d !important;
        border: 1px solid #404040 !important;
        border-radius: 20px !important;
        padding: 6px 12px !important;
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
        margin: 0 !important;
        position: relative !important;
        box-sizing: border-box !important;
        height: 36px !important;
        min-width: 0 !important;
        max-width: calc(100% - 60px) !important;
    }

    [data-theme="dark"] .mobileHeader .searchBar input {
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        outline: none !important;
        flex: 1 !important;
        padding: 0 8px !important;
        font-size: 13px !important;
        height: 100% !important;
    }

    [data-theme="dark"] .mobileHeader .searchBar input::placeholder {
        color: #888888 !important;
    }

    [data-theme="dark"] .mobileHeader .searchBar button[type="submit"] {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 4px !important;
    }

    [data-theme="dark"] .mobileHeader .searchBar button[type="submit"] img {
        width: 18px !important;
        height: 18px !important;
        filter: brightness(0) invert(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        object-fit: contain !important;
    }

    /* Dark theme mobile header - dropdown button */
    [data-theme="dark"] .mobileHeader .searchBar .dropdown {
        position: relative !important;
        margin-left: 6px !important;
    }

    [data-theme="dark"] .mobileHeader .searchBar .dropdownButton {
        background: none !important;
        border: none !important;
        padding: 4px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    [data-theme="dark"] .mobileHeader .searchBar .dropdownButton img {
        width: 3px !important;
        height: 12px !important;
        filter: brightness(0) invert(1) !important;
    }

    /* Dark theme mobile header - dropdown menu */
    [data-theme="dark"] .mobileHeader .searchBar .dropdownMenu {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        background-color: #2d2d2d !important;
        border: 1px solid #404040 !important;
        border-radius: 8px !important;
        padding: 8px 0 !important;
        min-width: 150px !important;
        display: none !important;
        z-index: 1001 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    [data-theme="dark"] .mobileHeader .searchBar .dropdown input[type="checkbox"]:checked ~ .dropdownMenu {
        display: block !important;
    }

    [data-theme="dark"] .mobileHeader .searchBar .dropdownMenu a {
        display: block !important;
        padding: 10px 15px !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 14px !important;
        transition: background-color 0.2s ease !important;
    }

    [data-theme="dark"] .mobileHeader .searchBar .dropdownMenu a:hover {
        background-color: #404040 !important;
    }

    /* Dark theme mobile header - dropdown background overlay */
    [data-theme="dark"] .mobileHeader .searchBar .dropdown .bg {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: transparent !important;
        z-index: 1000 !important;
        display: none !important;
    }

    [data-theme="dark"] .mobileHeader .searchBar .dropdown input[type="checkbox"]:checked ~ .bg {
        display: block !important;
    }

}

/* Ensure mobile header is only visible on mobile devices */
@media (min-width: 769px) {
    .mobileHeader {
        display: none !important;
    }
}

/* Mobile header should be hidden by default */
.mobileHeader {
    display: none !important;
}

/* Additional mobile header adjustments for better mobile experience */
@media (max-width: 768px) {
    .mobileHeader {
        display: flex !important;
        width: 100% !important;
        gap: 10px !important;
        padding: 10px 14px !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        align-items: center !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }
    
    [data-theme="dark"] .mobileHeader {
        background: #15191C !important;
        backdrop-filter: blur(8px) !important;
    }

    [data-theme="light"] .mobileHeader {
        background: #ffffff !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
    
    [data-theme="dark"] .mobileHeader .searchBar input {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Ensure proper spacing and alignment */
    [data-theme="dark"] .mobileHeader {
        min-height: 48px !important;
        align-items: center !important;
    }
    
    /* Fine-tune user profile section alignment */
    [data-theme="dark"] .mobileHeader .userProfileSection {
        align-items: center !important;
    }
    
    /* Ensure search bar has proper height and alignment */
    [data-theme="dark"] .mobileHeader .searchBar {
        min-height: 36px !important;
        align-items: center !important;
        background: rgba(21, 25, 28, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 999px !important;
        padding: 0 12px !important;
        gap: 10px !important;
    }

    [data-theme="light"] .mobileHeader .searchBar {
        min-height: 36px !important;
        align-items: center !important;
        background: rgba(248, 249, 250, 0.9) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 999px !important;
        padding: 0 12px !important;
        gap: 10px !important;
    }
    
    /* Ensure all mobile header elements are properly aligned */
    [data-theme="dark"] .mobileHeader > * {
        display: flex !important;
        align-items: center !important;
        vertical-align: middle !important;
    }
    
    /* Ensure mobile header maintains single row layout */
    [data-theme="dark"] .mobileHeader {
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    
    /* Ensure search bar elements are inline */
    [data-theme="dark"] .mobileHeader .searchBar > * {
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
    }

    .mobileHeader button {
        border: none !important;
        background: transparent !important;
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        transition: background 0.2s ease, color 0.2s ease !important;
        flex-shrink: 0 !important;
    }

    .mobileHeader button img {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* Ensure menu icon in mobileHeader is always visible */
    .mobileHeader button img.loaded,
    .mobileHeader button img[src*="menu.png"],
    .mobileHeader button img[src*="menu.png"].loaded {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
    }
    
    /* Dark mode menu icon */
    [data-theme="dark"] .mobileHeader button img[src*="menu.png"],
    [data-theme="dark"] .mobileHeader button img[src*="menu.png"].loaded {
        filter: brightness(0) invert(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* Light mode menu icon */
    [data-theme="light"] .mobileHeader button img[src*="menu.png"],
    [data-theme="light"] .mobileHeader button img[src*="menu.png"].loaded {
        filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* Mobile header logo image sizing - consistent with desktop - IDENTICAL across browsers & themes */
    .mobileHeader .logo,
    .mobileHeader .logo.loaded,
    .mobileHeader img.logo,
    .mobileHeader img.logo.loaded,
    .mobileHeader .logo img {
        height: 44px !important;
        max-height: 44px !important;
        min-height: 44px !important;
        width: auto !important;
        max-width: 105px !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        /* No filters - logo should look identical */
        filter: none !important;
        -webkit-filter: none !important;
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
        image-rendering: auto !important;
        border: none !important;
        outline: none !important;
        background: transparent !important;
    }
    
    /* Light mode mobile logo - IDENTICAL to dark mode */
    [data-theme="light"] .mobileHeader .logo,
    [data-theme="light"] .mobileHeader .logo.loaded,
    [data-theme="light"] .mobileHeader img.logo,
    [data-theme="light"] .mobileHeader img.logo.loaded,
    [data-theme="light"] .mobileHeader .logo img {
        filter: none !important;
        -webkit-filter: none !important;
    }
    
    /* Dark mode mobile logo - ensure no filters */
    [data-theme="dark"] .mobileHeader .logo,
    [data-theme="dark"] .mobileHeader .logo.loaded,
    [data-theme="dark"] .mobileHeader img.logo,
    [data-theme="dark"] .mobileHeader img.logo.loaded,
    [data-theme="dark"] .mobileHeader .logo img {
        filter: none !important;
        -webkit-filter: none !important;
    }
    
    /* Sidebar logo sizing - consistent with header logo */
    .mainSection .sidebar .logo,
    .mainSection .sidebar .logo.loaded,
    .mainSection .sidebar img.logo,
    .mainSection .sidebar img.logo.loaded {
        height: 44px !important;
        max-height: 44px !important;
        min-height: 44px !important;
        width: auto !important;
        max-width: 135px !important;
        object-fit: contain !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-bottom: 23px !important;
    }

    [data-theme="dark"] .mobileHeader button {
        color: #f8f9fa !important;
    }

    [data-theme="light"] .mobileHeader button {
        color: #212529 !important;
    }

    [data-theme="dark"] .mobileHeader button:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="light"] .mobileHeader button:hover {
        background: rgba(0, 0, 0, 0.06) !important;
    }

    .mobileHeader .theme-toggle-btn {
        border: 1px solid currentColor !important;
        font-size: 18px !important;
    }

    .mobileHeader .searchBar {
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
        margin-left: 6px !important;
        border-radius: 999px !important;
    }

    .mobileHeader .searchBar button[type="submit"],
    .mobileHeader .searchBar .dropdown {
        width: 40px !important;
        height: 40px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        background: transparent !important;
        flex-shrink: 0 !important;
    }

    .mobileHeader .searchBar input {
        flex: 1 !important;
        border: none !important;
        background: transparent !important;
        font-size: 15px !important;
        color: inherit !important;
        min-width: 0 !important;
    }

    .mobileHeader .searchBar input::placeholder {
        color: inherit !important;
        opacity: 0.6 !important;
    }

    /* Ensure search icon is visible in mobile header */
    .mobileHeader .searchBar button[type="submit"] img {
        width: 18px !important;
        height: 18px !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        object-fit: contain !important;
    }

    /* Dark mode search icon in mobile header */
    [data-theme="dark"] .mobileHeader .searchBar button[type="submit"] img {
        filter: brightness(0) invert(1) !important;
    }

    /* Light mode search icon in mobile header */
    [data-theme="light"] .mobileHeader .searchBar button[type="submit"] img {
        filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    }

    /* Hide theme toggle inside mobile header to match single-row design */
    .mobileHeader .theme-toggle-btn {
        display: none !important;
    }

    .mobileHeader .searchBar .dropdown {
        position: relative !important;
    }

    .mobileHeader .searchBar .dropdownMenu {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        min-width: 160px !important;
        padding: 10px !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
        background: var(--bg-primary, #0E1012) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        opacity: 0 !important;
        transform: translateY(10px) !important;
        pointer-events: none !important;
        transition: opacity 0.2s ease, transform 0.2s ease !important;
    }

    [data-theme="light"] .mobileHeader .searchBar .dropdownMenu {
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
    }

    .mobileHeader .searchBar .dropdown input[type="checkbox"]:checked ~ .dropdownMenu {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    .mobileHeader .searchBar .dropdownMenu a {
        display: block !important;
        padding: 8px 10px !important;
        font-size: 14px !important;
        color: inherit !important;
        border-radius: 6px !important;
        text-decoration: none !important;
    }

    .mobileHeader .searchBar .dropdownMenu a:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="light"] .mobileHeader .searchBar .dropdownMenu a:hover {
        background: rgba(0, 0, 0, 0.05) !important;
    }
}

/* ========================================
   MARKETPLACE LIGHT MODE STYLING
======================================== */

/* Marketplace main container */
[data-theme="light"] .marketplace-container {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Marketplace header section */
[data-theme="light"] .marketplace-header {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .marketplace-header::before {
    background: linear-gradient(135deg, rgba(166, 22, 81, 0.05) 0%, rgba(1, 173, 241, 0.05) 100%) !important;
}

[data-theme="light"] .marketplace-header-content {
    color: #212529 !important;
}

[data-theme="light"] .marketplace-title {
    color: #212529 !important;
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="light"] .marketplace-title i {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="light"] .marketplace-subtitle {
    color: #6c757d !important;
}

/* Marketplace navigation tabs */
[data-theme="light"] .marketplace-nav-tabs {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 10px !important;
}

[data-theme="light"] .marketplace-nav-tabs .nav-tab {
    color: #6c757d !important;
    background-color: transparent !important;
}

[data-theme="light"] .marketplace-nav-tabs .nav-tab:hover {
    color: #212529 !important;
    background-color: #e9ecef !important;
}

[data-theme="light"] .marketplace-nav-tabs .nav-tab.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #A61651 0%, #01ADF1 100%) !important;
}

/* Marketplace stats section */
[data-theme="light"] .marketplace-stats {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 15px !important;
}

[data-theme="light"] .stat-item {
    background-color: transparent !important;
    color: #212529 !important;
}

[data-theme="light"] .stat-item h3 {
    color: #212529 !important;
}

[data-theme="light"] .stat-item p {
    color: #6c757d !important;
}

/* Real-time indicator */
[data-theme="light"] .realtime-indicator {
    background-color: #e8f5e8 !important;
    color: #2e7d32 !important;
    border: 1px solid #c8e6c9 !important;
}

[data-theme="light"] .realtime-indicator i {
    color: #4caf50 !important;
}

/* Section titles */
[data-theme="light"] .section-title {
    color: #212529 !important;
}

/* Category cards */
[data-theme="light"] .category-card {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .category-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

[data-theme="light"] .category-card h3 {
    color: #212529 !important;
}

[data-theme="light"] .category-card p {
    color: #6c757d !important;
}

[data-theme="light"] .category-count {
    color: #6c757d !important;
}

/* Product cards */
[data-theme="light"] .product-card {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

[data-theme="light"] .product-title {
    color: #212529 !important;
}

[data-theme="light"] .product-price {
    color: #A61651 !important;
}

[data-theme="light"] .product-meta {
    border-top-color: #dee2e6 !important;
}

[data-theme="light"] .bid-count {
    color: #6c757d !important;
}

[data-theme="light"] .time-remaining {
    color: #212529 !important;
}

/* No products state */
[data-theme="light"] .no-products {
    color: #6c757d !important;
}

[data-theme="light"] .no-products h3 {
    color: #212529 !important;
}

/* Loading spinner */
[data-theme="light"] .spinner-border {
    color: #2196f3 !important;
}

/* Marketplace buttons and form elements */
[data-theme="light"] .btn-primary {
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn-primary:hover {
    background-color: #1976d2 !important;
    border-color: #1976d2 !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn-outline-primary {
    color: #2196f3 !important;
    border-color: #2196f3 !important;
    background-color: transparent !important;
}

[data-theme="light"] .btn-outline-primary:hover {
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
}

/* Marketplace form controls */
[data-theme="light"] .form-control {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .form-control:focus {
    background-color: #ffffff !important;
    border-color: #2196f3 !important;
    color: #212529 !important;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25) !important;
}

[data-theme="light"] .form-select {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .form-select:focus {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25) !important;
}

/* Marketplace search and filter elements */
[data-theme="light"] .search-box {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .search-box:focus {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25) !important;
}

[data-theme="light"] .filter-section {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .filter-label {
    color: #212529 !important;
}

[data-theme="light"] .filter-option {
    color: #212529 !important;
}

[data-theme="light"] .filter-option:hover {
    background-color: #e9ecef !important;
}

/* Marketplace pagination */
[data-theme="light"] .pagination .page-link {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .pagination .page-link:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}

[data-theme="light"] .pagination .page-item.active .page-link {
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
}

/* Marketplace alerts and notifications */
[data-theme="light"] .alert {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .alert-success {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
}

[data-theme="light"] .alert-info {
    background-color: #d1ecf1 !important;
    border-color: #bee5eb !important;
    color: #0c5460 !important;
}

[data-theme="light"] .alert-warning {
    background-color: #fff3cd !important;
    border-color: #ffeaa7 !important;
    color: #856404 !important;
}

[data-theme="light"] .alert-danger {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

/* ========================================
   ADDITIONAL MARKETPLACE PAGES LIGHT MODE
======================================== */

/* My Listings page specific styles */
[data-theme="light"] .my-listings-container {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .listings-card {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .listings-stats {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    backdrop-filter: none !important;
}

[data-theme="light"] .listings-stats .stat-item h3 {
    color: #212529 !important;
}

[data-theme="light"] .listings-stats .stat-item p {
    color: #6c757d !important;
}

/* Create marketplace page specific styles */
[data-theme="light"] .create-marketplace-container {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Product overlay in light mode */
[data-theme="light"] .product-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="light"] .product-overlay .btn {
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
}

[data-theme="light"] .product-overlay .btn:hover {
    background-color: #1976d2 !important;
    border-color: #1976d2 !important;
    color: #ffffff !important;
}

/* Action buttons in light mode */
[data-theme="light"] .btn-create {
    background-color: #ffc107 !important;
    color: #212529 !important;
    border-color: #ffc107 !important;
}

[data-theme="light"] .btn-create:hover {
    background-color: #ff8f00 !important;
    color: #212529 !important;
    border-color: #ff8f00 !important;
}

[data-theme="light"] .btn-browse {
    background-color: #ffffff !important;
    color: #2196f3 !important;
    border-color: #2196f3 !important;
}

[data-theme="light"] .btn-browse:hover {
    background-color: #f8f9fa !important;
    color: #1976d2 !important;
    border-color: #1976d2 !important;
}

/* Product status badges in light mode */
[data-theme="light"] .status-badge {
    background-color: #e9ecef !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .status-badge.active {
    background-color: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

[data-theme="light"] .status-badge.sold {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}

[data-theme="light"] .status-badge.pending {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffeaa7 !important;
}

/* Product action buttons in light mode */
[data-theme="light"] .product-actions .btn {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .product-actions .btn:hover {
    background-color: #f8f9fa !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}

[data-theme="light"] .product-actions .btn-primary {
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
}

[data-theme="light"] .product-actions .btn-primary:hover {
    background-color: #1976d2 !important;
    border-color: #1976d2 !important;
    color: #ffffff !important;
}

[data-theme="light"] .product-actions .btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

[data-theme="light"] .product-actions .btn-danger:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
    color: #ffffff !important;
}

/* Product details in light mode */
[data-theme="light"] .product-details {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .product-details h3 {
    color: #212529 !important;
}

[data-theme="light"] .product-details p {
    color: #6c757d !important;
}

[data-theme="light"] .product-details .price {
    color: #A61651 !important;
}

[data-theme="light"] .product-details .description {
    color: #212529 !important;
}

/* Bid information in light mode */
[data-theme="light"] .bid-info {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .bid-info h4 {
    color: #212529 !important;
}

[data-theme="light"] .bid-info .bid-amount {
    color: #A61651 !important;
}

[data-theme="light"] .bid-info .bid-time {
    color: #6c757d !important;
}

/* ========================================
   MY BIDS PAGE LIGHT MODE STYLING
======================================== */

/* My Bids page container */
[data-theme="light"] .my-bids-container {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Bids header section */
[data-theme="light"] .bids-header {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .bids-header h1 {
    color: #212529 !important;
}

[data-theme="light"] .bids-header p {
    color: #6c757d !important;
}

/* Bids stats section */
[data-theme="light"] .bids-stats {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    backdrop-filter: none !important;
}

[data-theme="light"] .bids-stats .stat-item h3 {
    color: #212529 !important;
}

[data-theme="light"] .bids-stats .stat-item p {
    color: #6c757d !important;
}

/* Bids card container */
[data-theme="light"] .bids-card {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .bids-card h2 {
    color: #212529 !important;
}

/* Bid items */
[data-theme="light"] .bid-item {
    background-color: #ffffff !important;
    border: 2px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .bid-item:hover {
    border-color: #2196f3 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .bid-item.winning {
    border-color: #ffc107 !important;
    background-color: #fffbf0 !important;
}

[data-theme="light"] .bid-item.outbid {
    border-color: #dc3545 !important;
    background-color: #fdf2f2 !important;
}

/* Bid header and details */
[data-theme="light"] .bid-header {
    color: #212529 !important;
}

[data-theme="light"] .product-info {
    color: #212529 !important;
}

[data-theme="light"] .product-title {
    color: #212529 !important;
}

[data-theme="light"] .product-category {
    color: #6c757d !important;
}

[data-theme="light"] .bid-amount {
    color: #A61651 !important;
}

/* Bid status section */
[data-theme="light"] .bid-status {
    border-top-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .bid-time {
    color: #6c757d !important;
}

/* Status badges */
[data-theme="light"] .status-badge {
    background-color: #e9ecef !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .status-winning {
    background-color: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

[data-theme="light"] .status-outbid {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}

[data-theme="light"] .status-active {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
    border-color: #bee5eb !important;
}

/* Product image styling */
[data-theme="light"] .product-image {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* No bids state */
[data-theme="light"] .no-bids {
    color: #6c757d !important;
}

[data-theme="light"] .no-bids h3 {
    color: #212529 !important;
}

[data-theme="light"] .no-bids p {
    color: #6c757d !important;
}

[data-theme="light"] .no-bids i {
    color: #6c757d !important;
}

/* Action buttons */
[data-theme="light"] .action-buttons {
    background-color: transparent !important;
}

[data-theme="light"] .btn-marketplace {
    background-color: #ffffff !important;
    color: #2196f3 !important;
    border: 1px solid #2196f3 !important;
}

[data-theme="light"] .btn-marketplace:hover {
    background-color: #f8f9fa !important;
    color: #1976d2 !important;
    border-color: #1976d2 !important;
}

[data-theme="light"] .btn-browse {
    background-color: #ffffff !important;
    color: #2196f3 !important;
    border: 1px solid #2196f3 !important;
}

[data-theme="light"] .btn-browse:hover {
    background-color: #f8f9fa !important;
    color: #1976d2 !important;
    border-color: #1976d2 !important;
}

[data-theme="light"] .btn-my-listings {
    background-color: #2196f3 !important;
    color: #ffffff !important;
    border: 1px solid #2196f3 !important;
}

[data-theme="light"] .btn-my-listings:hover {
    background-color: #1976d2 !important;
    color: #ffffff !important;
    border-color: #1976d2 !important;
}

/* Bid notifications */
[data-theme="light"] .bid-notification {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border: 1px solid #c82333 !important;
}

/* Bid update animations */
[data-theme="light"] .bid-update {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .winning {
    color: #28a745 !important;
}

[data-theme="light"] .outbid {
    color: #dc3545 !important;
}

/* Loading spinner */
[data-theme="light"] .spinner-border {
    color: #2196f3 !important;
}

/* ========================================
   USER PROFILE PAGE LIGHT MODE STYLING
======================================== */

/* User profile main section */
[data-theme="light"] .user_profile_main {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .user_profile_main .container {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* User profile wrapper */
[data-theme="light"] .user_profile_wrapper {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* User profile main box */
[data-theme="light"] .user_profile_main_box {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* User profile background image */
[data-theme="light"] .edit_profile_bg_image {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 10px !important;
}

[data-theme="light"] .edit_profile_bg_image img {
    border: 2px solid #dee2e6 !important;
    border-radius: 8px !important;
}

/* User profile main text content */
[data-theme="light"] .user_profile_main_box_tx {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .user_profile_main_box_tx h5 {
    color: #212529 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .user_profile_main_box_tx span {
    color: #6c757d !important;
}

[data-theme="light"] .user_profile_main_box_tx span i {
    color: #6c757d !important;
}

/* Edit profile button */
[data-theme="light"] .edit_user_profile {
    background-color: #2196f3 !important;
    color: #ffffff !important;
    border: 1px solid #2196f3 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .edit_user_profile:hover {
    background-color: #1976d2 !important;
    color: #ffffff !important;
    border-color: #1976d2 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3) !important;
}

[data-theme="light"] .edit_user_profile i {
    color: #ffffff !important;
    margin-right: 8px !important;
}

/* User profile specific elements */
[data-theme="light"] .user_profile_main_box_tx h5:first-child {
    color: #212529 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

[data-theme="light"] .user_profile_main_box_tx span:first-of-type {
    color: #6c757d !important;
    font-size: 1rem !important;
    margin-bottom: 4px !important;
    display: block !important;
}

[data-theme="light"] .user_profile_main_box_tx span:last-of-type {
    color: #6c757d !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Responsive adjustments for user profile */
@media (max-width: 768px) {
    [data-theme="light"] .user_profile_main_box {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    [data-theme="light"] .edit_profile_bg_image {
        margin-bottom: 20px !important;
        align-self: center !important;
    }
    
    [data-theme="light"] .user_profile_main_box_tx {
        text-align: center !important;
    }
}

/* Additional user profile styling for consistency */
[data-theme="light"] .user_profile_main .row {
    background-color: #ffffff !important;
}

[data-theme="light"] .user_profile_main .col-12 {
    background-color: #ffffff !important;
}

/* User profile card styling if present */
[data-theme="light"] .user-profile-card {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 15px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: #212529 !important;
}

[data-theme="light"] .user-profile-card .card-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .user-profile-card .card-body {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .user-profile-card .card-footer {
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

/* User profile stats if present */
[data-theme="light"] .user-stats {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 10px !important;
    color: #212529 !important;
}

[data-theme="light"] .user-stats .stat-item {
    color: #212529 !important;
}

[data-theme="light"] .user-stats .stat-number {
    color: #2196f3 !important;
    font-weight: 700 !important;
}

[data-theme="light"] .user-stats .stat-label {
    color: #6c757d !important;
}

/* User profile bio section if present */
[data-theme="light"] .user-bio {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 10px !important;
    color: #212529 !important;
}

[data-theme="light"] .user-bio h3 {
    color: #212529 !important;
}

[data-theme="light"] .user-bio p {
    color: #6c757d !important;
}

/* User profile social links if present */
[data-theme="light"] .user-social-links {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .user-social-links a {
    color: #2196f3 !important;
    text-decoration: none !important;
}

[data-theme="light"] .user-social-links a:hover {
    color: #1976d2 !important;
    text-decoration: underline !important;
}

/* ========================================
   MODEL PROFILE PAGE LIGHT MODE STYLING
======================================== */

/* Model profile main section */
[data-theme="light"] .mainSection.publicProfile {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.publicProfile .middleSec {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.publicProfile .mainFeed {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Main feed section styling */
[data-theme="light"] .mainSection {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection .mainFeed {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Profile info section - Match Dark Mode Structure with Light Colors */
[data-theme="light"] .profileInfo {
    background: #ffffff !important;
    color: #212529 !important;
    border-radius: 22px !important;
    margin-bottom: 22px !important;
    padding-bottom: 20px !important;
}

[data-theme="light"] .coverPhoto {

    position: relative !important;
    background: #f8f9fa !important;
    border-radius: 22px 22px 0 0 !important;
}

[data-theme="light"] .coverPhoto img {
    width: 100% !important;
    object-fit: cover !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
}

[data-theme="light"] .profilePic {
    margin-top: -60px !important;
    z-index: 1 !important;
    position: relative !important;
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    overflow: hidden !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure profilePic has same size in dark mode */
.profilePic {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Profile picture hover effect - make it clear it's clickable */
.profilePic:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
    opacity: 0.9 !important;
}

[data-theme="light"] .profilePic:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Profile name and info - Match Dark Mode Structure */
[data-theme="light"] .profileInfo .name {
    display: flex !important;
    align-items: center !important;
    font-size: 16px !important;
    margin-top: 12px !important;
    color: #212529 !important;
    font-weight: 400 !important;
    gap: 6px !important;
}

[data-theme="light"] .profileInfo .name img:not(.verified) {
    width: 14px !important;
    height: 14px !important;
}

/* Light mode - Profile name verified badge (larger and more visible) */
[data-theme="light"] .profileInfo .name .verified,
[data-theme="light"] .name .verified,
[data-theme="light"] h2.name .verified,
[data-theme="light"] .mainSection.publicProfile .middleSec .row .left .name .verified,
[data-theme="light"] .mainSection.publicProfile .middleSec .row .left h2.name .verified,
html[data-theme="light"] .profileInfo .name .verified,
html[data-theme="light"] .name .verified,
html[data-theme="light"] h2.name .verified,
body[data-theme="light"] .profileInfo .name .verified,
body[data-theme="light"] .name .verified,
body[data-theme="light"] h2.name .verified {
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin-left: 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Light mode - Profile username verified badge */
[data-theme="light"] .profileInfo .username .verified,
[data-theme="light"] .username .verified,
[data-theme="light"] p.username .verified,
[data-theme="light"] .mainSection.publicProfile .middleSec .row .left .username .verified,
[data-theme="light"] .mainSection.publicProfile .middleSec .row .left p.username .verified,
html[data-theme="light"] .profileInfo .username .verified,
html[data-theme="light"] .username .verified,
html[data-theme="light"] p.username .verified,
body[data-theme="light"] .profileInfo .username .verified,
body[data-theme="light"] .username .verified,
body[data-theme="light"] p.username .verified {
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    margin-left: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Old light mode rule - keeping for backward compatibility but will be overridden by above */
/* Updated to larger sizes - overridden by more specific rules above */
[data-theme="light"] .profileInfo .name .verified {
    width: 24px !important;
    height: 24px !important;
    margin-left: 10px !important;
    vertical-align: middle !important;
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 1 !important;
}

[data-theme="light"] .profileInfo .username {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

[data-theme="light"] .profileInfo .username .verified {
    width: 20px !important;
    height: 20px !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 1 !important;
}

[data-theme="light"] .profileInfo .username {
    font-size: 12px !important;
    color: #6c757d !important;
}

[data-theme="light"] .profileInfo .followers {
    display: flex !important;
    gap: 34px !important;
    align-items: center !important;
    padding-right: 42px !important;
    margin-top: 24px !important;
}

[data-theme="light"] .profileInfo .followers h2 {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #212529 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    justify-content: center !important;
    align-content: center !important;
}

[data-theme="light"] .profileInfo .followers h2 span {
    font-size: 12px !important;
    color: #6c757d !important;
    text-decoration: none !important;
}

/* Profile buttons - Match Dark Mode Structure */
[data-theme="light"] .profileInfo .buttons {
    gap: 16px !important;
    margin-right: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 30px !important;
    display: flex !important;
}

[data-theme="light"] .profileInfo .buttons a,
[data-theme="light"] .profileInfo .buttons button {
    text-decoration: none !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    height: 36px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 16px !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    background: #f8f9fa !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

[data-theme="light"] .profileInfo .buttons a:hover,
[data-theme="light"] .profileInfo .buttons button:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
    transform: translateY(-1px) !important;
}

[data-theme="light"] .profileInfo .buttons .dropdown a {
    color: #212529 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    text-align: left !important;
    padding: 0 !important;
    justify-content: flex-start !important;
}

/* Follow/Unfollow buttons - Light Mode */
[data-theme="light"] .buttons button#favoriteButton {
    background-color: #2196f3 !important;
    color: #ffffff !important;
    border: 1px solid #2196f3 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
}

[data-theme="light"] .buttons button#favoriteButton:hover {
    background-color: #1976d2 !important;
    color: #ffffff !important;
    border-color: #1976d2 !important;
}

/* Unfollow button - Light Mode (when text is "unfollow") - No red color */
[data-theme="light"] button#favoriteButton.unfollow-state,
[data-theme="light"] button.favoriteButton.unfollow-state,
[data-theme="light"] button#favoriteButton[data-state="unfollow"],
[data-theme="light"] button.favoriteButton[data-state="unfollow"] {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] button#favoriteButton.unfollow-state:hover,
[data-theme="light"] button.favoriteButton.unfollow-state:hover,
[data-theme="light"] button#favoriteButton[data-state="unfollow"]:hover,
[data-theme="light"] button.favoriteButton[data-state="unfollow"]:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}

[data-theme="light"] .buttons .message_me {
    background-color: #2196f3 !important;
    color: #ffffff !important;
    border: 1px solid #2196f3 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
}

[data-theme="light"] .buttons .message_me:hover {
    background-color: #1976d2 !important;
    color: #ffffff !important;
    border-color: #1976d2 !important;
}

[data-theme="light"] .buttons .report_right_bt {
    color: #dc3545 !important;
    text-decoration: none !important;
    font-weight: 400 !important;
}

[data-theme="light"] .buttons .report_right_bt:hover {
    color: #c82333 !important;
    text-decoration: underline !important;
}

/* Profile row layout - Match Dark Mode Structure */
[data-theme="light"] .profileInfo .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 24px !important;
}

[data-theme="light"] .profileInfo .left {
    width: max-content !important;
    display: flex !important;
    flex-direction: column !important;
}

[data-theme="light"] .profileInfo .right {
    width: 100% !important;
    margin-top: 60px !important;
    flex-shrink: initial !important;
}

/* Profile description and social media - Match Dark Mode Structure */
[data-theme="light"] .profileInfo .right p {
    font-size: 16px !important;
    color: #6c757d !important;
    padding-left: 17px !important;
    min-height: 99px !important;
    border-left: 1px solid #dee2e6 !important;
    width: 100% !important;
    line-height: 1.5 !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 0 0 17px !important;
}

[data-theme="light"] .profileInfo .right p a {
    color: #01ADF1 !important;
}

/* Cover photo buttons - Match Dark Mode Structure */
[data-theme="light"] .coverPhoto .buttons {
    position: absolute !important;
    bottom: 22px !important;
    right: 15px !important;
    display: flex !important;
    gap: 5px !important;
}

[data-theme="light"] .coverPhoto .buttons button {
    width: 38px !important;
    height: 38px !important;
    border-radius: 100% !important;
    background: rgba(21, 25, 28, 0.65) !important;
    display: flex !important;
    border: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .coverPhoto .buttons button:hover {
    background: rgba(21, 25, 28, 0.8) !important;
    transform: translateY(-1px) !important;
}

/* Social Media Icons - Match Dark Mode Structure */
[data-theme="light"] .socialMedia {
    margin-top: 30px !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    background: transparent !important;
    padding: 0 !important;
}

[data-theme="light"] .socialMedia a {
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

[data-theme="light"] .socialMedia a:hover {
    background: transparent !important;
    border: none !important;
    transform: translateY(-2px) !important;
    opacity: 0.8 !important;
}

[data-theme="light"] .socialMedia img {
    width: 25px !important;
    height: 25px !important;
    border-radius: 6px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .socialMedia a:hover img {
    transform: scale(1.1) !important;
    opacity: 0.9 !important;
}

/* Live buttons */
[data-theme="light"] .liveButtons {
    background-color: #ffffff !important;
    padding: 20px 0 !important;
}

[data-theme="light"] .liveButtons button {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border: 1px solid #dc3545 !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    margin-right: 10px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .liveButtons button:hover {
    background-color: #c82333 !important;
    color: #ffffff !important;
    border-color: #bd2130 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3) !important;
}

[data-theme="light"] .liveButtons .btn-live {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border: 1px solid #28a745 !important;
}

[data-theme="light"] .liveButtons .btn-live:hover {
    background-color: #218838 !important;
    color: #ffffff !important;
    border-color: #1e7e34 !important;
}

/* Feed tabs */


 [data-theme="light"] .feedtabs {
    border-radius: 50px !important;
    padding: 0 !important;
    position: relative !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 auto 25px !important;
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

 [data-theme="light"] .feedtabs a {
    background: #f8f9fa !important;
    text-decoration: none !important;
    color: #6c757d !important;
} 

[data-theme="light"] .feedtabs a:hover {
    color: #212529 !important;
}

[data-theme="light"] .feedtabs a.active {
    color: #01ADF1 !important;
    background: #f8f9fa !important;
    border: 2px solid #01ADF1 !important;
}

[data-theme="light"] .feedtabs a.active::after {
    display: none !important;
}

[data-theme="light"] .feedtabs a.sociallinks.active::after,
[data-theme="light"] .feedtabs a.changepassword.active::after,
[data-theme="light"] .feedtabs a.bankdetails.active::after,
[data-theme="light"] .feedtabs a.countryblocklist.active::after,
[data-theme="light"] .feedtabs a.phototab.active::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

[data-theme="light"] .feedtabs a.videotab.active::after {
    left: initial !important;
    right: 0 !important;
}

[data-theme="light"] .feedtabs a.deactiveaccount.active::after {
    left: initial !important;
    right: -7px !important;
}

/* Post Actions - Light Mode */
[data-theme="light"] .engage {
    background-color: #ffffff !important;
    border-top: 1px solid #dee2e6 !important;
    padding: 15px 20px !important;
    margin-top: 10px !important;
}

[data-theme="light"] .engage button {
    background: transparent !important;
    border: none !important;
    color: #6c757d !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .engage button:hover {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .engage button img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
}

[data-theme="light"] .engage button:hover img {
    filter: brightness(0) saturate(100%) invert(15%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
}

/* Comments Section - Light Mode */
[data-theme="light"] .hidden_comment {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-top: 1px solid #dee2e6 !important;
    color: #212529 !important;
    padding: 15px !important;
    margin-top: 10px !important;
    border-radius: 12px !important;
}

[data-theme="light"] .comments {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .comments .comment {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    color: #212529 !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
}

[data-theme="light"] .comments .comment .comment-author {
    color: #01ADF1 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .comments .comment .comment-time {
    color: #6c757d !important;
    font-size: 12px !important;
}

[data-theme="light"] .comments .comment .comment-content {
    color: #212529 !important;
    margin-top: 5px !important;
}

/* Comment Input - Light Mode */
[data-theme="light"] .hidden_comment_input_box {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 20px !important;
    padding: 10px 15px !important;
    margin-top: 15px !important;
}

[data-theme="light"] .hidden_comment_input_box textarea {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 20px !important;
    padding: 10px 15px !important;
}

[data-theme="light"] .hidden_comment_input_box textarea::placeholder {
    color: #6c757d !important;
}

/* Light Mode - New Add Class Textarea (overrides inline styles) */
[data-theme="light"] .new-add-cls-textarea textarea,
[data-theme="light"] .hidden_comment_input_box.new-add-cls-textarea textarea,
[data-theme="light"] textarea[id^="commenttext_"] {
    background: #f0f2f5 !important;
    border: 1px solid #e9ecef !important;
    color: #111b21 !important;
    border-radius: 20px !important;
    padding: 10px 15px !important;
}

[data-theme="light"] .new-add-cls-textarea textarea::placeholder,
[data-theme="light"] .hidden_comment_input_box.new-add-cls-textarea textarea::placeholder,
[data-theme="light"] textarea[id^="commenttext_"]::placeholder {
    color: #667781 !important;
}

[data-theme="light"] .new-add-cls-textarea textarea:focus,
[data-theme="light"] .hidden_comment_input_box.new-add-cls-textarea textarea:focus,
[data-theme="light"] textarea[id^="commenttext_"]:focus {
    background: #ffffff !important;
    border-color: #01ADF1 !important;
    color: #111b21 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.1) !important;
}

[data-theme="light"] .hidden_comment_input_box textarea:focus {
    background-color: #ffffff !important;
    border-color: #01ADF1 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.1) !important;
}

[data-theme="light"] .hidden_comment_input_box button {
    background-color: #01ADF1 !important;
    border: none !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .hidden_comment_input_box button:hover {
    background-color: #0099d4 !important;
    transform: scale(1.05) !important;
}

[data-theme="light"] .hidden_comment_input_box button img {
    filter: brightness(0) saturate(100%) invert(100%) !important;
}

[data-theme="light"] .feed_emoji {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 5px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .feed_emoji:hover {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .feed_emoji img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
}

[data-theme="light"] .feed_emoji:hover img {
    filter: brightness(0) saturate(100%) invert(15%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
}

/* Error Messages - Light Mode */
[data-theme="light"] .invalid-feedback {
    color: #dc3545 !important;
    font-size: 12px !important;
    margin-top: 5px !important;
}

/* Comment Action Buttons - Light Mode */
[data-theme="light"] .comment-action-btn {
    background-color: transparent !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

[data-theme="light"] .comment-action-btn:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px) !important;
}

[data-theme="light"] .comment-action-btn.liked {
    background-color: #fce4ec !important;
    color: #e91e63 !important;
    border-color: #e91e63 !important;
}

[data-theme="light"] .comment-action-btn.liked:hover {
    background-color: #f8bbd9 !important;
    color: #c2185b !important;
}

[data-theme="light"] .like-count-display {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Edit and Delete Buttons - Light Mode */
[data-theme="light"] .comment-action-btn.edit-btn {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffc107 !important;
}

[data-theme="light"] .comment-action-btn.edit-btn:hover {
    background-color: #ffeaa7 !important;
    color: #6c5500 !important;
}

[data-theme="light"] .comment-action-btn.delete-btn {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border-color: #dc3545 !important;
}

[data-theme="light"] .comment-action-btn.delete-btn:hover {
    background-color: #f5c6cb !important;
    color: #5a1616 !important;
}

/* Comment Content Buttons - Light Mode */
[data-theme="light"] .commentContent button {
    background-color: transparent !important;
    color: #6c757d !important;
    border: none !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .commentContent button:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

/* Comment Engage Buttons - Light Mode */
[data-theme="light"] .mainSection .comments .commentContainer .commentBox .commentContent .engage button {
    background: transparent !important;
    border: none !important;
    color: #6c757d !important;
    font-size: 16px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .mainSection .comments .commentContainer .commentBox .commentContent .engage button:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection .comments .commentContainer .commentBox .commentContent .engage p {
    color: #6c757d !important;
    font-size: 16px !important;
}

/* More Comments Button - Light Mode */
[data-theme="light"] .hidden_comment_more_bt button {
    background: transparent !important;
    border: 1px solid #dee2e6 !important;
    color: #6c757d !important;
    border-radius: 9px !important;
    padding: 10px !important;
    width: 100% !important;
    text-decoration: underline !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .hidden_comment_more_bt button:hover {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-color: #adb5bd !important;
}

/* Comment Submit Button - Light Mode */
[data-theme="light"] .commentsubmit {
    background-color: #01ADF1 !important;
    border: none !important;
    border-radius: 9px !important;
    color: #ffffff !important;
    padding: 9px 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .commentsubmit:hover {
    background-color: #0099d4 !important;
    transform: scale(1.05) !important;
}

/* Chat Send Button - Light Mode */
[data-theme="light"] .send_btn {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 9px 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .send_btn:hover {
    background-color: #0099d4 !important;
}

/* Smile Button - Light Mode */
[data-theme="light"] .smile_btn {
    background: transparent !important;
    color: #6c757d !important;
    border: none !important;
    border-radius: 50% !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .smile_btn:hover {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* Send Coin Button - Light Mode */
[data-theme="light"] .send_coin_btn {
    background: #01ADF1 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .send_coin_btn:hover {
    background: #0099d4 !important;
}

/* Comment Reply Section - Light Mode */
[data-theme="light"] .reply-section {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-top: 10px !important;
}

[data-theme="light"] .reply-input-container {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-top: 10px !important;
}

[data-theme="light"] .reply-input-container textarea {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    resize: vertical !important;
    min-height: 40px !important;
    font-family: inherit !important;
    font-size: 14px !important;
}

[data-theme="light"] .reply-input-container textarea::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .reply-input-container textarea:focus {
    background-color: #ffffff !important;
    border-color: #01ADF1 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.1) !important;
}

/* Reply Buttons - Light Mode */
[data-theme="light"] .reply-buttons {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

[data-theme="light"] .reply-btn {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

[data-theme="light"] .reply-btn:hover {
    background-color: #0099d4 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(1, 173, 241, 0.2) !important;
}

[data-theme="light"] .reply-btn.cancel {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

[data-theme="light"] .reply-btn.cancel:hover {
    background-color: #5a6268 !important;
}

[data-theme="light"] .reply-btn.edit {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

[data-theme="light"] .reply-btn.edit:hover {
    background-color: #e0a800 !important;
}

[data-theme="light"] .reply-btn.delete {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

[data-theme="light"] .reply-btn.delete:hover {
    background-color: #c82333 !important;
}

/* View Replies Button - Light Mode */
[data-theme="light"] .view-replies-btn {
    background-color: transparent !important;
    color: #01ADF1 !important;
    border: 1px solid #01ADF1 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

[data-theme="light"] .view-replies-btn:hover {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Reply Form - Light Mode */
[data-theme="light"] .reply-form {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-top: 10px !important;
}

[data-theme="light"] .reply-form textarea {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    width: 100% !important;
    resize: vertical !important;
    min-height: 35px !important;
    font-size: 13px !important;
}

[data-theme="light"] .reply-form textarea::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .reply-form textarea:focus {
    background-color: #ffffff !important;
    border-color: #01ADF1 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.1) !important;
}

[data-theme="light"] .reply-form .form-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

[data-theme="light"] .reply-form .btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .reply-form .btn-primary {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
}

[data-theme="light"] .reply-form .btn-primary:hover {
    background-color: #0099d4 !important;
}

[data-theme="light"] .reply-form .btn-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

[data-theme="light"] .reply-form .btn-secondary:hover {
    background-color: #5a6268 !important;
}

/* Nested Comments - Light Mode */
[data-theme="light"] .nested-comments {
    background-color: #f8f9fa !important;
    border-left: 3px solid #dee2e6 !important;
    margin-left: 20px !important;
    padding-left: 15px !important;
    margin-top: 10px !important;
}

[data-theme="light"] .nested-comments .comment {
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
}

/* Comment Thread - Light Mode */
[data-theme="light"] .comment-thread {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
}

[data-theme="light"] .comment-thread .comment-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

[data-theme="light"] .comment-thread .comment-author {
    color: #01ADF1 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

[data-theme="light"] .comment-thread .comment-time {
    color: #6c757d !important;
    font-size: 12px !important;
}

[data-theme="light"] .comment-thread .comment-content {
    color: #212529 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
}

/* Comment Reply Form - Light Mode */
[data-theme="light"] .comment-reply-form {
    background-color: #f8f9fa !important;

}

[data-theme="light"] .comment-reply-form.show {
    display: block !important;
}

[data-theme="light"] .comment-reply-input {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    resize: vertical !important;
    min-height: 80px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

[data-theme="light"] .comment-reply-input::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .comment-reply-input:focus {
    background-color: #ffffff !important;
    border-color: #01ADF1 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.1) !important;
}

[data-theme="light"] .comment-reply-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

[data-theme="light"] .comment-reply-btn {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

[data-theme="light"] .comment-reply-btn:hover {
    background-color: #0099d4 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(1, 173, 241, 0.2) !important;
}

[data-theme="light"] .comment-reply-btn.cancel {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

[data-theme="light"] .comment-reply-btn.cancel:hover {
    background-color: #5a6268 !important;
}

[data-theme="light"] .comment-reply-btn.submit {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
}

[data-theme="light"] .comment-reply-btn.submit:hover {
    background-color: #0099d4 !important;
}

[data-theme="light"] .comment-reply-btn.submit:disabled {
    background-color: #adb5bd !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Posts section */
[data-theme="light"] .posts {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .post {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 15px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* MainSection post styling for light mode */
[data-theme="light"] .mainSection .post {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 15px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection .post .postHeader {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 15px 20px !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection .post .postHeader .user p {
    color: #212529 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .mainSection .post .postHeader .user span {
    color: #6c757d !important;
    font-weight: 400 !important;
}

[data-theme="light"] .mainSection .post .postHeader .time {
    color: #6c757d !important;
}

[data-theme="light"] .mainSection .post .postHeader .time p {
    color: #6c757d !important;
    margin-bottom: 0 !important;
}

[data-theme="light"] .mainSection .post .caption {
    color: #212529 !important;
    background-color: #ffffff !important;
}

[data-theme="light"] .mainSection .post .caption a {
    color: #2196f3 !important;
    text-decoration: none !important;
}

[data-theme="light"] .mainSection .post .caption a:hover {
    color: #1976d2 !important;
    text-decoration: underline !important;
}

[data-theme="light"] .postHeader {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 15px 20px !important;
}

[data-theme="light"] .postHeader .user {
    color: #212529 !important;
    text-decoration: none !important;
}

[data-theme="light"] .postHeader .user p {
    color: #212529 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .postHeader .user span {
    color: #6c757d !important;
    font-weight: 400 !important;
}

[data-theme="light"] .postHeader .time {
    color: #6c757d !important;
}

[data-theme="light"] .postHeader .time p {
    color: #6c757d !important;
    margin-bottom: 0 !important;
}

/* Post content */
[data-theme="light"] .postContent {
    background-color: #ffffff !important;
    color: #212529 !important;
    padding: 20px !important;
}

[data-theme="light"] .postContent p {
    color: #212529 !important;
    margin-bottom: 15px !important;
}

/* Post media */
[data-theme="light"] .intro_add_video_box {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 10px !important;
}

[data-theme="light"] .intro_add_video_box_img {
    border-radius: 10px !important;
}

/* Post actions */
[data-theme="light"] .postActions {
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    padding: 15px 20px !important;
}

[data-theme="light"] .postActions button {
    background-color: transparent !important;
    color: #6c757d !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .postActions button:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

[data-theme="light"] .postActions button.active {
    color: #dc3545 !important;
}

/* Total posts section */
[data-theme="light"] .totalPosts {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 25px !important;
    padding: 5px !important;
    margin: 20px 0 !important;
}

[data-theme="light"] .totalPosts a {
    background-color: transparent !important;
    color: #6c757d !important;
    border: none !important;
    padding: 12px 24px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    border-radius: 20px !important;
}

[data-theme="light"] .totalPosts a:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

[data-theme="light"] .totalPosts a.active {
    background-color: #2196f3 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3) !important;
}

/* Modals and popups */
[data-theme="light"] .popup {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .changePassword,
[data-theme="light"] .scheduleLivePopup {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    color: #212529 !important;
}

[data-theme="light"] .changePassword h1,
[data-theme="light"] .scheduleLivePopup h1 {
    color: #212529 !important;
    font-weight: 700 !important;
}

[data-theme="light"] .changePassword .input,
[data-theme="light"] .scheduleLivePopup .input {
    background-color: #ffffff !important;
}

[data-theme="light"] .changePassword .input label,
[data-theme="light"] .scheduleLivePopup .input label {
    color: #212529 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .changePassword .input input,
[data-theme="light"] .changePassword .input textarea,
[data-theme="light"] .changePassword .input select,
[data-theme="light"] .scheduleLivePopup .input input,
[data-theme="light"] .scheduleLivePopup .input textarea,
[data-theme="light"] .scheduleLivePopup .input select {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

[data-theme="light"] .changePassword .input input:focus,
[data-theme="light"] .changePassword .input textarea:focus,
[data-theme="light"] .changePassword .input select:focus,
[data-theme="light"] .scheduleLivePopup .input input:focus,
[data-theme="light"] .scheduleLivePopup .input textarea:focus,
[data-theme="light"] .scheduleLivePopup .input select:focus {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25) !important;
}

/* Mobile header */
[data-theme="light"] .mobileHeader {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .mobileHeader .searchBar {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 25px !important;
}

[data-theme="light"] .mobileHeader .searchBar input {
    background-color: transparent !important;
    color: #212529 !important;
    border: none !important;
}

[data-theme="light"] .mobileHeader .searchBar input::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .mobileHeader .searchBar button {
    background-color: transparent !important;
    color: #6c757d !important;
    border: none !important;
}

/* Dropdown menus */
[data-theme="light"] .dropdownMenu {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 8px 0 !important;
    min-width: 180px !important;
}

[data-theme="light"] .dropdownMenu a {
    color: #212529 !important;
    text-decoration: none !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid #f8f9fa !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

[data-theme="light"] .dropdownMenu a:last-child {
    border-bottom: none !important;
}

[data-theme="light"] .dropdownMenu a:hover {
    background-color: #f8f9fa !important;
    color: #01ADF1 !important;
}

[data-theme="light"] .dropdownMenu button {
    color: #212529 !important;
    background: none !important;
    border: none !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid #f8f9fa !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
}

[data-theme="light"] .dropdownMenu button:last-child {
    border-bottom: none !important;
}

[data-theme="light"] .dropdownMenu button:hover {
    background-color: #f8f9fa !important;
    color: #dc3545 !important;
}

[data-theme="light"] .dropdownMenu img {
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    filter: none !important;
}

[data-theme="light"] .dropdownMenu a:hover img,
[data-theme="light"] .dropdownMenu button:hover img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

[data-theme="light"] .dropdownMenu .pin-action:hover img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

[data-theme="light"] .dropdownMenu .delete_mb:hover img {
    filter: brightness(0) saturate(100%) invert(13%) sepia(94%) saturate(7151%) hue-rotate(2deg) brightness(90%) contrast(118%) !important;
}

/* Dark mode dropdown menus */
[data-theme="dark"] .dropdownMenu {
    background-color: #2a2a2a !important;
    border: 1px solid #404040 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    padding: 8px 0 !important;
    min-width: 180px !important;
}

[data-theme="dark"] .dropdownMenu a {
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid #404040 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

[data-theme="dark"] .dropdownMenu a:last-child {
    border-bottom: none !important;
}

[data-theme="dark"] .dropdownMenu a:hover {
    background-color: #404040 !important;
    color: #01ADF1 !important;
}

[data-theme="dark"] .dropdownMenu button {
    color: #ffffff !important;
    background: none !important;
    border: none !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid #404040 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
}

[data-theme="dark"] .dropdownMenu button:last-child {
    border-bottom: none !important;
}

[data-theme="dark"] .dropdownMenu button:hover {
    background-color: #404040 !important;
    color: #ff6b6b !important;
}

[data-theme="dark"] .dropdownMenu img {
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
}

[data-theme="dark"] .dropdownMenu a:hover img,
[data-theme="dark"] .dropdownMenu button:hover img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

[data-theme="dark"] .dropdownMenu .pin-action:hover img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

[data-theme="dark"] .dropdownMenu .delete_mb:hover img {
    filter: brightness(0) saturate(100%) invert(13%) sepia(94%) saturate(7151%) hue-rotate(2deg) brightness(90%) contrast(118%) !important;
}

/* Filter and status elements */
[data-theme="light"] .filter_live_tx {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

/* Loading states */
[data-theme="light"] .auto-load {
    background-color: #ffffff !important;
    color: #6c757d !important;
}

[data-theme="light"] .spinner-border {
    color: #2196f3 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [data-theme="light"] .profileInfo .row {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    [data-theme="light"] .profileInfo .left {
        margin-bottom: 20px !important;
    }
    
    [data-theme="light"] .profileInfo .right {
        text-align: center !important;
    }
}

/* ========================================
   HEADER NAVIGATION LIGHT MODE STYLING
======================================== */

/* Main header navigation */
[data-theme="light"] .navbar {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

[data-theme="light"] .navbar-brand {
    color: #212529 !important;
}

[data-theme="light"] .navbar-brand img {
    filter: none !important;
    height: 44px !important;
    max-height: 44px !important;
    min-height: 44px !important;
    width: auto !important;
    max-width: 105px !important;
    object-fit: contain !important;
    display: block !important;
}

[data-theme="light"] .navbar-nav .nav-link {
    color: #212529 !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .navbar-nav .nav-link:hover {
    color: #2196f3 !important;
    border-radius: 6px !important;
}

[data-theme="light"] .navbar-nav .nav-link.active {
    color: #2196f3 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

[data-theme="light"] .navbar-nav .nav-link i {
    color: #2196f3 !important;
}

/* User profile navigation */


[data-theme="light"] .user-profile-link {
    color: #212529 !important;
    text-decoration: none !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* User profile link avatar - larger size in light mode */
[data-theme="light"] .user-profile-link .user-avatar,
[data-theme="light"] .user-profile-link img.user-avatar,
[data-theme="light"] .user-profile-link .user-avatar.rounded-circle,
[data-theme="light"] .user-profile-link img.user-avatar.rounded-circle,
[data-theme="light"] .user-profile-link .user-avatar.loaded,
[data-theme="light"] .user-profile-link img.user-avatar.loaded {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
}

[data-theme="light"] .user-profile-link:hover {
    color: #2196f3 !important;
}

[data-theme="light"] .user-avatar {
    border: 2px solid #dee2e6 !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
}

[data-theme="light"] .user-name {
    color: #212529 !important;
}

/* Login and action buttons */
[data-theme="light"] .login-btn {
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .login-btn:hover {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3) !important;
}

[data-theme="light"] .btn-link {
    color: #2196f3 !important;
    text-decoration: none !important;
}

[data-theme="light"] .btn-link:hover {
    color: #1976d2 !important;
    background-color: #f8f9fa !important;
    border-radius: 6px !important;
}

/* ========================================
   DASHBOARD NAVBAR LIGHT MODE STYLING
======================================== */

/* Main header */
[data-theme="light"] .main-header {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    height: 74px !important;
}

[data-theme="light"] .header-content {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Logo section */
[data-theme="light"] .header-logo {
    background-color: #ffffff !important;
}

[data-theme="light"] .header-logo .navbar-brand {
    color: #212529 !important;
    text-decoration: none !important;
}

[data-theme="light"] .logo-text {
    color: #212529 !important;
    font-weight: 700 !important;
    line-height: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
}

/* Light mode logo - IDENTICAL to dark mode (no filters, same appearance) */
[data-theme="light"] .logo-image,
[data-theme="light"] .navbar-brand .logo-image,
[data-theme="light"] .header-logo .logo-image {
    filter: none !important;
    -webkit-filter: none !important;
    height: 60px !important;
    max-height: 60px !important;
    min-height: 60px !important;
    width: auto !important;
    max-width: 143px !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    image-rendering: auto !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* Light mode logo image styling - IDENTICAL to dark mode */
[data-theme="light"] .logo,
[data-theme="light"] .logo img,
[data-theme="light"] .navbar-brand img,
[data-theme="light"] header .logo,
[data-theme="light"] header .logo img {
    height: 60px !important;
    max-height: 60px !important;
    min-height: 60px !important;
    width: auto !important;
    max-width: 143px !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* No filters - logo should look identical */
    filter: none !important;
    -webkit-filter: none !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    image-rendering: auto !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* Dark mode logo - ensure no filters applied */
[data-theme="dark"] .logo,
[data-theme="dark"] .logo img,
[data-theme="dark"] .navbar-brand img,
[data-theme="dark"] header .logo,
[data-theme="dark"] header .logo img,
[data-theme="dark"] .logo-image,
[data-theme="dark"] .navbar-brand .logo-image,
[data-theme="dark"] .header-logo .logo-image {
    filter: none !important;
    -webkit-filter: none !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    image-rendering: auto !important;
}

/* Search section */
[data-theme="light"] .header-search {
    background-color: #ffffff !important;
}

/* ========================================
   MOBILE NAVBAR COLLAPSE BACKGROUNDS
   Applies when the Bootstrap navbar is expanded on mobile
======================================== */
@media (max-width: 991.98px) {
  /* Dark mode background for expanded/collapsing menu */
  [data-theme="dark"] .navbar-collapse.show,
  [data-theme="dark"] .navbar-collapse.collapsing {
    background-color: #121418 !important;
    border-top: 1px solid #2d3238 !important;
    padding: 10px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
  }

  /* Light mode background for expanded/collapsing menu */
  [data-theme="light"] .navbar-collapse.show,
  [data-theme="light"] .navbar-collapse.collapsing {
    background-color: #ffffff !important;
    border-top: 1px solid #dee2e6 !important;
    padding: 10px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
  }

  /* Ensure inner nav items use proper contrast */
  [data-theme="dark"] .navbar-collapse.show .nav-link,
  [data-theme="dark"] .navbar-collapse.collapsing .nav-link {
    color: #e9ecef !important;
  }
  [data-theme="light"] .navbar-collapse.show .nav-link,
  [data-theme="light"] .navbar-collapse.collapsing .nav-link {
    color: #212529 !important;
  }
}

/* Light mode search container - EXACTLY match dark mode */
[data-theme="light"] .search-container {
    position: relative !important;
    width: 100% !important;
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 25px !important;
}

[data-theme="light"] .search-container:focus-within {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25) !important;
}

/* Light mode search icon - EXACTLY match dark mode positioning */
[data-theme="light"] .search-container .search-icon,
[data-theme="light"] .header-search .search-icon,
[data-theme="light"] .main-header .search-icon,
[data-theme="light"] .header-search .search-container .search-icon,
[data-theme="light"] .main-header .header-search .search-container .search-icon {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #6c757d !important;
    font-size: 16px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Light mode search input - EXACTLY match dark mode padding */
[data-theme="light"] .search-container .search-input,
[data-theme="light"] .header-search .search-input,
[data-theme="light"] .main-header .search-input,
[data-theme="light"] .header-search .search-container .search-input,
[data-theme="light"] .main-header .header-search .search-container .search-input {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 20px 12px 45px !important;
    color: #212529 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

[data-theme="light"] .search-container .search-input::placeholder,
[data-theme="light"] .header-search .search-input::placeholder,
[data-theme="light"] .main-header .search-input::placeholder,
[data-theme="light"] .header-search .search-container .search-input::placeholder,
[data-theme="light"] .main-header .header-search .search-container .search-input::placeholder {
    color: #6c757d !important;
    opacity: 0.6 !important;
}

[data-theme="light"] .search-container .search-input:focus,
[data-theme="light"] .header-search .search-input:focus,
[data-theme="light"] .main-header .search-input:focus {
    outline: none !important;
    background: transparent !important;
    border: none !important;
}

/* User section */
[data-theme="light"] .header-user {
    background-color: #ffffff !important;
}

[data-theme="light"] .header-notifications,
[data-theme="light"] .header-messages {
    background-color: transparent !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .header-notifications:hover,
[data-theme="light"] .header-messages:hover {
    background-color: #f8f9fa !important;
    color: #2196f3 !important;
    border-color: #2196f3 !important;
}

[data-theme="light"] .user-profile {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 25px !important;
    padding: 8px 16px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .user-profile:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
}

[data-theme="light"] .user-profile .user-avatar {
    border: 2px solid #ffffff !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
}

[data-theme="light"] .user-info .user-name {
    color: #212529 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .user-info .user-handle {
    color: #6c757d !important;
    font-size: 0.9rem !important;
}

[data-theme="light"] .user-dropdown {
    color: #6c757d !important;
}

/* Feed container */
[data-theme="light"] .feed-container {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Create Post Component Light Mode - Same Design, Light Colors */
[data-theme="light"] .mainSection .mainFeed .createPost {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #212529 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .createPost {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #212529 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .createPost input {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 25px !important;
    padding: 12px 20px !important;
    flex: 1 !important;
    outline: none !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .createPost input::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .createPost input:focus {
    border-color: #2196f3 !important;
    background: #ffffff !important;
    color: #212529 !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
}

[data-theme="light"] .createPost button {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #6c757d !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .createPost button:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
    transform: translateY(-1px) !important;
}

[data-theme="light"] .createPost .addpost {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    width: auto !important;
    height: auto !important;
}

[data-theme="light"] .createPost .addpost:hover {
    background: linear-gradient(270deg, #8B1248 0%, #0198D4 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3) !important;
}

/* Live Buttons Light Mode - Keep Same Design, Just Light Colors */
[data-theme="light"] .live-buttons {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

[data-theme="light"] .go-live-btn, 
[data-theme="light"] .schedule-live-btn {
    padding: 12px 24px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all var(--transition-normal, 0.3s ease) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 120px !important;
}

[data-theme="light"] .go-live-btn {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(1, 173, 241, 0.3) !important;
}

[data-theme="light"] .go-live-btn:hover {
    background: linear-gradient(270deg, #8B1248 0%, #0198D4 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(1, 173, 241, 0.4) !important;
}

[data-theme="light"] .schedule-live-btn {
    background: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .schedule-live-btn:hover {
    background: #e9ecef !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Post Options Light Mode */
[data-theme="light"] .post-options {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: #212529 !important;
}

[data-theme="light"] .media-preview {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    color: #212529 !important;
}

[data-theme="light"] .checkbox-label {
    color: #212529 !important;
}

[data-theme="light"] .checkbox-label input[type="checkbox"] {
    accent-color: #2196f3 !important;
}

/* Post Actions Light Mode */
[data-theme="light"] .model_feed_public_like_comment {
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .model_feed_public_like_comment button {
    background-color: transparent !important;
    color: #6c757d !important;
    border: none !important;
}

[data-theme="light"] .model_feed_public_like_comment button:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

[data-theme="light"] .like_commentbtn {
    color: #6c757d !important;
}

[data-theme="light"] .like_commentbtn:hover {
    color: #dc3545 !important;
}

[data-theme="light"] .like_commentbtn.active {
    color: #dc3545 !important;
}

/* Comments Section Light Mode */
[data-theme="light"] .comments {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .commentContainer {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    color: #212529 !important;
}

[data-theme="light"] .commentBox {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    color: #212529 !important;
}

[data-theme="light"] .commentContent {
    color: #212529 !important;
}

[data-theme="light"] .commentContent p {
    color: #212529 !important;
}

[data-theme="light"] .commentContent small {
    color: #6c757d !important;
}

[data-theme="light"] .commentContent button {
    background-color: transparent !important;
    color: #6c757d !important;
    border: none !important;
}

[data-theme="light"] .commentContent button:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

/* Hidden comment styling */
[data-theme="light"] .hidden_comment {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    color: #212529 !important;
}

/* Post dropdown menu light mode */
[data-theme="light"] .mainSection .post .postHeader .time .postOptions .dropdown {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection .post .postHeader .time .postOptions .dropdown a,
[data-theme="light"] .mainSection .post .postHeader .time .postOptions .dropdown button {
    color: #212529 !important;
    background-color: transparent !important;
}

[data-theme="light"] .mainSection .post .postHeader .time .postOptions .dropdown a:hover,
[data-theme="light"] .mainSection .post .postHeader .time .postOptions .dropdown button:hover {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* Post media styling light mode */
[data-theme="light"] .intro_add_video_box {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 10px !important;
}

[data-theme="light"] .intro_add_video_box_img {
    border-radius: 8px !important;
}

/* Post engagement buttons light mode */
[data-theme="light"] .mainSection .post .engage button {
    color: #6c757d !important;
    background-color: transparent !important;
    border: none !important;
}

[data-theme="light"] .mainSection .post .engage button:hover {
    color: #212529 !important;
    background-color: #f8f9fa !important;
}

[data-theme="light"] .mainSection .post .engage button.active {
    color: #dc3545 !important;
}

/* Dashboard feed like button - Red icon when active/liked */
.mainSection .post .engage .like_commentbtn.active img,
.mainSection .post .engage .like_commentbtn.liked img {
    filter: brightness(0) saturate(100%) invert(17%) sepia(96%) saturate(7126%) hue-rotate(330deg) brightness(95%) contrast(94%) !important;
}

[data-theme="light"] .mainSection .post .engage .like_commentbtn.active img,
[data-theme="light"] .mainSection .post .engage .like_commentbtn.liked img,
[data-theme="dark"] .mainSection .post .engage .like_commentbtn.active img,
[data-theme="dark"] .mainSection .post .engage .like_commentbtn.liked img {
    filter: brightness(0) saturate(100%) invert(17%) sepia(96%) saturate(7126%) hue-rotate(330deg) brightness(95%) contrast(94%) !important;
}

[data-theme="light"] .mainSection .post .engage button.tip {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
}

/* Tip button icon - Light mode (make it black/dark for visibility) */
[data-theme="light"] .mainSection .post .engage .tip_btn img,
[data-theme="light"] .mainSection .post .engage button.tip_btn img,
[data-theme="light"] .post .engage .tip_btn img,
[data-theme="light"] .post .engage button.tip_btn img,
[data-theme="light"] .feed-container .post .engage .tip_btn img,
[data-theme="light"] .feed-container .post .engage button.tip_btn img {
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Tip count display icon - Light mode */
[data-theme="light"] .mainSection .post .engage .tip_count_display.owner_tip_display img,
[data-theme="light"] .post .engage .tip_count_display.owner_tip_display img,
[data-theme="light"] .feed-container .post .engage .tip_count_display.owner_tip_display img {
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    opacity: 0.7 !important;
    visibility: visible !important;
    display: inline-block !important;
}


/* Additional feed elements light mode styling */
[data-theme="light"] .mainSection .post .images {
    background-color: transparent !important;
}

[data-theme="light"] .mainSection .post .cols {
    background-color: transparent !important;
}

[data-theme="light"] .mainSection .post .img {
    background-color: transparent !important;
}

[data-theme="light"] .mainSection .post .img img {
    border-radius: 8px !important;
}

[data-theme="light"] .mainSection .post .img.blurred {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .mainSection .post .img.blurred p {
    color: #6c757d !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    padding: 10px !important;
    border-radius: 8px !important;
}

[data-theme="light"] .mainSection .post .img .lockImg {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
}

[data-theme="light"] .mainSection .post .img .lockImg button {
    background-color: #2196f3 !important;
    color: #ffffff !important;
    border: none !important;
}

[data-theme="light"] .mainSection .post .img .lockImg p {
    background-color: rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

/* Video container light mode */
[data-theme="light"] .mainSection .posts .post:has(video) .videoContainer {
    background-color: #000000 !important;
    border-radius: 8px !important;
}

[data-theme="light"] .mainSection .posts .post:has(video) .videoContainer button {
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

[data-theme="light"] .mainSection .posts .post:has(video) .videoContainer button:hover {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Popular section light mode */
[data-theme="light"] .mainSection .posts .popular h2,
[data-theme="light"] .mainSection .posts .popular h2 a {
    color: #212529 !important;
}

[data-theme="light"] .mainSection .posts .popular p {
    color: #212529 !important;
}

[data-theme="light"] .mainSection .posts .popular .popularUser {
    background-color: transparent !important;
}

[data-theme="light"] .mainSection .posts .popular .popularUser img {
    border: 2px solid #dee2e6 !important;
}

/* Stories section light mode */
[data-theme="light"] .mainSection .mainFeed .stories {
    background-color: transparent !important;
}

[data-theme="light"] .mainSection .mainFeed .stories .add {
    background-color: #f8f9fa !important;
    border: 2px dashed #dee2e6 !important;
    color: #6c757d !important;
}

[data-theme="light"] .mainSection .mainFeed .stories .add:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}

/* ========================================
   HEADER NAVIGATION LIGHT MODE STYLING
======================================== */

/* Main header light mode */
[data-theme="light"] .main-header {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

[data-theme="light"] .header-content {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .header-logo {
    background-color: transparent !important;
}

[data-theme="light"] .header-logo .navbar-brand {
    color: #212529 !important;
}

[data-theme="light"] .header-logo .logo-text {
    color: #212529 !important;
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    line-height: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
}

[data-theme="light"] .header-search {
    background-color: transparent !important;
}

[data-theme="light"] .search-container {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 25px !important;
}

[data-theme="light"] .search-input {
    background-color: transparent !important;
    color: #212529 !important;
    border: none !important;
    padding: 12px 20px 12px 45px !important;
    width: 100% !important;
    font-size: 14px !important;
}

[data-theme="light"] .search-input::placeholder {
    color: #6c757d !important;
    opacity: 0.6 !important;
}

[data-theme="light"] .search-icon {
    color: #6c757d !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

[data-theme="light"] .header-user {
    background-color: transparent !important;
}

[data-theme="light"] .header-notifications,
[data-theme="light"] .header-messages {
    background-color: transparent !important;
    color: #6c757d !important;
    border: none !important;
}

[data-theme="light"] .header-notifications:hover,
[data-theme="light"] .header-messages:hover {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .user-profile {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 25px !important;
    color: #212529 !important;
}

[data-theme="light"] .user-profile:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
}

[data-theme="light"] .user-info .user-name {
    color: #212529 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .user-info .user-handle {
    color: #6c757d !important;
}

[data-theme="light"] .user-dropdown {
    color: #6c757d !important;
}

/* Mobile navigation light mode */
[data-theme="light"] .feed-navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .user-profile-nav {
    background-color: transparent !important;
}

[data-theme="light"] .user-profile-btn {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .user-profile-btn:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
}

[data-theme="light"] .user-name {
    color: #212529 !important;
}

[data-theme="light"] .user-handle {
    color: #6c757d !important;
}

[data-theme="light"] .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .dropdown-item {
    color: #212529 !important;
    background-color: transparent !important;
}

[data-theme="light"] .dropdown-item:hover {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* ========================================
   DASHBOARD SIDEBAR LIGHT MODE STYLING
======================================== */

/* Sidebar - Theme-based design */
[data-theme="light"] .sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #e9ecef !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 46px 0 !important;
    padding-left: 32px !important;
    border-radius: 22px !important;
    width: 242px !important;
    min-width: 242px !important;
    max-width: 242px !important;
    gap: 32px !important;
}


[data-theme="light"] .sidebar .bg {
    background-color: rgba(0, 0, 0, 0.05) !important;
}


[data-theme="light"] .sidebar .logo,
[data-theme="light"] .sidebar .logo img {
    filter: none !important;
    -webkit-filter: none !important;
    margin-bottom: 23px !important;
    padding: 0 !important;
    height: 44px !important;
    max-height: 44px !important;
    min-height: 44px !important;
    width: auto !important;
    max-width: 105px !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    image-rendering: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Dark mode sidebar logo - ensure no filters */
[data-theme="dark"] .sidebar .logo,
[data-theme="dark"] .sidebar .logo img,
.sidebar .logo,
.sidebar .logo img {
    filter: none !important;
    -webkit-filter: none !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    image-rendering: auto !important;
}


[data-theme="light"] .sidebar a {
    color: #495057 !important;
    text-decoration: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    font-weight: 400 !important;
    border-left: none !important;
    position: relative !important;
    width: auto !important;
    text-align: left !important;
    font-size: 16px !important;
    cursor: pointer !important;
}


[data-theme="light"] .sidebar a:hover {
    background-color: transparent !important;
    color: #2196f3 !important;
    transform: none !important;
    border-left: none !important;
}

[data-theme="light"] .sidebar a.active {
    background-color: transparent !important;
    color: #2196f3 !important;
    font-weight: 400 !important;
    border-left: none !important;
}


[data-theme="light"] .sidebar a img {
    filter: none !important;
    transition: all 0.3s ease !important;
    opacity: 0.7 !important;
    visibility: visible !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Hide multiple icons - show only the first one with maximum specificity */
[data-theme="light"] .sidebar a img:not(:first-child),
[data-theme="light"] .sidebar a img:nth-child(n+2),
[data-theme="light"] .sidebar a img[class*="active"]:not(:first-child),
[data-theme="light"] .sidebar a img[class*="inactive"]:not(:first-child) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Show only the first icon with maximum specificity */
[data-theme="light"] .sidebar a img:first-child,
[data-theme="light"] .sidebar a img:nth-child(1),
[data-theme="light"] .sidebar a img[class*="active"]:first-child,
[data-theme="light"] .sidebar a img[class*="inactive"]:first-child {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
}

[data-theme="light"] .sidebar a:hover img:first-child {
    filter: grayscale(100%) brightness(0.7) contrast(1.2) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: none !important;
}


/* Feed sidebar - Theme-based design */
[data-theme="light"] .feed-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #e9ecef !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 46px 0 !important;
    padding-left: 32px !important;
    border-radius: 22px !important;
    width: 242px !important;
    min-width: 242px !important;
    max-width: 242px !important;
    gap: 32px !important;
}


[data-theme="light"] .sidebar-content {
    background-color: #ffffff !important;
    color: #495057 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    width: 100% !important;
}


[data-theme="light"] .sidebar-nav {
    background-color: #ffffff !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
}


[data-theme="light"] .nav-item {
    color: #495057 !important;
    text-decoration: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    font-weight: 400 !important;
    border-left: none !important;
    position: relative !important;
    width: auto !important;
    text-align: left !important;
    font-size: 16px !important;
    cursor: pointer !important;
}


[data-theme="light"] .nav-item:hover {
    background-color: transparent !important;
    color: #2196f3 !important;
    transform: none !important;
    border-left: none !important;
}

[data-theme="light"] .nav-item.active {
    background-color: transparent !important;
    color: #2196f3 !important;
    font-weight: 400 !important;
    border-left: none !important;
}


[data-theme="light"] .nav-item i {
    color: #6c757d !important;
    transition: all 0.3s ease !important;
    opacity: 0.8 !important;
    font-size: 20px !important;
    width: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Hide multiple icons in nav items - show only the first one */
[data-theme="light"] .nav-item i:not(:first-child) {
    display: none !important;
}

/* Show only the first icon in nav items */
[data-theme="light"] .nav-item i:first-child {
    display: block !important;
}

[data-theme="light"] .nav-item:hover i:first-child {
    color: #2196f3 !important;
    opacity: 1 !important;
    transform: none !important;
}

[data-theme="light"] .nav-item.active i:first-child {
    color: #2196f3 !important;
    opacity: 1 !important;
}


/* Ensure sidebar icons are always visible */
[data-theme="light"] .sidebar a img:first-child {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

[data-theme="light"] .sidebar a:hover img:first-child {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Override any CSS that might hide first icon */
[data-theme="light"] .sidebar a img:first-child[style*="display: none"],
[data-theme="light"] .sidebar a img:first-child[style*="opacity: 0"],
[data-theme="light"] .sidebar a img:first-child[style*="visibility: hidden"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure first icon doesn't disappear on hover */
[data-theme="light"] .sidebar a:hover img:first-child[style*="display: none"],
[data-theme="light"] .sidebar a:hover img:first-child[style*="opacity: 0"],
[data-theme="light"] .sidebar a:hover img:first-child[style*="visibility: hidden"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force only first icon to be visible with maximum specificity */
[data-theme="light"] .sidebar a img:first-child {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Override any existing CSS that might hide first icon */
[data-theme="light"] .sidebar a img:first-child[style*="display: none"] {
    display: block !important;
}

[data-theme="light"] .sidebar a img:first-child[style*="opacity: 0"] {
    opacity: 1 !important;
}

[data-theme="light"] .sidebar a img:first-child[style*="visibility: hidden"] {
    visibility: visible !important;
}

/* Ensure first icon is visible on all states */
[data-theme="light"] .sidebar a:focus img:first-child,
[data-theme="light"] .sidebar a:active img:first-child,
[data-theme="light"] .sidebar a:visited img:first-child {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* FINAL OVERRIDE: Force hide all duplicate icons in sidebar, but show first icon */
[data-theme="light"] .sidebar a img:not(:first-child) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Ensure first icon is always visible with maximum specificity */
[data-theme="light"] .sidebar a img:first-child,
[data-theme="light"] .sidebar a img:nth-child(1),
[data-theme="light"] .sidebar a img[class*="active"]:first-child,
[data-theme="light"] .sidebar a img[class*="inactive"]:first-child {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    filter: grayscale(100%) brightness(0.7) contrast(1.2) !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
}

[data-theme="light"] .sidebar a:hover img:first-child,
[data-theme="light"] .sidebar a:focus img:first-child,
[data-theme="light"] .sidebar a:active img:first-child,
[data-theme="light"] .sidebar a:visited img:first-child {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    filter: grayscale(100%) brightness(0.7) contrast(1.2) !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
}

[data-theme="light"] .notification-badge {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 2px 8px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================
   COMMENT DESIGN LIGHT MODE STYLING
======================================== */

/* Comment item */
[data-theme="light"] .comment-item {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    padding: 16px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .comment-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

[data-theme="light"] .comment-item.reply {
    background-color: #f8f9fa !important;
    border-left: 3px solid #2196f3 !important;
    margin-left: 2rem !important;
}

[data-theme="light"] .comment-item.comment-pinned {
    background-color: #fff3cd !important;
    border-color: #ffc107 !important;
    border-left: 4px solid #ffc107 !important;
}

/* Comment header */
[data-theme="light"] .comment-header {
    background-color: transparent !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
}

[data-theme="light"] .comment-user {
    background-color: transparent !important;
}

[data-theme="light"] .comment-avatar {
    border: 2px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    overflow: hidden !important;
}

[data-theme="light"] .comment-username {
    color: #212529 !important;
    font-weight: 600 !important;
}

/* Comment verified badge - Light mode */
[data-theme="light"] .comment-username + .verified,
[data-theme="light"] .comment-user .verified {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin-left: 5px !important;
    vertical-align: middle !important;
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Comment verified badge - Dark mode */
[data-theme="dark"] .comment-username + .verified,
[data-theme="dark"] .comment-user .verified {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin-left: 5px !important;
    vertical-align: middle !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

[data-theme="light"] .comment-time {
    color: #6c757d !important;
    font-size: 0.85rem !important;
}

/* Comment content */
[data-theme="light"] .comment-content {
    background-color: transparent !important;
}

[data-theme="light"] .comment-text {
    color: #212529 !important;
    line-height: 1.6 !important;
    word-wrap: break-word !important;
}

[data-theme="light"] .comment-text p {
    color: #212529 !important;
    margin-bottom: 8px !important;
}

/* Comment actions */
[data-theme="light"] .comment-actions {
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    padding: 12px 0 0 0 !important;
    margin-top: 12px !important;
}

[data-theme="light"] .comment-action-btn {
    background-color: transparent !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}

[data-theme="light"] .comment-action-btn:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px) !important;
}

[data-theme="light"] .comment-action-btn.liked {
    background-color: #fce4ec !important;
    color: #e91e63 !important;
    border-color: #e91e63 !important;
}

[data-theme="light"] .comment-action-btn.liked:hover {
    background-color: #f8bbd9 !important;
    color: #c2185b !important;
}

[data-theme="light"] .like-count-display {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

/* Reply styling */
[data-theme="light"] .comment-item.reply .comment-content {
    background-color: #f8f9fa !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

/* Edit and delete buttons */
[data-theme="light"] .comment-action-btn.edit-btn {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffc107 !important;
}

[data-theme="light"] .comment-action-btn.edit-btn:hover {
    background-color: #ffeaa7 !important;
    color: #6c5500 !important;
}

[data-theme="light"] .comment-action-btn.delete-btn {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border-color: #dc3545 !important;
}

[data-theme="light"] .comment-action-btn.delete-btn:hover {
    background-color: #f5c6cb !important;
    color: #5a1616 !important;
}

/* ========================================
   MOBILE HEADER LIGHT MODE STYLING
======================================== */

/* Mobile header */
[data-theme="light"] .mobileHeader {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .mobileHeader button {
    background-color: transparent !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .mobileHeader button:hover {
    background-color: #f8f9fa !important;
    color: #2196f3 !important;
    border-color: #2196f3 !important;
}

[data-theme="light"] .mobileHeader .searchBar {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 25px !important;
}

[data-theme="light"] .mobileHeader .searchBar input {
    background-color: transparent !important;
    color: #212529 !important;
    border: none !important;
}

[data-theme="light"] .mobileHeader .searchBar input::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .mobileHeader .searchBar button {
    background-color: transparent !important;
    color: #6c757d !important;
    border: none !important;
}

[data-theme="light"] .mobileHeader .dropdown {
    background-color: #ffffff !important;
}

[data-theme="light"] .mobileHeader .dropdownButton {
    background-color: transparent !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

[data-theme="light"] .mobileHeader .dropdownButton:hover {
    background-color: #f8f9fa !important;
    color: #2196f3 !important;
    border-color: #2196f3 !important;
}

/* Light mode overrides for mobile user profile */
[data-theme="light"] .mobileHeader .mobile-user-profile .dropdownButton {
    background-color: transparent !important;
    border: none !important;
}

[data-theme="light"] .mobileHeader .mobile-user-profile .dropdownButton:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .mobileHeader .mobile-user-profile .user-name {
    color: var(--text-primary, #212529) !important;
}

[data-theme="light"] .mobileHeader .mobile-user-profile .user-handle {
    color: var(--text-muted, #6c757d) !important;
}

[data-theme="light"] .mobileHeader .dropdownMenu {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .mobileHeader .dropdownMenu a {
    color: #212529 !important;
    text-decoration: none !important;
    padding: 12px 16px !important;
    display: block !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .mobileHeader .dropdownMenu a:hover {
    background-color: #f8f9fa !important;
    color: #2196f3 !important;
}

/* ========================================
   DROPDOWN MENUS LIGHT MODE STYLING
======================================== */

/* General dropdown styling */
[data-theme="light"] .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .dropdown-item {
    color: #212529 !important;
    text-decoration: none !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid #f8f9fa !important;
}

[data-theme="light"] .dropdown-item:hover {
    background-color: #f8f9fa !important;
    color: #2196f3 !important;
}

[data-theme="light"] .dropdown-item:last-child {
    border-bottom: none !important;
}

/* User profile dropdown - Light Mode */
[data-theme="light"] .user-profile-nav .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    min-width: 200px !important;
    z-index: 1050 !important;
}

[data-theme="light"] .user-profile-nav .dropdown-item {
    color: #212529 !important;
    padding: 12px 20px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .user-profile-nav .dropdown-item:hover {
    background-color: #e3f2fd !important;
    color: #2196f3 !important;
    transform: translateX(4px) !important;
}

[data-theme="light"] .user-profile-nav .dropdown-item i {
    color: #6c757d !important;
    margin-right: 8px !important;
    width: 16px !important;
}

[data-theme="light"] .user-profile-nav .dropdown-item:hover i {
    color: #2196f3 !important;
}

/* User profile dropdown - Dark Mode (same behavior as light mode) */
[data-theme="dark"] .user-profile-nav .dropdown-menu {
    background-color: var(--bg-primary, #1a1a1a) !important;
    border: 1px solid var(--border-color, #333) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    min-width: 200px !important;
    z-index: 1050 !important;
    position: absolute !important;
}

/* Ensure dropdown container has proper positioning in dark mode */
[data-theme="dark"] .user-profile-nav .dropdown {
    position: relative !important;
}

[data-theme="dark"] .user-profile-nav .dropdown-item {
    color: var(--text-primary, #ffffff) !important;
    padding: 12px 20px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

[data-theme="dark"] .user-profile-nav .dropdown-item:hover {
    background-color: rgba(33, 150, 243, 0.1) !important;
    color: #2196f3 !important;
    transform: translateX(4px) !important;
}

[data-theme="dark"] .user-profile-nav .dropdown-item i {
    color: var(--text-secondary, #adb5bd) !important;
    margin-right: 8px !important;
    width: 16px !important;
}

[data-theme="dark"] .user-profile-nav .dropdown-item:hover i {
    color: #2196f3 !important;
}

/* Ensure dropdown shows when toggled - both themes - HIGHEST SPECIFICITY */
.user-profile-nav .dropdown-menu.show,
.user-profile-nav .dropdown.show .dropdown-menu,
.user-profile-nav .dropdown[aria-expanded="true"] .dropdown-menu,
[data-theme="light"] .user-profile-nav .dropdown-menu.show,
[data-theme="light"] .user-profile-nav .dropdown.show .dropdown-menu,
[data-theme="light"] .user-profile-nav .dropdown[aria-expanded="true"] .dropdown-menu,
[data-theme="dark"] .user-profile-nav .dropdown-menu.show,
[data-theme="dark"] .user-profile-nav .dropdown.show .dropdown-menu,
[data-theme="dark"] .user-profile-nav .dropdown[aria-expanded="true"] .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Ensure dropdown is hidden by default - both themes - but allow Bootstrap to control */
.user-profile-nav .dropdown-menu:not(.show):not([style*="display: block"]),
[data-theme="light"] .user-profile-nav .dropdown-menu:not(.show):not([style*="display: block"]),
[data-theme="dark"] .user-profile-nav .dropdown-menu:not(.show):not([style*="display: block"]) {
    display: none !important;
}

/* Override any conflicting dark mode rules for user-profile-nav dropdown - HIGHEST PRIORITY */
[data-theme="dark"] .user-profile-nav .dropdown.show .dropdown-menu,
[data-theme="dark"] .user-profile-nav .dropdown[aria-expanded="true"] .dropdown-menu,
[data-theme="dark"] .user-profile-nav .dropdown-menu.show,
body[data-theme="dark"] .user-profile-nav .dropdown.show .dropdown-menu,
body[data-theme="dark"] .user-profile-nav .dropdown[aria-expanded="true"] .dropdown-menu,
body[data-theme="dark"] .user-profile-nav .dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    z-index: 1050 !important;
}

/* Force show in dark mode when Bootstrap adds show class */
[data-theme="dark"] .user-profile-nav .dropdown-menu.show[style*="display: none"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ========================================
   COMPREHENSIVE TEXT LIGHT MODE OVERRIDES
======================================== */

/* Override all hardcoded white text colors */
[data-theme="light"] * {
    color: inherit !important;
}

/* Specific text color overrides for light mode */
[data-theme="light"] .text-white,
[data-theme="light"] .text-light,
[data-theme="light"] .white-text,
[data-theme="light"] [style*="color: #ffffff"],
[data-theme="light"] [style*="color: white"],
[data-theme="light"] [style*="color: #fff"] {
    color: #212529 !important;
}

/* Override muted text colors */
[data-theme="light"] .text-muted,
[data-theme="light"] [style*="color: #b0b0b0"],
[data-theme="light"] [style*="color: #6c757d"] {
    color: #6c757d !important;
}

/* Override all paragraph and text elements */
[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] div,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] a,
[data-theme="light"] li,
[data-theme="light"] td,
[data-theme="light"] th,
[data-theme="light"] label,
[data-theme="light"] small,
[data-theme="light"] strong,
[data-theme="light"] b,
[data-theme="light"] i,
[data-theme="light"] em {
    color: #212529 !important;
}

/* Override specific marketplace text elements */
[data-theme="light"] .marketplace-header-content,
[data-theme="light"] .marketplace-subtitle,
[data-theme="light"] .marketplace-title,
[data-theme="light"] .product-title,
[data-theme="light"] .product-description,
[data-theme="light"] .product-price,
[data-theme="light"] .product-category,
[data-theme="light"] .bid-amount,
[data-theme="light"] .bid-status,
[data-theme="light"] .bid-time,
[data-theme="light"] .section-title,
[data-theme="light"] .stats-value,
[data-theme="light"] .stats-label {
    color: #212529 !important;
}

/* Override profile page text elements */
[data-theme="light"] .profileInfo .name,
[data-theme="light"] .profileInfo .username,
[data-theme="light"] .profileInfo .followers,
[data-theme="light"] .profileInfo .right p,
[data-theme="light"] .user-profile-card,
[data-theme="light"] .user-stats,
[data-theme="light"] .user-bio,
[data-theme="light"] .user-social-links {
    color: #212529 !important;
}

/* Override comment text elements */
[data-theme="light"] .comment-username,
[data-theme="light"] .comment-text,
[data-theme="light"] .comment-time,
[data-theme="light"] .comment-content {
    color: #212529 !important;
}

/* Override header and navigation text */
[data-theme="light"] .navbar-brand,
[data-theme="light"] .nav-link,
[data-theme="light"] .logo-text {
    color: #212529 !important;
    line-height: 44px !important;
    height: 14px !important;
    display: flex !important;
    align-items: center !important;
    padding:20px !important;

}

/* Override sidebar text elements */
[data-theme="light"] .nav-item,
[data-theme="light"] .sidebar a,
[data-theme="light"] .sidebar-nav a {
    color: #6c757d !important;
}

[data-theme="light"] .nav-item.active,
[data-theme="light"] .sidebar a.active,
[data-theme="light"] .sidebar-nav a.active {
    color: #2196f3 !important;
}

/* Override form elements */
[data-theme="light"] .form-control,
[data-theme="light"] .form-select,
[data-theme="light"] .form-label,
[data-theme="light"] .form-text,
[data-theme="light"] .form-check-label {
    color: #212529 !important;
}

[data-theme="light"] .form-control::placeholder,
[data-theme="light"] .form-select::placeholder {
    color: #6c757d !important;
}

/* Override button text */
[data-theme="light"] .btn,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-outline-primary,
[data-theme="light"] .btn-outline-secondary {
    color: inherit !important;
}

/* Override card text elements */
[data-theme="light"] .card,
[data-theme="light"] .card-body,
[data-theme="light"] .card-title,
[data-theme="light"] .card-text,
[data-theme="light"] .card-header {
    color: #212529 !important;
}

/* Override table text elements */
[data-theme="light"] .table,
[data-theme="light"] .table th,
[data-theme="light"] .table td {
    color: #212529 !important;
}

/* Override alert text elements */
[data-theme="light"] .alert,
[data-theme="light"] .alert-success,
[data-theme="light"] .alert-danger,
[data-theme="light"] .alert-warning,
[data-theme="light"] .alert-info {
    color: #212529 !important;
}

/* Override modal text elements */
[data-theme="light"] .modal,
[data-theme="light"] .modal-body,
[data-theme="light"] .modal-title,
[data-theme="light"] .modal-header,
[data-theme="light"] .modal-footer {
    color: #212529 !important;
}

/* Comprehensive Modal Styling - Light Mode */
[data-theme="light"] .modal-dialog {
    max-width: 500px !important;
    margin: 1.75rem auto !important;
}

[data-theme="light"] .modal-dialog-centered {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 3.5rem) !important;
}

[data-theme="light"] .modal-content {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    color: #212529 !important;
}

[data-theme="light"] .modal-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 1rem 1.5rem !important;
}

[data-theme="light"] .modal-title {
    color: #212529 !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    margin: 0 !important;
}

[data-theme="light"] .modal-body {
    background-color: #ffffff !important;
    color: #212529 !important;
    padding: 1.5rem !important;
}

[data-theme="light"] .modal-footer {
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    border-radius: 0 0 12px 12px !important;
    gap:10px;
    padding: 1rem 1.5rem !important;
}

[data-theme="light"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(2px) !important;
}

[data-theme="light"] .btn-close {
    color: #6c757d !important;
    opacity: 0.8 !important;
}

[data-theme="light"] .btn-close:hover {
    color: #dc3545 !important;
    opacity: 1 !important;
}

/* Comprehensive Modal Styling - Dark Mode */
[data-theme="dark"] .modal-dialog {
    max-width: 500px !important;
    margin: 1.75rem auto !important;
}

[data-theme="dark"] .modal-dialog-centered {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 3.5rem) !important;
}

[data-theme="dark"] .modal-content {
    background-color: #2a2a2a !important;
    border: 1px solid #404040 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal-header {
    background-color: #333333 !important;
    border-bottom: 1px solid #404040 !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 1rem 1.5rem !important;
}

[data-theme="dark"] .modal-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    margin: 0 !important;
}

[data-theme="dark"] .modal-body {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    padding: 1.5rem !important;
}

[data-theme="dark"] .modal-footer {
    background-color: #333333 !important;
    border-top: 1px solid #404040 !important;
    gap:10px;
    border-radius: 0 0 12px 12px !important;
    padding: 1rem 1.5rem !important;
}

[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(3px) !important;
}

/* Image Modal Styling - Theme Consistent */
[data-theme="dark"] #imagemodal .close-button,
[data-theme="dark"] #imagemodal .close {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] #imagemodal .close-button:hover,
[data-theme="dark"] #imagemodal .close:hover {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ========================================
   REPORT MODAL - THEME AWARE STYLING
   ======================================== */

/* Light Mode - Report Modal */
[data-theme="light"] #reportmodal .modal-content {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

[data-theme="light"] #reportmodal .modal-header {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    color: white !important;
    border: none !important;
    padding: 24px 28px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

[data-theme="light"] #reportmodal .modal-title {
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    font-family: 'Outfit', sans-serif !important;
    color: white !important;
}

[data-theme="light"] #reportmodal .modal-header .close {
    color: white !important;
    opacity: 0.9 !important;
    font-size: 1.8rem !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    transition: opacity 0.2s ease !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

[data-theme="light"] #reportmodal .modal-header .close:hover {
    opacity: 1 !important;
}

[data-theme="light"] #reportmodal .modal-body {
    background: #ffffff !important;
    padding: 28px !important;
    display: block !important;
}

[data-theme="light"] #reportmodal .modal-body label {
    color: #212529 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

[data-theme="light"] #reportmodal #report_notes {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    color: #212529 !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    resize: vertical !important;
    min-height: 120px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

[data-theme="light"] #reportmodal #report_notes:focus {
    border-color: #01ADF1 !important;
    box-shadow: 0 0 0 3px rgba(1, 173, 241, 0.1) !important;
    outline: none !important;
    background: #ffffff !important;
}

[data-theme="light"] #reportmodal #report_notes::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] #reportmodal .modal-body small {
    color: #6c757d !important;
    font-size: 12px !important;
    margin-top: 8px !important;
    display: block !important;
}

[data-theme="light"] #reportmodal .modal-body > div[style*="background"] {
    background: #f8f9fa !important;
    border-left: 3px solid #01ADF1 !important;
}

[data-theme="light"] #reportmodal .modal-body > div[style*="background"] p {
    color: #495057 !important;
}

[data-theme="light"] #reportmodal .modal-body > div[style*="background"] a {
    color: #01ADF1 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

[data-theme="light"] #reportmodal .modal-footer {
    background: #ffffff !important;
    border-top: 1px solid #dee2e6 !important;
    padding: 20px 28px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

[data-theme="light"] #reportmodal .modal-footer .btn-secondary {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    min-width: 100px !important;
}

[data-theme="light"] #reportmodal .modal-footer .btn-secondary:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}

[data-theme="light"] #reportmodal .modal-footer .btn-primary {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    border: none !important;
    color: white !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    min-width: 120px !important;
    box-shadow: 0 4px 15px rgba(1, 173, 241, 0.3) !important;
}

[data-theme="light"] #reportmodal .modal-footer .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(1, 173, 241, 0.4) !important;
}

[data-theme="light"] #reportmodal .char-counter {
    color: #6c757d !important;
    font-size: 12px !important;
    margin-top: 8px !important;
}

/* Dark Mode - Report Modal */
[data-theme="dark"] #reportmodal .modal-content {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
    overflow: hidden !important;
    background: #1a1a1a !important;
}

[data-theme="dark"] #reportmodal .modal-header {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    color: white !important;
    border: none !important;
    padding: 24px 28px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

[data-theme="dark"] #reportmodal .modal-title {
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    font-family: 'Outfit', sans-serif !important;
    color: white !important;
}

[data-theme="dark"] #reportmodal .modal-header .close {
    color: white !important;
    opacity: 0.9 !important;
    font-size: 1.8rem !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    transition: opacity 0.2s ease !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

[data-theme="dark"] #reportmodal .modal-header .close:hover {
    opacity: 1 !important;
}

[data-theme="dark"] #reportmodal .modal-body {
    background: #1a1a1a !important;
    padding: 28px !important;
    display: block !important;
}

[data-theme="dark"] #reportmodal .modal-body label {
    color: #e0e0e0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

[data-theme="dark"] #reportmodal #report_notes {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    border-radius: 12px !important;
    color: #e0e0e0 !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    resize: vertical !important;
    min-height: 120px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

[data-theme="dark"] #reportmodal #report_notes:focus {
    border-color: #01ADF1 !important;
    box-shadow: 0 0 0 3px rgba(1, 173, 241, 0.1) !important;
    outline: none !important;
    background: #2a2a2a !important;
}

[data-theme="dark"] #reportmodal #report_notes::placeholder {
    color: #888 !important;
}

[data-theme="dark"] #reportmodal .modal-body small {
    color: #888 !important;
    font-size: 12px !important;
    margin-top: 8px !important;
    display: block !important;
}

[data-theme="dark"] #reportmodal .modal-body > div[style*="background"] {
    background: #252525 !important;
    border-left: 3px solid #01ADF1 !important;
}

[data-theme="dark"] #reportmodal .modal-body > div[style*="background"] p {
    color: #b0b0b0 !important;
}

[data-theme="dark"] #reportmodal .modal-body > div[style*="background"] a {
    color: #01ADF1 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

[data-theme="dark"] #reportmodal .modal-footer {
    background: #1a1a1a !important;
    border-top: 1px solid #333 !important;
    padding: 20px 28px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

[data-theme="dark"] #reportmodal .modal-footer .btn-secondary {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    min-width: 100px !important;
}

[data-theme="dark"] #reportmodal .modal-footer .btn-secondary:hover {
    background: #333 !important;
    border-color: #555 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] #reportmodal .modal-footer .btn-primary {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    border: none !important;
    color: white !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    min-width: 120px !important;
    box-shadow: 0 4px 15px rgba(1, 173, 241, 0.3) !important;
}

[data-theme="dark"] #reportmodal .modal-footer .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(1, 173, 241, 0.4) !important;
}

[data-theme="dark"] #reportmodal .char-counter {
    color: #888 !important;
    font-size: 12px !important;
    margin-top: 8px !important;
}

/* ========================================
   FEED DETAILS PAGE - THEME AWARE STYLING
   ======================================== */

/* Back button styling - Theme Aware */
.back-btn {
    background: #001b2b;
    border: none;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.back-btn:hover {
    background: #a61651;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Dark mode - default styling */
[data-theme="dark"] .back-btn,
html:not([data-theme="light"]) .back-btn {
    background: #001b2b !important;
    color: #ffffff !important;
    border: none !important;
}

[data-theme="dark"] .back-btn:hover,
html:not([data-theme="light"]) .back-btn:hover {
    background: #a61651 !important;
    color: #ffffff !important;
}

/* Light mode - light styling */
[data-theme="light"] .back-btn {
    background: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .back-btn:hover {
    background: #e9ecef !important;
    color: #212529 !important;
    border-color: #adb5bd !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Light mode - icon color */
[data-theme="light"] .back-btn i,
[data-theme="light"] .back-btn .fa {
    color: #212529 !important;
}

/* Dark mode - icon color */
[data-theme="dark"] .back-btn i,
[data-theme="dark"] .back-btn .fa,
html:not([data-theme="light"]) .back-btn i,
html:not([data-theme="light"]) .back-btn .fa {
    color: #ffffff !important;
}

/* Override forgotpassword_area background to match dashboard feed */
.forgotpassword_area.background-color-new {
    background: transparent !important;
}

/* Dark mode - inherit from body (same as dashboard feed) */
[data-theme="dark"] .forgotpassword_area.background-color-new,
html:not([data-theme="light"]) .forgotpassword_area.background-color-new {
    background: transparent !important;
}

/* Light mode - white background (same as dashboard feed) */
[data-theme="light"] .forgotpassword_area.background-color-new {
    background: #ffffff !important;
}

/* Ensure body background matches dashboard feed */
body[data-theme="dark"] {
    background-color: #15191C !important;
}

body[data-theme="light"] {
    background-color: #ffffff !important;
}

/* Fix like button styling */
.like_commentbtn {
    cursor: pointer !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: all 0.2s ease !important;
}

.like_commentbtn:hover {
    opacity: 0.8 !important;
    transform: scale(1.05) !important;
}

.like_commentbtn img {
    pointer-events: none !important;
    opacity: 1 !important;
}

.like_commentbtn div {
    pointer-events: none !important;
    opacity: 1 !important;
}

/* Like button - Red heart icon when liked (both light and dark modes) */
.like_commentbtn.liked img {
    filter: brightness(0) saturate(100%) invert(17%) sepia(96%) saturate(7126%) hue-rotate(330deg) brightness(95%) contrast(94%) !important;
}

[data-theme="light"] .like_commentbtn.liked img,
[data-theme="dark"] .like_commentbtn.liked img {
    filter: brightness(0) saturate(100%) invert(17%) sepia(96%) saturate(7126%) hue-rotate(330deg) brightness(95%) contrast(94%) !important;
}

/* Alternative: If using filled icon, ensure it's visible and red */
.like_commentbtn.liked img[src*="likefillicon"],
.like_commentbtn.liked img[src*="likefill"] {
    filter: brightness(0) saturate(100%) invert(17%) sepia(96%) saturate(7126%) hue-rotate(330deg) brightness(95%) contrast(94%) !important;
}

/* Dashboard feed like button - Red when liked */
.mainSection .post .engage .like_commentbtn.liked img,
.forgotpassword_area .post.gallery .engage .like_commentbtn.liked img {
    filter: brightness(0) saturate(100%) invert(17%) sepia(96%) saturate(7126%) hue-rotate(330deg) brightness(95%) contrast(94%) !important;
}

[data-theme="light"] .mainSection .post .engage .like_commentbtn.liked img,
[data-theme="dark"] .mainSection .post .engage .like_commentbtn.liked img,
[data-theme="light"] .forgotpassword_area .post.gallery .engage .like_commentbtn.liked img,
[data-theme="dark"] .forgotpassword_area .post.gallery .engage .like_commentbtn.liked img {
    filter: brightness(0) saturate(100%) invert(17%) sepia(96%) saturate(7126%) hue-rotate(330deg) brightness(95%) contrast(94%) !important;
}

/* Modern Post Design - Match Dashboard Feed */
.forgotpassword_area .container {
    max-width: 800px;
    margin: 0 auto;
}

.forgotpassword_area .post.gallery {
    min-height: 544px;
    height: 544px;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    background: var(--bg-secondary, #2a2a2a);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 20px;
    border: 1px solid var(--border-color, #404040);
    width: 100%;
    box-sizing: border-box;
}

.forgotpassword_area .post.gallery.text-only-post {
    height: fit-content !important;
    min-height: fit-content !important;
    max-height: none !important;
}

.forgotpassword_area .post.gallery.text-only-post * {
    max-height: none !important;
}

.forgotpassword_area .post.gallery.text-only-post .postHeader,
.forgotpassword_area .post.gallery.text-only-post .engage {
    height: auto !important;
    min-height: auto !important;
}

.forgotpassword_area .post.gallery:has(.images:not(:empty)):not(.text-only-post) {
    min-height: 544px !important;
    height: 544px !important;
}

.forgotpassword_area .post.gallery.text-only-post .images {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
}

/* Post Header Styling - Match Dashboard Feed */
.forgotpassword_area .post.gallery .postHeader {
    padding: 15px;
    border-bottom: 1px solid var(--border-color, #404040);
    display: flex;
    background: var(--bg-secondary, #2a2a2a);
    color: var(--text-primary, #ffffff);
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    flex-shrink: 0;
}

.forgotpassword_area .post.gallery .postHeader .user {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: white;
}

.forgotpassword_area .post.gallery .postHeader .user img {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

.forgotpassword_area .post.gallery .postHeader .user p {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
}

.forgotpassword_area .post.gallery .postHeader .user span {
    color: #888;
    font-weight: normal;
    font-size: 14px;
}

.forgotpassword_area .post.gallery .postHeader .verified {
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Ensure verified badge is visible in light mode */
[data-theme="light"] .forgotpassword_area .post.gallery .postHeader .verified {
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
}

.forgotpassword_area .post.gallery .postHeader .time {
    display: flex;
    align-items: center;
    gap: 10px;
}

.forgotpassword_area .post.gallery .postHeader .time img {
    width: 16px;
    height: 16px;
}

.forgotpassword_area .post.gallery .postHeader .dropdown {
    position: relative;
    z-index: 99999 !important;
    isolation: isolate !important;
}

/* Ensure post and postHeader don't clip the dropdown */
.forgotpassword_area .post.gallery,
.forgotpassword_area .post.gallery .postHeader {
    overflow: visible !important;
    position: relative;
}

.forgotpassword_area .post.gallery .postHeader .dropdown .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 1001;
    display: none;
}

.forgotpassword_area .post.gallery .postHeader .dropdown .bg.show,
.forgotpassword_area .post.gallery .postHeader .dropdown.open .bg {
    display: block !important;
}

.forgotpassword_area .post.gallery .postHeader .dropdownButton {
    cursor: pointer !important;
    position: relative !important;
    z-index: 1003 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    padding: 10px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
}

.forgotpassword_area .post.gallery .postHeader .dropdownButton:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.05) !important;
}

.forgotpassword_area .post.gallery .postHeader .dropdownButton img {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    position: relative !important;
    z-index: 0 !important;
}

/* Responsive sizes */
@media (max-width: 768px) {
    .forgotpassword_area .post.gallery .postHeader .dropdownButton {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        padding: 9px !important;
    }
    
    .forgotpassword_area .post.gallery .postHeader .dropdownButton img {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }
}

@media (max-width: 576px) {
    .forgotpassword_area .post.gallery .postHeader .dropdownButton {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        padding: 8px !important;
    }
    
    .forgotpassword_area .post.gallery .postHeader .dropdownButton img {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
}

.forgotpassword_area .post.gallery .postHeader .dropdownMenu {
    position: fixed !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px;
    min-width: 150px;
    display: none;
    z-index: 99999 !important;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
    margin-top: 5px;
    isolation: isolate !important;
    transform: translateX(-100%);
}

.forgotpassword_area .post.gallery .postHeader .dropdownMenu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.forgotpassword_area .post.gallery .postHeader .dropdown.open .dropdownMenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.forgotpassword_area .post.gallery .postHeader .dropdownMenu a,
.forgotpassword_area .post.gallery .postHeader .dropdownMenu button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: white;
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}

.forgotpassword_area .post.gallery .postHeader .dropdownMenu a:hover,
.forgotpassword_area .post.gallery .postHeader .dropdownMenu button:hover {
    background: #333;
}

/* Post Text Color - Dark/Light Mode */
.forgotpassword_area .post.gallery > p {
    margin: 12px 15px;
    line-height: 1.5;
    padding: 0;
}

/* Light Mode - Dark Text (must come first) */
html[data-theme="light"] .forgotpassword_area .post.gallery > p,
html[data-theme="light"] .forgotpassword_area .post.gallery > p *,
html[data-theme="light"] .forgotpassword_area .post.gallery > p span,
html[data-theme="light"] .forgotpassword_area .post.gallery > p a,
html[data-theme="light"] .forgotpassword_area .post.gallery > p strong,
html[data-theme="light"] .forgotpassword_area .post.gallery > p em,
html[data-theme="light"] .forgotpassword_area .post.gallery > p b,
html[data-theme="light"] .forgotpassword_area .post.gallery > p i,
[data-theme="light"] .forgotpassword_area .post.gallery > p,
[data-theme="light"] .forgotpassword_area .post.gallery > p *,
[data-theme="light"] .forgotpassword_area .post.gallery > p span,
[data-theme="light"] .forgotpassword_area .post.gallery > p a,
[data-theme="light"] .forgotpassword_area .post.gallery > p strong,
[data-theme="light"] .forgotpassword_area .post.gallery > p em,
[data-theme="light"] .forgotpassword_area .post.gallery > p b,
[data-theme="light"] .forgotpassword_area .post.gallery > p i,
body:not([data-theme="dark"]) .forgotpassword_area .post.gallery > p,
body:not([data-theme="dark"]) .forgotpassword_area .post.gallery > p * {
    color: #000000 !important;
}

/* Dark Mode - Light Text (must come after light mode to override) */
html[data-theme="dark"] .forgotpassword_area .post.gallery > p,
html[data-theme="dark"] .forgotpassword_area .post.gallery > p *,
html[data-theme="dark"] .forgotpassword_area .post.gallery > p span,
html[data-theme="dark"] .forgotpassword_area .post.gallery > p a,
html[data-theme="dark"] .forgotpassword_area .post.gallery > p strong,
html[data-theme="dark"] .forgotpassword_area .post.gallery > p em,
html[data-theme="dark"] .forgotpassword_area .post.gallery > p b,
html[data-theme="dark"] .forgotpassword_area .post.gallery > p i,
[data-theme="dark"] .forgotpassword_area .post.gallery > p,
[data-theme="dark"] .forgotpassword_area .post.gallery > p *,
[data-theme="dark"] .forgotpassword_area .post.gallery > p span,
[data-theme="dark"] .forgotpassword_area .post.gallery > p a,
[data-theme="dark"] .forgotpassword_area .post.gallery > p strong,
[data-theme="dark"] .forgotpassword_area .post.gallery > p em,
[data-theme="dark"] .forgotpassword_area .post.gallery > p b,
[data-theme="dark"] .forgotpassword_area .post.gallery > p i,
body[data-theme="dark"] .forgotpassword_area .post.gallery > p,
body[data-theme="dark"] .forgotpassword_area .post.gallery > p *,
body[data-theme="dark"] .forgotpassword_area .post.gallery > p span,
body[data-theme="dark"] .forgotpassword_area .post.gallery > p a,
body[data-theme="dark"] .forgotpassword_area .post.gallery > p strong,
body[data-theme="dark"] .forgotpassword_area .post.gallery > p em,
body[data-theme="dark"] .forgotpassword_area .post.gallery > p b,
body[data-theme="dark"] .forgotpassword_area .post.gallery > p i {
    color: #ffffff !important;
}

/* Fallback - if theme attribute is not set, default to black (light mode) */
html:not([data-theme="dark"]) .forgotpassword_area .post.gallery > p:not([style*="color"]),
html:not([data-theme="dark"]) .forgotpassword_area .post.gallery > p *:not([style*="color"]) {
    color: #000000;
}

/* Post Header Username Colors */
html[data-theme="dark"] .forgotpassword_area .post.gallery .postHeader .user,
html[data-theme="dark"] .forgotpassword_area .post.gallery .postHeader .user p,
html[data-theme="dark"] .forgotpassword_area .post.gallery .postHeader .user a {
    color: #ffffff !important;
}

html[data-theme="dark"] .forgotpassword_area .post.gallery .postHeader .user span {
    color: #b0b0b0 !important;
}

html[data-theme="light"] .forgotpassword_area .post.gallery .postHeader .user,
html[data-theme="light"] .forgotpassword_area .post.gallery .postHeader .user p,
html[data-theme="light"] .forgotpassword_area .post.gallery .postHeader .user a {
    color: #000000 !important;
}

html[data-theme="light"] .forgotpassword_area .post.gallery .postHeader .user span {
    color: #888888 !important;
}

/* Time Styling */
html[data-theme="dark"] .forgotpassword_area .post.gallery .postHeader .time p {
    color: #b0b0b0 !important;
}

html[data-theme="light"] .forgotpassword_area .post.gallery .postHeader .time p {
    color: #888888 !important;
}

/* Engage Class - Match Dashboard Feed */
.forgotpassword_area .post.gallery .engage {
    padding: 12px 15px;
    display: flex;
    gap: 36px;
    align-items: center;
    position: relative;
    z-index: 10;
    border-top: none !important;
    margin-bottom: 0;
    background: transparent !important;
    flex-shrink: 0;
    width: 100%;
}

.forgotpassword_area .post.gallery .engage button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}

.forgotpassword_area .post.gallery .engage button img {
    width: 20px;
    height: 20px;
}

.forgotpassword_area .post.gallery .engage button:hover {
    opacity: 0.8;
}

/* Comment Section - Match Dashboard Feed */
.forgotpassword_area .post.gallery + .hidden_comment,
.forgotpassword_area .hidden_comment {
    padding: 10px 15px;
    margin-top: -5px;
    border-top: 1px solid #333;
    background: var(--bg-secondary, #2a2a2a);
}

.forgotpassword_area .hidden_comment_input_box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.forgotpassword_area .hidden_comment_input_box textarea {
    flex: 1;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 20px;
    padding: 10px 15px;
    color: white;
    resize: none;
    outline: none;
}

.forgotpassword_area .hidden_comment_input_box textarea::placeholder {
    color: #888;
}

.forgotpassword_area .hidden_comment_input_box button {
    background: #007bff;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.forgotpassword_area .hidden_comment_input_box button i,
.forgotpassword_area .hidden_comment_input_box button .fa {
    color: white;
    font-size: 16px;
}

/* Timer Styling - Top Right of Video */
.forgotpassword_area .post.gallery .video-container .main-timer {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent !important;
    color: white !important;
    z-index: 10;
    pointer-events: none;
    font-size: 12px;
    font-weight: 600;
}

/* Images Container */
.forgotpassword_area .post.gallery .images {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    min-height: 0;
}

.forgotpassword_area .post.gallery .images .intro_add_video_box,
.forgotpassword_area .post.gallery .images .video-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forgotpassword_area .post.gallery .images img,
.forgotpassword_area .post.gallery .images video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Video Container Styling */
.forgotpassword_area .post.gallery .images .video-container {
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.forgotpassword_area .post.gallery .images .video-container video {
    width: 100%;
    height: auto;
    display: block;
}

/* Premium Post Container */
.premium-post-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.premium-post-indicator {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 600;
}

.payment-action-section {
    margin-top: 16px;
}

.purchase-post-btn {
    background: linear-gradient(90deg, #01ADF1 0%, #A61651 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.purchase-post-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(1, 173, 241, 0.4);
}

/* Ensure post actions match dashboard feed exactly */
.forgotpassword_area .post.gallery .engage {
    border-top: 1px solid var(--border-color, #404040);
    background: var(--bg-secondary, #2a2a2a);
}

[data-theme="light"] .forgotpassword_area .post.gallery .engage {
    border-top-color: #dee2e6;
    background: #ffffff;
}

[data-theme="dark"] .forgotpassword_area .post.gallery .engage {
    border-top-color: #404040;
    background: #2a2a2a;
}

/* Match dashboard feed button styling - Like, Comment, Share */
.forgotpassword_area .post.gallery .engage button {
    color: var(--text-primary, #ffffff);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    width: max-content;
    height: max-content;
    transition: color var(--transition-normal, 0.3s ease);
}

[data-theme="light"] .forgotpassword_area .post.gallery .engage button {
    color: #6c757d !important;
    background-color: transparent !important;
    border: none !important;
}

[data-theme="light"] .forgotpassword_area .post.gallery .engage button:hover {
    color: #212529 !important;
    background-color: #f8f9fa !important;
}

[data-theme="light"] .forgotpassword_area .post.gallery .engage button.active {
    color: #dc3545 !important;
}

/* Feed details page like button - Red icon when active/liked */
.forgotpassword_area .post.gallery .engage .like_commentbtn.active img,
.forgotpassword_area .post.gallery .engage .like_commentbtn.liked img {
    filter: brightness(0) saturate(100%) invert(17%) sepia(96%) saturate(7126%) hue-rotate(330deg) brightness(95%) contrast(94%) !important;
}

[data-theme="light"] .forgotpassword_area .post.gallery .engage .like_commentbtn.active img,
[data-theme="light"] .forgotpassword_area .post.gallery .engage .like_commentbtn.liked img,
[data-theme="dark"] .forgotpassword_area .post.gallery .engage .like_commentbtn.active img,
[data-theme="dark"] .forgotpassword_area .post.gallery .engage .like_commentbtn.liked img {
    filter: brightness(0) saturate(100%) invert(17%) sepia(96%) saturate(7126%) hue-rotate(330deg) brightness(95%) contrast(94%) !important;
}

[data-theme="dark"] .forgotpassword_area .post.gallery .engage button {
    color: #ffffff;
}

[data-theme="dark"] .forgotpassword_area .post.gallery .engage button:hover {
    opacity: 0.8;
}

/* Tip Button - Gradient styling (matches dashboard feed) */
.forgotpassword_area .post.gallery .engage .tip_btn,
.forgotpassword_area .post.gallery .engage button.tip_btn {
    margin-left: auto;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10 !important;
    position: relative;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    border: none !important;
}





/* Owner Tip Count Display - Match tip button styling */
.forgotpassword_area .post.gallery .engage .tip_count_display.owner_tip_display {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 16px;
    color: var(--text-primary, #ffffff);
    padding: 0;
    background: transparent;
    border: none;
    cursor: default;
    pointer-events: none;
    width: max-content;
    height: max-content;
}

.forgotpassword_area .post.gallery .engage .tip_count_display.owner_tip_display img {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

.forgotpassword_area .post.gallery .engage .tip_count_display.owner_tip_display .tip_count {
    font-size: 16px;
    color: var(--text-primary, #ffffff);
}

[data-theme="light"] .forgotpassword_area .post.gallery .engage .tip_count_display.owner_tip_display {
    color: #212529 !important;
}

[data-theme="light"] .forgotpassword_area .post.gallery .engage .tip_count_display.owner_tip_display .tip_count {
    color: #212529 !important;
}

/* Ensure tip button image has proper sizing */
.forgotpassword_area .post.gallery .engage .tip_btn img,
.forgotpassword_area .post.gallery .engage button.tip_btn img {
    width: 20px;
    height: 20px;
}

/* Responsive Design - Feed Details Page */
@media (max-width: 991.98px) {
    .forgotpassword_area .container {
        max-width: 100%;
        padding: 0 15px;
    }
    
    .forgotpassword_area .post.gallery {
        min-height: auto !important;
        height: auto !important;
        margin-bottom: 15px;
    }
    
    .forgotpassword_area .post.gallery:has(.images:not(:empty)):not(.text-only-post) {
        min-height: 400px !important;
        height: auto !important;
        max-height: 600px !important;
    }
    
    .forgotpassword_area .post.gallery .postHeader {
        padding: 12px;
    }
    
    .forgotpassword_area .post.gallery .postHeader .user img {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    .forgotpassword_area .post.gallery .postHeader .user p {
        font-size: 13px;
    }
    
    .forgotpassword_area .post.gallery > p {
        margin: 10px 12px;
        font-size: 14px;
    }
    
    .forgotpassword_area .post.gallery .engage {
        padding: 10px 12px;
        gap: 20px;
    }
    
    .forgotpassword_area .post.gallery .engage button {
        font-size: 14px;
        gap: 8px;
    }
    
    .forgotpassword_area .post.gallery .engage button img {
        width: 18px;
        height: 18px;
    }
    
    .forgotpassword_area .post.gallery .engage .tip_btn,
    .forgotpassword_area .post.gallery .engage button.tip_btn {
        padding: 6px 14px !important;
        font-size: 14px !important;
    }
    
    .forgotpassword_area .hidden_comment {
        padding: 8px 12px;
    }
    
    .back-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .forgotpassword_area .container {
        padding: 0 10px;
    }
    
    .forgotpassword_area .post.gallery {
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .forgotpassword_area .post.gallery:has(.images:not(:empty)):not(.text-only-post) {
        min-height: 350px !important;
        max-height: 500px !important;
    }
    
    .forgotpassword_area .post.gallery .postHeader {
        padding: 10px;
    }
    
    .forgotpassword_area .post.gallery .postHeader .user {
        gap: 8px;
    }
    
    .forgotpassword_area .post.gallery .postHeader .user img {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    .forgotpassword_area .post.gallery .postHeader .user p {
        font-size: 12px;
    }
    
    .forgotpassword_area .post.gallery .postHeader .time p {
        font-size: 11px;
    }
    
    .forgotpassword_area .post.gallery > p {
        margin: 8px 10px;
        font-size: 13px;
        line-height: 1.4;
    }
    
    .forgotpassword_area .post.gallery .images {
        border-radius: 0;
    }
    
    .forgotpassword_area .post.gallery .images img,
    .forgotpassword_area .post.gallery .images video {
        max-height: 400px;
        object-fit: contain;
    }
    
    .forgotpassword_area .post.gallery .engage {
        padding: 8px 10px;
        gap: 15px;
        flex-wrap: wrap;
    }
    
    .forgotpassword_area .post.gallery .engage button {
        font-size: 13px;
        gap: 6px;
        padding: 0;
    }
    
    .forgotpassword_area .post.gallery .engage button img {
        width: 16px;
        height: 16px;
    }
    
    .forgotpassword_area .post.gallery .engage .tip_btn,
    .forgotpassword_area .post.gallery .engage button.tip_btn {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
    
    .forgotpassword_area .hidden_comment {
        padding: 8px 10px;
    }
    
    .forgotpassword_area .hidden_comment_input_box {
        gap: 8px;
    }
    
    .forgotpassword_area .hidden_comment_input_box textarea {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    .forgotpassword_area .hidden_comment_input_box button {
        width: 32px;
        height: 32px;
    }
    
    .back-btn {
        padding: 0.35rem 0.7rem;
        font-size: 0.8rem;
        margin-bottom: 0.75rem;
    }
    
    .premium-post-container {
        max-width: 90%;
    }
    
    .premium-post-indicator {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .purchase-post-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
    
    .forgotpassword_area .post.gallery .images .video-container {
        border-radius: 0;
    }
    
    .forgotpassword_area .post.gallery .images .video-container video {
        max-height: 400px;
    }
}

@media (max-width: 576px) {
    .forgotpassword_area .container {
        padding: 0 8px;
    }
    
    .forgotpassword_area .post.gallery {
        border-radius: 6px;
    }
    
    .forgotpassword_area .post.gallery:has(.images:not(:empty)):not(.text-only-post) {
        min-height: 300px !important;
        max-height: 450px !important;
    }
    
    .forgotpassword_area .post.gallery .postHeader {
        padding: 8px;
    }
    
    .forgotpassword_area .post.gallery .postHeader .user img {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    .forgotpassword_area .post.gallery .postHeader .user p {
        font-size: 11px;
    }
    
    .forgotpassword_area .post.gallery .postHeader .time p {
        font-size: 10px;
    }
    
    .forgotpassword_area .post.gallery > p {
        margin: 6px 8px;
        font-size: 12px;
        line-height: 1.3;
    }
    
    .forgotpassword_area .post.gallery .images img,
    .forgotpassword_area .post.gallery .images video {
        max-height: 350px;
    }
    
    .forgotpassword_area .post.gallery .engage {
        padding: 6px 8px;
        gap: 12px;
    }
    
    .forgotpassword_area .post.gallery .engage button {
        font-size: 12px;
        gap: 5px;
        padding: 0;
    }
    
    .forgotpassword_area .post.gallery .engage button img {
        width: 14px;
        height: 14px;
    }
    
    .forgotpassword_area .post.gallery .engage .tip_btn,
    .forgotpassword_area .post.gallery .engage button.tip_btn {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }
    
    .forgotpassword_area .hidden_comment {
        padding: 6px 8px;
    }
    
    .back-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    .premium-post-indicator {
        padding: 8px 12px;
        font-size: 12px;
        margin-bottom: 12px;
    }
    
    .purchase-post-btn {
        padding: 8px 16px;
        font-size: 12px;
    }
    
    .forgotpassword_area .post.gallery .images .video-container video {
        max-height: 350px;
    }
}

/* Light mode styling for feed details page */
[data-theme="light"] .forgotpassword_area .hidden_comment_input_box textarea {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .forgotpassword_area .hidden_comment_input_box textarea::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .forgotpassword_area .post.gallery + .hidden_comment,
[data-theme="light"] .forgotpassword_area .hidden_comment {
    background: #ffffff !important;
    border-top-color: #dee2e6 !important;
}

[data-theme="light"] .forgotpassword_area .post.gallery .postHeader .dropdownMenu {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .forgotpassword_area .post.gallery .postHeader .dropdownMenu a,
[data-theme="light"] .forgotpassword_area .post.gallery .postHeader .dropdownMenu button {
    color: #212529 !important;
}

[data-theme="light"] .forgotpassword_area .post.gallery .postHeader .dropdownMenu a:hover,
[data-theme="light"] .forgotpassword_area .post.gallery .postHeader .dropdownMenu button:hover {
    background: #f8f9fa !important;
}

[data-theme="light"] #imagemodal .close-button,
[data-theme="light"] #imagemodal .close {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #212529 !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] #imagemodal .close-button:hover,
[data-theme="light"] #imagemodal .close:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    color: #000000 !important;
}

[data-theme="dark"] .btn-close {
    color: #b0b0b0 !important;
    opacity: 0.8 !important;
}

[data-theme="dark"] .btn-close:hover {
    color: #ff6b6b !important;
    opacity: 1 !important;
}

/* Modal form elements styling */
[data-theme="light"] .modal-body .form-control {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .modal-body .form-control:focus {
    background-color: #ffffff !important;
    border-color: #01ADF1 !important;
    box-shadow: 0 0 0 0.2rem rgba(1, 173, 241, 0.25) !important;
}

[data-theme="dark"] .modal-body .form-control {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal-body .form-control:focus {
    background-color: #404040 !important;
    border-color: #01ADF1 !important;
    box-shadow: 0 0 0 0.2rem rgba(1, 173, 241, 0.25) !important;
}

/* Modal button styling */
[data-theme="light"] .modal-footer .btn {
    border-radius: 6px !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
}

[data-theme="dark"] .modal-footer .btn {
    border-radius: 6px !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
}

/* Modal text elements - Light Mode */
[data-theme="light"] .modal p,
[data-theme="light"] .modal span,
[data-theme="light"] .modal div,
[data-theme="light"] .modal label,
[data-theme="light"] .modal small,
[data-theme="light"] .modal .text-muted,
[data-theme="light"] .modal .form-label,
[data-theme="light"] .modal .form-text,
[data-theme="light"] .modal .alert,
[data-theme="light"] .modal .card-text,
[data-theme="light"] .modal .list-group-item {
    color: #212529 !important;
}

[data-theme="light"] .modal .text-muted {
    color: #6c757d !important;
}

[data-theme="light"] .modal .text-primary {
    color: #01ADF1 !important;
}

[data-theme="light"] .modal .text-secondary {
    color: #6c757d !important;
}

[data-theme="light"] .modal .text-success {
    color: #28a745 !important;
}

[data-theme="light"] .modal .text-danger {
    color: #dc3545 !important;
}

[data-theme="light"] .modal .text-warning {
    color: #ffc107 !important;
}

[data-theme="light"] .modal .text-info {
    color: #17a2b8 !important;
}

[data-theme="light"] .modal .alert-success {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
}

[data-theme="light"] .modal .alert-danger {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

[data-theme="light"] .modal .alert-warning {
    background-color: #fff3cd !important;
    border-color: #ffeaa7 !important;
    color: #856404 !important;
}

[data-theme="light"] .modal .alert-info {
    background-color: #d1ecf1 !important;
    border-color: #bee5eb !important;
    color: #0c5460 !important;
}

/* Modal text elements - Dark Mode */
[data-theme="dark"] .modal p,
[data-theme="dark"] .modal span,
[data-theme="dark"] .modal div,
[data-theme="dark"] .modal label,
[data-theme="dark"] .modal small,
[data-theme="dark"] .modal .text-muted,
[data-theme="dark"] .modal .form-label,
[data-theme="dark"] .modal .form-text,
[data-theme="dark"] .modal .alert,
[data-theme="dark"] .modal .card-text,
[data-theme="dark"] .modal .list-group-item {
    color: #ffffff !important;
}

[data-theme="dark"] .modal .text-muted {
    color: #b0b0b0 !important;
}

[data-theme="dark"] .modal .text-primary {
    color: #01ADF1 !important;
}

[data-theme="dark"] .modal .text-secondary {
    color: #b0b0b0 !important;
}

[data-theme="dark"] .modal .text-success {
    color: #28a745 !important;
}

[data-theme="dark"] .modal .text-danger {
    color: #ff6b6b !important;
}

[data-theme="dark"] .modal .text-warning {
    color: #ffc107 !important;
}

[data-theme="dark"] .modal .text-info {
    color: #17a2b8 !important;
}

[data-theme="dark"] .modal .alert-success {
    background-color: rgba(40, 167, 69, 0.2) !important;
    border-color: #28a745 !important;
    color: #28a745 !important;
}

[data-theme="dark"] .modal .alert-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    border-color: #ff6b6b !important;
    color: #ff6b6b !important;
}

[data-theme="dark"] .modal .alert-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}

[data-theme="dark"] .modal .alert-info {
    background-color: rgba(23, 162, 184, 0.2) !important;
    border-color: #17a2b8 !important;
    color: #17a2b8 !important;
}

/* Modal list styling */
[data-theme="light"] .modal .list-group-item {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .modal .list-group-item:hover {
    background-color: #f8f9fa !important;
}

[data-theme="dark"] .modal .list-group-item {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal .list-group-item:hover {
    background-color: #404040 !important;
}

/* Modal card styling */
[data-theme="light"] .modal .card {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .modal .card-header {
    background-color: #f8f9fa !important;
    border-bottom-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="dark"] .modal .card {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
}

[data-theme="dark"] .modal .card-header {
    background-color: #333333 !important;
    border-bottom-color: #404040 !important;
    color: #ffffff !important;
}

/* Modal table styling */
[data-theme="light"] .modal .table {
    color: #212529 !important;
    background-color: transparent !important;
}

[data-theme="light"] .modal .table th {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .modal .table td {
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="dark"] .modal .table {
    color: #ffffff !important;
    background-color: transparent !important;
}

[data-theme="dark"] .modal .table th {
    background-color: #333333 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal .table td {
    border-color: #404040 !important;
    color: #ffffff !important;
}

/* Social Media Text Styling - Light Mode */
[data-theme="light"] .social-btn.facebook-btn span,
[data-theme="light"] .facebook-btn span,
[data-theme="light"] .social-btn.facebook span,
[data-theme="light"] .facebook span,
[data-theme="light"] .modal .facebook-btn span,
[data-theme="light"] .modal .social-btn.facebook-btn span {
    color: #1877f2 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

[data-theme="light"] .social-btn.twitter-btn span,
[data-theme="light"] .twitter-btn span,
[data-theme="light"] .social-btn.twitter span,
[data-theme="light"] .twitter span,
[data-theme="light"] .modal .twitter-btn span,
[data-theme="light"] .modal .social-btn.twitter-btn span {
    color: #1da1f2 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

[data-theme="light"] .social-btn.whatsapp-btn span,
[data-theme="light"] .whatsapp-btn span,
[data-theme="light"] .social-btn.whatsapp span,
[data-theme="light"] .whatsapp span,
[data-theme="light"] .modal .whatsapp-btn span,
[data-theme="light"] .modal .social-btn.whatsapp-btn span {
    color: #25d366 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

/* Social Media Button Backgrounds - Light Mode */
[data-theme="light"] .social-btn.facebook-btn,
[data-theme="light"] .facebook-btn,
[data-theme="light"] .social-btn.facebook,
[data-theme="light"] .facebook,
[data-theme="light"] .modal .facebook-btn,
[data-theme="light"] .modal .social-btn.facebook-btn {
    background-color: #f8f9fa !important;
    border: 2px solid #1877f2 !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .social-btn.facebook-btn:hover,
[data-theme="light"] .facebook-btn:hover,
[data-theme="light"] .social-btn.facebook:hover,
[data-theme="light"] .facebook:hover,
[data-theme="light"] .modal .facebook-btn:hover,
[data-theme="light"] .modal .social-btn.facebook-btn:hover {
    background-color: #1877f2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3) !important;
}

[data-theme="light"] .social-btn.facebook-btn:hover span,
[data-theme="light"] .facebook-btn:hover span,
[data-theme="light"] .social-btn.facebook:hover span,
[data-theme="light"] .facebook:hover span,
[data-theme="light"] .modal .facebook-btn:hover span,
[data-theme="light"] .modal .social-btn.facebook-btn:hover span {
    color: #ffffff !important;
}

[data-theme="light"] .social-btn.twitter-btn,
[data-theme="light"] .twitter-btn,
[data-theme="light"] .social-btn.twitter,
[data-theme="light"] .twitter,
[data-theme="light"] .modal .twitter-btn,
[data-theme="light"] .modal .social-btn.twitter-btn {
    background-color: #f8f9fa !important;
    border: 2px solid #1da1f2 !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .social-btn.twitter-btn:hover,
[data-theme="light"] .twitter-btn:hover,
[data-theme="light"] .social-btn.twitter:hover,
[data-theme="light"] .twitter:hover,
[data-theme="light"] .modal .twitter-btn:hover,
[data-theme="light"] .modal .social-btn.twitter-btn:hover {
    background-color: #1da1f2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(29, 161, 242, 0.3) !important;
}

[data-theme="light"] .social-btn.twitter-btn:hover span,
[data-theme="light"] .twitter-btn:hover span,
[data-theme="light"] .social-btn.twitter:hover span,
[data-theme="light"] .twitter:hover span,
[data-theme="light"] .modal .twitter-btn:hover span,
[data-theme="light"] .modal .social-btn.twitter-btn:hover span {
    color: #ffffff !important;
}

[data-theme="light"] .social-btn.whatsapp-btn,
[data-theme="light"] .whatsapp-btn,
[data-theme="light"] .social-btn.whatsapp,
[data-theme="light"] .whatsapp,
[data-theme="light"] .modal .whatsapp-btn,
[data-theme="light"] .modal .social-btn.whatsapp-btn {
    background-color: #f8f9fa !important;
    border: 2px solid #25d366 !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .social-btn.whatsapp-btn:hover,
[data-theme="light"] .whatsapp-btn:hover,
[data-theme="light"] .social-btn.whatsapp:hover,
[data-theme="light"] .whatsapp:hover,
[data-theme="light"] .modal .whatsapp-btn:hover,
[data-theme="light"] .modal .social-btn.whatsapp-btn:hover {
    background-color: #25d366 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3) !important;
}

[data-theme="light"] .social-btn.whatsapp-btn:hover span,
[data-theme="light"] .whatsapp-btn:hover span,
[data-theme="light"] .social-btn.whatsapp:hover span,
[data-theme="light"] .whatsapp:hover span,
[data-theme="light"] .modal .whatsapp-btn:hover span,
[data-theme="light"] .modal .social-btn.whatsapp-btn:hover span {
    color: #ffffff !important;
}

/* Social Media Icons - Light Mode */
[data-theme="light"] .social-btn.facebook-btn .icon,
[data-theme="light"] .facebook-btn .icon,
[data-theme="light"] .social-btn.facebook .icon,
[data-theme="light"] .facebook .icon,
[data-theme="light"] .modal .facebook-btn .icon,
[data-theme="light"] .modal .social-btn.facebook-btn .icon {
    color: #1877f2 !important;
    font-size: 1.8rem !important;
    margin-bottom: 6px !important;
}

[data-theme="light"] .social-btn.twitter-btn .icon,
[data-theme="light"] .twitter-btn .icon,
[data-theme="light"] .social-btn.twitter .icon,
[data-theme="light"] .twitter .icon,
[data-theme="light"] .modal .twitter-btn .icon,
[data-theme="light"] .modal .social-btn.twitter-btn .icon {
    color: #1da1f2 !important;
    font-size: 1.8rem !important;
    margin-bottom: 6px !important;
}

[data-theme="light"] .social-btn.whatsapp-btn .icon,
[data-theme="light"] .whatsapp-btn .icon,
[data-theme="light"] .social-btn.whatsapp .icon,
[data-theme="light"] .whatsapp .icon,
[data-theme="light"] .modal .whatsapp-btn .icon,
[data-theme="light"] .modal .social-btn.whatsapp-btn .icon {
    color: #25d366 !important;
    font-size: 1.8rem !important;
    margin-bottom: 6px !important;
}

/* Social Media Icons Hover - Light Mode */
[data-theme="light"] .social-btn.facebook-btn:hover .icon,
[data-theme="light"] .facebook-btn:hover .icon,
[data-theme="light"] .social-btn.facebook:hover .icon,
[data-theme="light"] .facebook:hover .icon,
[data-theme="light"] .modal .facebook-btn:hover .icon,
[data-theme="light"] .modal .social-btn.facebook-btn:hover .icon {
    color: #ffffff !important;
}

[data-theme="light"] .social-btn.twitter-btn:hover .icon,
[data-theme="light"] .twitter-btn:hover .icon,
[data-theme="light"] .social-btn.twitter:hover .icon,
[data-theme="light"] .twitter:hover .icon,
[data-theme="light"] .modal .twitter-btn:hover .icon,
[data-theme="light"] .modal .social-btn.twitter-btn:hover .icon {
    color: #ffffff !important;
}

[data-theme="light"] .social-btn.whatsapp-btn:hover .icon,
[data-theme="light"] .whatsapp-btn:hover .icon,
[data-theme="light"] .social-btn.whatsapp:hover .icon,
[data-theme="light"] .whatsapp:hover .icon,
[data-theme="light"] .modal .whatsapp-btn:hover .icon,
[data-theme="light"] .modal .social-btn.whatsapp-btn:hover .icon {
    color: #ffffff !important;
}

/* Wallet Page Light Mode Styling */
[data-theme="light"] .mainSection.wallet .mainFeed {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.wallet .mainFeed .top h1 {
    color: #212529 !important;
    font-weight: 700 !important;
    margin-bottom: 2rem !important;
}

/* Wallet Balance Container - Light Mode */
[data-theme="light"] .wallet .balances .balanceContainer {
    background-color: transparent !important;
    gap: 2rem !important;
    margin-bottom: 2rem !important;
}

[data-theme="light"] .wallet .balances .balanceContainer .coins {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border: 2px solid #e9ecef !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    color: #212529 !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .wallet .balances .balanceContainer .coins:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    border-color: #01ADF1 !important;
}

[data-theme="light"] .wallet .balances .balanceContainer .coins h2 {
    color: #212529 !important;
    font-weight: 700 !important;
}

[data-theme="light"] .wallet .balances .balanceContainer .coins h2 span {
    color: #6c757d !important;
    font-weight: 500 !important;
    font-size: 1.2rem !important;
}

[data-theme="light"] .wallet .balances .balanceContainer .coins img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
    opacity: 0.8 !important;
}

/* Wallet Buttons - Light Mode */
[data-theme="light"] .wallet .balances .buttons {
    gap: 2rem !important;
    margin-top: 2rem !important;
}

[data-theme="light"] .wallet .balances .buttons button {
    background: linear-gradient(90deg, #01ADF1 0%, #A61651 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(1, 173, 241, 0.3) !important;
}

[data-theme="light"] .wallet .balances .buttons button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(1, 173, 241, 0.4) !important;
}

[data-theme="light"] .wallet .balances .buttons button:last-child {
    background: #ffffff !important;
    color: #212529 !important;
    border: 2px solid #01ADF1 !important;
    position: relative !important;
}

[data-theme="light"] .wallet .balances .buttons button:last-child::before {
    background: linear-gradient(90deg, #01ADF1 0%, #A61651 100%) !important;
    z-index: -1 !important;
    content: '' !important;
    position: absolute !important;
    width: calc(100% + 4px) !important;
    height: calc(100% + 4px) !important;
    top: -2px !important;
    left: -2px !important;
    border-radius: 14px !important;
}

[data-theme="light"] .wallet .balances .buttons button:last-child:hover {
    color: #ffffff !important;
    background: transparent !important;
}

/* Wallet Table Container - Light Mode */
[data-theme="light"] .wallet .tableContainer {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e9ecef !important;
}

[data-theme="light"] .wallet .tableContainer .tabs {
    border-bottom: 2px solid #e9ecef !important;
    margin-bottom: 2rem !important;
    gap: 2rem !important;
}

[data-theme="light"] .wallet .tableContainer .tabs a {
    color: #6c757d !important;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px 8px 0 0 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

[data-theme="light"] .wallet .tableContainer .tabs a:hover {
    color: #01ADF1 !important;
    background-color: #f8f9fa !important;
}

[data-theme="light"] .wallet .tableContainer .tabs a.active {
    color: #01ADF1 !important;
    background-color: #f8f9fa !important;
    border-bottom: 3px solid #01ADF1 !important;
    font-weight: 600 !important;
}

/* Wallet Tables - Light Mode */
[data-theme="light"] .wallet .tableContainer .table {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

[data-theme="light"] .wallet .tableContainer .table thead th {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #e9ecef !important;
    padding: 1rem !important;
}

[data-theme="light"] .wallet .tableContainer .table tbody td {
    color: #212529 !important;
    border-bottom: 1px solid #f1f3f4 !important;
    padding: 1rem !important;
}

[data-theme="light"] .wallet .tableContainer .table tbody tr:hover {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .wallet .tableContainer .table tbody tr:nth-child(even) {
    background-color: #fafbfc !important;
}

/* Wallet Modal Styling - Light Mode */
[data-theme="light"] .wallet .modal .modal-content {
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .wallet .modal .modal-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef !important;
    border-radius: 12px 12px 0 0 !important;
}

[data-theme="light"] .wallet .modal .modal-title {
    color: #212529 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .wallet .modal .modal-body {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .wallet .modal .modal-body h5 {
    color: #212529 !important;
    font-weight: 500 !important;
}

[data-theme="light"] .wallet .modal .modal-body h5 span {
    color: #01ADF1 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .wallet .modal .modal-footer {
    background-color: #f8f9fa !important;
    border-top: 1px solid #e9ecef !important;
    border-radius: 0 0 12px 12px !important;
}

[data-theme="light"] .wallet .modal .btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 0.75rem 1.5rem !important;
}

[data-theme="light"] .wallet .modal .btn-info {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

[data-theme="light"] .wallet .modal .btn-info:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
}

[data-theme="light"] .wallet .modal .btn:not(.btn-info) {
    background: linear-gradient(90deg, #01ADF1 0%, #A61651 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

[data-theme="light"] .wallet .modal .btn:not(.btn-info):hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(1, 173, 241, 0.3) !important;
}

/* Wallet Form Elements - Light Mode */
[data-theme="light"] .wallet .form-control {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 8px !important;
}

[data-theme="light"] .wallet .form-control:focus {
    background-color: #ffffff !important;
    border-color: #01ADF1 !important;
    box-shadow: 0 0 0 0.2rem rgba(1, 173, 241, 0.25) !important;
}

[data-theme="light"] .wallet .form-label {
    color: #212529 !important;
    font-weight: 500 !important;
}

/* Wallet Close Button - Light Mode */
[data-theme="light"] .wallet .modal .close {
    color: #6c757d !important;
    opacity: 0.8 !important;
}

[data-theme="light"] .wallet .modal .close:hover {
    color: #dc3545 !important;
    opacity: 1 !important;
}

/* Table Text Elements - Light Mode */
[data-theme="light"] .table,
[data-theme="light"] .table th,
[data-theme="light"] .table td,
[data-theme="light"] .table thead th,
[data-theme="light"] .table tbody td,
[data-theme="light"] .table tfoot td,
[data-theme="light"] .dataTable,
[data-theme="light"] .dataTable th,
[data-theme="light"] .dataTable td,
[data-theme="light"] .dataTable thead th,
[data-theme="light"] .dataTable tbody td,
[data-theme="light"] .dataTable tfoot td,
[data-theme="light"] .subscription_plan_listing,
[data-theme="light"] .subscription_plan_listing th,
[data-theme="light"] .subscription_plan_listing td,
[data-theme="light"] .subscription_plan_listing thead th,
[data-theme="light"] .subscription_plan_listing tbody td,
[data-theme="light"] .subscription_plan_listing tfoot td {
    color: #212529 !important;
}

[data-theme="light"] .table thead th,
[data-theme="light"] .dataTable thead th,
[data-theme="light"] .subscription_plan_listing thead th {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #dee2e6 !important;
}

[data-theme="light"] .table tbody tr,
[data-theme="light"] .dataTable tbody tr,
[data-theme="light"] .subscription_plan_listing tbody tr {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .table tbody tr:nth-child(even),
[data-theme="light"] .dataTable tbody tr:nth-child(even),
[data-theme="light"] .subscription_plan_listing tbody tr:nth-child(even) {
    background-color: #fafbfc !important;
}

[data-theme="light"] .table tbody tr:hover,
[data-theme="light"] .dataTable tbody tr:hover,
[data-theme="light"] .subscription_plan_listing tbody tr:hover {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .table tbody td,
[data-theme="light"] .dataTable tbody td,
[data-theme="light"] .subscription_plan_listing tbody td {
    border-bottom: 1px solid #f1f3f4 !important;
    color: #212529 !important;
}

[data-theme="light"] .table tbody td a,
[data-theme="light"] .dataTable tbody td a,
[data-theme="light"] .subscription_plan_listing tbody td a {
    color: #01ADF1 !important;
    text-decoration: none !important;
}

[data-theme="light"] .table tbody td a:hover,
[data-theme="light"] .dataTable tbody td a:hover,
[data-theme="light"] .subscription_plan_listing tbody td a:hover {
    color: #0099d4 !important;
    text-decoration: underline !important;
}

[data-theme="light"] .table tbody td .badge,
[data-theme="light"] .dataTable tbody td .badge,
[data-theme="light"] .subscription_plan_listing tbody td .badge {
    color: #ffffff !important;
    font-weight: 500 !important;
}

[data-theme="light"] .table tbody td .badge.badge-success,
[data-theme="light"] .dataTable tbody td .badge.badge-success,
[data-theme="light"] .subscription_plan_listing tbody td .badge.badge-success {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .badge.badge-danger,
[data-theme="light"] .dataTable tbody td .badge.badge-danger,
[data-theme="light"] .subscription_plan_listing tbody td .badge.badge-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .badge.badge-warning,
[data-theme="light"] .dataTable tbody td .badge.badge-warning,
[data-theme="light"] .subscription_plan_listing tbody td .badge.badge-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

[data-theme="light"] .table tbody td .badge.badge-info,
[data-theme="light"] .dataTable tbody td .badge.badge-info,
[data-theme="light"] .subscription_plan_listing tbody td .badge.badge-info {
    background-color: #17a2b8 !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .badge.badge-primary,
[data-theme="light"] .dataTable tbody td .badge.badge-primary,
[data-theme="light"] .subscription_plan_listing tbody td .badge.badge-primary {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .badge.badge-secondary,
[data-theme="light"] .dataTable tbody td .badge.badge-secondary,
[data-theme="light"] .subscription_plan_listing tbody td .badge.badge-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .btn,
[data-theme="light"] .dataTable tbody td .btn,
[data-theme="light"] .subscription_plan_listing tbody td .btn {
    color: #ffffff !important;
    font-weight: 500 !important;
}

[data-theme="light"] .table tbody td .btn.btn-primary,
[data-theme="light"] .dataTable tbody td .btn.btn-primary,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-primary {
    background-color: #01ADF1 !important;
    border-color: #01ADF1 !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .btn.btn-primary:hover,
[data-theme="light"] .dataTable tbody td .btn.btn-primary:hover,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-primary:hover {
    background-color: #0099d4 !important;
    border-color: #0099d4 !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .btn.btn-danger,
[data-theme="light"] .dataTable tbody td .btn.btn-danger,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .btn.btn-danger:hover,
[data-theme="light"] .dataTable tbody td .btn.btn-danger:hover,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-danger:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .btn.btn-success,
[data-theme="light"] .dataTable tbody td .btn.btn-success,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .btn.btn-success:hover,
[data-theme="light"] .dataTable tbody td .btn.btn-success:hover,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-success:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .btn.btn-warning,
[data-theme="light"] .dataTable tbody td .btn.btn-warning,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
}

[data-theme="light"] .table tbody td .btn.btn-warning:hover,
[data-theme="light"] .dataTable tbody td .btn.btn-warning:hover,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-warning:hover {
    background-color: #e0a800 !important;
    border-color: #d39e00 !important;
    color: #212529 !important;
}

[data-theme="light"] .table tbody td .btn.btn-info,
[data-theme="light"] .dataTable tbody td .btn.btn-info,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-info {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .btn.btn-info:hover,
[data-theme="light"] .dataTable tbody td .btn.btn-info:hover,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-info:hover {
    background-color: #138496 !important;
    border-color: #117a8b !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .btn.btn-secondary,
[data-theme="light"] .dataTable tbody td .btn.btn-secondary,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .btn.btn-secondary:hover,
[data-theme="light"] .dataTable tbody td .btn.btn-secondary:hover,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-secondary:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #ffffff !important;
}

[data-theme="light"] .table tbody td .btn.btn-outline-primary,
[data-theme="light"] .dataTable tbody td .btn.btn-outline-primary,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-outline-primary {
    color: #01ADF1 !important;
    border-color: #01ADF1 !important;
    background-color: transparent !important;
}

[data-theme="light"] .table tbody td .btn.btn-outline-primary:hover,
[data-theme="light"] .dataTable tbody td .btn.btn-outline-primary:hover,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-outline-primary:hover {
    color: #ffffff !important;
    background-color: #01ADF1 !important;
    border-color: #01ADF1 !important;
}

[data-theme="light"] .table tbody td .btn.btn-outline-danger,
[data-theme="light"] .dataTable tbody td .btn.btn-outline-danger,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    background-color: transparent !important;
}

[data-theme="light"] .table tbody td .btn.btn-outline-danger:hover,
[data-theme="light"] .dataTable tbody td .btn.btn-outline-danger:hover,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-outline-danger:hover {
    color: #ffffff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

[data-theme="light"] .table tbody td .btn.btn-outline-success,
[data-theme="light"] .dataTable tbody td .btn.btn-outline-success,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-outline-success {
    color: #28a745 !important;
    border-color: #28a745 !important;
    background-color: transparent !important;
}

[data-theme="light"] .table tbody td .btn.btn-outline-success:hover,
[data-theme="light"] .dataTable tbody td .btn.btn-outline-success:hover,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-outline-success:hover {
    color: #ffffff !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

[data-theme="light"] .table tbody td .btn.btn-outline-warning,
[data-theme="light"] .dataTable tbody td .btn.btn-outline-warning,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-outline-warning {
    color: #ffc107 !important;
    border-color: #ffc107 !important;
    background-color: transparent !important;
}

[data-theme="light"] .table tbody td .btn.btn-outline-warning:hover,
[data-theme="light"] .dataTable tbody td .btn.btn-outline-warning:hover,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-outline-warning:hover {
    color: #212529 !important;
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

[data-theme="light"] .table tbody td .btn.btn-outline-info,
[data-theme="light"] .dataTable tbody td .btn.btn-outline-info,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-outline-info {
    color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    background-color: transparent !important;
}

[data-theme="light"] .table tbody td .btn.btn-outline-info:hover,
[data-theme="light"] .dataTable tbody td .btn.btn-outline-info:hover,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-outline-info:hover {
    color: #ffffff !important;
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
}

[data-theme="light"] .table tbody td .btn.btn-outline-secondary,
[data-theme="light"] .dataTable tbody td .btn.btn-outline-secondary,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-outline-secondary {
    color: #6c757d !important;
    border-color: #6c757d !important;
    background-color: transparent !important;
}

[data-theme="light"] .table tbody td .btn.btn-outline-secondary:hover,
[data-theme="light"] .dataTable tbody td .btn.btn-outline-secondary:hover,
[data-theme="light"] .subscription_plan_listing tbody td .btn.btn-outline-secondary:hover {
    color: #ffffff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

/* Table Pagination - Light Mode */
[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button,
[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #212529 !important;
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    border-color: #01ADF1 !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #f8f9fa !important;
    color: #01ADF1 !important;
    border-color: #01ADF1 !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_info {
    color: #6c757d !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_length select,
[data-theme="light"] .dataTables_wrapper .dataTables_filter input {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_length select:focus,
[data-theme="light"] .dataTables_wrapper .dataTables_filter input:focus {
    border-color: #01ADF1 !important;
    box-shadow: 0 0 0 0.2rem rgba(1, 173, 241, 0.25) !important;
}

/* Enhanced Table Text Styling - Light Mode - Higher Specificity */
[data-theme="light"] .mainSection .table,
[data-theme="light"] .mainSection .table th,
[data-theme="light"] .mainSection .table td,
[data-theme="light"] .mainSection .table thead th,
[data-theme="light"] .mainSection .table tbody td,
[data-theme="light"] .mainSection .table tfoot td,
[data-theme="light"] .mainSection .dataTable,
[data-theme="light"] .mainSection .dataTable th,
[data-theme="light"] .mainSection .dataTable td,
[data-theme="light"] .mainSection .dataTable thead th,
[data-theme="light"] .mainSection .dataTable tbody td,
[data-theme="light"] .mainSection .dataTable tfoot td,
[data-theme="light"] .mainSection .subscription_plan_listing,
[data-theme="light"] .mainSection .subscription_plan_listing th,
[data-theme="light"] .mainSection .subscription_plan_listing td,
[data-theme="light"] .mainSection .subscription_plan_listing thead th,
[data-theme="light"] .mainSection .subscription_plan_listing tbody td,
[data-theme="light"] .mainSection .subscription_plan_listing tfoot td,
[data-theme="light"] .mainFeed .table,
[data-theme="light"] .mainFeed .table th,
[data-theme="light"] .mainFeed .table td,
[data-theme="light"] .mainFeed .table thead th,
[data-theme="light"] .mainFeed .table tbody td,
[data-theme="light"] .mainFeed .table tfoot td,
[data-theme="light"] .mainFeed .dataTable,
[data-theme="light"] .mainFeed .dataTable th,
[data-theme="light"] .mainFeed .dataTable td,
[data-theme="light"] .mainFeed .dataTable thead th,
[data-theme="light"] .mainFeed .dataTable tbody td,
[data-theme="light"] .mainFeed .dataTable tfoot td,
[data-theme="light"] .mainFeed .subscription_plan_listing,
[data-theme="light"] .mainFeed .subscription_plan_listing th,
[data-theme="light"] .mainFeed .subscription_plan_listing td,
[data-theme="light"] .mainFeed .subscription_plan_listing thead th,
[data-theme="light"] .mainFeed .subscription_plan_listing tbody td,
[data-theme="light"] .mainFeed .subscription_plan_listing tfoot td {
    color: #212529 !important;
}

[data-theme="light"] .mainSection .table thead th,
[data-theme="light"] .mainSection .dataTable thead th,
[data-theme="light"] .mainSection .subscription_plan_listing thead th,
[data-theme="light"] .mainFeed .table thead th,
[data-theme="light"] .mainFeed .dataTable thead th,
[data-theme="light"] .mainFeed .subscription_plan_listing thead th {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #dee2e6 !important;
}

[data-theme="light"] .mainSection .table tbody tr,
[data-theme="light"] .mainSection .dataTable tbody tr,
[data-theme="light"] .mainSection .subscription_plan_listing tbody tr,
[data-theme="light"] .mainFeed .table tbody tr,
[data-theme="light"] .mainFeed .dataTable tbody tr,
[data-theme="light"] .mainFeed .subscription_plan_listing tbody tr {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection .table tbody tr:nth-child(even),
[data-theme="light"] .mainSection .dataTable tbody tr:nth-child(even),
[data-theme="light"] .mainSection .subscription_plan_listing tbody tr:nth-child(even),
[data-theme="light"] .mainFeed .table tbody tr:nth-child(even),
[data-theme="light"] .mainFeed .dataTable tbody tr:nth-child(even),
[data-theme="light"] .mainFeed .subscription_plan_listing tbody tr:nth-child(even) {
    background-color: #ffffff !important;
}

[data-theme="light"] .mainSection .table tbody tr:hover,
[data-theme="light"] .mainSection .dataTable tbody tr:hover,
[data-theme="light"] .mainSection .subscription_plan_listing tbody tr:hover,
[data-theme="light"] .mainFeed .table tbody tr:hover,
[data-theme="light"] .mainFeed .dataTable tbody tr:hover,
[data-theme="light"] .mainFeed .subscription_plan_listing tbody tr:hover {
    background-color: #e9ecef !important;
}

[data-theme="light"] .mainSection .table tbody td,
[data-theme="light"] .mainSection .dataTable tbody td,
[data-theme="light"] .mainSection .subscription_plan_listing tbody td,
[data-theme="light"] .mainFeed .table tbody td,
[data-theme="light"] .mainFeed .dataTable tbody td,
[data-theme="light"] .mainFeed .subscription_plan_listing tbody td {
    border-bottom: 1px solid #f1f3f4 !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection .table tbody td a,
[data-theme="light"] .mainSection .dataTable tbody td a,
[data-theme="light"] .mainSection .subscription_plan_listing tbody td a,
[data-theme="light"] .mainFeed .table tbody td a,
[data-theme="light"] .mainFeed .dataTable tbody td a,
[data-theme="light"] .mainFeed .subscription_plan_listing tbody td a {
    color: #01ADF1 !important;
    text-decoration: none !important;
}

[data-theme="light"] .mainSection .table tbody td a:hover,
[data-theme="light"] .mainSection .dataTable tbody td a:hover,
[data-theme="light"] .mainSection .subscription_plan_listing tbody td a:hover,
[data-theme="light"] .mainFeed .table tbody td a:hover,
[data-theme="light"] .mainFeed .dataTable tbody td a:hover,
[data-theme="light"] .mainFeed .subscription_plan_listing tbody td a:hover {
    color: #0099d4 !important;
    text-decoration: underline !important;
}

/* Force override for any remaining dark text */
[data-theme="light"] * {
    color: inherit !important;
}

[data-theme="light"] .table *,
[data-theme="light"] .dataTable *,
[data-theme="light"] .subscription_plan_listing * {
    color: #212529 !important;
}

[data-theme="light"] .table thead *,
[data-theme="light"] .dataTable thead *,
[data-theme="light"] .subscription_plan_listing thead * {
    color: #212529 !important;
}

[data-theme="light"] .table tbody *,
[data-theme="light"] .dataTable tbody *,
[data-theme="light"] .subscription_plan_listing tbody * {
    color: #212529 !important;
}

[data-theme="light"] .table tfoot *,
[data-theme="light"] .dataTable tfoot *,
[data-theme="light"] .subscription_plan_listing tfoot * {
    color: #212529 !important;
}

/* Ultra-specific table text override for light mode */
[data-theme="light"] .mainSection .mainFeed .tableContainer .table,
[data-theme="light"] .mainSection .mainFeed .tableContainer .table th,
[data-theme="light"] .mainSection .mainFeed .tableContainer .table td,
[data-theme="light"] .mainSection .mainFeed .tableContainer .table thead th,
[data-theme="light"] .mainSection .mainFeed .tableContainer .table tbody td,
[data-theme="light"] .mainSection .mainFeed .tableContainer .table tfoot td,
[data-theme="light"] .mainSection .mainFeed .tableContainer .dataTable,
[data-theme="light"] .mainSection .mainFeed .tableContainer .dataTable th,
[data-theme="light"] .mainSection .mainFeed .tableContainer .dataTable td,
[data-theme="light"] .mainSection .mainFeed .tableContainer .dataTable thead th,
[data-theme="light"] .mainSection .mainFeed .tableContainer .dataTable tbody td,
[data-theme="light"] .mainSection .mainFeed .tableContainer .dataTable tfoot td,
[data-theme="light"] .mainSection .mainFeed .tableContainer .subscription_plan_listing,
[data-theme="light"] .mainSection .mainFeed .tableContainer .subscription_plan_listing th,
[data-theme="light"] .mainSection .mainFeed .tableContainer .subscription_plan_listing td,
[data-theme="light"] .mainSection .mainFeed .tableContainer .subscription_plan_listing thead th,
[data-theme="light"] .mainSection .mainFeed .tableContainer .subscription_plan_listing tbody td,
[data-theme="light"] .mainSection .mainFeed .tableContainer .subscription_plan_listing tfoot td {
    color: #212529 !important;
}

/* Ultra-specific table row background colors for light mode */
[data-theme="light"] .mainSection .mainFeed .tableContainer .table tbody tr,
[data-theme="light"] .mainSection .mainFeed .tableContainer .dataTable tbody tr,
[data-theme="light"] .mainSection .mainFeed .tableContainer .subscription_plan_listing tbody tr {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .mainSection .mainFeed .tableContainer .table tbody tr:nth-child(even),
[data-theme="light"] .mainSection .mainFeed .tableContainer .dataTable tbody tr:nth-child(even),
[data-theme="light"] .mainSection .mainFeed .tableContainer .subscription_plan_listing tbody tr:nth-child(even) {
    background-color: #ffffff !important;
}

[data-theme="light"] .mainSection .mainFeed .tableContainer .table tbody tr:hover,
[data-theme="light"] .mainSection .mainFeed .tableContainer .dataTable tbody tr:hover,
[data-theme="light"] .mainSection .mainFeed .tableContainer .subscription_plan_listing tbody tr:hover {
    background-color: #e9ecef !important;
}

/* Force all text elements in tables to be dark */
[data-theme="light"] .table span,
[data-theme="light"] .table div,
[data-theme="light"] .table p,
[data-theme="light"] .table strong,
[data-theme="light"] .table b,
[data-theme="light"] .table em,
[data-theme="light"] .table i,
[data-theme="light"] .dataTable span,
[data-theme="light"] .dataTable div,
[data-theme="light"] .dataTable p,
[data-theme="light"] .dataTable strong,
[data-theme="light"] .dataTable b,
[data-theme="light"] .dataTable em,
[data-theme="light"] .dataTable i,
[data-theme="light"] .subscription_plan_listing span,
[data-theme="light"] .subscription_plan_listing div,
[data-theme="light"] .subscription_plan_listing p,
[data-theme="light"] .subscription_plan_listing strong,
[data-theme="light"] .subscription_plan_listing b,
[data-theme="light"] .subscription_plan_listing em,
[data-theme="light"] .subscription_plan_listing i {
    color: #212529 !important;
}

/* Override any inline styles or very specific selectors */
[data-theme="light"] .table[style*="color"],
[data-theme="light"] .table th[style*="color"],
[data-theme="light"] .table td[style*="color"],
[data-theme="light"] .dataTable[style*="color"],
[data-theme="light"] .dataTable th[style*="color"],
[data-theme="light"] .dataTable td[style*="color"],
[data-theme="light"] .subscription_plan_listing[style*="color"],
[data-theme="light"] .subscription_plan_listing th[style*="color"],
[data-theme="light"] .subscription_plan_listing td[style*="color"] {
    color: #212529 !important;
}

/* Target specific table content that might be generated by DataTables */
[data-theme="light"] .dataTables_wrapper .dataTables_scroll .dataTables_scrollBody table,
[data-theme="light"] .dataTables_wrapper .dataTables_scroll .dataTables_scrollBody table th,
[data-theme="light"] .dataTables_wrapper .dataTables_scroll .dataTables_scrollBody table td,
[data-theme="light"] .dataTables_wrapper .dataTables_scroll .dataTables_scrollBody table thead th,
[data-theme="light"] .dataTables_wrapper .dataTables_scroll .dataTables_scrollBody table tbody td,
[data-theme="light"] .dataTables_wrapper .dataTables_scroll .dataTables_scrollBody table tfoot td {
    color: #212529 !important;
}

/* Override any DataTables specific styling */
[data-theme="light"] .dataTables_wrapper table,
[data-theme="light"] .dataTables_wrapper table th,
[data-theme="light"] .dataTables_wrapper table td,
[data-theme="light"] .dataTables_wrapper table thead th,
[data-theme="light"] .dataTables_wrapper table tbody td,
[data-theme="light"] .dataTables_wrapper table tfoot td {
    color: #212529 !important;
}

/* Force override for any remaining elements */
[data-theme="light"] .tableContainer *,
[data-theme="light"] .tableContainer table *,
[data-theme="light"] .tableContainer .table *,
[data-theme="light"] .tableContainer .dataTable *,
[data-theme="light"] .tableContainer .subscription_plan_listing * {
    color: #212529 !important;
}

/* Specific override for wallet page tables */
[data-theme="light"] .wallet .tableContainer *,
[data-theme="light"] .wallet .tableContainer table *,
[data-theme="light"] .wallet .tableContainer .table *,
[data-theme="light"] .wallet .tableContainer .dataTable *,
[data-theme="light"] .wallet .tableContainer .subscription_plan_listing * {
    color: #212529 !important;
}

/* Override any CSS that might be setting light colors */
[data-theme="light"] .table,
[data-theme="light"] .dataTable,
[data-theme="light"] .subscription_plan_listing {
    color: #212529 !important;
}

[data-theme="light"] .table th,
[data-theme="light"] .table td,
[data-theme="light"] .dataTable th,
[data-theme="light"] .dataTable td,
[data-theme="light"] .subscription_plan_listing th,
[data-theme="light"] .subscription_plan_listing td {
    color: #212529 !important;
}

/* Force override for any text that might be inheriting light colors */
[data-theme="light"] .table tbody tr td,
[data-theme="light"] .dataTable tbody tr td,
[data-theme="light"] .subscription_plan_listing tbody tr td {
    color: #212529 !important;
}

/* Override any remaining light text colors */
[data-theme="light"] .table tbody tr td *,
[data-theme="light"] .dataTable tbody tr td *,
[data-theme="light"] .subscription_plan_listing tbody tr td * {
    color: #212529 !important;
}

/* Chat Page Light Mode Styling */
[data-theme="light"] .mainSection.messages {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages .mainFeed {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages .mainFeed > h1 {
    color: #212529 !important;
}

/* Chat Sidebar Light Mode */
[data-theme="light"] .chatsTop {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e9ecef !important;
}

[data-theme="light"] .search-form .search_user {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .search-form .search_user:focus {
    border-color: #01ADF1 !important;
    box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.25) !important;
}

[data-theme="light"] .search-form .search_user::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .filter-btn,
[data-theme="light"] .dropdown,
[data-theme="light"] .achievement-btn {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .filter-btn:hover,
[data-theme="light"] .dropdown:hover,
[data-theme="light"] .achievement-btn:hover {
    background-color: #e9ecef !important;
    color: #01ADF1 !important;
}

[data-theme="light"] .achievement-btn {
    color: #ffc107 !important;
}

[data-theme="light"] .achievement-btn:hover {
    color: #ff8f00 !important;
    background-color: rgba(255, 193, 7, 0.1) !important;
}

[data-theme="light"] .dropdownMenu {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .dropdownMenu a {
    color: #212529 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

[data-theme="light"] .dropdownMenu a:hover {
    background-color: #f8f9fa !important;
    color: #01ADF1 !important;
}

[data-theme="light"] .dropdownMenu a:last-child {
    border-bottom: none !important;
}

/* Chat List Light Mode */
[data-theme="light"] .chats-inner {
    background-color: #ffffff !important;
}

[data-theme="light"] .chat_user {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #212529 !important;
}

[data-theme="light"] .chat_user:hover {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .chat_user.active {
    background-color: #e3f2fd !important;
    border-left: 3px solid #01ADF1 !important;
}

[data-theme="light"] .chat_user h2 {
    color: #212529 !important;
}

[data-theme="light"] .chat_user h2 span {
    color: #6c757d !important;
}

[data-theme="light"] .chat_user .time {
    color: #6c757d !important;
}

[data-theme="light"] .user_message_pending {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
}

/* Messages Window Light Mode */
[data-theme="light"] .messagesWindow {
    background-color: #ffffff !important;
    border-left: 1px solid #e9ecef !important;
}

[data-theme="light"] .messageTop {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e9ecef !important;
    color: #212529 !important;
}

[data-theme="light"] .messagesBox {
    background-color: #f8f9fa !important;
}

/* Message Input Light Mode */
[data-theme="light"] .chat_input_wrapper {
    background-color: #ffffff !important;
    border-top: 1px solid #e9ecef !important;
}

[data-theme="light"] .chat_input_wrapper .form-control {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .chat_input_wrapper .form-control:focus {
    border-color: #01ADF1 !important;
    box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.25) !important;
}

[data-theme="light"] .chat_input_wrapper .form-control::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .input-group-text {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .input-group-text:hover {
    background-color: #e9ecef !important;
}

[data-theme="light"] .smile_btn,
[data-theme="light"] .attach_btn,
[data-theme="light"] #send_button {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .smile_btn:hover,
[data-theme="light"] .attach_btn:hover,
[data-theme="light"] #send_button:hover {
    background-color: #e9ecef !important;
    color: #01ADF1 !important;
}

/* Load More Buttons Light Mode */
[data-theme="light"] .load-more-below-header {
    background-color: transparent !important;
}

[data-theme="light"] .btn-load-chat-whatsapp {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .btn-load-chat-whatsapp:hover {
    background-color: #0099d4 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="light"] .load-all-messages {
    background-color: rgba(1, 173, 241, 0.05) !important;
    border-bottom: 1px solid rgba(1, 173, 241, 0.1) !important;
}

[data-theme="light"] .btn-load-all-chat {
    background-color: rgba(1, 173, 241, 0.1) !important;
    border: 1px solid rgba(1, 173, 241, 0.3) !important;
    color: #01ADF1 !important;
}

[data-theme="light"] .btn-load-all-chat:hover {
    background-color: rgba(1, 173, 241, 0.2) !important;
    border-color: rgba(1, 173, 241, 0.5) !important;
    color: #0099d4 !important;
}

/* Bottom Chat Icon - Consolidated in main section below */

/* Typing Indicator Light Mode */
[data-theme="light"] .typing-indicator-container {
    background-color: transparent !important;
}

[data-theme="light"] .typing-indicator {
    background-color: #e3f2fd !important;
    color: #1976d2 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .typing-dots .dot {
    background-color: #1976d2 !important;
}

/* Progress Bar Light Mode */
[data-theme="light"] .progress {
    background-color: #e9ecef !important;
}

[data-theme="light"] .progress-bar {
    background-color: #01ADF1 !important;
}

/* Subscription Alert Light Mode */
[data-theme="light"] .input-group-append {
    background-color: #fff3cd !important;
    border: 1px solid #ffeaa7 !important;
    color: #856404 !important;
}

[data-theme="light"] .subscribe-sticky {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    border: 1px solid #01ADF1 !important;
}

[data-theme="light"] .subscribe-sticky:hover {
    background-color: #0099d4 !important;
    border-color: #0099d4 !important;
}

/* Coin Action Menu Light Mode */
[data-theme="light"] .action_menu {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    color: #212529 !important;
}

[data-theme="light"] .coin_action_cl input {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .coin_action_cl input:focus {
    border-color: #01ADF1 !important;
    box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.25) !important;
}

[data-theme="light"] .coin_action_cl button {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    border: 1px solid #01ADF1 !important;
}

[data-theme="light"] .coin_action_cl button:hover {
    background-color: #0099d4 !important;
    border-color: #0099d4 !important;
}

/* Modal Light Mode */
[data-theme="light"] .modal-content {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .modal-body {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .modal-body .close {
    color: #6c757d !important;
}

[data-theme="light"] .modal-body .close:hover {
    color: #212529 !important;
}

/* Message Status Icons Light Mode */
[data-theme="light"] .msg-desc .fa-check {
    color: #6c757d !important;
}

[data-theme="light"] .msg-desc .fa-check-double {
    color: #01ADF1 !important;
}

/* Online Status Indicator Light Mode */
[data-theme="light"] .online-indicator {
    background-color: #28a745 !important;
    border: 2px solid #ffffff !important;
}

/* Spinner Light Mode */
[data-theme="light"] .spinner-border-sm {
    border-color: #01ADF1 !important;
    border-right-color: transparent !important;
}

/* Ultra-Aggressive Chat Light Mode Overrides */
[data-theme="light"] .mainSection.messages * {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages .mainFeed * {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages .chats * {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages .messagesWindow * {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages .messagesContainer * {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages .user_list * {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages .chats-inner * {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Force override for any dark backgrounds */
[data-theme="light"] .mainSection.messages,
[data-theme="light"] .mainSection.messages .mainFeed,
[data-theme="light"] .mainSection.messages .chats,
[data-theme="light"] .mainSection.messages .messagesWindow,
[data-theme="light"] .mainSection.messages .messagesContainer,
[data-theme="light"] .mainSection.messages .user_list,
[data-theme="light"] .mainSection.messages .chats-inner {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Force override for chat messages */
[data-theme="light"] .msg_card_body,
[data-theme="light"] .msg_card_body li,
[data-theme="light"] .msg_card_body .msg-left,
[data-theme="light"] .msg_card_body .msg-right,
[data-theme="light"] .msg_card_body .msg-desc {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Force override for message bubbles */
[data-theme="light"] .msg_card_body .msg-left .msg-desc {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

[data-theme="light"] .msg_card_body .msg-right .msg-desc {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
}

/* Force override for input elements */
[data-theme="light"] .chat_input_wrapper,
[data-theme="light"] .chat_input_wrapper *,
[data-theme="light"] .messageInput,
[data-theme="light"] .messageInput * {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .chat_input_wrapper .form-control,
[data-theme="light"] .messageInput .form-control {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .chat_input_wrapper .form-control::placeholder,
[data-theme="light"] .messageInput .form-control::placeholder {
    color: #6c757d !important;
}

/* Force override for buttons */
[data-theme="light"] .chat_input_wrapper button,
[data-theme="light"] .messageInput button,
[data-theme="light"] .input-group-text {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .chat_input_wrapper button:hover,
[data-theme="light"] .messageInput button:hover,
[data-theme="light"] .input-group-text:hover {
    background-color: #e9ecef !important;
    color: #01ADF1 !important;
}

/* Force override for chat list items */
[data-theme="light"] .chat_user,
[data-theme="light"] .chatList {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

[data-theme="light"] .chat_user:hover,
[data-theme="light"] .chatList:hover {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .chat_user.active,
[data-theme="light"] .chatList.active {
    background-color: #e3f2fd !important;
    border-left: 3px solid #01ADF1 !important;
}

[data-theme="light"] .chat_user h2,
[data-theme="light"] .chatList h2 {
    color: #212529 !important;
}

[data-theme="light"] .chat_user .time,
[data-theme="light"] .chatList .time {
    color: #6c757d !important;
}

/* Force override for search and header elements */
[data-theme="light"] .chatsTop,
[data-theme="light"] .chatsTop * {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .search-form,
[data-theme="light"] .search-form * {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .search_user {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .search_user::placeholder {
    color: #6c757d !important;
}

/* Force override for dropdown and buttons (excluding sidebar icons) */
[data-theme="light"] .dropdown {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .dropdown:hover {
    background-color: #e9ecef !important;
    color: #01ADF1 !important;
}

/* Force override for dropdown menu */
[data-theme="light"] .dropdownMenu,
[data-theme="light"] .dropdownMenu * {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .dropdownMenu a {
    color: #212529 !important;
}

[data-theme="light"] .dropdownMenu a:hover {
    background-color: #f8f9fa !important;
    color: #01ADF1 !important;
}

/* Force override for message status */
[data-theme="light"] .msg_time_send,
[data-theme="light"] .msg_time_send * {
    color: #6c757d !important;
}

[data-theme="light"] .fa-check,
[data-theme="light"] .fa-check-double {
    color: #01ADF1 !important;
}

/* Force override for scrollbar and other elements */
[data-theme="light"] .messagesBox {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .bottom {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
}

[data-theme="light"] .bottom:hover {
    background-color: #0099d4 !important;
}

[data-theme="light"] .bottom i {
    color: #ffffff !important;
}

/* Force override for any remaining dark elements */
[data-theme="light"] .mainSection.messages div,
[data-theme="light"] .mainSection.messages span,
[data-theme="light"] .mainSection.messages p,
[data-theme="light"] .mainSection.messages h1,
[data-theme="light"] .mainSection.messages h2,
[data-theme="light"] .mainSection.messages h3,
[data-theme="light"] .mainSection.messages h4,
[data-theme="light"] .mainSection.messages h5,
[data-theme="light"] .mainSection.messages h6 {
    color: #212529 !important;
}

/* Force override for any input elements */
[data-theme="light"] .mainSection.messages input,
[data-theme="light"] .mainSection.messages textarea,
[data-theme="light"] .mainSection.messages select {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages input::placeholder,
[data-theme="light"] .mainSection.messages textarea::placeholder {
    color: #6c757d !important;
}

/* Force override for any button elements */
[data-theme="light"] .mainSection.messages button {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages button:hover {
    background-color: #e9ecef !important;
    color: #01ADF1 !important;
}

/* Gamification Dashboard Light Mode */
[data-theme="light"] .mainSection.userProfilePage.settings {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.userProfilePage.settings .mainFeed {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.userProfilePage.settings .mainFeed > h1 {
    color: #212529 !important;
}

[data-theme="light"] .mainFeedContainer {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .gamificationStats h1 {
    color: #212529 !important;
}

[data-theme="light"] .gamificationTabs h1 {
    color: #212529 !important;
}

[data-theme="light"] .statCard {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .statCard:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

[data-theme="light"] .statInfo h3 {
    color: #212529 !important;
}

[data-theme="light"] .statInfo p {
    color: #6c757d !important;
}

[data-theme="light"] .tabButton {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .tabButton:hover {
    background-color: #e9ecef !important;
    color: #01ADF1 !important;
}

[data-theme="light"] .tabButton.active {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    border-color: #01ADF1 !important;
    box-shadow: 0 4px 15px rgba(1, 173, 241, 0.3) !important;
}

[data-theme="light"] .tabButton.active:hover {
    background-color: #0099d4 !important;
    border-color: #0099d4 !important;
}

[data-theme="light"] .tabButton.active i {
    color: #ffffff !important;
}

[data-theme="light"] .tabButton i {
    color: #6c757d !important;
}

[data-theme="light"] .contentSection {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .contentSection h2 {
    color: #01ADF1 !important;
}

[data-theme="light"] .contentSection p {
    color: #6c757d !important;
}

[data-theme="light"] .badge-item {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .badge-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
    border-color: #01ADF1 !important;
    transform: translateY(-5px) !important;
}

[data-theme="light"] .badge-item.earned {
    border-color: #01ADF1 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
}

[data-theme="light"] .badge-item.earned::before {
    background: linear-gradient(90deg, #01ADF1, #0099d4) !important;
}

[data-theme="light"] .badge-name {
    color: #212529 !important;
}

[data-theme="light"] .badge-description {
    color: #6c757d !important;
}

[data-theme="light"] .badge-points {
    color: #01ADF1 !important;
    background: rgba(1, 173, 241, 0.1) !important;
}

[data-theme="light"] .milestone-item {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .milestone-item:hover {
    background-color: #f8f9fa !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .milestone-item.completed {
    border-left-color: #28a745 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
}

[data-theme="light"] .milestone-name {
    color: #212529 !important;
}

[data-theme="light"] .milestone-points {
    color: #01ADF1 !important;
    background: rgba(1, 173, 241, 0.1) !important;
}

[data-theme="light"] .milestone-description {
    color: #6c757d !important;
}

[data-theme="light"] .milestone-progress-bar {
    background-color: #e9ecef !important;
}

[data-theme="light"] .milestone-progress-fill {
    background: linear-gradient(90deg, #01ADF1, #0099d4) !important;
}

[data-theme="light"] .milestone-progress-text {
    color: #6c757d !important;
}

[data-theme="light"] .leaderboard-item {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .leaderboard-item:hover {
    background-color: #f8f9fa !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .leaderboard-name {
    color: #212529 !important;
}

[data-theme="light"] .leaderboard-stats {
    color: #6c757d !important;
}

[data-theme="light"] .noContent {
    color: #6c757d !important;
}

[data-theme="light"] .noContent i {
    color: #adb5bd !important;
}

[data-theme="light"] .noContent p {
    color: #6c757d !important;
}

/* Mobile Header Light Mode */
[data-theme="light"] .mobileHeader {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .mobileHeader .searchBar {
    background-color: #ffffff !important;
}

[data-theme="light"] .mobileHeader .searchBar input {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .mobileHeader .searchBar input::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .mobileHeader .searchBar button {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .mobileHeader .searchBar button:hover {
    background-color: #e9ecef !important;
    color: #01ADF1 !important;
}

[data-theme="light"] .mobileHeader .dropdown {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .mobileHeader .dropdown:hover {
    background-color: #e9ecef !important;
    color: #01ADF1 !important;
}

[data-theme="light"] .mobileHeader .dropdownMenu {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    color: #212529 !important;
}

[data-theme="light"] .mobileHeader .dropdownMenu a {
    color: #212529 !important;
}

[data-theme="light"] .mobileHeader .dropdownMenu a:hover {
    background-color: #f8f9fa !important;
    color: #01ADF1 !important;
}

/* Hide mobile search bar in web view (light mode) */
@media screen and (min-width: 769px) {
    [data-theme="light"] .searchBar.mobile-search-row,
    [data-theme="light"] .mainSection.publicProfile .searchBar.mobile-search-row,
    [data-theme="light"] .mainFeed .searchBar.mobile-search-row,
    [data-theme="light"] form.searchBar.mobile-search-row {
        display: none !important;
    }
}

/* Search Bar Light Mode */
[data-theme="light"] .mainFeed .searchBar {
    background-color: #ffffff !important;
}

[data-theme="light"] .mainFeed .searchBar input {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .mainFeed .searchBar input::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .mainFeed .searchBar button {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .mainFeed .searchBar button:hover {
    background-color: #e9ecef !important;
    color: #01ADF1 !important;
}

/* Font Awesome Icons Light Mode */
[data-theme="light"] .statIcon i,
[data-theme="light"] .badge-icon i,
[data-theme="light"] .tabButton i,
[data-theme="light"] .noContent i {
    color: inherit !important;
}

[data-theme="light"] .statIcon i {
    color: #ffffff !important;
}

[data-theme="light"] .badge-icon i {
    color: #ffffff !important;
}

[data-theme="light"] .tabButton.active i {
    color: #ffffff !important;
}

[data-theme="light"] .tabButton i {
    color: #6c757d !important;
}

[data-theme="light"] .noContent i {
    color: #adb5bd !important;
}

/* Simple Light Mode - Just Color Changes */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --gradient-primary: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
    --gradient-pink: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
}

/* Basic Light Mode Overrides - Keep Dark Mode Structure */
[data-theme="light"] .mainSection {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .mainFeed {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

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

[data-theme="light"] p, 
[data-theme="light"] span, 
[data-theme="light"] div {
    color: var(--text-primary) !important;
}

[data-theme="light"] .table, 
[data-theme="light"] table {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .table th, 
[data-theme="light"] table th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .table td, 
[data-theme="light"] table td {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] input, 
[data-theme="light"] textarea, 
[data-theme="light"] select {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .btn {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .btn-primary {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    border-color: #01ADF1 !important;
}

[data-theme="light"] .card {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .modal-content {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Chat Section Fixes - Make Message Area Wider */
.mainSection.messages .messagesContainer {
    width: 100% !important;
    max-width: 100% !important;
}

.mainSection.messages .messagesContainer .chats {
    width: 450px !important;
    max-width: 450px !important;
    min-width: 400px !important;
}

.mainSection.messages .messagesContainer .messagesWindow {
    width: calc(100% - 450px) !important;
    min-width: 400px !important;
    flex: 1 !important;
}

/* Mobile Responsive for Chat Only */
@media screen and (max-width: 1400px) {
    .mainSection.messages .messagesContainer .chats {
        width: 400px !important;
        max-width: 400px !important;
        min-width: 350px !important;
    }
    
    .mainSection.messages .messagesContainer .messagesWindow {
        width: calc(100% - 400px) !important;
        min-width: 400px !important;
    }
}

@media screen and (max-width: 1200px) {
    .mainSection.messages .messagesContainer .chats {
        width: 350px !important;
        max-width: 350px !important;
        min-width: 300px !important;
    }
    
    .mainSection.messages .messagesContainer .messagesWindow {
        width: calc(100% - 350px) !important;
        min-width: 350px !important;
    }
}

@media screen and (max-width: 1024px) {
    .mainSection.messages .messagesContainer .chats {
        width: 320px !important;
        max-width: 320px !important;
        min-width: 280px !important;
    }
    
    .mainSection.messages .messagesContainer .messagesWindow {
        width: calc(100% - 320px) !important;
        min-width: 320px !important;
    }
}

@media screen and (max-width: 768px) {
    .mainSection.messages .messagesContainer .chats {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    .mainSection.messages .messagesContainer .messagesWindow {
        width: 100% !important;
        min-width: 100% !important;
    }
}

/* User List Content Styling */
.mainSection.messages .messagesContainer .chats {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.mainSection.messages .messagesContainer .chats .chatsTop {
    width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.mainSection.messages .messagesContainer .chats .chatsTop form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.mainSection.messages .messagesContainer .chats .chatsTop form input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.mainSection.messages .messagesContainer .chats .chat {
    width: 100% !important;
    padding: 15px 20px !important;
    box-sizing: border-box !important;
}

.mainSection.messages .messagesContainer .chats .chat h2 {
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.mainSection.messages .messagesContainer .chats .chat .time {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.mainSection.messages .messagesContainer .chats .chats-inner {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Essential Chat Light Mode Overrides */
[data-theme="light"] .mainSection.messages {
    background-color: #f8f9fa !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 40px !important;
    color: #212529 !important;
}

/* MainSection Messages Top Margin */
.mainSection.messages {
    padding-top: 20px !important;

    padding-top: 0 !important;
}

/* Subscription Plan Table Overflow Fix */
.dataTableBuilder_wrapper {
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

.subscription_plan_listing {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    word-wrap: break-word !important;
}

.subscription_plan_listing th,
.subscription_plan_listing td {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 200px !important;
}

/* Ensure table container doesn't overflow */
.tableContainer {
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* DataTables specific overflow fixes */
.dataTables_wrapper {
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

.dataTables_wrapper .dataTables_scroll {
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

[data-theme="light"] .mainSection.messages .mainFeed {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages .chats {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages .messagesWindow {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages .messagesContainer {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages .user_list {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.messages .chats-inner {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Chat Messages Light Mode */
[data-theme="light"] .msg_card_body {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .msg_card_body li {
    background-color: transparent !important;
}

[data-theme="light"] .msg_card_body .msg-left .msg-desc {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

[data-theme="light"] .msg_card_body .msg-right .msg-desc {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
}

[data-theme="light"] .msg_card_body .msg_time_send {
    color: #6c757d !important;
}

[data-theme="light"] .msg_card_body .fa-check {
    color: #6c757d !important;
}

[data-theme="light"] .msg_card_body .fa-check-double {
    color: #01ADF1 !important;
}

/* Chat Input Light Mode */
[data-theme="light"] .chat_input_wrapper {
    background-color: #ffffff !important;
    border-top: 1px solid #e9ecef !important;
}

[data-theme="light"] .messageInput {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .chat_input_wrapper .form-control,
[data-theme="light"] .messageInput .form-control {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .chat_input_wrapper .form-control::placeholder,
[data-theme="light"] .messageInput .form-control::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .chat_input_wrapper .form-control:focus,
[data-theme="light"] .messageInput .form-control:focus {
    border-color: #01ADF1 !important;
    box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.25) !important;
}

/* Chat Buttons Light Mode */
[data-theme="light"] .chat_input_wrapper button,
[data-theme="light"] .messageInput button,
[data-theme="light"] .input-group-text {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .chat_input_wrapper button:hover,
[data-theme="light"] .messageInput button:hover,
[data-theme="light"] .input-group-text:hover {
    background-color: #e9ecef !important;
    color: #01ADF1 !important;
}

[data-theme="light"] .smile_btn,
[data-theme="light"] .attach_btn,
[data-theme="light"] #send_button {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .smile_btn:hover,
[data-theme="light"] .attach_btn:hover,
[data-theme="light"] #send_button:hover {
    background-color: #e9ecef !important;
    color: #01ADF1 !important;
}

/* Chat List Items Light Mode */
[data-theme="light"] .chat_user,
[data-theme="light"] .chatList {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

[data-theme="light"] .chat_user:hover,
[data-theme="light"] .chatList:hover {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .chat_user.active,
[data-theme="light"] .chatList.active {
    background-color: #e3f2fd !important;
    border-left: 3px solid #01ADF1 !important;
}

[data-theme="light"] .chat_user h2,
[data-theme="light"] .chatList h2 {
    color: #212529 !important;
}

[data-theme="light"] .chat_user h2 span {
    color: #6c757d !important;
}

[data-theme="light"] .chat_user .time,
[data-theme="light"] .chatList .time {
    color: #6c757d !important;
}

[data-theme="light"] .user_message_pending {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
}

/* Chat Header Light Mode */
[data-theme="light"] .chatsTop {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e9ecef !important;
    color: #212529 !important;
}

[data-theme="light"] .messageTop {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e9ecef !important;
    color: #212529 !important;
}

/* Search Form Light Mode */
[data-theme="light"] .search-form {
    background-color: transparent !important;
}

[data-theme="light"] .search_user {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .search_user:focus {
    border-color: #01ADF1 !important;
    box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.25) !important;
}

[data-theme="light"] .search_user::placeholder {
    color: #6c757d !important;
}

/* Bottom Chat Icon - Consolidated in main section below */

/* Messages Box Light Mode */
[data-theme="light"] .messagesBox {
    background-color: #f8f9fa !important;
}

/* Typing Indicator Light Mode */
[data-theme="light"] .typing-indicator-container {
    background-color: transparent !important;
}

[data-theme="light"] .typing-indicator {
    background-color: #e3f2fd !important;
    color: #1976d2 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .typing-dots .dot {
    background-color: #1976d2 !important;
}

/* Load More Buttons Light Mode */
[data-theme="light"] .load-more-below-header {
    background-color: transparent !important;
}

[data-theme="light"] .btn-load-chat-whatsapp {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .btn-load-chat-whatsapp:hover {
    background-color: #0099d4 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="light"] .load-all-messages {
    background-color: rgba(1, 173, 241, 0.05) !important;
    border-bottom: 1px solid rgba(1, 173, 241, 0.1) !important;
}

[data-theme="light"] .btn-load-all-chat {
    background-color: rgba(1, 173, 241, 0.1) !important;
    border: 1px solid rgba(1, 173, 241, 0.3) !important;
    color: #01ADF1 !important;
}

[data-theme="light"] .btn-load-all-chat:hover {
    background-color: rgba(1, 173, 241, 0.2) !important;
    border-color: rgba(1, 173, 241, 0.5) !important;
    color: #0099d4 !important;
}

/* Subscription Alert Light Mode */
[data-theme="light"] .input-group-append {
    background-color: #fff3cd !important;
    border: 1px solid #ffeaa7 !important;
    color: #856404 !important;
}

[data-theme="light"] .subscribe-sticky {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    border: 1px solid #01ADF1 !important;
}

[data-theme="light"] .subscribe-sticky:hover {
    background-color: #0099d4 !important;
    border-color: #0099d4 !important;
}

/* Coin Action Menu Light Mode */
[data-theme="light"] .action_menu {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    color: #212529 !important;
}

[data-theme="light"] .coin_action_cl input {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .coin_action_cl input:focus {
    border-color: #01ADF1 !important;
    box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.25) !important;
}

[data-theme="light"] .coin_action_cl button {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    border: 1px solid #01ADF1 !important;
}

[data-theme="light"] .coin_action_cl button:hover {
    background-color: #0099d4 !important;
    border-color: #0099d4 !important;
}

/* Progress Bar Light Mode */
[data-theme="light"] .progress {
    background-color: #e9ecef !important;
}

[data-theme="light"] .progress-bar {
    background-color: #01ADF1 !important;
}

/* Online Status Indicator Light Mode */
[data-theme="light"] .online-indicator {
    background-color: #28a745 !important;
    border: 2px solid #ffffff !important;
}

/* Nuclear option - Force all table elements in light mode */
[data-theme="light"] table,
[data-theme="light"] table *,
[data-theme="light"] table tr,
[data-theme="light"] table td,
[data-theme="light"] table th,
[data-theme="light"] table tbody,
[data-theme="light"] table thead,
[data-theme="light"] table tfoot {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] table tbody tr {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] table tbody tr:nth-child(even) {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] table thead th {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    font-weight: 600 !important;
}

[data-theme="light"] table tbody tr:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

/* Override any DataTables specific styling */
[data-theme="light"] .dataTables_wrapper table,
[data-theme="light"] .dataTables_wrapper table tr,
[data-theme="light"] .dataTables_wrapper table td,
[data-theme="light"] .dataTables_wrapper table th,
[data-theme="light"] .dataTables_wrapper table tbody,
[data-theme="light"] .dataTables_wrapper table thead,
[data-theme="light"] .dataTables_wrapper table tfoot {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .dataTables_wrapper table tbody tr {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .dataTables_wrapper table tbody tr:nth-child(even) {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .dataTables_wrapper table thead th {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .dataTables_wrapper table tbody tr:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
}


/* Override dropdown text elements */
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .dropdown-item {
    color: #212529 !important;
}

/* Override specific broadcast elements */
[data-theme="light"] .unique-go-live-title,
[data-theme="light"] .unique-description-text,
[data-theme="light"] .unique-policy-text,
[data-theme="light"] .unique-policy-link,
[data-theme="light"] .unique-username,
[data-theme="light"] .unique-profile-type,
[data-theme="light"] .unique-new-content,
[data-theme="light"] .unique-last-seen,
[data-theme="light"] .unique-last-seen span,
[data-theme="light"] .unique-last-seen strong {
    color: #212529 !important;
}

/* Override chat message text */
[data-theme="light"] .msg_card_body li,
[data-theme="light"] .msg_card_body li.msg-left,
[data-theme="light"] .msg_card_body li.msg-right,
[data-theme="light"] .msg_card_body li.system-message {
    color: #212529 !important;
}

/* Override any remaining white text */
[data-theme="light"] [class*="white"],
[data-theme="light"] [class*="light"],
[data-theme="light"] [id*="white"],
[data-theme="light"] [id*="light"] {
    color: #212529 !important;
}

/* Override inline styles with important */
[data-theme="light"] [style*="color: #ffffff"] {
    color: #212529 !important;
}

[data-theme="light"] [style*="color: white"] {
    color: #212529 !important;
}

[data-theme="light"] [style*="color: #fff"] {
    color: #212529 !important;
}

[data-theme="light"] [style*="color: #b0b0b0"] {
    color: #6c757d !important;
}

/* Override CSS variables for light mode */
[data-theme="light"] {
    --text-light: #212529 !important;
    --text-muted: #6c757d !important;
    --text-white: #212529 !important;
    --primary-dark: #ffffff !important;
    --secondary-dark: #f8f9fa !important;
}

/* Additional comprehensive text overrides */
[data-theme="light"] .container,
[data-theme="light"] .container-fluid,
[data-theme="light"] .row,
[data-theme="light"] .col,
[data-theme="light"] .col-* {
    color: #212529 !important;
}

/* Override any remaining text elements */
[data-theme="light"] .text-center,
[data-theme="light"] .text-left,
[data-theme="light"] .text-right,
[data-theme="light"] .text-justify {
    color: #212529 !important;
}

/* Override specific component text */
[data-theme="light"] .badge,
[data-theme="light"] .badge-primary,
[data-theme="light"] .badge-secondary,
[data-theme="light"] .badge-success,
[data-theme="light"] .badge-danger,
[data-theme="light"] .badge-warning,
[data-theme="light"] .badge-info {
    color: #ffffff !important;
}

/* Override breadcrumb text */
[data-theme="light"] .breadcrumb,
[data-theme="light"] .breadcrumb-item {
    color: #212529 !important;
}

[data-theme="light"] .breadcrumb-item.active {
    color: #6c757d !important;
}

/* Override pagination text */
[data-theme="light"] .pagination,
[data-theme="light"] .page-link,
[data-theme="light"] .page-item {
    color: #212529 !important;
}

[data-theme="light"] .page-link:hover {
    color: #2196f3 !important;
}

/* Override list group text */
[data-theme="light"] .list-group,
[data-theme="light"] .list-group-item {
    color: #212529 !important;
}

/* Override progress text */
[data-theme="light"] .progress,
[data-theme="light"] .progress-bar {
    color: #212529 !important;
}

/* Override tooltip text */
[data-theme="light"] .tooltip,
[data-theme="light"] .tooltip-inner {
    color: #212529 !important;
}

/* Override popover text */
[data-theme="light"] .popover,
[data-theme="light"] .popover-body {
    color: #212529 !important;
}

/* Override carousel text */
[data-theme="light"] .carousel,
[data-theme="light"] .carousel-item,
[data-theme="light"] .carousel-caption {
    color: #212529 !important;
}

/* Override accordion text */
[data-theme="light"] .accordion,
[data-theme="light"] .accordion-item,
[data-theme="light"] .accordion-header,
[data-theme="light"] .accordion-body {
    color: #212529 !important;
}

/* Override tabs text */
[data-theme="light"] .nav-tabs,
[data-theme="light"] .tab-content,
[data-theme="light"] .tab-pane {
    color: #212529 !important;
}

/* Override pill text */
[data-theme="light"] .nav-pills,
[data-theme="light"] .nav-pills .nav-link {
    color: #212529 !important;
}

[data-theme="light"] .nav-pills .nav-link.active {
    color: #ffffff !important;
}

/* Override navbar text */
[data-theme="light"] .navbar-nav,
[data-theme="light"] .navbar-toggler {
    color: #212529 !important;
    
}

/* Override offcanvas text */
[data-theme="light"] .offcanvas,
[data-theme="light"] .offcanvas-header,
[data-theme="light"] .offcanvas-body {
    color: #212529 !important;
}

/* Override toast text */
[data-theme="light"] .toast,
[data-theme="light"] .toast-header,
[data-theme="light"] .toast-body {
    color: #212529 !important;
}

/* Override spinner text */
[data-theme="light"] .spinner-border,
[data-theme="light"] .spinner-grow {
    color: #2196f3 !important;
}

/* Comprehensive Loading Indicators Fix for Light Mode */
[data-theme="light"] .spinner-border {
    border-color: rgba(0, 0, 0, 0.1) !important;
    border-right-color: transparent !important;
    border-top-color: var(--primary-color, #A61651) !important;
}

[data-theme="light"] .spinner-border-sm {
    border-color: rgba(0, 0, 0, 0.1) !important;
    border-right-color: transparent !important;
    border-top-color: var(--primary-color, #A61651) !important;
}

[data-theme="light"] .spinner-grow {
    background-color: var(--primary-color, #A61651) !important;
}

[data-theme="light"] .fa-spinner,
[data-theme="light"] .fa-spin {
    color: var(--primary-color, #A61651) !important;
}

[data-theme="light"] .loading-spinner,
[data-theme="light"] .loading-spinner::before,
[data-theme="light"] .loading-spinner::after {
    border-color: rgba(0, 0, 0, 0.1) !important;
    border-top-color: var(--primary-color, #A61651) !important;
}

[data-theme="light"] .btn-loading::after {
    border-top-color: currentColor !important;
}

[data-theme="light"] .simple-spinner {
    border-color: rgba(0, 0, 0, 0.1) !important;
    border-top-color: currentColor !important;
}

[data-theme="light"] .skeleton-loader {
    background: linear-gradient(90deg, 
        #f8f9fa 25%, 
        rgba(0, 0, 0, 0.05) 50%, 
        #f8f9fa 75%) !important;
    background-size: 200% 100% !important;
}

/* Transparent loading backgrounds for all themes */
#preloader,
.preloader,
.loading-overlay,
.universal-loading-overlay {
    background: transparent !important;
    backdrop-filter: none !important;
}

[data-theme="light"] #preloader,
[data-theme="light"] .preloader,
[data-theme="light"] .loading-overlay,
[data-theme="light"] .universal-loading-overlay {
    background: transparent !important;
    backdrop-filter: none !important;
}

/* Transparent loading content for all themes */
.loading-content,
.universal-loading .loading-content {
    background: transparent !important;
    box-shadow: none !important;
}

[data-theme="light"] .loading-content,
[data-theme="light"] .universal-loading .loading-content {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-primary, #212529) !important;
}

/* CRITICAL: Override viewport dimensions that cause oval spinners */
/* Only affect dimensions/shape, NOT colors, borders, or animations */
/* NOTE: Excluding .spinner-border, .spinner-border-sm, .spinner-grow from auto sizing */
.loading-spinner:not(.spinner-border):not(.spinner-border-sm):not(.spinner-grow),
.loading-spinner::before,
.loading-spinner::after,
.universal-loading .loading-spinner:not(.spinner-border):not(.spinner-border-sm):not(.spinner-grow),
.btn-loading::after,
.simple-spinner:not(.spinner-border):not(.spinner-border-sm):not(.spinner-grow),
.fa-spinner,
[class*="spinner"]:not(.spinner-border):not(.spinner-border-sm):not(.spinner-grow):not([class*="container"]):not([class*="wrapper"]):not([class*="overlay"]) {
    /* Override viewport dimensions FIRST - preserve dark mode design */
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    max-width: none !important;
    max-height: none !important;
    /* Only affect shape, not design */
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    /* DO NOT override border colors, background colors, or animations - preserve dark mode */
}

/* Explicit spinner dimensions - must be circular with larger radius */
.spinner-border {
    width: 3.5rem !important;
    height: 3.5rem !important;
    min-width: 3.5rem !important;
    min-height: 3.5rem !important;
    max-width: 3.5rem !important;
    max-height: 3.5rem !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    border: 0.35em solid currentColor !important;
    border-right-color: transparent !important;
    display: inline-block !important;
    vertical-align: -0.125em !important;
    animation: spinner-border 0.75s linear infinite !important;
}

.spinner-border-sm {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    max-width: 2rem !important;
    max-height: 2rem !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    border: 0.3em solid currentColor !important;
    border-right-color: transparent !important;
    display: inline-block !important;
    animation: spinner-border 0.75s linear infinite !important;
}

.spinner-grow {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    max-width: 2rem !important;
    max-height: 2rem !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
}

/* Force specific fixed dimensions for all spinners */
.loading-spinner {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    /* Override any viewport dimensions */
    width: 60px !important;
    height: 60px !important;
}

.loading-spinner::before {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    /* Override any viewport dimensions */
    width: 45px !important;
    height: 45px !important;
}

.loading-spinner::after {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    /* Override any viewport dimensions */
    width: 20px !important;
    height: 20px !important;
}

.btn-loading::after {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    /* Override any viewport dimensions */
    width: 16px !important;
    height: 16px !important;
}

.simple-spinner {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    /* Override any viewport dimensions */
    width: 16px !important;
    height: 16px !important;
}

.universal-loading .loading-spinner {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    /* Override any viewport dimensions */
    width: 40px !important;
    height: 40px !important;
}

/* Force circular shape - ensure equal dimensions but allow rotation */
.loading-spinner::before,
.loading-spinner::after {
    transform-origin: center center !important;
}

/* Ensure the spinner container maintains circular shape during animation */
.loading-spinner {
    overflow: visible !important;
}

/* Force specific dimensions AFTER overriding viewport sizes */
.spinner-border {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    max-width: 2rem !important;
    max-height: 2rem !important;
}

.spinner-border-sm {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    min-height: 1rem !important;
    max-width: 1rem !important;
    max-height: 1rem !important;
}

/* Override close button text */
[data-theme="light"] .btn-close {
    color: #212529 !important;
}

/* Override form text */
[data-theme="light"] .input-group,
[data-theme="light"] .input-group-text {
    color: #212529 !important;
}

/* Override validation text */
[data-theme="light"] .invalid-feedback,
[data-theme="light"] .valid-feedback {
    color: #212529 !important;
}

/* Override any remaining elements with white text */
[data-theme="light"] [class*="text-white"],
[data-theme="light"] [class*="white"],
[data-theme="light"] [class*="light"],
[data-theme="light"] [id*="white"],
[data-theme="light"] [id*="light"] {
    color: #212529 !important;
}

/* Force override any remaining white text with !important */
[data-theme="light"] *[style*="color: #ffffff"] {
    color: #212529 !important;
}

[data-theme="light"] *[style*="color: white"] {
    color: #212529 !important;
}

[data-theme="light"] *[style*="color: #fff"] {
    color: #212529 !important;
}

[data-theme="light"] *[style*="color: #b0b0b0"] {
    color: #6c757d !important;
}

/* Override any text with specific color values */
[data-theme="light"] *[style*="color: #000000"] {
    color: #212529 !important;
}

[data-theme="light"] *[style*="color: #333333"] {
    color: #212529 !important;
}

[data-theme="light"] *[style*="color: #666666"] {
    color: #6c757d !important;
}

/* Final comprehensive text override - catch everything */
[data-theme="light"] * {
    color: #212529 !important;
}

/* Override specific elements that should have different colors */
[data-theme="light"] .text-muted,
[data-theme="light"] .text-secondary,
[data-theme="light"] .text-info,
[data-theme="light"] .text-warning,
[data-theme="light"] .text-danger,
[data-theme="light"] .text-success,
[data-theme="light"] .text-primary {
    color: inherit !important;
}

[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-success,
[data-theme="light"] .btn-danger,
[data-theme="light"] .btn-warning,
[data-theme="light"] .btn-info,
[data-theme="light"] .btn-light,
[data-theme="light"] .btn-dark {
    color: inherit !important;
}

[data-theme="light"] .badge-primary,
[data-theme="light"] .badge-secondary,
[data-theme="light"] .badge-success,
[data-theme="light"] .badge-danger,
[data-theme="light"] .badge-warning,
[data-theme="light"] .badge-info,
[data-theme="light"] .badge-light,
[data-theme="light"] .badge-dark {
    color: #ffffff !important;
}

[data-theme="light"] .alert-success,
[data-theme="light"] .alert-danger,
[data-theme="light"] .alert-warning,
[data-theme="light"] .alert-info {
    color: inherit !important;
}

/* Override any remaining white text with maximum specificity */
[data-theme="light"] html *[style*="color: #ffffff"],
[data-theme="light"] body *[style*="color: #ffffff"],
[data-theme="light"] div *[style*="color: #ffffff"],
[data-theme="light"] span *[style*="color: #ffffff"],
[data-theme="light"] p *[style*="color: #ffffff"],
[data-theme="light"] h1 *[style*="color: #ffffff"],
[data-theme="light"] h2 *[style*="color: #ffffff"],
[data-theme="light"] h3 *[style*="color: #ffffff"],
[data-theme="light"] h4 *[style*="color: #ffffff"],
[data-theme="light"] h5 *[style*="color: #ffffff"],
[data-theme="light"] h6 *[style*="color: #ffffff"] {
    color: #212529 !important;
}

/* Override any remaining white text with maximum specificity */
[data-theme="light"] html *[style*="color: white"],
[data-theme="light"] body *[style*="color: white"],
[data-theme="light"] div *[style*="color: white"],
[data-theme="light"] span *[style*="color: white"],
[data-theme="light"] p *[style*="color: white"],
[data-theme="light"] h1 *[style*="color: white"],
[data-theme="light"] h2 *[style*="color: white"],
[data-theme="light"] h3 *[style*="color: white"],
[data-theme="light"] h4 *[style*="color: white"],
[data-theme="light"] h5 *[style*="color: white"],
[data-theme="light"] h6 *[style*="color: white"] {
    color: #212529 !important;
}

/* Override any remaining white text with maximum specificity */
[data-theme="light"] html *[style*="color: #fff"],
[data-theme="light"] body *[style*="color: #fff"],
[data-theme="light"] div *[style*="color: #fff"],
[data-theme="light"] span *[style*="color: #fff"],
[data-theme="light"] p *[style*="color: #fff"],
[data-theme="light"] h1 *[style*="color: #fff"],
[data-theme="light"] h2 *[style*="color: #fff"],
[data-theme="light"] h3 *[style*="color: #fff"],
[data-theme="light"] h4 *[style*="color: #fff"],
[data-theme="light"] h5 *[style*="color: #fff"],
[data-theme="light"] h6 *[style*="color: #fff"] {
    color: #212529 !important;
}

/* ========================================
   CREATOR LIVE PAGE LIGHT MODE STYLING
======================================== */

/* Main live page container */
[data-theme="light"] .live-main {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Live header section */
[data-theme="light"] .live-header {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .live-title {
    color: #212529 !important;
}

[data-theme="light"] .live-subtitle {
    color: #6c757d !important;
}

/* Filters sidebar */
[data-theme="light"] .filters-sidebar {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .filters-header {
    background-color: transparent !important;
    color: #212529 !important;
}

[data-theme="light"] .filters-header h5 {
    color: #212529 !important;
}

[data-theme="light"] .filters-header i {
    color: #2196f3 !important;
}

[data-theme="light"] .filter-groups {
    background-color: transparent !important;
}

[data-theme="light"] .filter-group {
    background-color: transparent !important;
}

[data-theme="light"] .filter-label {
    color: #212529 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .form-check-label {
    color: #212529 !important;
}

/* Filter form elements */
[data-theme="light"] .form-select {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .form-select:focus {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25) !important;
}

[data-theme="light"] .form-select option {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Filter action buttons */
[data-theme="light"] .filters-actions {
    background-color: transparent !important;
}

[data-theme="light"] .apply-filters {
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
}

[data-theme="light"] .apply-filters:hover {
    background-color: #1976d2 !important;
    border-color: #1976d2 !important;
    color: #ffffff !important;
}

[data-theme="light"] .reset-filters {
    background-color: transparent !important;
    border-color: #6c757d !important;
    color: #6c757d !important;
}

[data-theme="light"] .reset-filters:hover {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

/* Live creators grid */
[data-theme="light"] .live-creators-grid {
    background-color: #ffffff !important;
    color: #212529 !important;
}

[data-theme="light"] .live-creator-card {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .live-creator-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    border-color: #2196f3 !important;
}

/* Live badge */
[data-theme="light"] .live-badge {
    background-color: #ff4757 !important;
    color: #ffffff !important;
    border: none !important;
}

[data-theme="light"] .live-badge i {
    color: #ffffff !important;
}

/* Creator info in live cards */
[data-theme="light"] .creator-info {
    background-color: transparent !important;
    color: #212529 !important;
}

[data-theme="light"] .creator-avatar {
    border: 3px solid #2196f3 !important;
}

[data-theme="light"] .creator-details {
    background-color: transparent !important;
    color: #212529 !important;
}

[data-theme="light"] .creator-name {
    color: #212529 !important;
    text-decoration: none !important;
}

[data-theme="light"] .creator-username {
    color: #6c757d !important;
}

/* Live stats */
[data-theme="light"] .live-stats {
    background-color: transparent !important;
    color: #212529 !important;
}

[data-theme="light"] .stat-item {
    color: #6c757d !important;
}

[data-theme="light"] .stat-item i {
    color: #2196f3 !important;
}

[data-theme="light"] .stat-item span {
    color: #6c757d !important;
}

/* Join live button */
[data-theme="light"] .join-live-btn {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

[data-theme="light"] .join-live-btn:hover {
    background: linear-gradient(270deg, #8B1248 0%, #0198D4 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4) !important;
}

/* Upcoming lives section */
[data-theme="light"] .upcoming-lives {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .section-header {
    background-color: transparent !important;
    color: #212529 !important;
}

[data-theme="light"] .section-title {
    color: #212529 !important;
}

[data-theme="light"] .section-subtitle {
    color: #6c757d !important;
}

/* Upcoming table */
[data-theme="light"] .upcoming-table-container {
    background-color: transparent !important;
}

[data-theme="light"] .upcoming-table {
    background-color: #ffffff !important;
    border: 1px solid rgba(1, 173, 241, 0.3) !important;
    border-radius: 12px !important;
}

[data-theme="light"] .upcoming-table thead th {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 1.25rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

[data-theme="light"] .upcoming-table tbody td {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 1.25rem 1.5rem !important;
}

[data-theme="light"] .upcoming-table tbody tr:hover td {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .upcoming-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Table content */
[data-theme="light"] .creator-cell {
    background-color: transparent !important;
    color: #212529 !important;
}

[data-theme="light"] .table-avatar {
    border: 2px solid #2196f3 !important;
}

[data-theme="light"] .table-username {
    color: #212529 !important;
}

[data-theme="light"] .live-time {
    color: #212529 !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
}

[data-theme="light"] .slot-hint {
    color: #6c757d !important;
}

[data-theme="light"] .table-username {
    color: #212529 !important;
}

/* Notify button */
[data-theme="light"] .notify-btn {
    background-color: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #212529 !important;
}

[data-theme="light"] .notify-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    color: #212529 !important;
}

[data-theme="light"] .notify-btn.notified {
    background-color: #01ADF1 !important;
    border-color: #01ADF1 !important;
    color: #ffffff !important;
}

[data-theme="light"] .notify-btn:hover {
    background-color: #2196f3 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

[data-theme="light"] .notify-btn.notified {
    background-color: #2196f3 !important;
    color: #ffffff !important;
    border-color: #2196f3 !important;
}

/* No data message */
[data-theme="light"] .col-lg-12.shown.text-center {
    background-color: transparent !important;
}

[data-theme="light"] .col-lg-12.shown.text-center h2 {
    color: #212529 !important;
}

/* Mobile responsive for creator live page */
@media (max-width: 768px) {
    [data-theme="light"] .live-main {
        background-color: #ffffff !important;
    }
    
    [data-theme="light"] .filters-sidebar {
        background-color: #f8f9fa !important;
    }
    
    [data-theme="light"] .live-creators-grid {
        background-color: #ffffff !important;
    }
    
    [data-theme="light"] .upcoming-lives {
        background-color: #f8f9fa !important;
    }
}

@media (max-width: 576px) {
    [data-theme="light"] .live-main {
        background-color: #ffffff !important;
    }
    
    [data-theme="light"] .filters-sidebar {
        background-color: #f8f9fa !important;
    }
    
    [data-theme="light"] .live-creator-card {
        background-color: #ffffff !important;
    }
    
    [data-theme="light"] .upcoming-lives {
        background-color: #f8f9fa !important;
    }
}

/* ========================================
   MAKE MONEY PAGE LIGHT MODE STYLING
======================================== */

/* Main make money page body */
[data-theme="light"] body {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Hero section for make money page */
[data-theme="light"] .hero-section {
    background-color: #f8f9fa !important;
    background-image: url('../images/hero-bg.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: relative !important;
    overflow: visible !important;
    min-height: 100vh !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-theme="light"] .hero-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(248, 249, 250, 0.2) !important;
    z-index: 1 !important;
}

[data-theme="light"] .hero-section .container {
    position: relative !important;
    z-index: 2 !important;
    background-color: transparent !important;
    width: 100% !important;
}

[data-theme="light"] .hero-title {
    color: #212529 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    text-align: center !important;
}

[data-theme="light"] .hero-subtitle {
    color: #6c757d !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    text-align: center !important;
}

/* Section backgrounds */
[data-theme="light"] .earn-ways-section,
[data-theme="light"] .generate-income-section,
[data-theme="light"] .why-fansbook-section,
[data-theme="light"] .how-to-start-section {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Section separators */
[data-theme="light"] .earn-ways-section::after,
[data-theme="light"] .generate-income-section::after,
[data-theme="light"] .why-fansbook-section::after {
    background: #dee2e6 !important;
}

/* Section titles */
[data-theme="light"] .section-title {
    color: #212529 !important;
}

/* Container styling */
[data-theme="light"] .container {
    background-color: transparent !important;
    color: #212529 !important;
    padding-top: 10px !important;
}

/* Earn cards */
[data-theme="light"] .earn-card {
    background-color: #ffffff !important;
    border: 2px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .earn-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    border-color: #2196f3 !important;
}

[data-theme="light"] .earn-icon {
    background: linear-gradient(135deg, #A61651 0%, #01ADF1 100%) !important;
}

[data-theme="light"] .earn-icon::before {
    background: #ffffff !important;
}

[data-theme="light"] .earn-icon i {
    color: #212529 !important;
}

[data-theme="light"] .earn-card h3 {
    color: #212529 !important;
}

[data-theme="light"] .earn-card p {
    color: #6c757d !important;
}

/* Income cards */
[data-theme="light"] .income-card {
    background-color: #ffffff !important;
    border: 2px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .income-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    border-color: #2196f3 !important;
}

[data-theme="light"] .income-icon {
    background: linear-gradient(135deg, #A61651 0%, #01ADF1 100%) !important;
}

[data-theme="light"] .income-icon::before {
    background: #ffffff !important;
}

[data-theme="light"] .income-icon i {
    color: #212529 !important;
}

[data-theme="light"] .income-card h3 {
    color: #212529 !important;
}

[data-theme="light"] .income-card p {
    color: #6c757d !important;
}

/* Benefit cards */
[data-theme="light"] .benefit-card {
    background-color: #ffffff !important;
    border: 2px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .benefit-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    border-color: #2196f3 !important;
}

[data-theme="light"] .benefit-icon {
    background: linear-gradient(135deg, #A61651 0%, #01ADF1 100%) !important;
}

[data-theme="light"] .benefit-icon::before {
    background: #ffffff !important;
}

[data-theme="light"] .benefit-icon i {
    color: #212529 !important;
}

[data-theme="light"] .benefit-card h3 {
    color: #212529 !important;
}

[data-theme="light"] .benefit-card p {
    color: #6c757d !important;
}

/* Step cards */
[data-theme="light"] .step-card {
    background-color: #ffffff !important;
    border: 2px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    padding: 25px !important;
    border-radius: 15px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .step-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    border-color: #2196f3 !important;
}

[data-theme="light"] .step-icon {
    background: linear-gradient(135deg, #A61651 0%, #01ADF1 100%) !important;
}

[data-theme="light"] .step-icon::before {
    background: #ffffff !important;
}

[data-theme="light"] .step-icon i {
    color: #212529 !important;
}

[data-theme="light"] .step-card h3 {
    color: #212529 !important;
}

/* Custom calendar icon */
[data-theme="light"] .custom-calendar-icon .fas.fa-calendar-alt {
    color: #212529 !important;
}

[data-theme="light"] .custom-calendar-icon .plus-overlay {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #212529 !important;
}

/* Text elements */
[data-theme="light"] .text-white {
    color: #212529 !important;
}

[data-theme="light"] .text-muted {
    color: #6c757d !important;
}

/* Button styling */
[data-theme="light"] .btn-gradient {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

[data-theme="light"] .btn-gradient:hover {
    background: linear-gradient(270deg, #8B1248 0%, #0198D4 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Mobile responsive for make money page */
@media (max-width: 768px) {
    [data-theme="light"] .hero-section {
        background-color: #f8f9fa !important;
    }
    
    [data-theme="light"] .earn-ways-section,
    [data-theme="light"] .generate-income-section,
    [data-theme="light"] .why-fansbook-section,
    [data-theme="light"] .how-to-start-section {
        background-color: #ffffff !important;
    }
}

@media (max-width: 576px) {
    [data-theme="light"] .hero-section {
        background-color: #f8f9fa !important;
    }
    
    [data-theme="light"] .earn-ways-section,
    [data-theme="light"] .generate-income-section,
    [data-theme="light"] .why-fansbook-section,
    [data-theme="light"] .how-to-start-section {
        background-color: #ffffff !important;
    }
}

/* ========================================
   TWO-FACTOR SETUP PAGE LIGHT MODE STYLING
======================================== */

/* Main onboarding container */
[data-theme="light"] .onboarding-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

/* Onboarding card */
[data-theme="light"] .onboarding-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    max-width: 800px !important;
    width: 100% !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #dee2e6 !important;
}

/* Progress bar */
[data-theme="light"] .progress-bar {
    background: #e9ecef !important;
    border-radius: 4px !important;
}

[data-theme="light"] .progress-fill {
    background: linear-gradient(90deg, #2196f3, #1976d2) !important;
    border-radius: 4px !important;
}

/* Step header */
[data-theme="light"] .step-header {
    text-align: center !important;
    margin-bottom: 30px !important;
}

[data-theme="light"] .step-title {
    color: #212529 !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

[data-theme="light"] .step-subtitle {
    color: #6c757d !important;
    font-size: 1.1rem !important;
}

/* Step cards */
[data-theme="light"] .step-card {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 15px !important;
    padding: 25px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .step-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    border-color: #2196f3 !important;
}

[data-theme="light"] .step-card h5 {
    color: #212529 !important;
    margin-bottom: 15px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

[data-theme="light"] .step-card p {
    color: #495057 !important;
    margin-bottom: 15px !important;
    line-height: 1.5 !important;
}

[data-theme="light"] .step-card ul {
    color: #495057 !important;
    padding-left: 20px !important;
    margin: 0 !important;
}

[data-theme="light"] .step-card li {
    color: #495057 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

/* Step numbers */
[data-theme="light"] .step-number {
    background: linear-gradient(135deg, #2196f3, #1976d2) !important;
    color: white !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    font-size: 18px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3) !important;
}

/* QR code container */
[data-theme="light"] .qr-code-container {
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 10px !important;
    text-align: center !important;
    margin: 20px 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .qr-code-container img {
    border-radius: 8px !important;
    max-width: 100% !important;
    height: auto !important;
}

[data-theme="light"] .qr-code-container p {
    color: #6c757d !important;
    margin-top: 15px !important;
    margin-bottom: 0 !important;
}

/* Secret input group */
[data-theme="light"] .secret-input-group {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
}

[data-theme="light"] .secret-input-group input {
    background: transparent !important;
    border: none !important;
    color: #495057 !important;
    padding: 15px !important;
    flex: 1 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
}

[data-theme="light"] .secret-input-group input:focus {
    outline: none !important;
}

[data-theme="light"] .secret-input-group button {
    background: #2196f3 !important;
    border: none !important;
    color: white !important;
    padding: 15px 20px !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

[data-theme="light"] .secret-input-group button:hover {
    background: #1976d2 !important;
    transform: scale(1.05) !important;
}

/* Verification form */
[data-theme="light"] .verification-form {
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 10px !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .verification-form label {
    color: #212529 !important;
    margin-bottom: 10px !important;
    display: block !important;
    font-weight: 500 !important;
}

[data-theme="light"] .verification-form input {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
    padding: 15px !important;
    border-radius: 8px !important;
    font-size: 20px !important;
    text-align: center !important;
    letter-spacing: 3px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    font-family: 'Courier New', monospace !important;
    font-weight: bold !important;
}

[data-theme="light"] .verification-form input:focus {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2) !important;
    outline: none !important;
}

[data-theme="light"] .verification-form .form-text {
    color: #6c757d !important;
}

/* Enable 2FA button */
[data-theme="light"] .btn-enable-2fa {
    background: linear-gradient(135deg, #2196f3, #1976d2) !important;
    border: none !important;
    color: white !important;
    padding: 15px 30px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    cursor: pointer !important;
    font-size: 16px !important;
}

[data-theme="light"] .btn-enable-2fa:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.4) !important;
}

[data-theme="light"] .btn-enable-2fa:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Recovery codes container */
[data-theme="light"] .recovery-codes-container {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 10px !important;
    padding: 25px !important;
    margin-top: 30px !important;
}

[data-theme="light"] .recovery-codes-container h5 {
    color: #212529 !important;
    margin-bottom: 15px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

[data-theme="light"] .recovery-codes-container p {
    color: #495057 !important;
    margin-bottom: 15px !important;
    line-height: 1.5 !important;
}

/* Recovery codes */
[data-theme="light"] .recovery-code {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
    padding: 12px !important;
    border-radius: 8px !important;
    font-family: 'Courier New', monospace !important;
    font-weight: bold !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .recovery-code:hover {
    background: #e9ecef !important;
    transform: scale(1.02) !important;
}

/* Download button */
[data-theme="light"] .btn-download {
    background: #28a745 !important;
    border: none !important;
    color: white !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* ========================================
   ONBOARDING COMPREHENSIVE THEME STYLING
======================================== */

/* Dark Mode (Default) Onboarding Styles */
.onboarding-container {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    min-height: 100vh !important;
}

.onboarding-card {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(45, 45, 45, 0.95) 100%) !important;
    border: 1px solid #404040 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
}

/* Progress bar - dark */
.progress-bar {
    background: #404040 !important;
}

.progress-fill {
    background: var(--theme-gradient) !important;
}

/* Step indicators - dark */
.step-indicator::before {
    background: #404040 !important;
}

.step-dot {
    background: #404040 !important;
    border-color: #2a2a2a !important;
}

.step-dot.active {
    background: #2196f3 !important;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.2) !important;
}

.step-dot.completed {
    background: #28a745 !important;
}

/* Typography - dark */
.welcome-title,
.step-title {
    color: #ffffff !important;
}

.welcome-subtitle,
.step-subtitle {
    color: #b0b0b0 !important;
}

/* Step items - dark */
.step-item {
    border-bottom-color: #404040 !important;
}

.step-icon {
    background: #2a2a2a !important;
    color: #b0b0b0 !important;
}

.step-item.completed .step-icon {
    background: #28a745 !important;
    color: #ffffff !important;
}

.step-item.current .step-icon {
    background: #2196f3 !important;
    color: #ffffff !important;
}

.step-content h4 {
    color: #ffffff !important;
}

.step-content p {
    color: #b0b0b0 !important;
}

/* Step cards - dark */
.step-card {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(45, 45, 45, 0.95) 100%) !important;
    border: 1px solid #404040 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    padding: 25px !important;
    border-radius: 15px !important;
    transition: all 0.3s ease !important;
}

.step-card:hover {
    border-color: #2196f3 !important;
    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.2) !important;
}

.step-card h5 {
    color: #ffffff !important;
}

.step-card p,
.step-card ul,
.step-card li {
    color: #b0b0b0 !important;
}

/* Step number - dark */
.step-number {
    background: var(--theme-gradient) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(166, 22, 81, 0.3) !important;
}

/* QR code container - dark */
.qr-code-container {
    background: rgba(26, 26, 26, 0.8) !important;
    border: 1px solid #404040 !important;
}

.qr-code-container p {
    color: #b0b0b0 !important;
}

/* Secret input group - dark */
.secret-input-group {
    background: rgba(26, 26, 26, 0.8) !important;
    border-color: #404040 !important;
}

.secret-input-group input {
    color: #ffffff !important;
}

.secret-input-group button {
    background: var(--theme-accent) !important;
    color: #ffffff !important;
}

/* Verification form - dark */
.verification-form {
    background: rgba(26, 26, 26, 0.8) !important;
    border-color: #404040 !important;
}

.verification-form label {
    color: #ffffff !important;
}

.verification-form input {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.verification-form input:focus {
    border-color: var(--theme-accent) !important;
    box-shadow: 0 0 0 3px rgba(166, 22, 81, 0.2) !important;
}

/* Recovery codes container - dark */
.recovery-codes-container {
    background: rgba(26, 26, 26, 0.8) !important;
    border-color: #404040 !important;
}

.recovery-codes-container h5 {
    color: #ffffff !important;
}

.recovery-codes-container p {
    color: #b0b0b0 !important;
}

.recovery-code {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.recovery-code:hover {
    background: rgba(33, 150, 243, 0.1) !important;
}

/* Form elements - dark */
.form-label {
    color: #ffffff !important;
}

.form-control {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.form-control:focus {
    border-color: var(--theme-accent) !important;
    box-shadow: 0 0 0 3px rgba(166, 22, 81, 0.2) !important;
}

.form-control::placeholder {
    color: #666666 !important;
}

/* Image preview - dark */
.image-preview {
    border-color: #404040 !important;
}

.image-preview:hover {
    border-color: var(--theme-accent) !important;
}

/* Upload button - dark */
.upload-btn {
    background: rgba(26, 26, 26, 0.8) !important;
    border-color: #404040 !important;
}

.upload-btn:hover {
    border-color: var(--theme-accent) !important;
    background: rgba(166, 22, 81, 0.1) !important;
}

.upload-icon,
.upload-text {
    color: #b0b0b0 !important;
}

/* Preference sections - dark */
.preference-section {
    background: rgba(26, 26, 26, 0.8) !important;
    border-color: #404040 !important;
}

.section-title {
    color: #ffffff !important;
}

.preference-label {
    color: #ffffff !important;
}

.preference-description {
    color: #b0b0b0 !important;
}

/* Interest items - dark */
.interest-item {
    background: rgba(26, 26, 26, 0.8) !important;
    border-color: #404040 !important;
    color: #b0b0b0 !important;
}

.interest-item:hover {
    border-color: var(--theme-accent) !important;
    background: rgba(166, 22, 81, 0.1) !important;
}

.interest-item.selected {
    background: var(--theme-gradient) !important;
    border-color: var(--theme-accent) !important;
    color: #ffffff !important;
}

.interest-name {
    color: inherit !important;
}

/* Search box - dark */
.search-input {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.search-input:focus {
    border-color: var(--theme-accent) !important;
    box-shadow: 0 0 0 3px rgba(166, 22, 81, 0.2) !important;
}

.selected-count {
    color: #b0b0b0 !important;
}

/* Buttons - dark */
.btn-secondary {
    background: #404040 !important;
    color: #ffffff !important;
}

.btn-secondary:hover {
    background: #505050 !important;
}

.btn-skip {
    color: #b0b0b0 !important;
    border-color: #404040 !important;
}

.btn-skip:hover {
    background: rgba(42, 42, 42, 0.8) !important;
    color: #ffffff !important;
}

.skip-link {
    color: #b0b0b0 !important;
}

.skip-link:hover {
    color: #ffffff !important;
}

/* Alert - dark */
.alert-custom {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
    color: #ff6b6b !important;
}

.alert-success-custom {
    background: rgba(40, 167, 69, 0.15) !important;
    border-color: rgba(40, 167, 69, 0.3) !important;
    color: #6bcf7f !important;
}

/* Small text - dark */
small {
    color: #b0b0b0 !important;
}

/* QR code help text - dark */
.qr-code-help-text {
    color: #b0b0b0 !important;
}

/* Onboarding help text - dark */
.onboarding-help-text {
    color: #b0b0b0 !important;
}

/* Marketplace Product Detail Page - Dark Mode (Default) */
.product-detail-container {
    background: var(--bg-primary) !important;
}

.product-detail-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.product-detail-card h1,
.product-detail-card h3,
.product-detail-card h5 {
    color: var(--text-primary) !important;
}

.product-detail-card p,
.product-detail-card .description-text {
    color: var(--text-secondary) !important;
}

.price-section {
    background: var(--theme-gradient) !important;
}

/* Marketplace Product Detail Page - Light Mode */
[data-theme="light"] .product-detail-container {
    background: #f8f9fa !important;
}

[data-theme="light"] .product-detail-card {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .product-detail-card h1,
[data-theme="light"] .product-detail-card h3,
[data-theme="light"] .product-detail-card h5 {
    color: #212529 !important;
}

[data-theme="light"] .product-detail-card p,
[data-theme="light"] .product-detail-card .description-text {
    color: #6c757d !important;
}

[data-theme="light"] .price-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

[data-theme="light"] .bid-form {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .bid-form h3 {
    color: #212529 !important;
}

[data-theme="light"] .bid-input-group input {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .bid-input-group input::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .bid-item {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .bid-item.winning {
    background: #fff3cd !important;
    border-color: #ffc107 !important;
    color: #856404 !important;
}

[data-theme="light"] .bid-user {
    color: #212529 !important;
}

[data-theme="light"] .bid-user[onclick]:hover {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .bid-user img {
    border-color: #dee2e6 !important;
}

[data-theme="light"] .bid-user strong {
    color: #212529 !important;
}

[data-theme="light"] .bid-user small {
    color: #6c757d !important;
}

[data-theme="light"] .bid-amount {
    color: #212529 !important;
}

[data-theme="light"] .timer-display {
    background: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffc107 !important;
}

[data-theme="light"] .timer-display.expired {
    background: #f8d7da !important;
    color: #721c24 !important;
    border-color: #dc3545 !important;
}

[data-theme="light"] .timer-value {
    color: #856404 !important;
}

[data-theme="light"] .timer-display.expired .timer-value {
    color: #721c24 !important;
}

[data-theme="light"] .table {
    color: #212529 !important;
}

[data-theme="light"] .table th {
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .table td {
    color: #6c757d !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .winning-badge {
    background: #ffc107 !important;
    color: #333 !important;
}

[data-theme="light"] .badge-info {
    background: #d1ecf1 !important;
    color: #0c5460 !important;
    border: 1px solid #bee5eb !important;
}

.badge-info {
    background: rgba(23, 162, 184, 0.2) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(23, 162, 184, 0.4) !important;
}

/* Skip all button - dark */
.btn-skip-all,
.btn-danger-custom {
    background: #dc3545 !important;
    color: #ffffff !important;
}

.btn-skip-all:hover,
.btn-danger-custom:hover {
    background: #c82333 !important;
    color: #ffffff !important;
}

/* Light mode overrides for onboarding */
[data-theme="light"] .qr-code-help-text {
    color: #6c757d !important;
}

[data-theme="light"] .onboarding-help-text {
    color: #6c757d !important;
}

[data-theme="light"] .btn-skip-all,
[data-theme="light"] .btn-danger-custom {
    background: #dc3545 !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn-skip-all:hover,
[data-theme="light"] .btn-danger-custom:hover {
    background: #c82333 !important;
    color: #ffffff !important;
}

/* Additional light mode onboarding styles */
[data-theme="light"] .onboarding-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

[data-theme="light"] .onboarding-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .progress-bar {
    background: #e9ecef !important;
}

[data-theme="light"] .progress-fill {
    background: linear-gradient(90deg, #2196f3, #1976d2) !important;
}

[data-theme="light"] .step-indicator::before {
    background: #e9ecef !important;
}

[data-theme="light"] .step-dot {
    background: #e9ecef !important;
    border-color: #ffffff !important;
}

[data-theme="light"] .step-dot.active {
    background: #2196f3 !important;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.2) !important;
}

[data-theme="light"] .welcome-title,
[data-theme="light"] .step-title {
    color: #212529 !important;
}

[data-theme="light"] .welcome-subtitle,
[data-theme="light"] .step-subtitle {
    color: #6c757d !important;
}

[data-theme="light"] .step-item {
    border-bottom-color: #dee2e6 !important;
}

[data-theme="light"] .step-icon {
    background: #f8f9fa !important;
    color: #6c757d !important;
}

[data-theme="light"] .step-item.completed .step-icon {
    background: #28a745 !important;
    color: #ffffff !important;
}

[data-theme="light"] .step-item.current .step-icon {
    background: #2196f3 !important;
    color: #ffffff !important;
}

[data-theme="light"] .step-content h4 {
    color: #212529 !important;
}

[data-theme="light"] .step-content p {
    color: #6c757d !important;
}

[data-theme="light"] .form-label {
    color: #212529 !important;
}

[data-theme="light"] .form-control {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .form-control:focus {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1) !important;
}

[data-theme="light"] .form-control::placeholder {
    color: #adb5bd !important;
}

[data-theme="light"] .image-preview {
    border-color: #dee2e6 !important;
}

[data-theme="light"] .image-preview:hover {
    border-color: #2196f3 !important;
}

[data-theme="light"] .upload-btn {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .upload-btn:hover {
    border-color: #2196f3 !important;
    background: rgba(33, 150, 243, 0.05) !important;
}

[data-theme="light"] .upload-icon,
[data-theme="light"] .upload-text {
    color: #6c757d !important;
}

[data-theme="light"] .preference-section {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .section-title {
    color: #212529 !important;
}

[data-theme="light"] .preference-label {
    color: #212529 !important;
}

[data-theme="light"] .preference-description {
    color: #6c757d !important;
}

[data-theme="light"] .interest-item {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #495057 !important;
}

[data-theme="light"] .interest-item:hover {
    border-color: #2196f3 !important;
    background: rgba(33, 150, 243, 0.05) !important;
}

[data-theme="light"] .interest-item.selected {
    background: linear-gradient(135deg, #2196f3, #1976d2) !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
}

[data-theme="light"] .search-input {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .search-input:focus {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1) !important;
}

[data-theme="light"] .selected-count {
    color: #6c757d !important;
}

[data-theme="light"] .btn-secondary {
    background: #6c757d !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn-secondary:hover {
    background: #5a6268 !important;
    color: #ffffff !important;
}

[data-theme="light"] .btn-skip {
    color: #6c757d !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .btn-skip:hover {
    background: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .skip-link {
    color: #6c757d !important;
}

[data-theme="light"] .skip-link:hover {
    color: #212529 !important;
}

[data-theme="light"] small {
    color: #6c757d !important;
}

/* ========================================
   TWO-FACTOR SETUP PAGE THEME STYLING
======================================== */

/* QR Code Container - Light Mode */
[data-theme="light"] .qr-code-container {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .qr-code-help-text {
    color: #6c757d !important;
}

/* QR Code Container - Dark Mode */
html:not([data-theme]) .qr-code-container,
[data-theme="dark"] .qr-code-container {
    background: #ffffff !important;
    border: 1px solid #404040 !important;
}

html:not([data-theme]) .qr-code-help-text,
[data-theme="dark"] .qr-code-help-text {
    color: #6c757d !important;
}

/* Alert colors - Light Mode */
[data-theme="light"] .alert-custom {
    background: rgba(220, 53, 69, 0.1) !important;
    color: #721c24 !important;
}

[data-theme="light"] .alert-warning-custom {
    background: rgba(255, 193, 7, 0.1) !important;
    color: #856404 !important;
}

[data-theme="light"] .alert-success-custom {
    background: rgba(40, 167, 69, 0.1) !important;
    color: #155724 !important;
}

/* Alert colors - Dark Mode */
html:not([data-theme]) .alert-custom,
[data-theme="dark"] .alert-custom {
    background: rgba(220, 53, 69, 0.15) !important;
    color: #ff6b6b !important;
}

html:not([data-theme]) .alert-warning-custom,
[data-theme="dark"] .alert-warning-custom {
    background: rgba(255, 193, 7, 0.15) !important;
    color: #ffc107 !important;
}

html:not([data-theme]) .alert-success-custom,
[data-theme="dark"] .alert-success-custom {
    background: rgba(40, 167, 69, 0.15) !important;
    color: #6bcf7f !important;
}

[data-theme="light"] .btn-download:hover {
    background: #218838 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3) !important;
}

/* Button group */
[data-theme="light"] .btn-group {
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
    margin-top: 30px !important;
}

[data-theme="light"] .btn {
    padding: 12px 30px !important;
    border-radius: 25px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    border: none !important;
}

[data-theme="light"] .btn-secondary {
    background: #6c757d !important;
    color: white !important;
}

[data-theme="light"] .btn-secondary:hover {
    background: #5a6268 !important;
    color: white !important;
    text-decoration: none !important;
}

/* Alert styling */
[data-theme="light"] .alert-custom {
    background: rgba(220, 53, 69, 0.1) !important;
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
    color: #721c24 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

[data-theme="light"] .alert-success-custom {
    background: rgba(40, 167, 69, 0.1) !important;
    border: 1px solid rgba(40, 167, 69, 0.3) !important;
    color: #155724 !important;
}

[data-theme="light"] .alert-warning {
    background: rgba(255, 193, 7, 0.1) !important;
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
    color: #856404 !important;
}

/* Small text */
[data-theme="light"] small {
    color: #6c757d !important;
}

/* Mobile responsive for two-factor setup */
@media (max-width: 768px) {
    [data-theme="light"] .onboarding-card {
        padding: 30px 20px !important;
        margin: 10px !important;
    }
    
    [data-theme="light"] .btn-group {
        flex-direction: column !important;
    }
    
    [data-theme="light"] .btn {
        width: 100% !important;
    }
    
    [data-theme="light"] .secret-input-group {
        flex-direction: column !important;
    }
    
    [data-theme="light"] .secret-input-group button {
        border-radius: 0 0 8px 8px !important;
    }
}

/* ========================================
   TWO-FACTOR STATUS (SETTINGS PAGE) STYLING
======================================== */

/* Dark mode - Two-factor status base */
.two-factor-status {
    padding: 20px !important;
    border-radius: 10px !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
}

.two-factor-status.enabled {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(34, 139, 58, 0.15) 100%) !important;
    border: 1px solid rgba(40, 167, 69, 0.5) !important;
    color: #90ee90 !important;
}

.two-factor-status.disabled {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 234, 167, 0.15) 100%) !important;
    border: 1px solid rgba(255, 193, 7, 0.5) !important;
    color: #ffd700 !important;
}

.two-factor-status.not-eligible {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.15) 0%, rgba(190, 229, 235, 0.15) 100%) !important;
    border: 1px solid rgba(23, 162, 184, 0.5) !important;
    color: #87ceeb !important;
}

.two-factor-status .status-indicator {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: inherit !important;
}

.two-factor-status .status-indicator i {
    margin-right: 10px !important;
    font-size: 20px !important;
    color: inherit !important;
}

.two-factor-status .status-indicator strong {
    color: inherit !important;
    font-weight: 700 !important;
}

.two-factor-status .status-details {
    margin-bottom: 15px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    opacity: 0.9 !important;
    color: inherit !important;
}

.two-factor-status .two-factor-actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Light mode - Two-factor status */
[data-theme="light"] .two-factor-status {
    padding: 20px !important;
    border-radius: 10px !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .two-factor-status.enabled {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
    border: 1px solid #28a745 !important;
    color: #155724 !important;
}

[data-theme="light"] .two-factor-status.disabled {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
    border: 1px solid #ffc107 !important;
    color: #856404 !important;
}

[data-theme="light"] .two-factor-status.not-eligible {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%) !important;
    border: 1px solid #17a2b8 !important;
    color: #0c5460 !important;
}

[data-theme="light"] .two-factor-status .status-indicator {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: inherit !important;
}

[data-theme="light"] .two-factor-status .status-indicator i {
    margin-right: 10px !important;
    font-size: 20px !important;
    color: inherit !important;
}

[data-theme="light"] .two-factor-status .status-indicator strong {
    color: inherit !important;
    font-weight: 700 !important;
}

[data-theme="light"] .two-factor-status .status-details {
    margin-bottom: 15px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    opacity: 0.85 !important;
    color: inherit !important;
}

[data-theme="light"] .two-factor-status .two-factor-actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* ========================================
   ONBOARDING PREFERENCES TOGGLE SWITCH STYLING
======================================== */

/* Light mode - Toggle switch */
[data-theme="light"] .toggle-switch {
    position: relative !important;
    display: inline-block !important;
    width: 60px !important;
    height: 34px !important;
}

[data-theme="light"] .toggle-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

[data-theme="light"] .slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #ccc !important;
    transition: 0.4s !important;
    border-radius: 34px !important;
    border: 1px solid #bbb !important;
}

[data-theme="light"] .slider:before {
    position: absolute !important;
    content: "" !important;
    height: 26px !important;
    width: 26px !important;
    left: 4px !important;
    bottom: 3px !important;
    background-color: white !important;
    transition: 0.4s !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] input:checked + .slider {
    background-color: #2196f3 !important;
    border-color: #1976d2 !important;
}

[data-theme="light"] input:checked + .slider:before {
    transform: translateX(26px) !important;
}

[data-theme="light"] .slider:hover {
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.3) !important;
}

[data-theme="light"] input:checked + .slider:hover {
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.5) !important;
}

/* Dark mode - Toggle switch (base styles, should already work with CSS variables) */
.toggle-switch {
    position: relative !important;
    display: inline-block !important;
    width: 60px !important;
    height: 34px !important;
}

.toggle-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #404040 !important;
    transition: 0.4s !important;
    border-radius: 34px !important;
    border: 1px solid #555 !important;
}

.slider:before {
    position: absolute !important;
    content: "" !important;
    height: 26px !important;
    width: 26px !important;
    left: 4px !important;
    bottom: 3px !important;
    background-color: #ffffff !important;
    transition: 0.4s !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

input:checked + .slider {
    background-color: #2196f3 !important;
    border-color: #1976d2 !important;
}

input:checked + .slider:before {
    transform: translateX(26px) !important;
}

.slider:hover {
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.3) !important;
}

input:checked + .slider:hover {
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.5) !important;
}

/* ========================================
   EXPLORE PAGE LIGHT MODE STYLING
======================================== */

/* Main explore container */
[data-theme="light"] .explore-feed-container {
    background-color: #ffffff !important;
    min-height: 100vh !important;
    padding-top: 74px !important;
}

/* Explore header */
[data-theme="light"] .explore-header {
    background-color: #f8f9fa !important;
    padding: 4rem 0 3rem !important;
    margin-bottom: 2rem !important;
    position: relative !important;
    overflow: hidden !important;
}

[data-theme="light"] .explore-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(166, 22, 81, 0.1) 0%, rgba(1, 173, 241, 0.1) 100%) !important;
    z-index: 1 !important;
}

[data-theme="light"] .explore-header-content {
    text-align: center !important;
    color: #212529 !important;
    position: relative !important;
    z-index: 2 !important;
}

[data-theme="light"] .explore-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 3rem !important;
    font-weight: 400 !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    position: relative !important;
}

[data-theme="light"] .explore-title i {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-right: 0.5rem !important;
}

[data-theme="light"] .explore-subtitle {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.1rem !important;
    color: #6c757d !important;
    margin-bottom: 0 !important;
    opacity: 0.9 !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Filter tabs */
[data-theme="light"] .explore-filters {
    margin-bottom: 2rem !important;
}

[data-theme="light"] .filter-tabs {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    background: #f8f9fa !important;
    backdrop-filter: blur(10px) !important;
    padding: 1rem !important;
    border-radius: 15px !important;
    border: 1px solid rgba(166, 22, 81, 0.3) !important;
}

[data-theme="light"] .filter-tab {
    background: #ffffff !important;
    border: 2px solid rgba(166, 22, 81, 0.4) !important;
    color: #212529 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 25px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    font-size: 0.95rem !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-theme="light"] .filter-tab:hover {
    background: rgba(166, 22, 81, 0.1) !important;
    color: #212529 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(166, 22, 81, 0.3) !important;
    border-color: rgba(166, 22, 81, 0.6) !important;
}

[data-theme="light"] .filter-tab:focus {
    outline: 3px solid #2196f3 !important;
    outline-offset: 2px !important;
    background: rgba(166, 22, 81, 0.1) !important;
    color: #212529 !important;
}

[data-theme="light"] .filter-tab.loading {
    position: relative !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
}

[data-theme="light"] .filter-tab.loading::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 0.5rem !important;
    transform: translateY(-50%) !important;
    width: 12px !important;
    height: 12px !important;
    border: 2px solid rgba(33, 150, 243, 0.3) !important;
    border-top: 2px solid #2196f3 !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

[data-theme="light"] .filter-tab.active {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(166, 22, 81, 0.5) !important;
    border-color: transparent !important;
}

/* Explore content */
[data-theme="light"] .explore-content {
    padding-bottom: 3rem !important;
    background-color: #ffffff !important;
}

/* Loading spinner */
[data-theme="light"] .loading-spinner {
    text-align: center !important;
    padding: 3rem 2rem !important;
    color: #6c757d !important;
}

[data-theme="light"] .loading-spinner .spinner-border {
    width: 3rem !important;
    height: 3rem !important;
    border-width: 0.3rem !important;
    border-color: rgba(166, 22, 81, 0.3) !important;
    border-top-color: #A61651 !important;
    animation: spin 1s linear infinite !important;
}

[data-theme="light"] .loading-spinner .loading-text {
    margin-top: 1rem !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: #212529 !important;
}

/* Skeleton loading */
[data-theme="light"] .skeleton-loader {
    background: linear-gradient(90deg, #f8f9fa 25%, rgba(255, 255, 255, 0.5) 50%, #f8f9fa 75%) !important;
    background-size: 200px 100% !important;
    animation: skeleton-loading 1.5s infinite !important;
}

[data-theme="light"] .skeleton-card {
    background: #f8f9fa !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    height: 400px !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .skeleton-image {
    height: 250px !important;
    background: #f8f9fa !important;
}

[data-theme="light"] .skeleton-content {
    padding: 1.5rem !important;
}

[data-theme="light"] .skeleton-line {
    height: 1rem !important;
    margin-bottom: 0.5rem !important;
    border-radius: 4px !important;
}

/* Error message */
[data-theme="light"] .error-message {
    margin-bottom: 2rem !important;
}

[data-theme="light"] .error-message .alert {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

/* Empty state */
[data-theme="light"] .empty-state {
    text-align: center !important;
    padding: 4rem 2rem !important;
    color: #212529 !important;
}

[data-theme="light"] .empty-state-icon {
    font-size: 4rem !important;
    margin-bottom: 1rem !important;
    opacity: 0.7 !important;
    color: #6c757d !important;
}

[data-theme="light"] .empty-state h3 {
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
    color: #212529 !important;
}

[data-theme="light"] .empty-state p {
    margin-bottom: 2rem !important;
    opacity: 0.8 !important;
    color: #6c757d !important;
}

/* Creator cards grid */
[data-theme="light"] #creators-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Creator cards */
[data-theme="light"] .creator-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    border: 1px solid #dee2e6 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    padding: 0 !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .creator-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    border-color: #2196f3 !important;
}

[data-theme="light"] .creator-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}

[data-theme="light"] .creator-name-link {
    text-decoration: none !important;
    color: inherit !important;
}

[data-theme="light"] .creator-name-link:hover {
    text-decoration: none !important;
    color: inherit !important;
}

[data-theme="light"] .creator-image {
    position: relative !important;
    aspect-ratio: 3/4 !important;
    overflow: hidden !important;
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
}

[data-theme="light"] .creator-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

[data-theme="light"] .creator-card:hover .creator-image img {
    transform: scale(1.05) !important;
}

/* Responsive heights for creator images */
@media (max-width: 768px) {
    [data-theme="light"] .creator-image {
        height: 350px !important;
        min-height: 350px !important;
        max-height: 350px !important;
    }
}

@media (max-width: 480px) {
    [data-theme="light"] .creator-image {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }
}

/* Status badges */
[data-theme="light"] .status-badges {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    right: 1rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

[data-theme="light"] .badge {
    padding: 0.4rem 0.8rem !important;
    border-radius: 15px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

[data-theme="light"] .badge-live {
    background: #ff4757 !important;
    color: #ffffff !important;
    animation: pulse 2s infinite !important;
}

[data-theme="light"] .badge-top {
    background: #ffd93d !important;
    color: #000000 !important;
}

[data-theme="light"] .badge-new {
    background: #159a00 !important;
    color: #ffffff !important;
}

/* Creator info */
[data-theme="light"] .creator-info {
    padding: 1.5rem !important;
}

[data-theme="light"] .creator-name {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #212529 !important;
    margin-bottom: 0.5rem !important;
    text-decoration: none !important;
}

[data-theme="light"] .creator-status {
    color: #6c757d !important;
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important;
}

[data-theme="light"] .creator-price {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #2196f3 !important;
    margin-bottom: 1.5rem !important;
}

/* Creator actions */
[data-theme="light"] .creator-actions {
    display: flex !important;
    gap: 0.75rem !important;
}

[data-theme="light"] .btn-follow {
    background: rgba(33, 150, 243, 0.1) !important;
    border: 2px solid #2196f3 !important;
    color: #2196f3 !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    flex: 1 !important;
    transition: all 0.3s ease !important;
    min-height: 44px !important;
    cursor: pointer !important;
}

[data-theme="light"] .btn-follow:hover {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

[data-theme="light"] .btn-follow:focus {
    outline: 3px solid #2196f3 !important;
    outline-offset: 2px !important;
    background: #2196f3 !important;
    color: #ffffff !important;
}

/* Unfollow button - Light Mode */
[data-theme="light"] .btn-follow.unfollow-state,
[data-theme="light"] button.btn-follow.unfollow-state,
[data-theme="light"] .btn-follow[data-state="unfollow"],
[data-theme="light"] button.btn-follow[data-state="unfollow"] {
    background: rgba(220, 53, 69, 0.1) !important;
    border: 2px solid #dc3545 !important;
    color: #dc3545 !important;
}

[data-theme="light"] .btn-follow.unfollow-state:hover,
[data-theme="light"] button.btn-follow.unfollow-state:hover,
[data-theme="light"] .btn-follow[data-state="unfollow"]:hover,
[data-theme="light"] button.btn-follow[data-state="unfollow"]:hover {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

[data-theme="light"] .btn-message {
    background: #2196f3 !important;
    border: 2px solid #2196f3 !important;
    color: #ffffff !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    flex: 1 !important;
    transition: all 0.3s ease !important;
    min-height: 44px !important;
    cursor: pointer !important;
}

[data-theme="light"] .btn-message:hover {
    background: #1976d2 !important;
    border-color: #1976d2 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

[data-theme="light"] .btn-message:focus {
    outline: 3px solid #2196f3 !important;
    outline-offset: 2px !important;
    background: #29b6f6 !important;
}

/* Load more button */
[data-theme="light"] .load-more-container {
    text-align: center !important;
    margin: 2rem 0 !important;
}

[data-theme="light"] .load-more-btn {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 1rem 2rem !important;
    border-radius: 25px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .load-more-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(166, 22, 81, 0.3) !important;
    color: #ffffff !important;
}

/* Infinite scroll indicator */
[data-theme="light"] .infinite-scroll-indicator {
    text-align: center !important;
    padding: 1rem 0 !important;
    color: #212529 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Recommendation tooltip */
[data-theme="light"] .recommendation-tooltip {
    position: fixed !important;
    background: #ffffff !important;
    color: #212529 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    z-index: 1000 !important;
    pointer-events: none !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(166, 22, 81, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .tooltip-content {
    display: flex !important;
    align-items: center !important;
}

/* Custom scrollbar */
[data-theme="light"] ::-webkit-scrollbar {
    width: 8px !important;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f8f9fa !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(166, 22, 81, 0.5) !important;
    border-radius: 4px !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(166, 22, 81, 0.7) !important;
}

/* Mobile responsive for explore page */
@media (max-width: 1199px) {
    [data-theme="light"] #creators-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    [data-theme="light"] .explore-header {
        padding: 3rem 0 2rem !important;
    }
    
    [data-theme="light"] .explore-title {
        font-size: 2.2rem !important;
    }
    
    [data-theme="light"] .explore-subtitle {
        font-size: 1rem !important;
        padding: 0 1rem !important;
    }
    
    [data-theme="light"] #creators-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    [data-theme="light"] .explore-header {
        padding: 2rem 0 1.5rem !important;
    }
    
    [data-theme="light"] .explore-title {
        font-size: 1.8rem !important;
    }
    
    [data-theme="light"] .explore-subtitle {
        font-size: 0.95rem !important;
    }
    
    [data-theme="light"] #creators-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Dark mode overrides removed - preserve original dark styling */

/* ========================================
   THEME TOGGLE BUTTON
======================================== */

.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: var(--theme-gradient);
    color: white;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md);
    z-index: 1000;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    background: var(--theme-gradient-hover);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle i {
    font-size: 1.2rem !important;
    transition: transform var(--transition-normal) !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: white !important;
}

.theme-toggle:hover i {
    transform: rotate(180deg);
}

/* Theme Toggle Animation */
.theme-toggle.animating {
    animation: themeTogglePulse 0.6s ease-in-out;
}

@keyframes themeTogglePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ========================================
   THEME TRANSITION EFFECTS
======================================== */

* {
    transition: 
        background-color var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

/* Smooth transitions for theme changes */
body,
.navbar,
.card,
.btn,
.form-control,
.alert,
.modal-content,
.dropdown-menu {
    transition: 
        background-color var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

/* ========================================
   THEME-SPECIFIC COMPONENT STYLES
======================================== */

/* Navigation Bar */
.navbar {
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.navbar-brand,
.nav-link {
    color: var(--text-primary) !important;
}

.nav-link:hover {
    color: var(--theme-accent) !important;
}

/* Cards */
.card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.card-body {
    color: var(--text-primary);
}

/* Buttons */
.btn {
    transition: all var(--transition-normal);
}

.btn-primary {
    background: var(--theme-gradient);
    border: none;
}

.btn-primary:hover {
    background: var(--theme-gradient-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.btn-outline-primary {
    color: var(--theme-accent);
    border-color: var(--theme-accent);
}

.btn-outline-primary:hover {
    background-color: var(--theme-accent);
    border-color: var(--theme-accent);
}

/* Form Controls */
.form-control {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.form-control:focus {
    background-color: var(--bg-primary);
    border-color: var(--theme-accent);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.form-label {
    color: var(--text-primary);
}

/* Alerts */
.alert {
    border: 1px solid var(--border-color);
}

.alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.2);
    color: var(--text-primary);
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.2);
    color: var(--text-primary);
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.2);
    color: var(--text-primary);
}

.alert-info {
    background-color: rgba(13, 202, 240, 0.1);
    border-color: rgba(13, 202, 240, 0.2);
    color: var(--text-primary);
}

/* Modals */
.modal-content {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

/* Ensure user-profile-nav dropdown works in dark mode - override general rules */
[data-theme="dark"] .user-profile-nav .dropdown-menu {
    background-color: var(--bg-primary, #1a1a1a) !important;
    border: 1px solid var(--border-color, #333) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Tables */
.table {
    color: var(--text-primary);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--bg-secondary);
}

/* ========================================
   THEME TOGGLE POSITIONING
======================================== */

.theme-toggle-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 10001 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Ensure theme toggle is always visible and properly styled */
.theme-toggle {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    border: none !important;
    border-radius: 50% !important;
    background: var(--theme-gradient) !important;
    color: white !important;
    cursor: pointer !important;
    transition: all var(--transition-normal) !important;
    box-shadow: var(--shadow-md) !important;
    z-index: 1000 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    background: var(--theme-gradient-hover);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle i {
    font-size: 1.2rem;
    transition: transform var(--transition-normal);
}

.theme-toggle:hover i {
    transform: rotate(180deg);
}

/* Light mode theme toggle styling */
[data-theme="light"] .theme-toggle {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .theme-toggle:hover {
    background: linear-gradient(270deg, #8B1248 0%, #0198D4 100%);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Mobile positioning */
@media (max-width: 768px) {
    .theme-toggle-container {
        top: 10px;
        right: 10px;
    }
    
    .theme-toggle {
        width: 45px;
        height: 45px;
    }
    
    .theme-toggle i {
        font-size: 1rem;
    }
}

/* ========================================
   THEME LOADING STATES
======================================== */

.theme-loading {
    opacity: 0.7;
    pointer-events: none;
}

.theme-loading * {
    transition: none !important;
}

/* ========================================
   COVER PHOTO & PROFILE PICTURE SECTIONS
   Always Dark Mode Design
======================================== */

/* Cover Photo Section - Dark Mode with Custom Colors */
.mainSection.settings .coverPhoto {
    background: #1a1d29 !important;
    border: 1px solid #2d3142 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.mainSection.settings .coverPhoto h1 {
    color: #e8eaed !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

.mainSection.settings .coverPhoto img {
    width: 100% !important;
    max-height: 136px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    border: 1px solid #2d3142 !important;
}

.mainSection.settings .coverPhoto .title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #2d3142 !important;
    margin-bottom: 0 !important;
}

.mainSection.settings .coverPhoto .title h2 {
    color: #e8eaed !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.mainSection.settings .coverPhoto .title h2 span {
    color: #9aa0a6 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.mainSection.settings .coverPhoto .title button {
    background: #3c4043 !important;
    color: #e8eaed !important;
    border: 1px solid #5f6368 !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-left: 8px !important;
}

.mainSection.settings .coverPhoto .title button:hover {
    background: #5f6368 !important;
    border-color: #80868b !important;
    color: #e8eaed !important;
    transform: translateY(-1px) !important;
}

.mainSection.settings .coverPhoto .title button:last-child {
    background: #3c4043 !important;
    border-color: #5f6368 !important;
    color: #f28b82 !important;
}

.mainSection.settings .coverPhoto .title button:last-child:hover {
    background: #f28b82 !important;
    border-color: #f28b82 !important;
    color: #ffffff !important;
}

/* Profile Picture Section - Dark Mode with Custom Colors */
.mainSection.settings .pfp {
    background: #1a1d29 !important;
    border: 1px solid #2d3142 !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    line-height: normal !important;
}

.mainSection.settings .pfp img {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #e8eaed !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.mainSection.settings .pfp h2 {
    color: #e8eaed !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
    line-height: 1.4 !important;
}

.mainSection.settings .pfp h2 span {
    color: #9aa0a6 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.mainSection.settings .pfp button {
    background: #3c4043 !important;
    color: #e8eaed !important;
    border: 1px solid #5f6368 !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-left: 8px !important;
}

.mainSection.settings .pfp button:hover {
    background: #5f6368 !important;
    border-color: #80868b !important;
    color: #e8eaed !important;
    transform: translateY(-1px) !important;
}

.mainSection.settings .pfp button:last-child {
    background: #3c4043 !important;
    border-color: #5f6368 !important;
    color: #f28b82 !important;
}

.mainSection.settings .pfp button:last-child:hover {
    background: #f28b82 !important;
    border-color: #f28b82 !important;
    color: #ffffff !important;
}

/* Light Mode Override for Cover Photo Background and Text */
[data-theme="light"] .mainSection.settings .coverPhoto {
    background: #f8f9fa !important;
}

[data-theme="light"] .mainSection.settings .coverPhoto h1 {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.settings .coverPhoto .title h2 {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.settings .coverPhoto .title h2 span {
    color: #6c757d !important;
}

[data-theme="light"] .mainSection.settings .coverPhoto .title button {
    background: #e9ecef !important;
    color: #212529 !important;
    border: 1px solid #adb5bd !important;
}

[data-theme="light"] .mainSection.settings .coverPhoto .title button:hover {
    background: #dee2e6 !important;
    border-color: #6c757d !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.settings .coverPhoto .title button:last-child {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #dc3545 !important;
}

[data-theme="light"] .mainSection.settings .coverPhoto .title button:last-child:hover {
    background: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

/* Light Mode Override for Profile Picture Section */
[data-theme="light"] .mainSection.settings .pfp {
    background: #f8f9fa !important;
}

[data-theme="light"] .mainSection.settings .pfp h2 {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.settings .pfp h2 span {
    color: #6c757d !important;
}

[data-theme="light"] .mainSection.settings .pfp button {
    background: #e9ecef !important;
    color: #212529 !important;
    border: 1px solid #adb5bd !important;
}

[data-theme="light"] .mainSection.settings .pfp button:hover {
    background: #dee2e6 !important;
    border-color: #6c757d !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.settings .pfp button:last-child {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #dc3545 !important;
}

[data-theme="light"] .mainSection.settings .pfp button:last-child:hover {
    background: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

/* ========================================
   NOTIFICATIONS PAGE LIGHT MODE STYLING
======================================== */

/* Notifications Page - Light Mode */
[data-theme="light"] .mainSection.notifications {
    background: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.notifications h1 {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.notifications .notificationsContainer {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .mainSection.notifications .notification {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .mainSection.notifications .notification:hover {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .mainSection.notifications .notification.unread {
    background: #e3f2fd !important;
    border-color: #2196f3 !important;
    border-left: 4px solid #2196f3 !important;
}

[data-theme="light"] .mainSection.notifications .notification h2 {
    color: #212529 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

[data-theme="light"] .mainSection.notifications .notification h2 span {
    color: #6c757d !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    display: block !important;
    margin-top: 5px !important;
}

[data-theme="light"] .mainSection.notifications .notification .buttons {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

[data-theme="light"] .mainSection.notifications .notification .buttons button {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-theme="light"] .mainSection.notifications .notification .buttons button:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px) !important;
}

[data-theme="light"] .mainSection.notifications .notification .buttons button.star {
    background: #fff3cd !important;
    border-color: #ffc107 !important;
}

[data-theme="light"] .mainSection.notifications .notification .buttons button.star:hover {
    background: #ffeaa7 !important;
    border-color: #ffc107 !important;
}

[data-theme="light"] .mainSection.notifications .notification .buttons button img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

[data-theme="light"] .mainSection.notifications .notification .pfp {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #dee2e6 !important;
}

[data-theme="light"] .mainSection.notifications .notification input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #2196f3 !important;
}

/* Pagination - Light Mode */
[data-theme="light"] .mainSection.notifications .pagination .page-link {
    color: #2196f3 !important;
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    padding: 8px 12px !important;
    margin: 0 2px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .mainSection.notifications .pagination .page-link:hover {
    color: #ffffff !important;
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
    transform: translateY(-1px) !important;
}

[data-theme="light"] .mainSection.notifications .pagination .page-item.active .page-link {
    color: #ffffff !important;
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3) !important;
}

[data-theme="light"] .mainSection.notifications .pagination .page-item.disabled .page-link {
    color: #6c757d !important;
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed !important;
}

/* Empty State - Light Mode */
[data-theme="light"] .mainSection.notifications .text-center {
    color: #6c757d !important;
}

[data-theme="light"] .mainSection.notifications .text-center .h5 {
    color: #212529 !important;
    font-weight: 500 !important;
}

/* Search Bar - Light Mode */
[data-theme="light"] .mainSection.notifications .searchBar {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    margin-bottom: 20px !important;
}

[data-theme="light"] .mainSection.notifications .searchBar input {
    background: transparent !important;
    border: none !important;
    color: #212529 !important;
    outline: none !important;
}

[data-theme="light"] .mainSection.notifications .searchBar input::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .mainSection.notifications .searchBar button {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 8px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .mainSection.notifications .searchBar button:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
}

/* ========================================
   REFERRALS PAGE LIGHT MODE STYLING
======================================== */

/* Referrals Page - Light Mode */
[data-theme="light"] .mainSection.wallet.tablePages {
    background: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.wallet .mainFeed {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .mainSection.wallet .top h1.DashboardSecHeading {
    color: #212529 !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
}

/* Referral Code Section - Light Mode */
[data-theme="light"] .mainSection.wallet .referralCode {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .mainSection.wallet .referralCode h1 {
    color: #212529 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

[data-theme="light"] .mainSection.wallet .referralCode .code {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
}

[data-theme="light"] .mainSection.wallet .referralCode .code input {
    background: transparent !important;
    border: none !important;
    color: #212529 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    flex: 1 !important;
    outline: none !important;
}

[data-theme="light"] .mainSection.wallet .referralCode .code button {
    background: #2196f3 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .mainSection.wallet .referralCode .code button:hover {
    background: #1976d2 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3) !important;
}

/* Table Container - Light Mode */
[data-theme="light"] .mainSection.wallet .tableContainer {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer h1 {
    color: #212529 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
}

/* DataTable - Light Mode */
[data-theme="light"] .mainSection.wallet .tableContainer .table {
    background: #ffffff !important;
    color: #212529 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .table thead th {
    background: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    padding: 12px 15px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .table tbody td {
    background: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .table tbody tr:hover td {
    background: #f8f9fa !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .table tbody tr:nth-child(even) td {
    background: #fafbfc !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .table tbody tr:nth-child(even):hover td {
    background: #f0f1f2 !important;
}

/* DataTable Controls - Light Mode */
[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_wrapper {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_length label {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_length select {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_filter label {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_filter input {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_filter input:focus {
    border-color: #2196f3 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_info {
    color: #6c757d !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_paginate .paginate_button {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #2196f3 !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_paginate .paginate_button:hover {
    background: #2196f3 !important;
    color: #ffffff !important;
    border-color: #2196f3 !important;
    transform: translateY(-1px) !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_paginate .paginate_button.current {
    background: #2196f3 !important;
    color: #ffffff !important;
    border-color: #2196f3 !important;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3) !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_paginate .paginate_button.disabled {
    background: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed !important;
}

/* Search Bar - Light Mode */
[data-theme="light"] .mainSection.wallet .searchBar {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    margin-bottom: 20px !important;
}

[data-theme="light"] .mainSection.wallet .searchBar input {
    background: transparent !important;
    border: none !important;
    color: #212529 !important;
    outline: none !important;
}

[data-theme="light"] .mainSection.wallet .searchBar input::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .mainSection.wallet .searchBar button {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 8px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .mainSection.wallet .searchBar button:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
}

/* Mobile Header - Light Mode */
[data-theme="light"] .mainSection.wallet .mobileHeader {
    background: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
}

[data-theme="light"] .mainSection.wallet .mobileHeader .searchBar {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

/* ========================================
   SUBSCRIPTION ANALYTICS PAGE LIGHT MODE STYLING
======================================== */

/* Subscription Analytics Page - Light Mode */
[data-theme="light"] .mainSection.publicProfile.creatorView {
    background: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.publicProfile .mainFeed {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .subscription-analytics {
    background: #ffffff !important;
    color: #212529 !important;
    padding: 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Analytics Header - Light Mode */
[data-theme="light"] .analytics-header {
    background: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 20px !important;
    border-radius: 12px 12px 0 0 !important;
    margin-bottom: 30px !important;
}

[data-theme="light"] .analytics-header h1 {
    color: #212529 !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    text-shadow: none !important;
    letter-spacing: -0.5px !important;
}

/* Date Range Selector - Light Mode */
[data-theme="light"] .date-range-selector {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 15px !important;
}

[data-theme="light"] .date-range-selector label {
    color: #212529 !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-size: 15px !important;
    text-shadow: none !important;
    letter-spacing: 0.2px !important;
}

[data-theme="light"] .date-range-selector .form-control {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    text-shadow: none !important;
}

[data-theme="light"] .date-range-selector .form-control:focus {
    background: #ffffff !important;
    border-color: #2196f3 !important;
    color: #212529 !important;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25) !important;
    outline: none !important;
}

/* Buttons - Light Mode */
[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #2196f3, #1976d2) !important;
    border: none !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    padding: 14px 30px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    min-width: 140px !important;
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4) !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
}

[data-theme="light"] .btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.5) !important;
    background: linear-gradient(135deg, #1976d2, #1565c0) !important;
}

[data-theme="light"] .btn-success {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    border: none !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    padding: 14px 30px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    min-width: 140px !important;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4) !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
}

[data-theme="light"] .btn-success:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.5) !important;
    background: linear-gradient(135deg, #218838, #1ea085) !important;
}

/* Metrics Grid - Light Mode */
[data-theme="light"] .metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
}

[data-theme="light"] .metric-card {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 25px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    transition: transform 0.3s ease !important;
}

[data-theme="light"] .metric-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .metric-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
}

[data-theme="light"] .metric-content h3 {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #212529 !important;
    margin: 0 !important;
    text-shadow: none !important;
    letter-spacing: -0.5px !important;
}

[data-theme="light"] .metric-content p {
    color: #6c757d !important;
    margin: 8px 0 0 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

/* Charts Section - Light Mode */
[data-theme="light"] .charts-section {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 25px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .chart-container {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

[data-theme="light"] .chart-container h3 {
    color: #212529 !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    text-shadow: none !important;
    letter-spacing: -0.3px !important;
}

/* Plan Breakdown - Light Mode */
[data-theme="light"] .plan-breakdown {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 25px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .plan-breakdown h3 {
    color: #212529 !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    text-shadow: none !important;
    letter-spacing: -0.3px !important;
}

/* Table - Light Mode */
[data-theme="light"] .plan-breakdown .table {
    background: #ffffff !important;
    color: #212529 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

[data-theme="light"] .plan-breakdown .table thead th {
    background: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-shadow: none !important;
    padding: 15px 12px !important;
}

[data-theme="light"] .plan-breakdown .table tbody td {
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    padding: 12px !important;
    background: #ffffff !important;
}

[data-theme="light"] .plan-breakdown .table tbody tr:hover td {
    background: #f8f9fa !important;
}

[data-theme="light"] .plan-breakdown .table-striped tbody tr:nth-of-type(odd) {
    background: #fafbfc !important;
}

[data-theme="light"] .plan-breakdown .table-striped tbody tr:nth-of-type(odd) td {
    background: #fafbfc !important;
}

[data-theme="light"] .plan-breakdown .table-striped tbody tr:nth-of-type(odd):hover td {
    background: #f0f1f2 !important;
}

/* Mobile Header - Light Mode */
[data-theme="light"] .mainSection.publicProfile .mobileHeader {
    background: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
}

[data-theme="light"] .mainSection.publicProfile .mobileHeader .searchBar {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .mainSection.publicProfile .mobileHeader .searchBar input {
    background: transparent !important;
    border: none !important;
    color: #212529 !important;
    outline: none !important;
}

[data-theme="light"] .mainSection.publicProfile .mobileHeader .searchBar input::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .mainSection.publicProfile .mobileHeader .searchBar button {
    background: #e9ecef !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 8px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .mainSection.publicProfile .mobileHeader .searchBar button:hover {
    background: #dee2e6 !important;
    border-color: #adb5bd !important;
}

/* Responsive Design for Analytics */
@media (max-width: 768px) {
    [data-theme="light"] .analytics-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    
    [data-theme="light"] .date-range-selector {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    
    [data-theme="light"] .date-range-selector .form-group {
        width: 100% !important;
    }
    
    [data-theme="light"] .metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    [data-theme="light"] .btn-primary,
    [data-theme="light"] .btn-success {
        padding: 12px 25px !important;
        font-size: 14px !important;
        min-width: 120px !important;
    }
    
    [data-theme="light"] .metric-card {
        padding: 20px !important;
    }
    
    [data-theme="light"] .chart-container,
    [data-theme="light"] .plan-breakdown {
        padding: 20px !important;
    }
}

@media (max-width: 480px) {
    [data-theme="light"] .subscription-analytics {
        padding: 15px !important;
    }
    
    [data-theme="light"] .analytics-header h1 {
        font-size: 2rem !important;
        text-shadow: none !important;
    }
    
    [data-theme="light"] .metric-card {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
        padding: 20px 15px !important;
    }
    
    [data-theme="light"] .metric-icon {
        width: 50px !important;
        height: 50px !important;
    }
    
    [data-theme="light"] .metric-content h3 {
        font-size: 1.8rem !important;
        text-shadow: none !important;
    }
    
    [data-theme="light"] .metric-content p {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    
    [data-theme="light"] .btn-primary,
    [data-theme="light"] .btn-success {
        padding: 12px 24px !important;
        font-size: 14px !important;
        min-width: 120px !important;
        font-weight: 700 !important;
    }
    
    [data-theme="light"] .chart-container h3,
    [data-theme="light"] .plan-breakdown h3 {
        font-size: 1.4rem !important;
        text-shadow: none !important;
    }
    
    [data-theme="light"] .plan-breakdown .table th,
    [data-theme="light"] .plan-breakdown .table td {
        font-size: 13px !important;
        padding: 10px 8px !important;
    }
}

/* ========================================
   MY EARNINGS PAGE LIGHT MODE STYLING
======================================== */

/* My Earnings Page - Light Mode */
[data-theme="light"] .mainSection.wallet.tablePages {
    background: #f8f9fa !important;
    color: #212529 !important;
}

[data-theme="light"] .mainSection.wallet .mainFeed {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .mainSection.wallet .top h1.DashboardSecHeading {
    color: #212529 !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
}

/* Search Box - Light Mode */
[data-theme="light"] .mainSection.wallet .searchBox {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .search {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    margin-bottom: 15px !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .search input {
    background: transparent !important;
    border: none !important;
    color: #212529 !important;
    outline: none !important;
    font-size: 14px !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .search input::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .search img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

/* Filter Section - Light Mode */
[data-theme="light"] .mainSection.wallet .searchBox .filter {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    align-items: center !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .filter .tableSelect {
    position: relative !important;
    width: max-content !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .filter .tableSelect select {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 6px !important;
    padding: 8px 35px 8px 12px !important;
    font-size: 14px !important;
    appearance: none !important;
    cursor: pointer !important;
    min-width: 150px !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .filter .tableSelect select:focus {
    border-color: #2196f3 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .filter .tableSelect::after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236c757d"><path d="M7 10l5 5 5-5z"/></svg>') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 16px !important;
    width: 24px !important;
    height: 24px !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .filter .input {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .filter .input label {
    color: #212529 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .filter .input input[type="date"] {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    min-width: 150px !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .filter .input input[type="date"]:focus {
    border-color: #2196f3 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .filter button {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    align-self: flex-end !important;
    margin-top: 20px !important;
}

[data-theme="light"] .mainSection.wallet .searchBox .filter button:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px) !important;
}

/* Table Container - Light Mode */
[data-theme="light"] .mainSection.wallet .tableContainer {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* DataTable - Light Mode */
[data-theme="light"] .mainSection.wallet .tableContainer .table {
    background: #ffffff !important;
    color: #212529 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .table thead th {
    background: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    padding: 12px 15px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .table tbody td {
    background: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .table tbody tr:hover td {
    background: #f8f9fa !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .table tbody tr:nth-child(even) td {
    background: #fafbfc !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .table tbody tr:nth-child(even):hover td {
    background: #f0f1f2 !important;
}

/* DataTable Controls - Light Mode */
[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_wrapper {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_length label {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_length select {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_filter label {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_filter input {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_filter input:focus {
    border-color: #2196f3 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_info {
    color: #6c757d !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_paginate .paginate_button {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #2196f3 !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_paginate .paginate_button:hover {
    background: #2196f3 !important;
    color: #ffffff !important;
    border-color: #2196f3 !important;
    transform: translateY(-1px) !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_paginate .paginate_button.current {
    background: #2196f3 !important;
    color: #ffffff !important;
    border-color: #2196f3 !important;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3) !important;
}

[data-theme="light"] .mainSection.wallet .tableContainer .dataTables_paginate .paginate_button.disabled {
    background: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed !important;
}

/* Mobile Header - Light Mode */
[data-theme="light"] .mainSection.wallet .mobileHeader {
    background: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
}

[data-theme="light"] .mainSection.wallet .mobileHeader .searchBar {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .mainSection.wallet .mobileHeader .searchBar input {
    background: transparent !important;
    border: none !important;
    color: #212529 !important;
    outline: none !important;
}

[data-theme="light"] .mainSection.wallet .mobileHeader .searchBar input::placeholder {
    color: #6c757d !important;
}

[data-theme="light"] .mainSection.wallet .mobileHeader .searchBar button {
    background: #e9ecef !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 8px !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .mainSection.wallet .mobileHeader .searchBar button:hover {
    background: #dee2e6 !important;
    border-color: #adb5bd !important;
}

/* Dropdown Menu - Light Mode */
[data-theme="light"] .mainSection.wallet .mobileHeader .dropdownMenu {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .mainSection.wallet .mobileHeader .dropdownMenu a {
    color: #212529 !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    display: block !important;
    transition: background-color 0.3s ease !important;
}

[data-theme="light"] .mainSection.wallet .mobileHeader .dropdownMenu a:hover {
    background: #f8f9fa !important;
    color: #2196f3 !important;
}

/* Responsive Design for My Earnings */
@media (max-width: 768px) {
    [data-theme="light"] .mainSection.wallet .searchBox .filter {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    
    [data-theme="light"] .mainSection.wallet .searchBox .filter .tableSelect,
    [data-theme="light"] .mainSection.wallet .searchBox .filter .input {
        width: 100% !important;
    }
    
    [data-theme="light"] .mainSection.wallet .searchBox .filter .tableSelect select,
    [data-theme="light"] .mainSection.wallet .searchBox .filter .input input[type="date"] {
        width: 100% !important;
        min-width: auto !important;
    }
    
    [data-theme="light"] .mainSection.wallet .searchBox .filter button {
        align-self: stretch !important;
        margin-top: 10px !important;
    }
}

/* ========================================
   SEARCH RESULTS PAGE LIGHT MODE STYLING
======================================== */

/* Search Results Page - Light Mode */
[data-theme="light"] .mainSection.followers {
    background: #ffffff !important;
    color: #000000 !important;
}

[data-theme="light"] .mainSection.followers .top h1.DashboardSecHeading {
    color: #000000 !important;
}

[data-theme="light"] .mainSection.followers .followerCard h2 {
    color: #000000 !important;
}

[data-theme="light"] .mainSection.followers .followerCard h2 span {
    color: #666666 !important;
}

[data-theme="light"] .mainSection.followers .followerCard h2 small.text-muted {
    color: #666666 !important;
}

[data-theme="light"] .mainSection.followers .pagination a {
    color: #000000 !important;
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
}

[data-theme="light"] .mainSection.followers .pagination li.active a {
    background: #5D5D5D !important;
    color: #ffffff !important;
}

[data-theme="light"] .mainSection.followers .alert.alert-info {
    background: #e7f3ff !important;
    color: #0066cc !important;
}

[data-theme="light"] .mainSection.followers .mobileHeader .searchBar input {
    color: #000000 !important;
}

[data-theme="light"] .mainSection.followers .mobileHeader .searchBar input::placeholder {
    color: #666666 !important;
}

/* Search Results - Mobile Header Search Icon - Light Mode */
[data-theme="light"] .mainSection.followers .mobileHeader .searchBar button img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}

/* Search Results - Mobile Header Search Icon - Dark Mode */
[data-theme="dark"] .mainSection.followers .mobileHeader .searchBar button img {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}

/* General Mobile Header Search Icon - Light Mode */
[data-theme="light"] .mobileHeader .searchBar button[type="submit"] img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}

/* General Mobile Header Search Icon - Dark Mode (already exists, but ensure completeness) */
[data-theme="dark"] .mobileHeader .searchBar button[type="submit"] img {
    width: 18px !important;
    height: 18px !important;
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    object-fit: contain !important;
}

[data-theme="light"] .mainSection.followers .mobileHeader .dropdownMenu {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
}

[data-theme="light"] .mainSection.followers .mobileHeader .dropdownMenu a {
    color: #000000 !important;
}

/* Search Results - Followers Container - Dark Mode (Default) */
.mainSection.followers .followersContainer {
    background: transparent !important;
}

/* Search Results - Followers Container - Light Mode */
[data-theme="light"] .mainSection.followers .followersContainer {
    background: transparent !important;
}

/* Search Results - Follower Card - Dark Mode (Default) */
.mainSection.followers .followersContainer .followerCard {
    background: #0E1012 !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.mainSection.followers .followersContainer .followerCard:hover {
    background: #15191C !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Search Results - Follower Card - Light Mode */
[data-theme="light"] .mainSection.followers .followersContainer .followerCard {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .mainSection.followers .followersContainer .followerCard:hover {
    background: #f8f9fa !important;
    border-color: #01ADF1 !important;
    box-shadow: 0 4px 12px rgba(1, 173, 241, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Search Results - Follower Card Image - Dark Mode (Default) */
.mainSection.followers .followersContainer .followerCard img {
    border: 2px solid #A61651 !important;
    background: #1a1a1a !important;
}

/* Search Results - Follower Card Image - Light Mode */
[data-theme="light"] .mainSection.followers .followersContainer .followerCard img {
    border: 2px solid #A61651 !important;
    background: #f8f9fa !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Search Results - Follower Card Heading - Dark Mode (Default) */
.mainSection.followers .followersContainer .followerCard h2 {
    color: #ffffff !important;
}

.mainSection.followers .followersContainer .followerCard h2 span {
    color: #5D5D5D !important;
}

/* Search Results - Follower Card Heading - Light Mode (already exists, but ensure it's correct) */
[data-theme="light"] .mainSection.followers .followersContainer .followerCard h2 {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.followers .followersContainer .followerCard h2 span {
    color: #6c757d !important;
}

/* Search Results - Follower Card Link/Button - Dark Mode (Default) */
.mainSection.followers .followersContainer .followerCard a {
    color: #ffffff !important;
    border: none !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.mainSection.followers .followersContainer .followerCard a:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(166, 22, 81, 0.4) !important;
    opacity: 0.9 !important;
}

/* Search Results - Follower Card Link/Button - Light Mode */
[data-theme="light"] .mainSection.followers .followersContainer .followerCard a {
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .mainSection.followers .followersContainer .followerCard a:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(166, 22, 81, 0.4) !important;
    opacity: 0.9 !important;
}

/* Search Results - Pagination - Dark Mode (Default) */
.mainSection.followers .pagination {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.mainSection.followers .pagination a {
    padding: 7.5px 11px !important;
    font-size: 10px !important;
    color: #ffffff !important;
    border: 0.5px solid #5D5D5D !important;
    background: transparent !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.mainSection.followers .pagination a:hover {
    background: rgba(93, 93, 93, 0.3) !important;
    border-color: #01ADF1 !important;
}

.mainSection.followers .pagination li.active a {
    background: #5D5D5D !important;
    color: #ffffff !important;
    border-color: #5D5D5D !important;
}

/* Search Results - Pagination - Light Mode (already exists, but ensure consistency) */
[data-theme="light"] .mainSection.followers .pagination a {
    color: #212529 !important;
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
}

[data-theme="light"] .mainSection.followers .pagination a:hover {
    background: #f8f9fa !important;
    border-color: #01ADF1 !important;
    color: #01ADF1 !important;
}

[data-theme="light"] .mainSection.followers .pagination li.active a {
    background: #5D5D5D !important;
    color: #ffffff !important;
    border-color: #5D5D5D !important;
}

/* Search Results - Alert/No Results - Dark Mode (Default) */
.mainSection.followers .alert.alert-info {
    background: rgba(1, 173, 241, 0.1) !important;
    color: #01ADF1 !important;
    border: 1px solid rgba(1, 173, 241, 0.3) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
}

/* Search Results - Alert/No Results - Light Mode (already exists, but ensure consistency) */
[data-theme="light"] .mainSection.followers .alert.alert-info {
    background: #e7f3ff !important;
    color: #0066cc !important;
    border: 1px solid #b3d9ff !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
}

/* Responsive Design for Cover Photo & Profile Picture */
@media (max-width: 768px) {
    .mainSection.settings .coverPhoto .title {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .mainSection.settings .coverPhoto .title button {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .mainSection.settings .pfp {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    
    .mainSection.settings .pfp button {
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: 10px !important;
    }
}

/* ========================================
   SETTINGS THEME TOGGLE STYLING
======================================== */

.settings-theme-toggle {
    margin: 20px 0;
}

.theme-toggle-section h3 {
    color: white;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}

.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
}

.theme-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    margin: 0;
}

.theme-label-text {
    color: white;
    font-size: 16px;
    font-weight: 500;
    margin-right: 15px;
}

.theme-toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.theme-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
    transition: 0.3s;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-checkbox:checked + .theme-slider {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
}

.theme-checkbox:checked + .theme-slider:before {
    transform: translateX(30px);
}

/* ========================================
   MARKETPLACE PAGE THEME STYLING
======================================== */

/* Dark Mode (Default) Marketplace Styles */
.marketplace-container {
    background: #1a1a1a !important;
}

.marketplace-header {
    background: #1a1a1a !important;
}

.marketplace-nav-tabs {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: rgba(166, 22, 81, 0.3) !important;
}

.marketplace-stats {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
}

.category-card {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
}

.category-card h3 {
    color: #ffffff !important;
}

.category-card p {
    color: #b0b0b0 !important;
}

.category-count {
    background: rgba(26, 26, 26, 0.8) !important;
    color: #b0b0b0 !important;
}

.products-section {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
}

.section-title {
    color: #ffffff !important;
}

.product-card {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
}

.product-title {
    color: #ffffff !important;
}

.product-price {
    color: #2196f3 !important;
}

.bid-count {
    color: #b0b0b0 !important;
}

.time-remaining {
    color: #ffffff !important;
}

.product-meta {
    border-top-color: #404040 !important;
}

.no-products {
    color: #b0b0b0 !important;
}

/* Light Mode Marketplace Styles */
[data-theme="light"] .marketplace-container {
    background: #f8f9fa !important;
}

[data-theme="light"] .marketplace-header {
    background: #f8f9fa !important;
}

[data-theme="light"] .marketplace-nav-tabs {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .nav-tab {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .marketplace-stats {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .stat-item {
    color: #212529 !important;
}

[data-theme="light"] .category-card {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .category-card h3 {
    color: #212529 !important;
}

[data-theme="light"] .category-card p {
    color: #6c757d !important;
}

[data-theme="light"] .category-count {
    background: #f8f9fa !important;
    color: #6c757d !important;
}

[data-theme="light"] .products-section {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .section-title {
    color: #212529 !important;
}

[data-theme="light"] .product-card {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .product-title {
    color: #212529 !important;
}

[data-theme="light"] .product-price {
    color: #2196f3 !important;
}

[data-theme="light"] .bid-count {
    color: #6c757d !important;
}

[data-theme="light"] .time-remaining {
    color: #212529 !important;
}

[data-theme="light"] .product-meta {
    border-top-color: #dee2e6 !important;
}

[data-theme="light"] .no-products {
    color: #6c757d !important;
}

/* ========================================
   MARKETPLACE CREATE PAGE THEME STYLING
======================================== */

/* Dark Mode (Default) Marketplace Create Styles */
.create-marketplace-container {
    background: #1a1a1a !important;
}

.create-form-card {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
}

.create-header h1 {
    color: #ffffff !important;
}

.create-header p {
    color: #b0b0b0 !important;
}

.form-group label {
    color: #ffffff !important;
}

.form-control {
    background: rgba(26, 26, 26, 0.8) !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.form-control:focus {
    border-color: var(--theme-accent, #2196f3) !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2) !important;
}

.form-control::placeholder {
    color: #666666 !important;
}

.image-upload-area {
    border-color: #404040 !important;
    background: rgba(26, 26, 26, 0.8) !important;
}

.image-upload-area h5 {
    color: #ffffff !important;
}

.image-upload-area p {
    color: #b0b0b0 !important;
}

.category-option {
    background: rgba(26, 26, 26, 0.8) !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.category-option:hover {
    border-color: var(--theme-accent, #2196f3) !important;
    background: rgba(33, 150, 243, 0.1) !important;
}

.category-option.selected {
    background: var(--theme-gradient) !important;
    border-color: var(--theme-accent, #2196f3) !important;
    color: #ffffff !important;
}

.condition-option {
    background: rgba(26, 26, 26, 0.8) !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.condition-option:hover {
    border-color: var(--theme-accent, #2196f3) !important;
    background: rgba(33, 150, 243, 0.1) !important;
}

.condition-option.selected {
    background: var(--theme-gradient) !important;
    border-color: var(--theme-accent, #2196f3) !important;
    color: #ffffff !important;
}

/* Light Mode Marketplace Create Styles */
[data-theme="light"] .create-marketplace-container {
    background: #f8f9fa !important;
}

[data-theme="light"] .create-form-card {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .create-header h1 {
    color: #212529 !important;
}

[data-theme="light"] .create-header p {
    color: #6c757d !important;
}

[data-theme="light"] .form-group label {
    color: #212529 !important;
}

[data-theme="light"] .form-control {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .form-control:focus {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1) !important;
}

[data-theme="light"] .form-control::placeholder {
    color: #adb5bd !important;
}

[data-theme="light"] .image-upload-area {
    border-color: #dee2e6 !important;
    background: #f8f9fa !important;
}

[data-theme="light"] .image-upload-area h5 {
    color: #212529 !important;
}

[data-theme="light"] .image-upload-area p {
    color: #6c757d !important;
}

[data-theme="light"] .category-option {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .category-option:hover {
    border-color: #2196f3 !important;
    background: rgba(33, 150, 243, 0.05) !important;
}

[data-theme="light"] .category-option.selected {
    background: linear-gradient(135deg, #2196f3, #1976d2) !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
}

[data-theme="light"] .condition-option {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .condition-option:hover {
    border-color: #2196f3 !important;
    background: rgba(33, 150, 243, 0.05) !important;
}

[data-theme="light"] .condition-option.selected {
    background: linear-gradient(135deg, #2196f3, #1976d2) !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
}

/* Form select elements - Dark Mode */
select.form-control {
    background: rgba(26, 26, 26, 0.8) !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

select.form-control option {
    background: #2a2a2a !important;
    color: #ffffff !important;
}

/* Form select elements - Light Mode */
[data-theme="light"] select.form-control {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] select.form-control option {
    background: #ffffff !important;
    color: #212529 !important;
}

/* ========================================
   MARKETPLACE MY-LISTINGS PAGE THEME STYLING
======================================== */

/* Dark Mode (Default) My-Listings Styles */
.my-listings-container {
    background: #1a1a1a !important;
}

.listings-card {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
}

.listings-card h2 {
    color: #ffffff !important;
}

.listings-header h1 {
    color: #ffffff !important;
}

.listings-header p {
    color: #b0b0b0 !important;
}

.listings-stats {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
}

.stat-item {
    color: #ffffff !important;
}

.product-card {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
}

.product-title {
    color: #ffffff !important;
}

.product-description {
    color: #b0b0b0 !important;
}

.product-price {
    color: #2196f3 !important;
}

.product-meta {
    border-top-color: #404040 !important;
}

.bid-count {
    color: #b0b0b0 !important;
}

.time-remaining {
    color: #ffffff !important;
}

.product-footer {
    border-top-color: #404040 !important;
}

.created-date {
    color: #b0b0b0 !important;
}

.no-listings {
    color: #b0b0b0 !important;
}

.no-listings i {
    color: #666666 !important;
}

.no-listings h3 {
    color: #ffffff !important;
}

.no-listings p {
    color: #b0b0b0 !important;
}

/* Status badges - Dark Mode */
.status-active {
    background: rgba(40, 167, 69, 0.2) !important;
    color: #6bcf7f !important;
}

.status-expired {
    background: rgba(220, 53, 69, 0.2) !important;
    color: #ff6b6b !important;
}

.status-sold {
    background: rgba(23, 162, 184, 0.2) !important;
    color: #6bc9e5 !important;
}

.status-draft {
    background: rgba(108, 117, 125, 0.2) !important;
    color: #b0b0b0 !important;
}

/* Light Mode My-Listings Styles */
[data-theme="light"] .my-listings-container {
    background: #f8f9fa !important;
}

[data-theme="light"] .listings-card {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .listings-card h2 {
    color: #212529 !important;
}

[data-theme="light"] .listings-header h1 {
    color: #212529 !important;
}

[data-theme="light"] .listings-header p {
    color: #6c757d !important;
}

[data-theme="light"] .listings-stats {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .stat-item {
    color: #212529 !important;
}

[data-theme="light"] .product-card {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .product-title {
    color: #212529 !important;
}

[data-theme="light"] .product-description {
    color: #6c757d !important;
}

[data-theme="light"] .product-price {
    color: #2196f3 !important;
}

[data-theme="light"] .product-meta {
    border-top-color: #dee2e6 !important;
}

[data-theme="light"] .bid-count {
    color: #6c757d !important;
}

[data-theme="light"] .time-remaining {
    color: #212529 !important;
}

[data-theme="light"] .product-footer {
    border-top-color: #dee2e6 !important;
}

[data-theme="light"] .created-date {
    color: #6c757d !important;
}

[data-theme="light"] .no-listings {
    color: #6c757d !important;
}

[data-theme="light"] .no-listings i {
    color: #adb5bd !important;
}

[data-theme="light"] .no-listings h3 {
    color: #212529 !important;
}

[data-theme="light"] .no-listings p {
    color: #6c757d !important;
}

/* Status badges - Light Mode */
[data-theme="light"] .status-active {
    background: #d4edda !important;
    color: #155724 !important;
}

[data-theme="light"] .status-expired {
    background: #f8d7da !important;
    color: #721c24 !important;
}

[data-theme="light"] .status-sold {
    background: #d1ecf1 !important;
    color: #0c5460 !important;
}

[data-theme="light"] .status-draft {
    background: #e2e3e5 !important;
    color: #383d41 !important;
}

/* ========================================
   MARKETPLACE MY-BIDS PAGE THEME STYLING
======================================== */

/* Dark Mode (Default) My-Bids Styles */
.my-bids-container {
    background: #1a1a1a !important;
}

.bids-card {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
}

.bids-card h2 {
    color: #ffffff !important;
}

.bids-header h1 {
    color: #ffffff !important;
}

.bids-header p {
    color: #b0b0b0 !important;
}

.bids-stats {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
}

.stat-item {
    color: #ffffff !important;
}

.stat-item h3 {
    color: #ffffff !important;
}

.stat-item p {
    color: #b0b0b0 !important;
}

.bid-item {
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: #404040 !important;
}

.bid-item.winning {
    border-color: #ffc107 !important;
    background: rgba(255, 193, 7, 0.1) !important;
}

.bid-item.outbid {
    border-color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.1) !important;
}

.product-title {
    color: #ffffff !important;
}

.product-category {
    color: #b0b0b0 !important;
}

.bid-amount {
    color: #2196f3 !important;
}

.bid-status {
    border-top-color: #404040 !important;
}

.bid-time {
    color: #b0b0b0 !important;
}

.no-bids {
    color: #b0b0b0 !important;
}

.no-bids i {
    color: #666666 !important;
}

.no-bids h3 {
    color: #ffffff !important;
}

.no-bids p {
    color: #b0b0b0 !important;
}

/* Status badges - Dark Mode */
.status-winning {
    background: rgba(40, 167, 69, 0.2) !important;
    color: #6bcf7f !important;
}

.status-outbid {
    background: rgba(220, 53, 69, 0.2) !important;
    color: #ff6b6b !important;
}

.status-active {
    background: rgba(23, 162, 184, 0.2) !important;
    color: #6bc9e5 !important;
}

/* Light Mode My-Bids Styles */
[data-theme="light"] .my-bids-container {
    background: #f8f9fa !important;
}

[data-theme="light"] .bids-card {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .bids-card h2 {
    color: #212529 !important;
}

[data-theme="light"] .bids-header h1 {
    color: #212529 !important;
}

[data-theme="light"] .bids-header p {
    color: #6c757d !important;
}

[data-theme="light"] .bids-stats {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .stat-item {
    color: #212529 !important;
}

[data-theme="light"] .stat-item h3 {
    color: #212529 !important;
}

[data-theme="light"] .stat-item p {
    color: #6c757d !important;
}

[data-theme="light"] .bid-item {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

[data-theme="light"] .bid-item.winning {
    border-color: #ffc107 !important;
    background: #fffbf0 !important;
}

[data-theme="light"] .bid-item.outbid {
    border-color: #e74c3c !important;
    background: #fdf2f2 !important;
}

[data-theme="light"] .product-title {
    color: #212529 !important;
}

[data-theme="light"] .product-category {
    color: #6c757d !important;
}

[data-theme="light"] .bid-amount {
    color: #2196f3 !important;
}

[data-theme="light"] .bid-status {
    border-top-color: #dee2e6 !important;
}

[data-theme="light"] .bid-time {
    color: #6c757d !important;
}

[data-theme="light"] .no-bids {
    color: #6c757d !important;
}

[data-theme="light"] .no-bids i {
    color: #adb5bd !important;
}

[data-theme="light"] .no-bids h3 {
    color: #212529 !important;
}

[data-theme="light"] .no-bids p {
    color: #6c757d !important;
}

/* Status badges - Light Mode */
[data-theme="light"] .status-winning {
    background: #d4edda !important;
    color: #155724 !important;
}

[data-theme="light"] .status-outbid {
    background: #f8d7da !important;
    color: #721c24 !important;
}

[data-theme="light"] .status-active {
    background: #d1ecf1 !important;
    color: #0c5460 !important;
}

.theme-icon {
    color: white;
    font-size: 12px;
    z-index: 2;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    transition: left 0.3s ease;
}

.theme-checkbox:checked + .theme-slider .theme-icon {
    left: 45px;
}

.theme-description {
    color: #b0b0b0;
    font-size: 14px;
    margin: 0;
    font-style: italic;
}

/* Light mode theme toggle styling */
[data-theme="light"] .theme-toggle-section h3 {
    color: #212529;
}

[data-theme="light"] .theme-toggle-wrapper {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}

[data-theme="light"] .theme-label-text {
    color: #212529;
}

[data-theme="light"] .theme-description {
    color: #6c757d;
}

/* ========================================
   DATERANGEPICKER THEME STYLING
======================================== */

/* Global daterangepicker theme support */
.daterangepicker {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
}

.daterangepicker .drp-calendar {
    background-color: var(--bg-primary) !important;
}

.daterangepicker .drp-calendar.left {
    border-right: 1px solid var(--border-color) !important;
}

.daterangepicker .drp-calendar.right {
    border-left: 1px solid var(--border-color) !important;
}

.daterangepicker .calendar-table thead tr th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.daterangepicker .calendar-table tbody tr td {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.daterangepicker .calendar-table tbody tr td:hover {
    background-color: var(--bg-secondary) !important;
}

.daterangepicker .calendar-table tbody tr td.available {
    color: var(--text-primary) !important;
}

.daterangepicker .calendar-table tbody tr td.active {
    background-color: var(--theme-accent) !important;
    color: white !important;
}

.daterangepicker .calendar-table tbody tr td.in-range {
    background-color: var(--theme-accent) !important;
    color: white !important;
}

.daterangepicker .calendar-table tbody tr td.start-date,
.daterangepicker .calendar-table tbody tr td.end-date {
    background-color: var(--theme-accent) !important;
    color: white !important;
}

.daterangepicker .calendar-table tbody tr td.today {
    background-color: var(--theme-accent) !important;
    color: white !important;
}

.daterangepicker .calendar-table tbody tr td.off {
    background-color: var(--bg-primary) !important;
    color: var(--text-muted) !important;
}

.daterangepicker .calendar-table tbody tr td.disabled {
    background-color: var(--bg-primary) !important;
    color: var(--text-muted) !important;
}

.daterangepicker .calendar-table tbody tr td.week {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.daterangepicker select.monthselect option,
.daterangepicker select.yearselect option {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.daterangepicker .drp-buttons {
    background-color: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
}

.daterangepicker .drp-buttons .btn {
    background-color: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
    color: white !important;
}

.daterangepicker .drp-buttons .btn:hover {
    background-color: var(--theme-accent-hover) !important;
    border-color: var(--theme-accent-hover) !important;
}

.daterangepicker .drp-calendar .calendar-table .month,
.daterangepicker .drp-calendar .calendar-table .year {
    color: var(--text-primary) !important;
}

/* Remove focus from carousel and gallery navigation buttons */
.carousel-control-prev:focus,
.carousel-control-next:focus,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible,
.gallery-section .arrows button:focus,
.gallery-section .arrows button.prev:focus,
.gallery-section .arrows button.next:focus,
.gallery-section .arrows button:focus-visible,
.gallery-section .arrows button.prev:focus-visible,
.gallery-section .arrows button.next:focus-visible,
button.prev:focus,
button.next:focus,
button.prev:focus-visible,
button.next:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.daterangepicker .drp-calendar .calendar-table .prev,
.daterangepicker .drp-calendar .calendar-table .next {
    color: var(--text-primary) !important;
}

.daterangepicker .drp-calendar .calendar-table .prev:hover,
.daterangepicker .drp-calendar .calendar-table .next:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--theme-accent) !important;
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
======================================== */

.theme-toggle:focus,
.theme-toggle:focus-visible,
.theme-toggle:active,
.theme-toggle:active:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
    min-width: auto !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ========================================
   SIDEBAR ICONS LIGHT MODE STYLING
======================================== */

/* Sidebar icons visibility in light mode */
[data-theme="light"] .sidebar a i {
    color: #6c757d !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1.1rem !important;
}

[data-theme="light"] .sidebar a:hover i {
    color: #212529 !important;
    opacity: 1 !important;
}

[data-theme="light"] .sidebar a.active i {
    color: #2196f3 !important;
    opacity: 1 !important;
}

/* Nav item icons in light mode */
[data-theme="light"] .nav-item i {
    color: #6c757d !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1rem !important;
}

[data-theme="light"] .nav-item:hover i {
    color: #212529 !important;
    opacity: 1 !important;
}

[data-theme="light"] .nav-item.active i {
    color: #2196f3 !important;
    opacity: 1 !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --theme-border: #000000;
        --theme-shadow: rgba(0, 0, 0, 0.5);
    }
    
    [data-theme="dark"] {
        --theme-border: #ffffff;
        --theme-shadow: rgba(255, 255, 255, 0.3);
    }
}

/* Dark theme card variables */
[data-theme="dark"] {
    --card-bg: #2a2a2a;
    --card-border: #404040;
    --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* ULTIMATE OVERRIDE: Force ALL sidebar icons to be visible in light mode */
[data-theme="light"] .sidebar a img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    filter: grayscale(100%) brightness(0.7) contrast(1.2) !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    z-index: 999 !important;
}

/* Hide only duplicate icons (keep first one visible) */
[data-theme="light"] .sidebar a img:not(:first-child) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Ensure first icon is always visible with maximum specificity */
[data-theme="light"] .sidebar a img:first-child {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    filter: none !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    z-index: 999 !important;
}

/* ULTIMATE OVERRIDE: Force ALL sidebar nav item icons to be visible in light mode */
[data-theme="light"] .nav-item i {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    filter: none !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    z-index: 999 !important;
    color: #6c757d !important;
    font-size: 20px !important;
    text-align: center !important;
}

/* Hide only duplicate nav item icons (keep first one visible) */
[data-theme="light"] .nav-item i:not(:first-child) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Ensure first nav item icon is always visible */
[data-theme="light"] .nav-item i:first-child {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    filter: none !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    z-index: 999 !important;
    color: #6c757d !important;
    font-size: 20px !important;
    text-align: center !important;
}

/* Note: Feature icon styles are defined at the top of this file (lines 385-505) */
/* This section intentionally left blank to avoid duplicates */

/* ========================================
   SPINNER THEME SUPPORT - LIGHT & DARK MODE
   ======================================== */

/* Base Spinner - Dark Mode (Default) */
.spinner-border,
.spinner-grow {
    color: #2196f3 !important;
    transition: border-color 0.3s ease, color 0.3s ease;
    border-radius: 50% !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    vertical-align: -0.125em !important;
    border: 0.35em solid #2196f3 !important;
    border-right-color: transparent !important;
    animation: spinner-border 0.75s linear infinite !important;
}

/* Base Spinner - Light Mode */
[data-theme="light"] .spinner-border,
[data-theme="light"] .spinner-grow {
    color: #2196f3 !important;
    border-color: #2196f3 !important;
    border-radius: 50% !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    vertical-align: -0.125em !important;
    border: 0.35em solid #2196f3 !important;
    border-right-color: transparent !important;
    animation: spinner-border 0.75s linear infinite !important;
}

/* Spinner with text-primary class */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: #2196f3 !important;
    border-color: #2196f3 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
    border: 0.35em solid #2196f3 !important;
    border-right-color: transparent !important;
    animation: spinner-border 0.75s linear infinite !important;
}

[data-theme="light"] .spinner-border.text-primary,
[data-theme="light"] .spinner-grow.text-primary {
    color: #2196f3 !important;
    border-color: #2196f3 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
    border: 0.35em solid #2196f3 !important;
    border-right-color: transparent !important;
    animation: spinner-border 0.75s linear infinite !important;
}

/* Small Spinner */
.spinner-border-sm {
    color: #2196f3 !important;
    border-color: #2196f3 !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    width: 2rem !important;
    height: 2rem !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    border: 0.3em solid #2196f3 !important;
    border-right-color: transparent !important;
    animation: spinner-border 0.75s linear infinite !important;
}

[data-theme="light"] .spinner-border-sm {
    color: #2196f3 !important;
    border-color: #2196f3 !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    width: 2rem !important;
    height: 2rem !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    border: 0.3em solid #2196f3 !important;
    border-right-color: transparent !important;
    animation: spinner-border 0.75s linear infinite !important;
}

[data-theme="light"] .spinner-border-sm.text-primary {
    color: #2196f3 !important;
    border-color: #2196f3 !important;
    border-right-color: transparent !important;
}

/* Spinner in processing containers */
.video-processing-container .spinner-border,
.processing-content .spinner-border {
    color: #2196f3 !important;
    border-color: #2196f3 !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
    border: 0.35em solid #2196f3 !important;
    border-right-color: transparent !important;
    animation: spinner-border 0.75s linear infinite !important;
}

[data-theme="light"] .video-processing-container .spinner-border,
[data-theme="light"] .processing-content .spinner-border {
    color: #2196f3 !important;
    border-color: #2196f3 !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
    border: 0.35em solid #2196f3 !important;
    border-right-color: transparent !important;
    animation: spinner-border 0.75s linear infinite !important;
}

/* Spinner in loading containers */
.loading-spinner .spinner-border,
.loading-content .spinner-border {
    color: #2196f3 !important;
    border-color: #2196f3 !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
}

[data-theme="light"] .loading-spinner .spinner-border,
[data-theme="light"] .loading-content .spinner-border {
    color: #2196f3 !important;
    border-color: #2196f3 !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
}

/* Spinner in dark backgrounds - ensure visibility */
.processing-content.text-white .spinner-border,
.text-white .spinner-border {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-right-color: transparent !important;
}

[data-theme="light"] .processing-content.text-white .spinner-border,
[data-theme="light"] .text-white .spinner-border {
    color: #2196f3 !important;
    border-color: #2196f3 !important;
    border-right-color: transparent !important;
}

/* Spinner in buttons */
.btn .spinner-border,
.btn .spinner-border-sm {
    color: currentColor !important;
}

[data-theme="light"] .btn .spinner-border,
[data-theme="light"] .btn .spinner-border-sm {
    color: currentColor !important;
}

/* Spinner grow variants */
[data-theme="light"] .spinner-grow {
    background-color: #2196f3 !important;
    border-radius: 50% !important;
    width: 2rem !important;
    height: 2rem !important;
    box-sizing: border-box !important;
}

[data-theme="dark"] .spinner-grow,
html:not([data-theme]) .spinner-grow {
    background-color: #2196f3 !important;
    border-radius: 50% !important;
    width: 2rem !important;
    height: 2rem !important;
    box-sizing: border-box !important;
}

/* Ensure spinner visibility in all contexts */
.spinner-border:not([style*="display: none"]),
.spinner-border-sm:not([style*="display: none"]),
.spinner-grow:not([style*="display: none"]) {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Spinner animation smoothness */
.spinner-border,
.spinner-border-sm,
.spinner-grow {
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
}

/* Universal circular shape enforcement - ensure perfect circles in both themes */
.spinner-border,
.spinner-border-sm,
.spinner-grow,
[data-theme="light"] .spinner-border,
[data-theme="light"] .spinner-border-sm,
[data-theme="light"] .spinner-grow {
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
}

/* Video Processing Container - Theme Support */
.video-processing-container {
    background: #000 !important;
    transition: background-color 0.3s ease;
}

[data-theme="light"] .video-processing-container {
    background: #f8f9fa !important;
}

.processing-content {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

[data-theme="light"] .processing-content {
    color: #212529 !important;
}

.processing-content.text-white {
    color: #ffffff !important;
}

[data-theme="light"] .processing-content.text-white {
    color: #212529 !important;
}

.processing-content h5 {
    color: inherit !important;
}

.processing-content p,
.processing-content small {
    color: inherit !important;
    opacity: 0.9;
}

[data-theme="light"] .processing-content p,
[data-theme="light"] .processing-content small {
    opacity: 0.8;
}





/*Notification page css */
   
header {
    height: 50px;
}
header .logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}
.feed-container{
    background: transparent;
}

/* Mobile Header - Hide on desktop */
.mobileHeader {
    display: none !important;
}

@media screen and (max-width: 800px) {
    .mobileHeader {
        display: flex !important;
    }
    
    /* Hide desktop search on mobile */
    .notification-search-container {
        display: none !important;
    }
    
    /* Hide desktop filters on mobile */
    .notification-filters {
        display: none !important;
    }
    
    /* Hide desktop title on mobile */
    .mainSection.notifications h1 {
        display: none !important;
    }
}

/* Desktop view - Show desktop elements */
@media screen and (min-width: 801px) {
    .mobileHeader {
        display: none !important;
    }
    
    .notification-search-container {
        display: block !important;
    }
    
    .notification-filters {
        display: flex !important;
    }
    
    .mainSection.notifications h1 {
        display: block !important;
    }
}

/* Filter dropdown active state */
.dropdownMenu a.active {
    background-color: var(--bg-secondary, #2a2a2a);
    color: var(--text-primary, #ffffff);
    font-weight: 600;
}

.dropdownMenu a:hover {
    background-color: var(--bg-tertiary, #404040);
}




/* Bulk Read Button Styling */
.bulk-read-btn {
    margin-left: auto;
    padding: 8px 12px;
    background: var(--secondary-dark, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

.bulk-read-btn:hover {
    background: var(--bg-tertiary, #404040);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.bulk-read-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.bulk-read-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Notification Search Container */
.notification-search-container {
    margin-bottom: 24px !important;
    position: relative;
    overflow: visible !important;
}

/* Notification Search Container - Dark Mode */
.mainSection.notifications .notification-search-container {
    background: transparent !important;
}

/* Notification Search Container - Light Mode */
[data-theme="light"] .mainSection.notifications .notification-search-container {
    background: #ffffff !important;
}

.searchBar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: visible !important;
    z-index: auto;
}

/* Checkbox styling */
.notification-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

[data-theme="light"] .bulk-read-btn {
    background: transparent;
    border-color: #dee2e6;
}

[data-theme="light"] .bulk-read-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .bulk-read-btn img {
    filter: brightness(0) invert(0);
}

/* Bulk Actions Dropdown */
.bulk-actions-dropdown {
    position: relative;
    display: inline-block;
    z-index: 99999 !important;
    isolation: isolate !important;
}

/* Prevent bulk actions menu from appearing on notification item hover */
.mainSection.notifications .notification:hover ~ .bulk-actions-menu,
.mainSection.notifications .notification-item:hover ~ .bulk-actions-menu,
.mainSection.notifications .notification:hover .bulk-actions-menu,
.mainSection.notifications .notification-item:hover .bulk-actions-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.bulk-actions-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background: var(--secondary-dark, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 99999 !important;
    min-width: 60px;
    overflow: visible;
    padding: 4px 0;
    isolation: isolate !important;
    pointer-events: auto !important;
}

/* Ensure menu is hidden by default and only shows when toggled */
.bulk-actions-menu:not([style*="block"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.bulk-actions-menu[style*="block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.bulk-action-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 40px;
    background: transparent;
    border: none;
    color: var(--text-light, #ffffff);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

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

.bulk-action-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.bulk-action-item img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.bulk-action-item span {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95) !important;
    color: #ffffff !important;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bulk-action-item span::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(0, 0, 0, 0.95);
}

.bulk-action-item:hover span {
    opacity: 1;
    visibility: visible;
    bottom: -38px;
    transform: translateX(-50%) translateY(-2px);
}

[data-theme="light"] .bulk-actions-menu {
    background: rgba(248, 249, 250, 0.95);
    border-color: #dee2e6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

[data-theme="light"] .bulk-action-item {
    color: #212529;
}

[data-theme="light"] .bulk-action-item:hover {
    background: #f8f9fa;
}

/* Bulk Action Item Span - Dark Mode */
.bulk-action-item span {
    background: rgba(0, 0, 0, 0.95) !important;
    color: #ffffff !important;
}

.bulk-action-item span::before {
    border-bottom-color: rgba(0, 0, 0, 0.95) !important;
}

/* Bulk Action Item Span - Light Mode */
[data-theme="light"] .bulk-action-item span {
    background: rgba(0, 0, 0, 0.95) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .bulk-action-item span::before {
    border-bottom-color: rgba(0, 0, 0, 0.95) !important;
}

/* Button labels styling */
.buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.buttons button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.buttons button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.buttons button img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.buttons button .button-label {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.buttons button:hover .button-label {
    opacity: 1;
    visibility: visible;
    bottom: -43px;
    transform: translateX(-50%) translateY(-2px);
}

/* Add arrow/tooltip pointer */
.buttons button .button-label::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(0, 0, 0, 0.95);
}

.buttons button.delete-btn:hover {
    background: rgba(255, 0, 0, 0.2);
}

.buttons button.archive-btn:hover {
    background: rgba(255, 165, 0, 0.2);
}

[data-theme="light"] .buttons button:hover {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .buttons button .button-label {
    background: rgba(0, 0, 0, 0.95) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    z-index: 10000 !important;
}

[data-theme="light"] .buttons button .button-label::before {
    border-bottom-color: rgba(0, 0, 0, 0.95) !important;
}

/* Filter Tabs Styling */
.notification-filters {
    margin-bottom: 20px !important;
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.filter-tab {
    padding: 8px 16px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.filter-tab:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.filter-tab.active {
    background: #01ADF1 !important;
    border-color: #01ADF1 !important;
    color: #ffffff !important;
}

/* Light Mode Filter Tabs */
[data-theme="light"] .filter-tab {
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[data-theme="light"] .filter-tab:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .filter-tab.active {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
}

/* Ensure button labels are visible in both modes */
.buttons button .button-label {
    z-index: 10000 !important;
    pointer-events: none !important;
}

/* Notification Content Padding */
.mainSection.notifications .notification-content {
    padding: 12px 16px !important;
    margin: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    overflow: visible !important;
    white-space: normal !important;
}

.mainSection.notifications .notification-content span {
    margin-top: 4px !important;
    display: block !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Dark Mode - Notification Content */
.mainSection.notifications .notification-content {
    color: #ffffff !important;
}

.mainSection.notifications .notification-content span {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Light Mode - Notification Content */
[data-theme="light"] .mainSection.notifications .notification-content {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.notifications .notification-content span {
    color: #6c757d !important;
}

/* Notification Item - Dark Mode */
.mainSection.notifications .notification {
    background: #15191C !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    gap: 16px !important;
    min-height: auto !important;
    height: auto !important;
    align-items: flex-start !important;
    overflow: visible !important;
}

.mainSection.notifications .notification.unread {
    background: rgba(1, 173, 241, 0.1) !important;
    border-left: 3px solid #01ADF1 !important;
}

.mainSection.notifications .notification:hover {
    background: #1e2327 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Notification Item - Light Mode */
[data-theme="light"] .mainSection.notifications .notification {
    background: transparent !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    padding: 12px 16px !important;
    gap: 16px !important;
    min-height: auto !important;
    height: auto !important;
    align-items: flex-start !important;
    overflow: visible !important;
}

[data-theme="light"] .mainSection.notifications .notification.unread {
    background: rgba(33, 150, 243, 0.1) !important;
    border-left: 3px solid #2196f3 !important;
    border-color: #2196f3 !important;
}

[data-theme="light"] .mainSection.notifications .notification:hover {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: #adb5bd !important;
}

/* Notifications Container - Dark Mode */
.mainSection.notifications .notificationsContainer {
    background: #0E1012 !important;
}

/* Notifications Container - Light Mode */
[data-theme="light"] .mainSection.notifications .notificationsContainer {
    background: #ffffff !important;
}

/* Mobile Header - Light Mode */
[data-theme="light"] .mainSection.notifications .mobileHeader {
    background: #ffffff !important;
}

/* Mobile Header - Dark Mode */
.mainSection.notifications .mobileHeader {
    background: transparent !important;
}

/* Main Feed - Dark Mode */
.mainSection.notifications .mainFeed {
    color: #ffffff !important;
    overflow: visible !important;
    position: relative;
    background: transparent !important;
    background-color: transparent !important;
}

/* Main Feed - Light Mode */
[data-theme="light"] .mainSection.notifications .mainFeed {
    color: #212529 !important;
    overflow: visible !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* H1 Title - Dark Mode */
.mainSection.notifications .mainFeed h1 {
    color: #ffffff !important;
}

/* H1 Title - Light Mode */
[data-theme="light"] .mainSection.notifications .mainFeed h1 {
    color: #212529 !important;
}

/* Search Bar - Dark Mode */
.mainSection.notifications .searchBar {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.mainSection.notifications .searchBar input {
    color: #ffffff !important;
}

.mainSection.notifications .searchBar input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Search Bar - Light Mode */
[data-theme="light"] .mainSection.notifications .searchBar {
    background: transparent !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .mainSection.notifications .searchBar input {
    color: #212529 !important;
}

[data-theme="light"] .mainSection.notifications .searchBar input::placeholder {
    color: #6c757d !important;
}

/* Search Icon - Dark Mode */
.mainSection.notifications .searchBar img {
    filter: brightness(0) invert(1) !important;
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
}

/* Search Icon - Light Mode */
[data-theme="light"] .mainSection.notifications .searchBar img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

/* Button Images - Dark Mode */
.mainSection.notifications .buttons button img {
    filter: brightness(0) invert(1) !important;
}

/* Button Images - Light Mode */
[data-theme="light"] .mainSection.notifications .buttons button img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

/* Profile Picture Border - Dark Mode */
.mainSection.notifications .notification .pfp {
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Profile Picture Border - Light Mode */
[data-theme="light"] .mainSection.notifications .notification .pfp {
    border: 2px solid #dee2e6 !important;
}

/* Star Icon - Dark Mode */
.mainSection.notifications .notification .star-icon {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.5 !important;
    transition: all 0.3s ease !important;
}

.mainSection.notifications .notification .star-icon:hover {
    opacity: 0.8 !important;
    transform: scale(1.1) !important;
}

.mainSection.notifications .notification .star-icon.favorited {
    opacity: 1 !important;
    filter: brightness(0) saturate(100%) invert(79%) sepia(98%) saturate(1352%) hue-rotate(353deg) brightness(102%) contrast(106%) !important; /* Gold/Yellow color */
}

/* Star Icon - Light Mode */
[data-theme="light"] .mainSection.notifications .notification .star-icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
    opacity: 0.5 !important;
}

[data-theme="light"] .mainSection.notifications .notification .star-icon:hover {
    opacity: 0.8 !important;
}

[data-theme="light"] .mainSection.notifications .notification .star-icon.favorited {
    opacity: 1 !important;
    filter: brightness(0) saturate(100%) invert(79%) sepia(98%) saturate(1352%) hue-rotate(353deg) brightness(102%) contrast(106%) !important; /* Gold/Yellow color */
}

/* Checkbox - Dark Mode */
.mainSection.notifications .notification-checkbox {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.mainSection.notifications .notification-checkbox:checked {
    background: #01ADF1 !important;
    border-color: #01ADF1 !important;
}

/* Checkbox - Light Mode */
[data-theme="light"] .mainSection.notifications .notification-checkbox {
    border-color: #adb5bd !important;
}

[data-theme="light"] .mainSection.notifications .notification-checkbox:checked {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
}

/* Mobile View - Light Mode: Match dark mode structure with light colors */
@media screen and (max-width: 800px) {
    /* Show all components like dark mode */
    [data-theme="light"] .mainSection.notifications .notification-search-container {
        display: block !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification-filters {
        display: flex !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mainFeed h1 {
        display: block !important;
        color: #212529 !important;
    }
    
    /* MobileHeader - Light colors but same structure */
    [data-theme="light"] .mainSection.notifications .mobileHeader {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        background: transparent !important;
        padding: 0.75rem 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader > * {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        vertical-align: middle !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader button:first-child {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(248, 249, 250, 0.9) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader button:first-child img {
        width: 20px !important;
        height: 20px !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin: 0 !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: 1 !important;
        gap: 8px !important;
        background: rgba(248, 249, 250, 0.9) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 999px !important;
        padding: 0 12px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar button[type="submit"],
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar .dropdown {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        flex-shrink: 0 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar input {
        flex: 1 !important;
        min-width: 0 !important;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar .dropdown {
        margin-left: auto !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar .dropdownButton {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar .dropdownButton img {
        width: 16px !important;
        height: 16px !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar input {
        color: #212529 !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar input::placeholder {
        color: rgba(0, 0, 0, 0.6) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar button[type="submit"] img,
    [data-theme="light"] .mainSection.notifications .mobileHeader button img {
        filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar .dropdown img {
        filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar .dropdownMenu {
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar .dropdownMenu a {
        color: #212529 !important;
    }
    
    [data-theme="light"] .mainSection.notifications .mobileHeader .searchBar .dropdownMenu a:hover {
        background: rgba(0, 0, 0, 0.05) !important;
    }
    
    /* Notification Search Container - Light colors */
    [data-theme="light"] .mainSection.notifications .notification-search-container {
        background: #ffffff !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification-search-container .searchBar {
        background: rgba(248, 249, 250, 0.9) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification-search-container .searchBar input {
        color: #212529 !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification-search-container .searchBar input::placeholder {
        color: rgba(0, 0, 0, 0.6) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification-search-container .searchBar img {
        filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    }
    
    /* Filter Tabs - Light colors */
    [data-theme="light"] .mainSection.notifications .filter-tab {
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        background: rgba(248, 249, 250, 0.9) !important;
        color: #212529 !important;
    }
    
    [data-theme="light"] .mainSection.notifications .filter-tab:hover {
        background: rgba(0, 0, 0, 0.05) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .filter-tab.active {
        background: #2196f3 !important;
        border-color: #2196f3 !important;
        color: #ffffff !important;
    }
    
    /* Notifications Container - Light colors */
    [data-theme="light"] .mainSection.notifications .notificationsContainer {
        background: #ffffff !important;
        display: block !important;
    }
    
    /* Notification Items - Light colors */
    [data-theme="light"] .mainSection.notifications .notification {
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        color: #212529 !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification.unread {
        background: rgba(33, 150, 243, 0.1) !important;
        border-left: 3px solid #2196f3 !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification:hover {
        background: rgba(0, 0, 0, 0.02) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification-content {
        color: #212529 !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification-content span {
        color: rgba(0, 0, 0, 0.7) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification .pfp {
        border: 2px solid rgba(0, 0, 0, 0.08) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification .star-icon {
        filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification-checkbox {
        border-color: rgba(0, 0, 0, 0.3) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification-checkbox:checked {
        background: #2196f3 !important;
        border-color: #2196f3 !important;
    }
    
    [data-theme="light"] .mainSection.notifications .buttons button img {
        filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .bulk-read-btn {
        background: rgba(248, 249, 250, 0.9) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .bulk-read-btn img {
        filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%) !important;
    }
}

/* ============================================
   RESPONSIVE DESIGN - ALL DEVICES
   ============================================ */

/* Extra Small Devices (phones, 320px and up) */
@media screen and (max-width: 575px) {
    .mainSection.notifications {
        padding: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mainSection.notifications .mainFeed {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    .mainSection.notifications .notificationsContainer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mainSection.notifications h1 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
        padding: 0 4px !important;
    }
    
    .notification-search-container {
        margin-bottom: 16px !important;
        padding: 0 !important;
    }
    
    .mainSection.notifications .searchBar {
        gap: 8px !important;
        min-height: 36px !important;
    }
    
    .mainSection.notifications .searchBar input {
        font-size: 14px !important;
        padding: 0 4px !important;
    }
    
    .mainSection.notifications .searchBar img {
        width: 16px !important;
        height: 16px !important;
    }
    
    .notification-filters {
        gap: 6px !important;
        margin-bottom: 16px !important;
    }
    
    .filter-tab {
        padding: 6px 12px !important;
        font-size: 12px !important;
        flex: 1 1 auto !important;
        min-width: calc(50% - 3px) !important;
    }
    
    .notificationsContainer {
        gap: 8px !important;
    }
    
    .mainSection.notifications .notification {
        padding: 10px 12px !important;
        gap: 10px !important;
        border-radius: 8px !important;
    }
    
    .mainSection.notifications .notification .pfp {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    .mainSection.notifications .notification .star-icon {
        width: 18px !important;
        height: 18px !important;
    }
    
    .mainSection.notifications .notification-checkbox {
        width: 16px !important;
        height: 16px !important;
        margin-right: 8px !important;
    }
    
    .mainSection.notifications .notification-content {
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    
    .mainSection.notifications .notification-content span {
        font-size: 11px !important;
        display: block !important;
        margin-top: 4px !important;
    }
    
    .mainSection.notifications .buttons {
        gap: 4px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mainSection.notifications .buttons button {
        padding: 4px !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }
    
    .mainSection.notifications .buttons button img {
        width: 14px !important;
        height: 14px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        filter: brightness(0) invert(1) !important; /* White icons for dark mode */
    }
    
    /* Dark Mode - Mobile Buttons */
    [data-theme="dark"] .mainSection.notifications .buttons,
    .mainSection.notifications .buttons {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    [data-theme="dark"] .mainSection.notifications .buttons button,
    .mainSection.notifications .buttons button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
    }
    
    [data-theme="dark"] .mainSection.notifications .buttons button img,
    .mainSection.notifications .buttons button img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        filter: brightness(0) invert(1) !important; /* White icons for dark mode */
    }
    
    [data-theme="dark"] .mainSection.notifications .buttons button:hover,
    .mainSection.notifications .buttons button:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    .bulk-actions-dropdown {
        margin-left: auto !important;
    }
    
    .bulk-read-btn {
        padding: 6px 8px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 12px !important;
    }
    
    .bulk-read-btn img {
        width: 16px !important;
        height: 16px !important;
    }
    
    .bulk-actions-menu {
        min-width: 50px !important;
        right: 0 !important;
    }
    
    .bulk-action-item {
        padding: 30px !important;
    }
    
    .bulk-action-item img {
        width: 16px !important;
        height: 16px !important;
    }
    
    .button-label {
        font-size: 10px !important;
        padding: 6px 10px !important;
        bottom: -35px !important;
    }
    
    .buttons button:hover .button-label {
        bottom: -38px !important;
    }
}

/* Small Devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767px) {
    .mainSection.notifications {
        padding: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mainSection.notifications .mainFeed {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mainSection.notifications .notificationsContainer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mainSection.notifications h1 {
        font-size: 20px !important;
        margin-bottom: 16px !important;
    }
    
    .notification-search-container {
        margin-bottom: 20px !important;
    }
    
    .mainSection.notifications .searchBar {
        padding: 10px 12px !important;
        min-height: 40px !important;
    }
    
    .filter-tab {
        padding: 7px 14px !important;
        font-size: 13px !important;
    }
    
    .mainSection.notifications .notification {
        padding: 12px 14px !important;
        gap: 12px !important;
    }
    
    .mainSection.notifications .notification .pfp {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    .mainSection.notifications .notification-content {
        font-size: 14px !important;
    }
    
    .mainSection.notifications .buttons {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mainSection.notifications .buttons button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
    }
    
    .mainSection.notifications .buttons button img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        filter: brightness(0) invert(1) !important; /* White icons for dark mode */
    }
    
    /* Dark Mode - Mobile Buttons */
    [data-theme="dark"] .mainSection.notifications .buttons button img,
    .mainSection.notifications .buttons button img {
        filter: brightness(0) invert(1) !important; /* White icons for dark mode */
    }
}

/* Medium Devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .mainSection.notifications {
        padding: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mainSection.notifications .mainFeed {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mainSection.notifications .notificationsContainer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mainSection.notifications h1 {
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }
    
    .notification-search-container {
        margin-bottom: 24px !important;
    }
    
    .mainSection.notifications .searchBar {
        padding: 12px 16px !important;
        min-height: 44px !important;
    }
    
    .filter-tab {
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
    
    .mainSection.notifications .notification {
        padding: 14px 16px !important;
    }
    
    .mainSection.notifications .notification .pfp {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* Large Devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .mainSection.notifications {
        padding: 20px !important;
    }
    
    .mainSection.notifications h1 {
        font-size: 24px !important;
    }
    
    .notification-search-container {
        margin-bottom: 24px !important;
    }
    
    .mainSection.notifications .searchBar {
        padding: 12px 18px !important;
        min-height: 48px !important;
    }
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    .mainSection.notifications {
        padding: 24px !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
    }
    
    .mainSection.notifications h1 {
        font-size: 26px !important;
    }
    
    .notification-search-container {
        margin-bottom: 28px !important;
    }
    
    .mainSection.notifications .searchBar {
        padding: 14px 20px !important;
        min-height: 52px !important;
    }
    
    .mainSection.notifications .notification {
        padding: 16px 20px !important;
    }
}

/* Mobile Header Responsive */
@media screen and (max-width: 800px) {
    .mobileHeader {
        padding: 0.5rem 0.75rem !important;
        gap: 6px !important;
    }
    
    .mobileHeader button:first-child {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }
    
    .mobileHeader button:first-child img {
        width: 18px !important;
        height: 18px !important;
    }
    
    .mobileHeader .searchBar {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        padding: 0 10px !important;
        gap: 6px !important;
    }
    
    .mobileHeader .searchBar input {
        font-size: 14px !important;
    }
    
    .mobileHeader .searchBar button[type="submit"] {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    
    .mobileHeader .searchBar button[type="submit"] img {
        width: 14px !important;
        height: 14px !important;
    }
}

/* Very Small Devices (320px and below) */
@media screen and (max-width: 320px) {
    .mainSection.notifications {
        padding: 4px !important;
    }
    
    .mainSection.notifications h1 {
        font-size: 16px !important;
        padding: 0 2px !important;
    }
    
    .filter-tab {
        padding: 5px 8px !important;
        font-size: 11px !important;
        min-width: calc(50% - 3px) !important;
    }
    
    .mainSection.notifications .notification {
        padding: 8px 10px !important;
        gap: 8px !important;
    }
    
    .mainSection.notifications .notification .pfp {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    .mainSection.notifications .notification-content {
        font-size: 12px !important;
    }
    
    .mainSection.notifications .buttons {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mainSection.notifications .buttons button {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
    }
    
    .mainSection.notifications .buttons button img {
        width: 12px !important;
        height: 12px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        filter: brightness(0) invert(1) !important; /* White icons for dark mode */
    }
    
    /* Dark Mode - Very Small Mobile Buttons */
    [data-theme="dark"] .mainSection.notifications .buttons button img,
    .mainSection.notifications .buttons button img {
        filter: brightness(0) invert(1) !important; /* White icons for dark mode */
    }
}

/* Touch-friendly targets for mobile */
@media screen and (max-width: 991px) {
    .mainSection.notifications .notification {
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .mainSection.notifications .buttons button,
    .mainSection.notifications .notification-checkbox,
    .mainSection.notifications .star-icon,
    .filter-tab {
        min-height: 44px !important; /* Minimum touch target size */
        min-width: 44px !important;
    }
    
    .mainSection.notifications .notification-checkbox {
        min-height: 20px !important;
        min-width: 20px !important;
    }
    
    .mainSection.notifications .star-icon {
        min-height: 20px !important;
        min-width: 20px !important;
    }
    
    /* Ensure buttons are visible in dark mode on mobile */
    .mainSection.notifications .buttons {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mainSection.notifications .buttons button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
    }
    
    /* Dark Mode - Mobile Buttons */
    [data-theme="dark"] .mainSection.notifications .buttons button img,
    .mainSection.notifications .buttons button img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        filter: brightness(0) invert(1) !important; /* White icons for dark mode */
    }
    
    [data-theme="dark"] .mainSection.notifications .buttons button:hover,
    .mainSection.notifications .buttons button:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }
}

/* Ensure no horizontal overflow */
@media screen and (max-width: 991px) {
    .mainSection.notifications,
    .mainSection.notifications .mainFeed,
    .mainSection.notifications .notificationsContainer,
    .mainSection.notifications .notification,
    .mainSection.notifications .notification-content,
    .notification-search-container,
    .searchBar,
    .searchBar input {
        max-width: 100% !important;
    }
    
    .mainSection.notifications .notification {
        flex-wrap: wrap !important;
    }
    
    .mainSection.notifications .notification-content {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
}

/* Landscape Orientation */
@media screen and (max-width: 991px) and (orientation: landscape) {
    .mainSection.notifications {
        padding: 12px !important;
    }
    
    .mainSection.notifications h1 {
        font-size: 20px !important;
        margin-bottom: 16px !important;
    }
    
    .notification-filters {
        margin-bottom: 16px !important;
    }
    
    .mainSection.notifications .notification {
        padding: 10px 14px !important;
    }
}

/* Print Styles */
@media print {
    .mobileHeader,
    .notification-search-container,
    .notification-filters,
    .buttons,
    .bulk-actions-dropdown {
        display: none !important;
    }
    
    .mainSection.notifications .notification {
        page-break-inside: avoid !important;
        border: 1px solid #ccc !important;
    }
}

/* ============================================
   ADDITIONAL RESPONSIVE FIXES - ALL DEVICES
   ============================================ */

/* Base responsive container */
.mainSection.notifications {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.mainSection.notifications .mainFeed {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Pagination responsive */
@media screen and (max-width: 575px) {
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    
    .pagination .page-item {
        margin: 2px !important;
    }
    
    .pagination .page-link {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .pagination .page-link {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}

/* Empty state responsive */
@media screen and (max-width: 575px) {
    .text-center.my-4 {
        padding: 20px 10px !important;
    }
    
    .text-center.my-4 img {
        width: 30px !important;
        margin-bottom: 15px !important;
    }
    
    .text-center.my-4 .h5 {
        font-size: 14px !important;
    }
}

/* Search bar responsive improvements */
@media screen and (max-width: 575px) {
    .notification-search-container .searchBar {
        flex-wrap: nowrap !important;
    }
    
    .notification-search-container .searchBar input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    
    .bulk-actions-dropdown {
        flex-shrink: 0 !important;
    }
}

/* Notification item layout improvements for mobile */
@media screen and (max-width: 575px) {
    .mainSection.notifications .notification {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }
    
    .mainSection.notifications .notification .pfp {
        order: 1 !important;
    }
    
    .mainSection.notifications .notification .star-icon {
        order: 2 !important;
    }
    
    .mainSection.notifications .notification .notification-checkbox {
        order: 0 !important;
    }
    
    .mainSection.notifications .notification .notification-content {
        order: 3 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-top: 8px !important;
    }
    
    .mainSection.notifications .notification .buttons {
        order: 4 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        justify-content: flex-end !important;
        margin-top: 8px !important;
    }
}

/* Tablet optimizations */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .mainSection.notifications {
        padding: 16px 20px !important;
    }
    
    .notification-search-container {
        margin-bottom: 20px !important;
    }
    
    .notification-filters {
        margin-bottom: 18px !important;
    }
    
    .mainSection.notifications .notification {
        padding: 14px 18px !important;
    }
}

/* Desktop optimizations */
@media screen and (min-width: 992px) {
    .mainSection.notifications .notification {
        transition: all 0.2s ease !important;
    }
    
    .mainSection.notifications .notification:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    [data-theme="light"] .mainSection.notifications .notification:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }
}

/* Large desktop optimizations */
@media screen and (min-width: 1400px) {
    .mainSection.notifications {
        max-width: 1228px !important;
    }
}

/* Fix for very wide screens */
@media screen and (min-width: 1920px) {
    .mainSection.notifications {
        max-width: 1800px !important;
    }
}

/* Ensure proper text wrapping on all devices */
.mainSection.notifications .notification-content,
.mainSection.notifications .notification-content span {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* Fix for iOS Safari viewport issues */
@supports (-webkit-touch-callout: none) {
    .mainSection.notifications {
        min-height: -webkit-fill-available !important;
    }
}

/* High DPI displays */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
    .mainSection.notifications .buttons button img,
    .mainSection.notifications .notification .star-icon,
    .mainSection.notifications .searchBar img {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* ============================================
   SETTINGS PAGE - UNIFIED STYLING
   ============================================ */

/* Dark/Light Mode Support */
.mainSection.settings .mainFeed > h1 {
    color: var(--text-primary, #ffffff) !important;
}

[data-theme="light"] .mainSection.settings .mainFeed > h1 {
    color: var(--text-primary, #212529) !important;
}

.mainSection.userProfilePage {
    margin-top: 0;
}

@media screen and (max-width: 800px) {
    .mainSection.userProfilePage {
        margin-top: 50px;
    }
    
    header {
        display: none !important;
    }
}

/* Save Button */
.save-btn {
    background: var(--accent-blue, #007bff);
    color: #ffffff;
    border: none;
    padding: 12px 24px !important;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px !important;
    transition: all 0.3s ease;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.save-btn:hover {
    background: var(--theme-accent-hover, #0056b3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

[data-theme="light"] .save-btn {
    background: var(--accent-blue, #007bff);
    color: #ffffff;
}

[data-theme="light"] .save-btn:hover {
    background: var(--theme-accent-hover, #0056b3);
}

/* ========================================
   COMPREHENSIVE ALERT STYLES - DARK & LIGHT MODE
   ======================================== */

/* Base Alert Styles */
.alert {
    padding: 12px 16px !important;
    margin: 10px 0 !important;
    border-radius: 8px !important;
    border: 1px solid !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    /* Don't override animation, opacity, transform - let animations work */
}

/* Dark mode - Base alert (default) */
.alert {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Light mode - Base alert */
[data-theme="light"] .alert {
    background: #f8f9fa !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

/* Dark mode - Success alerts */
.alert-success,
.mainSection .alert-success,
.mainFeedContainer .alert-success,
.forgotpassword_area .alert-success,
.profileEditPage .alert-success {
    background: rgba(40, 167, 69, 0.15) !important;
    color: #6bcf7f !important;
    border-color: rgba(40, 167, 69, 0.4) !important;
}

/* Light mode - Success alerts */
[data-theme="light"] .alert-success,
[data-theme="light"] .mainSection .alert-success,
[data-theme="light"] .mainFeedContainer .alert-success,
[data-theme="light"] .forgotpassword_area .alert-success,
[data-theme="light"] .profileEditPage .alert-success {
    background: #d1e7dd !important;
    color: #0f5132 !important;
    border-color: #badbcc !important;
}

/* Dark mode - Error/Danger alerts */
.alert-error,
.alert-danger,
.mainSection .alert-error,
.mainSection .alert-danger,
.mainFeedContainer .alert-error,
.mainFeedContainer .alert-danger,
.forgotpassword_area .alert-danger,
.profileEditPage .alert-danger {
    background: rgba(220, 53, 69, 0.15) !important;
    color: #ff6b6b !important;
    border-color: rgba(220, 53, 69, 0.4) !important;
}

/* Light mode - Error/Danger alerts */
[data-theme="light"] .alert-error,
[data-theme="light"] .alert-danger,
[data-theme="light"] .mainSection .alert-error,
[data-theme="light"] .mainSection .alert-danger,
[data-theme="light"] .mainFeedContainer .alert-error,
[data-theme="light"] .mainFeedContainer .alert-danger,
[data-theme="light"] .forgotpassword_area .alert-danger,
[data-theme="light"] .profileEditPage .alert-danger {
    background: #f8d7da !important;
    color: #842029 !important;
    border-color: #f5c2c7 !important;
}

/* Dark mode - Warning alerts */
.alert-warning,
.mainSection .alert-warning,
.mainFeedContainer .alert-warning {
    background: rgba(255, 193, 7, 0.15) !important;
    color: #ffc107 !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
}

/* Light mode - Warning alerts */
[data-theme="light"] .alert-warning,
[data-theme="light"] .mainSection .alert-warning,
[data-theme="light"] .mainFeedContainer .alert-warning {
    background: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffeaa7 !important;
}

/* Dark mode - Info alerts */
.alert-info,
.mainSection .alert-info,
.mainFeedContainer .alert-info {
    background: rgba(23, 162, 184, 0.15) !important;
    color: #17a2b8 !important;
    border-color: rgba(23, 162, 184, 0.4) !important;
}

/* Light mode - Info alerts */
[data-theme="light"] .alert-info,
[data-theme="light"] .mainSection .alert-info,
[data-theme="light"] .mainFeedContainer .alert-info {
    background: #d1ecf1 !important;
    color: #0c5460 !important;
    border-color: #bee5eb !important;
}

/* Dark mode - Primary alerts */
.alert-primary {
    background: rgba(0, 123, 255, 0.15) !important;
    color: #4da3ff !important;
    border-color: rgba(0, 123, 255, 0.4) !important;
}

/* Light mode - Primary alerts */
[data-theme="light"] .alert-primary {
    background: #cfe2ff !important;
    color: #084298 !important;
    border-color: #b6d4fe !important;
}

/* Alert list styling */
.alert ul {
    margin: 0 !important;
    padding-left: 20px !important;
    list-style-type: disc !important;
}

.alert li {
    margin: 5px 0 !important;
}

/* Dark mode alert list */
.alert ul,
.alert li {
    color: inherit !important;
}

/* Light mode alert list */
[data-theme="light"] .alert ul {
    margin: 0 !important;
    padding-left: 20px !important;
}

[data-theme="light"] .alert li {
    margin: 5px 0 !important;
    color: inherit !important;
}

/* Alert dismissible close button */
.alert-dismissible .btn-close {
    filter: brightness(0) invert(1) !important;
    opacity: 0.8 !important;
}

[data-theme="light"] .alert-dismissible .btn-close {
    filter: brightness(0) invert(0) !important;
    opacity: 0.5 !important;
}

[data-theme="light"] .alert-dismissible .btn-close:hover {
    opacity: 0.75 !important;
}

/* Toast header styling */
.alert .toast-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: inherit !important;
}

[data-theme="light"] .alert .toast-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

/* Field validation error styles */
.input.error input {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25) !important;
}

.input.error::after {
    content: attr(data-error);
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

.inputDiv.error label {
    color: #dc3545 !important;
}

/* Fix password form overflow issue */
.mainSection.settings .emailAddress.password .email {
    overflow: visible;
    width: 100%;
    max-width: 100%;
}

.mainSection.settings .emailAddress.password .email form {
    overflow: visible;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.mainSection.settings .emailAddress.password .email .inputDiv {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin-bottom: 15px;
}

.mainSection.settings .emailAddress.password .email .inputDiv:last-child {
    margin-bottom: 15px;
}

.mainSection.settings .emailAddress.password .email .save-btn {
    width: auto;
    max-width: 200px;
    margin-top: 10px;
    align-self: flex-start;
}

/* Two-Factor Authentication Styles */
.two-factor {
    margin-top: 20px;
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.two-factor-status {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.two-factor-status.enabled {
    background: rgba(40, 167, 69, 0.15);
    border: 1px solid rgba(40, 167, 69, 0.3);
    color: var(--success-color, #28a745);
}

[data-theme="light"] .two-factor-status.enabled {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 1px solid #28a745;
    color: #155724;
}

.two-factor-status.disabled {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

[data-theme="light"] .two-factor-status.disabled {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 1px solid #ffc107;
    color: #856404;
}

.two-factor-status.not-eligible {
    background: rgba(13, 202, 240, 0.15);
    border: 1px solid rgba(13, 202, 240, 0.3);
    color: #0dcaf0;
}

[data-theme="light"] .two-factor-status.not-eligible {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    border: 1px solid #17a2b8;
    color: #0c5460;
}

.status-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
}

.status-indicator i {
    margin-right: 10px;
    font-size: 20px;
}

.status-details {
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.8;
    color: var(--text-secondary, #b0b0b0);
}

[data-theme="light"] .status-details {
    color: var(--text-secondary, #6c757d);
}

.two-factor-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.two-factor-actions .btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.two-factor-actions .btn-primary {
    background: #007bff;
    color: white;
    border: 2px solid #0056b3;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.two-factor-actions .btn-primary:hover {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
}

.two-factor-actions .btn-danger {
    background: #dc3545;
    color: white;
    border: 2px solid #c82333;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.two-factor-actions .btn-danger:hover {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}

.two-factor-actions .btn-secondary {
    background: #6c757d;
    color: white;
    border: 2px solid #545b62;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);
}

.two-factor-actions .btn-secondary:hover {
    background: #545b62;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.4);
}

/* Override any conflicting styles */
.two-factor-actions .btn:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.two-factor-actions .btn:active {
    transform: translateY(1px);
}

/* Ensure buttons are always clickable */
.two-factor-actions .btn * {
    pointer-events: none;
}

/* Profile Picture Section - Match Image Design */
.mainSection.settings .pfps {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    padding: 8px 20px !important;
    margin-bottom: 30px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    border-radius: 12px !important;
    line-height: normal !important;
}

[data-theme="light"] .mainSection.settings .pfps {
    background: #ffffff !important;
    border-color: #e0e0e0 !important;
}

.mainSection.settings .pfps img {
    flex-shrink: 0 !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.mainSection.settings .pfps h2 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--text-primary, #ffffff) !important;
    line-height: 1.2 !important;
}

[data-theme="light"] .mainSection.settings .pfps h2 {
    color: var(--text-primary, #212529) !important;
}

.mainSection.settings .pfps h2 span {
    display: block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text-secondary, #b0b0b0) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

[data-theme="light"] .mainSection.settings .pfps h2 span {
    color: var(--text-secondary, #6c757d) !important;
}

.mainSection.settings .pfps .upload-picture-btn {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mainSection.settings .pfps .delete-picture-btn {
    flex-shrink: 0 !important;
    margin-left: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mainSection.settings .pfps button {
    white-space: nowrap !important;
    padding: 8px 16px !important;
    line-height: 1.2 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
}

.mainSection.settings .pfps .upload-picture-btn {
    background: var(--bg-secondary, #2a2a2a) !important;
    color: var(--text-primary, #ffffff) !important;
    border: 1px solid var(--border-color, #404040) !important;
}

[data-theme="light"] .mainSection.settings .pfps .upload-picture-btn {
    background: #f8f9fa !important;
    color: #212529 !important;
    border-color: #e0e0e0 !important;
}

.mainSection.settings .pfps .upload-picture-btn:hover {
    background: var(--bg-tertiary, #3a3a3a) !important;
}

[data-theme="light"] .mainSection.settings .pfps .upload-picture-btn:hover {
    background: #e9ecef !important;
}

.mainSection.settings .pfps .delete-picture-btn {
    background: #dc3545 !important;
    color: #ffffff !important;
    border: 1px solid #c82333 !important;
}

.mainSection.settings .pfps .delete-picture-btn:hover {
    background: #c82333 !important;
    border-color: #bd2130 !important;
}

/* Ensure proper spacing between sections */
.mainSection.settings .pfps + .emailAddress {
    margin-top: 0 !important;
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Prevent input fields from overlapping with buttons above */
.mainSection.settings .emailAddress .inputDiv {
    position: relative !important;
    z-index: 1 !important;
}

.mainSection.settings .emailAddress .inputDiv .input {
    position: relative !important;
    z-index: 1 !important;
}

/* Settings Page Form Elements Dark/Light Mode */
.mainSection.settings .emailAddress h1,
.mainSection.settings .coverPhoto h1,
.mainSection.settings .coverPhoto h2,
.mainSection.settings .pfps h2 {
    color: var(--text-primary, #ffffff);
}

[data-theme="light"] .mainSection.settings .emailAddress h1,
[data-theme="light"] .mainSection.settings .coverPhoto h1,
[data-theme="light"] .mainSection.settings .coverPhoto h2,
[data-theme="light"] .mainSection.settings .pfps h2 {
    color: var(--text-primary, #212529);
}

.mainSection.settings .emailAddress label,
.mainSection.settings .inputDiv label {
    color: var(--text-primary, #ffffff);
}

[data-theme="light"] .mainSection.settings .emailAddress label,
[data-theme="light"] .mainSection.settings .inputDiv label {
    color: var(--text-primary, #212529);
}

.mainSection.settings .input input,
.mainSection.settings .emailAddress input[type="email"],
.mainSection.settings .emailAddress input[type="text"],
.mainSection.settings .emailAddress input[type="password"] {
    color: var(--text-primary, #ffffff);
    background: var(--bg-tertiary, #2a2a2a);
    border-color: var(--border-color, rgba(255, 255, 255, 0.2));
}

[data-theme="light"] .mainSection.settings .input input,
[data-theme="light"] .mainSection.settings .emailAddress input[type="email"],
[data-theme="light"] .mainSection.settings .emailAddress input[type="text"],
[data-theme="light"] .mainSection.settings .emailAddress input[type="password"] {
    color: var(--text-primary, #212529);
    background: var(--bg-primary, #ffffff);
    border-color: var(--border-color, #e0e0e0);
}

.mainSection.settings .input input::placeholder,
.mainSection.settings .emailAddress input::placeholder {
    color: var(--text-secondary, #999999);
}

[data-theme="light"] .mainSection.settings .input input::placeholder,
[data-theme="light"] .mainSection.settings .emailAddress input::placeholder {
    color: var(--text-secondary, #6c757d);
}

.mainSection.settings .input input:focus,
.mainSection.settings .emailAddress input:focus {
    border-color: var(--accent-blue, #007bff);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.mainSection.settings .coverPhoto .title h2 span,
.mainSection.settings .pfps h2 span {
    color: var(--text-secondary, #b0b0b0);
}

[data-theme="light"] .mainSection.settings .coverPhoto .title h2 span,
[data-theme="light"] .mainSection.settings .pfps h2 span {
    color: var(--text-secondary, #6c757d);
}

.mainSection.settings .coverPhoto button,
.mainSection.settings .pfps button {
    background: var(--accent-blue, #007bff);
    color: #ffffff;
    border: none;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

.mainSection.settings .pfps .delete-picture-btn {
    background: #dc3545 !important;
    color: #ffffff !important;
}

.mainSection.settings .pfps .delete-picture-btn:hover {
    background: #c82333 !important;
}

.mainSection.settings .coverPhoto button:hover,
.mainSection.settings .pfps .upload-picture-btn:hover {
    background: var(--theme-accent-hover, #0056b3);
}

.mainSection.settings .emailAddress button,
.mainSection.settings .emailAddress.security button {
    color: var(--text-primary, #ffffff);
    background: transparent;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
}

[data-theme="light"] .mainSection.settings .emailAddress button,
[data-theme="light"] .mainSection.settings .emailAddress.security button {
    color: var(--text-primary, #212529);
    border-color: var(--border-color, #e0e0e0);
}

.mainSection.settings .emailAddress button:hover,
.mainSection.settings .emailAddress.security button:hover {
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
}

[data-theme="light"] .mainSection.settings .emailAddress button:hover,
[data-theme="light"] .mainSection.settings .emailAddress.security button:hover {
    background: var(--bg-secondary, #f8f9fa);
}

/* Theme Settings Toggle Styles */
.mainSection.settings .emailAddress.theme-settings {
    margin-top: 20px;
}

.mainSection.settings .emailAddress.theme-settings h1 {
    color: var(--text-primary, #ffffff);
    margin-bottom: 20px;
}

[data-theme="light"] .mainSection.settings .emailAddress.theme-settings h1 {
    color: var(--text-primary, #212529);
}

#theme-settings-container {
    min-height: 60px;
    display: block !important;
    visibility: visible !important;
}

.settings-theme-toggle {
    width: 100%;
    display: block !important;
    visibility: visible !important;
}

.settings-theme-toggle .theme-toggle-section {
    display: block !important;
    visibility: visible !important;
}

.settings-theme-toggle .theme-toggle-wrapper {
    display: flex !important;
    visibility: visible !important;
}

.theme-toggle-section {
    padding: 0;
}

.theme-toggle-section h3 {
    display: none; /* Hide duplicate heading */
}

.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    margin-bottom: 10px;
}

[data-theme="light"] .theme-toggle-wrapper {
    background: var(--bg-secondary, #f8f9fa);
    border-color: var(--border-color, #e0e0e0);
}

.theme-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    margin: 0;
}

.theme-label-text {
    color: var(--text-primary, #ffffff);
    font-size: 16px;
    font-weight: 500;
    margin-right: 15px;
}

[data-theme="light"] .theme-label-text {
    color: var(--text-primary, #212529);
}

.theme-toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.theme-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
    transition: 0.3s;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-checkbox:checked + .theme-slider {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
}

.theme-checkbox:checked + .theme-slider:before {
    transform: translateX(30px);
}

.theme-icon {
    color: white;
    font-size: 12px;
    z-index: 3;
    position: absolute;
    left: 65px;
    top: 70%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    transition: left 0.3s ease;
}

.theme-checkbox:checked + .theme-slider .theme-icon {
    left: 45px;
}

.theme-description {
    color: var(--text-secondary, #b0b0b0);
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 0;
}

[data-theme="light"] .theme-description {
    color: var(--text-secondary, #6c757d);
}

/* Settings Page Responsive Styles */
@media (max-width: 768px) {
    .two-factor-actions {
        flex-direction: column;
    }
    
    .two-factor-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Settings Page Responsive Fixes */
    .mainSection.settings .mainFeed {
        padding: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .mainSection.settings .mainFeedContainer {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    .mainSection.settings .coverPhoto {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        margin-bottom: 20px !important;
    }
    
    .mainSection.settings .coverPhoto img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    
    .mainSection.settings .coverPhoto .title {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 15px !important;
    }
    
    .mainSection.settings .coverPhoto .title h2 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    
    .mainSection.settings .coverPhoto .title button {
        width: 100% !important;
        max-width: 100% !important;
        margin: 5px 0 !important;
    }
    
    .mainSection.settings .pfps {
        flex-direction: row !important;
        align-items: center !important;
        padding: 8px 15px !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        gap: 15px !important;
        flex-wrap: wrap !important;
        line-height: normal !important;
    }
    
    .mainSection.settings .pfps img {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }
    
    .mainSection.settings .pfps h2 {
        font-size: 16px !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        min-width: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        line-height: 1.4 !important;
    }
    
    .mainSection.settings .pfps h2 span {
        display: block !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    
    .mainSection.settings .pfps .upload-picture-btn {
        margin-left: auto !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .mainSection.settings .pfps .delete-picture-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 0 0 10px !important;
    }
    
    .mainSection.settings .pfps button {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    .mainSection.settings .emailAddress {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        margin-bottom: 20px !important;
        overflow: visible !important;
    }
    
    .mainSection.settings .emailAddress h1 {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }
    
    .mainSection.settings .emailAddress .email {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    
    .mainSection.settings .emailAddress .email form {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .mainSection.settings .inputDiv {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    .mainSection.settings .inputDiv label {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    
    .mainSection.settings .input {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .mainSection.settings .input input {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
    
    .mainSection.settings .save-btn {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 15px !important;
    }
    
    .mainSection.settings .emailAddress.security .email {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .mainSection.settings .emailAddress.security button {
        width: 100% !important;
        max-width: 100% !important;
        margin: 5px 0 !important;
        padding: 12px 15px !important;
    }
    
    .mainSection.settings .theme-toggle-wrapper {
        padding: 12px 15px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .mainSection.settings .theme-label {
        width: 100% !important;
        justify-content: space-between !important;
    }
    
    .mainSection.settings .theme-label-text {
        font-size: 14px !important;
    }
    
    .mainSection.settings .theme-description {
        font-size: 12px !important;
        margin-top: 5px !important;
    }
    
    .mainSection.settings .two-factor-status {
        padding: 15px !important;
    }
    
    .mainSection.settings .status-indicator {
        font-size: 14px !important;
    }
    
    .mainSection.settings .status-details {
        font-size: 13px !important;
    }
    
    .mainSection.settings .mainFeed > h1 {
        font-size: 20px !important;
        padding: 0 15px !important;
    }
    
    /* Ensure proper touch targets on mobile */
    .mainSection.settings .coverPhoto .title button,
    .mainSection.settings .pfps button,
    .mainSection.settings .emailAddress button,
    .mainSection.settings .save-btn,
    .mainSection.settings .two-factor-actions .btn {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation !important;
    }
    
    .mainSection.settings .inputDiv .input button {
        min-width: 36px !important;
        min-height: 36px !important;
    }
}

@media (max-width: 480px) {
    .mainSection.settings .coverPhoto .title h2 {
        font-size: 14px !important;
    }
    
    .mainSection.settings .pfps h2 {
        font-size: 14px !important;
    }
    
    .mainSection.settings .emailAddress h1 {
        font-size: 16px !important;
    }
    
    .mainSection.settings .mainFeed > h1 {
        font-size: 18px !important;
    }
    
    .mainSection.settings .pfps img {
        width: 80px !important;
        height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
    }
    
    /* Extra small devices - Stack profile picture section */
    .mainSection.settings .pfps {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 15px !important;
        gap: 15px !important;
    }
    
    .mainSection.settings .pfps img {
        align-self: center !important;
    }
    
    .mainSection.settings .pfps h2 {
        width: 100% !important;
        text-align: center !important;
    }
    
    .mainSection.settings .pfps .upload-picture-btn,
    .mainSection.settings .pfps .delete-picture-btn {
        width: 100% !important;
        margin: 5px 0 !important;
    }
}

/* Tablet responsive styles */
@media (min-width: 481px) and (max-width: 991px) {
    .mainSection.settings .mainFeed {
        padding: 20px !important;
    }
    
    .mainSection.settings .mainFeedContainer {
        padding: 0 !important;
    }
    
    .mainSection.settings .coverPhoto {
        margin-bottom: 25px !important;
    }
    
    .mainSection.settings .coverPhoto .title {
        padding: 20px !important;
    }
    
    .mainSection.settings .pfps {
        padding: 12px 20px !important;
    }
    
    .mainSection.settings .emailAddress {
        padding: 20px !important;
    }
    
    .mainSection.settings .pfps button {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}

/* Large mobile and small tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .mainSection.settings .mainFeed {
        padding: 25px !important;
    }
    
    .mainSection.settings .coverPhoto .title {
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px !important;
    }
    
    .mainSection.settings .coverPhoto .title button {
        width: auto !important;
        max-width: 200px !important;
    }
}

/* Ensure all form inputs are responsive */
@media (max-width: 991px) {
    .mainSection.settings .inputDiv .input {
        position: relative !important;
    }
    
    .mainSection.settings .inputDiv .input img {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
        width: 18px !important;
        height: 18px !important;
    }
    
    .mainSection.settings .inputDiv .input input {
        padding-left: 40px !important;
    }
    
    .mainSection.settings .inputDiv .input button {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
        background: transparent !important;
        border: none !important;
        padding: 5px !important;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 991px) and (orientation: landscape) {
    .mainSection.settings .mainFeed {
        padding: 15px !important;
    }
    
    .mainSection.settings .coverPhoto img {
        max-height: 150px !important;
        object-fit: cover !important;
    }
    
    .mainSection.settings .pfps {
        padding: 10px 15px !important;
    }
    
    .mainSection.settings .pfps img {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Very small devices (320px and below) */
@media (max-width: 320px) {
    .mainSection.settings .mainFeed {
        padding: 10px !important;
    }
    
    .mainSection.settings .coverPhoto .title,
    .mainSection.settings .pfps,
    .mainSection.settings .emailAddress {
        padding: 12px !important;
    }
    
    .mainSection.settings .mainFeed > h1 {
        font-size: 16px !important;
        padding: 0 10px !important;
    }
    
    .mainSection.settings .coverPhoto .title h2,
    .mainSection.settings .pfps h2,
    .mainSection.settings .emailAddress h1 {
        font-size: 14px !important;
    }
    
    .mainSection.settings .pfps img {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }
    
    .mainSection.settings .inputDiv label {
        font-size: 13px !important;
    }
    
    .mainSection.settings .input input {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
    
    .mainSection.settings .save-btn {
        font-size: 14px !important;
        padding: 10px 20px !important;
    }
}


/*Dashbaord feed */












































/* Font Awesome Icon Fixes - Comprehensive Fix for Dashboard Feed */
.fa, .fas, .far, .fal, .fab,
.fa-solid, .fa-regular, .fa-brands,
i.fa, i.fas, i.far, i.fal, i.fab,
i.fa-solid, i.fa-regular, i.fa-brands {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.far, .fa-regular, i.far, i.fa-regular {
    font-weight: 400 !important;
}

.fab, .fa-brands, i.fab, i.fa-brands {
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", "FontAwesome" !important;
    font-weight: 400 !important;
}

/* Specific icon fixes for commonly used icons */
.fa-moon::before, .fas.fa-moon::before {
    content: "\f186" !important;
}

.fa-sun::before, .fas.fa-sun::before {
    content: "\f185" !important;
}

.fa-lock::before, .fas.fa-lock::before {
    content: "\f023" !important;
}

.fa-play::before, .fas.fa-play::before {
    content: "\f04b" !important;
}

.fa-times::before, .fas.fa-times::before {
    content: "\f00d" !important;
}

.fa-search::before, .fas.fa-search::before {
    content: "\f002" !important;
}

.fa-video::before, .fas.fa-video::before {
    content: "\f03d" !important;
}

.fa-spinner::before, .fas.fa-spinner::before {
    content: "\f110" !important;
}

.fa-spin {
    animation: fa-spin 2s infinite linear !important;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ensure icons are visible in both themes */
[data-theme="light"] .fa,
[data-theme="light"] .fas,
[data-theme="light"] .far,
[data-theme="light"] .fal,
[data-theme="light"] .fab,
[data-theme="light"] .fa-solid,
[data-theme="light"] .fa-regular,
[data-theme="light"] .fa-brands,
[data-theme="light"] i.fa,
[data-theme="light"] i.fas {
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    color: inherit !important;
}

[data-theme="dark"] .fa,
[data-theme="dark"] .fas,
[data-theme="dark"] .far,
[data-theme="dark"] .fal,
[data-theme="dark"] .fab,
[data-theme="dark"] .fa-solid,
[data-theme="dark"] .fa-regular,
[data-theme="dark"] .fa-brands,
[data-theme="dark"] i.fa,
[data-theme="dark"] i.fas {
    visibility: visible !important;
    opacity: 1 !important;
    color: white !important; 

    display: inline-block !important;
    color: inherit !important;
}

body {
    position: static;
    padding: 0;
}

.feed-container{
    background: transparent;
}

/* Instagram-style Story Viewer Styles */
#instagramStoryViewer {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#instagramStoryViewer .story-progress-bar {
    position: relative;
    overflow: hidden;
}

#instagramStoryViewer .story-progress-fill {
    transition: width 0.1s linear;
}

#instagramStoryViewer #storyHeader {
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
    padding: 15px;
}

#instagramStoryViewer #storyCloseBtn:hover {
    opacity: 0.7;
}

/* Story content container is clickable for navigation */
#instagramStoryViewer #storyContentContainer {
    cursor: pointer;
}

#instagramStoryViewer video,
#instagramStoryViewer img {
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

#instagramStoryViewer #storyTextOverlay {
    word-wrap: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* Prevent body scroll when story viewer is open */
body.story-viewer-open {
    overflow: hidden;
}

/* Instagram-style Stories Container - Hide Scrollbars */
.mainSection .mainFeed .stories {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.mainSection .mainFeed .stories::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Hide scrollbar for Firefox */
.mainSection .mainFeed .stories {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Ensure stories container doesn't show scroll indicators */
.mainSection .mainFeed .stories {
    -webkit-scrollbar-track: transparent !important;
    -webkit-scrollbar-thumb: transparent !important;
}

/* Matrix Feed Exact Styling */
.mainSection.publicProfile .middleSec .row .left .buttons a,
.mainSection.publicProfile .middleSec .row .left .buttons button {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-right: 10px;
}

/* Profile Feed Interaction Styling */
.model_feed_public_like_comment {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Post actions and comments styling - Now handled by unified_post_actions.blade.php component */

.model_feed_public_like_comment > span:last-child {
    margin-right: 0;
}

/* Comment section animations */
.hidden_comment {
    transition: all 0.3s ease;
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Live Buttons Styling */
.live-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.go-live-btn, .schedule-live-btn {
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal, 0.3s ease);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.go-live-btn {
    background: var(--gradient-primary, linear-gradient(270deg, #A61651 0%, #01ADF1 100%));
    color: var(--text-primary, #ffffff);
    border: 1px solid rgba(1, 173, 241, 0.3);
}

.go-live-btn:hover {
    background: var(--gradient-pink, linear-gradient(270deg, #8B1248 0%, #0198D4 100%));
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(1, 173, 241, 0.4);
}

.schedule-live-btn {
    background: var(--bg-secondary, #2a2a2a);
    color: var(--text-primary, #ffffff);
    border: 1px solid var(--border-color, #404040);
}

.schedule-live-btn:hover {
    background: var(--bg-tertiary, #404040);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.mainSection .mainFeed .createPost {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.mainSection .post .postHeader .time p{
    color: var(--text-secondary);
    font-size: 12px;
    margin: 0;
}

/* Post Header Time - Theme aware colors */
html[data-theme="dark"] .mainSection .post .postHeader .time p,
[data-theme="dark"] .mainSection .post .postHeader .time p,
body[data-theme="dark"] .mainSection .post .postHeader .time p {
    color: #b0b0b0 !important;
}

html[data-theme="light"] .mainSection .post .postHeader .time p,
[data-theme="light"] .mainSection .post .postHeader .time p,
body:not([data-theme="dark"]) .mainSection .post .postHeader .time p {
    color: #888888 !important;
}

.mainSection.publicProfile {
    min-height: 100vh;
    color: var(--text-primary);
}

.mainSection.publicProfile .middleSec {
    background: transparent;
    padding: 20px;
    color: var(--text-primary);
}

.mainSection.publicProfile .post {
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    color: var(--text-primary);
}

.mainSection.publicProfile .post .postHeader {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    background: var(--bg-secondary);
    color: var(--text-primary);
    justify-content: space-between;
    align-items: center;
}

.mainSection.publicProfile .post .postHeader .user {
    display: flex;
    align-items: center;
    gap: 0px;
    text-decoration: none;
    color: white;
}

.mainSection.publicProfile .post .postHeader .user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.mainSection.publicProfile .post .postHeader .user p {
    margin: 0;
    font-weight: 600;
}

.mainSection.publicProfile .post .postHeader .user span {
    color: #888;
    font-weight: normal;
}

.mainSection.publicProfile .post .postHeader .verified {
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Ensure verified badge is visible in light mode for public profile */
/* Match profile name color (#212529) */
[data-theme="light"] .mainSection.publicProfile .post .postHeader .verified {
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
}

.mainSection.publicProfile .post .postHeader .time {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mainSection.publicProfile .post .postHeader .time img {
    width: 16px;
    height: 16px;
}

.mainSection.publicProfile .post .postHeader .dropdown {
    position: relative;
    z-index: 99999 !important;
    isolation: isolate !important;
}

/* Ensure post and postHeader don't clip the dropdown */
.mainSection.publicProfile .post,
.mainSection.publicProfile .post .postHeader {
    overflow: visible !important;
    position: relative;
}

.mainSection.publicProfile .post .postHeader .dropdownButton {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    padding: 10px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
}

.mainSection.publicProfile .post .postHeader .dropdownButton:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.05) !important;
}

.mainSection.publicProfile .post .postHeader .dropdownButton img {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}

/* Responsive sizes */
@media (max-width: 768px) {
    .mainSection.publicProfile .post .postHeader .dropdownButton {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        padding: 9px !important;
    }
    
    .mainSection.publicProfile .post .postHeader .dropdownButton img {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }
}

@media (max-width: 576px) {
    .mainSection.publicProfile .post .postHeader .dropdownButton {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        padding: 8px !important;
    }
    
    .mainSection.publicProfile .post .postHeader .dropdownButton img {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
}

.mainSection.publicProfile .post .postHeader .dropdownMenu {
    position: fixed !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px;
    min-width: 150px;
    display: none;
    z-index: 99999 !important; /* Show above all elements */
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
    isolation: isolate !important;
    transform: translateX(-100%); /* Align right edge of menu with button */
}

/* Show dropdown when show class is applied */
.mainSection.publicProfile .post .postHeader .dropdownMenu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Show dropdown when open class is applied */
.mainSection.publicProfile .post .postHeader .dropdown.open .dropdownMenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mainSection.publicProfile .post .postHeader .dropdownMenu a,
.mainSection.publicProfile .post .postHeader .dropdownMenu button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: white;
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
}

.mainSection.publicProfile .post .postHeader .dropdownMenu a:hover,
.mainSection.publicProfile .post .postHeader .dropdownMenu button:hover {
    background: #444;
}

/* Mobile header dropdown styles */
.mobileHeader .searchBar .dropdown {
    position: relative;
    z-index: 9997 !important; /* Below sidebar */
}

.mobileHeader .searchBar .dropdownMenu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    border-radius: 8px !important;
    padding: 10px 0 !important;
    min-width: 150px !important;
    display: none !important;
    z-index: 9997 !important; /* Below sidebar */
    opacity: 0 !important;
    transition: visibility 0s, opacity 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(0) !important;
    overflow: visible !important;
}

/* Ensure dropdown container doesn't clip the menu */
.mobileHeader .searchBar .dropdown {
    overflow: visible !important;
}

.mobileHeader .searchBar {
    overflow: visible !important;
}

.mobileHeader {
    overflow: visible !important;
}

.mobileHeader .searchBar .dropdownMenu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mobileHeader .searchBar .dropdown input[type="checkbox"]:checked ~ .dropdownMenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mobileHeader .searchBar .dropdownMenu a {
    display: block;
    padding: 8px 12px;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

.mobileHeader .searchBar .dropdownMenu a:hover {
    background: #444;
}

.mobileHeader .searchBar .dropdown .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 9996; /* Below sidebar */
    display: none;
}

.mobileHeader .searchBar .dropdown .bg.show {
    display: block !important;
}

.mobileHeader .searchBar .dropdown input[type="checkbox"]:checked ~ .bg {
    display: block !important;
}


.mainSection.publicProfile .post p {
    padding: 15px;
    margin: 0;
    line-height: 1.5;
}

/* Post text color - white for dark mode, black for light mode */
[data-theme="dark"] .mainSection.publicProfile .post p,
body[data-theme="dark"] .mainSection.publicProfile .post p {
    color: #ffffff !important;
}

[data-theme="light"] .mainSection.publicProfile .post p,
body:not([data-theme="dark"]) .mainSection.publicProfile .post p {
    color: #000000 !important;
}

.mainSection.publicProfile .post .images {
    background: #000;
    position: relative;
}

.mainSection.publicProfile .post .images .intro_add_video_box {
    position: relative;
    background: #000;
}

.mainSection.publicProfile .post .images .intro_add_video_box_img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

.mainSection.publicProfile .post .images {
    overflow: hidden;
    max-height: 100%;
    height: 100%;
}

.mainSection.publicProfile .post .images .carousel {
    background: #000;
}

.mainSection.publicProfile .post .images .carousel-inner {
    background: #000;
}

.mainSection.publicProfile .post .images .carousel-item {
    background: #000;
    display: block !important;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    min-height: 200px;
}

.mainSection.publicProfile .post .images .carousel-item.active {
    opacity: 1 !important;
    display: block !important;
}

.mainSection.publicProfile .post .images .carousel-item {
    background: #000;
    display: block !important;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.mainSection.publicProfile .post .images .carousel-item.active {
    opacity: 1 !important;
    display: block !important;
}

.mainSection.publicProfile .post .images .carousel-item img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block !important;
    visibility: visible !important;
}

.mainSection.publicProfile .post .images .carousel-item img.loaded {
    opacity: 1 !important;
}

/* Hide broken images */
.mainSection.publicProfile .post .images .carousel-item img[src=""],
.mainSection.publicProfile .post .images .carousel-item img:not([src]),
.mainSection.publicProfile .post .images .carousel-item img[src*="default"][src*="loading"] {
    display: none !important;
}

/* Hide images that failed to load after all fallbacks */
.mainSection.publicProfile .post .images .carousel-item img.broken-image {
    display: none !important;
}

.mainSection.publicProfile .post .images .carousel-item .video-container {
    display: block !important;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.mainSection.publicProfile .post .images .carousel-item .video-container img,
.mainSection.publicProfile .post .images .carousel-item .video-container video {
    display: block !important;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    visibility: visible !important;
}

.mainSection.publicProfile .post .images .carousel-inner {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.mainSection.publicProfile .post .images .carousel-control-prev,
.mainSection.publicProfile .post .images .carousel-control-next {
    background: rgba(0,0,0,0.5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.mainSection.publicProfile .post .images .carousel-control-prev {
    left: 10px;
}

.mainSection.publicProfile .post .images .carousel-control-next {
    right: 10px;
}

.mainSection.publicProfile .post .images .carousel-indicators {
    bottom: 10px;
}

.mainSection.publicProfile .post .images .carousel-indicators button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    margin: 0 4px;
}

.mainSection.publicProfile .post .images .carousel-indicators button.active {
    background: white;
}

.mainSection.publicProfile .post .engage {
    padding: 12px 15px;
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 10;
    border-top: none !important;
    margin-bottom: 0;
    background: transparent !important;
}

.mainSection.publicProfile .post .engage button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}

.mainSection.publicProfile .post .engage button img {
    width: 20px;
    height: 20px;
}

.mainSection.publicProfile .post .engage button:hover {
    opacity: 0.8;
}

/* Owner Tip Count Display - Match tip button styling */
.mainSection.publicProfile .post .engage .tip_count_display.owner_tip_display {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 14px;
    color: var(--text-primary, #ffffff);
    padding: 0;
    background: transparent;
    border: none;
    cursor: default;
    pointer-events: none;
}

.mainSection.publicProfile .post .engage .tip_count_display.owner_tip_display img {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

.mainSection.publicProfile .post .engage .tip_count_display.owner_tip_display .tip_count {
    font-size: 16px;
    color: var(--text-primary, #ffffff);
}

.mainSection.publicProfile .post .hidden_comment {
    padding: 10px 15px;
    margin-top: -5px;
    border-top: 1px solid #333;
}

.mainSection.publicProfile .post .hidden_comment_input_box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.mainSection.publicProfile .post .hidden_comment_input_box textarea {
    flex: 1;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 20px;
    padding: 10px 15px;
    color: white;
    resize: none;
    outline: none;
}

.mainSection.publicProfile .post .hidden_comment_input_box textarea::placeholder {
    color: #888;
}

.mainSection.publicProfile .post .hidden_comment_input_box button {
    background: #007bff;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mainSection.publicProfile .post .hidden_comment_input_box button img {
    width: 16px;
    height: 16px;
}

/* Font Awesome icon fixes for feed comments */
.mainSection.publicProfile .post .hidden_comment_input_box button .fa,
.mainSection.publicProfile .post .hidden_comment_input_box button .far,
.mainSection.publicProfile .post .hidden_comment_input_box button .fas,
.mainSection.publicProfile .post .hidden_comment_input_box button .fal,
.mainSection.publicProfile .post .hidden_comment_input_box button .fab,
.mainSection.publicProfile .post .hidden_comment_input_box button .fa-solid,
.mainSection.publicProfile .post .hidden_comment_input_box button .fa-regular,
.mainSection.publicProfile .post .hidden_comment_input_box button .fa-brands,
.hidden_comment_input_box button .fa,
.hidden_comment_input_box button .far,
.hidden_comment_input_box button .fas,
.hidden_comment_input_box button .fal,
.hidden_comment_input_box button .fab,
.new-add-cls-textarea button .fa,
.new-add-cls-textarea button .far,
.new-add-cls-textarea button .fas,
button.commentsubmit .fa,
button.commentsubmit .far,
button.commentsubmit .fas {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.mainSection.publicProfile .post .hidden_comment_input_box button .far,
.hidden_comment_input_box button .far,
.new-add-cls-textarea button .far,
button.commentsubmit .far {
    font-weight: 400 !important;
}

/* Paper plane icon specific fix */
.mainSection.publicProfile .post .hidden_comment_input_box button .fa-paper-plane:before,
.mainSection.publicProfile .post .hidden_comment_input_box button .fas.fa-paper-plane:before,
.hidden_comment_input_box button .fa-paper-plane:before,
.hidden_comment_input_box button .fas.fa-paper-plane:before,
.new-add-cls-textarea button .fa-paper-plane:before,
.new-add-cls-textarea button .fas.fa-paper-plane:before,
button.commentsubmit .fa-paper-plane:before,
button.commentsubmit .fas.fa-paper-plane:before {
    content: "\f1d8" !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.mainSection.publicProfile .post .hidden_comment_input_box button .fa-paper-plane,
.mainSection.publicProfile .post .hidden_comment_input_box button .fas.fa-paper-plane,
.hidden_comment_input_box button .fa-paper-plane,
.hidden_comment_input_box button .fas.fa-paper-plane,
.new-add-cls-textarea button .fa-paper-plane,
.new-add-cls-textarea button .fas.fa-paper-plane,
button.commentsubmit .fa-paper-plane,
button.commentsubmit .fas.fa-paper-plane {
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Ensure video container has relative positioning for absolute close button */
.intro_add_video_box {
    position: relative !important;
}

/* Close Video Button - Top Right Corner of Feed Post */
.intro_add_video_box .close_video {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    font-size: 20px !important;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.intro_add_video_box .close_video:hover {
    background: rgba(0, 0, 0, 0.8) !important;
    transform: scale(1.1) !important;
}

.intro_add_video_box .close_video i {
    font-size: 16px !important;
    color: #fff !important;
    font-weight: 900 !important;
}

.mainSection.publicProfile .post .feed_paid_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.mainSection.publicProfile .post .feed_paid_icon .main-img-icon {
    margin-bottom: 20px;
}

.mainSection.publicProfile .post .feed_paid_icon .img-icon-center {
    width: 60px;
    height: 60px;
    opacity: 0.8;
}

.mainSection.publicProfile .post .feed_paid_icon .suscribeunlock,
.mainSection.publicProfile .post .feed_paid_icon .pay_for_post {
    background: #007bff;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px auto;
    font-size: 14px;
}

.mainSection.publicProfile .post .feed_paid_icon .suscribeunlock:hover,
.mainSection.publicProfile .post .feed_paid_icon .pay_for_post:hover {
    background: #0056b3;
}

.mainSection.publicProfile .post .feed_paid_icon .suscribeunlock img,
.mainSection.publicProfile .post .feed_paid_icon .pay_for_post img {
    width: 16px;
    height: 16px;
}

.mainSection.publicProfile .post .subscribe_bt_main1 {
    filter: blur(20px);
    position: relative;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
}

.mainSection.publicProfile .post .subscribe_bt_main1 .feed_paid_icon {
    filter: none;
}

/* Premium Post Styling */
.premium-post-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 90%;
    text-align: center;
    pointer-events: none;
}

.premium-post-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    margin-bottom: 12px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    pointer-events: auto;
}

.premium-post-indicator .token-icon {
    font-size: 16px;
    color: #ffd700;
}

.premium-post-indicator .exclusive-text {
    color: var(--text-primary);
    font-weight: 600;
}

.payment-action-section {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    width: 100%;
    pointer-events: auto;
}

.purchase-post-btn,
.purchase-btn {
    background: linear-gradient(135deg, #007bff 0%, #6f42c1 100%);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    text-transform: none;
    pointer-events: auto;
}

.purchase-post-btn:hover,
.purchase-btn:hover {
    background: linear-gradient(135deg, #0056b3 0%, #5a2d91 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

.purchase-post-btn:active,
.purchase-btn:active {
    transform: translateY(0);
}

.purchase-post-btn i,
.purchase-btn i {
    font-size: 18px;
}

.purchase-post-btn:disabled,
.purchase-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Blurred content overlay effect */
.premium-blur-overlay {
    position: relative;
    overflow: hidden;
}

.premium-blur-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
    pointer-events: none;
}

/* Premium post badge styling */
.post-visibility-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    color: #ffd700;
    font-size: 12px;
    font-weight: 600;
}

.payment-badge i {
    font-size: 14px;
}

.exclusive-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(111, 66, 193, 0.15);
    border: 1px solid rgba(111, 66, 193, 0.3);
    border-radius: 6px;
    color: #9d7feb;
    font-size: 12px;
    font-weight: 600;
}

.exclusive-badge i {
    font-size: 14px;
}

/* Responsive Premium Post Design */
@media (max-width: 768px) {
    .premium-post-indicator {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .purchase-post-btn,
    .purchase-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .payment-badge,
    .exclusive-badge {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* Ensure premium posts are properly styled */
.post .images .intro_add_video_box.subscribe_bt_main1 {
    filter: blur(20px) !important;
    -webkit-filter: blur(20px) !important;
    transition: filter 0.3s ease;
}

.post .images .intro_add_video_box.subscribe_bt_main1 img,
.post .images .intro_add_video_box.subscribe_bt_main1 video {
    filter: blur(20px) !important;
    -webkit-filter: blur(20px) !important;
}

/* Ensure engagement buttons are NOT blurred - Must override any parent blur */
.post .engage,
.post .engage *,
.post .engage button,
.post .engage button *,
.post .engage img,
.post .engage span,
.post .engage .like_commentbtn,
.post .engage .show_comment,
.post .engage .share_btn,
.post .engage .tip_btn,
.post .engage .tip_count_display.owner_tip_display {
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -o-filter: none !important;
    -ms-filter: none !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure engagement buttons are always on top */
.post .engage {
    position: relative;
    z-index: 100;
    background: transparent !important;
    margin-top: 0;
}

/* Ensure premium post container elements are not blurred */
.premium-post-container,
.premium-post-container *,
.premium-post-indicator,
.premium-post-indicator *,
.payment-action-section,
.payment-action-section *,
.purchase-post-btn,
.purchase-btn {
    filter: none !important;
    -webkit-filter: none !important;
    pointer-events: auto !important;
}

/* Video specific styling */
.mainSection.publicProfile .post .video-container {
    position: relative;
    background: #000;
}

/* Video thumbnail container - Instagram/YouTube style */
.video-thumbnail-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.video-thumbnail-container .video-thumbnail {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.video-thumbnail-container .video-player {
    width: 100%;
    height: auto;
    display: none;
    object-fit: contain;
}

.video-thumbnail-container:hover .video-play-overlay .play-button {
    background: rgba(0,0,0,0.8);
    transform: scale(1.1);
}

.mainSection.publicProfile .post .video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}

.mainSection.publicProfile .post .play-button {
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;
}

.mainSection.publicProfile .post .play-button i {
    color: white;
    font-size: 24px;
    margin-left: 4px;
}

.mainSection.publicProfile .post .main-timer-flex {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.mainSection.publicProfile .post .play_icon_temp {
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mainSection.publicProfile .post .play_icon_temp img {
    width: 30px;
    height: 30px;
}

.mainSection.publicProfile .post .main-timer {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10;
}

.mainSection.publicProfile .post .main-timer label {
    margin: 0;
    color: white;
}

/* Timer styling for dashboard feed */
.mainSection .post.gallery .main-timer {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10;
    pointer-events: none;
}

.mainSection .post.gallery .main-timer label {
    margin: 0;
    color: white;
}

/* Video processing styling */
.mainSection.publicProfile .post .video-processing-container {
    position: relative;
    background: #000;
    border-radius: 8px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainSection.publicProfile .post .processing-content {
    text-align: center;
    color: white;
}

.mainSection.publicProfile .post .processing-content .spinner-border {
    width: 3rem;
    height: 3rem;
}

.mainSection.publicProfile .post .processing-content h5 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.mainSection.publicProfile .post .processing-content p {
    margin-bottom: 0;
}

.mainSection.publicProfile .post .processing-content small {
    color: var(--text-secondary);
}

/* Add Post Section Styling */
.createPost {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.createPost input[type="text"] {
    flex: 1;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 15px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
}

.createPost input[type="text"]:focus {
    border-color: #007bff;
}

.createPost input[type="text"]::placeholder {
    color: var(--text-secondary);
}

.createPost button {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

.createPost button:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.createPost button img {
    width: 20px;
    height: 20px;
}

/* Dark mode image filter */
.createPost button img {
    filter: invert(1);
}

/* Light mode image filter - will be overridden by theme.css */
[data-theme="light"] .createPost button img {
    filter: invert(0);
}

.createPost .addpost {
    background: #007bff;
    border-color: #0056b3;
    color: white;
    font-weight: 600;
    padding: 12px 20px;
    font-size: 14px;
}

.createPost .addpost:hover {
    background: #0056b3;
    border-color: #004085;
}

.createPost .addpost:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.createPost .addpost.loading {
    position: relative;
    color: transparent;
}

.createPost .addpost.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

/* ========================================
   CUSTOM ALERT/NOTIFICATION STYLING
   ======================================== */
.custom-alert {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    z-index: 10001 !important;
    max-width: 400px !important;
    min-width: 300px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-left: 4px solid !important;
    /* Animation will be applied via inline style or class - don't force it here */
}

/* Dark mode - Custom alerts */
.custom-alert.success {
    background: rgba(40, 167, 69, 0.9) !important;
    color: #ffffff !important;
    border-left-color: #28a745 !important;
}

.custom-alert.error {
    background: rgba(220, 53, 69, 0.9) !important;
    color: #ffffff !important;
    border-left-color: #dc3545 !important;
}

.custom-alert.info {
    background: rgba(23, 162, 184, 0.9) !important;
    color: #ffffff !important;
    border-left-color: #17a2b8 !important;
}

.custom-alert.warning {
    background: rgba(255, 193, 7, 0.9) !important;
    color: #000000 !important;
    border-left-color: #ffc107 !important;
}

/* Light mode - Custom alerts */
[data-theme="light"] .custom-alert {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .custom-alert.success {
    background: #28a745 !important;
    color: #ffffff !important;
    border-left-color: #1e7e34 !important;
}

[data-theme="light"] .custom-alert.error {
    background: #dc3545 !important;
    color: #ffffff !important;
    border-left-color: #c82333 !important;
}

[data-theme="light"] .custom-alert.info {
    background: #17a2b8 !important;
    color: #ffffff !important;
    border-left-color: #138496 !important;
}

[data-theme="light"] .custom-alert.warning {
    background: #ffc107 !important;
    color: #000000 !important;
    border-left-color: #e0a800 !important;
}

/* ========================================
   SWEETALERT (SWAL) STYLING - DARK & LIGHT MODE
   ======================================== */

/* Dark mode - SweetAlert modal (default) - Preserve animations */
.swal-modal,
.swal2-popup {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    /* Don't override: display, opacity, transform, animation, transition - let SweetAlert handle these */
}

.swal-modal .swal-title,
.swal2-popup .swal2-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.swal-modal .swal-text,
.swal2-popup .swal2-content,
.swal2-popup .swal2-html-container {
    color: #e0e0e0 !important;
}

.swal-modal .swal-button,
.swal2-popup .swal2-confirm {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    /* Don't override transform - let hover work naturally */
}

.swal-modal .swal-button:hover,
.swal2-popup .swal2-confirm:hover {
    background-color: #0198D4 !important;
    box-shadow: 0 4px 12px rgba(1, 173, 241, 0.3) !important;
}

.swal-modal .swal-button--cancel,
.swal2-popup .swal2-cancel {
    background-color: #404040 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    transition: background-color 0.3s ease !important;
}

.swal-modal .swal-button--cancel:hover,
.swal2-popup .swal2-cancel:hover {
    background-color: #505050 !important;
}

.swal-modal .swal-icon--success,
.swal2-popup .swal2-icon.swal2-success {
    border-color: #28a745 !important;
}

.swal-modal .swal-icon--error,
.swal2-popup .swal2-icon.swal2-error {
    border-color: #dc3545 !important;
}

.swal-modal .swal-icon--warning,
.swal2-popup .swal2-icon.swal2-warning {
    border-color: #ffc107 !important;
}

.swal-modal .swal-icon--info,
.swal2-popup .swal2-icon.swal2-info {
    border-color: #17a2b8 !important;
}

/* Light mode - SweetAlert modal - Preserve animations */
[data-theme="light"] .swal-modal,
[data-theme="light"] .swal2-popup {
    background-color: #ffffff !important;
    color: #212529 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    /* Don't override: display, opacity, transform, animation, transition - let SweetAlert handle these */
}

[data-theme="light"] .swal-modal .swal-title,
[data-theme="light"] .swal2-popup .swal2-title {
    color: #212529 !important;
}

[data-theme="light"] .swal-modal .swal-text,
[data-theme="light"] .swal2-popup .swal2-content,
[data-theme="light"] .swal2-popup .swal2-html-container {
    color: #495057 !important;
}

[data-theme="light"] .swal-modal .swal-button,
[data-theme="light"] .swal2-popup .swal2-confirm {
    background-color: #01ADF1 !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

[data-theme="light"] .swal-modal .swal-button:hover,
[data-theme="light"] .swal2-popup .swal2-confirm:hover {
    background-color: #0198D4 !important;
    box-shadow: 0 4px 12px rgba(1, 173, 241, 0.25) !important;
}

[data-theme="light"] .swal-modal .swal-button--cancel,
[data-theme="light"] .swal2-popup .swal2-cancel {
    background-color: #6c757d !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease !important;
}

[data-theme="light"] .swal-modal .swal-button--cancel:hover,
[data-theme="light"] .swal2-popup .swal2-cancel:hover {
    background-color: #5a6268 !important;
}

/* SweetAlert overlay - Preserve animation */
.swal-overlay,
.swal2-backdrop-show {
    background-color: rgba(0, 0, 0, 0.6) !important;
    /* Don't override opacity, transition, animation - let SweetAlert handle animations */
}

[data-theme="light"] .swal-overlay,
[data-theme="light"] .swal2-backdrop-show {
    background-color: rgba(0, 0, 0, 0.4) !important;
}


.custom-alert .alert-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.custom-alert .alert-message {
    flex: 1;
}

.custom-alert .alert-close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.custom-alert .alert-close:hover {
    opacity: 1;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Post Options Styling - Inline */
.post-options {
    display: none;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin-top: 15px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    animation: slideDown 0.3s ease;
}

.post-options.active {
    display: block;
}

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

.media-preview {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    position: relative;
    color: var(--text-primary);
}

.preview-content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.preview-content img,
.preview-content video {
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.remove-media {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #dc3545;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}

.remove-media:hover {
    background: #c82333;
}

/* Upload Progress Indicators */
.post-upload-status {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
    color: white;
    backdrop-filter: blur(10px);
}

.post-upload-status.above-post-form {
    background: rgba(29, 161, 242, 0.1);
    border: 2px solid #1da1f2;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0;
    box-shadow: 0 4px 16px rgba(29, 161, 242, 0.2);
    animation: pulseGlow 2s ease-in-out infinite alternate;
}

.post-upload-status.above-post-form .post-upload-text {
    color: #1da1f2;
    font-weight: 500;
}

.post-upload-status.above-post-form .post-upload-icon {
    font-size: 18px;
}

.post-upload-status.above-post-form .post-upload-bar {
    width: 80px;
    height: 8px;
    background: rgba(29, 161, 242, 0.2);
}

.post-upload-status.above-post-form .post-upload-fill {
    background: linear-gradient(90deg, #1da1f2, #0d8bd9, #1da1f2);
    background-size: 200% 100%;
    animation: shimmer 2s ease-in-out infinite;
}

.post-upload-status.above-post-form .post-upload-percent {
    color: #1da1f2;
    font-weight: 600;
    font-size: 12px;
}

.mainFeed .post-upload-status.above-post-form {
    margin-top: 0;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(29, 161, 242, 0.15) 0%, rgba(156, 39, 176, 0.15) 100%);
    border: 2px solid #1da1f2;
    box-shadow: 0 6px 25px rgba(29, 161, 242, 0.3);
    animation: slideDownProgress 0.4s ease-out, pulseGlow 2s ease-in-out infinite alternate 0.4s;
    position: relative;
    z-index: 10;
}

.post-upload-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.post-upload-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.post-upload-icon {
    font-size: 16px;
}

.post-upload-text {
    font-size: 13px;
    color: #ccc;
}

.post-upload-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 80px;
}

.post-upload-bar {
    width: 60px;
    height: 6px;
    background: #333;
    border-radius: 3px;
    overflow: hidden;
}

.post-upload-fill {
    height: 100%;
    background: linear-gradient(90deg, #1da1f2, #0d8bd9);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.post-upload-percent {
    font-size: 11px;
    color: #1da1f2;
    font-weight: 500;
    min-width: 30px;
}

.post-upload-status.upload-complete {
    background: rgba(29, 161, 242, 0.1);
    border-color: #1da1f2;
}

.post-upload-status.upload-complete .post-upload-text {
    color: #1da1f2;
}

.post-upload-status.upload-failed {
    background: rgba(220, 53, 69, 0.1);
    border-color: #dc3545;
}

.post-upload-status.upload-failed .post-upload-text {
    color: #dc3545;
}

.post-upload-status.above-post-form.upload-complete {
    background: rgba(40, 167, 69, 0.1);
    border-color: #28a745;
    animation: none;
}

.post-upload-status.above-post-form.upload-complete .post-upload-text {
    color: #28a745;
}

@keyframes pulseGlow {
    from {
        box-shadow: 0 4px 16px rgba(29, 161, 242, 0.2);
        border-color: #1da1f2;
    }
    to {
        box-shadow: 0 8px 24px rgba(29, 161, 242, 0.4);
        border-color: #0d8bd9;
    }
}

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

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

.post-settings {
    margin-bottom: 20px;
}

.settings-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 12px;
    padding: 16px;
    background: var(--bg-primary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.visibility-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
}

.section-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: block;
    width: 100%;
}

.visibility-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.checkbox-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    gap: 6px;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    width: 100%;
}

.checkbox-label:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.checkbox-label.visibility-toggle {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 14px;
    margin-bottom: 8px;
    gap: 12px;
}

.checkbox-label.visibility-toggle:last-of-type {
    margin-bottom: 0;
}

.checkbox-label.visibility-toggle input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: #007bff;
    cursor: pointer;
}

.checkbox-label.visibility-toggle .checkmark {
    display: none;
}

.visibility-option-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    flex: 1;
    margin-left: 0;
}

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

.visibility-badge,
.purchase-badge {
    font-size: 18px;
    flex-shrink: 0;
}

.checkbox-label.visibility-toggle .option-description {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 4px;
    margin-left: 30px;
    display: block;
    width: calc(100% - 30px);
    line-height: 1.4;
}

.visibility-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-primary);
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(0, 123, 255, 0.15);
    border-radius: 8px;
    width: 100%;
}

.visibility-note::before {
    content: "💡";
    font-size: 14px;
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: #007bff;
}

.premium-badge,
.purchase-badge {
    font-size: 16px;
}

.token-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
    width: 100%;
}

.token-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.token-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
}

.token-input input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    outline: none;
    flex: 1;
    font-size: 14px;
}

.token-input input::placeholder {
    color: var(--text-secondary);
}

.token-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.hashtag-input {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 8px 12px;
}

.hashtag-input input {
    background: transparent;
    border: none;
    color: white;
    outline: none;
    flex: 1;
}

.hashtag-input input::placeholder {
    color: #888;
}

.hashtag-icon {
    color: #007bff;
    font-weight: bold;
}

/* User Selection Styles */
.user-selection-section {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    width: 100%;
}

.user-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    width: 100%;
    gap: 12px;
}

.user-selection-header .checkbox-label.visibility-toggle {
    flex: 1;
    margin-bottom: 0;
}

.select-all-btn {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.select-all-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--text-primary);
    transform: translateY(-1px);
}

.user-list {
    margin-top: 12px;
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    padding: 12px;
    display: none;
    width: 100%;
}

.user-list.active {
    display: block;
    width: 100%;
}

/* Custom scrollbar for user list */
.user-list::-webkit-scrollbar {
    width: 6px;
}

.user-list::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.user-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.user-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.user-search {
    padding: 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

.user-search input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.user-search input:focus {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.user-search input::placeholder {
    color: var(--text-secondary);
}

.users-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    padding: 0;
}

.user-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    position: relative;
}

.user-item:hover {
    background: var(--bg-primary);
    border-color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.user-item.selected {
    background: rgba(0, 123, 255, 0.1);
    border-color: #007bff;
}

.user-item input[type="checkbox"] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #007bff;
    z-index: 1;
}

.user-avatar {
    width: 50px !important;
    height: 100px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    margin-bottom: 8px;
    object-fit: cover !important;
    border: 2px solid var(--border-color);
    transition: border-color 0.3s ease;
    overflow: hidden !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.user-item:hover .user-avatar,
.user-item.selected .user-avatar {
    border-color: #007bff;
}

.user-info {
    width: 100%;
    text-align: center;
}

.user-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 12px;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.user-username {
    color: var(--text-secondary);
    font-size: 10px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.audience-badge {
    margin-left: 8px;
    font-size: 18px;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .createPost {
        flex-direction: column;
        gap: 15px;
    }
    
    .createPost input[type="text"] {
        width: 100%;
    }
    
    .createPost button {
        width: 100%;
        justify-content: center;
    }
    
    .settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .user-selection-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .users-container {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 10px;
    }
    
    .user-item {
        min-width: 70px;
        padding: 10px 6px;
    }
    
    .user-avatar {
        width: 40px;
        height: 40px;
    }
    
    .user-name {
        font-size: 11px;
    }
    
    .user-username {
        font-size: 9px;
    }
    
    .select-all-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
}

/* ========================================
   THEME SYSTEM - DARK/LIGHT MODE SUPPORT
   ======================================== */

/* CSS Variables for Theme Colors */
:root {
    --empty-state-bg: #f8f9fa;
    --empty-state-text: #6c757d;
    --empty-state-text-secondary: #868e96;
    --empty-state-border: #dee2e6;
    --empty-state-tips-bg: #495057;
    --theme-toggle-bg: rgba(255, 255, 255, 0.1);
    --theme-toggle-hover: rgba(255, 255, 255, 0.2);
}

/* Dark Theme Variables */
[data-theme="dark"] {
    --empty-state-bg: #2a2a2a;
    --empty-state-text: #e9ecef;
    --empty-state-text-secondary: #adb5bd;
    --empty-state-border: #495057;
    --empty-state-tips-bg: #6c757d;
    --theme-toggle-bg: rgba(0, 0, 0, 0.2);
    --theme-toggle-hover: rgba(0, 0, 0, 0.3);
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: var(--theme-toggle-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

.theme-toggle-btn:hover {
    background: var(--theme-toggle-hover) !important;
    transform: scale(1.1) !important;
}

[data-theme="dark"] .theme-toggle-btn {
    background: var(--theme-toggle-bg) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background: var(--theme-toggle-hover) !important;
}

[data-theme="light"] .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* Empty State Styling */
.empty-feed-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--empty-state-bg);
    border-radius: 12px;
    margin: 20px 0;
    transition: all 0.3s ease;
}

.empty-state-icon {
    margin-bottom: 20px;
}

.empty-state-icon img {
    width: 80px;
    height: 80px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.empty-state-title {
    color: var(--empty-state-text);
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 1.5rem;
}

.empty-state-description {
    color: var(--empty-state-text-secondary);
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.5;
}

.empty-state-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.empty-state-actions .btn {
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.empty-state-actions .btn i {
    margin-right: 8px;
}

.empty-state-tips {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--empty-state-border);
}

.tips-title {
    color: var(--empty-state-tips-bg);
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.tips-list {
    color: var(--empty-state-text-secondary);
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
    padding-left: 20px;
}

.tips-list li {
    margin-bottom: 8px;
}

/* Theme Icon Transitions */
#theme-icon {
    transition: all 0.3s ease;
    font-size: 18px !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

[data-theme="dark"] #theme-icon {
    color: #ffd700 !important; /* Gold color for dark theme */
}

[data-theme="light"] #theme-icon {
    color: #333 !important; /* Dark color for light theme */
}

/* Ensure theme toggle is visible on mobile */
@media (max-width: 768px) {
    .theme-toggle-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-right: 10px !important;
    }
}

/* Smooth Theme Transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Pin icon styling - ensure visibility and proper sizing */
.pin-icon,
.time .pin-icon,
.postHeader .time .pin-icon,
.postHeader .time img[src*="pin.png"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-right: 4px !important;
}

/* Mobile responsive pin icon */
@media screen and (max-width: 768px) {
    .pin-icon,
    .time .pin-icon,
    .postHeader .time .pin-icon,
    .postHeader .time img[src*="pin.png"] {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media screen and (max-width: 576px) {
    .pin-icon,
    .time .pin-icon,
    .postHeader .time .pin-icon,
    .postHeader .time img[src*="pin.png"] {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
    }
}

@media screen and (max-width: 480px) {
    .pin-icon,
    .time .pin-icon,
    .postHeader .time .pin-icon,
    .postHeader .time img[src*="pin.png"] {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
    }
}

/* Responsive Styling */
@media (max-width: 768px) {
    .post-options {
        padding: 16px;
    }
    
    .checkbox-label.visibility-toggle {
        padding: 12px;
    }
    
    .settings-row {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .post-options {
        padding: 14px;
    }
    
    .section-title {
        font-size: 14px;
    }
    
    .label-text {
        font-size: 13px;
    }
    
    .option-description {
        font-size: 11px;
    }
}

/* ========================================
   MOBILE RESPONSIVE DESIGN - DASHBOARD FEED
   ======================================== */

/* Search Bar - Hidden by default (Desktop) */
.mobile-search-row {
    display: none !important;
}

@media (max-width: 768px) {
    /* Search Bar - Mobile Only */
    .mobile-search-row {
        display: flex !important;
        width: 100% !important;
        position: relative !important;
        z-index: 1 !important; /* Lower z-index to ensure dropdown appears above */
        align-items: center !important;
        margin-bottom: 1rem !important;
    }
    
    .mobile-search-row input {
        width: 100% !important;
        font-size: 0.875rem !important;
        padding: 0.5rem 2.5rem 0.5rem 2.5rem !important;
        background: var(--bg-secondary, #0E1012) !important;
        border: none !important;
        border-radius: 50px !important;
        color: var(--text-primary, #ffffff) !important;
    }
    
    .mobile-search-row input::placeholder {
        color: var(--text-muted, #5D5D5D) !important;
    }
    
    .mobile-search-row button[type="submit"] {
        position: absolute !important;
        left: 0.75rem !important;
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        z-index: 1 !important;
    }
    
    .mobile-search-row button[type="submit"] img {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Main Section Layout */
    .mainSection.publicProfile.creatorView {
        flex-direction: column;
        padding: 0;
    }
    
    .mainSection .mainFeed.middleSec {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        margin: 0 !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }
    
    /* Create Post Section - Match Image Design (Horizontal Layout) */
    .createPost {
        position: relative !important;
        z-index: 1 !important; /* Lower z-index to ensure dropdown appears above */
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px !important;
        padding-left: 36px !important;
        padding-right: 8px !important;
        margin-bottom: 1rem !important;
        border-radius: 50px !important;
        background: var(--bg-secondary, #0E1012) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .createPost input[type="text"] {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        font-size: 16px !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-muted, #5D5D5D) !important;
        margin-right: auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .createPost input[type="text"]::placeholder {
        color: var(--text-muted, #5D5D5D) !important;
    }
    
    .createPost button:not(.addpost) {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--bg-primary, #15191C) !important;
        border: 0 !important;
        border-radius: 100% !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
    }
    
    .createPost button:not(.addpost) img {
        width: auto !important;
        height: auto !important;
    }
    
    .createPost .addpost {
        padding: 14px 24px !important;
        font-size: 20px !important;
        border-radius: 50px !important;
        background: var(--gradient-primary, linear-gradient(270deg, #A61651 0%, #01ADF1 100%)) !important;
        color: var(--text-primary, #ffffff) !important;
        border: 0 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        min-width: fit-content !important;
        max-width: none !important;
        margin-top: 0 !important;
        cursor: pointer !important;
    }
    
    /* Post Options */
    .post-options {
        padding: 1rem !important;
        margin: 1rem 0 !important;
        border-radius: 12px !important;
    }
    
    .post-settings {
        padding: 0 !important;
    }
    
    .settings-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 0.75rem 0 !important;
    }
    
    .checkbox-label.visibility-toggle {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    .section-title {
        font-size: 0.9rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .label-text {
        font-size: 0.85rem !important;
    }
    
    .option-description {
        font-size: 0.75rem !important;
    }
    
    /* Stories Section - Fully Responsive */
    .mainSection .mainFeed .stories {
        display: flex !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
        padding: 0.5rem 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .mainSection .mainFeed .stories::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }
    
    .mainSection .mainFeed .stories .story,
    .mainSection .mainFeed .stories .add {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
        max-width: 70px !important;
        max-height: 70px !important;
        flex-shrink: 0 !important;
        border-radius: 12px !important;
    }
    
    .mainSection .mainFeed .stories .add {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem !important;
    }
    
    .mainSection .mainFeed .stories .add img {
        width: 24px !important;
        height: 24px !important;
        margin-bottom: 0.25rem !important;
    }
    
    .mainSection .mainFeed .stories .add p {
        font-size: 0.65rem !important;
        margin: 0 !important;
        margin-top: 0.25rem !important;
        text-align: center !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    
    .mainSection .mainFeed .stories .story {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        position: relative !important;
        cursor: pointer !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding: 0.5rem !important;
        overflow: hidden !important;
    }
    
    .mainSection .mainFeed .stories .story::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 12px !important;
        background: linear-gradient(180deg, rgba(14, 16, 18, 0) 44%, rgba(14, 16, 18, 0.88) 80%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
    
    .mainSection .mainFeed .stories .story img,
    .mainSection .mainFeed .stories .story p {
        position: relative !important;
        z-index: 2 !important;
    }
    
    .mainSection .mainFeed .stories .story img {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        margin-bottom: 0.25rem !important;
    }
    
    .mainSection .mainFeed .stories .story p {
        font-size: 0.65rem !important;
        color: white !important;
        text-align: center !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    
    /* Posts */
    .mainSection .post.gallery {
        margin-bottom: 1rem !important;
        border-radius: 12px !important;
        padding: 0.75rem !important;
    }
    
    .mainSection .post.gallery:has(.images:not(:empty)):not(.text-only-post) {
        min-height: auto !important;
        height: auto !important;
    }
    
    .mainSection .post.gallery .postHeader {
        padding: 0.5rem 0 !important;
        margin-bottom: 0.75rem !important;
    }
    
    .mainSection .post.gallery .postHeader .pfp {
        width: 40px !important;
        height: 40px !important;
    }
    
    .mainSection .post.gallery .postHeader .pfp img {
        width: 40px !important;
        height: 40px !important;
    }
    
    .mainSection .post.gallery .postHeader .pfp p {
        font-size: 0.85rem !important;
    }
    
    .mainSection .post.gallery > p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.75rem !important;
        padding: 0 !important;
    }
    
    .mainSection .post.gallery .images {
        margin-bottom: 0.75rem !important;
    }
    
    .mainSection .post.gallery .images img,
    .mainSection .post.gallery .images video {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
        object-fit: contain !important;
        border-radius: 8px !important;
    }
    
    .mainSection .post.gallery .engage {
        padding: 0.75rem 0 !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .mainSection .post.gallery .engage button,
    .mainSection .post.gallery .engage a {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        min-width: auto !important;
    }
    
    .mainSection .post.gallery .engage button img,
    .mainSection .post.gallery .engage a img {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Right Sidebar - Hide on mobile */
    .mainSection .rightsidebar {
        display: none !important;
    }
    
    /* Left Sidebar - Mobile overlay */
    .mainSection .sidebar {
        width: 100% !important;
        max-width: 300px !important;
        position: fixed !important;
        left: -100% !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 2147483647 !important; /* Maximum z-index - above all elements */
        transition: left 0.3s ease !important;
        isolation: isolate !important;
        background: var(--bg-primary, #15191C) !important;
        overflow-y: auto !important;
        filter: none !important; /* Remove any blur */
        backdrop-filter: none !important; /* Remove any backdrop blur */
        will-change: left !important; /* Prevent flutter */
    }
    
    /* Light Mode - Override CSS variable for mobile sidebar */
    [data-theme="light"] .mainSection .sidebar {
        --bg-primary: white !important;
    }
    
    /* Light Mode - Mobile Sidebar (Match Web View) - Maximum Specificity */
    [data-theme="light"] .mainSection .sidebar {
        background: white !important;
        background-color: white !important;
        background-image: none !important;
        border-right: 1px solid #e9ecef !important;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important;
        color: #495057 !important;
    }
    
    /* Override any inline styles or other CSS files - Maximum Specificity */
    [data-theme="light"] body .mainSection .sidebar,
    [data-theme="light"] html body .mainSection .sidebar,
    [data-theme="light"] .mainSection .sidebar[style*="background"],
    [data-theme="light"] .mainSection .sidebar[style*="background-color"],
    [data-theme="light"] .mainSection .sidebar.active {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
    }
    
    /* Override styleNew.css dark background for light mode mobile - Maximum Specificity */
    @media screen and (max-width: 800px) {
        [data-theme="light"] .mainSection .sidebar,
        [data-theme="light"] body .mainSection .sidebar,
        [data-theme="light"] html body .mainSection .sidebar,
        [data-theme="light"] .mainSection .sidebar.active {
            background: white !important;
            background-color: white !important;
            background-image: none !important;
        }
        
        /* Force white background - override all possible selectors */
        [data-theme="light"] .mainSection .sidebar {
            background: white !important;
            background-color: white !important;
        }
    }
    
    /* Override styleNew.css @media (max-width: 768px) dark background */
    @media (max-width: 768px) {
        [data-theme="light"] .mainSection .sidebar,
        [data-theme="light"] body .mainSection .sidebar,
        [data-theme="light"] html body .mainSection .sidebar,
        [data-theme="light"] .mainSection .sidebar.active {
            background: white !important;
            background-color: white !important;
            background-image: none !important;
        }
        
        /* Light Mode - Mobile Sidebar Scrollbar (Match Web View) */
        [data-theme="light"] .mainSection .sidebar {
            scrollbar-color: #adb5bd transparent !important;
        }
        
        [data-theme="light"] .mainSection .sidebar::-webkit-scrollbar {
            width: 6px !important;
        }
        
        [data-theme="light"] .mainSection .sidebar::-webkit-scrollbar-track {
            background: transparent !important;
        }
        
        [data-theme="light"] .mainSection .sidebar::-webkit-scrollbar-thumb {
            background: #adb5bd !important;
            border-radius: 3px !important;
        }
        
        [data-theme="light"] .mainSection .sidebar::-webkit-scrollbar-thumb:hover {
            background: #6c757d !important;
        }
    }
    
    /* FINAL OVERRIDE - Force white background for light mode mobile sidebar - Maximum Specificity */
    @media screen and (max-width: 800px) {
        [data-theme="light"] html body .mainSection .sidebar,
        [data-theme="light"] html body .mainSection .sidebar.active,
        [data-theme="light"] html body .mainSection .sidebar[class],
        [data-theme="light"] html body .mainSection .sidebar[class*="sidebar"] {
            background: #ffffff !important;
            background-color: #ffffff !important;
            background-image: none !important;
        }
    }
    
    @media (max-width: 768px) {
        [data-theme="light"] html body .mainSection .sidebar,
        [data-theme="light"] html body .mainSection .sidebar.active,
        [data-theme="light"] html body .mainSection .sidebar[class],
        [data-theme="light"] html body .mainSection .sidebar[class*="sidebar"] {
            background: #ffffff !important;
            background-color: #ffffff !important;
            background-image: none !important;
        }
    }
    
    /* Light Mode - Mobile Sidebar Links (Match Web View) */
    [data-theme="light"] .mainSection .sidebar a {
        color: #495057 !important;
        text-decoration: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        font-weight: 400 !important;
        border-left: none !important;
        position: relative !important;
        width: auto !important;
        text-align: left !important;
        font-size: 16px !important;
        cursor: pointer !important;
    }
    
    /* Light Mode - Mobile Sidebar Links Hover (Match Web View) */
    [data-theme="light"] .mainSection .sidebar a:hover {
        background-color: transparent !important;
        color: #2196f3 !important;
        transform: none !important;
        border-left: none !important;
    }
    
    /* Light Mode - Mobile Sidebar Links Active (Match Web View) */
    [data-theme="light"] .mainSection .sidebar a.active {
        background-color: transparent !important;
        color: #2196f3 !important;
        font-weight: 400 !important;
        border-left: none !important;
    }
    
    /* Light Mode - Mobile Sidebar Icons (Match Web View) */
    [data-theme="light"] .mainSection .sidebar a img {
        filter: none !important;
        transition: all 0.3s ease !important;
        opacity: 0.7 !important;
        visibility: visible !important;
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Light Mode - Mobile Sidebar Icons First Child (Match Web View) */
    [data-theme="light"] .mainSection .sidebar a img:first-child {
        display: block !important;
        opacity: 0.7 !important;
        visibility: visible !important;
        width: 20px !important;
        height: 20px !important;
        filter: grayscale(100%) brightness(0.7) contrast(1.2) !important;
    }
    
    /* Light Mode - Mobile Sidebar Icons Hover (Match Web View) */
    [data-theme="light"] .mainSection .sidebar a:hover img:first-child,
    [data-theme="light"] .mainSection .sidebar a.active img:first-child {
        filter: grayscale(100%) brightness(0.7) contrast(1.2) !important;
        opacity: 1 !important;
    }
    
    /* Light Mode - Mobile Sidebar Logo (Match Web View) */
    [data-theme="light"] .mainSection .sidebar .logo {
        filter: none !important;
        opacity: 1 !important;
    }
    
    /* Light Mode - Mobile Sidebar Text Colors (Match Web View) */
    [data-theme="light"] .mainSection .sidebar a:not(.active) {
        color: #495057 !important;
    }
    
    [data-theme="light"] .mainSection .sidebar a:hover,
    [data-theme="light"] .mainSection .sidebar a.active {
        color: #2196f3 !important;
    }
    
    /* Light Mode - Mobile Sidebar Icons (i tags) (Match Web View) */
    [data-theme="light"] .mainSection .sidebar a i {
        color: #6c757d !important;
        transition: all 0.3s ease !important;
        opacity: 0.8 !important;
        font-size: 20px !important;
        width: 20px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        display: block !important;
    }
    
    [data-theme="light"] .mainSection .sidebar a:hover i,
    [data-theme="light"] .mainSection .sidebar a.active i {
        color: #2196f3 !important;
        opacity: 1 !important;
    }
    
    /* Light Mode - Mobile Sidebar Images (Match Web View) */
    [data-theme="light"] .mainSection .sidebar a img:not(:first-child) {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    [data-theme="light"] .mainSection .sidebar a img:first-child {
        display: block !important;
        opacity: 0.7 !important;
        visibility: visible !important;
        filter: grayscale(100%) brightness(0.7) contrast(1.2) !important;
    }
    
    [data-theme="light"] .mainSection .sidebar a:hover img:first-child,
    [data-theme="light"] .mainSection .sidebar a.active img:first-child {
        opacity: 1 !important;
        filter: grayscale(100%) brightness(0.7) contrast(1.2) !important;
    }
    
    .mainSection .sidebar.active {
        left: 0 !important;
    }

    /* Sidebar content - ensure no blur */
    .mainSection .sidebar > * {
        filter: none !important;
        backdrop-filter: none !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Sidebar background overlay - covers area outside sidebar */
    .mainSection .sidebar .bg {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: -1 !important; /* Behind sidebar content */
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
        filter: none !important; /* No blur */
        backdrop-filter: none !important; /* No backdrop blur */
        will-change: opacity !important; /* Prevent flutter */
    }

    .mainSection .sidebar.active .bg {
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: -1 !important; /* Still behind sidebar content */
    }
    
    /* Ensure sidebar content is above overlay */
    .mainSection .sidebar > *:not(.bg) {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Ensure sidebar links and content are clickable and don't trigger sidebar close */
    .mainSection .sidebar a,
    .mainSection .sidebar button,
    .mainSection .sidebar img,
    .mainSection .sidebar > *:not(.bg) {
        pointer-events: auto !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* Prevent sidebar from closing when clicking on content */
    .mainSection .sidebar > *:not(.bg) {
        pointer-events: auto !important;
    }
    
    /* Only the bg overlay should close the sidebar */
    .mainSection .sidebar .bg {
        cursor: pointer !important;
    }
    
    /* Mobile Header - Match Image Design Exactly */
    .mobileHeader {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.75rem 1rem !important;
        gap: 0 !important;
        position: relative !important;
        z-index: 2147483645 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: var(--bg-primary, #15191C) !important;
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        isolation: auto !important; /* Changed from isolate to auto to prevent stacking context */
        overflow: visible !important;
    }
    
    /* Ensure mainFeed and containers don't clip the dropdown - allow overflow */
    .mainSection .mainFeed,
    .mainSection .mainFeed.middleSec {
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important; /* Lower z-index to ensure dropdown appears above */
    }
    
    .mainFeedContainer {
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important; /* Lower z-index to ensure dropdown appears above */
    }
    
    /* Ensure mainSection doesn't create stacking context that traps dropdown */
    .mainSection {
        position: relative !important;
        z-index: auto !important;
        isolation: auto !important; /* Prevent stacking context */
    }
    
    /* Ensure mobileHeader doesn't clip dropdown */
    .mobileHeader {
        overflow: visible !important;
    }
    
    /* Ensure headerdropdown container doesn't clip */
    .mobileHeader .headerdropdown,
    .mobileHeader .mobile-user-profile .headerdropdown {
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Override ANY other z-index that might be set - ensure dropdown is above mainFeed */
    body > .dropdownMenu,
    #mobile-profile-dropdown-menu,
    .mobileHeader .headerdropdown .dropdownMenu,
    .mobileHeader .mobile-user-profile .headerdropdown .dropdownMenu {
        z-index: 2147483646 !important; /* Maximum z-index - above mainFeed */
    }
    
    /* Hamburger Menu Button - Left */
    .mobileHeader .mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }
    
    .mobileHeader .mobile-menu-btn img {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* User Profile Section - Extreme Right */
    .mobileHeader .mobile-user-profile {
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 2147483646 !important; /* Just below sidebar, above all other elements */
        margin-left: auto !important;
        margin-right: 0 !important;
        isolation: isolate !important;
    }
    
    .mobileHeader .mobile-user-profile .headerdropdown {
        height: max-content !important; /* EXACTLY LIKE DESKTOP */
        position: relative !important; /* EXACTLY LIKE DESKTOP - relative positioning for absolute children */
        z-index: 2147483646 !important; /* High z-index for mobile to appear above content */
    }
    
    .mobileHeader .mobile-user-profile .dropdownButton {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 4px 8px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        position: relative !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        border-radius: 8px !important;
        justify-content: flex-start !important;
    }
    
    .mobileHeader .mobile-user-profile .dropdownButton input[type="checkbox"] {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        cursor: pointer !important;
        z-index: 1 !important;
        margin: 0 !important;
    }
    
    .mobileHeader .mobile-user-profile .user-profile-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 2px !important;
        margin-right: 8px !important;
        order: 1 !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    
    .mobileHeader .mobile-user-profile .user-name {
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        color: var(--text-primary, #ffffff) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 150px !important;
    }
    
    .mobileHeader .mobile-user-profile .user-handle {
        font-size: 0.75rem !important;
        color: var(--text-muted, #5D5D5D) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 150px !important;
    }
    
    .mobileHeader .mobile-user-profile .dropdownButton > img.pfp {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        order: 2 !important;
    }
    
    .mobileHeader .mobile-user-profile .dropdownButton > img.dropdown-arrow {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
        opacity: 0.7 !important;
        order: 3 !important;
        margin-left: 4px !important;
    }
    
    .mobileHeader .mobile-user-profile .pfp {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: none !important;
        order: 2 !important;
        flex-shrink: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* Ensure mobile profile picture has no focus/hover effects */
    .mobileHeader .mobile-user-profile .pfp:hover,
    .mobileHeader .mobile-user-profile .dropdownButton:hover .pfp,
    .mobileHeader .mobile-user-profile #mobile-profile-button:hover .pfp,
    .mobileHeader .mobile-user-profile .pfp:focus,
    .mobileHeader .mobile-user-profile .pfp:active {
        outline: none !important;
        outline-offset: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    /* Remove focus from mobile dropdown button and profile picture */
    .mobileHeader .mobile-user-profile .dropdownButton:focus-visible,
    .mobileHeader .mobile-user-profile .dropdownButton:focus,
    .mobileHeader .mobile-user-profile #mobile-profile-button:focus-visible,
    .mobileHeader .mobile-user-profile #mobile-profile-button:focus,
    .mobileHeader .mobile-user-profile .dropdownButton:focus-visible .pfp,
    .mobileHeader .mobile-user-profile .dropdownButton:focus .pfp,
    .mobileHeader .mobile-user-profile #mobile-profile-button:focus-visible .pfp,
    .mobileHeader .mobile-user-profile #mobile-profile-button:focus .pfp {
        outline: none !important;
        outline-offset: 0 !important;
        box-shadow: none !important;
    }
    
    /* Remove any focus-like effects on hover for mobile */
    .mobileHeader .mobile-user-profile .dropdownButton:hover,
    .mobileHeader .mobile-user-profile .dropdownButton:hover .pfp,
    .mobileHeader .mobile-user-profile #mobile-profile-button:hover,
    .mobileHeader .mobile-user-profile #mobile-profile-button:hover .pfp,
    .mobileHeader .mobile-user-profile .dropdownButton:active,
    .mobileHeader .mobile-user-profile .dropdownButton:active .pfp,
    .mobileHeader .mobile-user-profile #mobile-profile-button:active,
    .mobileHeader .mobile-user-profile #mobile-profile-button:active .pfp {
        outline: none !important;
        outline-offset: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    .mobileHeader .mobile-user-profile .dropdown-arrow {
        width: 12px !important;
        height: 12px !important;
        margin-left: 0.5rem !important;
        order: 3 !important;
        flex-shrink: 0 !important;
    }
    
    /* Mobile Profile Dropdown - Simple Dialogue Box Below Profile */
    #mobile-profile-dropdown-menu,
    body > #mobile-profile-dropdown-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: fixed !important;
        z-index: 2147483647 !important;
        width: auto !important;
        min-width: 200px !important;
        max-width: calc(100vw - 2rem) !important;
        background: var(--bg-secondary, #0E1012) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 12px !important;
        box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.6) !important;
        flex-direction: column !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        isolation: isolate !important;
    }
    
    #mobile-profile-dropdown-menu.show,
    body > #mobile-profile-dropdown-menu.show {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    #mobile-profile-dropdown-menu a {
        color: var(--text-primary, #ffffff) !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        display: block !important;
        padding: 16px 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        transition: background-color 0.2s ease !important;
    }
    
    #mobile-profile-dropdown-menu a:first-child {
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }
    
    #mobile-profile-dropdown-menu a:last-child {
        border-bottom: none !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }
    
    #mobile-profile-dropdown-menu a:hover {
        background-color: rgba(255, 255, 255, 0.08) !important;
    }
    
    #mobile-profile-dropdown-menu a:active {
        background-color: rgba(255, 255, 255, 0.12) !important;
    }
    
    /* Mobile Profile Button */
    #mobile-profile-button {
        cursor: pointer !important;
    }
    
    /* Theme Toggle - Hidden in header */
    .mobileHeader .mobile-theme-toggle {
        display: none !important;
    }
    
    /* Override headerdropdown styles for mobile header */
    .mobileHeader .mobile-user-profile .headerdropdown .dropdownButton {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }
    
    .mobileHeader .mobile-user-profile .headerdropdown .dropdownButton h2 {
        display: none !important;
    }
    
    /* Background overlay - EXACTLY LIKE DESKTOP from styleNew.css */
    .mobileHeader .mobile-user-profile .headerdropdown .bg,
    .mobileHeader .headerdropdown .bg {
        display: none !important;
        width: 100% !important;
        position: fixed !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 2147483645 !important; /* Just below dropdown menu */
    }
    
    .mobileHeader .mobile-user-profile .headerdropdown:has(input:checked) .bg,
    .mobileHeader .headerdropdown:has(input:checked) .bg {
        display: flex !important; /* EXACTLY LIKE DESKTOP */
    }
    
    
    
    /* Hashtag Input */
    .hashtag-input {
        margin-top: 0.75rem !important;
    }
    
    .hashtag-input input {
        padding: 0.75rem 2rem 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Token Input */
    .token-input {
        margin-top: 0.75rem !important;
    }
    
    .token-input-wrapper {
        padding: 0.75rem !important;
    }
    
    .token-input-wrapper input {
        font-size: 0.875rem !important;
        padding: 0.5rem !important;
    }
    
    /* Media Preview */
    .media-preview {
        margin-bottom: 1rem !important;
        border-radius: 8px !important;
    }
    
    .media-preview img,
    .media-preview video {
        max-height: 300px !important;
        border-radius: 8px !important;
    }
    
    .remove-media {
        width: 32px !important;
        height: 32px !important;
        top: 0.5rem !important;
        right: 0.5rem !important;
    }
}

@media (max-width: 576px) {
    .mainSection .mainFeed.middleSec {
        padding: 0.75rem !important;
    }
    
    .createPost {
        padding: 5px !important;
        padding-left: 15px !important;
        gap: 8px !important;
        margin-bottom: 30px !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }
    
    .createPost input[type="text"] {
        font-size: 16px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    
    .createPost button:not(.addpost) {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        flex-shrink: 0 !important;
    }
    
    .createPost button:not(.addpost) img {
        width: auto !important;
        height: 15px !important;
    }
    
    .createPost .addpost {
        padding: 6px 10px !important;
        font-size: 12px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        max-width: fit-content !important;
        white-space: nowrap !important;
    }
    
    .post-options {
        padding: 0.75rem !important;
    }
    
    .mainSection .post.gallery {
        padding: 0.625rem !important;
    }
    
    .mainSection .post.gallery .postHeader .pfp {
        width: 35px !important;
        height: 35px !important;
    }
    
    .mainSection .post.gallery .postHeader .pfp img {
        width: 35px !important;
        height: 35px !important;
    }
    
    .mainSection .post.gallery > p {
        font-size: 0.85rem !important;
    }
    
    .mainSection .post.gallery .images img,
    .mainSection .post.gallery .images video {
        max-height: 300px !important;
    }
    
    .mainSection .mainFeed .stories {
        gap: 0.625rem !important;
        padding: 0.375rem 0 !important;
    }
    
    .mainSection .mainFeed .stories .story,
    .mainSection .mainFeed .stories .add {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
        border-radius: 10px !important;
    }
    
    .mainSection .mainFeed .stories .add img {
        width: 20px !important;
        height: 20px !important;
    }
    
    .mainSection .mainFeed .stories .add p {
        font-size: 0.6rem !important;
    }
    
    .mainSection .mainFeed .stories .story img {
        width: 25px !important;
        height: 25px !important;
    }
    
    .mainSection .mainFeed .stories .story p {
        font-size: 0.6rem !important;
    }
    
    .mobileHeader {
        padding: 0.625rem 0.75rem !important;
        gap: 0.5rem !important;
    }
    
    .mobileHeader .mobile-menu-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    .mobileHeader .mobile-menu-btn img {
        width: 18px !important;
        height: 18px !important;
    }
    
    .mobile-search-row {
        margin-bottom: 0.75rem !important;
    }
    
    .mobile-search-row input {
        font-size: 0.8rem !important;
        padding: 0.5rem 2rem 0.5rem 2rem !important;
    }
    
    .mobile-search-row button[type="submit"] {
        left: 0.625rem !important;
        width: 18px !important;
        height: 18px !important;
    }
    
    .mobile-search-row button[type="submit"] img {
        width: 14px !important;
        height: 14px !important;
    }
    
    .mobileHeader .mobile-user-profile .user-profile-info {
        margin-right: 0.375rem !important;
    }
    
    .mobileHeader .mobile-user-profile .user-name {
        font-size: 0.8rem !important;
    }
    
    .mobileHeader .mobile-user-profile .user-handle {
        font-size: 0.7rem !important;
    }
    
    .mobileHeader .mobile-user-profile .pfp {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    .mobileHeader .mobile-user-profile .dropdown-arrow {
        width: 10px !important;
        height: 10px !important;
    }
}

@media (max-width: 480px) {
    .mainSection .mainFeed.middleSec {
        padding: 0.5rem !important;
    }
    
    .createPost {
        padding: 5px !important;
        padding-left: 12px !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }
    
    .createPost input[type="text"] {
        font-size: 14px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    
    .createPost button:not(.addpost) {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        flex-shrink: 0 !important;
    }
    
    .createPost button:not(.addpost) img {
        width: auto !important;
        height: 12px !important;
    }
    
    .createPost .addpost {
        padding: 5px 8px !important;
        font-size: 11px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        max-width: fit-content !important;
        white-space: nowrap !important;
    }
    
    /* Stories - Extra Small Mobile */
    .mainSection .mainFeed .stories {
        gap: 0.5rem !important;
        padding: 0.25rem 0 !important;
    }
    
    .mainSection .mainFeed .stories .story,
    .mainSection .mainFeed .stories .add {
        width: 70px !important;
        height: 100px !important;
        min-width: 70px !important;
        min-height: 100px !important;
        max-width: 70px !important;
        max-height: 100px !important;
        border-radius: 8px !important;
    }
    
    .mainSection .mainFeed .stories .add img {
        width: 18px !important;
        height: 18px !important;
    }
    
    .mainSection .mainFeed .stories .add p {
        font-size: 0.55rem !important;
    }
    
    .mainSection .mainFeed .stories .story img {
        width: 22px !important;
        height: 22px !important;
    }
    
    .mainSection .mainFeed .stories .story p {
        font-size: 0.55rem !important;
    }
    
    .mainSection .post.gallery {
        padding: 0.5rem !important;
    }
    
    .mainSection .post.gallery .images img,
    .mainSection .post.gallery .images video {
        max-height: 250px !important;
    }
    
    .mainSection .post.gallery .engage {
        padding: 0.5rem 0 !important;
    }
    
    .mainSection .post.gallery .engage button,
    .mainSection .post.gallery .engage a {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Comment Section - Instagram-like Responsive Design */
    .hidden_comment,
    #hidden_comment_166,
    .hidden_comment[style*="display: block"] {
        padding: 0.75rem !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .comments-container {
        padding: 0.5rem 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .comment-thread {
        margin-bottom: 1rem !important;
        padding-bottom: 0.75rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .comment-item {
        margin-bottom: 0.75rem !important;
        padding: 0.5rem 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .comment-item.reply {
        margin-left: 0.5rem !important;
        padding-left: 0.5rem !important;
        max-width: calc(100% - 0.5rem) !important;
    }
    
    /* Comment Header - Instagram Style */
    .comment-header,
    .comment-header[style*="display: flex"],
    .comment-header[style*="justify-content: space-between"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Force override inline styles for comment header */
    .comment-header[style] {
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .comment-user,
    .comment-user[style*="display: flex"],
    .comment-user[style*="align-items: center"] {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 65px) !important;
        overflow: hidden !important;
    }
    
    /* Force override inline styles for comment user */
    .comment-user[style] {
        max-width: calc(100% - 65px) !important;
        overflow: hidden !important;
    }
    
    .comment-avatar,
    .comment-avatar[style*="width: 40px"],
    img.comment-avatar,
    img.comment-avatar[style*="width: 40px"],
    img.comment-avatar[style*="height: 40px"] {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        flex-shrink: 0 !important;
    }
    
    /* Force override inline styles for avatar */
    .comment-avatar[style],
    img.comment-avatar[style] {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }
    
    .comment-username,
    .comment-username[style*="font-weight"],
    .comment-username[style*="color"] {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 150px !important;
        flex-shrink: 1 !important;
    }
    
    /* Force override inline styles for username */
    .comment-username[style] {
        font-size: 0.875rem !important;
        max-width: 150px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    .comment-time,
    .comment-time[style*="font-size"],
    .comment-time[style*="color"] {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        max-width: 60px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Force override inline styles for time */
    .comment-time[style] {
        font-size: 0.7rem !important;
        max-width: 60px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    .comment-content {
        margin-bottom: 0.5rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .comment-text,
    .comment-text[style*="color"] {
        font-size: 0.875rem !important;
        padding: 0.25rem 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        line-height: 1.4 !important;
    }
    
    /* Comment Actions - Instagram Style Compact */
    .comment-actions,
    .comment-actions[style*="display: flex"],
    .comment-actions[style*="gap: 1.5rem"] {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
        font-size: 0.75rem !important;
        margin-top: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Force override inline styles for comment actions */
    .comment-actions[style] {
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        gap: 0.5rem !important;
    }
    
    .comment-action-btn,
    .comment-action-btn[style*="padding"],
    .comment-action-btn[style*="background"],
    .comment-action-btn[style*="color"] {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
        gap: 0.3rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-width: fit-content !important;
        border-radius: 6px !important;
        max-width: none !important;
    }
    
    /* Force override inline styles for buttons */
    .comment-action-btn[style] {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
        min-width: fit-content !important;
        max-width: none !important;
    }
    
    .comment-action-btn span,
    .comment-action-btn span[style*="pointer-events"] {
        font-size: 0.75rem !important;
    }
    
    /* View Replies Toggle - Instagram Style */
    .comment-replies-toggle,
    .comment-replies-toggle[style*="padding"],
    .comment-replies-toggle[style*="background"],
    .comment-replies-toggle[style*="color"] {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-width: fit-content !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        border-radius: 6px !important;
    }
    
    /* Force override inline styles for replies toggle */
    .comment-replies-toggle[style] {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }
    
    .comment-replies-toggle .replies-text {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: inline !important;
        max-width: none !important;
    }
    
    .comment-replies-toggle .replies-icon {
        margin-left: 0.25rem !important;
        display: inline-block !important;
    }
    
    /* Reply/Edit Forms - Instagram Style */
    .comment-reply-form,
    .comment-edit-form,
    .comment-reply-form[style*="margin-top"],
    .comment-edit-form[style*="margin-top"] {
        padding: 0.75rem !important;
        margin-top: 0.75rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .comment-reply-form > div:first-child,
    .comment-edit-form > div:first-child,
    .comment-reply-form > div:first-child[style*="display: flex"],
    .comment-edit-form > div:first-child[style*="display: flex"] {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .comment-reply-emoji-btn,
    .comment-reply-emoji-btn img,
    .comment-reply-emoji-btn[style*="background"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        margin-top: 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    .comment-reply-input,
    .comment-edit-input,
    .comment-reply-input[style*="flex: 1"],
    .comment-edit-input[style*="width"] {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: 60px !important;
        font-size: 0.875rem !important;
        padding: 0.5rem !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        word-wrap: break-word !important;
    }
    
    .comment-reply-actions,
    .comment-edit-actions,
    .comment-reply-actions[style*="display: flex"],
    .comment-edit-actions[style*="display: flex"] {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        margin-top: 0.5rem !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }
    
    .comment-reply-btn,
    .comment-edit-btn,
    .comment-reply-btn[style*="padding"],
    .comment-edit-btn[style*="padding"] {
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
        min-width: 80px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
    
    /* Comment Input Box - Instagram Style */
    .hidden_comment_input_box,
    .new-add-cls-textarea,
    .hidden_comment_input_box[style*="display: flex"],
    .new-add-cls-textarea[style*="display: flex"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    .hidden_comment_input_box textarea,
    .new-add-cls-textarea textarea,
    .hidden_comment_input_box textarea[style*="flex: 1"],
    .new-add-cls-textarea textarea[style*="flex: 1"] {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 75px) !important;
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        word-wrap: break-word !important;
    }
    
    .hidden_comment_input_box button,
    .new-add-cls-textarea button,
    .hidden_comment_input_box button[style*="background"],
    .new-add-cls-textarea button[style*="background"] {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        flex-shrink: 0 !important;
    }
    
    .hidden_comment_input_box button img,
    .new-add-cls-textarea button img {
        width: 16px !important;
        height: 16px !important;
    }
    
    .commentsubmit,
    .commentsubmit[style*="background"] {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
    }
    
    .commentsubmit i {
        font-size: 14px !important;
    }
    
    .comment-replies {
        margin-top: 0.5rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        display: block !important; /* Always show replies */
    }
    
    /* Hide reply button only for replies (depth >= 1), not root comments */
    .comment-item.reply .comment-action-btn.reply-btn {
        display: none !important;
    }
    
    /* Hide toggle button */
    .comment-replies-toggle {
        display: none !important;
    }
    
    /* Ensure replies container is always visible */
    .comment-replies[style*="display: none"] {
        display: block !important;
    }
}

@media (max-width: 480px) {
    /* Extra small screens - Instagram Compact Style */
    .comment-avatar,
    .comment-avatar[style*="width: 40px"],
    img.comment-avatar,
    img.comment-avatar[style*="width: 40px"] {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
    }
    
    .comment-user,
    .comment-user[style*="display: flex"] {
        max-width: calc(100% - 60px) !important;
        gap: 0.4rem !important;
    }
    
    .comment-username,
    .comment-username[style*="font-weight"] {
        font-size: 0.8rem !important;
        max-width: 100px !important;
    }
    
    .comment-time,
    .comment-time[style*="font-size"] {
        font-size: 0.65rem !important;
        max-width: 55px !important;
    }
    
    .comment-text,
    .comment-text[style*="color"] {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    .comment-actions,
    .comment-actions[style*="display: flex"] {
        gap: 0.4rem !important;
        font-size: 0.7rem !important;
    }
    
    .comment-action-btn,
    .comment-action-btn[style*="padding"] {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.7rem !important;
        gap: 0.2rem !important;
    }
    
    .comment-action-btn span,
    .comment-action-btn span[style*="pointer-events"] {
        font-size: 0.7rem !important;
    }
    
    /* Reply toggle button hidden */
    .comment-replies-toggle,
    .comment-replies-toggle[style*="padding"] {
        display: none !important;
    }
    
    .comment-item.reply {
        margin-left: 0.4rem !important;
        padding-left: 0.4rem !important;
        max-width: calc(100% - 0.4rem) !important;
    }
    
    .comment-reply-form,
    .comment-edit-form {
        padding: 0.5rem !important;
    }
    
    .comment-reply-input,
    .comment-edit-input {
        min-height: 50px !important;
        font-size: 0.8rem !important;
    }
    
    .hidden_comment_input_box,
    .new-add-cls-textarea {
        gap: 0.4rem !important;
        padding: 0.4rem !important;
    }
    
    .hidden_comment_input_box textarea,
    .new-add-cls-textarea textarea {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.6rem !important;
        max-width: calc(100% - 70px) !important;
    }
}


/* Help*/
@media screen and (max-width : 800px) {
    .mainSection.userProfilePage{
       margin-top: 50px;
    }   
       header{
           display : none !important
       }
       
       /* Left Sidebar - Mobile overlay */
       .mainSection .sidebar {
           width: 100% !important;
           max-width: 300px !important;
           position: fixed !important;
           left: -100% !important;
           top: 0 !important;
           height: 100vh !important;
           z-index: 2147483647 !important; /* Maximum z-index - above all elements */
           transition: left 0.3s ease !important;
           isolation: isolate !important;
           background: var(--bg-primary, #15191C) !important;
           overflow-y: auto !important;
           overflow-x: hidden !important;
           -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
           filter: none !important; /* Remove any blur */
           backdrop-filter: none !important; /* Remove any backdrop blur */
           will-change: left !important; /* Prevent flutter */
       }
       
       /* Ensure sidebar content scrolls independently when active */
       .mainSection .sidebar.active {
           left: 0 !important;
           overflow-y: auto !important;
           overflow-x: hidden !important;
           -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
       }
       
       /* Sidebar content - ensure no blur */
       .mainSection .sidebar > * {
           filter: none !important;
           backdrop-filter: none !important;
           position: relative !important;
           z-index: 1 !important;
       }
       
       /* Sidebar background overlay - covers area outside sidebar */
       .mainSection .sidebar .bg {
           position: fixed !important;
           top: 0 !important;
           left: 0 !important;
           width: 100vw !important;
           height: 100vh !important;
           background: rgba(0, 0, 0, 0.5) !important;
           z-index: -1 !important; /* Behind sidebar content */
           opacity: 0 !important;
           pointer-events: none !important;
           transition: opacity 0.3s ease !important;
           filter: none !important; /* No blur */
           backdrop-filter: none !important; /* No backdrop blur */
           will-change: opacity !important; /* Prevent flutter */
       }
       
       .mainSection .sidebar.active .bg {
           opacity: 1 !important;
           pointer-events: auto !important;
           z-index: -1 !important; /* Still behind sidebar content */
       }
       
       /* Ensure sidebar content is above overlay */
       .mainSection .sidebar > *:not(.bg) {
           position: relative !important;
           z-index: 1 !important;
       }
       
       /* Ensure sidebar links and content are clickable and don't trigger sidebar close */
       .mainSection .sidebar a,
       .mainSection .sidebar button,
       .mainSection .sidebar img,
       .mainSection .sidebar > *:not(.bg) {
           pointer-events: auto !important;
           position: relative !important;
           z-index: 2 !important;
       }
       
       /* Prevent body scroll when sidebar is open - applies to all screen sizes */
       body.sidebar-open,
       html.sidebar-open {
           overflow: hidden !important;
           position: fixed !important;
           width: 100% !important;
           height: 100% !important;
           left: 0 !important;
           right: 0 !important;
           top: 0 !important;
           bottom: 0 !important;
           touch-action: none !important; /* Prevent touch scrolling */
           overscroll-behavior: none !important; /* Prevent overscroll */
           -webkit-overflow-scrolling: auto !important;
       }
       
       /* Ensure main content doesn't scroll when sidebar is open */
       body.sidebar-open .mainSection,
       body.sidebar-open .mainFeed,
       body.sidebar-open .main-content,
       body.sidebar-open .mainSection > *:not(.sidebar),
       body.sidebar-open .mainSection > *:not(.sidebar) * {
           overflow: hidden !important;
           pointer-events: none !important; /* Prevent interaction with background */
           touch-action: none !important;
       }
       
       /* Only sidebar content should scroll */
       .mainSection .sidebar.active,
       .sidebar.active {
           overflow-y: auto !important;
           padding-top: 30px !important; /* Prevent layout shift */
           overflow-x: hidden !important;
           -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
           pointer-events: auto !important; /* Ensure sidebar is interactive */
           touch-action: pan-y !important; /* Allow vertical scrolling in sidebar */
       }
       
       /* Prevent scroll on body when sidebar is active - additional safety */
       body.sidebar-open * {
           -webkit-overflow-scrolling: auto !important;
           touch-action: none !important;
       }
       
       body.sidebar-open .sidebar.active,
       body.sidebar-open .sidebar.active * {
           -webkit-overflow-scrolling: touch !important;
           touch-action: pan-y !important;
       }
       
       /* Prevent sidebar from closing when clicking on content */
       .mainSection .sidebar > *:not(.bg) {
           pointer-events: auto !important;
       }
       
       /* Only the bg overlay should close the sidebar */
       .mainSection .sidebar .bg {
           cursor: pointer !important;
       }
   }
   @media (max-width: 992px) {
       /* prefer form-specific selector to avoid interfering elsewhere */
       form#contact-us.contactForm,
       .mainFeedContainer form{
           display: flex !important;
           flex-direction: column !important;
           gap: 12px;
       }

       form#contact-us.contactForm > button[type="submit"],
       .mainFeedContainer form > button[type="submit"]{
           display: block !important;
           width: 100% !important;
           box-sizing: border-box !important;
           min-width: 0 !important;
           padding: 12px 14px !important;
           font-size: 16px !important;
           margin-top: 8px !important;
           justify-content: center !important;
       }
   }

   .massage-ball-icon {
    font-size: 12px;
  background: red;
  padding: 0 4px;
  border-radius: 100px;
  position: absolute;
  top: -4px;
  right: 0;
  color: white;
}
header .right button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
header .right button img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
    .desktop_nav_search {
    position: relative;
    display: flex;
    align-items: center;
}

.desktop_nav_search input {
    padding-left: 30px;
    width: 200px;
    transition: width 0.3s;
}

.desktop_nav_search i {
    position: absolute;
    left: 10px;
}

.advanced-search-options {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    width: 300px;
}

.search-filters select, .search-filters input {
    margin-bottom: 10px;
    width: 100%;
}

.toggle-advanced-search {
    margin-left: 10px;
    background: #f0f0f0;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

    body{
    background: #15191C !important;
}
.wrapper{
    background: transparent !important;
}
footer{
    display : none
}
.profileEditPage .mainFeedInner form .input:has(select) > div,
.tablePages .bookingsSearchBox .tableSelect{
    position: relative;
}
.profileEditPage .mainFeedInner form .input:has(select) > div::after,
.tablePages .bookingsSearchBox .tableSelect::after{
    content: "";
    background: url("{{ asset(FRONT_IMAGES . 'newImages/arrow_drop_down.png') }}");
    width : 24px;
    height: 24px;
    background-position : center;
    position : absolute;
    right : 16px;
    top : 50%;
    transform : translateY(-50%)
}

/* ========================================
   Feed Dashboard CSS - Moved from feed.blade.php
   ======================================== */

/* Hide stuck loading tooltips and states */
.loading-tooltip,
.loading-message,
[data-loading="true"] {
    display: none !important;
}

/* Hide old loading systems */
.universal-loading-overlay,
.loading-overlay {
    display: none !important;
}

/* Enable proper button loading states */
.btn:disabled {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

/* Simple loading system styles */
.simple-loading {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(3px) !important;
}

.simple-loading-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 200px;
}

/* Dark theme adjustments */
[data-theme="dark"] .simple-loading-content {
    background: rgba(42, 42, 42, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Simple loading spinner - ensure proper display */
.simple-loading-content .spinner-border,
.simple-loading-content .loading-spinner,
.simple-loading-content [class*="spinner"] {
    width: 3.5rem !important;
    height: 3.5rem !important;
    min-width: 3.5rem !important;
    min-height: 3.5rem !important;
    max-width: 3.5rem !important;
    max-height: 3.5rem !important;
    border: 0.35em solid #2196f3 !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    animation: spinner-border 0.75s linear infinite !important;
    margin-bottom: 1rem !important;
}

[data-theme="light"] .simple-loading-content .spinner-border,
[data-theme="light"] .simple-loading-content .loading-spinner,
[data-theme="light"] .simple-loading-content [class*="spinner"] {
    border: 0.35em solid #2196f3 !important;
    border-right-color: transparent !important;
}

.simple-loading-content .loading-message {
    color: #212529;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

[data-theme="dark"] .simple-loading-content .loading-message {
    color: #ffffff;
}

/* Button loading states */
.btn-loading {
    position: relative;
    pointer-events: none;
}

.btn-loading .simple-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: simple-spin 1s linear infinite;
    margin-right: 8px;
}

@keyframes simple-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

/* Ensure comment sections are visible by default on feed page */
.mainSection.publicProfile .post .hidden_comment,
.mainSection.publicProfile .post [id^="hidden_comment_"] {
    display: block !important;
}

/* Dashboard Feed Infinite Scroll Styles - Performance Optimized */
/* Optimize posts container for smooth scrolling */
#dashboard-feed-posts,
.posts {
    /* Enable hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Optimize rendering */
    will-change: scroll-position;
    /* Improve scrolling performance */
    -webkit-overflow-scrolling: touch;
    /* Use GPU for compositing */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Optimize individual posts for better scroll performance */
.post.gallery {
    /* Enable hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Optimize rendering */
    contain: layout style paint;
    /* Prevent layout shifts */
    min-height: 1px;
}

/* Optimize images for lazy loading */
.post.gallery img.lazy {
    /* Prevent layout shift during load */
    background-color: var(--bg-secondary, #2a2a2a);
    /* Smooth image loading */
    transition: opacity 0.3s ease;
    opacity: 0.7;
}

.post.gallery img.lazy.loaded {
    opacity: 1;
}

.dashboard-feed-loader {
    text-align: center;
    padding: 30px 20px;
    margin: 20px 0;
    /* Prevent layout shift */
    min-height: 100px;
}

.dashboard-feed-loader .loader-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--bg-secondary, #2a2a2a);
    border-top: 4px solid var(--text-primary, #1da1f2);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.dashboard-feed-loader p {
    color: var(--text-secondary, #888);
    font-size: 14px;
    margin: 0;
}

.dashboard-feed-end {
    text-align: center;
    padding: 40px 20px;
    margin: 30px 0;
    color: var(--text-secondary, #888);
}

.dashboard-feed-end p {
    font-size: 16px;
    margin: 0;
}

.dashboard-feed-error {
    text-align: center;
    padding: 20px;
    margin: 20px 0;
    background: var(--bg-secondary, #2a2a2a);
    border-radius: 8px;
    color: var(--text-primary, #ccc);
}

.dashboard-feed-error p {
    margin: 0;
    font-size: 14px;
}

.dashboard-feed-error a {
    color: var(--text-primary, #1da1f2);
    text-decoration: underline;
    cursor: pointer;
}

[data-theme="light"] .dashboard-feed-loader .loader-spinner {
    border-color: #e1e8ed;
    border-top-color: #1da1f2;
}

[data-theme="light"] .dashboard-feed-end {
    color: #657786;
}

[data-theme="light"] .dashboard-feed-error {
    background: #f5f8fa;
    color: #14171a;
}

[data-theme="light"] .dashboard-feed-error a {
    color: #1da1f2;
}

/* Post Card Styling - 544px Height for posts with media, auto height for text-only */
.mainSection .post.gallery {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Posts with media - fixed height (exclude text-only posts) */
.mainSection .post.gallery:has(.images:not(:empty)):not(.text-only-post) {
    min-height: 544px !important;
    height: 544px !important;
}

/* Text-only posts - compact auto height (no fixed height) - must override any other rules */
.mainSection .post.gallery.text-only-post {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
}

/* Text-only posts - ensure no fixed height is applied - higher specificity */
.mainSection .post.gallery.text-only-post,
.mainSection .post.gallery.text-only-post:has(.images:not(:empty)) {
    height: fit-content !important;
    min-height: fit-content !important;
    max-height: none !important;
}

/* Override any other height rules for text-only posts */
.mainSection .post.gallery.text-only-post * {
    max-height: none !important;
}

.mainSection .post.gallery.text-only-post .postHeader {
    height: auto !important;
    min-height: auto !important;
}

.mainSection .post.gallery.text-only-post .engage {
    height: auto !important;
    min-height: auto !important;
    background: transparent !important;
}

/* Post Header - Fixed height */
.mainSection .post.gallery .postHeader {
    flex-shrink: 0 !important;
    min-height: auto !important;
    padding: 13px 20px !important;
    border-bottom: 1px solid var(--border-color, #404040) !important;
}

/* Post Header Profile Image - 44px x 44px Perfect Circle */
.mainSection .post.gallery .postHeader .user img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    clip-path: circle(50%) !important;
}

/* Post Header Username - Theme aware colors */
/* Light mode first */
html[data-theme="light"] .mainSection .post.gallery .postHeader .user,
html[data-theme="light"] .mainSection .post.gallery .postHeader .user *:not(.verified):not(img.verified),
html[data-theme="light"] .mainSection .post.gallery .postHeader .user p,
html[data-theme="light"] .mainSection .post.gallery .postHeader .user span,
html[data-theme="light"] .mainSection .post.gallery .postHeader .user a,
html[data-theme="light"] .mainSection .post.gallery .postHeader .user h1,
html[data-theme="light"] .mainSection .post.gallery .postHeader .user h2,
html[data-theme="light"] .mainSection .post.gallery .postHeader .user h3,
html[data-theme="light"] .mainSection .post.gallery .postHeader .user h4,
html[data-theme="light"] .mainSection .post.gallery .postHeader .user h5,
html[data-theme="light"] .mainSection .post.gallery .postHeader .user h6,
[data-theme="light"] .mainSection .post.gallery .postHeader .user,
[data-theme="light"] .mainSection .post.gallery .postHeader .user *:not(.verified):not(img.verified),
[data-theme="light"] .mainSection .post.gallery .postHeader .user p,
[data-theme="light"] .mainSection .post.gallery .postHeader .user span,
[data-theme="light"] .mainSection .post.gallery .postHeader .user a,
[data-theme="light"] .mainSection .post.gallery .postHeader .user h1,
[data-theme="light"] .mainSection .post.gallery .postHeader .user h2,
[data-theme="light"] .mainSection .post.gallery .postHeader .user h3,
[data-theme="light"] .mainSection .post.gallery .postHeader .user h4,
[data-theme="light"] .mainSection .post.gallery .postHeader .user h5,
[data-theme="light"] .mainSection .post.gallery .postHeader .user h6,
body[data-theme="light"] .mainSection .post.gallery .postHeader .user,
body[data-theme="light"] .mainSection .post.gallery .postHeader .user *:not(.verified):not(img.verified),
body[data-theme="light"] .mainSection .post.gallery .postHeader .user p,
body[data-theme="light"] .mainSection .post.gallery .postHeader .user span,
body[data-theme="light"] .mainSection .post.gallery .postHeader .user a {
    color: #000000 !important;
}

/* Ensure verified badge is excluded from .user * filters */
/* Match profile name color (#212529) */
html[data-theme="light"] .mainSection .post.gallery .postHeader .user .verified,
html[data-theme="light"] .mainSection .post.gallery .postHeader .user img.verified,
[data-theme="light"] .mainSection .post.gallery .postHeader .user .verified,
[data-theme="light"] .mainSection .post.gallery .postHeader .user img.verified,
body[data-theme="light"] .mainSection .post.gallery .postHeader .user .verified,
body[data-theme="light"] .mainSection .post.gallery .postHeader .user img.verified {
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.95) contrast(100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
}

/* Dark mode - must come after light mode to override - White/Light Gray for proper contrast */
html[data-theme="dark"] .mainSection .post.gallery .postHeader .user,
html[data-theme="dark"] .mainSection .post.gallery .postHeader .user *,
html[data-theme="dark"] .mainSection .post.gallery .postHeader .user p,
html[data-theme="dark"] .mainSection .post.gallery .postHeader .user a,
html[data-theme="dark"] .mainSection .post.gallery .postHeader .user h1,
html[data-theme="dark"] .mainSection .post.gallery .postHeader .user h2,
html[data-theme="dark"] .mainSection .post.gallery .postHeader .user h3,
html[data-theme="dark"] .mainSection .post.gallery .postHeader .user h4,
html[data-theme="dark"] .mainSection .post.gallery .postHeader .user h5,
html[data-theme="dark"] .mainSection .post.gallery .postHeader .user h6,
[data-theme="dark"] .mainSection .post.gallery .postHeader .user,
[data-theme="dark"] .mainSection .post.gallery .postHeader .user *,
[data-theme="dark"] .mainSection .post.gallery .postHeader .user p,
[data-theme="dark"] .mainSection .post.gallery .postHeader .user a,
[data-theme="dark"] .mainSection .post.gallery .postHeader .user h1,
[data-theme="dark"] .mainSection .post.gallery .postHeader .user h2,
[data-theme="dark"] .mainSection .post.gallery .postHeader .user h3,
[data-theme="dark"] .mainSection .post.gallery .postHeader .user h4,
[data-theme="dark"] .mainSection .post.gallery .postHeader .user h5,
[data-theme="dark"] .mainSection .post.gallery .postHeader .user h6,
body[data-theme="dark"] .mainSection .post.gallery .postHeader .user,
body[data-theme="dark"] .mainSection .post.gallery .postHeader .user *,
body[data-theme="dark"] .mainSection .post.gallery .postHeader .user p,
body[data-theme="dark"] .mainSection .post.gallery .postHeader .user a,
body[data-theme="dark"] .mainSection .post.gallery .postHeader .user h1,
body[data-theme="dark"] .mainSection .post.gallery .postHeader .user h2,
body[data-theme="dark"] .mainSection .post.gallery .postHeader .user h3,
body[data-theme="dark"] .mainSection .post.gallery .postHeader .user h4,
body[data-theme="dark"] .mainSection .post.gallery .postHeader .user h5,
body[data-theme="dark"] .mainSection .post.gallery .postHeader .user h6 {
    color: #ffffff !important; /* White for main username text - high contrast */
}

/* Username span (@username) - slightly lighter gray in dark mode for visual hierarchy */
html[data-theme="dark"] .mainSection .post.gallery .postHeader .user span,
html[data-theme="dark"] .mainSection .post.gallery .postHeader .user p span,
[data-theme="dark"] .mainSection .post.gallery .postHeader .user span,
[data-theme="dark"] .mainSection .post.gallery .postHeader .user p span,
body[data-theme="dark"] .mainSection .post.gallery .postHeader .user span,
body[data-theme="dark"] .mainSection .post.gallery .postHeader .user p span {
    color: #d0d0d0 !important; /* Light gray for @username - still good contrast but slightly muted */
}

/* Light mode - @username span */
html[data-theme="light"] .mainSection .post.gallery .postHeader .user span,
html[data-theme="light"] .mainSection .post.gallery .postHeader .user p span,
[data-theme="light"] .mainSection .post.gallery .postHeader .user span,
[data-theme="light"] .mainSection .post.gallery .postHeader .user p span,
body[data-theme="light"] .mainSection .post.gallery .postHeader .user span,
body[data-theme="light"] .mainSection .post.gallery .postHeader .user p span {
    color: #888888 !important;
}

/* Post Text Content - Facebook/Instagram Style */
.mainSection .post.gallery > p {
    flex-shrink: 0 !important;
    margin: 0 !important;
    word-wrap: break-word !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    /* No default color - let theme rules handle it */
}

/* Post Text - Posts with media (constrained height) */
.mainSection .post.gallery:has(.images:not(:empty)) > p {
    padding: 12px 20px 8px 20px !important;
    max-height: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
}

/* Post Text - Text-only posts (Facebook style - compact, auto height) */
.mainSection .post.gallery:not(:has(.images:not(:empty))) > p,
.mainSection .post.gallery.text-only-post > p {
    padding: 12px 20px !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

/* Post Text Color - White for dark background, Black for light background */
/* Light mode rules first */
html[data-theme="light"] .mainSection .post.gallery > p,
html[data-theme="light"] .mainSection .post.gallery > p *,
html[data-theme="light"] .mainSection .post.gallery > p span,
html[data-theme="light"] .mainSection .post.gallery > p a,
[data-theme="light"] .mainSection .post.gallery > p,
[data-theme="light"] .mainSection .post.gallery > p *,
[data-theme="light"] .mainSection .post.gallery > p span,
[data-theme="light"] .mainSection .post.gallery > p a {
    color: #000000 !important;
}

/* Dark mode rules - must come after light mode to override */
html[data-theme="dark"] .mainSection .post.gallery > p,
html[data-theme="dark"] .mainSection .post.gallery > p *,
html[data-theme="dark"] .mainSection .post.gallery > p span,
html[data-theme="dark"] .mainSection .post.gallery > p a,
html[data-theme="dark"] .mainSection .post.gallery > p strong,
html[data-theme="dark"] .mainSection .post.gallery > p em,
html[data-theme="dark"] .mainSection .post.gallery > p b,
html[data-theme="dark"] .mainSection .post.gallery > p i,
[data-theme="dark"] .mainSection .post.gallery > p,
[data-theme="dark"] .mainSection .post.gallery > p *,
[data-theme="dark"] .mainSection .post.gallery > p span,
[data-theme="dark"] .mainSection .post.gallery > p a,
[data-theme="dark"] .mainSection .post.gallery > p strong,
[data-theme="dark"] .mainSection .post.gallery > p em,
[data-theme="dark"] .mainSection .post.gallery > p b,
[data-theme="dark"] .mainSection .post.gallery > p i,
body[data-theme="dark"] .mainSection .post.gallery > p,
body[data-theme="dark"] .mainSection .post.gallery > p *,
body[data-theme="dark"] .mainSection .post.gallery > p span,
body[data-theme="dark"] .mainSection .post.gallery > p a,
body[data-theme="dark"] .mainSection .post.gallery > p strong,
body[data-theme="dark"] .mainSection .post.gallery > p em,
body[data-theme="dark"] .mainSection .post.gallery > p b,
body[data-theme="dark"] .mainSection .post.gallery > p i {
    color: #ffffff !important;
}

/* Fallback - Check if body or mainSection has dark background */
body[style*="background"][style*="dark"] .mainSection .post.gallery > p,
body[style*="background"][style*="black"] .mainSection .post.gallery > p,
.mainSection[style*="background"][style*="dark"] .post.gallery > p,
.mainSection[style*="background"][style*="black"] .post.gallery > p {
    color: #ffffff !important;
}

/* Fallback if theme attribute is not set - default to black (light mode) */
/* Only apply if html doesn't have any theme attribute or has light theme */
html:not([data-theme="dark"]) .mainSection .post.gallery > p:not([style*="color"]),
html:not([data-theme="dark"]) .mainSection .post.gallery > p *:not([style*="color"]) {
    color: #000000;
}

/* Post Text - Read More/Less Links */
.mainSection .post.gallery > p .read-more-show,
.mainSection .post.gallery > p .read-more-hide {
    cursor: pointer !important;
    font-weight: 500 !important;
}

/* Read More/Less Links - Theme aware colors */
[data-theme="dark"] .mainSection .post.gallery > p .read-more-show,
[data-theme="dark"] .mainSection .post.gallery > p .read-more-hide {
    color: #b0b0b0 !important;
}

[data-theme="light"] .mainSection .post.gallery > p .read-more-show,
[data-theme="light"] .mainSection .post.gallery > p .read-more-hide {
    color: #8e8e8e !important;
}

.mainSection .post.gallery > p .read-more-show:hover,
.mainSection .post.gallery > p .read-more-hide:hover {
    opacity: 0.8 !important;
}

/* Images/Video Section - Takes remaining space */
.mainSection .post.gallery .images {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 100% !important;
}

/* Hide images section for text-only posts */
.mainSection .post.gallery .images:empty {
    display: none !important;
}

/* Text-only posts - images section should not take space */
.mainSection .post.gallery:not(:has(.images:not(:empty))) .images,
.mainSection .post.gallery.text-only-post .images {
    display: none !important;
    flex: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Text-only posts - ensure engagement section doesn't add extra height */
.mainSection .post.gallery.text-only-post .engage {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    background: transparent !important;
}

/* Row and Column containers - Must respect flex constraints */
.mainSection .post.gallery .images .row {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    margin: 0 !important;
    width: 100% !important;
}

.mainSection .post.gallery .images .row .col-md-12 {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Video/Image Container - Fills available space */
.mainSection .post.gallery .images .intro_add_video_box {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 100% !important;
}

/* Video Container - Fills available space */
.mainSection .post.gallery .images .video-container,
.mainSection .post.gallery .images .video-thumbnail-container {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Video Element - Fits container */
.mainSection .post.gallery .images .video-container video,
.mainSection .post.gallery .images .video-thumbnail-container video,
.mainSection .post.gallery .images .video-player {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    background-color: #000 !important;
}

/* Image Modal Styling - Exact Design from Image */
#imagemodal .image_container,
#imagemodal-carousel .image_container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

#imagemodal .full-screen-image,
#imagemodal .imagepreview,
#imagemodal-carousel .full-screen-image,
#imagemodal-carousel .imagepreview {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 0;
}

#imagemodal .modal-dialog,
#imagemodal-carousel .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 0 !important;
}

#imagemodal .modal-content,
#imagemodal-carousel .modal-content {
    height: 100vh !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#imagemodal .modal-body,
#imagemodal-carousel .modal-body {
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

/* Image Modal Close Button - Exact Design from Image */
#imagemodal .close-button,
#imagemodal-carousel .close-button {
    position: fixed !important;
    right: 20px !important;
    top: 20px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 10001 !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

#imagemodal .close-button:hover,
#imagemodal-carousel .close-button:hover {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Image Element - Fits container */
.mainSection .post.gallery .images .intro_add_video_box_img,
.mainSection .post.gallery .images .carousel-item img,
.mainSection .post.gallery .images .carousel-item .intro_add_video_box_img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Carousel - Fits container */
.mainSection .post.gallery .images .carousel {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

.mainSection .post.gallery .images .carousel-inner {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

.mainSection .post.gallery .images .carousel-item {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

.mainSection .post.gallery .images .carousel-item a {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    display: block !important;
    overflow: hidden !important;
}

/* Engagement Section - Fixed at bottom */
.mainSection .post.gallery .engage {
    flex-shrink: 0 !important;
    padding: 0 !important;
    border-top: none !important;
    background: transparent !important;
}
/* Chat Header Styles */
/* WhatsApp-Style Message Header - Consistent colors */
.headRight-section.messageTop {
    background: #0E1012 !important; /* Match website dark background */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; /* Subtle border like WhatsApp */
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: background-color 0.3s ease;
}

/* Light Mode - HeadRight Section */
[data-theme="light"] .headRight-section.messageTop {
    background: #ffffff !important;
    border-bottom: 1px solid #e9ecef !important;
}

/* WhatsApp-Style Unified Header - Consistent colors */
.chat-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px; /* WhatsApp-style compact padding */
    background: #0E1012 !important; /* Match website dark background */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; /* Subtle border like WhatsApp */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Light Mode - Chat List Header */
[data-theme="light"] .chat-list-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e9ecef !important;
}

.chat-list-header .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-list-header h1 {
    font-size: 20px;
    font-weight: 500;
    color: #FFFFFF;
    margin: 0;
    font-family: sans-serif;
    transition: color 0.3s ease;
}

/* Light Mode - Header Title */
[data-theme="light"] .chat-list-header h1 {
    color: #212529 !important;
}

.chat-list-header .header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.chat-list-header .invite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: #282828;
    border: none;
    border-radius: 6px;
    color: #5D5D5D;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: sans-serif;
}

.chat-list-header .invite-btn:hover {
    background: #2f2f2f;
}

/* Light Mode - Invite Button */
[data-theme="light"] .chat-list-header .invite-btn {
    background: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .chat-list-header .invite-btn:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
}

.chat-list-header .invite-btn i {
    font-size: 16px;
    color: #5D5D5D;
    transition: color 0.3s ease;
}

/* Light Mode - Invite Button Icon */
[data-theme="light"] .chat-list-header .invite-btn i {
    color: #212529 !important;
}

.chat-list-header .invite-btn span {
    font-size: 14px;
    color: #5D5D5D;
    transition: color 0.3s ease;
    font-family: sans-serif;
}

/* Search image responsive size for chat page - Mobile */
@media screen and (max-width: 767px) {
    .chatsTop form img,
    .chatsTop form img[src*="search.png"],
    .search-form img,
    .chatsTop .search-form img {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
        object-fit: contain !important;
    }
}

/* Search image responsive size for chat page - Small Mobile */
@media screen and (max-width: 480px) {
    /* Ensure parent form uses flexbox for vertical centering */
    .chatsTop form,
    .search-form {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }
    
    .chatsTop form img,
    .chatsTop form img[src*="search.png"],
    .search-form img,
    .chatsTop .search-form img {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        object-fit: contain !important;
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-right: 10px !important;
        vertical-align: middle !important;
    }
    
    /* Adjust input padding to create space after the search icon */
    .chatsTop form input,
    .chatsTop form .search_user,
    .search-form input,
    .search-form .search_user {
        padding-left: 42px !important;
    }
}

/* Light Mode - Invite Button Text */
[data-theme="light"] .chat-list-header .invite-btn span {
    color: #212529 !important;
}

.chat-list-header .bell-btn {
    background: #282828;
    border: none;
    color: #5D5D5D;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.chat-list-header .bell-btn:hover {
    background: #2f2f2f;
}

/* Light Mode - Bell Button */
[data-theme="light"] .chat-list-header .bell-btn {
    background: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .chat-list-header .bell-btn:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
}

.chat-list-header .bell-btn i {
    color: #5D5D5D;
    transition: color 0.3s ease;
}

/* Light Mode - Bell Button Icon */
[data-theme="light"] .chat-list-header .bell-btn i {
    color: #212529 !important;
}

/* Contact Info in Header Right - Match Image Design */
.message-header .contact-info-inline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.message-header .contact-info-inline .contact-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.message-header .contact-info-inline .contact-name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
}

.message-header .contact-info-inline .contact-status {
    font-size: 13px;
    color: #888;
    margin: 0;
    line-height: 1.4;
}

.message-header .contact-info-inline .contact-status #chat-header-status {
    font-size: 13px;
    color: #888;
    font-style: normal;
}

.message-header .contact-info-inline .typing-status {
    color: #01ADF1;
    font-style: italic;
    font-size: 13px;
}

.message-header .contact-info-inline .typing-status:not(:empty) {
    display: block !important;
}

.message-header .contact-dropdown-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-header .contact-dropdown-btn:hover {
    opacity: 0.7;
}

.message-header .more-options-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.message-header .more-options-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* WhatsApp-Style Secondary Header - Contact Info Bar - Consistent colors */
.contact-header-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 16px !important; /* WhatsApp-style padding */
    background: #0E1012 !important; /* Match website dark background */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; /* Subtle border like WhatsApp */
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
    width: 100% !important;
    clear: both !important;
    box-sizing: border-box !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.contact-header-bar .contact-actions,
.contact-header-bar .contact-actions * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure contact-actions are visible when header bar is shown */
.contact-header-bar[style*="display: flex"] .contact-actions,
.contact-header-bar[style*="display:block"] .contact-actions,
#contact-header-bar:not([style*="display: none"]) .contact-actions {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#contact-header-bar:not([style*="display: none"]) .filter-icon-btn,
#contact-header-bar:not([style*="display: none"]) .more-options-icon-btn,
#contact-header-bar:not([style*="display: none"]) .contact-dropdown-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force visibility for all contact-actions children */
.contact-header-bar .contact-actions .filter-icon-btn,
.contact-header-bar .contact-actions .contact-dropdown-wrapper,
.contact-header-bar .contact-actions .more-options-icon-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.contact-header-bar .contact-actions .filter-icon-btn i,
.contact-header-bar .contact-actions .more-options-icon-btn i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Light Mode - Contact Header Bar */
[data-theme="light"] .contact-header-bar {
    background: #ffffff !important;
    border-bottom: 1px solid #e9ecef !important;
}

/* Ensure contact-header-bar appears on new line after chat-list-header */
.chat-list-header + .contact-header-bar {
    display: flex !important;
    margin-top: 0 !important;
}

/* Light Mode - Contact Header Bar - Match chatsTop */
[data-theme="light"] .contact-header-bar {
    background: #ffffff !important;
    border-left: 1px solid #dee2e6 !important;
    border-right: 1px solid #dee2e6 !important;
    border-top: 1px solid #dee2e6 !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.contact-header-bar .contact-info-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
}

.contact-header-bar .contact-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.contact-header-bar .contact-details {
    display: flex !important;
    flex-direction: column;
    gap: 2px !important;
}

.contact-header-bar .contact-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ffffff;
    margin: 0 !important;
    line-height: 1.4;
    transition: color 0.3s ease !important;
}

/* Light Mode - Contact Name */
[data-theme="light"] .contact-header-bar .contact-name {
    color: #212529 !important;
}

.contact-header-bar .contact-status {
    font-size: 13px;
    color: #888 !important;
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

/* Light Mode - Contact Status */
[data-theme="light"] .contact-header-bar .contact-status {
    color: #6c757d !important;
}

.contact-header-bar .contact-status #chat-header-status-text {
    font-size: 13px;
    color: #888;
    font-style: normal;
    transition: color 0.3s ease;
}

/* Light Mode - Contact Status Text */
[data-theme="light"] .contact-header-bar .contact-status #chat-header-status-text {
    color: #6c757d !important;
}

.contact-header-bar .typing-status {
    display: none;
    color: #888;
    font-style: normal;
    font-size: 13px;
    line-height: 1.4;
}

.contact-header-bar .typing-status:not(:empty) {
    display: inline !important;
}

.contact-header-bar .typing-status .typing-status-text {
    color: #888;
    font-style: normal;
}

/* Light Mode - Typing Status */
[data-theme="light"] .contact-header-bar .typing-status,
[data-theme="light"] .contact-header-bar .typing-status .typing-status-text {
    color: #6c757d !important;
}

/* Typing Dots Animation */
.contact-header-bar .typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 2px;
    vertical-align: middle;
}

.contact-header-bar .typing-dots .dot {
    width: 4px;
    height: 4px;
    background-color: #888;
    border-radius: 50%;
    animation: typingDotBounce 1.4s infinite ease-in-out both;
}

.contact-header-bar .typing-dots .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.contact-header-bar .typing-dots .dot:nth-child(2) {
    animation-delay: -0.16s;
}

.contact-header-bar .typing-dots .dot:nth-child(3) {
    animation-delay: 0s;
}

/* Light Mode - Typing Dots */
[data-theme="light"] .contact-header-bar .typing-dots .dot {
    background-color: #6c757d !important;
}

@keyframes typingDotBounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.contact-header-bar .contact-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* CRITICAL: Hide any dropdown items that might appear outside the menu */
.contact-actions .contact-dropdown-item,
.contact-actions > .contact-dropdown-item,
.contact-dropdown-wrapper > .contact-dropdown-item {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Only show dropdown items when inside a visible dropdown menu */
.contact-actions .contact-dropdown-menu.show .contact-dropdown-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* Ensure buttons in contact-actions are displayed horizontally */
.contact-header-bar .contact-actions .filter-btn,
.contact-header-bar .contact-actions .dropdown {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 36px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    height: 36px !important;
}

/* Filter button with image in contact-actions - Match dropdown visibility */
.contact-header-bar .contact-actions .filter-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

.contact-header-bar .contact-actions .filter-btn img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.contact-header-bar .contact-actions .filter-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: scale(1.05) !important;
}

/* Light Mode - Filter Button in contact-actions */
[data-theme="light"] .contact-header-bar .contact-actions .filter-btn:hover {
    background: #e9ecef !important;
}

/* Ensure dropdown button in contact-actions is also visible */
.contact-header-bar .contact-actions .dropdown,
#message-header-chatsTop .dropdown {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

/* DropdownButton inside contact-actions */
.contact-header-bar .contact-actions .dropdown .dropdownButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 10px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

.contact-header-bar .contact-actions .dropdown .dropdownButton:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.05) !important;
}

[data-theme="light"] .contact-header-bar .contact-actions .dropdown .dropdownButton:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

.contact-header-bar .contact-actions .dropdown .dropdownButton img {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* Ensure filter button matches dropdown button exactly */
.contact-header-bar .contact-actions .filter-btn,
.contact-header-bar .contact-actions .dropdown .dropdownButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile Responsive - Header Dropdown Button */
@media (max-width: 768px) {
    .contact-header-bar .contact-actions .dropdown .dropdownButton,
    .contact-header-bar .contact-actions .filter-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        padding: 9px !important;
    }
    
    .contact-header-bar .contact-actions .dropdown .dropdownButton img {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }
}

@media (max-width: 576px) {
    .contact-header-bar .contact-actions .dropdown .dropdownButton,
    .contact-header-bar .contact-actions .filter-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        padding: 8px !important;
    }
    
    .contact-header-bar .contact-actions .dropdown .dropdownButton img {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
}

.contact-header-bar .filter-icon-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    visibility: visible !important;
    opacity: 1 !important;
}

.contact-header-bar .filter-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

/* Light Mode - Filter Icon Button */
[data-theme="light"] .contact-header-bar .filter-icon-btn {
    color: #212529 !important;
}

[data-theme="light"] .contact-header-bar .filter-icon-btn:hover {
    background: #e9ecef !important;
}

.contact-header-bar .filter-icon-btn i {
    color: inherit;
    transition: color 0.3s ease;
}

.contact-header-bar .more-options-icon-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    visibility: visible !important;
    opacity: 1 !important;
}

.contact-header-bar .more-options-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

/* Light Mode - More Options Icon Button */
[data-theme="light"] .contact-header-bar .more-options-icon-btn {
    color: #212529 !important;
}

[data-theme="light"] .contact-header-bar .more-options-icon-btn:hover {
    background: #e9ecef !important;
}

.contact-header-bar .more-options-icon-btn i {
    color: inherit;
    transition: color 0.3s ease;
}

/* Dropdown Menu in Message Header - Ensure it appears above all elements */
/* Use fixed positioning to escape overflow clipping and stacking context issues */
#chat-dropdown-menu-message {
    position: fixed !important;
    z-index: 999999 !important;
    background: #2C2C2C !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    min-width: 200px !important;
    margin-top: 5px !important;
}

/* Ensure chatsTop has proper stacking context */
#message-header-chatsTop {
    position: relative !important;
    z-index: 100 !important;
}

/* Light Mode - Dropdown Menu in Message Header */
[data-theme="light"] #chat-dropdown-menu-message {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

#chat-dropdown-menu-message a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Light Mode - Dropdown Menu Links in Message Header */
[data-theme="light"] #chat-dropdown-menu-message a {
    color: #212529 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

#chat-dropdown-menu-message a:last-child {
    border-bottom: none !important;
}

#chat-dropdown-menu-message a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #01ADF1 !important;
}

/* Light Mode - Dropdown Menu Link Hover in Message Header */
[data-theme="light"] #chat-dropdown-menu-message a:hover {
    background: #f8f9fa !important;
    color: #01ADF1 !important;
}

#chat-dropdown-menu-message a i {
    margin-right: 10px !important;
    width: 16px !important;
    text-align: center !important;
}

/* Chat Sidebar Dropdown Menu (#chat-dropdown-menu) - Dark Mode */
.chat .dropdown #chat-dropdown-menu,
.chat button.dropdown #chat-dropdown-menu,
.sidebar .dropdown #chat-dropdown-menu,
button.dropdown #chat-dropdown-menu,
#chat-dropdown-menu {
    position: absolute !important;
    z-index: 1000 !important;
    background: #2C2C2C !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    min-width: 200px !important;
    padding: 16px 18px !important;
    top: calc(100% + 16px) !important;
    right: 0 !important;
}

/* Chat Sidebar Dropdown Menu - Light Mode - Maximum Specificity */
/* Override any CSS variables and general dropdown rules */
[data-theme="light"] .chat .dropdown #chat-dropdown-menu,
[data-theme="light"] .chat button.dropdown #chat-dropdown-menu,
[data-theme="light"] .sidebar .dropdown #chat-dropdown-menu,
[data-theme="light"] button.dropdown #chat-dropdown-menu,
[data-theme="light"] #chat-dropdown-menu,
body[data-theme="light"] #chat-dropdown-menu,
html[data-theme="light"] #chat-dropdown-menu,
[data-theme="light"] .chat .dropdown .dropdownMenu#chat-dropdown-menu,
[data-theme="light"] button.dropdown .dropdownMenu#chat-dropdown-menu,
[data-theme="light"] .dropdown .dropdownMenu#chat-dropdown-menu,
[data-theme="light"] .dropdown#chat-dropdown-menu,
[data-theme="light"] .dropdownMenu#chat-dropdown-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Chat Sidebar Dropdown Menu Links - Dark Mode */
.chat .dropdown #chat-dropdown-menu a,
.sidebar .dropdown #chat-dropdown-menu a,
#chat-dropdown-menu a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 0 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 16px !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    gap: 8px !important;
}

/* Chat Sidebar Dropdown Menu Links - Light Mode */
[data-theme="light"] .chat .dropdown #chat-dropdown-menu a,
[data-theme="light"] .chat button.dropdown #chat-dropdown-menu a,
[data-theme="light"] .sidebar .dropdown #chat-dropdown-menu a,
[data-theme="light"] button.dropdown #chat-dropdown-menu a,
[data-theme="light"] #chat-dropdown-menu a,
body[data-theme="light"] #chat-dropdown-menu a,
html[data-theme="light"] #chat-dropdown-menu a {
    color: #212529 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* Chat Sidebar Dropdown Menu Links - Last Child */
.chat .dropdown #chat-dropdown-menu a:last-child,
.sidebar .dropdown #chat-dropdown-menu a:last-child,
#chat-dropdown-menu a:last-child {
    border-bottom: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 12px !important;
}

[data-theme="light"] .chat .dropdown #chat-dropdown-menu a:last-child,
[data-theme="light"] .chat button.dropdown #chat-dropdown-menu a:last-child,
[data-theme="light"] .sidebar .dropdown #chat-dropdown-menu a:last-child,
[data-theme="light"] button.dropdown #chat-dropdown-menu a:last-child,
[data-theme="light"] #chat-dropdown-menu a:last-child,
body[data-theme="light"] #chat-dropdown-menu a:last-child,
html[data-theme="light"] #chat-dropdown-menu a:last-child {
    border-top: 1px solid #eee !important;
}

/* Chat Sidebar Dropdown Menu Links - Hover - Dark Mode */
.chat .dropdown #chat-dropdown-menu a:hover,
.sidebar .dropdown #chat-dropdown-menu a:hover,
#chat-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #01ADF1 !important;
}

/* Chat Sidebar Dropdown Menu Links - Hover - Light Mode */
[data-theme="light"] .chat .dropdown #chat-dropdown-menu a:hover,
[data-theme="light"] .chat button.dropdown #chat-dropdown-menu a:hover,
[data-theme="light"] .sidebar .dropdown #chat-dropdown-menu a:hover,
[data-theme="light"] button.dropdown #chat-dropdown-menu a:hover,
[data-theme="light"] #chat-dropdown-menu a:hover,
body[data-theme="light"] #chat-dropdown-menu a:hover,
html[data-theme="light"] #chat-dropdown-menu a:hover {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
    color: #01ADF1 !important;
}

/* Chat Sidebar Dropdown Menu - Logout Link (Special Styling) */
.chat .dropdown #chat-dropdown-menu a[style*="color: #dc3545"],
.sidebar .dropdown #chat-dropdown-menu a[style*="color: #dc3545"],
#chat-dropdown-menu a[style*="color: #dc3545"] {
    color: #dc3545 !important;
}

[data-theme="light"] .chat .dropdown #chat-dropdown-menu a[style*="color: #dc3545"],
[data-theme="light"] .sidebar .dropdown #chat-dropdown-menu a[style*="color: #dc3545"],
[data-theme="light"] #chat-dropdown-menu a[style*="color: #dc3545"] {
    color: #dc3545 !important;
}

.chat .dropdown #chat-dropdown-menu a[style*="color: #dc3545"]:hover,
.sidebar .dropdown #chat-dropdown-menu a[style*="color: #dc3545"]:hover,
#chat-dropdown-menu a[style*="color: #dc3545"]:hover {
    background: rgba(220, 53, 69, 0.1) !important;
    color: #dc3545 !important;
}

[data-theme="light"] .chat .dropdown #chat-dropdown-menu a[style*="color: #dc3545"]:hover,
[data-theme="light"] .sidebar .dropdown #chat-dropdown-menu a[style*="color: #dc3545"]:hover,
[data-theme="light"] #chat-dropdown-menu a[style*="color: #dc3545"]:hover {
    background: rgba(220, 53, 69, 0.1) !important;
    color: #dc3545 !important;
}

/* Chat Sidebar Dropdown Menu Icons */
.chat .dropdown #chat-dropdown-menu a i,
.sidebar .dropdown #chat-dropdown-menu a i,
#chat-dropdown-menu a i {
    margin-right: 0 !important;
    width: 16px !important;
    text-align: center !important;
    font-size: 16px !important;
}

/* Chat Dropdown Button Image (dots.png) - Dark Mode */
.chat .dropdown .dropdownButton img,
.sidebar .dropdown .dropdownButton img,
.chat button.dropdown .dropdownButton img {
    filter: brightness(1.1) contrast(1.2) invert(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Chat Dropdown Button Image (dots.png) - Light Mode */
/* Convert white/light image to dark gray/black for visibility on light background */
/* Using invert(1) to flip white to black, then adjust brightness for better appearance */
[data-theme="light"] .chat .dropdown .dropdownButton img,
[data-theme="light"] .sidebar .dropdown .dropdownButton img,
[data-theme="light"] .chat button.dropdown .dropdownButton img,
[data-theme="light"] button.dropdown .dropdownButton img,
[data-theme="light"] .dropdown .dropdownButton img,
[data-theme="light"] .chat button.dropdown .dropdownButton img[src*="dots.png"],
[data-theme="light"] button.dropdown .dropdownButton img[src*="dots.png"],
[data-theme="light"] .chat .dropdown .dropdownButton img[src*="dots.png"],
[data-theme="light"] .dropdown .dropdownButton img[src*="dots.png"],
[data-theme="light"] .chat .dropdownButton img,
[data-theme="light"] .chat button.dropdown .dropdownButton img {
    filter: invert(1) brightness(0.85) contrast(1.1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    -webkit-filter: invert(1) brightness(0.85) contrast(1.1) !important;
}

/* ULTRA SPECIFIC: Chat Dropdown Menu Light Mode Override - Must be last to override all other rules */
[data-theme="light"] .dropdownMenu#chat-dropdown-menu,
[data-theme="light"] .dropdown .dropdownMenu#chat-dropdown-menu,
[data-theme="light"] button.dropdown .dropdownMenu#chat-dropdown-menu,
[data-theme="light"] .chat .dropdown .dropdownMenu#chat-dropdown-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

[data-theme="light"] .dropdownMenu#chat-dropdown-menu a,
[data-theme="light"] .dropdown .dropdownMenu#chat-dropdown-menu a,
[data-theme="light"] button.dropdown .dropdownMenu#chat-dropdown-menu a,
[data-theme="light"] .chat .dropdown .dropdownMenu#chat-dropdown-menu a {
    color: #212529 !important;
}

/* Contact Dropdown Menu Styles */
.contact-dropdown-wrapper {
    position: relative !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Don't clip fixed positioned children */
    overflow: visible !important;
}

/* CRITICAL: Only show button and hidden menu in wrapper, nothing else */
.contact-dropdown-wrapper > *:not(.more-options-icon-btn) {
    position: fixed !important;
}

.contact-dropdown-wrapper > .contact-dropdown-menu:not(.show) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* CRITICAL: Ensure dropdown items are NEVER displayed outside the menu */
.contact-dropdown-wrapper > .contact-dropdown-item {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Only show items when inside the visible dropdown menu */
.contact-dropdown-wrapper .contact-dropdown-menu:not(.show) .contact-dropdown-item,
.contact-dropdown-wrapper .contact-dropdown-menu[style*="display: none"] .contact-dropdown-item {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.contact-dropdown-wrapper .contact-dropdown-menu.show .contact-dropdown-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prevent any inline display of dropdown items outside the menu */
.contact-actions .contact-dropdown-item:not(.contact-dropdown-menu .contact-dropdown-item),
.contact-actions > .contact-dropdown-item {
    display: none !important;
    visibility: hidden !important;
}

/* Ensure only the button and menu container are visible in the wrapper */
.contact-dropdown-wrapper > *:not(.more-options-icon-btn):not(.contact-dropdown-menu) {
    display: none !important;
}

/* Ensure dropdown menu items are only visible when menu is shown */
.contact-dropdown-menu:not(.show) > * {
    display: none !important;
}

/* Ensure dropdown menu is completely hidden by default */
.contact-dropdown-wrapper .contact-dropdown-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    flex-direction: column !important;
    position: fixed !important;
}

/* Only show when explicitly toggled with .show class */
.contact-dropdown-wrapper .contact-dropdown-menu.show,
#contact-header-dropdown-menu.show {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex-direction: column !important;
    position: fixed !important;
}

/* Prevent dropdown items from displaying inline - they should be in a vertical list */
.contact-dropdown-wrapper .contact-dropdown-item {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
}

/* CRITICAL: Ensure dropdown items are NEVER displayed outside the menu */
.contact-dropdown-wrapper > .contact-dropdown-item {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Prevent any items from showing outside the dropdown menu container */
.contact-actions > .contact-dropdown-item {
    display: none !important;
}

.contact-dropdown-menu {
    position: fixed !important;
    z-index: 999999 !important;
    background: #2C2C2C !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    min-width: 200px !important;
    margin-top: 5px !important;
    overflow: hidden;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    flex-direction: column !important;
    padding: 0 !important;
}

.contact-dropdown-menu.show {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* Override any inline display styles that might show it */
.contact-dropdown-menu[style*="display: block"],
.contact-dropdown-menu[style*="display:flex"],
.contact-dropdown-menu[style*="display: flex"],
#contact-header-dropdown-menu[style*="display: block"],
#contact-header-dropdown-menu[style*="display:flex"],
#contact-header-dropdown-menu[style*="display: flex"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Force hide if not showing - but allow override when .show class is present or inline style shows it */
.contact-dropdown-menu:not(.show):not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]),
#contact-header-dropdown-menu:not(.show):not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide all items by default */
.contact-dropdown-item {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Only show items when menu is visible */
.contact-dropdown-menu.show .contact-dropdown-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    padding: 12px 16px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.contact-dropdown-item:last-child {
    border-bottom: none !important;
}

.contact-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #01ADF1 !important;
}

.contact-dropdown-item i {
    margin-right: 10px !important;
    width: 16px !important;
    text-align: center !important;
}

/* Light Mode - Contact Dropdown Menu */
[data-theme="light"] .contact-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .contact-dropdown-item {
    color: #212529 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

[data-theme="light"] .contact-dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.contact-dropdown-item.delete-chat {
    color: #dc3545 !important;
}

.contact-dropdown-item.delete-chat:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #dc3545 !important;
}

[data-theme="light"] .contact-dropdown-item.delete-chat:hover {
    background: #f8f9fa !important;
    color: #dc3545 !important;
}

/* Light Mode - Dropdown Background Overlay */
[data-theme="light"] .dropdown .bg,
[data-theme="light"] #message-header-chatsTop .dropdown .bg {
    background: rgba(0, 0, 0, 0.15) !important;
}






 /* ========================================
       CHAT BODY - DARK & LIGHT MODE SUPPORT
       ======================================== */
    
    /* CSS Variables for Theme Support */
    .chat_body_wrapper {
        --chat-input-bg: #2C2C2C;
        --chat-input-text: #ffffff;
        --chat-input-placeholder: #888;
        --chat-button-bg: transparent;
        --chat-button-text: #ffffff;
        --chat-button-hover: rgba(255, 255, 255, 0.1);
        --chat-send-button: #01ADF1;
        --chat-send-button-hover: #0198D4;
        --chat-border: rgba(255, 255, 255, 0.1);
        --chat-preview-bg: #2a2a2a;
        --chat-preview-text: #ffffff;
        --chat-preview-border: rgba(255, 255, 255, 0.1);
        --chat-load-bg: rgba(40, 167, 69, 0.05);
        --chat-load-border: rgba(40, 167, 69, 0.1);
        --chat-load-text: #28a745;
    }

    /* Light Mode Variables */
    [data-theme="light"] .chat_body_wrapper {
        --chat-input-bg: #ffffff;
        --chat-input-text: #212529;
        --chat-input-placeholder: #adb5bd;
        --chat-button-bg: transparent;
        --chat-button-text: #212529;
        --chat-button-hover: rgba(0, 0, 0, 0.05);
        --chat-send-button: #01ADF1;
        --chat-send-button-hover: #0198D4;
        --chat-border: #dee2e6;
        --chat-preview-bg: #f8f9fa;
        --chat-preview-text: #333;
        --chat-preview-border: #dee2e6;
        --chat-load-bg: rgba(40, 167, 69, 0.1);
        --chat-load-border: rgba(40, 167, 69, 0.3);
        --chat-load-text: #28a745;
    }

    /* Typing dots animation */
    .typing-dots {
        display: inline-flex;
        margin-left: 8px;
        gap: 3px;
    }

    .dot {
        width: 4px;
        height: 4px;
        background-color: var(--chat-button-text, #1976d2);
        border-radius: 50%;
        animation: bounce 1.4s infinite ease-in-out both;
    }

    .dot:nth-child(1) {
        animation-delay: -0.32s;
    }

    .dot:nth-child(2) {
        animation-delay: -0.16s;
    }

    @keyframes bounce {
        0%, 80%, 100% {
            transform: scale(0);
            opacity: 0.5;
        }
        40% {
            transform: scale(1);
            opacity: 1;
        }
    }

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

    /* Enhanced read status indicators */
    .msg-desc .fa-check {
        color: #6c757d !important;
    }

    .msg-desc .fa-check-double {
        color: #007bff !important;
    }

    [data-theme="light"] .msg-desc .fa-check {
        color: #adb5bd !important;
    }

    [data-theme="light"] .msg-desc .fa-check-double {
        color: #01ADF1 !important;
    }

    /* Online status indicator */
    .online-indicator {
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 12px;
        height: 12px;
        background-color: #28a745;
        border: 2px solid var(--chat-input-bg, white);
        border-radius: 50%;
        animation: pulse 2s infinite;
        z-index: 10;
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
        }
    }

    /* Load More Messages Button */
    .load-more-on-chatlist {
        text-align: center;
        padding: 10px 0;
        position: sticky;
        top: 0;
        z-index: 10;
        background: transparent;
    }

    .btn-load-chat-whatsapp {
        background: #007bff !important;
        border: none !important;
        color: white !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
        cursor: pointer !important;
    }

    .btn-load-chat-whatsapp:hover {
        background: #0056b3 !important;
        transform: scale(1.1) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    }

    [data-theme="light"] .btn-load-chat-whatsapp {
        box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
    }

    [data-theme="light"] .btn-load-chat-whatsapp:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    }

    .spinner-border-sm {
        width: 1rem !important;
        height: 1rem !important;
    }

    /* Load All Messages Button - Theme Aware - Stuck to Header like Normal Website */
    .load-all-messages {
        text-align: center;
        padding: 10px 15px !important;
        background: var(--chat-load-bg, rgba(40, 167, 69, 0.05));
        border-bottom: 1px solid var(--chat-load-border, rgba(40, 167, 69, 0.1));
        position: sticky;
        top: 0;
        z-index: 10;
        transition: background-color 0.3s ease, border-color 0.3s ease;
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: auto;
        width: 100%;
        box-sizing: border-box;
    }

    .btn-load-all-chat {
        background: var(--chat-load-bg, rgba(40, 167, 69, 0.1)) !important;
        border: 1px solid var(--chat-load-border, rgba(40, 167, 69, 0.3)) !important;
        color: var(--chat-load-text, #28a745) !important;
        padding: 8px 16px !important;
        border-radius: 20px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important;
        width: auto;
        min-width: auto;
        max-width: none;
    }

    .btn-load-all-chat:hover {
        background: rgba(40, 167, 69, 0.2) !important;
        border-color: rgba(40, 167, 69, 0.5) !important;
        color: #1e7e34 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2) !important;
    }

    .btn-load-all-chat:active {
        transform: translateY(0) !important;
    }

    .btn-load-all-chat:focus {
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.3) !important;
    }

    .btn-load-all-chat i {
        font-size: 12px !important;
    }

    /* ========================================
       CHAT INPUT WRAPPER - WHATSAPP STYLE - RESPONSIVE & THEME AWARE
       ======================================== */
    
    /* WhatsApp-Style Input Wrapper - Consistent with website colors */
    .chat_input_wrapper.messageInput {
        display: flex !important;
        margin-top: 0 !important; /* No top margin, spacing handled by messagesBox margin-bottom */
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 16px !important; /* WhatsApp-style compact padding */
        background: #0E1012 !important; /* Match website dark background */
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important; /* Subtle border like WhatsApp */
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
        position: relative !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
        margin-bottom: 0 !important;
    }

    /* Override any top spacing from parent containers */
    .mainSection.messages .messagesContainer .messagesWindow .chat_input_wrapper.messageInput {
        margin-top: 0 !important;
        background: #0E1012 !important; /* Consistent with website */
    }


    [data-theme="light"] .mainSection.messages .messagesContainer .messagesWindow .chat_input_wrapper.messageInput {
        margin-top: 0 !important;
        background: #ffffff !important; /* Consistent with website */
    }
 
    /* Light Mode - Input Wrapper */
    [data-theme="light"] .chat_input_wrapper.messageInput {
        background: #ffffff !important;
        border-top: 1px solid #e9ecef !important;
    }

    /* WhatsApp-Style: Show user profile image in input */
    .chat_input_wrapper.messageInput .user-profile-img {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        object-position: center !important;
        aspect-ratio: 1 / 1 !important;
        display: block !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        order: 0 !important; /* First element */
    }


    /* Emoji Picker Positioning - Force top left above button */
    .chat_body_wrapper .fg-emoji-picker {
        position: fixed !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: translateY(-100%) !important;
        margin-top: -10px !important;
    }
    
    /* Ensure emoji picker appears above button in chat input area */
    .chat_input_wrapper.messageInput .fg-emoji-picker {
        position: absolute !important;
        bottom: 100% !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
    
    @media only screen and (max-width: 575px) {
        .chat_input_wrapper.messageInput .fg-emoji-picker {
            left: 0 !important;
            bottom: 100% !important;
            top: auto !important;
        }
    }
    
    @media only screen and (min-width: 576px) and (max-width: 992px) {
        .chat_input_wrapper.messageInput .fg-emoji-picker {
            left: 0 !important;
            bottom: 100% !important;
            top: auto !important;
        }
    }
    
    @media only screen and (min-width: 1024px) and (max-width: 1280px) {
        .chat_input_wrapper.messageInput .fg-emoji-picker {
            left: 0 !important;
            bottom: 100% !important;
            top: auto !important;
        }
    }
    
    @media only screen and (min-width: 1280px) and (max-width: 1440px) {
        .chat_input_wrapper.messageInput .fg-emoji-picker {
            left: 0 !important;
            bottom: 100% !important;
            top: auto !important;
        }
    }

    /* Emoji Button - Like feed page */
    .chat_input_wrapper.messageInput .chat_emoji {
        background: var(--chat-button-bg, transparent) !important;
        border: none !important;
        color: var(--chat-button-text, #ffffff) !important;
        font-size: 20px !important;
        cursor: pointer !important;
        padding: 8px !important;
        border-radius: 50% !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex-shrink: 0 !important;
        order: 1 !important;
    }

    .chat_input_wrapper.messageInput .chat_emoji:hover {
        background: var(--chat-button-hover, rgba(255, 255, 255, 0.1)) !important;
        transform: scale(1.05) !important;
    }

    .chat_input_wrapper.messageInput .chat_emoji:active {
        transform: scale(0.95) !important;
    }

    .chat_input_wrapper.messageInput .chat_emoji img {
        width: 20px !important;
        height: 20px !important;
        filter: brightness(0) invert(1);
        transition: filter 0.3s ease;
    }

    [data-theme="light"] .chat_input_wrapper.messageInput .chat_emoji {
        color: #212529 !important;
        background: transparent !important;
    }

    [data-theme="light"] .chat_input_wrapper.messageInput .chat_emoji:hover {
        background: rgba(0, 0, 0, 0.05) !important;
    }

    [data-theme="light"] .chat_input_wrapper.messageInput .chat_emoji img {
        filter: none !important;
        -webkit-filter: none !important;
    }

    /* WhatsApp-Style Message Input Field - Consistent colors */
    .chat_input_wrapper.messageInput input[type="text"],
    .chat_input_wrapper.messageInput input[name="message"],
    .chat_input_wrapper.messageInput #message,
    .chat_input_wrapper.messageInput .type_msg,
    .chat_input_wrapper.messageInput .emojiable-question,
    .chat_input_wrapper.messageInput .form-control {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 9px 16px !important; /* WhatsApp-style padding */
        background: #1e2329 !important; /* Slightly lighter than background for contrast */
        border: none !important; /* WhatsApp has no border */
        border-radius: 24px !important;
        color: #ffffff !important;
        font-size: 15px !important; /* WhatsApp uses 15px */
        outline: none !important;
        order: 2 !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
    }

    /* Light Mode - Input Field */
    [data-theme="light"] .chat_input_wrapper.messageInput input[type="text"],
    [data-theme="light"] .chat_input_wrapper.messageInput input[name="message"],
    [data-theme="light"] .chat_input_wrapper.messageInput #message,
    [data-theme="light"] .chat_input_wrapper.messageInput .type_msg,
    [data-theme="light"] .chat_input_wrapper.messageInput .emojiable-question,
    [data-theme="light"] .chat_input_wrapper.messageInput .form-control {
        background: #f0f2f5 !important; /* WhatsApp light mode input background */
        color: #111b21 !important;
        border: none !important;
    }
    
    /* Light Mode - Input Field Focus State */
    [data-theme="light"] .chat_input_wrapper.messageInput input[type="text"]:focus,
    [data-theme="light"] .chat_input_wrapper.messageInput input[name="message"]:focus,
    [data-theme="light"] .chat_input_wrapper.messageInput #message:focus,
    [data-theme="light"] .chat_input_wrapper.messageInput .type_msg:focus,
    [data-theme="light"] .chat_input_wrapper.messageInput .emojiable-question:focus,
    [data-theme="light"] .chat_input_wrapper.messageInput .form-control:focus {
        background: #f0f2f5 !important;
        color: #111b21 !important;
        border: none !important;
        box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.15) !important;
        outline: none !important;
    }

    .chat_input_wrapper.messageInput input[type="text"]:focus,
    .chat_input_wrapper.messageInput input[name="message"]:focus {
        border-color: var(--chat-send-button, #01ADF1) !important;
        box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.1) !important;
    }

    .chat_input_wrapper.messageInput input[type="text"]::placeholder,
    .chat_input_wrapper.messageInput input[name="message"]::placeholder {
        color: var(--chat-input-placeholder, #888) !important;
        transition: color 0.3s ease;
    }

    /* Light Mode - Input Placeholder */
    [data-theme="light"] .chat_input_wrapper.messageInput input[type="text"]::placeholder,
    [data-theme="light"] .chat_input_wrapper.messageInput input[name="message"]::placeholder,
    [data-theme="light"] .chat_input_wrapper.messageInput #message::placeholder,
    [data-theme="light"] .chat_input_wrapper.messageInput .type_msg::placeholder,
    [data-theme="light"] .chat_input_wrapper.messageInput .emojiable-question::placeholder,
    [data-theme="light"] .chat_input_wrapper.messageInput .form-control::placeholder {
        color: #667781 !important; /* WhatsApp light mode placeholder color */
        opacity: 1 !important;
    }

    /* Picture Button - Visible in both modes */
    .chat_input_wrapper.messageInput .picture-btn {
        background: var(--chat-button-bg, transparent) !important;
        border: none !important;
        color: var(--chat-button-text, #ffffff) !important;
        font-size: 18px !important;
        cursor: pointer !important;
        padding: 8px !important;
        border-radius: 50% !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex-shrink: 0 !important;
        order: 3 !important;
    }

    .chat_input_wrapper.messageInput .picture-btn:hover {
        background: var(--chat-button-hover, rgba(255, 255, 255, 0.1)) !important;
        transform: scale(1.05) !important;
    }

    .chat_input_wrapper.messageInput .picture-btn:active {
        transform: scale(0.95) !important;
    }

    [data-theme="light"] .chat_input_wrapper.messageInput .picture-btn {
        color: #212529 !important; /* Dark text for light mode */
        background: transparent !important;
    }

    [data-theme="light"] .chat_input_wrapper.messageInput .picture-btn:hover {
        background: rgba(0, 0, 0, 0.05) !important; /* Light hover background */
    }

    .chat_input_wrapper.messageInput .picture-btn i {
        color: inherit !important;
        font-size: 18px !important;
        transition: color 0.3s ease;
        display: inline-block !important; /* Ensure visibility */
    }

    /* Light Mode - Picture Button Icon */
    [data-theme="light"] .chat_input_wrapper.messageInput .picture-btn i {
        color: #212529 !important; /* Explicit dark color for light mode */
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
    }
    
    [data-theme="light"] .chat_input_wrapper.messageInput .picture-btn i::before {
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important;
        font-weight: 900 !important;
        opacity: 1 !important;
        color: #212529 !important;
        display: inline-block !important;
    }
    
    /* Ensure image icon renders properly */
    [data-theme="light"] .chat_input_wrapper.messageInput .picture-btn i.fa-image::before {
        content: "\f03e" !important;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        opacity: 1 !important;
        color: #212529 !important;
    }

    /* Attach Button - Visible in both modes */
    .chat_input_wrapper.messageInput .attach_btn {
        background: var(--chat-button-bg, transparent) !important;
        border: none !important;
        color: var(--chat-button-text, #ffffff) !important;
        font-size: 18px !important;
        cursor: pointer !important;
        padding: 8px !important;
        border-radius: 50% !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex-shrink: 0 !important;
        order: 4 !important;
    }

    .chat_input_wrapper.messageInput .attach_btn:hover {
        background: var(--chat-button-hover, rgba(255, 255, 255, 0.1)) !important;
        transform: scale(1.05) !important;
    }

    .chat_input_wrapper.messageInput .attach_btn:active {
        transform: scale(0.95) !important;
    }

    [data-theme="light"] .chat_input_wrapper.messageInput .attach_btn {
        color: #212529 !important; /* Dark text for light mode */
        background: transparent !important;
    }

    [data-theme="light"] .chat_input_wrapper.messageInput .attach_btn:hover {
        background: rgba(0, 0, 0, 0.05) !important; /* Light hover background */
    }

    .chat_input_wrapper.messageInput .attach_btn i {
        color: inherit !important;
        font-size: 18px !important;
        transition: color 0.3s ease;
        display: inline-block !important;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        font-style: normal !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    /* Light Mode - Attach Button Icon */
    [data-theme="light"] .chat_input_wrapper.messageInput .attach_btn i {
        color: #212529 !important; /* Explicit dark color for light mode */
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
    }
    
    [data-theme="light"] .chat_input_wrapper.messageInput .attach_btn i::before {
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important;
        font-weight: 900 !important;
        opacity: 1 !important;
        color: #212529 !important;
        display: inline-block !important;
    }
    
    /* Ensure paperclip icon renders properly */
    [data-theme="light"] .chat_input_wrapper.messageInput .attach_btn i.fa-paperclip::before {
        content: "\f0c6" !important;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        opacity: 1 !important;
        color: #212529 !important;
    }
    
    /* Global fix for all Font Awesome icons in input wrapper - Light Mode */
    [data-theme="light"] .chat_input_wrapper.messageInput i.fa,
    [data-theme="light"] .chat_input_wrapper.messageInput i.fas,
    [data-theme="light"] .chat_input_wrapper.messageInput i.far,
    [data-theme="light"] .chat_input_wrapper.messageInput button i {
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important;
        font-weight: 900 !important;
        font-style: normal !important;
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    /* Send Button - Always visible with blue background */
    .chat_input_wrapper.messageInput #send_button {
        background: var(--chat-send-button, #01ADF1) !important;
        color: #ffffff !important;
        border-radius: 50% !important;
        border: none !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        order: 5 !important;
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(1, 173, 241, 0.3) !important;
        flex-shrink: 0 !important;
    }

    .chat_input_wrapper.messageInput #send_button:hover {
        transform: scale(1.05) !important;
        background: var(--chat-send-button-hover, #0198D4) !important;
        box-shadow: 0 4px 12px rgba(1, 173, 241, 0.4) !important;
    }

    .chat_input_wrapper.messageInput #send_button:active {
        transform: scale(0.95) !important;
    }

    .chat_input_wrapper.messageInput #send_button:focus {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(1, 173, 241, 0.3) !important;
    }

    .chat_input_wrapper.messageInput #send_button i {
        color: #ffffff !important;
        font-size: 18px !important;
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        line-height: 1 !important;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important;
        font-weight: 900 !important;
        font-style: normal !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        width: auto !important;
        height: auto !important;
        text-rendering: auto !important;
    }
    
    /* Ensure Font Awesome icons render properly - specifically paper plane */
    .chat_input_wrapper.messageInput #send_button i.fa-paper-plane,
    .chat_input_wrapper.messageInput #send_button i.fas.fa-paper-plane {
        color: #ffffff !important;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important;
        font-weight: 900 !important;
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure paper plane icon content renders */
    .chat_input_wrapper.messageInput #send_button i.fa-paper-plane::before,
    .chat_input_wrapper.messageInput #send_button i.fas.fa-paper-plane::before {
        content: "\f1d8" !important;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important;
        font-weight: 900 !important;
        display: inline-block !important;
        opacity: 1 !important;
        color: #ffffff !important;
    }

    /* Force send button and icon visibility in light mode */
    [data-theme="light"] .chat_input_wrapper.messageInput #send_button {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: #01ADF1 !important;
        color: #ffffff !important; /* White text/icon color */
        box-shadow: 0 2px 8px rgba(1, 173, 241, 0.3) !important;
    }

    [data-theme="light"] .chat_input_wrapper.messageInput #send_button:hover {
        background: #0198D4 !important;
        box-shadow: 0 4px 12px rgba(1, 173, 241, 0.4) !important;
        opacity: 1 !important;
    }
    
    [data-theme="light"] .chat_input_wrapper.messageInput #send_button i {
        color: #ffffff !important; /* White icon on blue button */
        background: transparent !important; /* Remove any white background */
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important;
        font-weight: 900 !important;
        font-style: normal !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        line-height: 1 !important;
        width: auto !important;
        height: auto !important;
        font-size: 18px !important;
    }
    
    [data-theme="light"] .chat_input_wrapper.messageInput #send_button i.fa-paper-plane,
    [data-theme="light"] .chat_input_wrapper.messageInput #send_button i.fas.fa-paper-plane {
        color: #ffffff !important; /* White icon on blue button */
        background: transparent !important; /* Remove any white background */
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important;
        font-weight: 900 !important;
    }
    
    /* Ensure paper-plane icon content renders in light mode */
    [data-theme="light"] .chat_input_wrapper.messageInput #send_button i::before,
    [data-theme="light"] .chat_input_wrapper.messageInput #send_button i.fa-paper-plane::before,
    [data-theme="light"] .chat_input_wrapper.messageInput #send_button i.fas.fa-paper-plane::before {
        content: "\f1d8" !important;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important;
        font-weight: 900 !important;
        display: inline-block !important;
        opacity: 1 !important;
        color: #ffffff !important; /* White icon on blue button */
        background: transparent !important; /* Remove any white background */
        font-size: inherit !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: #ffffff !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    /* WhatsApp-Style Image Preview Container - Hidden by default */
    #chat_image_preview_container.preview-progress-container {
        position: relative !important;
        width: fit-content !important;
        max-width: 100% !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 8px !important;
        border: none !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease !important;
        z-index: 10 !important;
        pointer-events: none !important;
        order: 0 !important;
    }

    /* WhatsApp Preview Wrapper */
    .whatsapp-preview-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        background: var(--chat-preview-bg, rgba(255, 255, 255, 0.05)) !important;
        padding: 8px 16px !important; /* Match input wrapper padding */
        border-radius: 8px !important;
        border: none !important;
        min-height: 52px !important; /* Match input wrapper height (8px padding top + ~36px content + 8px padding bottom) */
        height: 52px !important;
        box-sizing: border-box !important;
    }

    [data-theme="light"] .whatsapp-preview-wrapper {
        background: var(--chat-preview-bg, #f0f0f0) !important;
        border: 1px solid var(--chat-preview-border, #dee2e6) !important;
    }

    /* Image Wrapper with Progress Overlay */
    .whatsapp-preview-image-wrapper {
        position: relative !important;
        width: 36px !important; /* Match input wrapper button size */
        height: 36px !important; /* Match input wrapper button size */
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .whatsapp-preview-image,
    .whatsapp-preview-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        display: block !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .whatsapp-preview-image.image-loaded,
    .whatsapp-preview-video.video-loaded {
        opacity: 1 !important;
    }

    .whatsapp-preview-video {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* WhatsApp Progress Overlay */
    .whatsapp-progress-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 36px !important;
        min-height: 36px !important;
        display: none !important; /* Hidden by default */
        align-items: center !important;
        justify-content: center !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border-radius: 8px !important;
        z-index: 10 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important; /* Allow clicks through when not needed */
    }
    
    /* Show overlay when needed */
    .whatsapp-progress-overlay.show {
        display: flex !important;
        pointer-events: auto !important;
    }

    [data-theme="light"] .whatsapp-progress-overlay {
        background: rgba(255, 255, 255, 0.8) !important;
    }

    /* Remove Button */
    .whatsapp-preview-remove {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border: none !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 3 !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
    }

    .whatsapp-preview-remove:hover {
        background: rgba(0, 0, 0, 0.8) !important;
        transform: scale(1.1) !important;
    }

    .whatsapp-preview-remove i {
        font-size: 12px !important;
    }

    /* Preview Info */
    .whatsapp-preview-info {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    .whatsapp-preview-filename {
        color: var(--chat-preview-text, #ffffff) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        margin-bottom: 4px !important;
        word-break: break-word !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
    }

    .whatsapp-preview-size {
        color: var(--chat-input-placeholder, #888) !important;
        font-size: 12px !important;
    }

    [data-theme="light"] .whatsapp-preview-filename {
        color: var(--chat-preview-text, #212529) !important;
    }

    [data-theme="light"] .whatsapp-preview-size {
        color: var(--chat-input-placeholder, #6c757d) !important;
    }

    /* WhatsApp-Style Message Bubbles - Enhanced Image/Video Support */
    .message .text {
        position: relative !important;
        overflow: hidden !important;
    }

    /* Image/Video messages should not have extra padding */
    .message .text .chat_image,
    .message .text .chat_video,
    .message .text img.chat_image,
    .message .text img.chat_video {
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Ensure emoji renders properly in messages */
    .message .text,
    .msg-desc {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
        font-size: 14px !important;
        line-height: 3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* WhatsApp-Style: Images/Videos in messages should not have text bubble padding */
    .message .text:has(.chat_image),
    .message .text:has(.chat_video),
    .message .text:has(img.chat_image),
    .message .text:has(img.chat_video) {
        padding: 0 !important;
        background: transparent !important;
    }

    /* Fallback for browsers without :has() */
    .message .text .chat_image,
    .message .text .chat_video {
        margin: 0 !important;
        display: block !important;
    }

    /* WhatsApp-Style: Media Container */
    .whatsapp-media-container {
        position: relative !important;
        max-width: 300px !important;
        max-height: 400px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: transparent !important;
        cursor: pointer !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .message.sent .whatsapp-media-container {
        border-radius: 8px 8px 2px 8px !important; /* Top-right corner sharp for sent */
    }

    .message.received .whatsapp-media-container {
        border-radius: 8px 8px 8px 2px !important; /* Top-left corner sharp for received */
    }

    .whatsapp-media {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 400px !important;
        min-height: 150px !important;
        display: block !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #1a1a1a !important;
    }

    .whatsapp-media-container.video-container {
        position: relative !important;
        display: block !important;
        background: #000 !important;
    }

    .whatsapp-media.video-thumbnail {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        max-height: 400px !important;
        object-fit: cover !important;
        position: relative !important;
        z-index: 1 !important;
        background: #1a1a1a !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Ensure video container shows thumbnail properly */
    .whatsapp-media-container.video-container {
        min-height: 200px !important;
        background: #1a1a1a !important;
    }

    .whatsapp-media-container.video-container .whatsapp-media.video-thumbnail[src=""],
    .whatsapp-media-container.video-container .whatsapp-media.video-thumbnail:not([src]),
    .whatsapp-media-container.video-container .whatsapp-media.video-thumbnail[src*="default"] {
        background: #1a1a1a !important;
        display: block !important;
        opacity: 1 !important;
    }

    /* WhatsApp-Style: Media Caption (Text below media) */
    .whatsapp-media-caption {
        padding: 8px 12px 12px 12px !important;
        background: transparent !important;
        color: var(--chat-text-color, #ffffff) !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        margin: 0 !important;
        border-radius: 0 0 8px 8px !important;
        position: relative !important;
        z-index: 2 !important;
    }

    [data-theme="light"] .whatsapp-media-caption {
        color: var(--chat-text-color, #111b21) !important;
    }

    /* Adjust footer when caption is present */
    .whatsapp-media-container:has(.whatsapp-media-caption) .whatsapp-media-footer {
        position: absolute !important;
        bottom: auto !important;
        right: 0 !important;
        left: 0 !important;
        top: 0 !important;
        padding: 8px 10px !important;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%) !important;
        border-radius: 8px 8px 0 0 !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
    }

    /* WhatsApp-Style: Media Footer (Time overlay) */
    .whatsapp-media-footer {
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        padding: 12px 10px 8px 10px !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        pointer-events: none !important; /* Allow clicks through footer */
        border-radius: 0 0 8px 8px !important;
        z-index: 3 !important; /* Lower than video link (4) */
    }
    
    /* Ensure footer doesn't block play button clicks */
    .whatsapp-media-footer * {
        pointer-events: none !important;
    }

    /* When caption exists, move footer to bottom of caption */
    .whatsapp-media-container:has(.whatsapp-media-caption) .whatsapp-media-footer {
        position: relative !important;
        bottom: 0 !important;
        top: auto !important;
        margin-top: 0 !important;
        padding: 6px 10px !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    .whatsapp-media-container:has(.whatsapp-media-caption) .whatsapp-media-footer .time {
        color: var(--chat-text-color-secondary, #8696a0) !important;
        font-size: 11px !important;
        text-shadow: none !important;
    }

    .message.received .whatsapp-media-footer {
        right: 0 !important;
        left: auto !important;
    }

    .whatsapp-media-footer .time {
        color: #ffffff !important;
        font-size: 11px !important;
        margin: 0 !important;
        padding: 2px 4px !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
        white-space: nowrap !important;
    }

    [data-theme="light"] .whatsapp-media-footer {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%) !important;
    }

    /* WhatsApp-Style: Video Play Button */
    .whatsapp-video-link {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        text-decoration: none !important;
        z-index: 4 !important; /* Higher than footer (3) */
        cursor: pointer !important;
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Prevent thumbnail from being hidden */
    .whatsapp-media-container.video-container .whatsapp-media.video-thumbnail {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important; /* Allow clicks through thumbnail to play button */
    }

    .whatsapp-play-icon {
        width: 60px !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.2s ease, opacity 0.2s ease !important;
        opacity: 0.9 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 5 !important;
    }

    .whatsapp-play-icon svg {
        pointer-events: none !important; /* Allow clicks on the icon itself */
    }

    .whatsapp-video-link:hover .whatsapp-play-icon {
        transform: scale(1.1) !important;
        opacity: 1 !important;
    }

    .whatsapp-play-icon svg {
        width: 100% !important;
        height: 100% !important;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
        pointer-events: none !important; /* Allow clicks on parent */
    }

    .whatsapp-play-icon circle {
        transition: fill 0.2s ease !important;
        pointer-events: none !important;
    }

    .whatsapp-video-link:hover .whatsapp-play-icon circle {
        fill: rgba(0, 0, 0, 0.8) !important;
    }

    /* Ensure video link is always clickable */
    .whatsapp-media-container.video-container .whatsapp-video-link {
        z-index: 100 !important; /* Very high z-index to ensure it's on top */
        pointer-events: auto !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    /* Make sure nothing blocks the video link */
    .whatsapp-media-container.video-container {
        position: relative !important;
        pointer-events: auto !important;
    }

    /* Ensure parent containers don't block clicks */
    .text-bubble-container:has(.whatsapp-video-link),
    .messageContent:has(.whatsapp-video-link) {
        pointer-events: auto !important;
    }

    /* Explicitly allow clicks on video container and link */
    .whatsapp-media-container.video-container,
    .whatsapp-media-container.video-container .whatsapp-video-link,
    .whatsapp-media-container.video-container .whatsapp-play-icon {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Ensure media containers don't have background from text class */
    .text-bubble-container:has(.whatsapp-media-container),
    .messageContent:has(.whatsapp-media-container) {
        background: transparent !important;
        padding: 0 !important;
        pointer-events: auto !important;
    }

    /* Force video link to be clickable - override any parent blocking */
    .whatsapp-media-container.video-container .whatsapp-video-link,
    .text-bubble-container .whatsapp-video-link,
    .messageContent .whatsapp-video-link {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 1000 !important;
        position: absolute !important;
    }

    /* Ensure parent elements don't block video link */
    .text-bubble-container:has(.whatsapp-video-link),
    .messageContent:has(.whatsapp-video-link),
    .message-bubble-wrapper:has(.whatsapp-video-link) {
        pointer-events: auto !important;
        position: relative !important;
    }

    /* Legacy support for old structure */
    .message.sent .text .chat_image,
    .message.sent .text .chat_video,
    .message.sent .text img.chat_image,
    .message.sent .text img.chat_video {
        border-radius: 8px 8px 2px 8px !important;
        max-width: 300px !important;
        max-height: 400px !important;
    }

    .message.received .text .chat_image,
    .message.received .text .chat_video,
    .message.received .text img.chat_image,
    .message.received .text img.chat_video {
        border-radius: 8px 8px 8px 2px !important;
        max-width: 300px !important;
        text-align: left;
        max-height: 400px !important;
    }

    /* Error state for images that failed to load */
    .chat_image.image-error,
    .chat_video.image-error,
    img.chat_image.image-error,
    img.chat_video.image-error {
        opacity: 0.7 !important;
        border: 2px dashed rgba(255, 0, 0, 0.3) !important;
        position: relative !important;
    }

    .chat_image.image-error::after,
    .chat_video.image-error::after {
        content: attr(data-error) !important;
        position: absolute !important;
        bottom: 5px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: rgba(0, 0, 0, 0.7) !important;
        color: #fff !important;
        padding: 2px 8px !important;
        border-radius: 4px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        pointer-events: none !important;
    }

    [data-theme="light"] .chat_image.image-error,
    [data-theme="light"] .chat_video.image-error {
        border-color: rgba(220, 53, 69, 0.4) !important;
    }

    [data-theme="light"] .chat_image.image-error::after,
    [data-theme="light"] .chat_video.image-error::after {
        background: rgba(220, 53, 69, 0.9) !important;
    }

    /* Legacy video play button overlay - for old structure */
    .message .text .chat_video {
        position: relative !important;
        display: block !important;
    }

    .message .text .chat_video .play_icon {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 60px !important;
        height: 60px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }

    .message .text .chat_video:hover .play_icon {
        background: rgba(0, 0, 0, 0.8) !important;
        transform: translate(-50%, -50%) scale(1.1) !important;
    }

    .message .text .chat_video .play_icon img {
        width: 30px !important;
        height: 30px !important;
        filter: brightness(0) invert(1) !important;
    }
    .message .text {
        position: relative !important;
        overflow: hidden !important;
    }

    /* Image/Video messages should not have padding around them */
    .message .text:has(.chat_image),
    .message .text:has(.chat_video),
    .message .text .chat_image,
    .message .text .chat_video {
        padding: 0 !important;
        background: transparent !important;
    }

    /* Text content in messages with images/videos */
    .message .text:has(.chat_image) + .time,
    .message .text:has(.chat_video) + .time {
        position: absolute !important;
        bottom: 8px !important;
        right: 8px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        color: #fff !important;
        padding: 2px 6px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        backdrop-filter: blur(4px) !important;
    }

    [data-theme="light"] .message .text:has(.chat_image) + .time,
    [data-theme="light"] .message .text:has(.chat_video) + .time {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #333 !important;
    }

    /* Ensure emoji renders properly in messages */
    .message .text,
    .msg-desc {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Only show when image is ready AND has a valid src */
    #chat_image_preview_container.preview-progress-container.image-ready:has(#chat_image_preview_img_display.image-loaded[src]:not([src=""])) {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Fallback for browsers without :has() support - use JavaScript class */
    #chat_image_preview_container.preview-progress-container.image-ready.has-image {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Show container when progress overlay is visible (for video uploads) */
    #chat_image_preview_container.preview-progress-container:has(#whatsapp_upload_progress[style*="display: flex"]) {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    #chat_image_preview_container.preview-progress-container:has(#whatsapp_upload_progress:not([style*="display: none"])) {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Hide if image display is empty or has no src */
    #chat_image_preview_container.preview-progress-container:not(:has(#chat_image_preview_img_display.image-loaded[src]:not([src=""]))):not(.has-image) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        margin-bottom: 0 !important;
    }

    [data-theme="light"] #chat_image_preview_container.preview-progress-container {
        background: var(--chat-preview-bg, #f8f9fa) !important;
        border: 1px solid var(--chat-preview-border, #dee2e6) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }


    /* WhatsApp-Style Circular Progress Indicator */
    .whatsapp-progress-wrapper {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-right: 8px;
    }

    .whatsapp-circular-progress {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        z-index: 11 !important;
        background: transparent !important;
        /* Create circular progress ring using pseudo-element */
    }

    /* Ring background using ::before */
    .whatsapp-circular-progress::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: conic-gradient(
            from 0deg,
            var(--chat-send-button, #01ADF1) 0deg,
            var(--chat-send-button, #01ADF1) calc(var(--progress, 0) * 3.6deg),
            rgba(255, 255, 255, 0.3) calc(var(--progress, 0) * 3.6deg),
            rgba(255, 255, 255, 0.3) 360deg
        );
        /* Create ring effect by masking the center */
        mask: radial-gradient(circle, transparent 12px, black 13px);
        -webkit-mask: radial-gradient(circle, transparent 12px, black 13px);
        z-index: 1;
        transition: background 0.2s ease;
    }

    /* Fallback for browsers that don't support mask - use border approach */
    @supports not (mask: radial-gradient(circle, transparent 12px, black 13px)) {
        .whatsapp-circular-progress::before {
            display: none;
        }
        
        .whatsapp-circular-progress {
            border: 3px solid rgba(255, 255, 255, 0.3) !important;
            background: transparent !important;
        }
    }

    .whatsapp-progress-text {
        position: relative;
        z-index: 2 !important;
        color: var(--chat-button-text, #ffffff) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-align: center;
        line-height: 1;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        pointer-events: none;
    }

    [data-theme="light"] .whatsapp-circular-progress::before {
        background: conic-gradient(
            from 0deg,
            var(--chat-send-button, #01ADF1) 0deg,
            var(--chat-send-button, #01ADF1) calc(var(--progress, 0) * 3.6deg),
            rgba(0, 0, 0, 0.15) calc(var(--progress, 0) * 3.6deg),
            rgba(0, 0, 0, 0.15) 360deg
        );
    }
    
    @supports not (mask: radial-gradient(circle, transparent 12px, black 13px)) {
        [data-theme="light"] .whatsapp-circular-progress {
            border-color: rgba(0, 0, 0, 0.15) !important;
            border-top-color: var(--chat-send-button, #01ADF1) !important;
            border-right-color: var(--chat-send-button, #01ADF1) !important;
        }
    }

    [data-theme="light"] .whatsapp-progress-text {
        color: var(--chat-button-text, #111b21) !important;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    }

    /* Progress Bar (fallback) */
    .chat_input_wrapper.messageInput .progress {
        width: 100% !important;
        height: 25px !important;
        background: var(--chat-input-bg, #2C2C2C) !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        margin-bottom: 10px !important;
        display: none !important; /* Hide linear progress, use circular instead */
    }

    [data-theme="light"] .chat_input_wrapper.messageInput .progress {
        background: var(--chat-input-bg, #ffffff) !important;
    }

 
    /* ========================================
       BOTTOM CHAT ICON - SCROLL TO BOTTOM BUTTON
       ======================================== */
    
    /* Base Styles - Hidden by default, shown by JavaScript when needed */
    .bottom#bottom_chat_icon {
        position: fixed !important;
        bottom: 100px !important; /* At least 30px above input area (input ~60-70px) */
        right: 20px !important;
        width: 40px !important;
        height: 40px !important;
        background: var(--chat-send-button, #01ADF1) !important;
        border-radius: 50% !important;
        display: none;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 8px rgba(1, 173, 241, 0.3) !important;
        z-index: 1000 !important;
        color: #ffffff !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
    
    /* Icon inside button - remove any background/positioning from right-arrow-take class */
    .bottom#bottom_chat_icon i,
    .bottom#bottom_chat_icon i.right-arrow-take,
    .bottom#bottom_chat_icon i.fas.fa-arrow-down.right-arrow-take {
        color: #ffffff !important;
        font-size: 16px !important;
        display: block !important;
        text-align: center !important;
        line-height: 1 !important;
        pointer-events: none !important;
        background: transparent !important;
        background-color: transparent !important;
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hover state */
    .bottom#bottom_chat_icon:hover {
        transform: scale(1.1) !important;
        box-shadow: 0 4px 12px rgba(1, 173, 241, 0.4) !important;
        background: #0099d4 !important;
    }
    
    /* Active state */
    .bottom#bottom_chat_icon:active {
        transform: scale(0.95) !important;
    }
    
    /* Light Mode */
    [data-theme="light"] .bottom#bottom_chat_icon {
        background: #01ADF1 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    }
    
    [data-theme="light"] .bottom#bottom_chat_icon:hover {
        background: #0099d4 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    }
    
    /* Allow hiding when force-hidden class is present */
    .bottom#bottom_chat_icon.force-hidden {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    
    /* Allow showing when force-visible class is present */
    .bottom#bottom_chat_icon.force-visible {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Show icon when not force-hidden (JavaScript controlled via inline styles) */
    .bottom#bottom_chat_icon:not(.force-hidden) {
        display: flex;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    /* ========================================
       RESPONSIVE DESIGN
       ======================================== */
    
    @media (max-width: 768px) {
        /* Mobile: Keep input wrapper as row layout, only preview container will be separate */
        .chat_input_wrapper.messageInput {
            flex-direction: row !important;
            align-items: center !important;
            padding: 10px 12px !important;
            gap: 6px !important;
            flex-wrap: wrap !important;
        }
        
        /* Mobile: Preview container - full width row above input when visible */
        .chat_input_wrapper.messageInput #chat_image_preview_container {
            order: -1 !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 0 10px 0 !important;
            padding: 10px 12px !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
            background: #0E1012 !important;
            display: flex !important;
            flex-shrink: 0 !important;
            box-sizing: border-box !important;
        }
        
        [data-theme="light"] .chat_input_wrapper.messageInput #chat_image_preview_container {
            border-bottom: 1px solid #dee2e6 !important;
            background: #ffffff !important;
        }
        
        /* Mobile: Preview container when visible */
        .chat_input_wrapper.messageInput #chat_image_preview_container.image-ready,
        .chat_input_wrapper.messageInput #chat_image_preview_container.has-image {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* Mobile: Hide preview container when not visible */
        .chat_input_wrapper.messageInput #chat_image_preview_container:not(.image-ready):not(.has-image) {
            display: none !important;
            margin: 0 !important;
        }

        .chat_input_wrapper.messageInput .chat_emoji,
        .chat_input_wrapper.messageInput .picture-btn,
        .chat_input_wrapper.messageInput .attach_btn {
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            min-height: 36px !important;
            padding: 6px !important;
            font-size: 16px !important;
        }

        .chat_input_wrapper.messageInput #send_button {
            width: 40px !important;
            height: 40px !important;
            min-width: 40px !important;
            min-height: 40px !important;
        }

        .chat_input_wrapper.messageInput input[type="text"],
        .chat_input_wrapper.messageInput input[name="message"],
        .chat_input_wrapper.messageInput #message,
        .chat_input_wrapper.messageInput .type_msg,
        .chat_input_wrapper.messageInput .emojiable-question,
        .chat_input_wrapper.messageInput .form-control {
            padding: 10px 14px !important;
            font-size: 13px !important;
        }

        .btn-load-all-chat {
            padding: 6px 12px !important;
            font-size: 12px !important;
        }
    }

    @media (max-width: 480px) {
        /* Mobile: Keep input wrapper as row layout, only preview container will be separate */
        .chat_input_wrapper.messageInput {
            flex-direction: row !important;
            align-items: center !important;
            padding: 8px 10px !important;
            gap: 4px !important;
            flex-wrap: wrap !important;
        }
        
        /* Mobile: Preview container - full width row above input when visible */
        .chat_input_wrapper.messageInput #chat_image_preview_container {
            order: -1 !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 0 8px 0 !important;
            padding: 8px 10px !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
            background: #0E1012 !important;
            display: flex !important;
            flex-shrink: 0 !important;
            box-sizing: border-box !important;
        }
        
        [data-theme="light"] .chat_input_wrapper.messageInput #chat_image_preview_container {
            border-bottom: 1px solid #dee2e6 !important;
            background: #ffffff !important;
        }
        
        /* Mobile: Preview container when visible */
        .chat_input_wrapper.messageInput #chat_image_preview_container.image-ready,
        .chat_input_wrapper.messageInput #chat_image_preview_container.has-image {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* Mobile: Hide preview container when not visible */
        .chat_input_wrapper.messageInput #chat_image_preview_container:not(.image-ready):not(.has-image) {
            display: none !important;
            margin: 0 !important;
        }

        .chat_input_wrapper.messageInput .chat_emoji,
        .chat_input_wrapper.messageInput .picture-btn,
        .chat_input_wrapper.messageInput .attach_btn {
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            min-height: 32px !important;
            padding: 4px !important;
            font-size: 14px !important;
        }

        .chat_input_wrapper.messageInput #send_button {
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            min-height: 36px !important;
        }

        .chat_input_wrapper.messageInput #send_button i {
            font-size: 16px !important;
        }

        .chat_input_wrapper.messageInput input[type="text"],
        .chat_input_wrapper.messageInput input[name="message"],
        .chat_input_wrapper.messageInput #message,
        .chat_input_wrapper.messageInput .type_msg,
        .chat_input_wrapper.messageInput .emojiable-question,
        .chat_input_wrapper.messageInput .form-control {
            padding: 8px 12px !important;
            font-size: 12px !important;
        }
    }



    /* Dynamic Chat Header Styles */
    .chatsTop {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        /* Keep original dark mode background - don't change */
        transition: background-color 0.3s ease;
    }
    
    /* Light Mode - chatsTop */
    [data-theme="light"] .chatsTop {
        background: #ffffff !important;
        border-bottom: 1px solid #dee2e6 !important;
    }

    .user-profile-img {
        border: 2px solid #007bff;
        transition: all 0.3s ease;
        border-radius: 100% !important;
        -webkit-border-radius: 100% !important;
        -moz-border-radius: 100% !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        object-position: center center !important;
        overflow: hidden !important;
        display: block !important;
        flex-shrink: 0 !important;
        /* Ensure width and height are equal */
        min-width: var(--profile-img-size, 40px) !important;
        min-height: var(--profile-img-size, 40px) !important;
        max-width: var(--profile-img-size, 40px) !important;
        max-height: var(--profile-img-size, 40px) !important;
    }

    .user-profile-img:hover {
        border-color: #0056b3;
        transform: scale(1.05);
    }

    .search-form {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
    }

    .search-form img {
        position: absolute;
        left: 10px;
        z-index: 1;
        width: 16px;
        height: 16px;
    }

    .search-form .search_user {
        width: 100%;
        padding: 8px 8px 8px 35px;
        border: 1px solid #ddd;
        border-radius: 20px;
        font-size: 14px;
        background: white;
        transition: all 0.3s ease;
    }
    
    /* Light Mode - Search Input */
    [data-theme="light"] .chatsTop form .search_user,
    [data-theme="light"] .search-form .search_user {
        background: #ffffff !important;
        border: 1px solid #dee2e6 !important;
        color: #212529 !important;
    }
    
    [data-theme="light"] .chatsTop form .search_user:focus,
    [data-theme="light"] .search-form .search_user:focus {
        border-color: #01ADF1 !important;
        box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.1) !important;
    }

    .search-form .search_user:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    }

    .filter-btn, .dropdown, .achievement-btn {
        background: none;
        border: none;
        padding: 8px;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
    }

    .filter-btn:hover, .dropdown:hover, .achievement-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: scale(1.05);
    }
    
    /* Light Mode - Filter, Dropdown, Achievement Buttons */
    [data-theme="light"] .filter-btn:hover,
    [data-theme="light"] .dropdown:hover,
    [data-theme="light"] .achievement-btn:hover {
        background: #e9ecef !important;
    }
    
    .achievement-btn {
        color: #ffc107;
        font-size: 18px;
    }
    
    .achievement-btn:hover {
        color: #ff8f00;
        background: rgba(255, 193, 7, 0.1);
    }
    
    /* Ensure Font Awesome icons are loaded */
    .achievement-btn i {
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
    }
    
    .achievement-btn i:before {
        content: "\f091" !important;
    }

    .dropdown {
        position: relative;
    }

    .dropdownButton {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        border-radius: 50% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    .dropdownButton:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: scale(1.05) !important;
    }

    /* Light Mode - Dropdown Button Hover */
    [data-theme="light"] .dropdownButton:hover {
        background: rgba(0, 0, 0, 0.08) !important;
    }

    .dropdownButton input[type="checkbox"] {
        display: none;
    }

    /* Dropdown Button Image - Ensure visibility in all modes */
    .dropdownButton img {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        object-fit: contain !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
        filter: brightness(1) contrast(1.1) !important;
        transition: filter 0.3s ease !important;
    }

    /* Dark Mode - Dropdown Button Image (default - white/light icons) */
    [data-theme="dark"] .dropdownButton img,
    .dropdownButton img {
        filter: brightness(1.1) contrast(1.2) invert(0) !important;
        opacity: 1 !important;
    }

    /* Light Mode - Dropdown Button Image (darken for visibility on light background) */
    [data-theme="light"] .dropdownButton img {
        filter: brightness(0) contrast(1.3) invert(0) !important;
        opacity: 1 !important;
    }

    /* Ensure loaded class doesn't override visibility */
    .dropdownButton img.loaded {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Mobile Responsive - Dropdown Button */
    @media (max-width: 768px) {
        .dropdownButton {
            width: 40px !important;
            height: 40px !important;
            min-width: 40px !important;
            min-height: 40px !important;
            max-width: 40px !important;
            max-height: 40px !important;
            padding: 9px !important;
        }

        .dropdownButton img {
            width: 22px !important;
            height: 22px !important;
            min-width: 22px !important;
            min-height: 22px !important;
            max-width: 22px !important;
            max-height: 22px !important;
        }
    }

    @media (max-width: 576px) {
        .dropdownButton {
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            min-height: 36px !important;
            max-width: 36px !important;
            max-height: 36px !important;
            padding: 8px !important;
        }

        .dropdownButton img {
            width: 20px !important;
            height: 20px !important;
            min-width: 20px !important;
            min-height: 20px !important;
            max-width: 20px !important;
            max-height: 20px !important;
        }
    }

    .dropdownMenu {
        position: absolute;
        top: 100%;
        right: 0;
        background: #2C2C2C;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        min-width: 200px;
        z-index: 99999 !important; /* Very high z-index to appear above all elements */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        pointer-events: none; /* Disable pointer events when hidden */
    }
    
    /* Light Mode - Dropdown Menu */
    [data-theme="light"] .dropdownMenu {
        background: #ffffff !important;
        border: 1px solid #dee2e6 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    .dropdownMenu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto; /* Enable pointer events when shown */
    }

    .dropdownMenu a {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        color: #ffffff;
        text-decoration: none;
        transition: background-color 0.2s ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Light Mode - Dropdown Menu Links */
    [data-theme="light"] .dropdownMenu a {
        color: #212529 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .dropdownMenu a:last-child {
        border-bottom: none;
    }

    .dropdownMenu a:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #01ADF1;
    }
    
    /* Light Mode - Dropdown Menu Link Hover */
    [data-theme="light"] .dropdownMenu a:hover {
        background: #f8f9fa !important;
        color: #01ADF1 !important;
    }

    .dropdownMenu a i {
        margin-right: 10px;
        width: 16px;
        text-align: center;
    }

    .dropdown .bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        background: transparent;
    }

    /* Filter Dropdown Menu Styles */
    .filter-dropdown-wrapper {
        position: relative;
    }

    .filterMenu {
        position: absolute;
        top: 100%;
        right: 0;
        background: #2C2C2C;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        min-width: 200px;
        z-index: 99999 !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        pointer-events: none;
        margin-top: 5px;
    }

    /* Light Mode - Filter Menu */
    [data-theme="light"] .filterMenu {
        background: #ffffff !important;
        border: 1px solid #dee2e6 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    .filterMenu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .filterMenu .filter-option {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        color: #ffffff;
        text-decoration: none;
        transition: background-color 0.2s ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }

    /* Light Mode - Filter Option Links */
    [data-theme="light"] .filterMenu .filter-option {
        color: #212529 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .filterMenu .filter-option:last-child {
        border-bottom: none;
    }

    .filterMenu .filter-option:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #01ADF1;
    }

    /* Light Mode - Filter Option Hover */
    [data-theme="light"] .filterMenu .filter-option:hover {
        background: #f8f9fa !important;
        color: #01ADF1 !important;
    }

    .filterMenu .filter-option.active {
        background: rgba(1, 173, 241, 0.2);
        color: #01ADF1;
    }

    /* Light Mode - Active Filter Option */
    [data-theme="light"] .filterMenu .filter-option.active {
        background: rgba(1, 173, 241, 0.1) !important;
        color: #01ADF1 !important;
    }

    .filterMenu .filter-option i {
        margin-right: 10px;
        width: 16px;
        text-align: center;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .chatsTop {
            padding: 8px;
            gap: 8px;
        }
        
        .user-profile-img {
            width: 35px;
            height: 35px;
        }
        
        .dropdownMenu {
            min-width: 180px;
        }
    }
    
    /* Chat List Header - Use Same Styling as Message Header - Theme Aware */
    .chat-list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        /* Match chatsTop background - inherit from parent */
        background: inherit;
        border-bottom: none;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    /* Light Mode - Chat List Header */
    [data-theme="light"] .chat-list-header {
        background: #ffffff !important;
        border-bottom: 1px solid #dee2e6 !important;
    }
    
    .chat-list-header .header-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .chat-list-header h1 {
        font-size: 20px;
        font-weight: 500;
        color: #FFFFFF;
        margin: 0;
        font-family: sans-serif;
        transition: color 0.3s ease;
    }
    
    /* Light Mode - Chat List Header Title */
    [data-theme="light"] .chat-list-header h1 {
        color: #212529 !important;
    }
    
    .chat-list-header .header-right {
        display: flex;
        align-items: center;
        gap: 16px;
    }
    
    .chat-list-header .invite-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: #282828;
        border: none;
        border-radius: 6px;
        color: #5D5D5D;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        font-family: sans-serif;
    }
    
    .chat-list-header .invite-btn:hover {
        background: #2f2f2f;
    }
    
    /* Light Mode - Chat List Invite Button */
    [data-theme="light"] .chat-list-header .invite-btn {
        background: #f8f9fa !important;
        color: #212529 !important;
        border: 1px solid #dee2e6 !important;
    }
    
    [data-theme="light"] .chat-list-header .invite-btn:hover {
        background: #e9ecef !important;
        border-color: #adb5bd !important;
    }
    
    .chat-list-header .invite-btn i {
        font-size: 16px;
        color: #5D5D5D;
        transition: color 0.3s ease;
    }
    
    /* Light Mode - Invite Button Icon */
    [data-theme="light"] .chat-list-header .invite-btn i {
        color: #212529 !important;
    }
    
    .chat-list-header .invite-btn span {
        font-size: 14px;
        color: #5D5D5D;
        transition: color 0.3s ease;
        font-family: sans-serif;
    }
    
    /* Light Mode - Invite Button Text */
    [data-theme="light"] .chat-list-header .invite-btn span {
        color: #212529 !important;
    }
    
    .chat-list-header .bell-btn {
        background: #282828;
        border: none;
        color: #5D5D5D;
        font-size: 18px;
        cursor: pointer;
        padding: 8px;
        border-radius: 50%;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
    }
    
    .chat-list-header .bell-btn:hover {
        background: #2f2f2f;
    }
    
    /* Light Mode - Chat List Bell Button */
    [data-theme="light"] .chat-list-header .bell-btn {
        background: #f8f9fa !important;
        color: #212529 !important;
        border: 1px solid #dee2e6 !important;
    }
    
    [data-theme="light"] .chat-list-header .bell-btn:hover {
        background: #e9ecef !important;
        border-color: #adb5bd !important;
    }
    
    .chat-list-header .bell-btn i {
        color: #5D5D5D;
        transition: color 0.3s ease;
    }
    
    /* Light Mode - Bell Button Icon */
    [data-theme="light"] .chat-list-header .bell-btn i {
        color: #212529 !important;
    }
    
    /* Chat List Profile Images - Perfect Circular Shape */
    /* Ensure all profile images and placeholders in chat list are perfectly circular */
    .chat_user .img,
    .chat.chatList .img,
    .chatList .img {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
        border-radius: 50% !important;
        -webkit-border-radius: 50% !important;
        -moz-border-radius: 50% !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        position: relative !important;
        box-sizing: border-box !important;
    }
    
    /* All images inside .img container - Perfect circular */
    .chat_user .img img,
    .chat.chatList .img img,
    .chatList .img img,
    .chat_user .img img[src=""],
    .chat_user .img img[src*="default"],
    .chat_user .img img[src*="profilePic"],
    .chat_user .img img[src*="profile_image"],
    .chat_user .img img[src*="default-male"],
    .chat_user .img img[src*="default-female"],
    .chat_user .img img[alt=""] {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
        border-radius: 50% !important;
        -webkit-border-radius: 50% !important;
        -moz-border-radius: 50% !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        position: relative !important;
        background-color: transparent !important;
    }
    
    /* Placeholder for broken images */
    .chat_user .img img::before,
    .chat.chatList .img img::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50% !important;
        background-color: #e0e0e0;
        background-image: url('{{ asset(FRONT_IMAGES . "newImages/profilePic.png") }}');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    /* Handle image load errors - ensure placeholder is circular */
    .chat_user .img img[onerror],
    .chat.chatList .img img[onerror] {
        border-radius: 50% !important;
        -webkit-border-radius: 50% !important;
        -moz-border-radius: 50% !important;
    }

    .message {
        height: initial;
        border: none;
        }
        .mainSection.messages{
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }
        .right-section{
            background : transparent;
            position : static;
        }
    
        /* MainFeed - Match Image Design Exactly - Same Height as MessagesContainer */
        .mainSection.messages .mainFeed {
            right: 0;
            position: sticky;
            top: 0;
            background: #0E1012;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            height: calc(100vh - 40px) !important; /* Match viewport height minus body padding */
            max-height: calc(100vh - 40px) !important;
            min-height: calc(100vh - 40px) !important;
        }
        
        /* Light Mode - MainFeed */
        [data-theme="light"] .mainSection.messages .mainFeed {
            background: #ffffff !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        }
        
        /* MessagesContainer - Match Image Design Exactly - Same Height as MainFeed */
        .mainSection.messages .messagesContainer {
            position: relative;
            width: 100%;
            height: calc(100vh - 40px) !important; /* Match mainFeed height exactly */
            max-height: calc(100vh - 40px) !important;
            min-height: calc(100vh - 40px) !important;
            background: #0E1012;
            border-radius: 12px;
            overflow: hidden;
            transition: background-color 0.3s ease;
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
        }
        
        /* Light Mode - MessagesContainer */
        [data-theme="light"] .mainSection.messages .messagesContainer {
            background: #ffffff !important;
        }
        
        /* Messages Window Layout - Fixed Input at Bottom */
        .mainSection.messages .messagesContainer .messagesWindow {
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .mainSection.messages .messagesContainer .messagesWindow #chat_body {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            min-height: 0 !important;
            position: relative !important;
            padding-bottom: 150px !important; /* Space for fixed input wrapper + preview */
            border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
            transition: border-color 0.3s ease !important;
               }
        
        /* Light Mode - Chat Body */
        [data-theme="light"] .mainSection.messages .messagesContainer .messagesWindow #chat_body {
            border-left: 1px solid #dee2e6 !important;
            border-right: 1px solid #dee2e6 !important;
            border-top: 1px solid #dee2e6 !important;
            border-bottom: 1px solid #dee2e6 !important;
        }
        
        .mainSection.messages .messagesContainer .messagesWindow #chat_body .messagesBox {
            flex: 1 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            min-height: 0 !important;
        }
        
        /* Fix Input Wrapper at Bottom - Match Background */
        .mainSection.messages .messagesContainer .messagesWindow .chat_input_wrapper.messageInput {
            position: absolute !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            z-index: 100 !important;
            flex-shrink: 0 !important;
            margin: 0 !important;
            border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
            transition: border-color 0.3s ease !important;
        }
        
        /* Light Mode - Input Wrapper Border */
        [data-theme="light"] .mainSection.messages .messagesContainer .messagesWindow .chat_input_wrapper.messageInput {
            border-left: 1px solid #dee2e6 !important;
            border-right: 1px solid #dee2e6 !important;
            border-bottom: 1px solid #dee2e6 !important;
            border-top: 1px solid #dee2e6 !important;
        }
        
        /* Load More Messages Button - Below header */
        .load-more-below-header {
            text-align: center;
            padding: 10px 0;
            background: transparent;
            position: absolute;
            top: 60px; /* Position below header */
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            pointer-events: none; /* Allow clicks to pass through to chat */
        }
        
        .load-more-below-header .btn-load-chat-whatsapp {
            pointer-events: auto; /* Enable clicks on button only */
            background: #007bff !important; /* Same as scroll to bottom button */
            box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important; /* Same shadow as scroll to bottom */
            border: 2px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(5px);
        }
        
        .load-more-below-header .btn-load-chat-whatsapp:hover {
            background: #0056b3 !important; /* Same hover color as scroll to bottom */
            box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
            transform: translateY(-2px) scale(1.1) !important; /* Same scale as scroll to bottom */
        }
        
        .load-more-below-header .btn-load-chat-whatsapp:active {
            transform: translateY(0) scale(0.95) !important; /* Same active scale as scroll to bottom */
        }
        
        /* Chat List - Full Width Initially - Always visible by default */
        .mainSection.messages .messagesContainer .chats,
        .mainSection.messages .messagesContainer .user_list.chats {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 100% !important;
            height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 1 !important;
            transition: all 0.3s ease !important;
            border-top: none !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateX(0) !important;
        }
        
        /* Message Window - Hidden Initially */
        .mainSection.messages .messagesContainer .messagesWindow {
            width: 100%;
            height: 100%;
            display: flex !important;
            flex-direction: column !important;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            transition: all 0.3s ease;
            opacity: 0;
            visibility: hidden;
            transform: translateX(100%);
        }
        
        /* Show Chat List - Default visible, or when active */
        .mainSection.messages .messagesContainer .chats.active,
        .mainSection.messages .messagesContainer .user_list.chats.active,
        .mainSection.messages .messagesContainer .user_list.chats {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateX(0) !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
        }
        
        /* Hide Chat List - Only when message window is active */
        .mainSection.messages .messagesContainer .messagesWindow.active ~ .user_list.chats,
        .mainSection.messages .messagesContainer .messagesWindow.active ~ .chats {
            opacity: 0 !important;
            visibility: hidden !important;
            transform: translateX(-100%) !important;
            pointer-events: none !important;
        }
        
        /* Ensure user_list.chats is visible by default - Override any hiding rules */
        .mainSection.messages .messagesContainer .user_list.chats {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateX(0) !important;
            display: flex !important;
            flex-direction: column !important;
        }
        
        /* When message window is NOT active, ensure chat list is visible */
        .mainSection.messages .messagesContainer .messagesWindow:not(.active) ~ .user_list.chats,
        .mainSection.messages .messagesContainer .messagesWindow:not(.active) ~ .chats {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateX(0) !important;
            pointer-events: auto !important;
        }
        
        /* Show Message Window */
        .mainSection.messages .messagesContainer .messagesWindow.active {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
            padding-bottom: 15px !important;
        }
        
        /* Remove bottom padding from chat_body when messagesWindow is active */
        .mainSection.messages .messagesContainer .messagesWindow.active #chat_body {
            padding-bottom: 15px !important;
        }
        
        /* Remove bottom padding from messagesBox when messagesWindow is active */
        .mainSection.messages .messagesContainer .messagesWindow.active .messagesBox {
            padding-bottom: 15px !important;
        }
        
        /* Hide Message Window */
        .mainSection.messages .messagesContainer .messagesWindow:not(.active) {
            opacity: 0;
            visibility: hidden;
            transform: translateX(100%);
            pointer-events: none;
        }
        
        /* Ensure proper stacking */
        .mainSection.messages .messagesContainer .chats,
        .mainSection.messages .messagesContainer .user_list.chats {
            z-index: 1 !important;
        }
        
        .mainSection.messages .messagesContainer .messagesWindow {
            z-index: 2 !important;
        }
        
        /* Override any existing width constraints from other CSS files */
        .mainSection.messages .messagesContainer {
            display: flex !important;
            position: relative !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        
        /* Ensure chat list content is full width */
        .mainSection.messages .messagesContainer .chats .chatsTop,
        .mainSection.messages .messagesContainer .chats .chats-inner,
        .mainSection.messages .messagesContainer .user_list .chatsTop,
        .mainSection.messages .messagesContainer .user_list .chats-inner {
            width: 100% !important;
            max-width: 100% !important;
        }
        
        @media screen and (min-width : 1024px) {
            .mainSection.messages{
                width: 100%;
                justify-content : flex-start;
            }
        }
        @media screen and (min-width : 1280px) {
           
            .mainSection.messages{
                justify-content : center
            }
        }
        @media screen and (max-width : 767px) {
            body{
                overflow : initial 
            }
            
            /* Mobile: Full height adjustments */
            .mainSection.messages .mainFeed {
                height: calc(100vh - 0px) !important;
                max-height: calc(100vh - 0px) !important;
                min-height: calc(100vh - 0px) !important;
                border-radius: 0 !important;
            }
            
            .mainSection.messages .messagesContainer {
                height: calc(100vh - 0px) !important;
                max-height: calc(100vh - 0px) !important;
                min-height: calc(100vh - 0px) !important;
                border-radius: 0 !important;
            }
            
            /* Mobile: Chat list full width */
            .mainSection.messages .messagesContainer .chats,
            .mainSection.messages .messagesContainer .user_list.chats {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 100% !important;
            }
            
            /* Mobile: Messages window - hide separate window, show in sidebar */
            .mainSection.messages .messagesContainer .messagesWindow {
                display: none !important;
            }
            
            /* Mobile: Show messages within sidebar when active */
            .mainSection.messages .messagesContainer .user_list.chats.messages-active {
                position: relative !important;
            }
            
            /* Mobile: Hide chat list content when showing messages */
            .mainSection.messages .messagesContainer .user_list.chats.messages-active .chatsTop,
            .mainSection.messages .messagesContainer .user_list.chats.messages-active .chats-inner {
                display: none !important;
            }
            
            /* Mobile: Show messages content in sidebar */
            .mainSection.messages .messagesContainer .user_list.chats.messages-active .mobile-messages-container {
                display: flex !important;
                flex-direction: column !important;
                height: 100% !important;
                width: 100% !important;
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                background: #0E1012 !important;
                z-index: 10 !important;
            }
            
            [data-theme="light"] .mainSection.messages .messagesContainer .user_list.chats.messages-active .mobile-messages-container {
                background: #ffffff !important;
            }
            
            /* Mobile: Hide mobile messages container by default */
            .mainSection.messages .messagesContainer .user_list.chats:not(.messages-active) .mobile-messages-container {
                display: none !important;
            }
            
            /* Mobile: Messages body styling */
            #mobile_chat_body {
                flex: 1 !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                display: flex !important;
                flex-direction: column !important;
                min-height: 0 !important;
                padding-bottom: 120px !important;
                padding-left: 8px !important;
                padding-right: 8px !important;
                padding-top: 16px !important;
            }
            
            /* Mobile: Ensure messages box is scrollable */
            #mobile_chat_body .messagesBox {
                flex: 1 !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                min-height: 0 !important;
                padding-left: 4px !important;
                padding-right: 4px !important;
            }
            
            /* Mobile: Input wrapper in mobile messages */
            #mobile_chat_body .chat_input_wrapper {
                position: absolute !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                z-index: 100 !important;
                flex-direction: row !important;
                flex-wrap: wrap !important;
            }
            
            /* Mobile: Preview container in mobile messages - above input when visible */
            #mobile_chat_body .chat_input_wrapper #chat_image_preview_container {
                order: -1 !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 0 10px 0 !important;
                padding: 10px 12px !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
                background: #0E1012 !important;
                display: flex !important;
                flex-shrink: 0 !important;
                box-sizing: border-box !important;
            }
            
            [data-theme="light"] #mobile_chat_body .chat_input_wrapper #chat_image_preview_container {
                border-bottom: 1px solid #dee2e6 !important;
                background: #ffffff !important;
            }
            
            /* Mobile: Hide preview container when not visible */
            #mobile_chat_body .chat_input_wrapper #chat_image_preview_container:not(.image-ready):not(.has-image) {
                display: none !important;
                margin: 0 !important;
            }
            
            /* Mobile: Back button to return to chat list */
            .mobile-back-button {
                display: flex !important;
                align-items: center !important;
                padding: 12px 15px !important;
                background: transparent !important;
                border: none !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
                color: #ffffff !important;
                cursor: pointer !important;
                font-size: 16px !important;
                gap: 10px !important;
                transition: background-color 0.3s ease !important;
            }
            
            [data-theme="light"] .mobile-back-button {
                border-bottom: 1px solid #dee2e6 !important;
                color: #212529 !important;
            }
            
            .mobile-back-button:hover {
                background: rgba(255, 255, 255, 0.05) !important;
            }
            
            [data-theme="light"] .mobile-back-button:hover {
                background: #f8f9fa !important;
            }
            
            .mobile-back-button i {
                font-size: 18px !important;
            }
            
            .mobile-back-button span {
                font-weight: 500 !important;
            }
            
            /* Mobile: Hide back button when not showing messages */
            .mainSection.messages .messagesContainer .user_list.chats:not(.messages-active) .mobile-back-button {
                display: none !important;
            }
            
            /* Mobile: Header adjustments */
            .headRight-section {
                padding: 10px 15px !important;
            }
            
            .message-header {
                padding: 10px 15px !important;
            }
            
            .message-header h1 {
                font-size: 18px !important;
            }
            
            .header-right .invite-btn,
            .header-right .bell-btn {
                width: 36px !important;
                height: 36px !important;
                font-size: 14px !important;
            }
            
            .header-right .invite-btn span {
                display: none !important;
            }
            
            /* Mobile: Chat body padding adjustments */
            .mainSection.messages .messagesContainer .messagesWindow #chat_body {
                padding-bottom: 120px !important;
            }
            
            /* Mobile: Input wrapper adjustments */
            .mainSection.messages .messagesContainer .messagesWindow .chat_input_wrapper.messageInput {
                padding: 10px 15px !important;
            }
            
            /* Mobile: Message bubbles */
            .message.received,
            .message.sent {
                padding: 0 12px !important;
                margin-bottom: 10px !important;
            }
            
            .message.received .message-avatar {
                width: 28px !important;
                height: 28px !important;
                min-width: 28px !important;
                min-height: 28px !important;
                max-width: 28px !important;
                max-height: 28px !important;
                margin-right: 8px !important;
            }
            
            /* Mobile: Chat list header */
            .mainSection.messages .messagesContainer .chats .chatsTop {
                padding: 15px !important;
            }
            
            .mainSection.messages .messagesContainer .chats .chatsTop form input {
                font-size: 14px !important;
                padding: 10px 15px !important;
            }
            
            /* Mobile: Chat items */
            .mainSection.messages .messagesContainer .chats .chat {
                padding: 12px 15px !important;
            }
            
            /* Mobile: Bottom chat icon */
            .bottom#bottom_chat_icon {
                width: 50px !important;
                height: 50px !important;
                font-size: 20px !important;
                bottom: 120px !important; /* At least 30px above input area on mobile */
            }
            
            .bottom#bottom_chat_icon i {
                font-size: 20px !important;
            }
            
            /* Mobile: Preview container */
            #chat_image_preview_container {
                padding: 10px 15px !important;
            }
            
            /* Mobile: Input textarea */
            .chat_input_wrapper textarea,
            .chat_input_wrapper #chat_message {
                font-size: 14px !important;
                padding: 10px 15px !important;
            }
            
            /* Mobile: Action buttons */
            .chat_input_wrapper .chat_image,
            .chat_input_wrapper .chat_video,
            .chat_input_wrapper .chat_send {
                width: 40px !important;
                height: 40px !important;
                font-size: 16px !important;
            }
        }
        
        /* Tablet Responsive (768px - 1023px) */
        @media screen and (min-width: 768px) and (max-width: 1023px) {
            .mainSection.messages .messagesContainer .chats,
            .mainSection.messages .messagesContainer .user_list.chats {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 100% !important;
            }
            
            .mainSection.messages .messagesContainer .messagesWindow {
                width: 100% !important;
                min-width: 100% !important;
            }
            
            .mainSection.messages .mainFeed {
                height: calc(100vh - 20px) !important;
                max-height: calc(100vh - 20px) !important;
                min-height: calc(100vh - 20px) !important;
            }
            
            .mainSection.messages .messagesContainer {
                height: calc(100vh - 20px) !important;
                max-height: calc(100vh - 20px) !important;
                min-height: calc(100vh - 20px) !important;
            }
        }
        
        /* Small Mobile (max-width: 480px) */
        @media screen and (max-width: 480px) {
            .mainSection.messages .mainFeed {
                height: 100vh !important;
                max-height: 100vh !important;
                min-height: 100vh !important;
            }
            
            .mainSection.messages .messagesContainer {
                height: 100vh !important;
                max-height: 100vh !important;
                min-height: 100vh !important;
            }
            
            .headRight-section {
                padding: 8px 12px !important;
            }
            
            .message-header {
                padding: 8px 12px !important;
            }
            
            .message-header h1 {
                font-size: 16px !important;
            }
            
            .mainSection.messages .messagesContainer .messagesWindow #chat_body {
                padding-bottom: 110px !important;
            }
            
            .mainSection.messages .messagesContainer .messagesWindow .chat_input_wrapper.messageInput {
                padding: 8px 12px !important;
            }
            
            .message.received,
            .message.sent {
                padding: 0 10px !important;
                margin-bottom: 8px !important;
            }
            
            .mainSection.messages .messagesContainer .chats .chatsTop {
                padding: 12px !important;
            }
            
            .mainSection.messages .messagesContainer .chats .chat {
                padding: 10px 12px !important;
            }
            
            /* Tablet: Bottom chat icon */
            .bottom#bottom_chat_icon {
                width: 45px !important;
                height: 45px !important;
                bottom: 110px !important; /* At least 30px above input area on tablet */
            }
            
            .bottom#bottom_chat_icon i {
                font-size: 18px !important;
            }
            
            /* Mobile: Preview container adjustments */
            #chat_image_preview_container {
                padding: 8px 12px !important;
                margin-bottom: 8px !important;
            }
            
            #chat_image_preview_img_display,
            #chat_video_preview_display {
                max-width: 100% !important;
                max-height: 200px !important;
            }
            
            #chat_image_preview_filename {
                font-size: 12px !important;
            }
            
            #chat_image_preview_size {
                font-size: 11px !important;
            }
            
            /* Mobile: Emoji picker */
            .fg-emoji-picker {
                max-width: calc(100vw - 20px) !important;
                left: 10px !important;
                right: 10px !important;
            }
            
            /* Mobile: Modals */
            .modal-dialog {
                margin: 10px !important;
                max-width: calc(100% - 20px) !important;
            }
            
            .modal-content {
                border-radius: 12px !important;
            }
            
            #modal_chat_image,
            #modal_chat_video {
                max-width: 100% !important;
                height: auto !important;
            }
            
            /* Mobile: Invite modal */
            .invite-modal-content {
                width: 100% !important;
                max-width: 100% !important;
                max-height: 100vh !important;
                border-radius: 0 !important;
                margin: 0 !important;
            }
            
            .invite-modal-header,
            .invite-modal-search {
                padding: 12px !important;
            }
            
            .invite-modal-body {
                padding: 10px 12px !important;
            }
            
            /* Mobile: Scroll to bottom button */
            .scroll-to-bottom-btn {
                width: 40px !important;
                height: 40px !important;
                font-size: 16px !important;
                bottom: 80px !important;
            }
        }
        
        /* Landscape Mobile (max-width: 767px and orientation: landscape) */
        @media screen and (max-width: 767px) and (orientation: landscape) {
            .mainSection.messages .mainFeed {
                height: 100vh !important;
            }
            
            .mainSection.messages .messagesContainer {
                height: 100vh !important;
            }
            
            .mainSection.messages .messagesContainer .messagesWindow #chat_body {
                padding-bottom: 100px !important;
            }
        }
        .mainSection.messages .mainFeed > h1{
            color : white !important
        }
        header {
            height: 50px;
        }
        header .logo {
            height: 40px;
            width: auto;
            object-fit: contain;
        }
        
        /* Ensure headRight-section uses correct styling - Match Image Design - Theme Aware */
        .headRight-section.messageTop {
            /* Match chat list background - inherit from parent */
            background: inherit !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
            padding: 0 !important;
            margin: 0 !important;
            transition: background-color 0.3s ease, border-color 0.3s ease !important;
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
        }
        
        /* Light Mode - Header Section */
        [data-theme="light"] .headRight-section.messageTop {
            background: #ffffff !important;
            border: 1px solid #dee2e6 !important;
            border-bottom: 1px solid #dee2e6 !important;
        }
        
        /* Chat List Header - Match Chat List Design Exactly */
        /* Use EXACT same styles as sidebar - no message-header specific styles */
        .chat-list-header {
            /* Match chatsTop background - inherit from parent */
            background: inherit !important;
            border-bottom: none !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            padding: 16px 20px !important;
            transition: background-color 0.3s ease !important;
        }
        
        /* Light Mode - Chat List Header */
        [data-theme="light"] .chat-list-header {
            background: #ffffff !important;
            border-bottom: 1px solid #dee2e6 !important;
        }
        
        /* Ensure secondary header matches chatsTop design - Theme Aware */
        .headRight-section .contact-header-bar {
            /* Match chatsTop - inherit background in dark mode */
            background: inherit !important;
            border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
            transition: background-color 0.3s ease, border-color 0.3s ease !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 10px !important;
            padding: 10px !important;
            width: 100% !important;
            clear: both !important;
            flex-direction: row !important;
            box-sizing: border-box !important;
        }
        
        /* Ensure contact-header-bar appears on new line after chat-list-header */
        .headRight-section .chat-list-header + .contact-header-bar {
            display: flex !important;
            margin-top: 0 !important;
        }
        
        /* Light Mode - Contact Header Bar - Match chatsTop */
        [data-theme="light"] .headRight-section .contact-header-bar {
            background: #ffffff !important;
            border-left: 1px solid #dee2e6 !important;
            border-right: 1px solid #dee2e6 !important;
            border-top: 1px solid #dee2e6 !important;
            border-bottom: 1px solid #dee2e6 !important;
        }
        /* Bottom chat icon overrides - use consistent selector */
        .bottom#bottom_chat_icon {
            z-index: 1000 !important;
        }
        
        /* Allow hiding when force-hidden class is present */
        .bottom#bottom_chat_icon.force-hidden {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
            height: 0 !important;
            width: 0 !important;
            overflow: hidden !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
        }
        
        .bottom#bottom_chat_icon.force-visible {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }
        @media screen and (max-width : 800px) {
            header{
                display : none !important
            }
        } 
        
        /* ========================================
           SCROLLBAR STYLING - DARK & LIGHT MODE
           ======================================== */
        
        /* Dark Mode Scrollbar - Messages Box */
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox::-webkit-scrollbar,
        .mainSection.messages .messagesContainer .chats::-webkit-scrollbar,
        .mainSection.messages .messagesContainer .user_list.chats::-webkit-scrollbar {
            width: 8px !important;
        }
        
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox::-webkit-scrollbar-track,
        .mainSection.messages .messagesContainer .chats::-webkit-scrollbar-track,
        .mainSection.messages .messagesContainer .user_list.chats::-webkit-scrollbar-track {
            background: #1a1a1a !important;
            border-radius: 4px !important;
        }
        
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox::-webkit-scrollbar-thumb,
        .mainSection.messages .messagesContainer .chats::-webkit-scrollbar-thumb,
        .mainSection.messages .messagesContainer .user_list.chats::-webkit-scrollbar-thumb {
            background: #4a4a4a !important;
            border-radius: 4px !important;
            transition: background-color 0.3s ease !important;
        }
        
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox::-webkit-scrollbar-thumb:hover,
        .mainSection.messages .messagesContainer .chats::-webkit-scrollbar-thumb:hover,
        .mainSection.messages .messagesContainer .user_list.chats::-webkit-scrollbar-thumb:hover {
            background: #5a5a5a !important;
        }
        
        /* Light Mode Scrollbar - Messages Box */
        [data-theme="light"] .mainSection.messages .messagesContainer .messagesWindow .messagesBox::-webkit-scrollbar-track,
        [data-theme="light"] .mainSection.messages .messagesContainer .chats::-webkit-scrollbar-track,
        [data-theme="light"] .mainSection.messages .messagesContainer .user_list.chats::-webkit-scrollbar-track {
            background: #f1f1f1 !important;
        }
        
        [data-theme="light"] .mainSection.messages .messagesContainer .messagesWindow .messagesBox::-webkit-scrollbar-thumb,
        [data-theme="light"] .mainSection.messages .messagesContainer .chats::-webkit-scrollbar-thumb,
        [data-theme="light"] .mainSection.messages .messagesContainer .user_list.chats::-webkit-scrollbar-thumb {
            background: #c1c1c1 !important;
        }
        
        [data-theme="light"] .mainSection.messages .messagesContainer .messagesWindow .messagesBox::-webkit-scrollbar-thumb:hover,
        [data-theme="light"] .mainSection.messages .messagesContainer .chats::-webkit-scrollbar-thumb:hover,
        [data-theme="light"] .mainSection.messages .messagesContainer .user_list.chats::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1 !important;
        }
        
        /* Firefox Scrollbar - Dark Mode */
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox,
        .mainSection.messages .messagesContainer .chats,
        .mainSection.messages .messagesContainer .user_list.chats {
            scrollbar-width: thin !important;
            scrollbar-color: #4a4a4a #1a1a1a !important;
        }
        
        /* Firefox Scrollbar - Light Mode */
        [data-theme="light"] .mainSection.messages .messagesContainer .messagesWindow .messagesBox,
        [data-theme="light"] .mainSection.messages .messagesContainer .chats,
        [data-theme="light"] .mainSection.messages .messagesContainer .user_list.chats {
            scrollbar-color: #c1c1c1 #f1f1f1 !important;
        }
        
        /* Input Area - Match Image Design - Theme Aware - Fixed at Bottom */
        .chat_input_wrapper.messageInput {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            padding: 12px 20px !important;
            /* Match messagesContainer background */
            background: #0E1012 !important;
            border-top: none !important;
            transition: background-color 0.3s ease !important;
            box-sizing: border-box !important;
            position: relative !important; /* For preview container positioning */
        }
        
        /* Image Preview Container Styling */
        #chat_image_preview_container {
            z-index: 1001 !important;
            position: absolute !important;
            bottom: calc(100% + 5px) !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            display: none; /* Hidden by default */
            visibility: hidden; /* Hidden until image loads */
            opacity: 0; /* Hidden until image loads */
            overflow: visible !important;
            pointer-events: none; /* Disable interactions until visible */
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        
        /* Only show when image is ready and explicitly marked as ready */
        #chat_image_preview_container.image-ready {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }
        
        /* Hide image preview until it's loaded */
        #chat_image_preview_img_display {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        #chat_image_preview_img_display.image-loaded {
            display: block !important;
            opacity: 1 !important;
        }
        
        /* Ensure preview container is not clipped */
        .chat_input_wrapper.messageInput {
            overflow: visible !important;
        }
        
        .messagesWindow {
            overflow: visible !important;
        }
        
        /* Light Mode - Image Preview Container */
        [data-theme="light"] #chat_image_preview_container {
            background: #f8f9fa !important;
            border: 1px solid #dee2e6 !important;
        }
        
        [data-theme="light"] #chat_image_preview_filename {
            color: #333 !important;
        }
        
        /* Light Mode - Input Wrapper */
        [data-theme="light"] .chat_input_wrapper.messageInput {
            background: #ffffff !important;
            border-top: 1px solid #dee2e6 !important;
        }
        
        .chat_input_wrapper.messageInput .user-profile-img {
            display: none !important; /* Hide user profile image in input area per design */
        }
        
        /* Emoji button on left */
        .chat_input_wrapper.messageInput .smile_btn {
            background: transparent;
            border: none;
            color: #ffffff;
            font-size: 20px;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            order: 1;
        }
        
        .chat_input_wrapper.messageInput .smile_btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        /* Light Mode - Emoji Button */
        [data-theme="light"] .chat_input_wrapper.messageInput .smile_btn {
            color: #212529 !important;
        }
        
        [data-theme="light"] .chat_input_wrapper.messageInput .smile_btn:hover {
            background: rgba(0, 0, 0, 0.05) !important;
        }
        
        .chat_input_wrapper.messageInput .smile_btn img {
            width: 20px;
            height: 20px;
            filter: brightness(0) invert(1);
            transition: filter 0.3s ease;
        }
        
        /* Light Mode - Emoji Button Image */
        [data-theme="light"] .chat_input_wrapper.messageInput .smile_btn img {
            filter: brightness(0) invert(0) !important;
        }
        
        /* Message input field - Theme Aware */
        .chat_input_wrapper.messageInput input[type="text"],
        .chat_input_wrapper.messageInput input[name="message"] {
            flex: 1;
            padding: 12px 16px;
            background: #2C2C2C;
            border: none;
            border-radius: 20px;
            color: #ffffff;
            font-size: 14px;
            outline: none;
            order: 2;
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }
        
        /* Light Mode - Input Field */
        [data-theme="light"] .chat_input_wrapper.messageInput input[type="text"],
        [data-theme="light"] .chat_input_wrapper.messageInput input[name="message"] {
            background: #ffffff !important;
            color: #212529 !important;
            border: 1px solid #dee2e6 !important;
        }
        
        .chat_input_wrapper.messageInput input[type="text"]:focus,
        .chat_input_wrapper.messageInput input[name="message"]:focus {
            border-color: rgba(255, 255, 255, 0.3);
        }
        
        /* Light Mode - Input Focus */
        [data-theme="light"] .chat_input_wrapper.messageInput input[type="text"]:focus,
        [data-theme="light"] .chat_input_wrapper.messageInput input[name="message"]:focus {
            border-color: #01ADF1 !important;
            box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.1) !important;
        }
        
        .chat_input_wrapper.messageInput input[type="text"]::placeholder,
        .chat_input_wrapper.messageInput input[name="message"]::placeholder {
            color: #888;
            transition: color 0.3s ease;
        }
        
        /* Light Mode - Input Placeholder */
        [data-theme="light"] .chat_input_wrapper.messageInput input[type="text"]::placeholder,
        [data-theme="light"] .chat_input_wrapper.messageInput input[name="message"]::placeholder {
            color: #adb5bd !important;
        }
        
        /* Picture button */
        .chat_input_wrapper.messageInput .picture-btn {
            background: transparent;
            border: none;
            color: #ffffff;
            font-size: 18px;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            order: 3;
        }
        
        .chat_input_wrapper.messageInput .picture-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        /* Light Mode - Picture Button */
        [data-theme="light"] .chat_input_wrapper.messageInput .picture-btn {
            color: #212529 !important;
        }
        
        [data-theme="light"] .chat_input_wrapper.messageInput .picture-btn:hover {
            background: rgba(0, 0, 0, 0.05) !important;
        }
        
        .chat_input_wrapper.messageInput .picture-btn i {
            color: #ffffff;
            font-size: 18px;
            transition: color 0.3s ease;
        }
        
        /* Light Mode - Picture Button Icon */
        [data-theme="light"] .chat_input_wrapper.messageInput .picture-btn i {
            color: #212529 !important;
        }
        
        /* Attach button - paperclip icon */
        .chat_input_wrapper.messageInput .attach_btn {
            background: transparent;
            border: none;
            color: #ffffff;
            font-size: 18px;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            order: 4;
        }
        
        .chat_input_wrapper.messageInput .attach_btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        /* Light Mode - Attach Button */
        [data-theme="light"] .chat_input_wrapper.messageInput .attach_btn {
            color: #212529 !important;
        }
        
        [data-theme="light"] .chat_input_wrapper.messageInput .attach_btn:hover {
            background: rgba(0, 0, 0, 0.05) !important;
        }
        
        .chat_input_wrapper.messageInput .attach_btn i {
            color: #ffffff;
            font-size: 18px;
            transition: color 0.3s ease;
        }
        
        /* Light Mode - Attach Button Icon */
        [data-theme="light"] .chat_input_wrapper.messageInput .attach_btn i {
            color: #212529 !important;
        }
        
        .chat_input_wrapper.messageInput .attach_btn img {
            display: none; /* Hide image, use icon instead */
        }
        
        /* Link button */
        
        /* Send button - Blue circular with paper plane */
        .chat_input_wrapper.messageInput #send_button {
            background: #01ADF1 !important;
            color: #ffffff;
            border-radius: 50%;
            border: none;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            order: 5;
            padding: 0;
            box-shadow: 0 2px 8px rgba(1, 173, 241, 0.3);
        }
        
        .chat_input_wrapper.messageInput #send_button:hover {
            transform: scale(1.05);
            background: #0198D4 !important;
            box-shadow: 0 4px 12px rgba(1, 173, 241, 0.4);
        }
        
        .chat_input_wrapper.messageInput #send_button i {
            color: #ffffff !important;
            font-size: 18px !important;
        }
        
        .chat_input_wrapper.messageInput #send_button img {
            display: none; /* Hide image, use icon instead */
        }
        
        /* Other buttons */
        .chat_input_wrapper.messageInput button:not(#send_button):not(.smile_btn):not(.attach_btn):not(.picture-btn) {
            background: transparent;
            border: none;
            color: #ffffff;
            font-size: 18px;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
        }
        
        .chat_input_wrapper.messageInput button:not(#send_button):not(.smile_btn):not(.attach_btn):not(.picture-btn):hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        /* ========================================
           RECEIVED COINS MESSAGE STYLING
           ======================================== */
        
        /* Received Coins Box - Dark Mode (Default) */
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox .received_coins_box {
            text-align: center;
            margin: 16px 0;
            padding: 0;
        }
        
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox .received_coins_box span {
            display: inline-block;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 10px 20px;
            text-align: center;
            color: #ffffff;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            transition: all 0.3s ease;
        }
        
        /* Light Mode - Received Coins Box */
        [data-theme="light"] .mainSection.messages .messagesContainer .messagesWindow .messagesBox .received_coins_box span {
            background: #f0f0f0 !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
            color: #212529 !important;
        }
        
        /* Message Center List Item - Dark Mode */
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox li.msg-center {
            text-align: center;
            margin: 12px 0;
            padding: 0 20px;
        }
        
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox li.msg-center .received_coins_box {
            margin: 0;
        }
        
        /* Light Mode - Message Center */
        [data-theme="light"] .mainSection.messages .messagesContainer .messagesWindow .messagesBox li.msg-center {
            color: #212529;
        }
        
        /* Ensure coins message is visible and properly styled in both themes */
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox .msg_card_body .received_coins_box,
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox .messagesBox .received_coins_box,
        .mainSection.messages .messagesContainer .messagesWindow #chat_body .received_coins_box {
            text-align: center;
            margin: 16px 0;
        }
        
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox .msg_card_body .received_coins_box span,
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox .messagesBox .received_coins_box span,
        .mainSection.messages .messagesContainer .messagesWindow #chat_body .received_coins_box span {
            display: inline-block;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 10px 20px;
            text-align: center;
            color: #ffffff;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
        }
        
        /* Light Mode - All Received Coins Box Variants */
        [data-theme="light"] .mainSection.messages .messagesContainer .messagesWindow .messagesBox .msg_card_body .received_coins_box span,
        [data-theme="light"] .mainSection.messages .messagesContainer .messagesWindow .messagesBox .messagesBox .received_coins_box span,
        [data-theme="light"] .mainSection.messages .messagesContainer .messagesWindow #chat_body .received_coins_box span {
            background: #f0f0f0 !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
            color: #212529 !important;
        }
        
        /* Coin icon styling */
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox .received_coins_box span img {
            margin: 0 4px;
            vertical-align: middle;
            width: 16px;
            height: 16px;
            object-fit: contain;
        }
        
        /* Ensure proper spacing and alignment */
        .mainSection.messages .messagesContainer .messagesWindow .messagesBox ul li.msg-center {
            list-style: none;
            margin: 12px 0;
            padding: 0;
        }
        
        /* Mobile Responsive */
        @media screen and (max-width: 767px) {
            .mainSection.messages .messagesContainer .messagesWindow .messagesBox .received_coins_box span {
                font-size: 13px;
                padding: 8px 16px;
            }
        }

/* ========================================
   STANDARD WEBSITE CHAT BOX MESSAGE DESIGN
   ======================================== */

/* Standard Website Chat Box Background Colors */
.messagesBox.chat_body_wrapper {
    background: #ffffff !important; /* Standard white background for light mode */
}

[data-theme="dark"] .messagesBox.chat_body_wrapper {
    background: #1a1a1a !important; /* Standard dark background */
}

.messagesBox .msg_card_body,
.messagesBox .message {
    background: transparent !important; /* Transparent to show parent background */
}

[data-theme="dark"] .messagesBox .msg_card_body,
[data-theme="dark"] .messagesBox .message {
    background: transparent !important;
}

/* Standard Website Chat Box - Message Container Spacing */
.messagesBox.chat_body_wrapper ul,
.messagesBox.chat_body_wrapper .msg_card_body {
    padding: 0 !important; /* No extra padding, messagesBox handles it */
    margin: 0 !important;
    background: transparent !important;
    list-style: none !important;
}

/* Standard Website Chat Box - Message Bubble - Received (Left) */
/* Light Mode - Received */
.message.received .text {
    background: #f1f3f5 !important; /* Light gray for received messages - Light Mode */
    color: #212529 !important;
    padding: 8px 12px !important; /* Standard padding */
    border-radius: 12px !important; /* Standard rounded corners */
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
    max-width: 70% !important;
    word-wrap: break-word !important;
    margin: 0 !important;
}

/* Dark Mode - Received (matching image exactly) */
[data-theme="dark"] .message.received .text {
    background: #2d2d2d !important; /* Dark gray for received - matches image */
    color: #e9ecef !important; /* Light text - matches image */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Standard Website Chat Box - Message Bubble - Sent (Right) */
/* Light Mode - Sent */
.message.sent .text {
    background: #007bff !important; /* Standard blue for sent messages - Light Mode */
    color: #ffffff !important;
    padding: 8px 12px !important; /* Standard padding */
    border-radius: 12px !important; /* Standard rounded corners */
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-shadow: 0 1px 2px rgba(0, 123, 255, 0.3) !important; /* Subtle shadow */
    max-width: 70% !important;
    word-wrap: break-word !important;
    margin: 0 !important;
}

/* Dark Mode - Sent (matching image exactly) */
[data-theme="dark"] .message.sent .text {
    background: #0056b3 !important; /* Dark blue for sent - matches image exactly */
    color: #ffffff !important; /* White text - matches image */
    box-shadow: 0 1px 2px rgba(0, 86, 179, 0.4) !important;
}

/* Standard Website Chat Box - Time Styling */
.message.received .time,
.message.sent .time {
    font-size: 11px !important;
    color: #6c757d !important; /* Standard gray for time */
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: bottom !important;
    display: inline-block !important;
    margin-left: 6px !important;
    white-space: nowrap !important;
    opacity: 0.7 !important;
}

[data-theme="dark"] .message.received .time,
[data-theme="dark"] .message.sent .time {
    color: #adb5bd !important; /* Light gray for time - matches image exactly */
    opacity: 1 !important; /* Full opacity to match image */
}

/* WhatsApp Text Bubble Container - Time Positioning - Inline at Bottom */
.message.sent .text-bubble-container {
    display: inline-flex !important;
    align-items: flex-end !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.message.sent .text {
    display: inline-block !important;
    margin: 0 !important;
    padding: 8px 12px !important; /* Standard padding matching main style */
    background: #007bff !important; /* Light mode blue */
    color: #ffffff !important;
    border-radius: 12px !important;
}

[data-theme="dark"] .message.sent .text {
    background: #0056b3 !important; /* Dark mode blue - matches image */
}

.message.sent .time {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    align-self: flex-end !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.message.received .text-bubble-container {
    display: inline-flex !important;
    align-items: flex-end !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Additional received message styling - ensuring consistency */
.message.received .text {
    display: inline-block !important;
    margin: 0 !important;
}

.message.received .time {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    align-self: flex-end !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Standard Website Chat Box - Message Spacing */
.message.received,
.message.sent {
    margin-bottom: 8px !important; /* Standard spacing between messages */
    padding: 0 !important;
    margin-top: 0 !important;
}

.message.received:last-child,
.message.sent:last-child {
    margin-bottom: 0 !important;
}

.message.received:not(:last-child),
.message.sent:not(:last-child) {
    margin-bottom: 0 !important;
}

/* Group consecutive messages from same sender with minimal spacing */
.message.received + .message.received,
.message.sent + .message.sent {
    margin-top: 1px !important; /* Tiny space only between consecutive same-type messages */
}

.message.received + .message.sent,
.message.sent + .message.received {
    margin-top: 4px !important; /* Slightly more space when switching sender */
}

/* WhatsApp Avatar Styling */
.message.received .message-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

.message.sent .message-avatar {
    display: none !important;
}

/* Standard Website Chat Box - Check Icon Styling */
.message.sent .message-check-icon {
    font-size: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: flex-end !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* Light Mode - Check Icon */
.message.sent .message-check-icon.sent {
    color: rgba(255, 255, 255, 0.7) !important; /* Semi-transparent white for sent in light mode */
}

.message.sent .message-check-icon.read {
    color: #4fc3f7 !important; /* Light blue for read in light mode */
}

/* Dark Mode - Check Icon (matching image) */
[data-theme="dark"] .message.sent .message-check-icon.sent {
    color: rgba(255, 255, 255, 0.6) !important; /* Semi-transparent white for sent */
}

[data-theme="dark"] .message.sent .message-check-icon.read {
    color: #64b5f6 !important; /* Vibrant light blue for read - matches image exactly */
}

/* WhatsApp Bubble Wrapper - Proper Layout - Ultra Compact */
.message.sent .message-bubble-wrapper {
    display: inline-flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 2px !important; /* Minimal gap for check icon */
    margin: 0 !important;
    padding: 0 !important;
}

.message.sent .message-bubble-wrapper .text-bubble-container {
    display: inline-flex !important;
    align-items: flex-end !important;
    gap: 2px !important; /* Minimal gap between text and time */
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.message.received .messageContent {
   display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.message.received .messageContent .text-bubble-container {
    display: flex !important;
    align-items: flex-start !important;
    gap: 2px !important; /* Minimal gap between text and time */
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

/* WhatsApp Message Alignment */
.message.received {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.message.sent {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
}

/* WhatsApp Media Container - Match Bubble Radius */
.message.received .whatsapp-media-container {
    border-radius: 7.5px 7.5px 7.5px 2px !important;
    max-width: 65% !important;
}

.message.sent .whatsapp-media-container {
    border-radius: 7.5px 7.5px 2px 7.5px !important;
    max-width: 65% !important;
}

/* Remove extra borders and shadows from media */
.message .whatsapp-media-container {
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13) !important;
    border: none !important;
}

/* FORCE COMPACT MESSAGE LAYOUT - Override any conflicting styles */
.message.sent .text-bubble-container,
.message.received .text-bubble-container {
    display: inline-flex !important;
    flex-direction: row !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.message.sent .text,
.message.received .text {
    display: inline-block !important;
    margin: 0 !important;
    vertical-align: bottom !important;
}

.message.sent .time,
.message.received .time {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: bottom !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Standard message container - allow natural height */
.message.sent,
.message.received {
    min-height: auto !important;
    height: auto !important;
    margin-bottom: 8px !important; /* Standard spacing between messages */
}

.message.sent:last-child,
.message.received:last-child {
    margin-bottom: 0 !important;
}

.message.sent .messageContent,
.message.received .messageContent {
    min-height: auto !important;
    height: auto !important;
}

/* ========================================
   FINAL OVERRIDE - STANDARD CHAT BOX DESIGN
   ======================================== */
/* Ensure messagesBox.chat_body_wrapper has clean standard design */
.messagesBox.chat_body_wrapper {
    background: #ffffff !important;
    padding: 16px !important;
    padding-bottom: 90px !important;
    border-radius: 0 !important; /* No rounded corners for standard chat */
    box-shadow: none !important; /* No shadow for standard chat */
}

[data-theme="dark"] .messagesBox.chat_body_wrapper {
    background: #1a1a1a !important;
}

/* Standard chat box message spacing */
.messagesBox.chat_body_wrapper .message {
    margin-bottom: 8px !important; /* Standard spacing between messages */
}

.messagesBox.chat_body_wrapper .message:last-child {
    margin-bottom: 0 !important;
}

[data-theme="dark"] .message.received .whatsapp-media-container {
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.3) !important;
}

.message.sent .whatsapp-media-container {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .message.sent .whatsapp-media-container {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) !important;
}