/*
 * TEB instalments card.
 *
 * A white bordered card under the price: artwork on the left, the monthly
 * amount in red over the instalment wording. The fallbacks in each var() are
 * the component's schema defaults, so it still renders correctly if it is ever
 * included without its inline properties.
 */

.oxa-teb {
  display: flex;
  align-items: center;
  gap: 16px;
  /* 250 × 66 in the reference: a fixed width rather than a maximum, so the card
   * is the same size on every product instead of shrinking to its digits. */
  width: 250px;
  max-width: 100%;
  margin: 1rem 0 0.25rem;
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  /* Its own radius on purpose — see the note in template.php. The theme's
   * global --oxa-radius is 0 and this card is the documented exception. */
  border-radius: var(--oxa-teb-radius, 4px);
  background: #ffffff;
  /* 16px × 1.5 over two lines is the 48px of content that makes the card 66
   * tall once its padding and border are counted. */
  line-height: 1.5;
}

/* The artwork's slot. Fixed width whether or not there is artwork, so the card
 * does not resize the day a real image is dropped in. */
.oxa-teb__mark {
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oxa-teb__mark img {
  max-width: 100%;
  max-height: 20px;
  width: auto;
  height: auto;
  display: block;
}

/* Stands in for the card picture until one is supplied. Red, so it reads as
 * "something belongs here" rather than as part of the copy. */
.oxa-teb__placeholder {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--oxa-teb-fg, #e11d48);
}

.oxa-teb__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.oxa-teb__line {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  flex-wrap: wrap;
}

.oxa-teb__amount {
  font-size: 16px;
  font-weight: 600;
  color: var(--oxa-teb-fg, #e11d48);
}

.oxa-teb__per,
.oxa-teb__label {
  font-size: 16px;
  font-weight: 400;
  color: #1d1d1d;
}

@media (max-width: 480px) {
  .oxa-teb { gap: 12px; padding: 8px 12px; }
  .oxa-teb__amount,
  .oxa-teb__per,
  .oxa-teb__label { font-size: 15px; }
}