/* =====================================================================
   Mackie Control Plus — configurator page styles (panel edition)
   ===================================================================== */

.cfg-intro { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.cfg-intro h2 { font-size: 30px; margin: 0 0 16px; }

#cfg-loading { color: var(--text-dim); padding: 2rem 0; }

/* Header, sub-header and pill styles now live in global.css. */

/* Toolbar (sticky while configuring) */
.cfg-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin: 1.5rem 0;
  background: var(--display, #161616);
  color: #f2f2f2;
  border-radius: var(--radius, 12px);
}
.cfg-toolbar .btn { white-space: nowrap; }
.cfg-toolbar__preset {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; color: #9a9a9a;
}
#cfg-changes { color: #9a9a9a; font-size: 0.9rem; margin-right: auto; }
.cfg-features {
  display: flex; gap: 0.9rem; flex-wrap: wrap;
  font-size: 0.82rem; color: #cfcfcf;
}
.cfg-features label { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }

/* Version selector (command catalog: Studio Pro 8 vs. legacy Studio One naming) */
.cfg-version-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 0 auto 1.5rem;
  font-size: 0.85rem;
  color: var(--text-dim, #5f6061);
}
.cfg-version-bar label { font-weight: 600; }
.cfg-version-note { flex-basis: 100%; font-size: 0.78rem; }

/* Layout: panel as large as possible, centered */
.cfg-layout {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

/* Panel with hotspots */
.cfg-panel {
  position: relative;
  width: 100%;        /* SVG background — scales sharp at any size */
}
.cfg-panel img { width: 100%; height: auto; display: block; border-radius: 8px; }

.cfg-spot {
  position: absolute;
  background: rgba(30, 200, 230, 0.12);
  border: 2px solid rgba(30, 200, 230, 0.75);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
}
.cfg-spot:hover { background: rgba(30, 200, 230, 0.3); }
.cfg-spot.is-selected {
  border-color: var(--cyan, #1ec8e6);
  box-shadow: 0 0 0 3px rgba(30, 200, 230, 0.35);
  background: rgba(30, 200, 230, 0.3);
}
.cfg-spot.is-changed {
  border-color: var(--orange, #ff7a00);
  background: rgba(255, 122, 0, 0.22);
}
.cfg-spot.is-blank {
  border-style: dashed;
  background: transparent;
}
.cfg-spot--fixed {
  border: 1px dashed rgba(120, 120, 120, 0.6);
  background: transparent;
  cursor: not-allowed;
}
.cfg-spot--fader { border-radius: 10px; }
.cfg-spot--info { border-style: dashed; }

.cfg-editor__img {
  max-width: 100%;
  border: 1px solid var(--edge, #c4c2ba);
  border-radius: var(--radius-sm, 8px);
  margin-top: 0.75rem;
}

/* Modal overlay */
.cfg-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 10, 10, 0.55);
}
.cfg-modal[hidden] { display: none; }
.cfg-modal__box {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: min(85vh, 720px);
  overflow-y: auto;
  background: var(--panel, #f4f3ef);
  border: 1px solid var(--edge, #c4c2ba);
  border-radius: var(--radius, 12px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.cfg-modal__close {
  position: absolute;
  top: 0.5rem; right: 0.6rem;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  border: 0;
  background: transparent;
  color: var(--text-dim, #5f6061);
  cursor: pointer;
}
.cfg-modal__close:hover { color: var(--text, #2a2a28); }
body.cfg-modal-open { overflow: hidden; }

/* Editor content (inside the modal) */
.cfg-editor {
  padding: 1rem 1.25rem;
  min-height: 160px;
}
.cfg-layer--fixed { opacity: 0.75; }
.cfg-editor__title {
  margin: 0.25rem 0 0.75rem;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}
.cfg-editor__hint { color: var(--text-dim, #5f6061); }
.cfg-editor__device {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim, #5f6061);
  margin: -0.5rem 0 0.75rem;
}

/* Layer rows inside the editor */
.cfg-layer {
  border-top: 1px solid var(--edge, #c4c2ba);
  padding: 0.75rem 0;
}
.cfg-layer__head {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.cfg-key__layer {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--orange-dim, #e86a00);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}
.cfg-blank {
  font-size: 0.8rem; color: var(--text-dim, #5f6061);
  display: flex; align-items: center; gap: 0.3rem;
}
.cfg-picker { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.cfg-select, .cfg-custom {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--edge-dark, #a6a49c);
  border-radius: var(--radius-sm, 8px);
  background: #fff;
  color: var(--text, #2a2a28);
  max-width: 100%;
}
.cfg-select--cat { width: 160px; }
.cfg-select--cmd { min-width: 220px; flex: 1; }
.cfg-custom { width: 170px; }

.cfg-orig {
  font-size: 0.78rem;
  color: var(--text-dim, #5f6061);
  margin-top: 0.35rem;
}
.cfg-reset {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  margin-left: auto;
  border: 1px solid var(--edge-dark, #a6a49c);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim, #5f6061);
  cursor: pointer;
}
.cfg-reset:hover { color: var(--text, #2a2a28); border-color: var(--text, #2a2a28); }

/* Fader mode radios */
.cfg-radio {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.5rem 0; cursor: pointer;
}
.cfg-radio input { margin-top: 0.3rem; }
.cfg-radio small { color: var(--text-dim, #5f6061); }

/* How-to steps */
.cfg-steps { counter-reset: step; padding-left: 0; max-width: 720px; }
.cfg-steps li {
  list-style: none;
  counter-increment: step;
  position: relative;
  padding: 0 0 1rem 3rem;
}
.cfg-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -0.1rem;
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--display, #161616);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
}
.cfg-steps code {
  background: var(--bg-2, #e3e1da);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
}

@media (max-width: 820px) {
  .cfg-modal { padding: 0.75rem; }
}

/* Key features (converter style: orange bar + heading + description) */
.cfg-featuresec { padding-top: 2rem; }
.cfg-featuregrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 3rem;
  margin-top: 1rem;
}
.cfg-feature h3 {
  font-size: 21px;
  margin: 0 0 10px;
  color: var(--text, #2a2a28);
}
.cfg-feature h3::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 22px;
  margin-right: 10px;
  background: var(--orange, #ff7a00);
  border-radius: 2px;
  vertical-align: -4px;
}
.cfg-feature p {
  color: var(--text-dim, #5f6061);
  font-size: 16px;
  margin: 0;
}
@media (max-width: 720px) {
  .cfg-featuregrid { grid-template-columns: 1fr; }
}

/* Transport option (grid navigation vs. plain rewind/fast forward) */
.cfg-options {
  max-width: 620px;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--panel, #f4f3ef);
  border: 1px solid var(--edge, #c4c2ba);
  border-radius: var(--radius, 12px);
}
.cfg-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--text, #2a2a28);
}
.cfg-option input { margin-top: 0.25rem; flex: 0 0 auto; }
.cfg-grid-note {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-dim, #5f6061);
}
.cfg-grid-note[hidden] { display: none; }

/* Download button below the panel */
.cfg-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 2.5rem;
}
.cfg-license {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim, #5f6061);
}
.cfg-download .btn { font-size: 1.05rem; padding: 0.8rem 2rem; }

.cfg-coffee { display: inline-block; margin-top: 0.5rem; }

.cfg-credits {
  max-width: 720px;
  margin: 0 auto 2rem;
  font-size: 0.82rem;
  color: var(--text-dim, #5f6061);
  text-align: center;
}

.cfg-download__buttons { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }