/**
 * ============================================================
 * Author:    DARK-MASTER
 * Studio:    DARK DIGITAL STUDIO
 * Site:      dark-digital-studio.com
 * Email:     Service.Dark.Digital.studio@gmail.com
 * WhatsApp:  +905378664534
 * Telegram:  https://t.me/DARK_Digital_Studio
 * GitHub:    github.com/DARK-MASTER-0
 *
 * Copyright (c) 2018-2026 Dark Digital Studio. All Rights Reserved.
 * Unauthorized copying, distribution, or use of this software,
 * in whole or in part, is strictly prohibited without prior
 * written permission from the author.
 * ============================================================
 */
/* ========================================================================
   Base & Theme Tokens
   ======================================================================== */
:root {
    --color-bg: #f0f4fa;
    --color-bg-soft: rgba(255, 255, 255, 0.97);
    --color-surface: rgba(255, 255, 255, 0.92);
    --color-text: #0a1628;
    --color-text-soft: #1e3a5f;
    --color-muted: #4a6a8f;
    --color-border: rgba(10, 22, 40, 0.10);
    --color-border-strong: rgba(10, 22, 40, 0.18);
    --color-primary: #0b6fcc;
    --color-primary-dark: #084f96;
    --color-secondary: #3da5f5;
    --color-success: #1a9e6f;
    --color-error: #c9434d;
    --color-warning: #1b8ce8;
    --color-on-primary: #ffffff;
    --color-on-inverse: #ffffff;
    --card-glow: 0 24px 60px -32px rgba(11, 111, 204, 0.22);
    --card-glow-subtle: 0 18px 48px -36px rgba(11, 111, 204, 0.15);
    --color-gradient-start: #0b6fcc;
    --color-gradient-mid: #1a8cf0;
    --color-gradient-end: #56b4ff;
    --form-field-bg: rgba(255, 255, 255, 0.98);
    --form-field-border: rgba(10, 22, 40, 0.15);
    --form-field-text: #0a1628;
    --form-field-placeholder: rgba(30, 58, 95, 0.55);
    --form-field-focus-ring: rgba(11, 111, 204, 0.18);
    --glow-primary: rgba(114, 192, 255, 0.4);
    --glow-secondary: rgba(185, 218, 255, 0.35);
    --glow-backdrop-primary: rgba(114, 192, 255, 0.16);
    --glow-backdrop-secondary: rgba(13, 125, 220, 0.1);
    --detail-max-height: 260px;
    --layer-glass-border: rgba(255, 255, 255, 0.18);
    --layer-glass-border-strong: rgba(255, 255, 255, 0.35);
    --shadow-soft: 0 16px 48px -18px rgba(15, 39, 74, 0.18);
    --shadow-raised: 0 28px 80px -28px rgba(15, 39, 74, 0.28);
    --glass-blur: blur(20px);
    --radius-xs: 8px;
    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-lg: 32px;
    --radius-xl: 48px;
    --header-height: 92px;
    --container: min(1200px, 92vw);
    --product-media-figure-bg: rgba(13, 125, 220, 0.08);
    --product-media-badge-bg: rgba(13, 125, 220, 0.86);
    --product-media-badge-color: var(--color-on-primary);
    --product-media-player-bg: rgba(255, 255, 255, 0.92);
    --product-media-video-bg: rgba(236, 242, 255, 0.94);
    --product-media-controls-bg: rgba(255, 255, 255, 0.95);
    --product-media-controls-color: var(--color-text);
    --product-media-button-bg: rgba(13, 125, 220, 0.16);
    --product-media-button-hover-bg: rgba(13, 125, 220, 0.28);
    --product-media-button-text: var(--color-primary);
}

/* Block scrolling while loading — full cross-browser lock */
html.is-loading,
body.is-loading {
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
    position: fixed !important;     /* iOS Safari scroll lock */
    top: 0 !important;
    left: 0 !important;
    touch-action: none !important;  /* Prevent swipe on mobile */
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
}

