/**
 * ELIXIR Theme — RTL Overrides for Arabic
 * Expert-level Right-to-Left layout system
 */

/* ============================================================
   BASE DIRECTION
   ============================================================ */
body.elixir-rtl {
    direction: rtl;
    text-align: right;
}

/* ============================================================
   HEADER — Natural RTL flow via direction:rtl handles this.
   No flex-direction overrides needed.
   ============================================================ */

/* ============================================================
   HERO — Critical RTL fix (stats + content)
   ============================================================ */

/* Move hero content to the RIGHT side for RTL */
.elixir-rtl .hero .container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    position: relative;
}

.elixir-rtl .hero__content {
    text-align: right;
    margin-right: 0;
    margin-left: auto;
}

.elixir-rtl .hero__description {
    margin-left: auto;
    margin-right: 0;
}

/* Flip hero badge dot + text order */
.elixir-rtl .hero__badge {
    flex-direction: row-reverse;
}

/* Actions (buttons) — reversed order for RTL */
.elixir-rtl .hero__actions {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Move stats to the LEFT for RTL */
.elixir-rtl .hero__stats {
    right: auto;
    left: 5%;
}

/* Slide-in animation from the left in RTL */
.elixir-rtl .hero__stat {
    transform: translateX(-20px);
}

@keyframes statSlideInRTL {
    to { transform: translateX(0); opacity: 1; }
}
.elixir-rtl .hero__stat {
    animation-name: statSlideInRTL;
}

/* Orbs — flip positions */
.elixir-rtl .hero__orb--1 {
    right: auto;
    left: -100px;
}

.elixir-rtl .hero__orb--3 {
    right: auto;
    left: 20%;
}

/* ============================================================
   SECTION HEADERS — subtitle underline fix
   ============================================================ */
.elixir-rtl .section__subtitle::after {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* ============================================================
   PAGE HERO (Inner pages) — RTL text alignment
   ============================================================ */
.elixir-rtl .page-hero__content {
    text-align: right;
}

.elixir-rtl .page-hero__title {
    text-align: right;
}

/* ============================================================
   ABOUT INTRO — text alignment & image order
   ============================================================ */
.elixir-rtl .about-intro__text {
    text-align: right;
}

.elixir-rtl .about-intro__text p {
    text-align: right;
}

/* ============================================================
   SERVICE CARDS (Homepage)
   ============================================================ */
.elixir-rtl .service-card__body {
    text-align: right;
}

.elixir-rtl .service-card__link {
    flex-direction: row-reverse;
}

.elixir-rtl .service-card__link svg {
    transform: scaleX(-1);
}

/* ============================================================
   SERVICES PAGE V2 — RTL alignment
   ============================================================ */
.elixir-rtl .srv-block__content,
.elixir-rtl .srv-item__body,
.elixir-rtl .srv-bullet__body,
.elixir-rtl .srv-sub__item,
.elixir-rtl .srv-intro {
    text-align: right;
}

@media (max-width: 1024px) {
    .elixir-rtl .srv-block__body--reverse .srv-block__media,
    .elixir-rtl .srv-block__body--reverse .srv-block__content {
        order: unset;
    }
}

/* ============================================================
   SERVICE DETAIL (Inner pages) — text + feature items
   ============================================================ */
.elixir-rtl .service-detail__content {
    text-align: right;
}

.elixir-rtl .service-detail__content .section__subtitle {
    text-align: right;
}

.elixir-rtl .service-detail__content .section__title {
    text-align: right;
}

@media (max-width: 768px) {
    .elixir-rtl .service-detail__content {
        text-align: center;
    }
    .elixir-rtl .service-detail__content .section__subtitle,
    .elixir-rtl .service-detail__content .section__title {
        text-align: center;
    }
    .elixir-rtl .service-detail__content .section__subtitle::after {
        right: 50%;
        transform: translateX(50%);
    }
}

.elixir-rtl .service-detail__content p {
    text-align: right;
}

/* Feature items — natural RTL flow handles icon+text order */
.elixir-rtl .feature-item {
    text-align: right;
}

/* ============================================================
   VISION / MISSION — accent bar on right (handled by
   border-inline-start in main.css, but extra padding fix)
   ============================================================ */
.elixir-rtl .vm__card {
    text-align: right;
}

.elixir-rtl .vm__card h3 {
    text-align: right;
}

.elixir-rtl .vm__card p {
    text-align: right;
}

/* ============================================================
   VALUES GRID — centered, no change needed
   ============================================================ */

/* ============================================================
   COMPANIES GRID — centered, no change needed
   ============================================================ */

/* ============================================================
   CONTACT PAGE — card flip + form alignment
   ============================================================ */
/* Contact cards: natural RTL flow from direction:rtl handles
   icon-to-text order. Only text-align needed. */
.elixir-rtl .contact-info__card {
    text-align: right;
}

.elixir-rtl .contact-info__card:hover {
    transform: translateX(-8px);
}

.elixir-rtl .contact-info__text {
    text-align: right;
}

.elixir-rtl .contact-form-wrap {
    text-align: right;
}

.elixir-rtl .contact-form-wrap h3 {
    text-align: right;
}

.elixir-rtl .form-group label {
    text-align: right;
    display: block;
}

.elixir-rtl .form-group input,
.elixir-rtl .form-group select,
.elixir-rtl .form-group textarea {
    text-align: right;
    direction: rtl;
}

/* Select dropdown arrow fix */
.elixir-rtl .form-group select {
    background-position: left 12px center;
    padding-left: 36px;
    padding-right: 16px;
}

/* Phone input — keep LTR for phone numbers */
.elixir-rtl .form-group input[type="tel"] {
    direction: ltr;
    text-align: left;
}

/* Email input — keep LTR */
.elixir-rtl .form-group input[type="email"] {
    direction: ltr;
    text-align: left;
}

/* Date input — keep LTR */
.elixir-rtl .form-group input[type="date"] {
    direction: ltr;
    text-align: left;
}

/* Submit button — natural RTL flow handles icon order */

/* ============================================================
   BLOG CARDS
   ============================================================ */
.elixir-rtl .blog-card__body {
    text-align: right;
}

.elixir-rtl .blog-card__meta {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* ============================================================
   NEWSLETTER — Natural RTL flow via direction:rtl handles
   inner order. Only text-align overrides needed.
   ============================================================ */
.elixir-rtl .newsletter__text {
    text-align: right;
}

.elixir-rtl .newsletter__form input {
    text-align: right;
}

/* ============================================================
   FOOTER — flip grid columns and link arrows
   ============================================================ */
.elixir-rtl .footer__grid {
    direction: rtl;
}

.elixir-rtl .footer__brand {
    text-align: right;
}

.elixir-rtl .footer__social {
    justify-content: flex-start;
}

.elixir-rtl .footer__column h4 {
    text-align: right;
}

.elixir-rtl .footer__column h4::after {
    left: auto;
    right: 0;
}

.elixir-rtl .footer__links a,
.elixir-rtl .footer__links span {
    text-align: right;
    width: 100%;
    justify-content: flex-start;
}

.elixir-rtl .footer__links a:hover {
    padding-inline-start: 0;
    padding-inline-end: 8px;
}

.elixir-rtl .footer__bottom {
    text-align: center;
}

/* ============================================================
   WHATSAPP — move to left in RTL
   ============================================================ */
.elixir-rtl .whatsapp-float {
    right: auto;
    left: 30px;
}

/* ============================================================
   MODAL — RTL alignment
   ============================================================ */
.elixir-rtl .modal__header {
    flex-direction: row-reverse;
}

.elixir-rtl .modal__title {
    text-align: right;
}

.elixir-rtl .modal {
    text-align: right;
}

/* ============================================================
   BUTTONS — Natural RTL handles icon order automatically.
   Arrow icons should flip for visual direction.
   ============================================================ */
.elixir-rtl .btn svg {
    transform: scaleX(-1);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.elixir-rtl .breadcrumb__separator {
    transform: scaleX(-1);
}

/* ============================================================
   CTA SECTION — centered, RTL text
   ============================================================ */
.elixir-rtl .section--dark .container[style*="text-align:center"] {
    text-align: center;
}

/* ============================================================
   ENTRY CONTENT — Blog posts and single pages RTL
   ============================================================ */
.elixir-rtl .entry-content {
    text-align: right;
    direction: rtl;
}

.elixir-rtl .entry-content ul,
.elixir-rtl .entry-content ol {
    padding-right: 24px;
    padding-left: 0;
}

.elixir-rtl .entry-content blockquote {
    border-left: none;
    border-right: 4px solid var(--color-primary);
    padding-left: 0;
    padding-right: 20px;
}

/* ============================================================
   SCROLL ANIMATIONS — flip directions for RTL
   ============================================================ */
.elixir-rtl .animate-on-scroll.animate-fade-left {
    transform: translateX(40px);
}
.elixir-rtl .animate-on-scroll.animate-fade-left.is-visible {
    transform: translateX(0);
}

.elixir-rtl .animate-on-scroll.animate-fade-right {
    transform: translateX(-40px);
}
.elixir-rtl .animate-on-scroll.animate-fade-right.is-visible {
    transform: translateX(0);
}

/* ============================================================
   MOBILE RESPONSIVE RTL
   ============================================================ */
@media (max-width: 1024px) {
    .elixir-rtl .newsletter__inner {
        flex-direction: column;
        text-align: center;
    }

    .elixir-rtl .newsletter__text {
        text-align: center;
    }

    .elixir-rtl .newsletter__form {
        flex-direction: row-reverse;
    }

    /* Service detail — content first on mobile */
    .elixir-rtl .service-detail__grid--reverse .service-detail__content,
    .elixir-rtl .service-detail__grid--reverse .service-detail__image {
        order: unset;
    }
}

@media (max-width: 768px) {
    .elixir-rtl .hero .container {
        flex-direction: column;
    }

    .elixir-rtl .hero__actions {
        flex-direction: column;
    }

    .elixir-rtl .hero__actions .btn {
        justify-content: center;
        width: 100%;
    }

    .elixir-rtl .whatsapp-float {
        left: 20px;
        right: auto;
    }

    .elixir-rtl .newsletter__form {
        flex-direction: column;
    }

    /* Mobile close button position */
    .elixir-rtl .mobile-close {
        left: 24px !important;
        right: auto !important;
    }

    /* Page hero mobile */
    .elixir-rtl .page-hero__content {
        text-align: center;
    }

    /* Contact grid stacks on mobile */
    .elixir-rtl .contact-info__card:hover {
        transform: translateY(-4px);
    }
}