/* ============================================
   SHIKO GAME STORE - RTL SUPPORT
   For Arabic language via TranslatePress
   ============================================ */

[dir="rtl"] body,
html[lang="ar"] body {
    direction: rtl;
    text-align: right;
}

/* Header
   3.33.2: REMOVED `flex-direction: row-reverse` from .shiko-header-inner,
   .shiko-nav, and .shiko-header-actions — same gotcha as the
   .shiko-section-header fix at v3.3.92 (see line 289 comment). With
   `direction: rtl` already on the body, `flex-direction: row` naturally
   flows children from inline-start (visual right in RTL) to inline-end
   (visual left). Adding row-reverse on top double-flipped the visual
   order back to LTR-like, so the AR header was rendering with logo
   on the visual left and the cart pill on the visual right — the
   opposite of the SOUL.md "AR and EN are the same design mirrored"
   doctrine. Other rules in this file with the same bug (cart, account
   nav, hero, search, product meta, etc.) are tracked for a follow-up
   spec — see CLAUDE.md "Open follow-ups". */

/* Cart count badge */
[dir="rtl"] .shiko-cart-count { right: auto; left: 4px; }

/* Breadcrumbs */
[dir="rtl"] .shiko-breadcrumbs { text-align: right; }
[dir="rtl"] .shiko-breadcrumbs .separator { margin: 0 8px; transform: scaleX(-1); }

/* Product Grid */
[dir="rtl"] .shiko-product-badge { left: auto; right: 10px; }
[dir="rtl"] .shiko-product-actions { right: auto; left: 10px; transform: translateX(-8px); }
[dir="rtl"] .shiko-product-card:hover .shiko-product-actions { transform: translateX(0); }

/* Section headers — body has direction:rtl, which already flips
   `flex-direction: row` to right-to-left flow. Adding row-reverse
   on top double-flips back to LTR-like and pushes the heading to
   the wrong edge. (3.3.92: removed the row-reverse override.) */

/* Plans
   3.33.4: REMOVED `flex-direction: row-reverse` from .shiko-plan-features li.
   Same double-flip pattern as 3.33.2 header fix. Selector also has zero
   PHP/JS markup hits in current theme — rule is dead weight either way. */
[dir="rtl"] .shiko-plan-features li::before { margin-left: 8px; margin-right: 0; }

/* Cart
   3.33.4: REMOVED `.shiko-cart-row { flex-direction: row-reverse; }`.
   Zero PHP/JS hits for .shiko-cart-row in current theme. */
[dir="rtl"] .shiko-cart-item { direction: rtl; }

/* Forms */
[dir="rtl"] .shiko-form-row label { text-align: right; }
[dir="rtl"] .shiko-form-row input,
[dir="rtl"] .shiko-form-row select,
[dir="rtl"] .shiko-form-row textarea { text-align: right; }

/* Account nav
   3.33.4: REMOVED `flex-direction: row-reverse`. Zero PHP/JS hits for
   .shiko-account-nav; WC My-Account nav uses .woocommerce-MyAccount-navigation. */
[dir="rtl"] .shiko-account-nav a { text-align: right; }

/* Footer */
[dir="rtl"] .shiko-footer-grid { direction: rtl; }
[dir="rtl"] .shiko-footer-links { text-align: right; }

/* Mobile menu
   3.33.4: REMOVED `flex-direction: row-reverse` from .shiko-mobile-menu-header.
   Headless probe at 480px AR confirmed double-flip — children rendered LTR
   (first@20, last@420) before; mirror correct (first@314, last@20) after. */
[dir="rtl"] .shiko-mobile-menu nav a { text-align: right; }

/* Hero */
[dir="rtl"] .shiko-hero { text-align: center; }

/* Trust badges */
[dir="rtl"] .shiko-trust-item { text-align: center; }

/* Blog */
[dir="rtl"] .shiko-post-content { text-align: right; }

/* Search
   3.33.4: REMOVED `flex-direction: row-reverse`. Form renders on search.php
   and 404.php with 2 children (input + submit) — same double-flip pattern. */

