/* ─── Mobile CTA Bar v2 — Frontend Styles ───────────────────────────────── */

#mcb-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 6px;
    padding: 10px 14px;
    background: var(--mcb-bar-bg, #0f0f0f);
    border: var(--mcb-bar-border-css, 1px solid rgba(255,255,255,0.08));
    border-radius: var(--mcb-bar-radius, 24px);
    box-shadow: 0 -2px 32px rgba(0,0,0,0.45), 0 2px 0 rgba(255,255,255,0.04) inset;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s cubic-bezier(0.16,1,0.3,1);
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
}

#mcb-bar.mcb-visible {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

/* Dividers */
.mcb-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.1);
    border-radius: 1px;
    margin: 0 2px;
    flex-shrink: 0;
}

/* ── Buttons ── */
.mcb-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 58px;
    height: 58px;
    border-radius: var(--mcb-icon-radius, 16px);
    background: var(--mcb-icon-bg, rgba(255,255,255,0.06));
    border: var(--mcb-icon-border-css, none);
    cursor: pointer;
    text-decoration: none;
    color: var(--mcb-icon-color, #fff);
    transition: background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing: border-box;
}

.mcb-btn:hover,
.mcb-btn:focus,
.mcb-btn:focus-visible { background: var(--mcb-icon-bg-hover, rgba(255,255,255,0.14)); outline: none; color: var(--mcb-icon-color,#fff); text-decoration: none; }

.mcb-btn:visited,
.mcb-btn:active         { color: inherit; text-decoration: none; }
.mcb-btn:active         { transform: scale(0.92); background: var(--mcb-icon-bg, rgba(255,255,255,0.06)); }

/* Accent dot */
.mcb-btn::before {
    content: '';
    position: absolute;
    top: 6px; right: 8px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--mcb-slot-accent, #fff);
    opacity: 0.9;
}

/* Icons */
.mcb-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: block;
    /* icon colour: slot override → slot accent → global */
    color: var(--mcb-slot-icon-color, var(--mcb-slot-accent, var(--mcb-icon-color, #fff)));
}

/* Lock icon colour on all states */
.mcb-btn:visited svg,
.mcb-btn:active  svg { color: var(--mcb-slot-icon-color, var(--mcb-slot-accent, var(--mcb-icon-color, #fff))); }

/* Labels */
.mcb-btn span {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    display: block;
    color: var(--mcb-slot-label-color, rgba(255,255,255,0.55));
}

/* ── Desktop hide ── */
@media (min-width: 768px) {
    #mcb-bar { display: none !important; }
}