/* باشگاه مشتریان عمده — کارت پنل کاربری */
.wclub { margin: 16px 0 22px; padding: 18px 18px 16px; border-radius: 18px; background: linear-gradient(135deg, #fff8e8 0%, #fff 60%); border: 1px solid #f0d58a; box-shadow: 0 6px 24px rgba(180, 120, 20, .10); }
.wclub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wclub-tier { display: flex; align-items: center; gap: 12px; }
.wclub-glyph { width: 52px; height: 52px; display: grid; place-items: center; font-size: 28px; border-radius: 16px; background: #fff; border: 1px solid #f0d58a; box-shadow: 0 2px 8px rgba(180, 120, 20, .15); }
.wclub-tier small, .wclub-points small { display: block; color: #8a6a1f; font-size: .75rem; }
.wclub-tier strong { font-size: 1.15rem; color: #5b3d00; }
.wclub-points { text-align: left; }
.wclub-points b { font-size: 1.7rem; color: #92400e; line-height: 1; }
.wclub-progress { height: 9px; border-radius: 999px; background: #f6e7bf; margin: 14px 0 6px; overflow: hidden; }
.wclub-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f5b42e, #d97706); transition: width .6s ease; }
.wclub-next { margin: 0 0 8px; font-size: .85rem; color: #7a5200; }
.wclub-msg { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px dashed #f0d58a; font-size: .88rem; color: #5b3d00; }
.wclub-chart { margin: 8px 0 0; }
.wclub-chart figcaption { font-size: .8rem; color: #8a6a1f; margin-bottom: 4px; }
.wclub-chart svg { width: 100%; height: auto; max-height: 190px; direction: ltr; }
.wc-bar { fill: #f5b42e; opacity: .75; }
.wc-bar:hover { opacity: 1; }
.wc-line { fill: none; stroke: #15803d; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.wc-dot { fill: #15803d; stroke: #fff; stroke-width: 1.5; }
.wclub-legend { display: flex; gap: 14px; font-size: .72rem; color: #8a6a1f; margin-top: 2px; }
.wclub-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: -1px; }
.wclub-legend .lg-bar::before { background: #f5b42e; }
.wclub-legend .lg-line::before { background: #15803d; border-radius: 50%; }
.wclub-h { margin: 14px 0 6px; font-size: .95rem; color: #5b3d00; }
.wclub-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wclub-ex li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #f3e3b4; font-size: .85rem; }
.wclub-ex a { font-weight: 600; color: #1b5fd8; text-decoration: none; }
.wclub-ex b { color: #15803d; }
.wclub-ex small { color: #92400e; }
@media (max-width: 520px) { .wclub { padding: 14px; } .wclub-points b { font-size: 1.4rem; } }

/* ---- خوش‌آمد بعد از پرداخت: نشان و نمودار متحرک ---- */
.wclub-welcome { display: flex; align-items: center; gap: 14px; margin: -2px 0 14px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(120deg, #fff1c9, #fff8e8); border: 1px solid #f0d58a; }
.wclub-welcome h3 { margin: 0 0 2px; font-size: 1rem; color: #5b3d00; }
.wclub-welcome p { margin: 0; font-size: .85rem; color: #7a5a14; }
.wclub-emblem { flex: none; width: 56px; height: 56px; display: grid; place-items: center; font-size: 30px; border-radius: 50%; background: #fff; border: 1px solid #f0d58a; position: relative; }
.wclub-emblem::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(245, 180, 46, .55); }
.wclub-more { margin-top: 12px; }
.wclub-more summary { cursor: pointer; font-weight: 700; font-size: .9rem; color: #5b3d00; padding: 8px 0; }
.wclub-more .wclub-ex { margin-top: 6px; }
@keyframes wc-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes wc-pulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes wc-fill { from { width: 0; } }
@keyframes wc-grow { from { transform: scaleY(0); } }
@keyframes wc-draw { from { stroke-dashoffset: 1; } }
@keyframes wc-pop { from { transform: scale(0); } }
.wclub-anim .wclub-emblem { animation: wc-float 2.6s ease-in-out infinite; }
.wclub-anim .wclub-emblem::after { animation: wc-pulse 2s ease-out infinite; }
.wclub-anim .wclub-progress i { animation: wc-fill 1.8s cubic-bezier(.2, .7, .2, 1) .3s backwards; }
.wclub-anim .wc-bar { transform-box: fill-box; transform-origin: bottom; animation: wc-grow .8s ease-out backwards; animation-delay: calc(.4s + var(--i, 0) * .15s); }
.wclub-anim .wc-line { stroke-dasharray: 1; animation: wc-draw 1.4s ease-out .8s backwards; }
.wclub-anim .wc-dot { transform-box: fill-box; transform-origin: center; animation: wc-pop .4s ease-out backwards; animation-delay: calc(1.2s + var(--i, 0) * .15s); }
@media (prefers-reduced-motion: reduce) { .wclub-anim *, .wclub-anim *::after { animation: none !important; } }