/* ═══════════════════════════════════════════════════════════
   PREMIUM ANIMATIONS — Special, Useful & Attractive Layer
   Layered on top of visual-polish + existing structure.
   Performance-first: only transform + opacity. Spring + smooth easings.
   Fully respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════ */

:root {
  --anim-duration-fast: 220ms;
  --anim-duration-base: 420ms;
  --anim-duration-slow: 620ms;
}

/* ─── Global Reduced Motion Safety ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js-enhanced [data-aos],
  .premium-shine,
  .stat-number,
  .premium-launch-step-card,
  .hero-orbit {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ─── Enhanced Scroll Reveal System (data-aos) ─────────────── */
.js-enhanced [data-aos] {
  opacity: 0;
  transform: translateY(18px);
  will-change: transform, opacity;
}

.js-enhanced [data-aos].visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--anim-duration-base) var(--ease-smooth),
              transform var(--anim-duration-base) var(--ease-spring);
}

/* Variant: scale-in (great for icons / small cards) */
.js-enhanced [data-aos="scale-in"] {
  transform: scale(0.92) translateY(0);
}
.js-enhanced [data-aos="scale-in"].visible {
  transform: scale(1);
}

/* Variant: slide-in (RTL friendly from right) */
.js-enhanced [data-aos="slide-in"] {
  transform: translateX(26px);
}
.js-enhanced [data-aos="slide-in"].visible {
  transform: translateX(0);
}

/* Variant: fade (pure opacity, minimal motion) */
.js-enhanced [data-aos="fade"] {
  transform: none;
}
.js-enhanced [data-aos="fade"].visible {
  transform: none;
}

/* Stagger helpers for grids (used with data-stagger-children on parent) */
.js-enhanced [data-stagger-children] > * {
  transition-delay: 0ms;
}
.js-enhanced [data-stagger-children] > *:nth-child(1)  { transition-delay: 0ms; }
.js-enhanced [data-stagger-children] > *:nth-child(2)  { transition-delay: 65ms; }
.js-enhanced [data-stagger-children] > *:nth-child(3)  { transition-delay: 125ms; }
.js-enhanced [data-stagger-children] > *:nth-child(4)  { transition-delay: 185ms; }
.js-enhanced [data-stagger-children] > *:nth-child(5)  { transition-delay: 245ms; }
.js-enhanced [data-stagger-children] > *:nth-child(6)  { transition-delay: 295ms; }
.js-enhanced [data-stagger-children] > *:nth-child(7)  { transition-delay: 345ms; }
.js-enhanced [data-stagger-children] > *:nth-child(8)  { transition-delay: 385ms; }

/* ─── Premium Card Shine / Sweep Effect (special & attractive) ─ */
.premium-pricing-card,
.plan-card,
.feature-card,
.premium-compare-card,
.hero-value-card,
.stat-card {
  position: relative;
  overflow: hidden;
}

.premium-shine {
  position: absolute;
  inset: -40% -100%  -40% 200%;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,255,255,0.18) 35%,
    rgba(255,255,255,0.32) 48%,
    rgba(255,255,255,0.18) 62%,
    transparent 78%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
  transition: transform 900ms var(--ease-smooth), opacity 220ms ease;
  z-index: 1;
}

.premium-pricing-card:hover .premium-shine,
.plan-card:hover .premium-shine,
.feature-card:hover .premium-shine,
.premium-compare-card:hover .premium-shine {
  opacity: 1;
  transform: translateX(-280%);
  transition: transform 820ms cubic-bezier(0.22, 1, 0.3, 1), opacity 180ms ease;
}

/* Subtle active press state on primary CTAs */
.btn-primary:active {
  transform: scale(0.985);
  transition-duration: 80ms;
}

/* ─── Animated Number Counters (highly useful + trust building) ─ */
.stat-card strong,
.stat-number {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 1.8ch;
}

.stats-animated .stat-card.is-counted strong {
  animation: countPop 520ms var(--ease-spring) both;
}

@keyframes countPop {
  0%   { transform: scale(0.88); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ─── Hero Orbits & Floating Elements (special motion) ─────── */
.hero-orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(94, 163, 255, 0.18);
  pointer-events: none;
  animation: heroOrbitSpin 22s linear infinite;
}
.hero-orbit.orbit-two {
  animation-duration: 34s;
  animation-direction: reverse;
  border-color: rgba(68, 215, 182, 0.16);
}
@keyframes heroOrbitSpin {
  to { transform: rotate(360deg); }
}

.hero-floating-card {
  animation: floatGentle 6.5s ease-in-out infinite;
}
.hero-floating-card.card-secondary {
  animation-delay: -2.8s;
}
@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Subtle continuous pulse on key trust badges */
.pill-primary {
  animation: softPulse 4.2s ease-in-out infinite;
}
@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94, 163, 255, 0.0); }
  50% { box-shadow: 0 0 0 7px rgba(94, 163, 255, 0.07); }
}

/* ─── Enhanced FAQ Accordion (useful smooth motion) ────────── */
.faq-item .faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 380ms var(--ease-smooth),
              opacity 260ms ease,
              padding-top 220ms ease;
  padding-top: 0;
}

.faq-item.open .faq-answer {
  max-height: 420px; /* generous for long answers */
  opacity: 1;
  padding-top: 10px;
}

.faq-question .faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  transition: transform 280ms var(--ease-spring);
  font-weight: 700;
}

.faq-item.open .faq-question .faq-icon {
  transform: rotate(45deg);
}

/* Premium FAQ visual polish already in visual-polish; we only add motion here */

/* ─── Launch / Quick-start Steps (stagger + lift on detail) ─── */
.premium-launch-steps {
  counter-reset: step;
}
.premium-launch-step-card {
  transition: transform 280ms var(--ease-spring), box-shadow 280ms ease, border-color 200ms ease;
}
.premium-launch-step-card:hover {
  transform: translateY(-2px);
}
.js-enhanced .premium-launch-steps .premium-launch-step-card {
  opacity: 0;
  transform: translateY(14px);
}
.js-enhanced .premium-launch-steps .premium-launch-step-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Value Strip & Feature Pills (delightful entrance) ────── */
.hero-value-card,
.feature-pill {
  transition: transform 240ms var(--ease-spring), box-shadow 220ms ease;
}
.hero-value-strip:hover .hero-value-card {
  transform: translateY(-1px);
}
.feature-pill {
  position: relative;
}
.feature-pill:hover {
  transform: translateY(-1px) scale(1.01);
}

/* ─── Domain Result & Extensions (attractive result feedback) ─ */
.domain-result-card {
  transition: transform 360ms var(--ease-spring), box-shadow 280ms ease, border-color 220ms ease;
}
.domain-result-card.visible,
.js-enhanced .domain-result-card {
  animation: resultPop 520ms var(--ease-spring) both;
}
@keyframes resultPop {
  0% { transform: scale(0.96) translateY(8px); opacity: .6; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.domain-ext-card {
  transition: transform 260ms var(--ease-spring), box-shadow 240ms ease, border-color 200ms ease;
}
.domain-ext-card:hover {
  transform: translateY(-3px);
}
.js-enhanced .domain-extensions-grid .domain-ext-card {
  opacity: 0;
  transform: translateY(10px);
}
.js-enhanced .domain-extensions-grid .domain-ext-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Billing Toggle Price Morph (useful visual feedback) ──── */
.price-amount,
.price-display strong {
  transition: transform 160ms var(--ease-spring), opacity 120ms ease;
}

[data-plan-card].price-updating .price-amount {
  transform: scale(0.96);
  opacity: 0.65;
}

.year-switch-pop {
  animation: priceMorph 420ms var(--ease-spring);
}
@keyframes priceMorph {
  0%   { transform: translateY(3px) scale(0.96); opacity: .7; }
  50%  { transform: translateY(-2px) scale(1.03); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ─── Add-to-Cart / Purchase Micro Feedback (very useful) ──── */
.btn.is-success {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  border-color: #16a34a;
  color: white;
  transition: background 180ms ease, transform 140ms ease;
}
.btn.is-success::after {
  content: " ✓";
  font-weight: 700;
}

.card-purchase-form .btn.is-loading,
[data-checkout-submit].is-loading {
  pointer-events: none;
  opacity: .9;
}
.card-purchase-form .btn.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline-start: 8px;
  border: 2px solid rgba(255,255,255,0.7);
  border-top-color: transparent;
  border-radius: 50%;
  animation: btnSpin 620ms linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ─── Compare Sheet Entrance (already good, add polish) ────── */
.mobile-compare-sheet {
  transition: transform 420ms var(--ease-spring), opacity 280ms ease;
}
.mobile-compare-sheet.open {
  transform: translateY(0) !important;
}

/* ─── Section Lead & Badge Micro Animations ────────────────── */
.section-badge {
  transition: transform 300ms var(--ease-spring), box-shadow 300ms ease;
}
.js-enhanced .section-head .section-badge.visible {
  animation: badgeEnter 520ms var(--ease-spring) both;
}
@keyframes badgeEnter {
  0% { transform: translateY(6px) scale(0.9); }
  100% { transform: translateY(0) scale(1); }
}

/* ─── Sticky Purchase Panel Entrance (detail page) ─────────── */
.purchase-panel {
  transition: box-shadow 280ms ease, transform 420ms var(--ease-spring);
}
@media (min-width: 980px) {
  .js-enhanced .purchase-panel {
    transform: translateX(12px);
  }
  .js-enhanced .purchase-panel.visible {
    transform: translateX(0);
  }
}

/* ─── Product / Plan Detail Spec Icons Pop ─────────────────── */
.detail-stat .spec-icon {
  transition: transform 280ms var(--ease-spring), background 200ms ease;
}
.detail-stat:hover .spec-icon {
  transform: scale(1.06) rotate(1deg);
}

/* ─── Subtle Background Atmosphere on Key Pages ────────────── */
.page-home .home-hero::after,
.pricing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(94,163,255,0.035), transparent 55%);
  pointer-events: none;
  animation: ambientDrift 18s ease-in-out infinite;
  z-index: 0;
}
@keyframes ambientDrift {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(1.5%, 1%); }
}

/* ─── Utility: Gentle Focus Ring for Accessibility + Polish ── */
:focus-visible {
  outline: 2px solid rgba(94, 163, 255, 0.55);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Small polish on mobile compare toggle */
.premium-compare-toggle {
  transition: transform 180ms var(--ease-spring), box-shadow 180ms ease;
}
.premium-compare-toggle:active {
  transform: scale(0.985);
}

/* ─── Special: Primary Button Light Sweep (delight + emphasis) ─ */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -120%;
  width: 36%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.32),
    transparent
  );
  transform: skewX(-22deg);
  transition: left 620ms var(--ease-smooth);
  pointer-events: none;
}
.btn-primary:hover::after {
  left: 240%;
}

