/* ======================================
   WeOryx - RTL (Right-to-Left) Styles
   Arabic Version
   ====================================== */

/* Arabic Font Override */
:root {
    --font-primary: 'Cairo', 'Outfit', sans-serif;
}

body {
    direction: rtl;
    text-align: right;
    font-family: var(--font-primary);
}

ul {
    padding-right: 2rem;
    padding-left: 0;
}

ul li {
    text-align: right;
}

/* ======================================
   Header RTL
   ====================================== */
.nav-menu {
    display: flex;
}



.nav-link::after {
    left: auto;
    right: 0;
}

.lang-toggle {
    flex-direction: row-reverse;
}

/* ======================================
   Hero RTL
   ====================================== */
.hero-content {
    direction: rtl;
}

.hero-text {
    padding-right: 0;
    padding-left: 40px;
    text-align: right;
}

/* Hero Curve RTL Override - Matching index-ar.html */
body .hero-curve {
    clip-path: ellipse(85% 100% at 70% 0%) !important;
}

.hero-background {
    transform: none;
    /* Reset any previous transform */
}

/* Floating Elements - Mirror positions */
.floating-chat {
    right: auto;
    left: 20%;
}

.floating-heart {
    right: auto;
    left: 5%;
}

.floating-like {
    left: auto;
    right: 15%;
}

.floating-target {
    left: auto;
    right: 0;
}

.floating-chart {
    left: auto;
    right: 10%;
}

/* ======================================
   Section Headers RTL
   ====================================== */
.section-tag {
    display: inline-block;
}

.section-tag-center {
    margin-left: auto;
    margin-right: auto;
}

/* ======================================
   About Section RTL
   ====================================== */
.about-grid {
    direction: rtl;
}

.about-image-decoration {
    left: auto;
    right: -20px;
}

.feature-item {
    text-align: right;
}

.feature-content {
    text-align: right;
}

.about-cta {
    text-align: left;
}

/* ======================================
   Services RTL
   ====================================== */
.service-card {
    text-align: right;
}

.service-link {
    flex-direction: row-reverse;
}

.service-link i {
    transform: rotate(180deg);
}

/* ======================================
   Portfolio RTL
   ====================================== */
.portfolio-overlay {
    text-align: right;
}

.portfolio-link {
    right: auto;
    left: 20px;
    transform: rotate(135deg);
}

/* ======================================
   Testimonials RTL
   ====================================== */


.author-avatar,
.tech-avatar {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
}

.author-info,
.tech-meta {
    text-align: right;
}

.testimonial-content,
.tech-text {
    text-align: right;
}

.stack-tag {
    padding-left: 0;
    padding-right: 60px;
}

.stack-tag::before {
    left: auto;
    right: 0;
}

.tech-quote {
    left: auto;
    right: 35px;
}

@media (max-width: 991px) {
    .tech-quote {
        right: 20px;
    }

    .stack-tag {
        padding-right: 0 !important;
        padding-left: 0 !important;
        text-align: center;
    }

    .stack-info {
        text-align: center;
    }

    .tech-meta {
        text-align: center;
    }

    .tech-author {
        flex-direction: column;
        gap: 15px;
    }
}

.stack-nav i {
    transform: scaleX(-1);
}

/* ======================================
   Blog RTL
   ====================================== */
.blog-meta {
    flex-direction: row-reverse;
}



.blog-content {
    text-align: right;
}

.blog-link {
    flex-direction: row-reverse;
}

.blog-link i {
    transform: rotate(180deg);
}

.blog-category {
    left: auto;
    right: 20px;
    white-space: nowrap;
    width: max-content;
}

/* Home Page specific widening RTL */
.home .blog-category {
    padding: 5px 1px;
    min-width: 140px;
    right: 0;
    top: 0;
}

/* ======================================
   CTA RTL
   ====================================== */
.cta-buttons {
    flex-direction: row-reverse;
}

.cta-buttons .btn i {
    margin-left: 0;
    margin-right: 8px;
}

/* ======================================
   Footer RTL
   ====================================== */
.footer-grid {
    direction: rtl;
}

.footer-brand {
    text-align: right;
}

.footer-social {
    justify-content: flex-start;
}

.footer-links ul {
    text-align: right;
    padding-right: 0;
}

.footer-links a:hover {
    padding-left: 0;
    padding-right: 5px;
}

.footer-links a::before {
    content: '\f104';
    /* Font Awesome angle-left */
}

.footer-links h4::after,
.footer-contact h4::after,
.footer-newsletter h4::after {
    left: auto;
    right: 0;
}

.contact-info li {
    display: flex;
    align-items: center;
}

.contact-info i {

    margin-right: 0;
}

.footer-bottom .container {
    flex-direction: row-reverse;
}

.footer-bottom-links {
    flex-direction: row-reverse;
}

/* Newsletter RTL */
.newsletter-input-group input,
.newsletter-form-cf7 input[type="email"] {
    text-align: right;
    direction: rtl;
}

.newsletter-input-group button i,
.newsletter-form-cf7 .wpcf7-submit::after {
    transform: scaleX(-1) translateY(1px);
}

