/* Visual configurator (vaizdinė konfigūracija).
   Uses only tokens defined in styles.css — the spacing scale has no
   --space-5/--space-7, and an undefined var() silently zeroes a shorthand. */

.cfg-intro {
  max-width: 70ch;
  margin-bottom: var(--space-8);
}

.cfg-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .cfg-layout { grid-template-columns: 1fr; }
}

.cfg-panel {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.cfg-panel--questions {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  max-height: calc(100vh - var(--header-h) - var(--space-8));
  overflow-y: auto;
}

@media (max-width: 900px) {
  .cfg-panel--questions { position: static; max-height: none; }
}

.cfg-main { min-width: 0; }

.cfg-heading {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-4);
}

/* ---------------------------------------------------------- system picker */

.cfg-systems {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.cfg-system {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}

.cfg-system:hover { border-color: var(--color-primary); }

.cfg-system--active {
  border-color: var(--color-primary);
  background: #FDF3F3;
}

.cfg-system__title {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.cfg-system__intro {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------- questions */

.cfg-steps { display: block; }

.cfg-step {
  border: 0;
  border-top: 1px solid var(--color-accent);
  padding: var(--space-4) 0 0;
  margin: 0 0 var(--space-6);
}

.cfg-step:first-child { border-top: 0; padding-top: 0; }

.cfg-step__legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  padding: 0;
  margin-bottom: var(--space-2);
}

.cfg-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.cfg-step__help,
.cfg-step__empty {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.cfg-options { display: grid; gap: var(--space-2); }

.cfg-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.cfg-option:hover { border-color: var(--color-primary); }

.cfg-option--active {
  border-color: var(--color-primary);
  background: #FDF3F3;
}

.cfg-option input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--color-primary); }

.cfg-option__body { display: block; }

.cfg-option__label {
  display: block;
  font-weight: var(--fw-medium);
  line-height: 1.35;
}

.cfg-option__help {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.cfg-option__price {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-top: var(--space-1);
}

/* ----------------------------------------------------------------- counter */

.cfg-counter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.cfg-counter__btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-secondary);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}

.cfg-counter__btn:hover { background: var(--color-primary); color: var(--color-text-on-dark); }

.cfg-counter__value { min-width: 72px; text-align: center; font-weight: var(--fw-bold); }

/* --------------------------------------------------------------- schematic */

.cfg-schematic {
  overflow-x: auto;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.cfg-schematic svg { display: block; min-width: 640px; }

.cfg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.cfg-legend__item { display: inline-flex; align-items: center; gap: var(--space-1); }

.cfg-legend__swatch {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

/* ---------------------------------------------------------------- estimates */

/* The estimate tables carry long component names in column one and three
   nowrap numeric columns, so their min-content width exceeds a phone
   viewport. Each table scrolls inside its own container; the page body must
   never scroll sideways. #cfg-equipment / #cfg-install hold the tables the
   calculator injects; the saved-configurations list puts one straight into a
   panel. */
#cfg-equipment,
#cfg-install,
.cfg-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cfg-panel > .cfg-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cfg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.cfg-table th,
.cfg-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-accent);
}

.cfg-table th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}

.cfg-table td:nth-child(2),
.cfg-table td:nth-child(3),
.cfg-table td:nth-child(4),
.cfg-table th:nth-child(2),
.cfg-table th:nth-child(3),
.cfg-table th:nth-child(4) { text-align: right; white-space: nowrap; }

.cfg-table tr:last-child td { border-bottom: 0; }

.cfg-quoted { color: var(--color-warning); font-size: var(--fs-xs); }

.cfg-empty,
.cfg-note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.cfg-note { margin-top: var(--space-3); }

/* ----------------------------------------------------------------- summary */

.cfg-panel--summary { border: 2px solid var(--color-primary); }

.cfg-totals { margin-bottom: var(--space-4); }

.cfg-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-accent);
}

.cfg-total--grand {
  border-bottom: 0;
  font-size: var(--fs-xl);
  padding-top: var(--space-3);
}

.cfg-total--grand strong { color: var(--color-primary); }

.cfg-field {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-1);
}

.cfg-input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-base);
  margin-bottom: var(--space-4);
}

.cfg-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.cfg-actions .btn { flex: 1 1 auto; }

.cfg-status { font-size: var(--fs-sm); margin: var(--space-3) 0 0; min-height: 1.2em; }
.cfg-status--error { color: var(--color-error); }
.cfg-status--success { color: var(--color-success); }