/* ==========================================================================
   Yeni dizayn (v2) — hesab kartı: menyuda (telefon/planşet) və yuxarı
   zolaqdakı hesab düyməsinin açılan kartında (masaüstü).
   Rütbə, xal + irəliləyiş, rozetlər, abunə, sürətli keçidlər.
   inc/v2-mod/account-card.php
   ========================================================================== */

.qv-acc-c {
  position: relative; display: block; margin: 0 0 12px; padding: 14px 14px 12px;
  border-radius: 18px; overflow: hidden; color: #fff;
  background: radial-gradient(130% 120% at 100% 0%, rgba(13, 90, 198, .82) 0%, rgba(13, 90, 198, 0) 62%), var(--qv-navy);
  -webkit-tap-highlight-color: transparent;
}
.qv-sheet.is-on .qv-acc-c { animation: qvSlideIn .45s var(--qv-ease) backwards .04s; }

/* ---------- ad, avatar, rütbə ---------- */
.qv-acc-c__hd {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; grid-gap: 12px; gap: 12px;
  margin: -4px; padding: 4px; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color .2s;
}
.qv-acc-c__hd:hover { background: rgba(255, 255, 255, .06); }
.qv-acc-c__hd > .qv-ic { width: 16px; height: 16px; color: var(--qv-soft); }
.qv-acc-c__av {
  display: grid; align-items: center; justify-items: center; place-items: center; flex: none; width: 54px; height: 60px; background: var(--qv-marker);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.qv-acc-c__av .qv-ava { width: 48px; height: 54px; font-size: 1.375rem; }
.qv-ava--st { background: var(--av, var(--qv-blue)); color: #fff; }
.qv-ava--st svg { display: block; width: 54%; height: 54%; }
.qv-acc-c__who { min-width: 0; }
.qv-acc-c__who b { display: block; overflow: hidden; font-weight: 800; font-stretch: 84%; font-size: 1.1875rem; line-height: 1.15; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.qv-acc-c__rk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; }
@supports not (aspect-ratio: 1) {
 .qv-acc-c__rk > * { margin-right: 8px; margin-bottom: 4px; } }
.qv-acc-c__tag { display: inline-block; padding: 3px 8px 2px; border-radius: 6px; background: var(--qv-marker); color: var(--qv-navy); font-size: .75rem; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.qv-acc-c__rk small, .qv-acc-c__plain { display: block; font-size: .75rem; color: var(--qv-soft); }
.qv-acc-c__plain { margin-top: 3px; font-size: .8125rem; }

/* ---------- xal və irəliləyiş ---------- */
.qv-acc-c__pts { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 8px; margin-top: 14px; }
@supports not (aspect-ratio: 1) {
 .qv-acc-c__pts > * { margin-right: 8px; margin-bottom: 6px; } }
.qv-acc-c__pts p { margin: 0; line-height: 1; white-space: nowrap; }
.qv-acc-c__pts b { font-size: 1.875rem; font-weight: 800; font-stretch: 68%; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.qv-acc-c__pts p span { font-size: .8125rem; font-weight: 600; color: var(--qv-soft); }
.qv-acc-c__meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
@supports not (aspect-ratio: 1) {
 .qv-acc-c__meta > * { margin-right: 6px; margin-bottom: 6px; } }
.qv-acc-c__chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .75rem; font-weight: 700; line-height: 1; white-space: nowrap; }
@supports not (aspect-ratio: 1) {
 .qv-acc-c__chip > * { margin-right: 4px; }
 .qv-acc-c__chip > :last-child:not(:first-child) { margin-right: 0; } }
.qv-acc-c__chip .qv-ic { width: 14px; height: 14px; color: var(--qv-marker); }
a.qv-acc-c__chip { color: inherit; text-decoration: none; transition: background-color .2s; }
a.qv-acc-c__chip:hover { background: rgba(255, 255, 255, .18); }
.qv-acc-c__bar { display: block; height: 6px; margin-top: 10px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.qv-acc-c__bar i { display: block; height: 100%; border-radius: 3px; background: var(--qv-marker); transform: scaleX(var(--v, 0)); transform-origin: 0 50%; }
.qv-sheet.is-on .qv-acc-c__bar i { animation: qvAccGrow .9s var(--qv-ease) both .25s; }
@keyframes qvAccGrow { from { transform: scaleX(0); } }
.qv-acc-c__next { display: block; margin-top: 6px; font-size: .75rem; line-height: 1.35; color: var(--qv-soft); }

/* ---------- rozetlər ---------- */
.qv-acc-c__bd { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.qv-acc-c__bd .qv-lab { display: block; color: var(--qv-soft); }
.qv-acc-c__bd .qv-lab em { margin-left: 4px; font-style: normal; color: #fff; }
.qv-acc-c__hx { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
@supports not (aspect-ratio: 1) {
 .qv-acc-c__hx > * { margin-right: 6px; margin-bottom: 6px; } }
.qv-acc-c__b {
  position: relative; display: grid; align-items: center; justify-items: center; place-items: center; flex: none; width: 32px; height: 36px; margin: 0; padding: 0;
  background: var(--qv-blue-2); color: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.qv-acc-c__b .qv-ic { width: 17px; height: 17px; }
.qv-acc-c__b.is-gold { background: var(--qv-marker); color: var(--qv-navy); }
.qv-acc-c__b.is-silver { background: var(--qv-sky); color: var(--qv-blue-3); }
.qv-acc-c__b.is-bronze { background: #EDBE8C; color: var(--qv-navy); }
.qv-acc-c__b.is-more { background: rgba(255, 255, 255, .12); color: #fff; font-size: .75rem; font-weight: 800; font-stretch: 84%; }
.qv-acc-c__b.is-lock { background: rgba(255, 255, 255, .12); color: var(--qv-soft); }
.qv-acc-c__hx .qv-acc-c__b.is-lock { background: rgba(255, 255, 255, .07); color: rgba(201, 218, 245, .5); }
.qv-sheet.is-on .qv-acc-c__hx .qv-acc-c__b { animation: qvAccPop .5s var(--qv-pop) backwards; animation-delay: calc(var(--k, 0) * 55ms + .22s); }
@keyframes qvAccPop { from { opacity: 0; transform: scale(.4); } }
.qv-acc-c__first { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; grid-gap: 10px; gap: 10px; margin: 8px 0 0; }
.qv-acc-c__first b { display: block; font-size: .875rem; font-weight: 700; line-height: 1.2; }
.qv-acc-c__first small { display: block; margin-top: 2px; font-size: .75rem; line-height: 1.3; color: var(--qv-soft); }

/* ---------- abunə ---------- */
.qv-acc-c__sub { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8125rem; line-height: 1.3; color: var(--qv-soft); }
@supports not (aspect-ratio: 1) {
 .qv-acc-c__sub > * { margin-right: 8px; }
 .qv-acc-c__sub > :last-child:not(:first-child) { margin-right: 0; } }
.qv-acc-c__sub > .qv-ic { width: 18px; height: 18px; color: var(--qv-soft); }
.qv-acc-c__sub > span { flex: 1; min-width: 0; }
.qv-acc-c__sub.is-on > span { color: #fff; font-weight: 600; }
.qv-acc-c__sub.is-on > .qv-ic { color: var(--qv-marker); }
.qv-acc-c__sub a { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 32px; color: var(--qv-marker); font-weight: 700; text-decoration: none; white-space: nowrap; }
@supports not (aspect-ratio: 1) {
 .qv-acc-c__sub a > * { margin-right: 4px; }
 .qv-acc-c__sub a > :last-child:not(:first-child) { margin-right: 0; } }
.qv-acc-c__sub a .qv-ic { width: 14px; height: 14px; transition: transform .25s var(--qv-ease); }
.qv-acc-c__sub a:hover .qv-ic { transform: translateX(3px); }

/* ---------- sürətli keçidlər ---------- */
.qv-acc-c__go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@supports not (aspect-ratio: 1) {
 .qv-acc-c__go > * { margin-right: 8px; margin-bottom: 8px; } }
.qv-acc-c__go a:not(.qv-btn) {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-size: .875rem; font-weight: 700; font-stretch: 94%;
  line-height: 1.1; text-align: center; text-decoration: none; transition: background-color .2s;
}
@supports not (aspect-ratio: 1) {
 .qv-acc-c__go a:not(.qv-btn) > * { margin-right: 8px; }
 .qv-acc-c__go a:not(.qv-btn) > :last-child:not(:first-child) { margin-right: 0; } }
.qv-acc-c__go a:not(.qv-btn):hover { background: rgba(255, 255, 255, .18); }
.qv-acc-c__go a:not(.qv-btn):active { background: rgba(255, 255, 255, .22); }
.qv-acc-c__go .qv-ic { width: 18px; height: 18px; color: var(--qv-marker); }
.qv-acc-c a:focus-visible { outline: 3px solid var(--qv-marker); outline-offset: 2px; }

/* ---------- qonaq ---------- */
.qv-acc-c__gh { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; grid-gap: 12px; gap: 12px; }
.qv-acc-c__gh b { display: block; font-weight: 800; font-stretch: 84%; font-size: 1.125rem; line-height: 1.15; }
.qv-acc-c__gh small { display: block; margin-top: 4px; font-size: .8125rem; line-height: 1.4; color: var(--qv-soft); }
.qv-acc-c__go--auth { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; margin-top: 14px; }
.qv-acc-c__go--auth .qv-btn { min-height: 46px; padding: 0 10px; gap: 8px; }
.qv-acc-c__go--auth .qv-btn .qv-ic { color: inherit; }
.qv-acc-c__go--auth .qv-acc-c__reg { min-height: 46px; }

/* ---------- masaüstü: hesab düyməsinin açılan kartı ---------- */
.qv-accm, .qv-accm__pop { display: none; }
.qv-bar__acc .qv-ava--st svg { width: 52%; height: 52%; }
@media (min-width: 1024px) {
  .qv-accm { display: block; position: relative; }
  .qv-accm__pop {
    display: block; position: absolute; right: 0; top: 100%; z-index: 5; width: 348px; padding-top: 12px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s .12s, transform .22s var(--qv-ease) .12s, visibility 0s linear .34s;
  }
  .qv-accm__pop .qv-acc-c { margin: 0; box-shadow: 0 18px 48px rgba(10, 26, 59, .28), 0 2px 6px rgba(10, 26, 59, .14); }
  .qv-accm:focus-within .qv-accm__pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .qv-accm:focus-within .qv-acc-c__bar i { animation: qvAccGrow .9s var(--qv-ease) both .1s; }
  .qv-accm:focus-within .qv-bar__acc { background: var(--qv-mist); }
}
@media (min-width: 1024px) and (hover: hover) {
  .qv-accm:hover .qv-accm__pop { opacity: 1; visibility: visible; transform: none; transition-delay: .06s; }
  .qv-accm:hover .qv-acc-c__bar i { animation: qvAccGrow .9s var(--qv-ease) both .15s; }
  .qv-accm:hover .qv-bar__acc { background: var(--qv-mist); }
  .qv-accm:hover .qv-acc-c__b { animation: qvAccPop .5s var(--qv-pop) backwards; animation-delay: calc(var(--k, 0) * 45ms + .12s); }
}

/* dar telefon (≤359px): 5 rozet + «+N» bir sətrə sığsın, iki keçid yan-yana qalsın */
@media (max-width: 359px) {
  .qv-acc-c { padding-left: 12px; padding-right: 12px; }
  .qv-acc-c__hx { gap: 5px; }
  .qv-acc-c__b { width: 28px; height: 32px; }
  .qv-acc-c__b .qv-ic { width: 15px; height: 15px; }
  .qv-acc-c__go a:not(.qv-btn) { padding: 0 8px; font-size: .8125rem; }
  .qv-acc-c__go a:not(.qv-btn) .qv-ic { display: none; }
}