/**
 * VoordeligBHV Opleidingen Plugin Stylesheet
 * 
 * Moderne en responsive styling voor BHV opleidingen weergave en inschrijfformulier
 * 
 * @version 3.0
 * @author KHO
 */



.bhv-opleidingen-container {
    width: 100%;
    max-width: 900px;
}


.bhv-opleiding-kaart {
    display: flex;
    background: url('https://test.gpenergy.nl/wp-content/uploads/2025/08/brand-blussen.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 30px;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}
    
    .bhv-opleiding-kaart::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6));
        pointer-events: none;
        z-index: 1;
    }
    
    /* Kaart met aangepaste afbeelding achtergrond */
    .bhv-opleiding-kaart[style*="background-image"] {
        background-blend-mode: overlay;
    }
    
    /* bhv-datum-blok verwijderd - nu geïntegreerd in bhv-details-blok */
    
    .bhv-details-blok {
        padding: 3rem 2.5rem;
        flex: 1;
        position: relative;
        z-index: 2;
        color: #ffffff;
    }
    
    .bhv-datum-tijd {
        display: flex;
        gap: .25rem;
        flex-wrap: wrap;
        font: var(--p);
    }
    
    .bhv-datum,
    .bhv-tijd {
        color: #ffffff;
        border-radius: 15px;
        font-size: 0.9em;
    }
    
    .bhv-datum:after {
        content: ' /';
    }
    
    /* ==========================================================================
         BHV OPLEIDING DETAILS STYLING
         Styling voor titels, teksten en informatie items
         ========================================================================== */
    
    .bhv-details-blok h3 {
        margin: .75rem 0 1rem 0;
        color: #ffffff;
    }
    
