/* /Components/MoodBoard.razor.rz.scp.css */
.moodboard-container[b-8dh4xwwpct] {
    padding: 1rem;
}

.mb-section[b-8dh4xwwpct] {
    margin-bottom: 5rem;
    text-align: center;
}

.section-title[b-8dh4xwwpct] {
    font-size: 2.2rem;
    letter-spacing: 0.3rem;
    margin-bottom: 0.5rem;
}

.section-subtitle[b-8dh4xwwpct] {
    font-size: 0.9rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 2.5rem;
}

/* Palette Styling */
.palette-grid[b-8dh4xwwpct] {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}

.palette-item[b-8dh4xwwpct] {
    text-align: center;
    width: 150px;
}

.color-circle[b-8dh4xwwpct] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1.5rem auto;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.color-name[b-8dh4xwwpct] {
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.color-desc[b-8dh4xwwpct] {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Image Grid Styling (De specifieke scrollable eis) */
.image-grid-scroll-container[b-8dh4xwwpct] {
    max-width: 1000px;
    margin: 0 auto;
    /* Eis: max-height, twee foto's hoog en scrollable */
    max-height: 450px; /* Dit toont ongeveer twee rijen en een beetje */
    overflow-y: scroll;
    padding-right: 1rem; /* Ruimte voor scrollbar */
    border: 1px solid rgba(255, 255, 255, 0.05);
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

    /* Custom scrollbar voor een chique look */
    .image-grid-scroll-container[b-8dh4xwwpct]::-webkit-scrollbar {
        width: 6px;
    }

    .image-grid-scroll-container[b-8dh4xwwpct]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 3px;
    }

    .image-grid-scroll-container[b-8dh4xwwpct]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }

.image-grid[b-8dh4xwwpct] {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 foto's breed */
    gap: 1rem;
    padding: 1rem 0;
}

.grid-item[b-8dh4xwwpct] {
    aspect-ratio: 1; /* Zorgt voor vierkante afbeeldingen */
}

.placeholder-img[b-8dh4xwwpct] {
    background-color: #546E7A; /* Iets lichtere grijsblauwe tint om het op te laten vallen */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E0E0E0;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

    .placeholder-img:hover[b-8dh4xwwpct] {
        background-color: #607D8B;
        border-color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
    }

/* Description Text Styling */
.description-section[b-8dh4xwwpct] {
    max-width: 900px;
    margin: 0 auto 5rem auto;
}

.desc-row[b-8dh4xwwpct] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

.desc-title[b-8dh4xwwpct] {
    font-size: 1.1rem;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
}

.mb-quote[b-8dh4xwwpct] {
    font-family: 'Georgia', serif;
    font-size: 1.4rem;
    line-height: 1.8;
    color: #FFFFFF;
    text-align: center;
    border: none;
    padding: 0 2rem;
    margin: 0;
}

/* Materials Styling */
.materials-section[b-8dh4xwwpct] {
    max-width: 800px;
    margin: 0 auto;
}

.materials-tag-cloud[b-8dh4xwwpct] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.material-tag[b-8dh4xwwpct] {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-size: 0.9rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

    .material-tag:hover[b-8dh4xwwpct] {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
    }
/* /Layout/Footer.razor.rz.scp.css */
.wedding-footer[b-cge88bdq70] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2rem;
    margin-top: 4rem; /* Zorgt voor genoeg ademruimte na de content van je pagina's */
}

/* Een chique lijn die in het midden fel is en naar de zijkanten transparant wordt */
.footer-divider[b-cge88bdq70] {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    margin-bottom: 2rem;
}

.footer-content[b-cge88bdq70] {
    text-align: center;
    color: #b0b8bc;
}

.footer-names[b-cge88bdq70] {
    font-family: 'Georgia', serif;
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 0.2rem;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.footer-date[b-cge88bdq70] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    margin: 0 0 1.5rem 0;
}

.footer-contact[b-cge88bdq70] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.85rem;
    margin: 0 0 1rem 0;
}

.footer-contact a[b-cge88bdq70] {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    transition: border-color 0.2s ease;
}

.footer-contact a:hover[b-cge88bdq70] {
    border-bottom: 1px solid #ffffff;
}

.footer-copyright[b-cge88bdq70] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.05rem;
    opacity: 0.6;
    margin: 0;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* De hoofdcontainer die het hele scherm vult */
.wedding-layout[b-8257ujdkvj] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* We laten de background-color voor nu transparant/leeg */
}

