/* ============================================================
   APPROVE IT — rtl.css
   Right-to-left overrides for Arabic
   Loaded ONLY when html[dir="rtl"]
   ============================================================ */

/* Cairo is already RTL-friendly — main brand font supports Arabic natively */

/* ---------- Typography adjustments for Arabic ---------- */
html[dir="rtl"] body {
  font-family: 'Cairo', system-ui, sans-serif;
  letter-spacing: 0;  /* Arabic doesn't need negative tracking */
}

/* Arabic headlines need slightly different proportions */
html[dir="rtl"] .hero-headline,
html[dir="rtl"] .h2,
html[dir="rtl"] .verdict-name,
html[dir="rtl"] .final-cta h2 {
  letter-spacing: 0;
  line-height: 1.15;
}

html[dir="rtl"] .hero-headline {
  font-size: clamp(44px, 6vw, 88px);
}

html[dir="rtl"] .verdict-name {
  font-family: 'Cairo', system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(56px, 9vw, 110px);
}

/* Serif accents — Fraunces doesn't support Arabic, so fall back to italic Cairo */
html[dir="rtl"] .h2 .serif,
html[dir="rtl"] .h2 .accent,
html[dir="rtl"] .hero-headline .serif,
html[dir="rtl"] .final-cta h2 .serif,
html[dir="rtl"] .tier-name,
html[dir="rtl"] .alt-name,
html[dir="rtl"] .doc-name,
html[dir="rtl"] .ec-name,
html[dir="rtl"] .stamp-word,
html[dir="rtl"] .stamp-word-main,
html[dir="rtl"] .checker-input::placeholder,
html[dir="rtl"] .final-form input::placeholder,
html[dir="rtl"] .proof-quote,
html[dir="rtl"] .reasoning,
html[dir="rtl"] .step-circle,
html[dir="rtl"] .upgrade-title .serif,
html[dir="rtl"] .section-num,
html[dir="rtl"] .alt-num,
html[dir="rtl"] .domain-name,
html[dir="rtl"] .recent-name,
html[dir="rtl"] .case-id {
  font-family: 'Cairo', system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
}

html[dir="rtl"] .h2 .serif,
html[dir="rtl"] .h2 .accent,
html[dir="rtl"] .hero-headline .serif,
html[dir="rtl"] .final-cta h2 .serif {
  font-weight: 300;
}

/* Stamp word in Arabic — needs adjustment */
html[dir="rtl"] .stamp-word {
  font-size: 38px;
}
html[dir="rtl"] .stamp-word-main {
  font-size: 26px;
}

/* Big serif backgrounds — replace with Arabic equivalent */
html[dir="rtl"] .hero-watermark {
  font-family: 'Cairo', sans-serif;
  font-style: normal;
  font-weight: 200;
  font-size: clamp(160px, 22vw, 340px);
  inset-inline-start: -20px;
  letter-spacing: -0.02em;
}

html[dir="rtl"] .checks-section::before {
  font-family: 'Cairo', sans-serif;
  font-style: normal;
  content: '٦';
  font-size: 500px;
}

html[dir="rtl"] .final-cta::after {
  content: '«';
  font-family: 'Cairo', sans-serif;
  font-style: normal;
}

/* ---------- Layout flips that don't auto-mirror ---------- */

/* The headline stamp word — reverse the skew */
html[dir="rtl"] .hero-headline .stamp-word::before {
  transform: rotate(1.2deg);
}
@keyframes stampDropRtl {
  0% { transform: rotate(1.2deg) scale(1.6); opacity: 0; }
  60% { transform: rotate(1.2deg) scale(0.95); opacity: 1; }
  100% { transform: rotate(1.2deg) scale(1); opacity: 1; }
}
html[dir="rtl"] .hero-headline .stamp-word::before {
  animation: stampDropRtl 0.5s 0.7s cubic-bezier(0.34,1.7,0.64,1) both;
}

/* Document tab in vignette */
html[dir="rtl"] .doc-tab {
  left: auto;
  right: 36px;
}

/* Stamp position (mirror to left side) */
html[dir="rtl"] .vignette-stamp {
  right: auto;
  left: -3%;
  transform: rotate(12deg) scale(0);
  animation: stampHitRtl 0.7s 1s cubic-bezier(0.34,1.7,0.64,1) forwards;
}
@keyframes stampHitRtl {
  0% { transform: rotate(12deg) scale(2); opacity: 0; }
  60% { transform: rotate(12deg) scale(0.93); opacity: 1; }
  100% { transform: rotate(12deg) scale(1); opacity: 0.92; }
}

/* Stamp circle on results page — mirror the rotation */
html[dir="rtl"] .stamp-circle {
  transform: rotate(8deg) scale(0);
  animation: stampHitVerdictRtl 0.7s 0.5s cubic-bezier(0.34,1.7,0.64,1) forwards;
}
@keyframes stampHitVerdictRtl {
  0% { transform: rotate(8deg) scale(2); opacity: 0; }
  60% { transform: rotate(8deg) scale(0.93); opacity: 1; }
  100% { transform: rotate(8deg) scale(1); opacity: 0.92; }
}

