/* Basic RTL overrides */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* Mobile Header Text RTL */
html[dir="rtl"] .mobile-header-text {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .mobile-header-text h1,
html[dir="rtl"] .mobile-header-text p {
    direction: rtl;
    text-align: right;
}

@media only screen and (max-width: 991px) {
    /* Mobile Header RTL Layout */
    html[dir="rtl"] .mobile-header-wrapper {
        direction: rtl;
    }
    
    html[dir="rtl"] .navbar-toggler {
        order: 1;
    }
    
    html[dir="rtl"] .navbar-brand.mobile-logo {
        order: 2;
    }
    
    html[dir="rtl"] .mobile-header-text {
        order: 3;
        direction: rtl;
        text-align: right;
    }
}

/* Scroll-to-top button: remove default pseudo icon and size inline SVG */
html[dir="rtl"] #button::after { content: none !important; }
html[dir="rtl"] #button svg { width: 46px; height: 46px; transform: rotate(-90deg); transform-origin: 50% 50%; }

html[dir="rtl"] .navbar-nav {
    margin-left: 51px;
    margin-right: 0;
}

html[dir="rtl"] .cart-box a:first-child {
    margin-left: 23px;
    margin-right: 0;
}

html[dir="rtl"] .header-main-con .phone figure {
    margin-left: 7px;
    margin-right: 0;
}

/* generic flip for left/right paddings and margins in common utilities */
html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }

/* Owl Carousel RTL */
html[dir="rtl"] .owl-carousel {
    direction: rtl;
}

/* Banner section: keep LTR layout inside only this block */
html[dir="rtl"] .banner-main-section {
    direction: rtl;
    text-align: right;
}

/* Mirror banner grid: text on right, images on left */
html[dir="rtl"] .banner-inner-con {
    grid-template-columns: 46% 50%;
}
html[dir="rtl"] .banner-txt-section {
    order: 1;
}
html[dir="rtl"] .banner-images-con {
    order: 2;
}

/* Mirror positioned figures and decorative blocks */
html[dir="rtl"] .banner-images-con figure:first-child {
    left: 132px;
    right: auto;
    transform: translateY(-51%);
}
html[dir="rtl"] .banner-images-con figure:nth-child(2) {
    left: -251px;
    right: auto;
    top: -410px;
}
html[dir="rtl"] .banner-images-con figure:last-child {
    left: -313px;
    right: auto;
    top: -33px;
}
html[dir="rtl"] .banner-images-con::before {
    left: 132px;
    right: auto;
    bottom: 262px;
}
html[dir="rtl"] .banner-images-con::after {
    left: 512px;
    right: auto;
    bottom: -339px;
}

/* Mirror social links pin from left to right */
html[dir="rtl"] .social-links {
    right: 68px;
    left: auto;
    top: 50%;
    transform: translateY(-46%);
}

/* Banner small line alignment for RTL */
html[dir="rtl"] .banner-txt-section span::before {
    right: 0;
    left: auto;
}
html[dir="rtl"] .banner-txt-section span {
    padding-right: 65px;
    padding-left: 0;
}

/* Responsive fixes for RTL banner */
@media only screen and (max-width: 1199px) {
    html[dir="rtl"] .banner-txt-section {
        padding-right: 20px;
        padding-left: 0;
    }
}

/* About list icons: move bullet to right side in RTL */
html[dir="rtl"] .about-txt-con ul li {
    padding-right: 30px;
    padding-left: 0;
}
html[dir="rtl"] .about-txt-con ul li::before {
    right: 0;
    left: auto;
}
/* When using inline SVG icons in about list, disable default pseudo icon and align icon/text */
html[dir="rtl"] .about-list-with-svg li { padding-right: 0; position: relative; display: flex; align-items: center; gap: 8px; }
html[dir="rtl"] .about-list-with-svg li::before { content: none !important; }
html[dir="rtl"] .about-list-with-svg .about-list-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; min-height: 28px; background: #0a3978; border-radius: 50%; flex-shrink: 0; }
html[dir="rtl"] .about-list-with-svg .about-list-icon svg { width: 36px; height: 36px; }

