/* ==========================================================================
   VF Product Configurator — Frontend Stijlen v1.9
   ========================================================================== */

:root {
  --vfpc-gold:            #c8a97e;
  --vfpc-gold-light:      #f5ede3;
  --vfpc-gold-dark:       #a8865a;
  --vfpc-text:            #3d2e20;
  --vfpc-text-light:      #7a6652;
  --vfpc-border:          #e8ddd3;
  --vfpc-bg:              #fdf8f4;
  --vfpc-white:           #ffffff;
  --vfpc-check:           #7aab6e;
  --vfpc-cross:           #c47070;
  --vfpc-btn-bg:          #c8a97e;
  --vfpc-btn-color:       #ffffff;
  --vfpc-btn-bg-disabled: #c8a97e;
  --vfpc-radius:          16px;
  --vfpc-shadow:          0 2px 12px rgba(0,0,0,.06);
  --vfpc-shadow-active:   0 4px 20px rgba(200,169,126,.22);
  --vfpc-font-body:       inherit;
  --vfpc-font-heading:    inherit;
  --vfpc-font-size-base:  15px;
  --vfpc-font-size-title: 17px;
  --vfpc-font-size-price: 22px;
  --vfpc-card-padding:    20px;
}

/* ── Configurator wrapper ─────────────────────────────────────────────── */
.vfpc-configurator {
  font-family: var(--vfpc-font-body);
  font-size:   var(--vfpc-font-size-base);
  color:       var(--vfpc-text);
  max-width:   900px;
  margin:      0 auto 32px;
}

/* ── Tussentekst ──────────────────────────────────────────────────────── */
.vfpc-intro-text {
  text-align:    center;
  margin-bottom: 12px;
  color:         var(--vfpc-text-light);
  font-size:     15px;
  line-height:   1.7;
}
.vfpc-intro-text p      { margin: 0 0 8px; }
.vfpc-intro-text h2,
.vfpc-intro-text h3     { color: var(--vfpc-text); font-weight: 700; margin: 0 0 6px; }
.vfpc-intro-text strong { color: var(--vfpc-text); }
.vfpc-intro-text em     { color: var(--vfpc-gold-dark); }

/* ── Stap ─────────────────────────────────────────────────────────────── */
.vfpc-step {
  margin-bottom: 36px;
  padding-top:   20px;
  border-top:    1px solid var(--vfpc-border);
}
.vfpc-step:first-child {
  border-top:  none;
  padding-top: 0;
}

.vfpc-step-title {
  font-family:   var(--vfpc-font-heading);
  text-align:    center;
  font-size:     22px;
  font-weight:   700;
  margin:        0 0 20px;
  color:         var(--vfpc-text);
}

/* ── Grid ─────────────────────────────────────────────────────────────── */
.vfpc-option-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
  align-items:           stretch;
}

/* ── Optie-kaart ──────────────────────────────────────────────────────── */
/*
 * Alle kaarten: flex-start zodat inhoud altijd bovenaan begint.
 * Kaarten ZONDER badge krijgen via ::before een lege ruimte van exact
 * de badge-hoogte, zodat de titel op dezelfde hoogte staat.
 */
.vfpc-option-card {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  width:           100%;
  border:          2px solid var(--vfpc-border);
  border-radius:   var(--vfpc-radius);
  overflow:        hidden;
  cursor:          pointer;
  background:      var(--vfpc-white);
  box-shadow:      var(--vfpc-shadow);
  transition:      border-color .2s, background .2s, transform .15s;
  text-align:      center;
  line-height:     1.5;
  color:           var(--vfpc-text);
  font-family:     inherit;
  padding:         0 16px 20px;
}

/* Kaarten ZONDER badge: pseudo-element vult de badge-hoogte op */
.vfpc-option-card:not(.has-badge)::before {
  content:    '';
  display:    block;
  width:      100%;
  /* 8px padding-top + ~19px tekstregel + 8px padding-bottom + 14px margin-bottom badge = 49px */
  height:     49px;
  flex-shrink: 0;
}

/* Kaarten MET badge: geen extra ruimte nodig */
.vfpc-option-card.has-badge {
  padding-top: 0;
}

.vfpc-option-card:hover {
  border-color: var(--vfpc-gold);
  background:   var(--vfpc-gold-light);
  transform:    translateY(-2px);
}
.vfpc-option-card.active {
  border-color: var(--vfpc-gold);
  background:   var(--vfpc-gold-light);
  box-shadow:   var(--vfpc-shadow-active);
}

/* ── Badge — volledige balk bovenaan ─────────────────────────────────── */
.vfpc-badge {
  display:        block;
  width:          calc(100% + 32px);   /* doorbreek kaart-padding */
  margin:         0 -16px 14px;
  background:     var(--vfpc-gold);
  color:          #fff;
  padding:        8px 16px;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align:     center;
  flex-shrink:    0;
}

