.variations { 
  width: 100% !important; 
}

select {
  /* Verwijdert de standaard browser-pijl */
  appearance: none !important;
  -webkit-appearance: none !important;
  
  /* Layout & Spacing */
  width: 100% !important;
  padding: 12px 40px 12px 16px !important; /* Extra ruimte rechts voor het icoon */
  
  /* Font & Kleur */
  font-family: sans-serif !important;
  font-size: 16px !important;
  color: #333 !important;
  
  /* De box styling */
  background-color: #ffffff !important;
  border: 1px solid #eeeeee !important;
  border-radius: 6px !important;
  
  /* Het groene pijltje als achtergrond (SVG) - !important staat aan het einde van de url declaration */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234caf50' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px !important;
  
  cursor: pointer !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

/* Subtiele feedback bij focus/hover */
select:hover, select:focus {
  border-color: #d1d1d1 !important;
}

input[type="number"] {
  /* Layout & Spacing (gekopieerd van de select) */
  width: 100%;
  max-width: 350px !important;
  padding-block: 5px !important;
  
  /* Font & Kleur */
  font-family: sans-serif !important;
  font-size: 18px !important;
  color: #333 !important;
  
  /* De box styling */
  background-color: #ffffff !important;
  border: 1px solid #eeeeee !important;
  border-radius: 8px !important;
  
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Focus effect: een subtiele groene gloed of rand */
input[type="number"]:focus {
  border-color: var(--color-green-primary) !important;
  /* Optioneel: een heel lichte schaduw voor diepte */
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1) !important; 
}

/* Placeholder styling */
input[type="number"]::placeholder {
  color: #aaa !important;
}