/* Reset e Estilos Base */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff0f5;
    color: #333;
    min-width: 320px;
    overflow-x: hidden;
    line-height: 1.5;
}

/* Cabeçalho */
header {
    background-color: #fcdce4;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 10px;
    border-bottom: 2px solid #f5a9b8;
    text-align: center;
}

.logo-titulo {
    width: 110px;
    height: auto;
    /* margin-bottom: 10px; */
}
/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/dancingscript/v29/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Rep8ltA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/dancingscript/v29/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3ROp8ltA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/dancingscript/v29/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.titulo, h1 {
    font-family: 'Dancing Script', sans-serif;
    font-size: 36px;   /* ajuste conforme o design */
    font-weight: 400;  /* Regular – fica igual ao estilo do seu logo */
    color: #c94f7c;
    margin: 5px 0;
}

/* Navegação Ajustada */
nav {
    background-color: #fcdce4;
    padding: 8px 10px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 2px solid #f5a9b8;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 900px;
}

/* nav li {
    margin: 0;
    flex-grow: 1;
    min-width: 110px;
} */
nav li{
  flex:0 0 auto;            /* cada item só ocupa o necessário */
  white-space:nowrap;
}

nav a {
    text-decoration: none;
    color: #c94f7c;
    font-weight: bold;
    padding: 10px 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: block;
    text-align: center;
    font-size: 15px;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid #f5a9b8;
}

nav a:hover, nav a:active {
    background-color: #f5a9b8;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Conteúdo Principal */
main {
    padding: 10px;
    max-width: 900px;
    margin: 0 auto;
}

/* Seções */
section {
    background-color: #ffffff;
    margin: 20px 0;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
    color: #c94f7c;
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}

h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #f5a9b8;
    margin: 10px auto 0;
}

/* Cardápio Mobile */
.cardapio-categoria {
    margin-bottom: 25px;
}

