@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

* {
    box-sizing: border-box;
}

hr {
    margin: 0 auto;
    margin-top: 3px;
    width: auto;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}

::-webkit-scrollbar {
    display: none;
}

.cover-bg {
    background: rgb(44, 48, 56) url('/static/images/background.jpg') repeat top;
    background-size: 50%;
    min-height: 100vh;
}

:root {
    --select-border: #777;
    --select-focus: blue;
    --select-arrow: var(--select-border);
}

p {
    margin: 0px;
}

select {
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0 1em 0 0;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    z-index: 1;
    outline: none;
}

select::-ms-expand {
    display: none;
}

.select {
    display: grid;
    grid-template-areas: "select";
    align-items: center;
    position: relative;
    min-width: 15ch;
    max-width: 30ch;
    border: 1px solid var(--select-border);
    border-radius: 0.25em;
    padding: 0.25em 0.5em;
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1.1;
    background-color: #fff;
    background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
}

.select select,
.select::after {
    grid-area: select;
}

.select:not(.select--multiple)::after {
    content: "";
    justify-self: end;
    width: 0.8em;
    height: 0.5em;
    background-color: var(--select-arrow);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

select:focus+.focus {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 2px solid var(--select-focus);
    border-radius: inherit;
}

select[multiple] {
    padding-right: 0;
    /* Safari toont geen optie tenzij de select hoog genoeg is om 'm
       volledig te tonen; Firefox/Chrome tonen ook een deel van een optie. */
    height: 6rem;
}

select[multiple] option {
    white-space: normal;
    outline-color: var(--select-focus);
}

.select--disabled {
    cursor: not-allowed;
    background-color: #eee;
    background-image: linear-gradient(to top, #ddd, #eee 33%);
}

.select+label {
    margin-top: 2rem;
}

.button {
    width: 130px;
    height: 40px;
    background: linear-gradient(to bottom, #42444a 0%, #393b40 100%);
    border: none;
    border-radius: 5px;
    position: relative;
    border-bottom: 4px solid #4a4b4f;
    color: #fbfbfb;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
    font-size: 15px;
    text-align: left;
    text-indent: 5px;
    box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, .2);
    cursor: pointer;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.button:active {
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, .2);
    top: 1px;
}

.button:after {
    content: "";
    width: 0;
    height: 0;
    display: block;
    border-top: 20px solid #282a2e;
    border-bottom: 20px solid #282a2e;
    border-left: 16px solid transparent;
    border-right: 20px solid #282a2e;
    position: absolute;
    opacity: 0.6;
    right: 0;
    top: 0;
    border-radius: 0 5px 5px 0;
}

.input-group {
    justify-content: center;
    position: absolute;
    top: 50%;
}

.search-label {
    color: darkgrey;
    text-align: left;
    font-size: 25px;
    color: white;
}

.search-bar {
    background: transparent;
    border: 0;
    outline: 0;
    border-bottom: 1px solid grey;
    color: grey;
    position: relative;
    font-size: 20px;
    height: 30px;
}

/* Login-pagina: losstaand van .search-label/.search-bar hierboven
   (die horen bij de echte zoekpagina), gecentreerd met flexbox. */
/* Voorkomt dat de pagina scrollt: body/html krijgen deze klasse via
   JS alleen op de loginpagina, zodat andere pagina's (met een lange
   gamelijst) gewoon kunnen blijven scrollen. */
html.login-no-scroll,
body.login-no-scroll {
    height: 100%;
    overflow: hidden;
    margin: 0;
}

body.login-no-scroll {
    display: flex;
    flex-direction: column;
}

/* Vult precies de ruimte die overblijft na de navbar, i.p.v. een
   eigen 100vh die samen met de navbar-hoogte over het scherm heen ging. */
.login-page-bg {
    flex: 1;
    min-height: 0;
    display: flex;
    position: relative;
    overflow: hidden;
    background: #070a15 !important;
}

.login-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.login-card {
    width: 100%;
    max-width: 340px;
    background: rgba(20, 22, 27, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 40px 32px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.login-title {
    color: white;
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

.login-button {
    margin-top: 20px;
    width: 100%;
    background: #485a92;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    padding: 12px 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.login-button:hover {
    background: #566bab;
}

/* ===========================================================
   LOGINPAGINA -- volledig herbouwd: diepzwarte canvas met het
   icoonpatroon en een diepe radiale gloed in het midden,
   geen orbs meer maar dezelfde visuele taal als de rest van de
   site. Het inlog-element is een halfdoorzichtige glassmorphism
   hub i.p.v. een standaard rechthoekige kaart.
   =========================================================== */
.login-page-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+PGRlZnM+PGcgaWQ9ImJvbHQiPjxwYXRoIGQ9Ik0xMy41IDIuNUw1IDEzLjVoNmwtMSA4IDguNS0xMWgtNnoiLz48L2c+PGcgaWQ9ImNhcnRyaWRnZSI+PHBhdGggZD0iTTcgM2gxMHYxMy41bC0yIDQuNUg5bC0yLTQuNXoiLz48cmVjdCB4PSI5IiB5PSI2IiB3aWR0aD0iNiIgaGVpZ2h0PSI1IiByeD0iLjgiLz48cGF0aCBkPSJNMTAgMThoNCIvPjwvZz48ZyBpZD0iY29pbiI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOC41Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNSIvPjxwYXRoIGQ9Ik0xMiA5LjV2NSIvPjwvZz48ZyBpZD0iY29udHJvbGxlciI+PHBhdGggZD0iTTcgNy41aDEwYTQuNiA0LjYgMCAwIDEgNC41IDUuNGwtLjggNC4yYTIuMyAyLjMgMCAwIDEtMy45IDEuMkwxNC42IDE2SDkuNGwtMi4yIDIuM2EyLjMgMi4zIDAgMCAxLTMuOS0xLjJsLS44LTQuMkE0LjYgNC42IDAgMCAxIDcgNy41eiIvPjxwYXRoIGQ9Ik04IDEwLjV2M002LjUgMTJoMyIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTEuMiIgcj0iLjkiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjEzIiByPSIuOSIvPjwvZz48ZyBpZD0iY3Jvd24iPjxwYXRoIGQ9Ik0zLjUgMTguNWgxN2wxLTEwLTUuMiA0LjJMMTIgNS41IDcuNyAxMi43IDIuNSA4LjV6Ii8+PHBhdGggZD0iTTMuNSAyMWgxNyIvPjwvZz48ZyBpZD0iZGljZSI+PHJlY3QgeD0iNCIgeT0iNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iMy41Ii8+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9Ii45Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSI5IiByPSIuOSIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9Ii45Ii8+PGNpcmNsZSBjeD0iOSIgY3k9IjE1IiByPSIuOSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9Ii45Ii8+PC9nPjxnIGlkPSJnZW0iPjxwYXRoIGQ9Ik02LjUgNGgxMWw0IDZMMTIgMjEgMi41IDEweiIvPjxwYXRoIGQ9Ik0yLjUgMTBoMTlNOSA0bC0yIDYgNSAxMSA1LTExLTItNiIvPjwvZz48ZyBpZD0iZ2hvc3QiPjxwYXRoIGQ9Ik01IDIwLjV2LTkuMmE3IDcgMCAwIDEgMTQgMHY5LjJsLTIuOC0yLjItMi4yIDIuMi0yLTIuMi0yIDIuMi0yLjItMi4yeiIvPjxjaXJjbGUgY3g9IjkuNSIgY3k9IjExIiByPSIuOSIvPjxjaXJjbGUgY3g9IjE0LjUiIGN5PSIxMSIgcj0iLjkiLz48L2c+PGcgaWQ9ImhlYXJ0Ij48cGF0aCBkPSJNMTIgMjAuNVM0IDE2IDQgOS44QTQuMyA0LjMgMCAwIDEgMTIgNy42YTQuMyA0LjMgMCAwIDEgOCAyLjJjMCA2LjItOCAxMC43LTggMTAuN3oiLz48L2c+PGcgaWQ9ImpveXN0aWNrIj48cmVjdCB4PSI1IiB5PSIxNiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjQuNSIgcng9IjEuNSIvPjxwYXRoIGQ9Ik0xMiAxNlY4LjUiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjYiIHI9IjMiLz48cGF0aCBkPSJNOCAxOC4yaC4wMU0xNiAxOC4yaC4wMSIvPjwvZz48ZyBpZD0ia2V5Ij48Y2lyY2xlIGN4PSI4IiBjeT0iMTIiIHI9IjQiLz48cGF0aCBkPSJNMTIgMTJoOU0xOCAxMnYzLjVNMTUgMTJ2Mi41Ii8+PC9nPjxnIGlkPSJwb3Rpb24iPjxwYXRoIGQ9Ik05LjUgM2g1TTEwLjUgM3Y1LjVMNS44IDE3YTIuNCAyLjQgMCAwIDAgMi4xIDMuNWg4LjJhMi40IDIuNCAwIDAgMCAyLjEtMy41TDEzLjUgOC41VjMiLz48cGF0aCBkPSJNNy44IDE0LjVoOC40Ii8+PC9nPjxnIGlkPSJzaGllbGQiPjxwYXRoIGQ9Ik0xMiAzbDcuNSAzdjUuNWMwIDQuOC0zLjIgOC03LjUgOS41LTQuMy0xLjUtNy41LTQuNy03LjUtOS41VjZ6Ii8+PHBhdGggZD0iTTEyIDh2OCIvPjwvZz48ZyBpZD0ic2t1bGwiPjxwYXRoIGQ9Ik01IDExYTcgNyAwIDAgMSAxNCAwYzAgMi4zLTEgMy44LTIuNSA0LjhWMTlINy41di0zLjJDNiAxNC44MDAgNSAxMy4zMDAgNSAxMXoiLz48Y2lyY2xlIGN4PSI5LjMiIGN5PSIxMS41IiByPSIxLjMiLz48Y2lyY2xlIGN4PSIxNC43IiBjeT0iMTEuNSIgcj0iMS4zIi8+PHBhdGggZD0iTTEwLjUgMTl2LTJNMTMuNSAxOXYtMiIvPjwvZz48ZyBpZD0ic3RhciI+PHBhdGggZD0iTTEyLjAwIDIuNTAgTDE0LjQ3IDguNjAgTDIxLjA0IDkuMDYgTDE1Ljk5IDEzLjMwIEwxNy41OCAxOS42OSBMMTIuMDAgMTYuMjAgTDYuNDIgMTkuNjkgTDguMDEgMTMuMzAgTDIuOTYgOS4wNiBMOS41MyA4LjYwWiIvPjwvZz48ZyBpZD0ic3dvcmQiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1IDEyIDEyKSI+PHBhdGggZD0iTTEyIDEuOGwyLjMgMy4ydjEwLjhIOS43VjV6Ii8+PHBhdGggZD0iTTYuOCAxNmgxMC40TTEyIDE2djQiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjIxLjQiIHI9Ii45Ii8+PC9nPjwvZz48ZyBpZD0idHJvcGh5Ij48cGF0aCBkPSJNOCA0aDh2NS41YTQgNCAwIDAgMS04IDB6Ii8+PHBhdGggZD0iTTggNkg0LjV2MS44QTMuMiAzLjIgMCAwIDAgOCAxMU0xNiA2aDMuNXYxLjhBMy4yIDMuMiAwIDAgMSAxNiAxMU0xMiAxMy41VjE3TTguNSAyMC41aDdNOS41IDE3aDUiLz48L2c+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHVzZSB4bGluazpocmVmPSIja2V5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjYgMjgwKSByb3RhdGUoMjIpIHNjYWxlKDEuMzcpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48dXNlIHhsaW5rOmhyZWY9IiNzd29yZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjU2IDMxNSkgcm90YXRlKDIyKSBzY2FsZSgxLjMwKSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS4zIi8+PHVzZSB4bGluazpocmVmPSIjY2FydHJpZGdlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTIgNDUpIHJvdGF0ZSgtMzApIHNjYWxlKDEuMzEpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjMiLz48dXNlIHhsaW5rOmhyZWY9IiNwb3Rpb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5OCAxOTgpIHJvdGF0ZSgtMTUpIHNjYWxlKDEuMTApIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48dXNlIHhsaW5rOmhyZWY9IiNjb250cm9sbGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTIgNDE2KSByb3RhdGUoLTExKSBzY2FsZSgwLjg3KSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMi4wIi8+PHVzZSB4bGluazpocmVmPSIjY29pbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQwIDMwMCkgcm90YXRlKDIxKSBzY2FsZSgxLjI5KSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS4zIi8+PHVzZSB4bGluazpocmVmPSIjc3RhciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjk1IDk4KSByb3RhdGUoMjgpIHNjYWxlKDAuOTcpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjgiLz48dXNlIHhsaW5rOmhyZWY9IiNnaG9zdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMiA0Mikgcm90YXRlKDM1KSBzY2FsZSgxLjIyKSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS40Ii8+PHVzZSB4bGluazpocmVmPSIjZ2hvc3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwMiA0Mikgcm90YXRlKDM1KSBzY2FsZSgxLjIyKSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS40Ii8+PHVzZSB4bGluazpocmVmPSIjdHJvcGh5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMiA0MjApIHJvdGF0ZSgtNikgc2NhbGUoMS4yNSkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNCIvPjx1c2UgeGxpbms6aHJlZj0iI3Ryb3BoeSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDk4IDQyMCkgcm90YXRlKC02KSBzY2FsZSgxLjI1KSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS40Ii8+PHVzZSB4bGluazpocmVmPSIjaGVhcnQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1NiAxNSkgcm90YXRlKDE2KSBzY2FsZSgxLjE2KSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHVzZSB4bGluazpocmVmPSIjaGVhcnQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1NiA1MTUpIHJvdGF0ZSgxNikgc2NhbGUoMS4xNikgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNSIvPjx1c2UgeGxpbms6aHJlZj0iI2pveXN0aWNrIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NCAxNDUpIHJvdGF0ZSgtMzUpIHNjYWxlKDAuODcpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjkiLz48dXNlIHhsaW5rOmhyZWY9IiNnZW0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwNyA0NjQpIHJvdGF0ZSgxNSkgc2NhbGUoMC44NikgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjIuMCIvPjx1c2UgeGxpbms6aHJlZj0iI3NoaWVsZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzM3IDE2OCkgcm90YXRlKDE3KSBzY2FsZSgxLjAxKSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS43Ii8+PHVzZSB4bGluazpocmVmPSIjY3Jvd24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM3OSA1OSkgcm90YXRlKC0zNCkgc2NhbGUoMC45OCkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNyIvPjx1c2UgeGxpbms6aHJlZj0iI2JvbHQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwIDM5OSkgcm90YXRlKC0xMSkgc2NhbGUoMC45NCkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuOCIvPjx1c2UgeGxpbms6aHJlZj0iI2RpY2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyNCA5NSkgcm90YXRlKDE4KSBzY2FsZSgxLjI2KSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS4zIi8+PHVzZSB4bGluazpocmVmPSIjc2t1bGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyMiA1OCkgcm90YXRlKC0zNSkgc2NhbGUoMS4wOCkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNiIvPjx1c2UgeGxpbms6aHJlZj0iI2NhcnRyaWRnZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUyIDQ0Mikgcm90YXRlKC0yMykgc2NhbGUoMC45NikgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuOCIvPjx1c2UgeGxpbms6aHJlZj0iI3BvdGlvbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSAzMDUpIHJvdGF0ZSgtMjYpIHNjYWxlKDEuMzIpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjMiLz48dXNlIHhsaW5rOmhyZWY9IiNwb3Rpb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwNSAzMDUpIHJvdGF0ZSgtMjYpIHNjYWxlKDEuMzIpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjMiLz48dXNlIHhsaW5rOmhyZWY9IiNjb250cm9sbGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNyAxMDQpIHJvdGF0ZSgxMikgc2NhbGUoMS4yMCkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNCIvPjx1c2UgeGxpbms6aHJlZj0iI2RpY2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NiAyMjcpIHJvdGF0ZSgtMTgpIHNjYWxlKDEuMzkpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48dXNlIHhsaW5rOmhyZWY9IiNzaGllbGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQzMyA5MSkgcm90YXRlKC00KSBzY2FsZSgwLjkyKSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS44Ii8+PHVzZSB4bGluazpocmVmPSIjYm9sdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTUgMjU2KSByb3RhdGUoMTUpIHNjYWxlKDAuOTgpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjciLz48dXNlIHhsaW5rOmhyZWY9IiNzdGFyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjggNDEyKSByb3RhdGUoMzEpIHNjYWxlKDEuMTgpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjQiLz48dXNlIHhsaW5rOmhyZWY9IiNjcm93biIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODggMzYwKSByb3RhdGUoMjYpIHNjYWxlKDAuODcpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjkiLz48dXNlIHhsaW5rOmhyZWY9IiNqb3lzdGljayIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOCAxMzUpIHJvdGF0ZSgtMzApIHNjYWxlKDEuMDkpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjYiLz48dXNlIHhsaW5rOmhyZWY9IiNqb3lzdGljayIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTA4IDEzNSkgcm90YXRlKC0zMCkgc2NhbGUoMS4wOSkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNiIvPjx1c2UgeGxpbms6aHJlZj0iI2NvaW4iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg4IDE4NCkgcm90YXRlKC0yNCkgc2NhbGUoMS4xNykgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNSIvPjx1c2UgeGxpbms6aHJlZj0iI3N3b3JkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjggMzQ2KSByb3RhdGUoLTMxKSBzY2FsZSgxLjE3KSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS40Ii8+PHVzZSB4bGluazpocmVmPSIjZ2hvc3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ2MiAyMzcpIHJvdGF0ZSgtMzEpIHNjYWxlKDEuMDQpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjYiLz48dXNlIHhsaW5rOmhyZWY9IiNnZW0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ1MCAzNjkpIHJvdGF0ZSgxMCkgc2NhbGUoMS4yNCkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNCIvPjwvZz48L3N2Zz4=");
    background-size: 500px 500px;
    opacity: 0.05;
    pointer-events: none;
}

.login-page-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(108, 124, 224, 0.28), transparent 68%);
    filter: blur(20px);
    pointer-events: none;
}

.login-orb {
    display: none;
}

.login-mega-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    background: rgba(18, 19, 24, 0.55);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    padding: 40px 34px 32px;
    text-align: center;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: loginCardIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes loginCardIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-icon-badge {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(140, 155, 245, 0.4), rgba(108, 124, 224, 0.18));
    border: 1px solid rgba(108, 124, 224, 0.55);
    color: #b9c2ff;
    font-size: 1.6rem;
    box-shadow: 0 0 30px rgba(108, 124, 224, 0.4);
}

.login-icon-badge img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.login-heading {
    color: white;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.login-subheading {
    color: rgb(160, 163, 170);
    font-size: 0.85rem;
    margin-bottom: 28px;
}

.login-form {
    margin-bottom: 12px;
}

.login-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 0 18px;
    height: 50px;
    color: rgb(140, 143, 150);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.login-input-group:focus-within {
    border-color: rgba(108, 124, 224, 0.8);
    background: rgba(108, 124, 224, 0.1);
    box-shadow: 0 0 0 4px rgba(108, 124, 224, 0.15);
}

.login-input-group input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    caret-color: white; /* zonder dit expliciet te zetten bleek de knipperende cursor in sommige
                            browsers onzichtbaar te blijven, ook al is de tekstkleur zelf wit */
    font-size: 0.95rem;
    height: 100%;
}

.login-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Chrome (vooral op desktop) forceert bij autofill een eigen, lichte achtergrond- en tekstkleur
   die de auteurs-CSS hierboven overschrijft -- dat zou de cursor (en de ingevoerde tekst) tegen
   die geforceerde lichte achtergrond onzichtbaar kunnen maken. Deze bekende truc (een extreem
   lange transition-vertraging op background-color) voorkomt dat de browser zijn eigen kleur
   daadwerkelijk zichtbaar toepast, en -webkit-text-fill-color dwingt de tekstkleur alsnog af. */
.login-input-group input:-webkit-autofill,
.login-input-group input:-webkit-autofill:hover,
.login-input-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: white;
    caret-color: white;
    transition: background-color 9999s ease-in-out 0s;
}

