/* ══════════════════════════════════════
 * PC BUILDER PAGE STYLES
 * ══════════════════════════════════════ */

.jp-builder-hero {
  background    : linear-gradient(135deg, var(--jp-gray-900) 0%, #0d1b3e 60%, #1a0a2e 100%);
  padding       : var(--jp-space-16) 0;
  position      : relative;
  overflow      : hidden;
}

.jp-builder-hero::before {
  content    : '';
  position   : absolute;
  top        : -100px; right: -100px;
  width      : 500px; height: 500px;
  border-radius: 50%;
  background : radial-gradient(circle, rgba(249,115,22,0.08) 0%, transparent 70%);
}

.jp-builder-hero::after {
  content    : '';
  position   : absolute;
  bottom     : -80px; left: -80px;
  width      : 400px; height: 400px;
  border-radius: 50%;
  background : radial-gradient(circle, rgba(30,58,138,0.15) 0%, transparent 70%);
}

.jp-builder-hero-inner {
  position  : relative;
  z-index   : 1;
  text-align: center;
}

.jp-builder-hero-title {
  font-size     : var(--jp-text-5xl);
  font-weight   : var(--jp-fw-black);
  color         : var(--jp-white);
  text-transform: uppercase;
  letter-spacing: var(--jp-ls-tight);
  line-height   : var(--jp-lh-tight);
  margin-bottom : var(--jp-space-4);
}

.jp-builder-hero-title .accent { color: var(--jp-accent); }

.jp-builder-hero-desc {
  font-size  : var(--jp-text-lg);
  color      : rgba(255,255,255,0.65);
  max-width  : 560px;
  margin     : 0 auto var(--jp-space-8);
  line-height: var(--jp-lh-relaxed);
}

.jp-builder-hero-badges {
  display        : flex;
  justify-content: center;
  flex-wrap      : wrap;
  gap            : var(--jp-space-3);
}

.jp-builder-hero-badge {
  display         : inline-flex;
  align-items     : center;
  gap             : var(--jp-space-2);
  background-color: rgba(255,255,255,0.08);
  border          : 1px solid rgba(255,255,255,0.15);
  color           : rgba(255,255,255,0.8);
  padding         : var(--jp-space-2) var(--jp-space-4);
  border-radius   : var(--jp-radius-full);
  font-size       : var(--jp-text-sm);
  font-weight     : var(--jp-fw-medium);
}

.jp-builder-hero-badge i { color: var(--jp-accent); }

.jp-builder-progress {
  background-color: var(--jp-white);
  border-bottom   : var(--jp-border-width) solid var(--jp-border-color);
  padding         : var(--jp-space-5) 0;
  position        : sticky;
  top             : var(--jp-navbar-height);
  z-index         : 10;
  box-shadow      : var(--jp-shadow-sm);
}

.jp-builder-progress-inner {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 0;
}

.jp-builder-progress-step {
  display    : flex;
  align-items: center;
  gap        : var(--jp-space-2);
  font-size  : var(--jp-text-sm);
  color      : var(--jp-gray-400);
  font-weight: var(--jp-fw-medium);
  white-space: nowrap;
  transition : color var(--jp-transition-base);
}

.jp-builder-progress-step .jp-step-num {
  width           : 32px;
  height          : 32px;
  border-radius   : var(--jp-radius-full);
  background-color: var(--jp-gray-200);
  color           : var(--jp-gray-500);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : var(--jp-text-sm);
  font-weight     : var(--jp-fw-bold);
  flex-shrink     : 0;
  transition      : all var(--jp-transition-base);
}

.jp-builder-progress-step.active  { color: var(--jp-primary); }
.jp-builder-progress-step.active .jp-step-num {
  background-color: var(--jp-primary);
  color           : var(--jp-white);
  box-shadow      : var(--jp-shadow-primary);
}
.jp-builder-progress-step.completed { color: var(--jp-success); }
.jp-builder-progress-step.completed .jp-step-num {
  background-color: var(--jp-success);
  color           : var(--jp-white);
}

.jp-builder-progress-divider {
  width      : 60px;
  height     : 2px;
  background : var(--jp-border-color);
  transition : background var(--jp-transition-base);
}
.jp-builder-progress-divider.done { background: var(--jp-success); }

.jp-builder-panels {
  max-width : 800px;
  margin    : 0 auto;
  padding   : var(--jp-space-10) 0;
}

.jp-builder-panel { animation: jp-tab-fade 300ms ease; }

.jp-builder-panel-title {
  font-size     : var(--jp-text-3xl);
  font-weight   : var(--jp-fw-extrabold);
  color         : var(--jp-gray-900);
  text-transform: uppercase;
  letter-spacing: var(--jp-ls-tight);
  margin-bottom : var(--jp-space-2);
}
.jp-builder-panel-title .accent { color: var(--jp-primary); }

.jp-builder-panel-desc {
  font-size    : var(--jp-text-base);
  color        : var(--jp-gray-500);
  margin-bottom: var(--jp-space-8);
  line-height  : var(--jp-lh-relaxed);
}

.jp-option-grid {
  display               : grid;
  grid-template-columns : repeat(2, 1fr);
  gap                   : var(--jp-space-4);
  margin-bottom         : var(--jp-space-8);
}

.jp-option-card {
  position        : relative;
  padding         : var(--jp-space-6);
  background-color: var(--jp-white);
  border          : var(--jp-border-width-2) solid var(--jp-border-color);
  border-radius   : var(--jp-radius-xl);
  cursor          : pointer;
  transition      : all var(--jp-transition-fast);
  display         : flex;
  flex-direction  : column;
  gap             : var(--jp-space-3);
}

.jp-option-card:hover {
  border-color     : var(--jp-primary);
  background-color : var(--jp-primary-subtle);
  transform        : translateY(-2px);
  box-shadow       : var(--jp-shadow-card);
}

.jp-option-card.active {
  border-color     : var(--jp-primary);
  background-color : var(--jp-primary-subtle);
  box-shadow       : var(--jp-shadow-primary);
}

.jp-option-check {
  position        : absolute;
  top             : var(--jp-space-4);
  right           : var(--jp-space-4);
  width           : 24px;
  height          : 24px;
  border-radius   : var(--jp-radius-full);
  border          : 2px solid var(--jp-border-color);
  background-color: var(--jp-white);
  display         : flex;
  align-items     : center;
  justify-content : center;
  transition      : all var(--jp-transition-fast);
}
.jp-option-card.active .jp-option-check {
  background-color: var(--jp-primary);
  border-color    : var(--jp-primary);
  color           : var(--jp-white);
}
.jp-option-check i { font-size: 11px; opacity: 0; transition: opacity var(--jp-transition-fast); }
.jp-option-card.active .jp-option-check i { opacity: 1; }

.jp-option-icon { font-size: 2rem; color: var(--jp-primary); opacity: 0.7; transition: opacity var(--jp-transition-fast); }
.jp-option-card.active .jp-option-icon { opacity: 1; }

.jp-option-title  { font-size: var(--jp-text-lg); font-weight: var(--jp-fw-bold); color: var(--jp-gray-900); line-height: var(--jp-lh-tight); }
.jp-option-price  { font-size: var(--jp-text-sm); font-weight: var(--jp-fw-semibold); color: var(--jp-primary); }
.jp-option-desc   { font-size: var(--jp-text-xs); color: var(--jp-gray-500); line-height: var(--jp-lh-relaxed); }

.jp-option-tag {
  display         : inline-flex;
  padding         : 2px var(--jp-space-2);
  background-color: var(--jp-primary-subtle);
  border-radius   : var(--jp-radius-sm);
  font-size       : var(--jp-text-xs);
  font-weight     : var(--jp-fw-semibold);
  color           : var(--jp-primary);
  width           : fit-content;
}
.jp-option-card.active .jp-option-tag { background-color: rgba(30,58,138,0.15); }

.jp-builder-nav {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding-top    : var(--jp-space-6);
  border-top     : var(--jp-border-width) solid var(--jp-border-color);
  margin-top     : var(--jp-space-4);
}

.jp-builder-comp-row {
  display        : flex;
  align-items    : center;
  gap            : var(--jp-space-4);
  padding        : var(--jp-space-4) var(--jp-space-5);
  border-bottom  : var(--jp-border-width) solid var(--jp-border-color);
  transition     : background-color var(--jp-transition-fast);
}
.jp-builder-comp-row:last-child { border-bottom: none; }
.jp-builder-comp-row:hover { background-color: var(--jp-gray-50); }

.jp-builder-comp-slot {
  width           : 64px;
  text-align      : center;
  font-size       : var(--jp-text-xs);
  font-weight     : var(--jp-fw-black);
  color           : var(--jp-primary);
  text-transform  : uppercase;
  letter-spacing  : var(--jp-ls-wider);
  background-color: var(--jp-primary-subtle);
  padding         : var(--jp-space-2);
  border-radius   : var(--jp-radius-md);
  flex-shrink     : 0;
}

.jp-builder-comp-info { flex: 1; min-width: 0; }
.jp-builder-comp-brand { font-size: var(--jp-text-xs); font-weight: var(--jp-fw-semibold); color: var(--jp-gray-400); text-transform: uppercase; letter-spacing: var(--jp-ls-wider); }
.jp-builder-comp-name  { font-size: var(--jp-text-sm); font-weight: var(--jp-fw-semibold); color: var(--jp-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-builder-comp-price { font-size: var(--jp-text-sm); font-weight: var(--jp-fw-bold); color: var(--jp-price-sale); white-space: nowrap; flex-shrink: 0; }

.jp-builder-total-row {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : var(--jp-space-5);
  background-color: var(--jp-bg-surface);
  border-top     : var(--jp-border-width-2) solid var(--jp-border-color);
}
.jp-builder-total-label { font-size: var(--jp-text-base); font-weight: var(--jp-fw-bold); color: var(--jp-gray-700); text-transform: uppercase; letter-spacing: var(--jp-ls-wide); }
.jp-builder-total-price { font-size: var(--jp-text-3xl); font-weight: var(--jp-fw-extrabold); color: var(--jp-price-sale); }

.jp-pkg-card { background-color: var(--jp-white); border: var(--jp-border-width) solid var(--jp-border-color); border-radius: var(--jp-radius-xl); overflow: hidden; margin-bottom: var(--jp-space-5); }
.jp-pkg-card-header {
  padding         : var(--jp-space-5) var(--jp-space-5) var(--jp-space-4);
  border-bottom   : var(--jp-border-width) solid var(--jp-border-color);
  background-color: var(--jp-bg-surface);
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex-wrap       : wrap;
  gap             : var(--jp-space-3);
}
.jp-pkg-title { font-size: var(--jp-text-lg); font-weight: var(--jp-fw-extrabold); color: var(--jp-gray-900); text-transform: uppercase; letter-spacing: var(--jp-ls-tight); }

@media (max-width: 575px) {
  .jp-builder-hero-title   { font-size: var(--jp-text-3xl); }
  .jp-builder-panel-title  { font-size: var(--jp-text-2xl); }
  .jp-option-grid          { grid-template-columns: 1fr; }
  .jp-builder-progress-step-label { display: none; }
  .jp-builder-progress-divider    { width: 32px; }
}