#rsvp {

background: #f8f5f0;

text-align: center;

}

.rsvp-intro {

max-width: 500px;
margin: 0 auto 40px;

color: #666;

}

.rsvp-form {

max-width: 520px;
margin: auto;

background: white;

padding: 40px;

border-radius: 10px;

box-shadow: 0 15px 40px rgba(0,0,0,0.05);

display: flex;
flex-direction: column;

gap: 18px;

}

.form-group input {

width: 100%;

padding: 14px;

border: 1px solid #ddd;

border-radius: 4px;

font-size: 15px;

transition: all .3s ease;

}

.form-group input:focus {

border-color: #c6a663;

outline: none;

box-shadow: 0 0 0 2px rgba(198,166,99,0.15);

}

.radio-group {

display: flex;
gap: 12px;

}

.radio-card {

flex: 1;

border: 1px solid #ddd;

padding: 12px;

cursor: pointer;

border-radius: 6px;

transition: all .3s ease;

text-align: center;

position: relative;

}

.radio-card input {

position: absolute;
opacity: 0;

}

.radio-card:hover {

border-color: #c6a663;

}

.radio-card input:checked + span {

color: #c6a663;
font-weight: 500;

}

.btn-gold {

margin-top: 10px;

padding: 14px;

background: #c6a663;

border: none;

color: white;

font-size: 15px;

letter-spacing: .5px;

cursor: pointer;

transition: all .3s ease;

border-radius: 4px;

}

.btn-gold:hover {

background: #b89655;

transform: translateY(-1px);

}

#toast {

position: fixed;

bottom: 30px;
left: 50%;

transform: translateX(-50%) translateY(20px);

background: #333;
color: white;

padding: 14px 22px;

border-radius: 30px;

font-size: 14px;

opacity: 0;

pointer-events: none;

transition: all .4s ease;

z-index: 9999;

}

#toast.show {

opacity: 1;

transform: translateX(-50%) translateY(0);

}