/* ==========================================================================
   Aline & Victor — estilo do "Template 2" (Floral / Rosé Botânico) da
   Descomplica Noivos, aplicado POR CIMA do site.css (carregado depois dele no
   layout). Não muda a estrutura do site: mesmas seções, IDs e JS — só o
   visual. Cor de acento, cor de fundo e fonte continuam vindo de
   Configurações (--accent-color/--bg-color/--font-*, setadas inline pelo
   layout), então nada aqui fixa cor da marca do casal.
   ========================================================================== */

:root {
    --text-muted: #7d766c;
    --placeholder-bg: color-mix(in srgb, var(--accent-color) 14%, #fff);
    --floral-radius: 20px;
    --floral-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

/* ---------- Menu: flutua transparente por cima da foto de capa ---------- */
.navbar-site {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    padding: 1.1rem 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}
.navbar-site .navbar-brand img { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35)); }
.navbar-site .nav-link { color: #fff !important; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.navbar-site .nav-link::after { background-color: #fff; }
.navbar-site .navbar-toggler-icon { filter: invert(1) brightness(2) drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); }
@media (max-width: 991.98px) {
    .navbar-site .navbar-logo {
        height: 74px;
    }
    /* Menu ABERTO no celular precisa de fundo sólido — texto branco direto na
       foto só funciona com a barra fechada. */
    .navbar-site .navbar-collapse.show,
    .navbar-site .navbar-collapse.collapsing {
        background: var(--bg-color);
        margin-top: .6rem;
        border-radius: 14px;
        padding: .75rem 1rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    }
    .navbar-site .navbar-collapse.show .nav-link,
    .navbar-site .navbar-collapse.collapsing .nav-link { color: var(--text-nav) !important; text-shadow: none; }
    .navbar-site .navbar-collapse .nav-link::after { background-color: var(--accent-color); }
}

/* ---------- Capa: foto gigante de ponta a ponta + cartão com monograma ---------- */
.hero-section.hero-floral { padding: 0 0 1rem; text-align: center; position: relative; }

