/* ===========================================================
   Foliovex — right-to-left layout + Arabic typography.

   Linked ONLY on Arabic pages (/ar/*.html, <html lang="ar-SA"
   dir="rtl">), as the LAST stylesheet — after styles.css and any
   per-tool CSS (editor.css, resume-style.css, hijri-calendar.css,
   speed-test.css). English pages never load this file.

   Every rule is prefixed with [dir="rtl"] so it (a) can never match
   an LTR document even if linked by mistake, and (b) carries one
   extra attribute of specificity over the rule it mirrors.

   Contents
     1. Fonts (token overrides)
     2. Arabic text hygiene (no letter-spacing / uppercase)
     3. Line-height + type scale for Arabic
     4. Things that keep their own (LTR) direction
     5. Site chrome — header, language toggle, mobile nav, footer
     6. Gateway (index) + PDF Tools grids + cards
     7. Tool pages — workspace, dropzone, file rows, thumbs,
        result/error panels, privacy card, about/FAQ blocks
     8. PDF editor (editor.css)
     9. Resume Builder UI (resume-style.css)
    10. Hijri calendar (hijri-calendar.css)
    11. Speed Test (speed-test.css)
    12. Arabic replacements for English text baked into CSS content
=========================================================== */


/* -----------------------------------------------------------
   1. Fonts
   Latin words ("Foliovex", "PDF", numbers) keep Fraunces / Plex;
   Arabic glyphs fall through to a family with the same character:
   Fraunces → Noto Naskh Arabic (calligraphic, editorial);
   IBM Plex Sans / Mono → IBM Plex Sans Arabic (same superfamily).
----------------------------------------------------------- */
:root[dir="rtl"] {
  --display: "Fraunces", "Noto Naskh Arabic", ui-serif, Georgia, serif;
  --body: "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system, "Segoe UI", Tahoma, sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, SFMono-Regular, monospace;
  /* Small labels that the mono face styles in English but that carry
     Arabic WORDS here. Plex Mono's Latin subset includes the space
     character, so with Mono first every Arabic word gap became a
     fixed-pitch 0.6em hole. Arabic face first for these; Latin inside
     them then uses Plex Sans Arabic's own (Plex-designed) Latin. */
  --fv-label: "IBM Plex Sans Arabic", "IBM Plex Mono", Tahoma, "Segoe UI", "Geeza Pro", "Noto Sans Arabic", sans-serif;
}
/* Per-tool scopes re-declare their own stacks; override each one. */
[dir="rtl"] .resume-scope {
  --font-ui: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;
}
[dir="rtl"] .hijri-scope {
  --display: "Fraunces", "Noto Naskh Arabic", Georgia, serif;
  --body: "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;
  --arabic: "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}
/* Form controls don't inherit font-family by default. */
[dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] button {
  font-family: inherit;
}
[dir="rtl"] .field-group input, [dir="rtl"] .field-group select, [dir="rtl"] .btn,
[dir="rtl"] .search-input, [dir="rtl"] .toast { font-family: var(--body); }


/* -----------------------------------------------------------
   2. Arabic text hygiene
   Letter-spacing breaks Arabic joining and uppercase has no meaning,
   so both are switched off everywhere — including pseudo-elements
   and JS-injected inline styles (crop tool's "Horizontal / Vertical"
   labels), hence !important. The resume DOCUMENT (.page) is excluded:
   it may be an English resume on an Arabic page and keeps its own
   template typography unless it is itself Arabic (see below).
----------------------------------------------------------- */
[dir="rtl"] *:not(.page):not(.page *),
[dir="rtl"] *:not(.page):not(.page *)::before,
[dir="rtl"] *:not(.page):not(.page *)::after {
  letter-spacing: normal !important;
  text-transform: none !important;
}
/* Resume document written in Arabic (dir="rtl" on the preview, or no
   explicit English lang on it). */
[dir="rtl"] .page[dir="rtl"] *,
[dir="rtl"] .page:lang(ar):not([dir="ltr"]) * {
  letter-spacing: normal !important;
  text-transform: none !important;
}
/* Mono labels (eyebrows, group labels, field labels…) lose their
   tracking and caps, so they get a touch more size to stay legible. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .tool-section .tool-group-label,
[dir="rtl"] .search-wrap-label,
[dir="rtl"] .field-group label,
[dir="rtl"] .workspace-back,
[dir="rtl"] .primary-card-cta,
[dir="rtl"] #fvx-live .fvx-eyebrow,
[dir="rtl"] .hijri-scope .eyebrow,
[dir="rtl"] .hijri-scope .cal-detail-label,
[dir="rtl"] .hijri-scope .field-group label { font-size: 13px; }
[dir="rtl"] .tool-section .tool-group-label { font-size: 14px; font-weight: 500; }
[dir="rtl"] .eyebrow,
[dir="rtl"] .tool-section .tool-group-label,
[dir="rtl"] .search-wrap-label,
[dir="rtl"] .field-group label,
[dir="rtl"] .workspace-back,
[dir="rtl"] .primary-card-cta,
[dir="rtl"] .about-item .tag,
[dir="rtl"] .chain-suggest .chain-label,
[dir="rtl"] .stamp-chip,
[dir="rtl"] .tool-card::before,
[dir="rtl"] .thumb .thumb-num,
[dir="rtl"] .progress-label,
[dir="rtl"] .selection-count,
[dir="rtl"] .reorder-label .reorder-sub,
[dir="rtl"] .result-summary,
[dir="rtl"] .error-panel .result-text,
[dir="rtl"] .footer-inner p.trademark,
[dir="rtl"] .ad-slot::before,
[dir="rtl"] .ed-style-context-label,
[dir="rtl"] .ed-search-count,
[dir="rtl"] .ed-page-indicator,
[dir="rtl"] #fvx-live .fvx-eyebrow,
[dir="rtl"] .resume-scope .privacy-badge,
[dir="rtl"] .resume-scope .entry-editor-head .entry-num,
[dir="rtl"] .hijri-scope .eyebrow,
[dir="rtl"] .hijri-scope .cal-weekday,
[dir="rtl"] .hijri-scope .cal-cell-today::after,
[dir="rtl"] .hijri-scope .cal-detail-label,
[dir="rtl"] .hijri-scope .cal-detail-hijri,
[dir="rtl"] .hijri-scope .cal-nav-title #calSubLabel,
[dir="rtl"] .hijri-scope .field-group label,
[dir="rtl"] .hijri-scope .result-panel span { font-family: var(--fv-label); }
/* .hijri-scope declares its own vars; give it the label stack too. */
[dir="rtl"] .hijri-scope { --fv-label: "IBM Plex Sans Arabic", "IBM Plex Mono", Tahoma, "Segoe UI", "Geeza Pro", "Noto Sans Arabic", sans-serif; }
/* File rows are mono in English (name + size); in Arabic the size and
   page count carry words, so they follow the label stack too, with
   tabular figures to keep columns tidy. */
[dir="rtl"] .file-row { font-family: var(--fv-label); font-variant-numeric: tabular-nums; }
[dir="rtl"] .about-item .tag,
[dir="rtl"] .chain-suggest .chain-label,
[dir="rtl"] .stamp-chip,
[dir="rtl"] .dz-or { font-size: 12px; }
[dir="rtl"] .tool-card::before { font-size: 11px; line-height: 1.5; padding: 0 8px; }
[dir="rtl"] .compress-stat-label,
[dir="rtl"] #fvx-live .fvx-stat-box span,
[dir="rtl"] #fvx-live .fvx-history-head-row { font-size: 12px; }
[dir="rtl"] .hijri-scope .cal-weekday-en { font-size: 12px; }
[dir="rtl"] .resume-scope .section-nav-link { font-size: 0.8rem; }


/* -----------------------------------------------------------
   3. Line-height + type scale
   Arabic needs more vertical room than Latin at the same size:
   body copy 1.75, UI copy ~1.6, headings ~1.35–1.45. Naskh reads
   best a little larger and a step lighter than Fraunces' 600.
----------------------------------------------------------- */
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] .resume-scope,
[dir="rtl"] .hijri-scope { line-height: 1.7; }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.4; }

