/* =========================================
   WP Intent Quiz – Premium Front-End Styles
   File: assets/front.css
   ========================================= */

.ieq-wrap{
  /* Theme variables (can be overridden inline or via admin-generated CSS vars) */
  --ieq-accent: #111;
  --ieq-accent-hover: #000;

  --ieq-text: #0f172a;
  --ieq-muted: #475569;

  --ieq-border: #e5e7eb;
  --ieq-card-bg: #fff;

  --ieq-option-bg: #fff;
  --ieq-option-border: var(--ieq-border);
  --ieq-option-hover-bg: rgba(15,23,42,.015);
  --ieq-selected-bg: rgba(17,17,17,.06);
  --ieq-selected-text: var(--ieq-text);

  /* Secondary buttons (Back/Restart) */
  --ieq-btn2-bg: transparent;
  --ieq-btn2-border: var(--ieq-border);
  --ieq-btn2-text: var(--ieq-text);
  --ieq-btn2-hover-bg: #f1f5f9;
  --ieq-btn2-hover-text: var(--ieq-text);

  --ieq-card-radius: 18px;
  --ieq-card-radius-mobile: var(--ieq-card-radius);
  --ieq-option-radius: 14px;
  --ieq-option-radius-mobile: var(--ieq-option-radius);
  --ieq-button-radius: 999px;

  --ieq-type-scale: 1;

  --ieq-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 20px rgba(16,24,40,.06);
  --ieq-shadow-hover: 0 2px 4px rgba(16,24,40,.08), 0 12px 26px rgba(16,24,40,.10);

  --ieq-ring: rgba(17,17,17,.18);

  --ieq-title-size: 22px;
  --ieq-desc-size: 16px;
  --ieq-question-size: 18px;
  --ieq-answer-size: 16px;
  --ieq-button-size: 15px;
  --ieq-input-size: 16px;

  --ieq-canvas-bg: transparent;
  --ieq-canvas-pad: 0px;
  --ieq-canvas-pad-mobile: var(--ieq-canvas-pad);

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--ieq-canvas-bg);
  padding: var(--ieq-canvas-pad);
  color: var(--ieq-text);

  max-width: var(--ieq-max-width, none);
  margin-left: auto;
  margin-right: auto;

  /* Enables overlay loaders (skip-landing boot) */
  position: relative;

  /*
    Note: We only hide the quiz (FOUC prevention) when the landing screen is skipped.
    That state is applied via the .ieq-pending class + an inline style on the wrapper.
  */
}

/* FOUC prevention: hide until front.js initialises and adds .ieq-ready */
.ieq-wrap.ieq-pending{
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 120ms ease-out;
}

/* Lightweight boot placeholder shown only when skipping landing and the form
   is initially hidden to prevent unstyled flashes. */
.ieq-boot{
  /* Overlay the quiz canvas so it doesn't render as its own "card" above the quiz */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: auto;
  max-width: none;

  border: 0;
  box-shadow: none;
  background: transparent;

  color: var(--ieq-muted);
  font-size: 14px;
  z-index: 50;
  pointer-events: none;
}

