/* =====================================================
   嘉怡物業管理有限公司
   V25.8 Executive Top Bar 整合版
   請於 V25.7 及 V25.7.1 CSS 之後載入
   ===================================================== */

html body .topbar {
  min-height: 38px !important;
  height: auto !important;
  padding: 0 !important;
  background: #0b3a53 !important;
  color: #ffffff !important;
}

html body .topbar > .container {
  width: min(1120px, calc(100% - 40px)) !important;
  min-height: 38px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

html body .topbar a {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html body .topbar a[href^="tel:"] {
  color: #f5f5f5 !important;
  font-weight: 650 !important;
}

html body .topbar a[href^="mailto:"] {
  color: #e8c27a !important;
  font-weight: 700 !important;
}

html body .topbar a + a {
  position: relative !important;
  margin-left: 25px !important;
}

html body .topbar a + a::before {
  content: "｜" !important;
  position: absolute !important;
  left: -17px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-weight: 400 !important;
}

/* 辦公時間由 CSS 加入，毋須修改 HTML */
html body .topbar > .container::after {
  content: "辦公時間：星期一至五 09:00–18:00" !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 25px !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
}

html body .topbar > .container::before {
  content: none !important;
}

html body .topbar a:last-of-type::after {
  content: "｜" !important;
  display: inline-block !important;
  margin-left: 15px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-weight: 400 !important;
}

html body .topbar a:hover,
html body .topbar a:focus-visible {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* 平板：辦公時間另起一行置中 */
@media (max-width: 900px) {
  html body .topbar > .container {
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding: 5px 0 !important;
    row-gap: 4px !important;
  }

  html body .topbar > .container::after {
    flex: 0 0 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
    text-align: center !important;
  }

  html body .topbar a:last-of-type::after {
    content: none !important;
  }
}

/* 手機：只保留電話及電郵 */
@media (max-width: 560px) {
  html body .topbar {
    min-height: 34px !important;
  }

  html body .topbar > .container {
    width: calc(100% - 28px) !important;
    min-height: 34px !important;
    padding: 5px 0 !important;
  }

  html body .topbar a {
    font-size: 12px !important;
  }

  html body .topbar > .container::after {
    content: none !important;
    display: none !important;
  }
}

/* 超窄手機：電話及電郵分兩行 */
@media (max-width: 430px) {
  html body .topbar > .container {
    flex-direction: column !important;
    gap: 3px !important;
    padding: 6px 0 !important;
  }

  html body .topbar a + a {
    margin-left: 0 !important;
  }

  html body .topbar a + a::before {
    content: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .topbar a {
    transition: none !important;
  }
}