/* ==========================================================================
   RTL Styles for Arabic Version - Complete and Comprehensive
   ========================================================================== */

/* ==================== Basic RTL Setup ==================== */
html {
    direction: rtl;
}

body {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

/* ==================== Typography ==================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', sans-serif !important;
}

.heading--title,
.heading h1,
.heading h2,
.heading h3 {
    font-family: 'Cairo', sans-serif !important;
    text-align: center !important;
}

.slide--headline h1 {
    font-family: 'Cairo', sans-serif !important;
    text-align: right !important;
}

p, a, span, li, div, button, input, label {
    font-family: 'Tajawal', sans-serif !important;
}

/* ==================== Bootstrap Grid Fixes ==================== */
.row {
    margin-right: -15px;
    margin-left: -15px;
}

/* Flexbox for RTL only on larger screens */
@media (min-width: 768px) {
    .row {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }

    [class*="col-"] {
        float: none !important;
    }
}

/* Fix centering for rows with single centered column */
@media (min-width: 768px) {
    .col-md-6.col-md-offset-3,
    .col-sm-6.col-sm-offset-3,
    .col-sm-8.col-sm-offset-2 {
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

[class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

/* Mobile: Stack columns normally */
@media (max-width: 767px) {
    [class*="col-"] {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .row {
        display: block !important;
    }
}

/* Column Offsets - Only for non-centered columns */
@media (min-width: 768px) {
    .col-md-offset-1 { margin-right: 8.33333333%; margin-left: 0; }
    .col-md-offset-4 { margin-right: 33.33333333%; margin-left: 0; }
    .col-sm-offset-1 { margin-right: 8.33333333%; margin-left: 0; }

    /* offset-2 and offset-3 are handled separately for centering */
}

/* ==================== Navigation ==================== */
.navbar {
    text-align: right;
}

.navbar-header {
    float: right !important;
}

.navbar-nav {
    float: right !important;
    margin-right: 0;
}

.navbar-nav > li {
    float: right !important;
}

.navbar-nav > li > a {
    padding-right: 15px;
    padding-left: 15px;
}

.navbar-toggle {
    float: left !important;
    margin-left: 15px;
    margin-right: 0;
}

.navbar-collapse {
    padding-right: 0;
    padding-left: 15px;
}

.nav > li > a {
    padding-right: 15px;
    padding-left: 15px;
}

/* Logo */
.logo {
    float: right !important;
}

.logo img {
    margin-right: 0;
    margin-left: 0;
}

/* ==================== Pull Classes ==================== */
.pull-right {
    float: left !important;
}

.pull-left {
    float: right !important;
}

/* ==================== Text Alignment ==================== */
.text-left {
    text-align: right !important;
}

.text-right {
    text-align: left !important;
}

.text-center,
.text--center {
    text-align: center !important;
}

/* ==================== Slider / Hero Section ==================== */
.slide--headline,
.slide--bio {
    text-align: right !important;
}

.slide--action {
    text-align: right;
}

/* Hero section - keep iPhone image on the right side */
#slider .img-responsive.pull-right {
    float: right !important;
}

/* For larger screens with flexbox, control column order */
@media (min-width: 768px) {
    #slider .row {
        display: flex;
        flex-direction: row;  /* Normal direction, not reversed */
        flex-wrap: wrap;
    }

    #slider .col-md-6 {
        order: 1;  /* Text on right */
    }

    #slider .col-md-4 {
        order: 2;  /* Image on left in flexbox, but pulled right with float */
    }
}

.img-responsive {
    margin: 0 auto;
}

/* ==================== Input Groups & Forms ==================== */
.input-group {
    direction: rtl !important;
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    align-items: stretch;
}

.input-group .form-control {
    text-align: right;
    flex: 1;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height: 50px;
    line-height: 50px;
}

.input-group-btn {
    display: flex;
    align-items: stretch;
}

.input-group-btn > .btn,
.input-group-btn > input[type="submit"] {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    height: 50px;
    line-height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
    min-width: 120px;
}

.input-group > .form-control:not(:first-child) {
    border-right: 0;
}

.input-group > .input-group-btn:not(:first-child) > .btn,
.input-group > .input-group-btn:not(:first-child) > input[type="submit"] {
    border-left: 0;
}

input[type="email"],
input[type="text"],
input[type="submit"],
textarea,
select {
    text-align: right;
}

::placeholder {
    text-align: right;
}

.form-control::-webkit-input-placeholder { text-align: right; }
.form-control:-moz-placeholder { text-align: right; }
.form-control::-moz-placeholder { text-align: right; }
.form-control:-ms-input-placeholder { text-align: right; }

/* Additional Input Group Fixes */
.form-action .input-group {
    box-shadow: none;
}

.form-action .input-group .form-control {
    padding: 0 20px;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.3);
}

