/* =========================================================
   Inshad Mohammed Al-Abdullah - elegant dark + gold theme
   (shared design tokens + public site styles)
   ========================================================= */
:root {
  --inshad-primary: #C9A24B;       /* warm gold */
  --inshad-primary-dark: #A9822F;  /* deeper gold, for hovers/text-on-light */
  --inshad-accent: #E8C874;        /* lighter gold accent */
  --inshad-bg: #0F0D0A;            /* near-black warm background */
  --inshad-surface: #1B1712;       /* elevated dark surface (cards, header) */
  --inshad-surface-2: #262019;     /* slightly lighter surface (hover states) */
  --inshad-text: #F5EFE2;          /* warm off-white text */
  --inshad-muted: #B8AC94;         /* muted warm gray-gold */
  --inshad-border: #3A3226;        /* subtle warm border on dark surfaces */
  --inshad-gradient: linear-gradient(135deg, var(--inshad-primary) 0%, var(--inshad-accent) 100%);
  --inshad-radius: 18px;
  --inshad-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --inshad-shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.6);
}

body {
  background: var(--inshad-bg);
  color: var(--inshad-text);
  font-family: "Segoe UI", Tahoma, "Cairo", Arial, sans-serif;
}

html[dir="rtl"] body {
  font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
}

a { text-decoration: none; }

/* ---------------- Top header ---------------- */
.inshad-header {
  background: var(--inshad-surface);
  border-bottom: 1px solid var(--inshad-border);
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 12px rgba(31, 41, 55, 0.05);
}

.inshad-brand img { height: 40px; }

.inshad-menu-toggle {
  border: none;
  background: var(--inshad-gradient);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.inshad-menu-toggle:hover { transform: translateY(-2px); box-shadow: var(--inshad-shadow); color:#fff; }

.inshad-search-form .form-control {
  border-radius: 999px;
  border: 1px solid var(--inshad-border);
  padding-inline-start: 1.1rem;
}
.inshad-search-form .btn {
  border-radius: 999px;
  background: var(--inshad-gradient);
  border: none;
  color: #fff;
  padding-inline: 1.4rem;
}

.inshad-lang-switch {
  border: 1px solid var(--inshad-border);
  border-radius: 999px;
  padding: .35rem 1rem;
  font-weight: 600;
  color: var(--inshad-primary);
  background: var(--inshad-surface-2);
  transition: background .2s ease, color .2s ease;
}
.inshad-lang-switch:hover { background: var(--inshad-gradient); color: #1B1712; }

/* ---------------- Category sidebar (offcanvas) ---------------- */
.inshad-offcanvas {
  background: var(--inshad-surface);
  color: var(--inshad-text);
}
.inshad-offcanvas .offcanvas-header {
  background: var(--inshad-gradient);
  color: #1B1712;
}
.inshad-offcanvas .offcanvas-body {
  background: var(--inshad-surface);
}
.inshad-cat-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem 1rem;
  border-radius: 12px;
  color: var(--inshad-text);
  margin-bottom: .25rem;
  transition: background .15s ease, transform .15s ease;
}
.inshad-cat-link:hover { background: var(--inshad-bg); transform: translateX(2px); color: var(--inshad-primary); }
html[dir="rtl"] .inshad-cat-link:hover { transform: translateX(-2px); }
.inshad-cat-link.active { background: var(--inshad-gradient); color: #1B1712; font-weight: 600; }
.inshad-cat-link .badge { background: rgba(201,162,75,.15); color: var(--inshad-primary); }
.inshad-cat-link.active .badge { background: rgba(27,23,18,.2); color: #1B1712; }

/* ---------------- Hero (portrait banner) ---------------- */
.inshad-hero-banner {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(160deg, var(--inshad-surface) 0%, #120F0B 100%);
  border: 1px solid var(--inshad-border);
  border-radius: 24px;
  padding: 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.inshad-hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 15%, rgba(201,162,75,.14), transparent 55%);
  pointer-events: none;
}
.inshad-hero-photo-wrap {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  border-radius: 20px;
  padding: 4px;
  background: var(--inshad-gradient);
  box-shadow: var(--inshad-shadow);
}
.inshad-hero-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 17px;
  display: block;
}
.inshad-hero-text { position: relative; flex: 1; min-width: 0; }
.inshad-hero-text h1 {
  font-weight: 800;
  margin-bottom: .5rem;
  background: var(--inshad-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.inshad-hero-text p { color: var(--inshad-muted); margin-bottom: 0; }

@media (max-width: 767.98px) {
  .inshad-hero-banner { flex-direction: column; text-align: center; padding: 1.75rem 1.25rem; }
  .inshad-hero-photo-wrap { width: 150px; height: 150px; }
}

/* ---------------- Content cards ---------------- */
.inshad-card {
  background: var(--inshad-surface);
  border-radius: var(--inshad-radius);
  overflow: hidden;
  box-shadow: var(--inshad-shadow);
  border: 1px solid var(--inshad-border);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
  height: 100%;
  animation: inshadFadeInUp .5s ease both;
}
.inshad-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: var(--inshad-shadow-hover);
}

.inshad-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
}
.inshad-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.inshad-card:hover .inshad-card-media img { transform: scale(1.08); }

.inshad-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, rgba(31,41,55,.55), rgba(31,41,55,0) 55%);
  opacity: 0;
  transition: opacity .3s ease;
}
.inshad-card:hover .inshad-play-overlay { opacity: 1; }

.inshad-play-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--inshad-gradient);
  color: #1B1712;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transform: scale(.8);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.inshad-card:hover .inshad-play-btn { transform: scale(1); }

