/* font for RTL, LTR */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

/* Apply the custom font to all elements within an Arabic language context */
html[lang="ar"] body,
html[lang="ar"] h1,
html[lang="ar"] p {
    font-family: "Tajawal", sans-serif !important;
}

html[lang="ar"] body {
    font-family: "Tajawal", sans-serif !important;
}

/* Alternative using the :lang selector if preferred */
:lang(ar) {
    font-family: "Tajawal", sans-serif !important;
}

[dir="rtl"] {
    font-family: "Tajawal", sans-serif;
}

[dir="rtl"] body {
    font-family: "Tajawal", sans-serif;
}

[dir="rtl"] .swiper-pagination {
    display: flex !important;
    justify-content: flex-start;
}

[dir="ltr"] body {
    font-family: "Poppins", sans-serif;
    background: #fff !important;
}

.tw-campuce-gradient {
    background: linear-gradient(to bottom, #27A99A, #254B4F);
}

/* Custom pagination styles */
.campuce-widget-container .swiper-pagination {
    position: static !important;
    z-index: 50 !important;
    background: transparent !important;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.campuce-widget-container .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.campuce-widget-container .swiper-pagination-bullet-active {
    width: 32px !important;
    height: 12px !important;
    background: white !important;
    border-radius: 9999px !important;
    border: none !important;
}

/* Ensure slider fills its container */
.campuce-widget-container .swiper {
    overflow: hidden !important;
}

.campuce-widget-container .input-shadow {
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
}