/* ─────────────────────────────────────────────────────────────────
   CRO Block 1 — FAQ (final override)
   Loaded last via base.html.twig 1..17 loop. Token-bound rebuild
   that overrides legacy cro-faq.css cosmetic rules and guarantees
   correct icon sizing + responsive layout.
   ───────────────────────────────────────────────────────────── */

/* ── Section shell — paper surface for the FAQ ───────────────── */
.section.cro-faq,
.section.block-cro-block-1 {
  background: var(--ds-paper) !important;
  color: var(--ds-ink) !important;
  padding: var(--ds-section-py-lg) 0 !important;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .section.cro-faq,
  .section.block-cro-block-1 {
    padding: var(--ds-section-py-sm) 0 !important;
  }
}

/* Kill any legacy decorative halos. */
.section.cro-faq::before,
.section.cro-faq::after { display: none !important; }

/* ── Container reset ─────────────────────────────────────────── */
.cro-faq .container > .row { gap: 0; }
.cro-faq .col-12 { padding: 0; }

/* ── Section header (eyebrow + title + trust pills) ──────────── */
.cro-faq .section-header,
.section.cro-faq .section-header {
  text-align: center;
  margin-bottom: var(--ds-space-7);
}
.cro-faq .section-header h2,
.section.cro-faq .section-header h2,
.cro-faq h2.section-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-lg);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--ds-ink) !important;
  margin: 0 0 var(--ds-space-3);
  text-transform: uppercase;
}
.cro-faq .section-subtitle,
.section.cro-faq .section-subtitle {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-lg);
  color: var(--ds-ink-soft);
  margin: 0 auto var(--ds-space-5);
  max-width: 640px;
}

/* Trust badges row (eyebrow above title) */
.cro-faq .trust-badges-inline,
.cro-faq .hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-2);
  margin: 0 auto var(--ds-space-4);
}
.cro-faq .trust-badge,
.cro-faq .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  background: #fff;
  color: var(--ds-ink);
  border: 1px solid var(--ds-rule);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  box-shadow: var(--ds-shadow-sm);
}

/* ── Filter pills ────────────────────────────────────────────── */
.cro-faq .faq-filter-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-2);
  margin: 0 auto var(--ds-space-6) !important;
  max-width: 720px;
}
.cro-faq .faq-filter {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  color: var(--ds-ink-soft);
  background: #fff;
  border: 1px solid var(--ds-rule);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: background var(--ds-duration) var(--ds-ease-out),
              color var(--ds-duration) var(--ds-ease-out),
              border-color var(--ds-duration) var(--ds-ease-out),
              transform var(--ds-duration-fast) var(--ds-ease-out);
}
.cro-faq .faq-filter:hover {
  border-color: var(--ds-cta);
  color: var(--ds-cta);
  transform: translateY(-1px);
}
.cro-faq .faq-filter.active {
  background: var(--ds-cta);
  color: #fff;
  border-color: var(--ds-cta);
  box-shadow: var(--ds-shadow-cta);
}

/* ── FAQ container ───────────────────────────────────────────── */
.cro-faq .faq-container-wrapper,
.cro-faq #faq-container {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  max-width: 880px;
  margin: 0 auto var(--ds-space-7);
}

/* ── FAQ Item (card) ─────────────────────────────────────────── */
.cro-faq .faq-item {
  background: #fff !important;
  border: 1px solid var(--ds-rule) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--ds-duration) var(--ds-ease-out),
              border-color var(--ds-duration) var(--ds-ease-out);
}
.cro-faq .faq-item:hover { box-shadow: var(--ds-shadow-md); }
.cro-faq .faq-item.active {
  border-color: var(--ds-cta) !important;
  box-shadow: var(--ds-shadow-md);
}

.cro-faq .faq-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4) var(--ds-space-5) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  text-align: left;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-display-sm);
  font-weight: 700;
  color: var(--ds-ink) !important;
  line-height: 1.3;
  transition: color var(--ds-duration) var(--ds-ease-out);
}
.cro-faq .faq-button:hover { color: var(--ds-cta) !important; }
.cro-faq .faq-button > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
}

