/* Ramadan Theme Styles */
:root {
  --ramadan-gold: #FFD700;
  --ramadan-green: #004d40;
  --ramadan-cream: #fdfbf7;
  --ramadan-overlay: rgba(0, 77, 64, 0.05);
}

/* General Theme Overrides */
body {
  background-image: linear-gradient(to bottom, var(--ramadan-cream), #fff);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Aref Ruqaa', serif !important; /* Arabic Calligraphy Style */
}

.highlight, .text-primary {
  color: var(--ramadan-green) !important;
}

.btn-primary, .main-cta-button {
  background-color: var(--ramadan-green) !important;
  border-color: var(--ramadan-gold) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(0, 77, 64, 0.3);
}

.btn-primary:hover, .main-cta-button:hover {
  background-color: var(--ramadan-gold) !important;
  color: var(--ramadan-green) !important;
}

/* Ramadan Decorations Container */
.ramadan-decorations {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 9999;
  pointer-events: none;
}

/* Hanging Lanterns (Fanoos) */
.lantern-container {
  position: absolute;
  top: -20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  animation: swing 3s infinite ease-in-out alternate;
}

.lantern-container.left {
  left: 5%;
  animation-delay: 0s;
}

.lantern-container.right {
  right: 5%;
  animation-delay: 1.5s;
}

.lantern-string {
  width: 2px;
  height: 100px;
  background: var(--ramadan-gold);
}

.lantern-body {
  font-size: 3rem;
  color: var(--ramadan-gold);
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
  position: relative;
  z-index: 2;
}

.lantern-light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #fff, transparent);
  opacity: 0.8;
  animation: flicker 2s infinite alternate;
}

/* Crescent Moon Decoration */
.ramadan-moon {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8rem;
  color: rgba(255, 215, 0, 0.1);
  z-index: -1;
  pointer-events: none;
}

/* Animations */
@keyframes swing {
  0% { transform: rotate(5deg); }
  100% { transform: rotate(-5deg); }
}

@keyframes flicker {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

/* Floating Stars */
.star {
  position: absolute;
  color: var(--ramadan-gold);
  animation: twinkle 2s infinite ease-in-out;
}

.star:nth-child(1) { top: 50px; left: 10%; font-size: 1rem; animation-delay: 0.2s; }
.star:nth-child(2) { top: 80px; left: 15%; font-size: 0.8rem; animation-delay: 0.5s; }
.star:nth-child(3) { top: 40px; right: 12%; font-size: 1.2rem; animation-delay: 0.8s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Card Borders */
.card, .feature-card, .program-card {
  border: 1px solid var(--ramadan-gold) !important;
  box-shadow: 0 4px 6px rgba(0, 77, 64, 0.1) !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
  background: var(--ramadan-green);
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ramadan-cream);
}

/* Ramadan Notification Popup */
.ramadan-popup {
  position: fixed;
  bottom: 20px;
  left: 20px; /* Align left to avoid conflict with potential right-side chat widgets */
  background: linear-gradient(135deg, var(--ramadan-green), #003300);
  color: #fff;
  padding: 15px 25px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 2px solid var(--ramadan-gold);
  animation: slideInUp 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  max-width: 350px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.ramadan-popup:hover {
  transform: translateY(-5px);
}

.popup-icon {
  font-size: 2rem;
  color: var(--ramadan-gold);
  animation: pulse 2s infinite;
}

.popup-content h4 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--ramadan-gold);
  font-family: 'Aref Ruqaa', serif;
}

.popup-content p {
  margin: 5px 0 0;
  font-size: 0.9rem;
  color: #fff;
  font-family: 'Cairo', sans-serif;
}

.popup-close {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ff4444;
  color: #fff;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  border: 2px solid #fff;
}

@keyframes slideInUp {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Mobile Responsiveness for Popup */
@media (max-width: 576px) {
  .ramadan-popup {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
    justify-content: center;
  }
}