/* ==========================================================================
   PlusPay — styles.css
   Dark-mode premium theme: glassmorphism, animated gradient glow, particles,
   and RTL/LTR-aware layout rules. Loaded after the Tailwind CDN script.
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  background-color: #080a14;
  color: #e8eaf3;
  font-feature-settings: "ss01";
}
body.lang-ar, body.lang-ckb { font-family: 'Noto Kufi Arabic', 'Inter', sans-serif; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0e1c; }
::-webkit-scrollbar-thumb { background: #232a47; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #2f3860; }

:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------- */
/* Glassmorphism                                                           */
/* ---------------------------------------------------------------------- */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.glass-strong {
  background: rgba(14,18,36,0.86);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.text-gradient {
  background: linear-gradient(95deg, #a78bfa 0%, #7c5cfc 35%, #22d3ee 75%, #67e8f9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------------- */
/* Glow buttons                                                            */
/* ---------------------------------------------------------------------- */
.btn-glow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-glow::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(120deg, #7c5cfc, #22d3ee, #7c5cfc);
  background-size: 220% 220%;
  z-index: -1;
  filter: blur(10px);
  opacity: .75;
  transition: opacity .25s ease;
  animation: gradientMove 4.5s ease infinite;
}
.btn-glow:hover::before { opacity: 1; }
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.card-hover { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; }
.card-hover:hover {
  transform: translateY(-6px);
  border-color: rgba(167,139,250,0.45);
  box-shadow: 0 20px 50px -20px rgba(124,92,252,0.45);
}

.shimmer-badge {
  background: linear-gradient(90deg, rgba(245,185,66,0.15) 0%, rgba(245,185,66,0.5) 50%, rgba(245,185,66,0.15) 100%);
  background-size: 1000px 100%;
  animation: shimmer 3s infinite linear;
}
@keyframes shimmer {
  0% { background-position: -500px 0; }
  100% { background-position: 500px 0; }
}

/* ---------------------------------------------------------------------- */
/* Ambient background: aurora blobs + particle field                       */
/* ---------------------------------------------------------------------- */
@keyframes aurora {
  0%, 100% { transform: translate(-5%, -10%) rotate(0deg) scale(1); }
  33% { transform: translate(5%, 8%) rotate(8deg) scale(1.08); }
  66% { transform: translate(-8%, 5%) rotate(-6deg) scale(0.98); }
}
.animate-aurora { animation: aurora 18s ease-in-out infinite; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}
.animate-float { animation: float 7s ease-in-out infinite; }

.particle {
  position: absolute;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(167,139,250,0.9), rgba(124,92,252,0.05));
  filter: blur(0.5px);
  animation: float 9s ease-in-out infinite;
}

/* ---------------------------------------------------------------------- */
/* Motion + modal utility animations                                       */
/* ---------------------------------------------------------------------- */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp .5s cubic-bezier(.16,1,.3,1) both; }

@keyframes popIn {
  0% { opacity: 0; transform: scale(.94) translateY(6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-pop-in { animation: popIn .25s cubic-bezier(.16,1,.3,1) both; }

.modal-backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cart-panel { transition: transform .4s cubic-bezier(.16,1,.3,1); }

/* ---------------------------------------------------------------------- */
/* RTL / LTR                                                               */
/* ---------------------------------------------------------------------- */
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* ---------------------------------------------------------------------- */
/* Tabs                                                                     */
/* ---------------------------------------------------------------------- */
.tab-pill[data-active="true"] {
  background: linear-gradient(95deg, #7c5cfc, #22d3ee);
  color: #060714;
  box-shadow: 0 8px 24px -6px rgba(124,92,252,0.6);
}
#categoryTabs { scrollbar-width: none; }
#categoryTabs::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------------- */
/* Form fields                                                             */
/* ---------------------------------------------------------------------- */
.input-field {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input-field:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.18);
  background: rgba(255,255,255,0.06);
  outline: none;
}
.input-field.field-error { border-color: #fb7185; box-shadow: 0 0 0 3px rgba(251,113,133,0.15); }

/* ---------------------------------------------------------------------- */
/* AI Assistant floating widget                                            */
/* ---------------------------------------------------------------------- */
#aiToggleBtn {
  box-shadow: 0 10px 40px -10px rgba(124,92,252,0.75);
}
#aiToggleBtn::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1.5px solid rgba(124,92,252,0.45);
  animation: aiPulse 2.4s ease-out infinite;
}
@keyframes aiPulse {
  0% { transform: scale(0.9); opacity: .8; }
  100% { transform: scale(1.35); opacity: 0; }
}
#aiPanel {
  transition: opacity .2s ease, transform .2s ease;
}
#aiMessages { scrollbar-width: thin; }

/* ---------------------------------------------------------------------- */
/* Reduced motion                                                          */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #aiToggleBtn::after { display: none; }
}