@font-face {
  font-family: 'Bahij';
  font-weight: 500;
  src: url('../fonts/Bahij_TheSansArabic-SemiBold.otf') format('opentype');
  font-display: swap;
}

:root {
  /* Al-Mahdi Channel Identity Colors */
  --c-teal-light: #1F5F5F;
  /* Swapped to secondary */
  --c-teal-dark: #3E9C9C;
  /* Swapped to Primary Site Identity */
  --c-gold: #C9A227;

  /* Semantic Light Mode Colors */
  --bg-main: #E8F6F6;
  --bg-card: #ffffff;
  --text-main: #2B2B2B;
  --text-muted: #666666;
  --header-dark: #2B2B2B;
  --white-fixed: #ffffff;

  --font-main: 'Cairo', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-video: 'Tajawal', 'Cairo', sans-serif;
}


*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  transition: background-color 0.3s, color 0.3s;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* =========================================
   Custom Header Matching Image Reference
========================================= */
.main-header-stack {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: gap 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Header spacer removed — header will overlap hero image. */

/* Layer 1: Top Island (Blur Transparent) */
.layer-top {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 6px 30px;
  width: 96%;
  margin: 0;
  border-radius: 0 0 15px 15px;
  transition: all 0.3s;
  position: relative;
  z-index: 100;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: visible;
}


/* Layer 2: Bottom Island (Floating Rectangle) */
.layer-bottom {
  background-color: rgba(62, 156, 156, 0.2);
  /* 3E9C9C Primary Baseline */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 0;
  width: 96%;
  margin: 0;
  /* Gap handled by parent flex gap */
  transition: all 0.3s;
  position: relative;
  z-index: 50;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}



.sub-nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.sub-nav ul li a {
  font-size: 0.85rem;
  font-weight: 700;
  color: #555;
  padding: 5px 15px;
}

.sub-nav ul li a:hover {
  color: var(--c-teal-dark);
}

.nav-sep {
  width: 1px;
  height: 14px;
  background-color: #ddd;
}





.header-top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Static Arabic label (replaces language dropdown) */
.current-lang-static {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.95;
}

.social-icons-top {
  display: flex;
  gap: 15px;
}

.social-icons-top a {
  color: var(--c-teal-light);
  /* Identity Primary from Reference */
  font-size: 1.25rem;
  /* Enlarged icons as requested */
  transition: transform 0.2s;
  opacity: 1;
}

.social-icons-top a:hover {
  transform: translateY(-2px);
  color: var(--c-teal-dark);
}

.header-bottom {
  position: relative;
  z-index: 90;
}

.overlay-bottom {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to left, rgba(62, 156, 156, 0.8), rgba(31, 95, 95, 0.6), rgba(62, 156, 156, 0.8));
  opacity: 0.6;
  z-index: 1;
  border-radius: 12px;
}

.header-logo-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hamburger Menu Toggle Style */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
  margin-right: 15px;
  /* Spacing from right edge */
}

.menu-toggle .bar {
  height: 3px;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  transition: all 0.3s ease;
}

@media (max-width: 900px) {
  .menu-toggle {
    display: flex;
  }

  /* Show on specific screens */
  .main-nav {
    display: none;
  }

  /* Hide standard nav */
}

.main-header-stack.scrolled {
  transform: none;
  gap: 0;
  /* Collapse gap — layer-bottom becomes flush to top */
}

.main-header-stack.scrolled .layer-top {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  margin: 0;
  transition: all 0.3s;
}

.main-header-stack.scrolled .layer-bottom {
  background-color: var(--c-teal-dark);
  backdrop-filter: blur(25px);
  width: 96%;
  margin: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
}

.main-header-stack.scrolled .overlay-bottom {
  border-radius: 0 0 12px 12px;
  opacity: 1;
}



.header-bottom-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  z-index: 2;
  padding: 0 15px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  flex-shrink: 0;
}

.header-logo img {
  height: 45px;
  /* Softer, compact size */
  filter: brightness(0) invert(1);
}

.header-logo h2 {
  font-family: var(--font-main);
  font-size: 1.2rem;
  /* Smoother, smaller title */
  font-weight: 700;
  margin: 0;
  color: #fff;
  letter-spacing: 0.2px;
}

.main-nav {
  display: flex;
  flex: 1;
  justify-content: center;
}

.main-nav ul {
  display: flex;
  align-items: stretch;
  margin-bottom: 0;
  padding-left: 0;
  gap: 4px;
}

.main-nav ul li {
  display: flex;
}

.main-nav a {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  transition: color 0.3s ease, background 0.3s ease;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: var(--c-gold);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-nav a i {
  font-size: 0.65rem;
  opacity: 0.8;
  transition: transform 0.3s ease;
}

.main-nav a:hover {
  color: var(--c-gold);
  background: rgba(255, 255, 255, 0.08);
}

.main-nav a:hover::after {
  transform: scaleX(1);
}

.main-nav a:hover i {
  transform: translateY(-2px);
}

/* Active / Current page */
.main-nav .current-menu-item>a,
.main-nav .current_page_item>a {
  color: var(--c-gold);
  background: rgba(255, 255, 255, 0.06);
}

.main-nav .current-menu-item>a::after,
.main-nav .current_page_item>a::after {
  transform: scaleX(1);
}


/* =========================================
   Header Search Toggle + Search Island
========================================= */
.header-search-toggle {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.header-search-toggle:hover {
  color: var(--c-gold);
  background: rgba(255, 255, 255, 0.08);
}

/* Search overlay */
.search-island-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.search-island-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Search island */
.search-island {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(0.92) translateY(-20px);
  width: 92vw;
  max-width: 500px;
  background: linear-gradient(145deg, rgba(22, 78, 78, 0.98) 0%, rgba(45, 130, 130, 0.96) 50%, rgba(31, 95, 95, 0.98) 100%);
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  border-radius: 22px;
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.45),
    0 8px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 16px;
  z-index: 10002;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.search-island.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1) translateY(0);
}

.search-island-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-island-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 0 14px;
  gap: 10px;
  transition: border-color 0.25s;
}

.search-island-input-wrap:focus-within {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}

.search-island-icon {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.search-island-input {
  flex: 1;
  border: none;
  background: none;
  color: #fff;
  font-size: 1.05rem;
  font-family: var(--font-main);
  padding: 13px 0;
  outline: none;
  direction: rtl;
}

.search-island-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

/* Hide browser default clear button on search input */
.search-island-input::-webkit-search-cancel-button,
.search-island-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search-island-input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.search-island-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.search-island-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.search-island-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--c-gold);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.search-island-btn:hover {
  background: #d4ac2b;
  box-shadow: 0 4px 15px rgba(201, 162, 39, 0.3);
}

/* =========================================
   Language Display (Arabic Only)
========================================= */
.lang-display {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-main);
  padding: 6px 12px;
}

/* =========================================
   HERO SPLASH SECTION — Matching imamali.net Design
========================================= */
.hero-splash {
  width: 100%;
  width: 100vw;
  margin-left: calc(-1 * (100vw - 100%) / 2);
  background: transparent;
  overflow: visible;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

/* ---- Hero Image Wrapper — Rounded bottom with gold curve (imamali.net style) ---- */
.hero-image-wrap {
  position: relative;
  width: 100%;
  height: 73vh;
  min-height: 500px;
  max-height: 850px;
  background: transparent;
  overflow: visible;
}

/* Gold curve behind the image */
.hero-image-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  right: -20%;
  width: 140%;
  height: 117%;
  background-color: #cabd93;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  z-index: 0;
}

.hero-bg-main-image {
  position: absolute;
  top: 0;
  right: -25%;
  width: 150%;
  height: 115%;
  background-size: cover;
  background-position: center;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  box-shadow: 0px -350px 180px -255px #0D0A2F inset;
  z-index: 1;
}

/* ---- SVG Wave (hidden — replaced by CSS rounded curve) ---- */
.hero-wave-bottom {
  display: none;
}

/* Hadith animation */
@keyframes hadithFadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hadithSourceFade {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Hadith Text Overlaid on Image ---- */
.hero-text-overlay {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  padding: 0 20px;
  text-align: center;
  z-index: 5;
  display: block;
  visibility: visible;
  opacity: 1;
}

.arch-hadith-body {
  max-width: 800px;
  margin: 0 auto;
}

.arch-hadith-text {
  font-family: 'Bahij', var(--font-main);
  /* font-size و line-height يُحكم بهما من لوحة التخصيص */
  font-weight: 500;
  color: #fff;
  margin-bottom: 12px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  animation: hadithFadeUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

.arch-hadith-source {
  font-family: var(--font-main);
  /* font-size يُحكم به من لوحة التخصيص */
  font-weight: 500;
  color: #CABD93;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  animation: hadithSourceFade 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.7s both;
  display: block;
}

/* ---- Bottom Curve Spacer (hidden) ---- */
.hero-bottom-curve {
  display: none;
}

.arch-seal {
  position: relative;
  z-index: 2;
}

.arch-seal-img {
  height: 65px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

/* ---- Main Content Background Pattern ---- */
main {
  position: relative;
}

main::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 1200px;
  background-image: url('../images/stars1.png');
  background-size: 107px;
  background-position: bottom center;
  background-repeat: repeat;
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 0;
  pointer-events: none;
}

/* ============================================ */
/* =========================================
   Image 1: Live Broadcast Box
========================================= */

.live-broadcast-section {
  padding: 2rem 0 20px 0;
  margin-top: 90px;
  position: relative;
  overflow: visible;
}

.live-broadcast-section::before {
  content: "";
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: calc(100% + 200px);
  background-image: url('../images/stars1.png');
  background-size: 535px;
  background-position: top center;
  background-repeat: repeat;
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%);
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.live-broadcast-card {
  position: relative;
  z-index: 1;
  background-size: cover;
  background-position: center;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  color: var(--white-fixed);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.live-overlay-new {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(43, 43, 43, 0.3) 0%, rgba(62, 156, 156, 0.6) 50%, rgba(62, 156, 156, 0.85) 100%);
  z-index: 1;
}

/* ========================================
   Inline Video Player (inside broadcast card)
======================================== */
.inline-video-container {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #000;
  border-radius: 24px;
  overflow: hidden;
}

.inline-video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  border: none;
  border-radius: 0;
}

.inline-iframe-player {
  display: none;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  background: #000;
}

.inline-video-close {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 21;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}

.inline-video-close:hover {
  background: rgba(255, 60, 60, 0.7);
  transform: scale(1.1);
}

.inline-video-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  z-index: 20;
  border-radius: 24px;
  gap: 12px;
  font-size: 1.05rem;
  font-weight: 500;
}

.inline-video-loading-icon {
  font-size: 2.2rem;
  color: var(--c-teal-light);
}

.live-card-content {
  position: relative;
  z-index: 2;
  flex: 1;
  /* Stretch properly over background and fill inner gaps dynamically */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Center horizontally/vertically since it stretches */
  padding: 10px 0 50px 0;
  /* Extra gap at bottom to avoid overlapping with absolute footer */
  transition: opacity 0.3s ease;
}

.live-card-header {
  text-align: center;
  margin-top: 15px;
}

.live-center-logo {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  margin-bottom: 16px;
  object-fit: contain;
}

.live-card-header h3 {
  font-size: 2.2rem;
  margin-bottom: 8px;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
  font-family: var(--font-main);
}

.live-card-header p {
  font-size: 1rem;
  opacity: 1;
  font-weight: 500;
  line-height: 1.6;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* Responsive Visibility */
.d-mobile {
  display: none !important;
}


/* ========================================
   Morphing Play Button with Ripple Rings
======================================== */
.live-card-play {
  text-align: center;
  margin: 22px 0;
  display: flex;
  flex-direction: column;
  /* Stack button on top, live dot below */
  align-items: center;
  gap: 10px;
}

/* Button container: no fixed width — grows with the button */
.play-ripple-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  /* breathing room around the circle */
}

