/* ========================================================
   PEARLBET - OFFICIAL CASINO HEADER DESIGN SYSTEM
   Professional esports betting aesthetic (No generic emojis)
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:ital,wght@0,600;0,700;0,800;0,900;1,700&display=swap');

:root {
  --header-bg: #10131c;
  --header-border: #1a1f2c;
  
  --pearl-cyan: #2dd4bf;
  --pearl-glow: rgba(45, 212, 191, 0.4);

  --btn-withdraw-bg: #1c212e;
  --btn-withdraw-border: #293144;
  --btn-withdraw-hover: #242c3d;
  --btn-withdraw-text: #cad2e2;

  --btn-deposit-bg: #f5a623;
  --btn-deposit-hover: #ffb738;

  --btn-signin-bg: #00c74d;
  --btn-signin-hover: #0ed958;

  --text-primary: #ffffff;
  --text-secondary: #8c97aa;
  --text-muted: #576071;

  --dropdown-bg: #141724;
  --dropdown-border: #22283a;
  --dropdown-hover: #1c2132;

  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Montserrat', sans-serif;
  --header-height: 74px;
}

.empire-header, .empire-header * {
  box-sizing: border-box;
}

/* Main Sticky Header */
.empire-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  z-index: 1000;
  font-family: var(--font-main);
  user-select: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}

.header-container {
  max-width: 1800px;
  height: 100%;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ========================================================
   LEFT: LOGO & DUAL-ROW NAV
   ======================================================== */
.header-left {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 100%;
}

/* Professional PearlBet Brand Logo */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.brand-logo:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 12px rgba(45, 212, 191, 0.45));
}

.pearl-logo-mark {
  width: 42px;
  height: 42px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pearl-logo-svg {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 2px 10px rgba(45, 212, 191, 0.35));
}

.brand-text {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.8px;
  line-height: 1;
}

.brand-pearl {
  color: #ffffff;
  letter-spacing: 0.8px;
}

.brand-bet {
  color: var(--pearl-cyan);
  background: linear-gradient(180deg, #5eead4 0%, #14b8a6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(45, 212, 191, 0.5);
  margin-left: 1px;
}

/* Nav Stack */
.nav-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  height: 100%;
}

/* Top Sub-Row */
.nav-sub-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-sub-link {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
  letter-spacing: 0.2px;
}

.nav-sub-link:hover {
  color: #ffffff;
}

.nav-sub-link.rewards-link {
  color: #10b981;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-sub-link.rewards-link:hover {
  color: #34d399;
}

.rewards-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 6px #10b981;
}

/* Language Selector */
.lang-selector {
  position: relative;
  display: inline-block;
}

.lang-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.lang-btn:hover {
  color: #fff;
}

.flag-icon {
  width: 16px;
  height: 12px;
  border-radius: 2px;
}

.chevron-icon {
  width: 9px;
  height: 9px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.lang-selector.open .chevron-icon {
  transform: rotate(180deg);
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background-color: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: 8px;
  padding: 6px;
  min-width: 140px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.7);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 1200;
}

.lang-selector.open .lang-dropdown-menu {
  display: flex;
}

.lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lang-item:hover, .lang-item.active {
  background: var(--dropdown-hover);
  color: #fff;
}

/* Bottom Main-Row */
.nav-main-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.games-dropdown-container {
  position: relative;
}

.nav-main-btn,
.nav-main-link {
  background: transparent;
  border: none;
  color: #9ba6ba;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  transition: color 0.15s ease;
}

.nav-main-btn:hover,
.nav-main-link:hover,
.nav-main-btn.active,
.nav-main-link.active {
  color: #ffffff;
}

.nav-main-btn svg,
.nav-main-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.games-dropdown-container.open .chevron-icon {
  transform: rotate(180deg);
}

.games-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background-color: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: 12px;
  padding: 8px;
  min-width: 260px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 1200;
}

.games-dropdown-container.open .games-menu {
  display: flex;
}

.game-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.game-item-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.game-item-content svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.game-menu-item:hover {
  background: var(--dropdown-hover);
  color: #fff;
}

.game-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.game-badge.hot {
  background: rgba(245, 166, 35, 0.18);
  color: #f5a623;
  border: 1px solid rgba(245, 166, 35, 0.35);
}

.game-badge.live {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

/* ========================================================
   RIGHT: GUEST ACTION BUTTONS (Clean, no switchers)
   ======================================================== */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-withdraw {
  background-color: var(--btn-withdraw-bg);
  border: 1px solid var(--btn-withdraw-border);
  color: var(--btn-withdraw-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.4px;
  padding: 10px 22px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-withdraw:hover {
  background-color: var(--btn-withdraw-hover);
  border-color: #384258;
  color: #fff;
  transform: translateY(-1px);
}

.btn-deposit {
  background: linear-gradient(180deg, #ffb833 0%, var(--btn-deposit-bg) 100%);
  border: 1px solid #ffbf43;
  color: #12141c;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.4px;
  padding: 10px 24px;
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 166, 35, 0.28);
  transition: all 0.15s ease;
}

.btn-deposit:hover {
  background: #ffbe43;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 166, 35, 0.4);
}

.btn-signin {
  background: linear-gradient(180deg, #10dc5e 0%, var(--btn-signin-bg) 100%);
  border: 1px solid #16e465;
  color: #062310;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.4px;
  padding: 10px 24px;
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 199, 77, 0.28);
  transition: all 0.15s ease;
}

.btn-signin:hover {
  background: #19e668;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 199, 77, 0.45);
}

/* Ensure mobile nav drawer is strictly hidden on desktop */
.mobile-nav-drawer {
  display: none !important;
}

/* Mobile Hamburger */
.mobile-hamburger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
}

.mobile-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

@media (max-width: 992px) {
  .nav-stack {
    display: none;
  }
  .mobile-hamburger {
    display: flex;
  }
  .btn-withdraw {
    display: none;
  }
}