/*
 * Makhluot Mobile Menu v1.1 — Centered Premium Modal
 *
 * MAJOR CHANGES from v1.0:
 *   - Drawer is now a CENTERED MODAL (not side drawer)
 *   - Solid opaque background (no theme transparency leaks)
 *   - Strong backdrop blur on overlay (clear separation)
 *   - Smooth scale-in animation
 *   - Override theme's translateX(-100%) positioning
 */

/* =========================================================
   1. OVERRIDE THEME DRAWER → CENTERED MODAL (no jank)
   ========================================================= */
/* The trick: instead of transform-centering (which causes jelly-scroll
   on iOS Safari), we use a position: fixed inset:0 wrapper with flex
   centering. The modal itself doesn't transform during scroll. */

#mobile-menu.mmm-skin {
    /* Reset theme's left-side drawer */
    position: fixed !important;
    /* Wrap-and-center via inset+margin (no transform) */
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 92vw !important;
    max-width: 420px !important;
    /* Use dvh to avoid iOS URL bar resize jank */
    max-height: min(88dvh, 800px) !important;
    height: auto !important;
    margin: auto !important;
    border-radius: 20px !important;
    /* SOLID opaque background */
    background: #0b1220 !important;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(255, 255, 255, .08) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 0 !important;
    /* Animate ONLY opacity (not transform during scroll) */
    opacity: 0;
    visibility: hidden;
    /* No transition on transform — that was causing jelly-scroll */
    transition: opacity .25s ease, visibility 0s linear .25s !important;
    z-index: 10001 !important;
    /* Performance: isolate paint so scroll doesn't re-render the world */
    contain: layout paint style !important;
    /* GPU accelerate without subpixel issues */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

/* Open state — just opacity */
#mobile-menu.mmm-skin.active {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity .25s ease !important;
}

/* Light theme: solid white background */
[data-theme="light"] #mobile-menu.mmm-skin,
body.light #mobile-menu.mmm-skin {
    background: #ffffff !important;
    box-shadow:
        0 30px 80px rgba(15, 23, 42, .25),
        0 0 0 1px rgba(15, 23, 42, .06) !important;
}

/* Hide original theme content inside the drawer when our skin is mounted */
.mmm-drawer-mounted #mobile-menu .mobile-menu-header,
.mmm-drawer-mounted #mobile-menu > .mobile-nav,
.mmm-drawer-mounted #mobile-menu > .mobile-menu-footer {
    display: none !important;
}

/* =========================================================
   2. OVERLAY — solid dark backdrop (no blur during scroll)
   ========================================================= */
/* IMPORTANT: backdrop-filter on the overlay gets re-rasterized on every
   scroll frame inside the modal — that's what causes the jelly/shake.
   We use a darker solid backdrop instead. Blur only kicks in when the
   user is NOT scrolling (via the `mmm-idle` class added by JS). */
.mobile-overlay {
    background: rgba(0, 0, 0, .82) !important;
    transition: opacity .3s ease, visibility 0s linear .3s !important;
    z-index: 10000 !important;
    /* Performance: isolate paint */
    contain: strict !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}
.mobile-overlay.active {
    transition: opacity .3s ease !important;
}