.cardapio-lista {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cardapio-lista li {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 15px;
    gap: 15px;
}

.cardapio-lista img {
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.cardapio-info {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.cardapio-info-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cardapio-info strong {
    font-size: 1.1em;
    color: #333;
    text-align: center;
}

.cardapio-info em {
    color: #555;
    font-size: 0.9em;
    margin-top: 5px;
    text-align: center;
}

.cardapio-preco {
    font-size: 1.2em;
    font-weight: bold;
    color: #000;
    background-color: #ffe6ee;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #f7c1d3;
    text-align: center;
    margin: 10px 0;
}

.cardapio-info button {
    width: 100%;
    background-color: #f28ab2;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 16px;
    margin-top: 10px;
}

.cardapio-info button:hover {
    background-color: #d86b97;
}

/* Formulários Mobile */
form {
    display: flex;
    flex-direction: column;
}

input, select, textarea {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

button, .btn {
    width: 100%;
    background-color: #d64d7a;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    margin: 10px 0;
    transition: background 0.3s;
}

button:hover, .btn:hover {
    background-color: #e9779e;
}


/* No seu stylesheet.css */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Otimização de renderização */
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    /* Evita compressão do navegador */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
}

/* Popup Mobile */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
    overflow-y: auto;
}

.popup-content {
    background-color: #fff0f5;
    margin: 20px auto;
    padding: 20px;
    border-radius: 15px;
    width: 90%;
    max-width: 400px;
    position: relative;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #c94f7c;
}

/* Rodapé */
footer {
    background-color: #fcdce4;
    text-align: center;
    padding: 15px;
    font-size: 14px;
    color: #333;
    margin-top: 20px;
}
 @media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    .swiper-slide img {
        image-rendering: -webkit-optimize-contrast;
    }
} 
/* Media Queries para Telas Pequenas (ajuste extra para menus) */
@media (max-width: 400px) {
    nav li {
        min-width: 80px;
    }
    
    nav a {
        padding: 6px 3px;
        font-size: 13px;
    }
}

/* Media Queries para Tablets */
@media (min-width: 600px) {
    nav ul {
        flex-wrap: nowrap;
        gap: 10px;
    }
    
    nav a {
        padding: 8px 12px;
        font-size: 15px;
    }
    
    .cardapio-lista li {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .cardapio-info {
        margin-top: 0;
        padding-left: 15px;
    }
    
    .cardapio-info-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .cardapio-info strong,
    .cardapio-info em {
        text-align: left;
    }
    
    .cardapio-preco {
        margin: 0;
        text-align: right;
    }
    
    .swiper {
        height: 300px;
    }
}

/* Media Queries para Desktop */
@media (min-width: 768px) {
    header {
        flex-direction: row;
        justify-content: flex-start;
        padding: 10px 20px;
        text-align: left;
    }
    
    .logo-titulo {
        margin-right: 20px;
        margin-bottom: 0;
        width: 150px;
    }
    
    .titulo, h1 {
        font-size: 28px;
    }
    
    nav ul {
        gap: 15px;
    }
    
    nav a {
        padding: 10px 15px;
        font-size: 16px;
    }
    
    section {
        margin: 20px auto;
        padding: 20px;
        max-width: 800px;
    }
    
    h2 {
        font-size: 26px;
    }
    
    .cardapio-lista img {
        max-width: 180px;
    }
    
    .cardapio-info button {
        width: auto;
        padding: 8px 16px;
    }
    
    button, .btn {
        width: auto;
        padding: 10px 20px;
    }
    
    .popup-content {
        margin: 50px auto;
    }
}

/* Media Queries para Telas Grandes */
@media (min-width: 992px) {
    .titulo, h1 {
        font-size: 36px;
    }
    
    .swiper {
        height: 400px;
    }
    
    section {
        max-width: 900px;
    }
}
/* Adicione no final do arquivo */
form {
    /* max-width: 400px; */
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    box-sizing: border-box;
}

button[type="submit"] {
    background-color: #c94f7c;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

.flash-message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

.flash-success { background-color: #dff0d8; }
.flash-error { background-color: #f2dede; }
.flash-warning { background-color: #fcf8e3; }

/* Estilos para o Login */
.login-section {
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.login-section form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Estilos para o Painel Admin */
.tabela-admin {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.tabela-admin th, .tabela-admin td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #f5a9b8;
}

.tabela-admin th {
    background-color: #fcdce4;
}

.acoes {
    display: flex;
    gap: 10px;
}

.btn-editar {
    color: #fff;
    background: #4CAF50;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
}

.btn-excluir {
    color: #fff;
    background: #f44336;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
}

.btn-adicionar {
    display: inline-block;
    background: #c94f7c;
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 10px;
}

/* Mensagens Flash */
.flash-success {
    background: #dff0d8;
    color: #3c763d;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

.flash-error {
    background: #f2dede;
    color: #a94442;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}
/* Estilos para o formulário de produtos */
.form-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.btn-salvar {
    background-color: #c94f7c;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}

.btn-salvar:hover {
    background-color: #d86b97;
}


/* Estilos para a tabela admin */
.tabela-produtos {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.tabela-produtos th, .tabela-produtos td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #f5a9b8;
}

.tabela-produtos th {
    background-color: #fcdce4;
}

.acoes {
    display: flex;
    gap: 10px;
}

.btn-editar {
    background: #4CAF50;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
}

.btn-excluir {
    background: #f44336;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
}
/* Estilos para o formulário de upload */
.form-group input[type="file"] {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
}

/* Estilos para visualização de imagens */
.img-preview {
    max-width: 200px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}
/* Estilos do gerenciador de carrossel */
.carrossel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.carrossel-item {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
}

.carrossel-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.carrossel-actions {
    margin-top: 10px;
    text-align: center;
}

.btn-excluir {
    background-color: #f44336;
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 3px;
}
.upload-guide {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    border-left: 4px solid #c94f7c;
}

.upload-guide ul {
    margin: 10px 0 0 20px;
}

.upload-guide li {
    margin-bottom: 5px;
}
.dropdown {
    position: relative;
    display: inline-block;
  }

  .dropbtn {
    padding: 8px;
    text-decoration: none;
    font-weight: bold;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f1f1f1;
    min-width: 120px;
    z-index: 1;
  }

  .dropdown-content a {
    color: black;
    padding: 8px 10px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }
  #filtros-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
    justify-content: space-between;
}

.filtro-bloco {
    display: flex;
    flex-direction: column;
    flex: 1 1 160px;
    max-width: 48%;
}

.filtro-bloco label {
    font-size: 0.85em;
    margin-bottom: 3px;
    color: #555;
}

@media (max-width: 500px) {
    #filtros-container {
        flex-direction: row;
        gap: 5px;
        justify-content: space-between;
    }

    .filtro-bloco {
        flex: 1 1 48%;
        max-width: 48%;
    }

    .filtro-bloco label {
        display: none; /* Oculta label no mobile para ficar mais compacto */
    }

    .filtro-bloco select {
        font-size: 0.9em;
        padding: 4px;
    }
}
/* Admin – miniaturas da lista */
.imagem-produto{
  width: 84px;
  height: 84px;
  object-fit: cover;      /* corta e centraliza sem distorcer */
  border-radius: 8px;
  display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Coluna da imagem com largura fixa */
.tabela-produtos td:nth-child(2),
.tabela-produtos th:nth-child(2){
  width: 110px;
  white-space: nowrap;
}

/* Alinhar célula da imagem e nome bonitinho */
.tabela-produtos td:nth-child(2){
  
  align-items: center;
  gap: 10px;
}
.mover-cima, .mover-baixo, .mover-produto-cima, .mover-produto-baixo {
    text-decoration: none;
    margin: 0 3px;
    color: #333;
    font-weight: bold;
    padding: 2px 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #f5f5f5;
}

.mover-cima:hover, .mover-baixo:hover, 
.mover-produto-cima:hover, .mover-produto-baixo:hover {
    background: #e0e0e0;
}

.descricao-produto {
    font-size: 0.9em;
    color: #000000;
    margin-top: 4px;
}
/* nav em 1 linha; sem quebra */
nav { position: relative; z-index: 5; }  /* para a dropdown ficar acima do conteúdo */
/* nav ul{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
  max-width:100%;
  overflow:visible;      
  margin:0 auto;
  padding:0;
} */
nav ul{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;   /* centraliza */
  gap:8px;
  max-width:1200px;         /* limita largura máxima */
  margin:0 auto;            /* centraliza o bloco */
  overflow:visible;
  padding:0;
}
#user-dropdown{ margin-left:auto; }

.dropdown{ position:relative; display:inline-block; }
.dropbtn{ padding:8px 12px; font-weight:bold; display:block; }
.dropdown-content{
  display:none;
  position:absolute;
  right:0;
  top: calc(100% + 6px);
  background:#f1f1f1;
  min-width:180px;
  z-index: 9999;                  /* acima da barra */
  border:1px solid #ddd;
  border-radius:6px;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.dropdown-content a{ color:#000; padding:8px 10px; display:block; text-decoration:none; }
.dropdown-content a:hover{ background:#eaeaea; }

/* abre no hover (desktop) */
.dropdown:hover .dropdown-content{ display:block; }

/* toque/mobile: classe .open controla a abertura */
.dropdown.open .dropdown-content{ display:block; }