.ieq-wrap.ieq-ready{
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Skip landing page (Start straight on Q1)
   Some themes apply aggressive mobile-only rules that can override inline
   display styles. Ensure the landing card stays hidden when enabled. */
.ieq-wrap[data-skip-landing="1"] .ieq-landing{ display: none !important; }
.ieq-wrap[data-skip-landing="1"] .ieq-form{ display: block !important; }

/* Cards */

/* -----------------------------------------
   Layout: centred widget (premium)
   ----------------------------------------- */
.ieq-landing,
.ieq-q,
.ieq-lead,
.ieq-result-card{
  width: 100%;
  max-width: var(--ieq-max-width, 760px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 18px;
}

.ieq-landing,
.ieq-q,
.ieq-lead,
.ieq-result-card{
  border: 1px solid var(--ieq-border);
  border-radius: var(--ieq-card-radius);
  background: var(--ieq-card-bg);
  box-shadow: var(--ieq-shadow);
}

.ieq-landing,
.ieq-result-card{
  padding: 18px;
}

.ieq-q{
  padding: 26px 28px 30px;
  position: relative;
}

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

/* Typography */
.ieq-headline{
  margin: 0 0 8px;
  font-size: calc(var(--ieq-title-size) * var(--ieq-type-scale));
  line-height: 1.2;
  color: var(--ieq-title, inherit);
  letter-spacing: -0.01em;
}
.ieq-subheadline{
  margin: 0 0 14px;
  color: var(--ieq-muted);
  font-size: calc(var(--ieq-desc-size) * var(--ieq-type-scale));
  line-height: 1.45;
}
.ieq-qtext{
  margin: 0 0 16px;
  font-size: calc(var(--ieq-question-size) * var(--ieq-type-scale));
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* Buttons */
.ieq-actions{ margin-top: 12px; }
.ieq-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  background: var(--ieq-accent);
  color: #fff;

  border: 0;
  border-radius: var(--ieq-button-radius);
  padding: 12px 18px;

  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
  font-size: calc(var(--ieq-button-size) * var(--ieq-type-scale));

  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.ieq-btn:hover{
  background: var(--ieq-accent-hover);
  color:#fff;
  transform: translateY(-1px);
}
.ieq-btn:active{ transform: translateY(0); }
.ieq-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* Nav row */
.ieq-nav{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top: 18px;
}
.ieq-back{ background: var(--ieq-btn2-bg); color: var(--ieq-btn2-text); border: 1px solid var(--ieq-btn2-border); box-shadow:none; }
.ieq-back:hover{ background: var(--ieq-btn2-hover-bg); color: var(--ieq-btn2-hover-text); transform: translateY(-1px); }
.ieq-next, .ieq-start{ box-shadow: 0 10px 18px rgba(0,0,0,.08); }

/* Arrows (subtle) */
.ieq-start::after,
.ieq-next::after{ content:" →"; font-weight:700; }
.ieq-back::before{ content:"← "; font-weight:700; }

/* Options */
.ieq-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* "Why we're asking this" helper block (per question) */
.ieq-why{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.08);
  text-align: center;
}
.ieq-why-title{
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--ieq-accent);
}
.ieq-why-body{
  color: var(--ieq-muted);
  font-size: calc(14px * var(--ieq-type-scale));
  line-height: 1.5;
}

/* Premium option card */
.ieq-opt{
  position: relative;
  display:flex;
  align-items:center;
  gap:12px;

  border: 1px solid var(--ieq-option-border, var(--ieq-border));
  border-radius: var(--ieq-option-radius);
  background: var(--ieq-option-bg, #fff);

  /*
    Spacing:
    - Extra left padding creates a clearer gap between the radio and the answer copy
    - Extra right padding reserves a dedicated lane for the selected tick so it can never overlap text
  */
  padding: 16px 76px 16px 64px;
  cursor:pointer;

  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.ieq-opt:active{ transform: translateY(0) scale(0.995); }

.ieq-opt:hover{
  box-shadow: var(--ieq-shadow-hover);
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.12);
  background: var(--ieq-option-hover-bg, rgba(15,23,42,.015));
}

.ieq-opt:focus-within{
  outline: none;
  box-shadow: 0 0 0 4px var(--ieq-ring), var(--ieq-shadow-hover);
  border-color: rgba(0,0,0,.14);
}

/* Keep inputs accessible but visually clean */
.ieq-opt input[type=radio]{
  position:absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  margin:0;
  accent-color: var(--ieq-accent);
}

.ieq-opt span{
  flex:1;
  font-size: calc(var(--ieq-answer-size) * var(--ieq-type-scale));
  line-height: 1.35;
  color: var(--ieq-text);
}

/* Selected state: “premium” highlight */
.ieq-opt.is-selected{
  background: var(--ieq-selected-bg, rgba(17,17,17,.06));
  border-color: rgba(17,17,17,.28);
  box-shadow: 0 0 0 4px rgba(17,17,17,.08), var(--ieq-shadow);
}

.ieq-opt.is-selected span{
  color: var(--ieq-selected-text, var(--ieq-text));
}

/* Optional check indicator on right */
.ieq-opt.is-selected::after{
  content: "✓";
  position:absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);

  width: 26px;
  height: 26px;
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: var(--ieq-accent);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  pointer-events: none;
}

/* Progress (single consistent version) */

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

  /* Sticky header strip */
  position: sticky;
  top: 0;
  z-index: 10;

  background: rgba(255,255,255,.92);
  background: color-mix(in srgb, var(--ieq-card-bg, #fff) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  padding: 10px 0 12px;
  margin: -10px 0 14px;

  border-bottom: 1px solid var(--ieq-border);
  border-top-left-radius: var(--ieq-card-radius);
  border-top-right-radius: var(--ieq-card-radius);
}

/* Stretch sticky header to card edges (matches .ieq-q padding) */
.ieq-q > .ieq-progress{
  margin-left: -28px;
  margin-right: -28px;
  padding-left: 28px;
  padding-right: 28px;
}

.ieq-progress-text{
  font-size: 13px;
  font-weight: 700;
  opacity: 0.85;
  /* Reserve space so the canvas doesn't jump when JS fills in the text */
  line-height: 1.2;
  min-height: 1.2em;
}
.ieq-progress-bar{
  width: min(420px, 100%);
  height: 8px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow:hidden;
}
.ieq-progress-fill{
  height:100%;
  background: var(--ieq-progress-fill, rgba(0,0,0,0.65));
  width:0%;
  transition: width 220ms ease;
}

/* Lead form */
.ieq-lead{
  padding: 18px;
}
.ieq-lead-title{ margin: 0 0 12px; font-size: 18px; letter-spacing:-0.01em; }

.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:700;
  margin-bottom:6px;
}
.ieq-lead .ieq-field input{
  width:100%;
  border:1px solid var(--ieq-input-border, var(--ieq-border));
  border-radius: 12px;
  padding: 12px 12px;
  font-size: calc(var(--ieq-input-size) * var(--ieq-type-scale));
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
.ieq-lead .ieq-field input:focus{
  outline:none;
  box-shadow: 0 0 0 4px var(--ieq-ring);
  border-color: rgba(0,0,0,.20);
}

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

/* Lead capture copy + spacing */
.ieq-lead-title{
  text-align:center;
}

.ieq-lead-intro{
  text-align:center;
  max-width: 560px;
  margin: 10px auto 18px;
  line-height: 1.5;
}

/* Space between privacy copy and continue/submit button */
.ieq-lead .ieq-privacy{
  margin: 10px 0 18px;
}

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

/* Result */
.ieq-result-title{ margin:0 0 10px; font-size: 20px; color: var(--ieq-title, inherit); }
.ieq-result-body{ color: var(--ieq-text); line-height:1.5; }
.ieq-result-header{ text-align:center; margin-bottom: 10px; }
.ieq-result-label{
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.65;
  margin-bottom: 6px;
}
.ieq-loading{ text-align:center; font-weight:700; }

/* Premium results layout */
.ieq-result-card--premium{
  padding: 22px 22px 18px;
}
.ieq-result-top{
  text-align: center;
  margin-bottom: 14px;
}

/* Prominent score on results */
.ieq-result-score-big{
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  margin: 4px 0 10px;
  color: var(--ieq-title, rgba(15,23,42,.95));
}
.ieq-result-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom: 10px;
}
.ieq-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ieq-border);
  background: rgba(15,23,42,.03);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ieq-text);
}

