/* DIMOCO payment method labels and logos */

/* Logo container (used in both classic get_icon() output and block labels) */
.dimoco-logo-checkout {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

/* The img carries its own class on purpose: WooCommerce ships
   ".woocommerce img, .woocommerce-page img { height: auto }" in
   woocommerce-layout.css, which has the same specificity as
   ".dimoco-logo-checkout img" and is loaded later, so it would win on the
   classic checkout. The extra class keeps the sizing independent of the
   stylesheet order without resorting to !important. */
.dimoco-logo-checkout img.dimoco-logo {
  /* Fixed height so every method/brand logo renders at the same size,
     regardless of the logo's intrinsic dimensions. Wide wordmark logos
     (e.g. paysafecard, Multibanco) keep their aspect ratio up to max-width. */
  height: 24px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  /* Override WooCommerce's default per-image right float so multiple brand
     logos keep their order and spacing. */
  float: none;
  display: inline-block;
}

.editor-styles-wrapper .dimoco-logo-checkout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Classic checkout: get_icon() output is appended after the label; float the
   whole logo group to the right of the payment method row. */
.woocommerce-checkout .payment_methods li .dimoco-logo-checkout,
.wc_payment_methods li .dimoco-logo-checkout {
  float: right;
  margin-left: auto;
}

/* Block checkout: the label renders the title and the logos in one flex row,
   title on the left, logos pushed to the right. */
.dimoco-method-label {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  /* On a phone the card method carries six logos. Without wrapping they push
     the title out of the row and run past the right edge. */
  flex-wrap: wrap;
}

.dimoco-method-label .dimoco-payment-title {
  flex: 1 1 auto;
  /* Not 0: the title has to stay readable rather than collapse to nothing. */
  min-width: 6em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dimoco-method-label .dimoco-logo-checkout {
  flex: 0 1 auto;
  justify-content: flex-end;
  margin-left: auto;
}

/* Narrow screens: the logos get their own line under the title. */
@media (max-width: 480px) {
  .dimoco-method-label .dimoco-logo-checkout {
    justify-content: flex-start;
    margin-left: 0;
  }

  .dimoco-logo-checkout img.dimoco-logo {
    height: 20px;
  }
}