/* «Promo və dostlar» (spec docs/promo-tech.md): each code a coupon — its letters and what it gives on a stub torn off
   by a dashed line, its rules and what it did beside; «bring a friend» — its rules, four numbers, the clients who bring
   the most and the friends who came. The client card's sheet shows his code as the same coupon. */
.promo-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.promo-head__text { min-width: 0; }
.promo-head__title { font: var(--display-weight) 22px/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.promo-head__text .muted { margin-top: 4px; max-width: 62ch; font-size: 14px; }
.promo-tabs button { min-width: 120px; }
.promo-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }

.promo-codes { display: grid; gap: 12px; }
.promo-code { display: flex; align-items: stretch; padding: 0; overflow: hidden; }
.promo-code.is-off { opacity: .62; }
.promo-code__ticket { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: none; min-width: 132px;
  padding: 14px 18px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-right: 2px dashed color-mix(in srgb, var(--accent) 35%, var(--line)); }
/* the two notches of a torn coupon */
.promo-code__ticket::before, .promo-code__ticket::after { content: ''; position: absolute; right: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); }
.promo-code__ticket::before { top: -8px; }
.promo-code__ticket::after { bottom: -8px; }
.promo-code__code { font-size: 18px; font-weight: 800; letter-spacing: .06em; color: var(--ink); word-break: break-all; }
.promo-code__value { font-size: 22px; font-weight: 800; color: var(--accent-text); }
.promo-code__main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 14px; }
.promo-code__rules { font-size: 14px; font-weight: 600; color: var(--ink); }
.promo-code__note { font-size: 13px; color: var(--ink-2); font-style: italic; }
.promo-code__stats { font-size: 13px; color: var(--ink-2); }
.promo-code__acts { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; padding: 12px 14px; flex: none; }
.promo-code__acts .badge { height: auto; min-height: 20px; padding: 2px 8px; font-weight: 600; }
@media (max-width: 640px) {
  .promo-code { flex-wrap: wrap; }
  .promo-code__ticket { width: 100%; flex-direction: row; align-items: baseline; justify-content: space-between; border-right: 0;
    border-bottom: 2px dashed color-mix(in srgb, var(--accent) 35%, var(--line)); }
  .promo-code__ticket::before, .promo-code__ticket::after { display: none; }
  .promo-code__acts { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; padding-top: 0; }
}

.promo-rules { display: grid; gap: 12px; margin-bottom: 14px; }
.promo-rules__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.promo-rules__head .muted { margin-top: 2px; font-size: 13px; max-width: 60ch; }
.promo-rules__foot { display: flex; justify-content: flex-end; }
.promo-kpis { grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; }
.promo-kpis > div:nth-child(n) { border-left: 1px solid var(--line); border-top: 0; }
.promo-kpis > div:first-child { border-left: 0; }
@media (max-width: 640px) {
  .promo-kpis { grid-template-columns: repeat(2, 1fr); }
  .promo-kpis > div:nth-child(3) { border-left: 0; }
  .promo-kpis > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.promo-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; }
.promo-card-title { padding: 12px 14px 4px; }
.promo-none { padding: 8px 14px 14px; font-size: 13px; }
.promo-amb, .promo-friends { display: grid; padding: 0 0 6px; }
.promo-amb__row, .promo-friend { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 14px; }
.promo-amb__row + .promo-amb__row, .promo-friend + .promo-friend { border-top: 1px solid var(--line-soft); }
.promo-amb__n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-text); }
.promo-amb__row a, .promo-friend a { font-weight: 600; color: var(--ink); text-decoration: none; }
.promo-amb__row a { flex: 1; min-width: 0; }
.promo-amb__row a:hover, .promo-friend a:hover { text-decoration: underline; }
.promo-friend__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.promo-friend .badge { height: auto; min-height: 20px; padding: 2px 8px; font-weight: 600; white-space: nowrap; }

/* the client's own code (the client card's sheet) */
.ref-sheet { display: grid; gap: 14px; }
.ref-ticket { position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 16px; border-radius: 16px; text-align: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 2px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ref-ticket__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ref-ticket__code { font-size: 30px; font-weight: 800; letter-spacing: .08em; color: var(--ink); }
.ref-ticket__rule { font-size: 14px; color: var(--ink-2); }
.ref-sheet__text { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; white-space: pre-line; }
.ref-sheet__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ref-sheet__acts .btn--wa { flex: 1; }
.ref-friends { display: grid; }
.ref-friend { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 14px; }
.ref-friend + .ref-friend { border-top: 1px solid var(--line-soft); }
.ref-friend a { font-weight: 600; color: var(--ink); text-decoration: none; }
.ref-friend .badge { height: auto; min-height: 20px; padding: 2px 8px; font-weight: 600; }