/* Result badges (coloured) */
.ieq-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin: 10px 0 12px;
}

.ieq-pill--label{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.14);
  color: rgba(15,23,42,.85);
}

.ieq-pill--score{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.22);
  color: rgba(30,64,175,1);
}

.ieq-pill--band-low{
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.22);
  color: rgba(153,27,27,1);
}
.ieq-pill--band-mid{
  background: rgba(249,115,22,.12);
  border-color: rgba(249,115,22,.24);
  color: rgba(154,52,18,1);
}
.ieq-pill--band-high{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.22);
  color: rgba(22,101,52,1);
}
.ieq-pill--band-neutral{
  background: rgba(99,102,241,.10);
  border-color: rgba(99,102,241,.22);
  color: rgba(67,56,202,1);
}

/* Score gauge */
.ieq-gauge{
  width: min(520px, 100%);
  margin: 8px auto 0;
  text-align:center;
}
.ieq-gauge-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow:hidden;
}
.ieq-gauge-fill{
  height:100%;
  width: 0%;
  background: var(--ieq-progress-fill, rgba(0,0,0,0.65));
  transition: width 260ms ease;
}
.ieq-gauge-label{
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  opacity: .80;
}
.ieq-pill--key{
  opacity: .8;
}

/* Report-style result layout */
.ieq-report-rows{
  display:flex;
  flex-direction:column;
  gap: 14px;
  margin-top: 14px;
}
.ieq-report-block{
  border: 1px solid var(--ieq-border);
  border-radius: 16px;
  padding: 14px 14px 10px;
  text-align:left;
}
.ieq-report-block--bad{
  background: rgba(239,68,68,.07);
  border-color: rgba(239,68,68,.18);
}
.ieq-report-block--good{
  background: rgba(34,197,94,.07);
  border-color: rgba(34,197,94,.18);
}
.ieq-report-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ieq-report-title{
  font-weight: 900;
  letter-spacing: -0.01em;
}
.ieq-report-tag{
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ieq-border);
}
.ieq-report-tag--good{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.22);
  color: rgba(22,101,52,1);
}
.ieq-report-tag--bad{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.22);
  color: rgba(127,29,29,1);
}
.ieq-report-block ul{
  margin: 0;
  padding-left: 18px;
}
.ieq-report-block li{
  margin: 0 0 8px;
}
.ieq-result-body p{
  margin: 0 0 12px;
}
.ieq-result-list{
  margin: 0;
  padding-left: 18px;
}
.ieq-result-list li{
  margin: 0 0 8px;
}