/* Plus/minus icon — explicit sized, never auto. */
.cro-faq .faq-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ds-cta);
  background: color-mix(in srgb, var(--ds-cta) 10%, transparent);
  border-radius: 999px;
  transition: transform var(--ds-duration) var(--ds-ease-out),
              background var(--ds-duration) var(--ds-ease-out);
  line-height: 1;
}
.cro-faq .faq-item.active .faq-icon {
  transform: rotate(45deg);
  background: var(--ds-cta);
  color: #fff;
}

/* Hard-cap any inline svg/img inside the icon. */
.cro-faq .faq-icon svg,
.cro-faq .faq-icon img {
  width: 18px !important;
  height: 18px !important;
}

/* Verified / popular badges in the question line */
.cro-faq .verified-badge,
.cro-faq .popular-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  margin-left: var(--ds-space-2);
}
.cro-faq .verified-badge { background: color-mix(in srgb, var(--ds-trust) 18%, white); color: var(--ds-trust-dk); }
.cro-faq .popular-badge  { background: color-mix(in srgb, var(--ds-cta) 18%, white);   color: var(--ds-cta-dk); }

/* ── FAQ content (answer) ────────────────────────────────────── */
.cro-faq .faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ds-duration-slow) var(--ds-ease-out);
  background: var(--ds-paper-2);
  border-top: 1px solid transparent;
}
.cro-faq .faq-item.active .faq-content {
  max-height: 1200px;
  border-top-color: var(--ds-rule);
}
.cro-faq .faq-content-inner {
  padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-5) !important;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: 1.65;
  color: var(--ds-ink-soft);
}
.cro-faq .faq-content-inner p { margin: 0 0 var(--ds-space-3); }
.cro-faq .faq-content-inner strong { color: var(--ds-ink); }
.cro-faq .faq-content-inner ul {
  margin: 0 0 var(--ds-space-3);
  padding-left: var(--ds-space-5);
}
.cro-faq .faq-content-inner li { margin-bottom: var(--ds-space-2); }

/* Proof box */
.cro-faq .faq-proof-box {
  margin: var(--ds-space-4) 0;
  padding: var(--ds-space-3) var(--ds-space-4);
  background: color-mix(in srgb, var(--ds-trust) 10%, white);
  border-left: 3px solid var(--ds-trust);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-soft);
}
.cro-faq .faq-proof-box strong { color: var(--ds-trust-dk); }
.cro-faq .faq-proof-box p { margin: 0; }

/* Buttons inside the answer */
.cro-faq .faq-content-inner .btn-gradient,
.cro-faq .faq-content-inner .btn-secondary,
.cro-faq .faq-content-inner a[class^="btn-"] {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.65rem 1.2rem;
  margin-top: var(--ds-space-3);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 700;
  border-radius: var(--ds-radius-sm);
  text-decoration: none !important;
  transition: background var(--ds-duration) var(--ds-ease-out),
              transform var(--ds-duration-fast) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
}
.cro-faq .faq-content-inner .btn-gradient {
  background: var(--ds-cta);
  color: #fff;
  box-shadow: var(--ds-shadow-cta);
}
.cro-faq .faq-content-inner .btn-gradient:hover {
  background: var(--ds-cta-dk);
  transform: translateY(-1px);
}
.cro-faq .faq-content-inner .btn-secondary {
  background: #fff;
  color: var(--ds-ink);
  border: 1px solid var(--ds-rule);
}
.cro-faq .faq-content-inner .btn-secondary:hover {
  border-color: var(--ds-cta);
  color: var(--ds-cta);
}

/* ── CTA box (Still Have Questions?) ─────────────────────────── */
.cro-faq .faq-cta-box {
  max-width: 880px;
  margin: var(--ds-space-7) auto 0 !important;
  padding: var(--ds-space-6) var(--ds-space-5) !important;
  background: var(--ds-ink) !important;
  color: #fff !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-lg);
  text-align: center;
}
.cro-faq .faq-cta-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-5);
}
.cro-faq .faq-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-cta) 22%, transparent);
  color: var(--ds-cta);
}
.cro-faq .faq-cta-icon svg,
.cro-faq .faq-cta-icon img {
  width: 28px !important;
  height: 28px !important;
}
.cro-faq .faq-cta-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-md);
  letter-spacing: 0.005em;
  color: #fff !important;
  margin: 0;
  text-transform: uppercase;
  line-height: 1.1;
}
.cro-faq .faq-cta-subtitle {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  color: rgba(255,247,227,.78) !important;
  margin: 0;
}