[dir="rtl"] .hero h1,
[dir="rtl"] .hero.gateway-hero h1 {
  line-height: 1.35; font-weight: 600; font-size: clamp(30px, 4vw, 46px);
}
[dir="rtl"] .tools-head h1 { line-height: 1.35; font-size: clamp(32px, 3.9vw, 44px); }
[dir="rtl"] .workspace-head h1 { line-height: 1.4; font-size: clamp(30px, 4.3vw, 42px); }
[dir="rtl"] .ed-upload-inner h1 { line-height: 1.35; font-size: clamp(32px, 5.4vw, 46px); }
[dir="rtl"] #fvx-live h1 { line-height: 1.4; font-size: clamp(28px, 4.3vw, 39px); }
[dir="rtl"] .hijri-scope h1 { line-height: 1.4; font-size: clamp(28px, 4.3vw, 37px); }
[dir="rtl"] .tool-section h2,
[dir="rtl"] .why-section h2,
[dir="rtl"] .faq h2 { font-size: 28px; line-height: 1.4; }
[dir="rtl"] .faq-section h2,
[dir="rtl"] .related-tools-section h2,
[dir="rtl"] .tool-about h2,
[dir="rtl"] .tool-expanded h2,
[dir="rtl"] .tool-examples h2 { font-size: 22px; line-height: 1.45; }

