/* ==================================================
   GEDEELDE CONFIGURATOR BASIS
   Semi Custom / Bike Stand / Pitmat / Pit Board
   Full Custom Stickers / Nummer Sets
   ================================================== */

.mxgc,
.mxbs,
.mxpm,
.mxpb,
.mxfc,
.mxns {
  border: 1px solid #ddd;
  padding: 24px;
  border-radius: 8px;
  background: #fff;
  max-width: 100%;
}

.mxgc label,
.mxbs label,
.mxpm label,
.mxpb label,
.mxfc label,
.mxns label {
  display: block;
  font-size: 14px;
}

.mxgc input,
.mxgc select,
.mxgc textarea,
.mxbs input,
.mxbs select,
.mxbs textarea,
.mxpm input,
.mxpm select,
.mxpm textarea,
.mxpb input,
.mxpb select,
.mxpb textarea,
.mxfc input,
.mxfc select,
.mxfc textarea,
.mxns input,
.mxns select,
.mxns textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.mxgc input[type="radio"],
.mxbs input[type="radio"],
.mxpm input[type="radio"],
.mxpb input[type="radio"],
.mxfc input[type="radio"],
.mxns input[type="radio"] {
  display: none;
}

.mxgc-required,
.mxbs-required,
.mxpm-required,
.mxpb-required,
.mxfc-required,
.mxns-required {
  color: #ea5b0c;
  font-weight: 700;
}

.mxgc-required-note,
.mxbs-required-note,
.mxpm-required-note,
.mxpb-required-note,
.mxfc-required-note,
.mxns-required-note {
  margin-top: 6px;
  font-size: 12px;
  color: #777;
}

/* ==================================================
   BUTTONS
   ================================================== */

.mxgc button,
.mxbs button,
.mxpm button,
.mxpb button,
.mxfc button,
.mxns button {
  box-sizing: border-box;
  cursor: pointer;
  padding: 14px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  border: none;
  box-shadow: none;
  background: #eee;
  color: #333;
  transition: background 0.2s ease, color 0.2s ease;
}

.mxgc button:hover,
.mxgc button:focus,
.mxbs button:hover,
.mxbs button:focus,
.mxpm button:hover,
.mxpm button:focus,
.mxpb button:hover,
.mxpb button:focus,
.mxfc button:hover,
.mxfc button:focus,
.mxns button:hover,
.mxns button:focus {
  background: #646464;
  color: #fff;
  outline: none;
}

.mxgc-btn-primary:not(.is-disabled),
.mxbs-btn-primary:not(.is-disabled),
.mxpm-btn-primary:not(.is-disabled),
.mxpb-btn-primary:not(.is-disabled),
.mxfc-btn-primary:not(.is-disabled),
.mxns-btn-primary:not(.is-disabled) {
  background: #ea5b0c;
  color: #fff;
}

.mxgc-btn-primary.is-disabled,
.mxbs-btn-primary.is-disabled,
.mxpm-btn-primary.is-disabled,
.mxpb-btn-primary.is-disabled,
.mxfc-btn-primary.is-disabled,
.mxns-btn-primary.is-disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
}

.mxgc-btn-secondary,
.mxbs-btn-secondary,
.mxpm-btn-secondary,
.mxpb-btn-secondary,
.mxfc-btn-secondary,
.mxns-btn-secondary {
  background: #eee;
  color: #333;
}

.mxgc-actions,
.mxbs-actions,
.mxpm-actions,
.mxpb-actions,
.mxfc-actions,
.mxns-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 24px;
}

.mxgc-actions .mxgc-btn-secondary,
.mxbs-actions .mxbs-btn-secondary,
.mxpm-actions .mxpm-btn-secondary,
.mxpb-actions .mxpb-btn-secondary,
.mxfc-actions .mxfc-btn-secondary,
.mxns-actions .mxns-btn-secondary {
  margin-right: auto;
}

.mxgc-actions button,
.mxbs-actions button,
.mxpm-actions button,
.mxpb-actions button,
.mxfc-actions button,
.mxns-actions button {
  min-width: 180px;
}

/* ==================================================
   STAPPENBALK
   ================================================== */

