/**
 * DoGoodWP — Frontend Formulier Stijlen
 *
 * Base stijlen voor alle formulieren.
 * Tokens zijn gedefinieerd in dg-tokens.css (geladen als dependency).
 *
 * @package DoGoodWP
 */

/* =====================================================
   BASE WRAPPER
   ===================================================== */

.dogoodwp-form {
  font-family:   var(--dg-font);
  font-size:     var(--dg-font-size);
  line-height:   var(--dg-line-height);
  color:         var(--dg-foreground);
  max-width:     var(--dg-form-width);
  width:         100%;
  margin-inline: auto;
}

/* =====================================================
   RESET & BASE
   ===================================================== */

.dogoodwp-form *,
.dogoodwp-form *::before,
.dogoodwp-form *::after {
  box-sizing: border-box;
}

/* =====================================================
   INVOERVELDEN
   ===================================================== */

.dg-input,
.dg-textarea,
.dg-select {
  background-color: var(--dg-input-background);
  color:            var(--dg-foreground);
  border:           var(--dg-border-width) solid var(--dg-input);
  border-radius:    var(--dg-radius-sm);
  font-family:      var(--dg-font);
  font-size:        var(--dg-font-size);
  height:           var(--dg-input-height);
  padding-inline:   var(--dg-space-3);
  transition:       border-color var(--dg-transition), box-shadow var(--dg-transition);
  width:            100%;
  box-sizing:       border-box;
  outline:          none;
}

.dg-input:hover:not(:disabled),
.dg-select:hover:not(:disabled),
.dg-textarea:hover:not(:disabled) {
  border-color: var(--dg-muted-foreground);
}

.dg-input:focus,
.dg-textarea:focus,
.dg-select:focus {
  border-color: var(--dg-ring);
  box-shadow:   0 0 0 var(--dg-ring-width)
                color-mix(in srgb, var(--dg-ring) 20%, transparent);
}

.dg-input:disabled,
.dg-textarea:disabled,
.dg-select:disabled {
  background-color: var(--dg-surface);
  color:            var(--dg-muted-foreground);
  cursor:           not-allowed;
  opacity:          0.6;
}

.dg-input[aria-invalid="true"],
.dg-input.is-invalid,
.dg-textarea[aria-invalid="true"],
.dg-textarea.is-invalid {
  border-color: var(--dg-destructive);
}

.dg-input[aria-invalid="true"]:focus,
.dg-input.is-invalid:focus,
.dg-textarea[aria-invalid="true"]:focus,
.dg-textarea.is-invalid:focus {
  box-shadow: 0 0 0 var(--dg-ring-width)
              color-mix(in srgb, var(--dg-destructive) 20%, transparent);
}

.dg-input::placeholder,
.dg-textarea::placeholder {
  color: var(--dg-subtle-foreground);
}

.dg-textarea {
  height:     auto;
  min-height: calc(var(--dg-input-height) * 2.5);
  padding:    var(--dg-space-3);
  resize:     vertical;
}

.dg-select {
  appearance:          none;
  padding-inline-end:  calc(var(--dg-space-4) + 1rem);
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right var(--dg-space-3) center;
  cursor:              pointer;
}

/* =====================================================
   LABELS EN HULPTEKST
   ===================================================== */

.dg-label {
  display:       block;
  font-size:     var(--dg-font-size-sm);
  font-weight:   600;
  color:         var(--dg-foreground);
  margin-bottom: var(--dg-space-1);
  line-height:   var(--dg-line-height);
}

.dg-label--required::after {
  content: " *";
  color:   var(--dg-destructive);
}

.dg-help-text {
  font-size:  var(--dg-font-size-sm);
  color:      var(--dg-muted-foreground);
  margin-top: var(--dg-space-1);
}

.dg-error-text {
  font-size:  var(--dg-font-size-sm);
  color:      var(--dg-destructive);
  margin-top: var(--dg-space-1);
}

.dg-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--dg-space-1);
  margin-bottom:  var(--dg-field-gap);
}

.dg-field-row {
  display:       flex;
  gap:           var(--dg-space-3);
  margin-bottom: var(--dg-field-gap);
}

.dg-field-row > * {
  flex: 1;
}

.dg-field-row--4060 > *:first-child {
  flex: 0 0 40%;
}

.dg-field-row--4060 > *:last-child {
  flex: 0 0 calc(60% - var(--dg-space-3));
}

/* =====================================================
   KNOPPEN
   ===================================================== */

.dg-btn,
button[type="button"],
button[type="submit"] {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--dg-space-2);
  font-family:     var(--dg-font);
  font-size:       var(--dg-font-size-sm);
  font-weight:     600;
  height:          var(--dg-input-height);
  padding-inline:  var(--dg-space-4);
  border-radius:   var(--dg-radius-sm);
  border:          var(--dg-border-width) solid transparent;
  cursor:          pointer;
  transition:      background-color var(--dg-transition),
                   border-color     var(--dg-transition),
                   color            var(--dg-transition),
                   opacity          var(--dg-transition),
                   box-shadow       var(--dg-transition);
  white-space:     nowrap;
  text-decoration: none;
  user-select:     none;
  box-shadow:      var(--dg-shadow-sm);
  box-sizing:      border-box;
  background-color: var(--dg-secondary);
  color:            var(--dg-secondary-foreground);
  border-color:     var(--dg-border);
}

button[type="button"]:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
  background-color: var(--dg-secondary-hover);
}

.dg-btn:focus-visible {
  outline:    none;
  box-shadow: 0 0 0 var(--dg-ring-width) var(--dg-background),
              0 0 0 calc(var(--dg-ring-width) + var(--dg-ring-offset)) var(--dg-ring);
}

.dg-btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.dg-btn--full {
  width: 100%;
}

/* Primair */
.dg-btn-primary,
button[type="submit"].primary {
  background-color: var(--dg-primary) !important;
  color:            var(--dg-primary-foreground) !important;
  border-color:     var(--dg-primary) !important;
}

.dg-btn-primary:hover:not(:disabled),
button[type="submit"].primary:hover:not(:disabled) {
  background-color: var(--dg-primary-hover) !important;
  border-color:     var(--dg-primary-hover) !important;
}

/* Secundair */
.dg-btn-secondary {
  background-color: var(--dg-secondary);
  color:            var(--dg-secondary-foreground);
  border-color:     var(--dg-border);
}

.dg-btn-secondary:hover:not(:disabled) {
  background-color: var(--dg-secondary-hover);
}

/* Outline */
.dg-btn-outline {
  background-color: transparent;
  color:            var(--dg-foreground);
  border-color:     var(--dg-border);
  box-shadow:       none;
}

.dg-btn-outline:hover:not(:disabled) {
  background-color: var(--dg-surface);
  border-color:     var(--dg-primary);
  color:            var(--dg-primary);
}

/* Ghost */
.dg-btn-ghost {
  background-color: transparent;
  color:            var(--dg-foreground);
  border-color:     transparent;
  box-shadow:       none;
}

.dg-btn-ghost:hover:not(:disabled) {
  background-color: var(--dg-surface);
}

/* Destructive */
.dg-btn-destructive {
  background-color: var(--dg-destructive);
  color:            var(--dg-destructive-foreground);
  border-color:     var(--dg-destructive);
}

.dg-btn-destructive:hover:not(:disabled) {
  opacity: 0.85;
}

/* Loading */
.dg-btn--loading {
  cursor:   wait;
  position: relative;
  color:    transparent;
}

.dg-btn--loading::after {
  content:       "";
  position:      absolute;
  width:         1rem;
  height:        1rem;
  border:        2px solid var(--dg-primary-foreground);
  border-right-color: transparent;
  border-radius: 50%;
  animation:     dg-spin 0.6s linear infinite;
}

.dg-btn-secondary.dg-btn--loading::after,
.dg-btn-outline.dg-btn--loading::after,
.dg-btn-ghost.dg-btn--loading::after {
  border-color:       var(--dg-primary);
  border-right-color: transparent;
}

@keyframes dg-spin {
  to { transform: rotate(360deg); }
}

/* =====================================================
   CHECKBOX EN RADIO
   ===================================================== */

.dg-checkbox,
.dg-radio {
  accent-color: var(--dg-primary);
  width:        1rem;
  height:       1rem;
  cursor:       pointer;
  flex-shrink:  0;
}

.dg-check-field {
  display:     flex;
  align-items: flex-start;
  gap:         var(--dg-space-2);
  cursor:      pointer;
}

.dg-check-field__label {
  font-size:   var(--dg-font-size-sm);
  color:       var(--dg-foreground);
  line-height: var(--dg-line-height);
  cursor:      pointer;
}

.dg-checkbox-group,
.dg-radio-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--dg-space-2);
}

.dg-checkbox-item,
.dg-radio-item {
  display:     flex;
  align-items: flex-start;
  gap:         var(--dg-space-2);
  cursor:      pointer;
}

/* =====================================================
   BADGES
   ===================================================== */

.dg-badge {
  display:       inline-flex;
  align-items:   center;
  font-size:     var(--dg-font-size-xs);
  font-weight:   600;
  padding:       0.2rem var(--dg-space-2);
  border-radius: var(--dg-radius-full);
  border:        1px solid transparent;
  white-space:   nowrap;
}

