/* =====================================================
   animations.css — Smart Parking  ✨ v2 ULTRA
   Advanced micro-interactions + glow + scroll reveal
   ✅ GPU-only (transform/opacity/filter/clip-path)
   ✅ prefers-reduced-motion respected
   ✅ Mobile + Desktop optimized
   ===================================================== */

/* ══════════════════════════════════════════════════════
   @keyframes LIBRARY
══════════════════════════════════════════════════════ */

/* نبضة خضراء */
@keyframes kys-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0   rgba(52,211,153,0.0),  0 0 8px  rgba(52,211,153,0.20); }
  50%       { box-shadow: 0 0 0 6px rgba(52,211,153,0.14), 0 0 22px rgba(52,211,153,0.34); }
}

/* نبضة حمراء */
@keyframes kys-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0   rgba(255,61,90,0.0),  0 0 6px  rgba(255,61,90,0.15); }
  50%       { box-shadow: 0 0 0 5px rgba(255,61,90,0.10), 0 0 18px rgba(255,61,90,0.28); }
}

/* نبضة صفراء */
@keyframes kys-pulse-yellow {
  0%, 100% { box-shadow: 0 0 0 0   rgba(52,211,153,0.0),  0 0 6px  rgba(52,211,153,0.15); }
  50%       { box-shadow: 0 0 0 5px rgba(52,211,153,0.10), 0 0 18px rgba(52,211,153,0.28); }
}

/* text glow أخضر */
@keyframes kys-text-glow {
  0%, 100% { text-shadow: 0 0 6px  rgba(52,211,153,0.32); }
  50%       { text-shadow: 0 0 18px rgba(52,211,153,0.70), 0 0 32px rgba(52,211,153,0.32); }
}

/* text glow أصفر */
@keyframes kys-text-glow-yellow {
  0%, 100% { text-shadow: 0 0 6px  rgba(52,211,153,0.35); }
  50%       { text-shadow: 0 0 18px rgba(52,211,153,0.75), 0 0 32px rgba(52,211,153,0.30); }
}

/* avatar pulse */
@keyframes kys-avatar-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(52,211,153,0.38), 0 0 12px rgba(52,211,153,0.28); }
  50%       { box-shadow: 0 0 0 4px rgba(52,211,153,0.20), 0 0 24px rgba(52,211,153,0.48); }
}

/* logo float */
@keyframes kys-logo-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-2px); }
}

/* shimmer */
@keyframes kys-shimmer {
  from { background-position: -400px 0; }
  to   { background-position:  400px 0; }
}

/* ─── v2 NEW KEYFRAMES ──────────────────────────────── */

/* ظهور عند التحميل — fade + slide up أسرع وأنعم */
@keyframes kys-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.98); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
}

/* scroll reveal — من الأسفل */
@keyframes kys-reveal-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* scroll reveal — من اليسار */
@keyframes kys-reveal-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* scroll reveal — من اليمين */
@keyframes kys-reveal-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ripple انتشار دائري — للـ theme transition والأزرار */
@keyframes kys-ripple {
  from { transform: scale(0); opacity: 0.5; }
  to   { transform: scale(4); opacity: 0; }
}

/* shimmer sweep — لمسة لمعة على الكروت */
@keyframes kys-card-shine {
  0%   { transform: translateX(-100%) skewX(-12deg); opacity: 0; }
  40%  { opacity: 0.6; }
  100% { transform: translateX(200%) skewX(-12deg); opacity: 0; }
}

/* border glow scan — تيار ضوئي يدور على الحدود */
@keyframes kys-border-scan {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 300%; }
}

/* bounce-in للكروت */
@keyframes kys-bounce-in {
  0%   { opacity: 0; transform: scale(0.85) translateY(20px); }
  65%  { transform: scale(1.03) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* particle burst — نقطة تتوسع وتختفي */
@keyframes kys-particle {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

/* float — للأيقونات والعناصر العائمة */
@keyframes kys-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-6px) rotate(1deg); }
  66%       { transform: translateY(-3px) rotate(-0.5deg); }
}

/* rotate نجمة / icon دايري */
@keyframes kys-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* heartbeat لعناصر attention */
@keyframes kys-heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.08); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.05); }
  70%       { transform: scale(1); }
}

/* gradient shift — للخلفيات الحية */
@keyframes kys-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* modal entrance  */
@keyframes kys-modal-in {
  0%   { opacity: 0; transform: scale(0.88) translateY(20px); filter: blur(4px); }
  70%  { transform: scale(1.02) translateY(-2px); filter: blur(0); }
  100% { opacity: 1; transform: scale(1)    translateY(0); filter: blur(0); }
}