/* Apply blur only when NOT scrolling (toggled by JS) */
html.mmm-idle .mobile-overlay {
    backdrop-filter: blur(14px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    background: rgba(0, 0, 0, .68) !important;
}

/* Light overlay variant */
[data-theme="light"] .mobile-overlay,
body.light .mobile-overlay {
    background: rgba(15, 23, 42, .72) !important;
}
[data-theme="light"] html.mmm-idle .mobile-overlay,
body.light.mmm-idle .mobile-overlay {
    background: rgba(15, 23, 42, .55) !important;
}

/* =========================================================
   3. PREVENT BODY SCROLL WHEN OPEN (JS-toggled, no :has)
   ========================================================= */
body.mmm-locked {
    overflow: hidden !important;
    /* Lock scroll position so iOS doesn't bounce body */
    position: fixed !important;
    inset-inline: 0 !important;
    width: 100% !important;
}

/* =========================================================
   4. TOKENS (with SOLID base bg)
   ========================================================= */
.mmm-drawer {
    --mmm-bg-solid:   #0b1220;
    --mmm-bg-soft:    #111827;
    --mmm-bg-strong:  rgba(255,255,255,.06);
    --mmm-bg-hover:   rgba(255,255,255,.08);
    --mmm-border:     rgba(255,255,255,.12);
    --mmm-border-2:   rgba(255,255,255,.06);
    --mmm-text:       #f1f5f9;
    --mmm-text-soft:  #94a3b8;
    --mmm-text-mute:  #64748b;
    --mmm-accent:     #a855f7;
    --mmm-accent-2:   #ec4899;
    --mmm-success:    #10b981;
    --mmm-radius:     14px;
    --mmm-radius-sm:  10px;
    direction: rtl;
    color: var(--mmm-text);
    font-family: inherit;
    line-height: 1.5;
}
[data-theme="light"] .mmm-drawer,
body.light .mmm-drawer {
    --mmm-bg-solid:   #ffffff;
    --mmm-bg-soft:    #f8fafc;
    --mmm-bg-strong:  rgba(15,23,42,.04);
    --mmm-bg-hover:   rgba(15,23,42,.06);
    --mmm-border:     rgba(15,23,42,.10);
    --mmm-border-2:   rgba(15,23,42,.05);
    --mmm-text:       #0f172a;
    --mmm-text-soft:  #475569;
    --mmm-text-mute:  #64748b;
}

/* =========================================================
   5. HEADER + CLOSE
   ========================================================= */
.mmm-handle {
    position: relative;
    padding: 16px 18px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--mmm-border-2);
}
.mmm-handle-bar { display: none; } /* not needed for centered modal */
.mmm-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 900;
    color: var(--mmm-text);
    text-decoration: none;
}
.mmm-logo-mark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--mmm-accent), var(--mmm-accent-2));
    color: #fff;
    border-radius: 9px;
    box-shadow: 0 4px 12px rgba(168, 85, 247, .35);
}
.mmm-logo-text {
    background: linear-gradient(135deg, var(--mmm-accent), var(--mmm-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.mmm-close {
    width: 36px;
    height: 36px;
    background: var(--mmm-bg-strong);
    border: 0;
    border-radius: 50%;
    color: var(--mmm-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
}
.mmm-close:hover { background: var(--mmm-bg-hover); }
.mmm-close:active { transform: scale(.92); }

/* =========================================================
   6. GREETING + USER CARD
   ========================================================= */
.mmm-greeting {
    padding: 12px 16px 14px;
}
.mmm-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg,
        rgba(168, 85, 247, .15),
        rgba(236, 72, 153, .08));
    border: 1px solid rgba(168, 85, 247, .2);
    border-radius: var(--mmm-radius);
    text-decoration: none;
    color: inherit;
}
.mmm-user-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mmm-accent), var(--mmm-accent-2));
    padding: 2px;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(168, 85, 247, .3);
}
.mmm-user-avatar > * {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mmm-bg-solid);
    display: grid;
    place-items: center;
    color: var(--mmm-text);
    font-weight: 900;
    font-size: 18px;
}
.mmm-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mmm-user-info { flex: 1; min-width: 0; }
.mmm-user-greet {
    margin: 0 0 2px;
    font-size: 12px;
    color: var(--mmm-text-soft);
    font-weight: 600;
}
.mmm-user-name {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--mmm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Guest card variant */
.mmm-guest-card {
    padding: 18px 16px;
    background: linear-gradient(135deg,
        rgba(168, 85, 247, .18),
        rgba(236, 72, 153, .10));
    border: 1px solid rgba(168, 85, 247, .25);
    border-radius: var(--mmm-radius);
    text-align: center;
}
.mmm-guest-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    background: linear-gradient(135deg, var(--mmm-accent), var(--mmm-accent-2));
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 8px 22px rgba(168, 85, 247, .35);
}
.mmm-guest-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
}
.mmm-guest-sub {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--mmm-text-soft);
}
.mmm-guest-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* =========================================================
   7. SEARCH
   ========================================================= */