/* ─── Useful: Subtle "active service" pulse for always-available badges ─ */
.always-on-badge {
  animation: alwaysOnPulse 3.8s ease-in-out infinite;
}
@keyframes alwaysOnPulse {
  0%,100% { opacity: 1; }
  50% { opacity: .82; }
}

/* ─── Extra polish for proof cards on home (special entrance) ── */
.home-proof-card {
  transition: transform 300ms var(--ease-spring), box-shadow 280ms ease, border-color 220ms ease;
}
.home-proof-card .proof-icon {
  transition: transform 280ms var(--ease-spring);
}
.home-proof-card:hover .proof-icon {
  transform: scale(1.12) rotate(4deg);
}

/* ─── Dashboard / panel cards get same shine treatment if premium ─ */
.dashboard-card,
.panel.premium-panel {
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCTS LIVE FILTER BAR (new useful + attractive feature)
   ═══════════════════════════════════════════════════════════ */
.premium-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(19,31,56,0.92), rgba(12,22,39,0.88));
  border: 1px solid rgba(94,163,255,0.18);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.filter-search {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.filter-search input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border-radius: 12px;
  border: 1px solid rgba(94,163,255,0.2);
  background: rgba(8,14,26,0.7);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-search input:focus {
  border-color: rgba(94,163,255,0.45);
  box-shadow: 0 0 0 3px rgba(94,163,255,0.1);
  outline: none;
}

.filter-search .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
  font-size: 0.9rem;
}

.filter-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.filter-controls select {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(94,163,255,0.2);
  background: rgba(8,14,26,0.8);
  color: var(--text);
  font-size: 0.9rem;
  min-width: 130px;
}

#plan-reset {
  margin-inline-start: auto;
  font-size: 0.85rem;
}

/* Animated filter results */
.pricing-card {
  transition: opacity 280ms var(--ease-smooth),
              transform 320ms var(--ease-spring),
              box-shadow 220ms ease;
  will-change: transform, opacity;
}

.pricing-card.filtered-out {
  opacity: 0 !important;
  transform: scale(0.96) translateY(6px) !important;
  pointer-events: none;
}

/* Empty filter state */
#plans-grid.no-results::after {
  content: "هیچ پلنی با این معیارها پیدا نشد. فیلترها را تغییر دهید.";
  display: block;
  grid-column: 1 / -1;
  padding: 32px;
  text-align: center;
  color: var(--muted);
  background: rgba(15,26,47,0.4);
  border-radius: 14px;
  font-size: 0.95rem;
}

/* Dashboard polish + animated elements */
.dashboard-stats-grid .stat-card,
.dashboard-summary-grid .dashboard-summary-card {
  transition: transform 260ms var(--ease-spring), box-shadow 220ms ease, border-color 200ms ease;
}

.dashboard-stats-grid .stat-card:hover,
.dashboard-summary-grid .dashboard-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(2, 8, 23, 0.18);
}

.dashboard-quick-card {
  transition: transform 240ms var(--ease-spring), box-shadow 200ms ease, border-color 180ms ease;
}

.dashboard-quick-card:hover {
  transform: translateY(-3px) scale(1.005);
  border-color: rgba(94,163,255,0.3);
}

.status-badge {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.status-badge:hover {
  transform: scale(1.03);
}

/* Cart item nice feedback */
.order-item.dashboard-rich-item {
  transition: box-shadow 200ms ease, border-color 180ms ease;
}

.cart-item-form select,
.cart-item-form input {
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.cart-item-form select:focus,
.cart-item-form input:focus {
  border-color: rgba(94,163,255,0.4);
  box-shadow: 0 0 0 2px rgba(94,163,255,0.1);
}

/* Auth forms nicer focus states */
.field-group.field-focused {
  transform: translateY(-1px);
}

.modern-auth-card {
  transition: box-shadow 280ms ease, transform 280ms ease;
}

.modern-auth-card:focus-within {
  box-shadow: 0 24px 60px rgba(2,8,23,0.22);
}

/* Checkout progress and method selection */
.checkout-progress {
  font-family: monospace;
  letter-spacing: 0.5px;
}

.payment-method-option {
  transition: transform 180ms var(--ease-spring), box-shadow 200ms ease, border-color 180ms ease;
}

.payment-method-option.payment-method-active {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(94,163,255,0.15);
}

.premium-checkout-progress .step {
  transition: color 200ms ease, transform 180ms ease;
}

.premium-checkout-progress .step.active {
  color: var(--primary);
  font-weight: 600;
}

.premium-checkout-progress .arrow {
  opacity: 0.5;
  margin: 0 6px;
}

/* Empty states more inviting */
.empty-state {
  transition: opacity 300ms ease;
}

/* ═══════════════════════════════════════════════════════════
   ITERATION: Live Cart + Dashboard + Filter Polish + Special Useful Animations
   (Layered on top; reuses existing --ease-*, reduced-motion, data-* patterns)
   Focus: useful feedback (totals, status, results), trust (counters/morphs),
   appeal (staggers, entrances, subtle progress).
   ═══════════════════════════════════════════════════════════ */

/* --- Live cart updates (optimistic totals + item feedback) --- */
[data-cart-total],
.money-value,
strong[data-plan-price] {
  transition: transform 160ms var(--ease-spring), opacity 120ms ease, color 180ms ease;
}

.cart-updating [data-cart-total],
.cart-updating .money-value {
  transform: scale(0.97);
  opacity: 0.75;
}

.order-item.dashboard-rich-item.updating {
  box-shadow: 0 0 0 1px rgba(94, 163, 255, 0.3);
  transition: box-shadow 180ms ease;
}

.cart-item-updating {
  transition: opacity 180ms ease, transform 180ms ease;
}
.cart-item-updating {
  opacity: 0.85;
  transform: scale(0.995);
}

/* Money / value morph (generalizes existing priceMorph for cart/dashboard) */
.money-morph {
  animation: moneyMorph 380ms var(--ease-spring);
}
@keyframes moneyMorph {
  0%   { transform: translateY(2px) scale(0.96); opacity: .65; }
  55%  { transform: translateY(-1px) scale(1.02); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* --- Dashboard deeper polish (counters, quick cards, lists) --- */
.dashboard-highlight-panel {
  transition: box-shadow 220ms ease, transform 220ms var(--ease-spring);
}
.dashboard-highlight-panel:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(2, 8, 23, 0.16);
}

.dashboard-note-card {
  transition: border-color 180ms ease, transform 160ms ease;
}
.dashboard-note-card:hover {
  transform: translateX(-1px);
}

/* --- Status / order transitions (useful visual state changes) --- */
.status-badge.status-transition,
.status-badge[data-order-status] {
  transition: background-color 280ms ease, color 280ms ease, transform 180ms var(--ease-spring), box-shadow 180ms ease;
}
.status-badge.status-transition.active,
.status-badge[data-order-status="active"] {
  animation: statusActivePulse 2.4s ease-in-out infinite;
}
@keyframes statusActivePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
  50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12); }
}

/* Subtle progress / step fill (launch steps + order status useful guidance) */
.premium-launch-step-card .step-visual,
.status-progress {
  position: relative;
}
.premium-launch-step-card .step-visual::after,
.status-progress::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(94,163,255,0.12), transparent);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.premium-launch-step-card.is-active .step-visual::after,
.status-progress.is-active::after {
  opacity: 1;
  animation: stepProgress 1.6s ease-in-out;
}
@keyframes stepProgress {
  0% { transform: translateX(-30%); }
  100% { transform: translateX(0); }
}

