/* ============================================================
   Failak Revenue Readiness Diagnostic — Arabic (RTL)
   All styles scoped under .failak-diag for WordPress isolation (WP-002).
   Every text rule is prefixed with .failak-diag so the active theme's
   heading/paragraph colors cannot bleed in (fixes dark-on-dark text).
   Two themes: dark (default) and light (.failak-diag.fd-light).
   ============================================================ */

/* ── DARK THEME (default) ── */
.failak-diag {
  --orange: #d95f1b;
  --orange-dim: #f0976a;
  --on-orange: #ffffff;

  --page: #0a0a0a;
  --text: #ffffff;        /* primary  */
  --text-2: #dcd8d1;      /* secondary */
  --text-3: #a29e96;      /* muted    */
  --text-faint: #6f6b63;  /* faint / disabled */

  --card: rgba(255,255,255,0.045);
  --card-2: rgba(255,255,255,0.09);
  --line: rgba(255,255,255,0.11);
  --line-2: rgba(255,255,255,0.20);
  --input: rgba(255,255,255,0.08);
  --input-border: rgba(255,255,255,0.28);
  --ring-track: rgba(255,255,255,0.09);

  --good: #34d399; --good-bg: rgba(52,211,153,0.15);
  --mid:  #5fa8ff; --mid-bg:  rgba(95,168,255,0.15);
  --warn: #fbbf24; --warn-bg: rgba(251,191,36,0.15);
  --crit: #f87171; --crit-bg: rgba(248,113,113,0.15);

  --fd: 'Cairo', sans-serif;
  --fb: 'Tajawal', sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
}

/* ── LIGHT THEME ── */
.failak-diag.fd-light {
  --on-orange: #ffffff;
  --page: #f7f5f1;
  --text: #17150f;
  --text-2: #3b372f;
  --text-3: #6c665c;
  --text-faint: #9b958a;

  --card: #ffffff;
  --card-2: #efebe4;
  --line: rgba(0,0,0,0.10);
  --line-2: rgba(0,0,0,0.17);
  --input: #ffffff;
  --input-border: rgba(0,0,0,0.28);
  --ring-track: rgba(0,0,0,0.09);

  --good: #0f7a4f; --good-bg: #e6f6ed;
  --mid:  #1a4e8a; --mid-bg:  #e7f0fa;
  --warn: #8a5800; --warn-bg: #fbf1da;
  --crit: #b1271f; --crit-bg: #fce9e7;
}

.failak-diag, .failak-diag *, .failak-diag *::before, .failak-diag *::after {
  box-sizing: border-box;
}
.failak-diag {
  font-family: var(--fb);
  background: var(--page);
  color: var(--text);
  direction: rtl;
  text-align: right;
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  transition: background .25s ease, color .25s ease;
}
.failak-diag button { font-family: inherit; cursor: pointer; }
/* Anti-bleed: force all headings/paragraphs to use our text color */
.failak-diag h1, .failak-diag h2, .failak-diag h3,
.failak-diag h4, .failak-diag h5, .failak-diag p,
.failak-diag span, .failak-diag a, .failak-diag label { color: inherit; }

/* WordPress admin bar offset (WP-001) */
body.admin-bar .failak-diag .fd-stage { padding-top: calc(2.5rem + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .failak-diag .fd-stage { padding-top: calc(2.5rem + 46px); }
}

/* ── STAGE / LAYOUT ── */
.failak-diag .fd-stage {
  max-width: 760px; margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem; min-height: 100vh;
}
.failak-diag .fd-screen { display: none; }
.failak-diag .fd-screen.fd-active { display: block; animation: fdFade .35s ease; }
@keyframes fdFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── BRAND HEADER + THEME TOGGLE ── */
.failak-diag .fd-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fd); font-weight: 800; font-size: 22px;
  color: var(--text); margin-bottom: 2.5rem; letter-spacing: -0.01em;
}
.failak-diag .fd-brand .dot { color: var(--orange); }
.failak-diag .fd-brand-tag {
  font-family: var(--fb); font-weight: 400; font-size: 12px;
  color: var(--text-3); border-right: 1px solid var(--line-2);
  padding-right: 10px; margin-right: 2px;
}
.failak-diag .fd-theme-toggle {
  margin-inline-start: auto;                 /* far edge in RTL row */
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line-2);
  color: var(--text-2); border-radius: 100px; padding: 7px 14px;
  font-family: var(--fb); font-size: 12px; font-weight: 600; line-height: 1;
}
.failak-diag .fd-theme-toggle:hover { background: var(--card-2); color: var(--text); }

