/* Sora Private Classes: group classes ([sora_group_classes]). Design system tokens and fz-ui components only. */
.spcg { container-type: inline-size; max-width: 1240px; margin-inline: auto; text-align: left; }
.spcg [hidden] { display: none !important; }
.spcg__wrap { display: grid; gap: var(--fz-space-40); }
.spcg__main, .spcg__panel, .spcg__block { display: grid; gap: var(--fz-space-30); min-width: 0; }
.spcg__panel { padding-top: var(--fz-space-20); gap: var(--fz-space-50); }
.spcg__h { display: flex; align-items: center; gap: .5rem; margin: 0; font: var(--fz-heading-weight) 1.3125rem/1.3 var(--fz-font-heading); color: var(--fz-ink); }
.spcg__h .fz-icon, .spcg__h svg { width: 1.25rem; height: 1.25rem; color: var(--fz-action); flex: none; }

.spcg__head { display: grid; gap: var(--fz-space-20); padding-block: var(--fz-space-50) var(--fz-space-20); }
.spcg__head .fz-title { font-size: clamp(2rem, 5vw, 2.5rem); }

/* group size: a row of buttons */
.spcg__sizes { display: flex; flex-wrap: wrap; gap: var(--fz-space-10); }
.spcg__size { min-width: 52px; font-variant-numeric: tabular-nums; }
.spcg__prices { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* packs */
.spcg__packs { display: grid; gap: var(--fz-space-20); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.spcg__pack { gap: .35rem; font: inherit; text-align: left; color: var(--fz-ink); cursor: pointer; }
.spcg__pack:hover { border-color: var(--fz-ink); }
.spcg__pack.is-selected { border-color: var(--fz-action); box-shadow: inset 0 0 0 1px var(--fz-action); background: var(--fz-action-soft); }
.spcg__pack-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.spcg__pack-name { font: var(--fz-heading-weight) 1.0625rem/1.3 var(--fz-font-heading); }
.spcg__pack-price { font-variant-numeric: tabular-nums; }
.spcg__pack-price strong { font: var(--fz-heading-weight) 1.5rem/1.1 var(--fz-font-heading); }
.spcg__pack-price s { color: var(--fz-muted); }

/* summary */
.spcg__sum { gap: var(--fz-space-20); }
.spcg__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.spcg__list li { display: flex; gap: .6rem; align-items: flex-start; }
.spcg__list svg, .spcg__list .fz-icon { width: 1.15rem; height: 1.15rem; margin-top: .2rem; color: var(--fz-action); flex: none; }
.spcg__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-top: var(--fz-space-20); border-top: 1px solid var(--fz-line); }
.spcg__total strong { font: var(--fz-heading-weight) 1.75rem/1.1 var(--fz-font-heading); font-variant-numeric: tabular-nums; }
.spcg__consent { display: flex; gap: .6rem; align-items: flex-start; min-height: 44px; font-size: .9375rem; cursor: pointer; }
.spcg__consent input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: none; accent-color: var(--fz-action); }

/* bigger groups */
.spcg .spcg__big { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fz-space-30); background: var(--fz-surface-soft); }
.spcg__big > div { flex: 1 1 280px; min-height: 0; display: grid; gap: .35rem; }

/* side summary next to the choices on wide boxes */
@container (min-width: 961px) {
	.spcg__wrap { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; column-gap: var(--fz-space-50); }
	.spcg__side { position: sticky; top: 120px; }
	.spcg__head, .spcg .spcg__big { grid-column: 1 / -1; }
}
@container (max-width: 480px) {
	.spcg__big .fz-btn { width: 100%; }
}