/**
 * Client-portal RTL layer (Arabic).
 * Loaded only when locale_dir() === rtl.
 */

html[dir="rtl"] body,
html[dir="rtl"] {
  font-family: "IBM Plex Sans Arabic", Arial, Helvetica, sans-serif;
}

/*
 * Shell columns stay LTR (nav left, cart right) — same chrome as EN.
 * Arabic text still flows RTL inside each column.
 */
html[dir="rtl"] .container-fluid > .row.h-100,
html[dir="rtl"] .container-fluid.d-flex > .row {
  direction: ltr;
}

html[dir="rtl"] .container-fluid > .row.h-100 > .navInnerWrapper,
html[dir="rtl"] .container-fluid > .row.h-100 > .orderListWrapper,
html[dir="rtl"] .container-fluid > .row.h-100 > [class*="col-"],
html[dir="rtl"] .container-fluid.d-flex > .row > .navInnerWrapper,
html[dir="rtl"] .container-fluid.d-flex > .row > .orderListWrapper,
html[dir="rtl"] .container-fluid.d-flex > .row > [class*="col-"] {
  direction: rtl;
}

html[dir="rtl"] .sku,
html[dir="rtl"] .decor-code,
html[dir="rtl"] [data-ltr],
html[dir="rtl"] .ltr,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .order-cart-item__size,
html[dir="rtl"] .film-color-card__size-chip,
html[dir="rtl"] .film-detail__variant-size,
html[dir="rtl"] .film-detail__variant-sku,
html[dir="rtl"] .catalog-width-filters__item > span {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Keep +971 / email LTR glyph order, but pin the line to the RTL column edge */
html[dir="rtl"] .film-detail__manager-meta {
  text-align: start;
}

html[dir="rtl"] .film-detail__manager-meta a[href^="tel:"],
html[dir="rtl"] .film-detail__manager-meta a[href^="mailto:"],
html[dir="rtl"] .film-detail__manager-line.ltr {
  display: block;
  width: 100%;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* Format lists: block follows RTL, size tokens stay LTR on the start edge */
html[dir="rtl"] .film-format-list,
html[dir="rtl"] .edge-format-list {
  text-align: start;
  padding-inline-start: 0;
  padding-inline-end: 0;
}

html[dir="rtl"] .film-format-list .ltr,
html[dir="rtl"] .edge-format-list .ltr {
  display: inline-block;
  text-align: left;
}

/* Marketing cards on /resources/: keep body copy on the RTL edge */
html[dir="rtl"] .marketing-content .card-body {
  text-align: start;
}

html[dir="rtl"] .marketing-content .card-title {
  text-align: start;
}

/* Search: icon sits on inline-start; gap toward the input */
html[dir="rtl"] .search-container .search-icon {
  margin-right: 0;
  margin-inline-end: 10px;
}

html[dir="rtl"] .page-profile__title,
html[dir="rtl"] .order-section-title,
html[dir="rtl"] .login-brand__title {
  letter-spacing: 0;
}

/* Login / register cards: field chrome is RTL; credentials stay LTR islands */
html[dir="rtl"] .card.js-form,
html[dir="rtl"] .card.js-form .login-brand,
html[dir="rtl"] .card.js-form .login-brand__title,
html[dir="rtl"] .card.js-form .login-brand__subtitle,
html[dir="rtl"] .card.js-form .login-alert,
html[dir="rtl"] .card.js-form .field,
html[dir="rtl"] .card.js-form .field label,
html[dir="rtl"] .card.js-form .field .text-danger,
html[dir="rtl"] .card.js-form .register-cta,
html[dir="rtl"] .card.js-form .register-cta__hint {
  text-align: start;
}

html[dir="rtl"] .card.js-form .field label,
html[dir="rtl"] .register-card .field label {
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .card.js-form .field .form-control,
html[dir="rtl"] .card.js-form .field .form-control.ltr,
html[dir="rtl"] .card.js-form .field .form-control[dir="ltr"],
html[dir="rtl"] .register-card .field input.ltr,
html[dir="rtl"] .register-card .field input[dir="ltr"],
html[dir="rtl"] .register-card .field select {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

html[dir="rtl"] .card.js-form .login-lang {
  justify-content: flex-start;
}

/* Register card (same auth shell) */
html[dir="rtl"] .page .card,
html[dir="rtl"] .page .card .brand,
html[dir="rtl"] .page .card .subtitle,
html[dir="rtl"] .page .card .alert,
html[dir="rtl"] .page .card .field,
html[dir="rtl"] .page .card .field label,
html[dir="rtl"] .page .card .footer-link {
  text-align: start;
}

html[dir="rtl"] .page .card .field label {
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .page .card .field input,
html[dir="rtl"] .page .card .field select {
  text-align: right;
}

html[dir="rtl"] .page .card .field input.ltr,
html[dir="rtl"] .page .card .field input[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* Profile (and same shell): value hugs the RTL edge inside the control */
html[dir="rtl"] .page-profile .form-control,
html[dir="rtl"] .page-profile textarea.form-control {
  text-align: right;
}

/* Phone / email stay LTR glyph order, but still sit on the right edge */
html[dir="rtl"] .page-profile .form-control.ltr,
html[dir="rtl"] .page-profile .form-control[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

html[dir="rtl"] .navInnerWrapper .nav-link,
html[dir="rtl"] .sidebar-nav .nav-link {
  text-align: start;
}

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

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

/* Prefer logical spacing where legacy left/right still dominates */
html[dir="rtl"] .ms-1 { margin-inline-start: 0.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-2 { margin-inline-start: 0.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-3 { margin-inline-start: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .me-1 { margin-inline-end: 0.25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-2 { margin-inline-end: 0.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-3 { margin-inline-end: 1rem !important; margin-right: 0 !important; }

html[dir="rtl"] .ps-1 { padding-inline-start: 0.25rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-2 { padding-inline-start: 0.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-3 { padding-inline-start: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pe-1 { padding-inline-end: 0.25rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-2 { padding-inline-end: 0.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-3 { padding-inline-end: 1rem !important; padding-right: 0 !important; }

/* Keep product codes and Western digits readable */
html[dir="rtl"] .form-control,
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] .price,
html[dir="rtl"] .qty {
  font-variant-numeric: lining-nums;
}

/* --- Physical left/right mirrors (catalog / cart / media) --- */

html[dir="rtl"] .enhanced-cart-button {
  right: auto;
  left: 5px;
  inset-inline-end: 5px;
  inset-inline-start: auto;
}

html[dir="rtl"] .enhanced-cart-button .cart-item-count {
  right: auto;
  left: 5px;
  inset-inline-end: 5px;
  inset-inline-start: auto;
}

html[dir="rtl"] .favorite-icon {
  right: auto;
  left: 7px;
  inset-inline-end: 7px;
  inset-inline-start: auto;
}

html[dir="rtl"] .film-detail__cover .favorite-icon {
  right: auto;
  left: 8px;
  inset-inline-end: 8px;
  inset-inline-start: auto;
}

/*
 * Film cards: outer corners of shot + favorite rail.
 * Logical radii in main.css handle modern RTL; physical fallbacks cover
 * browsers that keep the grid LTR while direction is rtl.
 */
html[dir="rtl"] .decor-items .decor-thumb,
html[dir="rtl"] .decor-items .placeholder {
  border-top-left-radius: 0;
  border-top-right-radius: 6px;
}

html[dir="rtl"] .decor-media__rail {
  border-top-right-radius: 0;
  border-top-left-radius: 6px;
}

/* Top-left diagonal in LTR → top-right diagonal in RTL (readable text, no scaleX flip) */
html[dir="rtl"] .decor-corner-ribbon {
  left: auto;
  right: -32px;
  transform: rotate(45deg);
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .catalog-filter-chip {
  margin-left: 0;
  margin-inline-start: auto;
}

html[dir="rtl"] .catalog-filter-switch__track::after {
  left: auto;
  right: 2px;
  inset-inline-start: 2px;
  inset-inline-end: auto;
}

html[dir="rtl"] .catalog-filter-switch__input:checked + .catalog-filter-switch__track::after {
  transform: translateX(-16px);
}

html[dir="rtl"] .in-trend-teaser__nav--prev {
  left: auto;
  right: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
}

html[dir="rtl"] .in-trend-teaser__nav--next {
  right: auto;
  left: 0;
  inset-inline-end: 0;
  inset-inline-start: auto;
}

/* Positions swap in RTL; flip chevrons so they still point outward. */
html[dir="rtl"] .in-trend-teaser__nav--prev i,
html[dir="rtl"] .in-trend-teaser__nav--next i {
  transform: scaleX(-1);
}

html[dir="rtl"] .film-apps-viewer__nav--prev {
  left: auto;
  right: 10px;
  inset-inline-start: 10px;
  inset-inline-end: auto;
}

html[dir="rtl"] .film-apps-viewer__nav--next {
  right: auto;
  left: 10px;
  inset-inline-end: 10px;
  inset-inline-start: auto;
}

html[dir="rtl"] .film-apps-viewer__nav--prev,
html[dir="rtl"] .film-apps-viewer__nav--next {
  transform: translateY(-50%) scaleX(-1);
}

html[dir="rtl"] .portal-warehouses-modal__nav--prev {
  left: auto;
  right: 0.65rem;
  inset-inline-start: 0.65rem;
  inset-inline-end: auto;
}

html[dir="rtl"] .portal-warehouses-modal__nav--next {
  right: auto;
  left: 0.65rem;
  inset-inline-end: 0.65rem;
  inset-inline-start: auto;
}

html[dir="rtl"] .portal-warehouses-modal__nav--prev i,
html[dir="rtl"] .portal-warehouses-modal__nav--next i {
  transform: scaleX(-1);
}

@media (max-width: 575.98px) {
  html[dir="rtl"] .portal-warehouses-modal__nav--prev {
    right: 0.35rem;
    inset-inline-start: 0.35rem;
  }

  html[dir="rtl"] .portal-warehouses-modal__nav--next {
    left: 0.35rem;
    inset-inline-end: 0.35rem;
  }
}

html[dir="rtl"] .order-cart-item {
  border-left: none;
  border-inline-start: 3px solid var(--grw-accent-soft);
}

html[dir="rtl"] .decor-bought-hint {
  text-align: start;
}

html[dir="rtl"] .decor-bought-hint .fa-check {
  margin-right: 0;
  margin-inline-end: 4px;
}

html[dir="rtl"] .film-detail__surface-value {
  text-align: start;
}

html[dir="rtl"] .catalog-card__pin,
html[dir="rtl"] .in-trend-badge-row {
  left: auto;
  inset-inline-start: 8px;
  inset-inline-end: auto;
}

html[dir="rtl"] .timeline .timeline-item .timeline-line {
  left: auto;
  inset-inline-start: 5px;
  inset-inline-end: auto;
}

html[dir="rtl"] .film-apps-viewer__close {
  right: auto;
  inset-inline-end: 12px;
  inset-inline-start: auto;
}

html[dir="rtl"] .portal-warehouses__shot-zoom {
  right: auto;
  inset-inline-end: 8px;
  inset-inline-start: auto;
}

html[dir="rtl"] .trend-mosaic__product-label {
  left: auto;
  inset-inline-start: 6px;
  inset-inline-end: auto;
}

html[dir="rtl"] .order-back-btn {
  left: auto;
  inset-inline-start: 0;
  inset-inline-end: auto;
}

html[dir="rtl"] .order-option-block,
html[dir="rtl"] .urgency-option,
html[dir="rtl"] .page-order-new .order-options > div,
html[dir="rtl"] .order-material-card {
  border-left: none;
}

html[dir="rtl"] .order-option-block,
html[dir="rtl"] .page-order-new [style*="border-left"],
html[dir="rtl"] .page-order-id [style*="border-left"] {
  border-inline-start-width: 4px;
}

html[dir="rtl"] .in-trend__desc ul {
  padding-left: 0;
  padding-inline-start: 1.25rem;
}

html[dir="rtl"] .profile-promote__points li {
  padding-left: 0;
  padding-inline-start: 1.1rem;
}

html[dir="rtl"] .profile-promote__points li::before {
  left: auto;
  inset-inline-start: 0;
  inset-inline-end: auto;
}

html[dir="rtl"] .order-material-card__title,
html[dir="rtl"] .order-material-card__article,
html[dir="rtl"] .order-catalog-row__name,
html[dir="rtl"] .order-catalog-row__meta {
  unicode-bidi: isolate;
}

html[dir="rtl"] .save-pct,
html[dir="rtl"] .film-offer__now,
html[dir="rtl"] .film-offer__was,
html[dir="rtl"] .film-offer__price,
html[dir="rtl"] .film-offer-sales__nums,
html[dir="rtl"] [data-money] {
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] .shipments-year__summary::after {
  margin-left: 0;
  margin-inline-start: auto;
}

html[dir="rtl"] .shipments-year__count {
  margin-right: 0;
  margin-inline-end: 8px;
}

html[dir="rtl"] .navInner .nav-group-child {
  padding-left: 0;
  padding-inline-start: 8px;
}

html[dir="rtl"] .previously-purchased-badge,
html[dir="rtl"] .previously-purchased-table,
html[dir="rtl"] table.previously-purchased-table,
html[dir="rtl"] .decor-bought-hint {
  text-align: start;
}

/* Generic tel LTR islands (warehouses etc.) — do not override manager cards */
html[dir="rtl"] a[href^="tel:"].ltr:not(.film-detail__manager-line),
html[dir="rtl"] .portal-warehouses a[href^="tel:"] {
  text-align: start;
  display: inline-block;
}

/* orderNew / checkout: text hugs RTL edge; unit toggles keep logical radii */
html[dir="rtl"] .page-order-new h1,
html[dir="rtl"] .page-order-new .lead,
html[dir="rtl"] .page-order-new .form-label,
html[dir="rtl"] .page-order-new .order-option-block__label,
html[dir="rtl"] .page-order-new .order-option-block__hint,
html[dir="rtl"] .page-order-new .order-line-intent__hint,
html[dir="rtl"] .page-order-new .order-section-title,
html[dir="rtl"] .page-order-new .order-seg__copy,
html[dir="rtl"] .page-order-new .form-check-label,
html[dir="rtl"] .page-order-new .card-title:not(.ltr) {
  text-align: start;
}

html[dir="rtl"] .page-order-new .form-control,
html[dir="rtl"] .page-order-new .form-select,
html[dir="rtl"] .page-order-new textarea.form-control {
  text-align: start;
}

html[dir="rtl"] .page-order-new input[type="number"].form-control,
html[dir="rtl"] .page-order-new .order-catalog-row__input {
  text-align: center;
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] .page-order-new .order-seg__opt,
html[dir="rtl"] .page-order-new .order-material-card__main,
html[dir="rtl"] .page-order-new .order-catalog-row__info {
  text-align: start;
}

html[dir="rtl"] .page-order-new .btn-group > .btn:first-of-type,
html[dir="rtl"] .page-order-new .btn-group > .btn-check:first-child + .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-start-start-radius: 8px;
  border-end-start-radius: 8px;
}

html[dir="rtl"] .page-order-new .btn-group > .btn:last-of-type,
html[dir="rtl"] .page-order-new .btn-group > .btn-check:last-of-type + .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
}

html[dir="rtl"] .film-detail__contacts-cue {
  flex-direction: row;
}

html[dir="rtl"] .film-detail__inquire--wa {
  flex-direction: row;
}