/* ============================================================
   RTL LAYER
   Every rule is scoped to [dir="rtl"], so this file is safe to
   load on every page — it only takes effect when Arabic is
   selected (server-rendered dir, or toggled by live-translation).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap");

/* ------------------------------------------------------------
   1. ARABIC TYPE
   Latin faces have no Arabic coverage, so swap the whole stack.
   Kufi carries headings, Plex Sans Arabic carries body + labels.
   ------------------------------------------------------------ */
[dir="rtl"] {
    --font-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
    --font-body: "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] a,
[dir="rtl"] li,
[dir="rtl"] span,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] button,
[dir="rtl"] label {
    font-family: var(--font-body) !important;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .title,
[dir="rtl"] .bento-title,
[dir="rtl"] .section-title .title {
    font-family: var(--font-display) !important;
    /* Arabic script has no uppercase and needs looser tracking than
       the tight Latin display setting. */
    letter-spacing: 0 !important;
    line-height: 1.45 !important;
}

/* Mono eyebrows become normal weighted labels — letter-spacing and
   uppercase both break Arabic letter joining. */
[dir="rtl"] .section-title .subtitle,
[dir="rtl"] .rn-slider-area .content .inner > .subtitle,
[dir="rtl"] .rn-portfolio .category-tag,
[dir="rtl"] .rn-pricing-table .pricing-header .title,
[dir="rtl"] .contact-info-card .info-content h5,
[dir="rtl"] .contact-social-links h5,
[dir="rtl"] .rn-footer-area .widget-title,
[dir="rtl"] .rn-footer-area .social-title,
[dir="rtl"] .rn-footer-area .contact-label,
[dir="rtl"] .about-me-section .key-facts li strong,
[dir="rtl"] .rn-slider-area .social-share-inner-left .title,
[dir="rtl"] .bento-tags li,
[dir="rtl"] .language-dropdown .dropdown-toggle {
    font-family: var(--font-body) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
}

/* Slightly larger optical size — Arabic reads small at Latin metrics */
[dir="rtl"] .section-title .subtitle { font-size: 13.5px !important; }
[dir="rtl"] .rn-footer-area .widget-title,
[dir="rtl"] .rn-footer-area .social-title { font-size: 12.5px !important; }
[dir="rtl"] .contact-info-card .info-content h5,
[dir="rtl"] .contact-social-links h5,
[dir="rtl"] .rn-footer-area .contact-label,
[dir="rtl"] .about-me-section .key-facts li strong { font-size: 12.5px !important; }
[dir="rtl"] .about-me-section .key-facts li strong { color: rgba(255, 255, 255, .58) !important; }

/* ------------------------------------------------------------
   2. GLOBAL MIRRORING
   ------------------------------------------------------------ */
[dir="rtl"] body { text-align: right; }

/* NOTE: do NOT add flex-direction: row-reverse to .row here.
   A flex container inside dir="rtl" already lays its main axis out
   right-to-left, so row-reverse would flip it a second time and put
   the layout back into LTR order. Bootstrap columns, the header bar
   and the hero mirror themselves from the dir attribute alone. */

[dir="rtl"] .text-center { text-align: center !important; }

/* Utility margins the template uses for LTR spacing */
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }

/* ------------------------------------------------------------
   3. HEADER / NAV
   ------------------------------------------------------------ */
[dir="rtl"] .mainmenu-nav .primary-menu { justify-content: flex-start !important; }
[dir="rtl"] .header-center { justify-content: flex-start !important; }
[dir="rtl"] .header-right { justify-content: flex-start; }

[dir="rtl"] .language-dropdown .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    text-align: right;
}

[dir="rtl"] .popup-mobile-menu .inner {
    left: auto;
    right: 0;
    border-right: 0 !important;
    border-left: 1px solid var(--line) !important;
}

[dir="rtl"] .popup-mobile-menu .primary-menu .nav-item .nav-link { text-align: right; }

