/* ============================================
   SHOP PREMIUM UPGRADES
   ============================================ */

/* === HERO UPGRADE === */
.shop-hero {
  position: relative;
  overflow: hidden;
}
.shop-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(74, 123, 196, 0.08), transparent 50%);
  animation: shopHeroGlow 10s ease-in-out infinite;
}
@keyframes shopHeroGlow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(5%, -3%); }
}
.shop-hero h1 {
  background: linear-gradient(90deg, #fff 0%, #9cadd4 50%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shopTitleShimmer 5s linear infinite;
}
@keyframes shopTitleShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* === BALANCE CARD GLOW === */
.shop-balance-card {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.shop-balance-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  background: conic-gradient(from 0deg, transparent 60%, rgba(74, 123, 196, 0.4) 80%, rgba(123, 169, 232, 0.6) 90%, transparent 100%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.shop-balance-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 30px rgba(74, 123, 196, 0.15);
}
.shop-balance-card:hover::before {
  opacity: 1;
}
.shop-balance-card strong {
  background: linear-gradient(135deg, #dbe7ff, #7ba9e8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === TOPUP CARDS === */
.shop-topup-card {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  overflow: hidden;
}
.shop-topup-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}
.shop-topup-card:hover {
  transform: translateY(-4px);
  background: rgba(8, 22, 52, 0.95);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3), 0 0 20px rgba(74, 123, 196, 0.1);
}
.shop-topup-card:hover::after {
  left: 120%;
}
.shop-topup-card:hover strong {
  text-shadow: 0 0 15px rgba(123, 169, 232, 0.4);
}

/* Popular package highlight */
.shop-topup-card:nth-child(2) {
  border: 1px solid rgba(74, 123, 196, 0.3);
}
.shop-topup-card:nth-child(2)::before {
  content: 'ПОПУЛЯРНЫЙ';
  position: absolute;
  top: 8px;
  right: -28px;
  background: linear-gradient(135deg, #145ee8, #4a9bff);
  color: #fff;
  font: 600 7px/1 Arial;
  letter-spacing: 0.1em;
  padding: 4px 30px;
  transform: rotate(45deg);
  z-index: 2;
}

/* Topup button pulse */
.shop-topup-card button {
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.shop-topup-card button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}
.shop-topup-card button:hover::before {
  width: 200px;
  height: 200px;
}

/* === PRODUCT CARDS === */
.shop-product {
  opacity: 0;
  transform: translateY(20px);
  animation: productReveal 0.5s ease forwards;
}
.shop-product:nth-child(1) { animation-delay: 0.05s; }
.shop-product:nth-child(2) { animation-delay: 0.1s; }
.shop-product:nth-child(3) { animation-delay: 0.15s; }
.shop-product:nth-child(4) { animation-delay: 0.2s; }
.shop-product:nth-child(5) { animation-delay: 0.25s; }
.shop-product:nth-child(6) { animation-delay: 0.3s; }
.shop-product:nth-child(7) { animation-delay: 0.35s; }
.shop-product:nth-child(8) { animation-delay: 0.4s; }
.shop-product:nth-child(9) { animation-delay: 0.45s; }
@keyframes productReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Product icon glow on hover */
.shop-product:hover .shop-product-icon {
  box-shadow: 0 0 20px rgba(74, 123, 196, 0.3);
  border-color: rgba(80, 142, 255, 0.6);
}
.shop-product-icon {
  transition: box-shadow 0.3s, border-color 0.3s;
}

/* Buy button ripple */
.shop-buy {
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.shop-buy::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transition: left 0.5s ease;
}
.shop-buy:hover::before {
  left: 120%;
}
.shop-buy:hover {
  box-shadow: 0 8px 30px rgba(30, 92, 211, 0.35);
  transform: translateY(-1px);
}

/* === MODAL UPGRADE === */
.shop-modal-backdrop {
  background: rgba(0, 3, 10, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.shop-modal-dialog {
  border: 1px solid rgba(74, 123, 196, 0.35) !important;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.6), 0 0 40px rgba(74, 123, 196, 0.1) !important;
  animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.shop-modal-dialog > span {
  background: linear-gradient(90deg, #5e83ce, #7ba9e8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.shop-confirm, .shop-login-cta {
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.shop-confirm:hover, .shop-login-cta:hover {
  box-shadow: 0 8px 30px rgba(30, 92, 211, 0.35);
  transform: translateY(-1px);
}

/* === FAIRPLAY SECTION === */
.shop-fairplay {
  position: relative;
  overflow: hidden;
}
.shop-fairplay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(63, 212, 154, 0.06), transparent 50%);
}
.shop-fairplay-mark {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.shop-fairplay:hover .shop-fairplay-mark {
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(63, 212, 154, 0.2);
}

/* === ORDER STATUS GRADIENTS === */
.shop-status {
  font-weight: 600;
  letter-spacing: 0.05em;
}
.shop-status.pending {
  background: linear-gradient(90deg, rgba(126, 95, 24, 0.14), rgba(126, 95, 24, 0.08));
}
.shop-status.completed {
  background: linear-gradient(90deg, rgba(35, 128, 92, 0.14), rgba(35, 128, 92, 0.08));
}
.shop-status.cancelled, .shop-status.refunded {
  background: linear-gradient(90deg, rgba(131, 49, 62, 0.14), rgba(131, 49, 62, 0.08));
}

/* === TABS UPGRADE === */
.shop-tabs button {
  position: relative;
  transition: all 0.25s ease;
}
.shop-tabs button::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4a7bc4, transparent);
  transition: width 0.3s, left 0.3s;
  box-shadow: 0 0 6px rgba(74, 123, 196, 0.5);
}
.shop-tabs button:hover::after, .shop-tabs button.active::after {
  width: 70%;
  left: 15%;
}

/* === SEARCH UPGRADE === */
.shop-search input {
  transition: border-color 0.25s, box-shadow 0.25s;
}
.shop-search input:focus {
  border-color: #4d89ff !important;
  box-shadow: 0 0 0 3px rgba(77, 137, 255, 0.15), 0 0 15px rgba(74, 123, 196, 0.1) !important;
}

/* === SCROLL-TO-TOP for shop === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.shop-shell {
  animation: fadeInUp 0.5s ease;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .shop-product, .shop-topup-card, .shop-buy, .shop-confirm,
  .shop-modal-dialog, .shop-hero, .shop-balance-card {
    animation: none !important;
    transition: none !important;
  }
}

/* === EMOJI ICON STYLE === */
.shop-icon-emoji {
  display: block;
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.shop-product-icon {
  background: linear-gradient(145deg, rgba(15, 30, 65, 0.9), rgba(5, 12, 30, 0.95)) !important;
  border-color: rgba(74, 123, 196, 0.25) !important;
}

/* === PRODUCT EMOJI ICONS === */
.shop-icon-emoji {
  display: block;
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  transition: transform 0.3s ease;
}
.shop-product:hover .shop-icon-emoji {
  transform: scale(1.15);
}

/* Category color accents */
.shop-product[data-category="premium"] {
  border-left: 3px solid rgba(240, 192, 64, 0.4);
}
.shop-product[data-category="premium"]:hover {
  border-left-color: rgba(240, 192, 64, 0.8);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24), -4px 0 20px rgba(240, 192, 64, 0.08);
}

.shop-product[data-category="cosmetic"] {
  border-left: 3px solid rgba(212, 123, 169, 0.4);
}
.shop-product[data-category="cosmetic"]:hover {
  border-left-color: rgba(212, 123, 169, 0.8);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24), -4px 0 20px rgba(212, 123, 169, 0.08);
}

.shop-product[data-category="service"] {
  border-left: 3px solid rgba(123, 169, 232, 0.4);
}
.shop-product[data-category="service"]:hover {
  border-left-color: rgba(123, 169, 232, 0.8);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24), -4px 0 20px rgba(123, 169, 232, 0.08);
}

/* Category badges */
.shop-product-body > span {
  display: inline-block !important;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 8px !important;
  letter-spacing: 0.12em !important;
}
.shop-product[data-category="premium"] .shop-product-body > span {
  background: rgba(240, 192, 64, 0.1);
  color: #f0c040 !important;
  border: 1px solid rgba(240, 192, 64, 0.2);
}
.shop-product[data-category="cosmetic"] .shop-product-body > span {
  background: rgba(212, 123, 169, 0.1);
  color: #d47ba9 !important;
  border: 1px solid rgba(212, 123, 169, 0.2);
}
.shop-product[data-category="service"] .shop-product-body > span {
  background: rgba(123, 169, 232, 0.1);
  color: #7ba9e8 !important;
  border: 1px solid rgba(123, 169, 232, 0.2);
}

/* Price styling */
.shop-product-footer strong {
  background: linear-gradient(135deg, #e2ecff, #7ba9e8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}