[dir="rtl"] .hero p.lede,
[dir="rtl"] .tools-head .lede,
[dir="rtl"] .workspace-head p { line-height: 1.75; }

[dir="rtl"] .search-result-title { font-size: 15.5px; line-height: 1.5; }
[dir="rtl"] .search-result-desc { line-height: 1.6; }
[dir="rtl"] .primary-card-body b { font-size: 20px; line-height: 1.45; }
[dir="rtl"] .primary-card-body span,
[dir="rtl"] .path-card-text span { line-height: 1.6; }
[dir="rtl"] .tool-card h3 { font-size: 18px; line-height: 1.45; }
[dir="rtl"] .tool-card p { line-height: 1.65; }
[dir="rtl"] .tool-card-popular h3 { font-size: 19px; }
[dir="rtl"] .tool-card-sm h3 { font-size: 14.5px; line-height: 1.45; }
[dir="rtl"] .dropzone .dz-title { font-size: 20px; line-height: 1.5; }
[dir="rtl"] .file-list-heading { font-size: 16px; line-height: 1.5; }
[dir="rtl"] .privacy-card-title { line-height: 1.55; font-size: 15.5px; }
[dir="rtl"] .privacy-card-sub { line-height: 1.7; }
[dir="rtl"] .result-heading { line-height: 1.5; font-size: 22px; }
[dir="rtl"] .about-item h3,
[dir="rtl"] .why-item h3 { line-height: 1.5; }
[dir="rtl"] .about-item p,
[dir="rtl"] .why-item p,
[dir="rtl"] .tool-benefits li,
[dir="rtl"] .tool-howto li p,
[dir="rtl"] .tool-examples li { line-height: 1.75; }
[dir="rtl"] .faq-item summary { line-height: 1.6; }
[dir="rtl"] .faq-item p,
[dir="rtl"] .tool-about p,
[dir="rtl"] .verify-locally-panel,
[dir="rtl"] .hijri-scope details p,
[dir="rtl"] #fvx-live .fvx-about p,
[dir="rtl"] #fvx-live .fvx-lede,
[dir="rtl"] #fvx-live .fvx-disclosure { line-height: 1.8; }
[dir="rtl"] .article-cta p { line-height: 1.6; font-size: 16.5px; }
[dir="rtl"] .error-panel .result-text b { line-height: 1.6; }
[dir="rtl"] .ed-sig-modal-inner p,
[dir="rtl"] .ed-redact-warning { line-height: 1.65; }

/* Fixed-height / tight-line-height controls: give Arabic ascenders
   and descenders room so nothing is clipped. */
