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

.rsvp-content{
    position:relative;
    z-index:5;

    width:100%;

    padding:15px 0;

    text-align:center;
}


/* HEADER */

.rsvp-header{
    margin-bottom:40px;
}

.rsvp-eyebrow{
    margin:0 0 12px;

    font-family:Poppins;
    font-size:.7rem;

    letter-spacing:4px;

    color:var(--primary);
}

.rsvp-title{
    margin:0;

    font-family:GreatVibes;
    font-size:4rem;
    font-weight:normal;

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

.rsvp-message{
    max-width:330px;

    margin:12px auto 0;

    font-family:Poppins;
    font-size:.8rem;

    line-height:1.8;

    color:#756565;
}


/* FAMILY */

.rsvp-family{
    margin-bottom:15px;

    padding-bottom:22px;

    border-bottom:1px solid rgba(76,12,36,.15);

    text-align:left;
}

.rsvp-label{
    margin:0 0 6px;

    font-family:Poppins;
    font-size:.65rem;

    letter-spacing:2px;

    color:#9a8585;
}

.rsvp-family-name{
    margin:0;

    font-family:Playfair;
    font-size:1.5rem;

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

.rsvp-instruction{
    margin:7px 0 0;

    font-size:.72rem;

    color:#8b7a7a;
}


/* ========================================
   GUEST LIST
======================================== */

.guest-list{
    width:100%;

    margin-bottom:30px;
}

.guest-item{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:18px 0;

    border-bottom:1px solid rgba(76,12,36,.10);
}

.guest-info{
    display:flex;
    flex-direction:column;

    text-align:left;
}

.guest-name{
    font-family:Playfair;
    font-size:1rem;

    color:var(--text);
}

.guest-status{
    margin-top:4px;

    font-family:Poppins;
    font-size:.68rem;

    color:#9a8585;
}

.guest-status.attending{
    color:var(--primary);
}


/* ========================================
   TOGGLE SWITCH
======================================== */

.attendance-switch{
    position:relative;

    width:50px;
    height:27px;

    flex-shrink:0;
}

.attendance-switch input{
    width:0;
    height:0;

    opacity:0;
}

.switch-slider{
    position:absolute;

    inset:0;

    border-radius:30px;

    background:#d8ceca;

    cursor:pointer;

    transition:.25s;
}

.switch-slider::before{
    content:"";

    position:absolute;

    width:21px;
    height:21px;

    top:3px;
    left:3px;

    border-radius:50%;

    background:#fff;

    box-shadow:0 2px 6px rgba(0,0,0,.15);

    transition:.25s;
}

.attendance-switch input:checked + .switch-slider{
    background:var(--primary);
}

.attendance-switch input:checked + .switch-slider::before{
    transform:translateX(23px);
}


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

.rsvp-action{
    margin-top:30px;

    text-align:center;
}

.confirm-rsvp-btn{
    width:100%;
    max-width:280px;

    padding:14px 25px;

    border:0;
    border-radius:6px;

    background:var(--primary);

    color:#fff;

    font-family:Playfair;
    font-size:.8rem;

    letter-spacing:2px;

    cursor:pointer;

    box-shadow:0 6px 18px rgba(76,12,36,.15);

    transition:.25s;
}

.confirm-rsvp-btn:hover{
    background:var(--primary-dark);

    transform:translateY(-2px);
}

.rsvp-note{
    margin:13px 0 0;

    font-family:Poppins;
    font-size:.65rem;

    color:#948383;
}

.invalid-invitation{
    padding:30px 20px;

    font-family:Poppins;
    font-size:.8rem;

    line-height:1.8;

    text-align:center;

    color:#756565;
}

/* ========================================
   INVALID INVITATION
======================================== */

.invalid-invitation{
    padding:30px 20px;

    font-family:Poppins;
    font-size:.8rem;

    line-height:1.8;

    text-align:center;

    color:#756565;
}

.invalid-back-btn{
    display:inline-block;

    margin-top:15px;

    padding:13px 28px;

    border:1px solid var(--primary);
    border-radius:6px;

    background:var(--primary);

    color:#fff;

    font-family:Playfair;
    font-size:.75rem;

    letter-spacing:2px;

    text-decoration:none;

    transition:.25s;
}

.invalid-back-btn:hover{
    background:var(--primary-dark);

    color:#fff;

    transform:translateY(-2px);
}