/* ═════════════════════════════════════════════════════════════════════
   SIDE-LAYOUT SIDEBAR — refined desktop design.

   This file rides ON TOP of the baseline rules in custom.css
   (`body.layout-side .main-menu` etc.) and replaces the heavier
   defaults with a more intentional, boutique-style aesthetic.

   What changed vs. the baseline:
   • Active state is no longer a solid primary-color fill — it's a soft
     tinted background + a 3px inline-start accent bar in the merchant's
     brand color. Reads as "current page" without shouting.
   • Hover gets a smooth cubic-bezier transition + a tiny chevron reveal.
   • Brand block at the top has real breathing room + a faint divider.
   • The search/profile/cart action row is wrapped in a soft pill so it
     reads as one element instead of three floating icons.
   • The `.title-category` heading (hidden in the baseline) comes back as
     a designed micro-heading above the categories list.
   • Sub-category indentation uses a thin guide line via ::before
     instead of the ASCII └ character.
   • Every change has a paired `html[data-scheme="dark"]` override.

   All selectors use logical properties (`inset-inline-*`,
   `border-inline-*`, `padding-inline-*`) so RTL Just Works.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Sidebar shell — slightly more breathing room ── */
body.layout-side .main-menu {
    /* Widen by 20px so categories no longer feel pinched, especially
       with longer Hebrew labels. Existing 260px stayed for years; bump
       to 280px now that the design needs a bit more horizontal space. */
    width: 280px !important;
}
body.layout-side .app-content { margin-right: 280px !important; }
[dir="ltr"] body.layout-side .app-content { margin-right: 0 !important; margin-left: 280px !important; }

/* ── Brand block — real spacing + a faint bottom rule ── */
body.layout-side .main-menu .navbar-hader {
    padding: 24px 22px 18px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
body.layout-side .main-menu .nav_tab_img {
    max-width: 170px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body.layout-side .main-menu .navbar-brand:hover .nav_tab_img {
    transform: scale(1.02);
}

/* ── Action row — soft pill container that groups the icons ── */
body.layout-side .side-menu-actions {
    padding: 14px 18px 10px !important;
}
body.layout-side .side-menu-actions__row {
    gap: 6px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.035);
    border-radius: 999px;
    transition: background 0.15s;
}
body.layout-side .side-menu-actions__row:hover {
    background: rgba(0, 0, 0, 0.055);
}
/* Inline search input — when it takes its own row, drop the pill bg so
   it doesn't double up with the input's own border. */
body.layout-side .side-menu-actions__row > .search-input,
body.layout-side .side-menu-actions__row > .store-search-form {
    margin-bottom: 6px;
}
body.layout-side .side-menu-actions__row:has(> .search-input),
body.layout-side .side-menu-actions__row:has(> .store-search-form) {
    background: transparent;
    padding: 0;
    border-radius: 0;
    flex-wrap: wrap;
}

/* ── Section heading — bring `.title-category` back as a designed
   micro-heading. Baseline hides it; the rule below un-hides it
   specifically inside .main-menu-content with intentional styling. */
body.layout-side .main-menu-content .title-category {
    display: block !important;
    margin: 10px 0 8px;
    padding: 0 22px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.42);
    line-height: 1;
}

/* ── Category list — generous padding around the rail ── */
body.layout-side .main-menu .navigation,
body.layout-side .main-menu .navigation.main.pro_category {
    padding: 0 12px !important;
    gap: 1px;
}

/* ── Category links — refined typography + soft hover + intentional
       active state with inline-start accent bar (no solid fill). ── */
