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

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

/* Header */
[dir="rtl"] .shiko-header-inner { flex-direction: row-reverse; }
[dir="rtl"] .shiko-nav { flex-direction: row-reverse; }
[dir="rtl"] .shiko-header-actions { flex-direction: row-reverse; }

/* 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 */
[dir="rtl"] .shiko-plan-features li { flex-direction: row-reverse; }
[dir="rtl"] .shiko-plan-features li::before { margin-left: 8px; margin-right: 0; }

/* Cart */
[dir="rtl"] .shiko-cart-item { direction: rtl; }
[dir="rtl"] .shiko-cart-row { flex-direction: row-reverse; }

/* 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 */
[dir="rtl"] .shiko-account-nav a { flex-direction: row-reverse; text-align: right; }

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

/* Mobile menu */
[dir="rtl"] .shiko-mobile-menu-header { flex-direction: row-reverse; }
[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 */
[dir="rtl"] .shiko-search-form { flex-direction: row-reverse; }

/* 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 */
[dir="rtl"] .shiko-coupon-form { flex-direction: row-reverse; }

/* Quantity */
[dir="rtl"] .shiko-quantity { flex-direction: row-reverse; }

/* Flash sale */
[dir="rtl"] .shiko-flash-sale-bar { flex-direction: row-reverse; }

/* Single product */
[dir="rtl"] .shiko-product-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .shiko-single-price del { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .shiko-product-gallery-thumbs { flex-direction: row-reverse; }

/* 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 */
[dir="rtl"] .shiko-tabs-nav { flex-direction: row-reverse; }

/* 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 */
[dir="rtl"] .shiko-hero-actions { flex-direction: row-reverse; }
[dir="rtl"] .shiko-add-to-cart-wrap { flex-direction: row-reverse; }

/* ============================================================
   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;
}