.mmm-search {
    margin: 0 16px 14px;
    position: relative;
}
.mmm-search-input {
    width: 100%;
    height: 42px;
    padding: 0 42px 0 14px;
    background: var(--mmm-bg-strong);
    border: 1px solid var(--mmm-border);
    border-radius: 999px;
    color: var(--mmm-text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mmm-search-input::placeholder { color: var(--mmm-text-mute); }
.mmm-search-input:focus {
    border-color: var(--mmm-accent);
    box-shadow: 0 0 0 4px rgba(168, 85, 247, .12);
}
.mmm-search-icon {
    position: absolute;
    top: 50%;
    inset-inline-end: 14px;
    transform: translateY(-50%);
    color: var(--mmm-text-mute);
    pointer-events: none;
}
.mmm-search-results {
    margin-top: 8px;
    background: var(--mmm-bg-soft);
    border: 1px solid var(--mmm-border-2);
    border-radius: var(--mmm-radius);
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease, opacity .2s ease;
    opacity: 0;
}
.mmm-search-results.is-visible {
    max-height: 280px;
    opacity: 1;
    overflow-y: auto;
}
.mmm-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    text-decoration: none;
    color: inherit;
    transition: background .15s ease;
}
.mmm-search-result + .mmm-search-result {
    border-top: 1px solid var(--mmm-border-2);
}
.mmm-search-result:hover { background: var(--mmm-bg-hover); }
.mmm-search-result-img {
    width: 40px; height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mmm-bg-strong);
    flex-shrink: 0;
}
.mmm-search-result-img img { width: 100%; height: 100%; object-fit: cover; }
.mmm-search-result-body { flex: 1; min-width: 0; }
.mmm-search-result-title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mmm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mmm-search-result-cat {
    display: block;
    font-size: 11px;
    color: var(--mmm-text-mute);
    margin-top: 2px;
}

/* =========================================================
   8. FEATURED CARD (top viewed)
   ========================================================= */
.mmm-section { padding: 0 16px; }
.mmm-section + .mmm-section { margin-top: 14px; }
.mmm-section-title {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--mmm-text-mute);
    letter-spacing: .04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mmm-section-title::before {
    content: '';
    width: 14px;
    height: 2px;
    background: linear-gradient(90deg, var(--mmm-accent), var(--mmm-accent-2));
    border-radius: 2px;
}

.mmm-featured {
    position: relative;
    display: block;
    border-radius: var(--mmm-radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    isolation: isolate;
    background: var(--mmm-bg-soft);
}
.mmm-featured img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.mmm-featured::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 30%,
        rgba(0, 0, 0, .68) 75%,
        rgba(0, 0, 0, .94) 100%);
    z-index: 1;
}
.mmm-featured-body {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    padding: 14px;
    z-index: 2;
}
.mmm-featured-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: rgba(239, 68, 68, .92);
    color: #fff;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    margin-bottom: 6px;
}
.mmm-featured-title {
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 900;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
}
.mmm-featured-meta {
    display: flex;
    gap: 8px;
    font-size: 11.5px;
    opacity: .9;
}

/* =========================================================
   9. CATEGORIES GRID (2x2)
   ========================================================= */
.mmm-cats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.mmm-cat-card {
    --c-from: var(--mmm-accent);
    --c-to:   var(--mmm-accent-2);
    position: relative;
    display: block;
    padding: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--c-from) 18%, var(--mmm-bg-soft)),
        color-mix(in srgb, var(--c-to) 10%, var(--mmm-bg-soft)));
    border: 1px solid color-mix(in srgb, var(--c-from) 30%, transparent);
    border-radius: var(--mmm-radius);
    text-decoration: none;
    color: var(--mmm-text);
    overflow: hidden;
    transition: transform .2s ease;
    isolation: isolate;
}
.mmm-cat-card:active { transform: scale(.97); }
.mmm-cat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--c-from), var(--c-to));
    opacity: 0;
    z-index: -1;
    transition: opacity .25s ease;
}
.mmm-cat-card:hover::before { opacity: .9; }
.mmm-cat-card:hover { color: #fff; }
.mmm-cat-emoji {
    display: block;
    font-size: 22px;
    margin-bottom: 8px;
    line-height: 1;
}
.mmm-cat-name {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    margin-bottom: 2px;
    color: var(--mmm-text);
}
.mmm-cat-card:hover .mmm-cat-name { color: #fff; }
.mmm-cat-count {
    font-size: 11px;
    color: var(--mmm-text-soft);
    font-weight: 600;
}
.mmm-cat-card:hover .mmm-cat-count { color: rgba(255, 255, 255, .9); }

/* =========================================================
   10. QUICK LINKS
   ========================================================= */
.mmm-links {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--mmm-bg-strong);
    border: 1px solid var(--mmm-border-2);
    border-radius: var(--mmm-radius);
    overflow: hidden;
}
.mmm-links li + li {
    border-top: 1px solid var(--mmm-border-2);
}
.mmm-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--mmm-text);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    transition: background .15s ease;
}
.mmm-link:active { background: var(--mmm-bg-hover); }
.mmm-link-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--mmm-bg-hover);
    color: var(--mmm-accent);
    border-radius: 8px;
    flex-shrink: 0;
    transition: all .15s ease;
}
.mmm-link:hover .mmm-link-icon {
    background: linear-gradient(135deg, var(--mmm-accent), var(--mmm-accent-2));
    color: #fff;
}
.mmm-link-label { flex: 1; }
.mmm-link-arrow {
    color: var(--mmm-text-mute);
    transition: transform .15s ease, color .15s ease;
}
.mmm-link:hover .mmm-link-arrow {
    transform: translateX(-3px);
    color: var(--mmm-accent);
}
.mmm-link-badge {
    margin-inline-start: auto;
    margin-inline-end: 8px;
    padding: 2px 8px;
    background: var(--mmm-accent);
    color: #fff;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
}

