.dark-mode {
    background-color: #0a0a0a;
    color: white;
    
}
.dark-mode .menu-item:hover{
    box-shadow: 0px 5px 15px rgba(211, 86, 3, 0.649);
}
.dark-mode button {
    background-color: #000000;
    color: white;
}
.dark-mode button:hover {
    background-color: #000000;
    color: white;
}
    .dark-mode .theme-toggle-container input[type="checkbox"] {
    background: #000000;
}
.dark-mode .theme-toggle-container input[type="checkbox"]:checked {
    background: #000000;
}
.dark-mode .body{
    background-color:#0a0a0a;

}
.dark-mode h2{
    color: orangered;
}
.dark-mode .menu-item{ 
    background-color: #141313;
    color: rgb(213, 208, 199);
}
.dark-mode .navbar{
    background-color: #000;
    color: white;

}
.dark-mode #location-container{
    background-color: #000000;
}
.dark-mode .container{
    background-color: #000;
}
.dark-mode .button.openbtn{
background-color: #000;
color: orangered;
}
.dark-mode .header{
color: orangered;
background-color: #000;

}
.dark-mode span.cierre-btn{
    color: orangered;
}
.dark-mode #saveAddressButton{
    background-color: #000;
    color: #048048;
    font-weight: bold;
    border: 1px solid rgb(33, 32, 32);
}
.dark-mode .modal-content{
background-color: #040404fb;
color: white;
}
.dark-mode .card-price{
    color: white;
}
.dark-mode .card-button{
    color: rgb(214, 207, 207);
}
.dark-mode .card-button:hover{
    color:rgb(0, 0, 0)
}
.dark-mode .card-rating{
    color: white;
}
.dark-mode .card-score{
    color: white;
}
.dark-mode .card{
    background-color:#080808d4 ;
    color: white;
}
.dark-mode .download-button{
    border: 1px solid rgb(255, 255, 255);
    
}
.dark-mode a.preguntas{
    color: white;
}
.dark-mode a.unirse{
    color: white;
}
.dark-mode .cierrespam{
    color: orangered;
    background-color: white;
}
.dark-mode .button.openbtn{
    background-color: #000;
}
.dark-mode .custom-btn-text{
    color: white;
}
.dark-mode .untext{
    color: white;
}
.dark-mode .untext1{
    text-align: center;
    color: white;
    font-weight: 800px;
}
.dark-mode .span.custom-btn-text{
    color: white;
}
.dark-mode .productos-destacados-title {
    color:white;
}
.dark-mode .locacion{
    background: rgb(29, 29, 29);
    color: white;
    border: #000;
}

.dark-mode .second-modal-content{
    background-color: #ffffff;

    color: rgb(0, 0, 0);
    

}
.dark-mode .second-cierre-btn {
    color: orangered;
}
@media (min-width: 769px) {
    .dark-mode .bottom-nav {
        display: none;
    }
}
.dark-mode .bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #040404;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.dark-mode .nav-button {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    color: #ffffff;
    font-size: 14px;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}
.dark-mode .addressModal{
color:#000;
}
.dark-mode .nav-button .icon {
    width: 24px;
    height: 24px;
    fill: #ffffff;
    display: block;
    margin: 0 auto;
}
.dark-mode .nav-button:hover {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    color: #ffffff;
    font-size: 14px;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
  
   background-color: rgba(2, 111, 20, 0.05);

}
.dark-mode #greeting{
    color: white;
}
.dark-mode #ordersList{
    color: #000;
    
}

.untext1{
    text-align: center;
    color: #000;
}
.uneteclass{
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    display: flex;
}
.dark-mode .profile-buttons a{
    color: white;
}
.dark-mode .data-field{
    background-color: #111;
}
.dark-mode .save-btn{
    box-shadow: 0px 5px 15px rgba(211, 86, 3, 0.649);
}
body {
font-family: "Lato", sans-serif;
margin: 0;
padding: 0;
}

.header {
display: flex;
align-items: center;
background-color: #fff;
padding: 10px;
position: sticky;
top: 0;
z-index: 1001;
justify-content: space-between;
}

.header-buttons {
display: flex;
align-items: center;
}

.header-buttons a {
text-decoration: none;
color: black;
font-size: 16px;
margin-left: 15px;
}

.header-buttons a:hover {
color: #ff6a00;
}

.logo {
height: 40px;
margin-left: 15px;
}

.vertical-hr {
width: 1px;
height: 40px;
background-color: grey;
margin: 0 15px;
}

.navbar {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
z-index: 1000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.navbar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #000;
display: block;
transition: 0.3s;
}

.navbar a:hover {
color: #ff6a00;
}

.navbar .closebtn {
position: absolute;
top: 20px;
right: 25px;
font-size: 36px;
cursor: pointer;
color: #ff5900;
}

.navbar .closebtn-inside {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
margin-top: 20px;
    margin-bottom: 50px;
}


.navbar .closebtn-inside:hover {
background-color: #141313;
color: #ff5900;
}

.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #ffffff;
color: rgb(0, 0, 0);
padding: 10px 15px;
border: none;
}

.openbtn:hover {
background-color: #ffffff;
color: orangered;
}

.main-content {
margin-top: 80px;
padding: 20px;
}

input[type="text"] {
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
}

button {
padding: 10px 15px;
margin: 10px;
background-color: #000000;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #000000;
}

@media screen and (max-width: 768px) {
.header {
    flex-direction: row;
    align-items: center;
    padding: 10px;
    justify-content: space-between;
}

.header .openbtn {
    margin: 0;
}

.header .vertical-hr {
    display: none;
}

.header .logo {
    margin: 0;
}

.header input[type="text"] {
    width: calc(100% - 20px);
    margin-left: 10px;
}

.header-buttons {
    display: none;
}

.navbar a {
    font-size: 18px;
}
.navbar .closebtn {
    font-size: 20px;
    top: 15px;
    right: 35px;
}
.navbar .closebtn-inside {
    font-size: 18px;
}
}