/**
 * Configurator styles.
 *
 * All scoped under .ccc-* prefix. Uses CSS variables and color-mix() for
 * automatic theme adaptation. Override --ccc-accent in the theme to
 * recolor sliders, fills, and the primary button.
 *
 * @package ConveyCraft\Conveyors
 */

.ccc-configurator {
	--ccc-accent:        var(--cc-accent, #0f172a);
	--ccc-border:        color-mix(in srgb, currentColor 12%, transparent);
	--ccc-border-strong: color-mix(in srgb, currentColor 22%, transparent);
	--ccc-muted-bg:      color-mix(in srgb, currentColor 4%, transparent);
	--ccc-hover-bg:      color-mix(in srgb, currentColor 8%, transparent);

	position: relative;
	display: block;
	padding: 1.25rem;
	border: 1px solid var(--ccc-border);
	border-radius: 0.5rem;
	background: var(--ccc-muted-bg);
}

.ccc-configurator > * + * {
	margin-block-start: 1rem;
}

.ccc-configurator__loading {
	font-style: italic;
	opacity: 0.6;
}

/* ─── Notes ──────────────────────────────────────────────────────────── */

.ccc-note {
	margin: 0.5rem 0;
	font-size: 0.875rem;
	opacity: 0.75;
}

.ccc-note--warn {
	color: #b85c00;
	background: #fff7ed;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	border: 1px solid #fed7aa;
	opacity: 1;
}

/* ─── Price ──────────────────────────────────────────────────────────── */

.ccc-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.125rem;
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	margin-block-end: 0.5rem;
}

.ccc-price__currency {
	font-size: 0.7em;
	opacity: 0.85;
	margin-inline-end: 0.125rem;
}

.ccc-price__amount--unconfirmed {
	font-style: italic;
	font-weight: 500;
	color: #6b7280;
	font-size: 0.85em;
}

.ccc-price__suffix {
	font-size: 0.4em;
	font-weight: 400;
	opacity: 0.55;
	margin-inline-start: 0.5rem;
}

/* ─── Sliders ────────────────────────────────────────────────────────── */

.ccc-slider {
	display: block;
}

.ccc-slider__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-block-end: 0.5rem;
}

.ccc-slider__label {
	font-weight: 500;
	font-size: 0.95rem;
}

.ccc-slider__value {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 0.95rem;
	background: var(--ccc-muted-bg);
	padding: 0.15rem 0.5rem;
	border-radius: 0.25rem;
}

.ccc-slider__input {
	width: 100%;
	height: 0.5rem;
	border-radius: 999px;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	background: color-mix(in srgb, currentColor 15%, transparent);
	cursor: pointer;
}

.ccc-slider__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--ccc-accent);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	cursor: grab;
}

.ccc-slider__input::-moz-range-thumb {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--ccc-accent);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	cursor: grab;
}

.ccc-slider__ticks {
	display: flex;
	justify-content: space-between;
	margin-block-start: 0.4rem;
}

.ccc-slider__tick {
	flex: 1 1 0;
	text-align: center;
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, currentColor 35%, transparent);
	white-space: nowrap;
}
.ccc-slider__tick:first-child { text-align: left; }
.ccc-slider__tick:last-child  { text-align: right; }

.ccc-slider__tick.is-passed {
	color: var(--ccc-accent);
	font-weight: 600;
}

.ccc-slider__tick.is-beyond-max {
	color: color-mix(in srgb, currentColor 18%, transparent);
	text-decoration: line-through;
}

/* ─── Quantity stepper ───────────────────────────────────────────────── */

.ccc-qty {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ccc-qty__label {
	font-weight: 500;
	font-size: 0.95rem;
}

.ccc-qty__group {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ccc-border-strong);
	border-radius: 0.375rem;
	overflow: hidden;
}

.ccc-qty__btn {
	border: 0;
	background: transparent;
	padding: 0.4rem 0.7rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	color: inherit;
	transition: background 0.12s ease;
}

.ccc-qty__btn:hover {
	background: var(--ccc-hover-bg);
}

.ccc-qty__input {
	width: 3rem;
	text-align: center;
	border: 0;
	border-inline: 1px solid var(--ccc-border-strong);
	background: transparent;
	color: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	-moz-appearance: textfield;
}