[dir="rtl"] .btn { line-height: 1.5; }
[dir="rtl"] .radio-pill { line-height: 1.6; padding-top: 7px; padding-bottom: 7px; }
[dir="rtl"] .mode-tab { line-height: 1.5; padding-top: 9px; padding-bottom: 9px; }
[dir="rtl"] .chain-chip { line-height: 1.5; padding-top: 5px; padding-bottom: 5px; }
[dir="rtl"] .stamp-chip { line-height: 1.5; padding-top: 3px; padding-bottom: 3px; }
[dir="rtl"] .field-group input[type="text"],
[dir="rtl"] .field-group input[type="number"],
[dir="rtl"] .field-group input[type="password"],
[dir="rtl"] .field-group select { line-height: 1.5; padding-top: 9px; padding-bottom: 9px; }
[dir="rtl"] .ed-tool-label { line-height: 1.45; font-size: 11px; }
[dir="rtl"] .ed-tool-more-label { line-height: 1.35; font-size: 10px; }
[dir="rtl"] .ed-mode-pill { line-height: 1.5; padding-top: 3px; padding-bottom: 3px; }
[dir="rtl"] .ed-style-controls select { line-height: 1.4; }
[dir="rtl"] .resume-scope .section-nav-link { line-height: 1.5; padding-top: 7px; padding-bottom: 7px; }
[dir="rtl"] .resume-scope .privacy-badge { line-height: 1.5; padding-top: 4px; padding-bottom: 4px; }
[dir="rtl"] .resume-scope .tpl-chip { line-height: 1.5; padding-top: 5px; padding-bottom: 5px; }
[dir="rtl"] .hijri-scope .cal-mode-btn { line-height: 1.5; padding-top: 5px; padding-bottom: 5px; }
[dir="rtl"] .hijri-scope .cal-cell-today::after { line-height: 1.3; }
[dir="rtl"] #fvx-live .fvx-btn { line-height: 1.5; padding-top: 12px; padding-bottom: 12px; }


/* -----------------------------------------------------------
   4. Things that keep their own direction
   PDF pages, annotation layers, chart canvases, crop preview and
   image previews are documents/graphics, not UI — mirroring them
   would misplace coordinates. Data-entry fields for passwords,
   emails, URLs, numbers, page ranges and file names type LTR but
   align to the RTL layout.
----------------------------------------------------------- */
[dir="rtl"] .ed-stage-scroll,
[dir="rtl"] .ed-stage,
[dir="rtl"] .ed-text-layer,
[dir="rtl"] .ed-form-layer,
[dir="rtl"] #cropPreviewWrap,
[dir="rtl"] #fvx-live canvas,
[dir="rtl"] .thumb img,
[dir="rtl"] .thumb canvas,
[dir="rtl"] .ed-thumb img,
[dir="rtl"] .ed-sig-pad { direction: ltr; }
/* Text typed into an annotation: position stays LTR-based, but the
   text itself picks its own direction from its first strong letter,
   so Arabic typed on a PDF reads correctly. */
[dir="rtl"] .ed-text-box,
[dir="rtl"] .ed-comment-box { unicode-bidi: plaintext; text-align: start; }

