/* Лицо карты, нижняя половина: номер, копирование и узор.

   Отдельным файлом от верхней по правилу длины. Делится там же,
   где делится сама карта: сверху — чья она и на сколько скидка,
   снизу — то, что показывают кассиру. */

.cardface__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
}

.cardface__codebox { min-width: 0; }

.cardface__code {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .08em;
}

/* Копирование — пилюлей на подложке: без неё кнопка растворяется
   в фоне, а нажимают её у кассы второпях. */
.cardface__copy {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--card-edge);
  border-radius: 100px;
  background: var(--card-plate);
  color: var(--card-ink);
  font-family: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}

.cardface__copy .icon { width: var(--fs-sm); height: var(--fs-sm); }

/* Нажатие видно рукой: кнопка вжимается и светлеет. Без отклика
   человек жмёт второй раз, решив, что промахнулся. */
.cardface__copy:active,
.cardface__qr:active {
  background: var(--card-veil);
  border-color: var(--card-ink);
  transform: scale(.97);
}

/* Узор настоящий: вблизи читается сам, по нажатию открывается крупно.
   Своя светлая подложка обязательна — сканер ищет тёмное по белому. */
.cardface__qr {
  flex: none;
  display: grid;
  justify-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-md);
  background: var(--card-plate);
  color: var(--card-ink);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}

.cardface__qrbox {
  display: block;
  width: var(--sp-12);
  height: var(--sp-12);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.cardface__qrbox .qr { display: block; width: 100%; height: 100%; }

.cardface__qrlabel { font-size: var(--fs-2xs); color: var(--card-dim); }

@media (hover: hover) {
  .cardface__copy:hover,
  .cardface__qr:hover {
    background: var(--card-veil);
    border-color: var(--card-ink);
  }
}