/* ============================
VARIÁVEIS PREMIUM & BASE
============================ */
:root {
/* Paleta Premium "FinaGema" */
--c-gold-light: #f9f1e1;
--c-gold-main: #d4a054;
--c-gold-dark: #b07d35;
--c-brown-text: #3e362e;
--c-brown-soft: #6b6156;
--c-white: #ffffff;
--c-bg-page: #fcfcf9;

/* Sombras Elevadas */
--shadow-card-rest: 0 10px 30px -10px rgba(62, 54, 46, 0.08);
--shadow-card-hover: 0 20px 40px -5px rgba(62, 54, 46, 0.15);

/* Geometria */
--radius-card: 20px;
}

/* ============================
LAYOUT DA GRELHA
============================ */
.items-section {
    margin: 0px 0;
    position: relative;
}

.items-section-subtitle {
    font-size: 1rem;
    color: var(--c-brown-soft);
    margin-bottom: 32px;
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.5px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Esconder elementos antigos */
.item-selector-legacy { display: none; }

/* AQUI ESTÁ A CORREÇÃO PRINCIPAL: FLEXBOX */
.product-grid {
    display: flex;              /* Mudado de GRID para FLEX */
    flex-wrap: wrap;            /* Permite ir para linha de baixo */
    justify-content: center;    /* Centraliza perfeitamente os items */
    gap: 24px;
    padding: 10px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .product-grid {
        gap: 32px;
    }
}

/* ============================
   CARTÃO "BOUTIQUE"
   ============================ */
.product-card {
    /* ADICIONADO: Largura fixa necessária para o Flexbox */
    width: 100%;
    max-width: 300px;
    flex-shrink: 0;
    
    /* Resto do estilo original mantido */
    background: var(--c-white);
    border-radius: var(--radius-card);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0,0,0,0.03);
    box-shadow: var(--shadow-card-rest);
    height: 100%;
}

/* Borda dourada subtil ao passar o rato */
.product-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-card);
border: 2px solid var(--c-gold-main);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 10;
}

.product-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-card-hover);
}

.product-card:hover::after {
opacity: 0.6;
}

/* Estado Selecionado */
.product-card--selected {
background: #fffdf9;
}
.product-card--selected::after {
opacity: 1;
}

/* ============================
CONTEÚDO DO CARTÃO
============================ */
.product-card__body {
padding: 32px 24px 20px 24px;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
z-index: 2;
}

/* --- OVO VISUAL CSS --- */
.egg-visual-wrapper {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}

