/* ================= PREMIUM TOPBAR ================= */
.topbar-glass{
  background:linear-gradient(
    90deg,
    rgba(37,99,235,.10),
    rgba(96,165,250,.10)
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom:1px solid var(--glass-border);
  font-size:13px;
  z-index:1200;
}

/* INNER */
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
}

/* LEFT */
.topbar-left{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--text-dark, #0f172a);
  font-weight:500;
  white-space:nowrap;
}

/* ITEM */
.top-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  opacity:.9;
}

.top-item i{
  color:var(--accent);
  font-size:14px;
}

/* DIVIDER */
.divider{
  width:1px;
  height:14px;
  background:rgba(0,0,0,.15);
}

/* RIGHT */
.topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
}

/* OFFER BADGE */
.top-offer{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  color:var(--accent);
  background:rgba(255,255,255,.65);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.top-offer i{
  font-size:14px;
}

/* SOCIAL */
.social{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.7);
  color:var(--accent);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:.25s ease;
}

.social:hover{
  transform:translateY(-2px);
  background:#fff;
}

.social.wa:hover{ color:#22c55e }
.social.insta:hover{ color:#e1306c }
.social.fb:hover{ color:#1877f2 }

/* MOBILE */
@media(max-width:767px){
  .topbar-left{
    gap:10px;
    font-size:12px;
  }
}

/* ================= RESPONSIVE TOPBAR FIX ================= */

/* Tablet */
@media (max-width: 991px){

  .topbar-inner{
    min-height:42px;
  }

  .topbar-left{
    gap:12px;
    font-size:12px;
  }

  /* Hide long text items first */
  .topbar-left .top-item:nth-child(7),
  .topbar-left .top-item:nth-child(9){
    display:none;
  }

  .top-offer{
    font-size:11px;
    padding:5px 10px;
  }
}

/* Mobile */
@media (max-width: 767px){

  .topbar-glass{
    padding:4px 0;
  }

  .topbar-inner{
    flex-wrap:wrap;
    row-gap:6px;
    min-height:auto;
  }

  /* Center everything */
  .topbar-left,
  .topbar-right{
    width:100%;
    justify-content:center;
  }

  /* Show only essential info */
  .topbar-left .top-item{
    font-size:12px;
  }

  /* Hide secondary info */
  .topbar-left .divider,
  .topbar-left .top-item:not(:first-child){
    display:none;
  }

  /* Offer moves to second row */
  .top-offer{
    display:none;
  }

  /* Social buttons smaller */
  .social{
    width:28px;
    height:28px;
    font-size:13px;
  }
}

/* Very small devices */
@media (max-width: 420px){

  /* Icon-only mode */
  .topbar-left .top-item{
    font-size:0;
  }

  .topbar-left .top-item i{
    font-size:14px;
  }

}
