@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@300;400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --primary:#CDB4DB;
    --primary-deep:#b089c4;
    --primary-contrast: #fff;
    --muted:#7b6b86;
    --surface: #f6f2fb;
    --text:#5f4f69;
    --border:#e4d9ec;
    --danger:#9a2b45;
    --ok:#2f6b4f;
    --ink:#3d3348;
    --display: 'Cormorant Garamond', Georgia, serif;
}

body{
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    color:var(--muted);
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(205,180,219,0.35), transparent 55%),
        radial-gradient(900px 500px at 100% 20%, rgba(230,210,240,0.4), transparent 50%),
        linear-gradient(180deg, #fbf8fd 0%, #f4eef8 45%, #f7f4fb 100%);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.scroll-progress{
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 2000;
    background: linear-gradient(90deg, #d8b4e2, #9b7aad);
    transform-origin: left;
    pointer-events: none;
}

.site-header{
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(251,248,253,0.72);
}

/* Global link styles */
a{
    color: inherit;
    text-decoration: none;
    border-bottom: none;
    transition: color .15s ease, transform .12s ease;
}
a:hover, a:focus{
    color: var(--primary);
    text-decoration: none;
    transform: translateY(-2px);
}
a:focus{
    outline: 2px solid rgba(205,180,219,0.28);
    outline-offset: 3px;
}

nav{
    background: transparent;
    padding:1rem;
}

.navbar{
    padding: 0;
}

.navbar .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    background: rgba(205,180,219,0.12);
    padding:.5rem .75rem;
    border-radius:12px;
    box-shadow:0 6px 20px rgba(109,89,123,0.08);
    backdrop-filter: blur(4px);
}
.navbar .logo{
    color:var(--muted);
    text-decoration:none;
    font-weight:700;
    font-size:1.6rem;
    font-family: 'Great Vibes', cursive;
    letter-spacing:0.5px
}

.nav-links{ display:none; gap:1rem; flex-direction:column; width:100%; margin-top:.5rem; }
.nav-links a{
    color:var(--muted);
    text-decoration:none;
    padding:.5rem .75rem;
    display:block;
    border-radius:10px;
    transition: all .18s ease;
    background: transparent;
    font-weight:500;
    font-size:0.95rem
}
.nav-links a:hover,
.nav-links a.is-active{
    background: rgba(205,180,219,0.14);
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(0,0,0,0.04)
}
.nav-links a.is-active{ font-weight: 700; color: #665673; }

#nav-toggle{
    background:transparent;
    border:1px solid rgba(0,0,0,0.06);
    color:var(--muted);
    font-size:1.25rem;
    padding:.35rem .6rem;
    border-radius:8px;
    cursor:pointer;
}

@media(min-width:768px){
    .nav-links{ display:flex; flex-direction:row; width:auto; margin:0 }
    .nav-links a{ padding:.45rem 0.9rem; font-size:1rem }
    #nav-toggle{ display:none }
}

@media(min-width:1100px){
    .navbar .logo{ font-size:1.5rem }
    .nav-links a{ font-size:1.05rem }
}

.nav-links.open{ display:flex }

.btn{
    background:var(--primary);
    color:var(--primary-contrast);
    border:none;
    display:inline-block;
    padding:.75rem 1.25rem;
    border-radius:10px;
    text-decoration:none;
    cursor:pointer;
    font: inherit;
    font-weight: 600;
    transition: opacity .15s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ opacity:0.95; transform: translateY(-2px); }
.btn:disabled{
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}
.btn-glow{
    box-shadow: 0 10px 28px rgba(157, 120, 176, 0.28);
}
.btn-ghost{
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.55);
}
.btn-ghost:hover{
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.btn-secondary{
    background: rgba(255,255,255,0.9);
    color: #665673;
    border:1px solid rgba(205,180,219,0.45)
}
.btn-secondary:hover{
    background: rgba(255,255,255,0.98);
    color: #584867
}

.container{ max-width:1100px; margin:0 auto; padding:3rem 1rem }

/* Confirmar presença */
.confirm-page{ padding-top: 2rem; padding-bottom: 3rem; }
.confirm-intro{
    text-align:center;
    margin-bottom:1.5rem;
}
.confirm-intro h1{
    color: var(--text);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    margin-bottom: .5rem;
}
.confirm-intro p{
    max-width: 36ch;
    margin: 0 auto;
    color: var(--muted);
}

.confirm-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:1rem;
    align-items:start;
    margin-top:1rem
}
.confirm-grid .side-card{ display:none }
.confirm-grid .side-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,0.06)
}