/* ------------------------------------------------------------
   4. HERO
   ------------------------------------------------------------ */
[dir="rtl"] .rn-slider-area .content .inner > .subtitle::before,
[dir="rtl"] .section-title .subtitle::before {
    /* the leading rule sits on the right in RTL */
    order: 2;
}

[dir="rtl"] .rn-slider-area::before {
    background:
        radial-gradient(720px 460px at 22% 18%, rgba(43, 78, 255, .30), transparent 62%),
        radial-gradient(600px 420px at 92% 88%, rgba(255, 159, 74, .13), transparent 60%);
}

[dir="rtl"] .rn-slider-area .description,
[dir="rtl"] .about-me-section .about-me-content { margin-left: auto; margin-right: 0; }

[dir="rtl"] .about-me-section .key-facts li {
    padding-left: 0;
    padding-right: 14px;
    border-left: 0;
    border-right: 2px solid var(--accent);
}

/* The glow disc is centred so it needs no mirroring; only the warm
   counter-light is off-centre, so flip which side it sits on. */
[dir="rtl"] .rn-slider-area .thumbnail .inner::after {
    left: 56%;
}

/* ------------------------------------------------------------
   5. BENTO GRID
   grid-auto-flow follows the inline direction automatically, so the
   tiles mirror themselves. Only the inner alignment needs help.
   ------------------------------------------------------------ */
[dir="rtl"] .bento-tile { text-align: right; }
[dir="rtl"] .bento-tile.bento-ink::before {
    background:
        radial-gradient(560px 340px at 16% -10%, rgba(43, 78, 255, .38), transparent 62%),
        radial-gradient(420px 300px at 94% 108%, rgba(255, 159, 74, .16), transparent 60%);
}

[dir="rtl"] .bento-tile:hover .bento-icon { transform: rotate(6deg) scale(1.05); }

/* Latin tech names stay left-to-right inside an RTL paragraph */
[dir="rtl"] .bento-tags li { direction: ltr; unicode-bidi: isolate; }

/* ------------------------------------------------------------
   6. PORTFOLIO
   ------------------------------------------------------------ */
[dir="rtl"] .rn-portfolio .content { text-align: right; }
[dir="rtl"] .rn-portfolio:hover .content .title i { transform: translate(-3px, -3px); }
[dir="rtl"] .rn-portfolio .content .title i { transform: scaleX(-1); }

/* ------------------------------------------------------------
   7. PRICING
   ------------------------------------------------------------ */
[dir="rtl"] .plan-card,
[dir="rtl"] .pricing-panel,
[dir="rtl"] .compare-head,
[dir="rtl"] .step { text-align: right; }

/* .plan-badge already uses inset-inline-start, so it mirrors on its own */

/* No align-self override here: in a column flex container align-self is
   already direction-aware, so the base flex-start puts the CTA on the
   right in RTL. Forcing flex-end pushed it to the wrong edge. */

/* text-align:start on the first column handles the label side; the
   value columns stay centred in both directions. */
[dir="rtl"] .compare-table thead th:first-child,
[dir="rtl"] .compare-table tbody th { text-align: right; }

/* The tick is drawn from the left edge of its box; mirroring the box
   would break the glyph, so pin it and keep the drawing direction. */
[dir="rtl"] .compare-table .mark { direction: ltr; }

[dir="rtl"] .step { border-top-color: var(--line-strong); }

/* Prices and page counts stay in Western digits and LTR order */
[dir="rtl"] .plan-price,
[dir="rtl"] .compare-table td { unicode-bidi: plaintext; }

/* ------------------------------------------------------------
   8. CONTACT FORM
   Floating labels and icons are absolutely positioned from the left
   in LTR; every offset has to be mirrored explicitly.
   ------------------------------------------------------------ */
[dir="rtl"] .contact-info-card,
[dir="rtl"] .contact-social-links,
[dir="rtl"] .modern-contact-form { text-align: right; }

