/*
|--------------------------------------------------------------------------
| GL ARABIC FULL PARITY PACK V1
|--------------------------------------------------------------------------
| Arabic public-site visual parity only.
| English mode remains untouched.
|--------------------------------------------------------------------------
*/


html[dir="rtl"]{
    direction:rtl;
}


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


/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea{
    font-family:
        "Noto Kufi Arabic",
        "Noto Sans Arabic",
        "Tahoma",
        "Arial",
        sans-serif;
}


html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] li{
    text-align:right;
}


html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3{
    line-height:1.42;
}


html[dir="rtl"] p,
html[dir="rtl"] li{
    line-height:1.9;
}


/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */

html[dir="rtl"] .public-navigation{
    direction:rtl;
    text-align:right;
}


html[dir="rtl"] .nav-item{
    text-align:right;
}


html[dir="rtl"] .nav-dropdown{
    direction:rtl;
    text-align:right;
}


html[dir="rtl"] .header-actions{
    direction:rtl;
}


html[dir="rtl"] .language-switcher{
    direction:ltr;
}


html[dir="rtl"] .header-cta{
    background:
        linear-gradient(
            225deg,
            #FFB347 0%,
            #FF980F 18%,
            #FF8B00 43%,
            #E87300 72%,
            #B84E00 100%
        ) !important;
}


/* =========================================================
   GENERIC RTL FLEX / GRID PARITY
   ========================================================= */

html[dir="rtl"] .gl-service-grid,
html[dir="rtl"] .gl-services-grid,
html[dir="rtl"] .gls-grid,
html[dir="rtl"] .gla-grid,
html[dir="rtl"] .gl-store-grid,
html[dir="rtl"] .gl-store-category-row,
html[dir="rtl"] .gl-projects-grid,
html[dir="rtl"] .gl-insights-grid{
    direction:rtl;
}


html[dir="rtl"] .gl-service-card,
html[dir="rtl"] .foundation-card,
html[dir="rtl"] .gl-store-card,
html[dir="rtl"] .gl-store-category{
    direction:rtl;
    text-align:right;
}


/* =========================================================
   MIRRORED PREMIUM CARD ACCENT
   ========================================================= */

html[dir="rtl"] .foundation-card{
    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(255,139,0,.075),
            transparent 34%
        ),
        linear-gradient(
            215deg,
            rgba(25,26,29,.94) 0%,
            rgba(14,15,17,.97) 52%,
            rgba(7,8,10,.99) 100%
        ) !important;
}


html[dir="rtl"] .gl-store-category:hover,
html[dir="rtl"] .gl-store-category.active{
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(227,155,56,.15),
            transparent 55%
        ),
        linear-gradient(
            215deg,
            #16130f,
            #0c0c0c
        ) !important;
}


/* =========================================================
   HOME SERVICE CARDS
   ========================================================= */

html[dir="rtl"] .gl-home .gl-service-card{
    direction:rtl;
    text-align:right;
}


html[dir="rtl"] .gl-home .gl-service-card h2,
html[dir="rtl"] .gl-home .gl-service-card h3,
html[dir="rtl"] .gl-home .gl-service-card h4,
html[dir="rtl"] .gl-home .gl-service-card p{
    text-align:right !important;
}


html[dir="rtl"] .gl-home .gl-service-card [class*="number"],
html[dir="rtl"] .gl-home .gl-service-card [class*="index"]{
    direction:ltr;
}


/* =========================================================
   PRODUCTS / STORE
   ========================================================= */

html[dir="rtl"] .gl-store-v2{
    direction:rtl;
}


html[dir="rtl"] .gl-store-breadcrumbs,
html[dir="rtl"] .gl-store-hero-grid,
html[dir="rtl"] .gl-store-head,
html[dir="rtl"] .gl-store-tools,
html[dir="rtl"] .gl-store-subcats,
html[dir="rtl"] .gl-store-pagination{
    direction:rtl;
}


html[dir="rtl"] .gl-store-body{
    direction:rtl;
    text-align:right;
}


