html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    background: #ffe0e6;
    color: #4d2c2c;
}
.container {
    flex: 1;
    width: 100%;
    max-width: 480px;
    min-width: 280px;
    margin: 16px auto 0 auto;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 10px #f8b6c2;
    border-radius: 16px;
    padding-top: 20px;
    padding-bottom: 40px;
}
header {
    text-align: center;
    padding: 24px 8px 8px 8px;
}
h1 {
    margin: 0;
    font-size: 2rem;
    color: #d72660;
}
h2 {
    margin: 8px 0 0 0;
    font-size: 1.2rem;
    color: #4d2c2c;
}
main {
    flex: 1;
    padding: 16px 8px;
}
#passos-pedido {
    margin-top: 16px;
}
footer {
    flex-shrink: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    background: #ffe0e6;
    text-align: center;
    padding: 8px 0;
    box-shadow: 0 -2px 8px #f8b6c2;
    overflow-x: hidden;
    margin-top: 16px;
}
.logo-rodape {
    height: 60px;
    max-width: 90vw;
}
.credito-rodape {
    font-size: 0.75em;
    color: #7a4d4d;
    margin-top: 2px;
}
button, .btn, .btn-add, .btn-remover, .btn-atender {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px;
    margin: 12px 0;
    font-size: 1.1rem;
    background: #d72660;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none !important;
}
button:hover, .btn:hover {
    background: #a81c4a;
}
.acoes {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    white-space: nowrap;
    min-width: 200px;
}
.acoes .btn, .acoes .btn-add, .acoes .btn-remover, .acoes .btn-atender {
    width: auto !important;
    min-width: 90px;
    max-width: 100%;
    display: inline-block;
    margin: 0;
    padding: 8px 16px;
    font-size: 1em;
    text-align: center;
    text-decoration: none !important;
}
@media (max-width: 600px) {
    .acoes .btn, .acoes .btn-add, .acoes .btn-remover, .acoes .btn-atender {
        min-width: 60px;
        padding: 6px 6px;
        font-size: 0.95em;
    }
}
nav.painel-menu .btn {
    width: 100%;
    max-width: 100%;
    margin: 0 0 18px 0;
}
footer .btn, .btn[style*="background:#aaa"] {
    width: 100%;
    max-width: 100%;
    margin: 12px 0;
}
@media (max-width: 520px) {
    .container {
        width: 100vw;
        max-width: 100vw;
        min-width: unset;
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
    }
    button, .btn, .btn-add, .btn-remover, .btn-atender {
        font-size: 1em;
        padding: 12px;
    }
}
.catalogo-opcoes {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 32px;
    flex-wrap: wrap;
}
.catalogo-card {
    background: #fff0f4;
    border-radius: 14px;
    box-shadow: 0 2px 8px #f8b6c2;
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 120px;
}
.btn-catalogo {
    background: #d72660;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 22px 38px;
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 1px 4px #f8b6c2;
    transition: background 0.2s;
}
.btn-catalogo:hover {
    background: #a81c4a;
}
.carrinho-flutuante {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    background: #d72660;
    color: #fff;
    border-radius: 32px;
    box-shadow: 0 2px 8px #f8b6c2;
    padding: 12px 24px;
    font-size: 1.1em;
    font-weight: bold;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}
.carrinho-flutuante:hover {
    background: #a81c4a;
}
.icone-carrinho {
    font-size: 1.3em;
    margin-right: 10px;
}
@media (max-width: 520px) {
    .painel-box {
        width: 100vw;
        max-width: 100vw;
        min-width: unset;
        padding-left: 2vw;
        padding-right: 2vw;
        box-sizing: border-box;
    }
    .painel-conteudo-opcao th,
    .painel-conteudo-opcao td {
        font-size: 0.85em;
        padding: 3px 1px;
    }
    .painel-conteudo-opcao table {
        font-size: 0.85em;
        min-width: 480px;
    }
    .carrinho-flutuante {
        left: 2vw;
        right: 2vw;
        top: 8px;
        padding: 10px 8px;
        font-size: 1em;
    }
}
.painel-conteudo-opcao table {
    min-width: 500px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
}
.painel-conteudo-opcao th,
.painel-conteudo-opcao td {
    white-space: nowrap;
}
@media (max-width: 520px) {
    .painel-conteudo-opcao table {
        font-size: 0.85em;
        min-width: 480px;
    }
}
.painel-conteudo-opcao .acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.painel-conteudo-opcao .acoes a,
.painel-conteudo-opcao .acoes button {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 0.95em;
    padding: 6px 10px;
}
@media (max-width: 520px) {
    .painel-conteudo-opcao th,
    .painel-conteudo-opcao td {
        padding: 4px 2px;
        font-size: 0.95em;
    }
} 

