body {
    font-family: "Vend Sans", sans-serif;
    color: #333;
    
    /* Remove the background image from here! */
    background-color: transparent; 
    
    /* Keep the alignment logic */
    min-height: 100vh;
    /* Use 100dvh (Dynamic Viewport Height) if browser supports it, fixes some mobile glitches */
    min-height: 100dvh; 
    
    display: flex;
    align-items: center;
    margin: 0;
    
    /* This ensures content sits ON TOP of the background */
    position: relative; 
    z-index: 1; 
}
.fixed-background {
    /* Locked position: It will NOT move or resize when the address bar disappears */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Covers the screen */
    
    /* Put it BEHIND the content */
    z-index: -1; 
    
    /* The Image Logic */
    background: url("/static/background.jpg") no-repeat center center;
    background-size: cover;
    
    /* Optional: Improves performance on mobile */
    transform: translateZ(0); 
    will-change: transform; 
}
.fixed-background::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 110%;
    height: 110%;
    background: inherit;
    filter: blur(4px);
    z-index: -1;
}

.wedding-font {
    font-family: "Charm", cursive;
    font-weight: 400;
    font-style: normal;
    color: #765689;
}
.wedding-font-secondary {
    font-family: "Charm", cursive;
    font-weight: 300;
    font-style: normal;
    color: #7e5151;
}
.main-container {
    max-width: 750px;
    width: 100%; /* Ensure it tries to fill width */
    
    /* --- POSITIONING --- */
    /* Remove 'margin: 0 auto' */
    /* Add space from the left edge (using vw is responsive, e.g., 10% of screen width) */
    margin-left: 3vw; 
    margin-right: auto; /* Helps push it away from right side */
    
    /* --- YOUR VISUAL STYLES (Kept exactly as you wanted) --- */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;

    /* Your Gradient */
    background: linear-gradient(220deg, rgba(255, 255, 255, 0.55) 50%, rgba(116, 136, 83, 0.192) 100%);
    
    /* Glass Effect */
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    
    border: 1px solid rgba(216, 216, 216, 0.6);

    box-shadow: 
        0 8px 32px 0 rgba(118, 86, 137, 0.15),
        0 1px 2px 0 rgba(255, 255, 255, 0.5) inset;
    
    padding: 50px;
    border-radius: 15px;
}

.main-container::after {
    content: "";
    position: absolute;
    
    /* Sits 20px inside the glass */
    top: 20px; left: 20px; right: 20px; bottom: 20px;
    
    /* The Line: Your purple theme color */
    border: 1px solid #898156;
    
    /* The Glow: This makes the line look "embedded" or glowing inside the glass */
    box-shadow: 0 0 8px rgba(137, 136, 86, 0.3);
    
    border-radius: 12px;
    pointer-events: none; /* Let clicks pass through */
    
    /* OPTIONAL ANIMATION: A very subtle pulse to make it feel alive */
    animation: crystalGlow 4s ease-in-out infinite;

    will-change: opacity;
}

/* 5. THE ANIMATION */
@keyframes crystalGlow {
    0%   { opacity: 0.5; }
    50%  { opacity: 1; }
    100% { opacity: 0.5; }
}

@media (max-width: 768px) {
    .main-container {
        width: 90%;
        margin: 40px auto;
        padding: 35px 25px;
        background: rgba(255, 255, 255, 0.55);
    }
    
    .main-container::after {
        top: 15px; left: 15px; right: 15px; bottom: 15px;
    }
}
@media (max-width: 576px) {
    .date-location-info span,
    .date-location-info strong {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .date-location-info {
        line-height: 1.3;
        margin-bottom: 0.5rem !important;
    }
    .wedding-title {
        font-size: 3.5rem; 
    }
}
/* Make the admin table wider */
.admin-container {
    max-width: 1200px; 
}