/* --- Products filter result count + no-results polish --- */
.filter-result-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 0.8rem;
  border-radius: 999px;
  background: rgba(94,163,255,0.1);
  color: var(--primary);
  border: 1px solid rgba(94,163,255,0.2);
  margin-inline-start: 8px;
  white-space: nowrap;
  transition: transform 220ms var(--ease-spring), opacity 160ms ease;
}
.filter-result-count.visible {
  animation: badgeEnter 420ms var(--ease-spring) both;
}

#plans-grid .empty-state[data-empty-state] {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms var(--ease-smooth), transform 320ms var(--ease-spring);
}
#plans-grid .empty-state[data-empty-state].visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Empty state entrances (useful + inviting across site) --- */
.empty-state.visible,
.empty-state[data-aos].visible {
  animation: emptyEnter 380ms var(--ease-spring) both;
}
@keyframes emptyEnter {
  from { opacity: 0.6; transform: scale(0.98) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Auth / form submit + value consistency --- */
.modern-form button[type="submit"].is-loading {
  position: relative;
  pointer-events: none;
}
.modern-form button[type="submit"].is-loading::after {
  content: "";
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin 620ms linear infinite;
}

/* --- Extra dashboard / cart summary money polish --- */
strong[data-cart-total] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* Ensure all new motion respects global reduced-motion (already covered by top rule) */

/* ═══════════════════════════════════════════════════════════
   CONTINUATION ROUND: More special useful animations & polish
   - Animated order status timeline (useful guidance in detail)
   - Smooth testimonials rotator (special appeal on home)
   - Chat widget entrance + micro (delight + presence)
   - Success particles (light celebration on actions)
   - Extra ticket/wallet row & form polish
   All layered, performant, reduced-motion safe.
   ═══════════════════════════════════════════════════════════ */

/* --- Order status timeline (special + very useful for tracking) --- */
.order-timeline {
  display: flex;
  gap: 8px;
  margin: 16px 0;
  position: relative;
}
.order-timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  height: 3px;
  background: rgba(94,163,255,0.15);
  z-index: 0;
}
.timeline-step {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: transform 200ms var(--ease-spring);
}
.timeline-step .step-dot {
  width: 28px;
  height: 28px;
  margin: 0 auto 6px;
  border-radius: 999px;
  background: #0f172a;
  border: 3px solid rgba(94,163,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--muted);
  transition: border-color 280ms ease, background 280ms ease, transform 200ms var(--ease-spring);
}
.timeline-step .step-label {
  font-size: 0.75rem;
  color: var(--muted);
  transition: color 200ms ease;
}
.timeline-step.is-current .step-dot {
  border-color: var(--primary);
  background: rgba(94,163,255,0.1);
  transform: scale(1.1);
  color: var(--primary);
}
.timeline-step.is-current .step-label {
  color: var(--text);
  font-weight: 600;
}
.timeline-step.is-complete .step-dot {
  border-color: #22c55e;
  background: rgba(34,197,94,0.1);
}
.timeline-step.is-complete .step-dot::after {
  content: "✓";
  color: #22c55e;
  font-size: 0.8rem;
}

/* --- Testimonials smooth rotator (special visitor delight) --- */
.testimonials-slider {
  position: relative;
  overflow: hidden;
}
.testimonials-track {
  display: flex;
  transition: transform 520ms var(--ease-spring);
}
.testimonials-track .testimonial {
  flex: 0 0 100%;
  padding-inline: 4px;
  box-sizing: border-box;
}
.testimonials-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.testimonials-controls button {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(94,163,255,0.25);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 180ms ease;
}
.testimonials-controls button:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: scale(1.1);
}
.testimonials-controls button.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* --- Chat widget special entrance & micro (appeal) --- */
.hostiny-chat-widget {
  transition: transform 300ms var(--ease-spring), opacity 200ms ease;
}
.hostiny-chat-launcher {
  transition: transform 220ms var(--ease-spring), box-shadow 220ms ease;
}
.hostiny-chat-launcher:hover {
  transform: scale(1.08) rotate(4deg);
  box-shadow: 0 8px 24px rgba(94,163,255,0.3);
}
.hostiny-chat-panel {
  animation: chatPanelIn 380ms var(--ease-spring) backwards;
}
@keyframes chatPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hostiny-chat-launcher.open {
  transform: scale(0.95) rotate(-8deg);
}

/* --- Subtle success particles (light special celebration) --- */
.success-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}
.particle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #22c55e;
  border-radius: 50%;
  animation: particleFly 900ms ease-out forwards;
  opacity: 0.85;
}
@keyframes particleFly {
  0% { transform: translate(0,0) scale(1); opacity: 0.85; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.4); opacity: 0; }
}

/* --- Extra tickets/wallet row polish --- */
.ticket-row, .transaction-row {
  transition: transform 180ms var(--ease-spring), box-shadow 180ms ease;
}
.ticket-row:hover, .transaction-row:hover {
  transform: translateX(-2px);
}
.dashboard-fullwidth-form input:focus,
.dashboard-fullwidth-form textarea:focus,
.dashboard-fullwidth-form select:focus {
  border-color: rgba(94,163,255,0.4);
  box-shadow: 0 0 0 3px rgba(94,163,255,0.08);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

/* --- Animated progress bars (special useful for usage/monitoring in panel & dashboard) --- */
.usage-bar, .progress-bar {
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.usage-fill, .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 999px;
  width: 0; /* start from 0 for animation */
  transition: width 1200ms var(--ease-spring);
  position: relative;
}
.usage-fill.animated, .progress-fill.animated {
  width: var(--target-width, 0%);
}
.usage-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; bottom: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: progressShine 1.8s infinite;
}
@keyframes progressShine {
  0% { left: -100%; }
  50%,100% { left: 200%; }
}

/* Copy success special (for configs, access info) */
.copy-btn.is-copied {
  background: #22c55e !important;
  color: white;
  transition: all 200ms ease;
}
.copy-btn.is-copied::after {
  content: ' ✓ کپی شد';
  margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════
   SPECIAL ANIMATIONS LAYER — Useful + Attractive (2026 continuation)
   Pure additive. Performance: transform/opacity/scale only.
   Reuses --ease-spring, --ease-smooth, data-aos, .premium-*.
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. Hero Infrastructure Mesh (special memorable visual for home) ─── */
.home-hero .hero-logo-stage {
  position: relative;
}
.hero-mesh {
  position: absolute;
  inset: 8% 12%;
  z-index: 0;
  pointer-events: none;
  opacity: .65;
}
.hero-mesh .mesh-node {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(94,163,255,.65);
  box-shadow: 0 0 0 3px rgba(94,163,255,.12);
  animation: meshNodePulse 3.8s ease-in-out infinite;
}
.hero-mesh .mesh-node:nth-child(2) { left: 18%; top: 22%; animation-delay: -1.1s; }
.hero-mesh .mesh-node:nth-child(3) { left: 72%; top: 18%; animation-delay: -2.3s; width: 4px; height: 4px; }
.hero-mesh .mesh-node:nth-child(4) { left: 28%; top: 68%; animation-delay: -0.6s; }
.hero-mesh .mesh-node:nth-child(5) { left: 78%; top: 62%; animation-delay: -3.1s; width: 6px; height: 6px; }
.hero-mesh .mesh-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(94,163,255,.22), transparent);
  height: 1px;
  border-radius: 1px;
  animation: meshLineFlow 5.5s linear infinite;
}
.hero-mesh .mesh-line:nth-child(6) { left: 12%; top: 24%; width: 62%; transform: rotate(12deg); animation-delay: -1.8s; }
.hero-mesh .mesh-line:nth-child(7) { left: 22%; top: 64%; width: 54%; transform: rotate(-18deg); animation-delay: -4.2s; }

@keyframes meshNodePulse {
  0%,100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.6); opacity: .95; }
}
@keyframes meshLineFlow {
  0% { opacity: .15; }
  45% { opacity: .55; }
  100% { opacity: .15; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mesh, .hero-mesh * { animation: none !important; opacity: .2; }
}

/* ─── 2. Resource Meters (special + very useful on all pricing cards) ─── */
.resource-item {
  position: relative;
}
.resource-item .resource-meter {
  position: absolute;
  bottom: 2px;
  left: 10px;
  right: 10px;
  height: 2.5px;
  background: rgba(94,163,255,.12);
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
}
.resource-item .resource-meter > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: inherit;
  transition: width 820ms var(--ease-spring);
  will-change: width;
}
.js-enhanced .pricing-card.visible .resource-item .resource-meter > i,
.js-enhanced .premium-pricing-card.visible .resource-item .resource-meter > i,
[data-stagger-children] .resource-item .resource-meter > i {
  width: var(--meter-w, 78%);
}
.resource-item:nth-child(1) .resource-meter > i { --meter-w: 86%; }
.resource-item:nth-child(2) .resource-meter > i { --meter-w: 74%; }
.resource-item:nth-child(3) .resource-meter > i { --meter-w: 81%; }
.resource-item:nth-child(4) .resource-meter > i { --meter-w: 67%; }