/* modal exit */
@keyframes kys-modal-out {
  from { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  to   { opacity: 0; transform: scale(0.92) translateY(12px); filter: blur(3px); }
}

/* toast entrance */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
[data-lang="ar"] @keyframes toastIn {
  from { opacity: 0; transform: translateX(-24px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0)     scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0) scale(1); max-height: 120px; }
  to   { opacity: 0; transform: translateX(24px) scale(0.9); max-height: 0; padding: 0; margin: 0; }
}

@keyframes toastBar {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════
   1. BUTTONS — lift + glow + ripple + magnetic
══════════════════════════════════════════════════════ */
.btn,
.nav-btn,
.act-btn,
.filter-btn {
  transition:
    transform     0.2s cubic-bezier(0.34,1.4,0.64,1),
    box-shadow    0.22s ease,
    background    0.2s ease,
    border-color  0.2s ease,
    color         0.2s ease !important;
  position: relative;
  overflow: hidden;
}

/* Shine sweep على الأزرار */
.btn::after,
.nav-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  transform: translateX(-100%) skewX(-12deg);
  transition: none;
  pointer-events: none;
}
.btn:hover::after,
.nav-btn:hover::after {
  animation: kys-card-shine 0.55s ease forwards;
}

.btn-primary:hover {
  transform:  translateY(-3px) scale(1.015) !important;
  box-shadow:
    0 8px 32px rgba(52,211,153,0.40),
    0 0 0 1px rgba(52,211,153,0.24),
    0 0 60px rgba(52,211,153,0.12) !important;
}
.btn-primary:active {
  transform:  translateY(1px) scale(0.97) !important;
  box-shadow: 0 2px 8px rgba(52,211,153,0.22) !important;
  transition-duration: 0.08s !important;
}

.btn-outline:hover {
  transform:    translateY(-2px) !important;
  border-color: var(--accent) !important;
  color:        var(--accent) !important;
  box-shadow:
    0 4px 20px rgba(52,211,153,0.20),
    inset 0 0 0 1px rgba(52,211,153,0.12) !important;
}

.act-btn:hover {
  transform:  translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45) !important;
}

/* ══════════════════════════════════════════════════════
   2. CARDS — smart hover per card type
   ─────────────────────────────────────────────────────
   القاعدة:
   • الكروت الـ standalone (stat-card, admin-stat, plan-card…)
     → pop-out كامل translateY + scale + glow
   • الكروت الـ container (.card) اللي جواها table أو محتوى
     → hover ناعم جداً — border glow فقط، مش translateY
     لأن translateY على wrapper كبير بيبقى مشوّش ومش مريح
══════════════════════════════════════════════════════ */

/* ── Transition base — كل الكروت ── */
.card,
.stat-card,
.plan-card,
.feature-card,
.sub-card,
.admin-stat,
.vehicle-item,
.vehicle-picker-item {
  transition:
    transform    0.30s cubic-bezier(0.34,1.2,0.64,1),
    box-shadow   0.28s ease,
    border-color 0.28s ease !important;
  position: relative;
  overflow: hidden;
}

/* ── will-change فقط على الكروت الصغيرة المستقلة — مش كل حاجة ── */
.stat-card,
.admin-stat,
.plan-card,
.feature-card,
.sub-card {
  will-change: transform;
}

/* ── Shine sweep — للكروت الصغيرة بس ── */
.stat-card::before,
.admin-stat::before,
.plan-card::before,
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(52,211,153,0.08) 48%,
    rgba(255,255,255,0.07) 52%,
    transparent 65%
  );
  transform: translateX(-100%) skewX(-12deg);
  pointer-events: none;
  z-index: 1;
  transition: none;
}
.stat-card:hover::before,
.admin-stat:hover::before,
.plan-card:hover::before,
.feature-card:hover::before {
  animation: kys-card-shine 0.65s ease forwards;
}

/* ══ POP-OUT — كروت standalone صغيرة ══ */
.stat-card:hover,
.admin-stat:hover {
  transform:    translateY(-6px) scale(1.012) !important;
  border-color: rgba(52,211,153,0.30) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.65),
    0 0 0 1px rgba(52,211,153,0.18),
    0 0 30px rgba(52,211,153,0.08) !important;
}

.plan-card:hover {
  transform:  translateY(-8px) scale(1.016) !important;
  box-shadow:
    0 24px 56px rgba(0,0,0,0.75),
    0 0 0 1.5px rgba(52,211,153,0.24),
    0 0 50px rgba(52,211,153,0.09) !important;
}

.feature-card:hover {
  transform:    translateY(-6px) scale(1.010) !important;
  border-color: rgba(52,211,153,0.26) !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,0.55),
    0 0 0 1px rgba(52,211,153,0.16) !important;
}

