/* ============================================
   Ripple Effect - مشوار تاورغاء 2026
   تأثير التموج عند اللمس (Material Design)
   ============================================ */

.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

.ripple::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1%, transparent 1%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.ripple:active::before {
  transform: scale(0, 0);
  opacity: 0.4;
  transition: 0s;
}

/* ===== Ripple Variants ===== */

/* Light Ripple (للخلفيات الداكنة) */
.ripple.light::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 1%, transparent 1%);
}

/* Dark Ripple (للخلفيات الفاتحة) */
.ripple.dark::before {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1%, transparent 1%);
}

/* Primary Color Ripple */
.ripple.primary::before {
  background-image: radial-gradient(circle, rgba(14, 165, 233, 0.3) 1%, transparent 1%);
}

/* Success Color Ripple */
.ripple.success::before {
  background-image: radial-gradient(circle, rgba(16, 185, 129, 0.3) 1%, transparent 1%);
}

/* Warning Color Ripple */
.ripple.warning::before {
  background-image: radial-gradient(circle, rgba(245, 158, 11, 0.3) 1%, transparent 1%);
}

/* Danger Color Ripple */
.ripple.danger::before {
  background-image: radial-gradient(circle, rgba(239, 68, 68, 0.3) 1%, transparent 1%);
}

/* ===== Button-specific Ripples ===== */
.action-btn.ripple::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 1%, transparent 1%);
}

.action-btn.secondary.ripple::before {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1%, transparent 1%);
}

.filter-btn.ripple::before {
  background-image: radial-gradient(circle, rgba(14, 165, 233, 0.2) 1%, transparent 1%);
}

/* ===== Card Ripple Effect ===== */
.shop-card.ripple::before {
  background-image: radial-gradient(circle, rgba(14, 165, 233, 0.08) 1%, transparent 1%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.shop-card.ripple:active::before {
  opacity: 0.15;
  transform: scale(0, 0);
  transition: 0s;
}

/* ===== Touch-specific Optimizations ===== */
@media (hover: none) and (pointer: coarse) {
  .ripple::before {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .ripple:active::before {
    opacity: 0.3;
  }
}

/* ===== Performance Optimizations ===== */
.ripple {
  will-change: transform;
  contain: layout style paint;
}

.ripple::before {
  will-change: transform, opacity;
  contain: layout style paint;
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
  .ripple::before {
    display: none;
  }
}

/* ===== Dark Mode Adjustments ===== */
@media (prefers-color-scheme: dark) {
  .ripple::before {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 1%, transparent 1%);
  }
  
  .ripple.dark::before {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1%, transparent 1%);
  }
}

[data-theme="dark"] .ripple::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 1%, transparent 1%);
}

[data-theme="dark"] .ripple.dark::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1%, transparent 1%);
}