/* Mobile: Align all icons perfectly vertical AND center the whole list */
@media only screen and (max-width: 991px) {
    html[dir="rtl"] .about-list-with-svg {
        padding-right: 0 !important;
        width: fit-content !important;
        margin: 0 auto !important;
    }
    
    html[dir="rtl"] .about-list-with-svg li {
        align-items: flex-start !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    html[dir="rtl"] .about-list-with-svg .about-list-icon {
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        position: relative !important;
    }
    
    html[dir="rtl"] .about-list-with-svg li > span:last-child {
        flex: 1;
    }
}

/* Mirror the about quote box to the right and align over image */
html[dir="rtl"] .about-special-txt {
    right: -85px;
    left: auto;
}

@media only screen and (max-width: 575px) {
    html[dir="rtl"] .about-special-txt {
        right: 39%;
        left: auto;
    }
}

/* Mobile: tighten gap between about list icon and text to desktop-like spacing */
@media only screen and (max-width: 575px) {
    html[dir="rtl"] .about-txt-con ul {
        text-align: center;
        display: block;
    }
    html[dir="rtl"] .about-txt-con ul li {
        display: flex; /* icon + title on one line */
        width: 100%;
        align-items: center;
        justify-content: center; /* center the row */
        direction: rtl; /* place first item at the right side */
        flex-direction: row; /* use RTL inline direction instead of reversing */
        gap: 8px;
        position: relative;
        margin-bottom: 12px;
        padding: 0; /* no top padding since icon is inline now */
        text-align: right;
    }
    html[dir="rtl"] .about-txt-con ul li::before {
        position: static; /* inline with text */
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        font-size: 16px;
        line-height: 1;
    }
}

@media only screen and (max-width: 991px) {
    html[dir="rtl"] .banner-inner-con {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    html[dir="rtl"] .banner-txt-section {
        padding-right: 15px;
        padding-left: 15px;
    }
    html[dir="rtl"] .banner-txt-section h1 {
        font-size: 18px;
        line-height: 26px;
    }
}

/* Mobile: reduce gap between small line and text in banner */
@media only screen and (max-width: 575px) {
    html[dir="rtl"] .banner-txt-section span {
        padding-right: 35px !important;
        margin-bottom: 32px !important;
        display: inline-block !important;
        margin-right: 0;
        margin-left: 0;
    }
    html[dir="rtl"] .banner-txt-section span::before {
        width: 28px !important;
    }
}

/* RTL tweaks for index3-service-section */
html[dir="rtl"] .index3-service-section .generic-title {
    text-align: center;
}
html[dir="rtl"] .index3-service-con {
    direction: rtl;
}
html[dir="rtl"] .index3-service-section .service-type-box {
    text-align: center;
}
html[dir="rtl"] .index3-service-section h4,
html[dir="rtl"] .index3-service-section p,
html[dir="rtl"] .index3-service-section a {
    text-align: center;
    font-family: inherit;
}
html[dir="rtl"] .index3-service-section .service-type-box figure {
    margin-left: auto;
    margin-right: auto;
}
html[dir="rtl"] .index3-service-section .service-type-box a {
    margin-left: auto;
    margin-right: auto;
}

/* Keep contact form section LTR to match original alignment */
html[dir="rtl"] .contact-con,
html[dir="rtl"] .contact-con * {
    direction: ltr;
    text-align: left;
}

/* Right-align only the headings and paragraph texts inside contact section */
html[dir="rtl"] .contact-con .sub-txt,
html[dir="rtl"] .contact-con h2,
html[dir="rtl"] .contact-con p {
    direction: rtl;
    text-align: right;
}
/* Center the submit button (and its text) */
html[dir="rtl"] .contact-con .submit-btn {
    text-align: center;
}
html[dir="rtl"] .contact-con .submit-btn button {
    display: inline-block;
    text-align: center;
}

/* Mobile: center the contact headings/text */
@media only screen and (max-width: 767px) {
    html[dir="rtl"] .contact-con .sub-txt,
    html[dir="rtl"] .contact-con h2,
    html[dir="rtl"] .contact-con p {
        text-align: center;
        direction: rtl;
    }
}

/* Contact page (contact.html) form fields: align RTL */
html[dir="rtl"] .contact-main-sec .form-box input,
html[dir="rtl"] .contact-main-sec .form-box textarea,
html[dir="rtl"] .contact-main-sec .form-box select {
    direction: rtl;
    text-align: right;
}
/* Phone input specifically */
html[dir="rtl"] .contact-main-sec .form-box input[type="tel"] {
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
}

/* Homepage appointment form: right-align only text inputs so placeholders are RTL */
html[dir="rtl"] .contact-con .form-box input[type="text"] {
    direction: rtl;
    text-align: right;
}

/* Homepage appointment form: align all fields RTL/right */
html[dir="rtl"] .contact-con .form-box input[type="email"],
html[dir="rtl"] .contact-con .form-box input[type="tel"],
html[dir="rtl"] .contact-con .form-box input[type="date"],
html[dir="rtl"] .contact-con .form-box select,
html[dir="rtl"] .contact-con .form-box textarea {
    direction: rtl;
    text-align: right;
}
/* Ensure select displays selected text on the right in all browsers */
html[dir="rtl"] .contact-con .form-box select { text-align-last: right; }
html[dir="rtl"] .contact-con .form-box select option { direction: rtl; text-align: right; }
/* Placeholder alignment */
html[dir="rtl"] .contact-con .form-box input::placeholder,
html[dir="rtl"] .contact-con .form-box textarea::placeholder {
    direction: rtl;
    text-align: right;
}
/* Chrome/WebKit date input inner text */
html[dir="rtl"] .contact-con .form-box input[type="date"]::-webkit-datetime-edit {
    text-align: right;
}

/* Homepage appointment form: bring text close to the right edge like date/select */
html[dir="rtl"] .contact-con .form-box ul li i {
    right: auto;
    left: 10px;
}
html[dir="rtl"] .contact-con .form-box ul li input {
    padding: 10px 8px 10px 35px !important;
}

/* Process section (How it Works) - center texts and button on mobile */
@media only screen and (max-width: 767px) {
    html[dir="rtl"] .process-main-section .generic-title,
    html[dir="rtl"] .process-main-section .generic-title .small-text,
    html[dir="rtl"] .process-main-section .generic-title h2 {
        text-align: center;
    }
    html[dir="rtl"] .process-main-section .generic-btn {
        text-align: center;
    }
    html[dir="rtl"] .process-main-section .generic-btn a {
        display: inline-block;
    }
}

/* Process items alignment on mobile: keep text right, close to icon */
@media only screen and (max-width: 767px) {
    html[dir="rtl"] .process-main-section .process-right-sec ul li {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    html[dir="rtl"] .process-main-section .process-img-sec {
        margin-left: 12px;
    }
    html[dir="rtl"] .process-main-section .process-text-con {
        text-align: right;
    }
    html[dir="rtl"] .process-main-section .process-text-con h4,
    html[dir="rtl"] .process-main-section .process-text-con p {
        text-align: right;
    }
}

/* Footer: center layout on mobile */
@media only screen and (max-width: 767px) {
    html[dir="rtl"] .footer-main-section .subscribe-con {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    html[dir="rtl"] .footer-main-section .subscribe-con h4 {
        text-align: center;
    }
    html[dir="rtl"] .footer-main-section .form-sec {
        width: 100%;
        text-align: center;
    }
    html[dir="rtl"] .footer-main-section .form-sec input {
        text-align: center;
    }
    html[dir="rtl"] .footer-main-section .footer-inner-sec,
    html[dir="rtl"] .footer-main-section .footer-text-boxes,
    html[dir="rtl"] .footer-main-section .footer-logo-con {
        text-align: center;
    }
    html[dir="rtl"] .footer-main-section .footer-text-boxes ul,
    html[dir="rtl"] .footer-main-section .footer-text-boxes ul li,
    html[dir="rtl"] .footer-main-section .footer-text-boxes ul li a {
        text-align: center;
    }
    /* Center list items and neutralize bullets/icons positioning */
    html[dir="rtl"] .footer-main-section .footer-text-boxes ul li {
        padding-left: 0;
        padding-right: 0;
        position: static;
    }
    html[dir="rtl"] .footer-main-section .footer-text-boxes ul li a {
        display: inline-block;
    }
    html[dir="rtl"] .footer-main-section .footer-text-boxes ul li i {
        position: static;
        margin-left: 6px;
    }
    html[dir="rtl"] .footer-main-section .footer-text-boxes:last-child ul li {
        padding-left: 0;
        padding-right: 0;
    }
    html[dir="rtl"] .footer-main-section .footer-logo-con figure {
        display: block;
        margin: 0 auto;
    }
    html[dir="rtl"] .footer-main-section .social-links ul {
        justify-content: center;
    }
}

/* Header mobile layout: hamburger right, logo left, sensible logo size */
@media only screen and (max-width: 767px) {
    html[dir="rtl"] .header-main-con .navbar {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }
    html[dir="rtl"] .header-main-con .navbar-toggler {
        order: 1;
        margin: 0;
    }
    html[dir="rtl"] .header-main-con .navbar-brand {
        order: 2;
        margin-right: auto;
    }
    html[dir="rtl"] .navbar-light .navbar-brand figure img {
        max-height: 40px;
        width: auto;
    }
    /* Phone block align to right with same container padding */
    html[dir="rtl"] .header-main-con .header-contact {
        width: 100%;
        justify-content: flex-start;
        text-align: right;
    }
    html[dir="rtl"] .header-main-con .header-contact .phone {
        margin: 0;
    }
}
/* Force footer lists to center on smallest mobile where mobile.css overrides exist */
@media only screen and (max-width: 575px) {
    html[dir="rtl"] .footer-main-section .footer-inner-sec {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    html[dir="rtl"] .footer-main-section .footer-text-boxes,
    html[dir="rtl"] .footer-main-section .footer-text-boxes h4,
    html[dir="rtl"] .footer-main-section .footer-text-boxes ul,
    html[dir="rtl"] .footer-main-section .footer-text-boxes ul li,
    html[dir="rtl"] .footer-main-section .footer-text-boxes ul li a {
        text-align: center !important;
    }
    html[dir="rtl"] .footer-main-section .footer-text-boxes ul li {
        display: block !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: static !important;
        margin: 0 0 6px 0 !important;
    }
    html[dir="rtl"] .footer-main-section .footer-text-boxes ul li i {
        position: static !important;
        left: auto !important;
        right: auto !important;
        margin-left: 6px !important;
    }
    /* Add accent underline under footer section titles for better separation */
    html[dir="rtl"] .footer-main-section .footer-text-boxes h4 {
        position: relative;
        display: inline-block;
        padding-bottom: 6px;
        margin-bottom: 10px;
    }
    html[dir="rtl"] .footer-main-section .footer-text-boxes h4::after {
        content: "";
        display: block;
        width: 64px;
        height: 1px;
        background: var(--accent);
        border-radius: 2px;
        margin: 8px auto 0;
    }
    /* Strengthen visual hierarchy: heavier titles, lighter submenu links */
    html[dir="rtl"] .footer-main-section .footer-text-boxes h4 {
        font-weight: 800;
        font-size: 18px;
    }
    html[dir="rtl"] .footer-main-section .footer-text-boxes ul li a {
        font-weight: 400;
        font-size: 15px;
    }
}