/**
 * LIQUID GLASS HOTFIX - Повна версія з меню каталогу
 * Дата: 2025-10-16
 */

/* ================================================
   МЕНЮ КАТАЛОГУ - Glass ефект
   ================================================ */

/* Батьківський контейнер - прозорий */
.dropdown-menu.fixed_menu_ext {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Glass контейнер - головний стиль */
.custom_menu_dropdown.glass {
    background: rgba(248, 249, 250, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    padding: 20px !important;
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
    animation: glassMenuFadeIn 0.3s ease-out
 !important;
}

/* Анімація появи */
@keyframes glassMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom scrollbar */
.custom_menu_dropdown.glass::-webkit-scrollbar {
    width: 8px !important;
}

.custom_menu_dropdown.glass::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px !important;
}

.custom_menu_dropdown.glass::-webkit-scrollbar-thumb {
    background: rgba(190, 0, 60, 0.3) !important;
    border-radius: 4px !important;
}

.custom_menu_dropdown.glass::-webkit-scrollbar-thumb:hover {
    background: rgba(190, 0, 60, 0.5) !important;
}

/* Заголовки категорій - червоні на світлому */
.nav__group-title {
    color: #be003c !important;
    background: rgba(255, 255, 255, 0.5) !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    display: block !important;
    margin-bottom: 8px !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    transition: all 0.3s ease !important;
}

.nav__group-title:hover {
    background: rgba(190, 0, 60, 0.1) !important;
    color: #a00034 !important;
    text-decoration: none !important;
}

/* Посилання підкатегорій - темні на світлому */
.nav__group-link {
    color: #333 !important;
    background: rgba(255, 255, 255, 0.3) !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    display: block !important;
    margin-bottom: 4px !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    transition: all 0.3s ease !important;
}

.nav__group-link:hover {
    background: rgba(190, 0, 60, 0.05) !important;
    color: #be003c !important;
    text-decoration: none !important;
    transform: translateX(4px) !important;
}

/* Групи меню */
.nav__group {
    display: flex !important;
    gap: 15px !important;
}

.nav__group-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
}

.nav__group-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Колонки */
.col-6, .col-lg-6 {
    flex: 0 0 calc(50% - 7.5px) !important;
    max-width: calc(50% - 7.5px) !important;
}

/* ================================================
   ВЕРХНЄ МЕНЮ - Контраст
   ================================================ */

.maxwidth-theme .menu.topest li a,
.maxwidth-theme .menu.topest li a span,
.menu.topest li a,
.menu.topest li a span {
    color: #222 !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

.maxwidth-theme .menu.topest li a:hover {
    color: #be003c !important;
}

/* ================================================
   СТІКЕРИ - Контраст
   ================================================ */

.sticker_sale_text,
.sticker-sale {
    background: #ffffff !important;
    color: #be003c !important;
    border: 2px solid #be003c !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
}

.sticker_best,
.sticker-best {
    background: #ffffff !important;
    color: #28a745 !important;
    border: 2px solid #28a745 !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    
}

.sticker_new,
.sticker-new {
    background: #ffffff !important;
    color: #0056b3 !important;
    border: 2px solid #0056b3 !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
}

/* ================================================
   ЦІНИ - Контраст
   ================================================ */

.prices,
span.prices,
.price,
.price_value,
span.price_value {
    color: #222 !important;
    font-weight: 600 !important;
}

.price.discount,
.price.discount .price_value {
    color: #666 !important;
    text-decoration: line-through !important;
}

/* ================================================
   АРТИКУЛ - Контраст
   ================================================ */

.article_block {
    color: #666 !important;
    font-size: 13px !important;
}

/* ================================================
   КНОПКИ - Контраст
   ================================================ */

.to-cart,
.small.to-cart {
    background: #be003c !important;
    color: #ffffff !important;
    border: none !important;
}

.in-cart,
.small.in-cart {
    background: #28a745 !important;
    color: #ffffff !important;
    border: none !important;
}

/* ================================================
   КАЛЬКУЛЯТОР КІЛЬКОСТІ - Компактний
   ================================================ */

.counter_block {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

input.custom_quantity {
    text-align: center !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    color: #222 !important;
    background: #fff !important;
}


/* Footer button layout */
.footer_button .counter_wrapp {
    display: flex !important;
    align-items: center !important;
    gap: 0.8px !important;
}

.footer_button .counter_block {
    flex-shrink: 0 !important;
}

.footer_button .button_block {
    flex-grow: 1 !important;
}

/* ================================================
   ACCESSIBILITY
   ================================================ */

*:focus-visible {
    outline: 3px solid #be003c !important;
    outline-offset: 2px !important;
}

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

/* ================================================
   МОБІЛЬНА ВЕРСІЯ
   ================================================ */

@media (max-width: 768px) {
    .custom_menu_dropdown.glass {
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
    }
}

/* ================================================
   МОБІЛЬНЕ МЕНЮ #mainMenuF
   ================================================ */

/* Стилізація мобільного меню - контейнер */
#mainMenuF.responsive-menu.visible-xs {
    background: rgba(248, 249, 250, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    margin: 10px 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}


/* Dropdown items - відносне позиціонування */
#mainMenuF > li.dropdown {
    position: relative !important;
}

/* Dropdown меню в мобільній версії - випадає вправо */
#mainMenuF .dropdown-menu.fixed_menu_ext {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;

    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    z-index: 9999 !important;
}