.mxgc-steps-bar,
.mxbs-steps-bar,
.mxpm-steps-bar,
.mxpb-steps-bar,
.mxfc-steps-bar,
.mxns-steps-bar {
  display: flex;
  margin-bottom: 24px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.mxgc-step-indicator,
.mxbs-step-indicator,
.mxpm-step-indicator,
.mxpb-step-indicator,
.mxfc-step-indicator,
.mxns-step-indicator {
  flex: 1;
  padding: 14px 12px;
  background: #111;
  color: #666;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  justify-content: center;
}

.mxgc-step-indicator:not(:last-child),
.mxbs-step-indicator:not(:last-child),
.mxpm-step-indicator:not(:last-child),
.mxpb-step-indicator:not(:last-child),
.mxfc-step-indicator:not(:last-child),
.mxns-step-indicator:not(:last-child) {
  border-right: 1px solid #222;
}

.mxgc-step-number,
.mxbs-step-number,
.mxpm-step-number,
.mxpb-step-number,
.mxfc-step-number,
.mxns-step-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.mxgc-step-indicator.is-active,
.mxbs-step-indicator.is-active,
.mxpm-step-indicator.is-active,
.mxpb-step-indicator.is-active,
.mxfc-step-indicator.is-active,
.mxns-step-indicator.is-active {
  background: #ea5b0c;
  color: #fff;
}

.mxgc-step-indicator.is-active .mxgc-step-number,
.mxbs-step-indicator.is-active .mxbs-step-number,
.mxpm-step-indicator.is-active .mxpm-step-number,
.mxpb-step-indicator.is-active .mxpb-step-number,
.mxfc-step-indicator.is-active .mxfc-step-number,
.mxns-step-indicator.is-active .mxns-step-number {
  background: #fff;
  color: #ea5b0c;
}

.mxgc-step-indicator.is-done,
.mxbs-step-indicator.is-done,
.mxpm-step-indicator.is-done,
.mxpb-step-indicator.is-done,
.mxfc-step-indicator.is-done,
.mxns-step-indicator.is-done {
  background: #1c1c1c;
  color: #fff;
}

.mxgc-step-indicator.is-done .mxgc-step-number,
.mxbs-step-indicator.is-done .mxbs-step-number,
.mxpm-step-indicator.is-done .mxpm-step-number,
.mxpb-step-indicator.is-done .mxpb-step-number,
.mxfc-step-indicator.is-done .mxfc-step-number,
.mxns-step-indicator.is-done .mxns-step-number {
  background: #4caf50;
  color: #fff;
}

/* ==================================================
   INFO / ERRORS
   ================================================== */

.mxgc-info,
.mxbs-info,
.mxpm-info,
.mxpb-info,
.mxfc-info,
.mxns-info {
  background: #f8f8f8;
  border-left: 4px solid #ea5b0c;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 4px;
}

.mxgc-info p,
.mxbs-info p,
.mxpm-info p,
.mxpb-info p,
.mxfc-info p,
.mxns-info p {
  margin-bottom: 0;
}

.mxgc-error-holder,
.mxbs-error-holder,
.mxpm-error-holder,
.mxpb-error-holder,
.mxfc-error-holder,
.mxns-error-holder {
  display: none;
  background: #ffecec;
  border: 1px solid #f5c2c2;
  color: #a10000;
  padding: 12px;
  border-radius: 4px;
  font-size: 14px;
}

.mxgc-error-holder:not(:empty),
.mxbs-error-holder:not(:empty),
.mxpm-error-holder:not(:empty),
.mxpb-error-holder:not(:empty),
.mxfc-error-holder:not(:empty),
.mxns-error-holder:not(:empty) {
  display: block;
}

.mxgc-field-error input,
.mxgc-field-error select,
.mxgc-field-error textarea,
.mxbs-field-error input,
.mxbs-field-error select,
.mxbs-field-error textarea,
.mxpm-field-error input,
.mxpm-field-error select,
.mxpm-field-error textarea,
.mxpb-field-error input,
.mxpb-field-error select,
.mxpb-field-error textarea,
.mxfc-field-error input,
.mxfc-field-error select,
.mxfc-field-error textarea,
.mxns-field-error input,
.mxns-field-error select,
.mxns-field-error textarea {
  border: 2px solid #e74c3c !important;
  background: #fff5f5;
}

/* ==================================================
   PRIJS
   ================================================== */

.mxgc-price,
.mxbs-price,
.mxpm-price,
.mxpb-price,
.mxfc-price,
.mxns-price {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==================================================
   OPTIE TEGELS
   ================================================== */

.mxgc-type-options label,
.mxgc-step[data-step="3"] fieldset > label,
.mxgc-option-card,
.mxgc-install-options label,

.mxbs-options label,
.mxbs-step fieldset > label,

.mxpm-step fieldset > label,

.mxpb-size-options label,
.mxpb-step fieldset > label,

.mxfc-type-options label,
.mxfc-step fieldset > label,
.mxfc-option-card,
.mxfc-install-options label,

.mxns-step fieldset > label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f7f7f7;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mxgc-type-options label:hover,
.mxgc-step[data-step="3"] fieldset > label:hover,
.mxgc-option-card:hover,
.mxgc-install-options label:hover,

.mxbs-options label:hover,
.mxbs-step fieldset > label:hover,

.mxpm-step fieldset > label:hover,

.mxpb-size-options label:hover,
.mxpb-step fieldset > label:hover,

.mxfc-type-options label:hover,
.mxfc-step fieldset > label:hover,
.mxfc-option-card:hover,
.mxfc-install-options label:hover,

.mxns-step fieldset > label:hover {
  border-color: #ea5b0c;
}

.mxgc-type-options label:has(input[type="radio"]:checked),
.mxgc-step[data-step="3"] fieldset > label:has(input[type="radio"]:checked),
.mxgc-option-card:has(input[type="radio"]:checked),
.mxgc-install-options label:has(input[type="radio"]:checked),

.mxbs-options label:has(input[type="radio"]:checked),
.mxbs-step fieldset > label:has(input[type="radio"]:checked),

.mxpm-step fieldset > label:has(input[type="radio"]:checked),

.mxpb-size-options label:has(input[type="radio"]:checked),
.mxpb-step fieldset > label:has(input[type="radio"]:checked),

.mxfc-type-options label:has(input[type="radio"]:checked),
.mxfc-step fieldset > label:has(input[type="radio"]:checked),
.mxfc-option-card:has(input[type="radio"]:checked),
.mxfc-install-options label:has(input[type="radio"]:checked),

.mxns-step fieldset > label:has(input[type="radio"]:checked) {
  background: #ea5b0c;
  color: #fff;
  border-color: #ea5b0c;
}

/* ==================================================
   LIGHTBOX
   ================================================== */

#mxgcLightbox,
#mxbsLightbox,
#mxpmLightbox,
#mxpbLightbox,
#mxfcLightbox,
#mxnsLightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

#mxgcLightbox.is-open,
#mxbsLightbox.is-open,
#mxpmLightbox.is-open,
#mxpbLightbox.is-open,
#mxfcLightbox.is-open,
#mxnsLightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

#mxgcLightbox img,
#mxbsLightbox img,
#mxpmLightbox img,
#mxpbLightbox img,
#mxfcLightbox img,
#mxnsLightbox img {
  max-width: 90vw;
  max-height: 90vh;
  background: #fff;
  padding: 12px;
  border-radius: 4px;
}

#mxgcClose,
#mxbsClose,
#mxpmClose,
#mxpbClose,
#mxfcClose,
#mxnsClose {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
}

