html,
body {
margin: 0;
padding: 0;
}

body {
background-color: var(--color-bg);
}

.sidebar {
display: none;
background-color: var(--color-primary);
width: 70%;
height: 100dvh;
z-index: 20;
position: absolute;
transform: translateX(-100%);
transition: transform 0.3s ease;
flex-direction: column;
align-items: center;
font-family: sans-serif;
}

#side.show {
transform: translateX(0);
}



.profile {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: var(--color-text);
font-size: 35px;
margin-top: 25px;
}

.profile_picture {
width: 150px;
}

.line {
width: 80%;
margin: 0 auto;
height: 1px;
background-color: #8e8e8e;


}

.menu_side {
width: 100%;
height: 50%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
font-family: 'BPG Glaho Arial', sans-serif;
}

.menu_side li {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding-left: 0;
margin-bottom: 0;
}


.menu_side li a {
display: flex;
align-items: center;
text-decoration: none;
gap: 1vh;
color: var(--color-text);
font-size: 19px;
}



.buttons_sidebar {
width: 100%;
margin-top: 3vh;
display: flex;
align-items: center;
gap: 3vh;
flex-direction: column;
}

.sign_out_button {
color: var(--color-text);
height: 40px;
width: 80%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 25px;
background-color: transparent;
gap: 18px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid var(--border-color);
padding: 10px 0px;
    text-decoration: none;
}

.sign_out_button img {
width: 20px;
height: 20px;
text-align: center;
}

.cart_button {
color: var(--color-text);
height: 40px;
width: 80%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 25px;
background-color: transparent;
gap: 18px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid var(--border-color);
padding: 10px 0px;
}

.cart_button img {
width: 20px;
height: 20px;
text-align: center;
}


.bottom_buttons {
margin-top: 2vh;
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
}


.dark_resp {
width: 40px;
height: 40px;
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--color-text);
border-radius: 50%;
font-size: 16px;
cursor: pointer;

}

.dark_resp img {
height: 100%;
width: 50%;
}


.language_button_resp {
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--color-text);
border-radius: 15px;
font-size: 16px;
cursor: pointer;
width: 50px;
height: 40px;
transition: 0.3s;
}

.language_button_resp_div{
    width: 50px;
    height: 0px;
    position: absolute;
    margin-top: 0px;
    background-color: var(--color-primary);
    border: none;
    transition: 0.3s;
    border-radius: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.language_change_button_resp{
    text-decoration: none;
    /*text-underline: none;*/
    color:  var(--color-text);
    font-size: 0px;
    transition: 0.1s;
}

.x_button_div {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 20px 20px 0px;
}

.install_button {
color: var(--color-text);
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: #52796f;
border: none;
border-radius: 10px;
}

.profile-info {
display: flex;
align-items: center;
width: 80%;
justify-content: space-between;
margin-top: -25px;
margin-bottom: 25px;
    /*text-align: center;*/
    /*background-color: blue;*/
}

/* Backdrop that blurs page when sidebar is open */
#sidebar-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.301);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 12;
}

#sidebar-backdrop.visible {
opacity: 1;
pointer-events: auto;
}

/* ensure sidebar is above backdrop */
.sidebar {
z-index: 20;
}

/* Additional mobile optimizations */
@media (max-width: 560px) {
.profile {
flex-direction: column;
}

.profile-info {
flex-direction: column;
}

.profile_picture {
width: 100px;
}

/* Add extra padding for mobile browsers */
.sidebar {
padding-bottom: max(env(safe-area-inset-bottom), 10px);
}
.menu_side li a {
font-size: 14px;
}
.sign_out_button {
font-size: 14px;
}
.cart_button {
font-size: 14px;
}
}