.form-action .input-group-btn .btn,
.form-action .input-group-btn input[type="submit"] {
    padding-left: 30px;
    padding-right: 30px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==================== Buttons ==================== */
.btn {
    text-align: center;
}

/* ==================== Lists ==================== */
ul, ol {
    padding-right: 0;
    padding-left: 0;
}

.list-unstyled {
    padding-right: 0;
    padding-left: 0;
}

ul li, ol li {
    text-align: right;
}

/* ==================== Feature Sections ==================== */
.feature-panel {
    text-align: center;
}

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

.feature--content h3,
.feature--content p {
    text-align: center;
}

.feature--icon {
    margin-left: 0;
    margin-right: 0;
}

/* Feature Left/Right alignment fix */
.feature-left .feature-panel {
    text-align: center;
}

/* Fix icon position in RTL - move from left to right */
.feature-left .feature-panel .feature--icon {
    left: auto !important;
    right: 0 !important;
}

.feature-left .feature-panel .feature--content {
    padding-left: 0 !important;
    padding-right: 75px !important;
}

/* ==================== Headings ==================== */
.heading {
    text-align: center !important;
}

.heading--title {
    text-align: center !important;
}

.heading--desc {
    text-align: center !important;
}

.text--center .heading--title,
.text--center .heading--desc {
    text-align: center !important;
}

/* ==================== Testimonials ==================== */
.testimonial--body {
    text-align: right;
}

.testimonial--body p {
    text-align: right;
}

.testimonial--author {
    float: right !important;
    text-align: right;
}

.testimonial--rating {
    float: left !important;
    text-align: left;
}

.testimonial--meta {
    overflow: hidden;
}

/* ==================== Pricing Tables ==================== */
.pricing-panel {
    text-align: center;
}

.pricing--heading {
    text-align: center;
}

.pricing--heading h4,
.pricing--heading p {
    text-align: center;
}

.pricing--desc {
    text-align: center;
}

.pricing--body {
    text-align: center;
}

.currency {
    float: none;
    display: inline;
}

/* ==================== Footer ==================== */
.footer {
    text-align: center;
}

.footer--copyright {
    text-align: center;
}

.footer--copyright span,
.footer--copyright a {
    text-align: center;
}

/* ==================== Carousel & Screenshots ==================== */
.carousel {
    direction: ltr !important;
}

.carousel .row {
    flex-direction: row !important;
}

.screenshot {
    text-align: center;
}

.owl-carousel .owl-nav button.owl-prev {
    right: 0;
    left: auto;
}

.owl-carousel .owl-nav button.owl-next {
    left: 0;
    right: auto;
}

/* ==================== Video Section ==================== */
.video-ipad-holder {
    direction: ltr !important;
}

.video-ipad-holder iframe {
    direction: ltr;
}

/* ==================== Center Block ==================== */
.center-block {
    margin-left: auto;
    margin-right: auto;
    float: none !important;
}

/* ==================== CTA Section ==================== */
.cta {
    text-align: center;
}

/* ==================== Margins & Padding Fixes ==================== */
/* Right to Left margin swaps */
.mr-10 { margin-left: 10px !important; margin-right: 0 !important; }
.mr-15 { margin-left: 15px !important; margin-right: 0 !important; }
.mr-20 { margin-left: 20px !important; margin-right: 0 !important; }
.mr-30 { margin-left: 30px !important; margin-right: 0 !important; }
.mr-40 { margin-left: 40px !important; margin-right: 0 !important; }
.mr-50 { margin-left: 50px !important; margin-right: 0 !important; }

.ml-10 { margin-right: 10px !important; margin-left: 0 !important; }
.ml-15 { margin-right: 15px !important; margin-left: 0 !important; }
.ml-20 { margin-right: 20px !important; margin-left: 0 !important; }
.ml-30 { margin-right: 30px !important; margin-left: 0 !important; }
.ml-40 { margin-right: 40px !important; margin-left: 0 !important; }
.ml-50 { margin-right: 50px !important; margin-left: 0 !important; }

/* Right to Left padding swaps */
.pr-10 { padding-left: 10px !important; padding-right: 0 !important; }
.pr-15 { padding-left: 15px !important; padding-right: 0 !important; }
.pr-20 { padding-left: 20px !important; padding-right: 0 !important; }
.pr-30 { padding-left: 30px !important; padding-right: 0 !important; }

.pl-10 { padding-right: 10px !important; padding-left: 0 !important; }
.pl-15 { padding-right: 15px !important; padding-left: 0 !important; }
.pl-20 { padding-right: 20px !important; padding-left: 0 !important; }
.pl-30 { padding-right: 30px !important; padding-left: 0 !important; }

/* ==================== Responsive Fixes ==================== */

/* Tablet and below */
@media (max-width: 991px) {
    .col-md-offset-1,
    .col-md-offset-2,
    .col-md-offset-3,
    .col-md-offset-4 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* Mobile Landscape and below */
@media (max-width: 768px) {
    /* Navigation */
    .navbar-header {
        float: none !important;
    }

    .navbar-toggle {
        float: left !important;
    }

    .navbar-nav {
        float: none !important;
    }

    .navbar-nav > li {
        float: none !important;
        text-align: right;
    }

    /* Offsets */
    .col-sm-offset-1,
    .col-sm-offset-2,
    .col-sm-offset-3 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Headings */
    .heading--title {
        font-size: 24px !important;
    }

    .slide--headline h1 {
        font-size: 28px !important;
    }

    /* Images */
    .img-responsive {
        max-width: 100%;
        margin: 20px auto;
    }

    /* Padding adjustments */
    .pt-100 {
        padding-top: 40px !important;
    }

    .pb-100 {
        padding-bottom: 40px !important;
    }

    .mb-100 {
        margin-bottom: 40px !important;
    }

    .mb-80 {
        margin-bottom: 30px !important;
    }

    .mb-60 {
        margin-bottom: 20px !important;
    }
}

/* Mobile Portrait */
@media (max-width: 480px) {
    /* Typography */
    .heading--title {
        font-size: 20px !important;
    }

    .slide--headline h1 {
        font-size: 24px !important;
    }

    .heading--desc,
    .slide--bio {
        font-size: 14px !important;
    }

    /* Input Groups - Full width on mobile */
    .input-group {
        flex-direction: column !important;
    }

    .input-group .form-control,
    .input-group-btn {
        width: 100% !important;
    }

    .input-group-btn > .btn,
    .input-group-btn > input[type="submit"] {
        width: 100% !important;
        border-radius: 4px !important;
        margin-top: 10px;
    }

    .input-group .form-control {
        border-radius: 4px !important;
    }

    /* Feature panels */
    .feature-panel {
        margin-bottom: 30px;
    }

    /* Testimonials */
    .testimonial-panel {
        margin-bottom: 30px;
    }

    /* Pricing */
    .price-table {
        margin-bottom: 30px;
    }
}

/* ==================== Switcher Box ==================== */
.switcher-box {
    right: auto;
    left: -220px;
}

.switcher-box.active {
    left: 0;
}

.gear-check {
    right: auto;
    left: -40px;
    border-radius: 4px 0 0 4px;
}

/* Hide switcher on mobile */
@media (max-width: 768px) {
    .switcher-box,
    .gear-check {
        display: none !important;
    }
}

/* ==================== Additional Specific Fixes ==================== */
/* Newsletter */
#newsletter .heading--title,
#newsletter .heading--desc {
    text-align: center !important;
}

/* Sections general */
.section {
    text-align: right;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent direction override in specific elements */
iframe,
object,
embed {
    direction: ltr !important;
}

/* Icons */
.fa, .lnr, [class^="lnr-"], [class*=" lnr-"] {
    display: inline-block;
}

/* Ensure proper alignment for icons with text */
i + span,
i + a,
i + p {
    margin-right: 5px;
    margin-left: 0;
}

/* ==================== Additional Mobile Fixes ==================== */
@media (max-width: 768px) {
    /* Hero/Slider section */
    #slider .col-md-6,
    #slider .col-md-4 {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
    }

    #slider .slide--headline h1 {
        text-align: center !important;
    }

    #slider .slide--bio {
        text-align: center !important;
    }

    #slider .img-responsive {
        margin: 30px auto !important;
    }

    /* Screenshots carousel */
    .screenshots .carousel {
        overflow: hidden;
    }

    /* Video section */
    .video-ipad-holder {
        width: 100%;
        padding: 0 15px;
    }

    .video-ipad-holder iframe {
        width: 100%;
        height: 250px;
    }

    /* CTA section */
    #cta .btn-hover {
        display: inline-block;
        margin: 10px 5px;
    }

    #cta .btn-hover img {
        max-width: 140px;
    }

    /* Footer */
    .footer--copyright {
        font-size: 13px;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    /* Container padding */
    .container {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    /* Section padding */
    .section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Feature icons size */
    .feature--icon {
        font-size: 40px;
        margin-bottom: 15px;
    }

    .feature--icon i {
        font-size: 40px;
    }

    /* Testimonials */
    .testimonial--meta {
        flex-direction: column;
        text-align: center !important;
    }

    .testimonial--author,
    .testimonial--rating {
        float: none !important;
        text-align: center !important;
        width: 100%;
        margin-bottom: 10px;
    }

    /* Video */
    .video-ipad-holder iframe {
        height: 200px;
    }
}

/* ==================== Fix for specific sections ==================== */
/* Slider specific */
.pt-100 {
    padding-top: 100px;
}

.mt-100 {
    margin-top: 100px;
}

.mb-100 {
    margin-bottom: 100px;
}

.mb-80 {
    margin-bottom: 80px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-50 {
    margin-bottom: 50px;
}

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}