/* ============================================================
   ELIPI CHAPAN — Enhanced Mobile & Tablet Responsive Styles
   ============================================================
   This file is OPTIONAL. To DISABLE/RESTORE the previous look,
   simply comment out (or remove) this single line in each template:
       <link rel="stylesheet" href="/static/css/responsive.css">
   No other files need to change. The site will fall back to the
   base responsive rules in theme.css.
   ============================================================ */

/* ===== TABLET (768px–1023px) ===== */
@media (max-width: 1023px) {
    /* Containers breathe better */
    .wrap, .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    /* Hero text scales nicely */
    .hero-title { font-size: 2.5rem !important; line-height: 1.2 !important; }
    .hero-sub   { font-size: 1rem !important; }

    /* Cards: slightly smaller padding to fit tablet width */
    .panel, .glass-strong, .custom-chat-card, .custom-order-card {
        padding: 1.25rem 1.35rem !important;
    }

    /* Header nav hides desktop links — single-row mobile header */
    .site-nav { height: 4.5rem !important; }

    /* Tables scroll horizontally on tablet/mobile */
    main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    main table thead, main table tbody { width: max-content; }

    /* Two-column profile grid → single column on tablet */
    .profile-grid.cols-2 { grid-template-columns: 1fr !important; }
}

/* ===== MOBILE (≤768px) ===== */
@media (max-width: 768px) {
    html { font-size: 15px; }
    body { -webkit-text-size-adjust: 100%; }

    /* Compact container padding */
    .wrap, main { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* Headings */
    h1 { font-size: 1.65rem !important; line-height: 1.25 !important; }
    h2 { font-size: 1.3rem  !important; line-height: 1.3 !important; }
    h3 { font-size: 1.1rem  !important; }

    /* Hero adjustments */
    .hero { padding: 1.25rem 1.5rem 2rem !important; margin-top: 0 !important; border-radius: 1.5rem !important; }
    .hero-title { font-size: 1.85rem !important; }
    .hero-sub   { font-size: 0.92rem !important; line-height: 1.7 !important; margin-bottom: 1.25rem !important; }
    .hero-actions { gap: 0.5rem !important; }
    .hero-actions .btn-primary, .hero-actions .btn-ghost {
        flex: 1 1 100%;
        justify-content: center;
        padding: 0.75rem 1rem !important;
        font-size: 0.88rem !important;
    }
    .printer-card { width: 11rem !important; height: 11rem !important; }
    .printer-card svg { width: 4rem !important; height: 4rem !important; }

    /* Trust stats stay 3-column but tighter */
    .stats { gap: 0.4rem !important; }
    .stat  { padding: 0.7rem 0.4rem !important; }
    .stat-num { font-size: 1.15rem !important; }
    .stat-lbl { font-size: 0.62rem !important; }

    /* Feature cards: single column */
    .features { grid-template-columns: 1fr !important; gap: 0.85rem !important; }
    .feature { padding: 1.35rem !important; }
    .feature h3 { font-size: 1.15rem !important; }
    .feature p  { font-size: 0.85rem !important; }

    /* Why section */
    .why { padding: 1.5rem 1.25rem !important; border-radius: 1.25rem !important; }
    .why-head h2 { font-size: 1.35rem !important; }
    .why-grid { grid-template-columns: 1fr !important; }

    /* Footer */
    .site-footer { padding: 2rem 0 1.5rem !important; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .footer-bottom { flex-direction: column; text-align: center; }

    /* Header height + brand size (single-row mobile) */
    .site-nav { height: 4.5rem !important; }
    .brand    { font-size: 1.25rem !important; }
    .nav-cta  { padding: 0.45rem 0.65rem !important; font-size: 0.72rem !important; border-radius: 0.5rem !important; }

    /* Form fields touch-friendly height */
    input, textarea, select, .field {
        padding: 0.7rem 0.85rem !important;
        font-size: 0.95rem !important;
    }
    .btn-primary, .btn-ghost, .cta-btn, .cta-btn-ghost {
        padding: 0.8rem 1.1rem !important;
        font-size: 0.92rem !important;
    }

    /* Auth cards (login/signup) */
    .auth-card { padding: 1.5rem 1.25rem !important; border-radius: 1.25rem !important; }
    .auth-head .badge { width: 3.25rem !important; height: 3.25rem !important; }
    .auth-head h1 { font-size: 1.3rem !important; }
    .field-row { grid-template-columns: 1fr !important; }

    /* Dashboard tabs */
    .tabs { padding: 0.3rem !important; }
    .tab  { padding: 0.55rem 0.8rem !important; font-size: 0.8rem !important; }
    .panel { padding: 1.1rem !important; }
    .page-head .avatar { width: 2.75rem !important; height: 2.75rem !important; font-size: 1.1rem !important; }
    .page-head h1 { font-size: 1.2rem !important; }

    /* Order cards (dashboard) */
    .order-card { grid-template-columns: 1fr !important; gap: 0.6rem !important; padding: 0.95rem !important; }
    .order-card-head { flex-direction: row !important; }
    .order-meta-row { font-size: 0.78rem !important; }
    .progress-track { margin-top: 2.5rem !important; margin-bottom: 2rem !important; }
    .tank-label, .active-label { font-size: 7px !important; padding: 0.18rem 0.4rem !important; }
    .active-label { font-size: 8px !important; }

    /* Custom order page */
    .custom-order-card { padding: 1rem 1.1rem !important; gap: 0.7rem !important; }
    .coc-actions { flex-direction: column; align-items: stretch !important; gap: 0.5rem !important; }
    .coc-actions .coc-badge, .coc-actions .coc-price-note { align-self: flex-start; }
    .coc-btn { margin-inline-start: 0 !important; width: 100%; justify-content: center; padding: 0.6rem 0.9rem !important; }
    .custom-chat-card { padding: 1.1rem 1rem !important; border-radius: 1.25rem !important; }
    .ccc-box { height: 14rem !important; padding: 0.7rem !important; }
    .ccc-bubble { font-size: 0.82rem !important; max-width: 92% !important; }
    .ccc-input  { font-size: 0.92rem !important; }
    .ccc-send   { width: 2.6rem !important; height: 2.6rem !important; }
    .ccc-head { gap: 0.6rem !important; padding-bottom: 0.7rem !important; }
    .ccc-title { font-size: 0.95rem !important; }
    .ccc-online { font-size: 0.7rem !important; padding: 0.25rem 0.55rem !important; }

    /* Support page (admin chat) */
    main.flex.gap-4 {
        flex-direction: column !important;
        height: auto !important;
        gap: 0.75rem !important;
        overflow: visible !important;
    }
    main.flex.gap-4 > div { width: 100% !important; max-height: none !important; }
    #customer-list { max-height: 14rem !important; }
    .oip-head { flex-direction: column !important; gap: 0.6rem !important; }
    .oip-price-form { flex-direction: column; align-items: stretch !important; }
    .oip-price-input-wrap { width: 100%; }
    .oip-price-input { flex: 1; width: 100% !important; }
    .oip-price-btn { width: 100%; }

    /* Schools grid */
    #school-grid, #admin-schools-grid-list {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }
    .school-card { padding: 1.25rem !important; }

    /* Payment card layout */
    .pay-card { padding: 1.1rem !important; }

    /* Admin sidebar collapses */
    aside.bg-slate-900 {
        position: fixed !important;
        top: 0; right: 0; bottom: 0;
        width: 80vw !important; max-width: 18rem !important;
        z-index: 60;
        transform: translateX(100%);
        transition: transform .3s ease;
        padding: 1.25rem 1rem !important;
    }
    aside.bg-slate-900.open { transform: translateX(0); box-shadow: -10px 0 30px rgba(0,0,0,.3); }
    /* Hamburger that opens the admin sidebar */
    #admin-mobile-menu-btn {
        position: fixed; top: 0.75rem; right: 0.75rem; z-index: 70;
        width: 2.75rem; height: 2.75rem;
        border-radius: 0.75rem;
        background: var(--glass-bg);
        backdrop-filter: blur(16px);
        border: 1.5px solid var(--brand-500);
        color: var(--brand-600);
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(220,38,38,.2);
        display: flex; align-items: center; justify-content: center;
        flex-direction: column; gap: 4px;
        padding: 0;
    }
    .dark #admin-mobile-menu-btn { border-color: var(--brand-400); color: var(--brand-300); }
    #admin-mobile-menu-btn span {
        display: block; width: 22px; height: 2.5px;
        background: currentColor; border-radius: 2px;
    }
    main.flex-1 { padding: 1rem !important; padding-top: 4rem !important; }
    /* Hide sidebar by default on mobile */
    aside.bg-slate-900.md\\:flex { display: none !important; }
    aside.bg-slate-900.md\\:flex.open { display: flex !important; }

    /* Floating theme toggle: slightly smaller */
    .theme-toggle { width: 2.5rem !important; height: 2.5rem !important; bottom: 0.85rem !important; }

    /* Toast on mobile: full-ish width */
    .elipi-toast { inset-inline: 0.75rem !important; max-width: none !important; }

    /* Tables become block (already handled in tablet, reinforced for mobile) */
    table th, table td { padding: 0.55rem 0.7rem !important; font-size: 0.78rem !important; }

    /* School products grid */
    .school-products-grid, .grid-cols-3, .grid-cols-2 {
        /* don't break designed grids, but make 3-col into 1 */
    }
}

