/* My Account dashboard sections */
.woocommerce-account-dashboard .mys-dashboard-section { margin-bottom: 2rem; }
.woocommerce-account-dashboard table.my_account_orders { margin-bottom: 0.5rem; }
/* Verberg WooCommerce 'Bestel opnieuw' knop in alle thema's */
.woocommerce-orders-table__cell-order-again,
.woocommerce-button.button.order-again,
.order-again {
    display: none !important;
}


:root {
  /* Adjustable extra gap below fixed header for sticky summary */
  --fidim-summary-extra-gap: 24px;
}


.fidim-section {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 0;
  gap: 20px;
}

/* Ensure all wizard steps use horizontal layout by default */


.fidim-section > label {
  writing-mode: horizontal-tb; /* Verander van verticaal naar horizontaal */
  text-orientation: initial; /* Niet meer nodig voor horizontale tekst */
  transform: none; /* Geen rotatie meer nodig */
  width: 300px; /* Nog bredere vakken voor meer ruimte */
  height: 254px; /* Behoud dezelfde hoogte als voorheen */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Rechts uitlijnen */
  font-weight: bold;
  color: #333;
  padding: 10px 15px;
  flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 24px; /* Uniforme font-size */
  margin-bottom: 0;
}

.fidim-section .fidim-options {
  flex: 1;
}

/* Product keuze styling */
.fidim-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
  width: 100%;
  max-width: 710px; /* Limit width to match card containers */
}

/* Ensure cards within fidim-options don't exceed their intended width */
.fidim-options .card {
  width: 710px !important;
  max-width: 710px !important;
}



/* Labels styling */




/* Alle stappen hebben nu dezelfde font-size (24px), gedefinieerd in .fidim-section.wizard-step > label */

























.dimension-group {
  margin-bottom: 16px;
}

.dimension-group:last-child {
  margin-bottom: 0;
}

.dimension-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
}

.fidim-input-with-unit {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fidim-input-with-unit input {
  flex: 1;
  max-width: 120px;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.2s;
}

.fidim-input-with-unit input:focus {
  outline: none;
  border-color: #0066cc;
}

.unit-label {
  color: #666;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
}

/* Validatie styling voor afmetingen inputs */
.fidim-input-with-unit input:valid {
  border-color: #4CAF50;
}

.fidim-input-with-unit input:invalid {
  border-color: #f44336;
}  

/* =====================
   ORDER WIZARD STYLES
   ===================== */
.fidim-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Lijn links uit in plaats van centreren */
  width: 100%;
  max-width: 800px;
  margin: 0 auto !important; /* was: 0 0 0 200px */
  box-sizing: border-box;
}

/* Fidim Summary Styles */
.fidim-summary {
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 320px; /* Behoud originele breedte */
}

.fidim-summary h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
}

.fidim-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px; /* was impliciet 16px via li */
  line-height: 1.35;
}

.fidim-summary-list li {
  margin-bottom: 8px; /* was 12px */
  font-size: 14px; /* override 16px */
}

.fidim-summary-list li:last-child { margin-bottom: 6px; }

.fidim-summary-list li strong {
  color: #333;
  font-weight: 500;
  font-size: 14px; /* labels dezelfde kleinere grootte */
}

/* Extra ruimte tussen gekozen opties lijst en eerste prijsregel */
.fidim-summary .fidim-summary-list + #fidim-price {
  margin-top: 24px !important;
}
.fidim-summary .fidim-summary-list + #fidim-total-price {
  margin-top: 24px !important;
}

#fidim-price {
  font-size: 22px; /* was 24px */
  font-weight: 400; /* niet dikgedrukt voor prijs per stuk */
  color: #006278;
  margin: 12px 0 0; /* minder ruimte boven en geen ruimte eronder */
}

