/**
 * Ramom Multi School — Frontend Arabic RTL Styles
 * Loaded only on public website (home/layout), not admin panel.
 * All rules scoped to html[dir="rtl"] / body.frontend-rtl to preserve LTR when English is active.
 */

/* ==========================================================================
   0. Frontend Navbar — Icons & Separators (all languages)
   ========================================================================== */

#nav .navbar-style3 {
    align-items: center;
    gap: 0;
}

#nav .navbar-style3 > .nav-item {
    position: relative;
}

#nav .navbar-style3 .nav-link-inner {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

#nav .navbar-style3 .nav-icon {
    flex-shrink: 0;
    width: 16px;
    font-size: 13px;
    text-align: center;
    color: var(--thm-primary);
    opacity: 0.88;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#nav .navbar-style3 .nav-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

#nav .navbar-style3 .nav-item:hover > .nav-link .nav-icon,
#nav .navbar-style3 .nav-item.active > .nav-link .nav-icon {
    opacity: 1;
}

#nav .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

#nav .dropdown-menu .dropdown-item .nav-icon {
    font-size: 12px;
    width: 14px;
}

#nav .dropdown-menu a.dropdown-item:before {
    display: none;
}

#nav .navbar-style3 .nav-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--thm-radius, 4px);
}

@media (min-width: 992px) {
    #nav .navbar-style3 > .nav-item > .nav-link {
        padding: 10px 16px !important;
    }

    #nav .navbar-style3 > .nav-item + .nav-item {
        border-inline-start: 1px solid rgba(49, 49, 49, 0.14);
    }

    #nav .navbar-style3 > .nav-item.m-login {
        border-inline-start: 1px solid rgba(49, 49, 49, 0.22);
        margin-inline-start: 10px;
        padding-inline-start: 4px;
    }

    #nav .navbar-style3 > .nav-item:not(.m-login) > .nav-link .nav-link-inner {
        padding-inline: 2px;
    }
}

@media (max-width: 991px) {
    #nav .navbar-style3 > .nav-item + .nav-item {
        border-inline-start: none;
    }

    #nav .navbar-style3 > .nav-item > .nav-link {
        padding: 12px 16px !important;
    }

    #nav .navbar-style3 .nav-icon {
        width: 18px;
        font-size: 14px;
    }

    #nav .navbar-style3 > .nav-item.m-login {
        padding: 12px 16px;
        border-inline-start: none;
        margin-inline-start: 0;
    }

    #nav .navbar-style3 .nav-login-btn {
        width: 100%;
    }
}

/* ==========================================================================
   1. Base Typography & Direction
   ========================================================================== */

html[dir="rtl"],
html[dir="rtl"] body,
body.frontend-rtl,
body.arabic-ui {
    direction: rtl;
    text-align: right;
    font-family: 'IBM Plex Sans Arabic', Arial, sans-serif !important;
    line-height: 1.8;
    letter-spacing: 0;
    overflow-x: hidden;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: 'IBM Plex Sans Arabic', Arial, sans-serif !important;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
}

html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] li,
html[dir="rtl"] span,
html[dir="rtl"] label,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
    font-family: 'IBM Plex Sans Arabic', Arial, sans-serif !important;
}

/* LTR exceptions — emails, phones, URLs, code */
html[dir="rtl"] .ltr-text,
html[dir="rtl"] .email-text,
html[dir="rtl"] .phone-text,
html[dir="rtl"] .url-text,
html[dir="rtl"] code,
html[dir="rtl"] pre,
.ltr-text,
.email-text,
.phone-text,
.url-text,
code,
pre {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] .email,
html[dir="rtl"] .phone,
html[dir="rtl"] .url {
    direction: ltr !important;
    text-align: left !important;
}

/* ==========================================================================
   2. Header & Navbar
   ========================================================================== */

