/* ==========================================================================
   AL ARFAN GLOBAL EXPORTS
   Right-to-left layout (Arabic).

   Loaded after site.css, and only on pages served with dir="rtl". site.css is
   written in physical terms (left/right), so every rule whose look depends on
   reading direction is mirrored here with its physical opposite. Flex and grid
   rows mirror on their own and are not repeated.

   Deliberately NOT mirrored: the world map (geography), SVG illustrations,
   the seal, and Latin data - phone numbers, e-mail addresses,
   codes - which must still read left to right.
   ========================================================================== */

/* ==========================================================================
   Latin data inside Arabic text
   ========================================================================== */

/* "+91 98..." would otherwise have its "+" jump to the far end, and an e-mail's
   dots and @ reorder. Isolated, so the Arabic around it is untouched. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
}
/* Typed values are Latin too; the field itself stays right-aligned. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] {
  direction: ltr;
  text-align: right;
}
/* Office addresses are kept in English. Each line takes its direction from its
   own text, so a trailing comma or postcode stays where an English reader
   expects it, while the block still lines up on the right. */
[dir="rtl"] .office__addr { unicode-bidi: plaintext; text-align: right; }
/* The opening counter "100%" is a number, not a sentence. */
[dir="rtl"] .intro__count,
[dir="rtl"] .intro__name { direction: ltr; unicode-bidi: isolate; }
/* Container payloads ("~ 26-28 MT"): each takes its direction from its own
   first letter, so an untranslated one no longer reads "MT 28 - 26 ~". */
[dir="rtl"] .container-card__payload strong { unicode-bidi: plaintext; }

/* ==========================================================================
   Header
   ========================================================================== */

/* The link underline grows from the reading start. */
[dir="rtl"] .nav__link::after { transform-origin: right; }

/* Logistics dropdown hangs from the item's right edge. */
[dir="rtl"] .nav__panel { left: auto; right: 0; }
[dir="rtl"] .nav__panel a:hover { padding-left: 13px; padding-right: 18px; }
[dir="rtl"] .caret { margin-left: 0; margin-right: 3px; }

/* The auto margin that pushes the menu away from the brand. */
[dir="rtl"] .nav { margin-left: 0; margin-right: auto; }

/* Globe side of the language pill has the tighter padding. */
[dir="rtl"] .lang__btn { padding: 0 9px 0 10px; }

[dir="rtl"] .theme-toggle:active { transform: rotate(25deg) scale(.94); }

/* Desktop menu: the "Request a Quote" button carries an inline margin-left
   (base.html) - only !important can move it to the side facing the links. */
@media (min-width: 1341px) {
  [dir="rtl"] .nav > .btn { margin-left: 0 !important; margin-right: 8px !important; }
}

/* Phone / tablet drawer: slides in from the LEFT, edge and shadow on its
   inner (right) side. site.js only toggles .is-open, so nothing else changes.
   Closed, it sits off the left edge - html/body overflow-x: clip keeps that
   from widening the page. */
