/*=====================================
    RSVP
======================================*/

.rsvp{

    position:relative;

    padding:60px 25px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #FCFAF6
        );

    overflow:hidden;

}


/*=====================================
    DECORAÇÃO
======================================*/

.rsvp-decoration{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.rsvp-decoration::before,
.rsvp-decoration::after{

    content:"❤";

    position:absolute;

    color:rgba(201,165,106,.08);

    font-size:170px;

    animation:floatHearts 10s ease-in-out infinite;

}

.rsvp-decoration::before{

    top:120px;
    left:8%;

}

.rsvp-decoration::after{

    right:8%;
    bottom:120px;

    animation-delay:4s;

}


/*=====================================
    CONTAINER
======================================*/

.rsvp-container{

    position:relative;

    z-index:2;

    width:min(760px,92%);

    margin:auto;

    text-align:center;

}


/*=====================================
    BADGE
======================================*/

.rsvp-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 26px;

    border-radius:50px;

    background:#FFF7E8;

    color:#C9A56A;

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:600;

}


/*=====================================
    TITULO
======================================*/

.rsvp h2{

    margin:30px 0;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(42px,5vw,60px);

    color:#172033;

    font-weight:500;

    line-height:1.2;

}


/*=====================================
    TEXTO
======================================*/

.rsvp> .rsvp-container>p{

    max-width:650px;

    margin:0 auto 70px;

    font-size:20px;

    line-height:1.9;

    color:#667085;

}

.rsvp strong{

    color:#C9A56A;

}


/*=====================================
    CARD
======================================*/

.rsvp-card{

    position:relative;

    padding:60px;

    border-radius:34px;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    border:1px solid rgba(201,165,106,.12);

    box-shadow:

        0 30px 80px rgba(0,0,0,.08);

}

/*=====================================
    FORM
======================================*/

#rsvpForm{

    display:flex;

    flex-direction:column;

    gap:34px;

}


/*=====================================
    GROUP
======================================*/

.form-group{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.form-group label{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#9A7A45;

}


/*=====================================
    INPUTS
======================================*/

.form-group input,
.form-group textarea{

    width:100%;

    padding:20px 24px;

    border-radius:22px;

    border:1px solid rgba(201,165,106,.18);

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.98),

            rgba(252,250,247,.98)

        );

    font-size:16px;

    color:#172033;

    outline:none;

    transition:

        .35s ease;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.9),

        0 10px 25px rgba(0,0,0,.04);

}

.form-group textarea{

    min-height:180px;

    resize:vertical;

    line-height:1.9;

    font-family:inherit;

}

.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#A3AAB5;

}


/*=====================================
    INPUT HOVER
======================================*/

.form-group input:hover,
.form-group textarea:hover{

    border-color:#D4B170;

}


/*=====================================
    INPUT FOCUS
======================================*/

.form-group input:focus,
.form-group textarea:focus{

    transform:translateY(-3px);

    border-color:#C9A56A;

    background:#fff;

    box-shadow:

        0 0 0 5px rgba(201,165,106,.12),

        0 18px 35px rgba(0,0,0,.06);

}


/*=====================================
    SELECT
======================================*/

.select-wrapper{

    position:relative;

}

.select-wrapper select{

    width:100%;

    padding:20px 55px 20px 22px;

    border:1px solid rgba(201,165,106,.18);

    border-radius:22px;

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #fcfaf7
        );

    font-size:16px;

    color:#172033;

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    transition:.35s;

    outline:none;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.9),

        0 10px 25px rgba(0,0,0,.04);

}

.select-wrapper select:hover{

    border-color:#D4B170;

}

.select-wrapper select:focus{

    border-color:#C9A56A;

    transform:translateY(-2px);

    box-shadow:

        0 0 0 5px rgba(201,165,106,.12),

        0 18px 35px rgba(0,0,0,.06);

}

.select-arrow{

    position:absolute;

    top:50%;

    right:22px;

    transform:translateY(-50%);

    pointer-events:none;

    color:#C9A56A;

    font-size:13px;

    transition:.35s;

}

.select-wrapper:hover .select-arrow{

    transform:translateY(-50%) rotate(180deg);

}

/*=====================================
    BUTTON
======================================*/

.rsvp-submit{

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    width:100%;

    padding:22px;

    border:none;

    border-radius:70px;

    cursor:pointer;

    color:#fff;

    font-size:17px;

    font-weight:700;

    letter-spacing:.6px;

    background:

        linear-gradient(

            135deg,

            #D9B56A,

            #C39142

        );

    box-shadow:

        0 22px 45px rgba(201,165,106,.30);

    transition:.35s;

}


.rsvp-submit::before{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:50%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.85),

            transparent

        );

    transform:skewX(-25deg);

}


.rsvp-submit:hover::before{

    animation:rsvpShine .9s forwards;

}


@keyframes rsvpShine{

    to{

        left:180%;

    }

}


.rsvp-submit svg{

    transition:.35s;

}


.rsvp-submit:hover{

    transform:translateY(-5px);

    box-shadow:

        0 30px 60px rgba(201,165,106,.35);

}


.rsvp-submit:hover svg{

    transform:translateX(8px);

}


.rsvp-submit:active{

    transform:scale(.98);

}

/*=====================================
    SUCCESS
======================================*/

.rsvp-success{

    display:none;

    text-align:center;

    padding:40px 10px;

}

.rsvp-success.show{

    display:block;

    animation:rsvpSuccess .6s ease;

}


/* círculo */

.success-circle{

    width:110px;

    height:110px;

    margin:0 auto 30px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    background:linear-gradient(
        135deg,
        #D8B56C,
        #C79A45
    );

    box-shadow:
        0 20px 45px rgba(201,165,106,.30);

}

.success-circle svg{

    width:42px;

    height:42px;

}


/* badge */

.success-badge{

    display:inline-block;

    padding:10px 22px;

    margin-bottom:25px;

    border-radius:50px;

    background:#FFF7E8;

    color:#C79A45;

    font-size:13px;

    letter-spacing:3px;

}


/* titulo */

.rsvp-success h3{

    margin-bottom:22px;

    font-family:"Cormorant Garamond",serif;

    font-size:48px;

    font-weight:500;

    color:#172033;

}


/* texto */

.rsvp-success p{

    max-width:520px;

    margin:auto;

    color:#667085;

    line-height:1.9;

    font-size:19px;

}


/* animação */

@keyframes rsvpSuccess{

    from{

        opacity:0;

        transform:translateY(30px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}