/* ================================================================
   RIYO STUDIO — Arabic (RTL) layer for the studio pages.
   Loaded after style.css and home.css on ar.html only.
   ================================================================ */

@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/plex-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/plex-arabic-500.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/plex-arabic-600.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/plex-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/amiri-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}

html[dir="rtl"] body.home {
  --sans: 'IBM Plex Sans Arabic', 'Inter', -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --serif: 'Amiri', 'Instrument Serif', 'Times New Roman', serif;
  font-family: var(--sans);
}

/* Arabic letters join; tracking breaks the joins, so drop it everywhere */
html[dir="rtl"] body.home,
html[dir="rtl"] body.home * { letter-spacing: 0 !important; }

html[dir="rtl"] .rs-display { font-weight: 700; line-height: 1.22; font-size: clamp(44px, 5.8vw, 84px); }
html[dir="rtl"] .rs-h2 { font-weight: 700; line-height: 1.3; max-width: 18ch; }
html[dir="rtl"] .rs-h3 { line-height: 1.45; }
html[dir="rtl"] .rs-display em,
html[dir="rtl"] .rs-h2 em,
html[dir="rtl"] .rs-next-label,
html[dir="rtl"] .rs-case-quote,
html[dir="rtl"] .rs-founder-mark {
  font-style: normal;
  font-weight: 400;
}
html[dir="rtl"] .rs-display em,
html[dir="rtl"] .rs-h2 em { font-size: 1.06em; padding-right: 0; padding-left: 0.06em; }
html[dir="rtl"] .rs-hero-lede,
html[dir="rtl"] .rs-lede,
html[dir="rtl"] .rs-list li,
html[dir="rtl"] .rs-service > p,
html[dir="rtl"] .rs-case-copy > p:not([class]),
html[dir="rtl"] .rs-studio-body > p,
html[dir="rtl"] .rs-faq details p { line-height: 1.85; }
html[dir="rtl"] .rs-kicker,
html[dir="rtl"] .rs-facts dt,
html[dir="rtl"] .rs-footer-col h2,
html[dir="rtl"] .rs-status-label,
html[dir="rtl"] .rs-mail-label { font-family: var(--sans); font-size: 13px; text-transform: none; }
html[dir="rtl"] .rs-kicker span,
html[dir="rtl"] .rs-index,
html[dir="rtl"] .rs-step-num,
html[dir="rtl"] .rs-brief span { font-family: var(--mono); }
html[dir="rtl"] .rs-case-title { font-weight: 700; line-height: 1.25; }
html[dir="rtl"] .rs-founder-mark { font-family: var(--serif); font-size: 26px; }

/* Navigation */
html[dir="rtl"] body.home .nav-links { margin-left: 22px; margin-right: auto; }
html[dir="rtl"] .nav-brand-tag,
html[dir="rtl"] .drawer-brand-tag { font-family: 'IBM Plex Sans Arabic', 'Outfit', sans-serif; font-size: 11px; text-transform: none; }
html[dir="rtl"] .nav-lang { font-family: 'Inter', sans-serif; }

/* Drawer slides in from the right */
html[dir="rtl"] .site-drawer {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(102%);
}
html[dir="rtl"] .site-drawer.open { transform: translateX(0); }
html[dir="rtl"] .nav-burger { margin-left: 0; margin-right: -6px; }

/* Directional icons point the reading way */
html[dir="rtl"] .rs-btn svg,
html[dir="rtl"] .rs-tool-go svg,
html[dir="rtl"] .rs-next-cta svg,
html[dir="rtl"] .rs-link svg { transform: scaleX(-1); }
html[dir="rtl"] .rs-btn:hover svg,
html[dir="rtl"] .rs-tool:hover .rs-tool-go svg,
html[dir="rtl"] .rs-next:hover .rs-next-cta svg { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] .rs-link:hover svg { transform: scaleX(-1) translate(2px, -2px); }
html[dir="rtl"] .rs-link--install svg { transform: none; }

