/* ════════════════════════════════════════════════════════════════════════════
   TWIZA Clair — ARABIC (RTL) LAYER
   ────────────────────────────────────────────────────────────────────────────
   PrestaShop registers `/assets/css/rtl.css` by itself, and ONLY when the
   language is RTL (FrontController::setMedia, priority 900). The file therefore
   loads after every other stylesheet and never reaches the French pages — no
   `body.lang-rtl` prefix is needed here, and nothing in it can regress FR.

   WHY IT EXISTS. classic's grid is the FLOAT-based Bootstrap 4 alpha grid:
   every `.col-*` is `float:left`. `direction:rtl` mirrors text and inline flow
   but it does NOT mirror a float. So before this file, every two-column page
   kept its French column order in Arabic — the contact sidebar stayed left, the
   cart summary stayed right, form labels sat to the LEFT of their fields, the
   category facets stayed left. Same story for the physical `left`/`right`/
   `margin-left` declarations scattered through classic and the modules.

   The theme's OWN components are not fixed here: `twiza.4.css` uses logical
   properties (`inset-inline-start`, `margin-inline-end`, …) so they mirror on
   their own. Only third-party CSS we do not control is patched below.

   Ordered the same way a page is built: grid → layout → forms → catalog →
   cart/checkout → modules.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · GRID ───────────────────────────────────────────────────────────────
   Flip the float per breakpoint, mirroring how classic declares it: `.col-xs-*`
   is floated at every width, the others only inside their own media query. A
   blanket `float:right` would float columns at widths where classic leaves them
   as blocks, which changes how they clear. */
.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: right; }

@media (min-width: 576px) {
  .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
  .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: right; }
}
@media (min-width: 768px) {
  .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: right; }
}
@media (min-width: 992px) {
  .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
  .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: right; }
}
@media (min-width: 1200px) {
  .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
  .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { float: right; }
}

/* offsets push a column away from the inline start, so they move to the right */
.offset-xs-1  { margin-left: 0; margin-right: 8.33333%; }
.offset-xs-2  { margin-left: 0; margin-right: 16.66667%; }
.offset-xs-3  { margin-left: 0; margin-right: 25%; }
.offset-xs-4  { margin-left: 0; margin-right: 33.33333%; }
.offset-xs-5  { margin-left: 0; margin-right: 41.66667%; }
.offset-xs-6  { margin-left: 0; margin-right: 50%; }
.offset-xs-7  { margin-left: 0; margin-right: 58.33333%; }
.offset-xs-8  { margin-left: 0; margin-right: 66.66667%; }
.offset-xs-9  { margin-left: 0; margin-right: 75%; }
.offset-xs-10 { margin-left: 0; margin-right: 83.33333%; }
.offset-xs-11 { margin-left: 0; margin-right: 91.66667%; }
@media (min-width: 576px) {
  .offset-sm-0 { margin-left: 0; margin-right: 0; }
  .offset-sm-1  { margin-left: 0; margin-right: 8.33333%; }
  .offset-sm-2  { margin-left: 0; margin-right: 16.66667%; }
  .offset-sm-3  { margin-left: 0; margin-right: 25%; }
  .offset-sm-4  { margin-left: 0; margin-right: 33.33333%; }
  .offset-sm-5  { margin-left: 0; margin-right: 41.66667%; }
  .offset-sm-6  { margin-left: 0; margin-right: 50%; }
  .offset-sm-7  { margin-left: 0; margin-right: 58.33333%; }
  .offset-sm-8  { margin-left: 0; margin-right: 66.66667%; }
  .offset-sm-9  { margin-left: 0; margin-right: 75%; }
  .offset-sm-10 { margin-left: 0; margin-right: 83.33333%; }
  .offset-sm-11 { margin-left: 0; margin-right: 91.66667%; }
}
@media (min-width: 768px) {
  .offset-md-0 { margin-left: 0; margin-right: 0; }
  .offset-md-1  { margin-left: 0; margin-right: 8.33333%; }
  .offset-md-2  { margin-left: 0; margin-right: 16.66667%; }
  .offset-md-3  { margin-left: 0; margin-right: 25%; }
  .offset-md-4  { margin-left: 0; margin-right: 33.33333%; }
  .offset-md-5  { margin-left: 0; margin-right: 41.66667%; }
  .offset-md-6  { margin-left: 0; margin-right: 50%; }
  .offset-md-7  { margin-left: 0; margin-right: 58.33333%; }
  .offset-md-8  { margin-left: 0; margin-right: 66.66667%; }
  .offset-md-9  { margin-left: 0; margin-right: 75%; }
  .offset-md-10 { margin-left: 0; margin-right: 83.33333%; }
  .offset-md-11 { margin-left: 0; margin-right: 91.66667%; }
}
@media (min-width: 992px) {
  .offset-lg-0 { margin-left: 0; margin-right: 0; }
  .offset-lg-1  { margin-left: 0; margin-right: 8.33333%; }
  .offset-lg-2  { margin-left: 0; margin-right: 16.66667%; }
  .offset-lg-3  { margin-left: 0; margin-right: 25%; }
  .offset-lg-4  { margin-left: 0; margin-right: 33.33333%; }
  .offset-lg-5  { margin-left: 0; margin-right: 41.66667%; }
  .offset-lg-6  { margin-left: 0; margin-right: 50%; }
  .offset-lg-7  { margin-left: 0; margin-right: 58.33333%; }
  .offset-lg-8  { margin-left: 0; margin-right: 66.66667%; }
  .offset-lg-9  { margin-left: 0; margin-right: 75%; }
  .offset-lg-10 { margin-left: 0; margin-right: 83.33333%; }
  .offset-lg-11 { margin-left: 0; margin-right: 91.66667%; }
}
@media (min-width: 1200px) {
  .offset-xl-0 { margin-left: 0; margin-right: 0; }
  .offset-xl-1  { margin-left: 0; margin-right: 8.33333%; }
  .offset-xl-2  { margin-left: 0; margin-right: 16.66667%; }
  .offset-xl-3  { margin-left: 0; margin-right: 25%; }
  .offset-xl-4  { margin-left: 0; margin-right: 33.33333%; }
  .offset-xl-5  { margin-left: 0; margin-right: 41.66667%; }
  .offset-xl-6  { margin-left: 0; margin-right: 50%; }
  .offset-xl-7  { margin-left: 0; margin-right: 58.33333%; }
  .offset-xl-8  { margin-left: 0; margin-right: 66.66667%; }
  .offset-xl-9  { margin-left: 0; margin-right: 75%; }
  .offset-xl-10 { margin-left: 0; margin-right: 83.33333%; }
  .offset-xl-11 { margin-left: 0; margin-right: 91.66667%; }
}