/* ── HERO ── */
.failak-diag .fd-hero-eyebrow {
  font-family: var(--fd); font-weight: 600; font-size: 13px;
  color: var(--orange); letter-spacing: 0.02em; margin-bottom: 1rem;
}
.failak-diag .fd-hero-title {
  font-family: var(--fd); font-weight: 800; color: var(--text);
  font-size: clamp(28px, 6vw, 44px); line-height: 1.25;
  letter-spacing: -0.02em; margin-bottom: 1.1rem;
}
.failak-diag .fd-hero-title .accent { color: var(--orange); }
.failak-diag .fd-hero-sub {
  font-size: 17px; color: var(--text-2); font-weight: 400;
  max-width: 560px; margin-bottom: 2rem; line-height: 1.8;
}
.failak-diag .fd-meta-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 2.25rem; }
.failak-diag .fd-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 100px; padding: 8px 16px; font-size: 13px;
  color: var(--text-2); font-weight: 500;
}
.failak-diag .fd-chip .ic { font-size: 15px; }
.failak-diag .fd-dims-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 2.5rem; }
@media (max-width: 560px) { .failak-diag .fd-dims-grid { grid-template-columns: 1fr; } }
.failak-diag .fd-dim-chip {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px;
}
.failak-diag .fd-dim-chip .dic { font-size: 22px; }
.failak-diag .fd-dim-chip .dname { font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--text); }
.failak-diag .fd-dim-chip .dnum { font-size: 11px; color: var(--text-3); }

/* ── BUTTONS ── */
.failak-diag .fd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fd); font-weight: 700; font-size: 16px;
  border: none; border-radius: 100px; padding: 15px 34px; text-decoration: none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.failak-diag .fd-btn-primary {
  background: var(--orange); color: var(--on-orange);
  box-shadow: 0 6px 20px rgba(217,95,27,0.35);
}
.failak-diag .fd-btn-primary:hover { transform: translateY(-2px); background: #e96a22; }
.failak-diag .fd-btn-primary:disabled {
  background: var(--card-2); color: var(--text-faint);
  box-shadow: none; cursor: not-allowed; transform: none;
}
.failak-diag .fd-btn-ghost {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--line-2); font-weight: 600; font-size: 15px; padding: 13px 28px;
}
.failak-diag .fd-btn-ghost:hover { background: var(--card); color: var(--text); }
.failak-diag .fd-btn-lg { width: 100%; }
@media (min-width: 561px) { .failak-diag .fd-btn-auto { width: auto; } }

/* ── QUESTION SCREEN ── */
.failak-diag .fd-progress-wrap { margin-bottom: 2rem; }
.failak-diag .fd-progress-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; margin-bottom: 10px;
}
.failak-diag .fd-dim-banner {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--orange);
}
.failak-diag .fd-q-counter { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.failak-diag .fd-progress-track { height: 6px; background: var(--card-2); border-radius: 100px; overflow: hidden; }
.failak-diag .fd-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--orange), var(--orange-dim));
  border-radius: 100px; width: 0%; transition: width .4s cubic-bezier(.4,0,.2,1);
}
.failak-diag .fd-q-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 2rem 1.75rem; margin-bottom: 1.5rem;
}
.failak-diag .fd-q-text {
  font-family: var(--fd); font-weight: 700; color: var(--text);
  font-size: clamp(19px, 4vw, 24px); line-height: 1.55;
  margin-bottom: 1.75rem; letter-spacing: -0.01em;
}
.failak-diag .fd-likert { display: flex; flex-direction: column; gap: 10px; }
.failak-diag .fd-likert-opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-md); padding: 14px 18px; text-align: right;
  color: var(--text-2); font-size: 15px; font-weight: 500; min-height: 56px;
  transition: border-color .15s, background .15s, color .15s;
}
.failak-diag .fd-likert-opt:hover { border-color: var(--line-2); background: var(--card-2); }
.failak-diag .fd-likert-opt.sel {
  border-color: var(--orange); background: rgba(217,95,27,0.14); color: var(--text);
}
.failak-diag.fd-light .fd-likert-opt.sel { background: rgba(217,95,27,0.10); }
.failak-diag .fd-likert-num {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--card-2);
  font-family: var(--fd); font-weight: 700; font-size: 15px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.failak-diag .fd-likert-opt.sel .fd-likert-num { background: var(--orange); color: var(--on-orange); }