.cro-faq .faq-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-4);
}
.cro-faq .faq-cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.85rem 1.4rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  font-weight: 700;
  border-radius: var(--ds-radius-sm);
  text-decoration: none !important;
  transition: background var(--ds-duration) var(--ds-ease-out),
              transform var(--ds-duration-fast) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
  border: none;
}
.cro-faq .faq-cta-button.primary {
  background: var(--ds-cta);
  color: #fff;
  box-shadow: var(--ds-shadow-cta);
}
.cro-faq .faq-cta-button.primary:hover {
  background: var(--ds-cta-dk);
  transform: translateY(-1px);
}
.cro-faq .faq-cta-button.secondary {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.cro-faq .faq-cta-button.secondary:hover {
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
}
.cro-faq .faq-cta-button .cta-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.cro-faq .faq-cta-button .cta-btn-icon svg,
.cro-faq .faq-cta-button .cta-btn-icon img,
.cro-faq .faq-cta-button svg,
.cro-faq .faq-cta-button img {
  width: 18px !important;
  height: 18px !important;
}

/* Trust strip below CTA buttons */
.cro-faq .faq-cta-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-4);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: rgba(255,247,227,.72);
}
.cro-faq .faq-cta-trust span {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
}
.cro-faq .faq-cta-trust svg,
.cro-faq .faq-cta-trust img {
  width: 16px !important;
  height: 16px !important;
  color: var(--ds-cta);
  stroke: var(--ds-cta);
}

/* ── Floating mobile CTA bar ─────────────────────────────────── */
.cro-faq .floating-cta-bar,
.section.cro-faq .floating-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--ds-ink);
  border-top: 1px solid var(--ds-rule-dark);
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
  padding: var(--ds-space-2);
  gap: var(--ds-space-2);
}
@media (max-width: 768px) {
  .cro-faq .floating-cta-bar,
  .section.cro-faq .floating-cta-bar {
    display: flex;
  }
}
.cro-faq .float-cta-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: 0.85rem 1rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 700;
  border-radius: var(--ds-radius-sm);
  text-decoration: none !important;
  color: #fff;
  transition: background var(--ds-duration) var(--ds-ease-out);
}
.cro-faq .float-cta-btn.phone {
  background: var(--ds-trust);
}
.cro-faq .float-cta-btn.phone:hover { background: var(--ds-trust-dk); }
.cro-faq .float-cta-btn.quote {
  background: var(--ds-cta);
}
.cro-faq .float-cta-btn.quote:hover { background: var(--ds-cta-dk); }
.cro-faq .float-cta-btn .cta-icon,
.cro-faq .float-cta-btn .cta-icon svg,
.cro-faq .float-cta-btn .cta-icon img {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Mobile responsive tightening ────────────────────────────── */
@media (max-width: 575px) {
  .cro-faq .faq-button {
    padding: var(--ds-space-3) var(--ds-space-4) !important;
    font-size: var(--ds-fs-body-lg);
  }
  .cro-faq .faq-content-inner {
    padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-4) !important;
  }
  .cro-faq .faq-cta-box {
    padding: var(--ds-space-5) var(--ds-space-4) !important;
  }
  .cro-faq .faq-cta-buttons { flex-direction: column; }
  .cro-faq .faq-cta-button { width: 100%; justify-content: center; }
  .cro-faq h2.section-title,
  .cro-faq .section-header h2 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
}

/* Hard-cap any stray icon/image inside the FAQ block. */
.cro-faq svg,
.cro-faq img {
  max-width: 100%;
}
.cro-faq .ds-icon,
.cro-faq .ds-icon svg,
.cro-faq .ds-icon img {
  width: 24px !important;
  height: 24px !important;
}