/* Auction Ticker — free-position floating toast notifications */

.mb-ticker {
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* The site's sticky header sits at z-index: 4000, so anything lower
       gets hidden behind it whenever the user drags the bell near the
       top of the viewport. We sit at 4500 — above the header and any
       other ordinary page chrome.
       Pushbar drawer and modals are handled by the display:none guards
       below (html.pushbar_locked and body.modal-open), so we don't need
       z-index to keep us out of their way. */
    z-index: 4500;
}

/* Defense-in-depth: when pushbar locks the html, hide the ticker entirely
   so its children can't intercept touch events even by accident. */
html.pushbar_locked .mb-ticker { display: none !important; }
/* Same for any visible Bootstrap modal in the DOM. */
body.modal-open .mb-ticker { display: none !important; }

/* Stack is positioned by JS via inline left/top/right/bottom */
.mb-toast-stack {
    position: absolute;
    width: 380px;
    max-width: calc(100vw - 40px);
    display: flex;
    gap: 12px;
    pointer-events: none;
}

/* JS sets these classes based on which half of the viewport the bell is in */
.mb-stack-up   .mb-toast-stack { flex-direction: column; }          /* newest at bottom — closest to bell */
.mb-stack-down .mb-toast-stack { flex-direction: column-reverse; }  /* newest at top — closest to bell */

/* Toast card */
.mb-toast {
    pointer-events: auto;
    position: relative;
    background: #fff;
    color: #1f2937;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.18),
        0 2px 6px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.35;
}

/* Slide-in direction depends on which side the bell is on */
.mb-from-left  .mb-toast { transform: translateX(-120%); }
.mb-from-right .mb-toast { transform: translateX( 120%); }
.mb-toast--in  { transform: translateX(0) !important; opacity: 1; }
.mb-from-left  .mb-toast--out { transform: translateX(-120%) !important; opacity: 0; }
.mb-from-right .mb-toast--out { transform: translateX( 120%) !important; opacity: 0; }

.mb-toast__link {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 10px 36px 10px 10px;
    color: inherit;
    text-decoration: none;
}
.mb-toast__link:hover { text-decoration: none; }

.mb-toast__media {
    position: relative;
    flex: 0 0 64px;
    height: 64px;
    width: 64px;
    border-radius: 10px;
    background: #f3f4f6;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.mb-toast__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-toast__icon {
    flex: 1;
    height: 100%;
    width: 100%;
    background: #eef2ff;
    color: #4338ca;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}
.mb-toast__badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #4338ca;
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    border: 2px solid #fff;
}

.mb-toast__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mb-toast__head {
    font-weight: 700;
    color: #111827;
    font-size: 13px;
    letter-spacing: 0.1px;
}
.mb-toast__title {
    color: #2563eb;
    font-size: 12.5px;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mb-toast__meta {
    color: #6b7280;
    font-size: 12px;
    margin-top: 2px;
}

.mb-toast__close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #9ca3af;
    font-size: 16px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
}
.mb-toast__close:hover { background: rgba(0,0,0,0.05); color: #111; }

.mb-toast__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: #c7d2fe;
}

