/* mfdcombinationimages - front office. Theme independent; scoped to module classes
   (and to form.mfdci-form for the native radio groups of enabled products). */

.mfdci-native-hidden {
  display: none !important; /* keeps the native group[] control in the form (still serialized) while thumbnails replace it visually */
}

/* ---------------------------------------------------------------- group label
   "Hauptfarbe: MagicVelvet_2253" - the chosen value is appended to the native label. */

form.mfdci-form .product-variants .product-variants-item .control-label.mfdci-label {
  display: block;
  max-width: none;
  margin-bottom: 6px;
  font-weight: 400;
}

form.mfdci-form .product-variants .product-variants-item .control-label.mfdci-label .mfdci-label-value {
  font-weight: 700;
}

/* ----------------------------------------------------------------- thumbnails */

.mfdci-thumbs {
  --mfdci-size: 84px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
}

.mfdci-thumb {
  width: var(--mfdci-size);
  max-width: 100%;
  margin: 0;
  padding: 3px;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.mfdci-thumb:hover,
.mfdci-thumb:focus-visible {
  border-color: #6f6f6f;
  outline: none;
}

.mfdci-thumb:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

.mfdci-thumb.is-selected {
  border-color: #222;
  box-shadow: inset 0 0 0 1px #222; /* 2px frame without layout shift */
}

.mfdci-thumb__media,
.mfdci-thumb__swatch,
.mfdci-thumb__text {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3; /* first combination images are 4:3 - no side cropping */
  overflow: hidden;
  border-radius: 5px;
  background-color: #f2f2f2;
}

.mfdci-thumb__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mfdci-thumb__swatch {
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-size: cover;
  background-position: center;
}

.mfdci-thumb__text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  font-size: 0.75em;
  word-break: break-word;
}

.mfdci-thumb__label {
  display: block;
  margin-top: 4px;
  font-size: 0.6875em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mfdci-thumb.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mfdci-thumb.is-disabled .mfdci-thumb__media::before,
.mfdci-thumb.is-disabled .mfdci-thumb__swatch::before,
.mfdci-thumb.is-disabled .mfdci-thumb__text::before {
  content: "";
  position: absolute;
  left: -20%;
  top: 50%;
  width: 140%;
  height: 2px;
  background: rgba(0, 0, 0, 0.6);
  transform: rotate(-45deg);
  z-index: 1;
}

/* ------------------------------------------------- native radio groups as tiles
   Only inside the product form of an enabled product (form.mfdci-form). Markup of
   PrestaShop product-variants.tpl: label > input.input-radio + span.radio-label.
   The native input stays where it is (theme: absolute, opacity 0) - only the
   visible span is restyled, so keyboard and core.js behaviour are untouched. */

form.mfdci-form .product-variants .product-variants-item .input-radio + .radio-label {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  font-weight: 400;
  line-height: 1.3;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form.mfdci-form .product-variants .product-variants-item .input-radio:hover + .radio-label {
  border-color: #6f6f6f;
  box-shadow: none;
}

form.mfdci-form .product-variants .product-variants-item .input-radio:focus-visible + .radio-label {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

form.mfdci-form .product-variants .product-variants-item .input-radio:checked + .radio-label {
  border-color: #222;
  box-shadow: inset 0 0 0 1px #222;
}

/* ---------------------------------------------------------------------- cart */

.mfdci-hint {
  margin: 0 0 8px;
  font-size: 0.875em;
  color: #b02a37;
}

.mfdci-locked {
  cursor: not-allowed;
}

@supports not (aspect-ratio: 4 / 3) {
  .mfdci-thumb__media,
  .mfdci-thumb__swatch,
  .mfdci-thumb__text {
    height: 0;
    padding-bottom: 75%;
  }

  .mfdci-thumb__media img {
    position: absolute;
    top: 0;
    left: 0;
  }
}

@media (max-width: 575px) {
  .mfdci-thumbs {
    gap: 6px;
  }

  .mfdci-thumb {
    width: calc(var(--mfdci-size) * 0.8);
  }
}