.dg-badge--success {
  background-color: color-mix(in srgb, var(--dg-success) 15%, transparent);
  color:            color-mix(in srgb, var(--dg-success) 70%, #000);
  border-color:     color-mix(in srgb, var(--dg-success) 25%, transparent);
}

.dg-badge--warning {
  background-color: color-mix(in srgb, var(--dg-warning) 15%, transparent);
  color:            color-mix(in srgb, var(--dg-warning) 70%, #000);
  border-color:     color-mix(in srgb, var(--dg-warning) 25%, transparent);
}

.dg-badge--destructive {
  background-color: color-mix(in srgb, var(--dg-destructive) 15%, transparent);
  color:            color-mix(in srgb, var(--dg-destructive) 70%, #000);
  border-color:     color-mix(in srgb, var(--dg-destructive) 25%, transparent);
}

.dg-badge--default {
  background-color: var(--dg-surface);
  color:            var(--dg-muted-foreground);
  border-color:     var(--dg-border);
}

.dg-badge--primary {
  background-color: var(--dg-primary);
  color:            var(--dg-primary-foreground);
  border-color:     var(--dg-primary);
}

/* =====================================================
   KAART (CARD)
   ===================================================== */

.dg-card {
  background-color: var(--dg-background);
  border:           var(--dg-border-width) solid var(--dg-border);
  border-radius:    var(--dg-radius-lg);
  box-shadow:       var(--dg-shadow-sm);
  overflow:         hidden;
}

.dg-card__header {
  padding:         var(--dg-space-4) var(--dg-form-padding);
  border-bottom:   var(--dg-form-divider-width) solid var(--dg-border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--dg-space-4);
}

.dg-card__title {
  font-size:   var(--dg-font-size-lg);
  font-weight: 600;
  color:       var(--dg-foreground);
  margin:      0;
}

.dg-card__body {
  padding: var(--dg-form-padding);
}

.dg-card__footer {
  padding:         var(--dg-space-4) var(--dg-form-padding);
  border-top:      var(--dg-form-divider-width) solid var(--dg-border);
  background:      var(--dg-surface);
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--dg-space-3);
}

/* =====================================================
   TOGGLE
   ===================================================== */

.dg-toggle {
  appearance:        none;
  width:             2.5rem;
  height:            1.5rem;
  border-radius:     var(--dg-radius-full);
  background-color:  var(--dg-border);
  border:            2px solid transparent;
  cursor:            pointer;
  position:          relative;
  transition:        background-color var(--dg-transition);
  flex-shrink:       0;
}

.dg-toggle::after {
  content:          "";
  position:         absolute;
  top: 2px;
  left: 2px;
  width:            1rem;
  height:           1rem;
  border-radius:    50%;
  background-color: #ffffff;
  box-shadow:       var(--dg-shadow-sm);
  transition:       transform var(--dg-transition);
}

.dg-toggle:checked {
  background-color: var(--dg-primary);
}

.dg-toggle:checked::after {
  transform: translateX(1rem);
}

.dg-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dg-toggle:focus-visible {
  outline:    none;
  box-shadow: 0 0 0 var(--dg-ring-width) var(--dg-background),
              0 0 0 calc(var(--dg-ring-width) + var(--dg-ring-offset)) var(--dg-ring);
}

/* =====================================================
   FORMULIER CONTAINER
   ===================================================== */

.dg-form-wrap,
.dg-form-card {
  background:    var(--dg-background);
  border:        var(--dg-form-border-width) solid var(--dg-border);
  border-radius: var(--dg-radius-xl);
  box-shadow:    var(--dg-shadow);
  overflow:      hidden;
}

.dg-form-body {
  padding: var(--dg-form-padding);
}

.dg-form-footer {
  padding:         var(--dg-space-4) var(--dg-form-padding);
  border-top:      var(--dg-form-divider-width) solid var(--dg-border);
  background:      var(--dg-surface);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--dg-space-3);
}

.dg-main-title,
.dg-form-title {
  font-size:     var(--dg-font-size-xl);
  font-weight:   700;
  color:         var(--dg-foreground);
  margin:        0 0 var(--dg-space-2) 0;
  line-height:   1.2;
}

.dg-main-subtitle,
.dg-form-subtitle {
  font-size:     var(--dg-font-size);
  color:         var(--dg-muted-foreground);
  margin:        0 0 var(--dg-section-gap) 0;
  line-height:   var(--dg-line-height);
}

/* =====================================================
   STAP-INDICATOR
   ===================================================== */

.dg-steps {
  display:         flex;
  align-items:     center;
  padding:         var(--dg-space-4) var(--dg-form-padding);
  border-bottom:   var(--dg-form-divider-width) solid var(--dg-border);
  background:      var(--dg-surface);
  gap:             var(--dg-space-2);
}

.dg-step {
  display:     flex;
  align-items: center;
  gap:         var(--dg-space-2);
  flex:        1;
}

.dg-step + .dg-step::before {
  content:          "";
  flex:             1;
  height:           1px;
  background-color: var(--dg-border);
  transition:       background-color var(--dg-transition);
}

.dg-step--done + .dg-step::before {
  background-color: var(--dg-primary);
}

.dg-step__dot {
  width:            1.5rem;
  height:           1.5rem;
  border-radius:    50%;
  border:           2px solid var(--dg-border);
  background-color: var(--dg-background);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        var(--dg-font-size-xs);
  font-weight:      700;
  color:            var(--dg-muted-foreground);
  flex-shrink:      0;
  transition:       all var(--dg-transition);
}

.dg-step--active .dg-step__dot {
  border-color:     var(--dg-primary);
  background-color: var(--dg-primary);
  color:            var(--dg-primary-foreground);
}

.dg-step--done .dg-step__dot {
  border-color:     var(--dg-primary);
  background-color: color-mix(in srgb, var(--dg-primary) 12%, transparent);
  color:            var(--dg-primary);
}

.dg-step__label {
  font-size:   var(--dg-font-size-xs);
  font-weight: 500;
  color:       var(--dg-muted-foreground);
  white-space: nowrap;
}

.dg-step--active .dg-step__label {
  color:       var(--dg-foreground);
  font-weight: 600;
}

.dg-step__line {
  flex:             1;
  height:           1px;
  background-color: var(--dg-border);
  margin:           0 var(--dg-space-2);
}

/* =====================================================
   BEDRAGKNOPPEN
   ===================================================== */

.dg-amounts,
.dg-amount-grid {
  display:               grid;
  grid-template-columns: repeat(var(--dg-amounts-cols), 1fr);
  gap:                   var(--dg-space-2);
  margin-bottom:         var(--dg-section-gap);
}

.dg-amount-btn {
  padding:       var(--dg-space-3) var(--dg-space-2);
  font-size:     var(--dg-font-size-sm);
  font-weight:   600;
  border-radius: var(--dg-radius-sm);
  border:        1px solid var(--dg-border);
  background:    var(--dg-background);
  color:         var(--dg-foreground);
  cursor:        pointer;
  text-align:    center;
  transition:    all var(--dg-transition);
  min-height:    var(--dg-input-height);
  box-sizing:    border-box;
}

.dg-amount-btn:hover:not(.is-active) {
  border-color:     var(--dg-primary);
  color:            var(--dg-primary);
  background-color: color-mix(in srgb, var(--dg-primary) 5%, transparent);
}

.dg-amount-btn.is-active {
  border-color:     var(--dg-primary);
  background-color: var(--dg-primary);
  color:            var(--dg-primary-foreground);
  box-shadow:       var(--dg-shadow-sm);
}

/* =====================================================
   PAKKETKAARTEN
   ===================================================== */

.dg-packages,
.dg-packages-grid {
  display:               grid;
  grid-template-columns: repeat(var(--dg-packages-cols), 1fr);
  gap:                   var(--dg-space-3);
  margin-bottom:         var(--dg-section-gap);
}

.dg-package-card {
  border:        var(--dg-border-width) solid var(--dg-border);
  border-radius: var(--dg-radius-lg);
  padding:       var(--dg-space-4) var(--dg-space-5);
  cursor:        pointer;
  background:    var(--dg-background);
  transition:    border-color var(--dg-transition),
                 background   var(--dg-transition),
                 box-shadow   var(--dg-transition);
  display:       flex;
  align-items:   center;
  gap:           var(--dg-space-4);
}

.dg-package-card:hover:not(.is-active) {
  border-color: var(--dg-primary);
  box-shadow:   var(--dg-shadow-sm);
}

.dg-package-card.is-active {
  border-color:     var(--dg-primary);
  background-color: color-mix(in srgb, var(--dg-primary) 5%, transparent);
}

.dg-package-card__radio {
  width:           1.25rem;
  height:          1.25rem;
  border-radius:   50%;
  border:          2px solid var(--dg-border);
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      border-color var(--dg-transition);
}

.dg-package-card.is-active .dg-package-card__radio {
  border-color: var(--dg-primary);
}

.dg-package-card.is-active .dg-package-card__radio::after {
  content:          "";
  width:            0.625rem;
  height:           0.625rem;
  border-radius:    50%;
  background-color: var(--dg-primary);
}

.dg-package-card__content {
  flex: 1;
}

.dg-package-card__title {
  font-weight:   600;
  color:         var(--dg-foreground);
  margin-bottom: var(--dg-space-1);
}

.dg-package-card__description {
  font-size: var(--dg-font-size-sm);
  color:     var(--dg-muted-foreground);
}

.dg-package-card__price {
  font-size:   var(--dg-font-size-lg);
  font-weight: 700;
  color:       var(--dg-foreground);
  white-space: nowrap;
}

.dg-package-card.is-active .dg-package-card__price {
  color: var(--dg-primary);
}

.dg-package-card__price-sub {
  font-size:   var(--dg-font-size-xs);
  color:       var(--dg-muted-foreground);
  font-weight: 400;
}

.dg-package-card__freq {
  font-size:   var(--dg-font-size-xs);
  color:       var(--dg-muted-foreground);
  font-weight: 400;
}

/* =====================================================
   LEVERINGSOPTIE SELECTOR
   ===================================================== */

.dg-delivery-options {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--dg-space-3);
}

.dg-delivery-option {
  border:        1px solid var(--dg-border);
  border-radius: var(--dg-radius-lg);
  padding:       var(--dg-space-4);
  cursor:        pointer;
  background:    var(--dg-background);
  text-align:    center;
  transition:    all var(--dg-transition);
}

.dg-delivery-option:hover:not(.is-active) {
  border-color: var(--dg-primary);
}

.dg-delivery-option.is-active {
  border-color:     var(--dg-primary);
  background-color: color-mix(in srgb, var(--dg-primary) 5%, transparent);
}

.dg-delivery-option__icon {
  font-size: 1.5rem;
  margin-bottom: var(--dg-space-2);
}

.dg-delivery-option__title {
  font-weight: 600;
  font-size: var(--dg-font-size-sm);
  color: var(--dg-foreground);
  margin-bottom: var(--dg-space-1);
}

.dg-delivery-option__price {
  font-size: var(--dg-font-size-xs);
  color: var(--dg-muted-foreground);
}

.dg-pickup-info {
  background:    color-mix(in srgb, #3b82f6 8%, transparent);
  border:        1px solid color-mix(in srgb, #3b82f6 25%, transparent);
  border-radius: var(--dg-radius-lg);
  padding:       var(--dg-space-4);
  margin-top:    var(--dg-space-3);
  font-size:     var(--dg-font-size-sm);
  color:         var(--dg-foreground);
}

/* =====================================================
   RADIO BUTTON GROEP (Subscription-style)
   ===================================================== */

.dg-radio-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--dg-space-3);
}

.dg-radio-group__label {
  display:       block;
  border:        var(--dg-border-width) solid var(--dg-border);
  border-radius: var(--dg-radius-lg);
  padding:       var(--dg-space-4);
  cursor:        pointer;
  transition:    background-color var(--dg-transition), border-color var(--dg-transition);
  background:    var(--dg-input-background);
}

.dg-radio-group__label:hover {
  background: var(--dg-surface);
}

.dg-radio-group__label:has(.dg-radio-group__radio:checked) {
  border-color: var(--dg-primary);
  background:   color-mix(in srgb, var(--dg-primary) 5%, transparent);
}

.dg-radio-group__item-wrapper {
  display:     flex;
  align-items: center;
  gap:         var(--dg-space-4);
}

.dg-radio-group__content {
  display:        flex;
  flex-direction: column;
  gap:            var(--dg-space-1);
  flex:           1;
  min-width:      0;
}