.login-primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin-top: 12px;
    background: linear-gradient(135deg, #6c7ce0, #5865c4);
    border: none;
    border-radius: 999px;
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(108, 124, 224, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.login-primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(108, 124, 224, 0.5);
}

.login-secondary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgb(210, 212, 217);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.login-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(108, 124, 224, 0.6);
    transform: translateY(-1px);
}

.login-status {
    margin-top: 10px;
    font-size: 0.78rem;
    color: rgb(150, 153, 160);
    min-height: 16px;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    color: rgb(110, 113, 120);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.login-guest-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    color: rgb(160, 163, 170);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.login-guest-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: white;
    border-color: rgba(108, 124, 224, 0.5);
    text-decoration: none;
}

.login-guest-link span {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ===========================================================
   ZOEKPAGINA (zoek.html / zoek_resultaten.html)
   =========================================================== */
/* ===========================================================
   ZOEKPAGINA -- volledig herbouwd in dezelfde donkere navy-sfeer
   (#070a12) met icoonpatroon als de rest van de site. Geen
   losse cover-bg meer, maar een eigen canvas net als de homepage.
   =========================================================== */
.search-canvas {
    position: relative;
    background: #070a12;
    min-height: 100vh;
}

.search-canvas::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+PGRlZnM+PGcgaWQ9ImJvbHQiPjxwYXRoIGQ9Ik0xMy41IDIuNUw1IDEzLjVoNmwtMSA4IDguNS0xMWgtNnoiLz48L2c+PGcgaWQ9ImNhcnRyaWRnZSI+PHBhdGggZD0iTTcgM2gxMHYxMy41bC0yIDQuNUg5bC0yLTQuNXoiLz48cmVjdCB4PSI5IiB5PSI2IiB3aWR0aD0iNiIgaGVpZ2h0PSI1IiByeD0iLjgiLz48cGF0aCBkPSJNMTAgMThoNCIvPjwvZz48ZyBpZD0iY29pbiI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOC41Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNSIvPjxwYXRoIGQ9Ik0xMiA5LjV2NSIvPjwvZz48ZyBpZD0iY29udHJvbGxlciI+PHBhdGggZD0iTTcgNy41aDEwYTQuNiA0LjYgMCAwIDEgNC41IDUuNGwtLjggNC4yYTIuMyAyLjMgMCAwIDEtMy45IDEuMkwxNC42IDE2SDkuNGwtMi4yIDIuM2EyLjMgMi4zIDAgMCAxLTMuOS0xLjJsLS44LTQuMkE0LjYgNC42IDAgMCAxIDcgNy41eiIvPjxwYXRoIGQ9Ik04IDEwLjV2M002LjUgMTJoMyIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTEuMiIgcj0iLjkiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjEzIiByPSIuOSIvPjwvZz48ZyBpZD0iY3Jvd24iPjxwYXRoIGQ9Ik0zLjUgMTguNWgxN2wxLTEwLTUuMiA0LjJMMTIgNS41IDcuNyAxMi43IDIuNSA4LjV6Ii8+PHBhdGggZD0iTTMuNSAyMWgxNyIvPjwvZz48ZyBpZD0iZGljZSI+PHJlY3QgeD0iNCIgeT0iNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iMy41Ii8+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9Ii45Ii8+PGNpcmNsZSBjeD0iMTUiIGN5PSI5IiByPSIuOSIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9Ii45Ii8+PGNpcmNsZSBjeD0iOSIgY3k9IjE1IiByPSIuOSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9Ii45Ii8+PC9nPjxnIGlkPSJnZW0iPjxwYXRoIGQ9Ik02LjUgNGgxMWw0IDZMMTIgMjEgMi41IDEweiIvPjxwYXRoIGQ9Ik0yLjUgMTBoMTlNOSA0bC0yIDYgNSAxMSA1LTExLTItNiIvPjwvZz48ZyBpZD0iZ2hvc3QiPjxwYXRoIGQ9Ik01IDIwLjV2LTkuMmE3IDcgMCAwIDEgMTQgMHY5LjJsLTIuOC0yLjItMi4yIDIuMi0yLTIuMi0yIDIuMi0yLjItMi4yeiIvPjxjaXJjbGUgY3g9IjkuNSIgY3k9IjExIiByPSIuOSIvPjxjaXJjbGUgY3g9IjE0LjUiIGN5PSIxMSIgcj0iLjkiLz48L2c+PGcgaWQ9ImhlYXJ0Ij48cGF0aCBkPSJNMTIgMjAuNVM0IDE2IDQgOS44QTQuMyA0LjMgMCAwIDEgMTIgNy42YTQuMyA0LjMgMCAwIDEgOCAyLjJjMCA2LjItOCAxMC43LTggMTAuN3oiLz48L2c+PGcgaWQ9ImpveXN0aWNrIj48cmVjdCB4PSI1IiB5PSIxNiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjQuNSIgcng9IjEuNSIvPjxwYXRoIGQ9Ik0xMiAxNlY4LjUiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjYiIHI9IjMiLz48cGF0aCBkPSJNOCAxOC4yaC4wMU0xNiAxOC4yaC4wMSIvPjwvZz48ZyBpZD0ia2V5Ij48Y2lyY2xlIGN4PSI4IiBjeT0iMTIiIHI9IjQiLz48cGF0aCBkPSJNMTIgMTJoOU0xOCAxMnYzLjVNMTUgMTJ2Mi41Ii8+PC9nPjxnIGlkPSJwb3Rpb24iPjxwYXRoIGQ9Ik05LjUgM2g1TTEwLjUgM3Y1LjVMNS44IDE3YTIuNCAyLjQgMCAwIDAgMi4xIDMuNWg4LjJhMi40IDIuNCAwIDAgMCAyLjEtMy41TDEzLjUgOC41VjMiLz48cGF0aCBkPSJNNy44IDE0LjVoOC40Ii8+PC9nPjxnIGlkPSJzaGllbGQiPjxwYXRoIGQ9Ik0xMiAzbDcuNSAzdjUuNWMwIDQuOC0zLjIgOC03LjUgOS41LTQuMy0xLjUtNy41LTQuNy03LjUtOS41VjZ6Ii8+PHBhdGggZD0iTTEyIDh2OCIvPjwvZz48ZyBpZD0ic2t1bGwiPjxwYXRoIGQ9Ik01IDExYTcgNyAwIDAgMSAxNCAwYzAgMi4zLTEgMy44LTIuNSA0LjhWMTlINy41di0zLjJDNiAxNC44MDAgNSAxMy4zMDAgNSAxMXoiLz48Y2lyY2xlIGN4PSI5LjMiIGN5PSIxMS41IiByPSIxLjMiLz48Y2lyY2xlIGN4PSIxNC43IiBjeT0iMTEuNSIgcj0iMS4zIi8+PHBhdGggZD0iTTEwLjUgMTl2LTJNMTMuNSAxOXYtMiIvPjwvZz48ZyBpZD0ic3RhciI+PHBhdGggZD0iTTEyLjAwIDIuNTAgTDE0LjQ3IDguNjAgTDIxLjA0IDkuMDYgTDE1Ljk5IDEzLjMwIEwxNy41OCAxOS42OSBMMTIuMDAgMTYuMjAgTDYuNDIgMTkuNjkgTDguMDEgMTMuMzAgTDIuOTYgOS4wNiBMOS41MyA4LjYwWiIvPjwvZz48ZyBpZD0ic3dvcmQiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1IDEyIDEyKSI+PHBhdGggZD0iTTEyIDEuOGwyLjMgMy4ydjEwLjhIOS43VjV6Ii8+PHBhdGggZD0iTTYuOCAxNmgxMC40TTEyIDE2djQiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjIxLjQiIHI9Ii45Ii8+PC9nPjwvZz48ZyBpZD0idHJvcGh5Ij48cGF0aCBkPSJNOCA0aDh2NS41YTQgNCAwIDAgMS04IDB6Ii8+PHBhdGggZD0iTTggNkg0LjV2MS44QTMuMiAzLjIgMCAwIDAgOCAxMU0xNiA2aDMuNXYxLjhBMy4yIDMuMiAwIDAgMSAxNiAxMU0xMiAxMy41VjE3TTguNSAyMC41aDdNOS41IDE3aDUiLz48L2c+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHVzZSB4bGluazpocmVmPSIja2V5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjYgMjgwKSByb3RhdGUoMjIpIHNjYWxlKDEuMzcpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48dXNlIHhsaW5rOmhyZWY9IiNzd29yZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjU2IDMxNSkgcm90YXRlKDIyKSBzY2FsZSgxLjMwKSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS4zIi8+PHVzZSB4bGluazpocmVmPSIjY2FydHJpZGdlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTIgNDUpIHJvdGF0ZSgtMzApIHNjYWxlKDEuMzEpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjMiLz48dXNlIHhsaW5rOmhyZWY9IiNwb3Rpb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5OCAxOTgpIHJvdGF0ZSgtMTUpIHNjYWxlKDEuMTApIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48dXNlIHhsaW5rOmhyZWY9IiNjb250cm9sbGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTIgNDE2KSByb3RhdGUoLTExKSBzY2FsZSgwLjg3KSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMi4wIi8+PHVzZSB4bGluazpocmVmPSIjY29pbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQwIDMwMCkgcm90YXRlKDIxKSBzY2FsZSgxLjI5KSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS4zIi8+PHVzZSB4bGluazpocmVmPSIjc3RhciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjk1IDk4KSByb3RhdGUoMjgpIHNjYWxlKDAuOTcpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjgiLz48dXNlIHhsaW5rOmhyZWY9IiNnaG9zdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMiA0Mikgcm90YXRlKDM1KSBzY2FsZSgxLjIyKSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS40Ii8+PHVzZSB4bGluazpocmVmPSIjZ2hvc3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwMiA0Mikgcm90YXRlKDM1KSBzY2FsZSgxLjIyKSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS40Ii8+PHVzZSB4bGluazpocmVmPSIjdHJvcGh5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMiA0MjApIHJvdGF0ZSgtNikgc2NhbGUoMS4yNSkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNCIvPjx1c2UgeGxpbms6aHJlZj0iI3Ryb3BoeSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDk4IDQyMCkgcm90YXRlKC02KSBzY2FsZSgxLjI1KSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS40Ii8+PHVzZSB4bGluazpocmVmPSIjaGVhcnQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1NiAxNSkgcm90YXRlKDE2KSBzY2FsZSgxLjE2KSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHVzZSB4bGluazpocmVmPSIjaGVhcnQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1NiA1MTUpIHJvdGF0ZSgxNikgc2NhbGUoMS4xNikgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNSIvPjx1c2UgeGxpbms6aHJlZj0iI2pveXN0aWNrIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NCAxNDUpIHJvdGF0ZSgtMzUpIHNjYWxlKDAuODcpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjkiLz48dXNlIHhsaW5rOmhyZWY9IiNnZW0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwNyA0NjQpIHJvdGF0ZSgxNSkgc2NhbGUoMC44NikgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjIuMCIvPjx1c2UgeGxpbms6aHJlZj0iI3NoaWVsZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzM3IDE2OCkgcm90YXRlKDE3KSBzY2FsZSgxLjAxKSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS43Ii8+PHVzZSB4bGluazpocmVmPSIjY3Jvd24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM3OSA1OSkgcm90YXRlKC0zNCkgc2NhbGUoMC45OCkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNyIvPjx1c2UgeGxpbms6aHJlZj0iI2JvbHQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwIDM5OSkgcm90YXRlKC0xMSkgc2NhbGUoMC45NCkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuOCIvPjx1c2UgeGxpbms6aHJlZj0iI2RpY2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyNCA5NSkgcm90YXRlKDE4KSBzY2FsZSgxLjI2KSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS4zIi8+PHVzZSB4bGluazpocmVmPSIjc2t1bGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyMiA1OCkgcm90YXRlKC0zNSkgc2NhbGUoMS4wOCkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNiIvPjx1c2UgeGxpbms6aHJlZj0iI2NhcnRyaWRnZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUyIDQ0Mikgcm90YXRlKC0yMykgc2NhbGUoMC45NikgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuOCIvPjx1c2UgeGxpbms6aHJlZj0iI3BvdGlvbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSAzMDUpIHJvdGF0ZSgtMjYpIHNjYWxlKDEuMzIpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjMiLz48dXNlIHhsaW5rOmhyZWY9IiNwb3Rpb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwNSAzMDUpIHJvdGF0ZSgtMjYpIHNjYWxlKDEuMzIpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjMiLz48dXNlIHhsaW5rOmhyZWY9IiNjb250cm9sbGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNyAxMDQpIHJvdGF0ZSgxMikgc2NhbGUoMS4yMCkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNCIvPjx1c2UgeGxpbms6aHJlZj0iI2RpY2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NiAyMjcpIHJvdGF0ZSgtMTgpIHNjYWxlKDEuMzkpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48dXNlIHhsaW5rOmhyZWY9IiNzaGllbGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQzMyA5MSkgcm90YXRlKC00KSBzY2FsZSgwLjkyKSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS44Ii8+PHVzZSB4bGluazpocmVmPSIjYm9sdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTUgMjU2KSByb3RhdGUoMTUpIHNjYWxlKDAuOTgpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjciLz48dXNlIHhsaW5rOmhyZWY9IiNzdGFyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjggNDEyKSByb3RhdGUoMzEpIHNjYWxlKDEuMTgpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjQiLz48dXNlIHhsaW5rOmhyZWY9IiNjcm93biIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODggMzYwKSByb3RhdGUoMjYpIHNjYWxlKDAuODcpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjkiLz48dXNlIHhsaW5rOmhyZWY9IiNqb3lzdGljayIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOCAxMzUpIHJvdGF0ZSgtMzApIHNjYWxlKDEuMDkpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjYiLz48dXNlIHhsaW5rOmhyZWY9IiNqb3lzdGljayIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTA4IDEzNSkgcm90YXRlKC0zMCkgc2NhbGUoMS4wOSkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNiIvPjx1c2UgeGxpbms6aHJlZj0iI2NvaW4iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg4IDE4NCkgcm90YXRlKC0yNCkgc2NhbGUoMS4xNykgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNSIvPjx1c2UgeGxpbms6aHJlZj0iI3N3b3JkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjggMzQ2KSByb3RhdGUoLTMxKSBzY2FsZSgxLjE3KSB0cmFuc2xhdGUoLTEyIC0xMikiIHN0cm9rZS13aWR0aD0iMS40Ii8+PHVzZSB4bGluazpocmVmPSIjZ2hvc3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ2MiAyMzcpIHJvdGF0ZSgtMzEpIHNjYWxlKDEuMDQpIHRyYW5zbGF0ZSgtMTIgLTEyKSIgc3Ryb2tlLXdpZHRoPSIxLjYiLz48dXNlIHhsaW5rOmhyZWY9IiNnZW0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ1MCAzNjkpIHJvdGF0ZSgxMCkgc2NhbGUoMS4yNCkgdHJhbnNsYXRlKC0xMiAtMTIpIiBzdHJva2Utd2lkdGg9IjEuNCIvPjwvZz48L3N2Zz4=");
    background-size: 500px 500px;
    opacity: 0.05;
}

