/* =====================================================================
   MINDAURA — Rating Test v2.3.0
   
   ARCHITECTURE: xfrExpandToFullWidth() JS hides Elementor sidebar columns
   and removes max-width constraints. Container uses position:relative +
   min-height:100vh. Header is position:sticky top:0. Nav is 
   position:sticky bottom:0. Page scrolls normally — no fixed container
   (which broke inside Elementor transforms). 
   ===================================================================== */

/* ── 1. Page shell — hide WP header/footer when test is active ─────────── */
/* Header hiding: applied once Alpine sets body.xfr-active after form loads */
body.xfr-active #masthead,
body.xfr-active .site-header,
body.xfr-active header.site-header,
body.xfr-active .elementor-location-header,
body.xfr-active [data-elementor-type="header"],
body.xfr-active .main-navigation { display: none !important; }
body.xfr-active #colophon,
body.xfr-active .site-footer,
body.xfr-active footer.site-footer,
body.xfr-active .elementor-location-footer,
body.xfr-active [data-elementor-type="footer"],
body.xfr-active footer { display: none !important; }
/* Strip WP admin-bar top margin so no gap appears */
html.xfr-active { margin-top: 0 !important; }
#wpadminbar { position: fixed !important; }
body.xfr-active { background: #f1f2f8 !important; }

/* ── 2. Container — full-width, min full-height, flex column ─────────── */
/* JS handles hiding sidebar columns and removing max-width from ancestors */

/* v2.5.5: Remove the outer .xform-container padding/background that creates
   the visible gap above and below the test on the WP page. */
body.xfr-active .xform-container {
  padding: 0 !important;
  background: transparent !important;
}

#xform-single-container {
  position: relative !important;
  min-height: 100vh !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;   /* Must NOT be hidden — breaks sticky */
  background: #f1f2f8;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;    /* v2.5.5: kills the base 8px card radius */
  box-shadow: none !important;
  border: none !important;
}
#xform-single-container #xform-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
.xform-test-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* v2.5.6: Zero out the white-card padding/shadow/radius on the inner test wrapper */
body.xfr-active .xform-test-container {
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.xfr-test-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: visible;  /* Must NOT be hidden — sticky needs visible ancestors */
}

