/* ============================================================
   MAIN HEADER
============================================================ */

#vte-header{

height:var(--header-height);

background:rgba(255,255,255,.92);

backdrop-filter:blur(10px);

border-bottom:1px solid #eee;

}

.vte-container{

max-width:var(--container);
margin:auto;

height:100%;

display:flex;
align-items:center;
justify-content:space-between;

gap:20px;
padding:0 16px;

}

/* ============================================================
   LOGO
============================================================ */

.vte-left{
display:flex;
align-items:center;
gap:10px;
flex-shrink:0;
}

#vte-logo{
height:52px;
width:auto;
}

.vte-license{
font-size:10px;
color:#666;
margin-top:2px;
}

.logo-wrap{
display:flex;
flex-direction:column;
text-decoration:none;
}

/* ============================================================
   MENU
============================================================ */

.vte-nav{
flex:1;
display:flex;
justify-content:center;
}

.vte-menu{
display:flex;
align-items:center;
gap:28px;
list-style:none;
margin:0;
padding:0;
}

.vte-menu li{
position:relative;
}

.vte-menu a{

font-size:15px;
font-weight:600;

color:#222;

text-decoration:none;
padding:6px 0;

display:inline-block;

}

.vte-menu a:hover{
color:var(--sun2);
}

.vte-menu a.active::after{

content:"";

position:absolute;

bottom:-6px;
left:0;

width:100%;
height:2px;

background:var(--sun2);

}

/* ============================================================
   MENU PARENT (VISA)
============================================================ */

.menu-parent{

display:inline-flex;
align-items:center;

font-size:15px;
font-weight:600;

color:#222;

background:none;
border:none;

padding:6px 0;

line-height:1;

font-family:inherit;

cursor:pointer;

}

.menu-parent:hover{
color:var(--sun2);
}

.menu-arrow{
font-size:12px;
transition:transform .2s;
}

.has-sub:hover .menu-arrow{
transform:rotate(180deg);
}

.menu-parent.active{
color:var(--sun2);
font-weight:700;
}

/* ============================================================
   SUBMENU (DESKTOP)
============================================================ */

.sub{

list-style:none;

position:absolute;
top:100%;
left:0;

background:#fff;

border-radius:10px;

box-shadow:0 15px 40px rgba(0,0,0,.12);

width:210px;

padding:10px 0;

opacity:0;
visibility:hidden;

transform:translateY(10px);
transition:.25s;

}

.has-sub:hover .sub{

opacity:1;
visibility:visible;
transform:translateY(0);

}

.sub li{
padding:6px 16px;
}

.sub a{

display:block;

background:#f5f7ff;

border-radius:8px;

padding:8px 10px;

font-size:14px;

}

.sub a:hover{
background:#e4e9ff;
color:var(--sun2);
}

.sub a.active{
color:var(--sun2);
font-weight:700;
}

/* ============================================================
   LOGIN BUTTON
============================================================ */

.btn-main{

padding:9px 20px;

border-radius:30px;

background:linear-gradient(90deg,var(--sun2),var(--sun1));

color:#fff;

font-weight:700;

border:0;

cursor:pointer;

transition:.2s;

}

.btn-main:hover{
transform:scale(1.05);
}

/* ============================================================
   HAMBURGER
============================================================ */

.hamburger{

display:none;
flex-direction:column;
gap:4px;

background:none;
border:0;

cursor:pointer;

}

.hamburger span{

width:26px;
height:3px;

background:#333;

border-radius:2px;

transition:all .3s;

}

/* cross animation */

.hamburger.active span:nth-child(1){
transform:translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){
transform:translateY(-7px) rotate(-45deg);
}

/* ============================================================
   MOBILE SLIDE MENU
============================================================ */

.vte-mobile-panel{

position:fixed;

top:var(--headerTotal);
right:0;

width:80%;
max-width:320px;

height:calc(100vh - var(--headerTotal));

background:#fff;

z-index:15000;

overflow-y:auto;

padding:20px;

transform:translateX(100%);
transition:transform .35s ease;

box-shadow:-10px 0 30px rgba(0,0,0,.15);

}

.vte-mobile-panel.open{

transform:translateX(0);

}

.vte-mobile-panel ul{
list-style:none;
padding:0;
margin:0;
}

.vte-mobile-panel li{
border-bottom:1px solid #eee;
}

.vte-mobile-panel a{

display:block;

padding:16px 8px;

font-size:16px;
font-weight:600;

color:#111;

text-decoration:none;

}

.vte-mobile-panel a:hover{
color:var(--sun2);
}

/* mobile submenu */

.mobile-sub{

display:none;

background:#f7f7f7;

border-radius:10px;

margin:8px 0;

}

.mobile-sub a{
padding:12px 16px;
font-size:15px;
}

/* MOBILE MENU TEXT ALIGN FIX */

.mobile-row{

display:flex;
align-items:center;
justify-content:space-between;

padding:16px 8px;

font-size:16px;
font-weight:600;

color:#111;

}

.mobile-row a,
.mobile-row button{

font-size:16px;
font-weight:600;

color:#111;

text-decoration:none;

background:none;
border:none;

padding:0;
margin:0;

font-family:inherit;

}

.mobile-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.35);

z-index:14999;

opacity:0;
pointer-events:none;

transition:.3s;

}

.mobile-overlay.show{
opacity:1;
pointer-events:auto;
}

/* ============================================================
   MOBILE TOPBAR FIXheader
============================================================ */

@media (max-width:768px){

.vte-topbar{
height:auto;
padding:6px 0;
}

.vte-top-inner{

display:grid;

grid-template-columns: auto 1fr auto;

grid-template-rows:auto auto;

align-items:center;

gap:6px;

}

/* NEWS TICKER FULL WIDTH */

.ticker{
grid-column:1 / 4;
order:1;
}

/* TRACK VISA LEFT */

.top-left{
grid-column:1;
order:2;
}

/* SOCIAL ICONS CENTER */

.top-right{
grid-column:3;
order:2;
justify-content:flex-end;
}

/* B2B BUTTON ALIGN */

.b2b-btn{
margin-left:6px;
}

}

@media(max-width:980px){

.vte-nav{
display:none;
}

.menu-arrow{
display:none;
}

.hamburger{
display:flex;
}

.vte-container{

display:grid;

grid-template-columns:auto 1fr auto;

gap:10px;

}

.center-auth{
justify-self:center;
}

}

@media(max-width:768px){

#vte-logo{
height:42px;
}

.vte-license{
display:none;
}

/* mobile topbar layout */

@media(max-width:768px){

.vte-top-inner{

display:grid;

grid-template-columns:auto 1fr auto;

grid-template-rows:auto auto;

align-items:center;

gap:6px;

}

/* ticker full width */
.ticker{
grid-column:1/4;
}

/* track visa left */
.top-left{
grid-column:1;
justify-self:start;
}

/* social icons center */
.top-right{
grid-column:2;
justify-self:center;
display:flex;
gap:10px;
}

/* join button right */
.b2b-btn{
grid-column:3;
justify-self:end;
}

}
}

@media(max-width:480px){

.vte-topbar{
font-size:12px;
}

}