.ccc-qty__input::-webkit-outer-spin-button,
.ccc-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ─── Radio groups (chain, rails, guards) ────────────────────────────── */

.ccc-radiogroup {
	border: 0;
	margin: 0;
	padding: 0;
}

.ccc-radiogroup__legend {
	font-weight: 500;
	font-size: 0.95rem;
	margin-block-end: 0.5rem;
	padding: 0;
}

.ccc-radiogroup__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--ccc-border);
	border-radius: 0.375rem;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.ccc-radiogroup__row + .ccc-radiogroup__row {
	margin-block-start: 0.4rem;
}

.ccc-radiogroup__row:hover {
	background: var(--ccc-hover-bg);
}

.ccc-radiogroup__row:has(input:checked) {
	border-color: var(--ccc-accent);
	background: color-mix(in srgb, var(--ccc-accent) 6%, transparent);
}

.ccc-radiogroup__img {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: cover;
	border-radius: 0.25rem;
}

.ccc-radiogroup__name {
	flex: 1;
	font-weight: 500;
}

.ccc-radiogroup__price {
	font-variant-numeric: tabular-nums;
	font-size: 0.875rem;
	opacity: 0.75;
}

/* ─── Modules grid (Type E) ──────────────────────────────────────────── */

.ccc-modules {
	display: block;
}

.ccc-section__title,
.ccc-modules__title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.6rem;
}

.ccc-modules__grid {
	display: grid;
	gap: 0.5rem;
}

.ccc-modules__card {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--ccc-border);
	border-radius: 0.375rem;
}

.ccc-modules__card:has(.ccc-modules__qty__stepper) {
	border-color: var(--ccc-border-strong);
	background: var(--ccc-muted-bg);
}

.ccc-modules__img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 0.25rem;
}