.dg-radio-group__title {
  font-size:   var(--dg-font-size);
  font-weight: 600;
  color:       var(--dg-foreground);
  display:     block;
}

.dg-radio-group__description {
  font-size: var(--dg-font-size-sm);
  color:     var(--dg-muted-foreground);
  display:   block;
}

.dg-radio-group__right {
  display:     flex;
  align-items: center;
  gap:         var(--dg-space-3);
  flex-shrink: 0;
}

.dg-radio-group__price {
  font-size:   var(--dg-font-size);
  font-weight: 600;
  color:       var(--dg-foreground);
}

.dg-radio-group__label:has(.dg-radio-group__radio:checked) .dg-radio-group__price {
  color: var(--dg-primary);
}

.dg-radio-group__radio {
  appearance:      none;
  -webkit-appearance: none;
  width:           1.25em;
  height:          1.25em;
  border:          2px solid var(--dg-border);
  border-radius:   50%;
  cursor:          pointer;
  flex-shrink:     0;
  transition:      border-color var(--dg-transition), background-color var(--dg-transition);
  position:        relative;
  background:      var(--dg-input-background);
  margin:          0;
}

.dg-radio-group__radio:checked {
  border-color:     var(--dg-primary);
  background-color: var(--dg-primary);
  box-shadow:       inset 0 0 0 0.25em var(--dg-input-background);
}

.dg-radio-group__radio:focus-visible {
  outline:        2px solid var(--dg-primary);
  outline-offset: 2px;
}

/* =====================================================
   TOGGLE SWITCH
   ===================================================== */

.dg-toggle-wrapper {
  border:        var(--dg-border-width) solid var(--dg-border);
  border-radius: var(--dg-radius-lg);
  padding:       var(--dg-space-4);
  background:    var(--dg-input-background);
  margin-bottom: var(--dg-section-gap);
}

.dg-toggle-row {
  display:     flex;
  align-items: center;
  gap:         var(--dg-space-3);
}

.dg-toggle-content {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            var(--dg-space-1);
  cursor:         pointer;
  user-select:    none;
}

.dg-toggle-title {
  font-size:   var(--dg-font-size);
  font-weight: 500;
  color:       var(--dg-foreground);
  display:     block;
}

.dg-toggle-description {
  font-size: var(--dg-font-size-sm);
  color:     var(--dg-muted-foreground);
}

/* Toggle Switch Element - native checkbox styling */
.dg-toggle-row .dg-toggle {
  /* Verwijs naar de algemene toggle definitie hierboven (regel 533-576) */
  /* Geen extra styling nodig - de native checkbox wordt al correct gestyled */
}

/* Toggle Body - Collapsible content */
.dg-toggle-body {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.3s ease;
}

.dg-toggle-wrapper.is-active .dg-toggle-body {
  max-height: 500px;
}

.dg-toggle-body__content {
  padding-top: var(--dg-space-4);
}

/* =====================================================
   HOEVEELHEID BEDIENING
   ===================================================== */

.dg-quantity-wrap {
  margin-bottom: var(--dg-space-4);
}

.dg-quantity-label {
  font-size:     var(--dg-font-size-sm);
  font-weight:   600;
  color:         var(--dg-foreground);
  margin-bottom: var(--dg-space-2);
}

.dg-quantity-control,
.dg-quantity {
  display:       inline-flex;
  align-items:   center;
  border:        1px solid var(--dg-border);
  border-radius: var(--dg-radius-sm);
  overflow:      hidden;
  height:        var(--dg-input-height);
}

.dg-quantity-total {
  margin-top:  var(--dg-space-2);
  font-size:   var(--dg-font-size-lg);
  font-weight: 700;
  color:       var(--dg-foreground);
}

.dg-quantity__btn,
.dg-quantity-btn {
  width:           var(--dg-input-height);
  height:          100%;
  background:      var(--dg-surface);
  border:          none;
  cursor:          pointer;
  color:           var(--dg-muted-foreground);
  font-size:       1.25rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      background var(--dg-transition), color var(--dg-transition);
}

.dg-quantity__btn:hover:not(:disabled),
.dg-quantity-btn:hover:not(:disabled) {
  background: var(--dg-surface-2);
  color:      var(--dg-foreground);
}

.dg-quantity__input,
.dg-quantity-input {
  width:       3.5rem;
  height:      100%;
  border:      none;
  border-inline: 1px solid var(--dg-border);
  text-align:  center;
  font-size:   var(--dg-font-size);
  font-weight: 600;
  color:       var(--dg-foreground);
  background:  var(--dg-background);
  padding:     0;
}

.dg-quantity__input:focus,
.dg-quantity-input:focus {
  outline: none;
  background: color-mix(in srgb, var(--dg-ring) 5%, transparent);
}

/* =====================================================
   TOTAALBALK
   ===================================================== */

.dg-total {
  background:      var(--dg-surface);
  border:          1px solid var(--dg-border);
  border-radius:   var(--dg-radius-lg);
  padding:         var(--dg-space-4) var(--dg-space-5);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--dg-space-4);
}

.dg-total__label {
  font-size: var(--dg-font-size-sm);
  color: var(--dg-muted-foreground);
  font-weight: 500;
}

.dg-total__amount {
  font-size: var(--dg-font-size-xl);
  font-weight: 700;
  color: var(--dg-foreground);
}

/* =====================================================
   SPINNER / LOADING
   ===================================================== */

.dg-spinner {
  display:         inline-block;
  width:           1.5rem;
  height:          1.5rem;
  border:          3px solid var(--dg-border);
  border-top-color: var(--dg-primary);
  border-radius:   50%;
  animation:       dg-spin 0.6s linear infinite;
}

/* =====================================================
   BETAALMETHODEN
   ===================================================== */

.dg-payment-methods {
  display:        flex;
  flex-direction: column;
  gap:            var(--dg-space-2);
}

.dg-payment-method {
  display:         flex;
  align-items:     center;
  gap:             var(--dg-space-3);
  padding:         var(--dg-space-3) var(--dg-space-4);
  border:          var(--dg-border-width) solid var(--dg-border);
  border-radius:   var(--dg-radius);
  background:      var(--dg-card);
  cursor:          pointer;
  font-size:       var(--dg-font-size-sm);
  font-weight:     500;
  color:           var(--dg-foreground);
  transition:      border-color 0.15s, background 0.15s;
  user-select:     none;
}

.dg-payment-method:hover {
  border-color: var(--dg-primary);
  background:   color-mix(in srgb, var(--dg-primary) 5%, transparent);
}

.dg-payment-method--active {
  border-color: var(--dg-primary);
  background:   color-mix(in srgb, var(--dg-primary) 8%, transparent);
  box-shadow:   0 0 0 1px var(--dg-primary);
}

.dg-payment-method img {
  flex-shrink: 0;
  height:      1.5em;
  width:       auto;
}

.dg-error-message {
  padding:         var(--dg-space-4);
  background:      color-mix(in srgb, var(--dg-destructive) 10%, transparent);
  border:          1px solid var(--dg-destructive);
  border-radius:   var(--dg-radius);
  color:           var(--dg-destructive);
  font-size:       var(--dg-font-size-sm);
  margin-bottom:   var(--dg-space-4);
}

/* =====================================================
   LEGE TOESTAND
   ===================================================== */

.dg-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         var(--dg-space-10) var(--dg-space-8);
  text-align:      center;
  color:           var(--dg-muted-foreground);
  gap:             var(--dg-space-3);
}

.dg-empty__icon {
  font-size: 2.5rem;
  opacity: 0.4;
}

.dg-empty__title {
  font-size: var(--dg-font-size-lg);
  font-weight: 600;
  color: var(--dg-foreground);
  margin: 0;
}

.dg-empty__text {
  font-size: var(--dg-font-size-sm);
  max-width: 28rem;
  margin: 0;
}

/* =====================================================
   ORDER SAMENVATTING (COLLAPSIBLE)
   ===================================================== */

.dg-order-summary {
  background:      var(--dg-input-background);
  border:          var(--dg-border-width) solid var(--dg-border);
  border-radius:   var(--dg-radius-lg);
  overflow:        hidden;
  margin-bottom:   var(--dg-section-gap);
}

.dg-order-summary__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--dg-space-4) var(--dg-space-5);
  cursor:          pointer;
  user-select:     none;
  transition:      background-color var(--dg-transition);
  background:      var(--dg-input-background);
  border-bottom:   var(--dg-border-width) solid var(--dg-border);
}

.dg-order-summary__header:hover {
  background: var(--dg-surface);
}

.dg-order-summary__left {
  display:     flex;
  align-items: center;
  gap:         var(--dg-space-3);
}

.dg-order-summary__icon {
  width:            1.5em;
  height:           1.5em;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--dg-foreground);
  flex-shrink:      0;
}

.dg-order-summary__title {
  font-size:   var(--dg-font-size);
  font-weight: 500;
  color:       var(--dg-foreground);
}

.dg-order-summary__right {
  display:     flex;
  align-items: center;
  gap:         var(--dg-space-3);
}

.dg-order-summary__total {
  font-size:   var(--dg-font-size-lg);
  font-weight: 700;
  color:       var(--dg-foreground);
}

.dg-order-summary__chevron {
  width:           1em;
  height:          1em;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--dg-muted-foreground);
  transition:      transform var(--dg-transition);
}

.dg-order-summary.is-open .dg-order-summary__chevron {
  transform: rotate(180deg);
}

.dg-order-summary__body {
  max-height: 0;
  overflow:   hidden;
  transition: max-height var(--dg-transition);
}

.dg-order-summary.is-open .dg-order-summary__body {
  max-height: 2000px;
}

.dg-order-summary__content {
  padding:    var(--dg-space-5);
  background: var(--dg-input-background);
}

/* =====================================================
   ORDER LINE ITEMS
   ===================================================== */

.dg-order-items {
  display:        flex;
  flex-direction: column;
  gap:            var(--dg-space-4);
  margin-bottom:  var(--dg-space-5);
}

.dg-order-item {
  display:     flex;
  gap:         var(--dg-space-4);
  align-items: flex-start;
}

.dg-order-item__image {
  width:            4em;
  height:           4em;
  border-radius:    var(--dg-radius);
  background:       var(--dg-surface);
  flex-shrink:      0;
  overflow:         hidden;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  border:           var(--dg-border-width) solid var(--dg-border);
}

.dg-order-item__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.dg-order-item__details {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            var(--dg-space-1);
}

.dg-order-item__name {
  font-size:   var(--dg-font-size);
  font-weight: 600;
  color:       var(--dg-foreground);
  margin:      0;
}

.dg-order-item__variant {
  font-size: var(--dg-font-size-sm);
  color:     var(--dg-muted-foreground);
}

.dg-order-item__quantity-row {
  display:     flex;
  align-items: center;
  gap:         var(--dg-space-3);
  margin-top:  var(--dg-space-2);
}

