/* Importar fonte personalizada */
@font-face {
    font-family: 'GreatVibes';
    src: url('../fonts/GreatVibes-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Reset e estilos base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #fff;
    color: #333;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Cabeçalho */
.convite-header {
    width: 100%;
    position: relative;
    z-index: 100;
}

/* Animação: portas do convite */
.convite-animacao { 
    position: fixed; /* Mudança: fixed para sobrepor todo o conteúdo */
    top: 0;
    left: 0;
    width: 100vw; 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    z-index: 9999; /* Mudança: z-index alto para sobrepor tudo */
    transition: opacity 0.8s ease, visibility 0.8s ease; /* Mudança: transição mais rápida */
}

/* Mudança: Remover regras que escondem a logo */
/* .convite-animacao .logo:not([src]), 
.convite-animacao .logo[src=""],
.convite-animacao .logo[src*="logo-casamento.png"]:not([src*="data:"]):not([src*="blob:"]) {
    display: none;
} */

/* Mudança: Adicionar estado para quando as portas abrirem */
.portas-abertas {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.portas-abertas .porta.esquerda { transform: translateX(-100%); }
.portas-abertas .porta.direita { transform: translateX(100%); }


/* Portas da animação */
.porta {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, #194029 0%, #2d5a3d 100%);
    transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 20px rgba(25, 64, 41, 0.3);
}

.porta.esquerda {
    left: 0;
    transform: translateX(0);
}

.porta.direita {
    right: 0;
    transform: translateX(0);
}

.portas-fechadas .porta.esquerda { transform: translateX(0); }
.portas-fechadas .porta.direita { transform: translateX(0); }

.portas-abertas .porta.esquerda { transform: translateX(-100%); }
.portas-abertas .porta.direita { transform: translateX(100%); }

/* Conteúdo principal */
.convite-main {
    flex: 1;
    margin-top: 0;
    padding: 0;
    background: #fff;
}

.conteudo-pagina {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    text-align: left;
}

/* Nomes do casal com fonte personalizada e cor #194029 */
.nomes-casal {
    text-align: center;
    margin: 3rem 0;
    padding: 0.5rem;
    
    border-radius: 20px;
    
}

.nomes-casal h1 {
    font-family: 'GreatVibes', cursive;
    font-size: 3.5rem;
    color: #194029;
    margin: 1rem 0;
    text-shadow: 2px 2px 4px rgba(25, 64, 41, 0.2);
    line-height: 1.2;
}

.nomes-casal .e {
    font-family: 'GreatVibes', cursive;
    font-size: 2.5rem;
    color: #194029;
    margin: 1rem 0;
    font-weight: normal;
    text-shadow: 2px 2px 4px rgba(25, 64, 41, 0.2);
}

/* Banner da página */
.banner {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(25, 64, 41, 0.15);
    
    object-fit: cover;
}

/* Mensagem principal */
.mensagem {
    font-size: 1.3rem;
    color: #194029;
    text-align: center;
    margin: 2rem 0;
    line-height: 1.8;
    font-weight: 500;
}

/* Linha decorativa */
.linha-decorativa {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #194029, transparent);
    margin: 2rem auto;
    max-width: 200px;
    position: relative;
}

.linha-decorativa::before {
    content: '❀';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 10px;
    font-size: 1.2rem;
    color: #194029;
}

/* Informações do evento */
.informacoes-evento {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    margin: 30px 0;
    border-left: 4px solid #194029;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #194029;
    font-weight: 500;
}

/* Título da programação */
.titulo-programacao {
    font-size: 1.8rem;
    color: #194029;
    text-align: center;
    margin: 40px 0 20px;
    font-weight: 700;
}

/* Lista da programação */
.programacao {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.programacao li {
    background: #fff;
    padding: 15px 20px;
    margin: 10px 0;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(25, 64, 41, 0.1);
    font-size: 1.1rem;
    color: #194029;
    border-left: 4px solid #194029;
}

/* Mensagem final */
.mensagem-final {
    text-align: center;
    font-size: 1.3rem;
    color: #194029;
    margin: 40px 0;
    font-weight: 600;
}

/* Contagem Regressiva */
.contagem-regressiva {
    text-align: center;
    margin: 2rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(25, 64, 41, 0.1);
    
}

.contagem-regressiva h2 {
    color: #194029;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    font-weight: 700;
}

.timer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.timer-item {
    text-align: center;
    min-width: 80px;
}

.timer-numero {
    font-size: 2.5rem;
    font-weight: bold;
    color: #194029;
    background: #fff;
    padding: 1rem 0.5rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(25, 64, 41, 0.1);
    margin-bottom: 0.5rem;
    min-width: 80px;
    display: block;
    border: 2px solid #194029;
}

.timer-label {
    font-size: 0.9rem;
    color: #194029;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Botões Interativos Estilizados - Design em Arco */
.botoes-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin: 3rem 0;
    padding: 0 1rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.botao {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: #fff;
    border: 3px solid #194029;
    border-radius: 25px;
    text-decoration: none;
    color: #194029;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    min-height: 180px;
    box-shadow: 0 8px 25px rgba(25, 64, 41, 0.15);
    text-align: center;
}

.botao::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(25, 64, 41, 0.1), transparent);
    transition: left 0.8s ease;
}

.botao:hover::before {
    left: 100%;
}

.botao:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(25, 64, 41, 0.2);
    border-color: #2d5a3d;
}

.botao .icone {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    transition: all 0.4s ease;
    display: block;
    line-height: 1;
    color: #194029;
}

.botao:hover .icone {
    transform: scale(1.15) rotate(5deg);
}

.botao .titulo {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    text-align: center;
    line-height: 1.2;
    position: relative;
    z-index: 2;
    color: #194029;
}

.botao .descricao {
    font-size: 1rem;
    color: #194029;
    text-align: center;
    line-height: 1.4;
    position: relative;
    z-index: 2;
    font-weight: 500;
}

/* Efeito de arco para os nomes */
.botao .titulo::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #194029, transparent);
    border-radius: 1px;
}

.botao .titulo::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #194029, transparent);
    border-radius: 0.5px;
}

/* Estilos específicos para cada botão com cores baseadas em #194029 */
.botao.confirmar {
    border-color: #194029;
    background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
    box-shadow: 0 8px 25px rgba(25, 64, 41, 0.2);
}

.botao.confirmar:hover {
    border-color: #2d5a3d;
    background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
    box-shadow: 0 15px 35px rgba(25, 64, 41, 0.3);
}

