/* ============================================================
   URDU DOWNLOAD CENTER — CSS
   ============================================================ */

/* ── 1. Vazirmatn Font ── */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ── 2. Apply font to entire app wrapper ── */
#dc-app-ur,
#dc-app-ur * {
  font-family: 'Vazirmatn', sans-serif !important;
}

/* ── 3. Modal animations (same as English version) ── */
#dc-app-ur .modal-content {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#dc-app-ur .modal-open   { opacity: 1; transform: scale(1); }
#dc-app-ur .modal-closed { opacity: 0; transform: scale(0.95); pointer-events: none; }

/* ── 4. RTL: flip the left-border accent used in modal description ── */
#dc-app-ur .border-l-4 {
  border-left: none !important;
  border-right: 4px solid #73a15b !important;
}

/* ── 5. RTL: Search icon sits on the RIGHT, input padding adjusted ── */
#dc-app-ur #dc-search-ur {
  padding-right: 3rem;
  padding-left:  1.5rem;
  text-align: right;
}

/* ── 6. RTL: select element ── */
#dc-app-ur select {
  direction: rtl;
  text-align: right;
}

/* ── 7. Custom scrollbar ── */
#dc-app-ur ::-webkit-scrollbar       { width: 8px; height: 8px; }
#dc-app-ur ::-webkit-scrollbar-track { background: #f1f5f9; }
#dc-app-ur ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
#dc-app-ur ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── 8. Hide scrollbar on tab rows ── */
#dc-app-ur .scrollbar-hide::-webkit-scrollbar { display: none; }
#dc-app-ur .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── 9. Card fade-in animation ── */
@keyframes dcFadeInUp {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
#dc-app-ur .dc-fade { animation: dcFadeInUp 0.5s ease-out forwards; }

/* ── 10. Stat dividers — flip for RTL ── */
#dc-app-ur #dc-stats-ur > div:not(:last-child) {
  border-left:  1px solid #e2e8f0;
  border-right: none;
}