.dg-order-item__quantity {
  display:       inline-flex;
  align-items:   center;
  border:        var(--dg-border-width) solid var(--dg-border);
  border-radius: var(--dg-radius-sm);
  overflow:      hidden;
  height:        2em;
}

.dg-order-item__qty-btn {
  width:           2em;
  height:          100%;
  background:      var(--dg-surface);
  border:          none;
  cursor:          pointer;
  color:           var(--dg-foreground);
  font-size:       var(--dg-font-size);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      background var(--dg-transition);
  padding:         0;
}

.dg-order-item__qty-btn:hover:not(:disabled) {
  background: var(--dg-surface-2);
}

.dg-order-item__qty-btn:disabled {
  opacity: 0.4;
  cursor:  not-allowed;
}

.dg-order-item__qty-input {
  width:       2.5em;
  height:      100%;
  border:      none;
  border-inline: var(--dg-border-width) solid var(--dg-border);
  text-align:  center;
  font-size:   var(--dg-font-size-sm);
  font-weight: 600;
  color:       var(--dg-foreground);
  background:  var(--dg-background);
  padding:     0;
}

.dg-order-item__qty-input:focus {
  outline: none;
}

.dg-order-item__right {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            var(--dg-space-2);
  flex-shrink:    0;
}

.dg-order-item__price {
  font-size:   var(--dg-font-size);
  font-weight: 600;
  color:       var(--dg-foreground);
}

.dg-order-item__remove {
  width:           1.5em;
  height:          1.5em;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  border:          none;
  color:           var(--dg-muted-foreground);
  cursor:          pointer;
  transition:      color var(--dg-transition);
  padding:         0;
}

.dg-order-item__remove:hover {
  color: var(--dg-destructive);
}

/* =====================================================
   ORDER TOTALEN
   ===================================================== */

.dg-order-totals {
  border-top: var(--dg-border-width) solid var(--dg-border);
  padding-top: var(--dg-space-4);
  display:     flex;
  flex-direction: column;
  gap:         var(--dg-space-3);
}

.dg-order-totals__row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--dg-space-4);
}

.dg-order-totals__label {
  font-size: var(--dg-font-size);
  color:     var(--dg-muted-foreground);
}

.dg-order-totals__value {
  font-size:   var(--dg-font-size);
  font-weight: 500;
  color:       var(--dg-foreground);
}

.dg-order-totals__row--total {
  border-top:  var(--dg-border-width) solid var(--dg-border);
  padding-top: var(--dg-space-3);
  margin-top:  var(--dg-space-2);
}

.dg-order-totals__row--total .dg-order-totals__label {
  font-size:   var(--dg-font-size-lg);
  font-weight: 600;
  color:       var(--dg-foreground);
}

.dg-order-totals__row--total .dg-order-totals__value {
  font-size:   var(--dg-font-size-xl);
  font-weight: 700;
  color:       var(--dg-foreground);
}

/* =====================================================
   VERZENDOPTIES
   ===================================================== */

.dg-shipping-options {
  display:        flex;
  flex-direction: column;
  gap:            var(--dg-space-3);
  margin-bottom:  var(--dg-section-gap);
}

.dg-shipping-option {
  background:    var(--dg-background);
  border:        var(--dg-border-width) solid var(--dg-border);
  border-radius: var(--dg-radius-lg);
  padding:       var(--dg-space-4);
  cursor:        pointer;
  transition:    all var(--dg-transition);
  display:       flex;
  align-items:   center;
  gap:           var(--dg-space-3);
}

.dg-shipping-option:hover {
  border-color: var(--dg-primary);
  background:   var(--dg-surface);
}

.dg-shipping-option.is-selected {
  border-color: var(--dg-primary);
  background:   color-mix(in srgb, var(--dg-primary) 5%, transparent);
  box-shadow:   var(--dg-shadow-sm);
}

.dg-shipping-option__radio {
  width:           1.25em;
  height:          1.25em;
  border-radius:   50%;
  border:          2px solid var(--dg-border);
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      border-color var(--dg-transition);
  background:      var(--dg-background);
}

.dg-shipping-option.is-selected .dg-shipping-option__radio {
  border-color: var(--dg-primary);
}

.dg-shipping-option.is-selected .dg-shipping-option__radio::after {
  content:          "";
  width:            0.625em;
  height:           0.625em;
  border-radius:    50%;
  background-color: var(--dg-primary);
}

.dg-shipping-option__details {
  flex: 1;
  min-width: 0;
}

.dg-shipping-option__name {
  font-size:   var(--dg-font-size);
  font-weight: 500;
  color:       var(--dg-foreground);
  margin:      0 0 0.25em 0;
}

.dg-shipping-option__delivery {
  font-size: var(--dg-font-size-sm);
  color:     var(--dg-muted-foreground);
  margin:    0;
}

.dg-shipping-option__price {
  font-size:   var(--dg-font-size-lg);
  font-weight: 600;
  color:       var(--dg-foreground);
  flex-shrink: 0;
}

/* =====================================================
   RESPONSIVITEIT
   ===================================================== */

@media (max-width: 360px) {
  .dg-amounts {
    grid-template-columns: repeat(min(var(--dg-amounts-cols), 2), 1fr);
  }

  .dg-packages {
    grid-template-columns: 1fr;
  }

  .dg-delivery-options {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================
   SPONSOR FORMULIER STIJLEN
   ===================================================== */
/**
 * DoGoodWP — Sponsor Formulier Stijlen
 *
 * Multi-step sponsor formulier voor campagnes met pakketten en kind-selectie.
 * Gebruikt semantische tokens uit het DoGoodWP design systeem.
 *
 * @package DoGoodWP
 */

/* =====================================================
   PAKKET BANNER (bovenaan formulier)
   ===================================================== */

.dg-sponsor-package-banner {
  display:       flex;
  align-items:   center;
  gap:           var(--dg-space-3);
  padding:       var(--dg-space-3) var(--dg-space-4);
  background:    color-mix(in srgb, var(--dg-success) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--dg-success) 25%, transparent);
  border-radius: var(--dg-radius-lg) var(--dg-radius-lg) 0 0;
}

.dg-sponsor-package-banner__icon {
  font-size:   1.5rem;
  flex-shrink: 0;
}

.dg-sponsor-package-banner__content {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  flex:           1;
}

.dg-sponsor-package-banner__label {
  font-size:      var(--dg-font-size-xs);
  font-weight:    500;
  color:          color-mix(in srgb, var(--dg-success) 70%, #000);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dg-sponsor-package-banner__name {
  font-size:   var(--dg-font-size-sm);
  font-weight: 700;
  color:       color-mix(in srgb, var(--dg-success) 70%, #000);
}

.dg-sponsor-package-banner__price {
  font-size: var(--dg-font-size-xs);
  color:     color-mix(in srgb, var(--dg-success) 70%, #000);
  opacity:   0.8;
}

.dg-sponsor-package-selector {
  position:    relative;
  flex-shrink: 0;
}

.dg-sponsor-package-banner__change {
  font-size:       var(--dg-font-size-xs);
  color:           color-mix(in srgb, var(--dg-success) 70%, #000);
  text-decoration: underline;
  white-space:     nowrap;
  cursor:          pointer;
  background:      none;
  border:          none;
  padding:         0;
  font-family:     inherit;
}

.dg-sponsor-package-banner__change:hover {
  color: var(--dg-success);
}

/* Package dropdown */
.dg-sponsor-package-dropdown {
  position:      absolute;
  top:           calc(100% + var(--dg-space-2));
  right:         0;
  min-width:     20rem;
  background:    var(--dg-background);
  border:        var(--dg-border-width) solid var(--dg-border);
  border-radius: var(--dg-radius);
  box-shadow:    var(--dg-shadow-lg);
  z-index:       1000;
  overflow:      hidden;
  animation:     dg-slideDown 0.15s ease;
}

.dg-sponsor-package-dropdown[hidden] {
  display: none;
}

.dg-sponsor-package-dropdown__header {
  padding:       var(--dg-space-3) var(--dg-space-4);
  border-bottom: var(--dg-border-width) solid var(--dg-border);
  background:    var(--dg-surface);
}

.dg-sponsor-package-dropdown__title {
  font-size:   var(--dg-font-size-sm);
  font-weight: 600;
  color:       var(--dg-foreground);
}

.dg-sponsor-package-dropdown__list {
  max-height: 20rem;
  overflow-y: auto;
}

.dg-sponsor-package-option {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         var(--dg-space-3) var(--dg-space-4);
  background:      var(--dg-background);
  border:          none;
  border-bottom:   var(--dg-border-width) solid var(--dg-border);
  cursor:          pointer;
  text-align:      left;
  transition:      background-color var(--dg-transition);
  font-family:     inherit;
}

.dg-sponsor-package-option:last-child {
  border-bottom: none;
}

.dg-sponsor-package-option:hover:not(:disabled) {
  background: var(--dg-surface);
}

.dg-sponsor-package-option--current {
  background: color-mix(in srgb, var(--dg-success) 5%, transparent);
}

.dg-sponsor-package-option:disabled {
  cursor: default;
  opacity: 0.7;
}

.dg-sponsor-package-option__content {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
  flex:           1;
}

.dg-sponsor-package-option__title {
  font-size:   var(--dg-font-size-sm);
  font-weight: 600;
  color:       var(--dg-foreground);
}

.dg-sponsor-package-option__price {
  font-size: var(--dg-font-size-xs);
  color:     var(--dg-muted-foreground);
}

.dg-sponsor-package-option__badge {
  padding:       0.25rem 0.5rem;
  background:    color-mix(in srgb, var(--dg-success) 15%, transparent);
  color:         color-mix(in srgb, var(--dg-success) 70%, #000);
  border-radius: var(--dg-radius-sm);
  font-size:     var(--dg-font-size-xs);
  font-weight:   600;
  white-space:   nowrap;
}

/* =====================================================
   STEPPER (gedeelde component — dg-stepper)
   ===================================================== */

.dg-stepper {
  display:       flex;
  align-items:   center;
  padding:       var(--dg-space-4) var(--dg-form-padding);
  border-bottom: var(--dg-form-divider-width) solid var(--dg-border);
  background:    var(--dg-surface);
  gap:           var(--dg-space-2);
  width:         100%;
}

.dg-stepper__item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--dg-space-1);
  flex:           1;
}

.dg-stepper__circle {
  width:           2em;
  height:          2em;
  border-radius:   50%;
  border:          2px solid var(--dg-border);
  background:      var(--dg-background);
  color:           var(--dg-muted-foreground);
  font-size:       var(--dg-font-size-sm);
  font-weight:     600;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background-color var(--dg-transition),
                   border-color var(--dg-transition),
                   color var(--dg-transition);
}

.dg-stepper__label {
  font-size:   var(--dg-font-size-xs);
  color:       var(--dg-muted-foreground);
  font-weight: 500;
  white-space: nowrap;
  transition:  color var(--dg-transition);
}

.dg-stepper__item--active .dg-stepper__circle {
  background:   var(--dg-primary);
  border-color: var(--dg-primary);
  color:        var(--dg-primary-foreground);
}

.dg-stepper__item--active .dg-stepper__label {
  color:       var(--dg-foreground);
  font-weight: 600;
}

.dg-stepper__item--done .dg-stepper__circle {
  background:   var(--dg-primary);
  border-color: var(--dg-primary);
  color:        var(--dg-primary-foreground);
}

.dg-stepper__line {
  flex:          1;
  height:        2px;
  background:    var(--dg-border);
  margin-bottom: 1.4rem;
  transition:    background-color 0.3s;
}

.dg-stepper__line--done {
  background: var(--dg-primary);
}

/* =====================================================
   STEPPER (aangepast voor sponsor form)
   ===================================================== */

.dg-sponsor-stepper {
  display:         flex;
  align-items:     center;
  padding:         var(--dg-space-4) var(--dg-form-padding);
  border-bottom:   var(--dg-form-divider-width) solid var(--dg-border);
  background:      var(--dg-surface);
  gap:             var(--dg-space-2);
  width:           100%;
}

.dg-sponsor-stepper__item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--dg-space-1);
  flex:           1;
}

.dg-sponsor-stepper__circle {
  width:            2em;
  height:           2em;
  border-radius:    50%;
  border:           2px solid var(--dg-border);
  background:       var(--dg-background);
  color:            var(--dg-muted-foreground);
  font-size:        var(--dg-font-size-sm);
  font-weight:      600;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       background-color var(--dg-transition),
                    border-color var(--dg-transition),
                    color var(--dg-transition);
}

.dg-sponsor-stepper__label {
  font-size:   var(--dg-font-size-xs);
  color:       var(--dg-muted-foreground);
  font-weight: 500;
  white-space: nowrap;
  transition:  color var(--dg-transition);
}

.dg-sponsor-stepper__item--active .dg-sponsor-stepper__circle {
  background:   var(--dg-primary);
  border-color: var(--dg-primary);
  color:        var(--dg-primary-foreground);
}

.dg-sponsor-stepper__item--active .dg-sponsor-stepper__label {
  color:       var(--dg-foreground);
  font-weight: 600;
}

.dg-sponsor-stepper__item--done .dg-sponsor-stepper__circle {
  background:   var(--dg-primary);
  border-color: var(--dg-primary);
  color:        var(--dg-primary-foreground);
}

.dg-sponsor-stepper__line {
  flex:        1;
  height:      2px;
  background:  var(--dg-border);
  margin-bottom: 1.4rem;
  transition:  background-color 0.3s;
}

.dg-sponsor-stepper__line--done {
  background: var(--dg-primary);
}

/* =====================================================
   HOEVEELHEID BEDIENING (voor sponsor form)
   ===================================================== */

.dg-sponsor-quantity {
  display:     flex;
  align-items: center;
  gap:         var(--dg-space-3);
}

.dg-sponsor-quantity__btn {
  width:           2em;
  height:          2em;
  border-radius:   50%;
  border:          1.5px solid var(--dg-border);
  background:      var(--dg-background);
  color:           var(--dg-foreground);
  font-size:       var(--dg-font-size-lg);
  font-weight:     500;
  line-height:     1;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background-color var(--dg-transition),
                   border-color var(--dg-transition);
  flex-shrink:     0;
  font-family:     inherit;
}

.dg-sponsor-quantity__btn:hover:not(:disabled) {
  background-color: var(--dg-surface);
  border-color:     var(--dg-primary);
}

.dg-sponsor-quantity__btn:focus-visible {
  outline:        2px solid var(--dg-ring);
  outline-offset: 2px;
}

.dg-sponsor-quantity__btn:disabled {
  opacity: 0.35;
  cursor:  not-allowed;
}

.dg-sponsor-quantity__display {
  min-width:   1.75em;
  text-align:  center;
  font-size:   var(--dg-font-size);
  font-weight: 600;
}

.dg-sponsor-quantity__unit-price {
  font-size:   var(--dg-font-size-sm);
  color:       var(--dg-muted-foreground);
  margin-left: auto;
}

.dg-sponsor-quantity__subtotal {
  font-size:   var(--dg-font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* =====================================================
   CARD CONTENT
   ===================================================== */

.dg-card__content {
  padding: var(--dg-form-padding);
  background: var(--dg-background);
}

/* =====================================================
   FIELDSET & FIELD GROUPS
   ===================================================== */

.dg-field-set {
  border:         none;
  padding:        0;
  margin:         0 0 var(--dg-space-4) 0;
  display:        flex;
  flex-direction: column;
  gap:            var(--dg-space-2);
}

.dg-field-set__legend {
  font-size:   var(--dg-font-size-sm);
  font-weight: 600;
  color:       var(--dg-foreground);
  margin-bottom: var(--dg-space-2);
  display:     block;
}

.dg-field-set__legend--label {
  font-size:   var(--dg-font-size-sm);
  font-weight: 600;
  color:       var(--dg-foreground);
}

.dg-field__description {
  font-size:     var(--dg-font-size-sm);
  color:         var(--dg-muted-foreground);
  margin-bottom: var(--dg-space-2);
}

.dg-field__label {
  font-size:     var(--dg-font-size-sm);
  font-weight:   600;
  color:         var(--dg-foreground);
  margin-bottom: var(--dg-space-2);
  display:       block;
}

.dg-field__label-optional {
  font-weight: 400;
  color:       var(--dg-muted-foreground);
}

.dg-field__error {
  font-size:    var(--dg-font-size-sm);
  color:        var(--dg-destructive);
  margin-top:   var(--dg-space-1);
  display:      block;
}

.dg-field-separator {
  height:     1px;
  background: var(--dg-border);
  margin:     var(--dg-space-4) 0;
}

.dg-field-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--dg-space-4);
}

.dg-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--dg-space-2);
}

