/* =========================================================
   SSB SYSTEM HEADER - SUPER ULTIMATE
   Stable / Premium / No Overflow
========================================================= */

.ssb-topbar{
  position:sticky;
  top:0;
  z-index:9999;
  width:100%;
  background:var(--header-bg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(120,180,255,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}

.topbar-inner{
  width:min(100%, var(--shell));
  margin:0 auto;
  min-height:82px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:16px;
  overflow:hidden;
}

/* LOGO + BRAND */
.brand-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  min-width:190px;
}

.brand-logo{
  width:48px;
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(235,245,255,.78));
  border:1px solid rgba(120,180,255,.24);
  box-shadow:
    0 8px 20px rgba(32,105,210,.12),
    inset 0 1px 0 rgba(255,255,255,.75);
  overflow:hidden;
}

.brand-logo img{
  width:32px;
  height:32px;
  object-fit:contain;
}

.brand-text{
  line-height:1.12;
  white-space:nowrap;
}

.brand-line-1{
  font-size:14px;
  font-weight:900;
  color:var(--title);
}

.brand-line-2{
  margin-top:2px;
  font-size:12px;
  font-weight:700;
  color:var(--text-soft);
}

.brand-site{
  margin-top:2px;
  font-size:12px;
  font-weight:800;
  color:#2388ff;
}

/* SEARCH */
.header-search-wrap{
  position:relative;
  flex:1 1 420px;
  max-width:440px;
  min-width:220px;
}

.header-search{
  height:46px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px 0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(120,180,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 8px 24px rgba(31,94,170,.10);
}

html.dark-mode .header-search{
  background:rgba(6,18,38,.72);
  border-color:rgba(120,210,255,.22);
}

.header-search-icon{
  width:18px;
  height:18px;
  color:#1b63c7;
  flex:0 0 auto;
}

.header-search-input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:13px;
  font-weight:700;
}

.header-search-input::placeholder{
  color:var(--text-soft);
}

.header-search-btn{
  flex:0 0 auto;
  height:34px;
  min-width:74px;
  padding:0 16px;
  border:0;
  border-radius:999px;
  color:#fff;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(135deg,#1b63ff,#00c8ff);
  box-shadow:0 8px 18px rgba(0,120,255,.26);
}

/* AGENT DROPDOWN */
.agent-dropdown{
  position:absolute;
  top:54px;
  left:0;
  right:0;
  display:none;
  z-index:50;
}

.agent-dropdown.is-open{
  display:block;
}

.agent-dropdown-card{
  border-radius:20px;
  padding:14px;
  background:var(--panel-strong);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.agent-dropdown-head{
  font-size:13px;
  font-weight:900;
  color:var(--title);
  margin-bottom:8px;
}

/* RIGHT ACTIONS */
.topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:0 0 auto;
  min-width:0;
  overflow:visible;
}

.home-btn{
  height:38px;
  padding:0 17px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(120,180,255,.22);
  color:var(--title);
  font-size:13px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(31,94,170,.10);
  white-space:nowrap;
}

html.dark-mode .home-btn{
  background:rgba(8,22,46,.76);
}

/* THEME SWITCH - FIX OVERFLOW */
.theme-switch-wrap{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 8px 18px rgba(31,94,170,.08);
  flex:0 0 auto;
  white-space:nowrap;
  max-width:142px;
  overflow:hidden;
}

html.dark-mode .theme-switch-wrap{
  background:rgba(8,22,46,.70);
}

.mode-label{
  font-size:11px;
  font-weight:900;
  color:var(--text-soft);
  line-height:1;
}

.theme-switch{
  position:relative;
  width:42px;
  height:22px;
  border:0;
  border-radius:999px;
  padding:0;
  cursor:pointer;
  flex:0 0 42px;
  background:linear-gradient(180deg,#dcecff,#f7fbff);
  box-shadow:
    inset 0 1px 4px rgba(0,0,0,.12),
    0 0 0 1px rgba(120,180,255,.22);
}

html.dark-mode .theme-switch{
  background:linear-gradient(180deg,#0b1c38,#153967);
}

.switch-knob{
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
  transition:.25s ease;
}

html.light-mode .switch-knob{
  transform:translateX(20px);
}

/* LANGUAGE */
.lang-bar{
  height:38px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(120,180,255,.20);
  flex:0 0 auto;
}

html.dark-mode .lang-bar{
  background:rgba(8,22,46,.70);
}

.lang-btn{
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:50%;
  overflow:hidden;
  cursor:pointer;
  background:transparent;
  opacity:.72;
  transition:.2s ease;
}

.lang-btn.active,
.lang-btn:hover{
  opacity:1;
  transform:translateY(-1px);
}

.lang-btn img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* GOOGLE TRANSLATE */
#google_translate_element{
  width:0;
  height:0;
  overflow:hidden;
}

/* TABLET / SMALL NOTEBOOK */
@media (max-width: 1180px){
  .topbar-inner{
    gap:10px;
  }

  .header-search-wrap{
    max-width:360px;
  }

  .brand-wrap{
    min-width:175px;
  }

  .home-btn{
    padding:0 14px;
  }
}

/* MOBILE / NARROW SCREEN */
@media (max-width: 1023px){
  .topbar-inner{
    min-height:72px;
    padding:8px 12px;
    gap:10px;
  }

  .brand-wrap{
    min-width:0;
    flex:1 1 auto;
  }

  .brand-logo{
    width:44px;
    height:44px;
    border-radius:15px;
  }

  .brand-logo img{
    width:30px;
    height:30px;
  }

  .brand-line-1{
    font-size:13px;
  }

  .brand-line-2,
  .brand-site{
    font-size:11px;
  }

  .header-search-wrap{
    display:none;
  }

  .topbar-actions{
    flex:0 0 auto;
    gap:6px;
  }

  .home-btn{
    height:34px;
    padding:0 12px;
    font-size:12px;
  }

  .theme-switch-wrap{
    height:34px;
    max-width:118px;
    padding:0 6px;
    gap:4px;
  }

  .mode-label{
    font-size:10px;
  }

  .theme-switch{
    width:36px;
    height:20px;
    flex-basis:36px;
  }

  .switch-knob{
    width:14px;
    height:14px;
  }

  html.light-mode .switch-knob{
    transform:translateX(16px);
  }

  .lang-bar{
    height:34px;
    padding:0 5px;
  }

  .lang-btn{
    width:25px;
    height:25px;
  }
}

/* VERY SMALL MOBILE */
@media (max-width: 560px){
  .topbar-inner{
    padding:7px 10px;
  }

  .brand-line-2,
  .brand-site{
    display:none;
  }

  .home-btn{
    display:none;
  }

  .theme-switch-wrap{
    max-width:110px;
  }

  .lang-bar{
    display:none;
  }
}