/*
 * OT-14336 - RTL (right-to-left) corrections for the Arabic C&C web flow.
 *
 * Loaded from Views/Nxg/Shared/Head.cshtml, and ONLY for the five Arabic Five Guys C&C
 * themes - FiveGuysKSA, FiveGuysUAE, FiveGuysBH, FiveGuysQA, FiveGuysKW - and only when
 * the working language is right-to-left. Both halves of that gate are load-bearing: the
 * themes also serve English, and SupportRTL on its own is far too broad (nearly every
 * theme.json declares it, and the parentless themes resolve the same view). Nothing here
 * can reach an LTR page either: every selector is scoped to [dir="rtl"], which
 * _Root.Head.cshtml only ever emits for an RTL culture.
 *
 * The registration uses AddCssFileParts so this sheet renders LAST, after
 * ~/css/nxg.css, ~/css/styles.css, Bootstrap and the per-theme theme.css - all of which
 * hard-code physical left/right values. (AppendCssFileParts would have been wrong: it
 * does _cssParts.Insert(0, ...), i.e. it prepends.) The [dir="rtl"] prefix additionally
 * raises specificity by one attribute selector over whatever it overrides, so these rules
 * also beat the in-view <style> blocks rendered later in the body (e.g. the .checkmark
 * override inside _ProductAttributesCheckboxLayout.cshtml).
 *
 * Where an arrow or icon only needs mirroring, prefer transform: scaleX(-1) over
 * restating the border shorthand - the themes recolour those borders individually
 * (BaseFiveGuysINT uses --tertiary-color, the Arabic themes --secondary-color) and
 * restating them here would silently repaint the arrow in the wrong colour.
 */

/* ---------------------------------------------------------------------------
 * 1. Page baseline
 *
 * Two separate rules defeat the browser's dir="rtl" default, and both have to go:
 *
 *   - Bootstrap's reboot sets "body { text-align: left; }", and Bootstrap.css is
 *     appended AFTER nxg.css and styles.css, so it wins everywhere. This is the one
 *     that matters on the pages with no ".page" wrapper - the product detail template
 *     lays out straight into .master-wrapper-content, which is why its description and
 *     allergen link stayed left-aligned after the first pass.
 *   - ".page { text-align: left; }", declared in BOTH nxg.css and styles.css, on the
 *     pages that do have the wrapper.
 *
 * Between them these cover every element that carries no alignment rule of its own:
 * the checkout sign-in/register line, the privacy policy block, the product
 * description, form inputs and their placeholders.
 * ------------------------------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] .page {
  text-align: right;
}

/* Bootstrap 4 offsets are margin-left, so they push a column the wrong way in RTL.
   Only these two are used in the Nxg views. Without the flip, #groupOrdering (which is
   .col-10.offset-2, pulled up 25px by nxg.css) lands on top of the menu back link. */
[dir="rtl"] .offset-2 {
  margin-left: 0;
  margin-right: 16.666667%;
}

@media (min-width: 992px) {
  [dir="rtl"] .offset-lg-9 {
    margin-left: 0;
    margin-right: 75%;
  }
}

/* Bootstrap's physical alignment/float helpers are used directly in the Razor views. */
[dir="rtl"] .text-left {
  text-align: right !important;
}

[dir="rtl"] .text-right {
  text-align: left !important;
}

[dir="rtl"] .float-left {
  float: right !important;
}

[dir="rtl"] .float-right {
  float: left !important;
}

/* ---------------------------------------------------------------------------
 * 2. Back links - timeslot, menu, product, basket and checkout screens
 *
 * Three separate class names are in play: .back-to-locations (timeslot),
 * .back_manu (menu + product) and .back-to-menu (checkout/account).
 * ------------------------------------------------------------------------- */

/* The ::before triangle is drawn with a physical border-right, i.e. it points left.
   Mirror it instead of redeclaring the border so each theme keeps its own colour. */
[dir="rtl"] .back-to-locations::before,
[dir="rtl"] .back-to-menu::before,
[dir="rtl"] .back_manu::before {
  transform: scaleX(-1);
  margin-right: 0;
  margin-left: 3px;
}

[dir="rtl"] .back-to-locations a,
[dir="rtl"] .back_manu,
[dir="rtl"] .back-to-menu a,
[dir="rtl"] .back_manu:hover,
[dir="rtl"] .back-to-menu a:hover {
  padding-left: 0;
  padding-right: 3px;
}

/* .back-to-locations is absolutely positioned against .collect-your-order. */
[dir="rtl"] .back-to-locations {
  left: auto;
  right: 30px;
}

