/**************************************************
SIDEBAR MAIN CONTAINER
**************************************************/

.sb{

position:fixed;

top:0;

width:260px;

height:100%;

background-color:#ffffff;

box-shadow:2px 0 12px rgba(0,0,0,0.15);

z-index:9999;

padding-top:60px;

overflow-y:auto;

transition-duration:0.30s;

transition-timing-function:ease;

transition-property:left,right;

}


/**************************************************
SIDEBAR POSITION LTR
**************************************************/

.sb.ltr{

left:-260px;

right:auto;

direction:ltr;

}

.sb.ltr.active{

left:0;

right:auto;

}


/**************************************************
SIDEBAR POSITION RTL
**************************************************/

.sb.rtl{

right:-260px;

left:auto;

direction:rtl;

}

.sb.rtl.active{

right:0;

left:auto;

}


/**************************************************
SIDEBAR HEADER
**************************************************/

.sb-header{

position:absolute;

top:0;

width:100%;

height:55px;

background-color:#ffffff;

border-bottom:1px solid #e5e7eb;

display:flex;

align-items:center;

justify-content:space-between;

padding-left:15px;

padding-right:15px;

box-sizing:border-box;

}


/**************************************************
HEADER LTR
**************************************************/

.sb.ltr .sb-header{

flex-direction:row;

}


/**************************************************
HEADER RTL
**************************************************/

.sb.rtl .sb-header{

flex-direction:row-reverse;

}


/**************************************************
BACK ICON
**************************************************/

.sb-back{

font-size:20px;

cursor:pointer;

color:#111827;

width:30px;

display:flex;

align-items:center;

justify-content:center;

}


/**************************************************
CLOSE ICON
**************************************************/

.sb-close{

font-size:22px;

cursor:pointer;

color:#111827;

width:30px;

display:flex;

align-items:center;

justify-content:center;

}


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

.sb-title{

flex-grow:1;

font-size:16px;

font-weight:600;

color:#111827;

text-align:center;

}


/**************************************************
LINK BASE
**************************************************/

.sb a{

display:flex;

align-items:center;

padding-top:14px;

padding-bottom:14px;

padding-left:20px;

padding-right:20px;

text-decoration:none;

color:#111827;

font-size:15px;

font-weight:500;

border-bottom:1px solid #f1f5f9;

background-color:#ffffff;

transition-duration:0.20s;

transition-property:background-color;

gap:12px;

direction:ltr;

}

/**************************************************
LINK HOVER
**************************************************/

/**************************************************
LTR LINK LAYOUT — FINAL FIX
**************************************************/

.sb.ltr a{

flex-direction:row;

}

.sb.ltr a i{

order:1;

margin-right:12px;

}

.sb.ltr a span{

order:2;

margin-right:auto;

}

/**************************************************
LINK ICON BASE
**************************************************/


/**************************************************
LINK TEXT BASE
**************************************************/


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


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

/**************************************************
RTL LINK LAYOUT — FINAL FIX
**************************************************/

.sb.rtl a{

flex-direction:row;

text-align:right;

}

.sb.rtl a i{

order:2;

margin-left:12px;

margin-right:0;

}

.sb.rtl a span{

order:1;

margin-left:auto;

text-align:right;

}

/**************************************************
DIVIDER
**************************************************/

.sb hr{

border:none;

border-top:1px solid #e5e7eb;

margin-top:10px;

margin-bottom:10px;

}


/**************************************************
LANGUAGE TITLE
**************************************************/

.sb-language-title{

display:flex;

align-items:center;

justify-content:space-between;

gap:12px;

padding-top:14px;

padding-bottom:14px;

padding-left:20px;

padding-right:20px;

font-weight:600;

border-bottom:1px solid #e5e7eb;

}


/**************************************************
LANGUAGE TITLE LTR
**************************************************/

.sb.ltr .sb-language-title{

flex-direction:row;

text-align:left;

}


/**************************************************
LANGUAGE TITLE RTL
**************************************************/

.sb.rtl .sb-language-title{

flex-direction:row-reverse;

text-align:right;

}


/**************************************************
LANGUAGE ITEM BASE
**************************************************/

.language-item{

display:block;

font-size:14px;

padding-top:12px;

padding-bottom:12px;

text-decoration:none;

color:#111827;

}


/**************************************************
LANGUAGE ITEM LTR
**************************************************/

.sb.ltr .language-item{

padding-left:40px;

padding-right:20px;

text-align:left;

}


/**************************************************
LANGUAGE ITEM RTL
**************************************************/

.sb.rtl .language-item{

padding-right:40px;

padding-left:20px;

text-align:right;

}


/**************************************************
LANGUAGE ACTIVE
**************************************************/

.language-item.active{

background-color:#f3f4f6;

font-weight:600;

}


