/* =============================================================================
   TechZone — Mobile Switchers
   1. WOOCS currency floating widget  → compact flag-only pill on mobile/tablet
   2. Google Translate (GTranslate)   → completely hidden on mobile (≤860px)
                                        hidden at body level on all screens
                                        (homepage nav bar uses topbar slot on desktop)
   3. Horizontal overflow lock        → prevents WOOCS/GT fixed elements from
                                        creating a scrollable right gap
   ============================================================================= */

/* =============================================================================
   GLOBAL OVERFLOW LOCK
   Stops any position:fixed element with right:2% or right:20px from creating
   a horizontal scrollbar. Using clip instead of hidden preserves sticky/fixed.
   ============================================================================= */
html {
    overflow-x: clip; /* clips without affecting position:fixed stacking */
    max-width: 100vw;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* =============================================================================
   WOOCS AUTO-SWITCHER — kill the floating pill entirely on desktop too
   It only needs to show on mobile via our mobile-switchers styles below.
   On desktop it's in the nav plugins bar as a [woocs] shortcode (different render).
   ============================================================================= */

/* The floating cd-stretchy-nav is what causes the overflow — clamp it */
.woocs_auto_switcher.cd-stretchy-nav {
    max-width: calc(100vw - 16px) !important;
    right: 8px !important;   /* was 2% — now a safe fixed pixel value */
    box-sizing: border-box !important;
}

/* The stretchy-nav-bg must not exceed viewport */
.woocs_auto_switcher.cd-stretchy-nav .stretchy-nav-bg {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* The expanded list must not overflow right */
.woocs_auto_switcher.cd-stretchy-nav ul a {
    max-width: calc(100vw - 80px) !important;
    box-sizing: border-box !important;
}

/* =============================================================================
   GT FLOAT WRAPPER — always clip, never overflow
   GTranslate injects position:fixed;right:20px inline on #gt_float_wrapper.
   We can't beat inline styles with normal CSS — but we CAN use the body
   overflow-x:hidden + max-width to prevent the page from expanding.
   Additionally, set our own safe right value.
   ============================================================================= */
#gt_float_wrapper {
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
}


/* =============================================================================
   1. CURRENCY FLOATING SWITCHER — compact on mobile/tablet (≤1024px)
   ============================================================================= */

@media (max-width: 1024px) {

    /* Nav container: keep fixed positioning from plugin, just z-index */
    .woocs_auto_switcher.cd-stretchy-nav {
        z-index: 9998 !important;
    }

    /* Trigger button: shrink to a small 36px flag pill */
    .woocs_auto_switcher.cd-stretchy-nav .cd-nav-trigger {
        width:           36px !important;
        height:          36px !important;
        border-radius:   50%  !important;
        background:      rgba(255,255,255,0.95) !important;
        box-shadow:      0 2px 8px rgba(0,0,0,0.20) !important;
        overflow:        visible !important;
        display:         flex !important;
        align-items:     center !important;
        justify-content: center !important;
        padding:         0 !important;
    }

    /* woocs_current_text: centre it, hide the "USD" text */
    .woocs_auto_switcher.cd-stretchy-nav .cd-nav-trigger .woocs_current_text {
        position:        static !important;
        transform:       none !important;
        display:         flex !important;
        align-items:     center !important;
        justify-content: center !important;
        width:           100% !important;
        height:          100% !important;
        color:           transparent !important;
        font-size:       0 !important;
        white-space:     nowrap !important;
    }

    /* Flag image inside the trigger */
    .woocs_auto_switcher.cd-stretchy-nav .cd-nav-trigger .woocs_current_text img.flag_auto_switcher {
        width:         22px !important;
        height:        16px !important;
        object-fit:    cover !important;
        border-radius: 2px !important;
        display:       block !important;
        margin:        0 !important;
        flex-shrink:   0 !important;
    }

    /* stretchy-nav-bg */
    .woocs_auto_switcher.cd-stretchy-nav .stretchy-nav-bg {
        background-color: rgba(255,255,255,0.95) !important;
        border-radius:    18px !important;
        box-shadow:       none !important;
        width:            36px !important;
        height:           36px !important;
        right:            0 !important;
        left:             auto !important;
    }

    /* Expanded state */
    .woocs_auto_switcher.cd-stretchy-nav.nav-is-visible .stretchy-nav-bg {
        width:         100% !important;
        height:        100% !important;
        border-radius: 18px !important;
        box-shadow:    0 4px 18px rgba(0,0,0,0.18) !important;
    }

    /* UL list */
    .woocs_auto_switcher.cd-stretchy-nav ul {
        padding:    44px 0 6px !important;
        margin:     0 !important;
        list-style: none !important;
    }

    /* Each link row */
    .woocs_auto_switcher.cd-stretchy-nav ul a {
        display:         flex !important;
        align-items:     center !important;
        justify-content: flex-end !important;
        gap:             6px !important;
        height:          36px !important;
        line-height:     36px !important;
        padding:         0 8px 0 10px !important;
        font-size:       12px !important;
        white-space:     nowrap !important;
        text-decoration: none !important;
    }

    /* woocs_add_field — long label e.g. "US Dollar" */
    .woocs_auto_switcher.cd-stretchy-nav ul a .woocs_add_field {
        color:       #1a1a1a !important;
        font-size:   12px !important;
        font-weight: 500 !important;
        opacity:     1 !important;
        transform:   none !important;
        display:     inline !important;
    }

    /* woocs_base_text — "USD <flag>" */
    .woocs_auto_switcher.cd-stretchy-nav ul a .woocs_base_text {
        position:    static !important;
        transform:   none !important;
        display:     inline-flex !important;
        align-items: center !important;
        gap:         3px !important;
        width:       auto !important;
        font-size:   11px !important;
        color:       #666 !important;
        opacity:     1 !important;
        white-space: nowrap !important;
    }

    /* Flags in the list */
    .woocs_auto_switcher.cd-stretchy-nav ul a .woocs_base_text img.flag_auto_switcher {
        width:          18px !important;
        height:         13px !important;
        object-fit:     cover !important;
        border-radius:  2px !important;
        display:        inline-block !important;
        vertical-align: middle !important;
        margin:         0 !important;
        flex-shrink:    0 !important;
    }

    /* Active currency highlight */
    .woocs_auto_switcher.cd-stretchy-nav ul a.woocs_curr_curr .woocs_add_field {
        color:       #c0392b !important;
        font-weight: 600 !important;
    }

} /* end @media (max-width: 1024px) */


/* =============================================================================
   2. GOOGLE TRANSLATE — hide on mobile, hide body-level float on all screens
   ============================================================================= */

/* Always hide the body-level floating GT wrapper — we use the nav topbar slot */
body > #gt_float_wrapper,
body > .gtranslate_wrapper {
    display: none !important;
}

/* On mobile (≤860px): also hide the topbar GT slot + any remaining GT elements */
@media (max-width: 860px) {
    .tz-gt-topbar-item,
    #gt_float_wrapper,
    .gtranslate_wrapper,
    .gt_float_switcher,
    [id*="gt_float"],
    [class*="gt_float"] {
        display: none !important;
    }
}



/* =============================================================================
   1. CURRENCY FLOATING SWITCHER — compact on mobile/tablet (≤1024px)
   ============================================================================= */

@media (max-width: 1024px) {

    /* Nav container: keep fixed positioning from plugin, just z-index */
    .woocs_auto_switcher.cd-stretchy-nav {
        z-index: 9998 !important;
    }

    /* Trigger button: shrink to a small 36px flag pill */
    .woocs_auto_switcher.cd-stretchy-nav .cd-nav-trigger {
        width:           36px !important;
        height:          36px !important;
        border-radius:   50%  !important;
        background:      rgba(255,255,255,0.95) !important;
        box-shadow:      0 2px 8px rgba(0,0,0,0.20) !important;
        overflow:        visible !important;
        display:         flex !important;
        align-items:     center !important;
        justify-content: center !important;
        padding:         0 !important;
    }

    /* woocs_current_text: centre it, hide the "USD" text */
    .woocs_auto_switcher.cd-stretchy-nav .cd-nav-trigger .woocs_current_text {
        position:        static !important;
        transform:       none !important;
        display:         flex !important;
        align-items:     center !important;
        justify-content: center !important;
        width:           100% !important;
        height:          100% !important;
        color:           transparent !important;
        font-size:       0 !important;
        white-space:     nowrap !important;
    }

    /* Flag image inside the trigger */
    .woocs_auto_switcher.cd-stretchy-nav .cd-nav-trigger .woocs_current_text img.flag_auto_switcher {
        width:         22px !important;
        height:        16px !important;
        object-fit:    cover !important;
        border-radius: 2px !important;
        display:       block !important;
        margin:        0 !important;
        flex-shrink:   0 !important;
    }

    /* stretchy-nav-bg */
    .woocs_auto_switcher.cd-stretchy-nav .stretchy-nav-bg {
        background-color: rgba(255,255,255,0.95) !important;
        border-radius:    18px !important;
        box-shadow:       none !important;
        width:            36px !important;
        height:           36px !important;
        right:            0 !important;
        left:             auto !important;
    }

    /* Expanded state */
    .woocs_auto_switcher.cd-stretchy-nav.nav-is-visible .stretchy-nav-bg {
        width:         100% !important;
        height:        100% !important;
        border-radius: 18px !important;
        box-shadow:    0 4px 18px rgba(0,0,0,0.18) !important;
    }

    /* UL list */
    .woocs_auto_switcher.cd-stretchy-nav ul {
        padding:    44px 0 6px !important;
        margin:     0 !important;
        list-style: none !important;
    }

    /* Each link row */
    .woocs_auto_switcher.cd-stretchy-nav ul a {
        display:         flex !important;
        align-items:     center !important;
        justify-content: flex-end !important;
        gap:             6px !important;
        height:          36px !important;
        line-height:     36px !important;
        padding:         0 8px 0 10px !important;
        font-size:       12px !important;
        white-space:     nowrap !important;
        text-decoration: none !important;
    }

    /* woocs_add_field — long label e.g. "US Dollar" */
    .woocs_auto_switcher.cd-stretchy-nav ul a .woocs_add_field {
        color:       #1a1a1a !important;
        font-size:   12px !important;
        font-weight: 500 !important;
        opacity:     1 !important;
        transform:   none !important;
        display:     inline !important;
    }

    /* woocs_base_text — "USD <flag>" */
    .woocs_auto_switcher.cd-stretchy-nav ul a .woocs_base_text {
        position:    static !important;
        transform:   none !important;
        display:     inline-flex !important;
        align-items: center !important;
        gap:         3px !important;
        width:       auto !important;
        font-size:   11px !important;
        color:       #666 !important;
        opacity:     1 !important;
        white-space: nowrap !important;
    }

    /* Flags in the list */
    .woocs_auto_switcher.cd-stretchy-nav ul a .woocs_base_text img.flag_auto_switcher {
        width:          18px !important;
        height:         13px !important;
        object-fit:     cover !important;
        border-radius:  2px !important;
        display:        inline-block !important;
        vertical-align: middle !important;
        margin:         0 !important;
        flex-shrink:    0 !important;
    }

    /* Active currency highlight */
    .woocs_auto_switcher.cd-stretchy-nav ul a.woocs_curr_curr .woocs_add_field {
        color:       #c0392b !important;
        font-weight: 600 !important;
    }

} /* end @media (max-width: 1024px) */


/* =============================================================================
   2. GOOGLE TRANSLATE — hide on mobile, hide body-level float on all screens
   ============================================================================= */

/* Always hide the body-level floating GT wrapper — we use the nav topbar slot */
body > #gt_float_wrapper,
body > .gtranslate_wrapper {
    display: none !important;
}

/* On mobile (≤860px): also hide the topbar GT slot + any remaining GT elements */
@media (max-width: 860px) {
    .tz-gt-topbar-item,
    #gt_float_wrapper,
    .gtranslate_wrapper,
    .gt_float_switcher,
    [id*="gt_float"],
    [class*="gt_float"] {
        display: none !important;
    }
}