/* =========================================================
   OmniumHub — enhancements.css
   تحسينات بصرية بحتة — لا تؤثر على أي وظيفة
   ========================================================= */

/* ═══════════════════════════════════════════════
   1) Skeleton Loading للبطاقات (بدل spinner)
   ═══════════════════════════════════════════════ */
.skeleton-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  overflow: hidden;
  animation: skelPulse 1.6s ease-in-out infinite;
}
.skeleton-cover {
  height: 140px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
.skeleton-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.tall { height: 20px; }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes skelPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

/* ═══════════════════════════════════════════════
   2) Smooth Transitions لكل شيء
   ═══════════════════════════════════════════════ */
button, a, input, select, textarea {
  transition: background-color .2s ease,
              color .2s ease,
              border-color .2s ease,
              transform .15s ease,
              box-shadow .25s ease,
              opacity .2s ease;
}

/* ═══════════════════════════════════════════════
   3) Tab switching animation
   ═══════════════════════════════════════════════ */
.tab-panel.active {
  animation: fadeInUp .3s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════
   4) Cards entry animation (لا تعمل إذا كانت موجودة)
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .product-card,
  .p-card,
  .plan,
  .stat-card,
  .dash-stat,
  .card {
    animation-fill-mode: both;
  }
}

/* ═══════════════════════════════════════════════
   5) Toast animation (إن لم تكن موجودة)
   ═══════════════════════════════════════════════ */
.toast:not(.hidden) {
  animation: toastIn .3s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ═══════════════════════════════════════════════
   6) Ripple effect على الأزرار الرئيسية
   ═══════════════════════════════════════════════ */
.btn-primary, .buy-btn, .btn-deposit, .btn-plan {
  position: relative;
  overflow: hidden;
}
.btn-primary::before,
.buy-btn::before,
.btn-deposit::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: translate(-50%, -50%);
  transition: width .4s ease, height .4s ease, opacity .4s ease;
  opacity: 0;
  pointer-events: none;
}
.btn-primary:active::before,
.buy-btn:active::before,
.btn-deposit:active::before {
  width: 300px;
  height: 300px;
  opacity: 1;
  transition: 0s;
}

/* ═══════════════════════════════════════════════
   7) Hover state محسّن للبطاقات
   ═══════════════════════════════════════════════ */
@media (hover: hover) {
  .product-card:hover,
  .p-card:hover {
    transform: translateY(-6px);
  }
  .stat-card:hover,
  .dash-stat:hover {
    transform: translateY(-2px);
    border-color: rgba(30,136,229,.35);
    background: rgba(255,255,255,.06);
  }
}

/* ═══════════════════════════════════════════════
   8) Scrollbar أنيقة
   ═══════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1e88e5, #00c853);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #42a5f5, #3ddc84);
}

/* ═══════════════════════════════════════════════
   9) Input focus glow محسّن
   ═══════════════════════════════════════════════ */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 4px rgba(30,136,229,.15),
              0 0 20px -4px rgba(30,136,229,.4) !important;
}

/* ═══════════════════════════════════════════════
   10) Focus-visible (لإمكانية الوصول)
   ═══════════════════════════════════════════════ */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #42a5f5;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════
   11) عدد المشتريات اليوم — pulse خفيف
   ═══════════════════════════════════════════════ */
.product-meta .live {
  position: relative;
}
.product-meta .live::before {
  content: '●';
  color: #00c853;
  margin-left: 4px;
  font-size: 8px;
  animation: liveDot 1.5s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes liveDot {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* ═══════════════════════════════════════════════
   12) Number Count Animation (فقط عند hover)
   ═══════════════════════════════════════════════ */
@media (hover: hover) {
  .stat-value:hover,
  .stat-v:hover,
  .dash-stat-v:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
    transition: all .2s ease;
  }
}

/* ═══════════════════════════════════════════════
   13) Tab underline animation
   ═══════════════════════════════════════════════ */
.tab {
  position: relative;
  overflow: hidden;
}
.tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #1e88e5, #00c853);
  transition: width .3s ease, left .3s ease;
}
.tab.active::after {
  width: 60%;
  left: 20%;
}

/* ═══════════════════════════════════════════════
   14) Price pulse at hover
   ═══════════════════════════════════════════════ */
@media (hover: hover) {
  .price-value {
    transition: all .2s ease;
  }
  .product-card:hover .price-value {
    transform: scale(1.05);
    filter: brightness(1.15);
  }
}

/* ═══════════════════════════════════════════════
   15) Modal backdrop blur enhanced
   ═══════════════════════════════════════════════ */
.modal-overlay:not(.hidden),
.modal:not(.hidden),
.review-modal:not(.hidden),
.notif-modal:not(.hidden) {
  animation: backdropIn .25s ease;
}
@keyframes backdropIn {
  from { backdrop-filter: blur(0); background: rgba(3,11,28,0); }
  to   { backdrop-filter: blur(10px); background: rgba(3,11,28,.85); }
}

/* ═══════════════════════════════════════════════
   16) بطاقة الخصم — subtle glow
   ═══════════════════════════════════════════════ */
.product-card:has(.discount-badge) {
  border-color: rgba(255,179,0,.25);
}
@media (hover: hover) {
  .product-card:has(.discount-badge):hover {
    box-shadow: 0 26px 50px -20px rgba(255,179,0,.5);
    border-color: rgba(255,179,0,.5);
  }
}

/* ═══════════════════════════════════════════════
   17) Skeleton page-level loader
   ═══════════════════════════════════════════════ */
#skeleton-loader {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}
#skeleton-loader.hidden { display: none; }

/* ═══════════════════════════════════════════════
   18) Fade-in for page load
   ═══════════════════════════════════════════════ */
body:not(.no-fade) {
  animation: pageIn .4s ease;
}
@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════
   19) Selection color
   ═══════════════════════════════════════════════ */
::selection {
  background: rgba(30,136,229,.4);
  color: #fff;
}

/* ═══════════════════════════════════════════════
   20) Badge pulse for new/hot
   ═══════════════════════════════════════════════ */
.product-badge.badge-hot {
  animation: badgeHot 2s ease-in-out infinite;
}
@keyframes badgeHot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}