[data-theme="dark"] {
    --color-bg: #020818;
    --color-bg-soft: rgba(3, 10, 30, 0.94);
    --color-surface: rgba(6, 16, 38, 0.96);
    --hero-overlay-color: #000;
    --hero-video-blend: normal;
    --hero-video-overlay-opacity: 0.35;
    --color-text: #f2f6ff;
    --color-text-soft: #c5d4f0;
    --color-muted: #8da3c8;
    --color-border: rgba(100, 180, 255, 0.14);
    --color-border-strong: rgba(100, 180, 255, 0.24);
    --color-primary: #2684ff;
    --color-primary-dark: #0d4ea6;
    --color-secondary: #4db8ff;
    --color-success: #22b07a;
    --color-error: #ff6b75;
    --color-warning: #3faff5;
    --color-on-primary: #ffffff;
    --color-on-inverse: #020818;
    --card-glow: 0 24px 60px -28px rgba(15, 70, 220, 0.40);
    --card-glow-subtle: 0 18px 48px -32px rgba(15, 70, 220, 0.28);
    --color-gradient-start: #2684ff;
    --color-gradient-mid: #1a6ed8;
    --color-gradient-end: #0f4da8;
    --form-field-bg: rgba(6, 18, 46, 0.9);
    --form-field-border: rgba(111, 199, 255, 0.32);
    --form-field-text: #f2f7ff;
    --form-field-placeholder: rgba(155, 176, 211, 0.68);
    --form-field-focus-ring: rgba(31, 114, 242, 0.28);
    --glow-primary: rgba(16, 92, 224, 0.28);
    --glow-secondary: rgba(5, 52, 150, 0.22);
    --glow-backdrop-primary: rgba(10, 66, 168, 0.18);
    --glow-backdrop-secondary: rgba(3, 26, 92, 0.14);
    --layer-glass-border: rgba(255, 255, 255, 0.12);
    --layer-glass-border-strong: rgba(255, 255, 255, 0.28);
    --shadow-soft: 0 26px 88px -24px rgba(0, 0, 0, 0.64);
    --shadow-raised: 0 36px 116px -36px rgba(0, 0, 0, 0.78);
    --glass-blur: blur(22px);
    --product-media-figure-bg: rgba(7, 28, 66, 0.68);
    --product-media-badge-bg: rgba(30, 136, 234, 0.9);
    --product-media-badge-color: var(--color-on-primary);
    --product-media-player-bg: rgba(0, 14, 28, 0.82);
    --product-media-video-bg: #020a18;
    --product-media-controls-bg: rgba(2, 26, 56, 0.78);
    --product-media-controls-color: var(--color-on-primary);
    --product-media-button-bg: rgba(30, 136, 234, 0.92);
    --product-media-button-hover-bg: rgba(51, 153, 255, 0.98);
    --product-media-button-text: var(--color-on-primary);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/* Cross-browser base resets */
html {
    background: var(--color-bg);
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    /* scroll-behavior handled by Lenis — CSS smooth conflicts with JS smoothing */
}

body {
    margin: 0;
    font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    background: radial-gradient(circle at 22% 12%, var(--glow-backdrop-primary), transparent 58%),
        radial-gradient(circle at 78% 8%, var(--glow-backdrop-secondary), transparent 62%),
        var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    min-height: 100%;
    z-index: 0;
}

body.is-locked {
    overflow: hidden;
}

/* ── Thicker scrollbar on mobile / tablet ── */
@media (max-width: 1080px) and (pointer: coarse) {
    html {
        scrollbar-width: auto;
        scrollbar-color: var(--color-primary) transparent;
    }
    html::-webkit-scrollbar {
        width: 8px;
    }
    html::-webkit-scrollbar-track {
        background: transparent;
    }
    html::-webkit-scrollbar-thumb {
        background: var(--color-primary);
        border-radius: 4px;
    }
    html::-webkit-scrollbar-thumb:active {
        background: var(--color-primary-dark);
    }
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
    color: var(--color-primary-dark);
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: -30%;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
}

body::before {
    background: radial-gradient(circle at 30% 40%, var(--glow-primary), transparent 70%);
    animation: glowDrift 22s ease-in-out infinite;
    opacity: 0.6;
}

body::after {
    background: radial-gradient(circle at 75% 60%, var(--glow-secondary), transparent 68%);
    animation: glowOrbit 30s ease-in-out infinite;
    opacity: 0.5;
}

html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after {
    inset: -18%;
}

html[data-theme="dark"] body::before {
    background: radial-gradient(circle at 32% 42%, var(--glow-primary), transparent 58%);
    animation: glowDriftDark 24s ease-in-out infinite;
    opacity: 0.42;
}

html[data-theme="dark"] body::after {
    background: radial-gradient(circle at 72% 58%, var(--glow-secondary), transparent 56%);
    animation: glowOrbitDark 28s ease-in-out infinite;
    opacity: 0.36;
}

img {
    max-width: 100%;
    display: block;
}

main {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
}

/* Sections after welcome get vertical spacing via padding (not margin, to avoid gaps) */
.content-over-video > .welcome-over-video ~ * {
    padding-top: 100px;
}

section {
    width: 100%;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.loading-screen {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 18% 24%, rgba(13, 125, 220, 0.12), transparent 62%),
        radial-gradient(circle at 82% 20%, rgba(98, 179, 255, 0.18), transparent 70%),
        var(--color-bg);
    z-index: 2000;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

html[data-theme="dark"] .loading-screen {
    background: radial-gradient(circle at 20% 26%, rgba(43, 123, 255, 0.26), transparent 62%),
        radial-gradient(circle at 78% 18%, rgba(12, 47, 128, 0.32), transparent 70%),
        var(--color-bg);
}

.loading-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: clamp(36px, 6vw, 56px);
    border-radius: var(--radius-xl);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-raised);
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    width: min(420px, 90vw);
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

html[data-theme="dark"] .loading-shell {
    background: rgba(4, 12, 28, 0.92);
    border-color: rgba(84, 148, 255, 0.28);
    box-shadow: 0 36px 120px -42px rgba(2, 10, 32, 0.85);
}

.loading-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 50% -10%, rgba(13, 125, 220, 0.18), transparent 70%);
    opacity: 0.65;
    z-index: -1;
}

