/* site-promo.css — задания профиля с наградами (пакет E2): блок на главной, «Спасибо», кабинет, плашка после регистрации.
   Цвета и шрифты — токены основного сайта (site.css). */

.pm-home { padding: 8px 0 0; }
.pm-home[hidden], .pm-card[hidden] { display: none; }

.pm-card { position: relative; display: flex; gap: 18px; align-items: flex-start; background: linear-gradient(115deg, #E5EDFF 0%, #EEE6FF 100%); border-radius: 22px; padding: 20px 56px 20px 20px; color: var(--av-ink); }
.pm-card.pm-guest { align-items: center; background: linear-gradient(115deg, #DCE6FF 0%, #E8E1FF 60%, #F1D6F9 100%); padding: 22px 56px 22px 24px; }
.pm-compact { align-items: center; padding: 14px 56px 14px 16px; border-radius: 18px; }

.pm-ring { flex: none; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative;
  background: conic-gradient(var(--av-blue) calc(var(--pm) * 1%), rgba(8, 25, 64, .12) 0); }
.pm-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #FFFFFF; }
.pm-ring b { position: relative; font-size: 15px; line-height: 1; font-weight: 800; }

.pm-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.pm-h { font-size: 17px; line-height: 24px; font-weight: 800; }
.pm-sub { font-size: 14px; line-height: 20px; color: var(--av-muted-2); }
.pm-sub b { color: var(--av-ink); }
.pm-bar { height: 8px; border-radius: 4px; background: rgba(8, 25, 64, .1); overflow: hidden; margin: 4px 0 2px; max-width: 520px; }
.pm-bar i { display: block; height: 100%; border-radius: 4px; background: var(--av-blue); transition: width .3s; }
.pm-compact .pm-bar { display: none; }

.pm-tasks, .pm-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pm-steps { gap: 4px; font-size: 14px; line-height: 20px; }
.pm-steps li { padding-left: 22px; position: relative; }
.pm-steps li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--av-blue); }
.pm-task { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; }
.pm-ck { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(8, 25, 64, .25); background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #FFFFFF; }
.pm-task.is-done .pm-ck { border-color: #1C8A4B; background: #1C8A4B; }
.pm-task.is-done .pm-tt { color: var(--av-muted); text-decoration: line-through; text-decoration-color: rgba(8, 25, 64, .25); }
.pm-tt { flex: 1; min-width: 0; color: var(--av-ink); font-weight: 600; text-decoration: none; }
a.pm-tt:hover { color: var(--av-blue); }
.pm-rw { flex: none; font-size: 13px; font-weight: 800; color: var(--av-blue); }
.pm-task.is-done .pm-rw { color: #1C8A4B; }

.pm-act { margin-top: 8px; }
.pm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--av-blue); color: #FFFFFF; font: 700 15px/20px var(--av-font); text-decoration: none; cursor: pointer; transition: background .15s; }
.pm-btn:hover { background: var(--av-blue-hover); }
.pm-compact .pm-act { margin-top: 4px; }

.pm-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--av-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.pm-x:hover { background: rgba(255, 255, 255, .6); color: var(--av-ink); }

.pm-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: min(560px, calc(100vw - 32px)); background: var(--av-ink); color: #FFFFFF; border-radius: 14px; padding: 12px 16px; font-size: 14px; line-height: 20px; box-shadow: 0 12px 32px rgba(8, 25, 64, .3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 95; }
.pm-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pm-toast a { color: #9FC0FF; font-weight: 700; }

/* внутри кабинета и «Спасибо» */
.lk .pm-card, .pay-wrap .pm-card { margin: 0 0 16px; }
[data-pm-thanks] { margin-top: 16px; }
[data-pm-thanks][hidden] { display: none; }

@media (max-width: 640px) {
  .pm-card { gap: 14px; padding: 16px 48px 16px 16px; }
  .pm-card.pm-guest { padding: 18px 48px 18px 16px; }
  .pm-ring { width: 52px; height: 52px; }
  .pm-ring::before { inset: 6px; }
  .pm-ring b { font-size: 13px; }
  .pm-h { font-size: 16px; line-height: 22px; }
  .pm-btn { width: 100%; }
  .pm-toast { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-bar i, .pm-toast, .pm-btn { transition: none; }
}