/* Logout style */
.mmm-link--logout { color: #ef4444; }
.mmm-link--logout .mmm-link-icon {
    background: rgba(239, 68, 68, .10);
    color: #ef4444;
}
.mmm-link--logout:hover .mmm-link-icon {
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
}

/* =========================================================
   11. THEME TOGGLE INLINE
   ========================================================= */
.mmm-theme {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--mmm-bg-strong);
    border: 1px solid var(--mmm-border-2);
    border-radius: var(--mmm-radius);
}
.mmm-theme-label {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--mmm-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mmm-theme-label-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--mmm-bg-hover);
    color: var(--mmm-accent);
    border-radius: 8px;
}
.mmm-theme-segments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--mmm-bg-hover);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
}
.mmm-seg {
    background: transparent;
    border: 0;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--mmm-text-soft);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}
.mmm-seg.is-active {
    background: var(--mmm-bg-solid);
    color: var(--mmm-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
[data-theme="light"] .mmm-seg.is-active {
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}

/* =========================================================
   12. SOCIAL FOOTER
   ========================================================= */
.mmm-social {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 16px;
}
.mmm-social a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--mmm-bg-strong);
    border: 1px solid var(--mmm-border-2);
    border-radius: 50%;
    color: var(--mmm-text-soft);
    transition: all .2s ease;
    text-decoration: none;
}
.mmm-social a:hover {
    background: linear-gradient(135deg, var(--mmm-accent), var(--mmm-accent-2));
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
}

/* =========================================================
   13. BUTTONS
   ========================================================= */
.mmm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid var(--mmm-border);
    cursor: pointer;
    font-family: inherit;
    transition: all .2s ease;
}
.mmm-btn--primary {
    background: linear-gradient(135deg, var(--mmm-accent), var(--mmm-accent-2));
    border-color: transparent;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(168, 85, 247, .3);
}
.mmm-btn--primary:active { transform: scale(.97); }
.mmm-btn--ghost {
    background: var(--mmm-bg-hover);
    color: var(--mmm-text) !important;
}
.mmm-btn--ghost:active { transform: scale(.97); }

/* =========================================================
   14. RESPONSIVE — narrower phones
   ========================================================= */
@media (max-width: 380px) {
    #mobile-menu.mmm-skin {
        width: 94vw !important;
    }
    .mmm-cats-grid { gap: 6px; }
    .mmm-cat-card { padding: 12px; }
}

/* Very tall phones — show more content */
@media (min-height: 800px) {
    #mobile-menu.mmm-skin {
        max-height: 90vh !important;
    }
}

/* =========================================================
   15. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    #mobile-menu.mmm-skin,
    .mobile-overlay,
    .mmm-cat-card, .mmm-cat-card::before,
    .mmm-link, .mmm-link-icon, .mmm-link-arrow,
    .mmm-search-input, .mmm-search-results,
    .mmm-seg, .mmm-social a, .mmm-btn, .mmm-close {
        transition: none !important;
    }
}

/* Ensure scroll inside the modal */
#mobile-menu.mmm-skin::-webkit-scrollbar {
    width: 6px;
}
#mobile-menu.mmm-skin::-webkit-scrollbar-thumb {
    background: var(--mmm-border);
    border-radius: 999px;
}