@media (min-width: 1281px) {
    :root[data-theme="light"] .lx-nav-link--cat:not(.is-active):not(:hover) .lx-nav-pet,
    :root[data-theme="light"] .lx-catalog-title__icon,
    :root[data-theme="light"] .lx-dd-icon {
        color: #0f6a51 !important;
    }

    :root[data-theme="dark"] .lx-nav-link--cat:not(.is-active):not(:hover) .lx-nav-pet,
    :root[data-theme="dark"] .lx-catalog-title__icon,
    :root[data-theme="dark"] .lx-dd-icon {
        color: var(--lx-nav-icon) !important;
    }

    :root[data-theme="sky"] .lx-nav-link--cat:not(.is-active):not(:hover) .lx-nav-pet,
    :root[data-theme="sky"] .lx-catalog-title__icon,
    :root[data-theme="sky"] .lx-dd-icon {
        color: #3b82f6 !important;
    }

    :root[data-theme="viber"] .lx-nav-link--cat:not(.is-active):not(:hover) .lx-nav-pet,
    :root[data-theme="viber"] .lx-catalog-title__icon,
    :root[data-theme="viber"] .lx-dd-icon {
        color: #7360F2 !important;
    }
}

/* Canonical responsive theme layer. It intentionally comes last and replaces
   hard-coded mobile colors with the same semantic tokens used on desktop. */
html, body {
    background: var(--adm-bg);
    color: var(--adm-text);
}

body, button, input, select, textarea { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--adm-accent-border); outline-offset: 2px; }