/* Ripple rings — always centered on button via translate */
.play-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  pointer-events: none;
  opacity: 0;
  /* Hidden by default — animation controls visibility */
  animation: rippleOut 2.4s ease-out infinite;
  animation-fill-mode: both;
  /* Apply keyframe 0% state during delay too */
}

.play-ring.r1 {
  animation-delay: 0s;
}

.play-ring.r2 {
  animation-delay: 0.8s;
}

.play-ring.r3 {
  animation-delay: 1.6s;
}

@keyframes rippleOut {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
  }

  20% {
    opacity: 0.5;
  }

  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

/* The button itself */
.play-btn-morph {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Start as circle */
  width: 80px;
  height: 80px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  text-decoration: none;
  transition:
    width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease,
    box-shadow 0.3s ease;
}

/* Text hidden by default */
.pbm-text {
  font-family: var(--font-main);
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  background: linear-gradient(135deg, var(--c-teal-dark), #6c48c5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition:
    max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
    opacity 0.3s ease 0.1s,
    margin 0.3s ease;
}

/* Play icon — gradient triangle */
.pbm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.6rem;
  background: linear-gradient(135deg, var(--c-teal-light), #6c48c5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform 0.3s ease;
}

/* ——— HOVER STATE: morph into pill ——— */
.play-btn-morph:hover {
  width: 200px;
  /* Professional cap — not too wide */
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
  padding: 0 20px;
  /* Balanced padding inside pill */
}

.play-btn-morph:hover .pbm-text {
  max-width: 140px;
  opacity: 1;
  margin-inline-end: 10px;
}

.play-btn-morph:hover .pbm-icon {
  transform: scale(1.1);
}

/* --------------------------------------
   Mobile Circle Button
-------------------------------------- */
.play-btn-circle-new {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.play-btn-circle-new:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4);
}

.play-btn-circle-new .pbm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-inline-start: 6px;
  transition: transform 0.3s ease;
}

/* Rings keep running even on hover — no pause */

/* Legacy circle button hidden */
.play-btn-circle {
  display: none;
}

/* Live indicator shown below button */
.live-text-pulse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  /* no margin-top needed — gap on parent handles spacing */
}

.pulse-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #ff3b3b;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-red 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6);
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(255, 59, 59, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 59, 59, 0);
  }
}

.live-card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: transparent;
  padding: 30px 20px;
  width: 100%;
  z-index: 5;
  gap: 0;
  transition: opacity 0.3s ease;
}

.live-broadcast-card {
  padding-bottom: 0 !important;
}

.freq-item {
  flex: 1;
  min-width: 80px;
  text-align: center;
  border: none;
  padding: 0 10px;
}

.freq-item:first-child {
  border-right: none;
}

.f-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* space between text and icon */
  font-size: 0.95rem;
  /* slightly smaller label */
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  /* small gap */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.f-label i {
  font-size: 0.9rem;
  /* small icon */
}

.f-value {
  font-weight: 800;
  /* bold font for value */
  font-size: 1.4rem;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  display: block;
}

/* =========================================
   Prayer Times — New Horizontal Scroll Design
========================================= */
.prayer-times-section {
  padding: 30px 0 20px;
  /* Reduced top padding from 50px */
  text-align: center;
}

/* Date Row */
.pt-date-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}

.pt-hijri-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--c-teal-dark), #1a7a5e);
  color: #fff;
  border-radius: 14px;
  padding: 12px 24px;
  font-family: var(--font-main);
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(31, 95, 95, 0.3);
}

.pt-hijri-pill i {
  font-size: 1.4rem;
  opacity: 0.85;
}

.pt-hijri-pill>span {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

.pt-hijri-my {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.pt-hijri-my span {
  font-size: 1.15rem;
}

.pt-hijri-my small {
  font-size: 0.85rem;
  opacity: 0.8;
}

.pt-gregorian {
  font-family: 'Bahij', 'Cairo', sans-serif !important;
  font-size: 1.1rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 0;
}

/* Hijri Events Styling */
.pt-hijri-events {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 30px;
  width: 100%;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.pt-event-item {
  font-family: 'Bahij', 'Cairo', sans-serif !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #556270;
  line-height: 1.6;
  text-align: center;
}

.pt-event-item::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 35% 35%, #ffe6a0, var(--c-gold), #997511);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(201, 162, 39, 0.5);
}

.pt-event-year {
  color: inherit;
  font-weight: inherit;
  margin-right: 0px;
}

.pt-event-item[data-has-desc="true"] {
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.pt-event-item[data-has-desc="true"]:hover {
  color: var(--c-gold);
  transform: translateX(-3px);
}

/* ══════════════════════════════════════════════════════════
   HIJRI EVENT MODAL — Professional 3D Design v4
   ══════════════════════════════════════════════════════════ */

@keyframes hem-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
/* نسخة أبطأ وأكثر سلاسة للخط الذهبي */
@keyframes hem-shimmer-slow {
  0%   { background-position: -300% center; }
  100% { background-position:  300% center; }
}
@keyframes hem-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.04) inset,
      0 8px 32px rgba(0,0,0,0.55),
      0 32px 80px rgba(0,0,0,0.45),
      0 0 28px rgba(180,130,50,0.18);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.04) inset,
      0 8px 32px rgba(0,0,0,0.55),
      0 32px 80px rgba(0,0,0,0.45),
      0 0 55px rgba(180,130,50,0.42);
  }
}
@keyframes hem-orb-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-14px) scale(1.06); }
}
@keyframes hem-title-slide {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes hem-content-fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* مقبض السحب — نبضة لفت الانتباه */
@keyframes hem-handle-pulse {
  0%, 100% { opacity: 0.45; width: 40px; }
  50%       { opacity: 0.8;  width: 54px; }
}

/* ════════════════════════
   OVERLAY
   ════════════════════════ */
.hijri-event-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(4, 4, 18, 0.45);
  backdrop-filter: blur(4px) saturate(1.2);
  -webkit-backdrop-filter: blur(4px) saturate(1.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.38s ease, visibility 0.38s ease;
  overscroll-behavior: contain;
}
.hijri-event-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ════════════════════════
   MODAL — DESKTOP
   ════════════════════════ */
.hijri-event-modal {
  position: relative;
  width: clamp(560px, 82vw, 1200px);
  max-height: min(85vh, 880px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.055) 0%, transparent 55%),
    linear-gradient(180deg, #131328 0%, #0d0d21 55%, #0a0a1c 100%);
  border: 1px solid rgba(180,140,60,0.24);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 8px 32px rgba(0,0,0,0.55),
    0 32px 80px rgba(0,0,0,0.45),
    0 0 28px rgba(180,130,50,0.18);
  transform: perspective(1200px) rotateX(14deg) translateY(55px) scale(0.9);
  opacity: 0;
  transition:
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.52s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.hijri-event-modal-overlay.active .hijri-event-modal {
  transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1);
  opacity: 1;
  animation: hem-glow-pulse 4s ease-in-out 0.6s infinite;
}

/* شريط الشيمر العلوي */
.hijri-event-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(180,140,50,0.0)  8%,
    rgba(220,175,70,0.75) 35%,
    rgba(255,215,100,1)   50%,
    rgba(220,175,70,0.75) 65%,
    rgba(180,140,50,0.0)  92%,
    transparent 100%
  );
  background-size: 300% auto;
  animation: hem-shimmer-slow 5.5s ease-in-out infinite;
  border-radius: 20px 20px 0 0;
  z-index: 5;
}

/* كرة ضوئية زخرفية */
.hijri-event-modal::after {
  content: '';
  position: absolute;
  top: -90px; right: -90px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,140,50,0.11) 0%, transparent 68%);
  animation: hem-orb-float 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* ── إخفاء زر الإغلاق في كلا النسختين ── */
.hijri-event-modal-close { display: none !important; }

/* ── Header ── */
.hijri-event-modal-header {
  position: relative;
  z-index: 2;
  padding: 30px 36px 22px;
  background: linear-gradient(135deg, rgba(180,140,50,0.11) 0%, rgba(255,255,255,0.02) 100%);
  border-bottom: 1px solid rgba(180,140,50,0.17);
  flex-shrink: 0;
  text-align: center;
}

/* ── Title ── */
.hijri-event-modal-title {
  font-family: 'Bahij', 'Cairo', sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.55;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
  animation: hem-title-slide 0.45s cubic-bezier(0.22,1,0.36,1) 0.15s both;
}

/* ── Meta badge ── */
.hijri-event-modal-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #0d0d0d;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  background: linear-gradient(90deg, #d4a83a, #f0cc6a, #c8901e);
  box-shadow: 0 2px 10px rgba(200,150,30,0.3);
  margin-top: 4px;
  width: fit-content;
  margin-inline: auto;
}

/* ── Body (scroll معزول) ── */
.hijri-event-modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  direction: rtl;
  padding: 28px 40px 24px;
  position: relative;
  z-index: 2;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,160,60,0.4) rgba(255,255,255,0.04);
}
.hijri-event-modal-body::-webkit-scrollbar       { width: 5px; }
.hijri-event-modal-body::-webkit-scrollbar-track  { background: rgba(255,255,255,0.04); border-radius: 3px; }
.hijri-event-modal-body::-webkit-scrollbar-thumb  { background: rgba(200,160,60,0.48); border-radius: 3px; }
.hijri-event-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(200,160,60,0.72); }

/* ── Content ── */
.hijri-event-modal-content {
  font-family: 'Bahij', 'Cairo', sans-serif;
  font-size: 1.02rem;
  line-height: 2.1;
  color: rgba(212,212,232,0.92);
  text-align: center;
  animation: hem-content-fade 0.5s cubic-bezier(0.22,1,0.36,1) 0.25s both;
}
.hijri-event-modal-content p { margin-bottom: 14px; }
.hijri-event-modal-content strong,
.hijri-event-modal-content b { color: #fff; font-weight: 700; }
.hijri-event-modal-content p:first-child::before {
  content: '❝';
  font-size: 1.5rem;
  color: rgba(200,160,60,0.32);
  margin-left: 5px;
  vertical-align: -3px;
  line-height: 0;
}

/* ── Font controls ── */
.hijri-event-modal-font-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 13px 24px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.22);
  border-top: 1px solid rgba(180,140,50,0.13);
  position: relative;
  z-index: 2;
}
.hijri-event-modal-font-controls button {
  background: rgba(200,160,60,0.1);
  border: 1px solid rgba(200,160,60,0.26);
  color: #e0c86a;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.18s, border-color 0.2s;
}
.hijri-event-modal-font-controls button:hover {
  background: rgba(200,160,60,0.24);
  border-color: rgba(200,160,60,0.55);
  transform: scale(1.13);
}
.hijri-event-modal-font-controls span {
  color: rgba(200,160,60,0.72);
  font-size: 0.85rem;
  min-width: 50px;
  text-align: center;
  font-weight: 600;
}

/* ════════════════════════
   RESPONSIVE
   ════════════════════════ */

/* ≥1600px */
@media (min-width: 1600px) {
  .hijri-event-modal { width: clamp(780px, 76vw, 1300px); }
}

/* 1400 – 1599px */
@media (max-width: 1599px) and (min-width: 1400px) {
  .hijri-event-modal { width: clamp(700px, 80vw, 1200px); }
}

/* 1025 – 1399px */
@media (max-width: 1399px) and (min-width: 1025px) {
  .hijri-event-modal { width: clamp(600px, 84vw, 1100px); }
}

/* 769 – 1024px */
@media (max-width: 1024px) {
  .hijri-event-modal {
    width: clamp(480px, 90vw, 860px);
    max-height: min(87vh, 780px);
  }
}

/* 481 – 768px */
@media (max-width: 768px) {
  .hijri-event-modal {
    width: 93vw;
    max-height: 87vh;
    border-radius: 18px;
  }
  .hijri-event-modal-header { padding: 24px 30px 18px; }
  .hijri-event-modal-body   { padding: 22px 28px 18px; }
  .hijri-event-modal-title  { font-size: clamp(1rem, 3.5vw, 1.28rem); }
}

