/* ================================================================= */
/* Add-on Integration Quick Check – Styles                           */
/* Gescopet unter #quickcheck-app                                    */
/* Erbt Grundeigenschaften (Font, Farben, Zeilenhöhe) von Divi/WP    */
/* ================================================================= */

/* ── CSS-Variablen (nur Quick-Check-spezifische Werte) ── */
:root {
    --qc-muted: #6b6b6b;
    --qc-border: #e2e2e0;
    --qc-ink: #283655;
    --qc-blue: #7183a3;
    --qc-blue-light: rgba(113,131,163,0.10);
    --qc-raspberry: #e94282;
    --qc-radius: 8px;
  }

/* ── Grundlagen: erben von Divi ── */
#quickcheck-app, #quickcheck-app *, #quickcheck-app *::before, #quickcheck-app *::after {
  box-sizing: border-box;
}
#quickcheck-app {
  font-family: inherit;          /* von Divi: Open Sans */
  color: inherit;                /* von Divi: Textfarbe */
  background: transparent;       /* von Divi: Seitenhintergrund */
  line-height: inherit;          /* von Divi: Zeilenhöhe */
}
#quickcheck-app .container {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px 64px;
}

/* ── Progress bar ── */
#quickcheck-app .progress-wrap { margin-bottom: 36px; }
#quickcheck-app .progress-label {
  font-size: var(--fs-progress-label);
  color: var(--qc-muted);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
#quickcheck-app .progress-track {
  height: 4px;
  background: var(--qc-border);
  border-radius: 2px;
  overflow: hidden;
}
#quickcheck-app .progress-fill {
  height: 100%;
  background: var(--qc-ink);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ── Screens ── */
#quickcheck-app .screen { display: none; }
#quickcheck-app .screen.active { display: block; }

/* ── Welcome ── */
#quickcheck-app .welcome-title {
  font-size: var(--fs-welcome-title);
  font-weight: 600;
  color: var(--qc-ink);
  margin-bottom: 12px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#quickcheck-app .welcome-subtitle {
  font-size: var(--fs-welcome-subtitle);
  color: var(--qc-muted);
  margin-bottom: 36px;
  max-width: 580px;
  line-height: 1.6;
}
#quickcheck-app .welcome-text {
  font-size: var(--fs-welcome-info);
  line-height: 1.7;
  margin-bottom: 14px;
}
#quickcheck-app .welcome-meta {
  font-size: var(--fs-welcome-meta);
  color: var(--qc-muted);
  margin-bottom: 28px;
}

/* ── Dimension header ── */
#quickcheck-app .dim-intro {
  background: var(--qc-ink);
  color: white;
  padding: 24px 28px;
  border-radius: var(--qc-radius);
  margin-bottom: 28px;
}
#quickcheck-app .dim-intro-id {
  font-size: var(--fs-dim-intro-id);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.7;
  margin-bottom: 4px;
}
#quickcheck-app .dim-intro h2 {
  font-size: calc(var(--fs-dim-intro-title) + 2px);
  font-weight: 600;
  margin-bottom: 2px;
  color: white !important;
}
#quickcheck-app .dim-intro p {
  font-size: var(--fs-dim-intro-desc);
  opacity: 0.85;
  line-height: 1.5;
  margin-top: 4px;
  color: white !important;
}

/* ── Question cards ── */
#quickcheck-app .question-card {
  background: transparent;
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius);
  padding: 28px;
  margin-bottom: 18px;
}
#quickcheck-app .question-card.has-answer {
  border-color: var(--qc-blue);
  border-left: 3px solid var(--qc-raspberry);
}
#quickcheck-app .q-number {
  font-size: var(--fs-question-number);
  color: var(--qc-muted);
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#quickcheck-app .q-text {
  font-size: var(--fs-question-text);
  font-weight: 400;
  margin-bottom: 4px;
  line-height: 1.6;
  color: var(--qc-ink);
}
#quickcheck-app .q-subtext {
  font-size: var(--fs-question-subtext);
  color: var(--qc-muted);
  font-style: italic;
  margin-bottom: 14px;
}
#quickcheck-app .q-text + .options-list { margin-top: 16px; }
#quickcheck-app .options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#quickcheck-app .option-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--qc-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--fs-option-label);
  line-height: 1.5;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}