.sub-card:hover {
  transform:    translateY(-7px) scale(1.012) !important;
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 1.5px var(--accent),
    0 18px 44px rgba(52,211,153,0.20),
    0 0 40px rgba(52,211,153,0.08) !important;
}

/* ══ CONTAINER CARDS (.card) — ناعم جداً، بس border glow ══
   مش translateY عشان مش مريح لما الـ card فيها table أو محتوى
   بس بنحس بالـ hover من glow خفيف وborder
*/
.card:hover {
  transform:    none !important;
  border-color: rgba(52,211,153,0.20) !important;
  box-shadow:
    0 0 0 1px rgba(52,211,153,0.12),
    0 8px 28px rgba(0,0,0,0.35) !important;
}

/* استثناء: الكروت الـ container اللي في صفحة الـ Home (مش أدمن/داشبورد)
   .feature-card بدل .card عشان فيهم محتوى مش table */

/* ══ Vehicle items — slide بدل pop ══ */
.vehicle-item:hover,
.vehicle-picker-item:hover {
  transform:    translateX(4px) !important;
  border-color: rgba(52,211,153,0.26) !important;
  box-shadow:   0 4px 20px rgba(52,211,153,0.09) !important;
}
[data-lang="ar"] .vehicle-item:hover,
[data-lang="ar"] .vehicle-picker-item:hover {
  transform: translateX(-4px) !important;
}

/* ══════════════════════════════════════════════════════
   3. STATUS BADGES — نشط بتضيء، موقوف بتومض أحمر
══════════════════════════════════════════════════════ */

/* نبضة خضراء حية — "نشط" */
@keyframes kys-status-active-glow {
  0%, 100% {
    box-shadow:
      0 0 0 0   rgba(52,211,153,0.0),
      0 0 8px   rgba(52,211,153,0.28);
    text-shadow: 0 0 6px rgba(52,211,153,0.42);
    color: #34D399;
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(52,211,153,0.15),
      0 0 22px  rgba(52,211,153,0.50),
      0 0 40px  rgba(52,211,153,0.15);
    text-shadow: 0 0 16px rgba(52,211,153,0.9), 0 0 32px rgba(52,211,153,0.42);
    color: #34D399;
  }
}

/* نبضة خضراء خفيفة للـ dot قبل كلمة "نشط" */
@keyframes kys-dot-blink {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(52,211,153,0.60); }
  50%       { opacity: 0.85; transform: scale(1.3); box-shadow: 0 0 0 4px rgba(52,211,153,0.0); }
}

.status-active,
[class*="status"][class*="active"],
.vp-active-badge,
.parking-active-card {
  animation: kys-status-active-glow 2.2s ease-in-out infinite !important;
  position: relative;
}

/* نقطة خضراء تضيء قبل كلمة نشط */
.status-active::before,
.vp-active-badge::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34D399;
  margin-inline-end: 5px;
  vertical-align: middle;
  animation: kys-dot-blink 1.8s ease-in-out infinite !important;
  box-shadow: 0 0 6px rgba(52,211,153,0.8);
  flex-shrink: 0;
}

.status-suspended,
[class*="status"][class*="suspended"] {
  animation: kys-pulse-red 2.4s ease-in-out infinite !important;
}

.status-pending,
[class*="status"][class*="pending"] {
  animation: kys-pulse-yellow 2.4s ease-in-out infinite !important;
}

.stat-card-value[style*="color:var(--yellow)"],
.stat-card-value[style*="color: var(--yellow)"] {
  animation: kys-text-glow-yellow 2.4s ease-in-out infinite !important;
}

/* ══════════════════════════════════════════════════════
   4. FORM INPUTS — glow focus + typing effect
══════════════════════════════════════════════════════ */
.form-input {
  transition:
    border-color 0.22s ease,
    box-shadow   0.22s ease,
    background   0.22s ease,
    transform    0.18s cubic-bezier(0.34,1.3,0.64,1) !important;
}

.form-input:hover:not(:focus) {
  border-color: rgba(52,211,153,0.30) !important;
  transform: translateY(-1px) !important;
}

.form-input:focus {
  border-color: var(--accent) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 0 3px rgba(52,211,153,0.16),
    0 0 28px rgba(52,211,153,0.12),
    0 4px 16px rgba(0,0,0,0.3) !important;
}

/* label float animation */
.form-group {
  position: relative;
}

/* ══════════════════════════════════════════════════════
   5. NAV + SIDEBAR ITEMS
   ─────────────────────────────────────────────────────
   مش بنستخدم translateX على الـ sidebar items
   عشان بيطلع برا الـ sidebar ويظهر تحت المحتوى
   بدله: background glow + bar من الجانب
══════════════════════════════════════════════════════ */
.nav-btn:hover {
  transform: translateY(-2px) !important;
}