/* ════════════════════════
   MOBILE ≤480px — BOTTOM SHEET
   ════════════════════════ */
@media (max-width: 480px) {

  .hijri-event-modal-overlay {
    padding: 0;
    align-items: flex-end;
    justify-content: stretch;
    backdrop-filter: blur(4px) saturate(1.2);
    -webkit-backdrop-filter: blur(4px) saturate(1.2);
  }

  .hijri-event-modal {
    width: 100%;
    max-height: 88dvh;
    border-radius: 26px 26px 0 0;
    transform: translateY(100%);
    opacity: 1;
    transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
    background:
      linear-gradient(160deg, rgba(255,255,255,0.05) 0%, transparent 52%),
      linear-gradient(180deg, #14142e 0%, #0e0e24 55%, #09091c 100%);
    box-shadow:
      0 -5px 34px rgba(0,0,0,0.7),
      0 -2px 0   rgba(200,160,60,0.38);
    animation: none !important;   /* بدون glow pulse */
  }

  .hijri-event-modal-overlay.active .hijri-event-modal {
    transform: translateY(0);
  }

  /* شريط الشيمر — يتحول لمقبض سحب */
  .hijri-event-modal::before {
    top: 12px;
    left: 50%; right: auto;
    transform: translateX(-50%);
    width: 40px; height: 5px;
    border-radius: 3px;
    background: rgba(200,160,60,0.5);
    animation: hem-handle-pulse 2.4s ease-in-out infinite;
  }

  /* إخفاء الكرة */
  .hijri-event-modal::after { display: none; }

  /* ── Header — نص متوسط ── */
  .hijri-event-modal-header {
    padding: 36px 20px 16px;
    text-align: center;
    background: linear-gradient(135deg, rgba(180,140,50,0.12) 0%, transparent 100%);
    border-bottom: 1px solid rgba(180,140,50,0.18);
  }

  .hijri-event-modal-title {
    font-size: clamp(1rem, 4.8vw, 1.2rem);
    line-height: 1.55;
    text-align: center;
  }

  .hijri-event-modal-meta {
    font-size: 0.76rem;
    padding: 3px 12px;
    margin-top: 8px;
    display: block;         /* يتيح margin: auto للتوسيط */
    width: fit-content;
    margin-inline: auto;
  }

  /* ── Body — نص متوسط ── */
  .hijri-event-modal-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 18px 20px 14px;
    direction: rtl;
    text-align: center;
  }

  .hijri-event-modal-content {
    font-size: 0.94rem;
    line-height: 2;
    text-align: center;
    direction: rtl;
  }

  /* إزالة علامة الاقتباس على الجوال (تبدو غريبة مع التوسيط) */
  .hijri-event-modal-content p:first-child::before { content: ''; }

  /* ── Font controls ── */
  .hijri-event-modal-font-controls {
    padding: 10px 20px;
    gap: 12px;
  }
  .hijri-event-modal-font-controls button { width: 36px; height: 36px; font-size: 12px; }
  .hijri-event-modal-font-controls span   { font-size: 0.78rem; min-width: 40px; }
}

@keyframes ptEventFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading State */
.pt-loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 1rem;
  padding: 40px 20px;
  width: 300px;
}

/* Horizontal Scroll Container */
.pt-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pt-scroll-wrap::-webkit-scrollbar {
  display: none;
}

.pt-scroll-track {
  display: flex;
  gap: 18px;
  padding: 20px 30px 40px;
  /* Room for box shadows */
  width: max-content;
  margin: 0 auto;
}

/* === Prayer Card === */
.pt-card {
  position: relative;
  width: 175px;
  height: 175px;
  min-height: 175px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #fff;
  border: 1.5px solid #dff0f0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, height 0.3s ease, width 0.3s ease;
  flex-shrink: 0;
}

.pt-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Islamic Geometric Pattern Background */
.pt-card-pattern {
  position: absolute;
  inset: 0;
  background-image: url("../images/stars.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* Active card white pattern - If stars.png is dark, it needs inversion to remain visible on the teal background */
.pt-card--active .pt-card-pattern {
  filter: brightness(0) invert(1);
  opacity: 0.35;
}

.pt-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
}

.pt-card-icon {
  font-size: 1.4rem;
  color: var(--c-teal-light);
  line-height: 1;
}

.pt-card-name {
  font-size: 0.8rem;
  color: #888;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}

.pt-card-time {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--c-teal-dark);
  direction: ltr;
}

/* Active card = current prayer period */
.pt-card--active {
  background: linear-gradient(150deg, var(--c-teal-dark) 0%, #1a8570 60%, #107050 100%);
  border-color: transparent;
  box-shadow: 0 18px 45px rgba(31, 95, 95, 0.3);
  width: 190px;
  height: 190px;
  min-height: 190px;
}

.pt-card--active .pt-card-icon {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.7rem;
}

.pt-card--active .pt-card-name {
  color: rgba(255, 255, 255, 0.85);
}

.pt-card--active .pt-card-time {
  color: #fff;
  font-size: 1.4rem;
}

/* Next upcoming prayer */
.pt-card--next {
  border-color: var(--c-teal-light);
  box-shadow: 0 5px 18px rgba(62, 156, 156, 0.2);
}

.pt-card--next .pt-card-icon {
  color: var(--c-teal-dark);
}

.pt-card--next .pt-card-time {
  color: var(--c-teal-dark);
}

.prayer-location {
  font-family: 'Bahij', 'Cairo', sans-serif !important;
  font-size: 1.05rem;
  color: var(--text-main);
  font-weight: 500;
  margin-bottom: 20px;
}



/* =========================================
   Media & Audio Section
========================================= */
.media-audio-section {
  background-color: var(--bg-main);
  position: relative;
}

.ma-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

/* Make visuals column flex so archive button sticks to bottom */
.visuals-col {
  display: flex;
  flex-direction: column;
}

.ma-section-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--c-teal-dark);
  margin-bottom: 25px;
  position: relative;
}

/* Visuals Column */
.ma-main-video {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
  border: 1px solid #dff0f0;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.ma-main-video:hover {
  transform: scale(1.025);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.ma-video-thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 15px 15px 45px 0;
  /* Gentle curve at bottom right */
  /* Ensures white card background peeks through creating a soft cutout */
}

.ma-video-thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), filter 0.5s ease;
  transform-origin: center center;
}

.ma-main-video:hover .ma-video-thumb img,
.ma-sub-video:hover .ma-video-thumb img {
  transform: scale(1.05);
  /* Subtle zoom */
  filter: brightness(0.6) blur(2px);
  /* Blurred dark shadow effect */
}

.ma-play-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  /* Visual right corner */
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  color: var(--c-teal-dark);
  font-size: 1.2rem;
  z-index: 10;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s, box-shadow 0.3s;
  padding-left: 13px;
  /* visual center for play icon */
}

.ma-play-btn:hover {
  transform: scale(1.12);
  background: #f8f9fa;
  color: var(--c-gold);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.ma-video-info {
  padding: 18px 20px 18px;
  text-align: right;
}

.ma-tag {
  font-size: 0.8rem;
  color: var(--c-teal-dark);
  font-weight: 800;
  display: block;
  margin-bottom: 5px;
}

.ma-video-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0;
}

.ma-sub-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.ma-sub-video {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #dff0f0;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
}

.ma-sub-video:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}

.ma-sub-video .ma-video-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 35px 0;
  /* Gentle curve at bottom right */
}

.ma-sub-video .ma-video-thumb img {
  border-radius: 12px 12px 35px 0;
}

.ma-sub-video .ma-play-small {
  position: absolute;
  bottom: 12px;
  right: 12px;
  /* Visual right corner */
  width: 42px;
  height: 42px;
  background: white;
  border-radius: 50%;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  color: var(--c-teal-dark);
  font-size: 1rem;
  z-index: 10;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s, box-shadow 0.3s;
  padding-left: 11px;
  /* visual center for play icon */
}

