/**
 * Configurable Products Builder - Frontend Styles
 */

.cpb-configurator {
    margin: 1.5em 0;
    font-size: 14px;
    line-height: 1.5;
    color: #2b2d2f;
}

.cpb-base-price {
    padding: 8px 12px;
    background: #f6f7f7;
    border-left: 3px solid #2271b1;
    margin-bottom: 1em;
    font-weight: 500;
}

.cpb-configurator .cpb-group {
    margin-bottom: 1.5em;
    padding: 1em 1.25em;
    border: 1px solid #e1e3e5;
    border-radius: 6px;
    background: #fff;
    transition: opacity .2s ease, border-color .2s ease;
}

.cpb-configurator .cpb-group.cpb-group--hidden {
    display: none;
}

.cpb-configurator .cpb-group--invalid {
    border-color: #d63638;
    background: #fff5f5;
}

.cpb-configurator .cpb-group-title {
    margin: 0 0 .25em;
    font-size: 1.1em;
    font-weight: 600;
}

.cpb-configurator .cpb-required {
    color: #d63638;
    margin-left: 4px;
}

.cpb-configurator .cpb-group-desc {
    margin: 0 0 .75em;
    color: #6c7176;
    font-size: .92em;
}

.cpb-configurator .cpb-group-meta {
    margin-bottom: .75em;
}

.cpb-badge {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 6px;
    background: #f0f0f1;
    color: #50575e;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.cpb-badge--multi {
    background: #d1ecf1;
    color: #0c5460;
}

.cpb-badge--single {
    background: #e7f3fe;
    color: #2271b1;
}

.cpb-configurator .cpb-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.cpb-configurator .cpb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e1e3e5;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: all .15s ease;
}

.cpb-configurator .cpb-item:hover {
    border-color: #b0bec5;
    background: #fafbfc;
}

.cpb-configurator .cpb-item.cpb-item--selected {
    border-color: #2271b1;
    background: #f0f6fc;
    box-shadow: 0 0 0 1px #2271b1 inset;
}

.cpb-item-control {
    flex: 0 0 auto;
}

.cpb-item-control input[type="radio"],
.cpb-item-control input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}

.cpb-item-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 4px;
    background: #f6f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpb-item-thumb .cpb-item-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.cpb-item-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.cpb-item-name {
    font-weight: 500;
    color: #1d2327;
}

.cpb-item-price {
    font-size: .9em;
    color: #2271b1;
    margin-top: 2px;
}

.cpb-item-qty {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    border: 1px solid #d0d3d6;
    border-radius: 4px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: all .15s ease;
}

.cpb-item.cpb-item--selected .cpb-item-qty {
    visibility: visible;
    opacity: 1;
}

.cpb-qty-btn {
    width: 28px;
    height: 30px;
    border: 0;
    background: #f6f7f7;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: #50575e;
}

.cpb-qty-btn:hover {
    background: #e9eaeb;
    color: #1d2327;
}

.cpb-qty-input {
    width: 44px;
    height: 30px;
    border: 0;
    border-left: 1px solid #d0d3d6;
    border-right: 1px solid #d0d3d6;
    text-align: center;
    background: #fff;
    color: #1d2327;
    -moz-appearance: textfield;
}

.cpb-qty-input::-webkit-outer-spin-button,
.cpb-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Summary / actions */
.cpb-summary {
    margin-top: 1.5em;
    padding: 1em 1.25em;
    background: #f6f7f7;
    border-radius: 6px;
}

.cpb-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1em;
    padding-bottom: 0.75em;
    border-bottom: 1px solid #e1e3e5;
}

.cpb-total-label {
    font-size: 1em;
    color: #50575e;
}

.cpb-total-amount {
    font-size: 1.6em;
    font-weight: 700;
    color: #1d2327;
}

.cpb-errors {
    color: #d63638;
    font-size: .9em;
    margin-bottom: .75em;
    min-height: 1.2em;
}

.cpb-errors:empty {
    display: none;
}

.cpb-actions {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
}

.cpb-actions .cpb-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #50575e;
}

.cpb-actions .cpb-qty input {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid #d0d3d6;
    border-radius: 4px;
}

.cpb-add-to-cart {
    flex: 1 1 auto;
    min-width: 200px;
    font-weight: 600;
    padding: 10px 24px !important;
}

.cpb-add-to-cart:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.cpb-no-config {
    padding: 1em;
    background: #fff5f5;
    color: #d63638;
    border-radius: 4px;
}

@media (max-width: 600px) {
    .cpb-configurator .cpb-items {
        grid-template-columns: 1fr;
    }
    .cpb-actions {
        flex-direction: column;
    }
    .cpb-add-to-cart {
        width: 100%;
    }
}

/* ============================================================
 *  v4.3 — Configure-your-build topbar (dark pill)
 * ============================================================ */

.cpb-configurator .cpb-topbar {
	--cpb-bar-bg:      #0a0a0a;
	--cpb-bar-accent:  #f97316;
	--cpb-bar-muted:   rgba(255, 255, 255, 0.15);
	--cpb-bar-fg:      #ffffff;

	background: var(--cpb-bar-bg);
	color: var(--cpb-bar-fg);
	border-radius: 999px;
	padding: 10px 20px;
	margin: 0 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.cpb-configurator .cpb-topbar-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.cpb-configurator .cpb-topbar-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--cpb-bar-accent);
	color: var(--cpb-bar-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cpb-configurator .cpb-topbar-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--cpb-bar-fg);
	white-space: nowrap;
}

.cpb-configurator .cpb-stepnav {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.cpb-configurator .cpb-stepnav-circle {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid transparent;
	background: var(--cpb-bar-muted);
	color: rgba(255, 255, 255, 0.55);
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.cpb-configurator .cpb-stepnav-circle:hover {
	background: rgba(249, 115, 22, 0.3);
	color: #fff;
}

.cpb-configurator .cpb-stepnav-circle.is-done {
	background: var(--cpb-bar-accent);
	color: #fff;
}

.cpb-configurator .cpb-stepnav-circle.is-active {
	background: var(--cpb-bar-accent);
	color: #fff;
	box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35);
}

.cpb-configurator .cpb-stepnav-circle svg {
	display: block;
}

.cpb-configurator .cpb-stepnav-sep {
	color: var(--cpb-bar-accent);
	font-size: 13px;
	user-select: none;
	line-height: 1;
	opacity: 0.75;
}

.cpb-configurator .cpb-stepnav-summary {
	background: transparent;
	color: var(--cpb-bar-accent);
	border: 1px solid var(--cpb-bar-accent);
	padding: 4px 16px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	margin-left: 6px;
	white-space: nowrap;
	transition: all 0.15s ease;
}

.cpb-configurator .cpb-stepnav-summary:hover,
.cpb-configurator .cpb-stepnav-summary.is-active {
	background: var(--cpb-bar-accent);
	color: #fff;
}

/* 滚动到 group 时给它一个柔和的高亮闪一下 */
.cpb-configurator .cpb-group.is-scroll-target {
	animation: cpb-pulse 1.2s ease-out;
}

@keyframes cpb-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
	100% { box-shadow: 0 0 0 12px rgba(249, 115, 22, 0); }
}

/* 窄屏：顶栏拆两行 */
@media (max-width: 640px) {
	.cpb-configurator .cpb-topbar {
		border-radius: 16px;
		padding: 10px 14px;
	}
	.cpb-configurator .cpb-stepnav {
		width: 100%;
		justify-content: flex-start;
	}
}