/**************************************************
PHOENIX BIGO — APPLICATION CONTAINER
MAIN MOBILE FRAME CENTERED
**************************************************/

.application-container{

width:100%;

max-width:430px;

margin-left:auto;

margin-right:auto;

min-height:100vh;

padding-top:55px;

background:var(--phoenix-surface);

position:relative;

box-sizing:border-box;

box-shadow:0 0 0 1px var(--phoenix-border);

}


/**************************************************
PHOENIX BIGO — NAVIGATION BAR
CENTERED DESKTOP + MOBILE
**************************************************/

.navigation-bar{

position:fixed;

top:0;

left:50%;

transform:translateX(-50%);

width:100%;

max-width:430px;

height:55px;

display:flex;

align-items:center;

justify-content:space-between;

background:var(--phoenix-surface);

border-bottom:1px solid var(--phoenix-border);

z-index:1000;

padding-left:15px;

padding-right:15px;

box-sizing:border-box;

box-shadow:0 2px 6px rgba(0,0,0,0.04);

}


/**************************************************
LTR LAYOUT
**************************************************/

.navigation-bar.ltr{

flex-direction:row;

text-align:left;

}


/**************************************************
RTL LAYOUT
**************************************************/

.navigation-bar.rtl{

flex-direction:row-reverse;

text-align:right;

}


/**************************************************
TITLE
**************************************************/

.navigation-bar-title{

font-size:17px;

font-weight:600;

color:var(--phoenix-text);

white-space:nowrap;

display:flex;

align-items:center;

justify-content:center;

}


/**************************************************
ICON
**************************************************/

.navigation-bar-icon{

font-size:21px;

cursor:pointer;

color:var(--phoenix-primary);

display:flex;

align-items:center;

justify-content:center;

min-width:24px;

height:24px;

transition:color 0.2s ease;

}


.navigation-bar-icon:hover{

color:var(--phoenix-primary-hover);

}


/**************************************************
SECTIONS
**************************************************/

.navigation-bar-section.nav-start{

display:flex;

align-items:center;

justify-content:flex-start;

}


.navigation-bar-section.nav-center{

position:absolute;

left:50%;

transform:translateX(-50%);

display:flex;

align-items:center;

justify-content:center;

}


.navigation-bar-section.nav-end{

display:flex;

align-items:center;

justify-content:flex-end;

}


/**************************************************
RTL POSITION FIX
**************************************************/

.navigation-bar.rtl .nav-start{

order:3;

}


.navigation-bar.rtl .nav-center{

order:2;

}


.navigation-bar.rtl .nav-end{

order:1;

}


/**************************************************
LTR POSITION FIX
**************************************************/

.navigation-bar.ltr .nav-start{

order:1;

}


.navigation-bar.ltr .nav-center{

order:2;

}


.navigation-bar.ltr .nav-end{

order:3;

}