.rsvp-panel{
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(205,180,219,0.35);
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 16px 40px rgba(109,89,123,0.08);
}

.rsvp-form{ display:grid; gap:1rem; margin:0 }
.rsvp-form .field{ display:grid; gap:.35rem }
.rsvp-form label{
    font-size: .92rem;
    font-weight: 600;
    color: var(--text);
}
.rsvp-form .optional{
    font-weight: 400;
    color: var(--muted);
    font-size: .85rem;
}
.rsvp-form .field-hint{
    margin: 0;
    font-size: .82rem;
    color: var(--muted);
}
.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea{
    padding:.75rem .85rem;
    border-radius:8px;
    border:1px solid var(--border);
    width:100%;
    box-sizing:border-box;
    font: inherit;
    color: var(--text);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus{
    outline: none;
    border-color: rgba(205,180,219,0.9);
    box-shadow: 0 0 0 3px rgba(205,180,219,0.25);
}
.rsvp-form input[type="number"]{
    max-width: 120px;
}
.rsvp-actions{
    text-align:center;
    margin-top:.25rem;
}
.rsvp-actions .btn{ min-width: 200px; width: 100%; max-width: 280px; }

.rsvp-status{
    text-align:center;
    margin-top:1rem;
    min-height: 1.25em;
    font-weight: 600;
}
.rsvp-status.is-pending{ color: var(--muted); }
.rsvp-status.is-error{ color: var(--danger); }
.rsvp-status.is-ok{ color: var(--ok); }

.rsvp-success{
    text-align: center;
    padding: 1rem .5rem;
    display: grid;
    gap: .75rem;
    justify-items: center;
}
.rsvp-success[hidden]{
    display: none !important;
}
.rsvp-form[hidden]{
    display: none !important;
}
.rsvp-success h2{
    color: var(--ok);
    font-size: 1.35rem;
}
.rsvp-success p{
    color: var(--text);
    max-width: 34ch;
    line-height: 1.6;
}

@media(min-width:900px){
    .confirm-grid{ grid-template-columns: 200px 1fr 200px; gap: 1.25rem; align-items: stretch }
    .confirm-grid .side-card{ display:block }
    .confirm-grid .side-card img{ height:100%; min-height: 420px }
    .rsvp-panel{ max-width: none }
}

/* Hero */
.hero{
    color:white;
    text-align:center;
    padding: clamp(4.5rem, 12vw, 8rem) 1rem;
    background-size:cover;
    background-position:center;
    background-image: linear-gradient(rgba(99,66,140,0.28), rgba(99,66,140,0.10)), url('../imgs/banner.png');
}

.ballet{
    font-family: 'Ballet', cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.hero h1{
    font-size: clamp(2.4rem, 8vw, 4rem);
    letter-spacing:2px;
    margin-bottom:0.5rem;
}
.hero h1.ballet{
    font-size: clamp(3rem, 10vw, 5.6rem);
    font-weight:700;
    letter-spacing:2px;
    line-height: 1.05;
}
.hero p.lead{
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    margin-bottom:1.25rem;
    opacity:0.95
}
.buttons{
    margin-top:1rem;
    display:flex;
    gap:.75rem;
    justify-content:center;
    flex-wrap:wrap
}
#countdown{
    margin-top:1.25rem;
    font-size: clamp(0.95rem, 2.5vw, 1.125rem);
    font-weight:600;
    letter-spacing: 0.02em;
}

.wedding-cta-open{ min-width: 170px }
.wedding-cta-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:1rem;
    background:rgba(45,31,57,0.56);
    backdrop-filter: blur(10px);
    z-index:1300
}
.wedding-cta-card{
    width:min(92vw, 560px);
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,242,251,0.94));
    border:1px solid rgba(205,180,219,0.35);
    border-radius:28px;
    padding:1.5rem;
    box-shadow:0 30px 70px rgba(58, 40, 70, 0.28);
    position:relative;
    text-align:center;
    animation: ctaPop .22s ease
}
.wedding-cta-close{
    position:absolute;
    top:.75rem;
    right:.75rem;
    width:2.25rem;
    height:2.25rem;
    border:none;
    border-radius:999px;
    background: rgba(255,255,255,0.9);
    color:#705f7c;
    font-size:1.5rem;
    cursor:pointer;
    box-shadow:0 8px 16px rgba(0,0,0,0.08)
}
.wedding-cta-kicker{
    display:inline-flex;
    margin:0 0 .75rem;
    padding:.3rem .75rem;
    border-radius:999px;
    background:rgba(205,180,219,0.18);
    color:#6b5a78;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase
}
.wedding-cta-card h2{
    color:#5f4f69;
    font-size:clamp(1.6rem, 4vw, 2.4rem);
    line-height:1.05;
    margin-bottom:.75rem
}
.wedding-cta-text{
    color:#73627f;
    line-height:1.7;
    max-width: 44ch;
    margin:0 auto 1.25rem
}
.wedding-cta-actions{
    display:flex;
    gap:.75rem;
    justify-content:center;
    flex-wrap:wrap
}
.wedding-cta-actions .btn{ min-width: 150px }