.inshad-card-body { padding: 1rem 1.1rem 1.2rem; }
.inshad-card-category {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--inshad-primary);
  background: rgba(201,162,75,.14);
  border-radius: 999px;
  padding: .2rem .7rem;
  margin-bottom: .5rem;
}
.inshad-card-title {
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: .35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.inshad-card-desc {
  color: var(--inshad-muted);
  font-size: .85rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.inshad-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .6rem;
  font-size: .78rem;
  color: var(--inshad-muted);
}

@keyframes inshadFadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* stagger card entrance a bit */
.inshad-grid .inshad-card:nth-child(1) { animation-delay: .02s; }
.inshad-grid .inshad-card:nth-child(2) { animation-delay: .06s; }
.inshad-grid .inshad-card:nth-child(3) { animation-delay: .10s; }
.inshad-grid .inshad-card:nth-child(4) { animation-delay: .14s; }
.inshad-grid .inshad-card:nth-child(5) { animation-delay: .18s; }
.inshad-grid .inshad-card:nth-child(6) { animation-delay: .22s; }
.inshad-grid .inshad-card:nth-child(n+7) { animation-delay: .26s; }

/* ---------------- Player modal ---------------- */
.inshad-player-modal .modal-content {
  background: var(--inshad-surface);
  color: var(--inshad-text);
  border-radius: 20px;
  border: 1px solid var(--inshad-border);
  overflow: hidden;
}
.inshad-player-modal .modal-header {
  background: var(--inshad-gradient);
  color: #1B1712;
  border: none;
}
.inshad-player-modal .modal-footer {
  border-top: 1px solid var(--inshad-border);
}
.inshad-player-modal .text-muted {
  color: var(--inshad-muted) !important;
}
.inshad-player-cover {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.inshad-player-modal audio { width: 100%; }

/* ---------------- Pagination ---------------- */
.inshad-pagination .page-link {
  border-radius: 10px !important;
  margin-inline: 3px;
  border: 1px solid var(--inshad-border);
  background: var(--inshad-surface);
  color: var(--inshad-text);
}
.inshad-pagination .page-link:hover {
  background: var(--inshad-surface-2);
  color: var(--inshad-primary);
}
.inshad-pagination .page-item.disabled .page-link {
  background: var(--inshad-surface);
  color: var(--inshad-muted);
  opacity: .5;
}
.inshad-pagination .page-item.active .page-link {
  background: var(--inshad-gradient);
  color: #1B1712;
  font-weight: 700;
  border-color: transparent;
}

/* ---------------- Empty state ---------------- */
.inshad-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--inshad-muted);
}
.inshad-empty i { font-size: 3rem; color: var(--inshad-border); }

/* ---------------- Footer ---------------- */
.inshad-footer {
  background: var(--inshad-surface);
  border-top: 1px solid var(--inshad-border);
  padding: 1.5rem 0;
  margin-top: 3rem;
  color: var(--inshad-muted);
  font-size: .9rem;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .inshad-card, .inshad-card-media img, .inshad-play-btn { animation: none !important; transition: none !important; }
}