/* De bovenste sectie (Rij 1 en 2) */
.wedding-header[b-8257ujdkvj] {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zorgt dat de titel en het menu horizontaal in het midden staan */
    text-align: center;
    padding-top: 4rem; /* Wat ruimte aan de bovenkant zoals in de afbeelding */
    margin-left: 20px;
    margin-right: 20px;

}

/* Wat extra ruimte tussen de MainTitle en het TabMenu */
.wedding-header[b-8257ujdkvj]  > * {
    margin-bottom: 1.5rem;
}

/* De content sectie (Rij 3) */
.wedding-main[b-8257ujdkvj] {
    flex: 1; /* Neemt alle overgebleven hoogte in beslag */
    display: flex;
    justify-content: center; /* Zorgt dat de '@Body' in het midden van het scherm staat */
    padding: 0 1rem 3rem 1rem;
}

/* Beperk de breedte van de body, zodat de tekst en foto's niet irritant breed worden op een groot scherm */
.content[b-8257ujdkvj] {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1000px; /* Dit is ongeveer de breedte van de foto in je voorbeeld */
    margin-left: 20px;
    margin-right: 20px;
}
/* /Layout/MainTitle.razor.rz.scp.css */
.title-container[b-ncmrf7sn52] {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zet alles netjes in het midden */
    gap: 0.5rem; /* Bepaalt de ruimte tussen de subtitle en de countdown */
    color: #ffffff;
    margin-bottom: 2rem;
}

.wedding-title[b-ncmrf7sn52] {
    font-family: 'Georgia', serif;
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 0.4rem;
    margin-bottom: 1rem; /* Iets meer ruimte onder de hoofdtitel */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

/* We kunnen de styling voor de datum en de countdown bundelen, want ze lijken erg op elkaar */
.wedding-subtitle[b-ncmrf7sn52], .wedding-countdown[b-ncmrf7sn52] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    color: #e0e0e0;
}

/* Eventuele specifieke styling voor de countdown (bijv. iets feller maken) */
.wedding-countdown[b-ncmrf7sn52] {
    font-weight: 600; /* Maakt de aftel-tekst net een tikje dikker/belangrijker */
    color: #ffffff; /* Maakt hem spierwit zodat hij er iets meer uitspringt dan de datum */
}

/* Update je bestaande wrapper */
.countdown-wrapper[b-ncmrf7sn52] {
    display: flex;
    justify-content: center;
    align-items: center; /* Zorgt dat "NOG" en "TE GAAN!" verticaal in het midden van de blokjes staan */
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap; /* Zorgt dat het op extreem kleine telefoons netjes op een nieuwe regel valt als het niet past */
}

/* Voeg deze nieuwe class toe */
.countdown-text[b-ncmrf7sn52] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    color: #ffffff;
    padding: 0 0.5rem; /* Beetje ademruimte tussen de tekst en de blokjes */
}

.countdown-block[b-ncmrf7sn52] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1); /* Chique, semi-transparante achtergrond */
    backdrop-filter: blur(5px); /* Een subtiel glas-effect */
    border-radius: 8px; /* Afgeronde hoekjes zoals in de foto */
    padding: 1rem 1.2rem;
    min-width: 85px; /* Zorgt dat de blokjes allemaal even breed zijn */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtiele schaduw */
}

.countdown-number[b-ncmrf7sn52] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.2rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 1; /* Voorkomt onnodige witruimte boven/onder het getal */
}

.countdown-label[b-ncmrf7sn52] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: #b0b8bc; /* Iets gedempte kleur, net als je menu */
    margin-top: 0.5rem;
}

/* Dit zorgt dat de 4 blokjes op desktop (grote schermen) netjes naast elkaar staan */
.countdown-blocks-container[b-ncmrf7sn52] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}