.gift-cta-shell{
    display:flex;
    gap:1rem;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    margin:1rem 0 1.5rem;
    padding:1rem 1.1rem;
    border-radius:20px;
    border:1px solid rgba(205,180,219,0.32);
    background:linear-gradient(135deg, rgba(255,255,255,0.82), rgba(246,242,251,0.9));
    box-shadow:0 18px 40px rgba(109,89,123,0.08)
}
.gift-cta-copy{ display:grid; gap:.35rem; max-width: 760px }
.gift-cta-kicker{
    margin:0;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#907fa0
}
.gift-cta-copy h2{
    color:#5f4f69;
    font-size:clamp(1.35rem, 3vw, 1.85rem);
    margin:0
}
.gift-cta-copy p{ margin:0; color:#73627f; line-height:1.6 }
.gift-cta-actions{ flex-shrink:0 }

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
    flex-wrap:wrap;
    margin-bottom: 1rem;
}
.page-header h1{
    color: var(--text);
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin: 0 0 .35rem;
}
.page-lead{
    margin: 0;
    color: var(--muted);
}
.gifts-empty{
    text-align: center;
    color: var(--muted);
    padding: 2rem 1rem;
    background: rgba(255,255,255,0.6);
    border-radius: 14px;
    border: 1px dashed rgba(205,180,219,0.5);
}

.couple{ display:flex; flex-direction:column; gap:2rem; align-items:center }
.couple .cards{ display:flex; gap:2rem; flex-direction:column; width:100% }
.card{
    background:var(--surface);
    padding:1.25rem;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    text-align:center;
    display:flex;
    flex-direction:column
}
.couple .cards > .card{ flex:1; min-width:0 }
.card img{
    width:100%;
    height:320px;
    display:block;
    border-radius:6px;
    object-fit:contain;
    object-position:center;
    background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,242,251,0.95));
    padding:.5rem;
    box-sizing:border-box;
    box-shadow:inset 0 0 0 1px rgba(205,180,219,0.22)
}

.card h3{ margin-top:.75rem; margin-bottom:.5rem; text-align:center; color:var(--muted) }
.card p{ text-align:center; color:var(--muted) }
@media(min-width:800px){ .couple .cards{ flex-direction:row } }

.story{ background:rgba(255,255,255,0.45); padding:2rem 0 }
.section-title{
    text-align:center;
    margin-bottom:1rem;
    color: var(--text);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem }
@media(min-width:800px){ .gallery{ grid-template-columns:repeat(4,1fr) } }
.gallery img{
    width:100%;
    height:160px;
    object-fit:contain;
    object-position:center;
    background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,242,251,0.95));
    padding:.35rem;
    box-sizing:border-box;
    box-shadow:inset 0 0 0 1px rgba(205,180,219,0.18);
    border-radius: 8px;
}

footer{ text-align:center; padding:2rem 1rem; color:var(--muted) }

/* Map */
.map{ width:100%; max-width:1100px; margin:2rem auto; }
.map iframe{
    width:100%;
    height: min(60vw, 420px);
    min-height: 240px;
    border:0;
    border-radius:10px
}
.venue-details{
    text-align:center;
    margin-top:1rem;
    display: grid;
    gap: .35rem;
}
.venue-details strong{ color: var(--text); font-size: 1.1rem; }
.venue-actions{
    margin-top: 1rem;
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Presents grid */
.gifts { display:grid; grid-template-columns:repeat(1,1fr); gap:1rem; }
.gift-card{
    background:var(--surface);
    padding:1rem;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    display:flex;
    flex-direction:column;
    gap:0.75rem;
    align-items:stretch;
    transition:transform .16s ease, box-shadow .16s ease;
    position:relative;
    overflow:hidden;
}
.gift-card img{ width:100%; height:200px; object-fit:cover; border-radius:8px }
.gift-info h3{ margin:0 0 .25rem 0; font-size:1.1rem; text-align:center }
.gift-info p{ color:#555; font-size:.95rem; margin:0; text-align:left }
.gift-actions{ margin-top:.5rem; display:flex; gap:.5rem; justify-content:center }

.gift-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 12px 30px rgba(0,0,0,0.10) }
.pagination{ display:flex; gap:.5rem; justify-content:center; margin-top:1rem; flex-wrap: wrap }
.pagination button{
    background:transparent;
    border:1px solid rgba(0,0,0,0.06);
    padding:.4rem .6rem;
    border-radius:6px;
    cursor:pointer;
}

@media(min-width:600px){ .gifts{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:900px){ .gifts{ grid-template-columns:repeat(3,1fr) } }

.gift-card .reserved-badge{
    position:absolute;
    top:10px;
    right:10px;
    background:rgba(139,92,255,0.95);
    color:white;
    padding:6px 10px;
    border-radius:6px;
    font-weight:700;
    font-size:.85rem;
    z-index:5
}
.gift-card.reserved::after{
    content: 'Reservado';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(-30deg);
    font-size:2.8rem;
    color: rgba(139,92,255,0.32);
    font-weight:800;
    pointer-events:none;
    z-index:3;
    text-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

/* Modal */
.modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.45);
    z-index:1000;
    padding: 1rem;
}
.modal .modal-content{
    background:var(--surface);
    padding:1rem 1.25rem;
    border-radius:8px;
    width:100%;
    max-width:480px
}
#photo-modal .modal-content,
.photo-modal-content{
    position:relative;
    max-width:min(92vw, 900px);
    width:92vw;
    padding:1rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.75rem
}
.photo-modal-content img{
    display:block;
    max-width:100%;
    max-height:80vh;
    width:auto;
    height:auto;
    border-radius:10px;
    background:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,0.18)
}
.photo-modal-content p{ margin:0; color:var(--muted); text-align:center; font-size:.95rem }
.photo-modal-close{
    position:absolute;
    top:.5rem;
    right:.5rem;
    width:2.25rem;
    height:2.25rem;
    border:none;
    border-radius:999px;
    background:rgba(255,255,255,0.92);
    color:var(--muted);
    font-size:1.6rem;
    line-height:1;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,0.12)
}
.photo-modal-close:hover{ color:var(--primary); transform:none }