/* Floating chips — mirror positions */
html[dir="rtl"] .fc-1 { left: auto; right: -5%; }
html[dir="rtl"] .fc-2 { left: auto; right: -2%; }
html[dir="rtl"] .fc-3 { right: auto; left: 8%; }

/* Paper background offsets in vignette */
html[dir="rtl"] .paper-1 { left: auto; right: 12%; transform: rotate(6deg); }
html[dir="rtl"] .paper-2 { left: auto; right: 18%; transform: rotate(-3deg); }
html[dir="rtl"] .vignette-doc { transform: rotate(1.5deg); }

/* Example showcase cards — mirror the rotations */
html[dir="rtl"] .ec-1 { left: auto; right: 0; transform: rotate(4deg); }
html[dir="rtl"] .ec-2 { left: auto; right: 5%; transform: rotate(-0.5deg) scale(1.02); }
html[dir="rtl"] .ec-3 { left: auto; right: 8%; transform: rotate(-3deg); }
html[dir="rtl"] .example-card:hover {
  transform: translateY(-6px) rotate(0deg) scale(1.05);
}

/* Reasoning quote mark */
html[dir="rtl"] .reasoning::before {
  content: '»';
  left: auto;
  inset-inline-start: 12px;
}

/* Proof quote mark */
html[dir="rtl"] .proof-quote-mark { content: '»'; }
html[dir="rtl"] .proof-quote-mark::before { content: '»'; }

/* Final CTA decorative quote — flip to right */
html[dir="rtl"] .final-cta::after {
  inset-inline-start: auto;
  inset-inline-end: 30px;
  left: auto;
  right: 30px;
}

/* Section number margin (use logical property) */
html[dir="rtl"] .section-title-text {
  margin-inline-start: 8px;
  margin-inline-end: 0;
}

/* Tier most-popular badge (already centered, just reset text-align if needed) */
html[dir="rtl"] .tier-pro::before {
  /* Centered transform works fine in both directions */
}

/* Verdict banner right-alignment */
html[dir="rtl"] .vb-right { text-align: start; }

/* Showcase text padding */
html[dir="rtl"] .showcase-text {
  padding-inline-end: 20px;
  padding-inline-start: 0;
}

/* Vo-item hover shifts to the left in LTR — flip for RTL */
html[dir="rtl"] .vo-item:hover {
  transform: translateX(-4px);
}

/* Marquee scrolls naturally, but we can reverse direction in Arabic */
html[dir="rtl"] .marquee-track {
  animation-direction: reverse;
}

/* Score sub (e.g., 88/100) — flip the slash visually */
html[dir="rtl"] .doc-score-value sub,
html[dir="rtl"] .vb-score sub {
  /* Numerals look fine; just keep LTR direction for the score itself */
  direction: ltr;
  unicode-bidi: embed;
}
html[dir="rtl"] .doc-score-value,
html[dir="rtl"] .vb-score,
html[dir="rtl"] .tier-price-value,
html[dir="rtl"] .alt-score,
html[dir="rtl"] .case-id {
  direction: ltr;
  unicode-bidi: embed;
}

/* Numbers in price (e.g., $19) and percentages — keep LTR */
html[dir="rtl"] .tier-price {
  direction: ltr;
  justify-content: flex-end;
}

/* Domain names — keep LTR since they're English */
html[dir="rtl"] .domain-name,
html[dir="rtl"] .checker-input,
html[dir="rtl"] .final-form input {
  /* These accept English business names — should remain LTR-ready */
  direction: ltr;
  text-align: start;
}
html[dir="rtl"] .checker-input::placeholder,
html[dir="rtl"] .final-form input::placeholder {
  direction: rtl;
}

/* But if user is typing Arabic into the input, browser handles it */

/* SVG icons that have directional meaning (arrows) — flip horizontally */
html[dir="rtl"] .checker-btn svg,
html[dir="rtl"] .btn-primary svg,
html[dir="rtl"] .alt-cta svg,
html[dir="rtl"] .nav-cta svg {
  transform: scaleX(-1);
}
html[dir="rtl"] .checker-btn:hover svg {
  transform: scaleX(-1) translate(2px, -2px);
}
html[dir="rtl"] .alt-card:hover .alt-cta svg {
  transform: scaleX(-1) translateX(3px);
}

/* Steps timeline arrow */
html[dir="rtl"] .steps-line::before {
  inset-inline-start: 5%;
}
html[dir="rtl"] .steps-line::after {
  inset-inline-end: 5%;
  /* Mirror the arrow */
  border-width: 8px 14px 8px 0;
  border-color: transparent var(--turquoise-deep) transparent transparent;
}

/* Recent cards section (verdict page) */
html[dir="rtl"] .section-title-text {
  margin-inline-start: 8px;
}