.dg-field--horizontal {
  flex-direction: row;
  align-items:    center;
  justify-content: space-between;
}

.dg-field__content {
  flex: 1;
}

.dg-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     var(--dg-space-3);
}

/* =====================================================
   DONATION TOGGLE
   ===================================================== */

.dg-donation-toggle {
  display:       flex;
  align-items:   center;
  gap:           var(--dg-space-3);
  border:        1.5px solid var(--dg-border);
  border-radius: var(--dg-radius);
  padding:       var(--dg-space-3) var(--dg-space-4);
  transition:    border-color var(--dg-transition);
  margin-bottom: var(--dg-space-3);
}

.dg-donation-toggle:has(.dg-sponsor-switch__input:checked) {
  border-color: var(--dg-primary);
  background:   color-mix(in srgb, var(--dg-primary) 3%, transparent);
}

.dg-donation-toggle__label {
  font-size:   var(--dg-font-size-sm);
  font-weight: 500;
  color:       var(--dg-foreground);
  cursor:      pointer;
  user-select: none;
  flex:        1;
}

/* =====================================================
   SELECTION METHOD CARDS (kindkeuze)
   ===================================================== */

.dg-sponsor-selection-method {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dg-space-3);
  margin-top: var(--dg-space-2);
}

.dg-sponsor-selection-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--dg-space-3) var(--dg-space-4);
  border: 2px solid var(--dg-border);
  border-radius: var(--dg-radius);
  background: var(--dg-background);
  cursor: pointer;
  transition: all var(--dg-transition);
  user-select: none;
}

.dg-sponsor-selection-card:hover {
  border-color: var(--dg-primary);
  background: color-mix(in srgb, var(--dg-primary) 3%, transparent);
}

.dg-sponsor-selection-card__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.dg-sponsor-selection-card__input:checked ~ .dg-sponsor-selection-card__content {
  color: var(--dg-primary);
}

.dg-sponsor-selection-card__input:checked ~ .dg-sponsor-selection-card__check {
  opacity: 1;
  transform: scale(1);
}

.dg-sponsor-selection-card:has(.dg-sponsor-selection-card__input:checked) {
  border-color: var(--dg-primary);
  background: color-mix(in srgb, var(--dg-primary) 5%, transparent);
}

.dg-sponsor-selection-card__content {
  display: flex;
  align-items: center;
  gap: var(--dg-space-3);
  flex: 1;
  transition: color var(--dg-transition);
}

.dg-sponsor-selection-card__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.dg-sponsor-selection-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.dg-sponsor-selection-card__title {
  font-size: var(--dg-font-size-sm);
  font-weight: 600;
  color: var(--dg-foreground);
}

.dg-sponsor-selection-card__description {
  font-size: var(--dg-font-size-xs);
  color: var(--dg-muted-foreground);
}

.dg-sponsor-selection-card__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--dg-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--dg-transition);
}

.dg-sponsor-selection-card__input:focus-visible ~ .dg-sponsor-selection-card__content {
  outline: 2px solid var(--dg-ring);
  outline-offset: 2px;
  border-radius: var(--dg-radius);
}

/* =====================================================
   FREQUENTIE TABS (voor sponsor form)
   ===================================================== */

.dg-sponsor-frequency-tabs {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--dg-space-2);
}

.dg-sponsor-frequency-tabs__item {
  position: relative;
  cursor:   pointer;
}

.dg-sponsor-frequency-tabs__input {
  position:        absolute;
  opacity:         0;
  width:           0;
  height:          0;
  pointer-events:  none;
}

.dg-sponsor-frequency-tabs__label {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--dg-space-2) var(--dg-space-1);
  border:          1.5px solid var(--dg-border);
  border-radius:   var(--dg-radius);
  font-size:       var(--dg-font-size-sm);
  font-weight:     500;
  color:           var(--dg-muted-foreground);
  transition:      border-color var(--dg-transition),
                   color var(--dg-transition),
                   background-color var(--dg-transition);
  user-select:     none;
  text-align:      center;
}

.dg-sponsor-frequency-tabs__input:checked + .dg-sponsor-frequency-tabs__label {
  border-color:     var(--dg-primary);
  color:            var(--dg-primary);
  background-color: var(--dg-surface);
}

.dg-sponsor-frequency-tabs__item:hover .dg-sponsor-frequency-tabs__label {
  border-color: var(--dg-primary);
}

.dg-sponsor-frequency-tabs__input:focus-visible + .dg-sponsor-frequency-tabs__label {
  outline:        2px solid var(--dg-ring);
  outline-offset: 2px;
}

/* =====================================================
   KIND FILTER (search en dropdowns)
   ===================================================== */

.dg-sponsor-child-filter {
  display:        flex;
  flex-direction: column;
  gap:            var(--dg-space-2);
  margin-top:     var(--dg-space-3);
  margin-bottom:  var(--dg-space-3);
  animation:      dg-slideDown 0.2s ease forwards;
}

.dg-sponsor-child-filter__search {
  position: relative;
  display:  flex;
  align-items: center;
}

.dg-sponsor-child-filter__search-icon {
  position:       absolute;
  left:           var(--dg-space-3);
  font-size:      var(--dg-font-size-sm);
  pointer-events: none;
  color:          var(--dg-muted-foreground);
}

