.ieq-wrap{
  --ieq-accent:#111;
  --ieq-accent-hover:#000;
  --ieq-radius:999px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--ieq-canvas-bg, transparent);
  padding: var(--ieq-canvas-pad, 0px);
  color: var(--ieq-text, #0f172a);
}

.ieq-landing,
.ieq-result-card{
  border: 1px solid var(--ieq-border, #e5e7eb);
  border-radius: var(--ieq-card-radius, 18px);
  padding: 18px;
  background: var(--ieq-card-bg, #fff);
}

.ieq-cover{
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}
.ieq-cover img{ width:100%; height:auto; display:block; }

.ieq-headline{ margin: 0 0 8px; font-size: var(--ieq-title-size, 22px); line-height: 1.2; color: var(--ieq-title, inherit); }
.ieq-subheadline{ margin: 0 0 14px; color: var(--ieq-muted, #475569); font-size: var(--ieq-desc-size, 16px); }

.ieq-actions{ margin-top: 12px; }

.ieq-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--ieq-accent);
  color: #fff;
  border: 0;
  border-radius: var(--ieq-radius);
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--ieq-button-size, 15px);
}
.ieq-btn:hover{ background: var(--ieq-accent-hover); color:#fff; }
.ieq-btn:disabled{ opacity:.6; cursor:not-allowed; }

.ieq-form{ margin-top: 12px; }

.ieq-q{ border: 1px solid var(--ieq-border, #e5e7eb); border-radius: var(--ieq-card-radius, 18px); padding: 30px; background: var(--ieq-card-bg, #fff); }
.ieq-qtext{ margin: 0 0 12px; font-size: var(--ieq-question-size, 18px); }
.ieq-options{ display:flex; flex-direction:column; gap:10px; }

.ieq-opt{
  border: 1px solid var(--ieq-option-border, var(--ieq-border, #e5e7eb));
  border-radius: var(--ieq-option-radius, 14px);
  padding: 10px 12px;
  display:flex;
  gap:10px;
  align-items:center;
  cursor:pointer;
  background: var(--ieq-option-bg, #fff);
}
.ieq-opt input{ margin:0; }
.ieq-opt span{ flex:1; font-size: var(--ieq-answer-size, 16px); }
.ieq-opt:hover{ background: var(--ieq-option-hover-bg, var(--ieq-option-bg, #fff)); }
.ieq-opt.is-selected{
  background: var(--ieq-selected-bg, var(--ieq-accent));
  border-color: var(--ieq-selected-bg, var(--ieq-accent));
}
.ieq-opt.is-selected span{ color: var(--ieq-selected-text, #fff); }

.ieq-nav{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top: 14px;
}

.ieq-errorline{
  color:#b91c1c;
  margin-top: 10px;
}

.ieq-lead{
  border: 1px solid var(--ieq-border, #e5e7eb);
  border-radius: var(--ieq-card-radius, 18px);
  padding: 18px;
  background: var(--ieq-card-bg, #fff);
}
.ieq-lead-title{ margin: 0 0 12px; font-size: 18px; }
.ieq-lead-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px){
  .ieq-lead-grid{ grid-template-columns: 1fr; }
}

.ieq-lead .ieq-field label{ display:block; font-weight:600; margin-bottom:6px; }
.ieq-lead .ieq-field input{
  width:100%;
  border:1px solid var(--ieq-border, #e5e7eb);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: var(--ieq-input-size, 16px);
}

.ieq-privacy{ color: var(--ieq-muted, #64748b); margin: 10px 0 0; font-size: 13px; text-align: center; }

@media (max-width: 600px){
  .ieq-headline{ font-size: var(--ieq-title-size-mobile, var(--ieq-title-size, 22px)); }
  .ieq-subheadline{ font-size: var(--ieq-desc-size-mobile, var(--ieq-desc-size, 16px)); }
  .ieq-qtext{ font-size: var(--ieq-question-size-mobile, var(--ieq-question-size, 18px)); }
  .ieq-opt span{ font-size: var(--ieq-answer-size-mobile, var(--ieq-answer-size, 16px)); }
  .ieq-btn{ font-size: var(--ieq-button-size-mobile, var(--ieq-button-size, 15px)); }
  .ieq-lead .ieq-field input{ font-size: var(--ieq-input-size-mobile, var(--ieq-input-size, 16px)); }
}


.ieq-result-title{ margin:0 0 10px; font-size: 20px; color: var(--ieq-title, inherit); }
.ieq-result-body{ color: var(--ieq-text, #0f172a); }

/* Results header */
.ieq-result-header{ text-align:center; margin-bottom: 10px; }
.ieq-result-label{
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 6px;
}
.ieq-loading{ text-align:center; font-weight:600; }

.ieq-header-left .ieq-headline,
.ieq-header-left .ieq-subheadline{ text-align:left; }
.ieq-header-center .ieq-headline,
.ieq-header-center .ieq-subheadline{ text-align:center; }
.ieq-header-right .ieq-headline,
.ieq-header-right .ieq-subheadline{ text-align:right; }

.ieq-buttons-left .ieq-actions{ text-align:left; }
.ieq-buttons-center .ieq-actions{ text-align:center; }
.ieq-buttons-right .ieq-actions{ text-align:right; }

/* Progress */

/* =========================
   Progress (INSIDE QUESTION)
   ========================= */

.ieq-progress{
  margin: 0 0 18px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.ieq-progress-text{
  font-size:14px;
  font-weight:600;
  opacity:0.85;
  text-align:center;
}

.ieq-progress-bar{
  width:min(360px, 100%);
  height:8px;
  background:rgba(0,0,0,0.1);
  border-radius:999px;
  overflow:hidden;
}

.ieq-progress-fill{
  height:100%;
  background: var(--ieq-progress-fill, rgba(0,0,0,0.6));
  width:0%;
  transition:width 200ms ease;
}
/* =========================
   Nav button arrows
   ========================= */

.ieq-back::before{
  content:"\2190\00A0"; /* ← */
}

.ieq-next::after{
  content:"\00A0\2192"; /* → */
}


/* room for progress area */
}

.ieq-q .ieq-progress{
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 52px); /* match card side padding */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.ieq-q .ieq-progress-text{
  width: 100%;
  text-align: center;
  margin: 0;
}

.ieq-q .ieq-progress-bar{
  width: min(360px, 100%);
  margin: 0;
}


/* Center progress block inside question card (no absolute positioning) */
.ieq-q .ieq-progress{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center !important;
  margin: 0 0 26px 0 !important; /* more space below progress */
}

.ieq-q .ieq-progress-text{
  width: 100%;
  text-align: center !important;
  margin: 0 !important;
}

.ieq-q .ieq-progress-bar{
  width: min(420px, 100%) !important;
  margin: 10px 0 0 0 !important;
}

/* More breathing room in question card */
.ieq-q{
  padding: 56px 28px 34px !important;
}

/* More space between question + buttons */
.ieq-qtext{ margin: 0 0 18px !important; }
.ieq-nav{ margin-top: 26px !important; }

/* Arrows on buttons */
.ieq-start::after{
  content: " →" !important;
  font-weight: 700;
}

.ieq-back::before{
  content: "← " !important;
  font-weight: 700;
}

.ieq-next::after{
  content: " →" !important;
  font-weight: 700;
}



/* ===== CACHEBUST PATCH: Center progress + arrows ===== */

/* Center progress inside question card */
.ieq-q .ieq-progress{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center !important;
  margin: 0 0 28px 0 !important;
}

.ieq-q .ieq-progress-text{
  width:100% !important;
  text-align:center !important;
  margin:0 !important;
}

.ieq-q .ieq-progress-bar{
  width:min(420px, 100%) !important;
  margin:10px 0 0 0 !important;
}

/* Extra padding on question card */
.ieq-q{
  padding: 56px 28px 38px !important;
}

/* Space between question + buttons */
.ieq-qtext{ margin: 0 0 18px !important; }
.ieq-nav{ margin-top: 26px !important; }

/* Arrows */
.ieq-start::after{ content:" →" !important; font-weight:700; }
.ieq-back::before{ content:"← " !important; font-weight:700; }
.ieq-next::after{ content:" →" !important; font-weight:700; }


/* ===== UI POLISH: buttons, arrows, progress spacing + admin color ===== */

/* Progress fill color can be set via CSS var on .ieq-wrap (set server-side from admin option) */

/* Center the progress block inside the question card and prevent overlap */
.ieq-q .ieq-progress{
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center !important;

  margin: 0 0 30px 0 !important; /* space below progress so question never overlaps */
  padding-bottom: 10px;          /* extra breathing room under the bar */
  gap: 12px;
}

.ieq-q .ieq-progress-text{
  width: 100%;
  text-align: center !important;
  margin: 0 !important;
}

.ieq-q .ieq-progress-bar{
  width: min(420px, 100%) !important;
  margin: 0 !important;
}

/* Question card padding */
.ieq-q{
  padding: 26px 28px 34px !important;
}

/* Buttons: more padding */
.ieq-nav .ieq-btn{
  padding: 12px 18px !important;
}



.ieq-back::before{
  content: "❮  " !important;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}

.ieq-next::after{
  content: "  ❯" !important;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}


/* ===== BUTTON ARROWS (simple, spaced) ===== */

.ieq-start::after{
  content: " →";
  margin-left: 8px;
  font-weight: 600;
}

.ieq-back::before{
  content: "← ";
  margin-right: 8px;
  font-weight: 600;
}

.ieq-next::after{
  content: " →";
  margin-left: 8px;
  font-weight: 600;
}