/* ── Afbeelding ───────────────────────────────────────────────────────── */
.vfpc-option-card img {
  width:         100%;
  max-width:     140px;
  height:        120px;
  object-fit:    cover;
  border-radius: 10px;
  margin:        0 auto 8px;
  display:       block;
}

.vfpc-image-caption {
  font-size:     12px;
  color:         var(--vfpc-text-light);
  font-style:    italic;
  margin-bottom: 8px;
  line-height:   1.4;
}

/* ── Titel ────────────────────────────────────────────────────────────── */
.vfpc-option-title {
  font-family:   var(--vfpc-font-heading);
  font-size:     var(--vfpc-font-size-title);
  font-weight:   700;
  margin-bottom: 4px;
  color:         var(--vfpc-text);
}

/* ── Prijs ────────────────────────────────────────────────────────────── */
.vfpc-option-price {
  font-size:     var(--vfpc-font-size-price);
  font-weight:   800;
  color:         var(--vfpc-text);
  margin-bottom: 6px;
}

/* ── Subtitel ─────────────────────────────────────────────────────────── */
.vfpc-option-subtitle {
  font-size:     13px;
  color:         var(--vfpc-text-light);
  margin-bottom: 10px;
  font-style:    italic;
  line-height:   1.4;
}

/* ── Beschrijving ─────────────────────────────────────────────────────── */
.vfpc-option-description {
  font-size:     13px;
  color:         var(--vfpc-text-light);
  margin-bottom: 10px;
  line-height:   1.5;
}

/* ── Items lijst ──────────────────────────────────────────────────────── */
.vfpc-option-items {
  list-style: none !important;
  margin:     10px 0 0 !important;
  padding:    0 !important;
  width:      100%;
  text-align: left;
}

.vfpc-option-items li {
  display:     flex;
  align-items: flex-start;
  gap:         7px;
  padding:     3px 0;
  font-size:   13px;
  line-height: 1.5;
  color:       var(--vfpc-text);
}

.vfpc-item-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           16px;
  min-width:       16px;
  font-size:       13px;
  font-weight:     700;
  margin-top:      1px;
}

.vfpc-item-check          { color: var(--vfpc-check); }
.vfpc-item-check::after   { content: "✓"; }
.vfpc-item-cross          { color: var(--vfpc-cross); }
.vfpc-item-cross::after   { content: "✕"; }
.vfpc-item-type-cross     { opacity: .7; }
.vfpc-item-neutral        { color: var(--vfpc-text-light); }
.vfpc-item-neutral::after { content: "–"; }

/* ── Tekst na keuze ───────────────────────────────────────────────────── */
.vfpc-choice-note {
  display:       none;
  margin-top:    12px;
  padding:       12px 16px;
  background:    var(--vfpc-gold-light);
  border-left:   3px solid var(--vfpc-gold);
  border-radius: 0 8px 8px 0;
  font-size:     14px;
  color:         var(--vfpc-text-light);
  line-height:   1.6;
}
.vfpc-choice-note.visible { display: block; }

/* ── Samenvatting ─────────────────────────────────────────────────────── */
.vfpc-summary {
  margin-top:    28px;
  padding:       20px 24px;
  border:        1px solid var(--vfpc-border);
  border-radius: var(--vfpc-radius);
  background:    var(--vfpc-bg);
}

.vfpc-summary-line {
  display:         flex;
  justify-content: space-between;
  gap:             16px;
  margin-bottom:   6px;
  font-size:       14px;
  color:           var(--vfpc-text-light);
}
.vfpc-summary-line strong { color: var(--vfpc-text); }

.vfpc-total {
  margin-top:  12px;
  padding-top: 12px;
  border-top:  1px solid var(--vfpc-border);
  font-size:   20px;
  font-weight: 700;
  color:       var(--vfpc-text);
}

/* ── Toevoegen-knop styling ───────────────────────────────────────────── */
.single_add_to_cart_button {
  background-color: var(--vfpc-btn-bg)    !important;
  color:            var(--vfpc-btn-color) !important;
  border-color:     var(--vfpc-btn-bg)    !important;
}
.single_add_to_cart_button:hover {
  background-color: var(--vfpc-btn-bg-hover, var(--vfpc-gold-dark)) !important;
  border-color:     var(--vfpc-btn-bg-hover, var(--vfpc-gold-dark)) !important;
}

/* Incomplete knop: zelfde kleur maar halftransparant */
.single_add_to_cart_button.vfpc-btn-incomplete,
.single_add_to_cart_button:disabled {
  background-color: var(--vfpc-btn-bg-disabled) !important;
  border-color:     var(--vfpc-btn-bg-disabled) !important;
  color:            var(--vfpc-btn-color)        !important;
  opacity:          0.45;
  cursor:           not-allowed;
  pointer-events:   auto;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .vfpc-option-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 980px) {
  .vfpc-option-grid { grid-template-columns: repeat(2, 1fr); }
}