.failak-diag .fd-q-nav { display: flex; justify-content: space-between; gap: 12px; }

/* ── RESULTS ── */
.failak-diag .fd-result-hero { text-align: center; margin-bottom: 2.5rem; }
.failak-diag .fd-score-ring { width: 168px; height: 168px; margin: 0 auto 1.25rem; position: relative; }
.failak-diag .fd-score-ring svg { transform: rotate(-90deg); }
.failak-diag .fd-score-ring .ring-bg { stroke: var(--ring-track); }
.failak-diag .fd-score-ring .ring-fg { stroke: var(--orange); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.failak-diag .fd-score-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.failak-diag .fd-score-num { font-family: var(--fd); font-weight: 800; font-size: 46px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.failak-diag .fd-score-outof { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.failak-diag .fd-cat-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fd); font-weight: 700; font-size: 16px;
  padding: 8px 20px; border-radius: 100px; margin-bottom: 1rem;
}
.failak-diag .fd-verdict { font-size: 16px; color: var(--text-2); font-weight: 400; max-width: 560px; margin: 0 auto; line-height: 1.85; }

.failak-diag .fd-section-label {
  font-family: var(--fd); font-weight: 700; font-size: 13px;
  color: var(--text-3); letter-spacing: 0.03em; margin: 2.25rem 0 1rem;
}
.failak-diag .fd-dim-results { display: flex; flex-direction: column; gap: 12px; }
.failak-diag .fd-dim-row { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }
.failak-diag .fd-dim-row-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.failak-diag .fd-dim-row-name { display: flex; align-items: center; gap: 10px; font-family: var(--fd); font-weight: 700; font-size: 15px; color: var(--text); }
.failak-diag .fd-dim-row-name .dic { font-size: 19px; }
.failak-diag .fd-dim-row-meta { display: flex; align-items: center; gap: 10px; }
.failak-diag .fd-dim-pct { font-family: var(--fd); font-weight: 800; font-size: 17px; color: var(--text); font-variant-numeric: tabular-nums; }
.failak-diag .fd-rating { font-family: var(--fd); font-weight: 700; font-size: 11px; padding: 3px 11px; border-radius: 100px; }
.failak-diag .fd-rating.r-good { color: var(--good); background: var(--good-bg); }
.failak-diag .fd-rating.r-mid  { color: var(--mid);  background: var(--mid-bg); }
.failak-diag .fd-rating.r-warn { color: var(--warn); background: var(--warn-bg); }
.failak-diag .fd-rating.r-crit { color: var(--crit); background: var(--crit-bg); }
.failak-diag .fd-bar-track { height: 7px; background: var(--card-2); border-radius: 100px; overflow: hidden; }
.failak-diag .fd-bar-fill { height: 100%; border-radius: 100px; width: 0%; transition: width .8s cubic-bezier(.4,0,.2,1); }
.failak-diag .fd-bar-fill.r-good { background: var(--good); }
.failak-diag .fd-bar-fill.r-mid  { background: var(--mid); }
.failak-diag .fd-bar-fill.r-warn { background: var(--warn); }
.failak-diag .fd-bar-fill.r-crit { background: var(--crit); }

/* Constraint card */
.failak-diag .fd-constraint {
  background: linear-gradient(135deg, var(--crit-bg), rgba(217,95,27,0.06));
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 1.5rem; margin-top: 1rem;
}
.failak-diag .fd-constraint-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--fd); font-weight: 700; font-size: 11px; color: var(--crit);
  background: var(--crit-bg); padding: 4px 12px; border-radius: 100px; margin-bottom: 12px;
}
.failak-diag .fd-constraint-title { font-family: var(--fd); font-weight: 800; font-size: 19px; color: var(--text); margin-bottom: 8px; }
.failak-diag .fd-constraint-body { font-size: 15px; color: var(--text-2); font-weight: 400; line-height: 1.85; }