.ma-sub-video:hover .ma-play-small {
  transform: scale(1.12);
  background: #f8f9fa;
  color: var(--c-gold);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.ma-sub-video .ma-video-info {
  padding: 14px 14px 14px;
}

.ma-sub-video .ma-video-title {
  font-size: 0.9rem;
}

.ma-sub-video .ma-tag {
  font-size: 0.72rem;
}

/* === Archive button wrapper — pushes to bottom in both columns === */
.ma-archive-btn-wrap {
  margin-top: auto !important;
  padding-top: 20px;
  text-align: center;
}

/* Audio Layout */
.audio-col {
  display: flex;
  flex-direction: column;
}

.ma-audio-player {
  background: linear-gradient(135deg, var(--c-teal-dark), #1a7a5e);
  border-radius: 15px 15px 20px 20px;
  /* Rounded bottom corners */
  padding: 20px;
  color: #fff;
  margin-bottom: 0;
  box-shadow: 0 10px 30px rgba(31, 95, 95, 0.15);
  position: sticky;
  top: 10px;
  z-index: 10;
}

.ma-player-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-bottom: 20px;
}

.ma-audio-play-big {
  font-size: 2.2rem;
  cursor: pointer;
  transition: transform 0.2s;
  color: #fff;
  opacity: 0.9;
}

.ma-audio-play-big:hover {
  opacity: 1;
  transform: scale(1.05);
}

.ma-audio-meta {
  text-align: right;
  flex-grow: 1;
  margin-right: 20px;
}

.ma-audio-artist {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 5px;
  font-weight: 600;
}

.ma-audio-title {
  font-size: 1.35rem;
  font-weight: 800;
}

.ma-player-bottom {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-direction: row-reverse;
}

.ma-audio-vol {
  width: 35px;
  height: 35px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.3s;
}

.ma-audio-vol:hover {
  background: rgba(255, 255, 255, 0.3);
}

.ma-audio-timeline {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: row-reverse;
}

.ma-time {
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.9;
}

.ma-progress-bar {
  flex-grow: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}

.ma-progress-fill {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 15%;
  background: var(--c-gold);
  border-radius: 3px;
}

.ma-progress-fill::after {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.ma-list-wrapper {
  background: #fff;
  border-radius: 20px;
  /* Fully rounded island */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  padding: 5px;
  position: relative;
  overflow: hidden;
  margin-top: -15px;
  /* Slight overlap for seamless interaction */
  border: 1px solid #e0eaea;
}

.ma-list-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  /* Reduced for less "empty" look */
  background: linear-gradient(to top, #fff 10%, transparent);
  pointer-events: none;
  z-index: 2;
  border-radius: 0 0 20px 20px;
}

.ma-audio-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
  max-height: 547px;
  overflow-y: auto;
  padding: 25px 10px 20px;
  /* Balanced padding */
  scrollbar-width: thin;
  scrollbar-color: var(--c-teal-dark) transparent;
}

.ma-audio-list::-webkit-scrollbar {
  width: 5px;
}

.ma-audio-list::-webkit-scrollbar-thumb {
  background: var(--c-teal-dark);
  border-radius: 10px;
}

.ma-audio-item {
  background: #fff;
  border: 1px solid #e0eaea;
  border-radius: 10px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}

.ma-audio-item:hover {
  transform: translateX(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.ma-audio-item.active {
  background: linear-gradient(135deg, var(--c-teal-dark), #1a7a5e);
  border-color: transparent;
  box-shadow: 0 5px 18px rgba(31, 95, 95, 0.25);
  color: #fff !important;
}

.ma-audio-item.active .ma-item-title,
.ma-audio-item.active .ma-item-artist,
.ma-audio-item.active .ma-item-number {
  color: #fff !important;
}

.ma-audio-item.active .ma-item-icon {
  color: var(--c-gold);
}

.ma-item-icon {
  color: var(--c-teal-dark);
  font-size: 1rem;
}

.ma-item-number {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-teal-dark);
  opacity: 0.5;
  width: 20px;
  text-align: center;
}

.ma-item-title {
  flex-grow: 1;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-main);
  text-align: right;
}

.ma-item-artist {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Archive Buttons */
.btn-archive {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-teal-dark);
  color: #fff !important;
  padding: 10px 25px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  flex-direction: row-reverse;
}

.btn-archive:hover {
  background: var(--c-gold);
  color: #111 !important;
  transform: scale(1.02);
}

/* =========================================
   Owl Carousel — Custom Styles
========================================= */
.ma-owl-carousel {
  width: 100%;
  margin-bottom: 20px;
}

.ma-carousel-slide {
  display: block;
}

.ma-video-wrap {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  border: 1px solid #dff0f0;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ma-video-wrap:hover {
  transform: scale(1.025);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  color: inherit;
}

.ma-video-wrap:hover .ma-video-thumb img {
  transform: scale(1.05);
}

/* Owl Carousel Nav Arrows — RTL Aware */
.ma-owl-carousel .owl-nav button {
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  background: var(--c-teal-dark) !important;
  color: #fff !important;
  font-size: 1rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ma-owl-carousel .owl-nav button:hover {
  background: var(--c-teal-light) !important;
}

.ma-owl-carousel .owl-dots .owl-dot span {
  background: #cce5e5 !important;
  width: 8px;
  height: 8px;
}

.ma-owl-carousel .owl-dots .owl-dot.active span {
  background: var(--c-teal-dark) !important;
}


/* =========================================
   Selectize.js — Audio Filter
========================================= */
.ma-audio-filter-wrap {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ma-filter-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ma-filter-label i {
  color: var(--c-teal-dark);
}

.ma-series-select {
  width: 100%;
}

/* Selectize overrides for RTL */
.selectize-control .selectize-input {
  direction: rtl;
  text-align: right;
  border-radius: 10px !important;
  border-color: #dff0f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  font-family: var(--font-main);
  font-size: 0.9rem;
  padding: 8px 12px !important;
}

.selectize-control .selectize-input:focus,
.selectize-control.focus .selectize-input {
  border-color: var(--c-teal-dark) !important;
  box-shadow: 0 0 0 3px rgba(62, 156, 156, 0.15) !important;
}

.selectize-dropdown {
  direction: rtl;
  text-align: right;
  font-family: var(--font-main);
  border-radius: 10px !important;
  border-color: #dff0f0 !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.selectize-dropdown .option {
  padding: 10px 12px;
  font-size: 0.9rem;
}

.selectize-dropdown .option:hover,
.selectize-dropdown .option.active {
  background: rgba(62, 156, 156, 0.1) !important;
  color: var(--c-teal-dark) !important;
}


@media (max-width: 768px) {

  .ma-play-btn,
  .ma-sub-video .ma-play-small {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    padding: 10px;
    padding-left: 13px;
  }
}

@media (max-width: 900px) {
  .ma-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .ma-sub-videos {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .ma-sub-videos {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Image 3: Footer
========================================= */
.site-footer-new {
  background-color: #2B2B2B;
  padding: 8px 20px 8px 20px;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.site-footer-new::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 200px);
  background-image: url('../images/stars1.png');
  background-size: 535px;
  background-position: bottom center;
  background-repeat: repeat;
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%);
  z-index: 0;
  pointer-events: none;
}

/* Inner pages: footer stars match header stars (.page-programs::before values) */
body:not(.home) .site-footer-new::before {
  background-size: 655px;
  opacity: 0.10;
}

.footer-island {
  background-color: var(--c-teal-light);
  /* Reverted to dark color #1F5F5F */
  padding: 40px 60px;
  border-radius: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  max-width: 1300px;
  margin: 0 auto;
  color: #fff;
  position: relative;
  z-index: 1;
}

/* Front page: footer background matches page background */
.home .site-footer-new {
  background-color: var(--bg-main);
}

/* Top bar inside the island - Premium Blur Style */
.footer-top-island {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.08);
  /* Sophisticated glass effect */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 15px 30px;
  margin: -40px -60px 40px -60px;
  /* Expands to edges of the rounded card */
  border-radius: 40px 40px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social-island {
  display: flex;
  gap: 12px;
}

.soc-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #fff;
  /* White background for icons */
  color: var(--c-teal-light);
  /* Matches dark footer background */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, background 0.2s;
}

.soc-icon:hover {
  transform: translateY(-3px);
  background-color: var(--c-teal-dark);
  /* Hover uses bright primary identity */
  color: #fff;
}

.footer-links-grid {
  display: grid;
  /* grid-template-columns set inline by PHP based on active widgets */
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 40px;
  text-align: right;
}

/* Widget area styling — ensure widgets match original footer design */
.footer-col.widget {
  margin-bottom: 0;
}

.footer-col.widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col.widget ul li {
  margin-bottom: 12px;
}

.footer-col.widget ul li a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.2s;
  text-decoration: none;
}

.footer-col.widget ul li a:hover {
  color: var(--c-gold);
}

.footer-col-header {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 18px;
  color: var(--c-gold);
  /* Gold Titles on Dark background */
  display: block;
  cursor: default;
}

.toggle-icon {
  display: none;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col ul li a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.2s;
}

.footer-col ul li a:hover {
  color: var(--c-gold);
}

.footer-divider-dashed {
  border-top: 1px dashed rgba(255, 255, 255, 0.6);
  margin: 30px 0 20px 0;
}

.footer-bottom-new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
}

.footer-copyright-new {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}

.footer-logo-new {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.footer-logo-new h3 {
  font-family: var(--font-main);
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
}

.footer-logo-img {
  width: 40px;
  height: 40px;
}

/* Other existing utilities */
.section-title {
  text-align: center;
  font-size: 2.2rem;
  color: var(--c-teal-dark);
  margin-bottom: 40px;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background-color: var(--c-gold);
  margin: 15px auto 0;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.card {
  background: var(--bg-card);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.card-body {
  padding: 20px;
}

.card-body h3 {
  color: var(--text-main) !important;
  transition: color 0.3s;
}

.card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.card-body {
  padding: 20px;
}

@media (max-width: 900px) {
  .main-nav {
    display: none;
  }

  .main-nav.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px;
    /* fallback = lb.height(68) + 4 — overridden immediately by positionIsland() in JS */
    left: 50%;
    right: auto;
    width: 92vw;
    max-width: 420px;
    transform: translateX(-50%);
    background: linear-gradient(145deg, rgba(22, 78, 78, 0.98) 0%, rgba(45, 130, 130, 0.96) 50%, rgba(31, 95, 95, 0.98) 100%);
    backdrop-filter: blur(30px) saturate(1.3);
    -webkit-backdrop-filter: blur(30px) saturate(1.3);
    margin: 0;
    border-radius: 22px;
    box-shadow:
      0 25px 80px rgba(0, 0, 0, 0.45),
      0 8px 30px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    padding: 6px;
    z-index: 10000;
    animation: islandPop 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    overflow: hidden;
  }

  .main-header-stack.scrolled .main-nav.active {
    margin: 0;
  }

  .main-nav ul {
    flex-direction: column;
    width: 100%;
    padding: 8px 4px;
    gap: 5px;
    margin: 0;
  }

  .main-nav ul li {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    opacity: 0;
    transform: scale(0.92);
    animation: islandItemPop 0.18s ease-out forwards;
  }

  .main-nav ul li:nth-child(1) {
    animation-delay: 0.02s;
  }

  .main-nav ul li:nth-child(2) {
    animation-delay: 0.04s;
  }

  .main-nav ul li:nth-child(3) {
    animation-delay: 0.06s;
  }

  .main-nav ul li:nth-child(4) {
    animation-delay: 0.08s;
  }

  .main-nav ul li:nth-child(5) {
    animation-delay: 0.10s;
  }

  .main-nav ul li:nth-child(6) {
    animation-delay: 0.12s;
  }

  .main-nav ul li:nth-child(7) {
    animation-delay: 0.14s;
  }

  .main-nav ul li:nth-child(8) {
    animation-delay: 0.16s;
  }

  .main-nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    width: 100%;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
  }

  .main-nav a::after {
    display: none;
  }

  .main-nav ul li a:hover,
  .main-nav ul li a:active {
    background: rgba(201, 162, 39, 0.18);
    color: var(--c-gold);
    border-color: rgba(201, 162, 39, 0.35);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.15);
  }

  .main-nav .current-menu-item>a,
  .main-nav .current_page_item>a {
    color: var(--c-gold);
    background: rgba(201, 162, 39, 0.15);
    border-color: rgba(201, 162, 39, 0.4);
    box-shadow: 0 2px 12px rgba(201, 162, 39, 0.12);
  }

  .footer-links-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .footer-bottom-new {
    flex-direction: column-reverse;
    gap: 15px;
    text-align: center;
  }

  .footer-copyright-new {
    text-align: center;
  }

  .footer-logo-new {
    justify-content: center;
  }

  /* Make sure the prayer cards wrap cleanly on tablet */
  .prayer-cards-container {
    gap: 15px;
  }

  .prayer-card {
    width: 140px;
    height: 140px;
  }
}

@keyframes islandPop {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.95) translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
}

@keyframes islandItemPop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 768px) {

  /* Header: remove margin overrides so flex parent centering works */
  .layer-top {
    width: 96%;
    margin: 0;
    /* flex parent (main-header-stack) centers it */
    padding: 5px 12px;
    border-radius: 0 0 15px 15px;
    overflow: visible;
  }

  .header-top-container {
    width: 100%;
    gap: 6px;
  }

  /* Reduce social icons gap on mobile */
  .social-icons-top {
    gap: 8px;
    flex-shrink: 0;
  }

  .social-icons-top a {
    font-size: 0.95rem;
  }

  .layer-bottom {
    width: 96%;
    margin: 6px 0 0 0;
    /* flex parent centers it, only vertical gap here */
    padding: 6px 0;
    border-radius: 12px;
  }

  /* Header: no gap on mobile — use margin instead for accurate nav positioning */
  .main-header-stack {
    gap: 0 !important;
  }

  .layer-bottom {
    margin-top: 6px;
    /* Small margin — replaces gap */
  }

  body {
    padding-top: 0;
  }


  .social-icons-top a i {
    font-size: 0.95rem;
    margin: 0 5px;
  }

  /* .layer-bottom already overridden above */
  .header-bottom-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 15px;
    min-height: 50px;
  }

  .header-logo-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
  }

  .menu-toggle {
    display: flex !important;
    position: absolute;
    right: 15px;
    /* Forced to the right */
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 1001;
  }

  .header-search-toggle {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    font-size: 1rem;
    padding: 8px;
  }


  .header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .header-logo img {
    display: none !important;
  }

  .logo-text,
  .header-logo h2 {
    font-size: 1.12rem !important;
    white-space: nowrap;
  }

  .header-logo img {
    height: 40px !important;
    width: auto;
  }

  /* Scroll behavior on mobile */
  .main-header-stack.scrolled {
    transform: none;
    /* No translateY — prevents clipping */
  }

  .main-header-stack.scrolled .layer-top {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    margin: 0;
  }

  .main-header-stack.scrolled .layer-bottom {
    width: 96%;
    margin: 0;
    border-radius: 0 0 15px 15px;
  }

  .main-nav.active {
    margin: 0;
    left: 50%;
    right: auto;
    width: 94vw;
  }

  .menu-toggle.is-active .bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Mobile hero: matching imamali.net rounded curve */
  .hero-image-wrap {
    height: 73vh;
    min-height: 380px;
    max-height: 600px;
    overflow: visible;
    margin-top: 0;
  }

  .hero-image-wrap::before {
    width: 170%;
    right: -35%;
  }

  .hero-bg-main-image {
    width: 180%;
    right: -40%;
  }

  .hero-text-overlay {
    padding: 0 15px;
  }

  /* max-width و line-height يُحكم بهما من لوحة التخصيص */

  /* Fix header layout on mobile */
  .header-bottom-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    min-height: 56px;
  }

  .header-logo-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
  }

  .menu-toggle {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    margin-right: 12px;
  }

  /* Normal spacing for broadcast section — extra gap for rounded curve */
  .live-broadcast-section {
    /* margin-top: 90px;
    padding: 10px 0; */
  }

  .live-broadcast-card {
    aspect-ratio: 9 / 16;
    padding-bottom: 20px;
    border-radius: 16px;
    margin: 0 10px;
    justify-content: flex-start;
    padding-top: 30px;
    gap: 20px;
  }

  .live-card-content {
    flex: 0 1 auto;
    /* Don't stretch */
    padding: 0;
  }

  /* Desktop/Mobile Visibility Toggle */
  .d-desktop {
    display: none !important;
  }

  .live-card-header.d-mobile {
    display: block !important;
    text-align: center;
  }

  .play-ripple-wrap.d-mobile {
    display: inline-flex !important;
  }

  /* Adjust Red dot position */
  .live-text-pulse {
    flex-direction: row-reverse;
  }

  .live-card-header h3 {
    font-size: 1.9rem;
    margin-top: 5px;
  }

  .live-card-header p {
    font-size: 1.05rem;
    padding: 0 10px;
  }

  .live-text-pulse {
    font-size: 1.15rem;
    margin-top: 10px;
  }

  .play-btn-circle-new {
    width: 55px;
    height: 55px;
  }

  .play-btn-circle-new .pbm-icon {
    font-size: 1.4rem;
    margin-inline-start: 4px;
  }

  .play-ring {
    width: 55px;
    height: 55px;
  }

  /* Frequency layout: 3 items top row, 2 items bottom row — matching reference */
  .live-card-footer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 15px 30px;
    /* Bottom padding so text isn't glued to edge */
    row-gap: 5px;
  }

  .freq-item {
    flex: 0 0 33.33%;
    min-width: 0;
    padding: 0 5px;
    border: none !important;
    /* No borders in the image */
    text-align: center;
  }

  /* Second row: 2 items — each takes 50% width */
  .freq-item:nth-child(4),
  .freq-item:nth-child(5) {
    flex: 0 0 50%;
  }

  .f-label {
    font-size: 0.9rem;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    margin-bottom: 4px;
  }

  .f-label i {
    font-size: 0.85rem;
  }

  .f-value {
    font-size: 1.3rem;
  }
}

