/* Плашка аккаунта в шапке лендинга.

   Стили аккаунта из оболочки приложения (components.css / aurora*.css) сюда
   подключать нельзя — они тянут за собой всю тему приложения и ломают лендинг.
   Поэтому здесь свой минимальный набор в палитре Diva. Всё под .diva-account,
   чтобы ничего вокруг не задеть. */

.diva-account { position: relative; display: inline-flex; }

.diva-account__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--accent-text, #b84568);
  cursor: pointer;
  white-space: nowrap;
}

.diva-account__chev {
  font-size: 10px;
  opacity: .7;
  transition: transform .22s ease;
}

.diva-account__trigger[aria-expanded="true"] .diva-account__chev { transform: rotate(180deg); }

.diva-account__menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 80;
  width: 262px;
  padding: 14px;
  border: 1px solid rgba(238, 115, 155, .16);
  border-radius: 22px;
  background: var(--cloud-0, #fffdfb);
  box-shadow: 0 24px 56px rgba(186, 86, 124, .20);
  animation: diva-account-in .2s cubic-bezier(.22, .75, .28, 1);
}

@keyframes diva-account-in {
  from { opacity: 0; transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
  .diva-account__menu { animation: none; }
}

.diva-account__balance {
  padding: 13px 14px 14px;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--peach-100, #ffe9da), var(--rose-100, #ffe5ee));
}

.diva-account__balance-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

.diva-account__balance-row span { font-size: 13px; font-weight: 700; color: #5c4450; }
.diva-account__balance-row strong { font-size: 15px; font-weight: 800; color: #e0507f; }

.diva-account__topup {
  display: block;
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(120deg, #ff9d6b, #f9798f 55%, #ee68b6);
  box-shadow: 0 9px 20px rgba(244, 110, 150, .3);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.diva-account__topup:hover { filter: brightness(1.04); }

.diva-account__id {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 6px 0;
  font-size: 13px;
  color: #6c5360;
}

.diva-account__sep {
  height: 1px;
  margin: 12px 2px;
  background: rgba(200, 140, 165, .18);
}

.diva-account__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 6px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: #4b3341;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.diva-account__item:hover { background: rgba(255, 220, 232, .55); }

.diva-account__ic {
  width: 16px;
  color: #f2789f;
  font-size: 13px;
  text-align: center;
}

.diva-account__item--soon { opacity: .5; cursor: default; }
.diva-account__item--soon:hover { background: none; }
.diva-account__item--exit { color: #e0507f; font-weight: 700; }

/* На телефоне ссылка входа лежит внутри раскрытого меню-гамбургера,
   поэтому плашку показываем не поверх, а прямо в потоке — так ничего
   не перекрывается и не уезжает за край экрана. */
@media (max-width: 760px) {
  .diva-account { display: block; }

  .diva-account__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 12px;
  }

  .diva-account__menu {
    position: static;
    width: auto;
    /* Шапка липкая, поэтому прокрутка страницы не открывает нижние пункты:
       ограничиваем высоту и прокручиваем панель внутри себя. */
    max-height: min(46vh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 2px 0 6px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 247, 250, .92);
    box-shadow: none;
  }

  .diva-account__item { padding: 8px 6px; }
  .diva-account__id { padding-top: 12px; }
  .diva-account__sep { margin: 10px 2px; }
}