.dg-sponsor-child-filter__input {
  width:          100%;
  padding:        var(--dg-space-2) var(--dg-space-3) var(--dg-space-2) 2.25rem;
  font-size:      var(--dg-font-size-sm);
  border:         1px solid var(--dg-border);
  border-radius:  var(--dg-radius);
  background:     var(--dg-background);
  color:          var(--dg-foreground);
  outline:        none;
  font-family:    inherit;
  transition:     border-color var(--dg-transition);
}

.dg-sponsor-child-filter__input:focus {
  border-color: var(--dg-primary);
}

.dg-sponsor-child-filter__input::placeholder {
  color: var(--dg-subtle-foreground);
}

.dg-sponsor-child-filter__selects {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--dg-space-2);
}

/* =====================================================
   KIND GRID
   ===================================================== */

.dg-sponsor-child-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--dg-space-2);
  max-height:            22rem;
  overflow-y:            auto;
  padding-right:         2px;
}

.dg-sponsor-child-grid::-webkit-scrollbar {
  width: 4px;
}

.dg-sponsor-child-grid::-webkit-scrollbar-track {
  background:    var(--dg-surface);
  border-radius: 2px;
}

.dg-sponsor-child-grid::-webkit-scrollbar-thumb {
  background:    var(--dg-border);
  border-radius: 2px;
}

.dg-sponsor-child-grid__empty {
  font-size:  var(--dg-font-size-sm);
  color:      var(--dg-muted-foreground);
  text-align: center;
  padding:    var(--dg-space-6);
  grid-column: span 2;
}

/* =====================================================
   KIND KAART
   ===================================================== */

.dg-sponsor-child-card {
  position: relative;
  cursor:   pointer;
}

.dg-sponsor-child-card__input {
  position:       absolute;
  opacity:        0;
  width:          0;
  height:         0;
  pointer-events: none;
}

.dg-sponsor-child-card__body {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--dg-space-2);
  padding:        var(--dg-space-3);
  border:         1.5px solid var(--dg-border);
  border-radius:  var(--dg-radius);
  text-align:     center;
  transition:     border-color var(--dg-transition),
                  background-color var(--dg-transition),
                  box-shadow var(--dg-transition);
  position:       relative;
}

.dg-sponsor-child-card:hover .dg-sponsor-child-card__body {
  border-color:     var(--dg-primary);
  background-color: var(--dg-surface);
}

.dg-sponsor-child-card__input:checked + .dg-sponsor-child-card__body {
  border-color:     var(--dg-primary);
  background-color: color-mix(in srgb, var(--dg-success) 10%, transparent);
  box-shadow:       0 0 0 1px var(--dg-primary);
}

.dg-sponsor-child-card__input:focus-visible + .dg-sponsor-child-card__body {
  outline:        2px solid var(--dg-ring);
  outline-offset: 2px;
}

.dg-sponsor-child-card__input:disabled + .dg-sponsor-child-card__body {
  opacity:        0.45;
  cursor:         not-allowed;
  pointer-events: none;
}

.dg-sponsor-child-card__check {
  position:       absolute;
  top:            var(--dg-space-2);
  right:          var(--dg-space-2);
  width:          1.25rem;
  height:         1.25rem;
  border-radius:  50%;
  background:     var(--dg-primary);
  color:          var(--dg-primary-foreground);
  font-size:      0.65rem;
  display:        none;
  align-items:    center;
  justify-content: center;
  font-weight:    700;
}

.dg-sponsor-child-card__input:checked + .dg-sponsor-child-card__body .dg-sponsor-child-card__check {
  display: flex;
}

.dg-sponsor-child-card__avatar {
  width:           3.5rem;
  height:          3.5rem;
  border-radius:   50%;
  background:      var(--dg-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.5rem;
  flex-shrink:     0;
  overflow:        hidden;
}

.dg-sponsor-child-card__avatar img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.dg-sponsor-child-card__name {
  font-size:   var(--dg-font-size-sm);
  font-weight: 600;
  color:       var(--dg-foreground);
  line-height: 1.2;
}

.dg-sponsor-child-card__meta {
  font-size:      var(--dg-font-size-xs);
  color:          var(--dg-muted-foreground);
  display:        flex;
  flex-direction: column;
  gap:            1px;
}

.dg-sponsor-child-card__tag {
  display:       inline-flex;
  align-items:   center;
  padding:       1px var(--dg-space-2);
  border-radius: var(--dg-radius-full);
  font-size:     var(--dg-font-size-xs);
  font-weight:   500;
  background:    var(--dg-surface);
  color:         var(--dg-muted-foreground);
  border:        1px solid var(--dg-border);
}

/* =====================================================
   KIND SELECTIE INFO
   ===================================================== */

.dg-sponsor-child-selection-info {
  margin-top:    var(--dg-space-2);
  padding:       var(--dg-space-2) var(--dg-space-3);
  background:    color-mix(in srgb, var(--dg-success) 10%, transparent);
  border:        1px solid color-mix(in srgb, var(--dg-success) 25%, transparent);
  border-radius: var(--dg-radius);
  font-size:     var(--dg-font-size-sm);
  color:         color-mix(in srgb, var(--dg-success) 70%, #000);
  font-weight:   500;
  text-align:    center;
}

/* =====================================================
   DONATIE PRESETS
   ===================================================== */

.dg-sponsor-donation-presets {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--dg-space-2);
  margin-top:            var(--dg-space-3);
  animation:             dg-slideDown 0.2s ease forwards;
}

.dg-sponsor-donation-presets__item {
  position: relative;
  cursor:   pointer;
}

.dg-sponsor-donation-presets__input {
  position:       absolute;
  opacity:        0;
  width:          0;
  height:         0;
  pointer-events: none;
}

.dg-sponsor-donation-presets__label {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--dg-space-2) var(--dg-space-1);
  border:          1.5px solid var(--dg-border);
  border-radius:   var(--dg-radius);
  font-size:       var(--dg-font-size-sm);
  font-weight:     500;
  color:           var(--dg-muted-foreground);
  transition:      border-color var(--dg-transition),
                   color var(--dg-transition),
                   background-color var(--dg-transition);
  user-select:     none;
}

.dg-sponsor-donation-presets__input:checked + .dg-sponsor-donation-presets__label {
  border-color:     var(--dg-primary);
  color:            var(--dg-primary);
  background-color: var(--dg-surface);
}

.dg-sponsor-donation-presets__item:hover .dg-sponsor-donation-presets__label {
  border-color: var(--dg-primary);
}

.dg-sponsor-donation-presets__input:focus-visible + .dg-sponsor-donation-presets__label {
  outline:        2px solid var(--dg-ring);
  outline-offset: 2px;
}

/* =====================================================
   BEDRAG INVOER
   ===================================================== */

.dg-sponsor-amount-input-field {
  display:       flex;
  align-items:   center;
  gap:           var(--dg-space-2);
  border:        1.5px solid var(--dg-border);
  border-radius: var(--dg-radius);
  padding:       var(--dg-space-3) var(--dg-space-4);
  margin-top:    var(--dg-space-2);
  animation:     dg-slideDown 0.2s ease forwards;
}

.dg-sponsor-amount-input-field__currency {
  font-size:   var(--dg-font-size);
  color:       var(--dg-muted-foreground);
  font-weight: 500;
  flex-shrink: 0;
}

.dg-sponsor-amount-input-field__input {
  flex:           1;
  border:         none;
  outline:        none;
  font-size:      var(--dg-font-size);
  color:          var(--dg-foreground);
  background:     transparent;
  min-width:      0;
  -moz-appearance: textfield;
  font-family:    inherit;
}

.dg-sponsor-amount-input-field__input::-webkit-outer-spin-button,
.dg-sponsor-amount-input-field__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin:             0;
}

/* =====================================================
   SWITCH / TOGGLE
   ===================================================== */

.dg-sponsor-switch {
  position:    relative;
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.dg-sponsor-switch__input {
  position:       absolute;
  opacity:        0;
  width:          0;
  height:         0;
  pointer-events: none;
}

.dg-sponsor-switch__track {
  display:          inline-flex;
  align-items:      center;
  width:            2.75em;
  height:           1.5em;
  border-radius:    var(--dg-radius-full);
  background-color: var(--dg-border);
  cursor:           pointer;
  transition:       background-color 0.2s ease;
  padding:          2px;
}

.dg-sponsor-switch__input:checked + .dg-sponsor-switch__track {
  background-color: var(--dg-primary);
}

.dg-sponsor-switch__input:focus-visible + .dg-sponsor-switch__track {
  outline:        2px solid var(--dg-ring);
  outline-offset: 2px;
}

.dg-sponsor-switch__thumb {
  display:          block;
  width:            1.25em;
  height:           1.25em;
  border-radius:    50%;
  background-color: var(--dg-background);
  box-shadow:       0 1px 3px rgba(0, 0, 0, 0.2);
  transition:       transform 0.2s ease;
  pointer-events:   none;
}

.dg-sponsor-switch__input:checked + .dg-sponsor-switch__track .dg-sponsor-switch__thumb {
  transform: translateX(1.25em);
}

/* =====================================================
   SAMENVATTING SECTIE
   ===================================================== */

.dg-sponsor-summary-section__label {
  font-size:     var(--dg-font-size-sm);
  font-weight:   600;
  color:         var(--dg-foreground);
  margin-bottom: var(--dg-space-2);
  display:       block;
}

.dg-sponsor-selected-children {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--dg-space-2);
  margin-bottom: var(--dg-space-1);
}

.dg-sponsor-selected-children__tag {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--dg-space-1);
  padding:       var(--dg-space-1) var(--dg-space-3);
  background:    color-mix(in srgb, var(--dg-success) 10%, transparent);
  border:        1px solid color-mix(in srgb, var(--dg-success) 25%, transparent);
  border-radius: var(--dg-radius-full);
  font-size:     var(--dg-font-size-sm);
  color:         color-mix(in srgb, var(--dg-success) 70%, #000);
  font-weight:   500;
}

.dg-sponsor-selected-children__avatar {
  font-size: var(--dg-font-size-sm);
}

.dg-sponsor-summary {
  display:        flex;
  flex-direction: column;
  border:         1px solid var(--dg-border);
  border-radius:  var(--dg-radius);
  overflow:       hidden;
}

.dg-sponsor-summary__row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--dg-space-3) var(--dg-space-4);
  font-size:       var(--dg-font-size-sm);
  gap:             var(--dg-space-4);
}

.dg-sponsor-summary__row:nth-child(odd) {
  background: var(--dg-surface);
}

.dg-sponsor-summary__row--total {
  font-size:   var(--dg-font-size);
  font-weight: 700;
}

.dg-sponsor-summary__row--total .dg-sponsor-summary__key {
  color: var(--dg-foreground);
}

