/* profile.css */
/* ===============================
   9. ЭКРАН "ПРОФИЛЬ"
   =============================== */

#screen-profile .page-title-profile {
  margin: 0 0 4px;
  color: var(--sand); /* или var(--pink), как больше нравится */
}

/* Обёртка для аватарки и ника */
.profile-avatar-wrap {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:72px;
}

/* Круглая аватарка */
.profile-avatar {
  width:48px;
  height:48px;
  border-radius:50%;
  overflow:hidden;
  background:#222;
  display:grid;
  place-items:center;
  font:800 16px/1 var(--font-accent);
  color:#fff;
  border:2px solid #ffffff33;
  box-shadow:var(--shadow-soft);
}

.profile-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Ник под аватаркой */
.profile-username {
  font-size:11px;
  color:#bbbbbb;
  max-width:80px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.profile-wrap {
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:4px;
}

.profile-sub {
  font-size:14px;
  line-height:1.5;
  color:#eaeaea;
}

.profile-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.profile-status {
  font-size:12px;
  color:#888;
}

/* ======================================
   LOYALTY BLOCK — HEART + INFO
   ====================================== */

.user-loyalty {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 16px;

  font-size: 14px;
  line-height: 1.4;
}

/* Левая часть — само сердечко, без кружка */
.loyalty-heart-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#profileLoyaltyHeart {
  display: block; /* размер задаётся самим SVG */
}

/* Правая часть — текстовые строки */
.loyalty-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px; /* одинаковый отступ между строчками */
}

.loyalty-row {
  display: flex;
  align-items: baseline; /* чтобы цифры и текст шли по одной линии */
  gap: 6px;
  color: var(--text);
}

/* Доп. строка "До нового уровня" — тот же размер, просто чуть мягче по тону */
.loyalty-row.small {
  opacity: 0.8;
}

/* Подписи слева */
.loyalty-row .label {
  opacity: 0.8;
}

/* Значения по умолчанию */
.value {
  font-weight: 600;
  color: var(--sand);
}

/* «из 7» */
.value-muted {
  font-weight: 600;
  color: var(--line);
  opacity: 0.8;
}

/* серое слово "из" */
.muted {
  opacity: 0.6;
}

/* Накоплено сердечек — розовым */
#profileLoyaltyPoints {
  color: var(--pink);
}

/* Прогресс — фиолетовым */
#profileLoyaltyProgressPercent {
  color: var(--violet);
}

/* Чуть аккуратнее жирное тире/число в "До нового уровня" */
#profileLoyaltyToNextWrap b {
  margin-left: 4px;
  font-weight: 600;
}

/* ======================================
   PROFILE WRAP — аккуратная карточка
   ====================================== */

.profile-wrap {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 24px;  /* ← нижний внешний отступ */

  /* одинаковые отступы сверху/снизу/слева/справа */
  padding: 16px;

  /* одинаковая дистанция между всеми внутренними блоками */
  display: flex;
  flex-direction: column;
  gap: 12px;

  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}

/* Блок с текстом подписки */
.profile-sub {
  font-size: 14px;
  opacity: 0.9;
}

/* Кнопки внутри профиля — ширина под текст + небольшой внутренний отступ */
.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start; /* кнопки прилипают к левому краю */
}

.profile-actions .btn {
  width: auto;                 /* ширина по содержимому */
  padding: 8px 16px;           /* симпатичный внутренний отступ */
  min-width: max-content;      /* защита, чтобы текст не сжимался */
  border-radius: 12px;         /* красивое скругление, как в Korta */
  display: inline-flex;        /* чтобы высота считалась правильно */
  justify-content: center;
  border-radius: 999px;
}

/* Статус под кнопками */
.profile-status.msg {
  font-size: 14px;
  opacity: 0.85;
  margin-top: 0;      /* убираем лишний внешний отступ */
  margin-bottom: 0;   /* чтобы не создавать лишний «воздух» снизу */
}