/* ==========================================================================
   MASJID NOOR (MASJID E NOOR) - Custom Stylesheet
   Theme: Classic Emerald Green (#064e3b, #022c22) & Islamic Warm Gold (#d97706, #c59b27, #f59e0b)
   Typography: 100% Modern Sans-Serif (Plus Jakarta Sans & Inter)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary-emerald: #064e3b;
  --primary-dark: #022c22;
  --primary-light: #047857;
  --primary-tint: #ecfdf5;
  --accent-gold: #c59b27;
  --accent-gold-dark: #a17c18;
  --accent-gold-light: #fef08a;
  --gold-gradient: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  --gold-shine: linear-gradient(90deg, #b38728 0%, #fbf5b7 50%, #b38728 100%);
  --emerald-gradient: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
  --surface-cream: #faf8f5;
  --surface-white: #ffffff;
  --text-dark: #0f172a;
  --text-muted: #64748b;
  --border-gold: rgba(197, 155, 39, 0.35);
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-dark);
  background-color: #fcfbf9;
  overflow-x: hidden;
}

/* 100% Sans-Serif Headings */
h1, h2, h3, h4, h5, h6, .font-cinzel, .font-heading {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.font-amiri {
  font-family: 'Amiri', serif;
}

/* Islamic Geometric Backgrounds in Emerald */
.bg-islamic-pattern {
  background-color: #064e3b;
  background-image: radial-gradient(rgba(217, 119, 6, 0.18) 1px, transparent 0), radial-gradient(rgba(217, 119, 6, 0.18) 1px, #022c22 1px);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
}

.bg-islamic-light-pattern {
  background-color: #faf8f5;
  background-image: radial-gradient(rgba(6, 78, 59, 0.08) 1px, transparent 0), radial-gradient(rgba(197, 155, 39, 0.08) 1px, #faf8f5 1px);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
}

/* Gold Accents & Borders */
.gold-border-top {
  border-top: 3px solid var(--accent-gold);
}

.gold-gradient-bg {
  background: var(--gold-gradient);
}

.gold-gradient-text {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-badge {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #ffffff;
}

/* Updated Button Styles */
.btn-gold {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
}

.btn-gold:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.5);
  transform: translateY(-2px);
}

.btn-emerald {
  background: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
  color: #ffffff;
  font-weight: 700;
  border: 1px solid rgba(217, 119, 6, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(6, 78, 59, 0.25);
}

.btn-emerald:hover {
  background: linear-gradient(135deg, #047857 0%, #064e3b 100%);
  border-color: #fbbf24;
  box-shadow: 0 6px 20px rgba(6, 78, 59, 0.4);
  transform: translateY(-2px);
}

.btn-royal {
  background: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
  color: #ffffff;
  font-weight: 700;
  border: 1px solid rgba(217, 119, 6, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-royal:hover {
  background: linear-gradient(135deg, #047857 0%, #064e3b 100%);
  border-color: #fbbf24;
  transform: translateY(-2px);
}

/* Prayer Time Cards */
.prayer-card {
  transition: all 0.3s ease;
  border-top: 4px solid transparent;
}

.prayer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(6, 78, 59, 0.12);
  border-top-color: var(--accent-gold);
}

.prayer-card.active-prayer {
  background: linear-gradient(145deg, #064e3b, #022c22) !important;
  color: #ffffff !important;
  border-top-color: #fbbf24 !important;
  box-shadow: 0 10px 25px rgba(6, 78, 59, 0.3) !important;
}

.prayer-card.active-prayer .prayer-name {
  color: #fbbf24 !important;
}

.prayer-card.active-prayer .prayer-time {
  color: #ffffff !important;
}

.prayer-card.active-prayer .athan-time {
  color: #d1fae5 !important;
}

/* Project / Expense Donation Cards */
.project-card {
  transition: all 0.35s ease;
  border: 1px solid #e5e7eb;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-gold);
  box-shadow: 0 16px 32px rgba(6, 78, 59, 0.1);
}

/* Progress bar */
.progress-bar-fill {
  background: linear-gradient(90deg, #059669, #10b981, #d97706);
}

/* Glassmorphism elements */
.glass-panel {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.glass-dark-panel {
  background: rgba(2, 44, 34, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(197, 155, 39, 0.3);
}

/* Modal Overlays & Display Enforcement */
.modal-overlay {
  background: rgba(2, 44, 34, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999 !important;
}

#donation-modal, #lightbox-modal {
  z-index: 9999 !important;
}

#donation-modal.hidden, #lightbox-modal.hidden {
  display: none !important;
}

#donation-modal.flex, #lightbox-modal.flex {
  display: flex !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #064e3b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d97706;
}

/* Loading Spinner */
.spinner-border {
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Print Optimization */
@media print {
  body {
    background: #ffffff;
    color: #000000;
  }
  header, footer, .no-print, .btn-gold, .btn-emerald, .btn-royal, .announcement-bar {
    display: none !important;
  }
  .print-area {
    display: block !important;
    width: 100% !important;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #000;
    padding: 6px;
    text-align: center;
  }
}