/* Header moldável por tema.
   Troque só as variáveis abaixo (ou as --ep-* do tema ativo)
   para gerar uma nova marca sem alterar o layout. */
:root,
html {
    --bg-header: var(--secondary-color, #0b0b0e);
    --primary-color: var(--tenant-primary, #f3ba2f);
    --primary-color-hover: color-mix(in srgb, var(--primary-color) 82%, #000);
    --text-color: var(--ep-color-text-default, var(--text-color-white-100, #fff));
    --header-pill-bg: color-mix(in srgb, var(--secondary-color, #0b0b0e) 84%, #fff);
    --header-pill-border: color-mix(in srgb, var(--primary-color) 38%, transparent);
    --header-funds-bg: var(--primary-color);
    --header-funds-text: var(--ep-color-text-on-color, #fff);
    --header-logo-max-height: 1.75rem;
}

.ion-page ion-header ion-toolbar,
.main-page ion-header ion-toolbar,
ion-header.ion-no-border ion-toolbar {
    --background: var(--bg-header) !important;
    --color: var(--text-color) !important;
    --border-width: 0 !important;
    --min-height: 3.25rem;
    background: var(--bg-header) !important;
    color: var(--text-color);
    overflow: visible !important;
}

ion-header,
ion-header ion-toolbar,
ion-header .toolbar-container {
    overflow: visible !important;
}

.logo-wrap {
    display: flex !important;
    align-items: center;
    gap: .375rem;
    min-width: 0;
}

.logo-wrap .logo,
.logo-wrap img {
    max-height: var(--header-logo-max-height) !important;
    width: auto !important;
    object-fit: contain;
}

.logo-wrap.logo-fallback::after {
    content: var(--platform-name, "");
    color: var(--text-color);
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assets-box.header-balance-pill,
html .assets-box.header-balance-pill[data-v-6d4afe61] {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: .35rem;
    padding: .15rem .15rem .15rem .4rem !important;
    border: .0625rem solid var(--header-pill-border) !important;
    border-radius: 999px !important;
    background: var(--header-pill-bg) !important;
    box-shadow: none !important;
    color: var(--text-color);
}

.assets-box.header-balance-pill .br-flag {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.assets-box.header-balance-pill .assets-img {
    display: none !important;
}

.assets-box.header-balance-pill .currency,
.assets-box.header-balance-pill .assets-box-number {
    color: #ffffff !important;
    text-shadow: none !important;
    font-weight: 700;
}

.assets-box.header-balance-pill .deposit {
    margin-left: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    --background: transparent !important;
    --color: var(--text-color) !important;
    --padding-start: .15rem;
    --padding-end: .15rem;
}

.assets-box.header-balance-pill .deposit::part(native) {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.assets-box.header-balance-pill .deposit-icon {
    color: var(--primary-color) !important;
    animation: none !important;
    padding: .15rem !important;
    font-size: 1rem !important;
}

.assets-box.header-balance-pill .funds-btn {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin: 0;
    padding: .28rem .55rem;
    border: 0;
    border-radius: 999px;
    background: var(--header-funds-bg);
    color: var(--header-funds-text);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.assets-box.header-balance-pill .funds-btn:hover,
.assets-box.header-balance-pill .funds-btn:focus-visible {
    background: var(--primary-color-hover);
}

.assets-box.header-balance-pill .funds-caret {
    font-size: .55rem;
    transform: translateY(.05rem);
}

.assets-box.header-balance-pill .funds-menu {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 40;
    min-width: 8.5rem;
    padding: .25rem;
    border: .0625rem solid var(--header-pill-border);
    border-radius: .5rem;
    background: var(--bg-header);
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .28);
}

.assets-box.header-balance-pill .funds-menu-item {
    display: block;
    width: 100%;
    padding: .45rem .6rem;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: var(--text-color);
    font-size: .75rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.assets-box.header-balance-pill .funds-menu-item:hover {
    background: var(--header-pill-bg);
    color: var(--primary-color);
}

ion-header ion-toolbar .language-btn,
ion-header ion-toolbar .earth,
#tabbar-tabs-inicio-components-HeaderBar-components-languageButton-index {
    display: none !important;
}