.sidebar-item,
.admin-nav-item,
.mob-tab,
.admin-mob-tab {
  transition:
    color        0.18s ease,
    background   0.18s ease,
    border-color 0.18s ease,
    box-shadow   0.18s ease !important;
  position: relative;
  overflow: hidden;
  /* مفيش transform — عشان ميطلعش برا */
}

/* Active sidebar glow bar */
.sidebar-item.active,
.admin-nav-item.active {
  box-shadow:
    inset 3px 0 0 var(--accent),
    0 0 20px rgba(52,211,153,0.08) !important;
}
[data-lang="ar"] .sidebar-item.active,
[data-lang="ar"] .admin-nav-item.active {
  box-shadow:
    inset -3px 0 0 var(--accent),
    0 0 20px rgba(52,211,153,0.08) !important;
}

/* Hover: background + bar خفيف من الجانب — مش translateX */
.sidebar-item:hover,
.admin-nav-item:hover {
  background: rgba(52,211,153,0.08) !important;
  box-shadow: inset 2px 0 0 rgba(52,211,153,0.38) !important;
  color: var(--text) !important;
}
[data-lang="ar"] .sidebar-item:hover,
[data-lang="ar"] .admin-nav-item:hover {
  box-shadow: inset -2px 0 0 rgba(52,211,153,0.38) !important;
}

/* Shine sweep خفيف على الـ hover بدل translateX */
.sidebar-item::after,
.admin-nav-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(52,211,153,0.08) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
[data-lang="ar"] .sidebar-item::after,
[data-lang="ar"] .admin-nav-item::after {
  background: linear-gradient(270deg, rgba(52,211,153,0.08) 0%, transparent 100%);
}
.sidebar-item:hover::after,
.admin-nav-item:hover::after {
  opacity: 1;
}

.mob-tab:hover,
.admin-mob-tab:hover {
  transform: translateY(-3px) scale(1.08) !important;
}

.mob-tab.active,
.admin-mob-tab.active {
  filter: drop-shadow(0 0 6px rgba(52,211,153,0.55));
}

/* ══════════════════════════════════════════════════════
   6. PARKING SLOTS
══════════════════════════════════════════════════════ */
.slot {
  transition:
    transform    0.18s cubic-bezier(0.34,1.5,0.64,1),
    box-shadow   0.2s ease,
    border-color 0.18s ease !important;
}

.slot:hover {
  transform: scale(1.12) !important;
  z-index: 2 !important;
  box-shadow: 0 0 0 2px var(--accent), 0 6px 20px rgba(52,211,153,0.22) !important;
}

.slot.my {
  animation: kys-pulse-glow 2s ease-in-out infinite !important;
}

/* ══════════════════════════════════════════════════════
   7. RADIO OPTIONS
══════════════════════════════════════════════════════ */
.radio-opt {
  transition:
    transform    0.18s cubic-bezier(0.34,1.4,0.64,1),
    border-color 0.2s ease,
    box-shadow   0.2s ease,
    background   0.2s ease !important;
}

.radio-opt:hover {
  transform:    translateY(-2px) !important;
  border-color: rgba(52,211,153,0.38) !important;
  box-shadow:   0 6px 20px rgba(52,211,153,0.12) !important;
}

.radio-opt.selected {
  animation: kys-pulse-glow 2.4s ease-in-out infinite !important;
}

/* ══════════════════════════════════════════════════════
   8. USER AVATAR
══════════════════════════════════════════════════════ */
.user-avatar-circle {
  animation: kys-avatar-pulse 3s ease-in-out infinite;
  transition: transform 0.2s cubic-bezier(0.34,1.4,0.64,1) !important;
}

.user-avatar-btn:hover .user-avatar-circle {
  transform: scale(1.15) !important;
  filter: brightness(1.1) !important;
}

/* ══════════════════════════════════════════════════════
   9. LOGO — float on hover + glow
══════════════════════════════════════════════════════ */
.logo-mark {
  transition:
    filter    0.28s ease,
    transform 0.28s cubic-bezier(0.34,1.4,0.64,1) !important;
}
.logo:hover .logo-mark {
  animation: kys-logo-float 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(52,211,153,0.65)) !important;
  transform: scale(1.05);
}

/* ══════════════════════════════════════════════════════
   10. TABLE ROWS — slide subtle, مش pop
   ملاحظة مهمة: الـ .card الـ wrapper مش بيتحرك
   الـ rows بس هي اللي بتتحرك بـ translateX ناعم
══════════════════════════════════════════════════════ */
.admin-table tbody tr,
.res-table tbody tr {
  transition:
    background  0.18s ease,
    transform   0.20s cubic-bezier(0.34,1.2,0.64,1) !important;
}

