/* ═══════════════════════════════════════════════════════════════════════
   Shared desktop header for the inner pages (EN, MS and ZH).

   From 1260px up it makes nav.navbar look and behave like the homepage header
   (the .site-header rules in /style.css): the same eight items (SLOT, CASINO,
   SPORTS, 4D LOTTERY, PAYMENTS, PROMOTIONS, GUIDE with its dropdown, VIP), a 64px
   bar, a 1320px container, the same button and language sizes, and the same font.
   The items live in div.header-nav, a second link list next to the page's own
   div.nav-links. Below 1260px none of this applies: .header-nav stays hidden and
   the page's own nav (.nav-links, hamburger) is used exactly as before.

   Keep it in sync with the homepage header in /style.css (.site-header,
   .top-bar-actions, .header-nav). Every rule is scoped under .navbar so it beats
   the per-page stylesheets, which each carry their own copy of the header CSS.
   `position` is deliberately not set here: some pages use fixed, others sticky.
   ═══════════════════════════════════════════════════════════════════════ */

.header-nav { display: none; }

/* The GUIDE dropdown now lists all nine guides, so the old (768-1259px) dropdown also needs to
   keep its labels on one line and scroll inside itself on a short screen instead of running off the bottom. */
.navbar .nav-links .dropdown { max-height: calc(100vh - 80px); overflow-x: hidden; overflow-y: auto; }
.navbar .nav-links .dropdown a { white-space: nowrap; }

@media (min-width: 1260px) {

  /* Bar and container */
  .navbar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border-bottom: 0;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  }
  .navbar .navbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px; max-width: 1320px; margin: 0 auto;
    padding: 0 clamp(20px, 2.4vw, 40px);
  }
  .navbar .navbar-inner > a { flex-shrink: 0; }
  .navbar .site-logo-img { display: block; height: 40px; width: auto; max-width: none; }
  .navbar .hamburger { display: none; }
  .navbar .nav-links { display: none; }

  /* The nav: centred in the space between the logo and the buttons */
  .navbar .header-nav { display: flex; flex: 1 1 auto; justify-content: center; min-width: 0; margin: 0 12px; }
  .navbar .header-nav .nav-pill-list {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    list-style: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
  }
  .navbar .header-nav .nav-pill-list > li { margin: 0; padding: 0; list-style: none; }
  .navbar .header-nav .nav-pill-list > li > a {
    display: block; padding: 10px 10px; border-radius: 999px;
    color: #374151; font-size: 0.78rem; font-weight: 700; line-height: 1.6;
    letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
    transition: color 0.2s ease;
  }
  .navbar .header-nav .nav-pill-list > li > a:hover { color: #ff7f00; }
  .navbar .header-nav .nav-divider { display: none; }

  /* VIP: the image is gold, made for a dark ground, so it keeps a small navy badge */
  .navbar .header-nav .nav-vip-item { flex-shrink: 0; }
  .navbar .header-nav .nav-pill-list > li > a.nav-vip {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    padding: 5px 12px; background: #0d1b4b; border-radius: 999px; line-height: 0;
  }
  .navbar .header-nav .nav-vip-img { display: block; height: 16px; width: auto; transform: none; }

  /* GUIDE dropdown: opens on hover, keyboard focus, or .open (set by the pages that have a script for it) */
  .navbar .header-nav .nav-item { position: relative; }
  .navbar .header-nav .nav-item.has-dropdown > a::after {
    content: ''; display: inline-block; width: 0; height: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
    margin-left: 5px; vertical-align: middle; opacity: 0.6;
  }
  .navbar .header-nav .dropdown {
    display: none; position: absolute; top: 100%; left: 0; min-width: 210px; z-index: 300;
    max-height: calc(100vh - 80px); overflow-x: hidden; overflow-y: auto;
    background: #fff; border: 1px solid #e2e4ed; border-radius: 12px; box-shadow: 0 8px 32px rgba(13,27,75,0.12);
  }
  .navbar .header-nav .nav-item.has-dropdown:hover .dropdown,
  .navbar .header-nav .nav-item.has-dropdown:focus-within .dropdown,
  .navbar .header-nav .nav-item.has-dropdown.open .dropdown { display: block; }
  .navbar .header-nav .dropdown a {
    display: block; padding: 11px 16px; border-bottom: 1px solid #e2e4ed; border-radius: 0;
    color: #374151; font-size: 0.82rem; font-weight: 600; line-height: 1.6;
    letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
  }
  .navbar .header-nav .dropdown a:last-child { border-bottom: 0; }
  .navbar .header-nav .dropdown a:hover { color: #ff7f00; background: #f5f7fa; }

  /* Buttons: all three come out at about 40px high, like the nav links and the language pill */
  .navbar .nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .navbar .nav-right a {
    display: inline-flex; align-items: center; justify-content: center; gap: 0;
    padding: 9px 12px; border: 1.5px solid transparent; border-radius: 6px;
    font-size: 0.75rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.03em;
    text-transform: uppercase; text-decoration: none; white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .navbar .nav-right .nav-apk { background: #fff; color: #ff7f00; border-color: #ff7f00; }
  .navbar .nav-right .nav-apk:hover { background: #ff7f00; color: #fff; }
  .navbar .nav-right .nav-login { background: #fff; color: #111827; border-color: #111827; }
  .navbar .nav-right .nav-login:hover { background: #111827; color: #fff; }
  .navbar .nav-right .nav-register { background: #ff7f00; color: #fff; }
  .navbar .nav-right .nav-register:hover { background: #d96b00; }

  /* Language pill, last in the row. The leading `body` is there to outrank the VIP
     page's inline rule (.vx-page .navbar-inner > .lang-dropdown, margin-left: 14px). */
  body .navbar .navbar-inner > .lang-dropdown { order: 10; margin-left: 8px; flex-shrink: 0; }
  .navbar .lang { gap: 8px; padding: 5px 12px 5px 5px; line-height: 1; }
  .navbar .lang-flag-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: none; }
  .navbar .lang-chevron-svg { width: 13px; height: 8px; }
}

/* Roomier from 1440px, as on the homepage */
@media (min-width: 1440px) {
  .navbar .header-nav { margin: 0 16px; }
  .navbar .nav-right { gap: 10px; }
  .navbar .nav-right a { padding: 9px 16px; }
  body .navbar .navbar-inner > .lang-dropdown { margin-left: 10px; }
}