.egg-visual {
width: 64px;
height: 84px;
background: radial-gradient(circle at 35% 25%, #fff5e0 0%, #f0d5a8 40%, #d4a054 100%);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
position: relative;
box-shadow:
inset -4px -6px 10px rgba(168, 111, 30, 0.1),
0 12px 20px rgba(0,0,0,0.08);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.egg-visual span {
font-family: var(--font-family-base);
font-weight: 800;
color: rgba(255,255,255,0.9);
font-size: 1.4rem;
text-shadow: 0 2px 4px rgba(166, 112, 36, 0.3);
}

/* Variações de Tamanho */
.egg-size-M { transform: scale(0.9); }
.egg-size-L { transform: scale(1.0); }
.egg-size-XL { transform: scale(1.12); }

.product-card:hover .egg-visual {
transform: scale(1.15) rotate(6deg);
}

/* Texto do Produto */
.product-card__title {
font-size: 1.2rem;
font-weight: 700;
color: var(--c-brown-text);
margin-bottom: 6px;
line-height: 1.3;
}

.product-card__desc {
font-size: 0.9rem;
color: var(--c-brown-soft);
line-height: 1.5;
margin-bottom: 16px;
max-width: 220px;
opacity: 0.8;
}

.product-card__price {
font-size: 1.4rem;
font-weight: 800;
color: var(--c-gold-dark);
margin-top: auto;
letter-spacing: -0.5px;
}

/* ============================
ÁREA DE AÇÃO (Botões)
============================ */
.product-card__action-area {
padding: 0 24px 28px 24px;
margin-top: 12px;
z-index: 5;
}

.smart-btn-wrapper {
height: 50px;
width: 100%;
}

.smart-btn {
width: 100%;
height: 100%;
border-radius: 12px;
border: none;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: var(--font-family-base);
}

.smart-btn--add {
background: var(--c-gold-main);
color: white;
box-shadow: 0 4px 12px rgba(212, 160, 84, 0.25);
}

.smart-btn--add:hover {
background: var(--c-gold-dark);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(212, 160, 84, 0.35);
}

.smart-btn--add:active {
transform: translateY(0);
}

.smart-btn--control {
background: #f2efeb;
color: var(--c-brown-text);
padding: 4px;
cursor: default;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.04);
display: flex;
justify-content: space-between;
}

.btn-control-action {
width: 42px;
height: 100%;
background: white;
border: 1px solid rgba(0,0,0,0.05);
border-radius: 8px;
color: var(--c-brown-text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: all 0.2s;
box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.btn-control-action:hover {
background: var(--c-gold-main);
color: white;
border-color: var(--c-gold-main);
}

.btn-control-action:active {
transform: scale(0.95);
}

.control-qty-display {
font-size: 1.2rem;
font-weight: 800;
color: var(--c-brown-text);
min-width: 30px;
text-align: center;
}

/* ============================
RESUMO & CARRINHO (STEP 3)
============================ */
#step-3 h3 {
font-size: var(--font-size-base);
color: var(--c-brown-text);
font-weight: 600;
margin-bottom: 16px;
}

/* Cart Items Wrapper */
.cart-items {
background: var(--c-bg-page);
border-radius: 12px;
border: 1px solid #eee;
overflow: hidden;
margin-bottom: 20px;
}

.cart-item-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #eee;
}

.cart-item-row:last-child {
border-bottom: none;
}

.cart-item-main {
flex: 1;
}

.cart-item-name {
font-weight: 600;
color: var(--c-brown-text);
display: block;
}

.cart-item-meta {
font-size: 0.85rem;
color: var(--c-brown-soft);
}

.cart-item-line-total {
font-weight: 700;
color: var(--c-gold-dark);
}

/* Botão Remover (RESTAURADO) */
.cart-item-remove {
border: none;
background: rgba(192, 21, 47, 0.1); /* Fundo vermelho muito suave */
color: #C0152F; /* Vermelho escuro */
padding: 4px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 140ms ease-out;
white-space: nowrap;
margin-left: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.cart-item-remove:hover {
background: rgba(192, 21, 47, 0.2);
transform: translateY(-1px);
}

.summary-row {
display: flex;
justify-content: space-between;
padding: 10px 20px;
font-size: 0.9rem;
color: var(--c-brown-soft);
}

.summary-row strong {
color: var(--c-brown-text);
font-weight: 600;
}

.summary-row.summary-total {
background: var(--c-gold-light);
color: var(--c-brown-text);
font-weight: 700;
font-size: 1.1rem;
padding: 16px 20px;
margin-top: 10px;
}

/* ============================
CORREÇÃO DE ALINHAMENTO BOTÕES (STEP 3)
============================ */
#step-3 .step-actions {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 15px;
margin-top: 30px;
}

/* Botão Voltar e Confirmar com ALTURA FORÇADA IGUAL */
#step-3 .btn-step.prev-step,
#step-3 .submit-button.btn-egg {
min-height: 54px !important;
height: 54px !important;
padding: 0 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
box-sizing: border-box !important;
margin: 0 !important;
border: none !important;
}

/* Botão Confirmar específico */
#step-3 .submit-button.btn-egg {
/* Estilo do botão ovo mantido */
background: radial-gradient(circle at 30% 20%, #fff9e8 0%, #f2d8aa 40%, #d8a66c 100%);
color: #2b2620;
font-weight: 600;
border: 1px solid rgba(216, 166, 108, 0.55) !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

#step-3 .submit-button.btn-egg:hover {
transform: translateY(-2px);
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.12);
}