.admin-table tbody tr:hover,
.res-table tbody tr:hover {
  background: rgba(52,211,153,0.035) !important;
  transform:  translateX(2px) !important;
  box-shadow: inset 2px 0 0 rgba(52,211,153,0.28) !important;
}
[data-lang="ar"] .admin-table tbody tr:hover,
[data-lang="ar"] .res-table tbody tr:hover {
  transform: translateX(-2px) !important;
  box-shadow: inset -2px 0 0 rgba(52,211,153,0.28) !important;
}

/* ══════════════════════════════════════════════════════
   11. USER DROPDOWN ITEMS
══════════════════════════════════════════════════════ */
.user-dd-item {
  transition:
    background  0.16s ease,
    color       0.16s ease !important;
  position: relative;
  overflow: hidden;
  /* مفيش translateX — الـ dropdown ضيق ومش هيتحمل */
}
.user-dd-item:hover {
  background: rgba(52,211,153,0.08) !important;
}
[data-lang="ar"] .user-dd-item:hover {
  background: rgba(52,211,153,0.08) !important;
}

/* ══════════════════════════════════════════════════════
   12. PAGE ENTER ANIMATION — staggered
   ملاحظة: مش بنعمل animation لـ .card (container cards)
   عشان جواها محتوى dynamic بيتحمّل بعد كده
   بنعمل animation بس للكروت الـ standalone الصغيرة
══════════════════════════════════════════════════════ */
.stat-card,
.admin-stat,
.plan-card,
.feature-card,
.sub-card,
.vehicle-item,
.auth-card {
  animation: kys-enter 0.45s cubic-bezier(0.34,1.2,0.64,1) both;
}

.stat-card:nth-child(1) { animation-delay: 0.04s; }
.stat-card:nth-child(2) { animation-delay: 0.09s; }
.stat-card:nth-child(3) { animation-delay: 0.14s; }
.stat-card:nth-child(4) { animation-delay: 0.19s; }

.admin-stat:nth-child(1) { animation-delay: 0.04s; }
.admin-stat:nth-child(2) { animation-delay: 0.09s; }
.admin-stat:nth-child(3) { animation-delay: 0.14s; }
.admin-stat:nth-child(4) { animation-delay: 0.19s; }
.admin-stat:nth-child(5) { animation-delay: 0.24s; }
.admin-stat:nth-child(6) { animation-delay: 0.29s; }

.plan-card:nth-child(1)    { animation-delay: 0.07s; }
.plan-card:nth-child(2)    { animation-delay: 0.14s; }
.plan-card:nth-child(3)    { animation-delay: 0.21s; }

.feature-card:nth-child(1) { animation-delay: 0.05s; }
.feature-card:nth-child(2) { animation-delay: 0.10s; }
.feature-card:nth-child(3) { animation-delay: 0.15s; }
.feature-card:nth-child(4) { animation-delay: 0.20s; }
.feature-card:nth-child(5) { animation-delay: 0.25s; }
.feature-card:nth-child(6) { animation-delay: 0.30s; }

.vehicle-item:nth-child(1) { animation-delay: 0.04s; }
.vehicle-item:nth-child(2) { animation-delay: 0.08s; }
.vehicle-item:nth-child(3) { animation-delay: 0.12s; }

/* ══════════════════════════════════════════════════════
   13. FILTER BUTTONS (admin tabs)
══════════════════════════════════════════════════════ */
.filter-btn {
  transition:
    transform    0.16s cubic-bezier(0.34,1.4,0.64,1),
    background   0.16s ease,
    border-color 0.16s ease,
    color        0.16s ease,
    box-shadow   0.16s ease !important;
}

.filter-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
}

.filter-btn.active {
  box-shadow:
    0 0 18px rgba(52,211,153,0.24),
    0 4px 12px rgba(52,211,153,0.12) !important;
}

/* ══════════════════════════════════════════════════════
   14. MODAL — spring entrance + blur
   ✅ v3: يشتغل مع display:none/flex الأصلي
   ✅ مفيش transition على transform — بيمنع الـ bounce
══════════════════════════════════════════════════════ */

/* Desktop: scale + blur */
@media (min-width: 601px) {
  .modal-overlay.open .modal-box,
  .cmodal-overlay.open .cmodal-box,
  .cmodal-overlay.cmodal-visible .cmodal-box {
    animation: kys-modal-in 0.40s cubic-bezier(0.34,1.3,0.64,1) both !important;
  }
}