#quickcheck-app .option-label:hover {
  background: var(--qc-blue-light);
  border-color: var(--qc-blue);
}
#quickcheck-app .option-label input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--qc-ink);
}
#quickcheck-app .option-label.selected {
  background: var(--qc-blue-light);
  border-color: var(--qc-blue);
}
#quickcheck-app .option-label.unknown-opt {
  border-style: dashed;
  color: var(--qc-muted);
}

/* ── Navigation ── */
#quickcheck-app .nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  gap: 12px;
}
#quickcheck-app .btn {
  font-family: inherit;
  font-size: var(--fs-button);
  font-weight: 500;
  padding: 12px 28px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}
#quickcheck-app .btn:hover { opacity: 0.88; }
#quickcheck-app .btn-primary {
  background: var(--qc-ink);
  color: white;
}
#quickcheck-app .btn-secondary {
  background: transparent;
  color: var(--qc-ink);
  border: 1px solid var(--qc-ink);
}
#quickcheck-app .btn-raspberry {
  background: var(--qc-raspberry);
  color: white;
}
#quickcheck-app .btn-ghost {
  background: transparent;
  color: var(--qc-muted);
  padding: 12px 16px;
}
#quickcheck-app .nav-spacer { flex: 1; }

/* ── Results ── */
#quickcheck-app .results-title {
  font-size: var(--fs-results-title);
  font-weight: 600;
  color: var(--qc-ink);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#quickcheck-app .results-subtitle {
  font-size: var(--fs-results-subtitle);
  color: var(--qc-muted);
  margin-bottom: 36px;
  line-height: 1.6;
}

#quickcheck-app .chart-wrap {
  background: transparent;
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius);
  padding: 36px 28px;
  margin-bottom: 14px;
  text-align: center;
}
#quickcheck-app .chart-wrap svg {
  max-width: 100%;
  height: auto;
}
#quickcheck-app .download-row {
  text-align: right;
  margin-bottom: 32px;
}
#quickcheck-app .download-row .btn {
  font-size: var(--fs-download-btn);
  padding: 8px 16px;
}

/* ── Dimension result cards ── */
#quickcheck-app .dim-result {
  background: transparent;
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius);
  padding: 28px;
  margin-bottom: 16px;
}
#quickcheck-app .dim-result h3 {
  font-size: var(--fs-dim-result-title);
  font-weight: 600;
  margin-bottom: 6px;
}
#quickcheck-app .dim-result-meta {
  font-size: var(--fs-dim-result-meta);
  color: var(--qc-muted);
  margin-bottom: 18px;
}
#quickcheck-app .score-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
#quickcheck-app .score-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-score-bar-label);
}
#quickcheck-app .score-bar-label {
  width: 110px;
  flex-shrink: 0;
  color: var(--qc-muted);
}
#quickcheck-app .score-bar-track {
  flex: 1;
  height: 8px;
  background: var(--qc-border);
  border-radius: 4px;
  overflow: hidden;
}
#quickcheck-app .score-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
#quickcheck-app .score-bar-value {
  width: 32px;
  text-align: right;
  font-weight: 600;
  font-size: var(--fs-score-bar-value);
}
#quickcheck-app .readiness-badge {
  display: inline-block;
  font-size: var(--fs-readiness-badge);
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 4px;
  margin-bottom: 14px;
}
#quickcheck-app .unknown-notice {
  font-size: var(--fs-unknown-notice);
  color: #b8860b;
  margin-top: 10px;
}

/* ── CTA ── */
#quickcheck-app .cta-section {
  margin-top: 48px;
  background: var(--qc-ink);
  color: white;
  border-radius: var(--qc-radius);
  padding: 32px 28px;
  text-align: center;
}
#quickcheck-app .cta-section h3 {
  font-size: var(--fs-cta-title);
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#quickcheck-app .cta-section p {
  font-size: var(--fs-cta-text);
  opacity: 0.85;
  margin-bottom: 24px;
  line-height: 1.6;
}
#quickcheck-app .cta-section .btn {
  background: white;
  color: var(--qc-ink);
  font-weight: 600;
}
#quickcheck-app .restart-row {
  text-align: center;
  margin-top: 28px;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  #quickcheck-app .container { padding: 24px 16px 48px; }
  #quickcheck-app .welcome-title { font-size: calc(var(--fs-welcome-title) - 4px); }
  #quickcheck-app .question-card { padding: 20px; }
  #quickcheck-app .chart-wrap { padding: 24px 14px; }
}