/* ════════════════════════
   Programs Breadcrumb Nav — GLOBAL (all screen sizes)
   ════════════════════════ */
.programs-nav-bar {
  max-width: 1420px;
  width: 100%;
  height: 65px;
  padding: 0;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 0;
  z-index: 3;
}
.programs-nav-bar .pb-breadcrumbs {
  direction: rtl;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  height: 50px;
  width: max-content;
  margin: 0;
}
.programs-nav-bar .pb-slide {
  direction: rtl;
  display: flex;
  align-items: center;
}
.programs-nav-bar .pb-tag {
  direction: rtl;
  width: max-content;
  height: 34px;
  display: flex;
  align-items: center;
  user-select: none;
  font-size: 0;
  text-decoration: none;
  transition: opacity 0.3s;
}
.programs-nav-bar .pb-tag:hover { opacity: 0.75; }
.programs-nav-bar .pb-decor {
  height: 34px;
  margin: 0;
  display: inline-block;
  position: relative;
  right: 1px;
  transform: rotate(180deg);
  fill: #2d3240;
  font-size: 0;
}
.programs-nav-bar .pb-name {
  height: 34px;
  padding: 1px 12px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-video);
  font-size: 14px;
  font-weight: 500;
  color: #81848c;
  background: #2d3240;
}
.programs-nav-bar .pb-name ~ .pb-decor {
  transform: rotate(0deg);
  right: auto;
  left: 1px;
}
.programs-nav-bar .pb-slide .pb-tag::before {
  content: '';
  width: 7px;
  height: 7px;
  padding: 3px;
  margin: 0 7px;
  display: inline-block;
  border-radius: 50%;
  font-size: 0;
  box-sizing: border-box;
  background: #2d3240;
}
.programs-nav-bar .pb-slide:first-of-type .pb-tag::before { display: none; }
.programs-nav-bar .pb-active .pb-tag::before { background: rgb(47, 158, 166); }
.programs-nav-bar .pb-active .pb-decor        { fill: rgb(47, 158, 166); }
.programs-nav-bar .pb-active .pb-name         { color: #fff; background: rgb(47, 158, 166); }

/* programs-nav-bar — جوال فقط (≤480px) */
@media (max-width: 480px) {
  .programs-nav-bar {
    max-width: 1420px;
    width: 100%;
    height: 65px;
    padding: 0;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 0;
    z-index: 3;
  }
  .programs-nav-bar .pb-breadcrumbs {
    direction: rtl;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    height: 50px;
    width: max-content;
    margin: 0;
  }
  .programs-nav-bar .pb-slide {
    direction: rtl;
    display: flex;
    align-items: center;
  }
  .programs-nav-bar .pb-tag {
    direction: rtl;
    width: max-content;
    height: 34px;
    display: flex;
    align-items: center;
    user-select: none;
    font-size: 0;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  .programs-nav-bar .pb-tag:hover { opacity: 0.75; }
  .programs-nav-bar .pb-decor {
    height: 34px;
    margin: 0;
    display: inline-block;
    position: relative;
    right: 1px;
    transform: rotate(180deg);
    fill: #2d3240;
    font-size: 0;
  }
  .programs-nav-bar .pb-name {
    height: 34px;
    padding: 1px 12px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    font-family: var(--font-video);
    font-size: 14px;
    font-weight: 500;
    color: #81848c;
    background: #2d3240;
  }
  .programs-nav-bar .pb-name ~ .pb-decor {
    transform: rotate(0deg);
    right: auto;
    left: 1px;
  }
  .programs-nav-bar .pb-slide .pb-tag::before {
    content: '';
    width: 7px;
    height: 7px;
    padding: 3px;
    margin: 0 7px;
    display: inline-block;
    border-radius: 50%;
    font-size: 0;
    box-sizing: border-box;
    background: #2d3240;
  }
  .programs-nav-bar .pb-slide:first-of-type .pb-tag::before { display: none; }
  .programs-nav-bar .pb-active .pb-tag::before { background: rgb(47, 158, 166); }
  .programs-nav-bar .pb-active .pb-decor        { fill: rgb(47, 158, 166); }
  .programs-nav-bar .pb-active .pb-name         { color: #fff; background: rgb(47, 158, 166); }
}

/* programs-nav-bar — desktop فقط (>480px) — لصفحة السيرة */
@media (min-width: 481px) {
  .bio-bc-wrap.programs-nav-bar {
    width: 100%;
    height: 65px;
    padding: 0;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 0;
    z-index: 5;
  }
  .bio-bc-wrap .pb-breadcrumbs {
    direction: rtl;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    height: 50px;
    width: max-content;
    margin: 0;
  }
  .bio-bc-wrap .pb-slide {
    direction: rtl;
    display: flex;
    align-items: center;
  }
  .bio-bc-wrap .pb-tag {
    direction: rtl;
    width: max-content;
    height: 34px;
    display: flex;
    align-items: center;
    user-select: none;
    font-size: 0;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  .bio-bc-wrap .pb-tag:hover { opacity: 0.75; }
  .bio-bc-wrap .pb-decor {
    height: 34px;
    margin: 0;
    display: inline-block;
    position: relative;
    right: 1px;
    transform: rotate(180deg);
    fill: #2d3240;
    font-size: 0;
  }
  .bio-bc-wrap .pb-name {
    height: 34px;
    padding: 1px 12px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    font-family: var(--font-video);
    font-size: 14px;
    font-weight: 500;
    color: #81848c;
    background: #2d3240;
  }
  .bio-bc-wrap .pb-name ~ .pb-decor {
    transform: rotate(0deg);
    right: auto;
    left: 1px;
  }
  .bio-bc-wrap .pb-slide .pb-tag::before {
    content: '';
    width: 7px;
    height: 7px;
    padding: 3px;
    margin: 0 7px;
    display: inline-block;
    border-radius: 50%;
    font-size: 0;
    box-sizing: border-box;
    background: #2d3240;
  }
  .bio-bc-wrap .pb-slide:first-of-type .pb-tag::before { display: none; }
  .bio-bc-wrap .pb-active .pb-tag::before { background: rgb(47, 158, 166); }
  .bio-bc-wrap .pb-active .pb-decor        { fill: rgb(47, 158, 166); }
  .bio-bc-wrap .pb-active .pb-name         { color: #fff; background: rgb(47, 158, 166); }
}

@media (max-width: 480px) {

  /* Small screens hero — wider curve for narrow viewports */
  .hero-image-wrap {
    height: 70vh;
    min-height: 320px;
    max-height: 520px;
  }

  .hero-image-wrap::before {
    width: 240%;
    right: -70%;
  }

  .hero-bg-main-image {
    width: 255%;
    right: -77%;
  }

  .hero-text-overlay {
    padding: 0 10px;
  }

  /* max-width و line-height يُحكم بهما من لوحة التخصيص */

  .live-broadcast-card {
    aspect-ratio: 9 / 16;
  }

  /* Fix: keep 3x2 layout on tiny screens but adjust fonts */
  .f-label {
    font-size: 0.7rem;
    gap: 3px;
  }

  .f-label i {
    font-size: 0.7rem;
  }

  .f-value {
    font-size: 0.95rem;
  }

  /* Prayer section */
  /* Full-bleed scroll wrap to prevent abrupt cutoff on mobile */
  .pt-scroll-wrap {
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .pt-scroll-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    padding: 20px 20px 60px;
  }

  .pt-date-row {
    flex-direction: column;
    gap: 15px;
  }

  .pt-hijri-pill>span {
    font-size: 1.8rem;
  }

  .pt-gregorian {
    font-size: 1rem;
  }

  .pt-card {
    width: 145px;
    height: 145px;
    min-height: 145px;
    padding: 10px;
  }

  .pt-card--active {
    width: 155px;
    height: 155px;
    min-height: 155px;
  }

  .pt-card-icon {
    font-size: 1.1rem;
  }

  .pt-card-time {
    font-size: 1.05rem;
  }

  .pt-card--active .pt-card-time {
    font-size: 1.15rem;
  }

  /* Footer */
  .site-footer-new {
    padding: 30px 15px 20px 15px;
  }

  .footer-island {
    padding: 20px 15px;
  }

  .footer-top-island {
    margin: -20px -15px 20px -15px;
    padding: 10px 15px;
    justify-content: center;
  }

  .footer-lang-island {
    display: none;
  }

  .soc-icon {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }

  .footer-links-grid {
    grid-template-columns: 1fr !important;
    gap: 0;
    margin-bottom: 10px;
  }

  .footer-divider-dashed {
    margin: 15px 0;
  }

  .footer-col {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 5px 0;
  }

  .footer-col:last-child {
    border-bottom: none;
  }

  .footer-col-header {
    font-size: 1rem;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 10px 0;
  }

  .footer-col-header span {
    flex: 1;
    text-align: right;
  }

  .toggle-icon {
    display: block;
    font-size: 0.9rem;
    transition: transform 0.3s;
  }

  .footer-col-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
  }

  .footer-col.active .toggle-icon {
    transform: rotate(180deg);
  }

  .footer-col.active .footer-col-list {
    max-height: 400px;
    margin-top: 10px;
    margin-bottom: 5px;
  }

  .footer-col ul li a {
    font-size: 0.85rem;
  }

  .footer-bottom-new {
    flex-direction: column-reverse;
    gap: 15px;
    text-align: center;
  }

  .footer-copyright-new {
    text-align: center;
  }

  .footer-logo-new {
    justify-content: center;
  }

  .main-header-stack {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }

  body {
    padding-top: 0;
  }

  .live-broadcast-section {
    /* margin-top: 90px;
    padding: 10px 0;
  } */
  }

} /* end @media (max-width: 480px) */

/* =========================================
   Programs & Media Page Styles
   Premium Redesign Matching Reference
========================================= */

.programs-body-bg {
    background-color: #2B2B2B;
    /* Requested dark background */
    color: #1a1f29;
    /* Dark text for light theme */
  }

  .programs-body-bg .site-footer-new {
    background-color: #2B2B2B;
  }

  /* Gallery Grid */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .gallery-item {
    border-radius: 16px;
    overflow: hidden;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .gallery-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
  }

  @media (max-width: 768px) {
    .gallery-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 500px) {
    .gallery-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Biography Cards */
  .biography-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .biography-card {
    background: rgba(31, 95, 95, 0.7);
    border-radius: 20px;
    padding: 30px;
    color: #fff;
  }

  .biography-card-title {
    color: #D4A843;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    font-family: 'Cairo', sans-serif;
  }

  .biography-card p {
    line-height: 1.9;
    font-size: 1rem;
    color: #e0e0e0;
  }

  @media (max-width: 768px) {
    .biography-content {
      grid-template-columns: 1fr;
    }
  }

  .page-programs {
    padding-top: 150px;
    padding-bottom: 0;
    min-height: 100vh;
    background-color: #2B2B2B;
    color: #fff;
    position: relative;
    overflow: hidden;
  }

  /* Stars1 ornament on inner pages */
  .page-programs::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 800px;
    background-image: url('../images/stars1.png');
    background-size: 655px;
    background-position: top center;
    background-repeat: repeat;
    opacity: 0.10;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100px, rgba(0, 0, 0, 0) 500px);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100px, rgba(0, 0, 0, 0) 500px);
    z-index: 0;
    pointer-events: none;
  }

  .page-programs>.container {
    position: relative;
    z-index: 1;
    max-width: 1420px;
  }

  /* Force body background on inner pages */
  body.post-type-archive-video,
  body.tax-video_category,
  body.single-video,
  body.post-type-archive-photo_album,
  body.tax-gallery_category,
  body.single-photo_album,
  body.page,
  body.search,
  body.error404 {
    background-color: #2B2B2B !important;
  }

  .page-bottom-ornament {
    position: relative;
    width: 100%;
    height: 140px;
    margin: 30px 0;
  }

  .page-bottom-ornament .overlay-bottom {
    border-radius: 12px;
  }


  /*
   --- Premium Video Grid (Refined for Softness & 4 Columns) ---
*/
  .premium-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
    direction: rtl;
    justify-content: flex-start;
  }

  .premium-card {
    width: 265px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    position: relative;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    font-family: var(--font-video);
  }

  .premium-card:hover {
    transform: none;
    background: transparent;
    box-shadow: none;
  }


  .pc-thumb-wrap {
    position: relative;
    width: 100%;
    height: 142px;
    min-height: 105px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: none;
    margin-bottom: 0;
    background: #000;
    isolation: isolate;
  }

  .pc-thumb-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
  }

  .premium-card:hover .pc-thumb-wrap img {
    transform: none;
    filter: none;
  }


  /* Play Button – Gold gradient matching main player */
  .pc-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: linear-gradient(to left bottom, #C9A227 0%, #a07d1a 50%, #d4b84a 100%);
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.35);
    z-index: 10;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
  }

  .pc-play-btn i {
    color: #fff;
    font-size: 14px;
    position: absolute;
    right: 14px;
    transition: all 0.3s ease-in-out;
  }

  .pc-play-btn .pc-play-text {
    font-family: var(--font-video), var(--font-main);
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    margin-right: 20px;
    display: inline-block;
    position: relative;
    left: -40px;
    opacity: 0;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
  }

  .premium-card:hover .pc-play-btn {
    width: 93px;
    transform: translate(-50%, -50%);
    box-shadow: 0 6px 25px rgba(201, 162, 39, 0.5);
  }

  .premium-card:hover .pc-play-btn i {
    font-weight: 900;
  }

  .premium-card:hover .pc-play-btn .pc-play-text {
    left: -6px;
    opacity: 1;
  }

  /* Hover mask overlay on thumbnail */
  @media (max-width: 768px) {
    .pc-play-btn {
      width: 30px;
      height: 30px;
      border-radius: 15px;
    }

    .pc-play-btn i {
      font-size: 10px;
      right: 10px;
    }
  }

  .pc-thumb-wrap::after {
    content: none;
  }

  /* طبقة التلاشي الفيروزية داخل <a> — فوق الصورة وتحت العناصر */
  .album-photo-pcard .apc-fancybox-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(62, 156, 156, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1;
    pointer-events: none;
  }

  .album-photo-pcard:hover .apc-fancybox-link::before {
    opacity: 1;
  }

  /* Badge (Duration / Views) */
  .pc-meta-overlay {
    position: absolute;
    bottom: 7px;
    right: 7px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    z-index: 5;
    background: none;
  }

  .pc-badge {
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-family: var(--font-video);
    font-weight: 600;
    background: rgba(0, 0, 0, 0.45);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    backdrop-filter: blur(4px);
  }

  .pc-badge i {
    margin-left: 0;
    font-size: 0.9em;
  }

  /* Card Bottom Info */
  .pc-info {
    width: 100%;
    padding: 8px 4px 30px;
    text-align: right;
    direction: rtl;
    color: #fff;
  }

  .pc-cat-tag {
    color: #1F5F5F;
    font-size: 0.75rem;
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
  }

  .pc-cat-tag i {
    font-size: 0.7rem;
    margin-left: 6px;
  }

  .pc-title {
    color: #fff;
    font-family: var(--font-video);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.7;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: opacity 0.3s ease;
  }

  .premium-card:hover .pc-title {
    opacity: 0.75;
  }


  /* --- Premium Folder Card --- */
  .folder-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 80px;
    direction: rtl;
    justify-content: flex-start;
  }

  .folder-card {
    width: 265px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #1e2330;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      box-shadow 0.4s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }

  .folder-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  }

  .folder-card::after {
    display: none;
  }

  .fc-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top left, rgba(62, 156, 156, 0.45) 0%, rgba(62, 156, 156, 0.15) 30%, transparent 65%);
    pointer-events: none;
    border-radius: 12px;
    z-index: 1;
    transition: opacity 0.4s;
  }

  .folder-card:hover .fc-thumb::after {
    opacity: 0.8;
  }

  .fc-thumb {
    position: relative;
    width: calc(100% - 20px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    margin: 10px auto 0;
  }

  .fc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      filter 0.4s ease;
  }

  .fc-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2d3240, #1e2330);
  }

  .fc-img-placeholder i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.12);
  }

  .folder-card:hover .fc-img {
    transform: scale(1.08);
    filter: brightness(1.1);
  }

  .fc-icon {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: rotate(0deg);
  }

  .folder-card:hover .fc-icon {
    background: rgba(47, 158, 166, 0.8);
    color: #fff;
    transform: rotate(-8deg) scale(1.1);
  }

  .fc-info {
    padding: 12px 10px 14px;
    text-align: center;
  }

  .fc-title {
    font-family: var(--font-video);
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.6;
    transition: color 0.3s;
  }

  .folder-card:hover .fc-title {
    color: rgb(47, 158, 166);
  }

  .fc-count {
    display: inline-block;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 5px 14px;
    color: #8b8e9a;
    font-size: 0.73rem;
    font-weight: 500;
    font-family: var(--font-video);
    transition: all 0.3s;
  }

  .folder-card:hover .fc-count {
    background: rgba(47, 158, 166, 0.1);
    border-color: rgba(47, 158, 166, 0.25);
    color: rgb(47, 158, 166);
  }

  .fc-count i {
    margin-left: 3px;
    font-size: 0.68rem;
  }

  /* ════════════════════════════════════════════════════════
   Single Video Player – AKD-style (imamali.net reference)
   ════════════════════════════════════════════════════════ */

  /* ── Main Container ────────────────────────────────────── */
  .player-view-container {
    width: 100%;
    padding: 15px 25px 35px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0px 0px 14px -10px #000;
    box-sizing: border-box;
    background-color: #20242f;
    color: #fff;
    font-family: var(--font-video);
    transition: all 0.3s ease-in-out;
  }

  /* Reset stray borders/outlines inside player */
  .player-view-container *,
  .player-view-container *::before,
  .player-view-container *::after {
    outline: none;
  }

  /* Stars ornament overlay at bottom */
  .player-bg-overlay {
    width: 120%;
    height: 400px;
    position: absolute;
    left: -50px;
    bottom: -11px;
    opacity: 0.12;
    pointer-events: none;
    box-shadow: inset 0px 300px 100px 20px #20242f;
    background-image: url('../images/stars1.png');
    background-size: 700px;
    background-position: 1px 104%;
    background-repeat: repeat;
    z-index: 0;
  }

  /* ── Content wrapper (flex RTL) ────────────────────────── */
  .player-content {
    width: 100%;
    padding: 5px 0px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    box-sizing: border-box;
    direction: rtl;
    transition: all 0.3s ease-in-out;
  }

  /* ── Info panel (RIGHT side in RTL) ────────────────────── */
  .player-info-side {
    width: 38%;
    padding: 0px 0px 10px 40px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
    align-self: stretch;
  }

  .player-info-bottom {
    margin-top: auto;
    margin-bottom: 65px;
  }

  /* Folder / Category name */
  .player-folder-name {
    display: block;
    padding-bottom: 13px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    color: #538f99;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
  }

  .player-folder-name:hover {
    opacity: 0.75;
  }

  /* Title */
  .player-title {
    padding: 0px 0px 15px;
    margin: 0px;
    display: block;
    font-family: var(--font-main);
    font-size: 18px;
    line-height: 1.8;
    font-weight: 600;
    color: #fff;
  }

  /* View / Date row */
  .player-view-date {
    padding: 2px 0 6px;
    margin: 0;
    display: inline-block;
    font-size: 11px;
    font-weight: 400;
    color: #8b8e9a;
    background-color: transparent;
  }

  .player-view-date span {
    margin: 0px 3px 0px 6px;
    display: inline-block;
  }

  /* ── Video side (LEFT in RTL) ──────────────────────────── */
  .player-video-side {
    width: 62%;
    display: inline-block;
    overflow: hidden;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 0px;
    transition: all 0.3s ease-in-out;
  }

  /* Video slider wrapper */
  .player-slider {
    width: 100%;
    direction: ltr;
    position: relative;
    border-radius: 12px;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
  }

  /* Invisible 16:9 spacer */
  .player-ratio {
    width: 100%;
    object-fit: cover;
    opacity: 0;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
  }

  /* Thumbnail photo */
  .player-thumb {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    object-fit: cover;
    cursor: pointer;
    z-index: 3;
    transition: all 0.3s ease-in-out;
  }

  /* iframe wrap */
  .player-frame-wrap {
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    position: absolute;
    top: -1px;
    bottom: 0px;
    left: -1px;
    right: 0px;
    z-index: 5;
  }

  .player-frame-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* Play button – gradient circle */
  .player-play-btn {
    width: 62px;
    height: 62px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    cursor: pointer;
    border: none;
    border-radius: 30px;
    box-sizing: border-box;
    background: linear-gradient(to left bottom, #C9A227 0%, #a07d1a 50%, #d4b84a 100%);
    box-shadow: 0 4px 20px rgba(201, 162, 39, 0.4);
    transition: all 0.3s ease-in-out;
    z-index: 4;
  }

  .player-play-btn i {
    position: absolute;
    right: 20px;
    font-size: 20px;
    color: #fff;
    transition: all 0.1s;
  }

  .player-play-text {
    margin-right: 20px;
    display: inline-block;
    position: relative;
    left: -40px;
    opacity: 0;
    font-family: var(--font-video);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    transition: all 0.3s ease-in-out;
  }

  /* Play button hover expand */
  .player-slider:hover .player-play-btn {
    width: 120px;
  }

  .player-slider:hover .player-play-btn i {
    font-weight: 900;
  }

  .player-slider:hover .player-play-btn .player-play-text {
    left: -10px;
    opacity: 1;
  }

  /* No-video fallback */
  .player-no-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #4d5566;
    font-size: 1rem;
    width: 100%;
    min-height: 200px;
  }

  .player-no-video i {
    font-size: 2.8rem;
    opacity: 0.45;
  }

  /* ── YouTube badge ─────────────────────────────────────── */
  .player-yt-badge {
    position: absolute;
    bottom: 8px;
    right: 0px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    color: #538f99;
    transition: all 0.3s ease-in-out;
  }

  .player-yt-badge img {
    width: 70px;
    height: 15px;
    margin-right: 4px;
    vertical-align: sub;
  }

  .player-yt-badge:hover {
    opacity: 0.7;
  }

  /* Hide deprecated wrappers */
  .player-stars-bottom,
  .player-ornament-separator,
  .player-bottom-related,
  .player-stars-separator,
  .player-stars-strip,
  .player-cat-label,
  .player-pills,
  .player-pill,
  .player-meta-row,
  .player-desc,
  .player-thumb-overlay,
  .player-yt-logo,
  .player-speaker-name {
    display: none;
  }

  /* ── Related Videos ────────────────────────────────────── */
  .player-related {
    margin-top: 50px;
    margin-bottom: 10px;
  }

  .player-related-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 300;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 24px;
    text-align: right;
    transition: color 0.3s;
  }

  /* 5-column related grid (2 rows × 5) */
  .related-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px !important;
    margin-bottom: 0;
  }

  /* Related section cards — match main video grid */
  .player-related .premium-card {
    width: auto;
  }

  /* Archive link under related videos */
  .related-archive-link {
    text-align: center;
    position: relative;
    z-index: 40;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .related-archive-link a {
    display: inline-block;
    font-family: var(--font-video);
    font-size: 14px;
    font-weight: 600;
    color: #81848c;
    padding: 10px 30px;
    border-radius: 8px;
    background-color: #2d3240;
    text-decoration: none;
    transition: all 0.3s;
  }

  .related-archive-link a:hover {
    background-color: #C9A227;
    color: #fff;
  }

  .related-archive-link a i {
    margin-right: 8px;
    font-size: 12px;
  }


  /* Utility for D-NONE */
  .d-none {
    display: none !important;
  }

  /* Responsive adjustments */
  @media (max-width: 1300px) {
    .premium-card {
      width: 245px;
    }

    .related-grid {
      grid-template-columns: repeat(4, 1fr) !important;
    }
  }

  @media (max-width: 1200px) {
    .folder-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .player-view-container {
      padding: 25px 50px 45px;
    }
  }

  @media (max-width: 1020px) {
    .album-viewer-container {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      border-radius: 14px;
    }

    .player-view-container {
      padding: 0px 12px 20px;
      border-radius: 14px;
    }

    .album-viewer-container .player-video-side {
      border-radius: 14px;
      margin-top: 0 !important;
    }

    .album-viewer-container .player-slider {
      border-radius: 14px;
    }

    .player-content {
      display: flex;
      flex-direction: column-reverse;
      justify-content: flex-start;
      margin-bottom: 0;
      padding-top: 0;
    }

    .album-viewer-container .player-content {
      padding: 0 !important;
      margin: 0 !important;
    }

    .album-viewer-container .player-info-bottom {
      margin-bottom: 0;
      margin-top: 0;
    }


    .player-info-side {
      width: 100%;
      padding: 10px 8px 0px 8px;
    }

    .player-video-side {
      width: 100%;
      margin-top: 0;
    }

    .player-yt-badge {
      bottom: -45px;
      right: 25px;
    }

    .album-viewer-container .player-video-side {
      order: 3;
    }

    .album-viewer-container .player-info-side {
      order: 2;
    }

    .album-viewer-container {
      padding-bottom: 8px;
    }

    .album-viewer-container .album-viewer-badge {
      order: 1;
      position: static;
      display: block;
      text-align: center;
      width: 100%;
      margin: 35px auto 0px;
      color: #538f99;
      font-size: 13px;
    }

    .album-viewer-container .album-viewer-badge i {
      font-size: 16px;
      color: #538f99;
    }


    .player-info-bottom {
      margin-bottom: 0px;
      margin-top: 15px;
    }

    .album-action-buttons {
      margin-top: 15px;
    }

    .premium-grid {
      justify-content: center;
    }

    .related-grid {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }

  @media (max-width: 992px) {
    .premium-card {
      width: 32%;
    }

    .pc-thumb-wrap {
      height: auto;
      padding-bottom: 56.25%;
      min-height: auto;
    }
  }

  @media (max-width: 768px) {
    .player-play-btn {
      width: 44px;
      height: 44px;
      border-radius: 22px;
    }

    .player-play-btn i {
      font-size: 15px;
      right: 14px;
    }

    .page-programs {
      padding-top: 130px;
    }

    .folder-card {
      width: 47%;
    }

    .premium-card {
      width: 48%;
    }

    .programs-nav-bar {
      height: auto;
      overflow: visible;
      padding: 5px 0;
    }

    .programs-nav-bar .pb-breadcrumbs {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: auto;
      gap: 4px 0;
    }

    .programs-nav-bar .pb-slide .pb-tag,
    .programs-nav-bar .pb-slide .pb-decor {
      height: 28px;
    }

    .programs-nav-bar .pb-slide .pb-name {
      font-size: 11px;
      padding: 1px 5px;
      height: 28px;
    }
  }

  @media (max-width: 480px) {
    .premium-card {
      width: 49%;
    }

    .premium-grid {
      gap: 4px;
      justify-content: space-between;
    }

    .pc-thumb-wrap {
      height: auto;
      padding-bottom: 56.25%;
      min-height: auto;
    }

    .pb-tag {
      height: 28px;
    }

    .pb-decor {
      height: 28px;
    }

    .pb-name {
      font-size: 10px;
      padding: 1px 5px;
      height: 28px;
    }

    .pb-slide .pb-tag::before {
      width: 5px;
      height: 5px;
      margin: 0 4px;
    }

  }

  @media (max-width: 650px) {
    .related-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  @media (max-width: 480px) {
    .folder-grid {
      grid-template-columns: 1fr;
    }

    .related-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    .player-content {
      padding: 6px 0px 10px;
      margin-bottom: 20px;
    }

    .player-yt-badge {
      display: inline-block;
      margin: auto;
      bottom: -30px;
      right: 0px;
      left: 0px;
      text-align: center;
    }
  }

  /* ════════════════════════════════════════════════════════
   PHOTO GALLERY — معرض الصور (imamali.net style)
   ════════════════════════════════════════════════════════ */

  /* Page Title */
  .gallery-page-title {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 30px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .gallery-page-title i {
    color: var(--c-gold);
    font-size: 1.3rem;
  }

  /* Section Title (e.g. "اخر الصور المضافة") */
  .gallery-section-title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    margin: 50px 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  }

  /* ── Gallery Category Cards Grid ── */
  .gallery-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
  }

  .gallery-cat-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #1e2330;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      box-shadow 0.4s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }

  .gallery-cat-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  }

  .gcc-thumb {
    position: relative;
    width: calc(100% - 16px);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    margin: 8px auto 0;
  }

  .gcc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      filter 0.4s ease;
  }

  .gallery-cat-card:hover .gcc-thumb img {
    transform: scale(1.08);
    filter: brightness(1.1);
  }

  .gcc-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2d3240, #1e2330);
  }

  .gcc-placeholder i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.12);
  }

  .gcc-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top left, rgba(62, 156, 156, 0.4) 0%, transparent 60%);
    pointer-events: none;
    border-radius: 12px;
    transition: opacity 0.4s;
  }

  .gallery-cat-card:hover .gcc-overlay {
    opacity: 0.8;
  }

  .gcc-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    transition: all 0.35s;
  }

  .gallery-cat-card:hover .gcc-icon {
    background: rgba(47, 158, 166, 0.8);
    color: #fff;
    transform: rotate(-5deg) scale(1.1);
  }

  .gcc-info {
    padding: 14px 14px 16px;
    text-align: center;
  }

  .gcc-title {
    font-family: var(--font-video);
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.6;
    transition: color 0.3s;
  }

  .gallery-cat-card:hover .gcc-title {
    color: rgb(47, 158, 166);
  }

  .gcc-desc {
    font-size: 0.8rem;
    color: #8b8e9a;
    margin: 0 0 10px;
    line-height: 1.6;
  }

  .gcc-meta {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  .gcc-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 4px 12px;
    color: #8b8e9a;
    font-size: 0.72rem;
    font-weight: 500;
    transition: all 0.3s;
  }

  .gallery-cat-card:hover .gcc-meta span {
    background: rgba(47, 158, 166, 0.1);
    border-color: rgba(47, 158, 166, 0.25);
    color: rgb(47, 158, 166);
  }

  /* ── Album Cards Grid ── */
  .gallery-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 40px;
  }

  .gallery-album-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #1e2330;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  }

  .gallery-album-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  }

  .gac-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .gac-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.4s ease;
  }

  .gallery-album-card:hover .gac-thumb img {
    transform: scale(1.06);
    filter: brightness(0.85);
  }

  .gac-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2d3240, #1e2330);
  }

  .gac-placeholder i {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.1);
  }

  .gac-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 50%);
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 10px;
  }

  .gac-badge {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .gac-info {
    padding: 12px 14px 14px;
    text-align: right;
  }

  .gac-cat {
    font-size: 0.75rem;
    color: var(--c-teal-dark);
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
  }

  .gac-cat i {
    margin-left: 3px;
  }

  .gac-title {
    font-family: var(--font-video);
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.6;
    transition: color 0.3s;
  }

  .gallery-album-card:hover .gac-title {
    color: rgb(47, 158, 166);
  }

  .gac-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #8b8e9a;
    font-size: 0.72rem;
  }

  .gac-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .gac-meta i {
    font-size: 0.68rem;
  }

  /* ── Single Album Page (Grid Layout) ── */
  .album-grid-header {
    margin-bottom: 30px;
    padding: 25px 30px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .album-grid-title {
    font-family: var(--font-video);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
  }

  .album-grid-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .agm-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: var(--font-video);
  }

  .agm-item i {
    font-size: 0.72rem;
    color: var(--c-gold);
  }

  /* Photo card in album grid */
  .album-photo-card .pc-thumb-wrap a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
  }

  .album-photo-card .pc-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .album-viewer-container {
    margin-bottom: 40px;
  }

  @media (min-width: 1021px) {

    .album-viewer-container,
    .video-viewer-container {
      width: calc(100% + 110px);
      margin-left: -55px;
      margin-right: -55px;
    }
  }

  .album-viewer-container .player-thumb {
    cursor: pointer;
  }

  .album-viewer-container .player-video-side {
    margin-top: 18px;
  }

  /* Meta items below player-view-date */
  /* Meta items below player-view-date */
  .album-viewer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-bottom: 5px;
  }

  .avm-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(201, 162, 39, 0.04);
    border: 1px solid rgba(201, 162, 39, 0.1);
    color: #a3a6b5;
    font-size: 0.75rem;
    font-weight: 400;
    transition: all 0.3s;
  }

  .avm-item:hover {
    background: rgba(201, 162, 39, 0.1);
    border-color: rgba(201, 162, 39, 0.2);
    color: #e2e4e9;
  }

  .avm-item i {
    font-size: 0.75rem;
    color: rgba(201, 162, 39, 0.75);
  }

  /* Download main button */
  .album-download-main-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border-radius: 8px;
    background: linear-gradient(to left bottom, #C9A227 0%, #a07d1a 50%, #d4b84a 100%);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-video);
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(201, 162, 39, 0.3);
    transition: all 0.3s;
  }

  .album-download-main-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(201, 162, 39, 0.45);
  }

  .album-download-main-btn i {
    font-size: 0.9rem;
  }

  /* Action Buttons Wrapper */
  .album-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 50px;
  }

  /* Share Button */
  .album-share-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #c8cad0;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-video);
    cursor: pointer;
    transition: all 0.3s;
  }

  .album-share-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: translateY(-2px);
  }

  .album-share-btn i {
    font-size: 0.9rem;
  }

  /* Photo navigation buttons */
  .photo-nav-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .photo-nav-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-video);
    text-decoration: none;
    transition: all 0.3s;
  }

  @media (max-width: 650px) {

    .album-download-main-btn,
    .album-share-btn {
      padding: 8px 10px;
      font-size: 0.7rem;
      font-weight: 500;
      gap: 4px;
    }

    .photo-nav-btn {
      padding: 7px 8px;
      font-size: 0.7rem;
      font-weight: 500;
      gap: 4px;
    }

    .album-action-buttons,
    .photo-nav-buttons {
      gap: 6px;
    }

    .album-action-buttons {
      margin-top: 15px;
    }

    .avm-item {
      font-size: 0.65rem;
      padding: 4px 10px;
    }

    .player-view-date {
      font-size: 10px;
      padding-bottom: 3px;
    }

    .player-folder-name {
      padding-bottom: 8px;
    }

    .player-title {
      padding-bottom: 8px;
      line-height: 1.4;
    }

    .album-viewer-meta {
      margin-top: 12px;
    }
  }

  .photo-nav-btn:hover {
    background: rgba(201, 162, 39, 0.15);
    border-color: var(--c-gold);
    color: var(--c-gold);
  }

  .photo-nav-btn i {
    font-size: 0.7rem;
  }

  .photo-nav-back {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.06);
  }

  /* Make album-photo-pcard clickable as full link */
  a.album-photo-pcard {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
  }

  /* Featured image zoom overlay */
  .album-featured-zoom {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.35s cubic-bezier(.4, 0, .2, 1), transform 0.35s cubic-bezier(.4, 0, .2, 1);
    z-index: 10;
    pointer-events: auto;
  }

  .album-featured-zoom i {
    color: #fff;
    font-size: 1.3rem;
    transition: transform 0.3s ease;
  }

  .album-featured-slider {
    cursor: pointer;
  }

  .album-featured-slider:hover .album-featured-zoom {
    opacity: 1;
    transform: scale(1);
  }

  .album-featured-slider:hover .album-featured-zoom:hover i {
    transform: scale(1.2);
  }

  /* Pulse animation on the zoom icon for touch devices */
  @keyframes zoomPulse {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }

    50% {
      transform: scale(1.1);
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @media (hover: none) {
    .album-featured-zoom {
      opacity: 1;
      transform: scale(1);
      animation: zoomPulse 0.6s cubic-bezier(.4, 0, .2, 1) forwards;
    }
  }


  /* Badge — matches .player-yt-badge position and style */
  .album-viewer-badge {
    direction: ltr;
    position: absolute;
    bottom: 8px;
    right: 15px;
    font-size: 13px;
    font-weight: 500;
    color: #538f99;
    transition: all 0.3s ease-in-out;
  }

  .album-viewer-badge:hover {
    opacity: 0.7;
  }

  .album-viewer-badge i {
    font-size: 13px;
    margin-right: 5px;
    margin-left: 0;
    vertical-align: middle;
  }

  /* Photos section */
  .album-photos-section {
    margin-bottom: 20px;
  }

  .album-photos-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: #5c5d72;
    margin-right: 6px;
  }

  .player-related-title i {
    margin-left: 8px;
    font-size: 0.85em;
    color: var(--c-gold);
  }

  /* Photo card with actions */
  .album-photo-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #1a1d28;
  }

  .album-photo-card .album-photo-item {
    border-radius: 0;
  }

  .album-photo-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    background: #1a1d28;
  }

  .apc-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #8b8e9a;
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s;
  }

  .apc-download:hover {
    background: linear-gradient(135deg, #C9A227, #a07d1a);
    color: #fff;
    border-color: #C9A227;
  }

  /* Related album grid inside player-related */
  .related-album-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Photo Grid (masonry-style) */
  .album-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 40px;
  }

  .album-photo-item {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
  }

  .album-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.3s ease;
  }

  .album-photo-item:hover img {
    transform: scale(1.06);
    filter: brightness(0.7);
  }

  .album-photo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
  }

  .album-photo-overlay i {
    color: #fff;
    font-size: 1.5rem;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.3s ease;
  }

  .album-photo-item:hover .album-photo-overlay {
    background: rgba(0, 0, 0, 0.3);
  }

  .album-photo-item:hover .album-photo-overlay i {
    opacity: 1;
    transform: scale(1);
  }

  .album-content-text {
    color: #c8cad0;
    font-size: 0.95rem;
    line-height: 2;
    margin-bottom: 40px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
  }


  /* ══════════════════════════════════════════════
   Album Photo PCard — صور الألبوم بتصميم premium-card
   ══════════════════════════════════════════════ */

  /* الصورة داخل pc-thumb-wrap */
  .album-photo-pcard .pc-thumb-wrap a.apc-fancybox-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  .album-photo-pcard .pc-thumb-wrap a.apc-fancybox-link img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ── Hover Overlay — بطاقة الصورة ── */
  .apc-hover-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: 15px;
    overflow: hidden;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        transparent 30%,
        transparent 60%,
        rgba(0, 0, 0, 0.60) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
  }

  .album-photo-pcard:hover .apc-hover-overlay {
    opacity: 1;
  }

  /* أعلى اليمين: اسم الألبوم */
  .apc-ov-top {
    position: absolute;
    top: 7px;
    right: 7px;
    display: flex;
    direction: rtl;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease 0.06s, transform 0.35s ease 0.06s;
  }

  .album-photo-pcard:hover .apc-ov-top {
    opacity: 1;
    transform: translateY(0);
  }

  /* الوسط: زر عرض */
  .apc-ov-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  .apc-ov-zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 22px;
    border-radius: 50px;
    background-color: #2d3240;
    color: #81848c;
    text-decoration: none;
    pointer-events: auto;
    font-family: var(--font-video);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.35s ease 0.08s, transform 0.35s ease 0.08s, background 0.25s, color 0.25s, box-shadow 0.25s;
  }

  .album-photo-pcard:hover .apc-ov-zoom-btn {
    opacity: 1;
    transform: translateY(0);
    background-color: #C9A227;
    color: #fff;
    box-shadow: 0 4px 16px rgba(201, 162, 39, 0.45);
  }

  /* الأسفل: اسم الصورة + التاريخ في نفس السطر */
  .apc-ov-bottom {
    position: absolute;
    bottom: 7px;
    right: 7px;
    left: 7px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    direction: rtl;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease 0.10s, transform 0.35s ease 0.10s;
  }

  .album-photo-pcard:hover .apc-ov-bottom {
    opacity: 1;
    transform: translateY(0);
  }

  .apc-ov-name,
  .apc-ov-album,
  .apc-ov-date {
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-video);
    font-weight: 600;
    background: rgba(0, 0, 0, 0.45);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(4px);
  }

  .apc-ov-name {
    font-size: 0.66rem;
  }

  .apc-ov-album {
    font-size: 0.60rem;
    color: rgba(255, 255, 255, 0.82);
  }

  .apc-ov-date {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.72);
  }

  /* اسم الصورة overlay داخل الصورة */
  .apc-photo-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    padding: 22px 10px 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
    color: #fff;
    font-family: var(--font-video);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    direction: rtl;
    text-align: right;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* رابط اسم الألبوم الموحد */
  .apc-album-back-link-full:hover .player-related-title {
    color: var(--c-gold) !important;
  }

  /* رابط التصنيف في ذات صلة بصفحة الفيديو */
  .related-cat-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
  }

  .related-cat-link:hover {
    color: var(--c-gold);
  }

  /* ══════════════════════════════════════════════
   Album Photos Fade Section — 5 cols × 5 rows with fade
   ══════════════════════════════════════════════ */
  .album-photos-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    flex-wrap: unset !important;
    gap: 8px !important;
  }

  .album-photos-grid .album-photo-pcard {
    width: 100% !important;
    position: relative;
    z-index: 1;
  }

  .album-photos-grid .album-photo-pcard:hover {
    z-index: 25;
  }

  .album-photos-grid .pc-thumb-wrap {
    height: auto !important;
    min-height: unset !important;
    padding-bottom: 70%;
    border-radius: 15px;
  }

  .album-photos-fade-wrap {
    position: relative;
    max-height: 686px;
    overflow: hidden;
  }

  .album-photos-fade-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 261px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(43, 43, 43, 0.20) 25%,
        rgba(43, 43, 43, 0.55) 55%,
        rgba(43, 43, 43, 0.85) 80%,
        #2B2B2B 100%);
    pointer-events: none;
    z-index: 20;
  }

  /* Responsive — Album Photos Grid */
  @media (max-width: 600px) {
    .album-photos-grid {
      grid-template-columns: repeat(3, 1fr) !important;
    }

    .album-photos-fade-wrap {
      max-height: 800px;
    }
  }

  @media (max-width: 400px) {
    .album-photos-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    .album-photos-fade-wrap {
      max-height: 600px;
    }
  }

  /* ══════════════════════════════════════════════
   Related Section Fade & Grid Rules (single-photo_album)
   ══════════════════════════════════════════════ */
  .related-section-fade-wrap {
    position: relative;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .related-section-fade-wrap::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: -5px;
    right: -5px;
    height: 205px;
    background: linear-gradient(to top, #2B2B2B 15%, transparent 100%);
    pointer-events: none;
    z-index: 30;
  }

  /* Desktop: 5 cols * 7 rows = 35 images */
  .related-section-fade-wrap .album-photos-grid .album-photo-pcard:nth-child(n+36) {
    display: none !important;
  }

  @media (max-width: 650px) {

    /* Mobile: 2 cols */
    .related-section-fade-wrap .album-photos-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Mobile: 2 cols * 8 rows = 16 images */
    .related-section-fade-wrap .album-photos-grid .album-photo-pcard:nth-child(n+17) {
      display: none !important;
    }
  }

  /* ══════════════════════════════════════════════
   Photo Mosaic Grid — قسم ذات صلة (single-photo_album)
   ══════════════════════════════════════════════ */
  .photo-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-bottom: 0;
  }

  /* بطاقة الصورة */
  .pmc-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    display: block;
    background: #111318;
    cursor: pointer;
    text-decoration: none;
  }

  /* الصورة تملأ البطاقة بالكامل */
  .pmc-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease, filter 0.35s ease;
  }

  /* تكبير خفيف + تعتيم عند الـ hover */
  .pmc-card:hover img {
    transform: scale(1.07);
    filter: brightness(0.65);
  }

  /* Overlay يظهر عند الـ hover */
  .pmc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.15) 55%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px 12px;
    direction: rtl;
  }

  .pmc-card:hover .pmc-overlay {
    opacity: 1;
  }

  /* عنوان الألبوم داخل الـ overlay */
  .pmc-title {
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* عدد الصور badge */
  .pmc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 5px;
  }

  /* البطاقات الكبيرة — تمتد عمودين */
  .pmc-card.pmc-wide {
    grid-column: span 2;
  }

  /* Responsive */
  @media (max-width: 1200px) {
    .photo-mosaic-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 768px) {
    .photo-mosaic-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) {
    .photo-mosaic-grid { grid-template-columns: 1fr; }
    .pmc-card.pmc-wide { grid-column: span 1; }
  }

  /* Fix for mobile live broadcast player landscape orientation */
  @media (max-width: 768px) and (orientation: landscape) {
    .live-broadcast-card {
      aspect-ratio: 16 / 9 !important;
    }
  }