/* The free keepsakes under a paid film (bonus/app-bonus.js): the invitation, the wait, the mosaic and the stickers.
   The section has its own card look; the buttons are the film's own (download-btn, share-btn, create). */
.bonus { display: grid; gap: 12px; margin-top: 20px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.bonus[hidden] { display: none; }
.bonus .eyebrow { margin: 0; }
.bonus-lead { margin: 0; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.bonus-what, .bonus-body, .bonus-how, .bonus-note { margin: 0; color: var(--ink-dim); line-height: 1.5; overflow-wrap: anywhere; }
.bonus-how { font-size: .9rem; }
.bonus-consent { margin: 0; font-size: .86rem; color: var(--ink-dim); line-height: 1.45; overflow-wrap: anywhere; }
.bonus-ask { min-height: 50px; }
.bonus-making { margin: 0; padding: 24px 0; color: var(--ink-dim); text-align: center; }
.bonus-title { margin: 0; font-size: 1.15rem; color: var(--ink); }
.bonus-card { display: grid; gap: 10px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.bonus-mosaic-picture { display: block; width: 100%; max-width: 420px; height: auto; border-radius: var(--r-lg); background: var(--line); }
.bonus-actions { margin-top: 0; }
.bonus-actions a, .bonus-actions .share-btn { flex: 1; margin: 0; text-align: center; box-sizing: border-box; min-height: 48px; }
.bonus-people { display: flex; flex-wrap: wrap; gap: 8px; }
.bonus-person { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.bonus-person.selected { border-color: var(--accent); background: rgba(240, 177, 85, .18); font-weight: 700; }
.bonus-portraits { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bonus-portrait { min-width: 0; }
.bonus-portrait-btn { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 2px solid var(--accent); border-radius: var(--r-md); background: var(--line); overflow: hidden; cursor: pointer; }
.bonus-portrait-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bonus-portrait-btn img.missing { visibility: hidden; }
.bonus-portrait.out .bonus-portrait-btn { border-color: var(--line); }
.bonus-portrait.out .bonus-portrait-btn img { opacity: .35; filter: grayscale(1); }
.bonus-portrait-mark { position: absolute; right: 4px; bottom: 4px; min-width: 22px; height: 22px; line-height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: .85rem; font-weight: 700; text-align: center; }
.bonus-portrait.out .bonus-portrait-mark { background: var(--ink-dim); color: #fff; }
.bonus-sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.bonus-sticker { display: grid; gap: 6px; min-width: 0; }
.bonus-sticker img { display: block; width: 100%; aspect-ratio: 1; height: auto; border-radius: var(--r-md);
  background: repeating-conic-gradient(rgba(127, 127, 127, .18) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.bonus-sticker-save { display: block; min-height: 40px; padding: 8px 4px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink); font-size: .85rem; text-align: center; text-decoration: none; overflow-wrap: anywhere; }