@media (max-width: 1280px) {
    .lx-nav.lx-nav--open,
    .lx-mobile-panel-head,
    .lx-catalog-dropdown,
    .lx-catalog-grid {
        background: var(--lx-mobile-bg) !important;
        color: var(--lx-nav-text) !important;
    }
    .lx-nav.lx-nav--open .lx-nav-link,
    .lx-nav.lx-nav--open .lx-dd-link,
    .lx-nav.lx-nav--open .lx-mobile-logo,
    .lx-nav.lx-nav--open .lx-nav-link > span:nth-child(2),
    .lx-nav.lx-nav--open .lx-dd-link > span:nth-child(2) {
        color: var(--lx-nav-text) !important;
    }
    .lx-nav.lx-nav--open .lx-nav-link:hover,
    .lx-nav.lx-nav--open .lx-nav-link.is-active,
    .lx-nav.lx-nav--open .lx-dd-link:hover,
    .lx-nav.lx-nav--open .lx-dd-link:focus-visible {
        background: var(--lx-dd-hover-bg) !important;
        color: var(--lx-dd-hover-text) !important;
    }
    .lx-nav-pet, .lx-dd-icon, .lx-burger { color: var(--lx-mobile-icon) !important; }
    .lx-mobile-close { background: var(--adm-btn-bg) !important; color: var(--adm-text) !important; }
    .lx-overlay { background: var(--lx-overlay-bg) !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (max-width: 1280px) {

    /* ══ FULL-WIDTH MOBILE MENU ══ */
    .lx-nav.lx-nav--open {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        color: #15191f !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .lx-nav.lx-nav--open,
    .lx-mobile-panel-head,
    .lx-catalog-dropdown,
    .lx-catalog-grid {
        background: #ffffff !important;
    }

    /* ══ PANEL HEAD: logo LEFT, close button RIGHT ══ */
    .lx-mobile-panel-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 10px 16px 10px 18px !important;
        box-sizing: border-box !important;
    }

    .lx-mobile-logo {
        order: 1 !important;
        margin-right: auto !important;
    }

    .lx-mobile-close {
        order: 2 !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    /* ══ NAV LINKS: left-aligned, full width ══ */
    .lx-nav.lx-nav--open .lx-nav-link {
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important;
    }

    .lx-nav.lx-nav--open .lx-nav-link,
    .lx-nav.lx-nav--open .lx-catalog-title,
    .lx-nav.lx-nav--open .lx-dd-link {
        color: #15191f !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }

    .lx-nav.lx-nav--open .lx-nav-link > span:nth-child(2),
    .lx-nav.lx-nav--open .lx-dd-link > span:nth-child(2),
    .lx-nav.lx-nav--open .lx-catalog-title__text {
        color: #15191f !important;
        font-weight: 900 !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }

    .lx-nav.lx-nav--open .lx-nav-link:hover,
    .lx-nav.lx-nav--open .lx-nav-link.is-active,
    .lx-nav.lx-nav--open .lx-dd-link:hover,
    .lx-nav.lx-nav--open .lx-dd-link:active {
        background: rgba(15, 106, 81, .075) !important;
        color: #0a6047 !important;
        box-shadow: none !important;
    }

    .lx-nav.lx-nav--open .lx-dd-arrow {
        color: #8a949f !important;
        opacity: 1 !important;
    }

    .lx-nav.lx-nav--open .lx-catalog-title {
        display: none !important;
    }

    .lx-overlay {
        background: rgba(15, 23, 42, .18) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* ══ THEME COLORS: icons + burger ══ */
    :root[data-theme="light"] .lx-nav-pet,
    :root[data-theme="light"] .lx-catalog-title__icon,
    :root[data-theme="light"] .lx-dd-icon,
    :root[data-theme="light"] .lx-burger {
        color: var(--lx-nav-icon) !important;
    }

    :root[data-theme="dark"] .lx-nav-pet,
    :root[data-theme="dark"] .lx-catalog-title__icon,
    :root[data-theme="dark"] .lx-dd-icon,
    :root[data-theme="dark"] .lx-burger {
        color: var(--lx-mobile-icon) !important;
    }

    :root[data-theme="sky"] .lx-nav-pet,
    :root[data-theme="sky"] .lx-catalog-title__icon,
    :root[data-theme="sky"] .lx-dd-icon,
    :root[data-theme="sky"] .lx-burger {
        color: #3b82f6 !important;
    }

    :root[data-theme="viber"] .lx-nav-pet,
    :root[data-theme="viber"] .lx-catalog-title__icon,
    :root[data-theme="viber"] .lx-dd-icon,
    :root[data-theme="viber"] .lx-burger {
        color: #7360F2 !important;
    }

    /* ══ THEME BACKGROUNDS: mobile menu panel ══ */
    :root[data-theme="dark"] .lx-nav.lx-nav--open,
    :root[data-theme="dark"] .lx-mobile-panel-head {
        background: var(--lx-mobile-bg) !important;
    }
    :root[data-theme="dark"] .lx-nav.lx-nav--open .lx-nav-link,
    :root[data-theme="dark"] .lx-nav.lx-nav--open .lx-dd-link,
    :root[data-theme="dark"] .lx-mobile-logo {
        color: var(--lx-nav-text) !important;
    }
    :root[data-theme="dark"] .lx-mobile-close {
        background: var(--adm-btn-bg) !important;
        color: var(--adm-text) !important;
    }
    :root[data-theme="dark"] .lx-nav.lx-nav--open .lx-nav-link:hover,
    :root[data-theme="dark"] .lx-nav.lx-nav--open .lx-nav-link.is-active {
        background: var(--lx-dd-hover-bg) !important;
        color: var(--lx-dd-hover-text) !important;
    }

    :root[data-theme="sky"] .lx-nav.lx-nav--open,
    :root[data-theme="sky"] .lx-mobile-panel-head {
        background: #0c1929 !important;
    }
    :root[data-theme="sky"] .lx-nav.lx-nav--open .lx-nav-link,
    :root[data-theme="sky"] .lx-nav.lx-nav--open .lx-dd-link,
    :root[data-theme="sky"] .lx-mobile-logo {
        color: #d0e4ff !important;
    }
    :root[data-theme="sky"] .lx-mobile-close {
        background: #162d4a !important;
        color: #d0e4ff !important;
    }
    :root[data-theme="sky"] .lx-nav.lx-nav--open .lx-nav-link:hover,
    :root[data-theme="sky"] .lx-nav.lx-nav--open .lx-nav-link.is-active {
        background: rgba(59, 130, 246, .12) !important;
        color: #93bbfd !important;
    }

    :root[data-theme="viber"] .lx-nav.lx-nav--open,
    :root[data-theme="viber"] .lx-mobile-panel-head {
        background: #1a1330 !important;
    }
    :root[data-theme="viber"] .lx-nav.lx-nav--open .lx-nav-link,
    :root[data-theme="viber"] .lx-nav.lx-nav--open .lx-dd-link,
    :root[data-theme="viber"] .lx-mobile-logo {
        color: #e0d8f5 !important;
    }
    :root[data-theme="viber"] .lx-mobile-close {
        background: #2d2050 !important;
        color: #e0d8f5 !important;
    }
    :root[data-theme="viber"] .lx-nav.lx-nav--open .lx-nav-link:hover,
    :root[data-theme="viber"] .lx-nav.lx-nav--open .lx-nav-link.is-active {
        background: rgba(115, 96, 242, .12) !important;
        color: #a99cf7 !important;
    }
}

/* ══ HEADER & SUB-TOOLBAR ICONS THEME COLORS ══ */
@media (min-width: 1281px) {
    :root[data-theme="light"] .lx-icon-btn, :root[data-theme="light"] .top-socials .cg-ibtn, :root[data-theme="light"] .theme-toggle-btn, :root[data-theme="light"] .lang-selector { color: #0f6a51 !important; }
    :root[data-theme="dark"] .lx-icon-btn, :root[data-theme="dark"] .top-socials .cg-ibtn, :root[data-theme="dark"] .theme-toggle-btn, :root[data-theme="dark"] .lang-selector { color: var(--lx-nav-icon) !important; }
    :root[data-theme="sky"] .lx-icon-btn, :root[data-theme="sky"] .top-socials .cg-ibtn, :root[data-theme="sky"] .theme-toggle-btn, :root[data-theme="sky"] .lang-selector { color: #3b82f6 !important; }
    :root[data-theme="viber"] .lx-icon-btn, :root[data-theme="viber"] .top-socials .cg-ibtn, :root[data-theme="viber"] .theme-toggle-btn, :root[data-theme="viber"] .lang-selector { color: #7360F2 !important; }
}

/* Final semantic mobile override: must remain at the end of this file. */
@media (max-width: 1280px) {
    :root[data-theme] .lx-nav.lx-nav--open,
    :root[data-theme] .lx-mobile-panel-head,
    :root[data-theme] .lx-catalog-dropdown,
    :root[data-theme] .lx-catalog-grid { background: var(--lx-mobile-bg) !important; color: var(--lx-nav-text) !important; }
    :root[data-theme] .lx-nav.lx-nav--open .lx-nav-link,
    :root[data-theme] .lx-nav.lx-nav--open .lx-dd-link,
    :root[data-theme] .lx-nav.lx-nav--open .lx-mobile-logo,
    :root[data-theme] .lx-nav.lx-nav--open .lx-nav-link > span:nth-child(2),
    :root[data-theme] .lx-nav.lx-nav--open .lx-dd-link > span:nth-child(2) { color: var(--lx-nav-text) !important; }
    :root[data-theme] .lx-nav.lx-nav--open .lx-nav-link:hover,
    :root[data-theme] .lx-nav.lx-nav--open .lx-nav-link.is-active,
    :root[data-theme] .lx-nav.lx-nav--open .lx-dd-link:hover,
    :root[data-theme] .lx-nav.lx-nav--open .lx-dd-link:focus-visible { background: var(--lx-dd-hover-bg) !important; color: var(--lx-dd-hover-text) !important; }
    :root[data-theme] .lx-nav-pet,
    :root[data-theme] .lx-dd-icon,
    :root[data-theme] .lx-burger { color: var(--lx-mobile-icon) !important; }
    :root[data-theme] .lx-mobile-close { background: var(--adm-btn-bg) !important; color: var(--adm-text) !important; }
    :root[data-theme] .lx-overlay { background: var(--lx-overlay-bg) !important; }
}

@media (max-width: 1280px) {
    :root[data-theme="light"] .lx-icon-btn, :root[data-theme="light"] .top-socials .cg-ibtn, :root[data-theme="light"] .theme-toggle-btn, :root[data-theme="light"] .lang-selector { color: var(--lx-nav-icon) !important; }
    :root[data-theme="dark"] .lx-icon-btn, :root[data-theme="dark"] .top-socials .cg-ibtn, :root[data-theme="dark"] .theme-toggle-btn, :root[data-theme="dark"] .lang-selector { color: var(--lx-mobile-icon) !important; }
    :root[data-theme="sky"] .lx-icon-btn, :root[data-theme="sky"] .top-socials .cg-ibtn, :root[data-theme="sky"] .theme-toggle-btn, :root[data-theme="sky"] .lang-selector { color: #3b82f6 !important; }
    :root[data-theme="viber"] .lx-icon-btn, :root[data-theme="viber"] .top-socials .cg-ibtn, :root[data-theme="viber"] .theme-toggle-btn, :root[data-theme="viber"] .lang-selector { color: #7360F2 !important; }
}

/* MarkupString SVGs do not receive Blazor's scoped attribute, so their theme
   colors must live in this global layer. */
@media (min-width: 1281px) {
    .lx-role-link > svg:first-child,
    .lx-admin-dropdown .lx-dd-link > svg:first-child {
        color: var(--lx-dd-icon) !important;
        transition: color .18s ease;
    }

    .lx-role-link:hover > svg:first-child,
    .lx-role-link:focus-visible > svg:first-child,
    .lx-has-dropdown:hover > .lx-role-link > svg:first-child,
    .lx-has-dropdown:focus-within > .lx-role-link > svg:first-child {
        color: var(--lx-nav-active-text) !important;
    }

    .lx-admin-dropdown .lx-dd-link:hover > svg:first-child,
    .lx-admin-dropdown .lx-dd-link:focus-visible > svg:first-child {
        color: var(--lx-dd-hover-text) !important;
    }
}

@media (max-width: 1280px) {
    .lx-nav.lx-nav--open .lx-role-link > svg:first-child,
    .lx-nav.lx-nav--open .lx-admin-dropdown .lx-dd-link > svg:first-child {
        color: var(--lx-mobile-icon) !important;
    }

    :root[data-theme="sky"] .lx-icon-btn, :root[data-theme="sky"] .top-socials .cg-ibtn, :root[data-theme="sky"] .theme-toggle-btn, :root[data-theme="sky"] .lang-selector { color: #3b82f6 !important; }
    :root[data-theme="viber"] .lx-icon-btn, :root[data-theme="viber"] .top-socials .cg-ibtn, :root[data-theme="viber"] .theme-toggle-btn, :root[data-theme="viber"] .lang-selector { color: #7360F2 !important; }
}

/* MarkupString SVGs do not receive Blazor's scoped attribute, so their theme
   colors must live in this global layer. */
@media (min-width: 1281px) {
    .lx-role-link > svg:first-child,
    .lx-admin-dropdown .lx-dd-link > svg:first-child {
        color: var(--lx-dd-icon) !important;
        transition: color .18s ease;
    }

    .lx-role-link:hover > svg:first-child,
    .lx-role-link:focus-visible > svg:first-child,
    .lx-has-dropdown:hover > .lx-role-link > svg:first-child,
    .lx-has-dropdown:focus-within > .lx-role-link > svg:first-child {
        color: var(--lx-nav-active-text) !important;
    }

    .lx-admin-dropdown .lx-dd-link:hover > svg:first-child,
    .lx-admin-dropdown .lx-dd-link:focus-visible > svg:first-child {
        color: var(--lx-dd-hover-text) !important;
    }
}

@media (max-width: 1280px) {
    .lx-nav.lx-nav--open .lx-role-link > svg:first-child,
    .lx-nav.lx-nav--open .lx-admin-dropdown .lx-dd-link > svg:first-child {
        color: var(--lx-mobile-icon) !important;
    }

    .lx-nav.lx-nav--open .lx-role-link:hover > svg:first-child,
    .lx-nav.lx-nav--open .lx-role-link:focus-visible > svg:first-child,
    .lx-nav.lx-nav--open .lx-admin-dropdown .lx-dd-link:hover > svg:first-child,
    .lx-nav.lx-nav--open .lx-admin-dropdown .lx-dd-link:focus-visible > svg:first-child {
        color: var(--lx-dd-hover-text) !important;
    }
}

/* Ensure nav links are visible in dark theme on desktop */
@media (min-width: 1281px) {
    :root[data-theme="dark"] .lx-nav-link:not(.is-active):not(:hover) {
        color: #f1f5f9 !important;
    }
    :root[data-theme="dark"] .lx-nav-link:hover,
    :root[data-theme="dark"] .lx-nav-link:focus-visible {
        background: var(--lx-dd-hover-bg) !important;
        color: var(--lx-dd-hover-text) !important;
    }
}