/* SabahBusiness premium skin for GTranslate's OWN floating widget.
   No second selector is created; GTranslate remains the owner of languages/flags/labels/switching. */

/* Float widget used by current GTranslate builds */
.gt_float_switcher,
.gt_float_switcher .gt-selected,
.gt_float_switcher .gt_options {
  font-family: inherit !important;
  box-sizing: border-box !important;
}

.gt_float_switcher {
  right: 20px !important;
  bottom: 24px !important;
  left: auto !important;
  border: 1px solid rgba(199,154,43,.72) !important;
  border-radius: 16px !important;
  background: rgba(11,31,58,.97) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.28) !important;
  overflow: visible !important;
  z-index: 99998 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.gt_float_switcher .gt-selected {
  background: transparent !important;
  border-radius: 15px !important;
}
.gt_float_switcher .gt-selected .gt-current-lang {
  min-height: 46px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .01em !important;
}
.gt_float_switcher .gt-selected img,
.gt_float_switcher .gt_options img {
  width: 24px !important;
  height: auto !important;
  margin: 0 7px 0 0 !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.22) !important;
}
.gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code,
.gt_float_switcher .gt-selected .gt-current-lang span {
  color: #fff !important;
}
.gt_float_switcher .gt-selected .gt-current-lang:after {
  border-top-color: #E5C565 !important;
}

/* Native GT language list, only visually upgraded. */
.gt_float_switcher .gt_options {
  background: #fff !important;
  border: 1px solid rgba(199,154,43,.45) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.26) !important;
  overflow-x: hidden !important;
}
.gt_float_switcher .gt_options a {
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  color: #152238 !important;
  background: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color .14s ease, color .14s ease !important;
}
.gt_float_switcher .gt_options a:hover,
.gt_float_switcher .gt_options a:focus {
  background: #F7F8FA !important;
  color: #0B1F3A !important;
  outline: none !important;
}
.gt_float_switcher .gt_options a.gt-current-lang {
  color: #0B1F3A !important;
  font-weight: 800 !important;
  box-shadow: inset 3px 0 0 #C79A2B !important;
}

/* Globe widget variants: skin native GT globe if user later chooses Globe. */
.gtranslate_wrapper .gglobe,
a.gglobe {
  border: 1px solid rgba(199,154,43,.78) !important;
  border-radius: 50% !important;
  background-color: rgba(11,31,58,.97) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.25) !important;
}

/* Never style/hide language names or flags: those remain exactly GTranslate-owned. */
.sbgtns-protected { unicode-bidi: isolate; }

@media (max-width: 767px) {
  .gt_float_switcher {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    max-width: min(88vw, 310px) !important;
  }
  .gt_float_switcher .gt-selected .gt-current-lang { min-height: 44px !important; padding: 7px 10px !important; }
  .gt_float_switcher .gt_options { max-height: 52vh !important; }
}
@media (prefers-reduced-motion: reduce) {
  .gt_float_switcher .gt_options a { transition: none !important; }
}


/* =========================================================
   V1.3.0 — NATIVE GT FLOAT / SABAHBUSINESS PREMIUM SKIN
   GT remains the language engine and owns the language list.
   ========================================================= */

:root{
  --sbgt-navy:#0B1F3A;
  --sbgt-navy2:#12345B;
  --sbgt-gold:#C79A2B;
  --sbgt-gold2:#E5C565;
}

