@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

/* This targets the calendar container and all its children to undo the wildcard RTL */
/* Force Flatpickr to LTR for both Arabic and Kurdish */
html[lang="ar"] .flatpickr-calendar,
html[lang="ar"] .flatpickr-calendar *,
html[lang="ku"] .flatpickr-calendar,
html[lang="ku"] .flatpickr-calendar *,
html[lang="ar"] .dayContainer,
html[lang="ku"] .dayContainer {
    direction: ltr !important;
    text-align: center !important;
}

/* Fix the weekday headers for both */
html[lang="ar"] .flatpickr-weekdays,
html[lang="ar"] .flatpickr-weekdaycontainer,
html[lang="ku"] .flatpickr-weekdays,
html[lang="ku"] .flatpickr-weekdaycontainer {
    direction: ltr !important;
    display: flex !important;
    flex-direction: row !important;
}

/* Ensure the days flow in the correct grid order for both */
html[lang="ar"] .dayContainer,
html[lang="ku"] .dayContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
}

/* Force specific alignment on the day cells */
html[lang="ar"] .flatpickr-day,
html[lang="ku"] .flatpickr-day {
    text-align: center !important;
}

/* Fix Month/Year navigation container */
html[lang="ar"] .flatpickr-current-month,
html[lang="ku"] .flatpickr-current-month {
    display: flex !important;
    flex-direction: row !important;
    direction: ltr !important;
}

html[lang="ar"] * {
    font-family: "Tajawal", sans-serif !important;
    direction: rtl !important;
    text-align: right;
}

html[lang="ku"] *:not(#choose-cards-offcanvas *, .credit-card .card-number, .social-links-ul *, .otp-wrapper, .force-ltr *, .flatpickr-calendar *) {
    font-family: "Noto Sans Arabic", sans-serif !important;
    direction: rtl !important;
    text-align: right;
}

html[lang="ku"] .card-user-details-info-content #CardNumber{
    direction: ltr !important;
}

html[dir="rtl"] .auth-form .field-validation-error span {
    text-align: start;
    display: block;
}

html[dir="rtl"] .card-user-details-info-wrapper .card-user-details-info:not(:last-child) .card-user-details-info-content::after {
    /* left: 5px; */
    left: -5px;
    right: unset;
}

html[dir="rtl"] .option-with-accordion-label-content {
    padding: 20px 55px 20px 30px;
    clip-path: polygon(100% 0, 1% 0, 4% 100%, 100% 100%);
}

html[dir="rtl"] .option-with-accordion-label input[type="radio"], html[dir="rtl"] .option-with-accordion-label img {
    left: 0;
    right: 15px;
}

html[dir="rtl"] .option-with-accordion-btn {
    clip-path: polygon(80% 0%, 0% 0, 0% 100%, 100% 100%);
    text-align: center;
}

html[dir="rtl"] .header-actions-ul li::before {
    right: 0;
    left: unset;
}
html[dir="rtl"] .header-menu-links li:not(:last-child):not(.active-li):after {
    left: 0;
    right: unset;
}

html[dir="rtl"] .breadcrumbs-ul li:not(:last-child)::after {
    right: unset;
    left: 0;
}

html[dir="rtl"] .breadcrumbs-ul li:not(:last-child) {
    padding-right: 0px;
    padding-left: 20px;
    margin-right: 0px;
    margin-left: 10px;
}

html[dir="rtl"] .voucher-white-circle {
    border-radius: 0% 50% 50% 0%;
    right: unset;
    left: -17px;
}

html[dir="rtl"] .voucher-list-item-content {
    padding-right: 15px;
    padding-left: 30px;
    border-left: 0;
    border-right: 1px dashed var(--extra-light-gray);
}

html[dir="rtl"] .card-user-details-info .card-user-details-info-content {
    padding-right: 0px;
    padding-left: 10px;
}

html[dir="rtl"] .beneficiary-list-info .beneficiary-list-content-item img {
    transform: scaleX(-1);
}

html[dir="rtl"] select.cihan-inputs {
    padding-right: 1rem !important;
    padding-left: 50px !important;
    background-position: left 20px center;
}

html[dir="rtl"] .card-one-body-smaller {
    margin-left: 0px;
    margin-right: 5px;
}

html[dir="rtl"] .header-lang-ul li {
    border-left: unset;
    border-right: 1px solid transparent;
}

html[dir="rtl"] .header-lang-ul li:hover {
    border-right: 2px solid var(--cihan-red);
}

html[dir="rtl"] .option-with-accordion-label span.option-with-accordion-label-subtitle {
    text-align: left;
}