/* Показати меню тільки в активному dropdown */
#mainMenuF > li.dropdown.open > .dropdown-menu.fixed_menu_ext {
    display: block !important;
}

/* Glass контейнер в мобільному меню */
#mainMenuF .custom_menu_dropdown.glass {
    width: calc(100vw - 30px) !important;
    max-width: calc(100vw - 30px) !important;
    min-width: auto !important;
    background: rgba(248, 249, 250, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    padding: 15px !important;
    margin: 10px 15px !important;
}

/* Перебити інлайн-стилі width з HTML */
#mainMenuF .dropdown-menu.fixed_menu_ext .custom_menu_dropdown.glass[style] {
    width: calc(50vw - 30px) !important;
    max-width: calc(50vw - 30px) !important;
}

/* Адаптивна сітка для мобільного меню - ДВОКОЛОНКОВА */
#mainMenuF .nav__group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

#mainMenuF .col-lg-8 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

#mainMenuF .col-lg-6,
#mainMenuF .col-6 {
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    flex: 0 0 calc(50% - 5px) !important;
    padding: 0 !important;
}

/* Заголовки категорій в мобільному меню */
#mainMenuF .nav__group-title {
    color: #be003c !important;
    background: rgba(255, 255, 255, 0.5) !important;
    font-weight: 700 !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 15px !important;
}

#mainMenuF .nav__group-title:hover {
    background: rgba(190, 0, 60, 0.1) !important;
    color: #a00034 !important;
}

/* Посилання підкатегорій в мобільному меню */
#mainMenuF .nav__group-link {
    color: #333 !important;
    background: rgba(255, 255, 255, 0.3) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 14px !important;
}

#mainMenuF .nav__group-link:hover {
    background: rgba(190, 0, 60, 0.05) !important;
    color: #be003c !important;
    transform: translateX(2px) !important;
}

/* Списки меню в мобільній версії */
#mainMenuF .nav__group-menu {
    list-style: none !important;
    padding: 0 0 0 15px !important;
    margin: 0 0 15px 0 !important;
}

#mainMenuF .nav__group-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Кнопка dropdown toggle в мобільному меню */
#mainMenuF .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 15px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border-radius: 8px !important;
    margin: 5px 0 !important;
    color: #222 !important;
    font-weight: 600 !important;
}

#mainMenuF .dropdown-toggle:hover {
    background: rgba(190, 0, 60, 0.1) !important;
    color: #be003c !important;
}

#mainMenuF .dropdown-toggle .fa {
    margin-left: auto !important;
    transition: transform 0.3s ease !important;
}

#mainMenuF .dropdown.open .dropdown-toggle .fa {
    transform: rotate(90deg) !important;
}

/* Приховати product_list_custom в мобільній версії */
#mainMenuF .product_list_custom {
    display: none !important;
}

/* Scrollbar для мобільного меню */
#mainMenuF .custom_menu_dropdown.glass::-webkit-scrollbar {
    width: 6px !important;
}

#mainMenuF .custom_menu_dropdown.glass::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 3px !important;
}

#mainMenuF .custom_menu_dropdown.glass::-webkit-scrollbar-thumb {
    background: rgba(190, 0, 60, 0.3) !important;
    border-radius: 3px !important;
}

/* Анімація для мобільного меню */
#mainMenuF .dropdown-menu {
    animation: glassMenuFadeIn 0.3s ease-out !important;
}