[dir="rtl"] .back-to-menu {
  margin: 0 15px 15px 0;
}

[dir="rtl"] .modal .back-to-menu {
  left: auto;
  right: 0;
}

/* Mirror of the breakpoint-specific offsets in nxg.css. */
@media (max-width: 767px) {
  [dir="rtl"] .lets_started.card-details .back-to-locations {
    left: auto;
    right: 20px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  [dir="rtl"] .lets_started.card-details .back-to-locations {
    left: auto;
    right: 110px;
  }
}

/* ---------------------------------------------------------------------------
 * 3. Landing page and store finder
 *
 * The "nearest restaurants" count is .location_title.location_subtitle; both carry
 * an explicit text-align: left in every Arabic theme.css. Store name (h3), address
 * (.location_text), distance (.location_distance) and opening times (.time) sit in
 * a flex card whose children are individually aligned.
 * ------------------------------------------------------------------------- */
[dir="rtl"] .home-page .lets_started .search_wrap .search_title,
[dir="rtl"] .map_locations .left_locations .location_title,
[dir="rtl"] .map_locations .left_locations .location_subtitle {
  text-align: right;
}

/* Store name / address / distance stay right-aligned even when the underlying store
   record is still in Latin script (AC: "if English is retained, alignment is from the
   right"). Only the alignment is flipped, not the text direction - forcing
   direction: rtl on a Latin string would move its trailing punctuation to the front. */
[dir="rtl"] .map_locations .left_locations h3,
[dir="rtl"] .map_locations .left_locations .location_text,
[dir="rtl"] .map_locations .left_locations .location_text a {
  text-align: right;
}

[dir="rtl"] .map_locations .left_locations .location_distance {
  text-align: left;
}

[dir="rtl"] .map_locations .left_locations .time {
  float: right;
}

[dir="rtl"] .map_locations .left_locations .more_info {
  float: left;
}

/* .open_time uses the mr-3 utility to space the two time chips apart. */
[dir="rtl"] .map_locations .left_locations .open_time .time.mr-3 {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}

[dir="rtl"] .map_locations .map_section .map-search-box .use_location_btn {
  right: auto;
  left: 0;
}

[dir="rtl"] .map_locations .map_section .map_search-location {
  right: auto;
  left: 45px;
}

/* The search field and its button form a single joined control; the button's
   rounded corners are declared physically in the Arabic themes. */
[dir="rtl"] .map_locations .left_locations .btn.js-nxg-ac-btn {
  border-radius: 4px 0 0 4px;
}

[dir="rtl"] .map_locations .map_section .map-search-box .find-form-group input {
  border-radius: 0 calc(var(--border-radius) / 3) calc(var(--border-radius) / 3) 0;
}

/* ---------------------------------------------------------------------------
 * 4. Timeslot selection
 *
 * The collection-time disclaimer is .note (rendered by _Note.cshtml). The day/time
 * selects draw their own chevron with an absolute "right", which has to move too -
 * nxg.css sets select { appearance: none } globally, so this triangle is the only
 * chevron those controls have.
 * ------------------------------------------------------------------------- */
[dir="rtl"] .note {
  text-align: right;
}

[dir="rtl"] .form-group.select::before {
  right: auto;
  left: 30px;
}

/* ---------------------------------------------------------------------------
 * 5. Menu page - category header, product cards, descriptions
 * ------------------------------------------------------------------------- */
[dir="rtl"] .main-title,
[dir="rtl"] .listing-description,
[dir="rtl"] .product-list-content .listing-description div,
[dir="rtl"] .product-list-content .listing-description p {
  text-align: right;
}

[dir="rtl"] .main-title img {
  margin-left: 0;
  margin-right: 4px;
}

[dir="rtl"] .product-list-content .product-list .items-box {
  float: right;
}

[dir="rtl"] .product-list-content .product-list .items-box .picture {
  float: left;
}

[dir="rtl"] .product-list-content .items-box .details {
  padding: 15px 15px 15px 0;
}

[dir="rtl"] .product-list-content .items-box .product-info,
[dir="rtl"] .product-list-content .items-box:hover .product-info {
  left: auto;
  right: 15px;
}

/* The in-cart quantity badge occupies the card's other bottom corner, so it has to swap
   sides along with the product-info link above - otherwise both land on the right and the
   badge sits on top of the link. All five Arabic themes pin it to "right: 10px; bottom:
   10px" (nxg.css alone would be right: 0), so mirror that offset. The 30px of padding on
   .qty-item is the space reserved for the badge and moves with it. */
[dir="rtl"] .qty-item .count {
  right: auto;
  left: 10px;
}

[dir="rtl"] .qty-item {
  padding: 0 6px 0 30px;
}

[dir="rtl"] .product-list-content .product-title,
[dir="rtl"] .product-list-content .product-title a {
  padding-right: 0;
  padding-left: 10px;
  text-align: right;
}

/* The price ribbon is absolutely pinned to the card's right edge, which is exactly where
   the right-aligned product name now ends - they collided. Move it to the left edge.
   Its shape comes from price-label.svg, a rectangle with a chevron notched into its LEFT
   side, and a background-image cannot be mirrored; redraw the mirrored shape with
   clip-path instead. --primary-color is #D21033 in all five Arabic themes, the same
   colour the SVG hard-codes, so the ribbon keeps its appearance. */
[dir="rtl"] .product-list .items-box .price.actual-price,
[dir="rtl"] .cross-sells .item-box .price.actual-price {
  right: auto;
  left: -4px;
  padding: 5px 10px 5px 5px;
  background-image: none;
  background-color: var(--primary-color);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%);
}

