/*
 * RTL overrides for the Jobster template, scoped to the components used
 * on the shared layout (header/footer) and the home page.
 * Extend this file as more pages are migrated to the new frontend.
 */

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

/* ── Header / Navigation ── */
[dir="rtl"] .pxp-logo-nav-container .pxp-nav {
    margin-left: 0;
    margin-right: 40px;
}
[dir="rtl"] .pxp-header-right .pxp-user-nav {
    margin-left: 0;
    margin-right: 40px;
}
[dir="rtl"] .pxp-nav-trigger {
    margin-left: 0;
    margin-right: 40px;
}
[dir="rtl"] .pxp-user-nav-trigger,
[dir="rtl"] .pxp-user-nav-dropdown {
    margin-left: 0;
    margin-right: 10px;
}
[dir="rtl"] .pxp-user-nav-name {
    margin-left: 0;
    margin-right: 7px;
}
[dir="rtl"] .pxp-nav .dropdown-menu,
[dir="rtl"] .dropdown-menu {
    text-align: right;
    left: auto;
}
[dir="rtl"] .pxp-dropdown-icon {
    margin-right: 0;
    margin-left: 10px;
}
[dir="rtl"] .pxp-nav > ul > li > ul a.dropdown-toggle::after {
    margin-left: 0;
    margin-right: 7px;
}
[dir="rtl"] .offcanvas-start {
    left: auto;
    right: 0;
    transform: translateX(100%);
}
/* The rule above ties Bootstrap's `.offcanvas.show` on specificity and loads
   later, so without this the menu stays off-screen when opened. */
[dir="rtl"] .offcanvas-start.show {
    transform: none;
}
[dir="rtl"] .pxp-nav-mobile-container.offcanvas {
    border-right: 0 none;
    border-left: 0 none;
    box-shadow: -15px 0 30px rgba(0, 0, 0, .16);
}
[dir="rtl"] .pxp-nav-mobile > ul > li ul.dropdown-menu li:not(.pxp-dropdown-header) {
    padding-left: 0;
    padding-right: 10px;
}

/* ── Hero (boxed) ── */
[dir="rtl"] .pxp-hero-form-round {
    padding-left: 0;
    padding-right: 20px;
}
[dir="rtl"] .pxp-hero-form-round form button {
    margin-right: 0;
    margin-left: 13px;
}
[dir="rtl"] .pxp-hero-form-round.pxp-bigger form button {
    margin-right: 0;
    margin-left: 20px;
}
[dir="rtl"] .pxp-hero-form-round form .pxp-has-left-border {
    border-left: 0 none;
    border-right: 1px solid var(--pxpLightGrayColor);
}
[dir="rtl"] .pxp-hero-searches-items > a {
    margin-right: 0;
    margin-left: 5px;
}
[dir="rtl"] .pxp-hero-boxed-icon-circle-2 {
    right: auto;
    left: 190px;
}
[dir="rtl"] .pxp-hero-boxed-info-card-big {
    right: auto;
    left: 0;
}
[dir="rtl"] .pxp-hero-boxed-info-card-small {
    left: auto;
    right: 0;
}
[dir="rtl"] .pxp-hero-boxed-info-list-container {
    left: auto;
    right: 10%;
}
[dir="rtl"] .pxp-hero-boxed-info-list-item-number > span {
    margin-left: 0;
    margin-right: 10px;
}
[dir="rtl"] .pxp-hero-form .input-group .input-group-text {
    padding-right: .75rem;
    padding-left: 0;
}
[dir="rtl"] .pxp-hero-form .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: 0;
    margin-right: 1px;
}
/* Move the select arrow to the left so it doesn't sit between icon and text */
[dir="rtl"] .pxp-hero-form .form-select {
    padding-right: .75rem;
    padding-left: 2.25rem;
    background-position: left .75rem center;
}
/* Bootstrap 5.1 has no RTL floating labels: pin the label to the right edge */
[dir="rtl"] .form-floating > label {
    left: auto;
    right: 0;
    transform-origin: 100% 0;
}

/* The [dir="rtl"] rules above outrank style.css's mobile rules, so the
   stacked mobile form needs its own RTL spacing. */