/* ===== TINY PHONE (≤380px) ===== */
@media (max-width: 380px) {
    html { font-size: 14px; }
    .brand { font-size: 1.1rem !important; }
    .hero-title { font-size: 1.55rem !important; }
    .feature h3 { font-size: 1.05rem !important; }
    .stat-num { font-size: 1.05rem !important; }
    .nav-cta  { padding: 0.4rem 0.55rem !important; font-size: 0.7rem !important; }
    .mobile-toggle { width: 2.4rem !important; height: 2.4rem !important; }
}

/* ===== ENSURE NO HORIZONTAL OVERFLOW ===== */
@media (max-width: 1023px) {
    html, body { overflow-x: hidden; }
    body * { max-width: 100vw; }
    img, svg, video { max-width: 100%; height: auto; }
    pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* ===== LANDSCAPE PHONES ===== */
@media (max-width: 900px) and (orientation: landscape) {
    .site-nav { height: 4.2rem !important; }
}

/* ===== TOUCH TARGETS (a11y) ===== */
@media (hover: none) and (pointer: coarse) {
    button, .btn-primary, .btn-ghost, a.btn-primary, a.btn-ghost {
        min-height: 44px;
    }
    .nav-link { padding-block: 0.6rem !important; }
}

/* ============================================================
   GLOBAL WIDTH WIDENING (added 2026-06-18)
   ------------------------------------------------------------
   Goal: make the site feel wider on desktop without touching
   any per-page markup. Done in ONE place so it's easy to revert.

   Strategy:
     · Bump every page container's max-width by ~12% (desktop only)
     · Trim the side-padding from 1.5rem → 1rem on desktop
     · Bump the gallery's .ik-container max-width to match
     · Login/signup popups (max-w-md/sm/xs) stay narrow — intentional
     · Admin pages use their own sidebar layout — unaffected
     · Mobile/tablet rules above already cap padding → still respected
   ============================================================ */
@media (min-width: 1024px) {
    /* User-facing containers — reduced 15% from previous values */
    .wrap {
        max-width: 73rem !important;        /* was 86rem (-15%) */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .max-w-7xl { max-width: 76.5rem !important; }  /* was 90rem (-15%) */
    .max-w-6xl { max-width: 70rem !important; }    /* was 82rem (-14.6%) */
    .max-w-5xl { max-width: 61rem !important; }    /* was 72rem (-15.3%) */
    .max-w-4xl { max-width: 54rem !important; }    /* was 64rem (-15.6%) */
    .max-w-3xl { max-width: 46rem !important; }    /* was 54rem (-14.8%) */

    /* Side padding on main wrappers — was px-6 (1.5rem), now 1rem */
    main.max-w-7xl, main.max-w-6xl, main.max-w-5xl,
    main.max-w-4xl, main.max-w-3xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Gallery on homepage — match the narrower container */
    .ik-container { max-width: 1275px !important; }   /* was 1500px (-15%) */
}

/* On very large screens give it even a bit more room */
@media (min-width: 1536px) {
    .wrap, .max-w-7xl { max-width: 80rem !important; }   /* was 94rem (-15%) */
    .max-w-6xl        { max-width: 73rem !important; }   /* was 86rem (-15%) */
    .ik-container     { max-width: 1377px !important; }  /* was 1620px (-15%) */
}


/* ============================================================
   HEADER WIDENING — proportional to the global container bump
   ------------------------------------------------------------
   theme.css sets .site-nav .nav-inner { max-width: 80rem; padding: 0 1.25rem; }
   Now that .wrap/.max-w-* have all grown ~12–14%, the header
   needs to follow, otherwise the logo + nav links look squished
   off-center on wide screens.
   ============================================================ */
@media (min-width: 1024px) {
    .site-nav .nav-inner {
        max-width: 76.5rem !important;     /* was 90rem (-15%) — matches .max-w-7xl */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
@media (min-width: 1536px) {
    .site-nav .nav-inner { max-width: 80rem !important; }   /* matches .wrap on ultra-wide */
}


/* ============================================================
   HEADER 2× HEIGHT COMPENSATION (added with header bump)
   Pages now need more top padding so content doesn't hide
   behind the taller fixed header.
   ============================================================ */
/* Single source of header clearance — header height + ~0.6rem breathing room.
   Header heights: 9rem desktop / 7.5rem (≤1023) / 8rem (≤768) / 7rem (≤480).
   .hero-row margin-top is intentionally 0 (was double-counting). */
main.pt-32 {
    padding-top: 10.2rem !important;  /* 8.2rem desktop header + 2rem */
}
main.wrap {
    padding-top: 10.2rem !important;  /* 8.2rem desktop header + 2rem */
}
@media (max-width: 1023px) {
    main.pt-32 { padding-top: 5rem !important; }      /* 4.5rem header + 0.5rem */
    main.wrap  { padding-top: 5rem !important; }
}
@media (max-width: 768px) {
    main.pt-32 { padding-top: 5rem !important; }      /* 4.5rem mobile header + 0.5rem */
    main.wrap  { padding-top: 5rem !important; }
}
@media (max-width: 480px) {
    main.pt-32 { padding-top: 4.7rem !important; }    /* 4.2rem header + 0.5rem */
    main.wrap  { padding-top: 4.7rem !important; }
}


/* ============================================================
   MOBILE HEADER — header restructure (only ≤1023px)
   ============================================================ */
@media (max-width: 1023px) {
    /* Hide the login/logout button + greeting from the header (moved into the drawer) */
    .site-nav .nav-top-end .nav-cta,
    .site-nav .nav-top-end .nav-greeting { display: none !important; }
    .site-nav .nav-top-end { gap: 0 !important; }

    /* Hide tagline + bottom-row tabs so header is a clean single row */
    .site-nav .nav-top    { display: none !important; }
    .site-nav .nav-bottom { display: none !important; }

    .site-nav .nav-inner { padding-left: 0.85rem !important; padding-right: 0.85rem !important; }

    /* Logo → LEFT (RTL inline-end). Hamburger → RIGHT (RTL inline-start). */
    .site-nav .nav-inner > .nav-top-start {
        inset-inline-start: auto !important;
        inset-inline-end: 0.85rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .site-nav .nav-inner > .nav-top-end {
        inset-inline-end: auto !important;
        inset-inline-start: 0.85rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Mobile-only logo size */
    .site-nav .brand .brand-logo { height: 2.6rem !important; }
}

@media (max-width: 480px) {
    .site-nav .brand .brand-logo { height: 2.3rem !important; }
}


/* ============================================================
   MOBILE DRAWER — glassmorphism sidebar (ALL viewports)
   - Hidden by default (off-canvas, visibility:hidden)
   - Slides in from the right when .open is added
   - Sits on top layer (z-index 60), doesn't shift any page layout
   ============================================================ */
.mobile-menu {
    position: fixed;
    top: 0; bottom: 0;
    right: 0;                       /* physical right — works in RTL & LTR */
    left: auto;
    width: min(78vw, 20rem);
    height: 100vh; height: 100dvh;
    z-index: 60;
    padding: 1.5rem 1rem 1.5rem;
    /* Glassmorphism */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 0;
    box-shadow: -16px 0 40px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow-y: auto;
    /* Off-canvas + non-interactive by default */
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    transition: transform .32s cubic-bezier(.32,.72,0,1),
                opacity .25s ease;
}
.dark .mobile-menu {
    background: rgba(15, 23, 42, 0.55);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 0;
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.5);
}
.mobile-menu.open {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: auto;
}

/* Top separator line inside the drawer */
.mobile-menu::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--glass-border, rgba(15,23,42,.1));
    margin: 2.75rem -1rem 1rem;   /* extra top space so the close-button doesn't overlap */
    flex-shrink: 0;
}

/* Close button pinned to the top-LEFT of the drawer (RTL: the left side is
   AWAY from the screen-edge notch/hamburger, so it never conflicts with the
   nav-toggle or the drawer's right border) */
.mobile-menu .mm-close {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;                /* physical LEFT inside the right-hand drawer */
    right: auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--glass-border, rgba(15,23,42,.1));
    border-radius: 0.6rem;
    color: var(--t-text, #0f172a);
    cursor: pointer;
    transition: all .18s ease;
    z-index: 2;
}
.mobile-menu .mm-close:hover {
    background: var(--brand-500, #ef4444);
    border-color: var(--brand-500, #ef4444);
    color: #fff;
    transform: rotate(90deg);
}
.mobile-menu .mm-close:active { transform: rotate(90deg) scale(0.94); }
.dark .mobile-menu .mm-close {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: #f1f5f9;
}
.dark .mobile-menu .mm-close:hover {
    background: var(--brand-400, #a78bfa);
    border-color: var(--brand-400, #a78bfa);
    color: #fff;
}
.mobile-menu .mm-close svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* Drawer link styling */
.mobile-menu .nav-link {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 0.9rem;
    font-size: 1rem;
    font-weight: 800;
    border-radius: 0.7rem;
    color: var(--t-text, #0f172a);
    text-decoration: none;
    transition: background .18s, color .18s;
}
.dark .mobile-menu .nav-link { color: #f1f5f9; }
.mobile-menu .nav-link::after { display: none !important; }   /* hide desktop underline indicator */
.mobile-menu .nav-link:hover {
    background: rgba(220,38,38,.08);
    color: var(--brand-600, #dc2626);
}
.dark .mobile-menu .nav-link:hover {
    background: rgba(168,85,247,.14);
    color: var(--brand-300, #c4b5fd);
}
.mobile-menu .nav-link.active {
    background: linear-gradient(135deg, var(--brand-600, #dc2626), var(--accent-3, #f43f5e));
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(220,38,38,.30);
}

/* Bottom section of the drawer (auth + greeting) — anchored to the bottom */
.mobile-menu .mm-bottom {
    margin-top: auto;             /* pushes itself to the bottom of the flex column */
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border, rgba(15,23,42,.1));
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mobile-menu .mm-auth {
    display: block;
    padding: 0.65rem 0.9rem;     /* smaller */
    text-align: center;
    font-weight: 800;
    font-size: 0.85rem;          /* smaller */
    border-radius: 0.65rem;
    color: #fff !important;
    background: linear-gradient(135deg, var(--brand-600, #dc2626), var(--accent-3, #f43f5e));
    box-shadow: 0 4px 14px rgba(220,38,38,.28);
    text-decoration: none;
    transition: filter .18s, transform .15s;
}
.mobile-menu .mm-auth:hover { filter: brightness(1.05); }
.mobile-menu .mm-auth:active { transform: scale(0.97); }
.mobile-menu .mm-greeting {
    display: block;
    padding: 0;
    font-size: 0.75rem; font-weight: 700;
    color: var(--t-muted, #64748b);
    text-align: center;
}

/* Backdrop overlay (translucent dim + slight blur) */
.mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;          /* no darkening — drawer is on top, page stays visible */
    z-index: 55;
    pointer-events: none;             /* invisible click-catcher when closed */
    transition: none;
}
.mobile-menu-backdrop.open {
    pointer-events: auto;             /* catches outside clicks to close drawer */
}

/* NOTE: no body scroll-lock — locking causes a layout shift when the
   scrollbar disappears. The drawer is on top anyway. */

@media (max-width: 480px) {
    .mobile-menu { width: 86vw; max-width: 19rem; }
}


/* ============================================================
   DRAWER SUB-MENU — "پنل کاربری" collapsible group
   (works on every page that has the mobile drawer)
   ============================================================ */
.mobile-menu .mm-group { display: flex; flex-direction: column; gap: 0.15rem; }
.mobile-menu .mm-group-toggle {
    display: flex !important; align-items: center; justify-content: space-between;
    width: 100%; cursor: pointer; background: transparent; border: 0;
    font: inherit; text-align: inherit;
}
.mobile-menu .mm-group-toggle .mm-chev {
    transition: transform .25s ease;
    color: var(--t-muted, #94a3b8);
    flex-shrink: 0;
}
.mobile-menu .mm-group-toggle[aria-expanded="false"] .mm-chev {
    transform: rotate(-90deg);
}
.mobile-menu .mm-submenu {
    display: flex; flex-direction: column; gap: 0.1rem;
    padding-inline-start: 0.5rem;
    margin-inline-end: 0.55rem;
    border-inline-end: 2px solid var(--glass-border, rgba(15,23,42,.1));
    overflow: hidden;
    max-height: 20rem;
    transition: max-height .28s ease, opacity .2s ease;
}
.mobile-menu .mm-group-toggle[aria-expanded="false"] + .mm-submenu {
    max-height: 0; opacity: 0;
}
.mobile-menu .mm-sublink {
    display: block;
    padding: 0.55rem 0.85rem;
    font-size: 0.88rem; font-weight: 700;
    color: var(--t-text, #0f172a);
    text-decoration: none;
    border-radius: 0.55rem;
    transition: background .18s, color .18s;
}
.dark .mobile-menu .mm-sublink { color: #f1f5f9; }
.mobile-menu .mm-sublink:hover {
    background: rgba(220,38,38,.07);
    color: var(--brand-600, #dc2626);
}
.dark .mobile-menu .mm-sublink:hover {
    background: rgba(168,85,247,.12);
    color: var(--brand-300, #c4b5fd);
}
.mobile-menu .mm-sublink.active {
    background: linear-gradient(135deg, var(--brand-600, #dc2626), var(--accent-3, #f43f5e));
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(220,38,38,.25);
}