/* ─── 1. تصميم بانر الصفحة الجديد ─── */
.gifts-banner-section {
  position: relative;
  background: var(--bg-soft);
  padding: 60px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.gifts-banner-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.gifts-page-title {
  font-size: 32px;
  font-weight: 800;
  color: #5e35b1;
  margin-bottom: 12px;
}
.gifts-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.gifts-breadcrumb a {
  color: var(--muted);
  transition: color 0.2s;
}
.gifts-breadcrumb a:hover {
  color: var(--primary);
}
.breadcrumb-separator {
  font-size: 11px;
  color: var(--muted);
}
.breadcrumb-current {
  color: var(--text);
}

/* الأشكال الخلفية الباهتة */
.gifts-banner-overlay-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
}
.banner-shape-left {
  position: absolute;
  top: 15%;
  left: 5%;
  width: 120px;
  height: 120px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1'><circle cx='12' cy='12' r='8'/><ellipse cx='12' cy='12' rx='10' ry='3' transform='rotate(30 12 12)'/></svg>")
    no-repeat center/contain;
}
.banner-shape-right {
  position: absolute;
  top: 10%;
  right: 4%;
  width: 110px;
  height: 110px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1'><polygon points='12,2 22,22 2,22'/></svg>")
    no-repeat center/contain;
}
.banner-floating-books {
  position: absolute;
  bottom: -10px;
  right: 12%;
  opacity: 0.85;
  animation: giftBooksFloat 4s ease-in-out infinite;
}
@keyframes giftBooksFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ─── 2. تصميم شبكة كروت الهدايا ─── */
.gifts-cards-wrapper-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 20px 0;
}

.gift-item-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 35, 80, 0.06);
  display: flex;
  flex-direction: column;
  transition: all 0.3s var(--ease);
  max-width: 380px;
  margin: 0 auto;
  width: 100%;
}
.gift-item-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(20, 35, 80, 0.12);
  border-color: rgba(94, 53, 177, 0.2);
}

.gift-card-media-header {
  position: relative;
  aspect-ratio: 1.2 / 1;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  border-bottom: 1px solid #f6f8fc;
}
.gift-thumbnail {
  max-height: 100%;
  object-fit: contain;
  width: auto;
}
.gift-tag-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #e91e63;
  color: #ffffff;
  padding: 4px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
}

.gift-card-body-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gift-category-label {
  color: #ff0000;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 10px;
}
.gift-title-heading {
  font-size: 19px;
  font-weight: 800;
  color: #4a148c;
  line-height: 1.5;
  margin-bottom: 24px;
  min-height: 56px;
}

.gift-card-footer-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed var(--border);
  padding-top: 18px;
}
.btn-view-gift-action {
  background-color: #007bff;
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  transition: background-color 0.2s;
}
.btn-view-gift-action:hover {
  background-color: #0056b3;
}

.gift-instructor-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.instructor-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.instructor-avatar-holder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: contain;
  background-position: center;
  border: 1px solid var(--border);
  background-color: var(--bg-soft);
}

