/* ============================================================
   components/askai-compare.css — Ask AI "help me with…" prompt cards +
   "What makes RemotePass Ask AI different?" 3-col comparison table
   (rp-askai-compare / 7402). Scoped under .rp-askai-compare.
   Loaded via inc/kadence-askai-compare.php (presence-loader gated, EN + AR).

   2026-06-29 P1 pass (askai-pass-report.md) — surgical polish for
   Mohamed's two flagged sub-issues:
     1) chat-box / send-message-button on the prompt cards
     2) comparison-table text alignment + Ask AI icon placement
   Specificity discipline: most legacy .rp-ai rules in qa-fixes-ai.css
   sit at (0,4,0). Selectors below run at (0,5,0)+ to outrank them
   cleanly without !important. Figma anchor: 14576:18261. RTL flips
   live in askai-compare-rtl.css. Backups: specs/p1-batch/backups/.
   ============================================================ */

/* Dark holographic gradient backdrop for the prompt-cards block.
   TODO Cowork: replace with the exact Figma gradient + grain/noise. */
.rp-askai-compare .hero_double_section_revert-with-bg {
  position: relative;
  background: linear-gradient(135deg, #1a0b2e 0%, #2d1b4e 45%, #3a1f63 100%);
}

/* Prompt cards ("Headcount per Country", burnout, expenses, team located). */
.rp-askai-compare .grid-step-card-with-bg {
  border-radius: 16px;
  overflow: hidden;
}

/* ============ §1. CHAT-BOX (prompt-card input-field at card bottom) =========
   Figma 14576:18261 Modal 384×340 → Main_Input 346 wide, anchored to bottom
   of card, with the prompt text on the left and a PaperPlaneRight icon
   pinned to the right edge, vertically centered. Pre-pass the local card
   was rendering the send <img> at its native SVG size (no width cap), the
   text + icon were unevenly spaced, and the card column was centring both
   title + footer mid-card instead of laying title-top / input-bottom.

   The pre-existing .card-text-label-footer.card-text-label-footer-relative
   already supplies the bg / border / radius (Webflow base; see qa-fixes-
   ai.css §G port). Rules here just (a) cap the icon, (b) pin items to
   card bottom, (c) tighten paddings to mirror Figma's input-field look.
   ============================================================ */
.rp-askai-compare .grid-step-card.grid-step-card-with-bg .grid-step-card-header.grid-step-card-header-reverted.grid-step-card-header-reverted-space-between {
  justify-content: space-between;
}

.rp-askai-compare .grid-step-card.grid-step-card-with-bg .card-text-label-footer.card-text-label-footer-relative {
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  min-height: 56px;
}

.rp-askai-compare .grid-step-card.grid-step-card-with-bg .card-text-label-footer .card-text-label-footer-img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-self: center;
}

.rp-askai-compare .grid-step-card.grid-step-card-with-bg .card-text-label-footer .rp-p.mbf20.new_pricing_style_rp_p {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

/* ============ §2. COMPARISON TABLE alignment ================================
   Figma 14576:18261 (Compare table) → all cell text LEFT-aligned with
   12px left padding from cell edge, vertically centred. Header content
   cells likewise left-aligned (the "RemotePass Ask AI" cell sits with
   the 24×24 AskAi icon flush-left + 8px gap to the bold label).

   Pre-pass cascade:
   - qa-fixes-ai.css §H.15 set .rp-ai .comparison-table-td-value{justify
     -content:center} at (0,4,0) which forced body cells to centre. Body
     CSV bullet: "Text inside the table must be left aligned" — needs
     override.
   - .comparison-td-label-flex-bold (Webflow base) sets
     justify-content:center on the <p>, centring the inner text inside
     header & label cells. Same override needed.
   - The AskAi <img> at .comparison-table-td-value-checks-img-smaller
     ships at 16px wide and was visually too small + too close to the
     text. Bump to 24×24 and add an 8px column gap so it reads as a
     proper logo-leading-text pair per Figma.
   ============================================================ */

/* Body-row cells: align value text left (override §H.15's blanket centre). */
.rp-askai-compare .comparison-table-td.comparison-table-td-value.comparison-table-td-value-checks.comparison-table-td-center {
  justify-content: flex-start;
}

/* Label cells & header cells whose <p> carries the -flex-bold variant —
   that variant currently sets justify-content:center on the flex p. Pin
   to flex-start so the text sits left inside its flex container, matching
   Figma's 12-from-edge anchor. */
.rp-askai-compare .comparison-td-label.comparison-td-label-small-text.comparison-td-label-flex.comparison-td-label-flex-bold {
  justify-content: flex-start;
}

/* AskAi icon (header cell, "RemotePass Ask AI") — Figma 24×24 LeftIcon. */
.rp-askai-compare .comparison-table-td-value-checks-img.comparison-table-td-value-checks-img-smaller.comparison-table-td-value-checks-img-adjust-styling {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Tighten the icon→text gap in the highlighted-first header cell so the
   logo reads as paired with the "RemotePass Ask AI" label rather than
   drifting away. Cell already runs justify-content:flex-start (§H.15). */
.rp-askai-compare .comparison-table-td.comparison-table-td-value.comparison-table-td-value-checks.adjust-padding.comparison-table-td-bg-gray.comparison-table-td-highlighted-first {
  grid-column-gap: 8px;
  column-gap: 8px;
}

/* 3-column comparison table — keep the RemotePass column highlighted. */
.rp-askai-compare .comparison-table-td-highlighted,
.rp-askai-compare .comparison-table-td-highlighted-first,
.rp-askai-compare .comparison-table-td-highlighted-last {
  background: rgba(120, 63, 142, 0.06);
}