/* ==========================================================================
   TurbonX BD — payment logos
   One tile for every way to pay (bKash, Nagad, Rocket … Visa, cash on delivery). The logo always sits on a WHITE tile, in
   both themes, so a brand's own colours (bKash pink, Nagad orange, Rocket purple …) are never fought by the page around it.
   Cash on delivery and bank transfer are "emblems": the mark is already a rounded tile, so it is drawn without the white frame.
   A method with no logo (one the shop added and never gave one, or a picture that failed to load) gets a tile in its own brand
   colour with its initials — see assets/js/paylogo.js.

   Sizes: --xs 24px · --sm 30px · --md 44px · --lg 60px · --xl 76px tall.
   ========================================================================== */
/* every tile is the same size (2.2 : 1) whatever the logo's own shape, so a row of them reads as one tidy strip */
.pay-logo {
  --pl-h: 34px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-sizing: border-box; overflow: hidden; vertical-align: middle; line-height: 0;
  height: var(--pl-h); width: calc(var(--pl-h) * 2.2);
  padding: calc(var(--pl-h) * 0.14) calc(var(--pl-h) * 0.18);
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12); border-radius: calc(var(--pl-h) * 0.26);
}
/* base.css tints every <img> with the placeholder grey: a logo sits on plain white */
.pay-logo__img { display: block; width: 100%; height: 100%; object-fit: contain; background: none; }

.pay-logo--xs { --pl-h: 24px; }
.pay-logo--sm { --pl-h: 30px; }
.pay-logo--md { --pl-h: 44px; }
.pay-logo--lg { --pl-h: 60px; }
.pay-logo--xl { --pl-h: 76px; }

/* emblems: cash on delivery, bank transfer */
.pay-logo--emblem { width: var(--pl-h); padding: 0; background: transparent; border-color: transparent; border-radius: calc(var(--pl-h) * 0.235); }

/* no logo: the method's own brand colour + its initials */
.pay-logo--text {
  padding: 0 calc(var(--pl-h) * 0.12);
  background: var(--brand, #334155); border-color: transparent; color: #fff;
  font-size: calc(var(--pl-h) * 0.3); font-weight: 800; letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
}