.bhv-info-lijst {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 1.5rem 0;
    font-size: 1rem !important;
    font: var(--p);
}
    
    .bhv-info-lijst li {
        color: #ffffff;
        display: flex;
        gap: .5rem;
        align-items: center;
        margin-bottom: .75rem;
    }
    
    /* Iconen voor locatie, prijs en certificering informatie */
    .bhv-info-lijst .bhv-locatie::before {
        content: "";
        background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_5857_672" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%"><rect width="100%" height="100%" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_5857_672)"><path d="M10.0001 10C10.4584 10 10.8508 9.83682 11.1772 9.51044C11.5035 9.18405 11.6667 8.79169 11.6667 8.33335C11.6667 7.87502 11.5035 7.48266 11.1772 7.15627C10.8508 6.82988 10.4584 6.66669 10.0001 6.66669C9.54174 6.66669 9.14938 6.82988 8.82299 7.15627C8.4966 7.48266 8.33341 7.87502 8.33341 8.33335C8.33341 8.79169 8.4966 9.18405 8.82299 9.51044C9.14938 9.83682 9.54174 10 10.0001 10ZM10.0001 16.125C11.6945 14.5695 12.9515 13.1563 13.7709 11.8854C14.5904 10.6146 15.0001 9.48613 15.0001 8.50002C15.0001 6.98613 14.5174 5.74655 13.5522 4.78127C12.5869 3.81599 11.4029 3.33335 10.0001 3.33335C8.59729 3.33335 7.41327 3.81599 6.44799 4.78127C5.48271 5.74655 5.00007 6.98613 5.00007 8.50002C5.00007 9.48613 5.40979 10.6146 6.22924 11.8854C7.04868 13.1563 8.30563 14.5695 10.0001 16.125ZM10.0001 18.3334C7.76396 16.4306 6.09382 14.6632 4.98965 13.0313C3.88549 11.3993 3.3334 9.88891 3.3334 8.50002C3.3334 6.41669 4.00354 4.75696 5.34382 3.52085C6.6841 2.28474 8.23618 1.66669 10.0001 1.66669C11.764 1.66669 13.316 2.28474 14.6563 3.52085C15.9966 4.75696 16.6667 6.41669 16.6667 8.50002C16.6667 9.88891 16.1147 11.3993 15.0105 13.0313C13.9063 14.6632 12.2362 16.4306 10.0001 18.3334Z" fill="%23EB5E28"/></g></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-right: 10px;
        margin-top: -.25rem;
        width: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: middle;
    }
    
    .bhv-info-lijst .bhv-prijs::before {
        content: "";
        background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_5857_667" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%"><rect width="100%" height="100%" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_5857_667)"><path d="M9.16668 15H10.8333V14.1667H11.6667C11.9028 14.1667 12.1007 14.0868 12.2604 13.9271C12.4201 13.7674 12.5 13.5695 12.5 13.3334V10.8334C12.5 10.5972 12.4201 10.3993 12.2604 10.2396C12.1007 10.0799 11.9028 10 11.6667 10H9.16668V9.16669H12.5V7.50002H10.8333V6.66669H9.16668V7.50002H8.33334C8.09723 7.50002 7.89932 7.57988 7.73959 7.7396C7.57987 7.89933 7.50001 8.09724 7.50001 8.33335V10.8334C7.50001 11.0695 7.57987 11.2674 7.73959 11.4271C7.89932 11.5868 8.09723 11.6667 8.33334 11.6667H10.8333V12.5H7.50001V14.1667H9.16668V15ZM5.00001 18.3334C4.54168 18.3334 4.14932 18.1702 3.82293 17.8438C3.49654 17.5174 3.33334 17.125 3.33334 16.6667V3.33335C3.33334 2.87502 3.49654 2.48266 3.82293 2.15627C4.14932 1.82988 4.54168 1.66669 5.00001 1.66669H11.6667L16.6667 6.66669V16.6667C16.6667 17.125 16.5035 17.5174 16.1771 17.8438C15.8507 18.1702 15.4583 18.3334 15 18.3334H5.00001ZM5.00001 16.6667H15V7.37502L10.9583 3.33335H5.00001V16.6667Z" fill="%23EB5E28"/></g></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-right: 10px;
        margin-top: -.25rem;
        width: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: middle;
    }
    
    .bhv-info-lijst .bhv-nikta::before {
        content: "";
        background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_5857_677" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%"><rect width="100%" height="100%" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_5857_677)"><path d="M10.0001 10.8333C9.30566 10.8333 8.71538 10.5902 8.22927 10.1041C7.74316 9.61801 7.5001 9.02774 7.5001 8.33329C7.5001 7.63885 7.74316 7.04857 8.22927 6.56246C8.71538 6.07635 9.30566 5.83329 10.0001 5.83329C10.6945 5.83329 11.2848 6.07635 11.7709 6.56246C12.257 7.04857 12.5001 7.63885 12.5001 8.33329C12.5001 9.02774 12.257 9.61801 11.7709 10.1041C11.2848 10.5902 10.6945 10.8333 10.0001 10.8333ZM5.0001 19.1666V12.7291C4.47232 12.1458 4.0626 11.4791 3.77094 10.7291C3.47927 9.97913 3.33344 9.18051 3.33344 8.33329C3.33344 6.47218 3.97927 4.89579 5.27094 3.60413C6.5626 2.31246 8.13899 1.66663 10.0001 1.66663C11.8612 1.66663 13.4376 2.31246 14.7293 3.60413C16.0209 4.89579 16.6668 6.47218 16.6668 8.33329C16.6668 9.18051 16.5209 9.97913 16.2293 10.7291C15.9376 11.4791 15.5279 12.1458 15.0001 12.7291V19.1666L10.0001 17.5L5.0001 19.1666ZM10.0001 13.3333C11.389 13.3333 12.5695 12.8472 13.5418 11.875C14.514 10.9027 15.0001 9.72218 15.0001 8.33329C15.0001 6.9444 14.514 5.76385 13.5418 4.79163C12.5695 3.8194 11.389 3.33329 10.0001 3.33329C8.61121 3.33329 7.43066 3.8194 6.45844 4.79163C5.48621 5.76385 5.0001 6.9444 5.0001 8.33329C5.0001 9.72218 5.48621 10.9027 6.45844 11.875C7.43066 12.8472 8.61121 13.3333 10.0001 13.3333ZM6.66677 16.6875L10.0001 15.8333L13.3334 16.6875V14.1041C12.8473 14.3819 12.323 14.6007 11.7605 14.7604C11.198 14.9201 10.6112 15 10.0001 15C9.38899 15 8.80219 14.9201 8.23969 14.7604C7.67719 14.6007 7.15288 14.3819 6.66677 14.1041V16.6875Z" fill="%23EB5E28"/></g></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-right: 10px;
        margin-top: -.25rem;
        width: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: middle;
    }
    
    /* ==========================================================================
       BUTTON WRAPPER
       Wrapper voor button en beschikbare plekken naast elkaar
       ========================================================================== */
    
    .bhv-button-wrapper {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-top: 12px;
        flex-wrap: wrap;
    }
    
    /* ==========================================================================
       BESCHIKBARE PLEKKEN STYLING
       Styling voor het tonen van beschikbare plekken per cursus
       ========================================================================== */
    
