/* The "Picture to share" box (components/share-card.blade.php, js/share-card.js). */
.sc { border-radius: 16px; border: 1px solid var(--surface-border-soft, rgba(255, 255, 255, 0.08)); background: var(--bg-card, #171220); }
.sc > summary { display: flex; align-items: center; gap: 0.85rem; min-height: 56px; padding: 0.7rem 1.1rem; list-style: none; cursor: pointer; }
.sc > summary::-webkit-details-marker { display: none; }
.sc > summary > i:first-child { color: var(--accent-secondary, #d998ff); font-size: 1.1rem; }
.sc > summary > span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc > summary b { font-size: 15px; }
.sc > summary small { font-size: 13px; color: var(--text-muted, #8c9ab0); }
.sc__chev { font-size: 0.8rem; color: var(--text-muted, #8c9ab0); transition: transform 0.15s ease; }
.sc[open] .sc__chev { transform: rotate(180deg); }
.sc > summary:focus-visible { outline: 2px solid var(--accent-secondary, #d998ff); outline-offset: 2px; border-radius: 16px; }
.sc__body { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 0.4rem 1.1rem 1.2rem; }
.sc__canvas { display: block; width: min(360px, 100%); height: auto; aspect-ratio: 4 / 5; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); }
.sc__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.sc__note { max-width: 36rem; text-align: center; font-size: 13px; color: var(--text-muted, #8c9ab0); }
.sc__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 46px; padding: 0 1.2rem; border-radius: 12px; border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.16)); background: transparent; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.sc__btn:hover { background: rgba(255, 255, 255, 0.08); }
.sc__btn--primary { background: #7a42ee; border-color: #7a42ee; }
.sc__btn--primary:hover { background: #8a58f2; }
.sc__btn[hidden] { display: none; }
.sc__btn:focus-visible { outline: 2px solid var(--accent-secondary, #d998ff); outline-offset: 2px; }
.sc { margin: 1rem 0; }
@media (max-width: 767px) {
    .sc__actions { width: 100%; }
    .sc__actions .sc__btn { flex: 1 1 0; }
}