.newsletter-form-cf7 .wpcf7-submit::after {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scaleX(-1);
}

/* ======================================
   Breadcrumb RTL
   ====================================== */
.page-breadcrumb {
    display: inline-flex;
}

.page-breadcrumb i {
    transform: rotate(180deg);
}

/* ======================================
   About Page RTL
   ====================================== */
.about-story-grid {
    direction: rtl;
}

.about-story-badge {
    right: auto;
    left: -30px;
}

.story-feature {
    flex-direction: row-reverse;
}

.why-card {
    flex-direction: row-reverse;
    text-align: right;
}

.team-info {
    text-align: center;
}

/* ======================================
   Services Page RTL
   ====================================== */
.service-detail {
    direction: rtl;
}

.service-features li {
    display: flex;
}

.process-step::after {
    right: auto;
    left: -15px;
}

/* ======================================
   Contact Page RTL
   ====================================== */
.contact-grid {
    direction: rtl;
}

.contact-info h2,
.contact-info>p {
    text-align: right;
}

.contact-info-item {
    flex-direction: row;
    text-align: right;
    gap: 15px;
}

.contact-info-icon {
    margin-left: 0;
    margin-right: 0;
}

.contact-info-content {
    text-align: right;
}

.contact-social {
    text-align: right;
}

.contact-social .social-links {
    justify-content: flex-start;
}

.contact-form-wrapper label {
    text-align: right;
}

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

.contact-form-wrapper .wpcf7-form {
    direction: rtl;
}

.contact-form-wrapper .wpcf7-form p {
    text-align: right;
}

.contact-form-wrapper input[type="submit"],
.contact-form-wrapper button[type="submit"] {
    text-align: center;
}

@media (max-width: 991px) {
    .rtl .service-detail-layout {
        grid-template-columns: 1fr;
    }

    .rtl .service-sidebar {
        order: 2;
    }

    .rtl .service-main-content {
        order: 1;
    }
}


/* ======================================
   Pricing/Offers RTL
   ====================================== */
.pricing-features li {
    display: flex;
}

/* ======================================
   Buttons RTL
   ====================================== */
.btn i {
    margin-left: 0;
    margin-right: 8px;
}

.btn-outline-primary i,
.btn-primary i {
    transform: rotate(180deg);
}

/* ======================================
   Back to Top RTL
   ====================================== */
.back-to-top {
    right: auto;
    left: 30px;
}

.whatsapp-float {
    left: auto;
    right: 30px;
}

/* ======================================
   Mobile Menu RTL
   ====================================== */
@media (max-width: 992px) {
    .nav-menu {
        right: auto;
        left: -100%;
        overflow: hidden;
        visibility: hidden;
    }

    .nav-menu.active {
        left: 0;
        right: auto;
        visibility: visible;
    }

    .hero-text {
        padding-left: 0;
        padding-right: 0;
        /* Clear for RTL */
        text-align: center;
    }

    .hero-content {
        min-height: auto !important;
        padding: 20px 0 !important;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    body .hero-curve {
        clip-path: ellipse(120% 100% at 50% 0%) !important;
    }
}

@media (max-width: 768px) {
    .about-story-badge {
        left: 20px;
        right: auto;
    }

    .footer-brand,
    .footer-links ul {
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .hero-text {
        padding: 0 16px;
    }

    .hero-content {
        min-height: auto !important;
        padding: 20px 0 !important;
    }

    body .hero-curve {
        clip-path: none !important;
        border-radius: 0;
    }

    /* Better mobile container padding */
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Ensure clients logos are visible on mobile */
    .client-logo img {
        filter: grayscale(0%) !important;
        opacity: 1 !important;
    }

    /* Body overflow fix */
    body {
        overflow-x: hidden;
    }
}

/* ======================================
   Clients Section RTL
   ====================================== */
.clients-carousel::before {
    left: auto;
    right: 0;
    background: linear-gradient(-90deg, var(--white), transparent);
}

.clients-carousel::after {
    right: auto;
    left: 0;
    background: linear-gradient(90deg, var(--white), transparent);
}

.clients-track {
    flex-direction: row;
    animation: scroll-rtl 40s linear infinite;
}

@keyframes scroll-rtl {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50%);
    }
}

/* ======================================
   Offer Section RTL
   ====================================== */
.offer-price {
    left: auto;
    right: 50%;
    transform: translate(50%, -50%);
}

@media (max-width: 991px) {
    .offer-title {
        font-size: clamp(1.7rem, 4vw, 2.5rem) !important;
        text-align: center;
    }

    .offer-tag {
        margin: 0 auto 20px;
    }

    .offer-feature-item {
        flex-direction: row;
        /* Keep icon and text in line */
        justify-content: center;
        gap: 12px;
    }
}

/* ======================================
   CTA Section RTL
   ====================================== */
.cta-buttons {
    flex-direction: row-reverse;
}

/* ======================================
   Single Post Details RTL
   ====================================== */
.single-footer {
    flex-direction: column;
    align-items: flex-start;
}

.single-tags {
    flex-direction: row;
    gap: 15px;
}

.single-share {
    flex-direction: row;
    gap: 15px;
}