/* CSS-only logic to style TOTAL when #fidim-price shows the total (price-service flow) */
.fidim-summary #fidim-price:has(+ #fidim-total-price.fidim-total-price) .fidim-total-amount {
  font-weight: 600 !important;
  color: #006278 !important;
}
.fidim-summary #fidim-price:has(+ #fidim-total-price.fidim-total-price) .fidim-total-label {
  font-weight: 600 !important;
  color: #006278 !important;
}
/* Hint-tekst (geen vat-note) vet, maar behoud label- en kleur-styling */
.fidim-summary #fidim-price:not(:has(.vat-note)) {
  font-weight: 600 !important;
  color: #006278 !important; /* hint blijft teal */
}

/* Kleinere aanduiding voor BTW-notitie naast prijzen */
#fidim-price .vat-note,
.fidim-total-price .vat-note,
.fidim-shipping-note .vat-note,
#fidim-total-price:not(.fidim-total-price) .vat-note {
  font-size: 12.6px !important; /* vast formaat zodat overal even klein blijft */
  font-weight: 500;
  color: #888;
  margin-left: 6px;
}
/* Extra zekerheid: elke vat-note in de summary blijft klein, ongeacht parent font-size */
.fidim-summary .vat-note {
  font-size: 12.6px !important;
}

#fidim-add-to-cart {
  width: 100%;
  padding: 14px 24px;
  background: #008EAB;
  color: white;
  border: none;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

#fidim-add-to-cart:hover {
  background: #006278;
}

#fidim-add-to-cart:disabled {
  background: #E5E5E5;
  color: #999;
  cursor: not-allowed;
  /* pointer-events: none;  Verwijderd zodat click-handler werkt */
}

#fidim-add-to-cart.ready {
  background: #E94E1B;
}

#fidim-add-to-cart.ready:hover {
  background: #d64616;
}

#fidim-request-quote {
  width: 100%;
  padding: 12px 20px;
  background: #006278;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}
#fidim-request-quote:hover { background: #004e5e; }

/* Save configuration button: match Offerte button styling, teal color */
#fidim-save-config {
  width: 100%;
  padding: 12px 20px;
  background: #006278;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}
#fidim-save-config:hover { background: #004e5e; }
#fidim-save-config:disabled {
  background: #E5E5E5;
  color: #999;
  cursor: not-allowed;
}

/* Keep Offerte and Save buttons perfectly in sync */
#fidim-request-quote,
#fidim-save-config {
  width: 100%;
  padding: 12px 20px;
  background: #006278;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}
#fidim-request-quote:hover,
#fidim-save-config:hover { background: #004e5e; }
#fidim-save-config:disabled { background: #E5E5E5; color: #999; cursor: not-allowed; }

/* Layout styles for configurator and summary */
.fidim-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px; /* Iets minder ruimte tussen elementen */
  width: 100%;
  max-width: 1500px; /* Nog iets bredere maximale breedte voor meer ruimte */
  margin: 0 auto !important; /* was: 0 0 0 200px */
  padding: 24px;
}

@media (min-width: 1024px) {
  .fidim-wrapper {
    flex-direction: row;
    align-items: flex-start;
    margin: 0 auto !important; /* remove left-only margin on large screens */
    gap: 0 !important; /* verwijder flex-gap tussen configurator en summary */
    column-gap: 0 !important;
    row-gap: 0 !important;
  }
  
  .fidim-configurator {
    flex: 0 0 auto !important; /* geen extra rek, neem content-breedte */
    width: auto !important;
    max-width: none !important;
    min-width: 0;
  }

  .fidim-summary {
    position: sticky;
  /* Sit just below the fixed header + its top/bottom gaps, with a small extra gap */
  top: calc(
      var(--mys-header-height)
    + var(--mys-header-top-gap)
    + var(--mys-header-bottom-gap)
    + var(--fidim-summary-extra-gap)
  );
    margin-left: 16px !important; /* iets meer ruimte tussen configurator en summary */
    flex: 0 0 320px; /* fixed summary column */
    /* Houd de summary binnen het viewport en maak intern scrollbaar indien te hoog */
    max-height: calc(100vh - (
      var(--mys-header-height) + var(--mys-header-top-gap) + var(--mys-header-bottom-gap) + var(--fidim-summary-extra-gap) + 24px
    ));
    overflow: auto;
    overscroll-behavior: contain;
  }
}

