/* Browser Compatibility Fixes */

/* Backdrop Filter */
.element-with-backdrop {
    -webkit-backdrop-filter: blur(10px);  /* Safari */
    backdrop-filter: blur(10px);  /* Standaard */
}

/* Image Rendering */
.crisp-image {
    -webkit-image-rendering: optimize-contrast;  /* Webkit browsers */
    -moz-image-rendering: crisp-edges;  /* Firefox */
    image-rendering: crisp-edges;  /* Standaard */
}

/* Appearance Reset */
.custom-element {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Scrollbar Styling met Fallbacks */
:root {
    scrollbar-width: thin;  /* Firefox */
    scrollbar-color: #888 #f1f1f1;  /* Firefox */
}

::-webkit-scrollbar {
    width: 10px;  /* Webkit browsers */
}

::-webkit-scrollbar-track {
    background: #f1f1f1;  /* Webkit browsers */
}

::-webkit-scrollbar-thumb {
    background: #888;  /* Webkit browsers */
    border-radius: 5px;
}

/* Flexbox Fallbacks voor oudere browsers */
.flex-container {
    display: -webkit-box;      /* Oude Webkit */
    display: -ms-flexbox;      /* IE10 */
    display: -webkit-flex;     /* Nieuwe Webkit */
    display: flex;             /* Standaard */
}

/* Grid Layout Fallbacks */
.grid-container {
    display: -ms-grid;   /* IE10 */
    display: grid;       /* Standaard */
}