/* ── UNIFIED RESULT ACTION CARD (CTA verdict + lead form in one) ── */
.failak-diag .fd-action {
  margin-top: 1.75rem; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
  box-shadow: 0 10px 40px rgba(0,0,0,0.18);
}
/* Orange header band — always white text in both themes */
.failak-diag .fd-action-head {
  background: linear-gradient(135deg, var(--orange), #b54a12);
  padding: 1.85rem 1.75rem 1.6rem; text-align: center;
}
.failak-diag .fd-cta-title { font-family: var(--fd); font-weight: 800; font-size: clamp(20px, 4.5vw, 26px); color: #fff; margin-bottom: 10px; }
.failak-diag .fd-cta-body { font-size: 15px; color: rgba(255,255,255,0.92); font-weight: 400; line-height: 1.8; margin: 0 auto; max-width: 460px; }
/* Form area below the band */
.failak-diag .fd-action-body { padding: 1.85rem 1.75rem; }
.failak-diag .fd-action-label { font-family: var(--fd); font-weight: 800; font-size: 18px; color: var(--text); text-align: center; margin-bottom: 4px; }
.failak-diag .fd-action-sub { font-size: 13.5px; color: var(--text-3); font-weight: 400; text-align: center; margin-bottom: 1.5rem; }
.failak-diag .fd-field { margin-bottom: 14px; }
.failak-diag .fd-field label { display: block; font-family: var(--fd); font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--text-2); }
.failak-diag .fd-field input {
  width: 100%; background: var(--input); border: 1.5px solid var(--input-border);
  border-radius: var(--r-sm); padding: 13px 15px; color: var(--text); font-family: var(--fb);
  font-size: 15px; direction: rtl; text-align: right;
}
.failak-diag .fd-field input:focus { outline: none; border-color: var(--orange); }
.failak-diag .fd-field input::placeholder { color: var(--text-faint); }
.failak-diag .fd-lead-note { font-size: 12px; color: var(--text-faint); text-align: center; margin-top: 10px; }

.failak-diag .fd-retake { text-align: center; margin-top: 2rem; }
.failak-diag .fd-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-faint); text-align: center; font-weight: 400; }
.failak-diag .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── SureForms restyle to match the diagnostic theme (when [sureforms] is embedded) ──
   SureForms markup uses the srfm-* prefix. We (1) strip SureForms' own white
   field/container backgrounds so they don't sit on our dark card, and
   (2) give every input a clear, visible background + border. */
.failak-diag .srfm-form-container,
.failak-diag .srfm-form,
.failak-diag [class*="srfm-"] {
  background: transparent !important;
  box-shadow: none !important;
}
.failak-diag .srfm-form-container { margin: 0; padding: 0; }
/* Labels — clearly legible */
.failak-diag .srfm-form .srfm-block-label,
.failak-diag .srfm-form .srfm-input-label,
.failak-diag .srfm-form label {
  font-family: var(--fd) !important; font-weight: 700 !important; font-size: 13px !important;
  color: var(--text) !important; margin-bottom: 6px !important;
}
.failak-diag .srfm-form .srfm-required { color: var(--crit) !important; }
/* Inputs — visible field surface + border in both themes (all types) */
.failak-diag .srfm-form input[type=text],
.failak-diag .srfm-form input[type=email],
.failak-diag .srfm-form input[type=tel],
.failak-diag .srfm-form input[type=url],
.failak-diag .srfm-form input[type=number],
.failak-diag .srfm-form input[type=password],
.failak-diag .srfm-form textarea,
.failak-diag .srfm-form select,
.failak-diag .srfm-form .srfm-input-common {
  background: var(--input) !important; border: 1.5px solid var(--input-border) !important;
  color: var(--text) !important; border-radius: var(--r-sm) !important;
  min-height: 50px !important;
  font-family: var(--fb) !important; font-size: 15px !important;
  box-shadow: none !important;
}
/* Text-like fields: RTL + standard padding */
.failak-diag .srfm-form input[type=text],
.failak-diag .srfm-form input[type=email],
.failak-diag .srfm-form input[type=url],
.failak-diag .srfm-form input[type=number],
.failak-diag .srfm-form input[type=password],
.failak-diag .srfm-form textarea,
.failak-diag .srfm-form select {
  padding: 13px 15px !important; direction: rtl; text-align: right;
}
.failak-diag .srfm-form input::placeholder,
.failak-diag .srfm-form textarea::placeholder { color: var(--text-faint) !important; opacity: 1; }
.failak-diag .srfm-form input:focus,
.failak-diag .srfm-form textarea:focus,
.failak-diag .srfm-form select:focus {
  outline: none !important; border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(217,95,27,0.18) !important;
}
/* Phone field (SureForms uses intl-tel-input): keep it LTR and let the plugin
   own its own horizontal padding so the number never overlaps the flag.
   We deliberately do NOT force `padding` here. */