body.layout-side .main-menu .custom-list-group-item {
    position: relative;
    padding: 10px 14px !important;
    border-radius: 10px;
    font-size: 14px !important;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #1a1a1a !important;
    transition:
        background 0.18s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.18s,
        transform 0.18s;
}
body.layout-side .main-menu .custom-list-group-item:hover {
    background: rgba(0, 0, 0, 0.045) !important;
    color: var(--primary-color, #0e1015) !important;
}
/* Active — accent bar + soft tinted bg, NOT a solid primary fill. The
   3px inline-start bar uses the merchant's brand color so the page
   identity still reads, and the text picks up the same color. */
body.layout-side .main-menu .custom-list-group-item.active {
    background: rgba(0, 0, 0, 0.045) !important;
    color: var(--primary-color, #0e1015) !important;
    font-weight: 600;
}
body.layout-side .main-menu .custom-list-group-item.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary-color, #0e1015);
}
[dir="rtl"] body.layout-side .main-menu .custom-list-group-item.active::before {
    border-radius: 3px 0 0 3px;
}

/* ── Sub-category indentation — thin guide line via ::before instead
       of the └ character (which renders inconsistently across fonts). ── */
body.layout-side .main-menu .sub-nav-list {
    position: relative;
    padding-inline-start: 18px !important;
    margin-block: 2px 6px !important;
}
body.layout-side .main-menu .sub-nav-list::before {
    content: "";
    position: absolute;
    inset-inline-start: 8px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
}
body.layout-side .main-menu .sub-cat-link {
    padding: 7px 12px !important;
    font-size: 13px !important;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.62) !important;
}
body.layout-side .main-menu .sub-cat-link:hover {
    color: var(--primary-color, #0e1015) !important;
    background: rgba(0, 0, 0, 0.03) !important;
}
/* Hide the legacy └ ASCII guide — kept in markup for back-compat but
   the ::before line above is the new visual cue. */
body.layout-side .main-menu .sub-cat-link > span:first-child {
    display: none !important;
}

/* ── Sub-toggle button — smooth rotate on expand ── */
body.layout-side .main-menu .sub-toggle-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    transition: background 0.15s;
}
body.layout-side .main-menu .sub-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}
body.layout-side .main-menu .sub-toggle-btn .sub-toggle-icon {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.layout-side .main-menu .nav-item.is-open > div > .sub-toggle-btn .sub-toggle-icon {
    transform: rotate(180deg);
}

/* ── Divider — refined slim rule with horizontal margin ── */
body.layout-side .main-menu .nav-item--divider {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    margin: 12px 12px 8px;
    list-style: none;
    padding: 0;
    height: 0;
}
body.layout-side .main-menu .nav-item--divider span {
    display: none;
}

/* ── Side-menu-extra (Blog / blog posts / Contact us) — refine the
       icon pill so it feels like a deliberate UI element. ── */
body.layout-side .main-menu .side-menu-extra__link {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.layout-side .main-menu .side-menu-extra__icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
body.layout-side .main-menu .side-menu-extra__link:hover .side-menu-extra__icon {
    background: var(--primary-color, #0e1015);
    color: #fff;
}

/* ═════════════════════════════════════════════════════════════════════
   DARK SCHEME — pair every tone above with a dark-mode override so the
   sidebar looks intentional, not broken, when `data-scheme="dark"`.
   ═════════════════════════════════════════════════════════════════════ */
html[data-scheme="dark"] body.layout-side .main-menu .navbar-hader {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
html[data-scheme="dark"] body.layout-side .side-menu-actions__row {
    background: rgba(255, 255, 255, 0.04);
}
html[data-scheme="dark"] body.layout-side .side-menu-actions__row:hover {
    background: rgba(255, 255, 255, 0.07);
}
html[data-scheme="dark"] body.layout-side .side-menu-actions__row:has(> .search-input),
html[data-scheme="dark"] body.layout-side .side-menu-actions__row:has(> .store-search-form) {
    background: transparent;
}
html[data-scheme="dark"] body.layout-side .main-menu-content .title-category {
    color: rgba(255, 255, 255, 0.42) !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .custom-list-group-item {
    color: #e8ecf4 !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .custom-list-group-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--primary-color, #fff) !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .custom-list-group-item.active {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--primary-color, #fff) !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .sub-nav-list::before {
    background: rgba(255, 255, 255, 0.10);
}
html[data-scheme="dark"] body.layout-side .main-menu .sub-cat-link {
    color: rgba(255, 255, 255, 0.62) !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .sub-cat-link:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--primary-color, #fff) !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .sub-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.07);
}
html[data-scheme="dark"] body.layout-side .main-menu .nav-item--divider {
    border-top-color: rgba(255, 255, 255, 0.08);
}
html[data-scheme="dark"] body.layout-side .main-menu .side-menu-extra__icon {
    background: rgba(255, 255, 255, 0.06);
    color: #e8ecf4;
}
html[data-scheme="dark"] body.layout-side .main-menu .side-menu-extra__link:hover .side-menu-extra__icon {
    background: var(--primary-color, #fff);
    color: #0e1015;
}