.container.painel-box {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 16px;
}
@media (max-width: 520px) {
    .container.painel-box {
        padding-left: 2vw;
        padding-right: 2vw;
    }
}
.container.painel-box h2 {
    text-align: center;
    margin-bottom: 24px;
} 

.container.painel-box label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}
.container.painel-box input[type="text"],
.container.painel-box input[type="email"],
.container.painel-box input[type="password"],
.container.painel-box input[type="number"],
.container.painel-box select,
.container.painel-box textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 18px;
    border-radius: 6px;
    border: 1px solid #f8b6c2;
    box-sizing: border-box;
    font-size: 1em;
}
.container.painel-box textarea {
    min-height: 60px;
} 
@media (max-width: 520px) {
    .painel-conteudo-opcao {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        box-sizing: border-box;
    }
} 
@media (max-width: 520px) {
    #config-recheios {
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
} 
#config-recheios.painel-conteudo-opcao {
    display: block !important;
} 
.btn-atender[href*="nao_atender"] {
    max-width: 120px !important;
    width: 100% !important;
    white-space: normal !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: center;
    display: inline-block;
} 
.btn-atender[style*="background:#a81c4a"] {
    text-align: center !important;
} 
.btn-edit-forma, .btn-remove-forma,
.btn-edit-massa, .btn-remove-massa,
.btn-edit-recheio, .btn-remove-recheio,
.btn-edit-decoracao, .btn-remove-decoracao,
.btn-edit-adicional, .btn-remove-adicional {
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    margin: 0 2px;
    font-size: 0.98em;
    cursor: pointer;
    transition: background 0.15s;
    width: auto;
    min-width: 70px;
    display: inline-block;
}
.btn-edit-forma {
    background: #3498db;
    color: #fff;
}
.btn-edit-forma:hover {
    background: #217dbb;
}
.btn-remove-forma {
    background: #e74c3c;
    color: #fff;
}
.btn-remove-forma:hover {
    background: #c0392b;
}
#mensagem-forma {
    margin-bottom: 10px;
    font-size: 1em;
    text-align: center;
}
#mensagem-forma.sucesso {
    color: #27ae60;
    background: #eafaf1;
    border: 1px solid #b2f2d7;
    border-radius: 6px;
    padding: 8px 0;
}
#mensagem-forma.erro {
    color: #e74c3c;
    background: #fdeaea;
    border: 1px solid #f5b7b1;
    border-radius: 6px;
    padding: 8px 0;
} 
.btn-edit-massa, .btn-edit-recheio, .btn-edit-decoracao, .btn-edit-adicional {
    background: #3498db;
    color: #fff;
}
.btn-edit-massa:hover, .btn-edit-recheio:hover, .btn-edit-decoracao:hover, .btn-edit-adicional:hover {
    background: #217dbb;
}
.btn-remove-massa, .btn-remove-recheio, .btn-remove-decoracao, .btn-remove-adicional {
    background: #e74c3c;
    color: #fff;
}
.btn-remove-massa:hover, .btn-remove-recheio:hover, .btn-remove-decoracao:hover, .btn-remove-adicional:hover {
    background: #c0392b;
}
#mensagem-massa, #mensagem-recheio, #mensagem-decoracao, #mensagem-adicional {
    margin-bottom: 10px;
    font-size: 1em;
    text-align: center;
}
#mensagem-massa.sucesso, #mensagem-recheio.sucesso, #mensagem-decoracao.sucesso, #mensagem-adicional.sucesso {
    color: #27ae60;
    background: #eafaf1;
    border: 1px solid #b2f2d7;
    border-radius: 6px;
    padding: 8px 0;
}
#mensagem-massa.erro, #mensagem-recheio.erro, #mensagem-decoracao.erro, #mensagem-adicional.erro {
    color: #e74c3c;
    background: #fdeaea;
    border: 1px solid #f5b7b1;
    border-radius: 6px;
    padding: 8px 0;
}
/* Linha divisória discreta entre linhas das tabelas */
table td, table th {
    border-bottom: 1px solid #f0f0f0;
}
table tr:last-child td, table tr:last-child th {
    border-bottom: none;
}

/* Estilos para o reCAPTCHA */
.recaptcha-container {
    display: flex;
    justify-content: center;
    margin: 16px 0;
    padding: 8px 0;
}

.g-recaptcha {
    transform: scale(1);
    transform-origin: 0 0;
}

/* Responsividade para o reCAPTCHA em telas menores */
@media (max-width: 400px) {
    .g-recaptcha {
        transform: scale(0.9);
        transform-origin: 0 0;
    }
}

@media (max-width: 350px) {
    .g-recaptcha {
        transform: scale(0.8);
        transform-origin: 0 0;
    }
}

/* Estilo para mensagens de erro do reCAPTCHA */
.erro {
    background: #fdeaea;
    color: #e74c3c;
    border: 1px solid #f5b7b1;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px;
    text-align: center;
    font-size: 0.95em;
}