@media (prefers-reduced-motion: reduce) {
  .resource-item .resource-meter > i { transition: none; width: var(--meter-w, 78%) !important; }
}

/* ─── 3. Add-to-Cart Success + Header Cart Pop (highly useful feedback) ─── */
.btn.is-success {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  border-color: #15803d;
  color: #fff;
  transition: transform 140ms var(--ease-spring), background 180ms ease;
}
.cart-chip {
  transition: transform 160ms var(--ease-spring), box-shadow 160ms ease, background 160ms ease;
}
.cart-chip.pop {
  animation: cartPop 520ms var(--ease-spring);
}
@keyframes cartPop {
  0% { transform: scale(0.86); }
  35% { transform: scale(1.18); }
  65% { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.cart-chip span {
  transition: transform 120ms var(--ease-spring), color 120ms ease;
}
.cart-chip.pop span {
  transform: scale(1.25);
}

/* ─── 4. Value / Money Morph + Enhanced Counters (trust + polish) ─── */
[data-morph-value],
strong[data-target] {
  transition: transform 160ms var(--ease-spring), opacity 120ms ease;
}
.money-morph,
.is-counted strong,
.stat-card.is-counted strong {
  animation: moneyMorph 420ms var(--ease-spring) both;
}
@keyframes moneyMorph {
  0% { transform: translateY(3px) scale(0.94); opacity: .6; }
  45% { transform: translateY(-1px) scale(1.035); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ─── 5. Product Detail Spec Icons + Use Cases (special scan/active) ─── */
.detail-stat .spec-icon {
  transition: transform 260ms var(--ease-spring), box-shadow 200ms ease, background 200ms ease;
}
.detail-stat:hover .spec-icon,
.detail-stat:focus-within .spec-icon {
  transform: scale(1.08) rotate(3deg);
  box-shadow: 0 0 0 3px rgba(94,163,255,.15);
}
.detail-stat .spec-icon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 10px;
  border: 1px solid rgba(94,163,255,.0);
  transition: border-color 320ms ease;
  pointer-events: none;
}
.detail-stat:hover .spec-icon::after {
  border-color: rgba(94,163,255,.28);
}

.use-case-card {
  transition: transform 280ms var(--ease-spring), box-shadow 220ms ease;
}
.use-case-card .use-case-icon {
  transition: transform 260ms var(--ease-spring);
}
.use-case-card:hover .use-case-icon {
  transform: scale(1.1) rotate(-2deg);
}

/* ─── 6. Thin Global Scroll Progress (subtle quality signal) ─── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  z-index: 100;
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 80ms linear;
  pointer-events: none;
  will-change: transform;
}
.scroll-progress.visible {
  opacity: .9;
}

/* ─── 7. Domain Result + Ext Cards Stronger Pop (useful delight) ─── */
.domain-result-card.available {
  box-shadow: 0 0 0 1px rgba(34,197,94,.25), var(--shadow);
}
.domain-result-card.available .status-success {
  animation: softPulse 2.4s ease-in-out infinite;
}
.domain-ext-card {
  transition: transform 240ms var(--ease-spring), box-shadow 200ms ease, border-color 160ms ease;
}
.domain-ext-card:hover {
  transform: translateY(-3px);
  border-color: rgba(94,163,255,.3);
}

/* ─── 8. Dashboard Money + Status Polish (retention appeal) ─── */
.dashboard-stats-grid .stat-card strong[data-morph-value] {
  font-variant-numeric: tabular-nums;
}
.status-badge.status-transition,
.status-badge[data-order-status] {
  transition: background-color 260ms ease, color 260ms ease, box-shadow 200ms ease, transform 160ms var(--ease-spring);
}
.status-badge.status-transition.active,
.status-badge[data-order-status="active"] {
  animation: statusActivePulse 2.6s ease-in-out infinite;
}
@keyframes statusActivePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,.12); }
}
.dashboard-quick-card {
  transition: transform 220ms var(--ease-spring), box-shadow 200ms ease, border-color 160ms ease;
}
.dashboard-quick-card:hover {
  transform: translateY(-2px) scale(1.005);
}

/* ─── 9. Global micro: stronger existing sweeps + empty + focus (perceived quality) ─── */
.btn-primary:hover::after {
  transition-duration: 480ms;
}
.empty-state.visible,
.empty-state[data-empty-state].visible {
  animation: emptyEnter 360ms var(--ease-spring) both;
}
.field-group.field-focused {
  transform: translateY(-1px);
}

/* Mobile / reduced motion safety for all new */
@media (max-width: 768px) {
  .hero-mesh { opacity: .45; }
  .resource-item .resource-meter { height: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mesh, .hero-mesh *, .resource-item .resource-meter > i,
  .cart-chip.pop, .money-morph, .use-case-card, .domain-ext-card,
  .scroll-progress, .status-badge.status-transition {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .detail-stat:hover .spec-icon { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   CONTINUATION LAYER — Dashboard & Panel Management Polish + Special Animations
   Useful for logged-in users: order/ticket status, wallet, actions, config/monitoring cards.
   Additive, reuses existing patterns.
   ═══════════════════════════════════════════════════════════ */

/* --- Dashboard management surfaces (orders, tickets, wallet, cart, checkout) --- */
.dashboard-rich-item,
.ticket-row,
.transaction-row,
.order-item.dashboard-rich-item {
  transition: transform 260ms var(--ease-spring), box-shadow 220ms ease, border-color 180ms ease;
}
.dashboard-rich-item:hover,
.ticket-row:hover,
.transaction-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(2,8,23,0.14);
}

.order-status-banner {
  transition: transform 280ms var(--ease-spring), box-shadow 200ms ease;
}
.order-status-banner:hover {
  transform: translateX(3px);
}

/* Nice animated status stepper / timeline feel (order detail + general) */
.status-step {
  transition: color 200ms ease, transform 200ms var(--ease-spring);
}
.status-step.active {
  color: var(--primary);
  font-weight: 600;
  transform: translateY(-1px);
}
.status-step.completed::after {
  content: "✓";
  margin-inline-start: 6px;
  color: #22c55e;
}

/* Wallet / money specific polish */
.dashboard-balance-chip {
  transition: transform 160ms var(--ease-spring), box-shadow 160ms ease;
}
.dashboard-balance-chip:hover {
  transform: scale(1.03);
}
.transaction-row .status-badge {
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.transaction-row:hover .status-badge {
  transform: scale(1.05);
}

/* Cart / checkout action feedback */
[data-cart-items] .dashboard-rich-item.updating {
  opacity: 0.75;
  transform: scale(0.985);
}
.cart-item-form button[type="submit"] {
  transition: transform 120ms ease;
}
.cart-item-form button[type="submit"]:active {
  transform: scale(0.96);
}

/* --- Panel / Management (configs, servers, monitoring) special useful animations --- */
.panel-card,
.server-card,
.config-card,
.monitor-card {
  transition: transform 260ms var(--ease-spring), box-shadow 220ms ease, border-color 160ms ease;
}

/* ═══════════════════════════════════════════════════════════
   PAYMENT SYSTEM SPECIAL POLISH & ANIMATIONS (useful + attractive frontend)
   Focus: card-to-card + zibal flows. Clear instructions, trust, feedback.
   Layered on existing dashboard/payment classes (modern-payment-container, payment-panel, etc.).
   Useful: countdown, copy feedback, status morph, form loading.
   Attractive: subtle pulses, lifts, success flashes, step reveals.
   ═══════════════════════════════════════════════════════════ */

/* Payment panels enhanced hover/lift (professional depth) */
.payment-panel {
  transition: transform 260ms var(--ease-spring), box-shadow 220ms ease, border-color 160ms ease;
}
.payment-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(2, 8, 23, 0.14);
}

/* Card number copy special (useful for manual payment) */
.card-number-display {
  position: relative;
}
.btn-copy {
  transition: transform 160ms var(--ease-spring), background 160ms ease, color 160ms ease;
}
.btn-copy:hover {
  transform: scale(1.05);
}
.btn-copy.is-copied {
  background: #22c55e !important;
  color: white;
  border-color: #16a34a;
}
.card-number-text {
  font-family: monospace;
  letter-spacing: 1px;
  transition: color 200ms ease;
}
.btn-copy.is-copied ~ .card-number-text {
  color: #22c55e;
}

/* Auto-verify steps (useful guided checklist with sequential feel) */
.auto-verify-steps li {
  transition: transform 200ms var(--ease-spring), color 160ms ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.auto-verify-steps li:hover {
  transform: translateX(4px);
  color: var(--primary);
}
.auto-verify-steps li svg {
  flex-shrink: 0;
  transition: stroke 160ms ease;
}
.auto-verify-steps li:hover svg {
  stroke: var(--primary);
}

/* Status indicator special (attractive trust signal) */
.payment-status-indicator .status-icon {
  transition: transform 300ms var(--ease-spring), box-shadow 200ms ease;
}
.payment-status-indicator .status-icon-pending {
  animation: pendingPulse 2.8s ease-in-out infinite;
}
@keyframes pendingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(234, 179, 8, 0); }
}
.payment-status-indicator:hover .status-icon {
  transform: scale(1.08);
}

/* Countdown / deadline (useful urgency + visual warning) */
.payment-countdown, .summary-value[data-deadline] {
  font-variant-numeric: tabular-nums;
  transition: color 200ms ease, transform 160ms ease;
}
.payment-countdown.warning, .summary-value.warning {
  color: #ef4444;
  animation: urgencyFlash 1.2s ease-in-out infinite;
}
@keyframes urgencyFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Confirm payment button special (effective CTA feedback) */
.payment-summary-sidebar .btn-primary {
  position: relative;
  overflow: hidden;
}
.payment-summary-sidebar .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-100%);
  transition: transform 600ms var(--ease-smooth);
}
.payment-summary-sidebar .btn-primary:hover::after {
  transform: translateX(200%);
}
.payment-summary-sidebar .btn-primary.is-loading {
  pointer-events: none;
  opacity: 0.85;
}
.payment-summary-sidebar .btn-primary.is-loading::after {
  animation: btnSpin 800ms linear infinite;
}