.bhv-beschikbare-plekken {
    display: inline-block;
    color: #ccc;
    font: var(--p);
    font-size: .9rem;
}
    
    /* Bijna vol - waarschuwingskleur (3 plekken of minder) */
    .bhv-beschikbare-plekken.bhv-bijna-vol {
        color: #ffc107;
    }
    
    .bhv-beschikbare-plekken.bhv-bijna-vol::before {
        background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_5857_680" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%"><rect width="100%" height="100%" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_5857_680)"><path d="M1.66675 18.3334V15.8334H3.33341V8.33335C3.33341 7.27085 3.57299 6.28474 4.05216 5.37502C4.53133 4.4653 5.18758 3.73613 6.02091 3.18752V2.50002C6.02091 2.0278 6.18411 1.62502 6.51049 1.29169C6.83688 0.958354 7.23619 0.791687 7.70841 0.791687C8.18063 0.791687 8.57994 0.958354 8.90633 1.29169C9.23271 1.62502 9.39591 2.0278 9.39591 2.50002V3.18752C10.2292 3.73613 10.8855 4.4653 11.3647 5.37502C11.8438 6.28474 12.0834 7.27085 12.0834 8.33335V15.8334H13.7501V18.3334H1.66675ZM7.70841 20.8334C7.22925 20.8334 6.82119 20.6632 6.48425 20.3229C6.14731 19.9826 5.97883 19.5695 5.97925 19.0834H9.43758C9.43758 19.5695 9.26911 19.9826 8.93216 20.3229C8.59522 20.6632 8.18716 20.8334 7.70841 20.8334ZM15.0001 11.6667C14.7362 11.6667 14.5105 11.5729 14.323 11.3854C14.1355 11.1979 14.0417 10.9723 14.0417 10.7084V5.83335C14.0417 5.56946 14.1355 5.34377 14.323 5.15627C14.5105 4.96877 14.7362 4.87502 15.0001 4.87502C15.264 4.87502 15.4896 4.96877 15.6771 5.15627C15.8646 5.34377 15.9584 5.56946 15.9584 5.83335V10.7084C15.9584 10.9723 15.8646 11.1979 15.6771 11.3854C15.4896 11.5729 15.264 11.6667 15.0001 11.6667ZM17.9167 10C17.6529 10 17.4272 9.90627 17.2397 9.7188C17.0522 9.53133 16.9584 9.30563 16.9584 9.0417V7.50002C16.9584 7.23613 17.0522 7.01044 17.2397 6.82294C17.4272 6.63544 17.6529 6.54169 17.9167 6.54169C18.1806 6.54169 18.4063 6.63544 18.5938 6.82294C18.7813 7.01044 18.8751 7.23613 18.8751 7.50002V9.0417C18.8751 9.30563 18.7813 9.53133 18.5938 9.7188C18.4063 9.90627 18.1806 10 17.9167 10Z" fill="%23FFC107"/></g></svg>');
    }
    
    /* VOL - rode achtergrond */
    .bhv-beschikbare-plekken.bhv-vol {
        background: rgba(220, 53, 69, 0.3);
        color: #dc3545;
        font-weight: 700;
        text-transform: uppercase;
    }
    
    .bhv-beschikbare-plekken.bhv-vol::before {
        background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_5857_690" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%"><rect width="100%" height="100%" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_5857_690)"><path d="M6.66675 15L10.0001 13.25L13.3334 15V5.00002H6.66675V15ZM10.0001 18.3334C8.8473 18.3334 7.76397 18.1146 6.75008 17.6771C5.73619 17.2396 4.85425 16.6459 4.10425 15.8959C3.35425 15.1459 2.76052 14.2639 2.32299 13.25C1.88547 12.2361 1.66672 11.1528 1.66675 10C1.66675 8.8473 1.88552 7.76397 2.32308 6.75002C2.76064 5.73613 3.35439 4.85419 4.10433 4.10419C4.85425 3.35419 5.73619 2.76044 6.75008 2.32294C7.76397 1.88544 8.8473 1.66669 10.0001 1.66669C11.1528 1.66669 12.2362 1.88544 13.2501 2.32294C14.264 2.76044 15.1459 3.35419 15.8959 4.10419C16.6459 4.85419 17.2396 5.73613 17.6771 6.75002C18.1146 7.76397 18.3334 8.8473 18.3334 10C18.3334 11.1528 18.1146 12.2361 17.6771 13.25C17.2396 14.2639 16.6459 15.1459 15.8959 15.8959C15.1459 16.6459 14.264 17.2396 13.2501 17.6771C12.2362 18.1146 11.1528 18.3334 10.0001 18.3334Z" fill="%23DC3545"/></g></svg>');
    }
    
    /* ==========================================================================
         BHV INSCHRIJF KNOP
         Primaire actie knop voor inschrijvingen
         ========================================================================== */
    
    .bhv-inschrijf-knop {
        background: #EB5E28;
        color: #ffffff;
        padding: 12px 28px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        text-align: center;
        display: inline-block;
        text-decoration: none;
        font: var(--p);
        font-size: 1rem;
        font-weight: 600;
        min-height: 44px; /* Touch-vriendelijke minimale hoogte */
    }
    
    .bhv-inschrijf-knop:hover {
        background: #C85022;
        color: #ffffff;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgb(30, 34, 37, 0.4);
    }
    
    .bhv-inschrijf-knop:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(235, 94, 40, 0.3);
    }
    
    .bhv-inschrijf-knop:active {
        transform: translateY(0);
    }
    
    /* VOL knop styling */
    .bhv-inschrijf-knop.bhv-knop-vol {
        background: #6c757d;
        cursor: not-allowed;
        opacity: 0.7;
    }
    
    .bhv-inschrijf-knop.bhv-knop-vol:hover {
        background: #6c757d;
        transform: none;
        box-shadow: none;
    }
    
    /* ==========================================================================
         LOADING STATES EN ANIMATIES
         Styling voor formulier loading states en feedback
         ========================================================================== */
    
    .bhv-submit-knop.loading {
        background: linear-gradient(135deg, #cccccc, #aaaaaa) !important;
        cursor: not-allowed;
        opacity: 0.7;
        position: relative;
    }
    
    .bhv-submit-knop.loading::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -8px;
        margin-top: -8px;
        width: 16px;
        height: 16px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        border-top-color: transparent;
        animation: bhv-spinner 0.8s linear infinite;
    }
    
    @keyframes bhv-spinner {
        to {
            transform: rotate(360deg);
        }
    }
    
    .bhv-loading {
        pointer-events: none;
        opacity: 0.8;
    }
    
    .loading-indicator {
        padding: 10px;
        text-align: center;
        font-weight: 500;
        color: #EB5E28;
        background: rgba(234, 137, 50, 0.1);
        border-radius: 4px;
        margin-top: 15px;
        animation: bhv-pulse 1.5s ease-in-out infinite;
    }
    
    @keyframes bhv-pulse {
    
        0%,
        100% {
            opacity: 1;
        }
    
        50% {
            opacity: 0.7;
        }
    }
    
    /* ==========================================================================
         STATUS BERICHTEN
         Feedback berichten voor gebruikersacties
         ========================================================================== */
    
    .opleidingen-message {
        padding: 16px 24px;
        border-radius: 8px;
        margin-bottom: 24px;
        font-weight: 500;
        line-height: 1.5;
        border-left: 4px solid;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .opleidingen-message::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 1.2em;
    }
    
    .opleidingen-message-success {
        background: #d4edda;
        color: #155724;
        border-color: #28a745;
        border-left-color: #28a745;
    }
    
    .opleidingen-message-success::before {
        content: "\f00c";
        color: #28a745;
    }
    
    .opleidingen-message-error {
        background: #f8d7da;
        color: #721c24;
        border-color: #dc3545;
        border-left-color: #dc3545;
    }
    
    .opleidingen-message-error::before {
        content: "\f071";
        color: #dc3545;
    }
    
    .opleidingen-message-warning {
        background: #fff3cd;
        color: #856404;
        border-color: #ffc107;
        border-left-color: #ffc107;
    }
    
    .opleidingen-message-warning::before {
        content: "\f06a";
        color: #ffc107;
    }
    
    /* ==========================================================================
         GEEN RESULTATEN WEERGAVE
         Styling voor wanneer geen opleidingen gevonden zijn
         ========================================================================== */
    
    .bhv-geen-resultaten {
        text-align: center;
        padding: 60px 30px;
        color: #6c757d;
        background: #f8f9fa;
        border-radius: 8px;
        border: 2px dashed #dee2e6;
    }
    
    .bhv-geen-resultaten::before {
        content: "\f119";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 3em;
        color: #adb5bd;
        display: block;
        margin-bottom: 16px;
    }
    
    .bhv-geen-resultaten p {
        font-size: 1.1em;
        margin: 0;
        font-style: italic;
    }
    
    /* ==========================================================================
         BHV MODAL STYLING
         Popup modal voor inschrijfformulier met afbeelding ondersteuning
    
         - Modal toont afbeelding links van het formulier (desktop)
         - Afbeelding bovenaan op mobiele apparaten
         - Formulier heeft flexibele layout met responsive gedrag
         - Ondersteunt zowel opleidingen met als zonder afbeelding
         ========================================================================== */
    
    .bhv-modal {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        background: rgba(0, 0, 0, 0.4);
        justify-content: center;
        align-items: flex-start;
        padding: 20px 0;
    }
    
    .bhv-modal-flexwrap {
        display: flex;
        align-items: stretch;
        max-width: 900px;
        width: 98vw;
        max-height: 85vh;
        background: #ffffff;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
        position: relative;
        animation: bhvModalPopIn 0.3s ease-out;
        margin: auto;
    }
    
    .bhv-modal-imgwrap {
        width: 300px;
        background: #f8f9fa;
        flex-shrink: 0;
    }
    
    .bhv-modal-imgwrap img {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        width: 100%;
        object-fit: cover;
        display: block;
        margin: auto;
    }
    
    .bhv-modal-content {
        padding: 3rem 2.5rem;
        flex: 1;
        position: relative;
        min-width: 240px;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100vh - 40px);
    }
    
    @keyframes bhvModalPopIn {
        from {
            transform: scale(0.9) translateY(-20px);
            opacity: 0;
        }
    
        to {
            transform: scale(1) translateY(0);
            opacity: 1;
        }
    }
    
    .bhv-modal-sluiten {
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 24px;
        font-weight: bold;
        color: #6c757d;
        background: rgba(255, 255, 255, 0.9);
        border: none;
        cursor: pointer;
        width: 36px; /* Grotere touch target */
        height: 36px; /* Grotere touch target */
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s ease;
        z-index: 50;
    }
    
    .bhv-modal-sluiten:hover {
        color: #EB5E28;
        background: rgba(235, 94, 40, 0.1);
    }
    
    .bhv-modal-sluiten:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(235, 94, 40, 0.3);
        color: #EB5E28;
    }
    
    .bhv-modal-sluiten:active {
        transform: scale(0.95);
    }
    
    /* ==========================================================================
         BHV MODAL CONTENT STYLING
         Styling voor modal titel en teksten
         ========================================================================== */
    
