/* Standard page header — language.html is the reference. */
:root{--ig-page-header-h:48px;--ig-page-header-pad:14px;--ig-page-header-bg:#fff;--ig-page-header-line:#e5e7eb;--ig-page-header-text:#111827;--ig-page-header-icon:#0f172a}

/* Normal inner-page headers only. Do not target the branded index/profile headers. */
body.broker-theme .header,
body.broker-theme .language-header,
body.broker-theme .trading-header,
body.broker-theme .order-history-header,
body.broker-theme .staking-header,
body.broker-theme .page-header{
  height:var(--ig-page-header-h)!important;
  min-height:var(--ig-page-header-h)!important;
  max-height:var(--ig-page-header-h)!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0 var(--ig-page-header-pad)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  top:auto!important;left:auto!important;right:auto!important;
  background:var(--ig-page-header-bg)!important;
  color:var(--ig-page-header-text)!important;
  border:0!important;
  border-bottom:1px solid var(--ig-page-header-line)!important;
  box-shadow:none!important;
  border-radius:0!important;
  z-index:100!important;
}

body.broker-theme .header .back-btn,
body.broker-theme .language-header .back-btn,
body.broker-theme .trading-header .back-btn,
body.broker-theme .order-history-header .back-btn,
body.broker-theme .staking-header .back-btn,
body.broker-theme .page-header .back-btn{
  position:absolute!important;
  left:10px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--ig-page-header-icon)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:20px!important;
  line-height:1!important;
  box-shadow:none!important;
  z-index:3!important;
}
body.broker-theme .header .back-btn i,
body.broker-theme .language-header .back-btn i,
body.broker-theme .trading-header .back-btn i,
body.broker-theme .order-history-header .back-btn i,
body.broker-theme .staking-header .back-btn i,
body.broker-theme .page-header .back-btn i{font-size:20px!important;line-height:1!important;color:inherit!important;}

body.broker-theme .header-title,
body.broker-theme .language-title,
body.broker-theme .order-history-header h1,
body.broker-theme .staking-header-title,
body.broker-theme .page-header .header-title{
  margin:0!important;
  padding:0!important;
  max-width:calc(100% - 88px)!important;
  color:var(--ig-page-header-text)!important;
  font-size:16px!important;
  line-height:1.2!important;
  font-weight:700!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Trading pages use a pair selector instead of a plain title. Center it exactly like language.html title. */
body.broker-theme .trading-header .trading-header-left,
body.broker-theme .header .header-left{
  width:100%!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  margin:0!important;
  padding:0!important;
}
body.broker-theme .trading-header .trading-pair-info,
body.broker-theme .trading-header #pair-selector,
body.broker-theme .header #pair-selector{
  margin:0!important;
  max-width:calc(100% - 88px)!important;
  color:var(--ig-page-header-text)!important;
  font-size:16px!important;
  font-weight:700!important;
  line-height:1.2!important;
  text-align:center!important;
}
body.broker-theme .trading-header .pair-symbol,
body.broker-theme .header .pair-symbol{color:var(--ig-page-header-text)!important;font-size:16px!important;font-weight:700!important;}
body.broker-theme .trading-header-right,
body.broker-theme .header-right{height:100%!important;align-items:center!important;}

@media (max-width:390px){
  body.broker-theme .header,
  body.broker-theme .language-header,
  body.broker-theme .trading-header,
  body.broker-theme .order-history-header,
  body.broker-theme .staking-header,
  body.broker-theme .page-header{width:100%!important;max-width:100%!important;}
}

/* 2026-08-13 FULL-WIDTH PAGE HEADER FIX
   Mobile: header must span the full viewport edge-to-edge, even when nested
   inside a centered/narrow page container.
   Desktop: keep the same 390px app-shell width and center it, never wider. */
@media (max-width: 600px) {
  body.broker-theme .header,
  body.broker-theme .language-header,
  body.broker-theme .trading-header,
  body.broker-theme .order-history-header,
  body.broker-theme .staking-header,
  body.broker-theme .page-header,
  body.broker-theme .top-header {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }
}

@media (min-width: 601px) {
  /* The BODY itself is already the centered 390px desktop app shell.
     Headers must fill that shell directly. Never shift them another 50%,
     otherwise the left half (including the back button) gets clipped. */
  body.broker-theme .header,
  body.broker-theme .language-header,
  body.broker-theme .trading-header,
  body.broker-theme .order-history-header,
  body.broker-theme .staking-header,
  body.broker-theme .page-header,
  body.broker-theme .top-header {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }
}

/* Order-history desktop guard: keep the complete header inside the centered shell. */
@media (min-width:601px){
  body.broker-theme.order-history-page > .order-history-header{
    width:100%!important;max-width:100%!important;min-width:0!important;
    left:auto!important;right:auto!important;transform:none!important;
    margin-left:0!important;margin-right:0!important;
  }
}