/* stylehome.css - COMPLETE UPDATED VERSION with list-style: none fix */

/* General Resets and Body Styling */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* Theme Variables - Default Theme is DARK */
:root {
    /* Core Palette Colors - Dark Theme */
    --primary-color: #00bbff; /* Primary Accent / Interactive Blue */
    --primary-color-rgb: 0, 187, 255; /* RGB components for rgba usage */
    --secondary-color: #00bbff; /* Consistent with primary accent for other elements */
    --background-color: #000f29; /* Dark Background (primary) */
    --card-background: #000f50; /* Darker Card/Component Background (secondary) */
    --text-color: #c6c7c8; /* Light Text (primary) */
    --light-text-color: #c6c7c8; /* Lighter Text (secondary) */
    --dark-text-color: #ffffff; /* Dark mode specific 'dark' text, often white for high contrast */

    /* Header/Footer/Modal */
    --header-bg: rgba(0, 15, 40, 0.7); /* Example: Dark gray with 70% opacity (adjust R,G,B to your dark theme color) */
    --header-text: var(--text-color); /* Light Header Text */
    --footer-bg: var(--background-color); /* Dark Footer */
    --footer-text: var(--light-text-color); /* Lighter Footer Text */
    --modal-bg: rgba(0,0,0,0.85); /* Darker modal overlay */
    --modal-content-bg: var(--card-background); /* Modal content matches card background */
    --modal-close-color: var(--light-text-color);
    --contact-info-bg: var(--card-background); /* Contact info block matches card background */

    /* Borders & Shadows */
    --border-color: rgba(0, 59, 126, 0.5); /* A subtle blue for borders */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Adjust shadow for dark background if needed */

    /* Icon Circles (for categories) */
    --icon-circle-bg: var(--card-background); /* Icon circle matches card background */
    --icon-circle-color: var(--primary-color); /* Icon color matches primary accent */

    /* Hero Slider */
    --hero-caption-bg: rgba(0,0,0,0.7);
    --hero-caption-text: var(--text-color);
    --slider-nav-bg: rgba(255,255,255,0.2);
    --slider-nav-hover-bg: rgba(255,255,255,0.4);

    /* Category Section Header Colors (specific) */
    --category-header-color-light: #000f29; /* For light mode display */
    --category-header-color-dark: #ffffff; /* For dark mode display */

    
	 /* Mobile menu specific variables */
    --mobile-menu-bg: var(--header-bg);
    --mobile-menu-link-color: var(--header-text);
    --mobile-menu-overlay-bg: rgba(0,0,0,0.7);

    /* New Accent & Error Colors */
    --accent-aqua: #00fec5;
    --accent-pink: #ec038a;
    --accent-purple: #e200b0;
    --error-color: #cc0202;

    /* Define mobile slider height for pushing content down */
    --mobile-viewport-width: 100vw;
    --slider-mobile-height: calc(var(--mobile-viewport-width) * 16 / 9); /* 9:16 aspect ratio height */

    /* For slider blend overlay */
    --background-color-rgb: 0, 15, 41; /* Default for dark theme */
	/* form theme */
	--contact-form-bg: #000f29;
	/* Title text change color */
	--text-blue-to-darkblue-color: #00bbff;
	/* darto social icon color */
	--darto-social-icon : #ffffff;
	/* pnael color */
	--panel-header : #000f50;
	/* line color */
	--bottom-line : #003b7f;
	/* dark  blue to light blue color  */
	--color-darkb-lightb : #000f50;
	/* image bg single color  */
	--imgbg-text-color: #ffffff;
	
	--blue-to-blue: #00bbff;
	
	--model-bg: #000f50;
}

/* Light Theme Overrides */
body.light-theme {
    /* Core Palette Colors - Light Theme */
    --primary-color: #00bbff; /* Primary Accent / Interactive Blue */
    --primary-color-rgb: 0, 187, 255; /* RGB components for rgba usage */
    --secondary-color: #00bbff; /* Consistent with primary accent */
    --background-color: #dddddd; /* Light Background (primary) */
    --card-background: #ffffff; /* Light Card/Component Background (primary) */
    --text-color: #000f29; /* Dark Text (primary) */
    --light-text-color: #003b7e; /* Darker Blue Text (secondary) */
    --dark-text-color: #000f29; /* Light mode specific 'dark' text, often dark for high contrast */

    /* Header/Footer/Modal */
    --header-bg: rgba(255, 255, 255, 0.7); /* Example: White with 70% opacity */
    --header-text: var(--text-color); /* Dark Header Text */
    --footer-bg: #c6c7c8; /* Secondary Background for footer */
    --footer-text: var(--text-color); /* Dark Footer Text */
    --modal-bg: rgba(0,0,0,0.7);
    --modal-content-bg: var(--card-background);
    --modal-close-color: var(--text-color);
    --contact-info-bg: #c6c7c8;

    /* Borders & Shadows */
    --border-color: rgba(198, 199, 200, 0.8); /* Lighter border for light theme */
    --shadow-color: rgba(0, 0, 0, 0.0); /* Adjust shadow for light background if needed */

    /* Icon Circles (for categories) */
    --icon-circle-bg: #c6c7c8;
    --icon-circle-color: var(--primary-color);

    /* Hero Slider */
    --hero-caption-bg: rgba(0,0,0,0.6);
    --hero-caption-text: #fff;
    --slider-nav-bg: rgba(0,0,0,0.5);
    --slider-nav-hover-bg: rgba(0,0,0,0.8);

    /* Category Section Header Colors (specific) */
    /* These values are distinct in light/dark so they are overridden here */
    --category-header-color-light: #000f29; /* Use this for light mode */
    --category-header-color-dark: #ffffff; /* (Irrelevant, but kept for structure) */

    /* Mobile menu specific variables */
    --mobile-menu-bg: var(--header-bg);
/*    --mobile-menu-link-color: var(--header-text);*/
    --mobile-menu-overlay-bg: rgba(0,0,0,0.5);

    /* For slider blend overlay */
    --background-color-rgb: 255, 255, 255; /* For light theme */
	/* form theme */
	--contact-form-bg: #ffffff;
	/* Title text change color */
	--text-blue-to-darkblue-color: #000f29;
	
	/* darto social icon color */
	--darto-social-icon : #000f29;
	/* pnael color */
	--panel-header : #c6c7c8;
	
	/* line color */
	--bottom-line : #c6c7c8;
	
	/* dark  blue to light blue color  */
	--color-darkb-lightb : #00bbff;
	/* image bg single color  */
	--imgbg-text-color: #ffffff;
	
	--blue-to-blue: #00bbff;
	
	--model-bg: #ffffff;

}

