/* DIMOCO payment method labels and logos.
   Styles the plugin's own elements only, apart from the one rule at the end. */

:root {
  /* Stepped, never fluid: one value for the whole page keeps every method's
     logos the same size. A logo scaled to the room it happens to have would
     leave the crowded row smaller than the rest. Where they still do not fit
     they wrap. The steps follow the viewport, so a narrow payment column on a
     wide screen keeps the large size and wraps sooner. */
  --dimoco-logo-height: 24px;
  --dimoco-logo-gap: 6px;
}

@media (max-width: 768px) {
  :root {
    --dimoco-logo-height: 20px;
    --dimoco-logo-gap: 5px;
  }
}

@media (max-width: 600px) {
  :root {
    --dimoco-logo-height: 18px;
    --dimoco-logo-gap: 4px;
  }
}

@media (max-width: 480px) {
  :root {
    --dimoco-logo-height: 16px;
    --dimoco-logo-gap: 4px;
  }
}

/* Logo group, used by get_icon() on the classic checkout and by the block
   checkout label. */
.dimoco-logo-checkout {
  display: inline-flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--dimoco-logo-gap);
  max-width: 100%;
  min-width: 0;
}

/* The img needs its own class: a bare ".dimoco-logo-checkout img" would tie
   with ".woocommerce img { height: auto }" from woocommerce-layout.css, and
   the winner would then depend on stylesheet order. */
.dimoco-logo-checkout img.dimoco-logo {
  height: var(--dimoco-logo-height);
  width: auto;
  max-width: 150px;
  /* Never shrink: a squeezed logo is a logo at a different size from the rest.
     The group wraps instead. */
  flex: 0 0 auto;
  object-fit: contain;
  float: none;
  display: inline-block;
}

/* Core sets "margin: -2px 0 0 .5em" on these images from a selector carrying
   #payment, and 2px more on every following one. Staying off core's id costs
   the specificity contest, so this is forced rather than won by naming #payment
   ourselves. Left alone it insets the first logo, adds 2px to each gap and
   lifts every logo 2px. */
.woocommerce-checkout .payment_methods li .dimoco-logo-checkout img.dimoco-logo,
.wc_payment_methods li .dimoco-logo-checkout img.dimoco-logo {
  margin: 0 !important;
}

/* Block checkout: core pins these to 24px from three classes and an element,
   with no breakpoint, so they stay 24px on a phone. The repeated class puts
   this one class ahead without naming core's, which get renamed as the blocks
   are reworked. max-width has to be restated, or core's max-width:100% replaces
   the cap. */
.dimoco-method-label .dimoco-logo-checkout img.dimoco-logo.dimoco-logo {
  height: var(--dimoco-logo-height);
  max-height: var(--dimoco-logo-height);
  max-width: 150px;
}

.editor-styles-wrapper .dimoco-logo-checkout {
  display: inline-flex;
  align-items: center;
  gap: var(--dimoco-logo-gap);
}

/* Classic checkout: get_icon() puts the logos inside the label core renders,
   behind the title. Floating our own group is all it takes; the label is left
   as the theme wrote it.

   min-height gives the float the height of one text line so the logos centre
   against the title instead of sitting above it - lh follows whatever
   line-height the theme sets, and the em value is the fallback for engines
   without it. max-width keeps the width definite, or the float takes its
   max-content width and drops below the title as one block. */
.woocommerce-checkout .payment_methods li .dimoco-logo-checkout,
.wc_payment_methods li .dimoco-logo-checkout {
  float: right;
  float: inline-end;
  margin-inline-start: 8px;
  max-width: 60%;
  min-height: 1.5em;
  min-height: 1lh;
  /* Keeps a wrapped group off the description box below it. */
  margin-block-end: 4px;
}

/* Block checkout label: title left, logos right, one row. */
.dimoco-method-label {
  display: flex;
  align-items: center;
  width: 100%;
  /* A flex item inside core's label. Without min-width:0 its automatic
     min-content floor stops it shrinking and the row overflows to the right. */
  min-width: 0;
  gap: 8px;
  flex-wrap: nowrap;
}

.dimoco-method-label .dimoco-payment-title {
  /* Wraps rather than being cut: merchants set these titles themselves. The
     min-content floor stops a break mid-name while the logos can still wrap. */
  flex: 1 1 auto;
  min-width: min-content;
  overflow-wrap: break-word;
}

.dimoco-method-label .dimoco-logo-checkout {
  /* Shrink factor well above the title's, so width comes out of the logos
     first. The ceiling stops a full row of card brands taking the line on
     their own; the floor keeps one column visible whatever the title does. */
  flex: 0 20 auto;
  max-width: 65%;
  min-width: min-content;
  /* Logical: on a right-to-left checkout margin-left would park the logos in
     the middle of the row. */
  margin-inline-start: auto;
}

/* The one rule on markup we do not own.

   A float does not make its containing block taller, so a group that wraps
   escapes the row. Core's own clearfix covers every row that is not expanded;
   the description box of the selected method sits before it and got painted
   over. Inert where a theme lays the row out with flex or grid. */
.woocommerce-checkout .payment_methods li:has(.dimoco-logo-checkout) > .payment_box,
.wc_payment_methods li:has(.dimoco-logo-checkout) > .payment_box {
  clear: both;
}