/* =============================================================================
   TechZone — Google Translate in Topbar
   Targets GT's injected CSS from float.js exactly (sourced from plugin source).
   Goal: transparent, compact, identical to the currency switcher in ecomus.
   ============================================================================= */

/* ── 1. Our shell ─────────────────────────────────────────────────────────── */
.tz-gt-topbar-item {
    display:      flex;
    align-items:  center;
    height:       100%;
    position:     relative;
    margin-right: 4px;
}

/* ── 2. GT wrapper div ────────────────────────────────────────────────────── */
.tz-gt-topbar-item .gtranslate_wrapper {
    display:     flex;
    align-items: center;
    height:      100%;
    margin:      0;
    padding:     0;
}

/* ── 3. #gt_float_wrapper — inline mode has NO position:fixed by default ────
   When switcher_horizontal_position == 'inline', GT does NOT add position:fixed
   to #gt_float_wrapper (line 130 of float.js). Our JS strips it as a failsafe. */
.tz-gt-topbar-item #gt_float_wrapper {
    display:      flex        !important;
    align-items:  center      !important;
    position:     static      !important;
    top:          auto        !important;
    left:         auto        !important;
    right:        auto        !important;
    bottom:       auto        !important;
    z-index:      auto        !important;
    opacity:      1           !important;
    margin:       0           !important;
    padding:      0           !important;
    width:        auto        !important;
    height:       auto        !important;
}

/* ── 4. .gt_float_switcher — kill the white card (GT line 95) ───────────────
   GT injects: background:#fff; box-shadow:0 5px 15px rgba(0,0,0,.15);
               border-radius:2px; font-size:20px; overflow:hidden;           */
.tz-gt-topbar-item .gt_float_switcher {
    background:        transparent !important;
    background-color:  transparent !important;
    box-shadow:        none        !important;
    -webkit-box-shadow: none       !important;
    border-radius:     0           !important;
    overflow:          visible     !important;
    font-size:         13px        !important;
    line-height:       1           !important;
    color:             #fff        !important;

    display:     flex     !important;
    align-items: center   !important;
    position:    static   !important;
    padding:     0        !important;
    margin:      0        !important;
    width:       auto     !important;
    height:      auto     !important;
    min-width:   0        !important;
    min-height:  0        !important;
    border:      none     !important;
    cursor:      pointer;
}

/* ── 5. .gt-selected — the trigger row (flag + EN + arrow) ──────────────────
   GT injects: background-color:#fff; padding:10px 15px; font-size:20px     */
.tz-gt-topbar-item .gt_float_switcher .gt-selected {
    background:       transparent !important;
    background-color: transparent !important;
    display:          flex        !important;
    align-items:      center      !important;
    position:         static      !important;
    float:            none        !important;
    overflow:         visible     !important;
    padding:          0 8px       !important;
    cursor:           pointer;
}

/* ── 6. .gt-current-lang — flag + code text container ───────────────────────
   GT injects: padding:10px 15px; color:#333; font-weight:bold; font-size:20px */
.tz-gt-topbar-item .gt_float_switcher .gt-current-lang {
    display:     flex    !important;
    align-items: center  !important;
    gap:         5px     !important;
    padding:     0       !important;   /* kills GT's 10px 15px padding */
    color:       #fff    !important;
    font-size:   13px    !important;
    font-weight: 500     !important;
    line-height: 1       !important;
    white-space: nowrap  !important;
}

/* ── 7. Flag image ────────────────────────────────────────────────────────── */
/* GT injects: width:33px; margin:0 5px 0 0; (line 96 float.js) */
.tz-gt-topbar-item .gt_float_switcher .gt-current-lang img {
    width:         20px  !important;
    height:        14px  !important;
    object-fit:    cover !important;
    border-radius: 2px   !important;
    display:       block !important;
    margin:        0     !important;   /* kills GT's margin */
    flex-shrink:   0     !important;
}