/* Mobile: bottom sheet — مفيش transform transition عشان ميبقاش bounce */
@media (max-width: 600px) {
  .modal-overlay.open .modal-box,
  .cmodal-overlay.open .cmodal-box,
  .cmodal-overlay.cmodal-visible .cmodal-box {
    animation: kys-bottom-sheet-in 0.38s cubic-bezier(0.34,1.2,0.64,1) both !important;
  }
}

/* ══════════════════════════════════════════════════════
   15. SCROLLBAR
══════════════════════════════════════════════════════ */
::-webkit-scrollbar-thumb {
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent) !important;
  box-shadow: 0 0 8px rgba(52,211,153,0.50);
}

/* ══════════════════════════════════════════════════════
   16. SCROLL REVEAL — [data-reveal] attribute
   أضف data-reveal="up|left|right" لأي عنصر تحب يتكشف
══════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
}
[data-reveal].revealed {
  opacity: 1;
}
[data-reveal="up"].revealed {
  animation: kys-reveal-up 0.55s cubic-bezier(0.34,1.2,0.64,1) forwards;
}
[data-reveal="left"].revealed {
  animation: kys-reveal-left 0.5s cubic-bezier(0.34,1.2,0.64,1) forwards;
}
[data-reveal="right"].revealed {
  animation: kys-reveal-right 0.5s cubic-bezier(0.34,1.2,0.64,1) forwards;
}

/* stagger للـ reveal */
[data-reveal][data-delay="1"] { animation-delay: 0.05s !important; }
[data-reveal][data-delay="2"] { animation-delay: 0.10s !important; }
[data-reveal][data-delay="3"] { animation-delay: 0.15s !important; }
[data-reveal][data-delay="4"] { animation-delay: 0.20s !important; }
[data-reveal][data-delay="5"] { animation-delay: 0.25s !important; }

/* ══════════════════════════════════════════════════════
   17. FLOATING ICONS / DECORATIVE ELEMENTS
   أضف .kys-float لأي عنصر تحب يطفو
══════════════════════════════════════════════════════ */
.kys-float {
  animation: kys-float 4s ease-in-out infinite;
}
.kys-float:nth-child(2) { animation-delay: 0.8s; animation-duration: 4.5s; }
.kys-float:nth-child(3) { animation-delay: 1.6s; animation-duration: 5s; }

/* heartbeat للعناصر attention */
.kys-heartbeat {
  animation: kys-heartbeat 2.2s ease-in-out infinite;
}

/* gradient animated background */
.kys-gradient-animate {
  background-size: 200% 200%;
  animation: kys-gradient-shift 5s ease infinite;
}

/* ══════════════════════════════════════════════════════
   18. LIGHT MODE OVERRIDES
══════════════════════════════════════════════════════ */
[data-theme="light"] .stat-card:hover,
[data-theme="light"] .admin-stat:hover {
  box-shadow:
    0 12px 32px rgba(0,0,0,0.13),
    0 0 0 1.5px rgba(52,211,153,0.22),
    0 0 20px rgba(52,211,153,0.06) !important;
}

[data-theme="light"] .card:hover {
  box-shadow:
    0 0 0 1px rgba(52,211,153,0.12),
    0 6px 20px rgba(0,0,0,0.08) !important;
  border-color: rgba(52,211,153,0.20) !important;
}

[data-theme="light"] .btn-primary:hover {
  box-shadow:
    0 8px 24px rgba(52,211,153,0.32),
    0 0 0 1px rgba(52,211,153,0.15) !important;
}

/* Status dot in light mode */
[data-theme="light"] .status-active,
[data-theme="light"] [class*="status"][class*="active"],
[data-theme="light"] .vp-active-badge {
  color: #007a52 !important;
}
[data-theme="light"] .status-active::before,
[data-theme="light"] .vp-active-badge::before {
  background: #059669;
  box-shadow: 0 0 5px rgba(52,211,153,0.7);
}

[data-theme="light"] .slot.my {
  animation-name: kys-pulse-glow-light !important;
}
@keyframes kys-pulse-glow-light {
  0%, 100% { box-shadow: 0 0 0 0   rgba(52,211,153,0.0),  0 0 6px  rgba(52,211,153,0.2); }
  50%       { box-shadow: 0 0 0 5px rgba(52,211,153,0.12), 0 0 18px rgba(52,211,153,0.3); }
}

[data-theme="light"] .user-avatar-circle {
  animation-name: kys-avatar-pulse-light;
}
@keyframes kys-avatar-pulse-light {
  0%, 100% { box-shadow: 0 0 0 0   rgba(52,211,153,0.3),  0 0 8px  rgba(52,211,153,0.2); }
  50%       { box-shadow: 0 0 0 3px rgba(52,211,153,0.15), 0 0 16px rgba(52,211,153,0.35); }
}