html[data-theme="dark"] .loading-shell::after {
    background: radial-gradient(circle at 50% -10%, rgba(43, 123, 255, 0.35), transparent 72%);
    opacity: 0.5;
}

.loading-shell > * {
    position: relative;
    z-index: 1;
}

.loading-logo img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.loading-text {
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text);
}

html[data-theme="dark"] .loading-text {
    color: #dbe7ff;
}

.loading-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--color-muted);
    font-weight: 500;
}

.loading-progress span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.loading-bar {
    display: inline-block;
    width: 180px;
    height: 6px;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    background: rgba(13, 125, 220, 0.12);
}

.loading-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end));
    transform: translateX(-100%);
    animation: loadingBar 1.8s ease infinite;
}

@keyframes glowDrift {
    0% { transform: translate(-8%, -6%) scale(1); opacity: 0.4; }
    50% { transform: translate(6%, 8%) scale(1.1); opacity: 0.55; }
    100% { transform: translate(-6%, -8%) scale(0.95); opacity: 0.4; }
}

@keyframes glowOrbit {
    0% { transform: translate(8%, 4%) scale(1); opacity: 0.32; }
    50% { transform: translate(-6%, -8%) scale(1.08); opacity: 0.45; }
    100% { transform: translate(8%, 4%) scale(1); opacity: 0.32; }
}

@keyframes glowDriftDark {
    0% { transform: translate(-2%, 6%) scale(1); opacity: 0.26; }
    50% { transform: translate(-4%, -9%) scale(1.1); opacity: 0.34; }
    100% { transform: translate(6%, 11%) scale(0.9); opacity: 0.26; }
}

@keyframes glowOrbitDark {
    0% { transform: translate(0, 0) scale(1); opacity: 0.24; }
    50% { transform: translate(-5%, -4%) scale(1.06); opacity: 0.32; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.24; }
}

