@charset "UTF-8";
/* Подарочный сертификат: зелёная карта 480 × 308 (макет xl), на md/моб. — 326 в ширину; масштабируется
   целиком, пропорционально своей ширине. Поэтому внутри — исключение из правила rem: размер шрифта
   __inner — от ширины контейнера (cqw, 1em = 16px при ширине 480), все внутренние размеры — в em
   через локальную функцию u(px макета xl).
   Мячи — один SVG (контур из Figma), повёрнут на −45° / 45°; логотип — SVG из Figma.
   __field — поле «Любая сумма» вместо суммы (вид временный: в макете его нет) — нижняя граница
   green-dark (зелёная на зелёной карте не видна). */
.certificate-card {
  container-type: inline-size;
  width: 100%;
}
.certificate-card__inner {
  position: relative;
  aspect-ratio: 480/308;
  overflow: hidden;
  font-size: 3.3333333333cqw;
  color: var(--color-black);
  background-color: var(--color-green);
  border-radius: 1.5em;
}
.certificate-card__ball {
  position: absolute;
  width: 17.925em;
  max-width: none;
  height: 17.925em;
}
.certificate-card__ball--left {
  top: 3.075em;
  left: -0.725em;
  transform: rotate(-45deg);
}
.certificate-card__ball--right {
  top: -4.725em;
  left: 15.4em;
  transform: rotate(45deg);
}
.certificate-card__logo {
  position: absolute;
  top: 1.2em;
  left: 1.2em;
  width: 5.1075em;
  height: 3.0475em;
}
.certificate-card__bottom {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  gap: 1em;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1.5em;
}
.certificate-card__city {
  font-family: var(--font-text);
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.32;
  color: var(--color-black-40);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.certificate-card__amount, .certificate-card__field {
  font-family: var(--font-heading);
  font-size: 6.5em;
  font-weight: 800;
  line-height: 0.8;
  color: var(--color-green-dark);
  text-transform: uppercase;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.certificate-card__amount[hidden], .certificate-card__field[hidden] {
  display: none;
}
.certificate-card__field {
  display: flex;
  gap: 0.12em;
  align-items: baseline;
  min-width: 0;
  margin-bottom: -0.14em;
}
.certificate-card__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.certificate-card__input {
  width: 2.9em;
  min-width: 0;
  padding: 0;
  font: inherit;
  line-height: 0.8;
  color: inherit;
  text-align: right;
  background: none;
  border: 0;
  border-bottom: 0.03em solid var(--color-green-dark);
  border-radius: 0;
  outline: none;
}
.certificate-card__input::placeholder {
  color: var(--color-green-dark);
  opacity: 0.4;
}
.certificate-card__input:focus-visible {
  border-bottom-width: 0.05em;
}