[data-theme="light"] .card::before,
[data-theme="light"] .stat-card::before,
[data-theme="light"] .plan-card::before,
[data-theme="light"] .feature-card::before,
[data-theme="light"] .admin-stat::before {
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(52,211,153,0.05) 48%,
    rgba(255,255,255,0.15) 52%,
    transparent 65%
  );
}

[data-theme="light"] .admin-table tbody tr:hover,
[data-theme="light"] .res-table tbody tr:hover {
  background: rgba(52,211,153,0.04) !important;
  box-shadow: inset 2px 0 0 rgba(52,211,153,0.3) !important;
}

[data-theme="light"] .sidebar-item:hover,
[data-theme="light"] .admin-nav-item:hover {
  background: rgba(52,211,153,0.06) !important;
}

[data-theme="light"] .user-dd-item:hover {
  background: rgba(52,211,153,0.06) !important;
}

[data-theme="light"] .mob-tab.active,
[data-theme="light"] .admin-mob-tab.active {
  filter: drop-shadow(0 0 5px rgba(52,211,153,0.5));
}

/* ══════════════════════════════════════════════════════
   PAGE TRANSITIONS — v2 Ultra Smooth
   ✅ شغّال على كل المتصفحات والأجهزة
   ✅ GPU-only: opacity + transform + filter فقط
   ✅ prefers-reduced-motion محترم
══════════════════════════════════════════════════════ */

/* Enter animation — opacity + transform فقط
   ✅ بتتطبق على .page-body مش body عشان:
   - الـ navbar (position:fixed) يبقى ظاهر فوراً بدون animation
   - الـ loading progress bar يبان من أول لحظة
   - المستخدم يعرف هو فين في الصفحة على طول

   ❌ مفيش filter — بيكسر position:fixed للـ modals
   CSS spec: filter على parent بيحول fixed children لـ containing block */
@keyframes kys-page-enter {
  0%   { opacity: 0; transform: translateY(14px) scale(0.990); }
  100% { opacity: 1; transform: translateY(0)    scale(1);     }
}

/* الـ navbar يبقى ثابت ظاهر — مش بيتأثر بأي animation */
.navbar {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}

/* الـ animation بتشتغل على .page-body بس — كل المحتوى تحت الـ navbar */
.page-body {
  animation: kys-page-enter 0.40s cubic-bezier(0.34, 1.1, 0.64, 1) both;
  will-change: opacity, transform;
}

