:root {
  --card-bg: #fff;
  --text-main: #222;
  --text-muted: #666;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.12);
  --shadow-button: 0 6px 18px rgba(120, 115, 245, 0.35);

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-pill: 999px;

  --gradient-main: linear-gradient(135deg, #ff6ec4 0%, #7873f5 100%);
  --gradient-hover: linear-gradient(135deg, #7873f5 0%, #ff6ec4 100%);

  --transition-fast: 0.25s ease;
  --transition-main: 0.3s ease;

  --card-width: 300px;
  --image-height: 200px;
  --focus-ring: 0 0 0 3px rgba(120, 115, 245, 0.35);
}

/* الكرت */
.angel-basket {
  width: 100%;
  max-width: var(--card-width);
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  text-align: center;
  font-family: "Cairo", sans-serif;
  transition:
    transform var(--transition-main),
    box-shadow var(--transition-main);
  will-change: transform;
  isolation: isolate;
}

/* تحسين التفاعل للأجهزة التي تدعم hover فقط */
@media (hover: hover) {
  .angel-basket:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
  }
}

/* الصورة */
.basket-image {
  width: 100%;
  height: var(--image-height);
  object-fit: cover;
  display: block;
  background-color: #f5f5f5;
}

/* المحتوى */
.basket-info {
  padding: 16px;
}

.basket-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-main);
  word-break: break-word;
}

.basket-price {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted);
}

/* الزر */
.basket-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gradient-main);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-main),
    filter var(--transition-main),
    background var(--transition-main);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .basket-button:hover {
    background: var(--gradient-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-button);
    filter: brightness(1.02);
  }
}

.basket-button:active {
  transform: scale(0.97);
}

.basket-button:focus-visible {
  box-shadow: var(--focus-ring);
}

/* تحسين إمكانية الوصول */
@media (prefers-reduced-motion: reduce) {
  .angel-basket,
  .basket-button {
    transition: none;
  }

  .angel-basket:hover,
  .basket-button:hover,
  .basket-button:active {
    transform: none;
  }
}

/* الشاشات الصغيرة */
@media (max-width: 480px) {
  .angel-basket {
    max-width: 100%;
    border-radius: 16px;
  }

  .basket-image {
    height: 180px;
  }

  .basket-info {
    padding: 14px;
  }

  .basket-title {
    font-size: 18px;
  }

  .basket-price {
    font-size: 16px;
  }

  .basket-button {
    width: 100%;
    padding: 12px 18px;
    font-size: 15px;
  }
}