/* =============================================================================
   TechZone — Mobile Switchers
   Based on actual WOOCS HTML structure (from devtools):

   <nav class="woocs_auto_switcher cd-stretchy-nav right nav-is-visible">
     <a class="cd-nav-trigger" href="#">
       <span class="woocs_current_text">USD <img class="flag_auto_switcher" /></span>
     </a>
     <ul>
       <li>
         <a class="woocs_curr_curr woocs_auto_switcher_link">
           <span class="woocs_add_field"> US Dollar </span>
           <span class="woocs_base_text">USD <img class="flag_auto_switcher" /></span>
         </a>
       </li>
       ...
     </ul>
     <span class="stretchy-nav-bg"></span>
   </nav>

   1. Currency floating → compact flag-only pill (mobile/tab ≤1024px)
   2. GT floating → hide on desktop, show only on mobile/tab
   ============================================================================= */


/* =============================================================================
   1. CURRENCY FLOATING SWITCHER — compact on mobile/tablet
   ============================================================================= */

@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;  /* so flag isn't clipped */
        display:        flex   !important;
        align-items:    center !important;
        justify-content: center !important;
        padding:        0     !important;
    }

    /* ── woocs_current_text span: 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;  /* hide "USD" text */
        font-size:   0       !important;      /* collapse text spacing */
        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: the white expanding background circle ────────
       This is a <span aria-hidden="true"> positioned absolutely inside the nav.
       Plugin sets background-color on it. We need it transparent in closed
       state but visible when expanded.                                    ── */
    .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;
        /* Override any inline left/top that misaligns the bg */
        right:            0    !important;
        left:             auto !important;
    }

    /* ── Expanded state: let bg grow to wrap all items ──────────────── */
    .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: compact spacing, push below the 36px trigger ──────── */
    .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;   /* flag side on the right */
        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 — the long label e.g. "US Dollar" ──────────── */
    .woocs_auto_switcher.cd-stretchy-nav ul a .woocs_add_field {
        color:          #333  !important;
        font-size:      12px  !important;
        font-weight:    500   !important;
        /* red text from plugin: override */
        color:          #1a1a1a !important;
        opacity:        1     !important;
        transform:      none  !important;
        display:        inline !important;
    }

    /* ── woocs_base_text — "USD <flag>" on the right ─────────────────── */
    .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;   /* subtle active indicator */
        font-weight: 600     !important;
    }

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


/* =============================================================================
   2. GOOGLE TRANSLATE FLOATING
   Desktop (>1024px) → floating GT hidden; topbar inline widget is used.
   Mobile/Tab (≤1024px) → topbar GT hidden; floating widget is shown.
   ============================================================================= */

/* Desktop: hide the floating wrapper */
@media (min-width: 1025px) {
    body > #gt_float_wrapper {
        display: none !important;
    }
    /* Catch any stray .gt_float_switcher not inside our topbar slot */
    body > .gtranslate_wrapper {
        display: none !important;
    }
}

/* Mobile/Tab: hide topbar GT slot (topbar itself is collapsed/hidden on mobile) */
@media (max-width: 1024px) {
    .tz-gt-topbar-item {
        display: none !important;
    }
    /* Ensure floating wrapper is visible */
    body > #gt_float_wrapper,
    .gtranslate_wrapper:not(.tz-gt-topbar-item .gtranslate_wrapper) {
        display: block !important;
    }
}