/* Add custom CSS styles below */ 


/* تصميم الكرت */
.olla-card {
  border: 1px solid #ddd;             /* حدود خفيفة رمادية */
  border-radius: 10px;                /* زوايا دائرية */
  padding: 8px;                       /* مسافة داخلية */
  background: #fff;                   /* خلفية بيضاء */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); 
  overflow: hidden;                   /* يمنع خروج المحتوى */
  transition: transform 0.3s ease, 
              box-shadow 0.3s ease;   /* حركات سلسة عند الهوفر */
}

/* عند تمرير الماوس */
.olla-card:hover {
  transform: translateY(-5px);        /* يرتفع الكرت شوي */
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* الصور داخل الكرت */
.olla-card img {
  aspect-ratio: 12/17 !important;     /* نسبة ثابتة (ملابس طويلة) */
  width: 100%;                        /* العرض كامل */
  height: auto;
  object-fit: cover;                  /* الصورة تملأ المساحة */
  display: block;
  border-radius: 8px;                 /* حواف ناعمة للصورة */
  transition: transform 0.3s ease;    /* حركة تكبير ناعمة */
}

/* تكبير الصورة عند الهوفر */
.olla-card:hover img {
  transform: scale(1.05);
}

@media (hover: none) {
  .olla-card:active {
    transform: scale(0.97);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  }
}
/*-------------------*/
.card-info {
  padding: 6px 4px;
}

.card-info h3 {
  font-size: 14px;
  margin: 4px 0;
  color: #333;
}

.card-info p {
  font-size: 12px;
  color: #777;
}

/* الانميشن الجديد */
/* إضافات بسيطة على CSS الحالي لديك */

/* حالة الدخول التدريجي */
.olla-card {
  transform: translateY(10px);
  opacity: 0;
  will-change: transform, box-shadow;
}
.olla-card.is-in {
  transform: translateY(0);
  opacity: 1;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}

/* لمسة 3D: نخلي التحويلات تنعكس على الأطفال */
.olla-card {
  transform-style: preserve-3d;
  perspective: 800px;
}

/* طبقة الموجة (Ripple) */
.olla-card {
  position: relative;
}
.olla-card .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: .35;
  background: currentColor;
  pointer-events: none;
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple {
  to { transform: scale(6); opacity: 0; }
}

/* بارالاكس للصورة عند التحريك */
.olla-card img {
  will-change: transform, opacity;
  transition: transform .2s ease; /* عند توقف الماوس ترجع مكانها */
}

/* توضيح الفوكس للكيبورد */
.olla-card:focus-visible {
  outline: 2px solid #2684ff;
  outline-offset: 2px;
}


/*----------*/
/* موجة Ripple باللون الزهري الغامق */
.olla-card .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: .35;
  background: #C2185B;   /* زهري غامق */
  pointer-events: none;
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple {
  to { transform: scale(6); opacity: 0; }
}
/*------------*/
/* إعداد الموجة */
.olla-card {
  position: relative;        /* مهم عشان الموجة تتمركز داخل الكرت */
  overflow: hidden;          /* يخلي الموجة ما تطلع برا الكرت */
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(199, 21, 133, 0.5);  /* زهري غامق شفاف */
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;      /* يمنع الموجة من التدخل بالضغطات */
}

@keyframes ripple-animation {
  to {
    transform: scale(4);     /* حجم الانتشار */
    opacity: 0;              /* تتلاشى */
  }
}
/* حط هذا على عنصر اللوجو */
.logo {
  position: relative;
  display: inline-block;
  animation: shine 3s infinite linear;
}

/* تأثير اللمعة */
@keyframes shine {
  0% {
    filter: brightness(1) drop-shadow(0 0 2px #fff);
  }
  50% {
    filter: brightness(1.5) drop-shadow(0 0 10px #ffd700);
  }
  100% {
    filter: brightness(1) drop-shadow(0 0 2px #fff);
  }
}
``