/* ============================================================
   NoorAlFajr — Components
   Buttons, Cards, Badges, Inputs, Alerts, Prayer Cards
   ============================================================ */

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-xl);
  font-family: var(--font-english);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-bounce);
  text-decoration: none;
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: scale(1.02); }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--gradient-brand);
  color: white;
  box-shadow: var(--shadow-green);
}
.btn-primary:hover { box-shadow: 0 6px 25px rgba(16,185,129,0.4); color: white; }

.btn-gold {
  background: var(--gradient-gold);
  color: white;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover { box-shadow: 0 6px 25px rgba(245,158,11,0.45); color: white; }

.btn-outline {
  background: transparent;
  border-color: var(--primary-500);
  color: var(--primary-600);
}
.btn-outline:hover { background: var(--primary-50); color: var(--primary-700); }

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
}
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-900); }

.btn-danger {
  background: #ef4444;
  color: white;
}

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); border-radius: var(--radius-lg); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-md); }
.btn-xl { padding: var(--space-5) var(--space-10); font-size: var(--text-lg); border-radius: var(--radius-2xl); }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-lg); }
.btn-icon-lg { width: 48px; height: 48px; padding: 0; border-radius: var(--radius-xl); }
.btn-full { width: 100%; }

/* ─── Cards ─── */
.card {
  background: var(--color-bg-card);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all var(--transition-normal);
}
.card:hover { box-shadow: var(--shadow-lg); }

.card-hover:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.card-interactive { cursor: pointer; }

.card-body   { padding: var(--space-6); }
.card-header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); }
.card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); background: var(--color-bg-sidebar); }

/* Glass card */
.card-glass {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-2xl);
}

/* ─── Prayer Time Card ─── */
.prayer-card {
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  color: white;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-bounce);
}
.prayer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.1);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.prayer-card:hover { transform: translateY(-4px); }
.prayer-card:hover::before { opacity: 1; }
.prayer-card.fajr    { background: var(--gradient-fajr); }
.prayer-card.sunrise { background: var(--gradient-sunrise); }
.prayer-card.dhuhr   { background: var(--gradient-dhuhr); }
.prayer-card.asr     { background: var(--gradient-asr); }
.prayer-card.maghrib { background: var(--gradient-maghrib); }
.prayer-card.isha    { background: var(--gradient-isha); }
.prayer-card.active  { transform: scale(1.04); box-shadow: var(--shadow-xl); }

.prayer-card .prayer-name { font-size: var(--text-sm); opacity: 0.85; font-weight: var(--fw-medium); }
.prayer-card .prayer-time { font-size: var(--text-2xl); font-weight: var(--fw-bold); font-family: var(--font-english); }
.prayer-card .prayer-icon { font-size: 2rem; opacity: 0.6; }

/* ─── Surah / Feature Cards ─── */
.surah-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  color: inherit;
}
.surah-card:hover {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
  text-decoration: none;
  color: inherit;
}
.surah-number {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.surah-info { flex: 1; min-width: 0; }
.surah-name-ar { font-family: var(--font-arabic); font-size: 1.2rem; line-height: 1.5; }
.surah-name-en { font-size: var(--text-sm); color: var(--color-text-muted); }
.surah-meta { font-size: var(--text-xs); color: var(--color-text-light); margin-top: 2px; }

/* ─── Ayah Card ─── */
.ayah-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
  transition: all var(--transition-normal);
}
.ayah-card:hover { border-color: var(--primary-200); box-shadow: var(--shadow-sm); }
.ayah-card.bookmarked { border-color: var(--gold-300); background: var(--gold-50); }

/* ─── Hadith Card ─── */
.hadith-card {
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all var(--transition-normal);
}
.hadith-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hadith-card .collection-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  background: var(--primary-100);
  color: var(--primary-700);
}

/* ─── Dua Card ─── */
.dua-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  overflow: hidden;
}
.dua-card .dua-arabic {
  background: linear-gradient(135deg, var(--primary-50), var(--gold-50));
  padding: var(--space-6);
  text-align: center;
}
.dua-card .dua-body { padding: var(--space-5); }

/* ─── Stats / Counter Cards ─── */
.stat-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  text-align: center;
}
.stat-value { font-size: var(--text-4xl); font-weight: var(--fw-extrabold); font-family: var(--font-english); }
.stat-label { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

/* ─── Input Fields ─── */
.input-group { margin-bottom: var(--space-5); }
.input-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--gray-700);
  margin-bottom: var(--space-1);
}
.input, .select, .textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.input-icon-wrap { position: relative; }
.input-icon-wrap .input { padding-left: 2.75rem; }
.input-icon-wrap .icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); }

/* ─── Badges ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.badge-green  { background: var(--primary-100); color: var(--primary-700); }
.badge-gold   { background: var(--gold-100);    color: var(--gold-700); }
.badge-gray   { background: var(--gray-100);    color: var(--gray-600); }
.badge-blue   { background: #dbeafe;            color: #1d4ed8; }
.badge-red    { background: #fee2e2;            color: #991b1b; }

/* ─── Alerts / Toast ─── */
.alert {
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  border-left: 4px solid transparent;
  font-size: var(--text-sm);
}
.alert-success { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-800); }
.alert-warning { background: var(--gold-50);    border-color: var(--gold-500);    color: var(--gold-800); }
.alert-error   { background: #fef2f2;           border-color: #ef4444;            color: #991b1b; }
.alert-info    { background: #eff6ff;           border-color: #3b82f6;            color: #1d4ed8; }

/* Toast notification */
.toast-container {
  position: fixed; top: 80px; right: var(--space-4);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.toast {
  background: var(--gray-900);
  color: white;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  min-width: 220px;
  animation: slideInRight 0.3s ease;
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ─── Progress Bar ─── */
.progress-bar {
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--gradient-brand);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}
.progress-fill.gold { background: var(--gradient-gold); }

/* ─── Toggle Switch ─── */
.toggle-wrap { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.toggle {
  position: relative;
  width: 48px; height: 26px;
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: var(--radius-full);
  background: white;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-bounce);
}
input[type="checkbox"]:checked + .toggle {
  background: var(--primary-500);
}
input[type="checkbox"]:checked + .toggle::after {
  transform: translateX(22px);
}
input[type="checkbox"] { display: none; }

/* ─── Tabs ─── */
.tabs {
  display: flex;
  gap: var(--space-1);
  background: var(--color-bg-sidebar);
  padding: var(--space-1);
  border-radius: var(--radius-xl);
}
.tab-btn {
  flex: 1;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  text-align: center;
  cursor: pointer;
}
.tab-btn.active {
  background: white;
  color: var(--primary-700);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-sm);
}

/* ─── Loader / Spinner ─── */
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--primary-500);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Empty States ─── */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  color: var(--color-text-muted);
}
.empty-state .empty-icon { font-size: 4rem; margin-bottom: var(--space-4); }
.empty-state h3 { color: var(--gray-700); margin-bottom: var(--space-2); }