html[dir="rtl"] .navbar,
html[dir="rtl"] .main-menu,
html[dir="rtl"] .navigation,
html[dir="rtl"] header,
html[dir="rtl"] .main-header {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .navbar-nav,
html[dir="rtl"] .main-menu ul,
html[dir="rtl"] .navigation ul {
    padding-right: 0;
    padding-left: 0;
}

html[dir="rtl"] .navbar-nav > li,
html[dir="rtl"] .main-menu > ul > li,
html[dir="rtl"] .navigation > ul > li {
    float: right;
}

html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .sub-menu,
html[dir="rtl"] #nav .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}

html[dir="rtl"] .dropdown-menu li a,
html[dir="rtl"] .sub-menu li a,
html[dir="rtl"] #nav .dropdown-menu .dropdown-item {
    text-align: right;
}

html[dir="rtl"] #nav .dropdown-menu a.dropdown-item {
    padding-right: 12px;
    padding-left: 12px;
}

html[dir="rtl"] #nav .arrow:after {
    margin-left: 0;
    margin-right: 4px;
}

html[dir="rtl"] #nav .navbar-style3 .nav-link-inner {
    flex-direction: row;
}

html[dir="rtl"] #nav .navbar-style3 .nav-icon {
    margin-left: 0;
    margin-right: 0;
}

html[dir="rtl"] .top-bar ul {
    text-align: left;
}

html[dir="rtl"] .top-bar li {
    border-right: none;
    border-left: 1px solid #d3d3d3;
}

html[dir="rtl"] .top-bar li:last-of-type {
    padding-left: 0;
    border-left: none;
}

html[dir="rtl"] .top-bar li .fa,
html[dir="rtl"] .top-bar li .far,
html[dir="rtl"] .top-bar li .fas {
    margin-right: 0;
    margin-left: 5px;
}

html[dir="rtl"] .navbar-nav.ml-auto,
html[dir="rtl"] .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .m-login {
    margin-left: 0;
    margin-right: 1rem;
}

html[dir="rtl"] #nav .navbar-nav > li + li {
    margin-left: 0;
    margin-right: 5px;
}

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

html[dir="rtl"] .nav-search .btn {
    margin-left: 0;
    margin-right: -4px;
    padding-right: 0;
    padding-left: 0;
}

html[dir="rtl"] .nav-search .form-control {
    padding-left: 0;
    padding-right: 0;
}

/* Latest news ticker bar */
html[dir="rtl"] .latest--news {
    direction: rtl;
}

html[dir="rtl"] .latest-title i {
    padding-right: 0;
    padding-left: 5px;
}

html[dir="rtl"] .news-updates-list li:not(:last-child) {
    margin-right: 0;
    margin-left: 20px;
}

html[dir="rtl"] .news-updates-list .nav {
    animation-name: marquee-rtl;
}