/* ==================================================
   CART SAMENVATTING
   ================================================== */

.mxgc-cart-summary {
  margin-top: 8px;
}

.mxgc-cart-summary summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.mxgc-cart-summary summary::-webkit-details-marker {
  display: none;
}

.mxgc-cart-summary-inner {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.mxgc-cart-summary-inner p {
  margin: 0 0 10px;
}

/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 1024px) and (min-width: 769px) {

  .mxgc-step-indicator,
  .mxbs-step-indicator,
  .mxpm-step-indicator,
  .mxpb-step-indicator,
  .mxfc-step-indicator,
  .mxns-step-indicator {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 12px 8px;
  }

  .mxgc-step-label,
  .mxbs-step-label,
  .mxpm-step-label,
  .mxpb-step-label,
  .mxfc-step-label,
  .mxns-step-label {
    font-size: 13px;
    line-height: 1.3;
  }
}

/* ==================================================
   MOBIEL
   ================================================== */

@media (max-width: 768px) {

  .mxgc,
  .mxbs,
  .mxpm,
  .mxpb,
  .mxfc,
  .mxns {
    padding: 18px;
  }

  .mxgc-steps-bar,
  .mxbs-steps-bar,
  .mxpm-steps-bar,
  .mxpb-steps-bar,
  .mxfc-steps-bar,
  .mxns-steps-bar {
    flex-direction: column;
  }

  .mxgc-step-indicator,
  .mxbs-step-indicator,
  .mxpm-step-indicator,
  .mxpb-step-indicator,
  .mxfc-step-indicator,
  .mxns-step-indicator {
    justify-content: flex-start;
  }

  .mxgc-actions,
  .mxbs-actions,
  .mxpm-actions,
  .mxpb-actions,
  .mxfc-actions,
  .mxns-actions {
    flex-direction: column;
  }

  .mxgc-actions button,
  .mxbs-actions button,
  .mxpm-actions button,
  .mxpb-actions button,
  .mxfc-actions button,
  .mxns-actions button {
    width: 100%;
  }
}

/* ==================================================
   INFO ICONEN / TOOLTIPS
   ================================================== */

.mxgc-label-info,
.mxbs-label-info,
.mxpm-label-info,
.mxpb-label-info,
.mxfc-label-info,
.mxns-label-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.mxgc-info-icon,
.mxbs-info-icon,
.mxpm-info-icon,
.mxpb-info-icon,
.mxfc-info-icon,
.mxns-info-icon {
  position: relative;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  background: #ea5b0c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  cursor: help;
  display: inline-block;
}

.mxgc-info-tooltip,
.mxbs-info-tooltip,
.mxpm-info-tooltip,
.mxpb-info-tooltip,
.mxfc-info-tooltip,
.mxns-info-tooltip {
  display: none;
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  background: #111;
  color: #fff;
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  z-index: 9999;
  text-align: left;
}

.mxgc-info-icon:hover .mxgc-info-tooltip,
.mxbs-info-icon:hover .mxbs-info-tooltip,
.mxpm-info-icon:hover .mxpm-info-tooltip,
.mxpb-info-icon:hover .mxpb-info-tooltip,
.mxfc-info-icon:hover .mxfc-info-tooltip,
.mxns-info-icon:hover .mxns-info-tooltip {
  display: block;
}

@media (max-width: 768px) {
  .mxgc-info-tooltip,
  .mxbs-info-tooltip,
  .mxpm-info-tooltip,
  .mxpb-info-tooltip,
  .mxfc-info-tooltip,
  .mxns-info-tooltip {
    left: 0;
    top: 24px;
    transform: none;
    width: 220px;
  }
}