.page-shell {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 40px 100px;
}

.games-header {
    margin-bottom: 28px;
}

.page-kicker {
    color: rgb(var(--accent-r, 108), var(--accent-g, 124), var(--accent-b, 224));
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 6px;
}

.total-games-title {
    color: white;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

/* -------------------- Zoekbalk -------------------- */
.search-panel {
    margin-bottom: 32px;
}

.search-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 320px;
    height: 54px;
    padding: 0 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.search-field:focus-within {
    border-color: rgba(108, 124, 224, 0.55);
    background: rgba(255, 255, 255, 0.06);
}

.search-field i.ph-magnifying-glass {
    color: rgb(150, 153, 165);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.search-field input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 0.95rem;
    height: 100%;
}

.search-field input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.search-field-kbd {
    font-size: 11px;
    font-weight: 700;
    color: rgb(150, 153, 165);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    padding: 2px 6px;
    flex-shrink: 0;
}

.search-field-scan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgb(190, 192, 199);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.search-field-scan-btn:hover {
    background: rgba(108, 124, 224, 0.22);
    color: white;
}

/* Barcode scannen is alleen zinvol op een apparaat met een camera dat je
   erop kunt richten -- verborgen op desktop. */
@media (min-width: 860px) {
    .search-field-scan-btn {
        display: none;
    }
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.hero-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(108, 124, 224, 0.6);
    background: rgba(108, 124, 224, 0.14);
    color: white;
    text-decoration: none;
}

.hero-btn-primary {
    background: rgba(108, 124, 224, 0.16);
    border-color: rgba(108, 124, 224, 0.4);
    color: white;
}

.hero-btn.active {
    background: rgba(108, 124, 224, 0.22);
    border-color: rgba(108, 124, 224, 0.6);
}

.filter-count-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: white;
    color: #171a2e;
    font-size: 0.7rem;
    font-weight: 800;
}