/* Update de media query voor mobiel */
/* --- DE MOBIELE MAGIE --- */
@media (max-width: 768px) {
    /* 1. Zet alles netjes onder elkaar: "NOG" -> Blokjes -> "TE GAAN!" */
    .countdown-wrapper[b-ncmrf7sn52] {
        flex-direction: column;
        gap: 1rem;
    }

    /* 2. Maak een 2x2 raster (grid) voor de 4 blokjes */
    .countdown-blocks-container[b-ncmrf7sn52] {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Dit forceert precies 2 kolommen! */
        gap: 1rem; /* De ruimte tussen de rijen en kolommen */
    }

    /* 3. Maak de blokjes iets vierkanter zodat ze het grid mooi opvullen */
    .countdown-block[b-ncmrf7sn52] {
        padding: 1rem;
        min-width: 110px; /* Iets breder, want we hebben nu de ruimte! */
    }

    /* 4. Tekstgroottes perfect afstemmen op het 2x2 formaat */
    .countdown-number[b-ncmrf7sn52] {
        font-size: 2rem;
    }

    .countdown-label[b-ncmrf7sn52] {
        font-size: 0.7rem;
    }

    .countdown-text[b-ncmrf7sn52] {
        font-size: 0.9rem;
    }

    .wedding-subtitle[b-ncmrf7sn52] {
        font-size: 0.65rem;
    }
}
/* /Layout/TabMenu.razor.rz.scp.css */
[b-jibm5vwwbk] .wedding-nav {
    display: flex;
    justify-content: center;
    gap: 3.5rem;
    margin-top: 1rem;
    padding: 0;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

    [b-jibm5vwwbk] .wedding-nav a.wedding-tab {
        color: #b0b8bc !important;
        background-color: transparent !important;
        font-family: 'Georgia', serif !important;
        font-size: 0.9rem !important;
        letter-spacing: 0.15rem !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        padding: 0.3rem 0 !important;
        cursor: pointer !important;
        border-bottom: 2px solid transparent !important;
        transition: all 0.2s ease !important;
        /* TOEGEVOEGD: Deze twee zorgen dat tekst niet afbreekt en knoppen niet deuken */
        white-space: nowrap;
        flex-shrink: 0;
    }

        [b-jibm5vwwbk] .wedding-nav a.wedding-tab:hover {
            color: #ffffff !important;
            text-decoration: none !important;
        }

        [b-jibm5vwwbk] .wedding-nav a.wedding-tab.active {
            color: #ffffff !important;
            border-bottom: 2px solid #ffffff !important;
            font-weight: normal !important;
        }

/* --- DE MOBIELE MAGIE --- */
@media (max-width: 600px) {
    [b-jibm5vwwbk] .wedding-nav {
        width: 100%; /* Neem de volle breedte op mobiel */
        justify-content: flex-start; /* Voorkomt dat het eerste tabje buiten beeld valt! */
        gap: 1.5rem; /* Iets minder ruimte tussen de tabs op een klein scherm */
        overflow-x: auto; /* Aanzetten van horizontaal scrollen */
        -webkit-overflow-scrolling: touch; /* Vloeiend swipen op iOS */
        margin-left: 20px;
        margin-right: 20px;

        /* Verberg de lelijke standaard scrollbalken */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        /* Verberg de scrollbalk specifiek in Chrome en Safari (iPhones) */
        [b-jibm5vwwbk] .wedding-nav::-webkit-scrollbar {
            display: none;
        }
}
/* /Pages/Home.razor.rz.scp.css */
.hero-container[b-5dicptfmk8] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; /* Zorgt dat we tekst over de foto kunnen plaatsen */
    text-align: center;
    margin-top: 1rem; /* Beetje ademruimte onder het menu */
}

.hero-image[b-5dicptfmk8] {
    display:flex;
    width: 100%; /* Zorgt dat hij netjes meeschaalt op kleine telefoonschroefjes */
    max-width: 900px; /* HIER ZIT DE MAGIE: Dit is de maximale breedte op desktop. */
    height: auto;
    max-height: 800px; /* ...maar word nooit hoger dan 450 pixels */
    object-fit: cover; /* Snijdt de boven/onderkant netjes af zonder de foto te vervormen! */
    object-position: center 40%; /* Optioneel: Schuift de 'focus' iets naar boven zodat jullie gezichten er niet afvallen */
    border-radius: 8px; /* Maakt de hoekjes heel subtiel rond, staat vaak chique */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Geeft de foto een beetje diepte op die donkere achtergrond */
}

.welcome-overlay[b-5dicptfmk8] {
    margin-bottom: 30px;
    animation: fadeIn-b-5dicptfmk8 1.5s ease-in-out;
}

.welcome-text[b-5dicptfmk8] {
    font-family: 'Georgia', serif;
    font-size: 2.5rem;
    color: #ffffff;
    letter-spacing: 0.15rem;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.welcome-subtext[b-5dicptfmk8] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    color: #b0b8bc;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}

/* Een subtiel en chique in-fade effectje voor de tekst */
@keyframes fadeIn-b-5dicptfmk8 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/HouseStyle.razor.rz.scp.css */
.huisstijl-layout[b-au1zxwlhq3] {
    padding-bottom: 4rem;
    color: white;
}

.page-header[b-au1zxwlhq3] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-au1zxwlhq3] {
    font-size: 3rem;
    letter-spacing: 0.4rem;
    margin-bottom: 0.5rem;
}

.page-subtitle[b-au1zxwlhq3] {
    font-size: 1rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Sub-tab menu styling */
.sub-tab-container[b-au1zxwlhq3] {
    max-width: 1000px;
    margin: 0 auto;
}

.sub-tab-menu[b-au1zxwlhq3] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
}

.sub-tab-button[b-au1zxwlhq3] {
    background: none;
    border: none;
    color: #E0E0E0; /* text-sans-light kleur */
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.15rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

    .sub-tab-button:hover[b-au1zxwlhq3] {
        color: #FFFFFF;
    }

    .sub-tab-button.active[b-au1zxwlhq3] {
        color: #FFFFFF;
        font-weight: bold;
        border-bottom: 2px solid #FFFFFF;
    }
/* /Pages/Login.razor.rz.scp.css */
.login-container[b-7oto9wbka5] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh; /* Zorgt dat het mooi in het midden van de pagina zweeft */
    padding: 2rem;
}

.login-box[b-7oto9wbka5] {
    background-color: rgba(255, 255, 255, 0.05); /* Héél licht transparant wit vak */
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.wedding-title[b-7oto9wbka5] {
    font-family: 'Georgia', serif;
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.3rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.login-subtitle[b-7oto9wbka5] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    color: #b0b8bc;
    margin-bottom: 2.5rem;
    line-height: 1.5;
}

.login-form[b-7oto9wbka5] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.login-input[b-7oto9wbka5] {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #b0b8bc;
    color: #ffffff;
    font-size: 1.2rem;
    padding: 0.5rem;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 0.2rem;
    text-transform: uppercase; /* Forceert visueel hoofdletters tijdens typen */
    transition: border-color 0.3s ease;
    outline: none;
}

    .login-input:focus[b-7oto9wbka5] {
        border-bottom: 2px solid #ffffff; /* Licht op als je erop klikt */
    }

    .login-input[b-7oto9wbka5]::placeholder {
        color: rgba(176, 184, 188, 0.4);
        letter-spacing: 0.1rem;
    }

.login-button[b-7oto9wbka5] {
    background-color: #ffffff;
    color: #2c3e50; /* Donkerblauwe/grijze tekst voor contrast */
    border: none;
    padding: 1rem;
    border-radius: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    letter-spacing: 0.15rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .login-button:hover:not(:disabled)[b-7oto9wbka5] {
        background-color: #e0e0e0;
        transform: translateY(-2px);
    }

    .login-button:disabled[b-7oto9wbka5] {
        background-color: #b0b8bc;
        cursor: not-allowed;
        opacity: 0.7;
    }

.error-message[b-7oto9wbka5] {
    margin-top: 1.5rem;
    color: #ff6b6b; /* Subtiel zachtrood */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.85rem;
}
/* /Pages/PhotoLibraryPage.razor.rz.scp.css */
.photos-header[b-ck3974blu2] {
    text-align: center;
    margin-bottom: 3rem;
    color: #ffffff;
}

.photos-header h2[b-ck3974blu2] {
    font-family: 'Georgia', serif;
    font-weight: 300;
    letter-spacing: 0.3rem;
    text-transform: uppercase;
}

.photo-library[b-ck3974blu2] {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 4rem;
}

/* Elke rij bevat maximaal 3 foto's */
.photo-row[b-ck3974blu2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem; /* Ruimte onder de rij */
    width: 100%;
}

/* Responsief: op tablets en telefoons maken we er 2 of 1 per rij van */
@media (max-width: 900px) {
    .photo-row[b-ck3974blu2] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .photo-row[b-ck3974blu2] {
        grid-template-columns: 1fr;
    }
}

/* De container voor een individuele foto */
.photo-item[b-ck3974blu2] {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    aspect-ratio: 1 / 1; /* Maakt alle blokken perfect vierkant! */
    background-color: #3a454d; /* Laad-kleurtje */
}

    .photo-item img[b-ck3974blu2] {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Snijdt portret en landschap netjes bij tot een vierkant */
        transition: transform 0.4s ease; /* Zachte animatie */
    }

    /* Chique inzoom-effect op desktop */
    .photo-item:hover img[b-ck3974blu2] {
        transform: scale(1.05);
        cursor: pointer;
    }

/* De laad-spinner als de Azure call loopt */
.loader-container[b-ck3974blu2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4rem;
    color: #e0e0e0;
}

.wedding-spinner[b-ck3974blu2] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin-b-ck3974blu2 1s ease-in-out infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-ck3974blu2 {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/RsvpPage.razor.rz.scp.css */

/* De basis styling voor de tekst van de knop */
[b-0nuhyqa97e] .base-button {
    color: #ffffff !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; /* Voor knoppen leest een strak font vaak iets moderner dan Georgia */
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    padding: 12px 30px !important; /* Iets meer padding voor een luxer gevoel */
    border: none !important;
    border-radius: 30px !important; /* Mooie ronde 'pil' vorm */
    transition: all 0.3s ease !important; /* Zorgt voor een zachte animatie */
}

/* De specifieke styling en kleuren voor deze RSVP knop */
[b-0nuhyqa97e] .confirm-button {
    /* Een chique, semi-transparante groene/blauwe kleur of gewoon wit-transparant */
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

    /* Het hover-effect (als de muis eroverheen gaat) */
    [b-0nuhyqa97e] .confirm-button:hover {
        background-color: rgba(255, 255, 255, 0.25) !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
        transform: translateY(-2px); /* Laat de knop heel subtiel een stukje 'zweven' */
        cursor: pointer;
    }

    /* Effect als je de knop indrukt */
    [b-0nuhyqa97e] .confirm-button:active {
        transform: translateY(0);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    }

.rsvp-container[b-0nuhyqa97e] {
    display: flex;
    flex-direction: column;
    font-family: 'Georgia', serif;
    color: #ffffff;
}

.rsvp-header[b-0nuhyqa97e] {
    text-align: center;
    margin-bottom: 3rem;
    color: #ffffff;
}

.rsvp-header h2[b-0nuhyqa97e] {
    font-family: 'Georgia', serif;
    font-weight: 300;
    letter-spacing: 0.3rem;
    text-transform: uppercase;
}

/* Maak de labels (Captions) wit en gebruik hetzelfde lettertype */
[b-0nuhyqa97e] .rsvp-caption {
    color: #ffffff !important;
    font-family: 'Georgia', serif !important;
    font-size: 15px;
    letter-spacing: 0.05rem;
    margin-bottom: 0.3rem; /* Ietsje ruimte tussen het label en het invoerveld */
}

/* Maak de "aantal tekens" tekst (0 / 200) iets lichter zodat het leesbaar blijft op donker */
.text-muted[b-0nuhyqa97e] {
    color: #b0b8bc !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}