/* ==========================================================================
   SITE TOPBAR - SLEEK, COMPACT & LUXURIOUS
   ========================================================================== */

.site-topbar {
  position: relative;
  width: 100%;
  background: #080A24;
  background: linear-gradient(90deg, #07081E 0%, #0F1340 50%, #07081E 100%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  font-family: var(--font-body), sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1010;
}

.topbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.28rem;
  gap: 1rem;
}

/* Right / Start Side in RTL */
.topbar-start {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.topbar-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.65rem;
  border-radius: 6px;
  background: rgba(26, 114, 201, 0.18);
  border: 1px solid rgba(26, 114, 201, 0.45);
  color: #79B8FF;
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-bottom: 7px;
}

.topbar-badge i {
  color: #F59E0B;
  font-size: 0.82rem;
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.topbar-item i {
  color: var(--color-accent, #1A72C9);
  font-size: 0.85rem;
}

.topbar-item:hover {
  color: #ffffff;
}

/* Left / End Side in RTL */
.topbar-end {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.topbar-contacts {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.topbar-social {
  display: flex;
  align-items: center;
  gap: 0.18rem;
}

.topbar-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.topbar-social-btn:hover {
  background: var(--color-accent, #1A72C9);
  color: #ffffff;
  border-color: var(--color-accent, #1A72C9);
  transform: translateY(-2px);
}

/* ==========================================================================
   DESKTOP FLOATING NAVBAR ADJUSTMENT
   ========================================================================== */

@media (min-width: 992px) {
  .pill-nav {
    top: calc(var(--topbar-height, 44px) + 14px);
    transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s ease;
  }

  body.is-scrolled .pill-nav {
    top: 0.85rem;
  }

  .hero-grid {
    padding-top: calc(var(--topbar-height, 44px) + 4.5rem);
  }
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE LAYOUT
   ========================================================================== */

@media (max-width: 860px) {
  .topbar-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.18rem;
    padding-block: 0.7rem;
  }

  /* Row 1: Badge */
  .topbar-badge {
    font-size: 0.70rem;
    padding: 0.14rem 0.55rem;
    margin-inline: auto;
    margin-bottom: 2px;
    display: none;
  }

  /* Row 2: Address */
  .topbar-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    width: 100%;
  }

  .topbar-address {
    font-size: 0.71rem;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }

  /* Row 3: Phone & Email side by side */
  .topbar-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    width: 100%;
  }

  .topbar-contacts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    font-size: 0.70rem;
  }

  .topbar-contacts .topbar-item {
    font-size: 0.70rem;
  }

  /* Row 4: Social Media icons */
  .topbar-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.30rem;
  }

  .topbar-social-btn {
    width: 22px;
    height: 22px;
    font-size: 0.68rem;
  }

  .pill-nav {
    top: calc(var(--topbar-height, 96px) + 8px);
    transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s ease;
  }

  body.is-scrolled .pill-nav {
    top: 0.55rem;
  }

  .hero-grid {
    padding-top: calc(var(--topbar-height, 96px) + 2.1rem);
  }

  /* main:not(:has(.hero)) {
    padding-top: calc(var(--topbar-height, 140px) + 4.2rem);
  } */
}

@media (max-width: 480px) {
  .hero-grid {
    padding-top: calc(var(--topbar-height, 96px) + 1.8rem);
  }
  .topbar-start {
    flex-wrap: wrap;
    justify-content: center;
  }

  .topbar-badge {
    margin-inline: auto;
  }

  .topbar-address {
    font-size: 0.72rem;
    white-space: normal;
    text-align: center;
  }

  .topbar-contacts {
    gap: 0.6rem;
    flex-wrap: wrap;
  }

  .topbar-contacts .topbar-item {
    font-size: 0.72rem;
  }
}