.filter-count-badge.show {
    display: inline-flex;
}

/* -------------------- Actieve filters (chips boven de resultaten) -------------------- */
.active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    border-radius: 999px;
    background: rgba(108, 124, 224, 0.16);
    border: 1px solid rgba(108, 124, 224, 0.4);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
}

.active-filter-chip button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    font-size: 0.65rem;
    cursor: pointer;
}

.active-filter-chip button:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* -------------------- Filterpaneel: bottom-sheet op mobiel, gelaagd paneel op desktop -------------------- */
.filters-scrim {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(3, 4, 10, 0.6);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.filters-scrim.open {
    opacity: 1;
    pointer-events: auto;
}

.filters-panel {
    position: fixed;
    z-index: 601;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 100%;
    max-width: 460px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: #12152a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.filters-panel.open {
    transform: translate(-50%, 0);
}

.filters-panel-grip {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    margin: 12px auto 4px;
    flex-shrink: 0;
}

.filters-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 22px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.filters-panel-title {
    color: white;
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
}

.filters-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: white;
    cursor: pointer;
}

.filters-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px 6px;
}

.filter-section {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.filter-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgb(170, 173, 185);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px;
}

.filter-section-title i {
    color: rgb(140, 155, 245);
    font-size: 0.85rem;
}