.failak-diag .srfm-form input[type=tel] { direction: ltr !important; text-align: left !important; }
.failak-diag .srfm-form .iti { width: 100% !important; display: block; }
.failak-diag .srfm-form .iti__selected-flag,
.failak-diag .srfm-form .iti__flag-container { background: transparent !important; }
.failak-diag .srfm-form .iti__country-list {
  background: var(--card) !important; color: var(--text) !important;
  border: 1px solid var(--line-2) !important;
}
.failak-diag .srfm-form .iti__country.iti__highlight { background: var(--card-2) !important; }
.failak-diag .srfm-form .iti__dial-code { color: var(--text-3) !important; }
/* Submit button — full-width orange to match the diagnostic CTA */
.failak-diag .srfm-form .srfm-submit-button,
.failak-diag .srfm-form button[type=submit],
.failak-diag .srfm-form .srfm-button {
  background: var(--orange) !important; color: #fff !important; border: none !important;
  border-radius: 100px !important; font-family: var(--fd) !important; font-weight: 700 !important;
  font-size: 16px !important; padding: 15px 34px !important; width: 100% !important;
  margin-top: 6px; cursor: pointer; box-shadow: 0 6px 20px rgba(217,95,27,0.35) !important;
}
.failak-diag .srfm-form .srfm-submit-button:hover,
.failak-diag .srfm-form button[type=submit]:hover { background: #e96a22 !important; }
/* Keep hidden fields hidden even if a theme reveals them */
.failak-diag .far-score,
.failak-diag .far-category,
.failak-diag .far-constraint,
.failak-diag .far-breakdown { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   THEME-BLEED HARDENING (last in source order, !important)
   Some WordPress themes color headings/paragraphs with very high specificity
   (IDs) or !important, which can beat ordinary class selectors and leave our
   text dark-on-dark. These rules guarantee the diagnostic's own text colors
   always win. Colors still come from the theme variables, so light/dark mode
   both stay correct.
   ════════════════════════════════════════════════════════════════════ */
.failak-diag .fd-brand,
.failak-diag .fd-hero-title,
.failak-diag .fd-q-text,
.failak-diag .fd-constraint-title,
.failak-diag .fd-action-label,
.failak-diag .fd-dim-row-name,
.failak-diag .fd-dim-pct,
.failak-diag .fd-score-num,
.failak-diag .fd-dim-chip .dname { color: var(--text) !important; }

.failak-diag .fd-hero-title .accent,
.failak-diag .fd-hero-eyebrow,
.failak-diag .fd-dim-banner { color: var(--orange) !important; }

.failak-diag .fd-hero-sub,
.failak-diag .fd-verdict,
.failak-diag .fd-constraint-body { color: var(--text-2) !important; }

.failak-diag .fd-section-label,
.failak-diag .fd-action-sub,
.failak-diag .fd-q-counter,
.failak-diag .fd-score-outof,
.failak-diag .fd-dim-chip .dnum,
.failak-diag .fd-brand-tag { color: var(--text-3) !important; }

.failak-diag .fd-lead-note,
.failak-diag .fd-footer { color: var(--text-faint) !important; }

/* CTA header sits on the orange band — keep it white in BOTH themes */
.failak-diag .fd-cta-title { color: #fff !important; }
.failak-diag .fd-cta-body { color: rgba(255,255,255,0.92) !important; }

/* Rating chips keep their semantic colors */
.failak-diag .fd-rating.r-good { color: var(--good) !important; }
.failak-diag .fd-rating.r-mid  { color: var(--mid)  !important; }
.failak-diag .fd-rating.r-warn { color: var(--warn) !important; }
.failak-diag .fd-rating.r-crit { color: var(--crit) !important; }