/* ============================================================
   assess-redesign-extension.css

   Extends deploy/assets/assess-redesign.css to defeat the safest,
   highest-leverage inline-style patterns identified in
   reports/assess-inline-styles.md.

   v2 — REVISED after preview deploy showed broken paywall card.

   Removed: all .paywall-premium-cta / .paywall-core-cta rules
   (those classes are <button> elements, not container cards;
   styling them as containers wrecked the surrounding white card
   with white-on-white invisible bullets).

   Removed: .results__countries > * (too broad — children include
   bullet items that ended up on white cards).

   Removed: all [style*="..."] attribute selectors (risky without
   per-page testing).

   Kept: only own-class rules for elements that ARE what their
   class name suggests. Pure additive polish.

   Loaded order: design-system.final8.css → assess-redesign.css → THIS
   ============================================================ */


/* ---------- 1. PROGRESS DOTS (14× of identical inline shape) ---------- */
.pdot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #E5E7EB !important;
  display: inline-block !important;
  margin: 0 4px !important;
  transition: background 0.18s ease !important;
}

.pdot--done,
.pdot--active {
  background: var(--primary, #1A5C50) !important;
}


/* ---------- 2. INTRO TYPOGRAPHY (.intro container, scoped) ---------- */
.intro h1 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--ink, #0C2E2B) !important;
  margin: 0 0 16px !important;
  text-wrap: balance;
}

.intro > p {
  font: 400 16px/1.6 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  color: var(--grey-700, #3D4451) !important;
  margin-bottom: 14px !important;
  max-width: 580px !important;
}


/* ---------- 3. FEEDBACK CHIPS (.fb-opt, own-class × 5) ---------- */
.fb-opt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.1) !important;
  border-radius: 999px !important;
  color: var(--ink, #0C2E2B) !important;
  font: 500 13px/1 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.fb-opt:hover {
  border-color: var(--accent, #B5521F) !important;
  color: var(--accent, #B5521F) !important;
}

.fb-opt[aria-pressed="true"],
.fb-opt.is-active {
  background: var(--accent, #B5521F) !important;
  border-color: var(--accent, #B5521F) !important;
  color: #fff !important;
}


/* ---------- 4. EXIT-INTENT CLOSE (.exit-box__close, own-class × 5) ---------- */
.exit-box__close {
  background: transparent !important;
  border: 1px solid rgba(12, 46, 43, 0.15) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--grey-500, #6B7280) !important;
  cursor: pointer !important;
}

.exit-box__close:hover {
  background: var(--cream, #F5F1E8) !important;
  color: var(--ink, #0C2E2B) !important;
}


/* ---------- 5. SELECT INPUTS (.select-input, own-class × 2) ---------- */
.select-input {
  width: 100% !important;
  padding: 12px 16px !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.12) !important;
  border-radius: 8px !important;
  font: 400 15px/1.4 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  color: var(--ink, #0C2E2B) !important;
}

.select-input:focus {
  outline: 2px solid var(--accent, #B5521F) !important;
  outline-offset: 2px !important;
  border-color: var(--accent, #B5521F) !important;
}


/* ---------- 6. MOBILE TWEAKS ---------- */
@media (max-width: 640px) {
  .fb-opt {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  .pdot {
    margin: 0 3px !important;
  }
}