.botao.igreja {
    border-color: #194029;
    background: linear-gradient(135deg, #f8f5ff 0%, #e8e5f5 100%);
    box-shadow: 0 8px 25px rgba(25, 64, 41, 0.2);
}

.botao.igreja:hover {
    border-color: #2d5a3d;
    background: linear-gradient(135deg, #e8e5f5 0%, #d4c7ed 100%);
    box-shadow: 0 15px 35px rgba(25, 64, 41, 0.3);
}

.botao.recepcao {
    border-color: #194029;
    background: linear-gradient(135deg, #fff8f5 0%, #f5e8e0 100%);
    box-shadow: 0 8px 25px rgba(25, 64, 41, 0.2);
}

.botao.recepcao:hover {
    border-color: #2d5a3d;
    background: linear-gradient(135deg, #f5e8e0 0%, #edc7d4 100%);
    box-shadow: 0 15px 35px rgba(25, 64, 41, 0.3);
}

.botao.presentes {
    border-color: #194029;
    background: linear-gradient(135deg, #fff5f8 0%, #f5e0e8 100%);
    box-shadow: 0 8px 25px rgba(25, 64, 41, 0.2);
}

.botao.presentes:hover {
    border-color: #2d5a3d;
    background: linear-gradient(135deg, #f5e0e8 0%, #edc7d4 100%);
    box-shadow: 0 15px 35px rgba(25, 64, 41, 0.3);
}

/* Responsividade para os botões */
@media (max-width: 768px) {
    .botoes-links {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 0.5rem;
    }
    
    .botao {
        padding: 2rem 1rem;
        min-height: 150px;
    }
    
    .botao .icone {
        font-size: 3.5rem;
        margin-bottom: 1.2rem;
    }
    
    .botao .titulo {
        font-size: 1.2rem;
    }
    
    .timer {
        gap: 1rem;
    }
    
    .timer-numero {
        font-size: 2rem;
    }
    
    .timer-label {
        font-size: 0.7rem;
    }
    
    .nomes-casal h1 {
        font-size: 2.8rem;
    }
    
    .nomes-casal .e {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .contagem-regressiva {
        padding: 1.5rem 1rem;
        margin: 1.5rem 0;
    }
    
    .timer {
        gap: 0.8rem;
    }
    
    .timer-item {
        min-width: 60px;
    }
    
    .timer-numero {
        font-size: 1.8rem;
    }
    
    .botao {
        padding: 1.8rem 0.8rem;
        min-height: 130px;
    }
    
    .botao .icone {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    .botao .titulo {
        font-size: 1.1rem;
    }
    
    .botao .descricao {
        font-size: 0.9rem;
    }
    
    .nomes-casal h1 {
        font-size: 2.2rem;
    }
    
    .nomes-casal .e {
        font-size: 1.6rem;
    }
}

/* Form */
.grupo { margin: 15px auto; max-width: 480px; text-align: left; }
.grupo label { font-weight: 600; display: block; margin-bottom: 8px; color: #333; }
.grupo input, .grupo select, .grupo textarea { 
    width: 100%; 
    padding: 12px; 
    border: 2px solid #e9ecef; 
    border-radius: 12px; 
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
}
.grupo input:focus, .grupo select:focus, .grupo textarea:focus {
    outline: none;
    border-color: #e0c097;
    box-shadow: 0 0 0 3px rgba(224, 192, 151, 0.1);
}
.grupo button { margin-top: 12px; }

/* Animação: portas do convite */
.convite-animacao { 
    position: fixed; /* Mudança: fixed para sobrepor todo o conteúdo */
    top: 0;
    left: 0;
    width: 100vw; 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    z-index: 9999; /* Mudança: z-index alto para sobrepor tudo */
    transition: opacity 0.8s ease, visibility 0.8s ease; /* Mudança: transição mais rápida */
}


/* Mudança: Remover regras que escondem a logo */
/* .convite-animacao .logo:not([src]), 
.convite-animacao .logo[src=""],
.convite-animacao .logo[src*="logo-casamento.png"]:not([src*="data:"]):not([src*="blob:"]) {
    display: none;
}

.convite-animacao .logo:not([src]) + .logo-fallback,
.convite-animacao .logo[src=""] + .logo-fallback,
.convite-animacao .logo[src*="logo-casamento.png"]:not([src*="data:"]):not([src*="blob:"]) + .logo-fallback {
    display: block;
} */

/* Mudança: Adicionar estado para quando as portas abrirem */
.portas-abertas {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.portas-abertas .porta.esquerda { transform: translateX(-100%); }
.portas-abertas .porta.direita { transform: translateX(100%); }

.logo-fallback {
    display: none;
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: #6a4e42;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    letter-spacing: 1px;
    line-height: 1.2;
}


/* === FIX: logo da abertura ocupa quase a tela inteira === */
.convite-animacao .logo {
  max-width: min(92vw, 1100px) !important;
  max-height: 82vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}


.porta { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 50%; 
    background: linear-gradient(135deg, #e0c097 0%, #c79277 100%);
    z-index: 3; 
    transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
}

.porta.esquerda { 
    left: 0; 
    transform: translateX(0); 
    border-right: 2px solid rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #e0c097 0%, #c79277 100%);
}

.porta.direita { 
    right: 0; 
    transform: translateX(0); 
    border-left: 2px solid rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #c79277 0%, #e0c097 100%);
}

/* Footer */
.convite-footer { 
    text-align: center; 
    padding: 20px; 
    color: #6a6a6a; 
    font-size: 0.95rem;
    background: #fff;
    border-top: 1px solid #e9ecef;
    margin-top: auto;
}

/* Mensagens */
.mensagem.ok { color: #155724; background: #d4edda; padding: 12px; border-radius: 8px; border: 1px solid #c3e6cb; }
.mensagem.erro { color: #721c24; background: #f8d7da; padding: 12px; border-radius: 8px; border: 1px solid #f5c6cb; }

/* Lista de Presentes */
.presentes-intro { margin-bottom: 30px; }
.presentes-intro p { font-size: 1.1rem; color: #333; margin-bottom: 10px; }
.presentes-subtitle { color: #6c757d; font-size: 0.95rem; }

.presentes-filtros { display: flex; gap: 10px; margin-bottom: 30px; justify-content: center; flex-wrap: wrap; }
.filtro-btn { padding: 8px 16px; border: 2px solid #e0c097; background: transparent; color: #6a4e42; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; }
.filtro-btn:hover, .filtro-btn.ativo { background: #e0c097; color: #fff; }

.presentes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 40px; }
.presente-item { background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all 0.3s ease; }
.presente-item:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }

.presente-imagem { position: relative; height: 200px; overflow: hidden; }
.presente-imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.presente-item:hover .presente-imagem img { transform: scale(1.05); }

.presente-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.presente-item:hover .presente-overlay { opacity: 1; }
.btn-comprar { padding: 12px 24px; background: #e0c097; color: #fff; border: none; border-radius: 25px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.btn-comprar:hover { background: #c79277; transform: scale(1.05); }

.presente-info { padding: 20px; }
.presente-titulo { font-size: 1.2rem; color: #333; margin-bottom: 10px; font-weight: 600; }
.presente-descricao { color: #6c757d; font-size: 0.9rem; margin-bottom: 15px; line-height: 1.5; }
.presente-preco { margin-bottom: 10px; }
.preco-valor { font-size: 1.3rem; font-weight: 700; color: #c79277; }
.presente-categoria { text-align: right; }
.categoria-tag { padding: 4px 12px; background: #f8f9fa; color: #6c757d; border-radius: 12px; font-size: 0.8rem; font-weight: 600; }

.presentes-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.info-card { background: #f8f9fa; padding: 20px; border-radius: 12px; text-align: center; }
.info-card h3 { color: #333; margin-bottom: 10px; font-size: 1.1rem; }
.info-card p { color: #6c757d; font-size: 0.9rem; line-height: 1.5; }

.presentes-vazio, .presentes-woocommerce-error { text-align: center; padding: 40px 20px; color: #6c757d; }
.presentes-vazio p, .presentes-woocommerce-error p { margin: 0; font-size: 1rem; }

/* Lista de Convidados Simplificada (para convidados) */
.lista-convidados-simples { margin-top: 20px; }
.lista-header-simples { background: #f8f9fa; padding: 15px; border-radius: 10px; margin-bottom: 20px; text-align: center; }
.lista-header-simples h3 { margin: 0 0 10px 0; color: #333; font-size: 1.2rem; }
.lista-stats-simples { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.stat { padding: 5px 12px; border-radius: 15px; font-size: 0.9rem; font-weight: 600; background: #e9ecef; color: #495057; }
.stat.confirmados { background: #d4edda; color: #155724; }
.stat.pendentes { background: #fff3cd; color: #856404; }
.status-confirmado { background: #d4edda; color: #155724; }
.status-pendente { background: #fff3cd; color: #856404; }
.status-ausencia { background: #f8d7da; color: #721c24; }
.status-cancelado { background: #f8d7da; color: #721c24; }

.lista-simples { list-style: none; padding: 0; margin: 0; }
.convidado-item-simples { background: #fff; border: 1px solid #e9ecef; border-radius: 10px; padding: 15px; margin-bottom: 12px; transition: all 0.3s ease; }
.convidado-item-simples:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }

.convidado-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.convidado-info .nome { font-size: 1.1rem; color: #333; }
.convidado-info .telefone { color: #6c757d; font-size: 0.9rem; }

.convidado-status { display: flex; gap: 10px; align-items: center; }
.status { padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; }
.status.confirmado { background: #d4edda; color: #155724; }
.status.pendente { background: #fff3cd; color: #856404; }
.status.ausencia { background: #f8d7da; color: #721c24; }
.status.cancelado { background: #f8d7da; color: #721c24; }
.presente { background: #fff8e1; color: #f57f17; padding: 4px 8px; border-radius: 8px; font-size: 0.8rem; }

/* Painel Administrativo */
.admin-container { max-width: 800px; }
.admin-header { margin-bottom: 30px; }
.admin-stats { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); 
    gap: 15px; 
    margin-bottom: 20px; 
}

.admin-stats-percentuais {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.stat-card { 
    background: #fff; 
    padding: 20px; 
    border-radius: 15px; 
    text-align: center; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
    transition: all 0.3s ease; 
}

.stat-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); 
}

.stat-card.confirmados { 
    background: linear-gradient(135deg, #d4edda, #c3e6cb); 
    border-left: 5px solid #28a745; 
}

.stat-card.pendentes { 
    background: linear-gradient(135deg, #fff3cd, #ffeaa7); 
    border-left: 5px solid #ffc107; 
}

.stat-card.ausencias { 
    background: linear-gradient(135deg, #f8d7da, #f5c6cb); 
    border-left: 5px solid #dc3545; 
}

.stat-card.presentes { 
    background: linear-gradient(135deg, #d1ecf1, #bee5eb); 
    border-left: 5px solid #17a2b8; 
}

.stat-card.lado-noivo { 
    background: linear-gradient(135deg, #e8f5e8, #c8e6c9); 
    border-left: 5px solid #4caf50; 
}

.stat-card.lado-noiva { 
    background: linear-gradient(135deg, #fce4ec, #f8bbd9); 
    border-left: 5px solid #e91e63; 
}

.stat-number { 
    display: block; 
    font-size: 2rem; 
    font-weight: 700; 
    color: #2c3e50; 
    margin-bottom: 5px; 
}

.stat-label { 
    font-size: 0.9rem; 
    color: #6c757d; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

.stat-label small {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.2px;
    line-height: 1.3;
    margin-top: 4px;
    display: block;
}

.stat-card.presentes { 
    background: linear-gradient(135deg, #d1ecf1, #bee5eb); 
    border-left: 5px solid #17a2b8; 
}

.stat-card.lado-noivo { 
    background: linear-gradient(135deg, #e8f5e8, #c8e6c9); 
    border-left: 5px solid #4caf50; 
}

.stat-card.lado-noiva { 
    background: linear-gradient(135deg, #fce4ec, #f8bbd9); 
    border-left: 5px solid #e91e63; 
}

.stat-number { 
    display: block; 
    font-size: 2rem; 
    font-weight: 700; 
    color: #2c3e50; 
    margin-bottom: 5px; 
}

.stat-label { 
    font-size: 0.9rem; 
    color: #6c757d; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

.admin-controls { display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; }
.botao.admin { background: #6a4e42; }
.botao.cancelar { background: #6c757d; }

.admin-filtros { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center; }
.busca-input, .filtro-select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; }
.busca-input { min-width: 200px; }
.filtro-select { min-width: 150px; }

/* Lista Administrativa */
.lista-admin { margin-top: 20px; }
.lista-admin-convidados { list-style: none; padding: 0; margin: 0; }
.admin-convidado-item { background: #fff; border: 1px solid #e9ecef; border-radius: 12px; padding: 20px; margin-bottom: 15px; transition: all 0.3s ease; }
.admin-convidado-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }

.convidado-header-admin { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.convidado-info-admin { flex: 1; }
.convidado-info-admin .nome { font-size: 1.2rem; color: #333; font-weight: 600; }
.convidado-info-admin .titular { color: #6c757d; font-size: 0.9rem; margin-top: 5px; display: block; }
.convidado-actions { display: flex; gap: 8px; }
.btn-edit, .btn-delete { background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 5px; border-radius: 5px; transition: all 0.2s; }
.btn-edit:hover { background: #e3f2fd; }
.btn-delete:hover { background: #ffebee; }

.convidado-detalhes-admin { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.convidado-detalhes-admin .status { padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; }
.convidado-detalhes-admin .status.confirmado { background: #d4edda; color: #155724; }
.convidado-detalhes-admin .status.pendente { background: #fff3cd; color: #856404; }
.convidado-detalhes-admin .status.cancelado { background: #f8d7da; color: #721c24; }
.convidado-detalhes-admin .telefone, .convidado-detalhes-admin .faixa-etaria, .convidado-detalhes-admin .sexo, .convidado-detalhes-admin .lado, .convidado-detalhes-admin .presente { 
    padding: 3px 8px; border-radius: 8px; font-size: 0.8rem; background: #f8f9fa; color: #6c757d; 
}

.mensagem-admin { background: #f8f9fa; padding: 12px; border-radius: 8px; margin: 10px 0; font-style: italic; color: #6c757d; border-left: 3px solid #6a4e42; }
.convidado-data-admin { text-align: right; }
.convidado-data-admin small { color: #6c757d; font-size: 0.8rem; }

/* Modal */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: #fff; margin: 5% auto; padding: 30px; border-radius: 15px; width: 90%; max-width: 600px; position: relative; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; right: 20px; top: 15px; }
.close:hover { color: #000; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* Lista de Convidados Confirmados (completa para admin) */
.lista-convidados { margin-top: 20px; }
.lista-header { background: #f8f9fa; padding: 15px; border-radius: 10px; margin-bottom: 20px; text-align: center; }
.lista-header h3 { margin: 0 0 10px 0; color: #333; font-size: 1.2rem; }
.lista-stats { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.stat { padding: 5px 12px; border-radius: 15px; font-size: 0.9rem; font-weight: 600; background: #e9ecef; color: #495057; }
.stat.confirmados { background: #d4edda; color: #155724; }
.stat.pendentes { background: #fff3cd; color: #856404; }
.status-confirmado { background: #d4edda; color: #155724; }
.status-pendente { background: #fff3cd; color: #856404; }
.status-ausencia { background: #f8d7da; color: #721c24; }
.status-cancelado { background: #f8d7da; color: #721c24; }

.lista { list-style: none; padding: 0; margin: 0; }
.convidado-item { background: #fff; border: 1px solid #e9ecef; border-radius: 10px; padding: 15px; margin-bottom: 12px; transition: all 0.3s ease; }
.convidado-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }

.convidado-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.convidado-header .nome { font-size: 1.1rem; color: #333; }
.status { padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; }
.status-confirmado { background: #d4edda; color: #155724; }
.status-pendente { background: #fff3cd; color: #856404; }
.status-ausencia { background: #f8d7da; color: #721c24; }
.status-cancelado { background: #f8d7da; color: #721c24; }

.convidado-detalhes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.detalhe { padding: 3px 8px; border-radius: 8px; font-size: 0.8rem; background: #f8f9fa; color: #6c757d; }
.detalhe.faixa-etaria { background: #e3f2fd; color: #0d47a1; }
.detalhe.sexo { background: #f3e5f5; color: #4a148c; }
.detalhe.lado { background: #fff3e0; color: #e65100; }
.detalhe.lado-noivo { background: #e8f5e8; color: #2e7d32; }
.detalhe.lado-noiva { background: #fce4ec; color: #c2185b; }
.detalhe.telefone { background: #e8f5e8; color: #2e7d32; }
.detalhe.presente { background: #fff8e1; color: #f57f17; }

.mensagem-convidado { background: #f8f9fa; padding: 10px; border-radius: 8px; margin: 10px 0; font-style: italic; color: #6c757d; border-left: 3px solid #6a4e42; }

.convidado-data { text-align: right; }
.convidado-data small { color: #6c757d; font-size: 0.8rem; }

.lista-vazia, .lista-erro, .carregando { text-align: center; padding: 30px 20px; color: #6c757d; }
.lista-vazia p, .lista-erro p, .carregando p { margin: 0; font-size: 1rem; }
.carregando p { color: #6a4e42; font-weight: 600; }

/* === FIX: Great Vibes nos nomes do casal === */
.nomes-casal h1,
.nomes-casal .e {
  font-family: "Great Vibes", "GreatVibes", cursive !important;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* Responsividade */
@media (max-width: 768px) {
    .convite-container {
        margin: 0 10px;
        border-radius: 15px;
    }
    
    .nomes-casal {
        font-size: 2rem;
        margin: 20px 0 10px;
    }
    
    .conteudo-pagina {
        padding: 15px;
        font-size: 1rem;
    }
    
    .botoes-links {
        padding: 0 15px 20px;
        gap: 10px;
    }
    
    .botao {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .convite-animacao {
        height: 100vh;
    }
    
    .convite-animacao .logo {
        max-height: 20vh;
        max-width: 35vw;
    }
    
    .porta {
        transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

@media (max-width: 480px) {
    .convite-container {
        margin: 0 5px;
        border-radius: 10px;
    }
    
    .nomes-casal {
        font-size: 1.8rem;
        margin: 15px 0 8px;
    }
    
    .conteudo-pagina {
        padding: 12px;
        font-size: 0.95rem;
    }
    
    .botoes-links {
        padding: 0 12px 15px;
        gap: 8px;
    }
    
    .botao {
        padding: 8px 16px;
        font-size: 0.85rem;
        border-radius: 25px;
    }
    
    .convite-animacao {
        height: 100vh;
    }
    
    .convite-animacao .logo {
        max-height: 18vh;
        max-width: 30vw;
    }
    
    .admin-stats { grid-template-columns: 1fr; }
    .admin-controls { flex-direction: column; }
    .admin-filtros { flex-direction: column; }
    .form-row { grid-template-columns: 1fr; }
    .form-actions { flex-direction: column; }
    .presentes-grid { grid-template-columns: 1fr; }
    .presentes-filtros { flex-direction: column; }
    .presentes-info { grid-template-columns: 1fr; }
}

/* === Texto em arco + efeito vazado === */
.titulo-arco { display:block; margin-top: -0.5rem; margin-bottom: 0.25rem; }
.titulo-arco text { font-family: "Great Vibes", "GreatVibes", cursive; font-size: 26px; }

.titulo.vazado {
  fill: transparent;
  stroke: #194029;
  stroke-width: 1.2px;
  paint-order: stroke;
}

/* Deixe o ícone bem protagonista */
.botao .icone svg { width: 88px; height: 88px; }
@media (max-width: 480px){
  .titulo-arco text { font-size: 22px; }
  .botao .icone svg { width: 70px; height: 70px; }
}

/* Opcional: trocar cover por contain quando você definir altura fixa no container */
.banner { object-fit: contain; background:#fff; }

/* === ABERTURA EM TELA CHEIA COM O CONVITE AO FUNDO === */
.convite-animacao {
  /* substitui o gradiente atual */
  background: url('<?php echo get_template_directory_uri(); ?>/assets/images/convite-scaled.png')
              center/cover no-repeat !important;
}

/* Logo do casamento por cima (grande o suficiente em todos os devices) */
.convite-animacao .logo {
  max-width: min(65vw, 520px) !important;
  max-height: min(40vh, 300px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  z-index: 4;
}

/* Portas: pretas translúcidas por cima do convite (efeito de abrir) */
.porta {
  top: 0; bottom: 0; width: 50%; height: 100%;
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(1px);
  transition: transform .7s ease !important; /* mais rápido */
  z-index: 3;
}
.porta.esquerda  { left: 0;  transform: translateX(0); }
.porta.direita   { right: 0; transform: translateX(0); }
.portas-abertas .porta.esquerda { transform: translateX(-100%); }
.portas-abertas .porta.direita  { transform: translateX(100%); }

/* Garante que a seção de conteúdo venha logo abaixo sem deslocamento */
.convite-main { margin-top: 0 !important; }
 	
/* === LIMITE CLÁSSICO DO CONVITE === */
.conteudo-pagina {
  max-width: 700px !important;
  margin: 0 auto !important;
  padding: 24px !important;
}

/* === PATCH: Abertura clean sobre o convite === */
.convite-animacao {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Logo suficientemente grande e nítida */
.convite-animacao .logo {
  max-width: min(65vw, 520px) !important;
  max-height: min(40vh, 300px) !important;
  width: auto !important; height: auto !important;
  object-fit: contain !important;
  z-index: 4;
}

/* Portas discretas (escuras), mais rápidas */
.porta {
  top: 0; bottom: 0; width: 50%; height: 100%;
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(1px);
  transition: transform .7s ease !important;
  z-index: 3;
}
.porta.esquerda  { left: 0;  transform: translateX(0); }
.porta.direita   { right: 0; transform: translateX(0); }
.portas-abertas .porta.esquerda { transform: translateX(-100%); }
.portas-abertas .porta.direita  { transform: translateX(100%); }


/* ====== LAYOUT DE CONVITE (600px) ====== */
html { background: #eef2ef; } /* cor do fundo (fora do papel) */
body {
  max-width: 600px;          /* tudo dentro do body fica no "papel" */
  margin: 0 auto;            /* centralizado */
  background: #ffffff;       /* papel */
  color: #333;
  line-height: 1.6;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
  overflow-x: hidden;
}

/* Se existirem wrappers largões, respeitam 600px */
.conteudo-pagina,
.botoes-links,
.nomes-casal,
.informacoes-evento,
.contagem-regressiva,
.programacao,
.mensagem,
.mensagem-final { max-width: 100% !important; }

/* ====== LOGO NO TOPO DO BODY ====== */
.site-logo-bar {
  display: flex; justify-content: center; align-items: center;
  padding: 14px 12px 6px;
}
.site-logo-link { display: inline-flex; }
.site-logo-img {
  height: 38px; width: auto; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.06));
}

/* ====== ANIMAÇÃO CAPA QUE SE PARTE AO MEIO ====== */
.convite-animacao.split {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; grid-template-columns: 1fr 1fr;
  background: none !important;   /* sem gradiente/cores */
  transition: opacity .35s ease, visibility .35s ease;
}
.convite-animacao.split .metade {
  background-repeat: no-repeat;
  background-size: 100vw 100vh;  /* mesma imagem em cada metade */
  background-position: center;   /* vamos ajustar por lado abaixo */
  will-change: transform;
}
.convite-animacao.split .metade.esquerda { background-position: left center; }
.convite-animacao.split .metade.direita  { background-position: right center; }

/* estado inicial: portas fechadas (imagem inteira) */
.portas-fechadas .metade.esquerda { transform: translateX(0); }
.portas-fechadas .metade.direita  { transform: translateX(0); }

/* estado abrindo: cada metade sai para um lado */
.portas-abertas .metade.esquerda { transform: translateX(-100%); }
.portas-abertas .metade.direita  { transform: translateX(100%); }

/* velocidade/curva da animação */
.convite-animacao.split .metade {
  transition: transform .85s cubic-bezier(.2,.7,.2,1);
}

/* ao terminar, desvanece o overlay */
.portas-abertas.convite-animacao.split {
  opacity: 0; visibility: hidden; pointer-events: none;
}

/* ====== RESPONSIVO ====== */
@media (max-width: 640px) {
  body { border-radius: 12px; }
  .site-logo-img { height: 180px; }
}

/* LOGO fixa no topo do body */
.site-logo-img {
  width: 180px !important;
  height: auto !important;
  object-fit: contain;
}
@media (max-width: 360px){
  .site-logo-img { width: 160px !important; }
}

/* Contagem central e com respiro antes dos botões */
.contagem-regressiva, #contagem-regressiva, .contador, #contador {
  max-width: 520px;
  margin: 12px auto 28px;   /* central + espaço */
}

/* ====== BASE DE PÁGINA ====== */
:root { --verde: #194029; --papel: #ffffff; --fundo: #edf3ef; }

html { background: var(--fundo); }
body { background: transparent; } /* o "papel" é a .convite-frame */

/* Moldura única (contorno de convite) usada no site todo */
.convite-frame{
  max-width: 600px;
  margin: 14px auto 48px;
  padding: 16px 18px 24px;
  background: var(--papel);
  border: 2px solid var(--verde);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Cabeçalho dentro da moldura: logo + voltar */
.site-header-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.site-logo-link{
  grid-column: 2;
  justify-self: center;
}
.site-logo-img{
  width: 180px !important;
  height: auto !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.06));
}
.btn-voltar{
  grid-column: 1;
  justify-self: start;
  font-size: 15px;
  color: var(--verde);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: #f6fbf7;
}
.btn-voltar:hover{ background: #eef8f0; }

/* Em telas pequenas, o voltar vai para baixo da logo */
@media (max-width:560px){
  .site-header-row{
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .btn-voltar{
    grid-column: 1;
    margin-top: 6px;
    justify-self: center;
  }
}

/* ====== CONTEÚDO DENTRO DA MOLDURA ====== */
/* Nada deve passar de 100% da moldura */
.convite-frame * { max-width: 100%; box-sizing: border-box; }

/* Imagens SEM ESTOURAR e sem "pular" para fora */
.convite-frame img{
  display: block;
  height: auto !important;
  max-width: 100% !important;
}

/* Gutenberg: figuras wide/full não podem ultrapassar a moldura */
.convite-frame .alignwide,
.convite-frame .alignfull,
.convite-frame .wp-block-image,
.convite-frame figure{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Vídeo/iframes responsivos */
.convite-frame iframe,
.convite-frame video,
.convite-frame embed{
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  aspect-ratio: 16/9;
}

/* Se você tiver seções "largas" anteriores, normalize-as */
.conteudo-pagina,
.botoes-links,
.nomes-casal,
.informacoes-evento,
.contagem-regressiva,
.programacao,
.mensagem,
.mensagem-final{
  max-width: 100% !important;
  margin-left: auto; margin-right: auto;
font-family: 'Playfair Display', serif;
}

/* ====== ANIMAÇÃO DE CAPA (convite se partindo ao meio) ====== */
.convite-animacao.split{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; grid-template-columns: 1fr 1fr;
  background: none !important;
  transition: opacity .35s ease, visibility .35s ease;
}
.convite-animacao.split .metade{
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  background-position: center;
  transition: transform .85s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.convite-animacao.split .metade.esquerda{ background-position: left center; transform: translateX(0); }
.convite-animacao.split .metade.direita { background-position: right center; transform: translateX(0); }
.portas-abertas .metade.esquerda{ transform: translateX(-100%); }
.portas-abertas .metade.direita { transform: translateX(100%); }
.portas-abertas.convite-animacao.split{ opacity: 0; visibility: hidden; pointer-events: none; }

/* Contagem regressiva central (se existir) */
.contagem-regressiva, #contagem-regressiva, .contador, #contador{
  margin: 12px auto 28px;
}

body {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: #fff; /* mantém contraste */
}

h1 {
  font-size: 22px;
  text-align: center;
  margin: 20px 0;
  color: #25412a;
}

h3 {
  font-size: 16px;
  color: #25412a;
  margin-top: 30px;
}

p {
  font-size: 15px;
  margin: 10px 0;
}

a.botao-voltar {
  text-decoration: none;
  background-color: #25412a;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  display: inline-block;
  margin-bottom: 20px;
  transition: background-color 0.3s ease; /* animação suave */
}

a.botao-voltar:hover {
  background-color: #1b301f; /* tom mais escuro no hover */
}

/* Ajuste para telas pequenas */
@media (max-width: 600px) {
  body {
    font-size: 15px;
  }
  h1 {
    font-size: 20px;
  }
}

.nome-noivos h1 {
  font-family: 'Great Vibes', cursive;
  font-size: 2.1em;
  color: #25412a;
  text-align: center;
}
.nome-noivos .e {
  font-family: 'Great Vibes', cursive;
  font-size: 2.5em;
  color: #25412a;
  text-align: center;
}

/* Container geral da busca */
#form-busca {
  max-width: 500px;
  margin: 20px auto 40px;
  text-align: center;
}

/* Campo de texto */
#form-busca input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.3;
  border: 1.5px solid #25412a;
  border-radius: 10px;
  color: #333;
  background-color: #fff;
  outline: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  text-transform: none !important; /* evita minúsculas forçadas */
}

#form-busca input::placeholder {
  color: #8aa197;
  text-transform: none;
}

/* Botão */
#form-busca .botao.confirmar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  background-color: #25412a;
  color: #fff;
  cursor: pointer;
  margin-top: 10px;
  width: auto;
  height: auto;
  box-shadow: 0 8px 18px rgba(37, 65, 42, 0.15);
  transition: background-color 0.3s ease, transform 0.15s ease;
}

#form-busca .botao.confirmar:hover {
  background-color: #1b301f;
}

#form-busca .botao.confirmar:active {
  transform: translateY(1px);
}

/* Para telas pequenas */
@media (max-width: 480px) {
  #form-busca input[type="text"] {
    font-size: 15px;
  }
  #form-busca .botao.confirmar {
    width: 100%;
  }
}


/* Botão da busca: formato compacto, legível */
#form-busca .botao.confirmar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 10px 16px !important;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.2 !important;

  color: #fff !important;
  background: #25412a !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 18px rgba(37,65,42,.15) !important;

  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;

  background-image: none !important;   /* corta gradientes do tema */
  transform: none !important;
  text-transform: none !important;
  opacity: 1 !important;
  cursor: pointer;
}

/* estados */
#form-busca .botao.confirmar:hover{ background:#1b301f !important; }
#form-busca .botao.confirmar:active{ transform: translateY(1px) !important; }

/* garante que ícones não "esticam" o botão */
#form-busca .botao.confirmar img,
#form-busca .botao.confirmar svg{ width:18px; height:18px; flex:0 0 auto; }

.resultado-lista {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 12px;
}

.resultado-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  background: #fff;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, transform .04s ease;
}

.resultado-btn:hover,
.resultado-btn:focus-visible {
  outline: none;
  border-color: #c45a5a;
  box-shadow: 0 0 0 3px rgba(196, 90, 90, 0.15);
}

.resultado-btn:active {
  transform: translateY(1px);
}

/* Evita overlay comendo cliques */
.convite-animacao{ 
  width:100%; height:120px; 
  background: url('/wp-content/themes/tema-casamento-final/assets/images/convite-scaled.png') center/cover no-repeat !important;
  border-radius:12px;
  pointer-events:none;            /* <<< chave para não bloquear nada atrás */
}

/* Garante stacking previsível */
.convite-container{ position: relative; z-index: 0; }
.convite-header, .convite-logo-link, .botao-voltar { position: relative; z-index: 1; }

/* Links em forma de botão seguem clicáveis */
.botao-voltar, .botoes-links a.botao { pointer-events:auto; }

/* 1) Evitar overlay da arte/animacao bloquear cliques */
.convite-animacao{
  pointer-events: none; /* chave! */
}

/* 2) Garantir que a área de botões esteja acima de qualquer overlay */
.botoes-links{
  position: relative;
  z-index: 2;
}

/* 3) Tornar os <a> realmente "botões" e clicáveis */
.botoes-links a.botao{
  display: block;                 /* clique em toda a área */
  pointer-events: auto;           /* garante clique mesmo se pai tiver algo diferente */
  text-decoration: none;
  border-radius: 16px;
  padding: 14px 16px;
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border: 1px solid #e2e8f0;
  color: #1f2937;
  line-height: 1.3;
}

/* subtítulo abaixo da linha principal */
.botoes-links a.botao span{
  display: block;
  font-size: 0.9rem;
  opacity: .85;
  margin-top: 4px;
}

/* feedback de interação (acessibilidade + UX) */
.botoes-links a.botao:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.botoes-links a.botao:active{ transform: translateY(0); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.botoes-links a.botao:focus-visible{
  outline: 3px solid #94a3b8;
  outline-offset: 2px;
  text-decoration: none;
}

/* variações (cores opcionais por tipo) */
.botoes-links a.botao.confirmar{ border-color:#c7ead7; background:#edfdf4; }
.botoes-links a.botao.igreja{ border-color:#d6e2ff; background:#eef4ff; }
.botoes-links a.botao.recepcao{ border-color:#ffe1c7; background:#fff4ec; }
.botoes-links a.botao.presentes{ border-color:#f6d8ff; background:#fcf4ff; }


/* 2.1) Container com referência de posicionamento */
.convite-container{ position: relative; z-index: 0; }

/* 2.2) A animação cobre o topo, mas NÃO intercepta cliques */
.convite-animacao{
  position: absolute;
  inset: 0;                 /* cobre a área do header/container */
  background: url('/wp-content/themes/tema-casamento-final/assets/images/convite-scaled.png') center/cover no-repeat !important;
  border-radius: 12px;
  z-index: 5;
  pointer-events: none;     /* <<< chave: não bloqueia cliques */
  opacity: 1;
  /* Anima: espera 0.2s, exibe 1.8s e some (total ~2s) */
  animation: conviteFadeOut 1.8s ease-out 0.2s forwards;
}

/* 2.3) Após sumir, garante que não ocupe layout */
@keyframes conviteFadeOut{
  0%   { opacity: 1; }
  85%  { opacity: 0; }
  100% { opacity: 0; visibility: hidden; }
}

/* 2.4) Respeito a acessibilidade: menos movimento */
@media (prefers-reduced-motion: reduce) {
  .convite-animacao{
    animation: none;
    opacity: 0;
    visibility: hidden;
  }
}

/* (opcional) garantir clique nos botões/links por cima */
.botoes-links, .convite-logo-link, .botao-voltar{ position: relative; z-index: 10; }

/* CARD do convite */
#convite-wrapper{ display:flex; justify-content:center; padding:24px; }
.convite-container{
  position: relative;
  z-index: 0;
  max-width: 600px;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  padding: 20px;                 /* respiro interno */
  overflow: hidden;              /* evita "vazar" */
}

/* Header centralizado */
.convite-header{
  display: flex;
  flex-direction: column;
  align-items: center;           /* centraliza logo */
  gap: 12px;
  margin-bottom: 16px;
}

/* Logo responsiva e central */
.convite-logo{
  display: block;
  margin: 4px auto 0;
  width: clamp(120px, 30vw, 200px);
  max-width: 200px;
  height: auto;
  object-fit: contain;
}
.convite-logo-link{ display:inline-block; position: relative; z-index: 2; }

/* Animação não bloqueia clique e some sozinha */
.convite-animacao{
  width: 100%;
  height: clamp(140px, 28vw, 220px);
  margin: 0 auto 6px;
  background: url('/wp-content/themes/tema-casamento-final/assets/images/convite-scaled.png') center/cover no-repeat !important;
  border-radius: 12px;
  pointer-events: none;      /* não intercepta */
  opacity: 1;
  animation: conviteFadeOut 1.8s ease-out 0.2s forwards;
}
@keyframes conviteFadeOut{
  0% { opacity: 1; }
  85% { opacity: 0; }
  100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce){
  .convite-animacao{ animation:none; opacity:0; visibility:hidden; }
}

/* Área de conteúdo e botões */
.conteudo-pagina{ margin-top: 8px; }
.botoes-links{ position: relative; z-index: 2; }
.botoes-links a.botao{
  display:block;
  text-decoration:none;
  border-radius:16px;
  padding:14px 16px;
  background:#f8fafc;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  border:1px solid #e2e8f0;
  color:#1f2937;
  line-height:1.3;
  pointer-events:auto;
}
.botoes-links a.botao span{ display:block; font-size:.9rem; opacity:.85; margin-top:4px; }

.convite-footer .assinatura{
  margin-top: 8px;
  text-align: center;
  font-size: .95rem;
  opacity: .9;
}

/* ========= PALETA DO CONVITE ========= */
:root{
  --verde:#25412a;               /* cor principal */
  --verde-10:#eaf4ee;            /* fundo suave */
  --cinza-borda:#e5e7eb;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

/* ========= CONTAINER DA PÁGINA ========= */
.bloco-confirmar{
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: var(--shadow);
}

.titulo-pagina{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  text-align: center;
  color: var(--verde);
  margin: 6px 0 18px 0;
}

/* ========= FORM / CAMPOS ========= */
.form-confirmar{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.lbl{
  display: block;
  font-size: .95rem;
  color: #374151;
  margin: 0 0 4px 0;
  font-weight: 600;
}

.form-confirmar input[type="text"],
.form-confirmar input[type="tel"],
.form-confirmar select{
  width: 100%;
  height: 48px;
  padding: 10px 12px;
  border: 1.5px solid var(--cinza-borda);
  border-radius: 14px;
  background: #fafafa;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
  font-size: 1rem;
}

/* Validação de campos */
.form-confirmar input:invalid,
.form-confirmar input:invalid:focus {
  border-color: #dc3545;
  background: #fff5f5;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.form-confirmar input:valid,
.form-confirmar input:valid:focus {
  border-color: #28a745;
  background: #f8fff9;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

/* Mensagens de erro personalizadas */
.form-confirmar input:invalid + .error-message {
  display: block;
  color: #dc3545;
  font-size: 0.85rem;
  margin-top: 5px;
  padding-left: 5px;
}

.error-message {
  display: none;
  color: #dc3545;
  font-size: 0.85rem;
  margin-top: 5px;
  padding-left: 5px;
  font-weight: 500;
  line-height: 1.4;
  background: #fef2f2;
  border-left: 3px solid #dc3545;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 8px;
}

/* Campo com erro personalizado */
.campo-invalido {
  border-color: #dc3545 !important;
  background: #fff5f5 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

.campo-invalido:focus {
  border-color: #dc3545 !important;
  background: #fff5f5 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
}

/* Placeholder estilizado */
.form-confirmar input::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.form-confirmar input::placeholder{ color:#9aa3af; }

.form-confirmar input:focus,
.form-confirmar select:focus{
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 20%, transparent);
  background: #fff;
}

/* Dois selects lado a lado com respiro */
.linha-selects{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  align-items: end;
}

/* ========= BOTÕES ========= */
.linha-botoes{
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

@media (min-width: 540px){
  .linha-botoes{
    grid-template-columns: 1fr 1fr;
  }
}

.botao{
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.botao.confirmar{
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--verde) 8%, #ffffff) 0%, var(--verde) 100%);
}

.botao.aviso{
  color: #18402a;
  background: linear-gradient(180deg, #f3fbf7 0%, var(--verde-10) 100%);
  border: 1.5px solid color-mix(in srgb, var(--verde) 25%, #ffffff);
}

.botao:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0,0,0,.10); }
.botao:active{ transform: translateY(0); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.botao:focus-visible{ outline: 3px solid color-mix(in srgb, var(--verde) 35%, transparent); outline-offset: 3px; }

/* ========= DETALHES FINOS ========= */
.bloco-confirmar .mensagem-ajuda{
  font-size: .9rem; color:#6b7280; margin-top: -6px;
}

/* === Container geral === */
.convite-container{
  max-width: 600px;
  margin: 0 auto;
  padding: 24px 28px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
}

/* Título */
.nomes-casal{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 24px;
  color: #25412a;
}

/* === Form === */
#form-confirmar{
  display: grid;
  gap: 18px;
}

/* Grupo (label + campo) */
.grupo{
  display: flex;
  flex-direction: column;
}

.grupo label{
  font-size: .95rem;
  color: #374151;
  margin-bottom: 4px; /* fica colado no campo */
}

/* Inputs / Selects / Textarea */
.grupo input[type="text"],
.grupo input[type="tel"],
.grupo select,
.grupo textarea{
  padding: 10px 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 12px;
  font-size: 1rem;
  background: #fafafa;
  transition: all .2s ease;
}

.grupo input:focus,
.grupo select:focus,
.grupo textarea:focus{
  border-color: #25412a;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,65,42,.15);
}

/* Textarea */
.grupo textarea{
  resize: vertical;
  min-height: 80px;
}

/* Checkbox alinhado */
.grupo input[type="checkbox"]{
  margin-right: 6px;
  accent-color: #25412a;
}

/* === Botão === */
.botao.confirmar{
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #2f6d44, #25412a);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.botao.confirmar:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
}

.botao.confirmar:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

/* === Mensagem de retorno === */
.mensagem{
  margin-top: 14px;
  text-align: center;
  font-size: .95rem;
  color: #25412a;
}

/* Nomes dos noivos em fonte cursiva */
.nomes-casal {
  font-family: 'Great Vibes', cursive !important;
  font-size: 2.2em;        /* ajuste do tamanho */
  font-weight: bold;
  color: #25412a;         /* verde que você já usa */
  text-align: center;
  margin: 20px 0;
}

.linha-selects{
  display: grid;
  grid-template-columns: 1fr; /* era 1fr 1fr */
  gap: 12px 14px;
  align-items: end;
}

/* Limita o conteúdo ao convite */
.convite-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Imagens responsivas */
.convite-container img,
.wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Wrapper responsivo pro mapa (16:9) */
.map-embed {
  position: relative;
  width: 100%;
  /* 56.25% = 16:9; ajuste se quiser outra proporção */
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 8px;
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Garante que qualquer iframe dentro do conteúdo não estoure */
.entry-content iframe,
.convite-container iframe {
  max-width: 100%;
  height: auto;
}

/* Evita que blocks do WP estourem lateralmente */
.entry-content, .wp-block-group, .wp-block-embed {
  overflow-wrap: anywhere;
}
p.texto-convite {
    font-family: Great Vibes;
    font-size: 2em;
    text-align: center;
}
.paleta-proibida {
  display: flex;
  justify-content: center;
  gap: 5px; /* Espaço entre os itens */
  margin: 20px 0;
  flex-wrap: wrap; /* Garante que em telas pequenas quebre para outra linha */
}

.paleta-proibida .item {
  text-align: center;
  font-size: 14px;
  color: #25412a;
}

.paleta-proibida .swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #ccc;
  margin: 0 auto 6px;
}
.aviso-cores {
  text-align: center;
  font-size: 16px;
  margin-bottom: 15px;
  font-family: 'Playfair Display', serif;
  color: #333;
}

.tag-proibido {
  background: #b22222; /* vermelho forte */
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.no-scroll { overflow: hidden; }

#convite-loader{
  position: fixed;
  inset: 0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  z-index:9999;
  opacity:1;            /* base visível */
  visibility:visible;   /* base visível */
  transition:opacity .6s ease, visibility .6s ease;
}

#convite-loader img {
  max-width: min(90vw, 520px); /* largura nunca maior que 90% ou 520px */
  max-height: 100vh;           /* nunca maior que a altura da tela */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  animation: convite-pop .9s ease both;
}


#convite-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.skip-loader #convite-loader { display: none !important; }

body:not(.home) #convite-loader {
  display: none !important;
}
.bloco-confirmados{
  max-width: 720px;
  margin: 0 auto;
}
.cc-resumo{ margin: 10px 0 16px; }
.cc-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 30px rgba(31,38,135,0.08);
}
.cc-linha{
  display:flex; justify-content:space-between; align-items:center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,0,0,.06);
}
.cc-linha:last-child{ border-bottom: 0; }
.cc-label{ color:#6b7280; font-size:.95rem; }
.cc-valor{ color:#1f2937; font-weight:600; }

.cc-lista{ margin-top: 18px; }
.cc-subtitulo{
  font-size: 1.05rem; color:#374151; margin: 0 0 8px 2px;
}
.cc-ul{ list-style:none; padding:0; margin:0; }
.cc-item{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px;
  padding:10px 12px; margin-bottom:10px;
  display:flex; flex-direction:column; gap:4px;
}
.cc-item.vazio{ text-align:center; color:#6b7280; font-style:italic; }
.cc-nome{ font-weight:600; color:#111827; }
.cc-meta{ font-size:.92rem; color:#4b5563; display:flex; gap:8px; flex-wrap:wrap; }
.cc-tag{
  display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.08);
  background: #f8fafc;
}
.cc-tel{ opacity:.9; }

.cc-acoes{
  display:flex; gap:10px; justify-content:center; margin-top:16px;
}
/* Botão principal (Continuar para finalização) */
.wc-block-cart__submit-button.contained,
.wc-block-components-button.wp-element-button.contained {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:10px; border:0;
  background: var(--wp--preset--color--primary, #1b301f);
  color:#fff; text-decoration:none; font-weight:600; line-height:1.2;
}

/* Botão secundário (Adicionar mais presentes) */
.wc-block-cart__continue-button,
.wc-block-components-button.wp-element-button.outline {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:10px;
  background:transparent; border:1px solid currentColor;
  color: var(--wp--preset--color--primary, #111); text-decoration:none; font-weight:600;
  margin-right:.5rem;
}

/* efeitos */
.wc-block-cart__submit-button.contained:hover { filter: brightness(1.05); }
.wc-block-cart__continue-button:hover { background: rgba(0,0,0,.05); }

/* garante espaçamento adequado do container dos botões */
.wc-block-cart__submit-container { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Botões lado a lado no carrinho (Blocks) */
.wc-block-cart__submit-container { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Botão principal (Continuar para finalização) */
.wc-block-cart__submit-button.contained,
.wc-block-components-button.wp-element-button.contained {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:10px; border:0;
  background: var(--wp--preset--color--primary, #111);
  color:#fff; text-decoration:none; font-weight:600; line-height:1.2;
}
.wc-block-cart__submit-button.contained:hover { filter: brightness(1.05); }

/* Botão secundário "Adicionar mais presentes" (Blocks e Clássico) */
.wc-block-cart__continue-button,
.wc-continue-shopping-button,
.wc-block-components-button.wp-element-button.outline {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:10px;
  background:transparent; border:1px solid currentColor;
  color: var(--wp--preset--color--primary, #111); text-decoration:none; font-weight:600;
  margin-right:.5rem;
}
.wc-block-cart__continue-button:hover,
.wc-continue-shopping-button:hover { background: rgba(0,0,0,.05); }


/* ===== Paleta do tema (ajuste se quiser) ===== */
:root{
  --dr-green: #14532d;      /* seu verde escuro */
  --dr-green-700: #0f3d23;  /* hover/foco */
  --dr-green-50: #ecfdf5;   /* fundo leve p/ outline */
  --dr-on-green: #ffffff;   /* texto em botão sólido */
}

/* Ícone de presente (canto superior direito do card) */
.convite-gift-link{
  background: var(--dr-green);
  color: var(--dr-on-green);
}
.convite-gift-link:hover{ background: var(--dr-green-700); }

/* Botões PRINCIPAIS (Woo Blocks + single product) */
.wc-block-cart__submit-button.contained,
.wc-block-components-button.wp-element-button.contained,
button.single_add_to_cart_button{
  background: var(--dr-green) !important;
  color: var(--dr-on-green) !important;
  border: 0 !important;
}
.wc-block-cart__submit-button.contained:hover,
.wc-block-components-button.wp-element-button.contained:hover,
button.single_add_to_cart_button:hover{
  background: var(--dr-green-700) !important;
}

/* Botões SECUNDÁRIOS / outline (Voltar, Adicionar mais presentes) */
.dr-btn-outline,
.wc-block-cart__continue-button,
.wc-continue-shopping-button,
.wc-block-components-button.wp-element-button.outline{
  color: var(--dr-green) !important;
  border-color: var(--dr-green) !important;
  background: transparent !important;
}
.dr-btn-outline:hover,
.wc-block-cart__continue-button:hover,
.wc-continue-shopping-button:hover,
.wc-block-components-button.wp-element-button.outline:hover{
  background: var(--dr-green-50) !important;
}

/* Acessibilidade: foco visível e consistente */
.dr-btn-outline:focus-visible,
.wc-block-components-button:focus-visible,
.convite-gift-link:focus-visible{
  outline: 2px solid var(--dr-green);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(20,83,45,.15);
}

/* Paleta do tema */
:root{
  --dr-green: #14532d;        /* verde escuro */
  --dr-green-700: #0f3d23;    /* hover */
  --dr-on-green: #ffffff;
}

/* Topbar acima da logo, alinhada à direita do container */
.convite-container{ position: relative; }
.convite-topbar{
  display:flex; justify-content:flex-end; align-items:center;
  padding: 10px 12px 0;       /* espaço simples acima da logo */
}

/* Botão de presente grande */
.gift-btn{
  position: relative;
  display:inline-flex; align-items:center; justify-content:center;
  width: 56px; height: 56px; border-radius:14px;
  background: var(--dr-green); color: var(--dr-on-green); text-decoration:none;
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
@media (min-width: 768px){
  .gift-btn{ width: 64px; height: 64px; border-radius:16px; }
}

/* Ícone de presente visível */
.gift-ico{ width: 28px; height: 28px; fill: #fff; }
@media (min-width: 768px){ .gift-ico{ width: 32px; height: 32px; } }

/* Badge/contador (não quebra linha) */
.gift-count{
  position:absolute; right:-8px; top:-8px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background:#e11; color:#fff;
  font:600 12px/22px system-ui,-apple-system,Segoe UI,Roboto,Arial;
  text-align:center;
}

/* Hover/foco */
.gift-btn:hover{ background: var(--dr-green-700); }
.gift-btn:focus-visible{ outline:2px solid var(--dr-green); outline-offset:2px; }

/* Se você tiver algum CSS antigo do ícone anterior, neutraliza para não conflitar */
.convite-gift-link, .convite-gift-count { display:none !important; }

/* === Presente compacto (acessível) === */
.convite-topbar{ padding-top:6px; }         /* menos espaço acima da logo */
.gift-btn{ width:44px; height:44px; border-radius:10px; }  /* antes 56–64px */
.gift-ico{ width:20px; height:20px; }       /* antes 28–32px */
.gift-count{
  right:-6px; top:-6px;
  min-width:18px; height:18px; padding:0 5px;
  font:600 11px/18px system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* Se quiser ainda menor (mini), troque pelas linhas abaixo
.gift-btn{ width:36px; height:36px; border-radius:8px; }
.gift-ico{ width:18px; height:18px; }
.gift-count{ right:-5px; top:-5px; min-width:16px; height:16px; font:600 10px/16px system-ui,-apple-system,Segoe UI,Roboto,Arial; }
*/
:root{
  --dr-green: #14532d;     /* verde escuro do tema */
  --dr-green-700: #0f3d23; /* hover */
  --icon-size: 44px;       /* tamanho do botão */
  --icon-gap: 10px;        /* espaço entre os ícones */
}

/* Faixa acima da logo */
.convite-container{ position:relative; }
.convite-topbar{
  display:flex; justify-content:flex-end; gap: var(--icon-gap);
  padding: 6px 12px 0;     /* topo, direita/esquerda, sem empurrar a logo */
}

/* Botões dos ícones (compartilham estilo) */
.icon-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:var(--icon-size); height:var(--icon-size); border-radius:10px;
  background:var(--dr-green); color:#fff; text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.14);
}
.icon-btn:hover{ background:var(--dr-green-700); }
.icon-btn:focus-visible{ outline:2px solid var(--dr-green); outline-offset:2px; }

/* SVG */
.icon-ico{ width:20px; height:20px; fill:#fff; }

/* Badge do carrinho */
.icon-badge{
  position:absolute; right:-6px; top:-6px;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:#e11; color:#fff; font:600 11px/18px system-ui,-apple-system,Segoe UI,Roboto,Arial; text-align:center;
}
.icon-badge[hidden]{ display:none !important; }

/* Se existir CSS antigo de .convite-gift-link/.gift-btn, esconda para evitar conflito */
.convite-gift-link{ display:none !important; }

/* Mensagem de ajuda */
.form-hint {
  color: #6b7280;
  font-size: 0.85rem;
  margin-top: 5px;
  padding-left: 5px;
  font-style: italic;
  line-height: 1.4;
}