/* Between laptop widths, slightly reduce card widths to prevent horizontal overflow */
@media (min-width: 1024px) and (max-width: 1400px) {
  /* Keep label at current width; shrink option/card containers to fit with 320px summary */
  .fidim-options { max-width: 640px !important; }
  .fidim-options .card { width: 640px !important; max-width: 640px !important; }

  /* Split-card containers use fixed widths; match them */
  .upload-dimensions-combined-container,
  .quantity-card-container,
  .color-selection-combined-container,
  .fidim-section .color-selection-combined-container {
    width: 640px !important;
    max-width: 640px !important;
  }

  .fidim-configurator {
    flex: 0 0 auto !important; /* neem alleen content-breedte, voorkom extra lege ruimte rechts in de kolom */
    width: auto !important;
  }
}


















/* Quantity control styling */
.quantity-control {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: center;
  width: 100%;
  padding-top: 8px; /* Ruimte voor floating label */
}



/* Totaalprijs styling */
.fidim-total-price {
  color: #888;
  font-size: 18px;
  font-weight: 500;
  margin-top: 12px; /* iets meer ruimte boven totaalbedrag */
  margin-bottom: 8px; /* iets compacter naar de knoppen */
}

/* Onder totaal: maak de waarde van 'prijs per stuk' niet bold */
.fidim-total-price,
.fidim-total-price strong,
.fidim-total-price .amount {
  font-weight: 400 !important;
}

/* Default: bedragen niet vet; specifieke contexten hieronder maken TOTAL vet */
.fidim-summary .fidim-total-amount {
  font-weight: 400 !important;
}

/* Maar: in de 'prijs per stuk' regel (container .fidim-total-price), niet vet */
.fidim-summary .fidim-total-price .fidim-total-amount,
.fidim-summary .fidim-total-price,
.fidim-summary .fidim-total-price strong {
  font-weight: 400 !important;
}

/* Wizard-flow: maak alleen het bedrag van de totale regel (id zonder class) vet en teal */
.fidim-summary #fidim-total-price:not(.fidim-total-price) .fidim-total-amount {
  font-weight: 600 !important;
  color: #006278 !important;
}
/* Wizard-flow: maak ook het label van de totale regel vet en teal */
.fidim-summary #fidim-total-price:not(.fidim-total-price) .fidim-total-label {
  font-weight: 600 !important;
  color: #006278 !important;
}
/* Fallback scope (buiten summary) indien de wizard total elders staat */
#fidim-total-price:not(.fidim-total-price) .fidim-total-amount {
  font-weight: 600 !important;
  color: #006278 !important;
}
#fidim-total-price:not(.fidim-total-price) .fidim-total-label {
  font-weight: 600 !important;
  color: #006278 !important;
}

/* TOTAL: maak het bedrag even groot als het label (erf font-size van container) */
.fidim-summary #fidim-price:has(+ #fidim-total-price.fidim-total-price) .fidim-total-amount,
.fidim-summary #fidim-total-price:not(.fidim-total-price) .fidim-total-amount {
  font-size: inherit !important;
}
/* Fallback buiten summary */
#fidim-total-price:not(.fidim-total-price) .fidim-total-amount {
  font-size: inherit !important;
}

.fidim-total-label {
  color: #666;
  font-weight: 500;
}

.fidim-total-amount {
  color: #888; /* standaard bedragen grijs */
  font-weight: 400;
  font-size: 18px;
}

/* Align labels left and amounts (with excl. BTW) right */
.fidim-summary #fidim-price,
.fidim-summary #fidim-total-price,
.fidim-summary .fidim-shipping-note {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.fidim-summary .fidim-total-amount {
  margin-left: auto;
  text-align: right;
}

/* Match label color to amount for Per stuk and Verzendkosten (keep Total teal via specific rules above) */
.fidim-summary .fidim-total-price .fidim-total-label,
.fidim-summary .fidim-shipping-note .fidim-total-label,
.fidim-summary #fidim-price .fidim-total-label {
  color: #888 !important;
}