body {
    font-family: 'Roboto flex', sans-serif;
    line-height: 1.6;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth theme transition */
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 12px;
}

/* Header & Navigation */
.header {
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: 15px 0;
    box-shadow: 0 2px 5px var(--shadow-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    width: 100%; /* Keep this to ensure it always spans full width */
    z-index: 1000; /* Keep this high so it's always on top */
}

/* New class to apply when the header should be fixed */
.header.fixed-scroll {
    position: fixed; /* Header becomes fixed to the viewport */
    top: 0;            /* Sticks to the top edge */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* A more pronounced shadow when fixed */
}

/* Optional: To prevent content from jumping up when the header becomes fixed */
/* We'll set the --header-height variable via JavaScript */
/*
body.has-fixed-header {
    padding-top: var(--header-height);
    transition: padding-top 0.3s ease-out;
}
*/

body.has-fixed-header {
   padding-top: var(--header-height, 0);
  
}

.navbar {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 12px;
    display: flex;
    justify-content: space-between; /* Distributes items (hamburger, logo, nav-wrapper, icons-visible) */
    align-items: center;
/*    flex-wrap: wrap; */
}



/* Logo Image Styling (Main Header Logo) */
.logo-img { /* This targets the main header logo directly under .navbar */
    height: 40px; /* Adjust as needed for your logo's height */
    width: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Align with other inline elements if any */
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.05);
}

/* Hamburger Menu for Mobile */
.hamburger-menu {
    display: none; /* Hidden by default on desktop */
    background: none;
    border: none;
    font-size: 1.8em;
    color: var(--header-text);
    cursor: pointer;
    order: -1; /* Ensure it's always first in flex order on mobile */
}




/* Desktop Navigation (default) */
.nav-wrapper {
    display: flex; /* Default for desktop: horizontal layout */
    align-items: center;
    flex-grow: 1; /* Allows it to take up available space */
    justify-content: flex-end; /* Pushes nav links and desktop search to the right */
}



.nav-links {
/*    flex-direction: column;*/
	list-style: none;
    display: flex;
    margin: 0;
    padding: 0px 18px 0px 0px;
}

.nav-links li {
    position: relative; /* For submenu positioning */
    margin-left: 20px;
}

