/* CandyCode Floating Bottom Menu v2.2 */

:root {
    --ccfbm-bg:        rgba(255,255,255,0.85);
    --ccfbm-blur:      8px;
    --ccfbm-radius:    50px;
    --ccfbm-width:     92%;
    --ccfbm-bottom:    16px;
    --ccfbm-shadow:    0 8px 32px rgba(0,0,0,0.18),0 2px 8px rgba(0,0,0,0.10);
    --ccfbm-float-sz:  64px;
    --ccfbm-icon-sz:   24px;
    --ccfbm-text-sz:   11px;
    --ccfbm-active:    #4CAF50;
    --ccfbm-items-pl:  0px;
    --ccfbm-items-pr:  0px;
    --ccfbm-inner-pt:  10px;
    --ccfbm-inner-pb:  10px;
}

#ccfbm-bar { display: none !important; }

@media (max-width: 767px) {

/* ── OUTER WRAPPER
   This is a flex row: [glass pill] [circle]
   The circle sits OUTSIDE the pill ── */
#ccfbm-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    position: fixed !important;
    bottom: var(--ccfbm-bottom) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--ccfbm-width) !important;
    max-width: 520px !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
    gap: 10px !important;
}

/* ── GLASS PILL: contains ONLY the 4 menu items ── */
#ccfbm-inner {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    background: var(--ccfbm-bg) !important;
    backdrop-filter: blur(var(--ccfbm-blur)) !important;
    -webkit-backdrop-filter: blur(var(--ccfbm-blur)) !important;
    border-radius: var(--ccfbm-radius) !important;
    box-shadow: var(--ccfbm-shadow) !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    padding: var(--ccfbm-inner-pt) 12px var(--ccfbm-inner-pb) 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* items-group just passes through the flex */
#ccfbm-items-group {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding-left:  var(--ccfbm-items-pl) !important;
    padding-right: var(--ccfbm-items-pr) !important;
    min-width: 0 !important;
}

/* ── SINGLE NAV ITEM ── */
.ccfbm-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-decoration: none !important;
    color: #888 !important;
    flex: 1 !important;
    padding: 4px 2px !important;
    border-radius: 12px !important;
    transition: transform 0.18s, color 0.15s, background 0.15s !important;
    -webkit-tap-highlight-color: transparent !important;
    min-width: 0 !important;
}
.ccfbm-item:hover, .ccfbm-item:focus {
    color: var(--ccfbm-active) !important;
    transform: translateY(-2px) scale(1.05) !important;
    background: rgba(0,0,0,0.04) !important;
    outline: none !important;
}
.ccfbm-item:active  { transform: scale(0.93) !important; }
.ccfbm-item.ccfbm-active { color: var(--ccfbm-active) !important; }

.ccfbm-icon {
    width:  var(--ccfbm-icon-sz) !important;
    height: var(--ccfbm-icon-sz) !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
    transition: transform 0.18s !important;
}
.ccfbm-item:hover .ccfbm-icon,
.ccfbm-item.ccfbm-active .ccfbm-icon { transform: scale(1.15) !important; }
.ccfbm-item.ccfbm-active .ccfbm-icon { filter: drop-shadow(0 0 3px var(--ccfbm-active)) !important; }
.ccfbm-icon-placeholder { font-size: var(--ccfbm-icon-sz) !important; line-height: 1 !important; }

.ccfbm-label {
    font-size: var(--ccfbm-text-sz) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* ── CIRCLE BUTTON: OUTSIDE pill, right side, flex sibling ── */
#ccfbm-float {
    /* sibling of #ccfbm-inner, NOT inside it */
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    flex-shrink: 0 !important;
    width:  var(--ccfbm-float-sz) !important;
    height: var(--ccfbm-float-sz) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;

    box-shadow:
        0 6px 20px rgba(0,0,0,0.22),
        0 2px 6px rgba(0,0,0,0.14) !important;
    border: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform 0.20s, box-shadow 0.20s !important;
}
#ccfbm-float:hover, #ccfbm-float:focus {
    transform: scale(1.08) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.28), 0 3px 10px rgba(0,0,0,0.18) !important;
    outline: none !important;
}
#ccfbm-float:active { transform: scale(0.93) !important; }
#ccfbm-float img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    #ccfbm-bar {
        bottom: calc(var(--ccfbm-bottom) + env(safe-area-inset-bottom)) !important;
    }
}

body { padding-bottom: calc(90px + var(--ccfbm-bottom)) !important; }

} /* end @media */