/* Success / confirmed state flash (delight + confirmation) */
.payment-panel.confirmed, .status-badge.status-confirmed {
  animation: paymentSuccessFlash 1200ms var(--ease-spring);
}
@keyframes paymentSuccessFlash {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Zibal redirect polish (smooth transition feel) */
#onlineGatewayLink {
  transition: transform 160ms var(--ease-spring), box-shadow 160ms ease;
}
#onlineGatewayLink:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(94, 163, 255, 0.3);
}
#onlineGatewayLink:active {
  transform: scale(0.985);
}

/* Payment expiry modal (useful clear warning) */
.payment-expiry-modal__dialog {
  animation: modalPop 420ms var(--ease-spring);
}
@keyframes modalPop {
  0% { transform: scale(0.9) translateY(10px); opacity: 0.6; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Mobile refinements for payment (responsive appeal) */
@media (max-width: 768px) {
  .payment-panel {
    padding: 16px;
  }
  .card-number-display {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .auto-verify-steps li {
    font-size: 0.9rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   PAYMENT FRONTEND PROFESSIONAL POLISH (layered, special useful animations)
   Focus: card-to-card + zibal. Clear hierarchy, trust signals, delightful feedback.
   Builds on existing .payment-panel, .modern-payment-container, .payment-hero-section etc.
   Useful: visual countdown, copy success, status transitions, loading states.
   Attractive: subtle pulses, lifts, morphs, success flashes without clutter.
   ═══════════════════════════════════════════════════════════ */

/* Enhanced payment panels (professional depth + hover delight) */
.payment-panel {
  border: 1px solid rgba(94, 163, 255, 0.15);
  background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(15,26,47,0.95));
  border-radius: 16px;
  padding: 20px;
  transition: transform 260ms var(--ease-spring), box-shadow 220ms ease, border-color 160ms ease;
}
.payment-panel:hover {
  transform: translateY(-2px);
  border-color: rgba(94, 163, 255, 0.35);
  box-shadow: 0 12px 32px rgba(2, 8, 23, 0.2);
}

/* Card number + copy (highly useful for manual wire transfer) */
.card-number-display {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 26, 47, 0.6);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(94, 163, 255, 0.2);
}
.card-number-text {
  font-family: 'Vazirmatn', monospace;
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: #e2e8f0;
  flex: 1;
  transition: color 200ms ease;
}
.btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  border: 1px solid rgba(94, 163, 255, 0.3);
  border-radius: 8px;
  background: transparent;
  color: #5ea3ff;
  cursor: pointer;
  transition: all 180ms var(--ease-spring);
}
.btn-copy:hover {
  background: rgba(94, 163, 255, 0.15);
  border-color: #5ea3ff;
  transform: translateY(-1px);
}
.btn-copy.is-copied {
  background: #166534;
  border-color: #22c55e;
  color: #22c55e;
}
.btn-copy.is-copied .card-number-text {
  color: #22c55e;
}

/* Auto-verify steps (useful guided checklist with micro animation) */
.auto-verify-steps {
  list-style: none;
  padding: 0;
  margin: 0;
}
.auto-verify-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(94, 163, 255, 0.1);
  transition: transform 160ms ease, color 160ms ease;
}
.auto-verify-steps li:last-child {
  border-bottom: none;
}
.auto-verify-steps li:hover {
  transform: translateX(4px);
  color: #e2e8f0;
}
.auto-verify-steps li svg {
  margin-top: 2px;
  flex-shrink: 0;
  color: #22c55e;
}

/* Status indicator + countdown (attractive trust + urgency) */
.payment-status-indicator .status-icon {
  transition: transform 300ms var(--ease-spring), box-shadow 200ms ease;
}
.payment-status-indicator .status-icon-pending {
  animation: paymentPendingPulse 2.6s ease-in-out infinite;
}
@keyframes paymentPendingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.25); }
  50% { box-shadow: 0 0 0 10px rgba(234, 179, 8, 0); }
}
.payment-status-indicator:hover .status-icon {
  transform: scale(1.08);
}

.payment-countdown, .summary-value[data-deadline] {
  font-variant-numeric: tabular-nums;
  transition: color 200ms ease, transform 140ms ease;
}
.payment-countdown.warning, .summary-value.warning {
  color: #ef4444;
  animation: urgencyPulse 1.4s ease-in-out infinite;
}
@keyframes urgencyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* Confirm payment CTA (effective action feedback) */
.payment-summary-sidebar .btn-primary {
  position: relative;
  overflow: hidden;
}
.payment-summary-sidebar .btn-primary::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 650ms var(--ease-smooth);
}
.payment-summary-sidebar .btn-primary:hover::after {
  left: 250%;
}
.payment-summary-sidebar .btn-primary.is-loading {
  pointer-events: none;
  opacity: 0.9;
}
.payment-summary-sidebar .btn-primary.is-loading::after {
  animation: paymentBtnSpin 900ms linear infinite;
}
@keyframes paymentBtnSpin {
  to { transform: rotate(360deg); }
}

/* Success / confirmed flash (delightful confirmation) */
.payment-panel.confirmed,
.status-badge.status-confirmed {
  animation: paymentConfirmedFlash 1400ms var(--ease-spring);
}
@keyframes paymentConfirmedFlash {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
  70% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Zibal / online gateway polish (smooth transition) */
#onlineGatewayLink {
  position: relative;
  overflow: hidden;
  transition: transform 180ms var(--ease-spring), box-shadow 180ms ease;
}
#onlineGatewayLink:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(94, 163, 255, 0.35);
}
#onlineGatewayLink::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
  transition: transform 500ms ease;
}
#onlineGatewayLink:hover::after {
  transform: translateX(250%);
}

/* Payment expiry modal (clear urgent feedback) */
.payment-expiry-modal__dialog {
  animation: paymentModalPop 420ms var(--ease-spring);
  border: 1px solid rgba(239, 68, 68, 0.3);
}
@keyframes paymentModalPop {
  0% { transform: scale(0.92) translateY(12px); opacity: 0.7; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Checkout payment method options (consistent with payment page) */
.premium-payment-methods .premium-method-option {
  transition: transform 180ms var(--ease-spring), box-shadow 180ms ease, border-color 160ms ease;
}
.premium-payment-methods .premium-method-option:hover {
  transform: translateY(-1px);
}
.premium-payment-methods .payment-method-active {
  border-color: #5ea3ff;
  box-shadow: 0 6px 20px rgba(94, 163, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════
   PAYMENT FRONTEND DEEP POLISH - Professional Design & Special Animations
   (Continuation - layered on existing .payment-panel, .modern-payment-container etc.)
   Focus: better visual hierarchy, trust signals, delightful micro-interactions.
   Useful: immediate feedback, clear guidance, reduce payment anxiety.
   Attractive: premium cards, smooth transitions, subtle "wow" without clutter.
   ═══════════════════════════════════════════════════════════ */

/* Stronger payment cards with glass + depth (professional look) */
.payment-panel {
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(15,26,47,0.92));
  border: 1px solid rgba(94,163,255,0.18);
  box-shadow: 0 8px 32px rgba(2,8,23,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  transition: transform 280ms var(--ease-spring), box-shadow 220ms ease, border-color 160ms ease;
}
.payment-panel:hover {
  transform: translateY(-4px);
  border-color: rgba(94,163,255,0.4);
  box-shadow: 0 16px 48px rgba(2,8,23,0.3);
}

/* Card number display - more prominent and copy-friendly */
.card-number-display {
  background: rgba(15,26,47,0.7);
  border: 2px dashed rgba(94,163,255,0.35);
  padding: 14px 18px;
  border-radius: 12px;
  font-family: monospace;
  font-size: 1.15rem;
  letter-spacing: 3px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}
.card-number-text {
  flex: 1;
  color: #e2e8f0;
  transition: color 200ms ease;
}
.btn-copy {
  padding: 6px 14px;
  font-size: 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(94,163,255,0.4);
  background: rgba(94,163,255,0.1);
  color: #5ea3ff;
  cursor: pointer;
  transition: all 180ms var(--ease-spring);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-copy:hover {
  background: #5ea3ff;
  color: #0f172a;
  border-color: #5ea3ff;
  transform: translateY(-1px);
}
.btn-copy.is-copied {
  background: #166534;
  color: #22c55e;
  border-color: #22c55e;
}

/* Auto-verify steps - better visual list with check animation */
.auto-verify-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.auto-verify-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(94,163,255,0.12);
  transition: all 180ms ease;
}
.auto-verify-steps li:last-child {
  border-bottom: none;
}
.auto-verify-steps li svg {
  color: #22c55e;
  flex-shrink: 0;
  margin-top: 2px;
}
.auto-verify-steps li:hover {
  transform: translateX(3px);
  color: #e2e8f0;
}

/* Payment progress stepper (special + very useful for user orientation) */
.payment-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 20px;
  position: relative;
}
.payment-progress::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  height: 3px;
  background: rgba(94,163,255,0.2);
  z-index: 0;
  border-radius: 2px;
}
.payment-progress-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--muted);
  transition: all 200ms var(--ease-spring);
}
.payment-progress-step .step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0f172a;
  border: 3px solid rgba(94,163,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
  transition: all 200ms ease;
}
.payment-progress-step.active .step-dot {
  border-color: #5ea3ff;
  background: rgba(94,163,255,0.15);
  color: #5ea3ff;
  transform: scale(1.1);
  box-shadow: 0 0 0 4px rgba(94,163,255,0.1);
}
.payment-progress-step.active {
  color: #e2e8f0;
  font-weight: 600;
}
.payment-progress-step .step-label {
  white-space: nowrap;
  text-align: center;
}