.dg-sponsor-summary__key {
  color:       var(--dg-muted-foreground);
  font-weight: 500;
  flex-shrink: 0;
}

.dg-sponsor-summary__value {
  color:       var(--dg-foreground);
  font-weight: 600;
  text-align:  right;
}

.dg-sponsor-summary__divider {
  height:     1px;
  background: var(--dg-border);
}

.dg-sponsor-summary-details {
  display:        flex;
  flex-direction: column;
  border:         1px solid var(--dg-border);
  border-radius:  var(--dg-radius);
  overflow:       hidden;
}

.dg-sponsor-summary-details__block {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  padding:        var(--dg-space-3) var(--dg-space-4);
}

.dg-sponsor-summary-details__block:nth-child(odd) {
  background: var(--dg-surface);
}

.dg-sponsor-summary-details__divider {
  height:     1px;
  background: var(--dg-border);
}

.dg-sponsor-summary-details__label {
  font-size:      var(--dg-font-size-xs);
  color:          var(--dg-muted-foreground);
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dg-sponsor-summary-details__value {
  font-size:   var(--dg-font-size-sm);
  color:       var(--dg-foreground);
  font-weight: 500;
}

/* =====================================================
   ANIMATIES
   ===================================================== */

@keyframes dg-slideDown {
  from {
    opacity:   0;
    transform: translateY(-6px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* =====================================================
   SUCCESVOLLE BETALING SCHERM
   ===================================================== */

.dg-sponsor-success {
  background:      var(--dg-background);
  border:          1px solid var(--dg-border);
  border-radius:   var(--dg-radius);
  width:           100%;
  max-width:       30rem;
  padding:         var(--dg-space-6);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--dg-space-4);
  text-align:      center;
  box-shadow:      0 4px 24px rgba(0, 0, 0, 0.06);
  animation:       dg-slideDown 0.3s ease forwards;
}

.dg-sponsor-success[hidden] {
  display: none;
}

.dg-sponsor-success__icon {
  width:           3.5rem;
  height:          3.5rem;
  border-radius:   50%;
  background:      var(--dg-success);
  color:           #fff;
  font-size:       var(--dg-font-size-lg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     700;
}

.dg-sponsor-success__title {
  font-size:   var(--dg-font-size-lg);
  font-weight: 700;
}

.dg-sponsor-success__description {
  font-size:   var(--dg-font-size-sm);
  color:       var(--dg-muted-foreground);
  line-height: 1.6;
}

/* =====================================================
   CHECKOUT FORMULIER STIJLEN
   ===================================================== */
/* ============================================================
   DoGoodWP Checkout Form
   Multi-step checkout flow voor productbestellingen
   ============================================================ */

/* ============================================================
   Checkout-specifieke token overrides
   De checkout flow gebruikt iets grotere radius voor cards
   ============================================================ */
.dogoodwp-checkout {
  /* Token overrides voor deze specifieke flow */
  --dg-radius: 0.75rem;
  --dg-radius-sm: calc(var(--dg-radius) - 0.125rem);
  --dg-radius-lg: calc(var(--dg-radius) + 0.25rem);

  /* Base styling */
  font-family: var(--dg-font);
  font-size: var(--dg-font-size);
  color: var(--dg-foreground);
  line-height: var(--dg-line-height);
}

/* ============================================================
   Checkout Card Container
   ============================================================ */
.dg-checkout-card {
  background: var(--dg-background);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius);
  width: 100%;
  max-width: var(--dg-form-width);
  display: flex;
  flex-direction: column;
  box-shadow: var(--dg-shadow-lg);
}

.dg-checkout-card__header {
  padding: var(--dg-space-6) var(--dg-space-6) var(--dg-space-4);
  border-bottom: var(--dg-form-divider-width) solid var(--dg-border);
}

.dg-checkout-card__step-header {
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-1);
}

.dg-checkout-card__title {
  font-size: var(--dg-font-size-lg);
  font-weight: 600;
  color: var(--dg-foreground);
  margin: 0;
}

.dg-checkout-card__description {
  font-size: var(--dg-font-size-sm);
  color: var(--dg-muted-foreground);
  margin: 0;
}

.dg-checkout-card__content {
  padding: var(--dg-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-4);
}

.dg-checkout-card__footer {
  padding: var(--dg-space-4) var(--dg-space-6);
  border-top: var(--dg-form-divider-width) solid var(--dg-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--dg-space-2);
  background: var(--dg-surface);
}

.dg-checkout-card__notice {
  font-size: var(--dg-font-size-sm);
  color: var(--dg-muted-foreground);
  text-align: center;
  padding: var(--dg-space-3) var(--dg-space-4);
  background: var(--dg-surface);
  border-radius: var(--dg-radius);
  border: 1px solid var(--dg-border);
  line-height: var(--dg-line-height);
  margin: 0;
}

/* ============================================================
   Stepper (stap-indicator)
   ============================================================ */
.dg-checkout-stepper {
  display: flex;
  align-items: center;
  width: 100%;
}

.dg-checkout-stepper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dg-space-1);
  flex: 1;
}

.dg-checkout-stepper__circle {
  width: 2em;
  height: 2em;
  border-radius: var(--dg-radius-full);
  border: 2px solid var(--dg-border);
  background: var(--dg-background);
  color: var(--dg-muted-foreground);
  font-size: var(--dg-font-size-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dg-transition),
              border-color var(--dg-transition),
              color var(--dg-transition);
}

.dg-checkout-stepper__label {
  font-size: var(--dg-font-size-xs);
  color: var(--dg-muted-foreground);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--dg-transition);
}

.dg-checkout-stepper__item--active .dg-checkout-stepper__circle {
  background: var(--dg-primary);
  border-color: var(--dg-primary);
  color: var(--dg-primary-foreground);
}

.dg-checkout-stepper__item--active .dg-checkout-stepper__label {
  color: var(--dg-foreground);
  font-weight: 600;
}

.dg-checkout-stepper__item--done .dg-checkout-stepper__circle {
  background: var(--dg-primary);
  border-color: var(--dg-primary);
  color: var(--dg-primary-foreground);
}

.dg-checkout-stepper__line {
  flex: 1;
  height: 2px;
  background: var(--dg-border);
  margin-bottom: 1.4rem;
  transition: background-color var(--dg-transition);
}

.dg-checkout-stepper__line--done {
  background: var(--dg-primary);
}

/* ============================================================
   Quantity Controller (hoeveelheid bediening)
   ============================================================ */
.dg-checkout-quantity {
  display: flex;
  align-items: center;
  gap: var(--dg-space-3);
}

.dg-checkout-quantity__btn {
  width: 2rem;
  height: 2rem;
  border-radius: var(--dg-radius-full);
  border: 1.5px solid var(--dg-border);
  background: var(--dg-background);
  color: var(--dg-foreground);
  font-size: var(--dg-font-size-lg);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dg-transition),
              border-color var(--dg-transition);
  flex-shrink: 0;
  font-family: inherit;
}

.dg-checkout-quantity__btn:hover:not(:disabled) {
  background-color: var(--dg-surface);
  border-color: var(--dg-primary);
}

.dg-checkout-quantity__btn:focus-visible {
  outline: var(--dg-ring-width) solid var(--dg-ring);
  outline-offset: var(--dg-ring-offset);
}

.dg-checkout-quantity__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.dg-checkout-quantity__display {
  min-width: 1.75rem;
  text-align: center;
  font-size: var(--dg-font-size);
  font-weight: 600;
  color: var(--dg-foreground);
}

.dg-checkout-quantity__unit-price {
  font-size: var(--dg-font-size-sm);
  color: var(--dg-muted-foreground);
  margin-left: auto;
}

.dg-checkout-quantity__subtotal {
  font-size: var(--dg-font-size-sm);
  font-weight: 600;
  color: var(--dg-foreground);
  white-space: nowrap;
}

/* ============================================================
   Field Group & Field Set
   ============================================================ */
.dg-checkout-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--dg-field-gap);
}

.dg-checkout-field-set {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-2);
}

.dg-checkout-field-set__legend {
  font-size: var(--dg-font-size-sm);
  color: var(--dg-muted-foreground);
  font-weight: 400;
  display: block;
  margin: 0;
}

.dg-checkout-field-set__legend--label {
  font-size: var(--dg-font-size-sm);
  font-weight: 600;
  color: var(--dg-foreground);
  margin-bottom: var(--dg-space-1);
}

/* ============================================================
   Field (velden gebruik de standaard .dg-field stijlen)
   ============================================================ */
.dg-checkout-field {
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-2);
}

.dg-checkout-field--horizontal {
  flex-direction: row;
  align-items: center;
  gap: var(--dg-space-3);
}

.dg-checkout-field__label {
  font-size: var(--dg-font-size-sm);
  font-weight: 500;
  color: var(--dg-foreground);
  cursor: pointer;
}

.dg-checkout-field__label-optional {
  font-weight: 400;
  color: var(--dg-muted-foreground);
}

.dg-checkout-field__description {
  font-size: var(--dg-font-size-sm);
  color: var(--dg-muted-foreground);
  margin: 0;
}

.dg-checkout-field__description--right {
  text-align: right;
}

.dg-checkout-field__content {
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-1);
  flex: 1;
}

.dg-checkout-field__error {
  font-size: var(--dg-font-size-sm);
  color: var(--dg-destructive);
  display: block;
}

.dg-checkout-field__input {
  padding: var(--dg-space-2) var(--dg-space-3);
  font-size: var(--dg-font-size-sm);
  border: var(--dg-border-width) solid var(--dg-border);
  border-radius: var(--dg-radius);
  background: var(--dg-background);
  color: var(--dg-foreground);
  outline: none;
  transition: border-color var(--dg-transition);
  width: 100%;
  font-family: inherit;
  box-sizing: border-box;
}

.dg-checkout-field__input::placeholder {
  color: var(--dg-subtle-foreground);
}

.dg-checkout-field__input:focus {
  border-color: var(--dg-ring);
  box-shadow: 0 0 0 var(--dg-ring-width)
              color-mix(in srgb, var(--dg-ring) 20%, transparent);
}

.dg-checkout-field__input[aria-invalid="true"] {
  border-color: var(--dg-destructive);
}

.dg-checkout-field__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 var(--dg-ring-width)
              color-mix(in srgb, var(--dg-destructive) 20%, transparent);
}

.dg-checkout-field__input--textarea {
  resize: vertical;
  min-height: 5em;
  line-height: var(--dg-line-height);
  padding: var(--dg-space-3);
}

.dg-checkout-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dg-space-3);
}

.dg-checkout-field-separator {
  height: 1px;
  background: var(--dg-border);
  margin: 0;
}

/* ============================================================
   Delivery Options (bezorgmethode keuze)
   ============================================================ */
.dg-checkout-delivery-options {
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-2);
}

.dg-checkout-delivery-option {
  cursor: pointer;
  display: block;
}

