:root{
  --brand:#0d6efd;           /* أزرق بوتستراب */
  --brand-ink:#0b2b5e;
  --bg:#f7f7f9;
  --card:#ffffff;
  --muted:#6c757d;
}
body{background:var(--bg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Kufi Arabic", "Noto Sans Arabic", Arial, sans-serif;}
.navbar-brand{font-weight:700; letter-spacing:.3px;}
.hero{
  background: radial-gradient(1200px 500px at 80% -100px, rgba(13,110,253,.12), transparent 60%),
              radial-gradient(800px 400px at -30% -50px, rgba(13,110,253,.08), transparent 60%);
  border-radius: 1.25rem;
}
.carousel-img {
  aspect-ratio: 16 / 9;    /* نسبة ثابتة */
  width: 100%;
  height: auto;            /* يُحسب تلقائيًا حسب النسبة */
  object-fit: contain;     /* أو cover حسب رغبتك */
  background: #111;
  border-radius: 20px;
}
.carousel-item img {
  width: 100%;
  height: 400px; /* حدد ارتفاع ثابت مناسب */
  object-fit: cover; /* يملأ الصورة بالمربع مع قص الأطراف */
  border-radius: 15px; /* للحفاظ على الشكل الأنيق */
}
/* إطار موحّد لكل شرائح السلايدر */
.slider-frame {
  height: clamp(280px, 40vw, 520px);   /* ارتفاع ثابت مع تجاوب */
  min-height: 300px;                   /* حد أدنى */
  position: relative;
  overflow: hidden;
  border-radius: 16px;                  /* نفس تنعيم الحواف */
}

/* الصورة داخل الإطار */
.slider-frame > img {
  position: absolute;
  inset: 0;               /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;       /* يملأ الإطار ويقص الزائد */
  display: block;
}

/* منع أي ستايلات قديمة من إفساد المقياس */
.carousel-item img {
  height: auto !important;  /* سنعتمد على .slider-frame > img فقط */
}


.carousel-caption {
  background: linear-gradient( to top, rgba(0,0,0,.55), rgba(0,0,0,.05) );
  border-radius: .75rem;
  padding: 1rem 1.25rem;
}

.card{
  border:0; border-radius:1rem; background:var(--card);
  box-shadow: 0 6px 20px rgba(13,110,253,.06);
}
.card-img-top{
  border-top-left-radius:1rem; border-top-right-radius:1rem;
  height: 200px; object-fit: cover; background:#e9ecef;
}
.badge{border-radius:.6rem}
.btn-shadow{box-shadow:0 8px 20px rgba(13,110,253,.25)}
footer{color:var(--muted)}
.skeleton{
  background:linear-gradient(90deg,#eee, #f5f5f5 40%, #eee 60%); background-size:200% 100%; animation:shine 1.2s infinite;
}
@keyframes shine{0%{background-position:200% 0}100%{background-position:-200% 0}}
.toast-float{
  position: fixed; top: 12px; inset-inline-start: 50%;
  transform: translateX(-50%); z-index: 1080; min-width: 260px;
}