/* Countdown / deadline urgency (very useful visual warning) */
.payment-countdown,
.summary-value[data-deadline] {
  font-variant-numeric: tabular-nums;
  transition: color 200ms ease, transform 140ms ease;
}
.payment-countdown.warning,
.summary-value.warning {
  color: #ef4444;
  animation: urgencyPulse 1.3s ease-in-out infinite;
}
@keyframes urgencyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Confirm deposit button - strong CTA with special shine + loading */
.payment-summary-sidebar .btn-primary {
  position: relative;
  overflow: hidden;
  font-weight: 600;
}
.payment-summary-sidebar .btn-primary::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -120%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 620ms var(--ease-smooth);
}
.payment-summary-sidebar .btn-primary:hover::after {
  left: 260%;
}
.payment-summary-sidebar .btn-primary.is-loading {
  pointer-events: none;
  opacity: 0.9;
}
.payment-summary-sidebar .btn-primary.is-loading::after {
  animation: paymentBtnSpin 850ms linear infinite;
}
@keyframes paymentBtnSpin {
  to { transform: rotate(360deg); }
}

/* Success / confirmed state (delightful confirmation) */
.payment-panel.confirmed,
.status-badge.status-confirmed {
  animation: paymentConfirmedFlash 1400ms var(--ease-spring);
}
@keyframes paymentConfirmedFlash {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
  70% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Zibal / online gateway button polish */
#onlineGatewayLink {
  position: relative;
  overflow: hidden;
  transition: transform 180ms var(--ease-spring), box-shadow 180ms ease;
}
#onlineGatewayLink:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(94, 163, 255, 0.4);
}
#onlineGatewayLink::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-100%);
  transition: transform 480ms ease;
}
#onlineGatewayLink:hover::after {
  transform: translateX(250%);
}

/* Payment expiry modal - clearer warning */
.payment-expiry-modal__dialog {
  animation: paymentModalPop 420ms var(--ease-spring);
  border: 1px solid rgba(239, 68, 68, 0.35);
}
@keyframes paymentModalPop {
  0% { transform: scale(0.9) translateY(12px); opacity: 0.7; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Checkout payment method options - consistent with payment page */
.premium-payment-methods .premium-method-option {
  transition: transform 180ms var(--ease-spring), box-shadow 180ms ease, border-color 160ms ease;
}
.premium-payment-methods .premium-method-option:hover {
  transform: translateY(-1px);
}
.premium-payment-methods .payment-method-active {
  border-color: #5ea3ff;
  box-shadow: 0 6px 20px rgba(94, 163, 255, 0.2);
}

/* Small polish: card holder info and bank badge */
.card-holder-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.9rem;
  color: #94a3b8;
}
.card-bank-badge {
  background: rgba(94,163,255,0.15);
  color: #5ea3ff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  margin-left: 6px;
}

/* Visual payment progress stepper (special + very useful for user orientation) */
.payment-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
}
.payment-progress::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  height: 3px;
  background: rgba(94, 163, 255, 0.2);
  z-index: 0;
  border-radius: 2px;
}
.payment-progress-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--muted);
  transition: color 200ms ease, transform 180ms var(--ease-spring);
}
.payment-progress-step .step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0f172a;
  border: 3px solid rgba(94, 163, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  transition: all 200ms ease;
}
.payment-progress-step.active .step-dot {
  border-color: #5ea3ff;
  background: rgba(94, 163, 255, 0.15);
  color: #5ea3ff;
  transform: scale(1.1);
}
.payment-progress-step.active {
  color: #e2e8f0;
  font-weight: 600;
}
.payment-progress-step .step-label {
  white-space: nowrap;
}
.panel-card:hover,
.server-card:hover,
.config-card:hover,
.monitor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(2,8,23,0.16);
}

/* Animated usage / bandwidth / resource progress (very useful visual) */
.progress-bar,
.usage-bar {
  background: rgba(94,163,255,.12);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress-fill,
.usage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: inherit;
  transition: width 820ms var(--ease-spring);
  will-change: width;
}
.js-enhanced .progress-fill.visible,
.js-enhanced .usage-fill.visible {
  /* width set inline or by data; animation starts via class */
}
.monitor-stat .badge {
  transition: transform 180ms var(--ease-spring), box-shadow 160ms ease;
}
.monitor-stat:hover .badge {
  transform: scale(1.06);
}

/* Config / server status special */
.badge.badge-success,
.status-online {
  animation: softPulse 3.2s ease-in-out infinite;
}
.config-row.active .config-status {
  position: relative;
}
.config-row.active .config-status::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid rgba(34,197,94,.3);
  animation: configActiveRing 2.8s ease-out infinite;
}
@keyframes configActiveRing {
  0% { transform: scale(1); opacity: .6; }
  70% { transform: scale(1.15); opacity: 0; }
  100% { opacity: 0; }
}

/* Action feedback in panel/dashboard (create, restore, delete, speed test) */
.panel-action-btn.is-loading,
.btn.is-loading.management {
  position: relative;
  pointer-events: none;
  opacity: .85;
}
.panel-action-btn.is-loading::after,
.btn.is-loading.management::after {
  content: "";
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin 620ms linear infinite;
}

