/**
 * LearnDash CMSMasters Styling - MINIMAL VERSION
 * Version: 1.3.0
 * 
 * ONLY STYLING - NO FUNCTIONALITY CHANGES
 * - Colors, borders, border-radius, padding
 * - NO display, visibility, position changes
 */

/* ========================================
   BUTTONS - Flat Design
   ======================================== */

.ld-button,
.learndash_mark_complete_button,
.ld_course_grid_button,
input[type="submit"].ld-button,
.wpProQuiz_button,
.wpProQuiz_button2 {
    /* Styling only */
    background: linear-gradient(135deg, #7C3AED 0%, #D946EF 50%, #EC4899 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.ld-button:hover,
.learndash_mark_complete_button:hover,
input[type="submit"].ld-button:hover,
.wpProQuiz_button:hover {
    background: linear-gradient(135deg, #6D28D9 0%, #C026D3 50%, #DB2777 100%) !important;
    opacity: 0.9;
}

/* Secondary buttons */
.ld-button-secondary {
    background: transparent !important;
    color: #D946EF !important;
    border: 2px solid #D946EF !important;
}

.ld-button-secondary:hover {
    background: linear-gradient(135deg, #7C3AED 0%, #D946EF 50%, #EC4899 100%) !important;
    color: #ffffff !important;
}

/* ========================================
   QUIZ ANSWERS - Radio/Checkbox
   ======================================== */

/* Answer items - only styling */
.wpProQuiz_questionList li label {
    padding: 16px 20px !important;
    border-radius: 6px !important;
    border: 2px solid #e5e7eb !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

.wpProQuiz_questionList li label:hover {
    border-color: #D946EF !important;
    background: #fdf4ff !important;
}

/* Selected state - turquoise */
.wpProQuiz_questionList li input:checked + label {
    border-color: #62e6d0 !important;
    background: #e6fbf8 !important;
    color: #1f2937 !important;
}

/* Custom radio/checkbox indicator */
.wpProQuiz_questionList li input[type="radio"] + label::before,
.wpProQuiz_questionList li input[type="checkbox"] + label::before {
    border: 2px solid #e5e7eb !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

.wpProQuiz_questionList li input:checked + label::before {
    border-color: #62e6d0 !important;
    background: #62e6d0 !important;
}

/* ========================================
   SORTABLE/DRAG ITEMS
   ======================================== */

/* Sortable answer styling - NO display changes */
.wpProQuiz_sortable {
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
}

.wpProQuiz_sortable:hover {
    border-color: #D946EF !important;
    background: #fdf4ff !important;
}

}

/* ========================================
   PROGRESS BAR
   ======================================== */

.learndash-wrapper .ld-progress {
    background: #f3f4f6 !important;
    border-radius: 6px !important;
}

.learndash-wrapper .ld-progress .ld-progress-bar {
    background: linear-gradient(90deg, #7C3AED 0%, #D946EF 50%, #EC4899 100%) !important;
    border-radius: 6px !important;
}

.learndash-wrapper .ld-progress-percentage {
    color: #D946EF !important;
    font-weight: 600 !important;
}

/* ========================================
   TABS
   ======================================== */

.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab {
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    padding: 16px 24px !important;
    transition: all 0.2s ease !important;
}

.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab:hover {
    color: #D946EF !important;
}

.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active {
    color: #D946EF !important;
    border-bottom-color: #D946EF !important;
}

/* ========================================
   NAVIGATION BUTTONS
   ======================================== */

.learndash-wrapper .ld-lesson-navigation .ld-lesson-nav,
.learndash-wrapper .ld-topic-navigation .ld-topic-nav {
    background: linear-gradient(135deg, #7C3AED 0%, #D946EF 50%, #EC4899 100%) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
    border: none !important;
}

.learndash-wrapper .ld-back-to-course a {
    background: transparent !important;
    color: #D946EF !important;
    border: 2px solid #D946EF !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
}

/* ========================================
   STATUS BADGES
   ======================================== */

.learndash-wrapper .ld-status {
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.learndash-wrapper .ld-status-complete {
    background: #d1fae5 !important;
    color: #065f46 !important;
}

.learndash-wrapper .ld-status-incomplete {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.learndash-wrapper .ld-status-in-progress {
    background: #fef3c7 !important;
    color: #92400e !important;
}

/* ========================================
   COURSE CARDS
   ======================================== */

.ld_course_grid .thumbnail.course {
    border-radius: 6px !important;
    border: 1px solid #e5e7eb !important;
    transition: all 0.2s ease !important;
}

.ld_course_grid .thumbnail.course:hover {
    border-color: #D946EF !important;
}

.ld_course_grid .ribbon {
    background: linear-gradient(135deg, #7C3AED 0%, #D946EF 50%, #EC4899 100%) !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
}

/* ========================================
   COURSE LIST ITEMS
   ======================================== */

.learndash-wrapper .ld-item-list .ld-item-list-item {
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 16px 20px !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
}

.learndash-wrapper .ld-item-list .ld-item-list-item:hover {
    border-color: #D946EF !important;
    background: #fdf4ff !important;
}

.learndash-wrapper .ld-item-list .ld-item-list-item.ld-is-current-item {
    border-color: #D946EF !important;
    background: #fdf4ff !important;
}

/* ========================================
   FOCUS STATES - Accessibility
   ======================================== */

.ld-button:focus,
.wpProQuiz_button:focus {
    outline: 2px solid #D946EF !important;
    outline-offset: 2px !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .ld-button,
    .learndash_mark_complete_button {
        padding: 12px 20px !important;
    }
}

/* ========================================
   SORTABLE SPECIFIC FIXES
   ======================================== */

/* Sort answer items - override LearnDash defaults */
.ld-sortable__item--sort_answer {
    align-items: center !important;
    background: #ffffff !important; /* Was #ffffff00 */
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
}

/* Sort answer handle and move buttons */
.ld-sortable__item--sort_answer .ld-sortable__item-handle,
.ld-sortable__item--sort_answer .ld-sortable__item-move {
    background: #ffffff !important; /* Was transparent */
    border: none !important; /* Was none */
    border-radius: 6px !important;
    padding: 8px !important;
    color: #6b7280 !important; /* Was #fff */
    box-shadow: none !important;
}

/* Hover state - remove purple, use our style */
.ld-sortable__item--sort_answer .ld-sortable__item-handle:hover,
.ld-sortable__item--sort_answer .ld-sortable__item-move:hover {
    background: linear-gradient(135deg, #6D28D9 0%, #C026D3 50%, #DB2777 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

/* ========================================
   CHECKBOX SPECIFIC - Material Flat Design
   ======================================== */

/* Selected checkbox - turquoise border + white background */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label.is-selected,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label:focus-within {
    border-color: #62e6d0 !important; /* Turquoise */
    background-color: #ffffff !important; /* White background */
}

/* Checkbox itself - material flat design */
.wpProQuiz_questionListItem input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.wpProQuiz_questionListItem input[type="checkbox"]:hover {
    border-color: #62e6d0 !important;
}

.wpProQuiz_questionListItem input[type="checkbox"]:checked {
    background: #62e6d0 !important;
    border-color: #62e6d0 !important;
}

/* Checkmark inside checkbox */
.wpProQuiz_questionListItem input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
}

/* ========================================
   SORT ELEMENTS - DRAG DROP ZONE STYLING
   ======================================== */

/* Drop zone indication - pink dashed border instead of red */
.wpProQuiz_sortStringItem.ui-sortable-placeholder,
.wpProQuiz_sortable.ui-sortable-placeholder,
.ld-sortable__item.ui-sortable-placeholder {
    outline: 2px dashed #D946EF !important; /* Pink dashed border instead of red */
    background: #fdf4ff !important; /* Light pink background instead of yellow */
    border: none !important;
}

/* Alternative selectors for drop zones */
.ui-sortable-placeholder {
    outline: 2px dashed #D946EF !important;
    background: #fdf4ff !important;
    border: none !important;
}

/* Dragging state */
.wpProQuiz_sortable.ui-sortable-helper,
.ld-sortable__item.ui-sortable-helper {
    outline: 2px dashed #D946EF !important;
    background: #fdf4ff !important;
    opacity: 0.8;
}


/* ========================================
   MULTI-LINE TEXT ALIGNMENT
   ======================================== */

/* Links uitlijnen van antwoord tekst bij meerdere regels */
.wpProQuiz_questionList li label,
.wpProQuiz_questionListItem label,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem label {
    text-align: left !important; /* Links uitgelijnd */
    white-space: normal !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* ========================================
   INPUT FIELDS - Remove borders
   ======================================== */

/* Verwijder groene border van input fields */
.wpProQuiz_questionList input[type="text"],
.wpProQuiz_questionList input[type="number"],
.wpProQuiz_content input[type="text"],
.wpProQuiz_content input[type="number"],
.wpProQuiz_questionListItem input[type="text"],
.wpProQuiz_questionListItem input[type="number"] {
    border: 2px solid #e5e7eb !important; /* Grijze border */
    border-radius: 6px !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

/* Focus state - purple border */
.wpProQuiz_questionList input[type="text"]:focus,
.wpProQuiz_questionList input[type="number"]:focus,
.wpProQuiz_content input[type="text"]:focus,
.wpProQuiz_content input[type="number"]:focus {
    border-color: #D946EF !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   SORTABLE ITEMS TEXT ALIGNMENT
   ======================================== */

/* Links uitlijnen van sortable antwoorden */
.ld-sortable__item--sort_answer,
.ld-sortable__item-text,
.wpProQuiz_sortStringItem,
.wpProQuiz_sortable {
    text-align: left !important;
}

/* Zorg dat tekst binnen sortable items rechts uitgelijnd is */
.ld-sortable__item--sort_answer *,
.wpProQuiz_sortable * {
    text-align: left !important;
}

/* Buttons/handles blijven links */
.ld-sortable__item-move,
.ld-sortable__item-handle {
    text-align: center !important;
}

/* ========================================

/* ========================================
   SORTABLE MOVE BUTTON - White with Purple Icon
   ======================================== */

/* Sortable move/drag button - WIT met paars icoon */
.ld-sortable__item-move,
button.ld-sortable__item-move,
.ld-sortable__item-move::after {
    background: linear-gradient(135deg, #7C3AED 0%, #D946EF 50%, #EC4899 100%) !important; /* Witte achtergrond */
    color: #D946EF !important; /* Paars icoon */
    border: 2px solid #e5e7eb !important; /* Grijze border */
    border-radius: 6px !important;
    padding: 8px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    cursor: grab !important;
    transition: all 0.2s ease !important;
    outline: none !important; /* Geen outline */
}

.ld-sortable__item-move:hover,
.ld-sortable__item-move:focus {
    background: linear-gradient(135deg, #6D28D9 0%, #C026D3 50%, #DB2777 100%) !important; /* Light purple hover */
    border: none !important; /* Purple border */
    color: #ffffff !important;
    outline: none !important; /* Geen blauwe border bij hover */
    box-shadow: none !important; /* Geen box-shadow */
}

.ld-sortable__item-move:active {
    cursor: grabbing !important;
}

/* SVG icoon binnen move button - paars */
.ld-sortable__item-move svg,
.ld-sortable__item-move svg path {
    fill: #D946EF !important; /* Paars icoon */
    color: #D946EF !important;
}

/* Zorgen dat icoon gecentreerd is */
.ld-sortable__item-move {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   QUIZ CONTINUE BUTTON
   ======================================== */

/* Continue button na quiz results - gradient styling */
.quiz_continue_link,
a.quiz_continue_link,
.wpProQuiz_content .quiz_continue_link {
    background: linear-gradient(135deg, #7C3AED 0%, #D946EF 50%, #EC4899 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.quiz_continue_link:hover,
a.quiz_continue_link:hover {
    background: linear-gradient(135deg, #6D28D9 0%, #C026D3 50%, #DB2777 100%) !important;
    opacity: 0.9 !important;
    color: #ffffff !important;
}

/* ========================================
   QUIZ ANSWER STATES - Correct/Incorrect
   ======================================== */

/* Correct maar incomplete antwoord - onze kleuren */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item).wpProQuiz_answerCorrectIncomplete label {
    background: #fdf4ff !important; /* Light purple in plaats van groen */
    border-color: #D946EF !important; /* Purple in plaats van groen */
}

/* ========================================
   QUIZ ANSWERS - Uniform Styling
   ======================================== */

/* Zorg dat alle antwoorden (correct, incorrect, selected, unselected) dezelfde basis styling hebben */
.wpProQuiz_questionListItem label,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem label {
    display: block !important;
    padding: 16px 20px !important;
    border-radius: 6px !important;
    border: 2px solid #e5e7eb !important;
    background: #ffffff !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease !important;
}

/* Correct answer - groen */
.wpProQuiz_questionListItem.wpProQuiz_answerCorrect label,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerCorrect label {
    background: #d1fae5 !important;
    border-color: #10b981 !important;
}

/* Incorrect answer - blijft wit met grijze border */
.wpProQuiz_questionListItem label {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* ========================================
   QUIZ ANSWERS - Width Adjustment
   ======================================== */

/* Beperk breedte van antwoorden zodat labels (CORRECT/INCORRECT) niet overlappen */
.wpProQuiz_questionListItem,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem {
    max-width: calc(100% - 150px) !important; /* Ruimte voor labels rechts */
    width: 100% !important;
}

.wpProQuiz_questionListItem label,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem label {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Status labels (CORRECT/INCORRECT) positie */
.ld-quiz-question__item__status {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

@media (max-width: 768px) {
    .wpProQuiz_questionListItem {
        max-width: 100% !important;
    }
    
    .ld-quiz-question__item__status {
        position: static !important;
        transform: none !important;
        margin-top: 8px !important;
    }
}

/* ========================================
   TEXT ALIGNMENT - All Left Aligned
   ======================================== */

/* Override alle eerdere text-align rules - alles links uitgelijnd */
.wpProQuiz_questionList li label,
.wpProQuiz_questionListItem label,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem label,
.wpProQuiz_sortable,
.ld-sortable__item,
.ld-sortable__item--sort_answer,
.ld-sortable__item-text,
.wpProQuiz_sortStringItem {
    text-align: left !important;
}

/* Ook alle child elementen links */
.wpProQuiz_questionList li label *,
.wpProQuiz_questionListItem label *,
.wpProQuiz_sortable *,
.ld-sortable__item * {
    text-align: left !important;
}

/* Radio/checkbox blijven aan de linkerkant */
.wpProQuiz_questionList li input[type="radio"],
.wpProQuiz_questionList li input[type="checkbox"] {
    margin-right: 12px !important;
    margin-left: 0 !important;
}

/* ========================================
   SORTABLE FINAL FIXES
   ======================================== */

/* CRITICAL: Sortable items MOETEN wit zijn, niet paars */
/* Sortable items ZONDER border - ze zitten al in een container */
.wpProQuiz_sortable,
.ld-sortable__item--sort_answer {
    background: #ffffff !important; /* WIT, niet paars */
    border: none !important; /* GEEN border */
    border-radius: 6px !important;
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    text-align: left !important; /* LINKS uitgelijnd */
}

/* Sort string items ZONDER border */
.wpProQuiz_sortStringItem {
    background: #ffffff !important;
    border: none !important; /* GEEN border */
    border-radius: 6px !important;
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    text-align: left !important;
}

/* Move button: WIT icoon op gradient achtergrond */
.ld-sortable__item-move,
button.ld-sortable__item-move {
    background: linear-gradient(135deg, #7C3AED 0%, #D946EF 50%, #EC4899 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

.ld-sortable__item-move svg,
.ld-sortable__item-move svg path {
    fill: #ffffff !important; /* WIT icoon */
    color: #ffffff !important;
}

/* Text binnen sortable items MOET links uitgelijnd zijn */
.wpProQuiz_sortable *,
.ld-sortable__item--sort_answer * {
    text-align: left !important;
}

/* ========================================
   CHECKBOX FINAL FIXES
   ======================================== */

/* Checkbox labels - LINKS uitgelijnd */
.wpProQuiz_questionListItem label,
.wpProQuiz_questionList li label {
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px !important;
}

/* Checkbox - Material flat design met turquoise checked state */
.wpProQuiz_questionListItem input[type="checkbox"],
.wpProQuiz_questionList li input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    margin-left: 0 !important;
}

.wpProQuiz_questionListItem input[type="checkbox"]:hover {
    border-color: #62e6d0 !important;
}

.wpProQuiz_questionListItem input[type="checkbox"]:checked {
    background: #62e6d0 !important;
    border-color: #62e6d0 !important;
}

/* Checkmark inside checkbox */
.wpProQuiz_questionListItem input[type="checkbox"]:checked::after,
.wpProQuiz_questionList li input[type="checkbox"]:checked::after {
    content: "✓" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Force checkbox labels to be left aligned */
.wpProQuiz_questionList li label,
.wpProQuiz_questionListItem label,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem label {
    text-align: left !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
}

/* Checkbox moet links blijven */
.wpProQuiz_questionListItem input[type="checkbox"],
.wpProQuiz_questionList li input[type="checkbox"] {
    margin-right: 12px !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
}

/* ========================================
   SORTABLE DROP ZONE - Remove Red Border
   ======================================== */

/* Override ALL possible border/outline properties for drop zone */
.wpProQuiz_sortStringItem.ui-sortable-placeholder,
.wpProQuiz_sortable.ui-sortable-placeholder,
.ld-sortable__item.ui-sortable-placeholder,
.ui-sortable-placeholder,
.wpProQuiz_sortStringItem.ui-sortable-placeholder *,
.wpProQuiz_sortable.ui-sortable-placeholder * {
    outline: 2px dashed #D946EF !important; /* ALLEEN paarse stippellijn */
    background: #fdf4ff !important; /* Light purple achtergrond */
    border: none !important; /* GEEN border */
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    box-shadow: none !important;
}

/* Specifiek voor sortable items tijdens drag */
.wpProQuiz_sortable.ui-sortable-placeholder::before,
.wpProQuiz_sortable.ui-sortable-placeholder::after {
    border: none !important;
    outline: none !important;
}

/* ========================================
   RADIO BUTTONS - Material Flat Design
   ======================================== */

/* Radio button - Material flat design met turquoise checked state */
.wpProQuiz_questionListItem input[type="radio"],
.wpProQuiz_questionList li input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 50% !important; /* Rond voor radio */
    background: #ffffff !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    margin-left: 0 !important;
}

.wpProQuiz_questionListItem input[type="radio"]:hover,
.wpProQuiz_questionList li input[type="radio"]:hover {
    border-color: #62e6d0 !important;
}

.wpProQuiz_questionListItem input[type="radio"]:checked,
.wpProQuiz_questionList li input[type="radio"]:checked {
    background: #ffffff !important; /* Wit blijft wit */
    border-color: #62e6d0 !important; /* Turquoise border */
}

/* Inner dot when checked */
.wpProQuiz_questionListItem input[type="radio"]:checked::after,
.wpProQuiz_questionList li input[type="radio"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #62e6d0 !important; /* Turquoise dot */
}

/* Disable oude ::before method voor radio buttons */
.wpProQuiz_questionList li input[type="radio"] + label::before {
    display: none !important;
}

/* ========================================
   PROGRESS BAR - Force Theme Colors
   ======================================== */

/* Override alle mogelijke progress bar styling */
.ld-progress,
.learndash-wrapper .ld-progress,
.ld-progress-bar,
.learndash-wrapper .ld-progress-bar,
.ld-progress .ld-progress-bar,
.learndash-wrapper .ld-progress .ld-progress-bar {
    background: linear-gradient(90deg, #7C3AED 0%, #D946EF 50%, #EC4899 100%) !important;
    border-radius: 6px !important;
}

/* Progress container - licht grijs */
.ld-progress,
.learndash-wrapper .ld-progress {
    background: #f3f4f6 !important;
    border-radius: 6px !important;
}

/* Progress percentage text */
.ld-progress-percentage,
.learndash-wrapper .ld-progress-percentage {
    color: #D946EF !important;
    font-weight: 600 !important;
}

/* Progress stats - "100% COMPLETE" text */
.ld-progress-stats,
.ld-course-status-content {
    color: #D946EF !important;
}

/* Override inline progress bar background color */
.ld-progress-inline,
.ld-progress-bar[style*="background"] {
    background: linear-gradient(90deg, #7C3AED 0%, #D946EF 50%, #EC4899 100%) !important;
}

/* Secondary background override */
.ld-secondary-background {
    background: linear-gradient(90deg, #7C3AED 0%, #D946EF 50%, #EC4899 100%) !important;
}

/* ========================================
   QUIZ ITEM ELEMENTOR STYLING
   ======================================== */

/* Quiz list items - clean flat design */
.ldcql-quiz-item,
.elementor-element .ldcql-quiz-item {
    padding: 12px !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    border: solid 2px #f0f0f0 !important;
}

/* ========================================
   RADIO BUTTON & TEXT FIXES
   ======================================== */

/* Fix radio button checked state - gevulde inner circle */
.wpProQuiz_questionListItem input[type="radio"]:checked,
.wpProQuiz_questionList li input[type="radio"]:checked {
    background: #ffffff !important;
    border-color: #D946EF !important; /* Roze border bij checked */
    border-width: 6px !important; /* Dikke border = gevulde look */
}

/* Remove old ::after method */
.wpProQuiz_questionListItem input[type="radio"]:checked::after,
.wpProQuiz_questionList li input[type="radio"]:checked::after {
    display: none !important;
}

/* Fix text styling - NO CAPITALS, same as question */
.wpProQuiz_questionList li label,
.wpProQuiz_questionListItem label,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem label {
    text-transform: none !important; /* Geen capitals */
    font-weight: normal !important; /* Zelfde gewicht als vraag */
    font-size: inherit !important; /* Zelfde grootte als vraag */
    letter-spacing: normal !important; /* Normale letter spacing */
}

/* ========================================
   SORTABLE HOVER - Remove Purple Background
   ======================================== */

/* Remove hover effects from sortable items */
.wpProQuiz_sortable:hover,
.ld-sortable__item--sort_answer:hover {
    background: #ffffff !important; /* Blijft WIT bij hover */
    border: none !important; /* GEEN border */
}

.wpProQuiz_sortStringItem:hover {
    background: #ffffff !important; /* Blijft WIT bij hover */
    border: none !important; /* GEEN border */
}

/* Override nested move button hover to NOT affect parent */
.ld-sortable__item--sort_answer .ld-sortable__item-handle:hover,
.ld-sortable__item--sort_answer .ld-sortable__item-move:hover {
    background: linear-gradient(135deg, #6D28D9 0%, #C026D3 50%, #DB2777 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

/* Ensure parent stays white when child is hovered */
.ld-sortable__item--sort_answer:has(.ld-sortable__item-move:hover) {
    background: #ffffff !important;
}

/* ========================================
   CHECKBOX - Force Theme Colors (Override Green)
   ======================================== */

/* Override ALL checkbox states - NO green, use turquoise */
.wpProQuiz_questionListItem input[type="checkbox"],
.wpProQuiz_questionList li input[type="checkbox"],
input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

/* Hover - turquoise */
.wpProQuiz_questionListItem input[type="checkbox"]:hover,
.wpProQuiz_questionList li input[type="checkbox"]:hover {
    border-color: #62e6d0 !important;
}

/* Checked - turquoise border and background */
.wpProQuiz_questionListItem input[type="checkbox"]:checked,
.wpProQuiz_questionList li input[type="checkbox"]:checked,
input[type="checkbox"]:checked {
    background: #62e6d0 !important; /* TURQUOISE, not green */
    border-color: #62e6d0 !important; /* TURQUOISE, not green */
}

/* White checkmark */
.wpProQuiz_questionListItem input[type="checkbox"]:checked::after,
.wpProQuiz_questionList li input[type="checkbox"]:checked::after,
input[type="checkbox"]:checked::after {
    content: "✓" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Disable ::before if it exists */
.wpProQuiz_questionList li input[type="checkbox"] + label::before {
    display: none !important;
}

/* ========================================
   CHECKBOX - PINK/PURPLE THEME COLORS
   ======================================== */

/* Override checkbox with PINK theme colors */
.wpProQuiz_questionListItem input[type="checkbox"]:checked,
.wpProQuiz_questionList li input[type="checkbox"]:checked,
input[type="checkbox"]:checked {
    background: #D946EF !important; /* PINK gradient color */
    border-color: #D946EF !important; /* PINK border */
}

/* Hover - pink */
.wpProQuiz_questionListItem input[type="checkbox"]:hover,
.wpProQuiz_questionList li input[type="checkbox"]:hover,
input[type="checkbox"]:hover {
    border-color: #D946EF !important; /* PINK hover */
}

/* Selected label - pink border */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label.is-selected,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label:focus-within {
    border-color: #D946EF !important; /* PINK border */
    background-color: #fdf4ff !important; /* Light pink background */
}

/* ========================================
   SORTABLE ITEMS - CRITICAL OVERRIDES
   ======================================== */

/* Force sortable items te zijn WIT met normale tekst */
.wpProQuiz_sortable,
.wpProQuiz_sortStringItem,
.ld-sortable__item--sort_answer,
.ld-sortable__item,
.wpProQuiz_sortStringItem *,
.ld-sortable__item-text {
    background: #ffffff !important; /* WIT, niet paars */
    background-color: #ffffff !important;
    color: inherit !important; /* Normale text color */
    font-weight: normal !important; /* NIET bold */
}

/* Text binnen sortable items - normale styling */
.wpProQuiz_sortable .wpProQuiz_sortStringItem,
.ld-sortable__item-text,
.ld-sortable__item--sort_answer span,
.wpProQuiz_sortStringItem span {
    color: #1f2937 !important; /* Normal dark gray */
    font-weight: normal !important; /* NIET bold */
    background: transparent !important;
}

/* Disable ALL background overrides from theme/LearnDash */
.wpProQuiz_questionList .wpProQuiz_sortStringItem[style*="background"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* ========================================
   ULTRA SPECIFIC - Override ALL inline styles
   ======================================== */

/* Override inline styles with attribute selector */
.wpProQuiz_sortStringItem[style],
.ld-sortable__item--sort_answer[style],
.wpProQuiz_sortable[style] {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Text color and weight - most specific */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_sortStringItem,
.learndash-wrapper .wpProQuiz_content .ld-sortable__item-text {
    color: #1f2937 !important;
    font-weight: 400 !important;
    background: transparent !important;
}

/* Override ANY purple/violet backgrounds */
*[class*="sortable"][style*="background"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* ========================================
   SORTABLE - Remove ALL colored borders/backgrounds
   ======================================== */

/* Nuclear option - override EVERYTHING */
.wpProQuiz_sortStringItem,
.wpProQuiz_sortStringItem *,
.ld-sortable__item--sort_answer,
.ld-sortable__item--sort_answer *,
.wpProQuiz_sortable,
.wpProQuiz_sortable * {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: transparent !important; /* Remove ALL colored borders */
    outline: none !important;
}

/* Only the main container should have a border */
.wpProQuiz_sortStringItem {
    border: none !important; /* No border for sort string items */
}

.ld-sortable__item--sort_answer {
    border: none !important; /* GEEN border - zit al in container */
}

/* Remove any orange/colored underlines */
.wpProQuiz_sortStringItem::after,
.wpProQuiz_sortStringItem::before {
    display: none !important;
    border: none !important;
}

/* ========================================
   SORTABLE ITEMS - FINAL CLEAN STYLING v2
   ======================================== */

/* Override ALL sortable borders - lichtgrijs zoals quiz items */
.wpProQuiz_sortStringItem,
.ld-sortable__item--sort_answer,
.wpProQuiz_sortable {
    border: 2px solid #f0f0f0 !important; /* Lichtgrijze border */
    border-color: #f0f0f0 !important;
}

/* Remove paarse borders overal */
.wpProQuiz_sortStringItem,
.wpProQuiz_sortStringItem *,
.ld-sortable__item--sort_answer,
.ld-sortable__item--sort_answer *,
.wpProQuiz_sortable,
.wpProQuiz_sortable * {
    border-color: #f0f0f0 !important;
}

/* Remove inline border styles via specificity */
[class*="sortable"][style*="border"],
[class*="sort_answer"][style*="border"] {
    border-color: #f0f0f0 !important;
}

/* ========================================
   SORTABLE ITEMS - NO BORDERS (in container)
   ======================================== */

/* Sortable items binnen container - GEEN borders */
.wpProQuiz_sortStringItem,
.ld-sortable__item--sort_answer,
.wpProQuiz_sortable {
    border: none !important; /* GEEN border */
    background: #ffffff !important;
    background-color: #ffffff !important;
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    border-radius: 6px !important;
}

/* Override ALL child borders */
.wpProQuiz_sortStringItem *,
.ld-sortable__item--sort_answer *,
.wpProQuiz_sortable * {
    border: none !important;
    border-color: transparent !important;
}

/* Remove inline borders via attribute selector */
[class*="sortable"][style*="border"],
[class*="sort_answer"][style*="border"],
.wpProQuiz_sortStringItem[style*="border"] {
    border: none !important;
    border-width: 0 !important;
}