/*
* We load this CSS file if the spark has a language that's an RTL lang.
* The spark may got the RTL lang from the user or the resource whose page we're viewing.
* We put "rtl" class on elements in the HTML which we want to show as RTL direction and font.
*/

.rtl {
    direction: rtl;
    text-align: right;
}

.rtl,
.font-ar {
    font-family: 'Noto Naskh Arabic', 'Inter', 'Roboto', sans-serif !important;
}

.not-rtl,
.btn,
.badge {
    direction: ltr !important;
    text-align: left !important;
}

.material-symbols-outlined.rtl {
    font-family: 'Material Symbols Outlined' !important;
    transform: scaleX(-1);
}



/*
*  Font sizes and wights...
*/

.card-post .card-title.rtl h5 {
    font-size: 1.4rem;
    font-weight: 700;
}

.card-post .card-text.rtl,
.single-entry-card p.fs-14 {
    font-size: 16px !important;
    line-height: 1.8em;
}

.page-markup-container.rtl h1.page-title {
    font-weight: 700;
}

.list-view-entry.rtl p {
    font-weight: 500;
    font-size: 18px;
}

.page-markup-container.rtl .page-markup .text-block,
.page-markup-container.rtl .page-markup ol,
.page-markup-container.rtl .page-markup li {
    font-size: 20px;
    line-height: 1.9em !important;
}

.page-markup-container.rtl .page-markup .heading-block {
    font-size: 28px;
    font-weight: 700;
}

.page-markup-container.rtl .page-markup .subheading-block {
    font-size: 24px;
    font-weight: 600;
}

.page-markup-container.rtl .synopsis {
    font-size: 22px;
    line-height: 2;
}

.dropdown-toggle .font-ar,
.dropdown-item .font-ar {
    font-size: 15px;
    line-height: 1.3rem;
}

@media (max-width: 575.97px) {

    .card-post .card-title.rtl h5 {
        font-size: 19px;
    }

    .page-markup-container.rtl ul,
    .page-markup-container.rtl ol {
        padding-left: 0;
        padding-right: 32px;
    }

    .page-markup-container.rtl .page-markup .text-block,
    .page-markup-container.rtl .page-markup ol,
    .page-markup-container.rtl .page-markup li {
        font-size: 18px;
        line-height: 1.8em !important;
    }

    .page-markup-container.rtl .synopsis {
        font-size: 20px;
        line-height: 1.9;
    }

    .page-markup-container.rtl .page-markup .heading-block {
        font-size: 24px;
    }

    .page-markup-container.rtl .page-markup .subheading-block {
        font-size: 22px;
    }

    .list-view-entry.rtl p {
        font-size: 17px;
    }

    .dropdown-toggle .font-ar,
    .dropdown-item .font-ar {
        font-size: 14px;
    }
}

@media (max-width: 400px) {

    .page-markup-container.rtl ul,
    .page-markup-container.rtl ol {
        padding-right: 22px;
    }
}

@media (max-width: 375px) {

    .page-markup-container.rtl .page-markup .text-block,
    .page-markup-container.rtl .page-markup ol,
    .page-markup-container.rtl .page-markup li {
        font-size: 17px;
    }

    .page-markup-container.rtl .page-markup .heading-block {
        font-size: 23px;
    }
}



/* Slider */

.custom-slider-container.rtl .custom-slider-arrow.slider-button-prev {
    left: auto !important;
    right: -22px;
}

.custom-slider-container.rtl .custom-slider-arrow.slider-button-next {
    right: auto !important;
    left: -22px;
}

.custom-slider-container.rtl .custom-slider-arrow .material-symbols-outlined {
    transform: scaleX(-1) !important;
    margin: 0 0 0 -2px !important;
}

.custom-slider-container.rtl .custom-slider-arrow.slider-button-prev .material-symbols-outlined {
    margin: 0 -2px 0 0 !important;
}

@media (max-width: 767.97px) {

    .custom-slider-container.rtl .custom-slider-arrow.slider-button-prev {
        right: -12px;
    }

    .custom-slider-container.rtl .custom-slider-arrow.slider-button-next {
        left: -12px;
    }
}