
.flex { display: flex; }
.justify { justify-content: space-between; }
.nomargin { margin: -10px; width: 100%; height: 100px; }
.padding { padding: 10px; }
.cursor{ cursor: pointer; }
.margina{ margin: 10px 0px 10px 0px; }
.marginl{ margin: 0px 0.3% 0px 0.3%; }
.geral{ z-index: 1; }
.text-danger {
    color: red !important; /* Define a cor vermelha */
}
.largura{ max-width: 100%; } 
.center{ text-align: center; justify-content: center; align-items: center;}
.textogg {display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;}
.link{text-decoration: none; color: black;}
.border{ border: none; }
.carrinho-container {max-width: 1000px;margin: auto;}
.produto {display: flex;align-items: center;justify-content: space-between;padding: 10px;margin-bottom: 10px;}
.produto img {width: 100px;height: 100px;object-fit: cover;}
.quantidade {width: 50px;text-align: center;}
.quantidade-container {display: flex;align-items: center;}
.thumbnails {flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.thumbnail {width: 80px;height: 80px;object-fit: cover;margin: 5px 0;cursor: pointer;}
.carousel-inner {display: flex;transition: transform 0.5s ease;}
.centerdesk{display: flex;text-align: center; justify-content: center; align-items: center}
.control {background-color: rgba(255, 255, 255, 0.8);border: none;padding: 10px;cursor: pointer;border-radius: 50%;}
.resultados {position: relative;top: 10%;left: 0;right: 0;z-index: 2000; overflow-y: auto;}
.prato-container {margin: auto;padding: 20px;display: flex;flex-direction: row;}
.prato-imagem{width: 100%;}
.back-button {padding: 10px 20px;background-color: #007bff;color: white;border: none;;cursor: pointer;width: 100%;}
.back-button:hover {background-color: #0056b3;}
.main-image img{width: 80%; min-width: 700px; }

body {background-color:  rgb(240, 243, 248);font-family: Arial, sans-serif;max-width: 99.8%;}
.negrito{font-weight: bold;}
.borda1:hover{border: 3px solid rgb(196, 160, 100);}
.auto{margin-top: auto;}

.hidden {display: none;  } 
.centera{align-items: center;}

.justify { justify-content: space-between; text-align:justify; }
.ratio{object-fit: cover;aspect-ratio: 1 / 1;}
body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }
    .container {
        flex: 1;
    }
    footer {
        text-align: center;
        padding: 20px;
        position: relative;
    }/* styles.css */

.notificacao-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
backdrop-filter: blur(5px);
}

.notificacao-card {
background-color: #f0f0f0;
border-radius: 8px;
padding: 20px;
width: 300px;
text-align: center;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.notificacao-card p {
margin: 0 0 15px;

color: #333;
}

.notificacao-card button {
padding: 8px 16px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;

}

.notificacao-card button:hover {
background-color: #45a049;
}
.button {
    
    border: none;
    
    padding: 10px 20px;

    
    box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button:hover {
    box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}


.input:hover {
    box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}

.input {
    background: #e0e5ec;
    border: none;
    
    padding: 10px;
    width: 100%;
    box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
    transition: all 0.3s ease;
}

.input::placeholder {
    color: #888;
}
.inputvao {
    outline: none;
    box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff;
}
.input:focus {
    outline: none;
    box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff;
}
@media (max-width: 1100px) {
  
    .imgheader{width: 90px;}
.buscaheader{width: 100%; height: 40px;}
.logo{width: 100px;}

.prato-card {flex: 1 1 calc(33% - 20px);}   
.cardindex{min-width: 33%; max-width: 33%;}
.cardcardindex{min-width: 80%; max-width: 100%;min-height: 450px; max-height: 500px;}
.imagemcardindex{min-width: 100%;}
.card {flex: 1;padding: 20px;justify-content: space-between;max-width: 100%;}
.item img {width: 100%;max-height: 475px;}

.margin{margin: 0px 10px 0 10px ;}
.carousel-card-wrapper{width: 100%;}
.carousel {position: relative;width: 100%;display: flex;overflow: hidden;}
.thumbnails {object-fit: cover;cursor: pointer; width: 100%; margin: 0; }
.thumbnail {width: 100px;height: 100px;object-fit: cover; aspect-ratio: 1 / 1; margin-right: 5px}
.main-image img{width: 100%; }
.carousel .main-image {flex: 2;position: relative;display: flex;justify-content: center;align-items: center;}
.nomargin { margin: -10px; width: 100%; height: 60px; }
.nocell{background-color: rgba(216, 223, 228,0.9);}
.pratos-lista {display: flex;flex-wrap: wrap;justify-content: space-between;}
.imagem-atual{width: 50px;}
.margincinq{margin: 10px; }
.lista {display: flex;flex-wrap: wrap;justify-content: space-between;}
.nomargintop{margin-top: -10px;}
.large{width: 90%;}
.carousel-controls {position: absolute;top: 50%;width: 100%;display: flex;justify-content: space-between;transform: translateY(-50%);}
.centermov{display: flex;text-align: center; justify-content: center; align-items: center}
.prato-container {max-width: 90%;padding: 10px;}
.movel1{max-width: 95%; margin-top:  10px;}
.movel2{width: 97.5%;}
.geral{padding:5px}
.dfas{margin: 5% 5% 5% 5%}
.movel3{ margin: 0 5% 0 5%}

.headersearch1{width: 50vw; margin-top: 3%}
}
@media (min-width: 1101px) {
.prato-card {flex: 1 1 calc(25% - 20px);}
.geral{margin: 0px 10% 0px 10%;}
.item img {width: 100%;max-height: 400px;}
.cardindex{min-width: 24.3%; max-width: 24.3%;}
.cardcardindex{min-width: 80%; max-width: 100%;min-height: 450px; max-height: 500px;}
.imagemcardindex{min-width: 100%;}
.card {flex: 1;margin: 20px 0px 20px 20px;padding: 20px;display: flex;flex-direction: column;justify-content: space-between;max-width: 20%;}
.imgheader{width: 70px;}
.buscaheader{ height: 40px;}
.logo{height: 150px; margin-top: 0px;}
.margin{margin: 0 10px 0 10px ;}
.prato-container {margin: auto;padding: 20px;display: flex;flex-direction: row;}
.pratos-lista {display: flex;flex-wrap: wrap;justify-content: space-between;}
.carousel-card-wrapper{display: flex;flex-wrap: wrap;justify-content: space-between;}
.flex { display: flex; }
.justify { justify-content: space-between; }
.nomargin { margin: -10px; width: 100%; height: 100px; }
.padding { padding: 10px; }
.cursor { cursor: pointer; }
.margina { margin: 20px 0px 20px 0px; }
.marginl { margin: 0px 0.3% 0px 0.3%; }
.geral { z-index: 1; }
.largura { max-width: 99.9%; }
.center { text-align: center; justify-content: center; align-items: center; }
.prato-container {display: flex;flex-wrap: wrap;justify-content: space-between;}
.carousel {display: flex;flex-direction: row;justify-content: space-between;align-items: center;flex: 1;}
.imagem-atual{width: 100px;}
.carousel .thumbnails {flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.carousel .main-image {flex: 2;position: relative;display: flex;justify-content: center;align-items: center;}
.topmargin{margin-top: -1px;}
.carousel .main-image img {min-width: 85%; }
.card {flex: 1;display: flex;flex-direction: column;justify-content: flex-start;max-width: 20%;  min-width: 200px;}
.marginbaixo{margin: 10px;display: flex;flex-wrap: wrap;justify-content: space-between}
.largedesk{width: 100%;}
.tamanho{margin: 0px 40% 0px 30%; min-width: 350px;}
.left{margin-left: 40px;}
.marginleft{margin-left: 50px;}
.marginright{margin-right: 50px;}
.listas {display: flex;flex-wrap: wrap;}
.pc1{width: 93%}
.pc3{width: 97%}
.pc2{margin-right: 20px}

.headersearch1{width: 50vw; margin-top: 5vh}
}