/* Spacing tweaks between rows */
/* 1) Verklein ruimte tussen Totaal en Prijs per stuk (beide volgorden) */
.fidim-summary #fidim-price + #fidim-total-price.fidim-total-price { /* price-service: Total (#fidim-price) gevolgd door Per stuk (class) */
  margin-top: 4px !important;
}
.fidim-summary #fidim-price + #fidim-total-price:not(.fidim-total-price) { /* wizard: Per stuk (#fidim-price) gevolgd door Totaal (id-only) */
  margin-top: 4px !important;
}

/* 2) Vergroot ruimte tussen Prijs per stuk en Verzendkosten */
.fidim-summary #fidim-total-price.fidim-total-price + .fidim-shipping-note { /* per stuk (class) gevolgd door shipping */
  margin-top: 20px !important;
}
.fidim-summary #fidim-price + .fidim-shipping-note { /* per stuk (#fidim-price) direct gevolgd door shipping */
  margin-top: 20px !important;
}
.fidim-summary #fidim-total-price:not(.fidim-total-price) + .fidim-shipping-note { /* wizard: Totaal gevolgd door shipping — visueel extra ruimte na per stuk */
  margin-top: 20px !important;
}

/* Verzendkosten indicatie onder de prijs per stuk */
.fidim-shipping-note {
  color: #666;
  font-size: 18px; /* gelijk aan .fidim-total-amount */
  margin-top: 10px; /* meer ruimte tussen prijs per stuk en verzendkosten */
  margin-bottom: 12px; /* extra ruimte boven de knop */
}

/* Extra ruimte wanneer er geen 'prijs per stuk' staat */
#fidim-price + #fidim-add-to-cart {
  margin-top: 12px; /* geef lucht als de knop direct na de prijs komt */
}

























/* Zorg dat alle card containers dezelfde breedte en hoogte hebben */
.upload-dimensions-combined-container,
.quantity-card-container,
.color-selection-combined-container {
    width: 710px;
    height: 254px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 0; /* Geen extra marge die de centering verstoort */
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent shrinking in flex container */
}

/* Ensure color selection container doesn't expand beyond intended width */
.fidim-section .color-selection-combined-container {
    max-width: 710px !important;
    width: 710px !important;
}

/* Nieuwe gespleten card voor upload en afmetingen samen */
.upload-dimensions-combined-container {
    border-radius: 12px;
    display: flex;
    gap: 5px;
    padding: .4em;
    font-family: 'Outfit', sans-serif;
    background: transparent;
}

