/* ============================================
   RTL — Arabic layer
   ============================================
   Loaded ONLY on /ar/ pages, after all other app
   stylesheets and together with bootstrap.rtl.min.css.
   Flex and grid flows flip automatically with dir="rtl";
   this file covers fonts and the physical left/right
   properties that don't auto-flip.
   ============================================ */

/* ── Typography — Tajawal for Arabic ─────── */
html[dir="rtl"] {
    --font-primary: 'Tajawal', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Tajawal', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Negative tracking hurts Arabic script — neutralize it */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] .section-title h2,
html[dir="rtl"] .page-hero-title,
html[dir="rtl"] .pg-split-title,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .cta-title,
html[dir="rtl"] .guide-banner-title {
    letter-spacing: 0;
}

html[dir="rtl"] body,
html[dir="rtl"] .hero-btn,
html[dir="rtl"] .pg-badge,
html[dir="rtl"] .page-breadcrumb {
    letter-spacing: 0;
}

/* ── Page hero ─────────────────────────────── */
html[dir="rtl"] .page-hero-dots {
    right: auto;
    left: 0;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.6), transparent);
    mask-image: linear-gradient(to right, rgba(0,0,0,0.6), transparent);
}

/* Breadcrumb + inline chevrons point the other way */
html[dir="rtl"] .page-breadcrumb .fa-chevron-right,
html[dir="rtl"] .footer-link .fa-chevron-right,
html[dir="rtl"] .about-link .fa-arrow-right,
html[dir="rtl"] .pricing-banner-btn .fa-arrow-right {
    transform: scaleX(-1);
}

/* ── Ambient decorations (physical corners) ── */
html[dir="rtl"] .pg-ambient {
    right: auto;
    left: -150px;
}

html[dir="rtl"] .pg-ambient-2 {
    left: auto;
    right: -120px;
}

/* ── Timeline ──────────────────────────────── */
html[dir="rtl"] .pg-timeline::before {
    left: auto;
    right: 27px;
}

html[dir="rtl"] .pg-timeline-item:hover .pg-timeline-content {
    transform: translateX(-4px);
}

@media (max-width: 767.98px) {
    html[dir="rtl"] .pg-timeline::before {
        left: auto;
        right: 23px;
    }
}

/* ── Tables ────────────────────────────────── */
html[dir="rtl"] .pg-table th,
html[dir="rtl"] .pg-table td {
    text-align: right;
}

/* ── Cards list ticks ──────────────────────── */
html[dir="rtl"] .pg-card-list li i {
    margin-top: 7px;
}

/* ── Keep technical SVG diagrams LTR ───────── */
html[dir="rtl"] .guide-banner-visual,
html[dir="rtl"] .storage-iso {
    direction: ltr;
}

/* Hero v3 — Arabic tuning. The ticket uses logical inset properties so it
   mirrors automatically; only neutralize Latin-tuned tracking. */
html[dir="rtl"] .hero-trust-text,
html[dir="rtl"] .hero-ticket-row,
html[dir="rtl"] .nav-text,
html[dir="rtl"] .dropdown-item {
    letter-spacing: 0;
}

html[dir="rtl"] .hero-ticket-price strong {
    direction: ltr;
    display: inline-block;
}

/* Keep numerals and units reading naturally */
html[dir="rtl"] .storage-price,
html[dir="rtl"] .cta-price-amount,
html[dir="rtl"] .pg-price-amount,
html[dir="rtl"] .pricing-banner-amount,
html[dir="rtl"] .storage-meta-item span {
    direction: ltr;
    unicode-bidi: embed;
}

/* ── Toast slide-out direction ─────────────── */
html[dir="rtl"] .toast {
    transform: translateX(-100%);
}

html[dir="rtl"] .toast.show {
    transform: translateX(0);
}

/* ── Forms ─────────────────────────────────── */
html[dir="rtl"] .contact-dark-input::placeholder {
    text-align: right;
}

html[dir="rtl"] input[type="tel"].contact-dark-input,
html[dir="rtl"] input[type="email"].contact-dark-input {
    direction: ltr;
    text-align: right;
}

/* ── Slightly larger Arabic body copy for readability ── */
html[dir="rtl"] .pg-card-text,
html[dir="rtl"] .pg-timeline-text,
html[dir="rtl"] .faq-answer-content p,
html[dir="rtl"] .faq-answer-content li {
    line-height: 1.85;
}