@media (max-width: 1340px) {
  [dir="rtl"] .nav {
    right: auto; left: 0;
    margin-right: 0;
    border-left: 0;
    border-right: 1px solid var(--gold-hair);
    box-shadow: 18px 0 40px -18px rgba(var(--shade-rgb), .35);
    transform: translateX(-100%);
  }
  [dir="rtl"] .nav.is-open { transform: translateX(0); }
  /* Sub-links indent from the right. */
  [dir="rtl"] .nav__panel { padding: 4px 16px 8px 0; }
  [dir="rtl"] .caret { margin-right: 0; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* The glint crosses the coin in reading order: right to left. */
[dir="rtl"] .hero__coin::after {
  background-image: linear-gradient(245deg,
    transparent 42%, rgba(255, 246, 220, 0) 44.5%, rgba(255, 246, 220, .5) 50%,
    rgba(255, 246, 220, 0) 55.5%, transparent 58%);
  background-position: 0% 0;
  animation-name: coin-glint-rtl;
}
@keyframes coin-glint-rtl {
  0%        { background-position: 0% 0; }
  26%, 100% { background-position: 100% 0; }
}

/* ==========================================================================
   Bowl carousel
   In RTL the track is anchored to the row's RIGHT edge and its second copy
   overflows to the left, so the rows travel by +50% instead of -50%.
   The spacing margin moves to each bowl's left (its end) so half the track is
   still exactly one copy.
   ========================================================================== */

[dir="rtl"] .bowl { margin-right: 0; margin-left: var(--bowl-gap); }
[dir="rtl"] .bowls__row--l .bowls__track { animation-name: bowls-l-rtl; }
[dir="rtl"] .bowls__row--r .bowls__track { animation-name: bowls-r-rtl; }
@keyframes bowls-l-rtl { from { transform: translateX(0); }   to { transform: translateX(50%); } }
@keyframes bowls-r-rtl { from { transform: translateX(50%); } to { transform: translateX(0); } }

/* ==========================================================================
   Cards
   ========================================================================== */

[dir="rtl"] .product { text-align: right; }
[dir="rtl"] .product__tag { left: auto; right: 11px; }
[dir="rtl"] .product__media,
[dir="rtl"] .group-card__media { background: linear-gradient(220deg, var(--ink-3), var(--ink-1)); }

/* "Specification ←" - the arrow nudges towards the reading end. Mouse only,
   matching site.css's hover:none reset (this selector would outrank it). */
@media (hover: hover) {
  [dir="rtl"] .product:hover .product__more span,
  [dir="rtl"] .group-card:hover .group-card__more span { transform: translateX(-4px); }
}

/* Diamond-bulleted commitments (About). */
[dir="rtl"] .commitments li { padding: 0 20px 14px 0; }
[dir="rtl"] .commitments li:last-child { padding-bottom: 0; }
[dir="rtl"] .commitments li::before { left: auto; right: 0; }

/* ==========================================================================
   Filter rail (Products)
   The scrollbar sits on the left in RTL, so the breathing room moves there.
   ========================================================================== */

[dir="rtl"] .rail { padding-right: 0; padding-left: 8px; }
@media (max-width: 900px) { [dir="rtl"] .rail { padding-left: 0; } }

/* ==========================================================================
   Tables & specs
   ========================================================================== */

[dir="rtl"] thead th { text-align: right; }
[dir="rtl"] .spec-note {
  padding-left: 0; padding-right: 13px;
  border-left: 0; border-right: 1px solid var(--gold-hair);
}

/* ==========================================================================
   Accordion
   ========================================================================== */

[dir="rtl"] .acc__q { text-align: right; }
/* The answer's wide gutter stays under the +/- sign, now on the left. */
[dir="rtl"] .acc__a p { padding: 0 4px 22px 44px; }

/* ==========================================================================
   Reach map
   Geography does not mirror: the map, its routes and pin labels stay LTR
   (SVG text-anchor would otherwise flip with direction). The legend under it
   is ordinary text and reads right to left.
   ========================================================================== */

[dir="rtl"] .map-wrap { direction: ltr; }
[dir="rtl"] .map-key { direction: rtl; }

/* Port directory: the country column hugs the left edge, stars sit on the right. */
[dir="rtl"] .port-list__where { text-align: left; }
[dir="rtl"] .port-list .is-major::before,
[dir="rtl"] .port-list .is-hub::before { margin-right: 0; margin-left: 6px; }

/* ==========================================================================
   Forms
   ========================================================================== */

/* The drawn chevron moves to the left, and its padding with it. */
[dir="rtl"] select.field-input {
  padding-right: 15px; padding-left: 40px;
  background-position: 15px 55%, 20px 55%;
}
/* Spam trap in the enquiry form: parked at left:-9999px (inline). Inside the
   quote modal's scroll box, left-side overflow is scrollable in RTL and gave
   the dialog a sideways scrollbar - park it off the right instead. */
[dir="rtl"] form [aria-hidden="true"][style*="-9999px"] { left: auto !important; right: -9999px; }

/* ==========================================================================
   Floating WhatsApp / quote pair - bottom LEFT in RTL
   ========================================================================== */

[dir="rtl"] .floats { right: auto; left: 18px; }
[dir="rtl"] .float-wa { padding: 11px 12px 11px 18px; }
@media (max-width: 640px) {
  [dir="rtl"] .floats { left: 14px; }
  [dir="rtl"] .float-wa { padding: 12px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

[dir="rtl"] .footer a:hover { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .socials a:hover { padding-right: 0; }

/* ==========================================================================
   Page header, legal pages, modal
   ========================================================================== */

/* Gold bloom in the reading-start corner. */
[dir="rtl"] .page-head::before { right: auto; left: -8%; }

[dir="rtl"] .legal ul { padding-left: 0; padding-right: 20px; }

[dir="rtl"] .modal__close { right: auto; left: 20px; }

/* ==========================================================================
   Opening sequence
   The loading bar and the gold slice draw from the right. The name itself is
   Latin and stays as it is (see .intro__name above).
   ========================================================================== */

[dir="rtl"] .intro__bar span {
  transform-origin: right center;
  background: linear-gradient(270deg, #8A6A33, #E4C179 70%, #FDE09A);
}
[dir="rtl"] .intro__slice { transform-origin: right center; }