.upload-half,
.dimensions-half {
    flex: 1;
    height: 100%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Afgeronde buitenste hoeken, rechte binnenste hoeken */
.upload-half {
    border-radius: 12px 0 0 12px; /* links afgerond, rechts recht */
    border: none; /* geen border - dropzone heeft eigen stippellijn */
}

.dimensions-half {
    border-radius: 0 12px 12px 0; /* rechts afgerond, links recht */
    border: 1px solid #e0e0e0; /* alleen rechterhelft heeft border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Oude individuele containers niet meer nodig */
.upload-card-container,
.dimensions-card-container {
    display: none;
}

/* Nieuwe gespleten card voor kleurkeuze - 3/4 + 1/4 verdeling */
.color-selection-combined-container {
    border-radius: 12px;
    display: flex;
    gap: 5px; /* Herstel de originele gap */
    padding: .4em;
    font-family: 'Outfit', sans-serif;
    background: transparent;
}

.color-carousel-half,
.color-info-half {
    height: 100%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 3/4 breedte voor carousel */
.color-carousel-half {
    flex: 3;
    border-radius: 12px 0 0 12px; /* links afgerond, rechts recht */
    border: 1px solid #e0e0e0;
    overflow: hidden; /* Belangrijk voor carousel */
    position: relative; /* Voor pseudo-element */
}

/* Verticale lijn in de gap tussen de helften */
.color-carousel-half::after {
    content: '';
    position: absolute;
    top: -1px; /* Lijn moet iets buiten de border beginnen */
    right: -3px; /* Gecentreerd in de 5px gap */
    width: 1px;
    height: calc(100% + 2px); /* Volledige hoogte + 2px om te overlappen met de horizontale borders */
    background-color: #e0e0e0;
    z-index: 5;
}

/* 1/4 breedte voor kleurinfo */
.color-info-half {
    flex: 1;
    border-radius: 0 12px 12px 0; /* rechts afgerond, links recht */
    border: 1px solid #e0e0e0;
    color: #666;
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

/* Aanpassing van carousel container binnen de card */
.color-carousel-half .carousel-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 20px 0; /* Minder padding dan oorspronkelijk */
    overflow: hidden;
    perspective: 1200px; /* Aangepast voor kleinere ruimte */
}

/* Aangepaste fade-effecten voor kleinere ruimte */
.color-carousel-half .carousel-container::before,
.color-carousel-half .carousel-container::after {
    width: 60px; /* Smallere fade-zones */
}

/* Aanpassing van carousel track padding voor kleinere ruimte */
.color-carousel-half .carousel-track {
    padding: 0 40px; /* Minder padding aan zijkanten */
}



/* Styling voor de lege kleurinfo helft */
.color-info-half::before {
    content: "";
    white-space: pre;
    opacity: 0.5;
    font-weight: 500;
}

/* --- Floating label formField for dimensions & quantity (generiek) --- */
.formField {
  width: 80%;
  margin: 0 auto 18px auto;
  position: relative;
  background: transparent;
}
.formField input {
  width: 100%;
  /* max-width: 180px;  -- VERWIJDERD, breedte nu per stap geregeld */
  box-sizing: border-box;
  padding: 13px 2.6em 13px 16px;
  outline: none;
  border: 1px solid #ccc; /* Altijd grijze rand */
  border-radius: 7px;
  background: transparent;
  color: #333;
  font-size: 18px;
  font-weight: 550;
  transition: box-shadow 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.35s cubic-bezier(0.4,0,0.2,1), background-color 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 0 0px #008EAB;
}
.formField input:hover,
.formField input:focus {
  border-color: #008EAB; /* Blauwe rand bij hover/focus */
  box-shadow: 0 0 0 2px #008EAB;
  transition: box-shadow 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.35s cubic-bezier(0.4,0,0.2,1);
}
.formField span {
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px 16px;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s ease-in-out;
  pointer-events: none;
}
.formField input:focus + span,
.formField input:valid + span {
  transform: translateY(-38px) translateX(-5px) scale(0.98);
  margin-bottom: 18px !important;
  transition: 0.3s ease-in-out;
}
.formField .unit-label {
  position: absolute;
  top: 50%;
  right: 0.7em;
  transform: translateY(-50%);
  color: #aaa !important;
  font-weight: 400 !important;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 16px;
  background: transparent;
  z-index: 2;
  line-height: 1;
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 2em;
  padding-left: 0.2em;
  padding-right: 0;
}
.formField input:valid ~ .unit-label {
  opacity: 1;
}
.formField input:disabled ~ .unit-label {
  color: #ddd !important;
}

/* Verberg number input spinners bij alle .formField number inputs (afmetingen én aantal stuks) */

.wizard-step .formField input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Kleur indicatoren tussen de navigatiepijltjes */
.color-indicators {
  position: absolute;
  bottom: 25px; /* Zelfde hoogte als de pijltjes */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 15;
  pointer-events: auto; /* Maak klikbaar */
}

.color-indicator {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  opacity: 0.7;
  cursor: pointer; /* Toon dat het klikbaar is */
  pointer-events: auto; /* Zorg dat individuele indicators klikbaar zijn */
  position: relative; /* Voor tooltip positionering */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2); /* Duidelijkere schaduw voor betere zichtbaarheid */
}

.color-indicator:hover {
  opacity: 0.9;
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.5);
}

.color-indicator.active {
  box-shadow: 0 0 8px rgba(29, 139, 194, 0.6), 0 0 4px rgba(29, 139, 194, 0.4);
  opacity: 1;
  transform: scale(1.1);
  border-color: rgba(29, 139, 194, 0.5);
}

.color-indicator.hidden {
  display: none;
}

/* Responsive aanpassingen voor indicators */
@media (max-width: 767px) {
  .color-indicators {
    gap: 3px;
  }
  
  .color-indicator {
    width: 10px;
    height: 10px;
  }
}

/* === SPLIT QUANTITY CARD STYLING (50/50 LAYOUT) === */
/* Override voor quantity-card-container om split layout mogelijk te maken */
.wizard-step[data-step="quantity"] .quantity-card-container {
    gap: 5px !important; /* Voeg gap toe voor scheiding tussen helften */
    background: transparent !important;
}

/* Nieuwe styling voor de twee helften van de quantity card */
.quantity-input-half,
.quantity-pricing-half {
    flex: 1;
    height: 100%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Afgeronde buitenste hoeken, rechte binnenste hoeken */
.quantity-input-half {
    border-radius: 12px 0 0 12px; /* links afgerond, rechts recht */
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.quantity-pricing-half {
    border-radius: 0 12px 12px 0; /* rechts afgerond, links recht */
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 24px;
    text-align: center;
}

/* Aanpassing van quantity-inputs binnen de linkerhelft */
.wizard-step[data-step="quantity"] .quantity-input-half .quantity-inputs {
    width: 100%;
    height: 100%;
    padding: 24px;
    background: transparent !important;
    border: none !important; /* border komt van parent quantity-input-half */
    border-radius: 0 !important; /* geen eigen border-radius */
    box-shadow: none !important; /* shadow komt van parent */
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding-top: 54px !important; /* Extra ruimte bovenaan voor betere centrering - force override */
}

.wizard-step[data-step="quantity"] .quantity-input-half .quantity-inputs::before {
    display: none; /* geen overlay nodig in split-card */
}

/* Styling voor rechterhelft met staffel info */
.quantity-pricing-half h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
}

.quantity-pricing-half .pricing-info {
    color: #888;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    font-style: italic;
}

/* Special handling for upload and quantity steps with different HTML structure */
.fidim-section[data-step="upload"] .fidim-upload-card,
.fidim-section[data-step="quantity"] .quantity-step-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.fidim-section[data-step="upload"] .fidim-upload-card label,
.fidim-section[data-step="quantity"] .quantity-step-content > label {
  writing-mode: horizontal-tb;
  text-orientation: initial;
  transform: none;
  width: 300px; /* Nog bredere vaste breedte */
  height: 254px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Rechts uitlijnen zoals de andere labels */
  font-weight: bold;
  color: #333;
  padding: 10px 15px;
  flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 24px; /* Aangepast naar uniforme grootte */
  margin-bottom: 0;
  word-wrap: break-word;
  line-height: 1.2;
}

/* Specifieke font-size voor upload met speciale HTML structuur */
.fidim-section[data-step="upload"] .fidim-upload-card label {
  font-size: 23px;
}

.fidim-section[data-step="upload"] .fidim-upload-card input,
.fidim-section[data-step="quantity"] .quantity-card-container {
  width: 710px !important;
  flex-shrink: 0;
}

/* Override default flex-direction for upload step to ensure horizontal layout */
.fidim-section[data-step="upload"] {
  flex-direction: row !important;
  align-items: center !important;
}

/* Responsive design: revert to column layout on smaller screens */
@media (max-width: 768px) {
  .fidim-wrapper {
    margin: 0 auto; /* Terug naar gecentreerde layout op kleine schermen */
  }
  
  .fidim-section {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  .fidim-section > label,
  .fidim-section.wizard-step > label,
  .fidim-section[data-step="upload"] .fidim-upload-card label,
  .fidim-section[data-step="quantity"] .quantity-step-content > label {
    writing-mode: initial !important;
    text-orientation: initial !important;
    transform: none !important;
    min-width: auto !important;
    width: 100%;
    text-align: center;
    font-size: 24px !important; /* Uniforme font-grootte ook in responsive mode */
  }
  
  .fidim-section .fidim-options {
    width: 100%;
  }
  
  .fidim-options {
    gap: 16px;
  }
  
  .fidim-section[data-step="upload"] .fidim-upload-card,
  .fidim-section[data-step="quantity"] .quantity-step-content {
    flex-direction: column;
    align-items: center;
  }
}