/* WooCommerce overrides */
[dir="rtl"] .woocommerce-notices-wrapper .woocommerce-message,
[dir="rtl"] .woocommerce-notices-wrapper .woocommerce-error,
[dir="rtl"] .woocommerce-notices-wrapper .woocommerce-info {
    border-left: none;
    border-right: 3px solid;
    text-align: right;
}
[dir="rtl"] .woocommerce-notices-wrapper .woocommerce-message { border-right-color: #10B981; }
[dir="rtl"] .woocommerce-notices-wrapper .woocommerce-error { border-right-color: var(--shiko-accent); }
[dir="rtl"] .woocommerce-notices-wrapper .woocommerce-info { border-right-color: #3B82F6; }

/* WooCommerce tables */
[dir="rtl"] .shiko-orders-table th,
[dir="rtl"] .shiko-orders-table td { text-align: right; }

/* Coupon form — 3.33.4: REMOVED row-reverse (zero PHP/JS hits). */

/* Quantity — 3.33.4: REMOVED row-reverse (zero PHP/JS hits;
   WC uses .quantity, not .shiko-quantity). */

/* Flash sale — 3.33.4: REMOVED row-reverse. Headless probe at 1366 AR
   confirmed double-flip — children (label + countdown) rendered LTR
   (first@1110, last@1126) before; mirror correct after removal. */

/* Single product — 3.33.4: REMOVED row-reverse from .shiko-product-meta-row
   and .shiko-product-gallery-thumbs (both zero PHP/JS hits). */
[dir="rtl"] .shiko-single-price del { margin-right: 0; margin-left: 8px; }

/* 3.3.63: FlexSlider initializes slides with inline style
   `float: right` when the document is in RTL mode, which parks
   slide 0 (the active product image) at the FAR-right edge of the
   wrapper — outside the visible viewport. Force LTR layout for the
   gallery internals AND override the inline float. The rest of the
   page keeps its RTL flow. */
[dir="rtl"] .shiko-pdp-gallery,
[dir="rtl"] .shiko-pdp-gallery .woocommerce-product-gallery,
[dir="rtl"] .shiko-pdp-gallery .flex-viewport,
[dir="rtl"] .shiko-pdp-gallery .woocommerce-product-gallery__wrapper,
[dir="rtl"] .shiko-pdp-gallery .flex-control-thumbs {
    direction: ltr;
}
[dir="rtl"] .shiko-pdp-gallery .woocommerce-product-gallery__image {
    float: left !important;
}

/* Tabs — 3.33.4: REMOVED row-reverse (zero PHP/JS hits). */

/* Popular tag in account cards */
[dir="rtl"] .shiko-popular-tag { right: auto; left: 10px; }

/* Phone number LTR in RTL context */
[dir="rtl"] .shiko-phone-ltr {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* Payment methods — flip radio margin for RTL */
[dir="rtl"] #payment li.wc_payment_method > input[type="radio"] { margin: 0 0 0 10px; }

/* General spacing fixes
   3.33.4: REMOVED row-reverse from .shiko-hero-actions (renders only on the
   carousel-less fallback hero in front-page.php — same 2-anchor children
   double-flip pattern as the header) and .shiko-add-to-cart-wrap (zero PHP/JS
   hits in current theme). */

/* ============================================================
   v3.3.90 — WooCommerce FlexSlider product gallery
   FlexSlider has no native RTL support; its slide-positioning math
   uses physical `left:` offsets, so when the parent is dir="rtl" the
   first slide ends up positioned off the left edge of the viewport
   and the cover image appears blank on Arabic product pages. Force
   direction:ltr on the slider internals only so its math stays
   correct, then text-align:start inside any text content keeps the
   reading direction intact for the rest of the page.
   ============================================================ */
[dir="rtl"] .shiko-pdp-gallery .woocommerce-product-gallery,
[dir="rtl"] .shiko-pdp-gallery .woocommerce-product-gallery__wrapper,
[dir="rtl"] .shiko-pdp-gallery .flex-viewport,
[dir="rtl"] .shiko-pdp-gallery .flex-control-thumbs,
[dir="rtl"] .shiko-pdp-gallery .flex-direction-nav,
[dir="rtl"] .shiko-pdp-gallery ul.slides,
[dir="rtl"] .shiko-pdp-gallery .woocommerce-product-gallery__image {
    direction: ltr !important;
    text-align: left !important;
}
/* 3.3.93: removed the transform: translate3d(0, 0, 0) !important
   override added in 3.3.91 — it pinned the slides UL at position 0
   and prevented sliding. */

/* 3.3.96: AR product gallery — visual parity with EN FlexSlider.
   Theme JS (main.js) builds:
     <div class="shiko-ar-main-display">
       <a class="shiko-ar-main-link"><img class="shiko-ar-main-img"></a>
     </div>
     <div class="shiko-ar-thumbs">
       <button class="shiko-ar-thumb is-active"><img></button>
       <button class="shiko-ar-thumb"><img></button>
       …
     </div>
   ============================================================ */
[dir="rtl"] .shiko-pdp-gallery .woocommerce-product-gallery {
    display: block;
}
/* Hide the original WC stacked wrapper (JS still reads it for image data) */
[dir="rtl"] .shiko-pdp-gallery .woocommerce-product-gallery__wrapper {
    display: none !important;
}
/* Main display — square card mirroring EN gallery */
[dir="rtl"] .shiko-pdp-gallery .shiko-ar-main-display {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--shiko-radius-lg);
    overflow: hidden;
    border: 1px solid var(--shiko-border);
    background: var(--shiko-bg-tertiary);
    margin: 0 0 12px 0;
}
[dir="rtl"] .shiko-pdp-gallery .shiko-ar-main-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}
[dir="rtl"] .shiko-pdp-gallery .shiko-ar-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}
/* Sale badge sits on the main display in EN; preserve in AR */
[dir="rtl"] .shiko-pdp-gallery .shiko-ar-main-display .onsale {
    position: absolute;
    top: 12px;
    right: auto;
    left: 12px;
    z-index: 2;
}
/* PhotoSwipe magnifier trigger sits on main display top-right */
[dir="rtl"] .shiko-pdp-gallery .shiko-ar-main-display .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    z-index: 3;
}
/* Thumb strip — fixed 4 columns at 25% each, matching EN's
   data-columns=4 FlexSlider thumbs. With < 4 thumbs, the populated
   columns sit at the inline-start (= right in RTL) and the rest stay
   empty, exactly like EN. Wraps to the next row when there are 5+
   thumbs. (3.3.98: reverted from auto-fit which made thumbs balloon
   to half the gallery width when there were only 2 images.) */
