/* ============================================================
   NoorAlFajr — Prayer Widget Styles
   ============================================================ */

/* ─── Prayer Dashboard Hero ─── */
.prayer-hero {
  border-radius: var(--radius-2xl);
  background: var(--gradient-fajr);
  padding: var(--space-8) var(--space-6);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background var(--transition-slow);
}
.prayer-hero.fajr    { background: var(--gradient-fajr); }
.prayer-hero.sunrise { background: var(--gradient-sunrise); }
.prayer-hero.dhuhr   { background: var(--gradient-dhuhr); }
.prayer-hero.asr     { background: var(--gradient-asr); }
.prayer-hero.maghrib { background: var(--gradient-maghrib); }
.prayer-hero.isha    { background: var(--gradient-isha); }

.prayer-hero .current-prayer-name {
  font-size: var(--text-lg);
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-weight: var(--fw-medium);
}
.prayer-hero .current-prayer-time {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: var(--fw-extrabold);
  font-family: var(--font-english);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: var(--space-2) 0;
}
.prayer-hero .next-prayer-info {
  font-size: var(--text-sm);
  opacity: 0.75;
  margin-top: var(--space-4);
  background: rgba(0,0,0,0.15);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  display: inline-block;
}

/* Countdown timer */
.countdown-timer {
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  font-family: var(--font-english);
  color: var(--gold-300);
  letter-spacing: 0.05em;
  margin-top: var(--space-3);
}
.countdown-label { font-size: var(--text-xs); color: rgba(255,255,255,0.7); margin-bottom: 4px; }

/* ─── Location Bar ─── */
.location-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-4);
}
.location-bar .location-icon { color: var(--primary-500); font-size: 1.2rem; }
.location-bar .location-name { font-weight: var(--fw-medium); font-size: var(--text-sm); flex: 1; }
.location-bar .location-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.location-bar .btn-change { font-size: var(--text-xs); color: var(--primary-600); cursor: pointer; white-space: nowrap; }

/* ─── Method Selector ─── */
.method-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.method-chip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-text-muted);
}
.method-chip.active { background: var(--primary-600); border-color: var(--primary-600); color: white; }
.method-chip:hover:not(.active) { border-color: var(--primary-300); color: var(--primary-600); }

/* ─── Prayer Table ─── */
.prayer-table {
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.prayer-table th {
  background: var(--primary-900);
  color: white;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-weight: var(--fw-semibold);
}
.prayer-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.prayer-table tr:hover td { background: var(--primary-50); }
.prayer-table tr.active-row td { background: var(--primary-50); font-weight: var(--fw-semibold); color: var(--primary-700); }
.prayer-table tr:last-child td { border-bottom: none; }
[data-theme="dark"] .prayer-table tr:hover td { background: rgba(16,185,129,0.05); }
[data-theme="dark"] .prayer-table tr.active-row td { background: rgba(16,185,129,0.08); color: var(--primary-300); }

/* ─── Calendar Grid ─── */
.prayer-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.prayer-calendar-grid .cal-header, .prayer-calendar-grid .cal-cell {
  background: var(--color-bg-card);
  padding: var(--space-2);
  text-align: center;
}
.prayer-calendar-grid .cal-header { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.prayer-calendar-grid .cal-cell { font-size: var(--text-xs); cursor: pointer; transition: background var(--transition-fast); }
.prayer-calendar-grid .cal-cell:hover { background: var(--primary-50); }
.prayer-calendar-grid .cal-cell.today { background: var(--primary-600); color: white; font-weight: var(--fw-bold); }

/* ─── Adhan Play Button ─── */
.adhan-play-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--gradient-brand);
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--transition-bounce);
  box-shadow: var(--shadow-green);
}
.adhan-play-btn:hover { box-shadow: 0 6px 25px rgba(16,185,129,0.4); transform: scale(1.03); }

/* ─── Hijri Date Display ─── */
.hijri-date-display {
  text-align: center;
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--gold-50), var(--primary-50));
  border-radius: var(--radius-xl);
  border: 1px solid var(--gold-200);
}
.hijri-date-ar { font-family: var(--font-arabic); font-size: 1.3rem; color: var(--gold-700); direction: rtl; }
.hijri-date-en { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
[data-theme="dark"] .hijri-date-display { background: rgba(245,158,11,0.05); border-color: rgba(245,158,11,0.15); }