/* ── Confetti Button ─────────────────────────────────────────── */
.bkbg-cb-app { font-family: inherit; }

.bkbg-cb-wrap { position: relative; }

.bkbg-cb-btn {
    position: relative;
    border: none;
    cursor: pointer;
    line-height: var(--bkcb-btn-line-height-d, var(--bkcb-btn-line-height, 1.3));
    transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
    outline: none;
    font-family: var(--bkcb-btn-font-family, inherit);
    font-size: var(--bkcb-btn-font-size-d, var(--bkcb-btn-font-size, 18px));
    font-weight: var(--bkcb-btn-font-weight, 700);
    font-style: var(--bkcb-btn-font-style, normal);
    text-transform: var(--bkcb-btn-text-transform, none);
    text-decoration: var(--bkcb-btn-text-decoration, none);
    letter-spacing: var(--bkcb-btn-letter-spacing-d, var(--bkcb-btn-letter-spacing, normal));
    word-spacing: var(--bkcb-btn-word-spacing-d, var(--bkcb-btn-word-spacing, normal));
    overflow: hidden;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bkbg-cb-icon-before svg, .bkbg-cb-icon-after svg { width: 1em; height: 1em; fill: currentColor; }
.bkbg-cb-icon-before .dashicons, .bkbg-cb-icon-after .dashicons { font-size: inherit; width: 1em; height: 1em; line-height: 1; }
.bkbg-cb-icon-before .bkbg-icon-img, .bkbg-cb-icon-after .bkbg-icon-img { width: 1em; height: 1em; object-fit: contain; }

.bkbg-cb-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background 0.2s;
    border-radius: inherit;
}
.bkbg-cb-btn:hover::after { background: rgba(255,255,255,0.1); }

.bkbg-cb-btn:active {
    transform: scale(0.96);
}
.bkbg-cb-btn.bkbg-cb-firing {
    animation: bkbg-cb-press 0.15s ease;
}
@keyframes bkbg-cb-press {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.93); }
    100% { transform: scale(1); }
}

/* ripple on click */
.bkbg-cb-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255,255,255,0.35);
    pointer-events: none;
    animation: bkbg-cb-ripple-anim 0.55s linear;
}
@keyframes bkbg-cb-ripple-anim {
    to { transform: scale(4); opacity: 0; }
}

/* sub text */
.bkbg-cb-sub {
    margin-top: 8px;
    font-size: 13px;
    opacity: 0.7;
}

/* canvas overlay (full viewport for rain/sides) */
.bkbg-cb-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99999;
}

/* ── Responsive Typography ── */
@media (max-width: 1024px) {
    .bkbg-cb-btn {
        font-size: var(--bkcb-btn-font-size-t, var(--bkcb-btn-font-size-d, var(--bkcb-btn-font-size, 18px)));
        line-height: var(--bkcb-btn-line-height-t, var(--bkcb-btn-line-height-d, var(--bkcb-btn-line-height, 1.3)));
        letter-spacing: var(--bkcb-btn-letter-spacing-t, var(--bkcb-btn-letter-spacing-d, var(--bkcb-btn-letter-spacing, normal)));
        word-spacing: var(--bkcb-btn-word-spacing-t, var(--bkcb-btn-word-spacing-d, var(--bkcb-btn-word-spacing, normal)));
    }
}
@media (max-width: 767px) {
    .bkbg-cb-btn {
        font-size: var(--bkcb-btn-font-size-m, var(--bkcb-btn-font-size-t, var(--bkcb-btn-font-size-d, var(--bkcb-btn-font-size, 18px))));
        line-height: var(--bkcb-btn-line-height-m, var(--bkcb-btn-line-height-t, var(--bkcb-btn-line-height-d, var(--bkcb-btn-line-height, 1.3))));
        letter-spacing: var(--bkcb-btn-letter-spacing-m, var(--bkcb-btn-letter-spacing-t, var(--bkcb-btn-letter-spacing-d, var(--bkcb-btn-letter-spacing, normal))));
        word-spacing: var(--bkcb-btn-word-spacing-m, var(--bkcb-btn-word-spacing-t, var(--bkcb-btn-word-spacing-d, var(--bkcb-btn-word-spacing, normal))));
    }
}