/*
 =================================================
  EPO Custom Quantity Selector Styles (OKLCH)
 =================================================
 */
 
 /* Gebruik dit als je dit niet al globaal hebt */
 * {
   box-sizing: border-box;
 }

 :root {
    /* Plak hier de OKLCH variabelen die je hebt opgegeven, 
       zodat de rest van de CSS ze kan gebruiken.
       Ik neem ze hieronder over voor de duidelijkheid.
    */
    --radius: .625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(.145 0 0);
    --primary: oklch(.538 .275 351.39);
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(.679 .172 238.85);
    --secondary-foreground: oklch(1 0 0);
    --accent: oklch(.93 .1949 103.24);
    --accent-foreground: oklch(.145 0 0);
    --muted: oklch(.97 0 0);
    --muted-foreground: oklch(.556 0 0);
    --destructive: oklch(.577 .245 27.325);
    --border: oklch(.922 0 0);
    --input: oklch(.922 0 0);
    --ring: oklch(.708 0 0);
 }

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

/* -- HEADER (Nummer + Titel) -- */
.epo-qs-header {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Spacing tussen nummer en titel */
    margin-bottom: 0.5rem; 
}

.epo-qs-step-number {
    /* Sizing */
    height: 1.75rem;           
    min-width: 1.75rem; /* Zorgt dat breedte gelijk is aan hoogte */
    aspect-ratio: 1 / 1; /* Houdt het vierkant, tbv border-radius */
    border-radius: 9999px;    
    
    /* Kleuren: Lichte primaire achtergrond, primaire tekstkleur */
    /* Gebruik 10-15% alpha van de primaire kleur voor de achtergrond tint */
     background-color: oklch(from var(--primary) l c h / 0.15);
     color: var(--primary);
    
    /* Layout & Font */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;     
    font-weight: 600;        
    line-height: 1; /* Voorkom extra hoogte door line-height */
}

.epo-qs-title {
    font-weight: 600;        
    color: var(--foreground);           
    font-size: 1.1rem;     
    line-height: 1.3;
}

.epo-qs-subtitle {
    font-size: 0.875rem;     
    color: var(--muted-foreground); 
    margin-bottom: 1.25rem;      
     /* Indenting gelijk aan breedte step-nummer + gap in header */
}

/* -- LIJST met Knoppen -- */
.epo-qs-options-list {
     /* Indenting gelijk aan breedte step-nummer + gap in header */
    
    /* Gebruik Grid voor robuuste spacing tussen knoppen */
    display: grid;
    gap: 0.75rem;
}

/* -- DE OPTIE KNOPPEN -- */
.epo-qs-option-button {
    width: 100%;
    border: 1px solid var(--border); 
    border-radius: var(--radius);   
    padding: 0.75rem 1rem;    
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    background-color: white !important;
    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;
   /* margin-bottom: 0;  -- Niet meer nodig ivm 'gap' op de parent list */
}

.epo-qs-option-button:hover {
     /* Gebruik --primary als border-kleur bij hover */
     border-color: var(--primary);   
}

.epo-qs-option-button:focus-visible {
    /* Gebruik --ring voor de focus outline/shadow */
    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 KNOP -- */
.epo-qs-option-button.epo-qs-option-selected {
    border-color: var(--primary); 
    /* Lichte achtergrond tint van primary */
    background-color: #F4E0EB !important; 
    /* Optioneel: subtiele shadow */
    box-shadow: 0 1px 2px 0 oklch(from var(--foreground) l c h / 0.05);
}
.epo-qs-option-button.epo-qs-option-selected .epo-qs-checkmark{
   color: var(--primary);
}


/* -- DISABLED KNOP -- */
 .epo-qs-option-button.epo-qs-option-disabled {
    background-color: var(--muted); 
    color: var(--muted-foreground);
    opacity: 0.7;
    cursor: not-allowed;
    border-color: var(--border);
}
/* Zorg dat hover/focus geen effect heeft op disabled */
 .epo-qs-option-button.epo-qs-option-disabled:hover {
     border-color: var(--border);
     box-shadow: none;
 }
  .epo-qs-option-button.epo-qs-option-disabled:focus-visible {
     box-shadow: none;
 }


/* -- KNOP INTERNALS -- */
.epo-qs-option-main {
    display: flex;
    align-items: center;
    gap: 0.65rem; /* Spacing tussen checkmark, units, badge */
}

.epo-qs-checkmark {
    flex-shrink: 0; /* Voorkom dat checkmark krimpt */
    display: flex; /* Zorgt voor goede centering van de '✓' */
    align-items: center;
    justify-content: center;
    width: 1.1em; /* Geef een vaste breedte */
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1;
    color: transparent; /* Standaard onzichtbaar qua kleur */
}
.epo-qs-checkmark-hidden {
   visibility: hidden; /* Houdt ruimte bezet, maar is onzichtbaar */
}
.epo-qs-checkmark-visible {
   visibility: visible;
   color: var(--primary); /* Alleen zichtbare checkmark krijgt de kleur */
}

.epo-qs-option-units {
    font-size: 0.9rem; 
    font-weight: 500;        
    color: var(--foreground);
}

.epo-qs-save-badge {
    color: var(--primary);
    
    font-size: 0.75rem;       
    font-weight: 500;
    border-radius: 9999px;   
    white-space: nowrap;

    /* Flexbox voor centrering */
    display: inline-flex; /* Of 'flex' als het een block-level element moet zijn */
    align-items: center;
    justify-content: center;
    line-height: 1; /* Reset line-height, flexbox regelt de centrering */
}

.epo-qs-option-pricing {
    text-align: right;
    flex-shrink: 0; /* Voorkom dat prijs krimpt */
    margin-left: 0.5rem; /* Minimale ruimte tussen linker- en rechterdeel */
}

.epo-qs-total-price {
    display: block;
    font-size: 0.9rem;      
    font-weight: 500;       
    color: var(--foreground);
}

.epo-qs-price-per-unit {
    display: block;
    font-size: 0.8rem;       
    color: var(--muted-foreground);
}

.epo-qs-checkmark {
    display: none; /* Nieuwe methode, neemt geen ruimte in */
}