.nav-btn {
    flex-direction: row-reverse;
}

.nav-btn.next {
    text-align: left;
    flex-direction: row;
}

.nav-btn.prev i {
    transform: rotate(0deg);
    /* points right in single.php, which is back in AR */
}

.nav-btn.next i {
    transform: rotate(0deg);
    /* points left in single.php, which is forward in AR */
}

@media (max-width: 768px) {
    .single-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ======================================
   New Services Page RTL
   ====================================== */
.rtl .service-content {
    display: flex;
    flex-direction: column;
}

.service-item-row.reverse .service-content {
    margin-left: 0;
    margin-right: -40px;
}

.service-item-row:not(.reverse) .service-content {
    margin-right: 0;
    margin-left: -40px;
}

.service-item-title::after {
    left: auto;
    right: 0;
}

/* Read More Button RTL */
.service-read-more {
    margin-right: auto;
}

.service-read-more i {
    transform: rotate(180deg);
}

.service-read-more:hover {
    padding-right: 35px;
    padding-left: 45px;
}


@media (max-width: 991px) {
    .service-content {
        margin: -60px 0 0 0 !important;
    }
}

/* Homepage Services Block RTL */
.rtl .service-card {
    align-items: flex-start;
    /* Keeps icons/titles on right */
}

.rtl .service-link {
    margin-right: auto;
    /* Pushes link to the left */
}

.rtl .service-link i {
    transform: rotate(180deg);
}

.service-read-more:hover i {
    transform: rotate(180deg) translateX(5px);
}

/* ============================================
   Single Service Page RTL
   ============================================ */
.rtl .service-detail-layout {
    grid-template-columns: 380px 1fr;
}

.rtl .service-sidebar {
    order: 1;
}

.rtl .service-main-content {
    order: 2;
}

.rtl .widget-title::after {
    left: auto;
    right: 0;
}

.rtl .side-services-list a {
    flex-direction: row-reverse;
}

.rtl .side-services-list a i {
    transform: rotate(180deg);
}

.rtl .side-services-list a:hover {
    transform: translateX(-5px);
}

.rtl .cta-glass-card::before {
    right: auto;
    left: -50px;
}

.rtl .cta-icon {
    right: auto;
    left: 20px;
}

@media (max-width: 991px) {
    .rtl .service-detail-layout {
        grid-template-columns: 1fr;
    }

    .rtl .service-sidebar {
        order: 2;
    }

    .rtl .service-main-content {
        order: 1;
    }
}

.footer ul {
    padding-right: 0;
}


/* Single Portfolio RTL */
.rtl .details-title::after {
    right: 0;
    left: auto;
}

.rtl .details-list .label i {
    margin-left: 8px;
    margin-right: 0;
}

/* Navigation Flip */
.rtl .nav-link-modern.prev .nav-subtitle i {
    transform: rotate(180deg);
    /* Flip arrow */
}

.rtl .nav-link-modern.next .nav-subtitle i {
    transform: rotate(180deg);
    /* Flip arrow */
}

/* Text Align Right */
.rtl .nav-link-modern {
    text-align: right;
}

.rtl .col-6.text-end {
    text-align: left !important;
    /* Flip 'text-end' for layout if needed, though col-6 order is same */
}

@media (max-width: 991px) {

    /* Agency Portfolio RTL */
    .rtl .portfolio-sticky-info {
        padding-right: 0;
        padding-left: 30px;
        /* Flip spacing */
    }

    .rtl .agency-breadcrumb span {
        transform: rotate(180deg);
        /* Flip separators if they are arrows, but / is fine. */
        display: inline-block;
    }

    .rtl .project-navigation-agency .col-4.text-end {
        text-align: left !important;
    }

    .rtl .project-navigation-agency .col-4.text-start {
        text-align: right !important;
    }

    .rtl .project-navigation-agency .fa-arrow-left {
        transform: rotate(180deg);
    }

    .rtl .project-navigation-agency .fa-arrow-right {
        transform: rotate(180deg);
    }
}

/* ======================================
   Project Navigation RTL - Ultra-Premium (Media-First)
   ====================================== */
[dir="rtl"] .nav-visual-card.prev:hover .nav-arrow-luxury {
    transform: translateX(15px);
}

[dir="rtl"] .nav-visual-card.next:hover .nav-arrow-luxury {
    transform: translateX(-15px);
}

[dir="rtl"] .nav-visual-card:hover .card-content {
    transform: translateY(-10px);
}

[dir="rtl"] .nav-tag {
    letter-spacing: 2px;
    /* Reduced for Arabic readability */
}

[dir="rtl"] .nav-title {
    letter-spacing: 0;
}

/* ======================================
   Project Navigation RTL - Delicate & Modern
   ====================================== */
[dir="rtl"] .nav-refined-item {
    text-align: right;
}

[dir="rtl"] .nav-refined-item.next {
    text-align: left;
}

[dir="rtl"] .nav-refined-item.prev:hover {
    transform: translateX(5px);
}

[dir="rtl"] .nav-refined-item.next:hover {
    transform: translateX(-5px);
}

[dir="rtl"] .nav-refined-tag {
    letter-spacing: 1px;
}