@keyframes marquee-rtl {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* ==========================================================================
   3. Hero / Slider / Banner
   ========================================================================== */

html[dir="rtl"] .hero,
html[dir="rtl"] .banner,
html[dir="rtl"] .slider,
html[dir="rtl"] .main-slider,
html[dir="rtl"] .main-banner {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .hero-content,
html[dir="rtl"] .banner-content,
html[dir="rtl"] .slider-content,
html[dir="rtl"] .main-slider .slider-caption,
html[dir="rtl"] .main-slider .wrap-caption {
    text-align: right;
}

html[dir="rtl"] .main-slider .c-left .wrap-caption {
    text-align: right;
}

html[dir="rtl"] .main-slider .c-right .wrap-caption {
    text-align: left;
}

html[dir="rtl"] .main-slider .c-center .wrap-caption,
html[dir="rtl"] .main-slider .c-center .text {
    text-align: center;
}

html[dir="rtl"] .hero h1,
html[dir="rtl"] .banner h1,
html[dir="rtl"] .slider h1,
html[dir="rtl"] .main-slider h1 {
    line-height: 1.45;
    font-weight: 800;
}

html[dir="rtl"] .hero p,
html[dir="rtl"] .banner p,
html[dir="rtl"] .slider p,
html[dir="rtl"] .main-slider .text {
    line-height: 1.9;
    max-width: 680px;
}

html[dir="rtl"] .slide-nav .owl-nav .owl-prev {
    left: auto;
    right: 20px;
    float: right;
}

html[dir="rtl"] .slide-nav .owl-nav .owl-next {
    right: auto;
    left: 20px;
    float: left;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

html[dir="rtl"] .btn,
html[dir="rtl"] button,
html[dir="rtl"] .theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'IBM Plex Sans Arabic', Arial, sans-serif !important;
}

html[dir="rtl"] .btn i,
html[dir="rtl"] .theme-btn i {
    margin-left: 6px;
    margin-right: 0;
}

html[dir="rtl"] .main-slider .link-btn .btn + .btn {
    margin-right: 10px;
    margin-left: 0;
}

/* ==========================================================================
   5. Cards, Sections, Features
   ========================================================================== */

html[dir="rtl"] .card,
html[dir="rtl"] .service-box,
html[dir="rtl"] .feature-box,
html[dir="rtl"] .news-box,
html[dir="rtl"] .blog-box,
html[dir="rtl"] .single-service,
html[dir="rtl"] .single-feature,
html[dir="rtl"] .notification-boxes .box,
html[dir="rtl"] .news-post-box {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .card-body,
html[dir="rtl"] .service-content,
html[dir="rtl"] .feature-content,
html[dir="rtl"] .news-content,
html[dir="rtl"] .blog-content,
html[dir="rtl"] .news-post-box .inner {
    text-align: right;
}

html[dir="rtl"] .section-title,
html[dir="rtl"] .sec-title,
html[dir="rtl"] .title-area,
html[dir="rtl"] .main-heading1,
html[dir="rtl"] .main-heading2 {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .section-title.center,
html[dir="rtl"] .text-center,
html[dir="rtl"] .sec-title.text-center {
    text-align: center !important;
}

/* sec-title diamond + line decor (style-two) — mirror for RTL */
html[dir="rtl"] .sec-title span.decor:before {
    left: auto;
    right: 22px;
}

html[dir="rtl"] .sec-title span.decor:after {
    right: auto;
    left: 22px;
}

html[dir="rtl"] .sec-title.style-two span.decor:after {
    right: auto;
    left: -94px;
}

html[dir="rtl"] .sec-title.text-left span.decor {
    margin-left: 0;
    margin-right: 50px;
}

/* Welcome image corner accents */
html[dir="rtl"] .wel-img:after {
    left: auto;
    right: -1px;
    border-width: 5px 5px 0 0;
}

html[dir="rtl"] .wel-img:before {
    right: auto;
    left: -1px;
    border-width: 0 0 5px 5px;
}

html[dir="rtl"] .welcome-area,
html[dir="rtl"] .about-featured,
html[dir="rtl"] .intro,
html[dir="rtl"] .main-container {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .about-featured .list li {
    text-align: right;
}

html[dir="rtl"] .footer-top-bar h3.float-left {
    float: right !important;
}

html[dir="rtl"] .footer-top-bar .btn-black.float-right {
    float: left !important;
}

/* Testimonials */
html[dir="rtl"] .testimonial-carousel,
html[dir="rtl"] .single-testimonial-style {
    direction: rtl;
    text-align: right;
}

/* Teachers / Gallery */
html[dir="rtl"] .doctors-grid,
html[dir="rtl"] .gallery-grid,
html[dir="rtl"] .gallery-album {
    direction: rtl;
}

html[dir="rtl"] #doctors-filter {
    direction: rtl;
    text-align: right;
}

/* ==========================================================================
   6. Forms & Admission
   ========================================================================== */

html[dir="rtl"] form,
html[dir="rtl"] .form-group,
html[dir="rtl"] .contact-form,
html[dir="rtl"] .admission-form,
html[dir="rtl"] .box2.form-box,
html[dir="rtl"] .frm-submit-data {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] label,
html[dir="rtl"] .control-label {
    text-align: right;
    display: block;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .form-control {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    text-align: right;
    padding-right: 8px;
    padding-left: 20px;
}

html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: auto;
    left: 1px;
}

html[dir="rtl"] .required {
    margin-right: 0;
    margin-left: 2px;
}

html[dir="rtl"] .custom-file-label,
html[dir="rtl"] .bootstrap-fileupload .badge {
    text-align: right;
}

/* ==========================================================================
   7. News / Blog
   ========================================================================== */

html[dir="rtl"] .blog,
html[dir="rtl"] .news,
html[dir="rtl"] .post,
html[dir="rtl"] .post-content,
html[dir="rtl"] .entry-content {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .post-meta,
html[dir="rtl"] .blog-meta,
html[dir="rtl"] .news-meta,
html[dir="rtl"] .post-meta.list-inline {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .post-meta i,
html[dir="rtl"] .blog-meta i,
html[dir="rtl"] .news-meta i {
    margin-left: 6px;
    margin-right: 0;
}

html[dir="rtl"] .news-post-box-img.text-lg-left {
    text-align: right !important;
}

/* ==========================================================================
   8. Breadcrumbs
   ========================================================================== */

html[dir="rtl"] .breadcrumb {
    direction: rtl;
    justify-content: flex-start;
}

html[dir="rtl"] .breadcrumb ul {
    direction: rtl;
}

html[dir="rtl"] .breadcrumb li + li::before {
    float: right;
    padding-left: .5rem;
    padding-right: .5rem;
    content: "\f30a";
}

html[dir="rtl"] .breadcrumb .list-inline-item:not(:last-child) {
    margin-right: 0;
    margin-left: .5rem;
}

html[dir="rtl"] .quick-links li a .fa-angle-right:before {
    content: "\f104";
}

html[dir="rtl"] .quick-links li a .fa {
    margin-right: 0;
    margin-left: 8px;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

html[dir="rtl"] footer,
html[dir="rtl"] .footer,
html[dir="rtl"] .main-footer,
html[dir="rtl"] .footer-widget,
html[dir="rtl"] .footer-area {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .footer ul,
html[dir="rtl"] .footer-area ul {
    padding-right: 0;
    padding-left: 0;
}

html[dir="rtl"] .footer li,
html[dir="rtl"] .footer-area li {
    text-align: right;
}

html[dir="rtl"] .footer .social-links,
html[dir="rtl"] .footer-area .social {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    padding-right: 0;
}

html[dir="rtl"] .footer-area .address-list li i {
    float: right;
    margin-left: 10px;
    margin-right: 0;
}

html[dir="rtl"] .footer-area h4:after {
    left: auto;
    right: 0;
}

html[dir="rtl"] .copyright {
    direction: rtl;
}

/* ==========================================================================
   10. Pagination & Tables
   ========================================================================== */

html[dir="rtl"] .pagination {
    direction: rtl;
}

html[dir="rtl"] .pagination > li:first-child > a,
html[dir="rtl"] .pagination > li:first-child > span {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: var(--thm-radius);
    border-top-right-radius: var(--thm-radius);
    margin-left: 0;
    margin-right: 0;
}

html[dir="rtl"] .pagination > li:last-child > a,
html[dir="rtl"] .pagination > li:last-child > span {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--thm-radius);
    border-top-left-radius: var(--thm-radius);
}

html[dir="rtl"] table {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .table th,
html[dir="rtl"] .table td {
    text-align: right;
}

/* ==========================================================================
   11. FAQ Accordion
   ========================================================================== */

html[dir="rtl"] #accordion-faqs .card-header a .fa {
    float: left !important;
}

html[dir="rtl"] .accordion .card-header {
    text-align: right;
}

/* ==========================================================================
   12. Fixed widgets (WhatsApp, Back to top)
   ========================================================================== */

html[dir="rtl"] .back-to-top {
    right: auto;
    left: 20px;
}

html[dir="rtl"] .whatsapp-popup {
    right: auto;
    left: 20px;
}

html[dir="rtl"] .whatsapp-popup .popup-content-header i {
    float: right;
}

html[dir="rtl"] .whatsapp-popup .popup-content-header h5 {
    margin-right: 55px;
    margin-left: 0;
}

html[dir="rtl"] .whatsapp-popup .whatsapp-img {
    float: right;
}

html[dir="rtl"] .whatsapp-popup .whatsapp-text {
    padding-left: 0;
    padding-right: 10px;
}

html[dir="rtl"] .whatsapp-popup .popup-content:after {
    right: 20px;
    left: auto;
}

/* ==========================================================================
   13. Bootstrap spacing & alignment overrides
   ========================================================================== */

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

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

html[dir="rtl"] .float-left,
html[dir="rtl"] .pull-left {
    float: right !important;
}

html[dir="rtl"] .float-right,
html[dir="rtl"] .pull-right {
    float: left !important;
}

html[dir="rtl"] .ml-1 { margin-right: .25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-2 { margin-right: .5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }

html[dir="rtl"] .mr-1 { margin-left: .25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-2 { margin-left: .5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }

html[dir="rtl"] .pl-1 { padding-right: .25rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-2 { padding-right: .5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-3 { padding-right: 1rem !important; padding-left: 0 !important; }

html[dir="rtl"] .pr-1 { padding-left: .25rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-2 { padding-left: .5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-3 { padding-left: 1rem !important; padding-right: 0 !important; }

html[dir="rtl"] .col-md-offset-3 {
    margin-right: 25%;
    margin-left: 0;
}

html[dir="rtl"] .col-md-offset-10 {
    margin-right: 83.33333333%;
    margin-left: 0;
}

/* ==========================================================================
   14. Responsive — Mobile & Tablet
   ========================================================================== */

@media (max-width: 991px) {
    html[dir="rtl"] .navbar-collapse,
    html[dir="rtl"] .mobile-menu,
    html[dir="rtl"] .main-menu,
    html[dir="rtl"] #mainNav {
        direction: rtl;
        text-align: right;
    }

    html[dir="rtl"] .navbar-nav > li,
    html[dir="rtl"] .main-menu > ul > li,
    html[dir="rtl"] .navigation > ul > li,
    html[dir="rtl"] #nav .navbar-nav > li {
        float: none;
        text-align: right;
    }

    html[dir="rtl"] .dropdown-menu,
    html[dir="rtl"] .sub-menu,
    html[dir="rtl"] #nav .dropdown-menu {
        position: static;
        right: auto;
        left: auto;
        width: 100%;
        text-align: right;
        opacity: 1;
        visibility: visible;
        top: auto;
        box-shadow: none !important;
    }

    html[dir="rtl"] .hero-content,
    html[dir="rtl"] .banner-content,
    html[dir="rtl"] .slider-content,
    html[dir="rtl"] .main-slider .slider-caption {
        text-align: center;
        margin-inline: auto;
    }

    html[dir="rtl"] .hero p,
    html[dir="rtl"] .banner p,
    html[dir="rtl"] .slider p,
    html[dir="rtl"] .main-slider .text {
        margin-inline: auto;
    }

    html[dir="rtl"] .top-bar .col-md-6:first-child {
        text-align: right;
    }

    html[dir="rtl"] .top-bar .col-md-6:last-child ul {
        text-align: left;
    }

    html[dir="rtl"] .footer-top-bar h3.float-left,
    html[dir="rtl"] .footer-top-bar .btn-black.float-right {
        float: none !important;
    }

    html[dir="rtl"] .latest--news .d-lg-flex {
        flex-direction: row-reverse;
    }
}

@media (max-width: 575px) {
    html[dir="rtl"] h1,
    html[dir="rtl"] .main-slider h1 {
        font-size: 30px;
        line-height: 1.5;
    }

    html[dir="rtl"] h2,
    html[dir="rtl"] .main-heading2 {
        font-size: 24px;
        line-height: 1.5;
    }

    html[dir="rtl"] .btn,
    html[dir="rtl"] .theme-btn {
        width: 100%;
        max-width: 100%;
    }

    html[dir="rtl"] .section-title,
    html[dir="rtl"] .sec-title {
        text-align: center;
    }

    html[dir="rtl"] .main-slider .link-btn .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
}