/* =========================================================
   Oman Academy - Home CSS (FINAL)
   - Fixes Offline Library item to match IMAGE #2
   - Removes duplicates/conflicts + keeps your existing blocks
   - RTL-friendly while keeping action icons LTR
   ========================================================= */

/* Animation */
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* === SKELETON LOADING === */
.skeleton{
  position: relative;
  overflow: hidden;
  background: #f0f2f5;     /* ✅ نهاري */
  animation: none;         /* ✅ لا نحرك الخلفية نفسها */
  border-radius: 6px;
}
.dark .skeleton{ background: rgba(255,255,255,0.08); }

/* ✅ shimmer overlay */
.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    transparent 0,
    rgba(255,255,255,0.55) 50%,
    transparent 100%
  );
  animation: shimmer 1.2s linear infinite;
}
.dark .skeleton::after{
  background-image: linear-gradient(
    90deg,
    transparent 0,
    rgba(255,255,255,0.12) 50%,
    transparent 100%
  );
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* View Toggle Styles */
.active-mode{
  background-color: white;
  color: #00607e !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.dark .active-mode{ background-color: #374151; color: #38bdf8 !important; }

/* Utilities */
.card-img{ width: 100%; height: 100%; object-fit: cover; display:block; }
.truncate-1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

/* New badge */
.badge-new{
  position: absolute; top: 6px; left: 6px;
  background: #f39200; color: white;
  font-size: 10px; padding: 2px 6px; border-radius: 6px;
  z-index: 5; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Live badge */
.live-badge-pulse{
  display: inline-flex; align-items: center; gap: 6px;
  color: #ef4444; font-weight: 800; font-size: 10px;
  background: transparent;
  padding: 0;
}
.live-dot{
  width: 6px; height: 6px; background: #ef4444; border-radius: 50%;
  animation: pulse-red 1.5s infinite;
}
@keyframes pulse-red{
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Countdown live-now state */
.countdown.live-now span{
  color: #ef4444;
  font-weight: 800;
}

/* ===========================
   GRID VIEW (Fixed width)
   =========================== */
.view-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, 145px);
  justify-content: center;
  gap:16px;
  padding-bottom:40px;
}
@media (max-width: 640px){
  .view-grid{
    grid-template-columns: repeat(2, 145px);
    justify-content: center;
    gap:10px;
  }
}
@media (max-width: 340px){
  .view-grid{ grid-template-columns: 145px; }
}

.view-grid .card-item{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  transition: all 0.2s ease;
}
.dark .view-grid .card-item{ background:#1f2937; border-color:#374151; }

.view-grid .card-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

.view-grid .card-img-wrapper{
  width:100%;
  aspect-ratio:3/4;
  position:relative;
  overflow:hidden;
  background:#f3f4f6;
}

.view-grid .card-body{
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* ✅ Grid live footer: same card color + top border separator */
.view-grid .card-footer{
  padding:10px 8px;
  background: transparent;
  border-top: 1px solid rgba(229,231,235,0.9);
  cursor:pointer;
  text-align:center;
  transition: background 0.2s ease, transform 0.15s ease;
  user-select:none;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.dark .view-grid .card-footer{ border-top-color: rgba(55,65,81,0.8); }

.view-grid .card-footer:hover{
  background: rgba(0,96,126,0.04);
  transform: translateY(-1px);
}
.dark .view-grid .card-footer:hover{
  background: rgba(56,189,248,0.08);
}

/* ===========================
   LIST VIEW (Aligned layout)
   =========================== */
.view-list{ display:flex; flex-direction:column; gap:12px; }

.view-list .card-item{
  display:flex;
  flex-direction: row;
  align-items: stretch;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  height: 112px;
  transition: all 0.2s ease;
}
.dark .view-list .card-item{ background:#1f2937; border-color:#374151; }

.view-list .card-item:hover{
  transform: translateX(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.view-list .card-img-wrapper{
  width:112px;
  height:100%;
  flex: 0 0 112px;
  background:#f3f4f6;
  overflow:hidden;
}

.view-list .card-body{
  flex:1;
  padding:10px 12px;
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  min-width:0;
}

.view-list .info-col{
  flex:1;
  min-width:0;
}

/* ✅ Live column: same card color + vertical separator line */
.view-list .live-col{
  flex: 0 0 155px;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;

  background: transparent;
  border-right: 2px solid rgba(229,231,235,1);
  cursor: pointer;
  user-select:none;
  transition: background 0.2s ease, transform 0.15s ease;
  text-align:center;
}
.dark .view-list .live-col{ border-right-color: rgba(55,65,81,1); }

.view-list .live-col:hover{
  background: rgba(0,96,126,0.04);
  transform: translateX(-2px);
}
.dark .view-list .live-col:hover{ background: rgba(56,189,248,0.08); }

/* ===========================
   Mobile fine-tune (LIST ONLY)
   =========================== */
@media (max-width: 640px){
  .view-list .live-col{
    flex: 0 0 120px;
    padding: 8px 8px;
    border-right-width: 2px;
  }
  .view-list .info-col{ padding-left: 6px; }
  .view-list .info-col .truncate-1{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ===== Live click states ===== */
.live-disabled{
  cursor: not-allowed !important;
  opacity: 0.6;
}
.live-disabled *{ pointer-events: none; }

.live-enabled{ cursor: pointer; }

/* ===========================
   ✅ Grade Filter Bar (Guests)
   =========================== */
.oa-grade-filter-wrap{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(229,231,235,1);
  background:#fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.dark .oa-grade-filter-wrap{
  background:#1f2937;
  border-color:#374151;
}

.oa-grade-filter-btn{
  height:32px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(226,232,240,1);
  background:#f8fafc;
  color:#475569;
  font-weight:800;
  font-size:12px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.oa-grade-filter-btn:hover{
  background: rgba(0,96,126,0.06);
  transform: translateY(-1px);
}
.dark .oa-grade-filter-btn{
  background:#111827;
  border-color:#374151;
  color:#cbd5e1;
}
.dark .oa-grade-filter-btn:hover{ background: rgba(56,189,248,0.10); }

.oa-grade-filter-btn.is-active{
  background:#00607e;
  border-color:#00607e;
  color:#fff;
}
.dark .oa-grade-filter-btn.is-active{
  background:#00607e;
  border-color:#00607e;
  color:#fff;
}

.oa-grade-filter-hint{
  margin-top:8px;
  font-size:11px;
  color:#94a3b8;
}
.dark .oa-grade-filter-hint{ color:#94a3b8; }

/* ===========================
   ✅ Extra Session Badge (Subscribers)
   =========================== */
.badge-extra{
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 6;
  background: #dc2626;
  color: white;
  font-size: 10px;
  font-weight: 400;
  padding: 2px 6px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ===========================
   ✅ Settings Modal (Minimal)
   =========================== */
.oa-settings-modal{
  position: fixed;
  inset: 0;
  z-index: 999997;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  direction: rtl;
}
.oa-settings-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(6px);
}
.oa-settings-card{
  position: relative;
  width: 100%;
  max-width: 560px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 24px 90px rgba(0,0,0,.35);
  background: rgba(255,255,255,.92);
  overflow: hidden;
  font-family: Tajawal, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.dark .oa-settings-card{
  background: rgba(17,24,39,.90);
  border-color: rgba(255,255,255,.10);
}
.oa-settings-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.dark .oa-settings-head{ border-bottom-color: rgba(255,255,255,.08); }

.oa-settings-title{ display:flex; gap: 12px; align-items:flex-start; }
.oa-settings-icon{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(243,146,0,.12);
  border: 1px solid rgba(243,146,0,.22);
  color: #f39200;
  flex: 0 0 42px;
}
.dark .oa-settings-icon{
  background: rgba(243,146,0,.16);
  border-color: rgba(243,146,0,.20);
}

.oa-settings-h1{ font: 900 16px/1.6 Tajawal; color:#0f172a; }
.dark .oa-settings-h1{ color:#fff; }
.oa-settings-h2{ margin-top: 2px; font: 700 12px/1.6 Tajawal; color:#64748b; }
.dark .oa-settings-h2{ color: rgba(226,232,240,.78); }

.oa-settings-close{
  all: unset;
  width: 38px; height: 38px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  background: rgba(241,245,249,1);
  border: 1px solid rgba(15,23,42,.08);
  color: #334155;
}
.dark .oa-settings-close{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: rgba(226,232,240,.95);
}

.oa-settings-body{ padding: 14px 16px; display:flex; flex-direction:column; gap: 12px; }

.oa-set-block{
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(241,245,249,.70);
  border-radius: 18px;
  padding: 12px;
}
.dark .oa-set-block{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.oa-set-label{ font: 900 13px/1.6 Tajawal; color:#0f172a; margin-bottom: 8px; }
.dark .oa-set-label{ color:#fff; }

.oa-set-hint{
  margin-top: 8px;
  font: 700 11px/1.7 Tajawal;
  color: #64748b;
}
.dark .oa-set-hint{ color: rgba(226,232,240,.78); }

.oa-radio-row{ display:flex; gap: 10px; flex-wrap:wrap; }
.oa-radio{
  display:flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.65);
  cursor: pointer;
  font: 800 12px/1 Tajawal;
  color: #334155;
}
.dark .oa-radio{
  border-color: rgba(255,255,255,.10);
  background: rgba(17,24,39,.45);
  color: rgba(226,232,240,.92);
}
.oa-radio input{ accent-color: #00607e; }

.oa-field{ display:flex; flex-direction:column; gap: 8px; }
.oa-field-label{ font: 800 12px/1.6 Tajawal; color:#334155; }
.dark .oa-field-label{ color: rgba(226,232,240,.92); }

.oa-field-row{ display:flex; gap: 10px; align-items:center; }
.oa-input{
  flex: 1;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.80);
  padding: 0 12px;
  font: 800 13px/1 Tajawal;
  color: #0f172a;
}
.dark .oa-input{
  border-color: rgba(255,255,255,.12);
  background: rgba(17,24,39,.50);
  color: #fff;
}

.oa-btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,96,126,.22);
  background: rgba(0,96,126,.10);
  color: #00607e;
  font: 900 12px/1 Tajawal;
  cursor: pointer;
}
.dark .oa-btn{
  border-color: rgba(56,189,248,.20);
  background: rgba(56,189,248,.10);
  color: #38bdf8;
}

.oa-btn-soft{
  height: 36px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.60);
  color: #475569;
  font: 900 12px/1 Tajawal;
  cursor: pointer;
}
.dark .oa-btn-soft{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(226,232,240,.90);
}

.oa-btn-danger{
  height: 40px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(220,38,38,.22);
  background: rgba(220,38,38,.10);
  color: #dc2626;
  font: 900 12px/1 Tajawal;
  cursor: pointer;
}
.dark .oa-btn-danger{
  border-color: rgba(248,113,113,.24);
  background: rgba(248,113,113,.10);
  color: rgba(248,113,113,.95);
}

.oa-field-sub{ font: 800 11px/1.7 Tajawal; color: #64748b; }
.dark .oa-field-sub{ color: rgba(226,232,240,.76); }

.oa-passkey-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.oa-passkey-title{ font: 900 12px/1.6 Tajawal; color:#0f172a; }
.dark .oa-passkey-title{ color:#fff; }
.oa-passkey-desc{ font: 700 11px/1.6 Tajawal; color:#64748b; }
.dark .oa-passkey-desc{ color: rgba(226,232,240,.78); }

.oa-settings-foot{
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
  display:flex;
  justify-content:flex-start;
}
.dark .oa-settings-foot{ border-top-color: rgba(255,255,255,.08); }

/* =========================================
   Dropdown & Navigation (FINAL - FIXED POSITION MODE)
   ========================================= */
#downloadsDropdown{
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top right;
  will-change: transform, opacity;
}
#downloadsDropdown.oa-dd-hidden{
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
  pointer-events: none;
  visibility: hidden;
}
#downloadsDropdown:not(.oa-dd-hidden){
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
}
@media (max-width: 640px){
  #downloadsDropdown{
    width: min(360px, calc(100vw - 32px));
    right: 16px !important;
    left: auto !important;
  }
}

/* =========================================================
   ✅ Offline Library Item (MATCH IMAGE #2 EXACTLY)
   Required HTML structure inside .download-item-sm:
   - .download-item-actions (left icons)
   - .dl-meta (.dl-subject + .dl-title) (center text)
   - .dl-thumb (right circular video icon)
   ========================================================= */

/* container */
.download-item-sm{
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #eef2f7;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}

.download-item-sm:hover{
  background: #fafcff;
  border-color: #e7edf5;
}
.dark .download-item-sm{
  background: #1f2937;
  border-color: rgba(255,255,255,.10);
}
.dark .download-item-sm:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
}

/* right thumb */
.download-item-sm .dl-thumb{
  grid-area: thumb;
  justify-self: end;

  width: 38px;
  height: 38px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(243,146,0,.12);
  border: 1px solid rgba(243,146,0,.22);
  color: #f39200;
}
.dark .download-item-sm .dl-thumb{
  background: rgba(243,146,0,.16);
  border-color: rgba(243,146,0,.20);
  color: #f7b44f;
}

/* middle meta */
.download-item-sm .dl-meta{
  grid-area: meta;
  min-width: 0;
  direction: rtl;
  text-align: right;
}
.download-item-sm .dl-subject{
  font-family: Tajawal, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.2;
  margin-bottom: 4px;
}
.download-item-sm .dl-title{
  font-family: Tajawal, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 12px;          /* ✅ match image #2 */
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dark .download-item-sm .dl-title{ color:#fff; }
.dark .download-item-sm .dl-subject{ color: rgba(226,232,240,.70); }

/* left actions */
.download-item-sm .download-item-actions{
  grid-area: actions;
  justify-self: start;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  direction: ltr; /* ✅ keep icon order visually on the left */
  flex-direction: row-reverse;
    margin-right: auto;   /* ✅ يدفع الأزرار لأقصى اليسار */
  padding-left: 2px;    /* ✅ مسافة خفيفة مثل المصدر */
}

/* action buttons */
/* action buttons — MATCH IMAGE #1 (flat icons) */
.download-item-sm .download-item-actions .dl-btn{
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;              /* أصغر مثل المصدر */
  height: 30px;
  border-radius: 10px;

  cursor: pointer;
  background: transparent;  /* ✅ لا خلفية */
  border: 0;                /* ✅ لا حدود */
  color: #94a3b8;           /* رمادي هادئ مثل المصدر */

  transition: transform .12s ease, color .12s ease;
}

.download-item-sm .download-item-actions .dl-btn:hover{
  color: #f39200;           /* ✅ يتحول لبرتقالي عند الهوفر مثل المصدر */
  transform: translateY(-1px);
}

.download-item-sm .download-item-actions .dl-btn:disabled{
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}

/* dark */
.dark .download-item-sm .download-item-actions .dl-btn{
  color: rgba(226,232,240,.65);
}
.dark .download-item-sm .download-item-actions .dl-btn:hover{
  color: #f7b44f;
}

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #4b5563; }

/* ===========================
   ✅ Overlays & Utilities
   =========================== */
.oa-maint-overlay { display:none; }
.oa-maint-overlay.is-on { display:flex; }

.oa-alert-modal { display:none; }
.oa-alert-modal.is-on { display:flex; }

/* ✅ Materials Control Bar (minimal) */
.oa-materials-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.oa-add-subject-btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);
  padding:9px 14px;
  border-radius:12px;
  cursor:pointer;
  font-family: Tajawal, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
.dark .oa-add-subject-btn{
  border-color: rgba(255,255,255,.14);
  background: rgba(17,24,39,.55);
}
.oa-add-subject-btn:hover{
  border-color: rgba(243,146,0,.35);
  background: rgba(243,146,0,.10);
}
/* Schedule Enter Button (Minimal Outline) */
.oa-enter-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;

  height: 36px;
  padding: 0 14px;

  border-radius: 9px;
  border: 1px solid rgba(243,146,0,.35);
  background: rgba(243,146,0,.10);

  color: #b45309;
  font-family: Tajawal, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;

  cursor:pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}

.oa-enter-btn i{
  font-size: 16px;
  line-height: 1;
}

.oa-enter-btn:hover{
  background: rgba(243,146,0,.16);
  border-color: rgba(243,146,0,.55);
  transform: translateY(-1px);
}

.oa-enter-btn:active{ transform: translateY(0); }

.dark .oa-enter-btn{
  background: rgba(243,146,0,.14);
  border-color: rgba(243,146,0,.35);
  color: #f7b44f;
}
.dark .oa-enter-btn:hover{
  background: rgba(243,146,0,.20);
  border-color: rgba(243,146,0,.55);
}
/* Schedule Subscribe Button (same as enter, different color) */
.oa-subscribe-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;

  height: 36px;
  padding: 0 14px;

  border-radius: 9px;
  border: 1px solid rgba(0,96,126,.30);
  background: rgba(0,96,126,.10);

  color: #00607e;
  font-family: Tajawal, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;

  cursor:pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}

.oa-subscribe-btn i{
  font-size: 16px;
  line-height: 1;
}

.oa-subscribe-btn:hover{
  background: rgba(0,96,126,.16);
  border-color: rgba(0,96,126,.55);
  transform: translateY(-1px);
}

.oa-subscribe-btn:active{ transform: translateY(0); }

.dark .oa-subscribe-btn{
  background: rgba(56,189,248,.12);
  border-color: rgba(56,189,248,.28);
  color: #38bdf8;
}
.dark .oa-subscribe-btn:hover{
  background: rgba(56,189,248,.18);
  border-color: rgba(56,189,248,.45);
}
/* ======================================================
   Unsubscribed Subject Cards – Soft Grayscale UX (FINAL)
   ====================================================== */

/* الحالة الافتراضية */
.oa-unsubscribed {
  opacity: 0.7;
  transition: all 0.25s ease;
  background-color: transparent;
}

/* الصورة أبيض وأسود بنسبة خفيفة */
.oa-unsubscribed .card-img {
  filter: grayscale(90%);
  transition: filter 0.25s ease, transform 0.25s ease;
}

/* ⚠️ النصوص تبقى طبيعية (لا تعتيم عام) */
.oa-unsubscribed .card-body {
  opacity: 1;
}

/* ✅ قسم التوقيت فقط (الحصة المباشرة / العد التنازلي) */
.oa-unsubscribed .card-footer,
.oa-unsubscribed .live-col {
  filter: grayscale(100%);
  opacity: 0.85;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

/* Hover: تعود الحياة */
.oa-unsubscribed:hover {
  opacity: 1;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

/* Hover: رجوع الألوان للصورة */
.oa-unsubscribed:hover .card-img {
  filter: grayscale(0%);
  transform: scale(1.02);
}

/* Hover: رجوع الألوان لقسم التوقيت */
.oa-unsubscribed:hover .card-footer,
.oa-unsubscribed:hover .live-col {
  filter: grayscale(0%);
  opacity: 1;
}

/* زر الاشتراك يبقى واضحًا دائمًا */
.oa-unsubscribed .oa-subscribe-btn,
.oa-unsubscribed .btn-subscribe,
.oa-unsubscribed button[data-action="subscribe"] {
  filter: none !important;
  opacity: 1 !important;
}