/* Per-kind accents */
.mb-toast--bid       .mb-toast__badge { background: #1d4ed8; }
.mb-toast--bid       .mb-toast__progress { background: #93c5fd; }
.mb-toast--bid       .mb-toast__icon  { background: #dbeafe; color: #1d4ed8; }
.mb-toast--extended  .mb-toast__badge { background: #047857; }
.mb-toast--extended  .mb-toast__progress { background: #6ee7b7; }
.mb-toast--extended  .mb-toast__icon  { background: #d1fae5; color: #047857; }
.mb-toast--closing   .mb-toast__badge { background: #b91c1c; }
.mb-toast--closing   .mb-toast__progress { background: #fca5a5; }
.mb-toast--closing   .mb-toast__icon  { background: #fee2e2; color: #b91c1c; }
.mb-toast--ended     .mb-toast__badge { background: #4b5563; }
.mb-toast--ended     .mb-toast__progress { background: #d1d5db; }
.mb-toast--ended     .mb-toast__icon  { background: #f3f4f6; color: #4b5563; }
.mb-toast--started   .mb-toast__badge { background: #6d28d9; }
.mb-toast--started   .mb-toast__progress { background: #c4b5fd; }
.mb-toast--started   .mb-toast__icon  { background: #ede9fe; color: #6d28d9; }
.mb-toast--deals_near_me .mb-toast__badge    { background: #0d9488; }
.mb-toast--deals_near_me .mb-toast__progress { background: #5eead4; }
.mb-toast--deals_near_me .mb-toast__icon     { background: #ccfbf1; color: #0d9488; }

.mb-toast--critical {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.25), 0 2px 6px rgba(15, 23, 42, 0.08);
}
.mb-toast--critical.mb-toast--closing  { border-color: rgba(239, 68, 68, 0.5);  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.28), 0 2px 6px rgba(15, 23, 42, 0.08); }
.mb-toast--critical.mb-toast--extended { border-color: rgba(16, 185, 129, 0.5); box-shadow: 0 12px 32px rgba(16, 185, 129, 0.28), 0 2px 6px rgba(15, 23, 42, 0.08); }

/* Bell — draggable anywhere */
.mb-bell {
    pointer-events: auto;
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: #4338ca;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease, left 0.25s cubic-bezier(0.16,1,0.3,1), top 0.25s cubic-bezier(0.16,1,0.3,1);
    user-select: none;
    touch-action: none;
}
.mb-bell:hover { transform: scale(1.06); background: #f9fafb; }
.mb-bell--grabbing {
    cursor: grabbing;
    transition: none !important;
    transform: scale(1.1);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.28);
}
.mb-bell--off { color: #9ca3af; }
.mb-bell--off::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-top: 2px solid #ef4444;
    transform: rotate(-45deg);
    pointer-events: none;
}
.mb-ticker--dragging .mb-toast-stack { opacity: 0.4; transition: opacity 0.15s ease; }

/* Bell tooltip — positioned by JS next to the bell */
.mb-bell-tip {
    pointer-events: none;
    position: absolute;
    background: #111827;
    color: #f9fafb;
    padding: 8px 10px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
    max-width: 280px;
    z-index: 2;
}
.mb-bell-tip strong { display: block; font-weight: 700; margin-bottom: 2px; color: #fff; }
.mb-bell-tip--show { opacity: 1; transform: translateY(0); }

@media (max-width: 540px) {
    .mb-toast-stack { width: calc(100vw - 16px) !important; }

    /* On phones the bell-anchored positioning gets in its own way (panel
       overflows off the screen edge, lies under toasts, etc.). Instead
       we render the panel as a bottom-sheet style modal: full width,
       pinned to the bottom of the viewport with margin, fixed positioning
       independent of bell location. */
    .mb-settings {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 16px !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        border-radius: 18px;
        box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.08);
        transform-origin: bottom center;
    }
    /* Slide up from the bottom on mobile instead of the desktop "pop-in" */
    .mb-settings { transform: translateY(20px) scale(1); }
    .mb-settings.mb-settings--in { transform: translateY(0) scale(1); }

    /* Visual "drag handle" hint at the top of the sheet — Apple/Android
       convention for bottom sheets. Purely decorative. */
    .mb-settings::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(15, 23, 42, 0.18);
        pointer-events: none;
    }
    .mb-settings__head { padding-top: 22px; }      /* room for the handle above */
    .mb-settings__head,
    .mb-settings__master { flex: 0 0 auto; }
    .mb-settings__section {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 18px;                      /* safe-area-ish bottom inset */
    }

    /* Bigger touch targets on phones */
    .mb-switch {
        width: 48px;
        height: 28px;
    }
    .mb-switch__thumb {
        top: 3px;
        left: 3px;
        width: 22px;
        height: 22px;
    }
    .mb-switch input:checked ~ .mb-switch__thumb { transform: translateX(20px); }

    /* More breathing room per row + slightly larger icon swatches */
    .mb-pref { padding: 11px 0; gap: 12px; }
    .mb-pref__icon {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        font-size: 16px;
        border-radius: 9px;
    }
    .mb-pref__title { font-size: 14px; }
    .mb-pref__desc  { font-size: 12px; }

    /* Slightly bigger close button — easier thumb target */
    .mb-settings__close {
        width: 34px;
        height: 34px;
        font-size: 24px;
    }

    /* Master row a touch more spacious */
    .mb-settings__master { padding: 14px 16px; }
}

/* Dark mode handle on bottom sheet */
[data-theme="dark"] .mb-settings::before { background: rgba(255, 255, 255, 0.20); }

/* ============================================================
   Settings panel — opens on bell click.
   Positioned by JS next to the bell, slide+fade in from the
   bell's side (same direction as the toast stack).
   ============================================================ */
.mb-settings {
    /* When closed (no .mb-settings--in), pointer-events is none so the
       invisible panel can't intercept clicks on stuff behind it (which
       was blocking the "My Municibid" dropdown and other UI after the
       panel was opened and closed once). The --in state below switches
       it back to auto so user can interact with the panel when open. */
    pointer-events: none;
    position: absolute;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: #fff;
    color: #1f2937;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.22),
        0 4px 10px rgba(15, 23, 42, 0.06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.mb-from-left  .mb-settings { transform-origin: top left; }
.mb-from-right .mb-settings { transform-origin: top right; }
.mb-settings--in { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.mb-settings__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.mb-settings__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #111827;
    font-size: 14px;
    letter-spacing: 0.1px;
}
.mb-settings__title svg { color: #4338ca; }
.mb-settings__close {
    background: rgba(15, 23, 42, 0.06);
    border: 0;
    cursor: pointer;
    color: #374151;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.mb-settings__close:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    transform: scale(1.05);
}
.mb-settings__close:active { transform: scale(0.95); }

.mb-settings__section {
    padding: 12px 16px;
}
.mb-settings__section + .mb-settings__section {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.mb-settings__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7280;
    margin: 0 0 8px;
}

.mb-pref {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}
.mb-pref + .mb-pref { border-top: 1px solid rgba(15, 23, 42, 0.04); }
.mb-pref__icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #eef2ff;
    color: #4338ca;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}
.mb-pref__icon--bid       { background: #dbeafe; color: #1d4ed8; }
.mb-pref__icon--extended  { background: #d1fae5; color: #047857; }
.mb-pref__icon--closing   { background: #fee2e2; color: #b91c1c; }
.mb-pref__icon--ended     { background: #f3f4f6; color: #4b5563; }
.mb-pref__icon--started   { background: #ede9fe; color: #6d28d9; }
.mb-pref__icon--followed_seller { background: #fef3c7; color: #b45309; }
.mb-pref__icon--deals_near_me   { background: #ccfbf1; color: #0d9488; }

.mb-pref__body { flex: 1; min-width: 0; }
.mb-pref__title {
    font-weight: 600;
    color: #111827;
    font-size: 13px;
}
.mb-pref__desc {
    color: #6b7280;
    font-size: 11.5px;
    margin-top: 1px;
}

/* iOS-style toggle switch */
.mb-switch {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
    cursor: pointer;
}
.mb-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.mb-switch__track {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    transition: background 0.18s ease;
}
.mb-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.mb-switch input:checked ~ .mb-switch__track  { background: #4338ca; }
.mb-switch input:checked ~ .mb-switch__thumb  { transform: translateX(16px); }
.mb-switch input:focus-visible ~ .mb-switch__track {
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.25);
}

/* Master toggle row sits in the header — bigger, more prominent */
.mb-settings__master {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fafafb;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.mb-settings__master .mb-pref__title { font-size: 13px; }
.mb-settings__master .mb-pref__desc { font-size: 11.5px; color: #6b7280; }

/* Dimmed look when master toggle is off */
.mb-settings--disabled .mb-settings__section { opacity: 0.45; pointer-events: none; }

/* Per-kind accent for the new "followed_seller" toast */
.mb-toast--followed_seller .mb-toast__badge   { background: #b45309; }
.mb-toast--followed_seller .mb-toast__progress{ background: #fcd34d; }
.mb-toast--followed_seller .mb-toast__icon    { background: #fef3c7; color: #b45309; }

/* Dark-mode settings panel */
[data-theme="dark"] .mb-settings {
    background: #1f2937;
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .mb-settings__head {
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .mb-settings__title { color: #f3f4f6; }
[data-theme="dark"] .mb-settings__title svg { color: #93c5fd; }
[data-theme="dark"] .mb-settings__close {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}
[data-theme="dark"] .mb-settings__close:hover {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
}
[data-theme="dark"] .mb-settings__master { background: #111827; border-bottom-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .mb-settings__section + .mb-settings__section { border-top-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .mb-settings__label { color: #9ca3af; }
[data-theme="dark"] .mb-pref + .mb-pref { border-top-color: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .mb-pref__title { color: #f3f4f6; }
[data-theme="dark"] .mb-pref__desc { color: #9ca3af; }
[data-theme="dark"] .mb-switch__track { background: #4b5563; }

/* Dark-mode icon swatches: translucent colored backgrounds + brighter
   foreground glyphs so they actually pop against the dark panel surface
   (the light-mode pastels disappear when contrast inverts). */
[data-theme="dark"] .mb-pref__icon                  { background: rgba(147, 197, 253, 0.16); color: #93c5fd; }
[data-theme="dark"] .mb-pref__icon--bid             { background: rgba(96, 165, 250, 0.18);  color: #93c5fd; }
[data-theme="dark"] .mb-pref__icon--extended        { background: rgba(16, 185, 129, 0.18);  color: #6ee7b7; }
[data-theme="dark"] .mb-pref__icon--closing         { background: rgba(239, 68, 68, 0.18);   color: #fca5a5; }
[data-theme="dark"] .mb-pref__icon--ended           { background: rgba(156, 163, 175, 0.18); color: #d1d5db; }
[data-theme="dark"] .mb-pref__icon--started         { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; }
[data-theme="dark"] .mb-pref__icon--followed_seller { background: rgba(251, 191, 36, 0.18);  color: #fcd34d; }
[data-theme="dark"] .mb-pref__icon--deals_near_me   { background: rgba(20, 184, 166, 0.18);   color: #5eead4; }

/* Dark mode */
[data-theme="dark"] .mb-toast {
    background: #1f2937;
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .mb-toast__head { color: #f3f4f6; }
[data-theme="dark"] .mb-toast__title { color: #93c5fd; }
[data-theme="dark"] .mb-toast__meta { color: #9ca3af; }
[data-theme="dark"] .mb-toast__media { background: #374151; }
[data-theme="dark"] .mb-toast__badge { border-color: #1f2937; }
[data-theme="dark"] .mb-toast__close:hover { background: rgba(255,255,255,0.08); color: #f3f4f6; }
[data-theme="dark"] .mb-bell {
    background: #1f2937;
    color: #93c5fd;
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .mb-bell:hover { background: #111827; }
[data-theme="dark"] .mb-bell--off { color: #6b7280; }