/* ==========================================================================
   CyberOx Sticky Footer Bar - Frontend
   All colors/sizes come from CSS variables injected by PHP.
   ========================================================================== */

.coxsfb-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:99990;
    display:flex;
    justify-content:center;
    background:var(--coxsfb-bg);
    height:var(--coxsfb-height);
    border-radius:var(--coxsfb-radius);
    box-shadow:0 -4px 16px rgba(0,0,0,.08);
    font-family:inherit;
    -webkit-font-smoothing:antialiased;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    box-sizing:border-box;
}

/* On desktop we hide by default; the inline CSS will flip this if enabled */
@media (min-width:768px){
    .coxsfb-bar{ display:none; }
}

.coxsfb-inner{
    display:flex;
    width:100%;
    max-width:var(--coxsfb-max-width);
    margin:0 auto;
    align-items:stretch;
    justify-content:space-around;
}

.coxsfb-item{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-decoration:none !important;
    color:var(--coxsfb-icon) !important;
    padding:6px 4px;
    box-sizing:border-box;
    transition:transform .15s ease, color .15s ease;
    position:relative;
    min-width:0;
}

.coxsfb-item:hover,
.coxsfb-item:focus,
.coxsfb-item.is-active{
    color:var(--coxsfb-active) !important;
}

.coxsfb-item:active{
    transform:scale(.94);
}

.coxsfb-icon{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--coxsfb-icon-size);
    height:var(--coxsfb-icon-size);
    line-height:0;
}

.coxsfb-icon svg{
    width:100%;
    height:100%;
    display:block;
}

.coxsfb-label{
    font-size:var(--coxsfb-font-size);
    line-height:1.1;
    color:var(--coxsfb-text);
    font-weight:600;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.coxsfb-item.is-active .coxsfb-label{
    color:var(--coxsfb-active);
}

/* Cart bubble */
.coxsfb-bubble{
    position:absolute;
    top:-6px;
    right:-10px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:var(--coxsfb-bubble-bg);
    color:var(--coxsfb-bubble-color);
    font-size:11px;
    font-weight:700;
    line-height:18px;
    text-align:center;
    box-sizing:border-box;
    box-shadow:0 0 0 2px var(--coxsfb-bg);
    transform-origin:center;
    animation:coxsfb-bubble-in .3s ease;
}

.coxsfb-bubble.is-hidden{
    display:none;
}

.coxsfb-bubble.is-bump{
    animation:coxsfb-bump .4s ease;
}

@keyframes coxsfb-bubble-in{
    0%   { transform:scale(0); }
    60%  { transform:scale(1.25); }
    100% { transform:scale(1); }
}

@keyframes coxsfb-bump{
    0%   { transform:scale(1); }
    30%  { transform:scale(1.35); }
    60%  { transform:scale(.9); }
    100% { transform:scale(1); }
}

/* Keep content from being hidden behind the bar */
body.coxsfb-active{
    padding-bottom:var(--coxsfb-height);
}