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

.rsvp{
    min-height:90vh;

    display:flex;
    align-items:center;

    text-align:center;
}

.rsvp-content{
    max-width:760px;

    margin-inline:auto;
}

.rsvp-icon{
    width:64px;
    height:64px;

    margin:0 auto 22px;
}

.rsvp-divider{
    width:220px;

    margin:30px auto;
}

.rsvp-introduction{
    max-width:680px;

    margin:0 auto 38px;

    color:var(--texto);

    font-size:1.12rem;
    line-height:1.85;
}

.rsvp-introduction strong{
    color:var(--vino);

    font-weight:600;
}

.rsvp-signature{
    margin-top:42px;

    color:var(--plateado-dark);

    font-size:.92rem;
    line-height:1.6;
}

.rsvp-signature span{
    color:var(--vino);

    font-family:var(--font-title);
    font-size:2rem;
}

/*=========================================================
    MODAL
=========================================================*/

.rsvp-modal{
    position:fixed;
    inset:0;

    z-index:10000;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:24px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.rsvp-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.rsvp-modal-backdrop{
    position:absolute;
    inset:0;

    background:rgba(38,15,20,.72);

    backdrop-filter:blur(8px);
}

.rsvp-dialog{
    position:relative;
    z-index:1;

    width:min(680px, 100%);
    max-height:calc(100vh - 48px);

    padding:54px;

    overflow-y:auto;

    border:1px solid rgba(200,204,211,.7);
    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            #fffefb,
            var(--crema)
        );

    box-shadow:
        0 36px 90px rgba(0,0,0,.3);

    transform:translateY(24px) scale(.98);

    transition:transform .4s ease;
}

.rsvp-modal.is-open .rsvp-dialog{
    transform:none;
}

.rsvp-close{
    position:absolute;

    top:16px;
    right:20px;

    width:42px;
    height:42px;

    display:flex;
    justify-content:center;
    align-items:center;

    color:var(--vino);

    font-size:2rem;
    line-height:1;

    border-radius:50%;

    transition:
        background .25s ease,
        transform .25s ease;
}

.rsvp-close:hover{
    transform:rotate(8deg);

    background:rgba(106,36,52,.08);
}

.rsvp-dialog-header{
    margin-bottom:36px;

    text-align:center;
}

.rsvp-dialog-icon{
    width:52px;
    height:52px;

    margin:0 auto 18px;
}

.rsvp-dialog-title{
    color:var(--vino);

    font-family:var(--font-title);
    font-size:clamp(3rem, 7vw, 4.8rem);
    font-weight:500;
    line-height:1;
}

/*=========================================================
    FORMULARIO
=========================================================*/

.rsvp-form{
    display:grid;

    gap:26px;
}

.form-group{
    display:grid;

    gap:10px;
}

.form-group label,
.form-group legend{
    color:var(--vino);

    font-size:.82rem;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;

    padding:14px 16px;

    border:1px solid rgba(142,148,156,.55);
    border-radius:10px;

    outline:none;

    background:rgba(255,255,255,.75);
    color:var(--texto);

    font-family:var(--font-body);
    font-size:1rem;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--vino);

    background:var(--blanco);

    box-shadow:
        0 0 0 3px rgba(106,36,52,.1);
}

.form-group textarea{
    resize:vertical;
}

.rsvp-options{
    display:grid;

    gap:12px;
}

.rsvp-option{
    position:relative;

    cursor:pointer;
}

.rsvp-option input{
    position:absolute;

    opacity:0;
}

.rsvp-option span{
    display:block;

    padding:16px 18px;

    border:1px solid rgba(142,148,156,.45);
    border-radius:10px;

    background:rgba(255,255,255,.65);
    color:var(--texto);

    font-size:1rem;
    font-weight:400;
    letter-spacing:0;
    text-transform:none;

    transition:
        border-color .25s ease,
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.rsvp-option input:checked + span{
    border-color:var(--vino);

    background:var(--vino);
    color:var(--blanco);

    transform:translateY(-2px);
}

.rsvp-attending-fields{
    display:grid;

    gap:26px;
}

.rsvp-attending-fields[hidden]{
    display:none;
}

.rsvp-submit{
    width:100%;

    margin-top:8px;
}

.rsvp-status{
    min-height:24px;

    color:var(--vino);

    font-size:.95rem;
    text-align:center;
}

/*=========================================================
    RESPONSIVE
=========================================================*/

@media(max-width:600px){

    .rsvp-dialog{
        padding:48px 24px 32px;

        border-radius:16px;
    }

    .rsvp-introduction{
        font-size:1.02rem;
    }

}

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

.rsvp-family-introduction{

    margin-bottom:34px;
    text-align:center;

    animation:fadeIn .45s ease;
}

.rsvp-family-label{

    color:var(--plateado-dark);

    font-size:.85rem;
    letter-spacing:2px;
    text-transform:uppercase;
}

.rsvp-family-name{

    margin:10px 0;

    color:var(--vino);

    font-family:var(--font-title);

    font-size:clamp(2.3rem,5vw,3.8rem);

    line-height:1;
}

.rsvp-family-message{

    max-width:420px;

    margin:0 auto;

    color:var(--texto);

    line-height:1.8;
}

/*-----------------------------------*/

.rsvp-option{

    display:flex;

    gap:16px;

    align-items:flex-start;

    padding:18px;

    border:1px solid rgba(142,148,156,.35);

    border-radius:14px;

    transition:.25s;

    cursor:pointer;
}

.rsvp-option:hover{

    transform:translateY(-2px);

    border-color:rgba(106,36,52,.45);

    box-shadow:0 12px 28px rgba(0,0,0,.06);
}

.rsvp-option input{

    display:none;
}

.rsvp-option-control{

    width:20px;
    height:20px;

    flex:none;

    margin-top:3px;

    border:2px solid var(--plateado-dark);
    border-radius:50%;

    transition:.25s;
}

.rsvp-option-text{

    flex:1;

    display:flex;
    flex-direction:column;

    gap:4px;
}

.rsvp-option-text strong{

    color:var(--vino);

    font-weight:600;
}

.rsvp-option-text small{

    color:var(--texto);

    line-height:1.6;
}

.rsvp-option input:checked
+ .rsvp-option-control{

    border-color:var(--vino);

    background:var(--vino);

    box-shadow:
        inset 0 0 0 4px #fff;
}

.rsvp-option input:checked
~ .rsvp-option-text strong{

    color:var(--vino);
}

/*-----------------------------------*/

.form-help{

    color:var(--plateado-dark);

    font-size:.82rem;

    line-height:1.5;
}

/*-----------------------------------*/

.rsvp-decline-message{

    padding:18px;

    border-left:4px solid var(--vino);

    border-radius:10px;

    background:rgba(106,36,52,.06);

    animation:fadeIn .35s ease;
}

.rsvp-decline-message p{

    color:var(--texto);

    line-height:1.8;
}

/*-----------------------------------*/

.rsvp-status{

    min-height:24px;

    font-size:.95rem;

    transition:.25s;
}

.rsvp-status.is-loading{

    color:var(--plateado-dark);
}

.rsvp-status.is-success{

    color:#2d7c47;
}

.rsvp-status.is-error{

    color:#a52c2c;
}

/*-----------------------------------*/

.rsvp-submit{

    margin-top:8px;

    transition:
        transform .25s,
        opacity .25s;
}

.rsvp-submit:disabled{

    opacity:.75;

    cursor:not-allowed;
}

/*-----------------------------------*/

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}