/* ================================================= */
/*   VELAR EMPTY CART — نسخة جديدة (تصميم مسطح موحّد)   */
/* ================================================= */

:root{
  --ve-blue:#0a58ff;
  --ve-dark:#111827;
  --ve-muted:#6b7280;
  --ve-border:rgba(17,24,39,.12);
  --ve-radius:14px;
}

/* الحاوية الرئيسية */
.mt-20.flex.h-96.items-center.justify-center{
  height:auto !important;
  min-height:60vh;
  margin-top:40px !important;
  padding:20px;
}

.mt-20.flex.h-96.items-center.justify-center>div{
  width:100%;
  max-width:420px;
  background:#fff;
  border:1px solid var(--ve-border);
  border-radius:var(--ve-radius);
  padding:48px 32px;
  text-align:center;
}

.mt-20.flex.h-96.items-center.justify-center .flex.flex-col.items-center{
  gap:18px !important;
}

/* دايرة خلفية خفيفة خلف الأيقونة */
.mt-20.flex.h-96.items-center.justify-center div[height="300"]{
  display:flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:96px !important;
  border-radius:50%;
  background:rgba(10,88,255,.06);
  margin:0 auto;
  animation:ve-float 3s ease-in-out infinite;
}

/* إخفاء أيقونة اللوتي القديمة (الصندوق المتحرك) بالكامل */
.mt-20.flex.h-96.items-center.justify-center div[height="300"] svg{
  display:none !important;
}

/* أيقونة شنطة التسوق الجديدة */
.mt-20.flex.h-96.items-center.justify-center div[height="300"]::before{
  content:"";
  width:44px;
  height:44px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 8h12l-1 12.5a1.5 1.5 0 0 1-1.5 1.5h-8a1.5 1.5 0 0 1-1.5-1.5L6 8z' stroke='%230a58ff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2' stroke='%230a58ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 12h6' stroke='%230a58ff' stroke-width='1.4' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
}

@keyframes ve-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

@media (prefers-reduced-motion: reduce){
  .mt-20.flex.h-96.items-center.justify-center div[height="300"]{
    animation:none;
  }
}

/* ================================================= */
/*   نسخة تانية للسلة الفارغة (القائمة الجانبية)         */
/*   [data-cart="empty-state"]                        */
/* ================================================= */

[data-cart="empty-state"]{
  height:auto !important;
  min-height:0 !important;
  gap:14px !important;
  padding:26px 16px !important;
  background:#fff;
  border:1px solid var(--ve-border);
  border-radius:12px;
}

[data-cart="empty-animation-wrapper"] .flex.flex-col.items-center{
  gap:10px !important;
}

[data-cart="empty-animation-wrapper"] div[height="300"]{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px !important;
  border-radius:50%;
  background:rgba(10,88,255,.06);
  margin:0 auto;
  animation:ve-float 3s ease-in-out infinite;
}

[data-cart="empty-animation-wrapper"] div[height="300"] svg{
  display:none !important;
}

[data-cart="empty-animation-wrapper"] div[height="300"]::before{
  content:"";
  width:26px;
  height:26px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 8h12l-1 12.5a1.5 1.5 0 0 1-1.5 1.5h-8a1.5 1.5 0 0 1-1.5-1.5L6 8z' stroke='%230a58ff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2' stroke='%230a58ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 12h6' stroke='%230a58ff' stroke-width='1.4' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
}

[data-cart="empty-title"]{
  font-family:"Cairo",system-ui,sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  color:var(--ve-dark) !important;
  margin:0 !important;
}

[data-cart="empty-subtitle"]{
  font-family:"Cairo",system-ui,sans-serif !important;
  font-size:11.5px !important;
  font-weight:500 !important;
  color:var(--ve-muted) !important;
  margin:0 !important;
  line-height:1.6 !important;
}

@media (prefers-reduced-motion: reduce){
  [data-cart="empty-animation-wrapper"] div[height="300"]{
    animation:none;
  }
}

/* العنوان */
.mt-20.flex.h-96.items-center.justify-center h1{
  font-family:"Cairo",system-ui,sans-serif !important;
  font-size:20px !important;
  font-weight:800 !important;
  color:var(--ve-dark) !important;
  margin:4px 0 0 !important;
}

/* الوصف */
.mt-20.flex.h-96.items-center.justify-center p{
  font-family:"Cairo",system-ui,sans-serif !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  color:var(--ve-muted) !important;
  margin:0 !important;
  line-height:1.7 !important;
}

@media (max-width:480px){
  .mt-20.flex.h-96.items-center.justify-center{
    margin-top:24px !important;
    padding:14px;
  }
  .mt-20.flex.h-96.items-center.justify-center>div{
    padding:36px 22px;
  }
}

/* ================================================= */
/*   نسخة مصغّرة — لما تكون جوه القائمة الجانبية        */
/* ================================================= */

.pointer-events-auto .mt-20.flex.h-96.items-center.justify-center{
  height:auto !important;
  min-height:0 !important;
  margin-top:16px !important;
  padding:0 14px !important;
}

.pointer-events-auto .mt-20.flex.h-96.items-center.justify-center>div{
  max-width:100%;
  padding:24px 14px;
  border-radius:12px;
}

.pointer-events-auto .mt-20.flex.h-96.items-center.justify-center .flex.flex-col.items-center{
  gap:10px !important;
}

.pointer-events-auto .mt-20.flex.h-96.items-center.justify-center div[height="300"]{
  width:56px;
  height:56px !important;
}

.pointer-events-auto .mt-20.flex.h-96.items-center.justify-center div[height="300"]::before{
  width:26px;
  height:26px;
}

.pointer-events-auto .mt-20.flex.h-96.items-center.justify-center h1{
  font-size:15px !important;
}

.pointer-events-auto .mt-20.flex.h-96.items-center.justify-center p{
  font-size:11.5px !important;
}