/* ═══════════════════════════════════
   FLOATING NOTCH (Refined Organic)
═══════════════════════════════════ */
.floating-notch {
    position: fixed; bottom: -2px; right: 5%; z-index: 2000;
    width: 440px; height: 64px;
    display: flex; align-items: flex-end; justify-content: center;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform, opacity;
}

.floating-notch.hidden { opacity: 0; pointer-events: none; transform: translateY(30px); }

/* Only show on Homepage */
body:not(.prostables-is-home) .floating-notch {
    display: none !important;
}

.notch-svg {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    filter: drop-shadow(0 -10px 30px rgba(0,0,0,0.3));
    transition: fill 0.4s;
}
.notch-svg path { fill: var(--color-primary); }
.mode-protrot .notch-svg path { fill: var(--color-protrot-primary); }

.notch-content {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding-bottom: 7px;
}

.notch-switch {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    padding: 3px;
    border-radius: 100px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.switch-pill {
    position: absolute;
    top: 3px; left: 3px;
    width: calc(50% - 3px); height: calc(100% - 6px);
    background: var(--color-white);
    border-radius: 100px;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}

.mode-protrot .switch-pill { transform: translateX(100%); }

.mode-btn {
    position: relative; z-index: 2;
    padding: 0 22px; height: 32px;
    border-radius: 100px; border: none !important;
    background: transparent !important; /* Force transparency */
    font-size: 11px; font-weight: 700;
    cursor: pointer; color: rgba(255, 255, 255, 0.6);
    transition: all 0.4s;
    text-transform: uppercase; letter-spacing: 0.8px;
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap;
    outline: none !important;
    box-shadow: none !important; /* Remove any unwanted shadows */
}

.mode-btn, .mode-btn:hover, .mode-btn:focus, .mode-btn:active {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.mode-btn svg { width: 14px; height: 14px; opacity: 0.5; transition: all 0.4s; pointer-events: none; }

.mode-btn.active { color: var(--color-primary); }
.mode-btn.active svg { opacity: 1; transform: scale(1.1); }

.mode-protrot .mode-btn.active { color: var(--color-protrot-primary); }

/* RESPONSIVE */
@media (max-width: 767px) {
    .floating-notch { width: 320px; height: 54px; right: 50%; transform: translateX(50%); }
    .floating-notch.hidden { transform: translateX(50%) translateY(30px); }
    .mode-btn { padding: 0 14px; font-size: 9px; }
}