/* utility classes carry an explicit side, so they mirror too */
.float-xs-left  { float: right !important; }
.float-xs-right { float: left !important; }
@media (min-width: 576px)  { .float-sm-left { float: right !important; } .float-sm-right { float: left !important; } }
@media (min-width: 768px)  { .float-md-left { float: right !important; } .float-md-right { float: left !important; } }
@media (min-width: 992px)  { .float-lg-left { float: right !important; } .float-lg-right { float: left !important; } }
@media (min-width: 1200px) { .float-xl-left { float: right !important; } .float-xl-right { float: left !important; } }
.text-xs-left  { text-align: right !important; }
.text-xs-right { text-align: left !important; }
@media (min-width: 576px)  { .text-sm-left { text-align: right !important; } .text-sm-right { text-align: left !important; } }
@media (min-width: 768px)  { .text-md-left { text-align: right !important; } .text-md-right { text-align: left !important; } }
@media (min-width: 992px)  { .text-lg-left { text-align: right !important; } .text-lg-right { text-align: left !important; } }
@media (min-width: 1200px) { .text-xl-left { text-align: right !important; } .text-xl-right { text-align: left !important; } }

/* ── 2 · FORMS ──────────────────────────────────────────────────────────────
   classic right-aligns every label so it hugs the field on its right. With the
   columns mirrored the field is now on the label's LEFT, so the label has to
   hug the other way. */
.label, label { text-align: left; }
/* …except labels that sit beside their own control (checkboxes, facets, the
   quick-order form), which read from the right like the rest of the sentence. */
#search_filters .facet .facet-label,
.custom-checkbox label,
.qo-f label,
.facet-label { text-align: right; }

/* the native <select> chevron is a background image pinned to the right, with no
   padding reserved for it on the other side — in Arabic the text ran straight
   underneath it */
.form-control-select {
  background-position: left 0.5rem center;
  padding-right: 0.5rem;
  padding-left: 2rem;
}

/* checkbox / radio: classic pins the marker with `position:absolute; left:0` and
   reserves room for it with `padding-left` on the label. Both move to the other
   edge, otherwise the box sits at the far end of the line it belongs to. */
