/* ============================================================
   mobilenav.css — פס ניווט אייקונים לטלפון, בכל עמודי האתר
   נוסף 29/09/2026 לפי בקשה מפורשת: "לגבי שאר העמודים - מדינות, סגנונות,
   ספיישלז, רקומנדד וכו' - תעשה לי אותם כמו בארטיסטס - רק במובייל כמובן!".

   הרקע: באותו יום עמוד Artists קיבל בטלפון פס אייקונים כתפריט היחיד —
   בלי שורת הכותרת, בלי ה-☰ ובלי שורת הקישורים העליונה ("תשאיר רק את זה
   עם האייקונים - תוריד את תפריט ההמבורגר ואת העליון", "חשבתי להוריד גם
   את הכותרת"), עם הלוגו במקום ה-☕, החיפוש בפס, הבהירות בפס, ובלי
   להקטין את האייקונים — "שישארו בגלילה כמו שעכשיו". כאן אותו פס, בדיוק
   באותו עיצוב, בעותק אחד לכל האתר (<nav class="mnav"> ב-_Layout.cshtml).

   ≤600px בלבד — אותו גבול שבו האתר כבר מחליף את הכותרת לגרסת הטלפון
   (שורת הקישורים הקבועה מתחת לכותרת, גלולת האחוזים, וכו'). מעל 600px
   הפס מוסתר ושום דבר לא משתנה.

   החלטה מרכזית — הפס קבוע (position:fixed) ב"רצועה" העליונה של 90px שבה
   ישבו עד היום הכותרת (60px) ושורת הקישורים (30px): top 8px, גובה 68px,
   כלומר 8–76px. המרווח של התוכן מלמעלה (main-content, 90px) לא משתנה, ולכן
   כל מה שממוקם מ-90px ומטה — פס ה-Now Playing, גלולת האחוזים, ה-Play All
   הצף, כפתור החזרה הצף בעמודי האוסף, תיבת החיפוש — נשאר בדיוק איפה שהיה,
   בלי לגעת באף אחד מהם. (בעמוד Artists הפס היה sticky בתוך התוכן; כאן
   fixed, כי בעמודי האוסף הרכיבים הצפים מכוילים מול הרצועה הזו.)
   ============================================================ */

.mnav{ display: none; }