/* ─── Responsive ─── */
@media (min-width: 640px) {
  .gifts-cards-wrapper-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1025px) {
  .gifts-banner-section {
    padding: 80px 0;
  }
  .gifts-page-title {
    font-size: 38px;
  }
  .gifts-cards-wrapper-layout {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

/* ─── 3. Dark Mode — شامل كل الحالات ─── */

/* ── Banner ── */
body.dark .gifts-banner-section,
html.dark .gifts-banner-section,
[data-theme="dark"] .gifts-banner-section,
[data-bs-theme="dark"] .gifts-banner-section {
  background: #161b3d !important;
  border-bottom-color: #2b3566 !important;
}

body.dark .gifts-page-title,
html.dark .gifts-page-title,
[data-theme="dark"] .gifts-page-title,
[data-bs-theme="dark"] .gifts-page-title {
  color: #b39ddb !important;
}

/* ── الكارد نفسه ── */
body.dark .gift-item-card,
html.dark .gift-item-card,
[data-theme="dark"] .gift-item-card,
[data-bs-theme="dark"] .gift-item-card {
  background: #1c2347 !important;
  border-color: #2b3566 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
body.dark .gift-item-card:hover,
html.dark .gift-item-card:hover,
[data-theme="dark"] .gift-item-card:hover,
[data-bs-theme="dark"] .gift-item-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(179, 157, 219, 0.35) !important;
}

/* ── هيدر الكارد (منطقة الصورة) ── */
body.dark .gift-card-media-header,
html.dark .gift-card-media-header,
[data-theme="dark"] .gift-card-media-header,
[data-bs-theme="dark"] .gift-card-media-header {
  background-color: #161b3d !important;
  border-bottom-color: #2b3566 !important;
}

/* ── بودي الكارد ── */
body.dark .gift-card-body-content,
html.dark .gift-card-body-content,
[data-theme="dark"] .gift-card-body-content,
[data-bs-theme="dark"] .gift-card-body-content {
  background: #1c2347 !important;
}

/* ── العنوان داخل الكارد ── */
body.dark .gift-title-heading,
html.dark .gift-title-heading,
[data-theme="dark"] .gift-title-heading,
[data-bs-theme="dark"] .gift-title-heading {
  color: #e0e4f5 !important;
}

/* ── التصنيف (category label) ── */
body.dark .gift-category-label,
html.dark .gift-category-label,
[data-theme="dark"] .gift-category-label,
[data-bs-theme="dark"] .gift-category-label {
  color: #ff6b6b !important;
}

/* ── الخط الفاصل في الفوتر ── */
body.dark .gift-card-footer-meta,
html.dark .gift-card-footer-meta,
[data-theme="dark"] .gift-card-footer-meta,
[data-bs-theme="dark"] .gift-card-footer-meta {
  border-top-color: #2b3566 !important;
}

/* ── اسم المدرب ── */
body.dark .instructor-name,
html.dark .instructor-name,
[data-theme="dark"] .instructor-name,
[data-bs-theme="dark"] .instructor-name {
  color: #8a93bf !important;
}

/* ── أفاتار المدرب ── */
body.dark .instructor-avatar-holder,
html.dark .instructor-avatar-holder,
[data-theme="dark"] .instructor-avatar-holder,
[data-bs-theme="dark"] .instructor-avatar-holder {
  border-color: #2b3566 !important;
  background-color: #161b3d !important;
}

/* ── زر عرض الهدية ── */
body.dark .btn-view-gift-action,
html.dark .btn-view-gift-action,
[data-theme="dark"] .btn-view-gift-action,
[data-bs-theme="dark"] .btn-view-gift-action {
  background-color: #1a6fd4 !important;
}
body.dark .btn-view-gift-action:hover,
html.dark .btn-view-gift-action:hover,
[data-theme="dark"] .btn-view-gift-action:hover,
[data-bs-theme="dark"] .btn-view-gift-action:hover {
  background-color: #1558b0 !important;
}

/* ── الحالة 5: prefers-color-scheme للمتصفحات بدون class ── */
@media (prefers-color-scheme: dark) {
  .gifts-banner-section {
    background: #161b3d !important;
    border-bottom-color: #2b3566 !important;
  }
  .gifts-page-title {
    color: #b39ddb !important;
  }
  .gift-item-card {
    background: #1c2347 !important;
    border-color: #2b3566 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  }
  .gift-card-media-header {
    background-color: #161b3d !important;
    border-bottom-color: #2b3566 !important;
  }
  .gift-card-body-content {
    background: #1c2347 !important;
  }
  .gift-title-heading {
    color: #e0e4f5 !important;
  }
  .gift-category-label {
    color: #ff6b6b !important;
  }
  .gift-card-footer-meta {
    border-top-color: #2b3566 !important;
  }
  .instructor-name {
    color: #8a93bf !important;
  }
  .instructor-avatar-holder {
    border-color: #2b3566 !important;
    background-color: #161b3d !important;
  }
  .btn-view-gift-action {
    background-color: #1a6fd4 !important;
  }
  .btn-view-gift-action:hover {
    background-color: #1558b0 !important;
  }
}