/* ── 3. Intro — centred on lavender page ────────────────────────────── */
.xfr-intro {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
.xfr-intro__card {
  background: #fff; border-radius: 24px; padding: 52px 48px 48px;
  max-width: 620px; width: 100%;
/*   box-shadow: 0 4px 40px rgba(28,32,64,.07), 0 1px 4px rgba(28,32,64,.04); */
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.xfr-intro__logo { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
.xfr-intro__logo-icon { font-size: 26px; line-height: 1; }
.xfr-intro__logo-text { font-size: 20px; font-weight: 800; color: #1a1d2e; letter-spacing: -.02em; }
.xfr-intro__logo-text em { font-style: normal; color: #ed7e97; }
.xfr-intro__title { font-size: 30px; font-weight: 800; color: #1a1d2e; line-height: 1.25; margin: 0 0 14px; letter-spacing: -.025em; }
.xfr-intro__desc { font-size: 15px; color: #6b7280; line-height: 1.7; margin: 0 0 28px; max-width: 440px; }
.xfr-intro__btn { width: 100%; max-width: 380px; background: #1a9e6f; color: #fff; border: none; border-radius: 999px; padding: 17px 36px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .18s, transform .12s; margin-bottom: 12px; }
.xfr-intro__btn:hover { background: #158a5e; transform: translateY(-2px); }
.xfr-intro__stats { font-size: 13px; color: #9ca3af; margin-bottom: 28px; display: flex; align-items: center; gap: 6px; }
.xfr-intro__stats-star { color: #f59e0b; }
.xfr-intro__how { width: 100%; border-top: 1px solid #f3f4f6; padding-top: 22px; }
.xfr-intro__how-title { font-size: 13px; font-weight: 700; color: #1a1d2e; margin: 0 0 12px; }
.xfr-intro__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.xfr-intro__chip { background: #f5f6fa; border: 1px solid #e8e9f0; border-radius: 999px; padding: 8px 18px; font-size: 12px; color: #4b5563; font-weight: 500; }

/* ── 4. Sticky header — scrolls WITH page until top, then sticks ────── */
.xfr-header {
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid #eeeef4;
  width: 100%;
}
.xfr-header__inner { max-width: 900px; margin: 0 auto; padding: 12px 24px 0; }
.xfr-header__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.xfr-header__logo { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 800; color: #1a1d2e; letter-spacing: -.01em; }
.xfr-header__logo em { font-style: normal; color: #ed7e97; }
.xfr-header__step { font-size: 13px; color: #6b7280; font-weight: 500; }
.xfr-header__meta { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.xfr-header__test-name { font-size: 12px; color: #9ca3af; font-weight: 400; }
.xfr-header__sep { color: #c0c0cc; font-size: 12px; }
.xfr-header__section-name { font-size: 12px; font-weight: 800; color: #7c6cf0; text-transform: uppercase; letter-spacing: .08em; }
.xfr-header__progress-row { display: flex; align-items: center; gap: 10px; padding-bottom: 11px; }
.xfr-header__progress-bar { flex: 1; height: 4px; background: #e8e8f4; border-radius: 99px; overflow: hidden; }
.xfr-header__progress-fill { height: 100%; background: #20b486; border-radius: 99px; transition: width .5s ease; }
.xfr-header__pct { font-size: 11px; color: #9ca3af; font-weight: 600; min-width: 30px; text-align: right; }

/* ── 5. Legend in header ─────────────────────────────────────────────── */
.xfr-legend { display: flex; align-items: flex-start; justify-content: center; padding: 14px 0 16px; background: #fff; border-top: 1px solid #f0f0f8; }
.xfr-legend__item { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100px; text-align: center; }
.xfr-legend__circle { width: 40px; height: 40px; border-radius: 50%; display: block; border: 1.5px solid transparent; }
.xfr-legend__circle--0 { background: #f87171; border-color: #fca5a5; }
.xfr-legend__circle--1 { background: #fca5a5; border-color: #fed7d7; }
.xfr-legend__circle--2 { background: #f0f0f0; border-color: #e0e0e0; }
.xfr-legend__circle--3 { background: #bbf7d0; border-color: #d1fae5; }
.xfr-legend__circle--4 { background: #4ade80; border-color: #86efac; }
.xfr-legend__label { font-size: 10px; color: #9ca3af; line-height: 1.3; font-weight: 500; }

/* ── 6. Questions — fills flex, page scrolls ────────────────────────── */
.xfr-questions { flex: 1; background: #f1f2f8; padding: 0 20px 20px; }
.xfr-questions__inner { max-width: 760px; margin: 0 auto; width: 100%; }

/* ── 7. Teaser ──────────────────────────────────────────────────────── */
.xfr-teaser { display: inline-flex; align-items: center; gap: 7px; background: #f5f6fa; border: 1px solid #e8e9f0; border-radius: 999px; padding: 7px 18px 7px 13px; font-size: 13px; color: #4b5563; font-weight: 600; margin: 22px auto 8px; /* v2.5.6: centred */ }
.xfr-questions__inner { text-align: center; } /* v2.5.6: centre teaser pill */
.xfr-field__question, .xfr-field__circles { text-align: left; } /* keep questions left */
.xfr-teaser::before { content: "✦"; color: #7c6cf0; font-size: 10px; }

/* ── 8. Question fields ─────────────────────────────────────────────── */
.xfr-field { padding: 36px 0 28px; border-bottom: 1px solid rgba(28,32,64,.07); }
.xfr-field:last-child { border-bottom: none; }
.xfr-field__question { font-size: 16px; font-weight: 600; color: #1a1d2e; line-height: 1.65; text-align: center; margin-bottom: 22px; padding: 0 12px; }
.xfr-field__question img { max-width: 100%; border-radius: 10px; margin: 0 auto; display: block; }
.xfr-field__circles { display: flex; align-items: center; justify-content: center; gap: 22px; }
.xfr-field__circle-wrap input[type="radio"] { display: none; }
.xfr-field__circle-wrap label { width: 52px; height: 52px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: block; transition: transform .15s ease, box-shadow .15s ease; }
.xfr-field__circle-wrap label[data-color="0"] { background: #f87171; border-color: #fca5a5; }
.xfr-field__circle-wrap label[data-color="1"] { background: #fca5a5; border-color: #fed7d7; }
.xfr-field__circle-wrap label[data-color="2"] { background: #f0f0f0; border-color: #e0e0e0; }
.xfr-field__circle-wrap label[data-color="3"] { background: #bbf7d0; border-color: #d1fae5; }
.xfr-field__circle-wrap label[data-color="4"] { background: #4ade80; border-color: #86efac; }
.xfr-field__circle-wrap label:hover { transform: scale(1.12); box-shadow: 0 4px 16px rgba(28,32,64,.12); }
.xfr-field__circle-wrap input[type="radio"]:checked + label { border-color: #1a1d2e; box-shadow: 0 0 0 4px rgba(124,108,240,.18), 0 2px 8px rgba(28,32,64,.1); transform: scale(1.1); }

/* ── 9. Sticky bottom nav ───────────────────────────────────────────── */
.xfr-bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: 100;
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #eeeef4;
  padding: 14px 24px;
  width: 100%;
}
.xfr-bottom-nav__inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.xfr-nav__prev { background: none; border: none; font-size: 14px; font-weight: 600; color: #9ca3af; cursor: pointer; padding: 10px 0; display: inline-flex; align-items: center; gap: 4px; transition: color .15s; }
.xfr-nav__prev:hover { color: #1a1d2e; }
.xfr-nav__next,
.xfr-nav__submit { background: #cbd5e1; color: #94a3b8; border: none; border-radius: 999px; padding: 13px 30px; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .2s, color .2s, transform .1s; letter-spacing: -.01em; }
.xfr-nav__next.xfr-nav--ready,
.xfr-nav__submit.xfr-nav--ready { background: #1a1d2e; color: #fff; }
.xfr-nav__next.xfr-nav--ready:hover,
.xfr-nav__submit.xfr-nav--ready:hover { background: #2d3152; transform: translateY(-1px); }
.xfr-nav__submit:disabled:not(.xfr-nav--ready) { cursor: not-allowed; }
.xfr-error { color: #ef4444; font-size: 13px; text-align: center; padding: 6px 0 0; font-weight: 500; max-width: 900px; margin: 0 auto; }

/* ── 10. Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .xfr-intro__card { padding: 40px 22px 36px; border-radius: 20px; }
  .xfr-intro__title { font-size: 24px; }
  .xfr-header__inner { padding: 10px 16px 0; }
  .xfr-header__test-name, .xfr-header__sep { display: none; }
  .xfr-legend__item { width: 20%; }
  .xfr-legend__circle { width: 30px; height: 30px; }
  .xfr-legend__label { font-size: 9px; }
  .xfr-questions { padding: 0 14px 20px; }
  .xfr-field { padding: 28px 0 22px; }
  .xfr-field__question { font-size: 14px; margin-bottom: 18px; padding: 0 4px; }
  .xfr-field__circles { gap: 12px; }
  .xfr-field__circle-wrap label { width: 40px; height: 40px; }
  .xfr-bottom-nav { padding: 12px 16px; }
  .xfr-nav__next, .xfr-nav__submit { padding: 12px 22px; font-size: 13px; }
}
@media (max-width: 400px) {
  .xfr-field__circle-wrap label { width: 34px; height: 34px; }
  .xfr-legend__circle { width: 26px; height: 26px; }
  .xfr-field__circles { gap: 8px; }
}