/**************************************************
SIGN IN CONTAINER
**************************************************/

.sb-signin{

padding:20px;

}


/**************************************************
SIGN IN BUTTON
**************************************************/

.sb-signin-button{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

padding-top:14px;

padding-bottom:14px;

padding-left:20px;

padding-right:20px;

background-color:#2563eb;

color:#ffffff;

border-radius:12px;

font-size:16px;

font-weight:600;

text-decoration:none;

box-shadow:0 4px 12px rgba(0,0,0,0.15);

transition-duration:0.20s;

}


/**************************************************
SIGN IN BUTTON HOVER
**************************************************/

.sb-signin-button:hover{

background-color:#1d4ed8;

}


/**************************************************
SIGN IN BUTTON RTL
**************************************************/

.sb.rtl .sb-signin-button{

flex-direction:row-reverse;

}


/**************************************************
OVERLAY
**************************************************/

.sb-overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background-color:rgba(0,0,0,0.40);

display:none;

z-index:9998;

}


/**************************************************
OVERLAY ACTIVE
**************************************************/

.sb-overlay.active{

display:block;

}

/************************************************
LANGUAGE SECTION
************************************************/

.sb-language-title{

display:flex;
align-items:center;
justify-content:space-between;
padding:14px 20px;
cursor:pointer;

}

.sb-language-left{

display:flex;
align-items:center;
gap:10px;

}

.sb-language-arrow{

transition:0.3s;

}

.sb-language.open .sb-language-arrow{

transform:rotate(180deg);

}


/************************************************
COLLAPSE
************************************************/

.sb-language-list{

max-height:0;
overflow:hidden;
transition:0.3s ease;

}

.sb-language.open .sb-language-list{

max-height:300px;

}


/************************************************
LANGUAGE ITEM
************************************************/

.language-item{

display:flex;
align-items:center;
justify-content:space-between;
padding:12px 20px;
text-decoration:none;
color:#111827;
transition:0.2s;

}

.language-item:hover{

background:#f3f4f6;

}

.language-info{

display:flex;
align-items:center;
gap:10px;

}

.flag{

width:18px;
height:18px;
border-radius:50%;
object-fit:cover;

}

.language-check{

color:#16a34a;
font-size:14px;

}


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

.sb.rtl .language-info{

flex-direction:row-reverse;

}

.sb.rtl .language-item{

flex-direction:row-reverse;

}

/**************************************************
LANGUAGE TITLE BASE
**************************************************/

.sb-language-title{

display:flex;

align-items:center;

padding:14px 20px;

font-weight:600;

border-bottom:1px solid #e5e7eb;

cursor:pointer;

gap:10px;

}


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

.sb.ltr .sb-language-title{

flex-direction:row;

text-align:left;

}

.sb.ltr .sb-language-title .sb-language-arrow{

margin-left:auto;

}


/**************************************************
RTL LAYOUT — FINAL FIX
**************************************************/

.sb.rtl .sb-language-title{

flex-direction:row;

text-align:right;

}

.sb.rtl .sb-language-title .fa-globe{

order:1;

}

.sb.rtl .sb-language-title span{

order:2;

}

.sb.rtl .sb-language-title .sb-language-arrow{

order:3;

margin-right:auto;

}
/**************************************************
OPTIONAL ACTIVE BACKGROUND
SUBTLE PROFESSIONAL LOOK
**************************************************/

.language-item.active{

background-color:#f0fdf4;

font-weight:600;

}

/**************************************************
SIDEBAR HEADER — FINAL FIX 100%
**************************************************/

.sb-header{

position:absolute;

top:0;

width:100%;

height:55px;

background-color:#ffffff;

border-bottom:1px solid #e5e7eb;

display:flex;

align-items:center;

padding-left:15px;

padding-right:15px;

box-sizing:border-box;

}


/**************************************************
TITLE TAKES MIDDLE SPACE
**************************************************/

.sb-title{

flex:1;

text-align:center;

font-size:16px;

font-weight:600;

}


/**************************************************
LTR ORDER
**************************************************/

.sb.ltr .sb-back{

order:1;

}

.sb.ltr .sb-title{

order:2;

}

.sb.ltr .sb-close{

order:3;

}


/**************************************************
RTL ORDER — THIS IS THE KEY FIX
**************************************************/

.sb.rtl .sb-back{

order:3;

}

.sb.rtl .sb-title{

order:2;

}

.sb.rtl .sb-close{

order:1;

}

.sb-signin-button{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

padding-top:14px;

padding-bottom:14px;

padding-left:20px;

padding-right:20px;

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

color:#ffffff;

border-radius:12px;

font-size:16px;

font-weight:600;

text-decoration:none;

box-shadow:0 6px 18px rgba(249,115,22,0.25);

transition:0.2s;

}

.sb-signin-button:hover{

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

}