[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[inputmode="numeric"],
[dir="rtl"] input[inputmode="decimal"],
[dir="rtl"] input[autocomplete="email"],
[dir="rtl"] input[name*="range" i],
[dir="rtl"] input[id*="range" i],
[dir="rtl"] input[id*="pages" i],
[dir="rtl"] input[id*="url" i],
[dir="rtl"] input[id*="email" i],
[dir="rtl"] input[id*="phone" i],
[dir="rtl"] input[id*="website" i],
[dir="rtl"] input[id*="linkedin" i],
[dir="rtl"] input[data-dir="ltr"] {
  direction: ltr; text-align: right;
}
/* Placeholders in those fields are Arabic prose — keep them RTL. */
[dir="rtl"] input[type="password"]:placeholder-shown,
[dir="rtl"] input[type="email"]:placeholder-shown,
[dir="rtl"] input[type="url"]:placeholder-shown,
[dir="rtl"] input[type="tel"]:placeholder-shown { direction: rtl; }
/* Small centred number boxes stay centred. */
[dir="rtl"] .ed-page-indicator input,
[dir="rtl"] .hijri-scope .cal-jump input[type="number"] { text-align: center; }
/* File names: LTR so extensions/ellipsis behave, aligned to the start
   of the RTL row. */
[dir="rtl"] .file-row .fname,
[dir="rtl"] .ed-filename { direction: ltr; text-align: right; unicode-bidi: isolate; }
/* "5 KB" / "6 صفحات": each takes its direction from its own first
   strong letter, so Latin units don't flip to "KB 5". */
[dir="rtl"] .file-row .fsize,
[dir="rtl"] .result-summary,
[dir="rtl"] .selection-count,
[dir="rtl"] .compress-stat-value,
[dir="rtl"] .reorder-label .reorder-sub { unicode-bidi: plaintext; }
/* Error stack traces are code. */
[dir="rtl"] .error-details pre { direction: ltr; text-align: left; }
/* Keyboard shortcut hints are LTR tokens. */
[dir="rtl"] kbd { direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* editor.js injects style="text-align:left" on its error <details>. */
[dir="rtl"] .error-details[style*="text-align"] { text-align: right !important; }
/* Range sliders (compress quality, watermark opacity, editor stroke
   width…) are quantity controls with no spatial meaning; they follow
   the reading direction (minimum on the right), as native RTL sliders
   do. Nothing to override. */


/* -----------------------------------------------------------
   5. Site chrome
----------------------------------------------------------- */
/* Header: flex rows mirror automatically (brand on the right, nav +
   toggles on the left). Only physical properties need flipping. */
[dir="rtl"] .brand-name { line-height: 1.3; }
[dir="rtl"] .site-nav a { line-height: 1.5; }

/* Language toggle (.lang-toggle in the header, .lang-toggle-mobile at
   the end of the mobile menu). On Arabic pages its label is "English"
   (lang="en"), so it keeps Latin metrics and is bidi-isolated. Its
   position (beside the theme toggle) mirrors with the flex row; the
   editor mini-header rule in styles.css already uses logical margins. */
[dir="rtl"] .lang-toggle:lang(en),
[dir="rtl"] .lang-toggle-mobile:lang(en) {
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  unicode-bidi: isolate;
}

/* Mobile nav is a dropdown panel under the header (not a side drawer);
   its links are flex rows that already align to the right. */
[dir="rtl"] .mobile-nav a { text-align: right; }

/* Footer */
[dir="rtl"] .footer-inner p.trademark { line-height: 1.7; }

/* Install banner + toast: symmetric (centred translateX(-50%) works
   the same in both directions). */


/* -----------------------------------------------------------
   6. Gateway + PDF Tools grids + cards
----------------------------------------------------------- */
[dir="rtl"] .search-wrap { text-align: right; }
[dir="rtl"] .search-input::-webkit-search-cancel-button { margin-left: 0; margin-right: 4px; }

[dir="rtl"] .primary-card { text-align: right; }
/* "Open →" style CTAs: the arrow lives in the translated text (← in
   Arabic), so nothing to transform here. Hover lift is vertical. */

/* .path-card: icon on the right, hover arrow on the left. */
[dir="rtl"] .path-card { text-align: right; padding: 16px 18px 16px 44px; }
[dir="rtl"] .path-card::after {
  content: "←"; right: auto; left: 18px;
  transform: translateY(-50%) translateX(4px);
}
[dir="rtl"] .path-card:hover::after { transform: translateY(-50%) translateX(0); }

/* .tool-card: tab ribbon top-right, hover arrow bottom-left sliding in
   towards the left (the reading direction). */
[dir="rtl"] .tool-card { text-align: right; }
[dir="rtl"] .tool-card::before { left: auto; right: 16px; }
[dir="rtl"] .tool-card::after {
  content: "←"; right: auto; left: 14px; transform: translateX(4px);
}
[dir="rtl"] .tool-card:hover::after { transform: translateX(0); }
[dir="rtl"] .tool-card h3,
[dir="rtl"] .tool-card p { padding-right: 0; padding-left: 20px; }
[dir="rtl"] .tool-card-sm h3 { padding-left: 0; }
/* Arabic tool names run longer than English ones; a plain 1fr track
   can't shrink below its longest word, which pushed the 2-up popular
   grid 1px past a 320px screen. Let tracks shrink, words wrap. */
[dir="rtl"] .popular-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { [dir="rtl"] .popular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
[dir="rtl"] .tool-card h3,
[dir="rtl"] .tool-card p,
[dir="rtl"] .primary-card-body b,
[dir="rtl"] .primary-card-body span { overflow-wrap: anywhere; }

[dir="rtl"] .tool-section .tool-group-label { text-align: right; }

/* About strip: accent rule on the right edge. */
[dir="rtl"] .about-item {
  padding-left: 0; border-left: none;
  padding-right: 16px; border-right: 2px solid var(--stamp);
}


/* -----------------------------------------------------------
   7. Tool pages
----------------------------------------------------------- */
/* "← All tools" — the arrow is in the translated text (→ in Arabic),
   the link itself is a flex row that aligns right. */
[dir="rtl"] .workspace-back { line-height: 1.6; }

/* Mid-article CTA: accent border on the right. */
[dir="rtl"] .article-cta { border-left: 1px solid var(--line); border-right: 3px solid var(--stamp); }

/* Dropzone: centred, nothing directional. */

/* File rows: flex mirrors automatically — number badge on the right,
   filename, size, remove × on the left. */
@media (max-width: 640px) {
  [dir="rtl"] .file-row .move-btns { margin-left: 0; margin-right: 39px; }
}

/* Thumbnails: the page image is never mirrored, only the UI chrome on
   top of it. Rotate button moves to the top-left (end) corner. The
   reorder arrows: in an RTL grid "earlier" is to the RIGHT, so the
   "move earlier" button (.move-btn-left) sits top-right with its
   chevron mirrored to point right, and vice-versa. */
[dir="rtl"] .thumb .rotate-btn { right: auto; left: 5px; }
[dir="rtl"] .thumb .move-btn-left { left: auto; right: 5px; }
[dir="rtl"] .thumb .move-btn-right { right: auto; left: 5px; }
[dir="rtl"] .thumb .move-btn-left svg,
[dir="rtl"] .thumb .move-btn-right svg { transform: scaleX(-1); }
/* Rotate-left / rotate-right icons are NOT mirrored: they mean the
   physical rotation of the page. */

/* Crop: the per-page ←/→ pager is text; mirror the glyphs so "previous"
   (first in the row, now on the right) points right. The preview +
   drag overlay stays LTR (section 4). */
[dir="rtl"] #prevPageBtn:not(.ed-icon-btn),
[dir="rtl"] #nextPageBtn:not(.ed-icon-btn) { transform: scaleX(-1); }
[dir="rtl"] #prevPageBtn:not(.ed-icon-btn):active,
[dir="rtl"] #nextPageBtn:not(.ed-icon-btn):active { transform: scaleX(-1) translateY(1px); }

/* Sticky bottom action bar: full-bleed negative margins are symmetric
   (same calc on both sides), so they cancel the card/workspace padding
   identically in RTL. Selection count order already handled by flex. */

/* Compress summary: Before → After → Saved. Row mirrors; the arrow
   glyph must point left; "Saved" pushes to the far (left) end. */
[dir="rtl"] .compress-stat-arrow { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .compress-stat-saved { margin-left: 0; margin-right: auto; }

/* Error panel is a left-aligned row in LTR → right-aligned here. */
[dir="rtl"] .error-panel { text-align: right; }

/* Next-tool suggestions */
[dir="rtl"] .chain-suggest .chain-label { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .chain-chip { padding-right: 10px; padding-left: 14px; }

/* Privacy card: icon on the right (flex). "How can I verify?" toggle
   sits at the far end of the card — left in RTL. */
[dir="rtl"] .verify-locally-btn { text-align: left; }
[dir="rtl"] .verify-locally-panel ol { padding-left: 0; padding-right: 20px; }

/* FAQ +/– marker */
[dir="rtl"] .faq-item summary::after { margin-left: 0; margin-right: 12px; }

/* Benefits / how-to / examples lists */
[dir="rtl"] .tool-benefits li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .tool-benefits li::before { left: auto; right: 0; top: 10px; }
[dir="rtl"] .tool-howto li { padding-left: 0; padding-right: 32px; }
[dir="rtl"] .tool-howto li::before { left: auto; right: 0; top: 2px; }
[dir="rtl"] .tool-examples li { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .tool-examples li::before { content: "\2190"; left: auto; right: 0; }

/* Ad label */
[dir="rtl"] .ad-slot::before { content: "إعلان"; }


/* -----------------------------------------------------------
   8. PDF editor (editor.css)
   Shell mirrors: page sidebar on the RIGHT (it's the first flex child
   of .ed-body), stage on the left, bottom toolbar unchanged (centred),
   zoom controls float bottom-left. The page area itself stays LTR.
----------------------------------------------------------- */
[dir="rtl"] .ed-pagenav { border-right: none; border-left: 1px solid var(--line); }
/* Page tools: "earlier/later" chevrons point along the reading
   direction; the rotate icons are physical turns and stay as they are. */
[dir="rtl"] .ed-page-act[data-pgact="earlier"] svg,
[dir="rtl"] .ed-page-act[data-pgact="later"] svg { transform: scaleX(-1); }
[dir="rtl"] .ed-zoom-controls { right: auto; left: 16px; }
/* Previous/next page chevrons and undo/redo mean direction in time,
   so they mirror with the reading direction. */
[dir="rtl"] .ed-pagenav-controls #prevPageBtn svg,
[dir="rtl"] .ed-pagenav-controls #nextPageBtn svg,
[dir="rtl"] #undoBtn svg,
[dir="rtl"] #redoBtn svg { transform: scaleX(-1); }
/* Thumbnail badges: page number top-right, "unsaved" dot top-left. */
[dir="rtl"] .ed-thumb .ed-thumb-num { left: auto; right: 4px; }
[dir="rtl"] .ed-thumb .ed-thumb-dot { right: auto; left: 4px; }
[dir="rtl"] .ed-tool-options label { line-height: 1.5; }
[dir="rtl"] .ed-search-count { unicode-bidi: plaintext; }
@media (max-width: 760px) {
  /* Pages popover (left/right: 8px) and More panel (centred) are
     symmetric; just restore the border sides. */
  [dir="rtl"] .ed-pagenav { border-left: none; }
}


/* -----------------------------------------------------------
   9. Resume Builder UI (.resume-scope)
   Form panel + section rail on the RIGHT (first grid column mirrors),
   preview on the left. The resume DOCUMENT's own direction is set on
   the preview by its owner — not forced here.
----------------------------------------------------------- */
[dir="rtl"] .resume-scope .topbar-actions { margin-left: 0; margin-right: 12px; }
[dir="rtl"] .resume-scope .privacy-badge { margin-left: 0; margin-right: auto; }
[dir="rtl"] .resume-scope .form-panel { border-right: none; border-left: 1px solid var(--line); }
[dir="rtl"] .resume-scope .section-nav { border-right: none; border-left: 1px solid var(--line); }
[dir="rtl"] .resume-scope .section-nav-link { text-align: right; }
/* Accordion chevron: "›" is a bidi-mirrored glyph, so in RTL it already
   renders as "‹" (pointing into the reading direction). Open = rotate
   the other way so it still ends up pointing down. */
[dir="rtl"] .resume-scope .section-block summary::before { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .resume-scope .section-block[open] summary::before { transform: rotate(-90deg); }
/* "More ▾" menu: in the RTL bar the trigger is the innermost button of
   the action group (rightmost of the three, the group itself at the
   left end on desktop / right edge on phones), so the panel keeps its
   right:0 anchor and opens leftwards — inside the viewport in both
   cases. Only the item text alignment changes. */
[dir="rtl"] .resume-scope .more-menu-item { text-align: right; }
/* ATS drawer: slides in from the left edge (overlay's flex-end is the
   left in RTL); shadow and motion flipped to match. */
[dir="rtl"] .resume-scope .drawer {
  box-shadow: 8px 0 24px rgba(0,0,0,0.12);
  animation-name: fv-rtl-drawer-slide-in;
}
@keyframes fv-rtl-drawer-slide-in {
  from { transform: translateX(-28px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
[dir="rtl"] .resume-scope .drawer-note,
[dir="rtl"] .resume-scope .ats-item { line-height: 1.7; }
[dir="rtl"] .resume-scope label { line-height: 1.5; }
[dir="rtl"] .resume-scope .photo-upload-controls { align-items: flex-start; }
@media (max-width: 880px) {
  [dir="rtl"] .resume-scope .privacy-badge { margin-right: 0; }
}
@media (max-width: 400px) {
  [dir="rtl"] .resume-scope .topbar-actions { margin-right: 0; }
  [dir="rtl"] .resume-scope .form-panel { border-left: none; }
  /* resume-style.css's `.field-grid label:first-child { grid-column:
     span 2 }` creates an implicit, content-sized 2nd column once the
     grid is 1fr here; in RTL its labels overlapped. Full row instead. */
  [dir="rtl"] .resume-scope .field-grid label:first-child { grid-column: 1 / -1; }
}


/* -----------------------------------------------------------
   10. Hijri calendar (.hijri-scope)
   The 7-column grid mirrors automatically: first column (Sunday) on
   the right, week reads right-to-left.
----------------------------------------------------------- */
[dir="rtl"] .hijri-scope .cal-cell { text-align: right; }
[dir="rtl"] .hijri-scope .cal-cell-today::after { right: auto; left: 6px; content: "اليوم"; font-size: 9px; }
/* Prev/next month: glyphs are ←/→ text; "previous" sits on the right
   and must point right. */
[dir="rtl"] .hijri-scope .cal-nav-btn { transform: scaleX(-1); }
[dir="rtl"] .hijri-scope .result-panel,
[dir="rtl"] .hijri-scope .result-panel.active { text-align: right; }
[dir="rtl"] .hijri-scope .cal-nav-title #calLabel { line-height: 1.5; }
[dir="rtl"] .hijri-scope .cal-primary { line-height: 1.4; }
[dir="rtl"] .hijri-scope .cal-weekday { line-height: 1.5; }


/* -----------------------------------------------------------
   11. Speed Test (#fvx-live)
----------------------------------------------------------- */
[dir="rtl"] #fvx-live .fvx-live-badge { margin-left: 0; margin-right: 14px; }
[dir="rtl"] #fvx-live .fvx-disclosure {
  padding-left: 0; border-left: none;
  padding-right: 14px; border-right: 2px solid var(--line);
}
[dir="rtl"] #fvx-live .fvx-error-banner { border-left: 1px solid var(--line); border-right: 3px solid var(--stamp); }
[dir="rtl"] #fvx-live .fvx-conn-row span:last-child { text-align: left; }
[dir="rtl"] #fvx-live .fvx-history-row .fvx-hist-val { text-align: left; }
[dir="rtl"] #fvx-live .fvx-history-head-row span:not(:first-child) { text-align: left; }
[dir="rtl"] #fvx-live .fvx-stat-box b { line-height: 1.15; }
@media (max-width: 560px) {
  [dir="rtl"] #fvx-live .fvx-history-row .fvx-hist-val { text-align: right; }
}


/* -----------------------------------------------------------
   12. English text baked into CSS `content`
----------------------------------------------------------- */
[dir="rtl"] .thumb.selected::after { content: "✕ حذف"; font-family: var(--body); font-size: 12.5px; }

/* Page-number position is a spatial choice: keep "left" on the left. In
   RTL, row-reverse lays the pills out left→right in DOM order (left,
   center, right); flex-end still packs them against the right edge. */
[dir="rtl"] .radio-pills:has([data-pos]) { flex-direction: row-reverse; justify-content: flex-end; }

/* A PDF form field split into one box per character (a "comb" field)
   spaces its characters out to the boxes — the one letter-spacing the
   section 2 reset above must leave alone. */
[dir="rtl"] .ed-form-layer .ed-ff-input.ed-ff-comb { letter-spacing: var(--ff-ls, 0) !important; }