/* ☰ Phone menu: the header's section buttons move into a panel that slides in from the left (all site headers) */
.mm-btn { display: none; flex-shrink: 0; width: 42px; height: 42px; border: 0; border-radius: 12px; cursor: pointer; padding: 0;
    background: rgba(0,0,0,.22); color: #fff; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.mm-btn span, .mm-btn span::before, .mm-btn span::after { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #fff; position: relative; transition: transform .25s, opacity .2s; }
.mm-btn span::before, .mm-btn span::after { content: ""; position: absolute; left: 0; }
.mm-btn span::before { top: -6.5px; } .mm-btn span::after { top: 6.5px; }
.mm-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(2,6,23,.6); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mm-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 9999; width: min(300px, 84vw); display: flex; flex-direction: column;
    background: linear-gradient(180deg, #13233a 0%, #0a1628 100%); color: #fff; box-shadow: 10px 0 40px rgba(0,0,0,.5);
    transform: translateX(-105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); direction: rtl; font-family: 'Cairo', sans-serif; overflow-y: auto; overscroll-behavior: contain; }
.mm-open .mm-overlay { opacity: 1; visibility: visible; }
.mm-open .mm-drawer { transform: translateX(0); }
.mm-open { overflow: hidden; }
.mm-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; padding-top: max(16px, env(safe-area-inset-top)); background: linear-gradient(135deg, #f97316, #ea580c); }
.mm-head img { width: 40px; height: 40px; border-radius: 10px; background: #fff; object-fit: contain; }
.mm-head b { flex: 1; display: flex; flex-direction: column; line-height: 1.25; font-size: 18px; font-weight: 800; }
.mm-head b small { font-size: 12px; font-weight: 600; opacity: .9; }
.mm-close { width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(0,0,0,.2); color: #fff; font-size: 18px; cursor: pointer; }
.mm-links { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; }
.mm-links a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: #e2e8f0 !important; text-decoration: none !important;
    font-size: 16px; font-weight: 700; transition: background .2s; }
.mm-links a i { font-style: normal; font-size: 20px; width: 28px; text-align: center; }
.mm-links a:hover, .mm-links a:active { background: rgba(255,255,255,.07); }
.mm-links a.on { background: rgba(249,115,22,.18); color: #fff !important; box-shadow: inset -4px 0 0 #f97316; }
.mm-sep { height: 1px; background: rgba(255,255,255,.08); margin: 6px 14px; }
.mm-foot { margin-top: auto; padding: 14px 18px; padding-bottom: max(14px, env(safe-area-inset-bottom)); font-size: 12px; color: #64748b; text-align: center; }

@media (max-width: 768px) {
    .mm-btn { display: inline-flex; order: 2; } /* first row with the logo and the account, before the search row */
    .header .nav-menu, .sh-menu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .mm-drawer, .mm-overlay { transition: none; } }