/* ==========================================================================
   ShakeUp — Arabic RTL Overrides
   Loaded only when app()->getLocale() === 'ar'
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) PHONE NUMBERS
   - Render the digits LTR (so +90 / +966 / numbers read naturally)
   - But keep the field/text aligned to the right side
   -------------------------------------------------------------------------- */

/* Form inputs of type tel + every project-specific country-code / phone class */
[dir="rtl"] input[type="tel"],
[dir="rtl"] .sko-country-code,
[dir="rtl"] .sko-phone-input,
[dir="rtl"] .cin-country-code,
[dir="rtl"] .cin-phone-input,
[dir="rtl"] .pr-country-code,
[dir="rtl"] .pr-phone-input,
[dir="rtl"] .tin-country-code,
[dir="rtl"] .tin-phone-input {
    direction: ltr;
    text-align: right;
    unicode-bidi: plaintext;
}

/* Plain-text phone numbers displayed in footer / contact info cards
   "unicode-bidi: plaintext" lets the browser render the number LTR
   while the surrounding RTL line still flows right-to-left.            */
[dir="rtl"] .footer-contact li,
[dir="rtl"] .contact-info-item .info-main,
[dir="rtl"] .contact-info-item .info-sub {
    unicode-bidi: plaintext;
    text-align: right;
}


/* --------------------------------------------------------------------------
   2) FOOTER LIST ARROWS
   In LTR the chevron '›' sits at the LEFT of each link.
   In RTL it must move to the RIGHT side and point the other way.
   -------------------------------------------------------------------------- */
[dir="rtl"] .footer-list li {
    padding-left: 0;
    padding-right: 15px;
}

[dir="rtl"] .footer-list li::before {
    content: '‹';
    left: auto;
    right: 0;
}


/* --------------------------------------------------------------------------
   3) HOME PAGE — FLAVORS SLIDER
   The slider's track positioning, prev/next buttons, and slide order
   depend on LTR math. Force it to keep its English-language direction
   even when the page is Arabic so navigation arrows and slide flow stay
   consistent.
   -------------------------------------------------------------------------- */
[dir="rtl"] .flavors-slider,
[dir="rtl"] .flavors-slider .flavors-track,
[dir="rtl"] .flavors-slider .flavor-item,
[dir="rtl"] .flavors-slider .flavors-prev,
[dir="rtl"] .flavors-slider .flavors-next,
[dir="rtl"] .flavors-slider .flavors-dots {
    direction: ltr;
}


/* --------------------------------------------------------------------------
   4) SHAKEUP CORNER — SETUP-STATS PADDING
   In LTR the stats column has padding-left to clear the image on its left.
   In RTL the image is on the right, so move the padding to the right side.
   -------------------------------------------------------------------------- */
[dir="rtl"] .setup-stats {
    padding-left: 0;
    padding-right: 20px;
}

@media (max-width: 991px) {
    [dir="rtl"] .setup-stats {
        padding-right: 0;
        padding-top: 20px;
    }
}


/* --------------------------------------------------------------------------
   5) SHAKEUP CORNER — HOW IT WORKS arrows
   In RTL the step flow goes 01 → 02 → 03 from RIGHT to LEFT,
   so the double-chevron between cards must point LEFT.
   -------------------------------------------------------------------------- */
[dir="rtl"] .corner-hiw-arrow i {
    display: inline-block;
    transform: scaleX(-1);
}


/* --------------------------------------------------------------------------
   6) SHAKEUP TRUCK — PROFITS BOX chart icons
   In LTR the decorative chart icons sit at the BOTTOM-RIGHT of the
   profits box. In RTL the text reads right-to-left, so move the icons
   to the BOTTOM-LEFT so they no longer overlap the Arabic copy.
   -------------------------------------------------------------------------- */
[dir="rtl"] .profit-chart {
    right: auto;
    left: 15px;
}


/* --------------------------------------------------------------------------
   7) ABOUT PAGE — STATS / COUNTER ROW
   In LTR the .stat-number and .stat-label are forced to text-align: left
   so they sit next to the icon (which is on the left).
   In RTL the icon flips to the right via flex, so the text should hug
   the right edge to look properly aligned in Arabic.
   -------------------------------------------------------------------------- */
[dir="rtl"] .about-stats .stat-number,
[dir="rtl"] .about-stats .stat-label {
    text-align: right;
}


/* --------------------------------------------------------------------------
   8) CONTACT HERO — feature items
   In LTR these are forced to text-align: left so they sit beside the icon
   on the left of each row. In RTL the icon flips to the right side, so
   the label text should hug the right edge.
   -------------------------------------------------------------------------- */
[dir="rtl"] .contact-hero .feature-item,
[dir="rtl"] .contact-hero .feature-item span {
    text-align: right;
}

[dir="rtl"] .contact-hero .feature-item {
    align-items: flex-end;
}

/* Allow the hero description to occupy the full column width (mirrored). */
[dir="rtl"] .contact-hero-desc {
    margin-left: auto;
    margin-right: 0;
}


/* --------------------------------------------------------------------------
   9) THANK-YOU PAGE — "WHAT HAPPENS NEXT?" divider
   In LTR the title sits on the left with a vertical divider on its right
   (border-right) separating it from the steps. In RTL the title flips to
   the right, so the divider must move to the title's LEFT side.
   -------------------------------------------------------------------------- */
[dir="rtl"] .whn-title {
    padding-right: 0;
    padding-left: 15px;
    border-right: none;
    border-left: 1px solid rgba(184, 215, 74, 0.2);
}


/* --------------------------------------------------------------------------
   10) BOOTSTRAP BREADCRUMB IN RTL
   Bootstrap's default LTR breadcrumb uses padding-left + float:left on the
   "::before" separator, which positions the chevron on the WRONG side in
   RTL (and makes items visually run together). Mirror those properties.
   Affects: thank-you, sample-kit-order, corner-inquery, package-request,
            truck-inquery.
   -------------------------------------------------------------------------- */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-right: 0.5rem;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    float: none;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    padding-right: 0;
    padding-left: 0.5rem;
    content: '›';
}