@media screen and (max-width: 991px) {
    [dir="rtl"] .pxp-hero-form-round.pxp-large {
        padding: 20px;
    }
    [dir="rtl"] .pxp-hero-form-round.pxp-large form button {
        margin-left: 0;
    }
    [dir="rtl"] .pxp-hero-form-round.pxp-large form .pxp-has-left-border {
        border-right: 0 none;
    }
}
@media screen and (max-width: 767px) {
    [dir="rtl"] .pxp-hero-form-round.pxp-bigger form .pxp-has-left-border {
        border-right: 0 none;
    }
    [dir="rtl"] .pxp-hero-form-round.pxp-bigger {
        padding: 20px;
    }
    [dir="rtl"] .pxp-hero-form-round.pxp-bigger form button {
        margin-left: 0;
    }
    [dir="rtl"] .pxp-hero-form-round.pxp-bigger .form-floating > label {
        padding-left: .75rem;
        padding-right: 0;
    }
}
@media screen and (max-width: 575px) {
    [dir="rtl"] .pxp-hero-form-round {
        padding: 20px;
    }
    [dir="rtl"] .pxp-hero-form-round form button {
        margin-left: 0;
    }
    [dir="rtl"] .pxp-hero-form-round form .pxp-has-left-border {
        border-right: 0 none;
    }
    [dir="rtl"] .pxp-jobs-list-top .form-select {
        padding-left: 20px;
        padding-right: 0;
    }
    [dir="rtl"] .pxp-nav-trigger {
        margin-right: 20px;
    }
    [dir="rtl"] .pxp-jobs-card-2-info {
        margin-right: 0;
    }
}

/* ── Section CTA / read-more arrows ── */
[dir="rtl"] .pxp-section-cta span,
[dir="rtl"] .pxp-section-cta-o span,
[dir="rtl"] .pxp-posts-card-1-cta > a > span {
    margin-left: 0;
    margin-right: 10px;
}
[dir="rtl"] .pxp-section-cta:hover span,
[dir="rtl"] .pxp-section-cta-o:hover span,
[dir="rtl"] .pxp-posts-card-1-cta > a:hover > span {
    margin-left: 0;
    margin-right: 20px;
}

/* ── Job cards ── */
[dir="rtl"] .pxp-jobs-card-1-category-label {
    padding-left: 0;
    padding-right: 10px;
}
[dir="rtl"] .pxp-jobs-card-1-location > span,
[dir="rtl"] .pxp-jobs-card-2-location > span,
[dir="rtl"] .pxp-jobs-card-3-location > span {
    margin-right: 0;
    margin-left: 7px;
}
[dir="rtl"] .pxp-jobs-card-1-type,
[dir="rtl"] .pxp-jobs-card-2-type,
[dir="rtl"] .pxp-jobs-card-3-type {
    padding-left: 0;
    padding-right: 30px;
}
[dir="rtl"] .pxp-jobs-card-1-bottom-left {
    padding-right: 0;
    padding-left: 30px;
}
[dir="rtl"] .pxp-jobs-card-2-info {
    margin-left: 0;
    margin-right: 20px;
}