.dg-checkout-delivery-option__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.dg-checkout-delivery-option__body {
  display: flex;
  align-items: center;
  gap: var(--dg-space-3);
  padding: var(--dg-space-3) var(--dg-space-4);
  border: 1.5px solid var(--dg-border);
  border-radius: var(--dg-radius);
  transition: border-color var(--dg-transition),
              background-color var(--dg-transition);
}

.dg-checkout-delivery-option:hover .dg-checkout-delivery-option__body {
  border-color: var(--dg-primary);
  background-color: var(--dg-surface);
}

.dg-checkout-delivery-option__input:checked + .dg-checkout-delivery-option__body {
  border-color: var(--dg-primary);
  background-color: var(--dg-surface);
}

.dg-checkout-delivery-option__input:focus-visible + .dg-checkout-delivery-option__body {
  outline: var(--dg-ring-width) solid var(--dg-ring);
  outline-offset: var(--dg-ring-offset);
}

.dg-checkout-delivery-option__icon {
  font-size: var(--dg-font-size-lg);
  flex-shrink: 0;
}

.dg-checkout-delivery-option__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.dg-checkout-delivery-option__title {
  font-size: var(--dg-font-size-sm);
  font-weight: 500;
  color: var(--dg-foreground);
}

.dg-checkout-delivery-option__subtitle {
  font-size: var(--dg-font-size-xs);
  color: var(--dg-muted-foreground);
}

.dg-checkout-delivery-option__price {
  font-size: var(--dg-font-size-sm);
  font-weight: 600;
  color: var(--dg-foreground);
  flex-shrink: 0;
}

/* ============================================================
   Donation Toggle
   ============================================================ */
.dg-checkout-donation-toggle {
  display: flex;
  align-items: center;
  gap: var(--dg-space-3);
  border: 1.5px solid var(--dg-border);
  border-radius: var(--dg-radius);
  padding: var(--dg-space-3) var(--dg-space-4);
  transition: border-color var(--dg-transition);
}

.dg-checkout-donation-toggle:has(.dg-toggle:checked) {
  border-color: var(--dg-primary);
}

.dg-checkout-donation-toggle__label {
  font-size: var(--dg-font-size-sm);
  font-weight: 500;
  color: var(--dg-foreground);
  cursor: pointer;
  user-select: none;
}

/* ============================================================
   Switch / Toggle Component
   ============================================================ */
.dg-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.dg-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.dg-toggle__track {
  display: inline-flex;
  align-items: center;
  width: 2.75em;
  height: 1.5em;
  border-radius: var(--dg-radius-full);
  background-color: var(--dg-border);
  cursor: pointer;
  transition: background-color var(--dg-transition);
  padding: 2px;
  position: relative;
}

.dg-toggle__input:checked + .dg-toggle__track {
  background-color: var(--dg-primary);
}

.dg-toggle__input:focus-visible + .dg-toggle__track {
  outline: var(--dg-ring-width) solid var(--dg-ring);
  outline-offset: var(--dg-ring-offset);
}

.dg-toggle__thumb {
  display: block;
  width: 1.25em;
  height: 1.25em;
  border-radius: var(--dg-radius-full);
  background-color: var(--dg-background);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--dg-transition);
  pointer-events: none;
}

.dg-toggle__input:checked + .dg-toggle__track .dg-toggle__thumb {
  transform: translateX(1.25em);
}

/* ============================================================
   Donation Presets (vaste donatiebedragen)
   ============================================================ */
.dg-checkout-donation-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--dg-space-2);
  margin-top: var(--dg-space-3);
  animation: dg-slideDown 0.2s ease forwards;
}

.dg-checkout-donation-presets__item {
  position: relative;
  cursor: pointer;
}

.dg-checkout-donation-presets__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.dg-checkout-donation-presets__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dg-space-2) var(--dg-space-1);
  border: 1.5px solid var(--dg-border);
  border-radius: var(--dg-radius);
  font-size: var(--dg-font-size-sm);
  font-weight: 500;
  color: var(--dg-muted-foreground);
  transition: border-color var(--dg-transition),
              color var(--dg-transition),
              background-color var(--dg-transition);
  user-select: none;
}

.dg-checkout-donation-presets__input:checked + .dg-checkout-donation-presets__label {
  border-color: var(--dg-primary);
  color: var(--dg-primary);
  background-color: var(--dg-surface);
}

.dg-checkout-donation-presets__item:hover .dg-checkout-donation-presets__label {
  border-color: var(--dg-primary);
  color: var(--dg-foreground);
}

.dg-checkout-donation-presets__input:focus-visible + .dg-checkout-donation-presets__label {
  outline: var(--dg-ring-width) solid var(--dg-ring);
  outline-offset: var(--dg-ring-offset);
}

/* ============================================================
   Amount Input Field (eigen donatiebedrag)
   ============================================================ */
.dg-checkout-amount-input-field {
  display: flex;
  align-items: center;
  gap: var(--dg-space-2);
  border: 1.5px solid var(--dg-border);
  border-radius: var(--dg-radius);
  padding: var(--dg-space-3) var(--dg-space-4);
  margin-top: var(--dg-space-2);
  animation: dg-slideDown 0.2s ease forwards;
}

.dg-checkout-amount-input-field__currency {
  font-size: var(--dg-font-size);
  color: var(--dg-muted-foreground);
  font-weight: 500;
  flex-shrink: 0;
}

.dg-checkout-amount-input-field__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--dg-font-size);
  color: var(--dg-foreground);
  background: transparent;
  min-width: 0;
  -moz-appearance: textfield;
  font-family: inherit;
}

.dg-checkout-amount-input-field__input::-webkit-outer-spin-button,
.dg-checkout-amount-input-field__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================================
   Order Summary (product blok)
   ============================================================ */
.dg-checkout-order-summary {
  border: var(--dg-border-width) solid var(--dg-border);
  border-radius: var(--dg-radius);
  overflow: hidden;
}

.dg-checkout-order-summary__product {
  display: flex;
  align-items: center;
  gap: var(--dg-space-3);
  padding: var(--dg-space-3) var(--dg-space-4);
  background: var(--dg-surface);
}

.dg-checkout-order-summary__product-image {
  width: 3rem;
  height: 3rem;
  border-radius: var(--dg-radius-sm);
  background: var(--dg-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dg-checkout-order-summary__product-placeholder {
  font-size: var(--dg-font-size-lg);
}

.dg-checkout-order-summary__product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.dg-checkout-order-summary__product-name {
  font-size: var(--dg-font-size-sm);
  font-weight: 600;
  color: var(--dg-foreground);
}

.dg-checkout-order-summary__product-meta {
  font-size: var(--dg-font-size-xs);
  color: var(--dg-muted-foreground);
}

/* ============================================================
   Summary (prijsoverzicht)
   ============================================================ */
.dg-checkout-summary {
  display: flex;
  flex-direction: column;
  border: var(--dg-border-width) solid var(--dg-border);
  border-radius: var(--dg-radius);
  overflow: hidden;
}

.dg-checkout-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--dg-space-3) var(--dg-space-4);
  font-size: var(--dg-font-size-sm);
  gap: var(--dg-space-4);
}

.dg-checkout-summary__row:nth-child(odd) {
  background: var(--dg-surface);
}

.dg-checkout-summary__row--total {
  font-size: var(--dg-font-size);
  font-weight: 700;
}

.dg-checkout-summary__row--total .dg-checkout-summary__key {
  color: var(--dg-foreground);
}

.dg-checkout-summary__key {
  color: var(--dg-muted-foreground);
  font-weight: 500;
  flex-shrink: 0;
}

.dg-checkout-summary__value {
  color: var(--dg-foreground);
  font-weight: 600;
  text-align: right;
}

.dg-checkout-summary__divider {
  height: 1px;
  background: var(--dg-border);
  margin: 0;
}

/* ============================================================
   Summary Details (adres / naam / email)
   ============================================================ */
.dg-checkout-summary-details {
  display: flex;
  flex-direction: column;
  border: var(--dg-border-width) solid var(--dg-border);
  border-radius: var(--dg-radius);
  overflow: hidden;
}

.dg-checkout-summary-details__block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--dg-space-3) var(--dg-space-4);
}

.dg-checkout-summary-details__block:nth-child(odd) {
  background: var(--dg-surface);
}

.dg-checkout-summary-details__divider {
  height: 1px;
  background: var(--dg-border);
  margin: 0;
}

.dg-checkout-summary-details__label {
  font-size: var(--dg-font-size-xs);
  color: var(--dg-muted-foreground);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dg-checkout-summary-details__value {
  font-size: var(--dg-font-size-sm);
  color: var(--dg-foreground);
  font-weight: 500;
}

/* ============================================================
   Success Screen
   ============================================================ */
.dg-checkout-success {
  background: var(--dg-background);
  border: var(--dg-border-width) solid var(--dg-border);
  border-radius: var(--dg-radius);
  width: 100%;
  max-width: 28rem;
  padding: var(--dg-space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dg-space-4);
  text-align: center;
  box-shadow: var(--dg-shadow-lg);
  animation: dg-slideDown 0.3s ease forwards;
}

.dg-checkout-success[hidden] {
  display: none;
}

.dg-checkout-success__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--dg-radius-full);
  background: var(--dg-success);
  color: var(--dg-success-foreground);
  font-size: var(--dg-font-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.dg-checkout-success__title {
  font-size: var(--dg-font-size-lg);
  font-weight: 700;
  color: var(--dg-foreground);
  margin: 0;
}

.dg-checkout-success__description {
  font-size: var(--dg-font-size-sm);
  color: var(--dg-muted-foreground);
  margin: 0;
}

/* ============================================================
   Animaties
   ============================================================ */
@keyframes dg-slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 480px) {
  .dg-checkout-stepper__label {
    display: none;
  }

  .dg-checkout-field-row {
    grid-template-columns: 1fr;
  }

  .dg-checkout-donation-presets {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =====================================================
   BETAALSTATUS SCHERM (gedeelde component — dg-payment-status)
   ===================================================== */

.dg-payment-status {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  padding:        var(--dg-space-10, 40px) var(--dg-form-padding);
  text-align:     center;
  gap:            var(--dg-space-4);
}

.dg-payment-status__icon {
  width:           64px;
  height:          64px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       28px;
  font-weight:     700;
  flex-shrink:     0;
}

.dg-payment-status__icon--success {
  background: #D1FAE5;
  color:      #059669;
}

.dg-payment-status__icon--error {
  background: #FEE2E2;
  color:      #DC2626;
}

.dg-payment-status__title {
  font-size:   var(--dg-font-size-xl, 20px);
  font-weight: 700;
  color:       var(--dg-foreground);
  margin:      0;
}

.dg-payment-status__description {
  font-size: var(--dg-font-size-sm);
  color:     var(--dg-muted-foreground);
  max-width: 400px;
  margin:    0;
}

.dg-payment-status__reference {
  font-size: var(--dg-font-size-xs);
  color:     var(--dg-muted-foreground);
  margin:    0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}