/* --- Global Font and Body Setup --- */
body {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    position: relative; 
    overflow-x: hidden; 
    overflow-y: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center; 
    flex-direction: column;

    /* --- ✨ ENHANCED ANIMATED BACKGROUND STARS & OCEAN --- */
    background: linear-gradient(-45deg,
        #0A1931, #0F284E, #184175, #2660A1, #3A7BBF, #2660A1, #184175
    );
    background-size: 600% 600%;
    animation: dynamicOceanWaves 30s ease-in-out infinite;
}

/* --- Star Layers --- */
body::before, body::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-repeat: repeat;
    pointer-events: none;
    z-index: -1;
    animation: 
        starShine var(--shine-duration, 5s) linear infinite, 
        floatStars var(--float-duration, 25s) infinite alternate ease-in-out;
}
body::before {
    background-image: 
        radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.7) 2px, transparent 2.5px);
    background-size: 180px 220px, 130px 190px;
    background-position: 5% 15%, 70% 85%;
    --shine-duration: 7s;
    --float-duration: 30s;
    animation-delay: 0s, -2s;
}
body::after {
    background-image: 
        radial-gradient(circle, rgba(255, 255, 255, 0.8) 1.5px, transparent 2px),
        radial-gradient(circle, rgba(220, 220, 255, 0.6) 2.5px, transparent 3px);
    background-size: 220px 280px, 160px 230px;
    background-position: 30% 50%, 85% 20%;
    --shine-duration: 6s;
    --float-duration: 35s;
    animation-delay: -3s, -5s;
}

/* --- Wrapper for main content and gallery --- */
.main-content-wrapper {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    width: 100%;
    max-width: 500px; 
    z-index: 1; 
    padding: 10px 0;
    box-sizing: border-box; 
}

/* --- 🌟 RSVP CONTAINER STYLING (UPDATED) --- */
.rsvp-container {
    background-color: #ffffff;
    padding: 0; /* Remove padding to allow image to be flush */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%; 
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 20px; 
    box-sizing: border-box;
    overflow: hidden; /* Hide anything that pokes out of the rounded corners */
}

/* --- 🌟 STYLE FOR THE EVENT IMAGE (UPDATED FOR BANNER) --- */
.event-image {
    width: 100%; /* Make image full width of the container */
    height: 150px; /* Set a fixed height for the banner */
    border-radius: 0; /* No border-radius, it's a rectangle */
    object-fit: cover; /* Crop image to fit banner dimensions */
    border: none; /* No border */
    box-shadow: none; /* No shadow */
    margin: 0 0 15px 0; /* Remove side margins, add bottom margin */
    display: block;
}

/* --- General Text and Form Styling --- */
.event-details {
    padding: 0 25px; /* Add padding to the text content instead */
}
form {
    padding: 0 25px 25px 25px; /* Add padding to the form section */
}

.event-details h1 { font-size: 2em; color: #2c3e50; margin-bottom: 8px; }
.event-details h2 { font-size: 1.2em; font-weight: 400; color: #34495e; margin-bottom: 20px; }
.event-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 15px;
    text-align: left;
    margin-bottom: 25px;
}
.info-label { font-weight: 700; color: #2c3e50; }
.info-value { color: #34495e; }

form { margin-top: 20px; text-align: left; }
form h2 { text-align: center; color: #2c3e50; margin-bottom: 5px; }
form p { text-align: center; margin-bottom: 15px; color: #7f8c8d; }
label { display: block; font-weight: 700; margin-bottom: 6px; margin-top: 15px; color: #34495e; }
input[type="text"] { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    box-sizing: border-box; 
    font-size: 0.95em; 
    font-family: 'Montserrat', sans-serif; 
}
button { width: 100%; background-color: #27ae60; color: white; padding: 12px; border: none; border-radius: 5px; cursor: pointer; font-size: 1.1em; font-weight: 700; margin-top: 20px; transition: background-color 0.3s ease; }
button:hover { background-color: #229954; }
.radio-group { display: flex; justify-content: space-around; align-items: center; border: 1px solid #ccc; border-radius: 5px; padding: 8px; margin-top: 10px; }
.radio-option { display: flex; align-items: center; gap: 6px; }
.radio-option label { font-weight: 400; margin-top: 0; cursor: pointer; font-size: 0.9em; }
#form-status { text-align: center; margin-top: 15px; font-weight: bold; display: none; font-size: 0.9em; }

/* --- Photo Gallery Styling --- */
.photo-gallery {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    position: relative;
    z-index: 1; 
    box-sizing: border-box;
}
.photo-item { 
    border-radius: 10px;
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out; 
    border: 4px solid rgba(255, 255, 255, 0.8);
    line-height: 0;
}
.photo-item:hover { 
    transform: translateY(-5px) scale(1.02);
}
.photo-item img { 
    width: 100%; 
    height: auto;
    display: block; 
}

/* --- MEDIA QUERIES --- */
@media (min-width: 900px) {
    body {
        overflow: hidden;
        align-items: center;
    }
    .main-content-wrapper {
        flex-direction: row;
        align-items: center; 
        justify-content: center;
        gap: 50px; 
        max-width: 1000px; 
    }
    
    .rsvp-container {
        flex-shrink: 0; 
        width: 450px;
        margin-bottom: 0; 
    }

    /* 🌟 Adjusted desktop banner styles */
    .event-image {
        height: 180px; /* Taller banner on desktop */
        margin-bottom: 20px;
    }
    .event-details {
        padding: 0 20px;
    }
    form {
        padding: 0 20px 20px 20px;
    }
    
    .photo-gallery {
        margin-top: 0; 
        width: 400px;
        max-height: 70vh;
        overflow-y: auto;
        padding-right: 10px;
    }
}

/* --- Keyframe Animations --- */
@keyframes dynamicOceanWaves { 0% { background-position: 0% 50%; } 25% { background-position: 75% 0%; } 50% { background-position: 100% 75%; } 75% { background-position: 25% 100%; } 100% { background-position: 0% 50%; } }
@keyframes starShine { 0% { opacity: 0.5; } 20% { opacity: 1; } 40% { opacity: 0.4; } 60% { opacity: 0.9; } 80% { opacity: 0.5; } 100% { opacity: 0.5; } }
@keyframes floatStars { 0% { transform: translate(0, 0); } 100% { transform: translate(2%, -3%); } }