/*
 =================================================
  EPO Levering Styler Styles (OKLCH) - Tegel Layout
 =================================================
*/

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

/* -- HEADER -- */
.epo-lv-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem; /* Iets meer ruimte voor de tegels */
}

.epo-lv-title {
    font-weight: 600;        
    color: var(--foreground);           
    font-size: 1.1rem;     
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.25em;
}
.epo-lv-required-asterisk {
    color: var(--destructive);
    font-weight: bold;
    margin-left: 0.2em;
}

/* -- LIJST met Optie-Tegels -- */
.epo-lv-options-list {
    display: grid;
    /* Twee kolommen, maar vult de ruimte als er minder zijn */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 1rem; /* Ruimte tussen de tegels */
}

/* -- DE OPTIE-TEGELS -- */
.epo-lv-option-tile {
    border: 1px solid var(--border); 
    border-radius: var(--radius);   
    padding: 1rem;    /* Iets meer padding voor een kaart-gevoel */
    display: flex;
    flex-direction: column; 
    justify-content: space-between; /* Zorgt dat header en body uit elkaar geduwd worden indien mogelijk */
    min-height: 100px; /* Minimale hoogte voor consistentie */
    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; 
}

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

.epo-lv-option-tile:focus-visible:not(.epo-lv-option-disabled) {
    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); 
}

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

/* Checkmark indicator (vergelijkbaar met drukpositie) */
.epo-lv-checkmark-indicator {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background-color: transparent; /* Start transparant */
    border: 1.5px solid var(--border); /* Start met normale border */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: bold;
    color: transparent;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.epo-lv-option-selected .epo-lv-checkmark-indicator {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}
.epo-lv-option-selected .epo-lv-checkmark-indicator::before {
    content: '✓';
}

/* -- DISABLED TEGEL -- */
 .epo-lv-option-tile.epo-lv-option-disabled {
    background-color: var(--muted); 
    color: var(--muted-foreground) !important; /* Override andere tekstkleuren */
    opacity: 0.7;
    cursor: not-allowed;
    border-color: var(--border);
}
 .epo-lv-option-tile.epo-lv-option-disabled:hover,
 .epo-lv-option-tile.epo-lv-option-disabled:focus-visible {
     border-color: var(--border);
     box-shadow: none;
 }
 .epo-lv-option-tile.epo-lv-option-disabled .epo-lv-tile-title,
 .epo-lv-option-tile.epo-lv-option-disabled .epo-lv-tile-main-info,
 .epo-lv-option-tile.epo-lv-option-disabled .epo-lv-tile-secondary-info,
 .epo-lv-option-tile.epo-lv-option-disabled .epo-lv-tile-price {
    color: var(--muted-foreground) !important;
 }
 .epo-lv-option-tile.epo-lv-option-disabled .epo-lv-checkmark-indicator {
    background-color: var(--muted);
    border-color: oklch(from var(--border) l c h / 0.5); /* Iets lichtere border voor disabled indicator */
 }


/* -- TEGEL INTERNALS -- */
.epo-lv-tile-header {
    display: flex;
    justify-content: space-between; /* Titel links, prijs rechts */
    align-items: flex-start; /* Voor als prijs meerdere regels heeft */
    width: 100%;
    margin-bottom: 0.5rem;
}

.epo-lv-tile-title {
    font-size: 1rem; 
    font-weight: 600;        
    color: var(--foreground);
    margin: 0; /* Reset margin */
}

.epo-lv-tile-price {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary); /* Prijs in primaire kleur */
    margin-left: 0.5rem;
		margin-right: 2rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.epo-lv-option-tile.epo-lv-option-disabled .epo-lv-tile-price {
    color: var(--muted-foreground) !important;
}


.epo-lv-tile-body {
    width: 100%;
    margin-top: auto; /* Duwt body naar beneden als er ruimte is */
}

.epo-lv-tile-main-info {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--foreground);
    margin: 0 0 0.25rem 0;
    line-height: 1.4;
}

.epo-lv-tile-secondary-info {
    font-size: 0.8rem;       
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.3;
}

.glossy-text {
  font-weight: bold;
	font-size: 1rem;
  color: rgb(225, 20, 130); /* Fallback color */
  background: linear-gradient(
    to bottom,
    rgb(255, 105, 180) 0%, /* Lighter pink */
    rgb(225, 20, 130) 50%, /* Main pink color */
    rgb(165, 0, 85) 100%   /* Darker pink */
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.glossy-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0) 50%
  );
  -webkit-background-clip: text;
  background-clip: text;
  z-index: 1;
}