html[dir="rtl"] .informational-option-with-accordion .accordion-body {
    border-radius:  0px var(--cihan-radius) var(--cihan-radius) var(--cihan-radius);
}

html[dir="rtl"] .cihan-yellow-warning-box h4 {
    padding-left: 0px;
    padding-right: 50px;
}

html[dir="rtl"] .cihan-yellow-warning-box h4::before {
    left: unset;
    right: 0;
}

html[dir="rtl"] .card-images1 .card2 {
    left: 0; 
    right: unset;
}

html[dir="rtl"] .card-images1 .card1 {
    right: 0;
    left: unset;
}

html[dir="rtl"] .flatpickr-day.selected.startRange, html[dir="rtl"] .flatpickr-day.startRange.startRange, html[dir="rtl"] .flatpickr-day.endRange.startRange {
    border-radius: 0 50px 50px 0;
    text-align: center;
    box-shadow: unset !important;
}

html[dir="rtl"] .flatpickr-day.selected.endRange, html[dir="rtl"] .flatpickr-day.startRange.endRange, html[dir="rtl"] .flatpickr-day.endRange.endRange {    
    border-radius: 50px 0px 0px 50px;
    text-align: center;
    box-shadow: unset !important;
}

html[dir="rtl"] .rangeMode .flatpickr-day {
    text-align: center;
}

html[dir="rtl"] .gray-link-with-two-icons img:last-child {
    transform: rotate(180deg);
}

html[dir="rtl"] .page-item:first-child .page-link {
    border-top-left-radius: 0rem;
    border-top-right-radius: 0.375rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0.375rem;
}

html[dir="rtl"] .page-item:last-child .page-link {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0rem;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0rem;
}

html[dir="rtl"] .account-card-trans-amount, html[dir="rtl"] .account-card-trans-amount * {
    text-align: left !important;
}

html[dir="rtl"] .dashboard-account-wrapper {
    padding-right: 0px;
    padding-left: 50px;
}

html[dir="rtl"] .view-all-one svg {
    transform: rotate(180deg);
}

html[dir="rtl"] .auth-text-animation-wrap {
    right: 0%;
    left: unset;
    text-align: right;
}

html[dir="rtl"] .auth-lang-dropdown-wrapper {
  text-align: end;
} 

html[lang="ku"] .cihan-inputs:not(.otp-wrapper input) {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .auth-lang-dropdown {
    left: unset;
    right: 80px;
}

html[dir="rtl"] .step-line {
    left: unset;
    right: 18px;
}

html[lang="ku"] .dashboard-account-wrapper .owl-next {
    text-align: center !important;
}

html[dir="rtl"] div.otp-wrapper {
    direction: ltr !important;
}


html[dir="rtl"] input.form-control.number-aligner {
    direction: ltr!important;
    text-align: left!important;
}

html[dir="rtl"] input.form-control.number-aligner::placeholder {
    direction: rtl!important;
    text-align: right!important;
}

html[lang="ku"] .force-ltr,
html[lang="ku"] .force-ltr *,
html[lang="ar"] .force-ltr,
html[lang="ar"] .force-ltr *
 {
    direction: ltr !important;
    text-align: left !important;
    font-family: 'SF Compact' !important;
}

html[lang="ku"] .force-ltr .select-account-btn-one-amount img,
html[lang="ku"] .force-ltr .select-account-btn-one-amount img {
    display: block;
    margin-left: auto;
}

html[lang="ar"] button.select-account-btn-one .select-account-btn-one-amount,
html[lang="ku"] button.select-account-btn-one .select-account-btn-one-amount {
    margin: 0 auto 0 0;
}

html[lang="ar"] .select-account-btn-one .select-account-btn-one-amount img {
    display: block;
    margin-right: 0;
    margin-left: auto;
}

html[dir="rtl"] .search-input {
    background-position: right 10px center;
}

@media only screen and (min-width: 992px) {
    html[dir="rtl"] .dash-other-services-title::after {
        left: 45px;
        right: unset;
    }
    
    html[dir="rtl"] .dashboard-account-wrapper .owl-next {
        right: unset;
        left: 0;
        text-align: center;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 30px !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 30px !important;
    }
}

@media only screen and (max-width: 991px) {
    html[dir="rtl"] .dashboard-account-wrapper .owl-next {
        right: unset;
        left: 0px;
        text-align: center;
    }
}

@media only screen and (max-width: 1200px){
    html[dir="rtl"] .auth-text-animation-wrap {
        bottom: unset;
        top: 0;
        right: 0;
        left: unset;
    }

    html[dir="rtl"] .auth-lang-dropdown {
      left: unset;
      right: 30px;
      width: calc(100% - 50px);
    }
}