.panel-success-flash {
  animation: successFlash 1200ms var(--ease-spring);
}
@keyframes successFlash {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Empty state + form polish in management areas */
.dashboard-surface-card .empty-state,
.content .empty-state {
  transition: opacity 300ms ease, transform 300ms var(--ease-spring);
}

/* Reduced motion for new management effects */
@media (prefers-reduced-motion: reduce) {
  .dashboard-rich-item, .panel-card, .server-card, .config-card, .monitor-card,
  .progress-fill, .usage-fill, .status-step, .order-status-banner,
  .config-row.active .config-status::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FINAL CONTINUATION: Special useful animations for high-impact panel flows
   - Protocol Wizard: step progress fill + selection scale (guidance + delight)
   - Speed Test: results pop + animated bars/counters (utility feedback)
   - AI Assistant: message bubbles + typing (modern chat appeal)
   Layered on existing, performant, reduced-motion safe.
   ═══════════════════════════════════════════════════════════ */

/* Wizard step progress (special visual guidance) */
.wizard-progress {
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  margin: 20px 0;
  overflow: hidden;
}
.wizard-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  width: 0;
  transition: width 420ms var(--ease-spring);
}
.wizard-step {
  transition: transform 260ms var(--ease-spring), box-shadow 200ms ease, border-color 160ms ease;
}
.wizard-step.active {
  transform: scale(1.02);
  border-color: #667eea;
  box-shadow: 0 4px 15px rgba(102,126,234,0.2);
}
.wizard-step .protocol-card {
  transition: transform 200ms var(--ease-spring), box-shadow 180ms ease;
}
.wizard-step .protocol-card:hover {
  transform: translateY(-3px);
}

/* Speed test results (useful visual pop + anim) */
.test-result-card .value {
  transition: transform 300ms var(--ease-spring);
}
.test-result-card.pop .value {
  animation: resultPop 520ms var(--ease-spring);
}
@keyframes resultPop {
  0% { transform: scale(0.7); opacity: 0.5; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.speedometer .speed-value {
  transition: transform 400ms var(--ease-spring), color 200ms ease;
}
.speedometer.pop .speed-value {
  animation: speedPop 600ms var(--ease-spring);
}
@keyframes speedPop {
  0% { transform: scale(0.5) rotate(-10deg); }
  50% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* AI chat bubbles + typing (special modern appeal) */
.message {
  transition: transform 280ms var(--ease-spring), opacity 200ms ease;
}
.message.new {
  animation: bubbleSlide 380ms var(--ease-spring);
}
.message.user .message-avatar,
.message.assistant .message-avatar {
  transition: transform 200ms var(--ease-spring);
}
.message.new .message-avatar {
  transform: scale(0.8);
}
@keyframes bubbleSlide {
  0% { transform: translateY(12px) scale(0.95); opacity: 0.6; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: #f0f0f0;
  border-radius: 12px;
  width: fit-content;
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  background: #999;
  border-radius: 50%;
  animation: typingBounce 1.2s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
}

/* ═══════════════════════════════════════════════════════════
   NEW CONTINUATION: More Special + Useful Animations (panel unification, tickets, wallet)
   Layered, follows all previous patterns (data-*, premium classes, spring easings, reduced-motion).
   Focus: panel cards now feel premium, message threads readable with motion, wallet balance pops on update, usage bars shine on reveal.
   ═══════════════════════════════════════════════════════════ */

/* Panel cards full premium treatment (special cohesive feel without changing panel identity) */
.panel-card, .config-card, .monitor-card, .server-card {
  position: relative;
  overflow: hidden;
}
.panel-card::after, .config-card::after {
  content: "";
  position: absolute;
  inset: -40% -100% -40% 200%;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.18) 38%, rgba(255,255,255,0.28) 48%, rgba(255,255,255,0.18) 60%, transparent 78%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 820ms cubic-bezier(0.22,1,0.3,1), opacity 180ms ease;
}
.panel-card:hover::after, .config-card:hover::after {
  opacity: 1;
  transform: translateX(-260%);
}

/* Ticket message thread special slide + stagger (useful for conversation flow) */
.dashboard-message-thread .ticket-message {
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: all 320ms var(--ease-spring);
}
.dashboard-message-thread .ticket-message.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.dashboard-message-thread .ticket-message.admin {
  border-inline-end: 4px solid var(--accent);
}
.dashboard-message-thread .ticket-message.user {
  border-inline-start: 4px solid var(--primary);
}

/* Wallet balance special pop + morph (trust signal when balance changes) */
.dashboard-balance-chip {
  transition: transform 280ms var(--ease-spring), color 200ms ease;
}
.dashboard-balance-chip.pop {
  animation: walletBalancePop 620ms var(--ease-spring);
}
@keyframes walletBalancePop {
  0% { transform: scale(0.8) translateY(4px); }
  40% { transform: scale(1.15); }
  70% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* Panel usage/traffic bars with shine (already in previous, ensure trigger) */
.panel .usage-bar .usage-fill,
.panel .progress-bar .progress-fill {
  transition: width 980ms var(--ease-spring);
}
.panel .usage-bar .usage-fill.animated {
  animation: usageShine 2.1s ease-in-out;
}
@keyframes usageShine {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); }
  50% { box-shadow: 0 0 12px 2px rgba(255,255,255,0.35); }
}

/* Status dot live pulse for active/online (special "live" feeling - useful for servers/configs) */
.status-dot.active, .badge-success, .config-status.active::after {
  animation: livePulse 2.8s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.22); }
}

/* Form inputs special focus lift + glow (all areas including panel forms) */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(94, 163, 255, 0.18);
  border-color: rgba(94, 163, 255, 0.45);
}

/* Wizard step progress (special visual guidance for protocol selection) */
.wizard-progress {
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  margin: 20px 0;
  overflow: hidden;
}
.wizard-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  width: 0;
  transition: width 420ms var(--ease-spring);
}
.wizard-step {
  transition: transform 260ms var(--ease-spring), box-shadow 200ms ease, border-color 160ms ease;
}
.wizard-step.active {
  transform: scale(1.02);
  border-color: #667eea;
  box-shadow: 0 4px 15px rgba(102,126,234,0.2);
}
.wizard-step .protocol-card {
  transition: transform 200ms var(--ease-spring), box-shadow 180ms ease;
}
.wizard-step .protocol-card:hover {
  transform: translateY(-3px);
}

/* Speed test results (useful visual pop + anim for test feedback) */
.test-result-card .value {
  transition: transform 300ms var(--ease-spring);
}
.test-result-card.pop .value {
  animation: resultPop 520ms var(--ease-spring);
}
@keyframes resultPop {
  0% { transform: scale(0.7); opacity: 0.5; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.speedometer .speed-value {
  transition: transform 400ms var(--ease-spring), color 200ms ease;
}
.speedometer.pop .speed-value {
  animation: speedPop 600ms var(--ease-spring);
}
@keyframes speedPop {
  0% { transform: scale(0.5) rotate(-10deg); }
  50% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* AI chat bubbles + typing (special modern appeal for assistant) */
.message {
  transition: transform 280ms var(--ease-spring), opacity 200ms ease;
}
.message.new {
  animation: bubbleSlide 380ms var(--ease-spring);
}
.message.user .message-avatar,
.message.assistant .message-avatar {
  transition: transform 200ms var(--ease-spring);
}
.message.new .message-avatar {
  transform: scale(0.8);
}
@keyframes bubbleSlide {
  0% { transform: translateY(12px) scale(0.95); opacity: 0.6; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: #f0f0f0;
  border-radius: 12px;
  width: fit-content;
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  background: #999;
  border-radius: 50%;
  animation: typingBounce 1.2s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
}

/* Panel list polish for remaining pages (backup, cdn, etc.) */
.panel-list-item, .backup-row, .cdn-row {
  transition: transform 200ms var(--ease-spring), box-shadow 180ms ease;
}
.panel-list-item:hover, .backup-row:hover, .cdn-row:hover {
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ═══════════════════════════════════════════════════════════
   BEST IMPLEMENTATION CONTINUATION: More premium useful animations
   - Button ripples (delight + feedback on click)
   - Skeletons for loading lists (best UX in panel/dashboard)
   - Toast notifications (effective global feedback)
   - Expandable sections (height spring for details)
   - Panel form & server polish (cohesive best experience)
   Layered, performant, reduced-motion safe, RTL friendly.
   ═══════════════════════════════════════════════════════════ */

/* Button ripple (special tactile feedback, useful for all CTAs) */
.btn, .btn-primary, .btn-secondary, .btn-ghost, button[type="submit"], .copy-btn {
  position: relative;
  overflow: hidden;
}
.btn::after, button[type="submit"]::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
}
.btn:active::after, button[type="submit"]:active::after {
  animation: btnRipple 600ms var(--ease-smooth);
}
@keyframes btnRipple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Skeleton loaders (best practice for perceived performance in lists) */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s infinite linear;
  border-radius: 4px;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text { height: 1em; margin-bottom: 8px; }
.skeleton-card { height: 120px; margin-bottom: 12px; }

/* Toast notifications (highly effective for actions feedback) */
.toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: #1a202c;
  color: white;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 280ms var(--ease-spring);
  max-width: 320px;
}
.toast.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.toast.success { background: #166534; }
.toast.error { background: #991b1b; }
.toast .toast-close {
  margin-left: auto;
  cursor: pointer;
  opacity: 0.7;
}

/* Expandable sections (useful for details without page jump) */
.expandable {
  overflow: hidden;
  transition: max-height 420ms var(--ease-spring), opacity 300ms ease;
}
.expandable.collapsed {
  max-height: 0;
  opacity: 0;
}
.expand-toggle {
  cursor: pointer;
  user-select: none;
  transition: color 160ms ease;
}
.expand-toggle:hover {
  color: var(--primary);
}
.expand-toggle::after {
  content: " ▼";
  font-size: 0.7em;
  transition: transform 200ms var(--ease-spring);
}
.expand-toggle.open::after {
  transform: rotate(180deg);
}

/* Panel specific best polish */
.panel-form-group {
  transition: transform 160ms ease;
}
.panel-form-group:focus-within {
  transform: translateX(3px);
}
.server-card .badge {
  transition: transform 180ms var(--ease-spring);
}
.server-card:hover .badge {
  transform: scale(1.05);
}

/* Additional special useful animations for panel, support, payment (layered continuation) */
.advanced-feature-card {
  transition: transform 280ms var(--ease-spring), box-shadow 220ms ease, border-color 160ms ease;
}
.advanced-feature-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 14px 32px rgba(0,0,0,0.12);
}

.live-chat-message {
  transition: transform 260ms var(--ease-spring), opacity 200ms ease;
  opacity: 0.95;
}
.live-chat-message.new {
  animation: messagePop 420ms var(--ease-spring);
}
@keyframes messagePop {
  0% { transform: translateY(8px) scale(0.96); opacity: 0.6; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.payment-panel {
  transition: transform 220ms var(--ease-spring), box-shadow 200ms ease;
}
.payment-panel:hover {
  transform: translateY(-2px);
}
.payment-status-indicator .status-icon {
  transition: transform 300ms var(--ease-spring);
}
.payment-status-indicator:hover .status-icon {
  transform: scale(1.05);
}

/* Reusable shimmer for loading/placeholders in management areas */
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmerAnim 1.5s infinite;
}
@keyframes shimmerAnim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Form validation special feedback (useful & attractive) */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #ef4444;
  animation: formShake 400ms var(--ease-smooth);
}
@keyframes formShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.form-group.has-success input,
.form-group.has-success select,
.form-group.has-success textarea {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.1);
}
.form-group .field-error {
  color: #ef4444;
  font-size: 0.8rem;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 200ms ease;
}
.form-group.has-error .field-error {
  opacity: 1;
  transform: translateY(0);
}

/* Protocol wizard / create flow special (best in panel) */
#protocol-info {
  transition: max-height 380ms var(--ease-spring), opacity 280ms ease, padding 200ms ease;
  overflow: hidden;
}
#protocol-info.visible {
  max-height: 200px;
  opacity: 1;
}

/* Optimistic message send in tickets (useful live feel) */
.ticket-message.optimistic {
  opacity: 0.7;
  border-style: dashed;
}
.ticket-message.optimistic::after {
  content: " (در حال ارسال...)";
  font-size: 0.7em;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════
   PROFESSIONAL PAYMENT OVERHAUL — Most Attractive & Useful Layer
   Builds directly on existing .payment-panel, .payment-progress, .btn-copy,
   .payment-countdown, .premium-* etc. Layered, no overrides of prior.
   Special animations are purposeful: guide the user (stepper as north star),
   give instant delightful feedback (copy + confirm), build trust (visual urgency
   + success), feel premium (glass depth, elegant springs, micro shines).
   All transform/opacity/width only. RTL/Persian perfect. Reduced-motion safe.
   ═══════════════════════════════════════════════════════════ */

/* 1. Dynamic Professional Stepper (the "north star" — alive, clear, guiding) */
.payment-progress {
  position: relative;
  z-index: 1;
}
.payment-progress-fill {
  position: absolute;
  top: 14px;
  left: 14px;
  height: 3px;
  background: linear-gradient(90deg, #5ea3ff, #3b82f6);
  border-radius: 3px;
  z-index: 0;
  transition: width 480ms var(--ease-spring);
  box-shadow: 0 0 0 1px rgba(94, 163, 255, 0.2);
}
.payment-progress-step {
  transition: color 180ms ease, transform 220ms var(--ease-spring);
}
.payment-progress-step .step-dot {
  transition: transform 260ms var(--ease-spring), border-color 180ms ease,
              background 180ms ease, box-shadow 200ms ease;
  position: relative;
}
.payment-progress-step.completed .step-dot {
  background: #166534;
  border-color: #22c55e;
  color: #22c55e;
  transform: scale(1.05);
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12);
}
.payment-progress-step.completed .step-dot::after {
  content: "✓";
  position: absolute;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #22c55e;
  transform: scale(0.6);
  transition: transform 220ms var(--ease-spring);
}
.payment-progress-step.completed .step-dot {
  animation: stepCheckPop 420ms var(--ease-spring);
}
@keyframes stepCheckPop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1.05); }
}
.payment-progress-step.active {
  color: #e2e8f0;
  font-weight: 700;
}
.payment-progress-step.active .step-dot {
  border-color: #5ea3ff;
  background: rgba(94, 163, 255, 0.18);
  box-shadow: 0 0 0 6px rgba(94, 163, 255, 0.1);
  transform: scale(1.12);
}