/* Ícone do botão ovo não deve estragar o alinhamento */
#step-3 .btn-egg__icon {
display: inline-flex;
align-items: center;
line-height: 1;
margin-right: 8px;
}

/* ============================
ÍCONES REDES SOCIAIS (RESTAURADO)
============================ */
.social-icons {
margin-left: auto;
display: flex;
gap: 12px;
align-items: center;
}

.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.05);
color: #5E5240; /* Brown 600 */
font-size: 18px;
text-decoration: none;
transition: all 0.3s ease;
}

.social-link:hover {
transform: translateY(-3px);
color: white;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.social-link.whatsapp:hover { background-color: #25D366; }
.social-link.instagram:hover { background-color: #E1306C; }
.social-link.facebook:hover { background-color: #1877F2; }
.social-link.email:hover { background-color: #d4a054; } /* Gold primary */

@media (max-width: 480px) {
.social-icons {
gap: 8px;
}
.social-link {
width: 32px;
height: 32px;
font-size: 16px;
}
}

/* ===================================
   BOTÃO MINIMALISTA - CORREÇÃO FINAL MOBILE (v3)
   ================================== */

/* 1. Contentor: Centralização e prevenção de largura total */
.hero-overlay-content {
    top: 57% !important; 
    transform: translate(-50%, -50%) !important;
    width: 100% !important;        /* Contentor ocupa largura total para permitir centralização */
    padding: 0 !important;
    display: flex !important;      /* Flexbox para centralizar */
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none;          /* Permite clicar na imagem por trás nas áreas vazias */
}

/* 2. Botão: Forçar tamanho do conteúdo e impedir esticar */
.hero-overlay-content .cta-button {
    pointer-events: auto;          /* Reativa cliques no botão */
    
    /* Estilo Visual */
    background: rgba(212, 160, 84, 0.95) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 66px !important;
    
    /* Tipografia */
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important; /* Impede que o texto quebre linhas */
    
    /* Layout CRÍTICO para corrigir o problema "gigante" */
    display: inline-block !important; 
    width: auto !important;           /* Ignora width: 100% herdado */
    min-width: 0 !important;          
    max-width: none !important;
    flex: none !important;            /* Impede crescer em contentores flex */
    
    /* Espaçamento */
    padding: 12px 28px !important;
    margin: 0 !important;
    
    /* Efeitos */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transform: none !important;
    transition: all 0.3s ease !important;
}

/* Remover Ícone Antigo */
.hero-overlay-content .cta-button .btn-egg__icon {
    display: none !important;
}

/* Efeito Hover */
.hero-overlay-content .cta-button:hover {
    background: rgba(176, 125, 53, 1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Mobile (≤768px) - Botão EXTRA PEQUENO e posição ajustada */
@media (max-width: 768px) {
  .hero-overlay-content {
    top: 57% !important;  /* DESCEU: de 50% para 60% */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    max-width: 70% !important;  /* REDUZIDO: de 80% para 70% */
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none;
  }

  .hero-overlay-content .cta-button {
    pointer-events: auto !important;
    
    /* Tamanho EXTRA PEQUENO */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: auto !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    
    /* Espaçamento MUITO REDUZIDO */
    padding: 6px 14px !important;
    margin: 0 !important;
    
    /* Tipografia MUITO MENOR */
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    
    /* Visual */
    background: rgba(212, 160, 84, 0.95) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 40px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
  }
  
  .hero-overlay-content .cta-button:hover {
    background: rgba(176, 125, 53, 1) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Ocultar ícone */
  .hero-overlay-content .cta-button .btn-eggicon {
    display: none !important;
  }
}

/* ========================================
   MELHORIAS MOBILE HERO-BANNER (max-width: 480px)
   ======================================== */

@media (max-width: 480px) {
    
    /* 1. BANNER WRAPPER - Remove restrições de altura */
    .banner-wrapper {
        position: relative;
        width: 100%;
        min-height: 280px; /* Garante altura mínima visível */
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fdf8f5;
        overflow: hidden;
    }
    
    /* 2. IMAGEM DO BANNER - Maior e mais visível */
    .hero-banner-img {
        width: 100%;
        height: auto;
        min-height: 280px; /* Aumentado de ~200px implícito */
        max-height: 400px; /* Limita para não ficar gigante */
        display: block;
        object-fit: cover; /* Mudado de contain para cover */
        object-position: center center;
    }
    
    /* 3. OVERLAY CONTENT - Botão maior e mais acessível */
    .hero-overlay-content {
        position: absolute;
        top: 62% !important; /* Ajustado para melhor posicionamento */
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 280px !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        pointer-events: none;
        z-index: 10;
    }
    
    /* 4. BOTÃO CTA - MUITO MAIOR E MAIS VISÍVEL */
    .hero-overlay-content .cta-button {
        pointer-events: auto !important;
        
        /* Tamanho aumentado para mobile */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        
        width: auto !important;
        min-width: auto !important;
        max-width: max-content !important;
        flex: 0 0 auto !important;
        
        /* Padding MAIOR para toque fácil */
        padding: 14px 24px !important; /* Aumentado de 5px 12px */
        margin: 0 !important;
        
        /* Tipografia MAIOR e legível */
        font-size: 13px !important; /* Aumentado de 8px */
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        line-height: 1.3 !important;
        
        /* Visual Premium */
        background: linear-gradient(135deg, 
            rgba(212, 160, 84, 0.98) 0%, 
            rgba(176, 125, 53, 0.98) 100%) !important;
        color: #ffffff !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 50px !important;
        
        /* Sombra mais proeminente */
        box-shadow: 
            0 6px 20px rgba(0, 0, 0, 0.25),
            0 2px 6px rgba(0, 0, 0, 0.15) !important;
        
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        
        /* Garante acessibilidade touch */
        min-height: 44px !important; /* Apple guideline */
        cursor: pointer;
    }
    
    /* 5. Ícone do ovo visível */
    .hero-overlay-content .cta-button .btn-egg__icon {
        display: inline-block !important;
        font-size: 16px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    
    /* 6. Hover/Active melhorado */
    .hero-overlay-content .cta-button:hover,
    .hero-overlay-content .cta-button:active {
        background: linear-gradient(135deg, 
            rgba(176, 125, 53, 1) 0%, 
            rgba(150, 100, 40, 1) 100%) !important;
        transform: translateY(-2px) scale(1.02) !important;
        box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.3),
            0 3px 8px rgba(0, 0, 0, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }
    
    /* 7. NAVEGAÇÃO - Compacta em mobile */
    .nav-container {
        padding: var(--space-8) var(--space-12) !important;
    }
    
    .nav-logo {
        width: 45px !important;
        height: 45px !important;
    }
    
    .nav-title {
        font-size: var(--font-size-lg) !important;
    }
    
    /* 8. INFO CARDS - Espaçamento otimizado */
    .info-cards {
        margin: var(--space-20) var(--space-12) !important;
        gap: var(--space-12) !important;
        padding: 0 !important;
    }
    
    .info-card {
        padding: var(--space-16) var(--space-12) !important;
        border-radius: var(--radius-md) !important;
    }
}

/* ========================================
   AJUSTE EXTRA PARA TELEMÓVEIS MUITO PEQUENOS
   ======================================== */

@media (max-width: 380px) {
    .banner-wrapper {
        min-height: 240px;
    }
    
    .hero-banner-img {
        min-height: 240px;
        max-height: 350px;
    }
    
    .hero-overlay-content .cta-button {
        padding: 12px 20px !important;
        font-size: 12px !important;
    }
    
    .hero-overlay-content .cta-button .btn-egg__icon {
        font-size: 14px !important;
    }
}

/* =====================================================
   HOTFIX: CTA do HERO igual ao estilo 768px em ecrãs pequenos
   - Corrige o botão "Fazer Encomenda" em <=480px e <=380px
   - Remove o border/outline e esconde o ícone do ovo
   ===================================================== */

@media (max-width: 480px) {
  .hero-overlay-content{
    top: 57% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    max-width: 70% !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none !important;
  }

  .hero-overlay-content .cta-button{
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: auto !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;

    padding: 8px 16px !important;
    margin: 0 !important;

    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;

    background: rgba(212, 160, 84, 0.95) !important;
    color: #ffffff !important;

    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;

    min-height: 36px !important;
    border-radius: 40px !important;
  }

  /* Esconder ícone do ovo (há 2 nomes diferentes no CSS/HTML) */
  .hero-overlay-content .cta-button .btn-eggicon,
  .hero-overlay-content .cta-button .btn-egg__icon{
    display: none !important;
  }
}

@media (max-width: 380px) {
  .hero-overlay-content{
    top: 57% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    max-width: 75% !important;
  }

  .hero-overlay-content .cta-button{
    padding: 7px 14px !important;
    font-size: 9px !important;
    min-height: 34px !important;
    border-radius: 36px !important;

    background: rgba(212, 160, 84, 0.95) !important;
    color: #ffffff !important;

    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;
  }

  .hero-overlay-content .cta-button .btn-eggicon,
  .hero-overlay-content .cta-button .btn-egg__icon{
    display: none !important;
  }
}
/* ============================
   BANNER DE SUCESSO (Modal)
   ============================ */

/* Overlay escurecido por trás do modal */
.success-modal-overlay {
    display: none; /* Escondido por padrão */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* Quando ativo, mostra-se */
.success-modal-overlay.active {
    display: flex;
}

/* Container do modal */
.success-modal {
    background: white;
    border-radius: 20px;
    padding: 0;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    animation: slideDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Conteúdo do modal */
.success-modal-content {
    padding: 50px 40px 30px 40px;
    text-align: center;
}

/* Título */
.success-modal-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--c-brown-text, #3e362e);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Ícone de celebração */
.success-modal-icon {
    font-size: 2rem;
}

/* Mensagem */
.success-modal-message {
    font-size: 1rem;
    color: var(--c-brown-soft, #6b6156);
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Ilustração decorativa do ovo (opcional) */
.success-egg-illustration {
    width: 80px;
    height: 100px;
    margin: 0 auto 20px auto;
    background: radial-gradient(circle at 35% 25%, #fff9e8 0%, #f2d8aa 40%, #d8a66c 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 
        inset -4px -6px 10px rgba(168, 111, 30, 0.15),
        0 12px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-egg-illustration .egg-checkmark {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 4px rgba(166, 112, 36, 0.4);
}

/* Botão Fechar */
.success-modal-button {
    background: linear-gradient(135deg, #d4a054 0%, #b07d35 100%);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 14px 40px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(212, 160, 84, 0.3);
    transition: all 0.3s ease;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    display: block;
}

.success-modal-button:hover {
    background: linear-gradient(135deg, #b07d35 0%, #8f6529 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 160, 84, 0.4);
}

.success-modal-button:active {
    transform: translateY(0);
}

/* Responsivo Mobile */
@media (max-width: 480px) {
    .success-modal {
        width: 95%;
        max-width: none;
        border-radius: 15px;
    }

    .success-modal-content {
        padding: 40px 25px 25px 25px;
    }

    .success-modal-title {
        font-size: 1.4rem;
    }

    .success-modal-message {
        font-size: 0.9rem;
    }

    .success-egg-illustration {
        width: 65px;
        height: 85px;
    }

    .success-modal-button {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
}
#toast-container {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 99999;
  width: min(520px, calc(100vw - 24px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;

  padding: 12px 14px;
  border-radius: 12px;

  background: rgba(19, 52, 59, 0.92);
  color: #fff;

  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);

  animation: toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.toast__icon { font-size: 16px; line-height: 1; }
.toast__msg { font-size: 14px; line-height: 1.35; }
.toast__close {
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 10px;
}
.toast__close:hover { background: rgba(255,255,255,0.10); }

.toast--success .toast__icon { content: "✓"; }
.toast--error { background: rgba(192, 21, 47, 0.92); }
.toast--warning { background: rgba(168, 75, 47, 0.92); }
.toast--info { background: rgba(98, 108, 113, 0.92); }

.toast.is-hiding {
  animation: toast-out 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}