:root {
  --brand: #1f5fa8;
  --brand-dark: #133f73;
  --accent: #f5a623;
}

body.lang-ar { font-family: 'Cairo', 'Segoe UI', sans-serif; }
body.lang-en { font-family: 'Segoe UI', system-ui, sans-serif; }

.navbar-brand { letter-spacing: .3px; }

/* Category / track selection tiles */
.tile-card {
  border: none;
  border-radius: 1rem;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.tile-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.tile-card .card-body { padding: 1.75rem 1.25rem; }

/* Section badges */
.badge-lectures { background: var(--brand); }
.badge-labs { background: var(--accent); color:#212529; }
.badge-others { background:#6c757d; }

/* Lab guided-flow stepper */
.step-list { counter-reset: step; list-style: none; padding-inline-start: 0; }
.step-list li {
  position: relative;
  padding-inline-start: 3rem;
  margin-bottom: 1.25rem;
}
.step-list li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}

/* Media gallery */
.gallery-thumb {
  width: 100%; height: 160px; object-fit: cover;
  border-radius: .6rem; cursor: pointer;
  transition: opacity .15s;
}
.gallery-thumb:hover { opacity: .85; }

/* Responsive video wrapper fallback (ratio helper already used, this is a safety net) */
.video-wrapper { position: relative; width: 100%; padding-top: 56.25%; }
.video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 576px) {
  .tile-card .card-body { padding: 1.25rem 1rem; }
}