.custom-checkbox input[type="checkbox"] + span { margin-right: 0; margin-left: 0.5rem; }
.custom-checkbox input[type="checkbox"] + span .checkbox-checked { margin-right: -0.125rem; margin-left: -0.125rem; }
.custom-checkbox span { left: auto; right: 0; }
/* classic reserves the marker's width with two competing padding rules whose
   winner depends on the breakpoint; one unconditional value keeps the gap the
   same everywhere rather than mirroring both and inheriting the fight. */
.custom-checkbox > label,
.custom-checkbox label { padding-left: 0; padding-right: 1.5rem; }
.custom-radio { margin-right: 0; margin-left: 0.5rem; }
.custom-radio input[type="radio"]:checked + span { left: auto; right: 0.125rem; }

/* checkout form labels are explicitly left-aligned by classic; mirrored they
   have to hug the other edge */
body#checkout > label,
body#checkout #delivery > label,
body#checkout section.checkout-step #customer-form .form-control-label,
body#checkout section.checkout-step #delivery-address .form-control-label,
body#checkout section.checkout-step #invoice-address .form-control-label,
body#checkout section.checkout-step #login-form .form-control-label { text-align: right; }

/* Field hints and consent lines mix Arabic and untranslated core English. With
   `plaintext` each one takes the direction of its own first strong character,
   so an English sentence stops being reordered into « .are allowed ». */
.form-control-comment,
.custom-checkbox label,
#conditions-to-approve label { unicode-bidi: plaintext; }

/* input groups: the appended button belongs on the inline end, which is now the
   left, and its 1px overlap has to move with it */
.input-group .form-control { float: right; }
.input-group-btn:not(:first-child) > .btn,
.input-group-btn:not(:first-child) > .btn-group { margin-left: 0; margin-right: -1px; }
.input-group .input-group-btn > .btn[data-action="show-password"] { border-radius: 4px 0 0 4px; }

/* quantity spinner (product page) */
.bootstrap-touchspin,
.bootstrap-touchspin input.form-control,
.bootstrap-touchspin input.input-group,
.bootstrap-touchspin .input-group-btn-vertical { float: right; }
.bootstrap-touchspin .input-group-btn-vertical > .btn { margin-left: 0; margin-right: -1px; }
.bootstrap-touchspin .input-group-btn-vertical i { left: auto; right: 0.1875rem; }

/* ── 3 · HEADER / NAV / MISC CHROME ─────────────────────────────────────────*/
.block_newsletter form button[type="submit"],
.search-widget form button[type="submit"] { right: auto; left: 0.125rem; }
@media only screen and (min-width: 768px) { #search_widget { float: left; } }
#search_widget form input { padding-right: 40px; padding-left: 20px; }
.dropdown-menu { float: right; text-align: right; }
.close { float: left; }
.block-social { text-align: left; }
.breadcrumb-item { float: right; }
.pagination .previous { float: right; }
.pagination .next { float: left; }
.nav-tabs .nav-item,
.tabs .nav-tabs .nav-item,
.nav-pills .nav-item,
.navbar-nav .nav-item,
.btn-group > .btn,
.page-link,
.top-menu .sub-menu ul[data-depth="1"] > li { float: right; }
.btn-primary .material-icons,
.btn-secondary .material-icons,
.btn-tertiary .material-icons { margin-right: 0; margin-left: 0.625rem; }

/* ── 4 · CATALOG ────────────────────────────────────────────────────────────
   The promo-flag corner is handled in twiza.4.css with `inset-inline-start`, so
   it mirrors on its own — blockwishlist already ships its own RTL rule moving
   the heart to the left, and the two no longer share a corner. */
.images-container .product-images > li.thumb-container .thumb { margin-right: 0; margin-left: 0.8125rem; }
.has-discount .discount { margin-left: 0; margin-right: 0.625rem; }
.social-sharing li { margin-left: 0; margin-right: 0.5rem; }
#subcategories ul { margin-left: 0; margin-right: -10px; }
@media (min-width: 992px) {
  #product-modal .modal-content .modal-body { margin-left: 0; margin-right: -35%; }
  #product-modal .modal-content .modal-body .product-images { margin-left: 0; margin-right: 2.5rem; }
}

/* Facets: the price range is a jQuery UI slider that positions its handles with
   a physical `left:%` from JS, so it cannot be mirrored in CSS — the handles
   ended up outside the sidebar and on top of each other. A numeric range reads
   low→high left→right in Arabic too, so the widget itself stays LTR while its
   labels around it keep the page direction. */
#search_filters .ui-slider,
#search_filters .ui-slider-horizontal { direction: ltr; }

/* ── 5 · CART & CHECKOUT ────────────────────────────────────────────────────*/
.cart-summary-line .value { float: left; }
.card-block.cart-summary-totals .cart-summary-line span.sub { text-align: right; }
/* « الاستمرار في التسوق » points back to the shop, and back is the other way
   round here — the chevron is a direction cue, not an icon. */
.cart-grid-body a.label > .material-icons { transform: scaleX(-1); }
/* the tick that opens the dialog title carries `.rtl-no-flip`, i.e. its own
   `direction:ltr`, so no logical property can move its gap — flip it here. */
#blockcart-modal .modal-title i.material-icons { margin-right: 0; margin-left: 8px; }
/* the « ajouté au panier » dialog: classic insets the totals column away from
   the divider with padding-left, so in Arabic the gutter opened on the outer
   edge and the totals sat against the rule. */
@media (min-width: 768px) {
  #blockcart-modal .cart-content { padding-left: 0; padding-right: 2.5rem; }
}

/* ── 6 · MODULES ────────────────────────────────────────────────────────────*/
/* contact block — the icon leads the line, so it belongs on the right */
.contact-rich .block .icon { float: right; }
/* « +212 666-706674 » is three weak/neutral bidi runs and no strong character,
   so the paragraph direction reorders them into « 666-706674 212+ ». Isolating
   the link as its own LTR paragraph prints the number as written. */
a[href^="tel:"],
a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }
@media (max-width: 991px) { .block-contact { padding-left: 0; padding-right: 1.5rem; } }