.ccc-modules__name-row {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.ccc-modules__name {
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
}

.ccc-modules__expand-btn {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: inherit;
	opacity: 0.6;
	padding: 0;
}
.ccc-modules__expand-btn svg { transition: transform 0.15s ease; }
.ccc-modules__expand-btn.is-open svg { transform: rotate(180deg); }
.ccc-modules__expand-btn:hover { opacity: 1; }

.ccc-modules__detail {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.25s ease;
}
.ccc-modules__detail.is-open {
	max-height: 300px;
}

.ccc-modules__bullets {
	margin: 0.25rem 0 0;
	padding-inline-start: 1rem;
	font-size: 0.8125rem;
	opacity: 0.7;
}

.ccc-modules__bullets li {
	list-style: disc;
}

.ccc-modules__price {
	margin-block-start: 0.25rem;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

/* Qty reveal control — starts as a '+' button, becomes a stepper once
   something is added, matching the add-ons row pattern. */
.ccc-modules__qty__add {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1.5px solid var(--ccc-accent, #D34E2D);
	background: transparent;
	color: var(--ccc-accent, #D34E2D);
	font-size: 20px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.ccc-modules__qty__add:hover { background: var(--ccc-accent, #D34E2D); color: #fff; }

.ccc-modules__qty__stepper {
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: 8px;
	padding: 2px;
}

.ccc-modules__qty__btn {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: none;
	background: #fff;
	color: inherit;
	font-size: 0.85rem;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.1s ease;
}
.ccc-modules__qty__btn:hover { background: rgba(0,0,0,0.08); }

.ccc-modules__qty__num {
	width: 28px;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 700;
}

/* ─── Add-ons grid ───────────────────────────────────────────────────── */

.ccc-addons {
	border-top: 1px solid var(--ccc-border);
	padding-top: 1rem;
}

.ccc-addons__title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.6rem;
}

.ccc-addons__grid {
	display: grid;
	gap: 0.4rem;
}

.ccc-addons__row {
	display: grid;
	grid-template-columns: auto auto 1fr auto auto;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--ccc-border);
	border-radius: 0.375rem;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.ccc-addons__row:hover {
	background: var(--ccc-hover-bg);
}

/* Wraps the image + name/price so they're a link to the addon's own product
   page, without disrupting the row's 5-column grid — display:contents takes
   the <a> itself out of layout, so its children (img, info) become direct
   grid items again, exactly as when they weren't wrapped in a link. */
.ccc-addons__link {
	display: contents;
	color: inherit;
	text-decoration: none;
}
.ccc-addons__link:hover .ccc-addons__name {
	text-decoration: underline;
	text-decoration-color: var(--ccc-accent, currentColor);
}

.ccc-addons__img {

	object-fit: cover;
	border-radius: 0.25rem;
}

.ccc-addons__name {
	display: block;
	font-weight: 500;
	font-size: 0.9rem;
}

.ccc-addons__sub {
	display: block;
	font-size: 0.78rem;
	opacity: 0.65;
}

.ccc-addons__qty {
	width: 3rem;
	text-align: center;
	padding: 0.25rem 0.4rem;
	font-size: 0.85rem;
	border: 1px solid var(--ccc-border-strong);
	border-radius: 0.25rem;
	background: transparent;
	color: inherit;
}

.ccc-addons__price {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 0.9rem;
}

/* ─── Totals breakdown ───────────────────────────────────────────────── */

.ccc-total {
	font-size: 0.95rem;
	font-weight: 500;
}

.ccc-total__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.25rem 0;
	font-variant-numeric: tabular-nums;
}

.ccc-total__row + .ccc-total__row {
	border-top: 1px solid var(--ccc-border);
}

.ccc-total__row--grand {
	font-weight: 700;
	font-size: 1.15rem;
	border-top: 2px solid var(--ccc-border-strong) !important;
	padding-block-start: 0.5rem;
	margin-block-start: 0.25rem;
}

/* ─── Add to cart button ─────────────────────────────────────────────── */

.ccc-add-to-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.85rem 1.25rem;
	background: var(--ccc-accent);
	color: #fff;
	border: 0;
	border-radius: 0.5rem;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.ccc-add-to-cart:hover {
	background: color-mix(in srgb, var(--ccc-accent) 85%, #fff);
}

.ccc-add-to-cart:active {
	transform: translateY(1px);
}

.ccc-add-to-cart.is-added {
	background: #15803d;
}

.ccc-add-to-cart:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════
   v0.5.0 — Shared sections: option groups, extras, info sliders
   ═══════════════════════════════════════════════════════════════════ */


/* ── Extra row ────────────────────────────────────────────────── */
.ccc-extra {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.ccc-extra:last-child {
	border-bottom: none;
}

.ccc-extra__img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	background: #fff;
	border-radius: 6px;
	border: 1px solid #f0f0f0;
}

.ccc-extra__img--placeholder {
	background: #f5f5f4;
}

.ccc-extra__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--ccc-text, #111);
}

.ccc-extra__sub {
	font-size: 12px;
	color: var(--ccc-text-dim, #6b7280);
	margin-top: 2px;
}

.ccc-extra__price {
	font-size: 12px;
	color: var(--ccc-text-dim, #6b7280);
	margin-top: 4px;
}

.ccc-extra__control {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ccc-extra__add {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1.5px solid var(--ccc-accent, #D34E2D);
	background: transparent;
	color: var(--ccc-accent, #D34E2D);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}

.ccc-extra__add:hover {
	background: var(--ccc-accent, #D34E2D);
	color: #fff;
}

.ccc-extra__btn {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: 1px solid #e5e5e5;
	background: #fff;
	color: var(--ccc-text, #111);
	font-size: 16px;
	cursor: pointer;
}

.ccc-extra__btn:hover {
	background: #f5f5f4;
}

.ccc-extra__qty {
	width: 36px;
	height: 28px;
	text-align: center;
	border: none;
	background: transparent;
	font-size: 14px;
	font-weight: 600;
	color: var(--ccc-text, #111);
	-moz-appearance: textfield;
}

.ccc-extra__qty::-webkit-outer-spin-button,
.ccc-extra__qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ── Info slider (no price effect) ────────────────────────────── */
.ccc-info-slider {
	margin-bottom: 20px;
}

.ccc-info-slider__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
}

.ccc-info-slider__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ccc-text, #111);
}

.ccc-info-slider__input {
	width: 100%;
	accent-color: var(--ccc-accent, #D34E2D);
}

.ccc-info-slider__ends {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	font-size: 12px;
	color: var(--ccc-text-dim, #6b7280);
	margin-top: 4px;
}

.ccc-info-slider__end--max {
	text-align: right;
}

.ccc-info-slider__current {
	text-align: center;
	font-weight: 600;
	color: var(--ccc-accent, #D34E2D);
}

.ccc-info-slider__foot {
	font-size: 12px;
	color: var(--ccc-text-dim, #6b7280);
	margin-top: 8px;
	line-height: 1.4;
}

/* ── Sidebar inputs (conveyor name + comments) ────────────────── */
.ccc-sidebar-inputs {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ccc-sidebar-inputs__name,
.ccc-sidebar-inputs__comments {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	color: var(--ccc-text, #111);
	background: #fff;
	transition: border-color 0.15s ease;
}

.ccc-sidebar-inputs__name:focus,
.ccc-sidebar-inputs__comments:focus {
	outline: none;
	border-color: var(--ccc-accent, #D34E2D);
}

.ccc-sidebar-inputs__comments {
	resize: vertical;
	min-height: 60px;
	font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════════
   v0.5.0 — Info blocks accordion (rendered by ccc_render_info_blocks)
   ═══════════════════════════════════════════════════════════════════ */

.ccc-info-blocks {
	margin-top: 16px;
}

.ccc-info-block {
	border-bottom: 1px solid #e5e5e5;
	padding: 0;
}

.ccc-info-block:last-child {
	border-bottom: none;
}

.ccc-info-block__head {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	gap: 10px;
	align-items: center;
	padding: 14px 0;
	cursor: pointer;
	list-style: none;
	font-size: 14px;
	color: var(--ccc-text, #111);
}

.ccc-info-block__head::-webkit-details-marker {
	display: none;
}

.ccc-info-block__title-wrap {
	display: contents;
}

.ccc-info-block__icon {
	display: inline-flex;
	color: var(--ccc-accent, #D34E2D);
}

.ccc-info-block__title {
	font-weight: 600;
}

.ccc-info-block__status {
	font-size: 12px;
	color: var(--ccc-text-dim, #6b7280);
	font-weight: 500;
}

.ccc-info-block--included .ccc-info-block__status {
	color: #15803d;
}

.ccc-info-block--surcharge .ccc-info-block__status {
	color: var(--ccc-accent, #D34E2D);
}

.ccc-info-block__chev {
	display: inline-flex;
	width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	color: var(--ccc-text-dim, #6b7280);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.ccc-info-block[open] > .ccc-info-block__head .ccc-info-block__chev {
	transform: rotate(180deg);
}


.ccc-info-block__body {
	padding: 0 0 16px 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ccc-text-dim, #55504E);
}

.ccc-info-block__desc p {
	margin: 0 0 8px 0;
	font-size: var(--cc-font-size-pp-sm) !important;
}

.ccc-info-block__desc p:last-child {
	margin-bottom: 0;
}


.ccc-info-block__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
}

.ccc-info-block[open] .ccc-info-block__body {
    max-height: 800px;
}

.ccc-info-block__bullets--yes {
	color: var(--ccc-text, #111);
}

.ccc-info-block__bullets--no {
	color: var(--ccc-text-dim, #999);
}

.ccc-info-block__bullet-mark {
	display: inline-flex;
	width: 14px;
	flex-shrink: 0;
}

.ccc-info-block__bullets--yes .ccc-info-block__bullet-mark {
	color: #15803d;
}

.ccc-info-block__bullets--no .ccc-info-block__bullet-mark {
	color: #ef4444;
}

@media (max-width: 600px) {
	.ccc-info-block__bullets {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   v0.5.1 — Universal summary box (.ccc-summary)
   Lives in [data-ccc-region="summary"] or inside .ccc-configurator
   ═══════════════════════════════════════════════════════════════════ */

.ccc-summary {
	background: #fff;
	
	border-radius: 12px;
	
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ccc-summary__top {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: end;
}

.ccc-summary__price-block {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ccc-summary__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--ccc-text-dim, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ccc-summary__amount {
	font-size: 36px;
	font-weight: 700;
	color: var(--ccc-text, #111);
	line-height: 1;
	display: flex;
	align-items: baseline;
	gap: 2px;
}

.ccc-summary__currency {
	font-size: 28px;
	font-weight: 600;
}

.ccc-summary__amount-text {
	font-size: 36px;
}

.ccc-summary__amount--onrequest .ccc-summary__amount-text {
	color: var(--rust, #D34E2D);
}

.ccc-summary__vat {
	font-size: 11px;
	color: var(--ccc-text-dim, #6b7280);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 2px;
}

.ccc-summary__dims-row {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.ccc-summary__dims-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--ccc-text-dim, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ccc-summary__dims-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--ccc-text, #111);
}

.ccc-summary__disclaimer {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	
	font-size: 11px;
	line-height: 1.4;
	color: var(--ccc-text-dim, #6b7280);
}

.ccc-summary__disclaimer::before {
	content: "ⓘ";
	color: var(--ccc-accent, #D34E2D);
	flex-shrink: 0;
	font-size: 14px;
	line-height: 1.2;
}

.ccc-summary__inputs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ccc-summary__inputs .ccc-sidebar-inputs {
	margin-top: 0;
}

.ccc-summary__add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 20px;
	background: var(--ccc-accent, #D34E2D);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
}

.ccc-summary__add-btn:hover {
	background: var(--ccc-accent-deep, #B53D1F);
}

.ccc-summary__add-btn:active {
	transform: translateY(1px);
}

.ccc-summary__add-btn.is-added {
	background: #15803d;
}

.ccc-summary__add-btn svg {
	width: 18px;
	height: 18px;
}

.ccc-summary__breakdown {
	border-top: 1px solid #f0f0f0;
	padding-top: 12px;
}

.ccc-summary__breakdown summary {
	cursor: pointer;
	font-size: 12px;
	color: var(--ccc-text-dim, #6b7280);
	font-weight: 500;
	list-style: none;
}

.ccc-summary__breakdown summary::-webkit-details-marker {
	display: none;
}

.ccc-summary__breakdown summary::after {
	content: " +";
	color: var(--ccc-accent, #D34E2D);
}

.ccc-summary__breakdown[open] summary::after {
	content: " −";
}

.ccc-summary__breakdown-body {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ccc-summary__breakdown-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--ccc-text-dim, #55504E);
}

.ccc-summary__breakdown-row.is-grand {
	border-top: 1px solid #f0f0f0;
	padding-top: 8px;
	margin-top: 4px;
	font-weight: 700;
	color: var(--ccc-text, #111);
}

.ccc-summary__reset {
	background: none;
	border: none;
	color: var(--ccc-text-dim, #6b7280);
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
	align-self: center;
	margin-top: 4px;
}

.ccc-summary__reset:hover {
	color: var(--ccc-accent, #D34E2D);
}

/* Hide the legacy root when split layout is active */
.ccc-configurator[data-ccc-layout="split"] {
	display: none !important;
}

/* When in split layout, the controls live in a separate region — no
   border/padding because the theme styles the outer container. */
[data-ccc-region="controls"] .ccc-type-controls,
[data-ccc-region="controls"] .ccc-shared-sections {
	margin-bottom: 20px;
}

[data-ccc-region="controls"] .ccc-shared-section:first-child {
	margin-top: 0;
}
/* ─── Shared configurator lightbox (modules / option cards / extras) ──── */
.ccc-lightbox-trigger {
	position: relative;
	display: block;
	cursor: zoom-in;
	overflow: hidden;
}
.ccc-lightbox-trigger__img {
	width: 100%;
	height: 100%;
	object-fit: inherit;
	display: block;
}
.ccc-lightbox-trigger__zoom {
	position: absolute;
	right: 3px;
	bottom: 3px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(5, 15, 19, 0.55);
	color: #fff;
	border: none;
	cursor: zoom-in;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.ccc-lightbox-trigger:hover .ccc-lightbox-trigger__zoom,
.ccc-lightbox-trigger:focus-within .ccc-lightbox-trigger__zoom {
	opacity: 1;
}

.ccc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(5, 10, 15, 0.88);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}
.ccc-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}
.ccc-lightbox__img {
	max-width: 90vw;
	max-height: 85vh;
	background: #fff;
	border-radius: 8px;
	object-fit: contain;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.ccc-lightbox__close {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background 0.15s ease;
}
.ccc-lightbox__close:hover { background: rgba(255, 255, 255, 0.22); }