/* Reduced motion — مفيش animation خالص */
@media (prefers-reduced-motion: reduce) {
  .page-body {
    animation: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════
   BUTTON GLOW — نيون ينبض خفيف دايماً
   ✅ Primary buttons بس — مش كل الأزرار
══════════════════════════════════════════════════════ */

@keyframes kys-btn-breathe {
  0%, 100% {
    box-shadow:
      0 4px 18px rgba(52,211,153,0.20),
      0 0 0 0   rgba(52,211,153,0.0);
  }
  50% {
    box-shadow:
      0 4px 28px rgba(52,211,153,0.34),
      0 0 0 4px rgba(52,211,153,0.08);
  }
}

.btn-primary {
  animation: kys-btn-breathe 2.8s ease-in-out infinite !important;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  animation: none !important;
  transform:  translateY(-3px) scale(1.018) !important;
  box-shadow:
    0 0 0 3px  rgba(52,211,153,0.20),
    0 8px 32px rgba(52,211,153,0.44),
    0 0 56px   rgba(52,211,153,0.14) !important;
}

.btn-primary:active {
  animation: none !important;
  transform: translateY(1px) scale(0.97) !important;
  box-shadow: 0 2px 10px rgba(52,211,153,0.24) !important;
  transition-duration: 0.07s !important;
}

/* nav-btn.primary نفس الـ breathe */
.nav-btn.primary {
  animation: kys-btn-breathe 3s ease-in-out infinite !important;
}
.nav-btn.primary:hover {
  animation: none !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 0 3px  rgba(52,211,153,0.20),
    0 6px 24px rgba(52,211,153,0.40) !important;
}

/* ── Navbar scrolled glow ── */
.navbar.kys-scrolled {
  box-shadow:
    0 1px 0 rgba(52,211,153,0.08),
    0 8px 40px rgba(0,0,0,0.85) !important;
  border-bottom-color: rgba(52,211,153,0.08) !important;
  background: rgba(0,0,0,0.78) !important;
  backdrop-filter: blur(48px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(200%) !important;
}

/* ── TEXT ACCENT glow خفيف ── */
.text-accent,
.logo-name span {
  text-shadow: 0 0 10px rgba(52,211,153,0.32);
}
.logo:hover .logo-name span {
  text-shadow:
    0 0 8px  rgba(52,211,153,0.65),
    0 0 24px rgba(52,211,153,0.32);
}

/* ══ LIGHT MODE overrides ══ */
@keyframes kys-btn-breathe-light {
  0%, 100% { box-shadow: 0 4px 14px rgba(52,211,153,0.22); }
  50%       { box-shadow: 0 4px 24px rgba(52,211,153,0.38), 0 0 0 3px rgba(52,211,153,0.07); }
}

[data-theme="light"] .btn-primary {
  animation: kys-btn-breathe-light 2.8s ease-in-out infinite !important;
}
[data-theme="light"] .btn-primary:hover {
  animation: none !important;
  box-shadow:
    0 0 0 3px  rgba(52,211,153,0.18),
    0 8px 28px rgba(52,211,153,0.42) !important;
}
[data-theme="light"] .nav-btn.primary {
  animation: kys-btn-breathe-light 3s ease-in-out infinite !important;
}
[data-theme="light"] .navbar.kys-scrolled {
  background: rgba(224,229,240,0.92) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .text-accent,
[data-theme="light"] .logo-name span {
  text-shadow: 0 0 8px rgba(52,211,153,0.22);
}

/* ══════════════════════════════════════════════════════
   ✨ v3 ADDITIONS — Premium Micro-interactions
   ✅ لا يحتوي على transition:transform على modal-box
   ✅ لا يتعارض مع iOS scroll rubber-band
══════════════════════════════════════════════════════ */

/* ── Click Ripple effect ── */
@keyframes kys-click-ripple {
  0%   { transform: scale(0); opacity: 0.35; }
  80%  { transform: scale(2.5); opacity: 0.08; }
  100% { transform: scale(3);   opacity: 0; }
}
.kys-ripple-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(52,211,153,0.60);
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  pointer-events: none;
  animation: kys-click-ripple 0.6s ease-out forwards;
  z-index: 0;
}
[data-theme="light"] .kys-ripple-dot {
  background: rgba(52,211,153,0.5);
}

/* ── Tab bar icon bounce on active ── */
@keyframes kys-tab-bounce {
  0%   { transform: translateY(0)    scale(1); }
  40%  { transform: translateY(-5px) scale(1.15); }
  70%  { transform: translateY(1px)  scale(0.95); }
  100% { transform: translateY(0)    scale(1); }
}
.mob-tab.active .mob-tab-icon,
.admin-mob-tab.active .admin-mob-tab-icon {
  animation: kys-tab-bounce 0.4s cubic-bezier(0.34,1.4,0.64,1) both;
}

/* ── Skeleton loading ── */
@keyframes kys-skeleton {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.kys-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.09) 40%, rgba(255,255,255,0.04) 80%);
  background-size: 800px 100%;
  animation: kys-skeleton 1.6s ease-in-out infinite;
  border-radius: var(--radius-xs);
}
[data-theme="light"] .kys-skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.08) 40%, rgba(0,0,0,0.04) 80%);
  background-size: 800px 100%;
  animation: kys-skeleton 1.6s ease-in-out infinite;
}

/* ── Form label color on focus ── */
.form-group:focus-within .form-label {
  color: var(--accent);
  transition: color 0.22s ease;
}
[data-theme="light"] .form-group:focus-within .form-label {
  color: var(--accent);
}

/* ── Smooth tab fade ── */
.dash-tab.active, .admin-tab.active {
  animation: kys-tab-fade-in 0.28s ease both;
}
@keyframes kys-tab-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Bottom sheet drag handle pulse ── */
.bottom-sheet-handle,
.modal-drag-handle {
  animation: kys-handle-glow 3s ease-in-out infinite;
}
@keyframes kys-handle-glow {
  0%, 100% { opacity: 0.35; transform: scaleX(1); }
  50%       { opacity: 0.6;  transform: scaleX(1.18); }
}

/* ── Filter button gradient border when active ── */
.filter-btn.active {
  position: relative;
}
.filter-btn.active::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), var(--accent2, #34D399));
  z-index: -1;
  opacity: 0.55;
}

/* ── Improved scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.11);
  border-radius: 4px;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent) !important;
  box-shadow: 0 0 6px rgba(52,211,153,0.42);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.13);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--accent) !important;
}

/* ══ LIGHT MODE v3 overrides ══ */
[data-theme="light"] .mob-tab.active,
[data-theme="light"] .admin-mob-tab.active {
  filter: drop-shadow(0 0 5px rgba(52,211,153,0.5));
}