.bhv-modal-content h2 {
    margin: 0 0 .5rem 0;
    color: var(--text-dark);
    font: var(--h4);
}
    
    .bhv-modal-content p {
        margin: 0 0 1.5rem 0;
        line-height: 1.5;
        color: #495057;
        font-size: 1em;
    }
    
    /* ==========================================================================
         BHV INSCHRIJF FORMULIER STYLING
         Styling voor het inschrijfformulier in de modal
         ========================================================================== */
    
    .bhv-form-group {
        margin-bottom: 20px;
        position: relative;
    }
    
    /* Twee-kolommen formulier layout */
    .bhv-form-row {
        display: flex;
        gap: 1.5rem;
    }
    
    .bhv-form-col {
        flex: 1;
        position: relative;
    }
    
    .bhv-form-col .bhv-form-group {
        margin-bottom: 0;
    }
    
    .bhv-inschrijf-formulier label {
        font-weight: 600 !important;
        color: var(--text-dark);
        display: block;
        font: var(--p);
        font-size: .9rem;
    }
    
    .bhv-inschrijf-formulier input[type=text],
    .bhv-inschrijf-formulier input[type=email],
    .bhv-inschrijf-formulier input[type=tel],
    .bhv-inschrijf-formulier input[type=date] {
        width: 100%;
        padding: 12px;
        margin-bottom: 16px;
        border: 2px solid #e9ecef;
        border-radius: 6px;
        font-size: 1em;
        box-sizing: border-box;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        -webkit-appearance: none; /* Verwijder native styling op iOS */
        -moz-appearance: none;
        appearance: none;
    }
    
    .bhv-inschrijf-formulier input[type=text]:focus,
    .bhv-inschrijf-formulier input[type=email]:focus,
    .bhv-inschrijf-formulier input[type=tel]:focus,
    .bhv-inschrijf-formulier input[type=date]:focus {
        outline: none;
        border-color: #EB5E28;
        box-shadow: 0 0 0 3px rgba(235, 94, 40, 0.1);
    }
    
    .bhv-inschrijf-formulier input[type="checkbox"] {
        margin-right: 8px;
        vertical-align: middle;
        transform: scale(1.1);
        min-width: 18px;
        min-height: 18px;
        cursor: pointer;
    }
    
    .bhv-inschrijf-formulier input[type="checkbox"]:focus {
        outline: 2px solid #EB5E28;
        outline-offset: 2px;
    }
    
    .bhv-voorwaarden {
        font-size: 0.95em;
        margin-top: .5rem;
        margin-bottom: 1.5rem;
        padding: 1rem 1.25rem;
        background: #f8f9fa;
        border-radius: .5rem;
    }
    
    .bhv-voorwaarden label {
        font-weight: 400;
        line-height: 1.4;
        cursor: pointer;
        margin: 0;
    }


    .bhv-voorwaarden-tekst {
        font-size: .8rem !important;
        margin: .5rem 0 0 !important;
      }
    
    /* ==========================================================================
         Submit Button Styles
         ========================================================================== */
    
    .bhv-submit-knop {
        background: #EB5E28;
        color: #ffffff;
        padding: 14px 32px;
        border: none;
        border-radius: .5rem;
        cursor: pointer;
        text-transform: uppercase;
        transition: all 0.3s ease;
        text-align: center;
        display: inline-block;
        min-height: 48px; /* Touch-vriendelijke minimale hoogte */
        font-weight: 600;
        letter-spacing: 0.5px;
    }
    
    .bhv-submit-knop:hover {
        background: linear-gradient(135deg, #d17a28, #b86b22);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(234, 137, 50, 0.4);
    }
    
    .bhv-submit-knop:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(235, 94, 40, 0.3), 0 6px 20px rgba(234, 137, 50, 0.4);
    }
    
    .bhv-submit-knop:active {
        transform: translateY(0);
    }
    
    .bhv-submit-knop:disabled {
        background: #cccccc;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
    
    
    /* ==========================================================================
         Responsive Design
         ========================================================================== */
    
    /* Tablet en kleinere desktops */
    @media (max-width: 900px) {
        .bhv-modal-flexwrap {
            max-width: 750px;
        }
        
        .bhv-modal-imgwrap {
            width: 250px;
        }
        
        .bhv-modal-content {
            padding: 2.5rem 2rem;
        }
    }
    
    /* Tablets */
    @media (max-width: 768px) {
        .bhv-modal {
            padding: 10px;
            align-items: center;
        }
        
        .bhv-modal-flexwrap {
            width: 95vw;
            max-width: 600px;
            max-height: 90vh;
        }
        
        .bhv-modal-imgwrap {
            width: 200px;
        }
        
        .bhv-modal-content {
            padding: 2rem 1.75rem;
            max-height: 90vh;
        }
        
        .bhv-modal-content h2 {
            font-size: 1.4rem;
        }
        
        /* Kleinere form gaps op tablets */
        .bhv-form-row {
            gap: 1rem;
        }
    }
    
    /* Mobiel landscape en kleine tablets */
    @media (max-width: 700px) {
        .bhv-modal {
            padding: 5px;
        }
    
        .bhv-modal-flexwrap {
            flex-direction: column;
            width: 96vw;
            max-height: 92vh;
        }
    
        .bhv-modal-imgwrap {
            width: 100%;
            min-height: 140px;
            max-height: 180px;
            flex-shrink: 0;
            order: -1;
        }
    
        .bhv-modal-imgwrap img {
            max-height: 180px;
            width: 100%;
            object-fit: cover;
        }
    
        .bhv-modal-content {
            overflow-y: auto;
            flex: 1;
            min-height: 0;
            padding: 2rem 1.5rem;
            max-height: calc(92vh - 180px);
        }
        
        .bhv-modal-content h2 {
            font-size: 1.3rem;
            margin-bottom: 0.75rem;
        }
        
        .bhv-modal-content p {
            font-size: 0.95rem;
            margin-bottom: 1.25rem;
        }
    
        .bhv-opleiding-kaart {
            flex-direction: column;
            max-width: 100%;
        }
    
        /* Formulier velden onder elkaar op mobiel */
        .bhv-form-row {
            flex-direction: column;
            gap: 0;
        }
        
        .bhv-form-group {
            margin-bottom: 16px;
        }
        
        .bhv-inschrijf-formulier label {
            font-size: 0.85rem;
        }
        
        .bhv-inschrijf-formulier input[type=text],
        .bhv-inschrijf-formulier input[type=email],
        .bhv-inschrijf-formulier input[type=tel],
        .bhv-inschrijf-formulier input[type=date] {
            padding: 11px;
            margin-bottom: 12px;
            font-size: 16px; /* Voorkomt zoom op iOS */
        }
        
        .bhv-voorwaarden {
            padding: 0.875rem 1rem;
            margin-bottom: 1.25rem;
        }
        
        .bhv-voorwaarden label {
            font-size: 0.9rem;
        }
        
        .bhv-voorwaarden-tekst {
            font-size: 0.75rem !important;
        }
        
        .bhv-submit-knop {
            width: 100%;
            padding: 13px 28px;
            font-size: 0.95rem;
        }
    }
    
    /* Kleine mobiele apparaten */
    @media (max-width: 500px) {
        .bhv-modal {
            padding: 0;
        }
        
        .bhv-modal-flexwrap {
            width: 100vw;
            max-height: 100vh;
            border-radius: 0;
        }
        
        .bhv-modal-imgwrap {
            display: none !important;
        }
        
        .bhv-modal-imgwrap img {
            max-height: 150px;
        }
        
        .bhv-modal-content {
            padding: 1.75rem 1.25rem;
            max-height: 95svh;
            border-radius: 24px;
        }
        
        .bhv-modal-content h2 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }
        
        .bhv-modal-content p {
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }
        
        .bhv-details-blok {
            padding: 2.25rem 2rem !important;
        }
        
        .bhv-form-group {
            margin-bottom: 14px;
        }
        
        .bhv-inschrijf-formulier input[type=text],
        .bhv-inschrijf-formulier input[type=email],
        .bhv-inschrijf-formulier input[type=tel],
        .bhv-inschrijf-formulier input[type=date] {
            padding: 10px;
            margin-bottom: 10px;
        }
        
        .bhv-voorwaarden {
            padding: 0.75rem 0.875rem;
            margin-bottom: 1rem;
        }
        
        .bhv-submit-knop {
            padding: 12px 24px;
        }
        
        .bhv-modal-sluiten {
            top: 8px;
            right: 8px;
            width: 40px; /* Grotere touch target op mobiel */
            height: 40px;
            min-width: 40px;
            min-height: 40px;
            font-size: 22px;
        }
    }
    
    /* Extra kleine mobiele apparaten */
    @media (max-width: 380px) {
        .bhv-modal-content {
            padding: 1.5rem 1rem;
        }
        
        .bhv-modal-content h2 {
            font-size: 1.1rem;
        }
        
        .bhv-inschrijf-formulier label {
            font-size: 0.8rem;
        }
        
        .bhv-voorwaarden label {
            font-size: 0.85rem;
        }
        
        .bhv-submit-knop {
            font-size: 0.9rem;
            padding: 11px 20px;
        }
    }
    
    /* ==========================================================================
         Loading States
         ========================================================================== */
    
    .bhv-loading {
        opacity: 0.6;
        pointer-events: none;
    }
    
    .bhv-submit-knop.loading::after {
        content: '';
        width: 16px;
        height: 16px;
        margin-left: 10px;
        border: 2px solid transparent;
        border-top: 2px solid #ffffff;
        border-radius: 50%;
        display: inline-block;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
    
        100% {
            transform: rotate(360deg);
        }
    }
    
    /* Enhanced form validation styling */
    .bhv-inschrijf-formulier .has-error input {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1) !important;
    }
    
    .bhv-inschrijf-formulier .has-success input {
        border-color: #28a745 !important;
        box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1) !important;
    }
    
    .error-message {
        color: #dc3545;
        font-size: 0.9em;
        margin-top: 4px;
        font-weight: 500;
        display: flex;
        align-items: center;
    }
    
    .error-message::before {
        content: '⚠';
        margin-right: 5px;
    }
    
    /* Progress bar styling - VERWIJDERD */
    
    /* Enhanced loading indicator */
    .loading-indicator {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 15px;
        text-align: center;
        color: #EB5E28;
        font-weight: 500;
        margin-top: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .loading-indicator::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 2px solid #EB5E28;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-right: 10px;
        vertical-align: middle;
    }
    
    /* ==========================================================================
         Accessibility & Focus States
         ========================================================================== */
    
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    
    /* Focus styles voor toetsenbord navigatie */
    
    /* High contrast mode ondersteuning */
    @media (prefers-contrast: high) {
        .bhv-opleiding-kaart {
            border: 2px solid #000000;
        }
    
        .opleidingen-message-success {
            border: 2px solid #155724;
        }
    
        .opleidingen-message-error {
            border: 2px solid #721c24;
        }
    }
    
    /* ==========================================================================
         Legacy Plugin Support
         ========================================================================== */
    
    .detail-value,
    .opleiding-detail {
        font: var(--p);
    }



    @media (max-width: 500px) {
        .bhv-details-blok {
            padding: 2.25rem 2rem !important;
        }

        .bhv-modal-content {
            padding: 2rem 1.5rem;
        }
    }