/* ========== Layout ========== */
.pmq-wrap {
  max-width: 760px;
  margin: 0 auto;              /* center on page */
  padding: 22px;
  border-radius: 18px;
  background: var(--pmq-wrap-bg, #ffffff);
  color: var(--pmq-wrap-text, #1a1a1a);
}

/* Title / intro */

.pmq-title { 
  margin: 0 0 8px;
  color: var(--pmq-title-text, var(--pmq-wrap-text, #1a1a1a));
}
.pmq-intro { margin: 0 0 18px; opacity: 0.9; }

/* ========== Questions ========== */
.pmq-question {
  border: 1px solid var(--pmq-card-border, rgba(0,0,0,0.10));
  border-radius: 16px;
  padding: 16px;
  margin: 0 0 16px;
  background: transparent;
}

.pmq-question legend {
  font-weight: 700;
  margin-bottom: 12px;
}

.pmq-qnum { opacity: 0.7; margin-right: 6px; }

.pmq-options {
  display: grid;
  gap: 12px;
  padding: 6px 0 0;
}

/* Turn radio options into “pill buttons” */
.pmq-option {
  display: block;
  cursor: pointer;
}

.pmq-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pmq-option span {
  display: block;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--pmq-option-bg, #f2f2f2);
  color: var(--pmq-option-text, #1a1a1a);
  border: 1px solid var(--pmq-btn-border, rgba(0,0,0,0.20));
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.pmq-option:hover span {
  transform: translateY(-1px);
}

.pmq-option input:checked + span {
  background: var(--pmq-option-selected-bg, #f28c28);
  color: var(--pmq-option-selected-text, #ffffff);
  border-color: transparent;
}

/* Errors */
.pmq-errors { margin: 0 0 12px; color: #b00020; }
.pmq-errors ul { margin: 0; padding-left: 18px; }
.pmq-missing { outline: 2px solid rgba(176,0,32,0.35); }

/* ========== Stepper ========== */
.pmq-stepper {
  margin: 18px 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.pmq-progress {
  font-size: 14px;
  color: var(--pmq-progress-text, rgba(0,0,0,0.70));
}

.pmq-nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Buttons */
.pmq-back,
.pmq-next,
.pmq-submit,
.pmq-reset {
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--pmq-btn-border, rgba(0,0,0,0.20));
}

.pmq-next,
.pmq-submit {
  background: var(--pmq-btn-bg, #f28c28);
  color: var(--pmq-btn-text, #ffffff);
  border-color: transparent;
}

.pmq-back,
.pmq-reset {
  background: var(--pmq-btn-secondary-bg, #ffffff);
  color: var(--pmq-btn-secondary-text, #1a1a1a);
}

.pmq-back[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========== Result ========== */
.pmq-result { margin-top: 18px; }

.pmq-result-card {
  border: 1px solid var(--pmq-result-border, var(--pmq-card-border, rgba(0,0,0,0.10)));
  border-radius: 16px;
  padding: 16px;
  background: var(--pmq-result-bg, transparent);
}


.pmq-result-title { margin: 0 0 8px; }
.pmq-result-desc { margin: 0 0 12px; font-size:18px!important; color: var(--pmq-result-text, var(--pmq-wrap-text, #1a1a1a));}

.pmq-result-cta {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  background: var(--pmq-result-cta-bg, var(--pmq-btn-bg, #f28c28));
  color: var(--pmq-result-cta-text, var(--pmq-btn-text, #ffffff));
}

.pmq-result-meta {
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.7;
}

.pmq-result-prefix {
  margin: 0 0 4px;
  font-size: 14px;
 color: var(--pmq-result-prefix-text, rgba(0,0,0,0.70));
}

/* Step mode: hide all questions unless explicitly active */
.pmq-question { display: none !important; }
.pmq-question.pmq-active { display: block !important; }

/* Force result title color to use the design variable (beats theme heading styles) */
.pmq-wrap .pmq-result-title {
  color: var(--pmq-result-title-text, var(--pmq-wrap-text, #1a1a1a)) !important;
}

/* When showing results, hide the quiz UI no matter what */
.pmq-wrap.pmq-showing-result .pmq-question,
.pmq-wrap.pmq-showing-result .pmq-stepper,
.pmq-wrap.pmq-showing-result .pmq-errors {
  display: none !important;
}

.pmq-wrap.pmq-showing-result .pmq-result {
  display: block !important;
}
/* Outcome CTA should always use admin-controlled colors (beat theme link styles) */
.pmq-wrap .pmq-result-cta,
.pmq-wrap .pmq-result-cta:visited,
.pmq-wrap .pmq-result-cta:hover,
.pmq-wrap .pmq-result-cta:focus,
.pmq-wrap .pmq-result-cta:active {
  color: var(--pmq-result-cta-text, #ffffff) !important;
  background: var(--pmq-result-cta-bg, var(--pmq-btn-bg, #f28c28)) !important;
  text-decoration: none !important;
}

/* Force admin-controlled CTA colors in ALL states (including default :link) */
.pmq-wrap .pmq-result .pmq-result-card a.pmq-result-cta:link,
.pmq-wrap .pmq-result .pmq-result-card a.pmq-result-cta:visited,
.pmq-wrap .pmq-result .pmq-result-card a.pmq-result-cta:hover,
.pmq-wrap .pmq-result .pmq-result-card a.pmq-result-cta:focus,
.pmq-wrap .pmq-result .pmq-result-card a.pmq-result-cta:active {
  color: var(--pmq-result-cta-text, #ffffff) !important;
  background-color: var(--pmq-result-cta-bg, var(--pmq-btn-bg, #f28c28)) !important;
  text-decoration: none !important;
}

/* If the theme is styling inner spans (some button styles do), force inherit */
.pmq-wrap .pmq-result .pmq-result-card a.pmq-result-cta * {
  color: inherit !important;
}

.pmq-reset {
  background: var(--pmq-btn-secondary-bg);
  color: var(--pmq-btn-secondary-text);
  border: 1px solid var(--pmq-btn-border);
  padding: 10px 18px;
  cursor: pointer;
  border-radius: 4px;
}

.pmq-reset:hover {
  opacity: 0.9;
}

.pmq-reset {
  background: var(--pmq-btn-secondary-bg);
  color: var(--pmq-btn-secondary-text);
  border: 1px solid var(--pmq-btn-border);
  padding: 10px 18px;
  border-radius: 4px;
  cursor: pointer;
 display: block;
  margin: 24px 0 0 auto;
}

.pmq-reset:hover {
  opacity: 0.9;
}

.pmq-reset {
  display: none;
}

.pmq-wrap.pmq-showing-result ~ .pmq-reset,
.pmq-wrap.pmq-showing-result .pmq-reset {
  display: inline-block;
}