/* ── 8. Language code text e.g. "EN" ─────────────────────────────────────── */
.tz-gt-topbar-item .gt_float_switcher .gt-lang-code {
    font-size:      13px   !important;
    font-weight:    500    !important;
    text-transform: uppercase;
    color:          #fff   !important;
    position:       static !important;  /* GT sets position:relative; top:2px */
    top:            auto   !important;
}

/* ── 9. Chevron arrow ─────────────────────────────────────────────────────── */
/* GT injects an SVG background-image arrow (line 126). Override with CSS only */
.tz-gt-topbar-item .gt_float_switcher .gt_float_switcher-arrow {
    display:             inline-block    !important;
    width:               10px            !important;
    height:              10px            !important;
    vertical-align:      middle          !important;

    /* Replace GT's dark SVG arrow with a white one */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'><path d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z' style='fill:%23ffffff'/></svg>") !important;
    background-position: 50% !important;
    background-size:     8px !important;
    background-repeat:   no-repeat !important;
    margin-left:         2px !important;
    flex-shrink:         0   !important;
    transition:          transform 0.3s !important;
}

/* Rotate arrow when open */
.tz-gt-topbar-item .gt_float_switcher .gt_float_switcher-arrow.gt_arrow_rotate {
    transform: rotate(180deg) !important;
}

/* ── 10. Hover ────────────────────────────────────────────────────────────── */
.tz-gt-topbar-item .gt_float_switcher:hover .gt-current-lang {
    opacity: 0.75;
}

/* ── 11. Dropdown .gt_options panel ──────────────────────────────────────────
   GT sets position:relative + transform slide-in. We reposition absolutely.  */
.tz-gt-topbar-item .gt_float_switcher .gt_options {
    position:      absolute     !important;
    top:           calc(100% + 6px) !important;
    right:         0            !important;
    left:          auto         !important;
    bottom:        auto         !important;
    float:         none         !important;
    z-index:       99999        !important;
    transform:     none         !important;  /* kill GT's translateY slide */

    background:    #fff         !important;
    border:        1px solid #e5e5e5 !important;
    border-radius: 6px          !important;
    box-shadow:    0 6px 20px rgba(0,0,0,0.10) !important;
    min-width:     150px        !important;
    max-width:     none         !important;
    max-height:    320px        !important;
    overflow-y:    auto         !important;
    padding:       4px 0        !important;
    margin:        0            !important;
    white-space:   nowrap       !important;
    opacity:       0;
    transition:    opacity 0.2s, transform 0s !important;
}

.tz-gt-topbar-item .gt_float_switcher .gt_options.gt-open {
    opacity: 1 !important;
    transform: none !important;
}

/* Each language link */
.tz-gt-topbar-item .gt_float_switcher .gt_options a {
    display:         flex        !important;
    align-items:     center      !important;
    gap:             8px         !important;
    padding:         7px 14px    !important;
    color:           #444        !important;
    font-size:       13px        !important;
    font-weight:     400         !important;
    text-decoration: none        !important;
}
.tz-gt-topbar-item .gt_float_switcher .gt_options a:hover {
    background: #f5f5f5 !important;
    color:      #333    !important;
}
.tz-gt-topbar-item .gt_float_switcher .gt_options a img {
    width:         20px  !important;
    height:        14px  !important;
    object-fit:    cover !important;
    border-radius: 2px   !important;
    margin:        0     !important;
    flex-shrink:   0     !important;
}

/* ── 12. Hide any GT float wrapper rendered OUTSIDE our topbar slot ───────── */
body > #gt_float_wrapper {
    display: none !important;
}

/* ── 13. Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .tz-gt-topbar-item { margin-right: 2px; }
    .tz-gt-topbar-item .gt_float_switcher .gt-selected { padding: 0 5px !important; }
    .tz-gt-topbar-item .gt_float_switcher .gt-current-lang img {
        width:  16px !important;
        height: 11px !important;
    }
}