/**
 * Fixed-price bundle builder (pilot).
 * Only the bundle-specific bits — the grid, cards, sheet and totals reuse
 * app.css (the wrapper carries both .cbb-wrapper and .cbb-bundle classes, so
 * the --cbb-* design tokens are already available here).
 */

/* ── Step 1: size selector ─────────────────────────── */
.cbb-bundle-sizes { margin-bottom: 10px; }
.cbb-bundle-step-title { font-size: 1rem; font-weight: 800; text-align: center; margin: 0 0 14px; color: var(--cbb-text); }
.cbb-bundle-size-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

.cbb-bundle-size-card {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: var(--cbb-surface); border: 2px solid var(--cbb-border);
    border-radius: var(--cbb-radius); padding: 20px 14px; cursor: pointer;
    font-family: inherit; text-align: center;
    transition: transform .15s var(--ease), border-color .15s, box-shadow .2s;
    box-shadow: var(--cbb-shadow-sm);
}
.cbb-bundle-size-card:hover { border-color: var(--cbb-accent); transform: translateY(-3px); box-shadow: var(--cbb-shadow); }
.cbb-bundle-size-card:active { transform: scale(.98); }
.cbb-bundle-size-card:focus-visible { outline: 2px solid var(--cbb-accent); outline-offset: 2px; }
.cbb-bundle-size-emoji { font-size: 2rem; }
.cbb-bundle-size-qty { font-size: 1rem; font-weight: 800; color: var(--cbb-text); }
.cbb-bundle-size-price { font-size: 1.25rem; font-weight: 800; color: var(--cbb-accent); }
.cbb-bundle-size-note { font-size: .74rem; color: var(--cbb-muted); }

/* ── Step 2: chosen header ─────────────────────────── */
.cbb-bundle-chosen {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--cbb-accent-soft); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;
}
.cbb-bundle-chosen-label { font-size: .84rem; color: var(--cbb-text); text-align: right; }
.cbb-bundle-back {
    flex: 0 0 auto; border: none; background: none; color: var(--cbb-accent);
    font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; padding: 4px 0; white-space: nowrap;
}
.cbb-bundle-back:focus-visible { outline: 2px solid var(--cbb-accent); outline-offset: 2px; border-radius: 4px; }

/* ── FAB shake (over-max feedback) ─────────────────── */
.cbb-bundle .cbb-fab-wrap.shake { animation: cbbBundleShake .4s ease; }
@keyframes cbbBundleShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .cbb-bundle-size-card, .cbb-bundle .cbb-fab-wrap.shake {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}