.card-number-wrapper .card-type-icon {
  height: 30px;
  width: 42px;
  position: absolute;
  display: block;
  right: 8px;
  top: 50%;
  margin-top: -15px;
  /* Use HD sprite: original 2324x143 scaled to 30px tall => ~488px wide (≈11 columns × 44px) */
  background: url("/wp-content/plugins/tourmaster/include/images/cards-hd.png") no-repeat 0px 23px;
  background-size: 488px 30px;
  pointer-events: none;
  opacity: 0;

  -webkit-transition: opacity .15s linear;
  -moz-transition: opacity .15s linear;
  -ms-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear;
}

.card-number-wrapper .show {
  opacity: 1;
}

/* Column index mapping (34px per column, 11 columns wide):
   0: apple-pay, 1: gpay, 2: visa, 3: mastercard, 4: maestro, 5: amex,
   6: discover, 7: diners, 8: elo, 9: other, 10: other
*/
.card-number-wrapper .card-type-icon.visa { background-position: -89px 0px; }
.card-number-wrapper .card-type-icon.master-card { background-position: -133px 0px; }
.card-number-wrapper .card-type-icon.american-express { background-position: -222px 0px; }
.card-number-wrapper .card-type-icon.discover { background-position: -266px 0px; }
.card-number-wrapper .card-type-icon.diners { background-position: -310px 0px; }
/* JCB icon is not present in cards-hd.png; using a far-right column as a neutral placeholder. */
.card-number-wrapper .card-type-icon.jcb { background-position: -443px 0px; }