/**
 * Combo Options — customer-facing PDP/modal styling (COMBO-OPTION-
 * ARCHITECTURE-REDESIGN.md Phase 6).
 *
 * Deliberately matches Addon Groups' PDP look 1:1, not just its markup
 * shape: `.opt-row` / `.mark` / `.ol` / `.op` here are byte-for-byte the
 * same classes and DOM order (input, then .mark, then .ol, then .op) that
 * onepot-core's class-addon-groups-frontend.php renders, and the theme's
 * own sass/components/product/_addon-groups.scss styles those classes
 * UNSCOPED — as siblings of `.addon` inside `.single-product, .rms-modal`,
 * not as `.addon .opt-row` descendants. So once loaded on the same PDP/
 * modal page (theme CSS is always enqueued there, regardless of whether
 * this product has any addon groups), that theme CSS already styles this
 * markup — this file must NOT re-declare `.opt-row`/`.mark`/`.ol`/`.op` or
 * it would win the cascade with its own, different-looking rules and undo
 * the match. Only the wrapper/card/badge/pack-list/error/total chrome
 * below (`.addon`'s own analogues, which the theme DOES scope to `.addon`)
 * needs restating here, reusing the theme's own `--color-*` custom
 * properties (defined globally on :root, not SCSS-build-dependent) so a
 * future palette change to Addon Groups' look applies here too. $radius-md/
 * $radius-sm/$font__body are theme SCSS variables (not CSS custom
 * properties) — their compiled values are hardcoded below with a comment,
 * since a plain CSS file can't reference a SCSS variable.
 */

.pdp-combo-options {
	display: block;
	margin: 22px 0;
	text-align: left;
	width: 100%;
}

.combo-option {
	background: var( --color-paper );
	border: 1px solid var( --color-line );
	border-radius: 22px; /* $radius-md */
	margin-bottom: 16px;
	padding: 20px 22px;
	transition: border-color 0.2s;
}

.combo-option:last-child {
	margin-bottom: 0;
}

.combo-option.has-error {
	background: rgba( 185, 97, 42, 0.04 );
	border-color: var( --color-warning );
}

.combo-option h4 {
	align-items: center;
	color: var( --color-teal );
	display: flex;
	flex-wrap: wrap;
	font-family: "Fira Sans", system-ui, -apple-system, sans-serif; /* $font__body */
	font-size: 1rem;
	font-weight: 700;
	gap: 6px 12px;
	justify-content: space-between;
	letter-spacing: 0.01em;
	line-height: 1.3;
	margin-bottom: 12px;
	text-transform: none;
}

.combo-option h4 .opt {
	background: var( --color-cream-2 );
	border-radius: 100px;
	color: var( --color-muted );
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 4px 10px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Pack has no Addon Groups analogue (a group is never "always included,
   no choice") — styled to sit at the same rhythm as an .opt-row so a Pack
   option's static list doesn't read as a different visual language from
   the Selection options next to it. */
.combo-option__pack-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.combo-option__pack-list li {
	align-items: center;
	color: var( --color-ink );
	display: flex;
	font-size: 0.95rem;
	gap: 12px;
	line-height: 1.35;
	padding: 10px;
}

.combo-option__pack-list li + li {
	margin-top: 2px;
}

.combo-option__pack-list li::before {
	background: var( --color-teal );
	border-radius: 50%;
	content: "";
	flex: none;
	height: 6px;
	width: 6px;
}

.combo-option-error {
	align-items: center;
	color: var( --color-warning );
	display: flex;
	font-size: 0.82rem;
	font-weight: 600;
	gap: 6px;
	margin: 12px 0 0;
}

.combo-option-error::before {
	align-items: center;
	background: var( --color-warning );
	border-radius: 50%;
	color: var( --color-cream );
	content: "!";
	display: inline-flex;
	flex: none;
	font-size: 0.7rem;
	height: 16px;
	justify-content: center;
	width: 16px;
}

.combo-option-error[hidden] {
	display: none;
}

.pdp-combo-live-total {
	align-items: baseline;
	background: var( --color-cream-2 );
	border-radius: 14px; /* $radius-sm */
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin: 0 0 18px;
	padding: 12px 18px;
	width: 100%;
}

.pdp-combo-live-total:not( .is-ready ) {
	display: none;
}

.pdp-combo-live-total .ltl {
	color: var( --color-muted );
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pdp-combo-live-total .ltv {
	color: var( --color-teal );
	font-family: "Fira Sans", system-ui, -apple-system, sans-serif; /* $font__body */
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1;
}

/* Inside the RFW modal the same tighter-column treatment Addon Groups gets
   — mirrors .rms-modal .pdp-addons / .addon / .pdp-live-total verbatim. */
.rms-modal .pdp-combo-options {
	margin: 20px 0 0;
}

.rms-modal .combo-option {
	background: transparent;
	border-left: 0;
	border-radius: 0;
	border-right: 0;
	border-top: 0;
	margin-bottom: 0;
	padding: 18px 0;
}

.rms-modal .combo-option:first-child {
	padding-top: 0;
}

.rms-modal .combo-option.has-error {
	background: transparent;
	border-left: 0;
	border-right: 0;
	border-top: 0;
}

.rms-modal .pdp-combo-live-total {
	margin: 18px 0 0;
}