html[dir="rtl"] .gl-store-meta,
html[dir="rtl"] .gl-store-title,
html[dir="rtl"] .gl-store-sku,
html[dir="rtl"] .gl-store-price-row,
html[dir="rtl"] .gl-store-actions{
    direction:rtl;
    text-align:right;
}


html[dir="rtl"] .gl-store-title{
    unicode-bidi:plaintext;
}


html[dir="rtl"] .gl-store-badges{
    direction:rtl;
}


html[dir="rtl"] .gl-store-category strong,
html[dir="rtl"] .gl-store-category span{
    text-align:right;
}


html[dir="rtl"] .gl-store-tools input,
html[dir="rtl"] .gl-store-tools select{
    direction:rtl;
    text-align:right;
}


/* =========================================================
   FORMS
   ========================================================= */

html[dir="rtl"] form{
    direction:rtl;
}


html[dir="rtl"] label{
    text-align:right;
}


html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select{
    text-align:right;
}


html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"]{
    direction:ltr;
}


/* =========================================================
   TABLES / CART / CHECKOUT
   ========================================================= */

html[dir="rtl"] table{
    direction:rtl;
}


html[dir="rtl"] th,
html[dir="rtl"] td{
    text-align:right;
}


html[dir="rtl"] .glc-layout,
html[dir="rtl"] .glco-layout,
html[dir="rtl"] .glc-summary,
html[dir="rtl"] .glco-summary{
    direction:rtl;
    text-align:right;
}


/* =========================================================
   PROJECTS / INSIGHTS / TESTIMONIALS / ABOUT
   ========================================================= */

html[dir="rtl"] .gl-projects-shell,
html[dir="rtl"] .gl-detail-shell,
html[dir="rtl"] .gl-insights-shell,
html[dir="rtl"] .gl-article-shell,
html[dir="rtl"] .glab-shell,
html[dir="rtl"] .gla-shell,
html[dir="rtl"] .gls-shell{
    direction:rtl;
    text-align:right;
}


/* =========================================================
   ICON / ARROW FLOW
   ========================================================= */

html[dir="rtl"] a,
html[dir="rtl"] button{
    unicode-bidi:plaintext;
}


html[dir="rtl"] .gl-ar-full-v1-ltr{
    direction:ltr !important;
    unicode-bidi:isolate;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:1050px){

    html[dir="rtl"] .public-navigation{
        direction:rtl;
        text-align:right;
        align-items:stretch;
    }

}


@media(max-width:760px){

    html[dir="rtl"] .gl-store-category-row{
        direction:rtl;
    }

    html[dir="rtl"] .gl-store-grid{
        direction:rtl;
    }

}


@media(max-width:520px){

    html[dir="rtl"] .gl-store-card,
    html[dir="rtl"] .gl-service-card{
        text-align:right;
    }

}


/*
|--------------------------------------------------------------------------
| GL ARABIC UTILITY DOCK MIRROR V3
|--------------------------------------------------------------------------
| English desktop dock stays on the right.
| Arabic desktop mirrors the complete utility stack to the left.
| Existing tablet/mobile dock behaviour remains untouched.
|--------------------------------------------------------------------------
*/

@media (min-width: 1051px) {

    html[dir="rtl"] #gl-utility-dock-v5 {
        right: auto !important;
        left: 18px !important;
    }

}


/*
|--------------------------------------------------------------------------
| GL ARABIC LIVE UTILITY STACK V3B
|--------------------------------------------------------------------------
| The old #gl-utility-dock-v5 is intentionally hidden by the global layout.
| The visible desktop stack is #gl-wa-native-stack-v11.
| Mirror only the REAL live stack for Arabic desktop.
|--------------------------------------------------------------------------
*/

@media (min-width: 1051px) {

    html[dir="rtl"] #gl-wa-native-stack-v11 {
        right: auto !important;
        left: 18px !important;
    }

}



/*
|--------------------------------------------------------------------------
| GL ARABIC DESKTOP DEVICE DOCK V4
|--------------------------------------------------------------------------
| Fine-pointer / hover-capable desktop browsers keep the integration
| stack vertical on the left even when browser scaling makes the
| CSS viewport narrower than 1051px.
|--------------------------------------------------------------------------
*/