@keyframes loadingBar {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ========================================================================
   Cookie Consent Banner
   ======================================================================== */
#cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    padding: 0;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease;
    pointer-events: none;
}
#cookie-consent-banner.cookie-consent-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
#cookie-consent-banner.cookie-consent-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}
.cookie-consent-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    background: var(--color-surface, rgba(255,255,255,0.95));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--color-border, rgba(12,31,47,0.12));
    box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
    border-radius: 16px 16px 0 0;
}
.cookie-consent-text {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
}
.cookie-consent-icon {
    flex-shrink: 0;
    color: var(--color-primary, #0d7ddc);
    margin-top: 2px;
}
.cookie-consent-text p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text, #0b1f33);
}
.cookie-consent-text strong {
    color: var(--color-primary, #0d7ddc);
}
.cookie-consent-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.cookie-consent-btn {
    padding: 0.55rem 1.25rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    white-space: nowrap;
}
.cookie-consent-btn:active {
    transform: scale(0.97);
}
.cookie-consent-accept {
    background: var(--color-primary, #0d7ddc);
    color: #fff;
    box-shadow: 0 2px 8px rgba(13,125,220,0.25);
}
.cookie-consent-accept:hover {
    background: var(--color-primary-dark, #0a5ca8);
    box-shadow: 0 4px 14px rgba(13,125,220,0.35);
}
.cookie-consent-necessary {
    background: var(--color-border, rgba(12,31,47,0.12));
    color: var(--color-text-soft, #28486a);
}
.cookie-consent-necessary:hover {
    background: var(--color-border-strong, rgba(12,31,47,0.2));
}

/* Mobile: stack vertically */
@media (max-width: 600px) {
    .cookie-consent-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        border-radius: 12px 12px 0 0;
    }
    .cookie-consent-actions {
        justify-content: stretch;
    }
    .cookie-consent-btn {
        flex: 1;
        text-align: center;
    }
}

/* ========================================================================
   Language Switcher (navbar placement)
   ======================================================================== */
.lang-switcher {
    position: relative;
    z-index: 1001;
}
.lang-switcher-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--color-border, rgba(12,31,47,0.12));
    border-radius: 8px;
    background: var(--color-surface, rgba(255,255,255,0.95));
    color: var(--color-text, #0b1f33);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    line-height: 1;
}
.lang-switcher-toggle:hover {
    border-color: var(--color-primary, #0d7ddc);
    box-shadow: 0 2px 8px rgba(13,125,220,0.12);
}
.lang-flag {
    width: 24px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.lang-code {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lang-chevron {
    font-size: 0.6rem;
    transition: transform 0.25s ease;
    margin-left: 0.15rem;
}
.lang-switcher.is-open .lang-chevron {
    transform: rotate(180deg);
}
.lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgba(12,31,47,0.12));
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    padding: 0.35rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.lang-switcher.is-open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--color-text, #0b1f33);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}
.lang-btn:hover {
    background: var(--color-border, rgba(12,31,47,0.08));
}
.lang-btn.is-active {
    background: var(--color-primary, #0d7ddc);
    color: #fff;
    font-weight: 600;
}
.lang-btn .lang-flag {
    width: 24px;
    height: 16px;
}
.lang-btn .lang-name {
    flex: 1;
}

/* ========================================================================
   Floating Theme Toggle (FAB — fixed bottom-right)
   ======================================================================== */
.theme-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.65);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(13, 125, 220, 0);
    opacity: 0;
    transform: scale(0.85) translateY(12px);
    transition: opacity 0.4s ease,
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}
.theme-fab.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.theme-fab:hover {
    border-color: var(--color-primary, #0d7ddc);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(13, 125, 220, 0.2);
    transform: scale(1.08) translateY(0);
}
.theme-fab:active {
    transform: scale(0.95) translateY(0);
}
/* SVG icons */
.theme-fab svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: absolute;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Light mode: show moon (user can switch to dark) */
.theme-fab-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}
.theme-fab-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
/* Dark mode: show sun (user can switch to light) */
[data-theme="dark"] .theme-fab-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
[data-theme="dark"] .theme-fab-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}
/* Light-theme appearance */
[data-theme="light"] .theme-fab {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(12, 31, 47, 0.1);
    color: var(--color-text, #0b1f33);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(13, 125, 220, 0);
}
[data-theme="light"] .theme-fab:hover {
    border-color: var(--color-primary, #0d7ddc);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12), 0 0 0 3px rgba(13, 125, 220, 0.15);
}
/* RTL: flip to bottom-left */
[dir="rtl"] .theme-fab {
    right: auto;
    left: 24px;
}
/* Shift up when cookie banner is visible */
#cookie-consent-banner.cookie-consent-visible ~ .theme-fab {
    bottom: 90px;
}

/* ========================================================================
   Footer Utilities Bar (lang switcher)
   ======================================================================== */
.footer-utilities {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ========================================================================
   RTL (Arabic) Overrides
   ======================================================================== */
[dir="rtl"] .lang-chevron {
    margin-left: 0;
    margin-right: 0.15rem;
}
[dir="rtl"] .lang-dropdown {
    left: auto;
    right: 0;
}
[dir="rtl"] .lang-btn {
    text-align: right;
}
[dir="rtl"] .header-inner {
    flex-direction: row-reverse;
}
[dir="rtl"] .main-nav {
    direction: rtl;
}
[dir="rtl"] #primary-menu {
    flex-direction: row-reverse;
}
[dir="rtl"] .footer-top {
    direction: rtl;
}
[dir="rtl"] .footer-brand,
[dir="rtl"] .footer-links,
[dir="rtl"] .footer-newsletter {
    text-align: right;
}
[dir="rtl"] .footer-bottom {
    flex-direction: row-reverse;
}
[dir="rtl"] .footer-utilities {
    flex-direction: row-reverse;
}
[dir="rtl"] .catalog-controls {
    flex-direction: row-reverse;
}
[dir="rtl"] .viewer-layout {
    direction: rtl;
}
[dir="rtl"] .viewer-sidebar {
    text-align: right;
}

/* ── RTL Hero overrides ── */
[dir="rtl"] .hero-content {
    text-align: right;
}
[dir="rtl"] .hero-actions {
    direction: rtl;
}
[dir="rtl"] .hero-kicker {
    direction: rtl;
    unicode-bidi: plaintext;
}
[dir="rtl"] .hero-title {
    direction: rtl;
    unicode-bidi: plaintext;
}
[dir="rtl"] .hero-subtitle {
    direction: rtl;
    unicode-bidi: plaintext;
}
[dir="rtl"] .section-heading {
    text-align: right;
    direction: rtl;
}
[dir="rtl"] .eyebrow {
    direction: rtl;
}
[dir="rtl"] .eyebrow::before {
    order: 1;
}
@media (max-width: 1080px) {
    [dir="rtl"] .hero-content {
        text-align: center;
        align-items: center;
    }
    [dir="rtl"] .section-heading {
        text-align: center;
    }
}

/* ── RTL slider overrides ─────────────────────────────────── */
[dir="rtl"] .slider-btn.prev {
    order: 2;
}
[dir="rtl"] .slider-btn.next {
    order: 0;
}
[dir="rtl"] .slider-track {
    direction: rtl;
}

/* Mobile RTL */
@media (max-width: 768px) {
    [dir="rtl"] .slider-track {
        padding-right: 0;
        padding-left: 16px;
    }
    [dir="rtl"] .mobile-scroll-hint {
        justify-self: start;
        border-radius: 0 12px 12px 0;
        padding: 12px 16px 12px 8px;
    }
    [dir="rtl"] .mobile-scroll-hint svg {
        animation: hint-slide-rtl 1.5s infinite ease-in-out;
    }
    @keyframes hint-slide-rtl {
        0%, 100% { transform: translateX(0); opacity: 0.6; }
        50% { transform: translateX(-6px); opacity: 1; }
    }
}

/* RTL product-card overlay – flip to left side */
[dir="rtl"] .product-card-media-overlay {
    right: auto !important;
    left: 16px;
    align-items: flex-end;
}

/* RTL product-card body & detail fixes */
[dir="rtl"] .product-card-body {
    text-align: right;
}
[dir="rtl"] .product-card-header {
    text-align: right;
}
[dir="rtl"] .product-card-header h3,
[dir="rtl"] .product-card-body > p,
[dir="rtl"] .product-card-category,
[dir="rtl"] .product-card-media-label,
[dir="rtl"] .product-card-detail-list li,
[dir="rtl"] .product-card-note,
[dir="rtl"] .product-card-toggle,
[dir="rtl"] .product-card-back,
[dir="rtl"] .product-card-detail-header span,
[dir="rtl"] .product-card-footer .btn {
    unicode-bidi: plaintext;
}
[dir="rtl"] .product-card-toggle {
    flex-direction: row-reverse;
}
[dir="rtl"] .product-card-detail-header {
    flex-direction: row-reverse;
}
[dir="rtl"] .product-card-detail-list {
    padding: 0 34px 18px 22px;
    direction: rtl;
}
[dir="rtl"] .product-card-footer {
    text-align: right;
}
[dir="rtl"] .product-card-category {
    text-align: right;
}
[dir="rtl"] .product-card-video__controls {
    flex-direction: row-reverse;
}

/* RTL lang switcher in navbar */
[dir="rtl"] .lang-switcher-toggle .lang-chevron {
    margin-left: 0;
    margin-right: 0.15rem;
}
[dir="rtl"] .lang-dropdown {
    right: auto;
    left: 0;
}
[dir="rtl"] .lang-btn {
    text-align: right;
    flex-direction: row-reverse;
}