.epo-dp-container {
    background-color: var(--muted); 
    border-radius: var(--radius);  
    padding: 1.25rem;          
    margin-bottom: 1.5rem;   
    border: 1px solid var(--border); 
		width: 100%;
}

.epo-dp-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem; 
}

.epo-dp-step-number {
    height: 1.75rem;           
    min-width: 1.75rem;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;    
    background-color: oklch(from var(--primary) l c h / 0.15); /* Lichte primary tint */
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;     
    font-weight: 600;        
    line-height: 1;
}

.epo-dp-title {
    font-weight: 600;        
    color: var(--foreground);           
    font-size: 1.1rem;     
    line-height: 1.3;
    display: flex; /* Voor asterisk */
    align-items: center;
    gap: 0.25em;
}
.epo-dp-required-asterisk {
    color: var(--destructive); /* Of je primary kleur als je dat mooier vindt */
    font-weight: bold;
    margin-left: 0.2em;
}

.epo-dp-subtitle {
    font-size: 0.875rem;     
    color: var(--muted-foreground); 
    margin-bottom: 1.25rem;      
}

/* -- LIJST met Optie-Tegels -- */
.epo-dp-options-list {
    display: grid;
    /* Maak 2 kolommen, of pas aan naar wens */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 1rem; /* Ruimte tussen de tegels */
}

/* -- DE OPTIE-TEGELS -- */
.epo-dp-option-tile {
    border: 1px solid var(--border); 
    border-radius: var(--radius);   
    padding: 0.75rem;    
    display: flex;
    flex-direction: column; /* Items onder elkaar */
    align-items: center; /* Centreer items horizontaal in de tegel */
    text-align: center;
    background-color: var(--card);
    color: var(--card-foreground);
    cursor: pointer;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    position: relative; /* Voor de checkmark indicator */
}

.epo-dp-option-tile:hover {
     border-color: var(--primary);   
}

.epo-dp-option-tile:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--primary); 
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary); 
}

/* -- GESELECTEERDE TEGEL -- */
.epo-dp-option-tile.epo-dp-option-selected {
    border-color: var(--primary); 
    background-color: oklch(from var(--primary) l c h / 0.08); 
}

/* Checkmark indicator (simpel vinkje rechtsboven) */
.epo-dp-checkmark-indicator {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--muted);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: transparent; /* Vinkje is standaard onzichtbaar */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.epo-dp-option-selected .epo-dp-checkmark-indicator {
    background-color: var(--primary);
    color: var(--primary-foreground); /* Kleur van het vinkje */
    border-color: var(--primary);
}
.epo-dp-option-selected .epo-dp-checkmark-indicator::before {
    content: '✓'; /* Het vinkje */
}


/* -- DISABLED TEGEL -- */
 .epo-dp-option-tile.epo-dp-option-disabled {
    background-color: var(--muted); 
    color: var(--muted-foreground);
    opacity: 0.7;
    cursor: not-allowed;
    border-color: var(--border);
}
 .epo-dp-option-tile.epo-dp-option-disabled:hover,
 .epo-dp-option-tile.epo-dp-option-disabled:focus-visible {
     border-color: var(--border);
     box-shadow: none;
 }
 .epo-dp-option-tile.epo-dp-option-disabled .epo-dp-option-image {
    filter: grayscale(80%);
 }


/* -- TEGEL INTERNALS -- */
.epo-dp-option-image {
    max-width: 100px; /* Pas aan naar wens */
    max-height: 100px; /* Pas aan naar wens */
    object-fit: contain;
    margin-bottom: 0.5rem;
    border-radius: calc(var(--radius) / 2); /* Subtiele afronding voor de afbeelding zelf */
}

.epo-dp-option-label {
    font-size: 0.9rem; 
    font-weight: 500;        
    color: var(--foreground);
    margin-bottom: 0.25rem; /* Ruimte onder label als er een prijs is */
}
.epo-dp-option-label:last-child { /* Als er geen prijs is */
    margin-bottom: 0;
}

.epo-dp-option-price {
    font-size: 0.8rem;       
    color: var(--muted-foreground);
}