[dir="rtl"] .contact-info-card:hover { transform: translateX(-4px); }

[dir="rtl"] .contact-info-card .status-dot { margin-right: 0; margin-left: 8px; }

[dir="rtl"] .floating-label-group .input-icon {
    left: auto;
    right: 16px;
}

[dir="rtl"] .floating-label-group input,
[dir="rtl"] .floating-label-group textarea {
    padding: 24px 44px 10px 16px !important;
    text-align: right;
}

[dir="rtl"] .floating-label-group textarea { padding-top: 26px !important; }

[dir="rtl"] .floating-label-group label {
    left: auto;
    right: 44px;
}

[dir="rtl"] .floating-label-group input:focus + label,
[dir="rtl"] .floating-label-group input:not(:placeholder-shown) + label,
[dir="rtl"] .floating-label-group textarea:focus + label,
[dir="rtl"] .floating-label-group textarea:not(:placeholder-shown) + label {
    left: auto;
    right: 44px;
}

/* Latin-only values keep their own direction */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] .contact-info-card .info-content a[href^="mailto"],
[dir="rtl"] .contact-info-card .info-content a[href^="tel"],
[dir="rtl"] .rn-footer-area .contact-value {
    direction: ltr;
    text-align: right;
    unicode-bidi: plaintext;
}

/* ------------------------------------------------------------
   9. FOOTER
   ------------------------------------------------------------ */
[dir="rtl"] .rn-footer-area { text-align: right; }

[dir="rtl"] .rn-footer-area::before {
    background: radial-gradient(760px 420px at 88% 0%, rgba(43, 78, 255, .20), transparent 60%);
}

[dir="rtl"] .rn-footer-area .footer-description { max-width: 40ch; margin-left: auto; margin-right: 0; }
[dir="rtl"] .rn-footer-area .footer-links li a:hover { transform: translateX(-4px); }
[dir="rtl"] .rn-footer-area .footer-bottom-links { justify-content: flex-start; }

@media (max-width: 991px) {
    [dir="rtl"] .rn-footer-area .footer-bottom-links { justify-content: flex-end; }
}

/* ------------------------------------------------------------
   10. MODALS, CHATBOT, MISC
   ------------------------------------------------------------ */
[dir="rtl"] .modal-header,
[dir="rtl"] .modal-body,
[dir="rtl"] .modal-footer { text-align: right; }

/* The floating action stack deliberately stays on the RIGHT in RTL.
   These are persistent utility controls rather than page content, and
   the site owner wants them in the same corner in every language. The
   rules below only undo any left-side mirroring inherited elsewhere. */
[dir="rtl"] .chatbot-container,
[dir="rtl"] .chatbot-toggle,
[dir="rtl"] .floating-whatsapp {
    left: auto !important;
    right: 30px !important;
}

[dir="rtl"] .backto-top > div {
    left: auto !important;
    right: 36px !important;
}

[dir="rtl"] body.chatbot-active .floating-whatsapp,
[dir="rtl"] body.chatbot-active .backto-top > div {
    left: auto !important;
    right: 530px !important;
}

@media (max-width: 768px) {
    [dir="rtl"] .chatbot-toggle,
    [dir="rtl"] .floating-whatsapp { left: auto !important; right: 20px !important; }
    [dir="rtl"] .backto-top > div { left: auto !important; right: 24px !important; }
    [dir="rtl"] .chatbot-container { left: auto !important; right: 15px !important; }
    [dir="rtl"] body.chatbot-active .floating-whatsapp,
    [dir="rtl"] body.chatbot-active .backto-top > div { left: auto !important; right: 20px !important; }
}

/* The panel carries its own dir attribute (set by chatbot-new.js) so the
   bubbles flip with the conversation language, not the page language. */
.chatbot-container[dir="rtl"] .chatbot-message,
.chatbot-container[dir="rtl"] .message-content,
.chatbot-container[dir="rtl"] .chatbot-header-text { text-align: right; }