@media (max-width: 600px){

    /* ---------- 1) הכותרת, ה-☰ ושורת הקישורים יורדים ----------
       הכותרת — visibility ולא display:none: תיבת החיפוש (#search-box,
       position:fixed) יושבת בתוכה, ו-display:none היה מעלים גם אותה. ילד
       יכול לבטל visibility:hidden של ההורה, אז התיבה נפתחת כרגיל (מה-🔍
       שבפס), וכל השאר — הרקע, הלוגו, ☀ ו-🔍 של הכותרת — לא מצויר ולא לחיץ.
       התיבה נפתחת 8px מתחת לפס (76 + 8). */
    .top-header{ visibility: hidden; }
    .top-header #search-box{
        visibility: visible;
        top: 84px;
    }
    .hamburger,
    #sideMenu,
    .header-quicklinks{ display: none !important; }

    /* ---------- 2) הפס ----------
       אותם מידות וצבעים בדיוק כמו פס האייקונים של עמוד Artists
       (Artists.css): אייקונים 46px בפינות 13px, רווח 6px, רקע #0a0a0c,
       מסגרת דקה ופינות 20px. הצידה — ברוחב התוכן (25px מכל צד). נגלל הצידה
       כשהאייקונים לא נכנסים (flex:0 0 — בלי להתכווץ); פס הגלילה עצמו מוסתר,
       כמו בכל פס נגלל בטלפון. בצד ימין אין ריפוד: את המקום בסוף תופס
       mnav-fade (סעיף 3). */
    .mnav{
        display: flex;
        align-items: center;
        gap: 6px;
        position: fixed;
        top: 8px;
        left: 25px;
        right: 25px;
        z-index: 1100;
        box-sizing: border-box;
        padding: 10px 0 10px 14px;
        background: #0a0a0c;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .mnav::-webkit-scrollbar{ display: none; }

    /* הלוגו העגול במקום ה-☕ — ומוביל לדף הבית, ולכן אין אייקון Home */
    .mnav-logo{
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        margin-right: 8px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid rgba(90,247,255,0.35);
        display: block;
    }
    .mnav-logo img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mnav-link{
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0;
        border: none;
        background: none;
        color: #9199a1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mnav-link svg{
        width: 19px;
        height: 19px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.6;
    }
    /* האייקון של העמוד הנוכחי (navActive ב-_Layout.cshtml) */
    .mnav-link.active{
        color: #5af7ff;
        background: rgba(90,247,255,0.14);
        box-shadow: 0 0 0 1px rgba(90,247,255,0.35), 0 0 14px rgba(0,255,255,0.18);
    }

    .mnav-theme .icon-moon{ display: none; }
    body[data-theme="light"] .mnav-theme .icon-sun{ display: none; }
    body[data-theme="light"] .mnav-theme .icon-moon{ display: block; }

    /* ---------- 3) הדהייה בקצה הימני ----------
       נוספה לפי בקשה מפורשת: "תוסיף את הדהייה העדינה בקצה הימני של הפס
       כדי שאראה איך זה נראה" — רמז שהפס ממשיך מעבר לקצה. אלמנט אחרון בתוך
       הפס עם position:sticky; right:0 — כל עוד יש עוד אייקונים מימין הוא
       "נדבק" לקצה הימני ומעמעם את מה שעובר מתחתיו; כשגוללים עד הסוף הוא
       חוזר למקומו הטבעי אחרי אייקון הבהירות ולא מסתיר אותו. margin-left
       שלילי מבטל את ה-gap שלפניו, ו-margin אנכי שלילי מותח אותו על כל
       גובה הפס. pointer-events:none — לחיצה עוברת לאייקון שמתחתיו.
       להסרה: למחוק את <span class="mnav-fade"> ב-_Layout.cshtml. */
    .mnav-fade{
        position: sticky;
        right: 0;
        flex: 0 0 28px;
        align-self: stretch;
        margin: -10px 0 -10px -6px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 4px;
        box-sizing: border-box;
        background: linear-gradient(to right, rgba(10,10,12,0), #0a0a0c 55%);
        pointer-events: none;
    }

    /* החץ בתוך הדהייה (30/09/2026): בהתחלה עיגול של 26px בסגנון החצים של
       הכתבות, אבל הוא כיסה את האייקון האחרון שנראה בפס ("החץ גדול מדי
       ומסתיר אחד האייקונים"). עכשיו רק סימן "›" דק, בלי עיגול ובלי מסגרת,
       בצבע של האייקונים, צמוד לקצה הימני בתוך הדהייה. לחיץ למרות שהדהייה
       עצמה לא (pointer-events). נעלם בסוף הגלילה (mnav-end, ר' bcMnavMore
       ב-_Layout.cshtml). */
    .mnav-more{
        pointer-events: auto;
        width: 14px;
        height: 46px;
        padding: 0 0 3px;
        border: 0;
        background: none;
        color: #9199a1;
        font-family: 'Karla','Segoe UI',sans-serif;
        font-weight: 400;
        font-size: 22px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: opacity .2s ease;
    }
    .mnav.mnav-end .mnav-more,
    .mnav.mnav-touched .mnav-more{
        opacity: 0;
        pointer-events: none;
    }

    /* מעבר בין התצוגות של דף הבית (30/09/2026): בטלפון הוא אייקון ⇄ בסוף
       הפס (.mnav-viewswitch, _Layout.cshtml), ולכן הכפתור שבתוך הדף מוסתר.
       ב-Classic נשאר בשורה הכיתוב "Bombay Café"; ב-Alt וב-New היה בשורה רק
       הכפתור, ולכן השורה כולה מוסתרת. body + שתי מחלקות — כדי לגבור על
       קובצי ה-CSS של התצוגות, שנטענים אחרי הקובץ הזה. */
    body .view-switch-row > .hub-switch-btn-classic,
    body .view-switch-row > .alt-switch-btn,
    body .view-switch-row > .hub-switch-btn{
        display: none;
    }
    body .view-switch-row:not(:has(.home-brand-title)){
        display: none;
    }

    /* ---------- תמה בהירה (כמו Artists.css) ---------- */
    body[data-theme="light"] .mnav{
        background: #ffffff;
        border-color: #e0e0e0;
    }
    body[data-theme="light"] .mnav-logo{ border-color: rgba(201,168,76,0.6); }
    body[data-theme="light"] .mnav-link{ color: #6b6b6b; }
    body[data-theme="light"] .mnav-link.active{
        color: #a07830;
        background: rgba(201,168,76,0.14);
        box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
    }
    body[data-theme="light"] .mnav-fade{
        background: linear-gradient(to right, rgba(255,255,255,0), #ffffff 55%);
    }
    body[data-theme="light"] .mnav-more{ color: #6b6b6b; }
}


/* 30/09/2026: אייקון עיגולים/ריבועים (.mnav-shape, _Layout.cshtml) — רק
   בדפי הרשימות. מציג את התצוגה שאליה עוברים, כמו ⇄ וה-☀: בעיגולים —
   ארבעה ריבועים, בריבועים — ארבעה עיגולים. */
.mnav-shape .shape-to-circle { display: none; }
html.bc-squares .mnav-shape .shape-to-square { display: none; }
html.bc-squares .mnav-shape .shape-to-circle { display: block; }


/* ============================================================
   01/10/2026: חלונית ההגדרות — "אני רוצה שיהיה כפתור הגדרות שיאפשר שינוי
   של הפרמטרים האלה". נפתחת מגלגל השיניים (.mnav-settings) שבקצה הימני של
   הפס, 8px מתחתיו (כמו תיבת החיפוש), צמודה לקצה הימני של התוכן. אותם
   צבעים כמו הפס. כל שורה — כפתורים צמודים; הנבחר מודגש כמו האייקון של
   העמוד הנוכחי בפס.
   ============================================================ */
.bc-settings{ display: none; }
@media (max-width: 600px){
    .bc-settings:not([hidden]){
        display: block;
        position: fixed;
        top: 84px;
        right: 25px;
        width: min(300px, calc(100vw - 50px));
        box-sizing: border-box;
        z-index: 2100; /* מעל גלולת האחוזים (1500) וה-Play All הצף (1400) */
        padding: 14px 16px 12px;
        background: #0a0a0c;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 18px;
        box-shadow: 0 18px 40px -12px rgba(0,0,0,0.75);
        color: #e5faff;
        font-family: 'Karla', 'Segoe UI', sans-serif;
    }
    .bcs-head{
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 10px;
    }
    .bcs-title{ font-family: 'Fraunces', 'Segoe UI', serif; font-weight: 600; font-size: 17px; }
    .bcs-close{
        width: 32px; height: 32px; border-radius: 10px;
        border: none; background: none; color: #9199a1; font-size: 15px; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .bcs-row{ margin-top: 12px; }
    .bcs-row[hidden]{ display: none; }
    .bcs-label{
        font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em;
        text-transform: uppercase; color: #9199a1; margin-bottom: 6px;
    }
    .bcs-seg{
        display: flex; gap: 4px; padding: 3px;
        background: #14141a; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
    }
    .bcs-seg > button,
    .bcs-seg > a{
        flex: 1 1 0; min-width: 0; height: 36px;
        display: flex; align-items: center; justify-content: center;
        border: none; border-radius: 9px; background: none;
        color: #9199a1; font: 500 14px 'Karla', 'Segoe UI', sans-serif;
        text-decoration: none; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .bcs-seg > .on{
        color: #5af7ff;
        background: rgba(90,247,255,0.14);
        box-shadow: 0 0 0 1px rgba(90,247,255,0.35);
    }
    .bcs-note{ margin-top: 12px; font-size: 11.5px; color: #6f777e; text-align: center; }

    /* הגדרה בפס = הגדרה בחלונית: כפתור 1/4 שליד הכותרות מוסתר בטלפון */
    body #compact-grid-toggle-btn{ display: none !important; }
    .mnav-settings[aria-expanded="true"]{ color: #5af7ff; }

    body[data-theme="light"] .bc-settings:not([hidden]){
        background: #ffffff; border-color: #e0e0e0; color: #222;
        box-shadow: 0 18px 40px -14px rgba(0,0,0,0.25);
    }
    body[data-theme="light"] .bcs-seg{ background: #f2f2f2; border-color: #e0e0e0; }
    body[data-theme="light"] .bcs-seg > button,
    body[data-theme="light"] .bcs-seg > a,
    body[data-theme="light"] .bcs-label,
    body[data-theme="light"] .bcs-close{ color: #6b6b6b; }
    body[data-theme="light"] .bcs-seg > .on{
        color: #a07830; background: rgba(201,168,76,0.14); box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
    }
    body[data-theme="light"] .bcs-note{ color: #8a8a8a; }
}