/**
 * PC Configurator — Dark theme override.
 * Remaps --pcc-* variables to Unica design tokens.
 * Loaded conditionally on pages with [pcc_builder] shortcode.
 */

:root {
	--pcc-primary: var(--cyan, #00F0FF);
	--pcc-primary-hover: var(--cyan-muted, rgba(0,240,255,0.5));
	--pcc-selected-bg: var(--cyan-soft, rgba(0,240,255,0.07));
	--pcc-selected-border: var(--cyan, #00F0FF);
	--pcc-incompatible-bg: rgba(255, 59, 92, 0.08);
	--pcc-incompatible-border: var(--red, #FF3B5C);
	--pcc-oos-bg: var(--bg-card, #111520);
	--pcc-card-radius: 8px;
	--pcc-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	--pcc-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
	--pcc-step-completed: var(--cyan, #00F0FF);
	--pcc-text: var(--text-primary, #FFFFFF);
	--pcc-text-muted: var(--text-muted, #6B7280);
	--pcc-border: var(--border, #1E2436);
	--pcc-bg: var(--bg-primary, #0A0E17);
	--pcc-sidebar-bg: var(--bg-card, #111520);
}

/* ── Card images ── */
.pcc-builder__card-image {
	background: var(--bg-card-top, #151A28);
}

/* ── Modal backdrop ── */
.pcc-builder__modal-backdrop {
	background: rgba(0, 0, 0, 0.75);
}

/* ── Modal close / secondary button ── */
.pcc-builder__modal-close:hover {
	background: var(--bg-card, #111520);
}

.pcc-builder__modal-btn--secondary {
	background: var(--bg-card, #111520);
	color: var(--text-body, #B8BCC8);
	border: 1px solid var(--border, #1E2436);
}

.pcc-builder__modal-btn--secondary:hover {
	background: var(--bg-elevated, #181D2B);
}

/* ── Share inputs ── */
.pcc-builder__share-url-input,
.pcc-builder__share-email-input {
	background: var(--bg-card, #111520);
	color: var(--text-primary, #fff);
	border-color: var(--border, #1E2436);
}

.pcc-builder__share-url-input:focus,
.pcc-builder__share-email-input:focus {
	border-color: var(--cyan, #00F0FF);
	box-shadow: 0 0 0 3px var(--cyan-glow, rgba(0,240,255,0.3));
}

/* ── Resume bar ── */
.pcc-builder__resume-bar {
	background: var(--cyan-soft, rgba(0,240,255,0.07));
	border-color: var(--cyan, #00F0FF);
	color: var(--text-primary, #fff);
}

/* ── Toolbar hover ── */
.pcc-cfg__slot-header:hover {
	background: rgba(255, 255, 255, 0.03);
}

.pcc-builder__summary-item:hover {
	background: rgba(255, 255, 255, 0.03);
}

/* ── Step numbers (use font) ── */
.pcc-builder__step-number {
	font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

/* ── Filter buttons ── */
.pcc-builder__filter-btn {
	background: var(--bg-card, #111520);
	border-color: var(--border, #1E2436);
	color: var(--text-body, #B8BCC8);
}

.pcc-builder__filter-btn:hover,
.pcc-builder__filter-btn.is-active {
	border-color: var(--cyan, #00F0FF);
	color: var(--cyan, #00F0FF);
}

/* ── Navigation buttons ── */
.pcc-builder__nav-btn {
	font-family: var(--font-heading, 'Rajdhani', sans-serif);
	font-weight: 600;
}

/* ── Scrollbar dark ── */
.pcc-builder__main::-webkit-scrollbar,
.pcc-builder__sidebar::-webkit-scrollbar {
	width: 6px;
}

.pcc-builder__main::-webkit-scrollbar-track,
.pcc-builder__sidebar::-webkit-scrollbar-track {
	background: var(--bg-primary, #0A0E17);
}

.pcc-builder__main::-webkit-scrollbar-thumb,
.pcc-builder__sidebar::-webkit-scrollbar-thumb {
	background: var(--border, #1E2436);
	border-radius: 3px;
}

/* ── Configurator slots ── */
.pcc-cfg__slot {
	border-color: var(--border, #1E2436);
}

.pcc-cfg__slot-label {
	font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

.pcc-cfg__slot-required {
	color: var(--red, #FF3B5C);
}

/* ── Prices in sidebar ── */
.pcc-builder__summary-price {
	font-family: var(--font-heading, 'Rajdhani', sans-serif);
	color: var(--cyan, #00F0FF);
}

.pcc-builder__summary-total {
	font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

/* ══════════════════════════════════════════════════════════
   FIX 1 — Builder width: remove page-content 800px cap
   ══════════════════════════════════════════════════════════ */

.page-content:has(.pcc-builder),
.page-content:has(.pcc-confgen) {
	max-width: none;
}

/* ══════════════════════════════════════════════════════════
   FIX 2 — Stepper: green → cyan on completed steps
   ══════════════════════════════════════════════════════════ */

/* Completed step bullet: cyan semi-transparent bg */
.pcc-builder__step.is-completed .pcc-builder__step-number {
	background: rgba(0, 240, 255, 0.15);
	border-color: rgba(0, 240, 255, 0.4);
	color: var(--cyan, #00F0FF);
}

/* Active step bullet: solid cyan bg, dark text */
.pcc-builder__step.is-active .pcc-builder__step-number {
	background: var(--cyan, #00F0FF);
	border-color: var(--cyan, #00F0FF);
	color: var(--bg-primary, #0A0E17);
}

/* Future step bullet: muted */
.pcc-builder__step:not(.is-active):not(.is-completed) .pcc-builder__step-number {
	background: transparent;
	border-color: var(--border, #1E2436);
	color: var(--text-muted, #6B7280);
}

/* Completed step label: cyan text */
.pcc-builder__step.is-completed .pcc-builder__step-label {
	color: var(--cyan, #00F0FF);
}

/* Checkmark ✓ on completed steps: cyan */
.pcc-builder__step-check {
	color: var(--cyan, #00F0FF);
}

/* ══════════════════════════════════════════════════════════
   FIX 3 — Buttons: proper contrast & font
   ══════════════════════════════════════════════════════════ */

/* Primary buttons (Next + Add to cart): dark text on cyan */
.pcc-builder__nav-btn--next,
.pcc-builder__nav-btn--cart {
	background: var(--cyan, #00F0FF);
	border-color: var(--cyan, #00F0FF);
	color: var(--bg-primary, #0A0E17);
	font-family: var(--font-heading, 'Rajdhani', sans-serif);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.pcc-builder__nav-btn--next:hover,
.pcc-builder__nav-btn--cart:hover {
	background: #33F3FF;
	border-color: #33F3FF;
	color: var(--bg-primary, #0A0E17);
}

/* Secondary button (Previous): outlined */
.pcc-builder__nav-btn--prev {
	background: transparent;
	border-color: var(--border, #1E2436);
	color: var(--text-body, #B8BCC8);
}

.pcc-builder__nav-btn--prev:hover {
	border-color: var(--cyan, #00F0FF);
	color: var(--cyan, #00F0FF);
}

/* ══════════════════════════════════════════════════════════
   FIX 4 — Hide check badge overlay, keep cyan border only
   ══════════════════════════════════════════════════════════ */

.pcc-builder__card-badge.is-selected {
	display: none;
}

/* Selected card: cyan border + subtle glow */
.pcc-builder__card-wrap.is-selected {
	border-color: var(--cyan, #00F0FF);
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

/* ══════════════════════════════════════════════════════════
   FIX 5 — Border-radius on product images
   ══════════════════════════════════════════════════════════ */

.pcc-builder__card-wrap {
	border-radius: 8px;
	overflow: hidden;
}

.pcc-builder__card-image img {
	border-radius: 6px;
}