/* 2. Visual Countdown Ring + Urgency (calm trust that turns to clear warning) */
.payment-countdown,
.summary-value.payment-countdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px 2px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(94, 163, 255, 0.25);
  font-variant-numeric: tabular-nums;
  transition: color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
}
.countdown-ring {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.countdown-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.countdown-ring circle {
  fill: none;
  stroke-width: 3;
  stroke: rgba(94, 163, 255, 0.25);
}
.countdown-ring .ring-progress {
  stroke: #5ea3ff;
  stroke-linecap: round;
  transition: stroke-dashoffset 420ms var(--ease-smooth);
}
.payment-countdown.warning,
.summary-value.payment-countdown.warning {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
  animation: countdownUrgent 1.1s ease-in-out infinite;
}
.countdown-ring .ring-progress.warning {
  stroke: #ef4444;
}
@keyframes countdownUrgent {
  0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08); }
  50% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0.03); }
}

/* 3. Copy button — highly useful + delightful premium feedback */
.btn-copy {
  will-change: transform;
}
.btn-copy.is-copied {
  background: #052e16;
  border-color: #22c55e;
  color: #22c55e;
  transform: scale(0.985);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.btn-copy.is-copied .card-number-text {
  color: #22c55e;
  animation: numberSuccess 620ms var(--ease-spring);
}
@keyframes numberSuccess {
  0% { transform: scale(0.96); }
  40% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
.card-number-display .btn-copy.is-copied {
  animation: copySuccessPop 420ms var(--ease-spring);
}
@keyframes copySuccessPop {
  0% { transform: scale(0.8); }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* 4. Premium panel depth + elegant shine (professional attractive cards) */
.payment-panel,
.payment-summary-sidebar {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(94, 163, 255, 0.12);
  background: linear-gradient(148deg, rgba(255,255,255,0.035) 0%, rgba(15,23,42,0.96) 100%);
  box-shadow: 0 10px 30px -12px rgba(2, 8, 23, 0.25);
  transition: transform 280ms var(--ease-spring), box-shadow 240ms ease, border-color 180ms ease;
}
.payment-panel:hover,
.payment-summary-sidebar:hover {
  transform: translateY(-3px);
  border-color: rgba(94, 163, 255, 0.32);
  box-shadow: 0 20px 45px -14px rgba(2, 8, 23, 0.28);
}
.payment-panel::after,
.payment-summary-sidebar::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -120%;
  width: 38%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,255,255,0.18) 48%,
    transparent 76%
  );
  transform: skewX(-18deg);
  transition: left 620ms var(--ease-smooth);
  pointer-events: none;
}
.payment-panel:hover::after,
.payment-summary-sidebar:hover::after {
  left: 160%;
}

/* Amount value special (money feel — useful reassurance) */
.panel-value,
.summary-value[data-morph-value] {
  transition: transform 180ms var(--ease-spring), color 160ms ease;
}
.panel-value.money-morph,
.summary-value.money-morph {
  color: #5ea3ff;
  transform: scale(1.04);
}

/* 5. Trust & security cues (subtle professional reassurance) */
.payment-status-indicator .status-icon,
.security-cue {
  transition: transform 300ms var(--ease-spring), box-shadow 220ms ease;
}
.security-cue {
  animation: trustPulse 3.2s ease-in-out infinite;
}
@keyframes trustPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.payment-status-indicator:hover .status-icon {
  transform: scale(1.1);
}

/* 6. Confirm CTA — premium shine + loading + success (drives completion) */
.payment-summary-sidebar .btn-primary,
.premium-action.cta .btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform 160ms var(--ease-spring), box-shadow 200ms ease;
}
.payment-summary-sidebar .btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease-smooth);
}
.payment-summary-sidebar .btn-primary:hover::before {
  transform: translateX(220%);
}
.payment-summary-sidebar .btn-primary.is-loading {
  pointer-events: none;
  opacity: 0.9;
}
.payment-summary-sidebar .btn-primary.is-success {
  background: #166534;
  border-color: #22c55e;
  color: #fff;
  animation: ctaSuccess 620ms var(--ease-spring);
}
@keyframes ctaSuccess {
  0% { transform: scale(0.96); }
  45% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* 7. Stronger confirmed / success state (delight + closure) */
.payment-panel.confirmed,
.payment-info-section .confirmed {
  animation: proPaymentSuccess 1400ms var(--ease-spring);
  border-color: rgba(34, 197, 94, 0.45);
}
@keyframes proPaymentSuccess {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  35% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0.08); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.payment-panel.confirmed .panel-value {
  color: #22c55e;
}

/* 8. Checkout payment method polish (consistent premium journey) */
.premium-method-option {
  transition: transform 220ms var(--ease-spring), box-shadow 220ms ease, border-color 160ms ease;
}
.premium-method-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(2, 8, 23, 0.18);
}
.premium-method-option.active,
.premium-method-option:has(input:checked) {
  border-color: #5ea3ff;
  box-shadow: 0 0 0 3px rgba(94, 163, 255, 0.15);
  transform: scale(1.015);
}
.premium-method-option .payment-method-checkmark {
  transition: transform 260ms var(--ease-spring), opacity 160ms ease;
  transform: scale(0.6);
  opacity: 0;
}
.premium-method-option.active .payment-method-checkmark,
.premium-method-option:has(input:checked) .payment-method-checkmark {
  opacity: 1;
  transform: scale(1);
}

/* 9. Zibal / gateway button premium (smooth handoff) */
.payment-gateway-btn,
#onlineGatewayLink {
  position: relative;
  overflow: hidden;
  transition: transform 180ms var(--ease-spring), box-shadow 180ms ease;
}
.payment-gateway-btn:hover,
#onlineGatewayLink:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(94, 163, 255, 0.28);
}
.payment-gateway-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: btnShimmer 900ms linear infinite;
}

/* 10. Mobile + reduced-motion refinements for payment */
@media (max-width: 768px) {
  .payment-progress {
    gap: 6px;
  }
  .payment-progress-step .step-label {
    font-size: 0.66rem;
  }
  .countdown-ring {
    width: 18px;
    height: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .payment-progress-fill,
  .payment-progress-step .step-dot,
  .payment-countdown,
  .btn-copy,
  .payment-panel,
  .premium-method-option {
    transition: none !important;
    animation: none !important;
  }
  .payment-panel::after {
    display: none;
  }
}