.text-page-primary {
  color: var(--color-primary);
}
.banner-wrap {
  border-radius: 12px;
}
.tabs label {
  background-color: #5fa8df;
  transition: all 0.3s ease-in-out;
}
#tab-hk:checked ~ .tabs label[for="tab-hk"],
#tab-kl:checked ~ .tabs label[for="tab-kl"],
#tab-nt:checked ~ .tabs label[for="tab-nt"] {
  background-color: #ffaf51;
}
#tab-hk:checked ~ #list-hk,
#tab-kl:checked ~ #list-kl,
#tab-nt:checked ~ #list-nt {
  display: block;
}
#clinic-Central1:checked ~ .tab-level2 label[for="clinic-Central1"],
#clinic-Central2:checked ~ .tab-level2 label[for="clinic-Central2"],
#clinic-CausewayBay:checked ~ .tab-level2 label[for="clinic-CausewayBay"],
#clinic-MongKok:checked ~ .tab-level2 label[for="clinic-MongKok"],
#clinic-KwunTong:checked ~ .tab-level2 label[for="clinic-KwunTong"],
#clinic-Shatin:checked ~ .tab-level2 label[for="clinic-Shatin"],
#clinic-YuenLong:checked ~ .tab-level2 label[for="clinic-YuenLong"],
#clinic-TsuenWan:checked ~ .tab-level2 label[for="clinic-TsuenWan"],
#clinic-TseungKwanO:checked ~ .tab-level2 label[for="clinic-TseungKwanO"] {
  background-color: #ecf6fc;
}
@media screen and (max-width: 767px) {
  .banner-cover {
    aspect-ratio: 2/1;
    object-fit: cover;
    object-position: left center;
  }
}
@media screen and (max-width: 1023px) {
  .clinic {
    display: none;
  }
  #clinic-Central1:checked ~ .list #clinic-Central1,
  #clinic-Central2:checked ~ .list #clinic-Central2,
  #clinic-CausewayBay:checked ~ .list #clinic-CausewayBay,
  #clinic-MongKok:checked ~ .list #clinic-MongKok,
  #clinic-KwunTong:checked ~ .list #clinic-KwunTong,
  #clinic-Shatin:checked ~ .list #clinic-Shatin,
  #clinic-YuenLong:checked ~ .list #clinic-YuenLong,
  #clinic-TsuenWan:checked ~ .list #clinic-TsuenWan,
  #clinic-TseungKwanO:checked ~ .list #clinic-TseungKwanO {
    display: block;
  }
  #map-Central1:checked ~ #map-Central1-popover,
  #map-Central2:checked ~ #map-Central2-popover,
  #map-CausewayBay:checked ~ #map-CausewayBay-popover,
  #map-MongKok:checked ~ #map-MongKok-popover,
  #map-KwunTong:checked ~ #map-KwunTong-popover,
  #map-Shatin:checked ~ #map-Shatin-popover,
  #map-YuenLong:checked ~ #map-YuenLong-popover,
  #map-TsuenWan:checked ~ #map-TsuenWan-popover,
  #map-TseungKwanO:checked ~ #map-TseungKwanO-popover,
  #map-Central1:checked + #map-Central1-popover[popover],
  #map-Central2:checked + #map-Central2-popover[popover],
  #map-CausewayBay:checked + #map-CausewayBay-popover[popover],
  #map-MongKok:checked + #map-MongKok-popover[popover],
  #map-KwunTong:checked + #map-KwunTong-popover[popover],
  #map-Shatin:checked + #map-Shatin-popover[popover],
  #map-YuenLong:checked + #map-YuenLong-popover[popover],
  #map-TsuenWan:checked + #map-TsuenWan-popover[popover],
  #map-TseungKwanO:checked + #map-TseungKwanO-popover[popover] {
    display: block;
  }
  @supports selector(:popover-open) {
    [popover] {
      position: fixed;
      inset: 0;
      width: 90vw;
      max-width: 600px;
      max-height: 90vh;
      margin: auto;
      border: none;
      background: white;
      padding: 0;
      z-index: 20;
      touch-action: pan-x pan-y pinch-zoom !important;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    [popover]::backdrop {
      background: rgba(0, 0, 0, 0.6);
    }
    [popover]:not(:popover-open) {
      display: none;
    }
  }
}
@media screen and (min-width: 1024px) {
  .banner-wrap {
    border-radius: 40px;
  }
  [popover] {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    display: block !important;
    pointer-events: auto !important;
  }
}