.nav-links a {
    color: var(--header-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    font-size: 14px; /* Main menu font size */
    white-space: nowrap; /* Prevent wrapping for long links */
	display: inline-block;
}

.nav-links a:hover {
    color: var(--secondary-color); /* Hover color for both main and submenu */
}



.desktop-search-input input {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 5px 0 0 5px;
    outline: none;
    font-size: 0.9em;
    background-color: var(--card-background);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.desktop-search-input button {
    background-color: var(--secondary-color);
    color: #fff;
    border: 1px solid var(--secondary-color);
    padding: 8px 12px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.desktop-search-input button:hover {
    background-color: #0099cc;
    border-color: #0099cc;
}

.desktop-search-icon { /* Applied to mobile search icon as well */
    background: none;
	font-size: 24px;
    border: none;
    color: var(--header-text);
    font-size: 1.5em; 
    cursor: pointer;
    transition: color 0.3s ease, opacity 0.3s ease;
    padding: 5px; 
    border-radius: 5px;
	margin-right: 10px;
}

/* NEW: Container for always-visible icons (Theme, Language, Mobile Search) */
.header-icons-always-visible {
    display: flex;
    align-items: center;
    gap: 12px;
	margin-left: 10px;
}

/* Common styling for all toggle icons (Theme, Language, Mobile Search) */
.desktop-search-icon,
.mobile-search-icon { 
    background: none;
    border: none;
    color: var(--header-text);
    font-size: 1.5em; 
    cursor: pointer;
    transition: color 0.3s ease, opacity 0.3s ease;
    padding: 5px 1px 5px 9px; 
    border-radius: 5px;
}

.desktop-search-icon-hidden,
.mobile-search-icon-hidden { 
    background: none;
    border: none;
    color: var(--category-header-color-light);
    font-size: 1.5em; 
    
    transition: color 0.3s ease, opacity 0.3s ease;
    padding: 5px 1px 5px 9px; 
    border-radius: 5px;
	
}

.desktop-search-icon:hover,
.mobile-search-icon:hover {
    color: var(--text-blue-to-darkblue-color);
/*    opacity: 0.7;*/
}

.theme-toggle,
.language-toggle,{
	 background: none;
    border: none;
    color: var(--header-text);
    font-size: 22px; /* Default size, adjust as needed */
    cursor: pointer;
    transition: color 0.3s ease, opacity 0.3s ease;
    padding: 5px 1px 5px 9px; /* Added for better clickable area */
    border-radius: 5px;
	
}

.theme-toggle:hover,
.language-toggle:hover,{
	color: var(--text-blue-to-darkblue-color);
	
}





/* Show theme/language toggles on desktop by default */
.theme-toggle,
.language-toggle {
    display: flex; /* Changed from none to flex for desktop display */
}


/* Responsive Navbar for Mobile - CURTAIN MENU */
@media (max-width: 920px) {
    .hamburger-menu {
        display: block; /* Show hamburger on mobile */
        z-index: 101; /* Ensure it's above the menu overlay */
    }
	.header {
/*		background-color: rgba(0,15,40,0.9);*/
		background-color: var(--footer-bg);
	}
    /* Main header logo */
    .logo-img { /* This targets the main header logo directly under .navbar */
        display: block; /* Ensure logo is visible */
        height: 35px; /* Slightly smaller for mobile header */
        /* z-index: 101; /* Ensure it's above the menu overlay */
        margin-right: auto; /* Push logo to the left, allowing icons to go right */
    }


	

    .mobile-only-register-link a {
        /* Apply existing nav-links a styling */
        padding: 10px 0;
        font-size: 1.1em;
        color: var(--mobile-menu-link-color);
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
	
	/* Ensure the main header and its contents go behind the menu overlay */
    body.show-mobile-menu .header {
        z-index: 998; /* Lower than menu-overlay (which is 999) */
        position: relative;
        transition: z-index 0.3s ease;
    }

    /* ****************************************************** */
    /* START: MOBILE ICON PLACEMENT ADJUSTMENTS               */
    /* Hide theme and language toggles from the main header on mobile */
    /* They are now only visible inside the Settings menu. */
    .header-icons-always-visible .theme-toggle, /* Target the specific toggles in the header */
    .header-icons-always-visible .language-toggle {
        display: none;
    }
    /* END: MOBILE ICON PLACEMENT ADJUSTMENTS                 */
    /* ****************************************************** */


    /* NEW: Body padding adjustment for mobile hero slider */
    body.has-fixed-header {
        padding-top: 0 !important;
    }

    /* NEW: Mobile Hero Slider Positioning */
    .hero-slider {
        position: absolute; /* Allows slider to go behind header */
        top: 0;
        left: 0;
        width: 100%; /* Ensure it spans full width */
        z-index: 99; /* Below the header (z-index 1000) but above other content */
        margin-bottom: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* THE CURTAIN MENU ITSELF */
    .nav-wrapper {
        position: fixed;
        top: 0;
        left: -100%;
        width: 81%;
        max-width: 600px;
        height: 100%;
/* background-color: var(--mobile-menu-bg);*/
		background-color: var(--background-color);
        flex-direction: column;
        padding: 0 20px 20px; /* Only apply left/right/bottom padding directly here */
        box-shadow: 2px 0 10px rgba(0,0,0,0.3);
        transition: left 0.3s ease-in-out;
        z-index: 1000;
        justify-content: flex-start;
        align-items: flex-start;
        display: flex; /* Crucial for internal flex layout */
    }

    .nav-wrapper.active {
        left: 0;
    }

    /* NEW: Styling for the top part of the curtain menu (logo and close button) */
    .curtain-menu-header {
        display: flex; /* Enable flexbox for side-by-side alignment */
        justify-content: space-between; /* Pushes logo left, close button right */
        align-items: center; /* Vertically center them */
        width: 100%; /* Spans the full width of the curtain menu */
        padding: 20px 0; /* Vertical padding for the header area */
        margin-bottom: 15px; /* Space between header and nav links */
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Optional: a subtle separator */
    }

    /* NEW: Logo inside the curtain menu (from header_include.html) */
    .nav-wrapper .logo-img { /* Target the image directly in nav-wrapper */
        height: 35px; /* Adjust size for inside the menu */
        width: auto;
        vertical-align: middle;
        margin-right: 0; /* Reset any auto margin from main header */
    }

    /* NEW: Close Button Styling (Corrected for flexbox) */
    .close-menu {
        background: none;
        border: none;
        font-size: 24px;
		color: var(--header-text);
/*        color: var(--header-text);*/
        cursor: pointer;
        padding: 5px;
        line-height: 1; /* Helps with vertical alignment */
    }

    .close-menu:hover {
        color: var(--secondary-color);
    }

    body.show-mobile-menu .menu-overlay {
        opacity: 1;
        visibility: visible;
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        margin-bottom: 20px;
        padding-top: 0; /* No extra top padding if .curtain-menu-header provides it */
    }
    .nav-links li {
        margin: 10px 0;
        text-align: left;
        width: 100%;
    }
    .nav-links a {
        display: block;
 		padding: 3px 0;
        font-size: 14px;
        color: var(--header-text);
/*        border-bottom: 1px solid rgba(255,255,255,0.1);*/
    }
    .nav-links li:last-child a {
        border-bottom: none;
		text-transform: uppercase;
		color: var(--header-text);
    }

    /* Mobile submenu specific overrides for .filters (for 'Settings' and other submenus) */
    .nav-links li .filters {
        position: static; /* Stack submenus below parent on mobile */
        opacity: 0; /* Initially hidden on mobile */
        visibility: hidden; /* Initially hidden on mobile */
        height: 0; /* Collapse height */
        overflow: hidden; /* Hide overflow content */
        transition: opacity 0.3s ease, height 0.3s ease, visibility 0.3s ease; /* Smooth transition */
        box-shadow: none;
        background-color: transparent;
        padding: 0 0 0 20px; /* Adjust padding for collapsed state, only left indent */
        border-radius: 0;
        min-width: auto;
    }

    /* When the parent li has the 'active-submenu' class, show the submenu */
    .nav-links li.active-submenu > .filters {
		position: relative;
		top: 0;
		background-color: transparent;
        opacity: 1;
        visibility: visible;
        height: auto; /* Allow height to expand to content */
        padding: 5px 0 5px 20px; /* Restore padding when open */
    }

    /* Mobile styles for the actual ul inside .filters */
    .nav-links li .filters .nav-pills {
        display: flex; /* Make it a flex container for the nested toggles */
        flex-direction: column;
        list-style: none; /* FIX: Added to remove dots from submenu links on mobile */
    }
    .nav-links li .filters .nav-pills li {
        margin: 0;
    }

    .nav-links li .filters .nav-pills a {
        font-size: 12px;
        color: var(--mobile-menu-link-color);
        padding: 8px 0;
        border-bottom: none;
		background-color: transparent !important;
		
    }

    /* Specific styling for nested icons under "Settings" on mobile */
    .nav-links li.has-submenu .settings-submenu .toggle-item { /* Target the li wrapping the icon */
        display: flex;
        align-items: center;
        padding: 8px 0; /* Match other submenu links */
    }

    .nav-links li.has-submenu .settings-submenu .toggle-item button { /* Target the icon button */
        color: var(--header-text);
        font-size: 20px;
        margin-right: 10px;
        padding: 2px 1px;
        text-transform: uppercase;
        background: transparent;
        border: 1px;
		align-items: center;
    }

    .nav-links li.has-submenu .settings-submenu .toggle-item span { /* Target the text next to the icon */
        font-size: 14px; /* Match main menu links */
        color:var(--header-text);
        font-weight: normal; /* Not bold */
		text-transform: uppercase;
		padding-left: 9px;
    }

    .nav-links li.has-submenu .settings-submenu .toggle-item button:hover,
    .nav-links li.has-submenu .settings-submenu .toggle-item span:hover {
        color: var(--secondary-color);
    }

    /* Style for the submenu arrow icon */
    .nav-links li .submenu-arrow {
        margin-left: auto; /* Push arrow to the right of the link text */
        transition: transform 0.3s ease; /* Smooth rotation */
    }

    /* Rotate the arrow when the submenu is active */
    .nav-links li.active-submenu > .submenu-toggle .submenu-arrow {
        transform: rotate(180deg); /* Rotate 180 degrees when active */
    }

    /* Adjust caption position on mobile if it's hidden by header */
    .hero-slider .slider-caption {
        padding-top: calc(var(--header-height) + 20px);
        box-sizing: border-box;
    }
}


/* --- Desktop Overrides (apply outside of any max-width media query) --- */
@media (min-width: 921px) {
    /* Hide hamburger menu on desktop */
    .hamburger-menu {
        display: none;
    }

    /* Main header logo (reset mobile specific margin) */
    .logo-img { /* This targets the main header logo directly under .navbar */
        margin-right: 0; /* Reset mobile-specific margin */
        height: 40px; /* Revert to desktop height */
    }

    /* Show desktop search input bar on desktop */
    .desktop-search-input {
        display: flex; /* Ensure it's consistently visible as a flex item on desktop */
        order: 1; /* Give it an order to place it after nav links within nav-wrapper */
    }

    /* Hide the mobile search icon on desktop */
    .mobile-search-icon {
        display: none;
    }

    /* Hide the curtain menu header/logo/close button on desktop */
    /* This element is now part of header_include.html and needs to be hidden on desktop */
    .curtain-menu-header {
        display: none;
    }

    /* Hide the 'Settings' menu item that's only for mobile */
    .nav-links .mobile-only-settings {
        display: none;
    }

    /* Ensure desktop nav-wrapper layout */
    .nav-wrapper {
        position: static; /* No fixed position on desktop */
        top: auto;
        left: auto;
        width: auto;
        max-width: none;
        height: auto;
        background-color: transparent;
        box-shadow: none;
        padding: 0; /* Reset padding from mobile */
        flex-direction: row; /* Desktop links are horizontal */
        justify-content: flex-end; /* Push content to the right */
        align-items: center;
        display: flex; /* Re-enable display: flex for the nav-wrapper for desktop layout */
        flex-grow: 1; /* Allow it to take up available space to push other elements right */
    }

    /* Ensure desktop nav-links layout */
    .nav-links {
        flex-direction: row; /* Horizontal for desktop */
        width: auto;
        margin-bottom: 0;
        order: 0; /* Ensure nav links come before search */
    }
    .nav-links li {
        margin-left: 18px; /* Desktop spacing */
        margin-right: 0;
        text-align: left;
        width: auto;
    }
    .nav-links a {
        padding: 0; /* Reset padding from mobile */
        border-bottom: none; /* No border for desktop main links */
        font-size: 14px; /* Desktop font size */
        font-weight: bold;
    }

    /* Theme and language toggles remain visible on desktop */
    .header-icons-always-visible .theme-toggle,
    .header-icons-always-visible .language-toggle {
        display: flex; /* Ensure they are visible on desktop */
		font-size: 16px;
        background: transparent;
        color: var(--header-text);
        border: 1px;
        align-items: center;
        cursor: pointer;
    }

    /* Ensure submenu behavior is correct for desktop */
    .nav-links li .filters {
        list-style: none; /* FIX: Added to remove dots from submenu links on desktop */
        position: absolute; /* Desktop absolute positioning */
        top: 100%;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        background-color: var(--card-background);
        box-shadow: 0 4px 10px var(--shadow-color);
        border-radius: 5px;
        min-width: 200px;
        z-index: 99;
        padding: 10px 0; /* Reset padding for desktop submenu */
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; /* Desktop transition for hover */
        height: auto; /* Ensure height is auto for desktop */
        overflow: visible; /* Ensure content is visible on desktop */
    }

    .nav-links li .filters .nav-pills {
        display: block; /* Desktop submenu is a block list */
    }

    .nav-links li .filters .nav-pills a {
        padding: 8px 15px; /* Desktop submenu link padding */
        font-size: 12px;
        font-weight: normal;
        border-bottom: none;
    }

    /* Show submenu on hover of parent li for desktop */
    .nav-links li.has-submenu:hover > .filters { /* Target the .filters div on hover */
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Ensure arrow is not rotated on desktop */
    .nav-links li .submenu-arrow {
        transform: rotate(0deg);
        margin-left: 5px; /* Adjust spacing for desktop */
    }
}


/* --- Default (Desktop) Slider Aspect Ratio (16:9) --- */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* Width divided by height */
}

/* Ensure images fill their container without distortion */
.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ESSENTIAL: This makes the image fill the container and crop if needed */
    display: block;
}

/* --- Mobile Slider Aspect Ratio (9:16) --- */
@media (max-width: 768px) {
    .slider-container {
        aspect-ratio: 9 / 12;
    }
    .slider-item img {
        object-fit: cover;
    }
}

/* --- Blend Effect (from previous solution) --- */
.slider-blend-overlay {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}

.slider-blend-top {
  top: 0;
  height: 12%;
  background: linear-gradient(
    to bottom,
    rgba(var(--background-color-rgb), 1),
    rgba(var(--background-color-rgb), 0)
  );
}

.slider-blend-bottom {
  bottom: 0;
  height: 15%;
  background: linear-gradient(
    to bottom,
    rgba(var(--background-color-rgb), 0),
    rgba(var(--background-color-rgb), 1)
  );
}

/* Ensure your theme variables include RGB components for the gradient */
body.light-theme { --background-color-rgb: 255, 255, 255; } /* */
body:not(.light-theme) { --background-color-rgb: 0, 15, 41; } /* Fallback for dark theme (your default) */


/* Hero Slider */
.hero-slider {
    position: relative; /* Default for desktop */
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px; /* Margin for content below on desktop */
    border-radius: 0px 0px 6px 6px;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.hero-slider .slider-item {
    display: none;
    width: 100%;
}

.hero-slider .slider-item img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-slider .slider-caption {
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    background-color: var(--hero-caption-bg);
    color: var(--hero-caption-text);
    padding: 9px 9px;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.hero-slider .slider-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 15px;
}

.hero-slider .slider-controls button {
    background-color: var(--slider-nav-bg);
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5em;
    transition: background-color 0.3s ease;
}

.hero-slider .slider-controls button:hover {
    background-color: var(--slider-nav-hover-bg);
}

.hero-slider .slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.hero-slider .slider-dots .dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.hero-slider .slider-dots .dot.active {
    background-color: #fff;
}


/* Category Icons Section */
.category-icons-section {
    margin-bottom: 40px;
    text-align: center;
    position: relative;
}

/* Section Title */
.section-title {
    font-size: 1.2em;
    color: var(--category-header-color-light);
    transition: color 0.3s ease;
    font-weight: 400;
}

body.dark-theme .section-title {
    color: var(--category-header-color-dark);
}


.category-icons-grid {
    display: flex;
    overflow-x: scroll; /* Enable horizontal scrolling for functionality */
    scroll-behavior: smooth; /* Smooth scrolling for drag */
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
    gap: 20px;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: flex-start;
    /* Hide scrollbar for all browsers */
    scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.category-icons-grid::-webkit-scrollbar {
    display: none;
}


.category-icon {
    flex: 0 0 auto;
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.2s ease, color 0.2s ease;
}

.category-icon:hover {
    transform: translateY(-5px);
    color: var(--primary-color); /* Still change text color on hover */
}

.icon-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--icon-circle-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px var(--shadow-color);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* No green glow on hover for icon-circle */
.category-icon:hover .icon-circle {
    box-shadow: 0 4px 10px var(--shadow-color); /* Keep existing shadow, no green glow */
}

.icon-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.category-icon span {
    font-size: 0.9em;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Responsive Category Icons */
@media (max-width: 768px) {
    .category-icon {
        width: 100px;
    }
    .icon-circle {
        width: 80px;
        height: 80px;
    }
	
	
}

@media (max-width: 576px) {
    .category-icon {
        width: 90px;
    }
    .icon-circle {
        width: 70px;
        height: 70px;
    }
    .category-icons-grid {
        padding-left: 5px;
        padding-right: 5px;
        gap: 9px;
    }
}


/* Ad Category Section - General Styling for Sliders */
.ad-category-section {
    margin-bottom: 40px;
    position: relative;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding: 0 10px;
}

.view-more {
    text-decoration: none;
    color: var(--secondary-color);
    font-weight: bold;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
	font-size: 15px;
}

.view-more:hover {
    color: #0099cc;
}

.view-more i {
    margin-left: 5px;
    font-size: 0.8em;
}

/* Hide native scrollbar */
.horizontal-slider {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;   /* Firefox */
}
.horizontal-slider::-webkit-scrollbar {
  display: none;          /* Chrome, Safari */
}

/* Wrap container for slider + arrows */
.slider-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;  /* Prevent slider overflow */
}

/* Arrow buttons */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;

  width: 40px;
  height: 40px;
  border: none;
  border-radius: 6px;
  cursor: pointer;

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

  font-size: 28px;
  color: #fff;
  padding-bottom: 5px;
  background: rgba(0, 0, 0, 0.4);
  transition: background 0.3s ease, opacity 0.3s ease;
  opacity: 0.3;
		
}
.slider-arrow:hover {
  background: rgba(0, 0, 0, 0.5);
  opacity: 0.7;
}
.slider-arrow:disabled {
  opacity: 0.2;
  pointer-events: none;
}

/* Arrow positions */
.slider-arrow--prev {
  left: 5px;
}
.slider-arrow--next {
  right: 5px;
}

/* Only show arrows on desktop */
@media (max-width: 767px) {
  .slider-arrow {
    display: none !important;
  }
}


.ad-card {
    flex: 0 0 auto;
    width: 200px;
    background-color: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--shadow-color);
    overflow: hidden;
    transition: transform 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.ad-card:hover {
    transform: translateY(-5px);
}

.ad-card img {
    width: 100%;
    max-height: 255px; /* Fixed height to maintain 9:16 ratio for 200px width */
    object-fit: cover;
    display: block;
}

.ad-info {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ad-info h3 {
    font-size: 1.1em;
    margin-bottom: 8px;
    color: var(--light-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide price and button */
.ad-price,
.btn-primary {
    display: none;
}


/* Slider Navigation Buttons (ALL HIDDEN FOR AD SLIDERS) */
.slider-nav-btn {
    display: none !important; /* Hide all slider navigation buttons */
}

/* Hero Slider's buttons are handled separately in its own section if needed */
/* The hero slider controls remain visible because they are explicitly defined for it */


/* Footer */
.footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    text-align: center;
    padding: 20px 20px 100px 20px;
    margin-top: 40px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Ad Detail Modal Styling --- */
.ad-detail-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: var(--modal-bg);
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 20px;
    transition: background-color 0.3s ease;
}

.ad-detail-modal .modal-content {
    background-color: var(--modal-content-bg);
    margin: auto;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px var(--shadow-color);
    position: relative;
    max-width: 900px; /* Max width for modal content */
    width: 95%; /* Responsive width */
    overflow-y: auto; /* Enable scrolling for modal content if needed */
    max-height: 90vh; /* Max height for modal content */
    display: flex;
    flex-direction: column; /* Stack elements vertically on small screens */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.ad-detail-modal .close-button {
    color: var(--modal-close-color);
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.ad-detail-modal .close-button:hover,
.ad-detail-modal .close-button:focus {
    color: var(--dark-text-color); /* Adjusted for theme */
    text-decoration: none;
}

.ad-detail-modal .modal-body {
    display: flex; /* Flex container for image and details */
    gap: 30px; /* Space between image and text */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: flex-start; /* Align items to the top */
}

.ad-detail-modal .modal-body img {
    width: 40%; /* Image takes 40% width on larger screens */
    height: auto;
    object-fit: contain; /* Ensure full image is visible */
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--shadow-color);
    min-width: 250px; /* Minimum width for the image */
    max-height: 600px; /* Limit image height in modal */
}

.ad-detail-modal .modal-details {
    flex-grow: 1; /* Details take remaining space */
/*
    width: 55%; 
    min-width: 280px;
*/
    padding-right: 10px; /* Prevent text from touching scrollbar */
    display: flex;
    flex-direction: column;
	margin-left: 20px;
}

.ad-detail-modal .modal-details h2 {
    font-size: 2em;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.ad-detail-modal .modal-details p {
    font-size: 1.1em;
    margin-bottom: 8px;
    color: var(--text-color);
}

.ad-detail-modal .modal-price {
    font-size: 1.6em;
    font-weight: bold;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.ad-detail-modal .modal-description {
    margin-top: 15px;
    line-height: 1.8;
    color: var(--light-text-color);
    flex-grow: 1; /* Allow description to grow and push contact info down */
    max-height: 200px; /* Limit height and allow scroll if too long */
    overflow-y: auto;
    padding-right: 10px; /* Space for scrollbar */
}

.ad-detail-modal .contact-info {
    margin-top: 20px;
    padding: 10px;
    background-color: var(--contact-info-bg);
    border-radius: 5px;
    font-size: 1.1em;
    color: var(--dark-text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.ad-detail-modal .modal-details .btn-primary {
    margin-top: 20px;
    align-self: flex-start; /* Align button to the left */
    width: auto; /* Allow button to size to its content */
    padding: 12px 25px;
    display: block; /* Ensure the button within the modal is visible */
}

/* Responsive Modal */
@media (max-width: 768px) {
    .ad-detail-modal .modal-content {
        padding: 20px;
        width: 98%;
    }
    .ad-detail-modal .modal-body {
        flex-direction: column; /* Stack image and details vertically */
        gap: 20px;
    }
    .ad-detail-modal .modal-body img,
    .ad-detail-modal .modal-details {
        width: 98%; /* Take full width when stacked */
        min-width: unset;
    }
    .ad-detail-modal .modal-body img {
        max-height: 400px; /* Adjust max height for mobile image */
    }
    .ad-detail-modal .modal-details h2 {
        font-size: 1.5em;
    }
    .ad-detail-modal .modal-details .btn-primary {
        width: 100%; /* Make button full width on mobile */
    }
    .ad-detail-modal .modal-description {
        max-height: 150px; /* Adjust description scroll height for smaller screens */
    }
}

@media (max-width: 480px) {
    .ad-detail-modal .close-button {
        font-size: 25px;
        right: 15px;
        top: 10px;
    }
    .ad-detail-modal .modal-content {
        padding: 6px;
    }
}

/* New: Mobile Menu Overlay */
/* In your stylehome.css, likely within or near @media (max-width: 768px) */

.menu-overlay {
    position: fixed;
	inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--mobile-menu-overlay-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 90; 
	display: none;
	touch-action: none; 
	
}


/* This class, applied to the <body> by your JS, prevents scrolling on the page */
body.show-mobile-menu {
    overflow: hidden;
}

/* This makes the overlay visible and clickable, preventing interaction with the content behind it. */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Optional: This adds a dimming effect */
    z-index: 99; /* Below the menu (which should be z-index 100+), but above all other content */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* This class is added by your JavaScript to make the overlay active */
.menu-overlay.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto; /* This is the key. It makes the overlay clickable, blocking clicks on the content behind it. */
}

/* Ensure your nav-wrapper is on a higher z-index than the overlay */
.nav-wrapper.active {
    z-index: 100;
}



/* --- Navigation Menu (New and Existing) --- */
/* Submenu Wrapper (.filters) Styles */
.nav-links li .filters { /* Target the filters div inside a list item */
    list-style: none; /* Ensure no bullet points */
    position: absolute;
    top: 100%; /* Position below the parent link */
    left: 0;
/* background-color: var(--card-background);  Use card background for submenu */
    box-shadow: 0 4px 10px var(--shadow-color);
    border-radius: 5px;
    min-width: 200px; /* Minimum width for submenus */
    z-index: 99; /* Ensure submenu is above other content */
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Hidden by default */
    transform: translateY(10px); /* Slight slide down effect */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    padding: 10px 0; /* Padding for the entire submenu container */
}

/* Styles for the actual ul inside .filters */
.nav-links li .filters .nav-pills {
    display: block; /* Ensure it takes full width */
    padding: 0; /* Remove default ul padding */
    margin: 0; /* Remove default ul margin */
    list-style: none; /* FIX: Added here for desktop submenus as well */
}

.nav-links li .filters .nav-pills li {
    margin: 0; /* Reset margin for submenu items */
}

.nav-links li .filters .nav-pills a {
    display: block; /* Make the whole link clickable area */
    padding: 8px 15px;
    font-size: 12px; /* Submenu font size */
    font-weight: normal; /* Submenu links don't need to be bold */
    color: var(--text-color); /* Submenu text color */
    transition: background-color 0.3s ease, color 0.3s ease;
	text-transform: uppercase;
	font-weight: 600;
}

.nav-links li .filters .nav-pills a:hover {
/*    background-color: var(--background-color);*/
    color: var(--secondary-color); /* Hover color */
	font-weight: 600;
}

/* Show submenu on hover of parent li */
.nav-links li.has-submenu:hover > .filters { /* Target the .filters div on hover */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body.show-mobile-menu .hamburger-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}



/* General Page Title */
.page-title {
    font-size: 24px;
    color: var(--primary-color);
    text-align: center;
    margin-top: 3px;
    margin-bottom: 12px;
    font-weight: 700;
}
.page-titleleft {
    font-size: 24px;
    color: var(--primary-color);
    text-align: left;
    margin-top: 40px;
    margin-bottom: 30px;
    font-weight: 400;
}
.page-titleright {
    font-size: 24px;
    color: var(--primary-color);
    text-align: left;
    margin-top: 40px;
    margin-bottom: 30px;
    font-weight: 400;
}

.page-title-small {
    font-size: 24px;
    color: var(--primary-color);
    text-align: center;
    margin-top: 6px;
    margin-bottom: 6px;
    font-weight: 400;
}

.page-title-h6 {
        font-size: 18px;
	color: var(--primary-color);
	text-align: center;
      }	

.page-dot {
    font-size: 24px;
    color: var(--primary-color);
    text-align: center;
    margin-top: 12px;
    margin-bottom: 30px;
    font-weight: 700;
}


/* Tournament List Section */
.tournament-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.tournament-card {
    background-color: var(--card-background);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    padding: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--ad-card-border); /* Reusing ad-card border for consistency */
}

.tournament-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.tournament-card h2 {
    font-size: 1.5em;
    color: var(--text-color);
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
}

.tournament-card p {
    font-size: 1em;
    color: var(--light-text-color);
    margin-bottom: 8px;
}

.tournament-card .btn-primary {
    margin-top: 20px;
    display: inline-block; /* Allow button to fit content */
    padding: 10px 20px;
    font-size: 0.9em;
    text-transform: none; /* Keep original casing for button text */
}

/* Tournament Info Section */
.tournament-info {
    background-color: var(--card-background);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    padding: 30px;
    margin-bottom: 40px;
    border: 1px solid var(--ad-card-border);
}

.tournament-info h2 {
    font-size: 1.8em;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.tournament-info p {
    font-size: 1.1em;
    color: var(--light-text-color);
    margin-bottom: 15px;
}

.tournament-info .btn-primary {
    margin-top: 20px;
    font-size: 1em;
    text-transform: uppercase; /* Revert to uppercase for this button */
}

/* Responsive adjustments for internal page content */
@media (max-width: 768px) {
    .page-title {
        font-size: 24px;
        margin-top: 3px;
        margin-bottom: 12px;
    }
	
	.page-title-h6 {
        font-size: 15px;
      }	
	
    .tournament-list {
        grid-template-columns: 1fr; /* Stack cards on mobile */
        gap: 20px;
    }
    .tournament-card {
        padding: 20px;
    }
    .tournament-card h2 {
        font-size: 1.3em;
    }
    .tournament-card p {
        font-size: 0.95em;
    }
    .tournament-info {
        padding: 20px;
    }
    .tournament-info h2 {
        font-size: 1.5em;
    }
    .tournament-info p {
        font-size: 1em;
    }
	.page-title {
	padding: 3px;	
	}
	
	.container {
		padding: 0px 0px;
	}
}

@media (max-width: 480px) {
	
	 .page-title {
        font-size: 24px;
      }
      .page-title-small {
        font-size: 1.2em;
      }
		
	.page-title-h6 {
        font-size: 15px;
      }	
	

    .tournament-card .btn-primary {
        width: 100%; /* Full width button on very small screens */
        text-align: center;
    }
    .tournament-info .btn-primary {
        width: 100%;
        text-align: center;
    }
}

.main-container {
	padding: 10px 0;
	background-color: var(--background-color);
}

.full-height .main-container {
	padding-top: 20px;
}

.form-control {
	border-radius: 6px;
/*	background: #ffffff;*/
	font-family: inter, sans-serif;
	font-weight: 600;
	font-size: 14px;
	height: 50px;
	padding-right: 30px;
	border-color: #acacac;
	color: #000f29;
	position: relative;
/*	-webkit-appearance: none;*/
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
	display: block;
	width: 100%;
	padding-left: 12px;
}

.form-control:focus {
	border-color: #666666;
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

select.form-control {
	padding-right: 5px;
}
.form-control::placeholder {
  color: green;
}

.form-control::-moz-placeholder {
	color: inherit;
}

.form-control:-ms-input-placeholder {
	color: inherit;
}

.form-control::-webkit-input-placeholder {
	color: inherit;
}

.input-group-addon {
	background-color: #cacaca;
	border-color: #acacac;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

.form-list > div {
	padding: 7px 15px;
	border-bottom: 1px solid #dddddd;
	background-color: #f3f3f3;
	margin: 6px 0;
	display: block;
}

fieldset {
	padding: 10px 25px;
	margin: 15px 0px;
	border: 1px solid #dddddd;
	background-color: #fafafa;
}

fieldset legend {
	display: block;
	width: auto;
	padding: 3px 10px;
	margin-bottom: 0;
	font-size: 15px;
	line-height: inherit;
	color: #333;
	border: 1px solid #ddd;
	background-color: #ffffff;
}

fieldset .form-control,
fieldset .form-control:focus {
	-webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.12);
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.12);
	border-color: #f3f3f3;
}


.bottom_line{
	border-bottom: 1px var(--bottom-line);
	padding: 10px;	
}


/* Container for category icons grid */
.category-icons-grid {
    display: flex;
    flex-wrap: nowrap;       /* Horizontal scroll */
    overflow-x: auto;
    padding: 10px 0;
    gap: 6px;
}

/* Individual category card */
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;          /* Adjust as needed */
    flex-shrink: 0;        /* Prevent shrinking in horizontal scroll */
    cursor: pointer;
    text-align: center;
}

/* Circular image/icon */
.category-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;  
    object-fit: cover;
    margin-bottom: 5px;
    border: 2px solid #ddd;
}

/* Category name truncated if too long */
.category-name {
    font-size: 12px;
    line-height: 1.2;
    max-width: 100%;
    white-space: nowrap;      /* Single line */
    overflow: hidden;         /* Hide overflow */
    text-overflow: ellipsis;  /* Show ... */
}


.curtain, .overlay, .modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999; /* Ensure this is higher than any other element on the page */
  /* Other styling for visibility, transitions, etc. */
}