/* Native GT remains bottom-right. No tile behind the closed globe. */
.gt_float_switcher{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  z-index:99997 !important;
}
.gt_float_switcher .gt-selected{
  width:44px !important;
  height:44px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.gt_float_switcher .gt-selected .gt-current-lang{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  position:relative !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

/* Hide only GT's CLOSED-state flag/code. Dropdown contents stay native. */
.gt_float_switcher .gt-selected .gt-current-lang > img,
.gt_float_switcher .gt-selected .gt-current-lang > span{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.gt_float_switcher .gt-selected .gt-current-lang::after{display:none !important;}

/* Professional 25px navy/gold globe.
   The sphere does not rotate like a wheel. Longitude/land highlights travel
   LEFT -> RIGHT, giving a vertical-axis world-rotation effect. */
.gt_float_switcher .gt-selected .gt-current-lang::before{
  content:"";
  width:25px;
  height:25px;
  border-radius:50%;
  display:block;
  box-sizing:border-box;
  border:1.5px solid var(--sbgt-gold2);
  background-color:var(--sbgt-navy);
  background-image:
    /* moving gold "land" highlights */
    radial-gradient(ellipse at 15% 35%, #E5C565 0 8%, transparent 9%),
    radial-gradient(ellipse at 36% 62%, #C79A2B 0 10%, transparent 11%),
    radial-gradient(ellipse at 72% 30%, #E5C565 0 7%, transparent 8%),
    /* latitude lines */
    radial-gradient(ellipse at center, transparent 0 31%, rgba(229,197,101,.92) 32% 35%, transparent 36% 100%),
    /* longitude lines */
    linear-gradient(90deg, transparent 0 20%, rgba(229,197,101,.9) 21% 24%, transparent 25% 48%, rgba(229,197,101,.9) 49% 52%, transparent 53% 76%, rgba(229,197,101,.9) 77% 80%, transparent 81% 100%),
    radial-gradient(circle at 35% 28%, #174D82 0, #0B1F3A 68%, #071426 100%);
  background-size:
    48px 25px,48px 25px,48px 25px,
    25px 25px,48px 25px,25px 25px;
  background-position:
    -23px 0,-23px 0,-23px 0,
    0 0,-23px 0,0 0;
  box-shadow:
    inset -4px -3px 6px rgba(0,0,0,.35),
    inset 3px 2px 5px rgba(255,255,255,.08),
    0 0 0 1px rgba(199,154,43,.12),
    0 2px 8px rgba(0,0,0,.22);
  animation:sbgt-world-left-right 12s linear infinite;
}
@keyframes sbgt-world-left-right{
  from{
    background-position:-23px 0,-23px 0,-23px 0,0 0,-23px 0,0 0;
  }
  to{
    background-position:25px 0,25px 0,25px 0,0 0,25px 0,0 0;
  }
}
.gt_float_switcher .gt-selected .gt-current-lang:hover::before,
.gt_float_switcher .gt-selected .gt-current-lang:focus-visible::before{
  animation-play-state:paused;
  box-shadow:
    inset -4px -3px 6px rgba(0,0,0,.32),
    0 0 0 1px rgba(229,197,101,.45),
    0 0 10px rgba(199,154,43,.38);
}

/* OPEN panel: GT's own language list, visually refined only.
   GT setting "Open direction: Up" remains authoritative. */
.gt_float_switcher .gt_options{
  min-width:190px !important;
  max-width:min(88vw,260px) !important;
  background:linear-gradient(180deg,#0D2B4C,#081A30) !important;
  border:1px solid rgba(229,197,101,.78) !important;
  border-radius:14px !important;
  box-shadow:0 16px 38px rgba(0,0,0,.30) !important;
  overflow:hidden !important;
}
.gt_float_switcher .gt_options a{
  color:#fff !important;
  background:transparent !important;
  border:0 !important;
  font-weight:500 !important;
}
.gt_float_switcher .gt_options a:hover,
.gt_float_switcher .gt_options a:focus{
  background:rgba(199,154,43,.15) !important;
  color:#fff !important;
}
.gt_float_switcher .gt_options img{
  opacity:1 !important;
}

/* Close control: transparent, compact and attached to translator area. */
.sbgtns-close{
  position:fixed;
  right:5px;
  bottom:63px;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--sbgt-gold2);
  font:600 20px/24px Arial,sans-serif;
  text-align:center;
  cursor:pointer;
  z-index:99999;
  text-shadow:0 1px 3px rgba(0,0,0,.65);
  opacity:.72;
}
.sbgtns-close:hover,.sbgtns-close:focus-visible{
  opacity:1;
  outline:none;
}

/* User can hide the translator. A tiny edge tab restores it. */
body.sbgtns-gt-hidden .gt_float_switcher,
body.sbgtns-gt-hidden .sbgtns-close{
  display:none !important;
}
.sbgtns-restore{
  display:none;
  position:fixed;
  right:0;
  bottom:34px;
  width:12px;
  height:34px;
  padding:0;
  border:1px solid rgba(199,154,43,.72);
  border-right:0;
  border-radius:8px 0 0 8px;
  background:var(--sbgt-navy);
  color:var(--sbgt-gold2);
  cursor:pointer;
  z-index:99999;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
body.sbgtns-gt-hidden .sbgtns-restore{display:block !important;}

@media(max-width:767px){
  .sbgtns-close{
    right:max(3px,env(safe-area-inset-right));
    bottom:calc(126px + env(safe-area-inset-bottom));
  }
  .sbgtns-restore{
    bottom:calc(92px + env(safe-area-inset-bottom));
  }
}
@media(prefers-reduced-motion:reduce){
  .gt_float_switcher .gt-selected .gt-current-lang::before{
    animation:none !important;
  }
}


/* =========================================================
   V1.3.1 — RESPONSIVE GLOBE SCALE
   Desktop 48px / Tablet 40px / Mobile 32px.
   Native GT upward dropdown and language engine unchanged.
   ========================================================= */
.gt_float_switcher .gt-selected,
.gt_float_switcher .gt-selected .gt-current-lang{
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  min-height:56px !important;
}
.gt_float_switcher .gt-selected .gt-current-lang::before{
  width:48px !important;
  height:48px !important;
  background-size:92px 48px,92px 48px,92px 48px,48px 48px,92px 48px,48px 48px !important;
  background-position:-44px 0,-44px 0,-44px 0,0 0,-44px 0,0 0;
}
@keyframes sbgt-world-left-right{
  from{background-position:-44px 0,-44px 0,-44px 0,0 0,-44px 0,0 0;}
  to{background-position:48px 0,48px 0,48px 0,0 0,48px 0,0 0;}
}

/* Tablet */
@media (min-width:768px) and (max-width:1024px){
  .gt_float_switcher .gt-selected,
  .gt_float_switcher .gt-selected .gt-current-lang{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
  }
  .gt_float_switcher .gt-selected .gt-current-lang::before{
    width:40px !important;
    height:40px !important;
    background-size:76px 40px,76px 40px,76px 40px,40px 40px,76px 40px,40px 40px !important;
    background-position:-36px 0,-36px 0,-36px 0,0 0,-36px 0,0 0;
  }
  @keyframes sbgt-world-left-right{
    from{background-position:-36px 0,-36px 0,-36px 0,0 0,-36px 0,0 0;}
    to{background-position:40px 0,40px 0,40px 0,0 0,40px 0,0 0;}
  }
}

/* Mobile / App View */
@media (max-width:767px){
  .gt_float_switcher .gt-selected,
  .gt_float_switcher .gt-selected .gt-current-lang{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }
  .gt_float_switcher .gt-selected .gt-current-lang::before{
    width:32px !important;
    height:32px !important;
    background-size:60px 32px,60px 32px,60px 32px,32px 32px,60px 32px,32px 32px !important;
    background-position:-28px 0,-28px 0,-28px 0,0 0,-28px 0,0 0;
  }
  @keyframes sbgt-world-left-right{
    from{background-position:-28px 0,-28px 0,-28px 0,0 0,-28px 0,0 0;}
    to{background-position:32px 0,32px 0,32px 0,0 0,32px 0,0 0;}
  }
}


/* =========================================================
   V1.3.2 — LOCKED REAL-EARTH ARTWORK
   Replaces all CSS-drawn planet artwork with a dedicated SVG asset.
   ========================================================= */
.gt_float_switcher .gt-selected .gt-current-lang::before{
  content:"" !important;
  display:block !important;
  width:48px !important;
  height:48px !important;
  border:0 !important;
  border-radius:50% !important;
  background-color:transparent !important;
  background-image:url("sab-business-earth.svg") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  box-shadow:none !important;
  animation:sbgt-earth-axis 5.5s ease-in-out infinite !important;
  transform-origin:50% 50% !important;
  will-change:transform,filter;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.28));
}
@keyframes sbgt-earth-axis{
  0%   {transform:perspective(120px) rotateY(-12deg) scaleX(.94)}
  50%  {transform:perspective(120px) rotateY(12deg) scaleX(1)}
  100% {transform:perspective(120px) rotateY(-12deg) scaleX(.94)}
}
.gt_float_switcher .gt-selected .gt-current-lang:hover::before,
.gt_float_switcher .gt-selected .gt-current-lang:focus-visible::before{
  animation-play-state:paused !important;
  filter:drop-shadow(0 0 6px rgba(229,197,101,.55));
}
@media (min-width:768px) and (max-width:1024px){
 .gt_float_switcher .gt-selected .gt-current-lang::before{width:40px !important;height:40px !important}
}
@media (max-width:767px){
 .gt_float_switcher .gt-selected .gt-current-lang::before{width:32px !important;height:32px !important}
}
@media(prefers-reduced-motion:reduce){
 .gt_float_switcher .gt-selected .gt-current-lang::before{animation:none !important}
}


/* =========================================================
   V1.3.7 — MOBILE POSITION ONLY
   Purpose: keep the native GTranslate globe clear of the
   SabahBusiness mobile bottom navigation / Add Listing area.
   No ListingPro/header/search rules are included.
   ========================================================= */
@media (max-width:767px){
  .gt_float_switcher{
    bottom:calc(92px + env(safe-area-inset-bottom)) !important;
    right:max(10px, env(safe-area-inset-right)) !important;
  }

  /* Keep the existing hide/restore controls aligned with the lifted globe. */
  .sbgtns-close{
    bottom:calc(137px + env(safe-area-inset-bottom)) !important;
    right:max(4px, env(safe-area-inset-right)) !important;
  }

  .sbgtns-restore{
    bottom:calc(96px + env(safe-area-inset-bottom)) !important;
  }
}

/* =========================================================
   V1.3.8-RC1 — APP VIEW CONTROL ALIGNMENT
   UI-only adjustment. GTranslate switching/corrections/hide state
   are untouched. Keep the globe clear of SabahBusiness bottom nav,
   while keeping Close/Restore controls visually attached to it.
   ========================================================= */
@media (max-width:767px){
  .gt_float_switcher{
    bottom:calc(104px + env(safe-area-inset-bottom)) !important;
    right:max(10px, env(safe-area-inset-right)) !important;
  }
  .sbgtns-close{
    bottom:calc(130px + env(safe-area-inset-bottom)) !important;
    right:max(3px, env(safe-area-inset-right)) !important;
  }
  .sbgtns-restore{
    bottom:calc(106px + env(safe-area-inset-bottom)) !important;
    right:max(3px, env(safe-area-inset-right)) !important;
  }
}