.hero-banner { width: 100%; height: 72vh; min-height: 420px; max-height: 760px; overflow: hidden; position: relative; }
.hero-banner::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 160px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .4), transparent);
    z-index: 5; pointer-events: none;
}
.hero-banner-img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.hero-banner-img.hero-banner-fade {
    position: absolute; inset: 0;
    opacity: 0;
    animation-name: heroBannerFade;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes heroBannerFade {
    0% { opacity: 0; }
    8% { opacity: 1; }
    30% { opacity: 1; }
    38% { opacity: 0; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-banner-img.hero-banner-fade { animation: none; opacity: 0; }
    .hero-banner-img.hero-banner-fade:first-child { opacity: 1; }
}
.hero-banner-placeholder { width: 100%; height: 100%; background: var(--placeholder-bg); display: flex; align-items: center; justify-content: center; }
.hero-banner-placeholder i { font-size: 4rem; color: var(--accent-color); opacity: .35; }

.hero-floral-card {
    background: var(--bg-color);
    max-width: 680px; margin: -4.5rem auto 0; padding: 2.25rem 1.75rem .5rem;
    position: relative; z-index: 2; border-radius: 28px 28px 0 0;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .06);
}

.monogram-badge {
    width: 84px; height: 84px; margin: 0 auto 1.25rem; border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    font-family: var(--font-display); font-style: italic; font-weight: 700;
    font-size: 1.5rem; color: var(--accent-color);
}
.monogram-badge i { font-size: .85rem; }

.hero-floral .names-title {
    font-size: clamp(2.6rem, 7vw, 4.25rem);
    color: var(--accent-color);
    letter-spacing: 1px;
    margin: 0 0 .75rem;
}
.hero-floral .wedding-meta {
    display: inline-block;
    padding: .4rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    border-radius: 999px;
    letter-spacing: 1.5px;
    font-size: 1.05rem;
    color: var(--accent-color);
    margin: .25rem auto 1.1rem;
}
.hero-floral .wedding-address { margin-top: 0; margin-bottom: 1.5rem; }

@media (max-width: 767.98px) {
    .hero-banner { height: 52vh; min-height: 320px; }
    .hero-floral-card { margin-top: -3.25rem; padding: 1.75rem 1.1rem .5rem; border-radius: 22px 22px 0 0; }
    .monogram-badge { width: 68px; height: 68px; font-size: 1.2rem; }
    .hero-floral .names-title { font-size: 2.4rem; }
    .hero-floral .wedding-meta { font-size: .95rem; }
}

/* ---------- Arabescos entre seções ---------- */
.section-flourish { display: flex; align-items: center; justify-content: center; gap: 1rem; max-width: 220px; margin: 0 auto 1rem; }
.section-flourish span { flex: 1; height: 1px; background: color-mix(in srgb, var(--accent-color) 30%, transparent); }
.section-flourish i { color: var(--accent-color); font-size: 1.1rem; opacity: .85; }
.hero-floral .section-flourish { margin-bottom: 0; }

.section-title { font-style: italic; font-weight: 600; letter-spacing: .5px; }

/* ---------- Contagem regressiva: faixa suave em vez de bloco sólido ---------- */
.countdown-section {
    background: color-mix(in srgb, var(--accent-color) 7%, var(--bg-color));
    color: var(--text-main);
    padding: 3.5rem 1rem;
}
.countdown-title { color: var(--accent-color); font-weight: 600; margin-bottom: 1.75rem; }
.countdown-section .countdown-title.w-100 { color: var(--accent-color); }
.countdown-box { border-radius: 16px; box-shadow: var(--floral-shadow); min-width: 100px; padding: 1.25rem 1.5rem; }
.countdown-box .label { font-family: var(--font-body); font-weight: 600; font-size: .85rem; letter-spacing: 1px; }
.countdown-date {
    display: inline-block;
    color: var(--accent-color);
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    padding: .35rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    border-radius: 999px;
}
.countdown-description { color: var(--text-muted); }

/* ---------- Presentes ---------- */
.gift-search-section { background: #fff; border-radius: var(--floral-radius); box-shadow: var(--floral-shadow); }
.gift-card { border: none; border-radius: 18px; box-shadow: var(--floral-shadow); overflow: hidden; transition: box-shadow .3s ease, transform .3s ease; }
.gift-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .1); transform: translateY(-3px); }

.btn-accent { border-radius: 999px; padding: .6rem 1.6rem; letter-spacing: .5px; }
.btn-load-more { border-radius: 999px; }
.form-control-site { border-radius: 12px; background: #fff; }

.empty-hint { border-radius: var(--floral-radius); box-shadow: var(--floral-shadow); }

/* ---------- Cartões (RSVP, mural, lua de mel) ---------- */
.rsvp-card, .mural-form-card, .lua-card {
    background: #fff;
    border: none;
    border-radius: var(--floral-radius);
    box-shadow: var(--floral-shadow);
}
.mural-card { background: #fff; border: none; border-radius: 18px; box-shadow: var(--floral-shadow); }
.mural-avatar { background: var(--accent-color); color: #fff; }
.lua-btn { border-radius: 999px; }

/* ---------- Galerias ---------- */
.casal-carousel { border-radius: 22px; }
#traje img { border-radius: 16px !important; box-shadow: var(--floral-shadow); }

/* ---------- Modal de contribuição ---------- */
.modal-payment .modal-content { border-radius: 22px; }
.quick-amount-btn { border-radius: 12px; }

@media (max-width: 767.98px) {
    .countdown-section { padding: 2.5rem 1rem; }
    .countdown-box { min-width: 72px; padding: .85rem 1rem; }
    .casal-carousel { border-radius: 14px; }
}