/* Custom PC Builder styles */
:root{
  --cpc-bg:#f7f9fb;
  --card:#ffffff;
  --accent:#2b6cb0;
  --muted:#6b7280;
  --success:#16a34a;
  --danger:#e53e3e;
  --radius:8px;
}

.cpc-builder{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;margin:24px 0;}
.cpc-builder__left .cpc-title{margin:0 0 12px;font-size:22px;color:var(--accent)}
.cpc-card{background:var(--card);padding:16px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(31,45,61,0.06);border:1px solid rgba(15,23,42,0.03);}
.cpc-subtitle{margin:0 0 8px;font-size:16px;color:#111827}
.cpc-row{display:flex;gap:12px}
.cpc-field{display:block;margin-bottom:10px;font-size:14px;color:#111827}
.cpc-field .cpc-select{width:100%;padding:10px;border-radius:6px;border:1px solid #e5e7eb;background:#fff}
.cpc-select.loading{background-image:linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(255,255,255,0.0) 25%);background-size:200% 100%;animation: loadingBg 1s linear infinite}
@keyframes loadingBg{from{background-position:200% 0}to{background-position:-200% 0}}

.cpc-builder__right{position:relative}
.cpc-summary .cpc-selected-list{list-style:none;margin:0 0 12px;padding:0;color:var(--muted)}
.cpc-selected-list li{padding:6px 0;border-bottom:1px dashed rgba(15,23,42,0.03)}
.cpc-total{font-size:18px;font-weight:700;margin:12px 0}
.cpc-button{display:inline-block;padding:10px 16px;border-radius:8px;border:0;cursor:pointer}
.cpc-button--primary{background:var(--accent);color:#fff}
.cpc-button.loading{opacity:0.8;pointer-events:none}

/* Responsive */
@media (max-width:900px){
  .cpc-builder{grid-template-columns:1fr;}
  .cpc-builder__right{order:2}
}

/* small touches */
.cpc-field .cpc-select:focus{outline:none;box-shadow:0 0 0 3px rgba(59,130,246,0.12)}

/* Quantity fields */
.cpc-quantity-wrapper{margin-top:8px;display:flex;align-items:center;gap:8px;padding:8px;background:#f9fafb;border-radius:6px;border:1px solid #e5e7eb}
.cpc-quantity-label{font-size:13px;color:var(--muted);font-weight:500;white-space:nowrap}
.cpc-quantity-input{width:70px;padding:6px 8px;border-radius:4px;border:1px solid #d1d5db;font-size:14px;text-align:center}
.cpc-quantity-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(59,130,246,0.1)}
.cpc-quantity-max{font-size:12px;color:var(--muted);font-style:italic}

/* Plus/Minus Buttons */
.cpc-quantity-btn{
  padding:6px 10px;
  border-radius:4px;
  border:1px solid #d1d5db;
  background:#fff;
  color:var(--accent);
  cursor:pointer;
  font-size:16px;
  font-weight:bold;
  transition:all 0.2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  min-height:32px;
}

.cpc-quantity-btn:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.cpc-quantity-btn:active{
  transform:scale(0.95);
}

.cpc-quantity-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}