/*
 * DINAPE Payment Gateway — checkout styles.
 *
 */

/* --- Shared icon wrapper (classic checkout, block checkout and the editor) --- */

.dinape-payment-icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dinape-payment-icons img {
  display: block;
  width: 38px;
  height: 24px;
  max-height: 24px;
  object-fit: contain;
  margin: 0;
}

.dinape-payment-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Block checkout ---
 * Markup order is title then icons (see register-method.js): the label text
 * sits right after the radio button, with the brand marks immediately after
 * it in the same row.
 */

.dinape-payment-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.editor-styles-wrapper .dinape-payment-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* --- Classic checkout ---
 * WooCommerce renders `<label>Title<icon></label>`; order:-1 here moves the
 * marks in front of the text without touching the markup.
 */

.payment_method_dinape_p,
.payment_method_dinape_cc,
.payment_method_dinape_omt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-basis: 100%;
}

.payment_method_dinape_p label,
.payment_method_dinape_cc label,
.payment_method_dinape_omt label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.payment_method_dinape_p label .dinape-payment-icons,
.payment_method_dinape_cc label .dinape-payment-icons,
.payment_method_dinape_omt label .dinape-payment-icons {
  order: -1;
}

.payment_method_dinape_p input[type="radio"],
.payment_method_dinape_cc input[type="radio"],
.payment_method_dinape_omt input[type="radio"] {
  margin-top: 0;
}