/* AquaMania Catalog 2026 — Project Builder styles.
   Wizard 5 шагов: дисциплина → параметры → опции → закупка → результат. */

.pb-shell { max-width: 1200px; margin: 0 auto; padding: 48px 40px; }
.pb-header { margin-bottom: 32px; }
.pb-header .label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.pb-header h1 { font-family: 'Source Serif Pro', serif; font-size: clamp(36px, 5vw, 56px); line-height: 1.05; letter-spacing: -1.5px; margin-bottom: 12px; }
.pb-header h1 em { font-style: italic; color: var(--accent); }
.pb-header p { font-family: 'Source Serif Pro', serif; font-size: 18px; line-height: 1.5; color: var(--ink-soft); max-width: 720px; }

/* Progress bar — 5 steps */
.pb-progress { display: flex; gap: 4px; margin: 32px 0 48px; background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 16px; padding: 6px; }
.pb-step-pill { flex: 1; padding: 12px 14px; border-radius: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; transition: all 0.25s; cursor: pointer; border: none; background: transparent; text-align: left; }
.pb-step-pill .pb-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-soft); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.pb-step-pill.is-done { color: var(--ink); }
.pb-step-pill.is-done .pb-step-num { background: var(--accent); color: white; }
.pb-step-pill.is-active { background: var(--ink); color: white; }
.pb-step-pill.is-active .pb-step-num { background: var(--accent); color: white; }
.pb-step-pill:hover:not(.is-active) { background: var(--bg-soft); }
.pb-step-pill:disabled { cursor: not-allowed; opacity: 0.5; }
.pb-step-pill .pb-step-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Step panel */
.pb-step-panel { display: none; }
.pb-step-panel.is-active { display: block; animation: pb-fade 0.3s ease; }
@keyframes pb-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.pb-step-title { font-family: 'Source Serif Pro', serif; font-size: 32px; margin-bottom: 8px; line-height: 1.15; }
.pb-step-title em { font-style: italic; color: var(--accent); }
.pb-step-hint { font-size: 14px; color: var(--ink-soft); margin-bottom: 32px; max-width: 640px; line-height: 1.5; }

/* Step 1 — Discipline cards */
.pb-disc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.pb-disc-card { background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 18px; padding: 28px 24px; text-align: left; cursor: pointer; transition: all 0.25s; position: relative; overflow: hidden; }
.pb-disc-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.pb-disc-card.is-selected { background: var(--ink); color: white; border-color: var(--ink); }
.pb-disc-card.is-selected .pb-disc-context { color: rgba(255,255,255,0.65); }
.pb-disc-card .pb-disc-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); border-radius: 12px; margin-bottom: 16px; color: var(--accent); }
.pb-disc-card.is-selected .pb-disc-icon { background: rgba(255,255,255,0.1); color: var(--accent); }
.pb-disc-card .pb-disc-icon svg { width: 24px; height: 24px; }
.pb-disc-card h3 { font-family: 'Source Serif Pro', serif; font-size: 22px; margin-bottom: 6px; }
.pb-disc-card .pb-disc-context { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 14px; }
.pb-disc-card .pb-disc-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.pb-disc-card.is-selected .pb-disc-meta { color: var(--accent); }
@media (max-width: 900px) { .pb-disc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pb-disc-grid { grid-template-columns: 1fr; } }

/* Step 2 / 3 / 4 — form grid */
.pb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.pb-form-row { background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 16px; padding: 22px 24px; }
.pb-form-row label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 600; }
.pb-form-row .pb-help { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.pb-input { width: 100%; padding: 10px 14px; border: 1px solid var(--hairline-strong); border-radius: 10px; font-family: 'Source Serif Pro', serif; font-size: 18px; background: var(--bg); }
.pb-input:focus { border-color: var(--accent); outline: none; }
.pb-button-group { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-btn { padding: 8px 14px; border: 1px solid var(--hairline-strong); border-radius: 10px; background: var(--bg-card); font-family: 'Inter Tight', sans-serif; font-size: 13px; cursor: pointer; transition: all 0.15s; }
.pb-btn:hover { border-color: var(--ink); }
.pb-btn.is-active { background: var(--ink); color: white; border-color: var(--ink); }
.pb-toggle { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hairline-strong); border-radius: 10px; cursor: pointer; transition: all 0.2s; background: var(--bg-card); }
.pb-toggle:hover { border-color: var(--ink); }
.pb-toggle input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.pb-toggle.is-active { background: var(--accent-soft); border-color: var(--accent); }
.pb-toggle .pb-toggle-label { flex: 1; }
.pb-toggle .pb-toggle-label strong { display: block; font-family: 'Source Serif Pro', serif; font-size: 16px; margin-bottom: 2px; }
.pb-toggle .pb-toggle-label span { font-size: 12px; color: var(--muted); }
.pb-toggle .pb-toggle-price { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); font-weight: 700; white-space: nowrap; }
@media (max-width: 700px) { .pb-form-grid { grid-template-columns: 1fr; } }

