@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Parisienne&family=Dancing+Script:wght@400;700&family=Love+Light&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; }
body { background: #fafafa; color: #333; overflow-x: hidden; }

/* --- INTRODUÇÃO (HERO) GERAL --- */
#intro { position: relative; height: 100vh; width: 100%; overflow: hidden; background: #000; }

/* FOTOS DE FUNDO (PC e Mobile) */
#introFotos { display: flex; width: 100%; height: 100%; position: absolute; inset: 0; }
.foto { flex: 1; background-size: cover; background-position: center; transition: 0.6s; opacity: 0.7; }

/* Configuração Padrão (Mobile First) */
#desktop-hero { display: none; } /* Esconde texto de PC no celular */
#introVideo { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: 20; }
#mobile-video-container { position: absolute; inset: 0; z-index: 20; background: black; }

/* Countdown (Mobile) */
#countdown { position: absolute; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); }
#countdown.hidden { display: none; }
.countdown-box { background: rgba(0, 0, 0, 0.45); padding: 30px; border-radius: 20px; color: white; text-align: center; max-width: 400px; backdrop-filter: blur(4px); }
.countdown-box h2 { font-family: 'Parisienne'; font-size: 2.1rem; }
#timer { font-family: 'Love Light'; font-size: 3.5rem; }

/* --- ESTILOS RESPONSIVOS PARA PC (Telas maiores que 768px) --- */
@media (min-width: 768px) {
    /* Esconde elementos mobile */
    #mobile-video-container { display: none !important; }
    #countdown { display: none !important; }
    
    /* Mostra elementos Desktop */
    #desktop-hero {
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        position: absolute; inset: 0; z-index: 30;
        text-align: center; color: white;
        text-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }
    
    .hero-title { font-family: 'Parisienne', cursive; font-size: 6rem; margin-bottom: 10px; }
    .hero-date { font-family: 'Poppins', sans-serif; font-size: 2rem; letter-spacing: 5px; font-weight: 300; border-top: 1px solid white; border-bottom: 1px solid white; padding: 10px 30px; }

    /* Ajuste das fotos de fundo para ficarem mais bonitas no PC */
    .foto { opacity: 1; filter: brightness(0.6); }
    .foto:hover { filter: brightness(0.8); flex: 1.5; } /* Efeito legal ao passar o mouse */

    /* GALERIA MAIOR NO PC */
    .carrosel-main { max-width: 800px !important; height: 500px; object-fit: cover; }
    .thumbnails { gap: 20px; }
    .thumb { width: 100px; height: 100px; }
    
    /* LOJA no PC */
    .store-grid { justify-content: center; flex-wrap: wrap; overflow: visible; }
}

/* --- DEMAIS SEÇÕES (Comuns) --- */
.frase-bg { background: url("/static/img/ft5.png") center/cover; padding: 60px 20px; text-align: center; color: white; position: relative; }
.frase-bg::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.frase-texto { position: relative; font-family: "Dancing Script"; font-size: 1.5rem; }
@media(min-width: 768px) { .frase-texto { font-size: 2.2rem; } }

/* GALERIA */
#galeria { padding: 30px 0 60px 0; background-color: #fafafa; }
.memorias { font-family: 'Parisienne', cursive; font-size: 2.8rem; color: #4a5d23; text-align: center; margin-top: 40px; margin-bottom: 30px; position: relative; }
.memorias::after { content: ""; display: block; width: 60px; height: 2px; background: #7b8f52; margin: 10px auto 0; opacity: 0.6; }
.carrosel-main { width: 100%; max-width: 450px; border-radius: 12px; display: block; margin: 0 auto; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: 0.3s; }
.thumbnails { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }
.thumb { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; cursor: pointer; opacity: 0.5; transition: 0.3s; }
.thumb.active { opacity: 1; border: 2px solid #7b8f52; transform: scale(1.1); }

/* LOJA */
.loja-section { padding: 40px 20px; text-align: center; }
.store-grid { display: flex; gap: 20px; overflow-x: auto; padding: 20px; }
.store-item { background: white; width: 190px; flex: 0 0 auto; padding: 15px; border-radius: 18px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); text-align: center; transition: 0.3s; }
.store-item:hover { transform: translateY(-5px); }
.store-item img { width: 100%; height: 140px; object-fit: cover; border-radius: 12px; }
.store-item h4 { margin: 10px 0; font-size: 0.9rem; }
.store-item .price { color: #7b8f52; font-weight: bold; margin-bottom: 10px; }
.store-item button { background: #7b8f52; color: white; border: none; padding: 10px; border-radius: 8px; width: 100%; cursor: pointer; font-weight: 600; }

/* COMENTÁRIOS */
.comentarios { padding: 50px 20px; background: #f4f4f0; text-align: center; }
.comentario-item { background: white; padding: 15px; border-radius: 12px; margin-bottom: 10px; text-align: left; border-left: 4px solid #7b8f52; max-width: 600px; margin: 0 auto 10px; }

/* CARRINHO */
#floating-cart { position: fixed; bottom: 30px; right: 30px; background: #2f855a; width: 60px; height: 60px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; z-index: 999; box-shadow: 0 8px 20px rgba(0,0,0,0.2); transition: transform 0.2s ease; }
#cart-count { position: absolute; top: 0; right: 0; background: #ef4444; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; display: flex; align-items: center; justify-content: center; border: 2px solid white; }
.cart-pop { animation: pop 0.3s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }

.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.modal-content { background: white; padding: 25px; border-radius: 20px; width: 90%; max-width: 400px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.close-btn { background: none; border: none; font-size: 25px; cursor: pointer; color: #999; }
.cart-item { display: flex; justify-content: space-between; align-items: center; background: #f8f9fa; padding: 10px; border-radius: 10px; margin-bottom: 8px; }
.qty-controls { display: flex; align-items: center; gap: 8px; background: white; padding: 3px 8px; border-radius: 5px; border: 1px solid #ddd; }
.qty-controls button { border: none; background: none; cursor: pointer; font-weight: bold; color: #2f855a; }
.cart-total-container { margin-top: 15px; padding-top: 10px; border-top: 2px dashed #eee; display: flex; justify-content: space-between; font-weight: bold; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.btn { padding: 12px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; }
.btn.primary { background: #2f855a; color: white; }
.btn.danger { background: #fee2e2; color: #ef4444; }
.btn-text { background: none; border: none; color: #666; cursor: pointer; }
.form-input { width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 8px; }

/* FOTOS DE FUNDO (PC e Mobile) */
#introFotos { display: flex; width: 100%; height: 100%; position: absolute; inset: 0; }
.foto { flex: 1; background-size: cover; background-position: center; transition: 0.6s; opacity: 0.7; }

/* ADICIONE AQUI AS URLS DAS SUAS FOTOS */
.foto1 { background-image: url('/static/img/direita_casal.jpg'); }
.foto2 { background-image: url('/static/img/casal_prin.jpg'); }
.foto3 { background-image: url('/static/img/esquerda_casal.jpg'); }

.btn-loja-externa {
    display: inline-block;
    background: #4a5d23; /* Tom de verde mais escuro/elegante */
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 8px;
    width: 100%;
    font-weight: 600;
    margin-top: 10px;
    transition: background 0.3s;
}

.btn-loja-externa:hover {
    background: #6b7e45;
}

/* Ajuste para descrições pequenas nos cards */
.store-item p {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
    min-height: 40px; /* Mantém o alinhamento dos botões */
}