.filter-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chip {
    position: relative;
    cursor: pointer;
}

.filter-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.filter-chip span {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgb(200, 202, 213);
    font-size: 0.82rem;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.filter-chip input:checked + span {
    background: rgba(108, 124, 224, 0.16);
    border-color: rgba(108, 124, 224, 0.55);
    color: rgb(190, 198, 250);
}

.filter-chip input:focus-visible + span {
    outline: 2px solid rgba(108, 124, 224, 0.8);
    outline-offset: 2px;
}

.filters-panel-footer {
    display: flex;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    background: #12152a;
}

.filters-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    height: 46px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgb(200, 202, 213);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.filters-reset-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
}

.filters-apply-btn {
    flex: 1.4;
    height: 46px;
    border-radius: 999px;
    background: rgba(108, 124, 224, 0.22);
    border: 1px solid rgba(108, 124, 224, 0.5);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

/* -------------------- Populair / resultaten-rooster -------------------- */
.filter-chip-extra {
    display: none;
}

.filter-chip-extra.filter-chip-revealed {
    display: inline-flex;
}

.filter-show-more {
    display: block;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    color: rgb(140, 155, 245);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.filter-show-more:hover {
    color: rgb(170, 182, 250);
    text-decoration: underline;
}

.filter-show-less {
    display: none;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    color: rgb(150, 153, 165);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.filter-show-less:hover {
    color: white;
    text-decoration: underline;
}

.filter-chip span i {
    margin-right: 4px;
    font-size: 0.85rem;
    color: rgb(150, 155, 180);
}

.filter-chip input:checked + span i {
    color: rgb(190, 198, 250);
}

/* -------------------- Platform-tags op de gamekaarten -------------------- */
.result-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 100%;
    overflow: hidden;
}

.result-year {
    color: rgb(150, 153, 165);
    font-size: 0.76rem;
    font-weight: 700;
    flex-shrink: 0;
}

.platform-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgb(215, 217, 228);
    font-size: 0.62rem;
    font-weight: 700;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.platform-tag i {
    font-size: 0.62rem;
    color: rgb(180, 185, 210);
    flex-shrink: 0;
}

.discovery-section {
    margin-top: 8px;
}

.discovery-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 18px;
}

.discovery-title i {
    color: rgb(224, 149, 92);
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px;
}

.result-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.result-card:hover {
    transform: translateY(-4px);
    color: inherit;
    text-decoration: none;
}

.result-cover {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    margin-bottom: 10px;
    background: #12152a;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.18s ease;
}

.result-card:hover .result-cover {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(108, 124, 224, 0.4);
}

.result-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.result-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(9, 10, 20, 0.85);
    backdrop-filter: blur(4px);
    font-size: 0.75rem;
}