/* blockreassurance */
.blockreassurance_product .item-product { float: right; margin-right: 0; margin-left: 5px; }

/* productcomments */
.product-comment-list-item { text-align: right; }
#ratingNotChosen { text-align: left; }
.product-list-reviews .comments-nb,
.star-content { margin-left: 0; margin-right: 5px; }
.star-content div.star,
.star-content div.star-on,
.star-content div.star-hover { margin-left: 0; margin-right: 3px; }
#product-comments-list-header .comments-nb .material-icons { margin-right: 0; margin-left: 3px; }
.product-comment-modal .modal-header .h2 { float: right; }
.product-comment-modal .post-comment-buttons .btn-comment { margin-left: 0; margin-right: 15px; }
.product-comment-modal .required { margin-left: 0; margin-right: 5px; }

/* landingpagecod — sticky order button follows the inline end */
#lp-sticky-cta { right: auto; left: 24px; }
@media (max-width: 767px) { #lp-sticky-cta { right: auto; left: 16px; } }

/* ── 7 · FIGURES ────────────────────────────────────────────────────────────
   A statistic like « +5 000 » is not one bidi run: the thousands space is a
   neutral, so the paragraph direction splits the figure and lays the groups
   out right-to-left — « +5 000 » printed « 000 5+ », « +20 000 » printed
   « 000 20+ ». Every four- and five-digit figure on « Notre modèle » read
   backwards. The sign has the same problem from the other end: it detaches
   and lands on the far side of the digits.
   Isolating each figure as its own paragraph prints it exactly as it is
   written, whatever a back-office editor types into the field — the same
   remedy the tel:/mailto: links above needed, and for the same reason.
   `plaintext`, not `isolate`: one of these fields is not always a number —
   an Artisans stat reads « أثر », a word — and plaintext takes the direction
   from the first strong character, so a figure that IS text stays RTL while a
   bare « +12 000 », which has no strong character at all, falls back to the
   `direction` below and prints left to right. One rule, both shapes.
   The figure and its unit (« +150 مليون درهم ») are separate elements for the
   same reason: only the number is isolated, so the unit keeps its place after
   it in the Arabic reading order instead of being dragged in front of it. */
.stat__n,
.hero__trust .t b,
.ustat__n,
.mstat__n,
.mfigures__v,
.mpanel__row strong,
.cl-stat > b,
.txstat__n { direction: ltr; unicode-bidi: plaintext; }
/* these three inherit `text-align:start`, which follows the element's OWN
   direction — left, now that the box is LTR. Their boxes are wider than the
   figure (they are as wide as the label beneath), so the figure would drift
   off the page edge and stop lining up with its own label. Pin it back. */
.mstat__n,
.mpanel__row strong,
.txstat__n { text-align: right; }