/* Hero */
html[dir="rtl"] .rs-pill { padding: 8px 12px 8px 16px; }
html[dir="rtl"] .rs-mail { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .rs-hero-visual .rs-float--a { right: auto; left: 0; }
html[dir="rtl"] .rs-mail-head time,
html[dir="rtl"] .rs-mail-changes time { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .rs-hero-bg::after { right: auto; left: -10%; }

/* Lists with leading ticks */
html[dir="rtl"] .rs-list li { padding-left: 0; padding-right: 28px; }
html[dir="rtl"] .rs-list li::before { left: auto; right: 0; }
html[dir="rtl"] .rs-plans-list li { padding: 18px 50px 18px 18px; }
html[dir="rtl"] .rs-plans-list li::before { left: auto; right: 18px; }

/* Work cases */
html[dir="rtl"] .rs-devices { padding: 0 0 7% 9%; }
html[dir="rtl"] .rs-devices .rs-phone { right: auto; left: 0; }
html[dir="rtl"] .rs-case-copy { padding: clamp(8px, 2vw, 24px) 0 clamp(8px, 2vw, 24px) clamp(8px, 2vw, 32px); }
html[dir="rtl"] .rs-case--flip .rs-case-copy { padding: clamp(8px, 2vw, 24px) clamp(8px, 2vw, 32px) clamp(8px, 2vw, 24px) 0; }
html[dir="rtl"] .rs-browser-bar span { margin-left: 0; margin-right: 12px; direction: ltr; text-align: right; }

/* Process timeline */
html[dir="rtl"] .rs-steps::before { background: linear-gradient(270deg, rgba(52, 211, 153, 0.6), rgba(255, 255, 255, 0.08) 70%); }
html[dir="rtl"] .rs-step { padding-right: 0; padding-left: 12px; }

/* Studio */
html[dir="rtl"] .rs-founder { padding: 14px 14px 14px 24px; }
html[dir="rtl"] .rs-facts > div:nth-child(odd) { padding-right: 0; padding-left: 20px; }
html[dir="rtl"] .rs-aud-ar { text-align: right; }

/* FAQ */
html[dir="rtl"] .rs-faq details p { padding: 0 4px 26px 60px; }

/* Email address and other Latin runs stay left-to-right */
html[dir="rtl"] .rs-email,
html[dir="rtl"] .rs-footer-mail { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .rs-email { font-family: 'Instrument Serif', serif; font-style: italic; }

@media (max-width: 900px) {
  html[dir="rtl"] .rs-case-copy,
  html[dir="rtl"] .rs-case--flip .rs-case-copy { padding: 0 clamp(6px, 2vw, 16px) clamp(10px, 2vw, 16px); }
}

@media (max-width: 768px) {
  html[dir="rtl"] body.home .rs-display { font-size: clamp(38px, 10.5vw, 54px) !important; line-height: 1.25 !important; }
  html[dir="rtl"] body.home .rs-h2 { font-size: clamp(28px, 7.6vw, 40px) !important; line-height: 1.32 !important; }
  html[dir="rtl"] .rs-hero-visual .rs-float--a { left: 50%; right: auto; translate: -50% 0; }
  html[dir="rtl"] .rs-step { padding: 0 76px 36px 0; }
  html[dir="rtl"] .rs-step:last-child { padding-bottom: 0; }
  html[dir="rtl"] .rs-step-num { left: auto; right: 0; }
  html[dir="rtl"] .rs-step::before { left: auto; right: 27px; }
  html[dir="rtl"] .rs-faq details p { padding-left: 8px; }
  html[dir="rtl"] .drawer-nav .nav-inner { padding-left: 16px; padding-right: 14px; }
}

/* The drawer's mono group labels have no Arabic glyphs */
html[dir="rtl"] .drawer-group,
html[dir="rtl"] .drawer-label,
html[dir="rtl"] .drawer-cta,
html[dir="rtl"] .drawer-install,
html[dir="rtl"] .drawer-brand-tag,
html[dir="rtl"] .cmd-group,
html[dir="rtl"] .cmd-option,
html[dir="rtl"] #cmd-input { font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif; text-transform: none; letter-spacing: 0; }
html[dir="rtl"] .drawer-group { font-size: 12.5px; }

/* Tool cards: Arabic name first, the English name (as shown on the tool page) beneath */
html[dir="rtl"] .rs-tool .rs-h3 { margin-bottom: -8px; }
.rs-tool-en { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--dim); direction: ltr; text-align: right; }
html[dir="rtl"] .rs-tag { font-family: var(--sans); font-size: 11.5px; text-transform: none; }

/* WhatsApp (Arabic site only) */
.rs-btn--wa svg,
.rs-btn--wa-solid svg,
.rs-footer-wa svg,
.rs-wa-fab svg { fill: currentColor; stroke: none; transform: none !important; }
.rs-btn--wa { color: #25D366; border-color: rgba(37, 211, 102, 0.45); }
.rs-btn--wa:hover { border-color: #25D366; background: rgba(37, 211, 102, 0.08); }
.rs-btn--wa-solid { background: #25D366; color: #052e16; box-shadow: 0 18px 40px -18px rgba(37, 211, 102, 0.7); }
.rs-btn--wa-solid:hover { background: #34e077; }
.rs-wa-number { margin-top: 18px; font-size: 14px; color: var(--mist); }
.rs-wa-number a,
.rs-faq a { color: var(--ivory); border-bottom: 1px solid var(--line-2); }
.rs-footer-wa { display: inline-flex; align-items: center; gap: 8px; }
.rs-footer-wa svg { color: #25D366; }
.rs-wa-fab {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #fff;
  background: #25D366;
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.3s, transform 0.3s;
}
.rs-wa-fab.is-shown { opacity: 1; pointer-events: auto; transform: none; }
.rs-wa-fab.is-shown:hover { transform: scale(1.06); }
@media (display-mode: standalone) { .rs-wa-fab { display: none; } }

html[dir="rtl"] .rs-check-badge { font-family: var(--sans); font-size: 12px; text-transform: none; }