.result-badge.owned { color: rgb(190, 170, 255); }
.result-badge.wish { color: rgb(255, 150, 150); }

/* -------------------- Laad-skelet terwijl er gezocht wordt -------------------- */
.result-card-skeleton {
    pointer-events: none;
}
.result-card-skeleton .result-cover,
.result-card-skeleton .result-name,
.result-card-skeleton .result-meta {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: skeletonPulse 1.4s ease-in-out infinite;
    color: transparent;
}
.result-card-skeleton .result-name {
    height: 0.95rem;
    border-radius: 4px;
    margin-top: 2px;
}
.result-card-skeleton .result-meta {
    height: 0.75rem;
    width: 60%;
    border-radius: 4px;
    margin-top: 6px;
}
@keyframes skeletonPulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.result-name {
    color: white;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result-info {
    color: rgb(150, 153, 165);
    font-size: 0.76rem;
    font-weight: 600;
    margin: 0;
}

.result-desc {
    color: rgb(130, 133, 145);
    font-size: 0.74rem;
    line-height: 1.4;
    margin: 6px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pagination-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 40px;
}

.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: white;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pagination-btn:hover {
    background: rgba(108, 124, 224, 0.2);
    border-color: rgba(108, 124, 224, 0.5);
    color: white;
    text-decoration: none;
}

.pagination-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.pagination-page {
    color: white;
    font-weight: 800;
    font-size: 1rem;
    min-width: 24px;
    text-align: center;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    color: rgb(160, 163, 175);
}

.empty-state i {
    font-size: 2.2rem;
    color: rgb(100, 103, 115);
    margin-bottom: 14px;
}

.empty-state p {
    margin: 0;
    font-size: 0.95rem;
}

.list-bottom-spacer {
    height: 20px;
}

/* -------------------- Barcodescanner-modal -------------------- */
.scanner-modal-dialog {
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    min-height: 100vh;
}

.scanner-modal-content {
    width: 100%;
    background: rgba(18, 21, 42, 0.75);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    color: white;
}

.scanner-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.scanner-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(108, 124, 224, 0.18);
    border: 1px solid rgba(108, 124, 224, 0.5);
    color: rgb(160, 172, 245);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.scanner-modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.scanner-modal-sub {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: rgb(170, 173, 185);
}

.scanner-close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: white;
    cursor: pointer;
    z-index: 2;
}