/* Step 5 — Result */
.pb-result-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-bottom: 32px; }
@media (max-width: 900px) { .pb-result-grid { grid-template-columns: 1fr; } }
.pb-result-left { background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 18px; padding: 32px; }
.pb-result-right { display: flex; flex-direction: column; gap: 16px; }
.pb-summary-card { background: var(--ink); color: white; border-radius: 18px; padding: 28px; }
.pb-summary-card h4 { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 12px; }
.pb-summary-card .pb-sum-value { font-family: 'Source Serif Pro', serif; font-size: 44px; line-height: 1; }
.pb-summary-card .pb-sum-value em { font-style: italic; color: var(--accent); font-size: 0.7em; }
.pb-summary-card .pb-sum-note { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 8px; }
.pb-result-left h3 { font-family: 'Source Serif Pro', serif; font-size: 22px; margin-bottom: 16px; }
.pb-spec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pb-spec-table th, .pb-spec-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--hairline); }
.pb-spec-table th { background: var(--bg-soft); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.pb-spec-table td.pb-sku { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--accent); white-space: nowrap; }
.pb-spec-table td.pb-qty { text-align: right; font-family: 'JetBrains Mono', monospace; }
.pb-spec-table td.pb-price { text-align: right; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.pb-spec-table tr.pb-section-head td { background: var(--bg); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding-top: 16px; padding-bottom: 6px; }
.pb-spec-table tfoot td { padding-top: 14px; font-weight: 700; border-bottom: none; border-top: 2px solid var(--ink); }
.pb-spec-table tfoot .pb-grand { font-family: 'Source Serif Pro', serif; font-size: 20px; }

.pb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pb-action-btn { flex: 1; min-width: 180px; padding: 14px 18px; border-radius: 14px; font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; border: 1px solid var(--hairline-strong); background: var(--bg-card); }
.pb-action-btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.pb-action-btn.is-primary { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.pb-action-btn.is-primary:hover { background: var(--ink); color: white; }
.pb-action-btn.is-dark { background: var(--ink); color: white; border-color: var(--ink); }

.pb-anchor-cases { background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 16px; padding: 24px; }
.pb-anchor-cases h4 { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.pb-anchor-case { padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; line-height: 1.5; }
.pb-anchor-case:last-child { border-bottom: none; }
.pb-anchor-case strong { font-family: 'Source Serif Pro', serif; font-size: 15px; }
.pb-anchor-case span { color: var(--muted); display: block; font-size: 12px; margin-top: 2px; }

/* Navigation buttons */
.pb-nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.pb-nav-btn { padding: 12px 24px; border-radius: 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: all 0.2s; border: 1px solid var(--hairline-strong); background: var(--bg-card); }
.pb-nav-btn:hover { border-color: var(--ink); }
.pb-nav-btn.is-primary { background: var(--ink); color: white; border-color: var(--ink); }
.pb-nav-btn.is-primary:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.pb-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Anchor preset card (СШ Юность) */
.pb-anchor-preset { background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg) 100%); border: 1px solid var(--accent); border-radius: 18px; padding: 24px; margin-bottom: 32px; }
.pb-anchor-preset .label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.pb-anchor-preset h4 { font-family: 'Source Serif Pro', serif; font-size: 20px; margin-bottom: 8px; }
.pb-anchor-preset p { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 12px; }
.pb-anchor-preset .pb-load-preset { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; padding: 8px 16px; background: var(--ink); color: white; border-radius: 12px; cursor: pointer; border: none; }
.pb-anchor-preset .pb-load-preset:hover { background: var(--accent); color: var(--ink); }

/* Compact stats row for step result */
.pb-result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.pb-result-stat { padding: 16px; background: var(--bg-soft); border-radius: 12px; }
.pb-result-stat-val { font-family: 'Source Serif Pro', serif; font-size: 22px; line-height: 1.1; color: var(--ink); }
.pb-result-stat-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
@media (max-width: 700px) { .pb-result-stats { grid-template-columns: 1fr 1fr; } }

/* ============================================
   EMPTY STATE (UX#3 fix · Шаг 5 без выбора дисциплины)
   ============================================ */
.pb-empty-state {
  text-align: center;
  padding: var(--space-9, 96px) var(--space-5, 24px);
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card-lg, 20px);
  margin-bottom: var(--space-6, 32px);
}
.pb-empty-icon {
  font-size: 64px;
  margin-bottom: var(--space-4, 16px);
  filter: grayscale(40%);
  opacity: 0.65;
}
.pb-empty-title {
  font-family: var(--font-body-serif, 'Source Serif Pro', serif);
  font-size: var(--text-3xl, 28px);
  font-weight: 400;
  letter-spacing: var(--tracking-h-tight, -0.4px);
  margin-bottom: var(--space-3, 12px);
  line-height: var(--lh-snug, 1.2);
}
.pb-empty-desc {
  font-family: var(--font-body-serif, 'Source Serif Pro', serif);
  font-size: var(--text-lg, 17px);
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto var(--space-6, 32px);
  line-height: var(--lh-base, 1.55);
}
.pb-empty-cta {
  padding: var(--space-3, 14px) var(--space-6, 28px);
  border-radius: var(--radius-pill, 999px);
  border: none;
  background: var(--ink);
  color: var(--accent-on-dark, #FFFFFF);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs, 12px);
  letter-spacing: var(--tracking-mono, 1.4px);
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-base, 200ms) var(--ease-out);
}
.pb-empty-cta:hover {
  background: var(--accent);
  color: var(--ink);
}

/* Disabled state for step-pills (UX#3) */
.pb-step-pill.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pb-step-pill.is-disabled:hover {
  background: transparent;
}