:root {
            --eco-darkest: #0B0F19; /* Глибокий темно-синій, майже чорний */
            --eco-dark-surface: #1A202C; /* Темна поверхня для карток, модалок */
            --eco-medium-surface: #2D3748; /* Середньо-темна поверхня */
            --eco-light-surface: #4A5568; /* Світліша темна поверхня для акцентів */

            --eco-lime-green: #78EB4A; /* <-- НОВИЙ ЗЕЛЕНИЙ КОЛІР */
            --eco-lime-green-darker: #56bb2a; /* Темніший лайм для ховерів */
            --eco-electric-blue: #3B82F6; /* Електричний синій */
            --eco-electric-blue-darker: #2563EB; /* Темніший синій для ховерів */
            --eco-neon-cyan: #22D3EE; /* Неоновий блакитний */

            --eco-text-primary: #E2E8F0; /* Основний світлий текст */
            --eco-text-secondary: #CBD5E0; /* Другорядний світлий текст */
            --eco-text-muted: #94A3B8; /* Приглушений текст */

            --eco-border-color: rgba(255, 255, 255, 0.1); /* Колір для розділювачів */
            --eco-border-hover: rgba(120, 235, 74, 0.5); /* Колір рамки при ховері */

            --eco-shadow-sm: 0 2px 10px rgba(0,0,0,0.3);
            --eco-shadow-md: 0 5px 20px rgba(0,0,0,0.4);
            --eco-shadow-lg: 0 10px 35px rgba(0,0,0,0.5);

            --eco-radius-sm: 0.5rem; /* 8px */
            --eco-radius-md: 0.75rem; /* 12px */
            --eco-radius-lg: 1rem; /* 16px */
            --eco-radius-xl: 1.5rem; /* 24px */
            --eco-radius-full: 9999px; /* Для круглих елементів */

            --eco-font-main: 'Inter', sans-serif;
            --eco-font-marios: 'Marios Black Sans Serif', sans-serif; /* Новий шрифт */
            accent-color: var(--eco-lime-green); /* Для чекбоксів, радіо і т.д. */
        }

        body {
            font-family: var(--eco-font-main);
            background-color: var(--eco-darkest);
            background-image:
              radial-gradient(circle at 10% 20%, rgba(34, 211, 238, 0.1) 0%, transparent 30%),
              radial-gradient(circle at 90% 80%, rgba(120, 235, 74, 0.08) 0%, transparent 30%);
            color: var(--eco-text-primary);
            /*overflow-x: hidden;*/
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        h1, h2, h3, h4, h5, h6 {
            color: var(--eco-text-primary);
            font-weight: 700;
        }

        a {
            color: var(--eco-electric-blue);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        a:hover {
            color: var(--eco-neon-cyan);
        }


        .bg-eco-dark-surface { background-color: var(--eco-dark-surface) !important; }
        .bg-eco-medium-surface { background-color: var(--eco-medium-surface) !important; }
        .text-eco-lime { color: var(--eco-lime-green) !important; }
        .text-eco-blue { color: var(--eco-electric-blue) !important; }
        .text-eco-cyan { color: var(--eco-neon-cyan) !important; }
        .text-eco-muted { color: var(--eco-text-muted) !important; }

        .btn {
            border-radius: var(--eco-radius-full); /* Закруглення всіх кнопок */
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            letter-spacing: 0.5px;
        }
        .btn-lg {
            padding: 0.85rem 1.75rem;
            font-size: 1.1rem;
        }
		
		.btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.75rem;
		}

        .btn-eco-lime {
            background: linear-gradient(135deg, var(--eco-lime-green), var(--eco-lime-green-darker));
            color: var(--eco-darkest);
            box-shadow: 0 4px 15px rgba(120, 235, 74, 0.3), 0 0 5px var(--eco-lime-green) inset;
        }
        .btn-eco-lime:hover {
            background: linear-gradient(135deg, var(--eco-lime-green-darker), var(--eco-lime-green));
            color: var(--eco-darkest);
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 6px 20px rgba(120, 235, 74, 0.5), 0 0 8px var(--eco-lime-green) inset;
        }

        .btn-eco-blue {
            background: linear-gradient(135deg, var(--eco-electric-blue), var(--eco-electric-blue-darker));
            color: var(--eco-text-primary);
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3), 0 0 5px var(--eco-electric-blue) inset;
        }
        .btn-eco-blue:hover {
            background: linear-gradient(135deg, var(--eco-electric-blue-darker), var(--eco-electric-blue));
            color: var(--eco-text-primary);
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5), 0 0 8px var(--eco-electric-blue) inset;
        }
		.btn-danger-neon {
			background: linear-gradient(135deg, #f43f5e, #be123c);
			color: var(--eco-text-primary);
            box-shadow: 0 4px 15px rgba(255, 59, 48, 0.6), 0 0 5px rgba(255, 59, 48, 0.6) inset;
		}
		.btn-danger-neon:hover {
			background: linear-gradient(135deg, #f43f5e, #be123c);
			color: var(--eco-text-primary);
			transform: translateY(-3px) scale(1.03);
            box-shadow: 0 4px 15px rgba(255, 59, 48, 0.6), 0 0 5px rgba(255, 59, 48, 0.6) inset;
		}

        .btn-outline-light-eco {
            border: 2px solid var(--eco-border-color);
            color: var(--eco-text-secondary);
        }
        .btn-outline-light-eco:hover {
            background-color: rgba(255, 255, 255, 0.05);
            color: var(--eco-text-primary);
            border-color: var(--eco-neon-cyan);
            box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
        }

        /* Specific styling for btn-group buttons to make them join */
        /* Ці правила можуть конфліктувати з var(--eco-radius-full), тому їх можна видалити або переглянути */
        /* .main-navbar .btn-group .btn:first-child:not(:last-child) {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }
        .main-navbar .btn-group .btn:last-child:not(:first-child) {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }
        .main-navbar .btn-group .btn:first-child:last-child {
            border-radius: var(--eco-radius-full) !important;
        } */
        .form-control,
		.form-control-modern,
		.form-select-modern {
            background-color: rgba(0, 0, 0, 0.2);
            color: var(--eco-text-primary);
            border: 1px solid var(--eco-border-color);
            border-radius: var(--eco-radius-md);
            padding: 0.85rem 1.25rem ;
            transition: all 0.3s ease;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
        }
        .form-control-modern::placeholder {
            color: var(--eco-text-muted);
            opacity: 0.8;
        }
        .form-control:focus,
		.form-control-modern:focus,
        .form-select-modern:focus {
            background-color: rgba(0, 0, 0, 0.3);
            border-color: var(--eco-electric-blue);
            box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25), inset 0 1px 3px rgba(0,0,0,0.2);
            outline: none;
            color: var(--eco-text-primary);
        }
        .form-select-modern {
            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='%23CBD5E0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        }
        .form-select-modern option {
            background-color: var(--eco-medium-surface);
            color: var(--eco-text-primary);
        }
        .form-label {
            color: var(--eco-text-secondary);
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .modal-content-custom {
            background-color: var(--eco-dark-surface);
            border: 1px solid var(--eco-border-color);
            border-radius: var(--eco-radius-xl);
            box-shadow: var(--eco-shadow-lg), 0 0 50px rgba(34, 211, 238, 0.15);
        }
        .modal-header-custom {
            border-bottom: 1px solid var(--eco-border-color);
            padding: 1.75rem 2rem;
        }
        .modal-footer-custom {
            border-top: 1px solid var(--eco-border-color);
            padding: 1.75rem 2rem;
        }
        .modal-title {
            color: var(--eco-neon-cyan);
            font-weight: 700;
            font-size: 1.75rem;
        }
        .btn-close-white {
            filter: invert(1) brightness(2) contrast(0.5);
            opacity: 0.8;
            transition: opacity 0.2s ease;
        }
        .btn-close-white:hover {
            opacity: 1;
        }

        .hero-section {
            background: linear-gradient(145deg, var(--eco-darkest) 0%, #0D1117 50%, var(--eco-medium-surface) 100%);
            padding: 10rem 0 8rem;
            text-align: center;
            overflow: hidden;
            position: relative;
            border-bottom-left-radius: var(--eco-radius-xl);
            border-bottom-right-radius: var(--eco-radius-xl);
            margin-bottom: 0rem;
            box-shadow: var(--eco-shadow-lg);
        }
        .hero-section h2 {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: 800;
            color: var(--eco-text-primary);
            margin-bottom: 2rem;
            line-height: 1.15;
            text-shadow: 0 0 20px rgba(34, 211, 238, 0.4), 0 0 30px rgba(120, 235, 74, 0.2);
        }
        .hero-section h2 span.text-eco-lime {
            color: var(--eco-lime-green);
            text-shadow: 0 0 25px rgba(120, 235, 74, 0.6);
        }
        .hero-section p {
            font-size: clamp(1.1rem, 2.5vw, 1.5rem);
            color: var(--eco-text-secondary);
            margin-bottom: 3.5rem;
            max-width: 60rem;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.7;
        }
        .hero-section .form-control-modern {
            box-shadow: var(--eco-shadow-sm);
        }

        @keyframes subtle-blob {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
            33% { transform: translate(40px, -60px) scale(1.15); opacity: 0.5; }
            66% { transform: translate(-25px, 25px) scale(0.85); opacity: 0.3; }
        }
        .animate-blob {
            animation: subtle-blob 10s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
        }
        .animation-delay-2000 { animation-delay: -3s; }
        .animation-delay-4000 { animation-delay: -6s; }
        .blob-shape {
            position: absolute;
            mix-blend-mode: hard-light;
            filter: blur(80px);
            border-radius: var(--eco-radius-full);
        }
        .blob-lime { background-color: var(--eco-lime-green); }
        .blob-blue { background-color: var(--eco-electric-blue); }
        .blob-cyan { background-color: var(--eco-neon-cyan); }

        .sidebar-filters {
            background-color: var(--eco-dark-surface);
            padding: 2.5rem;
            border-radius: var(--eco-radius-lg);
            box-shadow: var(--eco-shadow-md);
            border: 1px solid var(--eco-border-color);
        }
        .sidebar-filters h3 {
            color: var(--eco-text-primary);
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 2rem;
            padding-bottom: 1.25rem;
            border-bottom: 1px solid var(--eco-border-color);
            text-align: center;
        }
        .sidebar-filters h4 {
            color: var(--eco-neon-cyan);
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
        }
        .sidebar-filters ul {
            padding-left: 0;
        }
        .sidebar-filters ul li a {
            color: var(--eco-text-secondary);
            transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
            padding: 0.5rem 0.25rem;
            display: block;
            border-radius: var(--eco-radius-sm);
        }
        .sidebar-filters ul li a:hover {
            color: var(--eco-lime-green);
            text-decoration: none;
            transform: translateX(5px);
            background-color: rgba(120, 235, 74, 0.1);
        }
        .sidebar-filters .btn {
            margin-top: 1.5rem;
        }

        .carousel-container {
            background-color: var(--eco-dark-surface);
            padding: 1.5rem 0;
            border-radius: var(--eco-radius-xl);
            box-shadow: var(--eco-shadow-lg);
            margin-bottom: 3rem;
            border: 1px solid var(--eco-border-color);
        }
        .carousel-item img {
            /* height: 500px; */
            object-fit: cover;
            filter: brightness(1) contrast(1.1);
            border-radius: var(--eco-radius-lg);
        }
        .carousel-caption {
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
            border-radius: 0 0 var(--eco-radius-lg) var(--eco-radius-lg);
            padding: 2rem 2.5rem;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            max-width: 100%;
            text-align: center;
        }
        .carousel-caption h5 {
            color: var(--eco-lime-green);
            font-size: clamp(1.8rem, 4vw, 3rem);
            font-weight: 800;
            text-shadow: 0 0 15px rgba(120, 235, 74, 0.7);
            margin-bottom: 0.75rem;
        }
        .carousel-caption p {
            color: var(--eco-text-primary);
            font-size: clamp(1rem, 2vw, 1.3rem);
            opacity: 0.95;
            line-height: 1.6;
        }
        .carousel-control-prev, .carousel-control-next {
            width: auto;
            opacity: 0.9;
            transition: opacity 0.3s ease;
            padding: 0 1rem;
        }
        .carousel-control-prev:hover, .carousel-control-next:hover {
            opacity: 1;
            background: rgba(0,0,0,0.2);
        }
        .carousel-control-prev-icon, .carousel-control-next-icon {
            background-color: var(--eco-electric-blue);
            border-radius: var(--eco-radius-full);
            padding: 1.75rem;
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
            background-size: 60% 60%;
        }
        .carousel-indicators button {
            background-color: var(--eco-text-muted);
            opacity: 0.6;
            transition: all 0.3s ease;
            width: 12px;
            height: 12px;
            border-radius: var(--eco-radius-full);
            margin: 0 5px;
            border: none;
        }
        .carousel-indicators button.active {
            background-color: var(--eco-lime-green);
            opacity: 1;
            box-shadow: 0 0 10px rgba(120, 235, 74, 0.6);
            transform: scale(1.2);
        }

        /* --- HEADER STYLES --- */
        .main-navbar {
            background-color: rgba(11, 15, 25, 0.85);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 0.5rem 1rem;
            border-bottom: 1px solid var(--eco-border-color);
            box-shadow: var(--eco-shadow-sm);
            position: sticky;
            top: 0;
            z-index: 1030;
        }
        /* Changed container-fluid to flex-column on mobile, flex-row on desktop */
        .main-navbar .container-fluid {
            display: flex;
            flex-direction: column; /* Default for mobile: stack vertically */
            justify-content: space-between;
            align-items: center;
        }
        .main-navbar .navbar-brand {
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
            transition: transform 0.3s ease;
        }
        .main-navbar .navbar-brand:hover {
            transform: scale(1.05);
        }
        .main-navbar .navbar-brand img {
            width: 250px;
            height: auto;
            border-radius: 8px;
        }
        .main-navbar .brand-text {
            color: var(--eco-lime-green);
            font-weight: 700;
            font-size: 1.5rem;
            letter-spacing: -0.5px;
        }
        /* New class for Marios Black Sans Serif font */
        .marios-black-sans-serif {
            font-family: var(--eco-font-marios);
        }
        .main-navbar .nav-link {
            color: var(--eco-text-secondary);
            font-weight: 500;
            transition: color 0.2s ease, transform 0.2s ease;
            padding: 0.5rem 1rem;
            border-radius: var(--eco-radius-sm);
        }
        .main-navbar .nav-link:hover {
            color: var(--eco-lime-green);
            transform: translateY(-2px);
        }
        .main-navbar .nav-link.active {
            color: var(--eco-electric-blue);
            font-weight: 700;
            background-color: rgba(59, 130, 246, 0.1);
        }
        .main-navbar .btn-group .btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.75rem;
            padding: 0.6rem 0.85rem;
            min-width: 85px;
            border-radius: var(--eco-radius-full) !important; /* Ensure buttons are fully rounded */
            gap: 0.3rem;
            border-width: 1px;
        }
        .main-navbar .btn-group .btn svg {
            font-size: 1.4rem;
            margin-bottom: 0.1rem;
        }
        .main-navbar .btn-group .btn h6 {
            margin-bottom: 0;
            font-size: 0.8rem;
            font-weight: 500;
            line-height: 1;
        }
        .main-navbar .btn-group .btn.position-relative .badge {
            font-size: 0.65rem;
            padding: 0.35em 0.65em;
            top: 0.1rem;
            /*right: 0.1rem;*/
            background-color: var(--eco-neon-cyan);
            color: var(--eco-darkest);
        }
        .main-navbar .navbar-toggler {
            border: 1px solid var(--eco-border-color);
            padding: 0.5rem 0.75rem;
            border-radius: var(--eco-radius-full); /* Закруглення бургер меню */
        }
        .main-navbar .navbar-toggler:focus {
            box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.3);
        }
        .main-navbar .navbar-toggler-icon {
            filter: invert(0.8) sepia(0.5) saturate(5) hue-rotate(130deg);
        }
        .main-navbar .dropdown-menu {
            background-color: var(--eco-dark-surface); /* Темний фон з вашої теми */
            border: 1px solid var(--eco-border-color); /* Бордюр з вашої теми */
            border-radius: var(--eco-radius-md); /* Закруглені кути */
            box-shadow: var(--eco-shadow-md); /* М'яка тінь для глибини */
            padding: 0.5rem 0; /* Внутрішні відступи */
            min-width: 200px; /* Мінімальна ширина для читабельності */
            animation: fadeInScale 0.3s ease-out forwards; /* Анімація появи */
            transform-origin: top center; /* Точка трансформації для анімації */
        }
        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.95) translateY(-10px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .main-navbar .dropdown-item {
            color: var(--eco-text-secondary); /* Колір тексту елементів меню */
            font-weight: 500;
            padding: 0.75rem 1.25rem; /* Збільшені відступи для зручності кліку */
            transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; /* Плавний перехід при наведенні */
            border-radius: var(--eco-radius-sm); /* Маленькі закруглення для елементів */
            margin: 0 0.5rem; /* Невеликий відступ з боків від бордюру меню */
        }

        .main-navbar .dropdown-item:hover,
        .main-navbar .dropdown-item:focus {
            background-color: rgba(120, 235, 74, 0.1); /* Легкий зелений фон при наведенні (lime-green with opacity) */
            color: var(--eco-lime-green); /* Зелений текст при наведенні */
        }

        .main-navbar .dropdown-item.active {
            background-color: rgba(59, 130, 246, 0.2); /* Електричний синій фон для активного елемента */
            color: var(--eco-electric-blue); /* Електричний синій текст для активного елемента */
            font-weight: 600;
        }

        .main-navbar .dropdown-divider {
            border-top: 1px solid var(--eco-border-color); /* Розділювач з кольором бордюру теми */
            margin: 0.5rem 0; /* Відступи для розділювача */
        }


        @media (min-width: 992px) {



            .main-navbar .dropdown-menu {

            }
            .main-navbar .dropdown-item {

            }
            .main-navbar .dropdown-divider {

            }
        }
        .offcanvas-header {
            border-bottom: 1px solid var(--eco-border-color);
            padding: 1.5rem;
        }
        .offcanvas-title {
            color: var(--eco-lime-green);
            font-weight: 700;
        }
        .offcanvas-body {
            display: flex;
            flex-direction: column;
            padding: 1rem;
        }
        .offcanvas-body .offcanvas-nav {
            flex-grow: 1;
        }
        .offcanvas-body .nav-link {
            font-size: 1.2rem;
            font-weight: 500;
            color: var(--eco-text-secondary);
            padding: 0.8rem 1rem;
            border-radius: var(--eco-radius-md);
            transition: all 0.2s ease-in-out;
        }
		
        .offcanvas-body .nav-link:hover {
            background-color: rgba(120, 235, 74, 0.1);
            color: var(--eco-lime-green);
            transform: translateX(5px);
        }
        .offcanvas-body .nav-link.active {
            background-color: rgba(59, 130, 246, 0.2);
            color: var(--eco-electric-blue);
        }
		.offcanvas-body .nav-link .profile-avatar {
			aspect-ratio: 1/1;
			max-width: 35px;
			object-fit: cover;
			border-radius: 50%;
			border: 1px solid var(--eco-border-color);
			margin-right: .5rem;
		}
		.offcanvas-body .nav-link span{
			color: var(--eco-lime-green);
		}
        .offcanvas-body .nav-section-title {
            color: var(--eco-neon-cyan);
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 1.5rem 1rem 0.5rem;
        }
        .offcanvas-body .nav-divider {
            border-top: 1px solid var(--eco-border-color);
            margin: 1rem 1rem;
        }


        .footer-container {
            background-color: var(--eco-dark-surface);
            border-top: 1px solid var(--eco-border-color);
            padding: 1rem 0;
        }
        .footer-container .text-secondary {
            color: var(--eco-text-muted) !important;
            font-size: 0.9rem;
        }
        .footer-container .list-unstyled a svg {
            transition: transform 0.3s ease;
            /* Animation for fill color and glow */
            animation: footer-icon-glow-color 8s infinite alternate;
        }
        .footer-container .list-unstyled a:hover svg {
            transform: scale(1.2);
            /* Fill color is now controlled by animation, not hover */
            /* filter: drop-shadow is also part of the animation */
        }

        /* Keyframes for the glowing color animation */
        @keyframes footer-icon-glow-color {
            0% {
                fill: var(--eco-neon-cyan);
                filter: drop-shadow(0 0 5px var(--eco-neon-cyan));
            }
            33% {
                fill: var(--eco-lime-green);
                filter: drop-shadow(0 0 8px var(--eco-lime-green));
            }
            66% {
                fill: var(--eco-electric-blue);
                filter: drop-shadow(0 0 5px var(--eco-electric-blue));
            }
            100% {
                fill: var(--eco-neon-cyan);
                filter: drop-shadow(0 0 5px var(--eco-neon-cyan));
            }
        }

        .footer-container img {
            opacity: 0.8;
            transition: opacity 0.3s ease;
        }
        .footer-container img:hover {
            opacity: 1;
        }
        /* --- DESKTOP HEADER STYLES --- */
        @media (min-width: 992px) {
			.floating-panel {
				display: none !important;
			}
            .main-navbar .container-fluid {
                flex-direction: row; /* Desktop: arrange horizontally */
                justify-content: space-between; /* Distribute items */
                gap: 1.5rem; /* Space between main sections */
            }
            .main-navbar .navbar-nav-desktop {
                gap: 0.5rem;
            }
            .main-navbar .nav-link {
                padding: 0.5rem 0.8rem;
            }
            /* Desktop specific logo/brand alignment */
            .main-navbar .navbar-brand {
                margin-right: 1.5rem; /* Space between logo and nav links */
                margin-left: 0; /* Override mx-auto for desktop */
            }
            .main-navbar .brand-text {
                margin-left: 0 !important; /* Reset for desktop, let flexbox handle spacing */
            }
            /* Hide mobile-specific elements on desktop */
            .mobile-first-row,
            .mobile-second-row,
			.mobile	{
                display: none !important;
            }
        }

        /* --- MOBILE HEADER STYLES --- */
        @media (max-width: 991.98px) {
			.profile-avatar_base {
				max-width: auto;
			}
            .main-navbar .container-fluid {
                flex-direction: column; /* Ensure vertical stacking for mobile */
                align-items: center; /* Center items in the column */
            }

            /* First row for mobile: Burger menu (left), Logo (center), User button (right, above new ad button) */
            .main-navbar .mobile-first-row {
                width: 100%;
                display: flex;
                justify-content: space-between; /* Space out items */
                align-items: center;
                margin-bottom: 0rem;
                padding: 0rem; /* Add some horizontal padding */
            }

            .main-navbar .mobile-first-row .navbar-toggler {
                /*margin-right: auto;*/ /* Push toggler to the left */
            }

            .main-navbar .mobile-first-row .navbar-brand {
                margin: 0 auto; /* Center logo in its row */
            }

            .main-navbar .navbar-brand img {
                width: 200px; /* Smaller logo on mobile */
            }

            .main-navbar .brand-text {
                font-size: 1.3rem; /* Smaller text on mobile */
                margin-left: 0.5rem !important; /* Small space between logo and text */
            }

            /* Main user button in first row for mobile */
            .main-navbar .mobile-first-row .btn-outline-light-eco {
                padding: 0.5rem; /* Adjust padding for smaller button */
                min-width: 44px; /* Ensure minimum touch target size */
                height: 44px; /* Ensure minimum touch target size */
                display: flex; /* Use flex to center icon */
                justify-content: center;
                align-items: center;
            }
            .main-navbar .mobile-first-row .btn-outline-light-eco h6 {
                display: none; /* Hide text for profile button on mobile */
            }
            .main-navbar .mobile-first-row .btn-outline-light-eco svg {
                margin-bottom: 0;
                font-size: 1.4rem;
            }

            /* Second row for mobile: "Нове оголошення" button (left) and secondary user buttons (right) */
            .main-navbar .mobile-second-row {
                width: 100%;
                display: flex;
                justify-content: space-between; /* Space out items */
                align-items: center;
                margin-bottom: 0.5rem; /* Space below this row */
                gap: 0.5rem; /* Space between new ad button and user buttons */
                padding: 0 0.5rem; /* Add horizontal padding */
            }

            .main-navbar .mobile-second-row .btn-eco-lime {
                flex-grow: 1; /* Allow new ad button to grow */
                margin-right: 0; /* Remove extra margin */
                padding: 0.75rem 1rem;
                font-size: 0.9rem;
                white-space: nowrap; /* Prevent text wrapping */
            }
            .main-navbar .mobile-second-row .btn-eco-lime svg {
                margin-right: 0.5rem !important;
            }

            .main-navbar .mobile-second-row .btn-group {
                flex-shrink: 0; /* Prevent user button group from shrinking too much */
                display: flex; /* Ensure inner buttons are flex items */
                gap: 0.5rem; /* Space between user buttons */
            }

            .main-navbar .mobile-second-row .btn-group .btn {
                min-width: 44px; /* Minimum touch target size */
                height: 44px; /* Minimum touch target size */
                padding: 0.5rem;
                display: flex; /* Use flex to center icon */
                justify-content: center;
                align-items: center;
            }

            .main-navbar .mobile-second-row .btn-group .btn h6 {
                display: none; /* Hide text for user buttons on mobile */
            }

            .main-navbar .mobile-second-row .btn-group .btn svg {
                margin-bottom: 0;
                font-size: 1.4rem;
            }

            .main-navbar .mobile-second-row .btn-group .btn.position-relative .badge {
                top: -0.2rem;
            }

            /* Hide desktop-specific elements on mobile */
            .desktop-header-elements {
                display: none !important;
            }
            .modal-footer-custom-mobile {
                display: grid;
            }
        }
		.input-group-text{
			background:var(--eco-neon-cyan) ;
		}
        /*
		.hidden {
            display: none !important;
        }
		*/
		.custom-tooltip {
			--bs-tooltip-bg: var(--eco-medium-surface);
			--bs-tooltip-color: var(--eco-text-primary);
		}
		/*для ноутбуков*/
		@media (min-width: 991.98px) and (max-height: 1100px) {
			.desktop {
				display: none !important;
			}
		}
		/*для десктопов*/
		@media (max-width: 991.98px) or (min-height: 1100px) {
			.notebook {
				display: none !important;
			}
		}
    
	.profile-avatar_base {
        width: 100%;
        aspect-ratio: 1/1;
		max-width: 50px;
        object-fit: cover;
        border-radius: 50%;
        /*border: 4px solid var(--eco-border-color);*/
        /*box-shadow: 0 0 25px rgba(34, 211, 238, 0.2);*/
        /*transition: transform 0.3s ease, border-color 0.3s ease;*/
		display: block;
    }
    .profile-avatar-container_base {
        position: relative;
        width: 100%;
        margin: 0 auto;
		justify-content: center;
		display: flex;
		justify-content: center;
		align-items: center;
    }
	.spinner-border {
		height: 20px;
		width: 20px;		
	}
	.floating-panel {
		max-width: auto;
		position: fixed;
		bottom: 50px;
		left: 50%;
		transform: translateX(-50%);
		/*right: 25px;*/
		gap: 1rem;
		z-index: 9997;
		/*background-color: rcolor-mix(in srgb, var(--eco-medium-surface), transparent 20%);*/
		background: color-mix(in srgb, var(--eco-medium-surface), transparent 70%);
		border-radius: 40px;
		padding: 10px;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
		display: none;
		justify-content: space-between;
		align-items: center;
		transition: opacity .5s ease, transform 0.3s ease; /* Добавит плавности при изменении размера окна */
		opacity: .01;
		animation: pulse-neon-border 8s infinite linear;
		backdrop-filter: blur(10px);          /* Размытие заднего фона */
		-webkit-backdrop-filter: blur(10px);   /* Поддержка Safari */
	}
	.floating-panel.active {
		/*display: flex !important;*/
		opacity: 1 !important;
		/*transform: translateY(0);*/
	}
	.floating-panel h6 {
		font-size: .75rem;
	}
	.floating-panel .btn{
		width: 6rem;
		height: 3.5rem;
		padding: 0 !important;
	}
    @keyframes pulse-neon-border {
        0%, 100% { border-color: var(--eco-neon-cyan); box-shadow: 0 0 10px rgba(34, 211, 238, 0.5); }
        33% { border-color: var(--eco-lime-green); box-shadow: 0 0 10px rgba(120, 235, 74, 0.5); }
        66% { border-color: var(--eco-electric-blue); box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
    }
	.floating-panel .btn .badge {
		position: absolute;
		top: -3px;    /* Смещаем вверх */
		right: 5px;  /* Смещаем вправо */
		
		background: var(--eco-neon-cyan); 
		color: white;
		font-size: 12px;
		min-width: 18px;
		height: 18px;
		border-radius: 50%; /* Делаем круглым */
		
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	}