.ieq-cta-card{
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--ieq-border);
  border-radius: 16px;
  background: rgba(15,23,42,.02);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.ieq-cta-title{
  font-weight: 900;
  margin-bottom: 2px;
}
.ieq-cta-sub{
  font-size: 13px;
  color: var(--ieq-muted);
  line-height: 1.35;
}
.ieq-cta-action .ieq-btn{
  white-space: nowrap;
}

.ieq-result-footer{
  margin-top: 14px;
  display:flex;
  justify-content:center;
}
.ieq-restart{
  background: var(--ieq-btn2-bg);
  border: 1px solid var(--ieq-btn2-border);
  color: var(--ieq-btn2-text);
  box-shadow:none;
}
.ieq-restart:hover{
  background: var(--ieq-btn2-hover-bg);
  color: var(--ieq-btn2-hover-text);
}

@media (max-width: 600px){
  .ieq-cta-card{
    flex-direction: column;
    align-items: stretch;
  }
  .ieq-cta-action .ieq-btn{
    width: 100%;
  }
}

/* Header & button alignment helpers */
.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; }

/* -----------------------------------------
   Subtle Motion: step transitions
   ----------------------------------------- */
.ieq-step{
  will-change: opacity, transform;
}

.ieq-enter{
  animation: ieqIn 220ms ease forwards;
}
.ieq-exit{
  animation: ieqOut 180ms ease forwards;
}

@keyframes ieqIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes ieqOut{
  from{ opacity: 1; transform: translateY(0); }
  to{ opacity: 0; transform: translateY(-6px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ieq-btn, .ieq-opt{ transition:none !important; }
  .ieq-enter, .ieq-exit{ animation:none !important; }
}

/* Mobile tweaks */
@media (max-width: 600px){
  .ieq-wrap{ padding: var(--ieq-canvas-pad-mobile); }

  .ieq-landing, .ieq-q, .ieq-lead, .ieq-result-card{
    border-radius: var(--ieq-card-radius-mobile, var(--ieq-card-radius));
  }
  .ieq-opt{ border-radius: var(--ieq-option-radius-mobile, var(--ieq-option-radius)); }

  .ieq-headline{ font-size: calc(var(--ieq-title-size-mobile, var(--ieq-title-size)) * var(--ieq-type-scale)); }
  .ieq-subheadline{ font-size: calc(var(--ieq-desc-size-mobile, var(--ieq-desc-size)) * var(--ieq-type-scale)); }
  .ieq-qtext{ font-size: calc(var(--ieq-question-size-mobile, var(--ieq-question-size)) * var(--ieq-type-scale)); }
  .ieq-opt span{ font-size: calc(var(--ieq-answer-size-mobile, var(--ieq-answer-size)) * var(--ieq-type-scale)); }
  .ieq-btn{ font-size: calc(var(--ieq-button-size-mobile, var(--ieq-button-size)) * var(--ieq-type-scale)); }

  .ieq-q{ padding: 22px 16px 24px; }

  .ieq-q > .ieq-progress{
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Keep the same visual gutters on mobile */
  .ieq-opt{ padding-left: 60px; padding-right: 76px; }
}

/* Loading spinner */
.ieq-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 8px 0;
}
.ieq-loading::before{
  content:"";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.20);
  border-top-color: rgba(0,0,0,.55);
  animation: ieqSpin 800ms linear infinite;
}
@keyframes ieqSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .ieq-loading::before{ animation:none; }
}

/* Branded error card */
.ieq-error-card{
  margin-top: 12px;
  border: 1px solid rgba(185,28,28,.35);
  background: rgba(185,28,28,.06);
  border-radius: 14px;
  padding: 12px 14px;
  color: #7f1d1d;
  font-weight: 650;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ieq-error-card button{
  border: 1px solid rgba(185,28,28,.35);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor:pointer;
  font-weight: 800;
}