/* ---------------------------------------------------------------------------
 * 6. Product page - modifier groups, the required asterisk, modifier options
 * ------------------------------------------------------------------------- */
[dir="rtl"] .crepe_options_part h4,
[dir="rtl"] .attribute-description,
[dir="rtl"] .content h2 {
  text-align: right;
}

/* "*" is a bidi-neutral character, so it renders to the left of an Arabic label and
   the markup's literal space collapses on the wrong side of it. margin-inline-start
   puts the gap back on the side that faces the label in either direction. */
[dir="rtl"] .crepe_options_part h4 .required,
[dir="rtl"] span.required {
  display: inline-block;
  margin-inline-start: 4px;
  margin-inline-end: 0;
}

/* Modifier rows: the tick box and the radio dot stay pinned to the right, where the
   LTR design already puts them (in-view <style> blocks in _ProductAttributesCheckboxLayout
   and _ProductAttributesRadioLayout set "right: 0" on .checkmark and on the radio's
   ::before). Mirroring them to the left was wrong - confirmed against the running app.
   What has to change is the label, which has no padding at all in this layout: once the
   text right-aligns it runs straight under the control. Reserve the space on the right.
   [dir] + three classes outranks the in-view blocks, which are plain class selectors. */
[dir="rtl"] .check_redio label.form-check-label.checkbox,
[dir="rtl"] .check_redio .form-check.radio-attr .form-check-label {
  padding-right: 30px;
  padding-left: 0;
}

[dir="rtl"] .check_redio,
[dir="rtl"] .check_redio p,
[dir="rtl"] .check_redio .form-check-label {
  text-align: right;
}

[dir="rtl"] img.modifier-picture {
  float: right;
  margin-right: 0;
  margin-left: 10px;
}

/* Product detail two-column layout. */
[dir="rtl"] .content div,
[dir="rtl"] .content-info .pro-images,
[dir="rtl"] .content-info .pro-content,
[dir="rtl"] .prices p,
[dir="rtl"] .prices form {
  float: right;
}

[dir="rtl"] .product-price {
  float: left;
}

/* ---------------------------------------------------------------------------
 * 7. Modifier action popup and the generic modal chrome
 * ------------------------------------------------------------------------- */
[dir="rtl"] .modal-body,
[dir="rtl"] .modal-footer p,
[dir="rtl"] #showGuests.createGroupOrder .search_box.not_found .main_title {
  text-align: right;
}

[dir="rtl"] .modal-header .close,
[dir="rtl"] #ReviewOrder .close {
  float: left;
  margin: -1rem auto -1rem -1rem;
}

/* ---------------------------------------------------------------------------
 * 8. Basket / order review - collection location and time summary
 * ------------------------------------------------------------------------- */
[dir="rtl"] .collection-header h6 {
  margin-left: 0;
  margin-right: 12px;
  text-align: right;
}

[dir="rtl"] .change {
  margin-left: 0;
  margin-right: 12px;
}

[dir="rtl"] .collection-header .fulfilment > div {
  text-align: right;
  margin-right: 8px;
}

[dir="rtl"] .qty-plus-minus .input-group {
  float: right;
}

[dir="rtl"] .delete-edit-item {
  float: left;
  margin-left: 0;
  margin-right: 7px;
}

[dir="rtl"] .review-btn .btn {
  text-align: right;
}

[dir="rtl"] .review-btn .btn span {
  float: left;
}