[dir="rtl"] .shiko-pdp-gallery .shiko-ar-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    direction: rtl;
    margin: 0;
    padding: 0;
    list-style: none;
}
[dir="rtl"] .shiko-pdp-gallery .shiko-ar-thumb {
    appearance: none;
    -webkit-appearance: none;
    background: var(--shiko-bg-tertiary);
    border: 2px solid var(--shiko-border);
    border-radius: 6px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
    aspect-ratio: 1 / 1;
}
[dir="rtl"] .shiko-pdp-gallery .shiko-ar-thumb:hover {
    border-color: var(--shiko-accent);
    transform: translateY(-1px);
}
[dir="rtl"] .shiko-pdp-gallery .shiko-ar-thumb:focus-visible {
    outline: 2px solid var(--shiko-accent);
    outline-offset: 2px;
}
[dir="rtl"] .shiko-pdp-gallery .shiko-ar-thumb.is-active {
    border-color: var(--shiko-accent);
    box-shadow: 0 0 0 1px var(--shiko-accent);
}
[dir="rtl"] .shiko-pdp-gallery .shiko-ar-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
@media (max-width: 640px) {
    [dir="rtl"] .shiko-pdp-gallery .shiko-ar-thumbs {
        gap: 6px;
    }
}
/* Sale badge stays anchored on the inline-end edge in either direction;
   the WC default uses physical `right:` so flip in RTL. */
[dir="rtl"] .shiko-pdp-gallery .onsale,
[dir="rtl"] .shiko-pdp-gallery span.onsale {
    right: auto;
    left: 8px;
}

/* ============================================================
   v3.3.91 — homepage section headers + cat cards
   On Arabic homepages the section header was rendering with the
   heading flush to the inline-start of the LTR viewport (= left)
   instead of the RTL inline-start (= right) — likely cached HTML
   referenced an older CSS bundle that lacked `direction: rtl` on
   the body. Add explicit RTL flips so the section headers are
   correct regardless of browser cache state.
   ============================================================ */
/* 3.3.92: do NOT add flex-direction: row-reverse here — body has
   `direction: rtl` which already reverses the inline axis for
   `flex-direction: row`, so adding row-reverse on top double-flips
   it back to LTR-like and pushed the section heading to the left
   edge. Just keep text-align inside. */
[dir="rtl"] .shiko-section-header > div,
[dir="rtl"] .shiko-section-header h2 {
    text-align: right;
}
/* Section divider — keep symmetric (no margin override needed; the
   divider lives inside the inner div so it follows the heading
   natively in RTL). */
/* Category cards content: title + count anchored to inline-start.
   Inner padding stays symmetric, but text inside should read R→L. */
[dir="rtl"] .shiko-cat-card-inner,
[dir="rtl"] .shiko-cat-card-title,
[dir="rtl"] .shiko-cat-card-count {
    text-align: right;
    direction: rtl;
}
/* Product cards inside the homepage grid. */
[dir="rtl"] .shiko-product-info,
[dir="rtl"] .shiko-product-title,
[dir="rtl"] .shiko-product-category,
[dir="rtl"] .shiko-product-price {
    text-align: right;
    direction: rtl;
}
/* Belt + braces: the body should already get text-align: right from
   the rule near the top of this file, but add a more specific anchor
   for shiko-theme so plugin styles can't reset it. */
[dir="rtl"] body.shiko-theme {
    text-align: right;
}