.admin-item{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.5rem; border-radius:8px }
.admin-item + .admin-item{ margin-top:.35rem }
.admin-item .left{ display:flex; gap:1rem; align-items:center }
.drag-handle{ cursor:grab; padding:.45rem .6rem; border-radius:6px; background:rgba(205,180,219,0.08); color:var(--muted); font-weight:700 }
.admin-item.dragging{ opacity:0.5 }
.admin-item.drag-over{ outline:2px dashed rgba(139,92,255,0.45); box-shadow:0 6px 18px rgba(139,92,255,0.04) }
.modal .modal-actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem; flex-wrap: wrap }
.modal input[type="text"], .modal input[type="email"]{ width:100%; padding:.6rem; border-radius:6px; border:1px solid #ddd }

.admin-toolbar{ display:flex; gap:.75rem; justify-content:space-between; align-items:center; flex-wrap:wrap; margin:0 0 1rem }
.admin-toolbar .admin-meta{ color:var(--muted); font-size:.95rem }
.admin-actions{ display:flex; gap:.5rem; flex-wrap:wrap }
.admin-btn{ border:none; border-radius:8px; padding:.45rem .75rem; cursor:pointer; font-weight:600 }
.admin-btn.edit{ background:rgba(205,180,219,0.18); color:var(--muted) }
.admin-btn.delete{ background:rgba(255,99,132,0.12); color:#9a2b45 }
.admin-btn.refresh{ background:var(--primary); color:var(--primary-contrast) }
.admin-btn:hover{ transform:translateY(-1px) }
.admin-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); z-index:1200; padding:1rem }
.admin-modal-content{ background:var(--surface); width:min(92vw, 560px); border-radius:14px; padding:1rem; box-shadow:0 16px 45px rgba(0,0,0,0.2); position:relative }
.admin-modal-content h3{ margin:0 0 .75rem }
.admin-modal-close{ position:absolute; top:.75rem; right:.75rem; border:none; background:transparent; font-size:1.6rem; color:var(--muted); cursor:pointer }
.admin-modal form{ display:grid; gap:.75rem }
.admin-modal input, .admin-modal select, .admin-modal textarea{ width:100%; padding:.7rem; border-radius:8px; border:1px solid #ddd; font:inherit }
.admin-modal .modal-grid{ display:grid; gap:.75rem }
.admin-modal .modal-actions{ display:flex; gap:.5rem; justify-content:flex-end; flex-wrap:wrap; margin-top:.25rem }

.card img, .gallery img, .gift-card img { transition: transform .28s ease, box-shadow .28s ease; }
.card img:hover, .gallery img:hover, .gift-card img:hover { transform: scale(1.04) translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,0.12); }

.reveal{ opacity:0; transform:translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none }

@keyframes ctaPop{
    from{ opacity: 0; transform: translateY(16px) scale(0.97); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
}

@media(max-width:767px){
    .nav-inner{ position:relative }
    .nav-links{
        position:absolute;
        top:calc(100% + 8px);
        left:50%;
        transform:translateX(-50%);
        width:calc(100% - 2rem);
        background:rgba(246,242,251,0.98);
        padding:.6rem;
        border-radius:10px;
        box-shadow:0 10px 30px rgba(0,0,0,0.08);
        display:none;
        z-index:60
    }
    .nav-links.open{ display:flex; flex-direction:column; gap:.25rem }
    .nav-links a{ padding:.6rem .8rem; background:transparent }
    #nav-toggle{ z-index:70 }
}

@media (prefers-reduced-motion: reduce){
    .card img, .gallery img, .gift-card img { transition: none !important }
    .reveal{ transition: none !important; opacity: 1; transform: none }
    .wedding-cta-card{ animation: none }
}

@media(max-width:600px){
    .card img{ height:220px }
    .gallery img{ height:120px }
    .hero{ padding:4rem 1rem }
    .container{ padding:1.5rem 1rem }
    .cards{ gap:1rem }
    .buttons{ flex-direction:column; align-items: stretch }
    .buttons .btn{ width: 100%; text-align: center }
    .wedding-cta-card{ padding:1.25rem 1rem }
    .gift-cta-shell{ padding:.9rem }
    .gift-cta-actions{ width:100% }
    .gift-cta-actions .btn,
    .wedding-cta-actions .btn{ width:100% }
    .navbar .logo{ font-size:1.85rem }
    .rsvp-panel{ padding: 1rem }
    .map iframe{ height: 260px }
}