/* ── Jobs list page (v2 cards + side filter + pagination) ── */
[dir="rtl"] .pxp-jobs-list-side-filter .form-check-input.me-2 {
    margin-right: 0 !important;
    margin-left: .5rem !important;
}
[dir="rtl"] .pxp-jobs-list-top .form-select {
    background-position: left center;
}
[dir="rtl"] .pxp-pagination .page-item:first-child .page-link {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
[dir="rtl"] .pxp-pagination .page-item:last-child .page-link {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

/* ── App download section (custom, Wazefty) ── */
[dir="rtl"] .pxp-info-fig {
    padding-right: 0;
    padding-left: 200px;
}
[dir="rtl"] .pxp-info-stats {
    right: auto;
    left: 0;
}
[dir="rtl"] .pxp-info-caption-list-item span {
    margin-left: 0;
    margin-right: 20px;
}
[dir="rtl"] .pxp-info-stats-item-number > span {
    margin-left: 0;
    margin-right: 10px;
}
@media screen and (max-width: 1679px) {
    [dir="rtl"] .pxp-info-fig {
        padding-right: 0;
        padding-left: 120px;
    }
}
@media screen and (max-width: 575px) {
    [dir="rtl"] .pxp-info-fig {
        padding-right: 0;
        padding-left: 20px;
    }
    [dir="rtl"] .pxp-info-fig::before {
        left: 0;
        right: 20px;
    }
}

/* ── CMS content page (custom, Wazefty) ── */
[dir="rtl"] .pxp-page-content ul,
[dir="rtl"] .pxp-page-content ol {
    padding-left: 0;
    padding-right: 22px;
}

/* ── Contact page ── */
[dir="rtl"] .pxp-contact-us-form .form-select {
    background-position: left 20px center;
}

/* ── Single job page ── */
[dir="rtl"] .pxp-single-job-cover-logo {
    margin-left: 0;
    margin-right: 60px;
}
[dir="rtl"] .pxp-single-job-cover-logo.pxp-is-center {
    margin-right: auto;
}
[dir="rtl"] .pxp-single-job-category-label {
    padding-left: 0;
    padding-right: 10px;
}
[dir="rtl"] .pxp-single-job-side-company-profile {
    margin-left: 0;
    margin-right: 10px;
}

/* ── Blog list page ──
   Bootstrap's own (non-RTL) input-group CSS hardcodes which physical side
   (left/right) of each child gets its radius zeroed and its -1px overlap
   margin, based on :first-child/:last-child DOM order. Flexbox's `row` axis
   already visually reverses the icon/field order under dir="rtl", but
   Bootstrap's radius/margin rules are physical, not logical, so they end up
   rounding the wrong corners once the order flips. The !important below is
   needed to outrank those Bootstrap rules (they're more specific than a
   plain class selector). */
[dir="rtl"] .pxp-blogs-list-side-panel .input-group .input-group-text {
    padding: 1rem 20px 1rem 2px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
}
[dir="rtl"] .pxp-blogs-list-side-panel .form-control,
[dir="rtl"] .pxp-blogs-list-side-panel .form-select {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
    margin-left: 0 !important;
    margin-right: -1px !important;
}
[dir="rtl"] .pxp-blogs-list-side-panel .form-select {
    background-position: left 20px center;
}
[dir="rtl"] .pxp-blogs-side-tags > a {
    margin-right: 0;
    margin-left: 5px;
}

/* ── Carousel controls (used on the blog hero) ── */
[dir="rtl"] .carousel-control-prev {
    left: auto;
    right: 0;
}
[dir="rtl"] .carousel-control-next {
    right: auto;
    left: 0;
}

/* ── Footer ── */
[dir="rtl"] .pxp-footer-list {
    padding-left: 0;
    padding-right: 0;
}
[dir="rtl"] .pxp-footer-social ul li {
    margin-left: 0;
    margin-right: 34px;
}
[dir="rtl"] .pxp-footer-social ul li:first-child {
    margin-right: 0;
}

/* ── Single job description readability (Arabic) ── */
[dir="rtl"] .pxp-single-job-content-details {
    font-size: 17px;
}
[dir="rtl"] .pxp-single-job-description {
    font-size: 18px;
    line-height: 2.1;
    letter-spacing: 0;
}
[dir="rtl"] .pxp-single-job-content-details li {
    line-height: 2;
}

/* ── Salary dates tool (custom, Wazefty) ──
   The layout itself is built from flex gaps and logical properties, so only the
   Latin-oriented letter spacing needs undoing for Arabic text. */
[dir="rtl"] .pxp-salary-next-label {
    letter-spacing: 0;
}
[dir="rtl"] .pxp-salary-next-name,
[dir="rtl"] .pxp-salary-notes-title,
[dir="rtl"] .pxp-salary-cta-title {
    letter-spacing: 0;
}

/* ── Benefits calculator tool (custom, Wazefty) ── */
[dir="rtl"] .pxp-calc-form .form-select {
    background-position: left 20px center;
}
[dir="rtl"] .pxp-calc-result-label {
    letter-spacing: 0;
}
[dir="rtl"] .pxp-calc-actions .btn span,
[dir="rtl"] .pxp-calc-actions .btn:hover span {
    margin: 0;
}