/* Order totals. styles.css gives each cell width: 50% with the label cell left-aligned
   and the value cell right-aligned - at the outer edges in LTR. In RTL the two cells
   swap sides, so those alignments point the pair at each other and "Tax:" ends up glued
   to "£0.00" in the middle of the card. Swap them back to the outer edges. */
[dir="rtl"] .cart-total td {
  text-align: left;
}

[dir="rtl"] .cart-total td:first-child {
  text-align: right;
}

/* The allergen disclaimer is a flex row whose ::before draws the info icon; RTL already
   puts the icon on the right, but the base rule gives it width only, no gap. */
[dir="rtl"] .order-allergies-notes::before,
[dir="rtl"] .group-order-before-info::before {
  margin-left: 8px;
}

[dir="rtl"] .item-list-dic,
[dir="rtl"] p.empty-text,
[dir="rtl"] .product-quantity-text,
[dir="rtl"] .order-details-title {
  text-align: right;
}

@media (max-width: 767px) {
  [dir="rtl"] .review-order-mob-btn,
  [dir="rtl"] .review-order-mob-btn:hover,
  [dir="rtl"] .review-order-mob-btn:focus {
    text-align: right;
  }

  [dir="rtl"] .review-order-mob-btn .count {
    float: right;
  }

  [dir="rtl"] .review-order-mob-btn .price {
    float: left;
  }
}

/* ---------------------------------------------------------------------------
 * 9. Guest checkout / personal details
 *
 * .checkout-sub-title carries the sign-in / register links and .dic the privacy
 * policy block; neither declares its own alignment, so both are already corrected
 * by the .page rule in section 1. What is left is the checkbox chrome, which is
 * pinned with a physical left, and the cross-sell panel.
 * ------------------------------------------------------------------------- */
[dir="rtl"] .checkout-page-form .form-check {
  padding-left: 0;
  padding-right: 0;
}

[dir="rtl"] .checkout-page-form .form-check-label .checkmark,
[dir="rtl"] .form-check-label .checkmark {
  left: auto;
  right: 0;
}

/* The tick box moves to the right, so the label's reserved space has to move with it.
   Two separate base rules set it: ".form-check .form-check-label { padding-left: 30px }"
   for the register/account forms and a 35px !important for the checkout form - which is
   why the register-page checkboxes sat on top of their labels after the first pass. */
[dir="rtl"] .form-check .form-check-label {
  padding-left: 0;
  padding-right: 30px;
  text-align: right;
}

[dir="rtl"] .checkout-page-form .form-check-label {
  padding-left: 0 !important;
  padding-right: 35px !important;
  text-align: right;
}

[dir="rtl"] .checkout-page .delete-button,
[dir="rtl"] a.remove-card {
  float: left;
}

[dir="rtl"] .checkout-page .payment-info .info td:first-child {
  text-align: right;
}

[dir="rtl"] .discount-code .form-group {
  float: right;
}

[dir="rtl"] .cross-sells .title,
[dir="rtl"] .cross-sells .details,
[dir="rtl"] .cross-sells .product-title,
[dir="rtl"] .cross-sells .product-title a {
  text-align: right;
}

/* ---------------------------------------------------------------------------
 * 10. Confirmation, account and error surfaces
 * ------------------------------------------------------------------------- */
[dir="rtl"] .order-confirmation-details,
[dir="rtl"] .order-confirmation .card,
[dir="rtl"] .order-confirmation h4,
[dir="rtl"] .order-confirmation p,
[dir="rtl"] .account-order-preview .order-number-account,
[dir="rtl"] .login-page-form-title,
[dir="rtl"] .group-join-page .form-fields,
[dir="rtl"] .warning,
[dir="rtl"] .message-error,
[dir="rtl"] .field-validation-error,
[dir="rtl"] .username-not-available-status,
[dir="rtl"] .poll-vote-error,
[dir="rtl"] .password-error {
  text-align: right;
}

[dir="rtl"] .account-order-preview .order-number a {
  float: left;
}

[dir="rtl"] .order-details-account-page .back-to-menu {
  text-align: right;
}

/* ---------------------------------------------------------------------------
 * 11. Header, navigation and footer
 * ------------------------------------------------------------------------- */
[dir="rtl"] .header-links li {
  text-align: right;
}

[dir="rtl"] .footer_nav_bar li,
[dir="rtl"] .following-items ul li,
[dir="rtl"] .visa_card,
[dir="rtl"] .master_card,
[dir="rtl"] .american_express_card,
[dir="rtl"] .tab button,
[dir="rtl"] .tab button span {
  float: right;
}

[dir="rtl"] .align-right {
  float: left;
}