.chatbot-container[dir="rtl"] .chatbot-header,
.chatbot-container[dir="rtl"] .chatbot-message,
.chatbot-container[dir="rtl"] .chatbot-quick-actions,
.chatbot-container[dir="rtl"] .chatbot-input-wrapper { flex-direction: row-reverse; }

.chatbot-container[dir="rtl"] .chatbot-input,
.chatbot-container[dir="rtl"] #chatbotInput {
    text-align: right;
    font-family: "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
}

.chatbot-container[dir="rtl"] .chatbot-message,
.chatbot-container[dir="rtl"] .message-content,
.chatbot-container[dir="rtl"] .chatbot-header-text h4,
.chatbot-container[dir="rtl"] .quick-action-btn {
    font-family: "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
}

/* Latin brand names inside an Arabic bubble keep their own run order */
.chatbot-container[dir="rtl"] .message-content a { unicode-bidi: isolate; }

/* Directional glyphs flip */
[dir="rtl"] .read-more-button i,
[dir="rtl"] .return-button i,
[dir="rtl"] .feather-arrow-right,
[dir="rtl"] .feather-arrow-left { transform: scaleX(-1); }

[dir="rtl"] .rn-service:hover .read-more-button { transform: translateX(-4px); }

/* Scrollbar sits on the left in RTL; keep the same treatment */
[dir="rtl"] .flash-notification { left: 24px; right: auto; }

/* ------------------------------------------------------------
   11. MOROCCAN FLAG for the Arabic option
   custom-language.css ships a Saudi-green swatch for .flag-ar;
   this site is Moroccan, so use the Moroccan flag instead.
   ------------------------------------------------------------ */
.language-dropdown .dropdown-item .flag-ar,
.dropdown-item .flag-ar,
.language-dropdown .dropdown-toggle .flag-ar,
.dropdown-toggle .flag-ar {
    background: #c1272d url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23c1272d'/%3E%3Cpath d='M15 6.2l1.35 4.16h4.37l-3.54 2.57 1.36 4.16L15 14.52l-3.54 2.57 1.36-4.16-3.54-2.57h4.37z' fill='none' stroke='%23006233' stroke-width='0.9'/%3E%3C/svg%3E") center/cover no-repeat !important;
}

/* custom-language.css also paints a white Saudi crescent on top of the
   swatch via ::before - remove it, the SVG already carries the star. */
.language-dropdown .dropdown-item .flag-ar::before,
.dropdown-item .flag-ar::before,
.language-dropdown .dropdown-toggle .flag-ar::before,
.dropdown-toggle .flag-ar::before {
    content: none !important;
    display: none !important;
}

/* ------------------------------------------------------------
   12. NUMERALS
   Prices, phone numbers and stats stay in Western digits so they
   match the rest of the site and the client's invoices.
   ------------------------------------------------------------ */
[dir="rtl"] .price,
[dir="rtl"] .rating-badge,
[dir="rtl"] .copyright-text {
    unicode-bidi: plaintext;
}

/* ------------------------------------------------------------
   13. INNER-PAGE RETURN BUTTON
   projects-page.css / coming-soon.css pin it to the left with an
   absolute offset, which lands it off-canvas once the page mirrors.
   ------------------------------------------------------------ */
[dir="rtl"] .return-button-container {
    left: auto !important;
    right: 40px !important;
}

[dir="rtl"] .return-button:hover {
    transform: translateX(5px);
}

[dir="rtl"] .return-button i {
    transform: scaleX(-1);
}

@media (max-width: 767px) {
    [dir="rtl"] .return-button-container {
        right: 20px !important;
    }
}

/* Category filter rail and search field on the projects page */
[dir="rtl"] .filter-search input,
[dir="rtl"] .projects-search input {
    text-align: right;
}

[dir="rtl"] .category-filter,
[dir="rtl"] .filter-buttons {
    justify-content: flex-start;
}