/* ==========================================================================
   Boutique Sucrée — Estilos customizados
   Baseado no design system "Artesanal Doce & Afeto"
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes base
   -------------------------------------------------------------------------- */
body {
    background-color: #fff8f7;
    color: #271717;
    font-family: 'Work Sans', sans-serif;
}

/* --------------------------------------------------------------------------
   Imagem de fundo do Hero (antes inline no HTML)
   -------------------------------------------------------------------------- */
.hero-bg-image {
    background-image: url("../img/background.webp");
}

/* --------------------------------------------------------------------------
   Divisor "escamado" (scallop) entre seções
   -------------------------------------------------------------------------- */
.scallop-divider {
    height: 40px;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 150 40 150 0 300 0 C 450 0 450 40 600 40 C 750 40 750 0 900 0 C 1050 0 1050 40 1200 40' fill='%23fff8f7' /%3E%3C/svg%3E");
    background-size: 1200px 40px;
    background-repeat: repeat-x;
}

.scallop-divider-inverted {
    height: 40px;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C 150 0 150 40 300 40 C 450 40 450 0 600 0 C 750 0 750 40 900 40 C 1050 40 1050 0 1200 0' fill='%23fff8f7' /%3E%3C/svg%3E");
    background-size: 1200px 40px;
    background-repeat: repeat-x;
}

/* --------------------------------------------------------------------------
   Bullet customizado com "cereja" para listas
   -------------------------------------------------------------------------- */
.cherry-bullet::before {
    content: '🍒';
    margin-right: 8px;
    font-size: 0.8em;
}

/* --------------------------------------------------------------------------
   Ícones Material Symbols
   -------------------------------------------------------------------------- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --------------------------------------------------------------------------
   Carrossel de especialidades
   -------------------------------------------------------------------------- */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.carousel-container {
    scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   Botão flutuante do WhatsApp
   -------------------------------------------------------------------------- */
@keyframes pulse-ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.animate-pulse-ripple {
    animation: pulse-ripple 2.5s infinite;
}

.whatsapp-fab {
    background-color: rgb(37, 211, 102);
}

/* --------------------------------------------------------------------------
   Cards de produto e depoimento (gerados via JS em cardapio.js / depoimentos.js)
   -------------------------------------------------------------------------- */
.product-card {
    background-color: #fff0ef;
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(157, 42, 43, 0.12);
}

.testimonial-card {
    background-color: #ffffff;
    border: 1px solid #dfbfbc;
    border-radius: 1rem;
    padding: 24px;
}