/* ─── Bundles (عروض الكورسات) — home banner + bundle page ─────────────────── */

.b-section { padding-top: calc(var(--ds-header-h, 72px) + 20px); }
.b-section[hidden] { display: none !important; }
.b-wrap { width: min(1200px, 100%); margin-inline: auto; padding-inline: var(--ds-gutter, 16px); }

/* Home carousel */
.b-track {
  display: flex;
  align-items: flex-start; /* slides keep their own height — no stretched grey area under shorter banners */
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.b-track::-webkit-scrollbar { display: none; }

.b-slide {
  --b-color: #026776;
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-height: 240px;
  border-radius: 28px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--b-color), color-mix(in srgb, var(--b-color) 80%, #000) 55%, #052532);
  box-shadow: 0 16px 40px rgba(5, 37, 50, .18);
  transition: transform .2s ease;
}
.b-slide:hover { color: #fff; text-decoration: none; transform: translateY(-2px); }
/* Two banners side by side from tablet up; one full-width banner on phones */
@media (min-width: 640px) { .b-slide { flex-basis: calc(50% - 8px); } }

/* Designed image banner: natural aspect ratio, no overlay */
.b-slide--image { min-height: 0; background: #F1F5F9; }
.b-slide--image img { display: block; width: 100%; height: auto; }
/* While the banner image downloads, reserve a typical banner shape with a soft shimmer */
.b-slide--image img:not([data-loaded]) { aspect-ratio: 2 / 1; object-fit: cover; }
.b-slide--image:has(img:not([data-loaded])) { animation: b-shimmer 1.2s ease-in-out infinite alternate; }
@keyframes b-shimmer { from { background: #F1F5F9; } to { background: #E2E8F0; } }
.b-owned {
  position: absolute; top: 12px; left: 12px;
  background: #059669; color: #fff; font-size: 13px; font-weight: 900;
  padding: 6px 12px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.bp-hero.b-slide--image { min-height: 0; }
.bp-title { font-size: clamp(20px, 2.6vw, 26px); font-weight: 900; color: #052532; margin: 0; }
.bp-subtitle { color: #57606A; font-weight: 700; margin: 4px 0 0; }

.b-slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-slide__shade { position: absolute; inset: 0; background: linear-gradient(to left, rgba(0,0,0,.75), rgba(0,0,0,.35) 60%, rgba(0,0,0,.1)); }
.b-slide__glow { position: absolute; width: 200px; height: 200px; border-radius: 50%; filter: blur(40px); pointer-events: none; }
.b-slide__glow--a { left: -60px; top: -60px; background: rgba(255,255,255,.14); }
.b-slide__glow--b { left: 30%; bottom: -90px; background: rgba(252,211,77,.22); }

.b-slide__body {
  position: relative;
  height: 100%;
  min-height: 240px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.b-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.b-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.2); backdrop-filter: blur(8px);
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800;
}
.b-badge { background: #FBBF24; color: #451A03; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.b-title { font-size: clamp(20px, 2.6vw, 26px); font-weight: 900; line-height: 1.3; margin: 0; color: #fff; }
.b-subtitle { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.82); margin: 4px 0 0; }
.b-faces { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.b-faces__stack { display: flex; }
.b-faces__stack img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.85); background: rgba(255,255,255,.3); margin-inline-start: -10px; }
.b-faces__stack img:first-child { margin-inline-start: 0; }
.b-ends { font-size: 12px; font-weight: 800; color: #FDE68A; display: inline-flex; gap: 5px; align-items: center; }

.b-price { display: flex; align-items: baseline; gap: 6px; }
.b-price strong { font-size: 28px; font-weight: 900; line-height: 1; }
.b-price small { font-size: 13px; font-weight: 700; }
.b-price del { font-size: 14px; color: rgba(255,255,255,.6); }
.b-save { font-size: 12px; font-weight: 900; color: #A7F3D0; margin-top: 4px; }
.b-cta {
  background: #fff; color: var(--b-color);
  padding: 10px 18px; border-radius: 16px; font-weight: 900; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.b-cta--owned { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }

.b-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.b-dots button { width: 7px; height: 7px; border-radius: 99px; border: 0; padding: 0; background: #CBD5E1; transition: all .2s; cursor: pointer; }
.b-dots button.is-active { width: 22px; background: var(--ds-primary, #026776); }

/* ─── Bundle page ─────────────────────────────────────────────────────────── */
.bp-page { padding-top: calc(var(--ds-header-h, 72px) + 20px); padding-bottom: 120px; background: var(--ds-bg, #F4F7F8); min-height: 100vh; }
.bp-grid { display: grid; gap: 24px; }
@media (min-width: 992px) { .bp-grid { grid-template-columns: 1fr 360px; align-items: start; } }

.bp-hero { min-height: 280px; }
.bp-hero .b-slide__body { min-height: 280px; }

.bp-card { background: #fff; border: 1px solid #E7ECEE; border-radius: 24px; padding: 20px; box-shadow: 0 4px 16px rgba(5,37,50,.04); }
.bp-card h2 { font-size: 18px; font-weight: 900; color: #052532; margin: 0 0 14px; }
.bp-desc { color: #57606A; font-weight: 600; line-height: 1.9; white-space: pre-line; margin: 0; }

.bp-course { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 18px; border: 1px solid #EEF2F3; text-decoration: none; color: inherit; transition: border-color .2s; }
.bp-course + .bp-course { margin-top: 10px; }
.bp-course:hover { border-color: var(--ds-primary, #026776); text-decoration: none; color: inherit; }
.bp-course__img { position: relative; width: 128px; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #F1F5F9; flex-shrink: 0; }
.bp-course__img img { width: 100%; height: 100%; object-fit: cover; }
.bp-course__num { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; color: var(--ds-primary, #026776); }
.bp-course__name { font-size: 15px; font-weight: 900; color: #052532; margin: 0; }
.bp-course__meta { font-size: 13px; color: #8A949E; font-weight: 700; margin-top: 2px; }
.bp-course__price { font-size: 13px; font-weight: 700; color: #94A3B8; text-decoration: line-through; margin-top: 4px; display: inline-block; }
.bp-course__owned { font-size: 13px; font-weight: 900; color: #059669; margin-top: 4px; display: inline-flex; gap: 4px; align-items: center; }

.bp-buy { position: sticky; top: calc(var(--ds-header-h, 72px) + 16px); }
.bp-buy__price { display: flex; align-items: baseline; gap: 8px; }
.bp-buy__price strong { font-size: 34px; font-weight: 900; color: var(--b-color, #026776); }
.bp-buy__price del { color: #94A3B8; font-weight: 700; }
.bp-buy__save { background: #ECFDF5; color: #047857; font-weight: 900; border-radius: 14px; padding: 10px 12px; margin: 12px 0; font-size: 14px; }
.bp-buy__note { color: #8A949E; font-size: 13px; font-weight: 700; margin: 8px 0 0; }
.bp-warn { background: #FFFBEB; color: #B45309; font-weight: 800; font-size: 13px; border-radius: 14px; padding: 10px 12px; margin-top: 12px; }
.bp-btn {
  width: 100%; border: 0; border-radius: 16px; padding: 14px; font-weight: 900; font-size: 15px;
  color: #fff; background: var(--b-color, #026776); display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: filter .2s; margin-top: 10px;
}
.bp-btn:hover { filter: brightness(1.08); }
.bp-btn:disabled { opacity: .6; cursor: default; }
.bp-btn--alt { background: #F1F5F9; color: #052532; }
.bp-btn--owned { background: #059669; cursor: default; }

.bp-state { text-align: center; padding: 80px 16px; color: #8A949E; font-weight: 800; }

@media (max-width: 991px) {
  .bp-buy { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 50; border-radius: 22px 22px 0 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(5,37,50,.12); }
  .bp-buy .bp-buy__save, .bp-buy .bp-buy__note, .bp-buy h2 { display: none; }
  .bp-buy__row { display: flex; align-items: center; gap: 12px; }
  .bp-buy__row .bp-btn { margin-top: 0; flex: 1; }
  .bp-buy__price strong { font-size: 24px; }
  .bp-course__img { width: 104px; }
}