@media (hover: hover) and (pointer: fine) {

    html[dir="rtl"] #gl-wa-native-stack-v11 {
        position: fixed !important;

        top: auto !important;
        right: auto !important;
        left: 18px !important;
        bottom: 18px !important;

        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 7px !important;

        width: auto !important;
        height: auto !important;

        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;
        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

}



/*
|--------------------------------------------------------------------------
| GL ARABIC BLACK35 GOLD75 THEME V7B
|--------------------------------------------------------------------------
| Arabic RTL visual direction:
| LEFT  = black dominant
| 35%   = black holding point
| 75%   = gold dominance point
| RIGHT = premium Gulf Light gold
|
| English mode remains untouched.
|--------------------------------------------------------------------------
*/


/* =========================================================
   ARABIC HEADER — TRUE RTL COLOR MIRROR
   ========================================================= */

html[dir="rtl"]
body
header.public-header.gl-commerce-header{

    background:
        linear-gradient(
            90deg,

            #090a0b 0%,

            #111214 35%,

            #4f4333 62%,

            #a88d67 75%,

            #d2b789 100%
        )
        !important;

}


/*
 * Keep navigation transparent so the mirrored header
 * gradient remains continuous across the full width.
 */

html[dir="rtl"]
body
header.public-header.gl-commerce-header
.public-navigation{

    background:
        transparent
        !important;

}


/* =========================================================
   ARABIC PRODUCTS BODY — BLACK -> GOLD RTL DEPTH
   ========================================================= */

html[dir="rtl"]
body
.gl-store-v2{

    background:

        radial-gradient(
            circle at 88% 12%,

            rgba(205,164,96,.22) 0%,

            rgba(169,128,67,.12) 26%,

            rgba(111,79,39,.055) 42%,

            transparent 58%
        ),

        linear-gradient(
            90deg,

            #050607 0%,

            #08090a 35%,

            #0d0c0a 58%,

            #171109 75%,

            #211609 100%
        )

        !important;

}


/* =========================================================
   HERO GOLD BALANCE
   ========================================================= */

html[dir="rtl"]
body
.gl-store-v2
.gl-store-hero{

    background:

        radial-gradient(
            circle at 92% 18%,

            rgba(214,166,88,.18) 0%,

            rgba(154,109,49,.08) 31%,

            transparent 57%
        )

        !important;

}


/* =========================================================
   CATEGORY / FILTER DARK-GOLD DEPTH
   ========================================================= */

html[dir="rtl"]
body
.gl-store-v2
.gl-store-tools{

    background:

        linear-gradient(
            90deg,

            rgba(8,9,10,.96) 0%,

            rgba(12,12,12,.96) 35%,

            rgba(25,20,13,.96) 75%,

            rgba(37,27,15,.96) 100%
        )

        !important;

}


html[dir="rtl"]
body
.gl-store-v2
.gl-store-category{

    background:

        linear-gradient(
            90deg,

            #0b0c0d 0%,

            #101112 35%,

            #17130e 75%,

            #1e170e 100%
        )

        !important;

}


/* Active category gets stronger Gulf Light gold edge */

html[dir="rtl"]
body
.gl-store-v2
.gl-store-category:hover,

html[dir="rtl"]
body
.gl-store-v2
.gl-store-category.active{

    background:

        radial-gradient(
            circle at 100% 0%,

            rgba(226,167,76,.19),

            transparent 52%
        ),

        linear-gradient(
            90deg,

            #0b0c0d 0%,

            #111111 35%,

            #241b10 75%,

            #34220e 100%
        )

        !important;

}


/* =========================================================
   SERVICE CONTEXT / PAGINATION SAME COLOR LANGUAGE
   ========================================================= */

html[dir="rtl"]
body
.gl-store-v2
.gl-store-pagination,

html[dir="rtl"]
body
.gl-store-v2
.gl-store-foot-note{

    background:

        linear-gradient(
            90deg,

            rgba(7,8,9,.97) 0%,

            rgba(11,11,11,.97) 35%,

            rgba(22,17,11,.97) 75%,

            rgba(30,21,11,.97) 100%
        )

        !important;

}