.scanner-close-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.scanner-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #000;
}

.scanner-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scanner-box {
    position: absolute;
    inset: 15% 10%;
    pointer-events: none;
}

.scanner-corner {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 3px solid rgb(140, 155, 245);
}

.scanner-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.scanner-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }
.scanner-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; border-radius: 0 0 0 8px; }
.scanner-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 8px 0; }

.scanner-line {
    position: absolute;
    left: 4%;
    right: 4%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgb(140, 155, 245), transparent);
    box-shadow: 0 0 12px rgba(140, 155, 245, 0.9);
    animation: scanLineMove 2.2s ease-in-out infinite;
}

@keyframes scanLineMove {
    0%, 100% { top: 6%; }
    50% { top: 92%; }
}

.scanner-status {
    text-align: center;
    margin: 16px 0 0;
    font-size: 0.85rem;
    color: rgb(170, 173, 185);
    min-height: 18px;
}

.scanner-status.error {
    color: rgb(235, 140, 140);
    font-weight: 600;
}

@media (max-width: 640px) {
    .page-shell { padding: 24px 20px 80px; }
    .filters-panel { max-width: 100%; }
    .results-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}


/* -------------------- Fase 4: extra filtervelden -------------------- */
.filter-input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.filter-input-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.filter-input {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.filter-input-wide {
    grid-column: 1 / -1;
}

.filter-input > span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgb(160, 163, 175);
}

.filter-input-field {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: white;
    font-size: 0.9rem;
    font-family: inherit;
}

.filter-input-field::placeholder {
    color: rgba(255, 255, 255, 0.28);
}

.filter-input-field:focus {
    outline: none;
    border-color: rgba(108, 124, 224, 0.7);
    background: rgba(108, 124, 224, 0.08);
}

.filters-ignored-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 196, 61, 0.08);
    border: 1px solid rgba(255, 196, 61, 0.25);
    color: rgb(240, 214, 140);
    font-size: 0.82rem;
}