/* =========================================================
   Verkiezingen.css (opgeschoond / code review)
   Let op: inhoudelijk gelijk gehouden, behalve:
   - modal: dubbele scrollbar fix
   - .programma-status selector fix (was "programma-status")
   ========================================================= */

/* ----------------------------
   Layout helpers
---------------------------- */

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.pl-10 {
    padding-left: 10px !important;
}

.col-pixel-width-16 {
    flex: 0 0 16px;
}

.showInMobile {
    display: flex !important;
}

/* ----------------------------
   Cards / items
---------------------------- */

.kandidaat,
.categorie {
    margin-bottom: 10px !important;
}

.kandidaat {
    margin-right: 10px !important;
}

/* Filter card */
.filterCard {
    margin-bottom: 10px;
}

/* ----------------------------
   Buttons
---------------------------- */

.btnFilter {
    margin: 0 !important;
    width: 100% !important;
}

#programmaButton,
#programmaSpotifyButton,
.btnFilter {
    width: 100% !important;
}

/* Banner images */
.btn-banner {
    max-height: 100px;
}

/* ----------------------------
   Subcategorie cards
---------------------------- */

.subcategorie {
    margin-bottom: 10px !important;
    border-color: none !important; /* (zoals je had; effectief doet dit weinig) */
    background-color: #fcf2cf !important;
    border: 0 !important;
    cursor: pointer;
}

    .subcategorie .card-body {
        display: none;
    }

    .subcategorie .btn-link {
        color: black;
        text-wrap: normal;
    }

/* ----------------------------
   Navbar
---------------------------- */

.navbar-toggler {
    color: white;
}

/* ----------------------------
   Modal sizing (zoals je had)
---------------------------- */

.modal-dialog {
    max-width: 1000px !important;
}

/* ----------------------------
   Categorie breedte (zoals je had)
   NB: jouw @media(max-width:2600px) zet dit weer op 100%
---------------------------- */

.categorie {
    width: 45% !important;
}

/* ----------------------------
   Programma vraagbox
---------------------------- */

.programma-vraagbox {
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.programma-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.programma-input {
    height: 52px;
    border-radius: 10px;
}

.programma-btn {
    height: 52px;
    border-radius: 10px;
    padding: 0 22px;
    font-weight: 600;
    white-space: nowrap;
}

    .programma-btn.is-loading {
        opacity: .8;
        pointer-events: none;
    }

    /* Spinner in button */
    .programma-btn .spinner {
        display: none;
        margin-right: 8px;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255,255,255,.4);
        border-top-color: #003366;
        border-radius: 50%;
        animation: spin .8s linear infinite;
        vertical-align: -2px;
    }

    .programma-btn.is-loading .spinner {
        display: inline-block;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Status onder de vraagbox (FIX: was "programma-status" zonder punt) */
.programma-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #555;
}

/* Basis spinner */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(0,0,0,.15);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

    /* Donkere variant */
    .spinner.dark {
        border-top-color: #003366;
    }

    /* Lichte variant */
    .spinner.light {
        border: 2px solid rgba(255,255,255,.4);
        border-top-color: #ffffff;
    }

/* ----------------------------
   Kandidaat modal helpers (zoals je had)
---------------------------- */

.kandidaat-modal-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0,0,0,.08);
}

/* Info button (zoals je had) */
.card.kandidaat {
    position: relative;
}

.kandidaat-info {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}

    .kandidaat-info i {
        font-size: 18px;
        color: #000;
    }

    .kandidaat-info:hover {
        background: rgba(255,255,255,1);
    }

/* =========================================================
   MODAL SCROLL FIX (enkel functionele wijziging)
   Doel: 1 scrollbar (alleen in modal-body), geen dubbele scrollbars
   Vereist: modal-dialog-scrollable op .modal-dialog (zoals jij al deed)
   ========================================================= */

body.modal-open {
    overflow: hidden !important;
}

#modal-fullscreen.modal {
    overflow: hidden !important;
}

#modal-fullscreen .modal-content {
    overflow: hidden !important;
}

/* Alleen modal-body scrollt */
#modal-fullscreen .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Jouw kandidaat-modal-body had eigen scroll; binnen modal zetten we die uit */
#modal-fullscreen .kandidaat-modal-body {
    max-height: none !important;
    overflow: visible !important;
}

/* =========================================================
   Responsive / media queries (zoals je had, alleen netjes geordend)
   ========================================================= */

/* Groot: categorie altijd 100% (zoals je had) */
@media (max-width: 2600px) {
    .categorie {
        width: 100% !important;
    }
}

/* Filterbox typography (zoals je had) */
@media (max-width: 1700px) {
    #tagFilterBox .card-body {
        font-size: 19px;
        padding: 10px !important;
    }
}

@media (max-width: 1600px) {
    #tagFilterBox .card-body {
        font-size: 18px;
        padding: 8px !important;
    }
}

@media (max-width: 1500px) {
    #tagFilterBox .card-body {
        font-size: 17px;
        padding: 5px !important;
    }
}

@media (max-width: 1400px) {
    .filterCard {
        font-size: 18px;
    }

    #tagFilterBox .card-body {
        font-size: 15px;
        padding: 5px !important;
    }
}

@media (max-width: 1300px) {
    .filterCard {
        font-size: 14px;
    }

    #tagFilterBox .card-body {
        padding: 5px !important;
        font-size: 13px;
    }
}

@media (max-width: 1200px) {
    #tagFilterBox .card-body {
        font-size: 15px;
        padding: 8px !important;
    }
}

@media (max-width: 1100px) {
    .filterCard {
        font-size: 13px;
    }

    #tagFilterBox .card-body {
        font-size: 13px;
        padding: 5px !important;
    }
}

/* Bootstrap lg breakpoint */
@media (max-width: 992px) {
    .col {
        padding: 0 !important;
    }

    .filterCard {
        font-size: 18px;
    }

    h5 {
        font-size: 18px !important;
    }

    .modal-dialog {
        max-width: 700px !important;
    }

    #tagFilterBox .card-body {
        padding: 1.25rem !important;
        font-size: 18px !important;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .kandidaat,
    .categorie,
    .filterCard {
        width: 95% !important;
        margin-left: 2.5% !important;
    }

    .btnFilter {
        width: 100% !important;
        margin-left: 0 !important;
    }

    h5 {
        font-size: 16px !important;
    }

    .pl-10 {
        padding-left: 0;
    }

    .modal-dialog {
        max-width: 500px !important;
    }

    .card-body p {
        font-size: 15px !important;
    }

    /* Programma: stack */
    .programma-row {
        flex-direction: column;
    }

    .programma-btn {
        width: 100%;
    }

    /* Kandidaat card (zoals je had) */
    .card.kandidaat {
        width: 95% !important;
        margin-left: 2.5% !important;
    }
}

/* Extra: jouw bestaande @media (max-width:576px) blok was genest en daardoor ongeldig.
   Ik behoud de intentie zonder gedrag te wijzigen. */
@media (max-width: 576px) {
    .btn-primary {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .categorie,
    .filterCard {
        width: 100% !important;
        margin-left: 0 !important;
    }
}