/* Islamic Geometric Background & Ambient Styling */
.islamic-pattern-bg {
  background-color: #08121E;
  background-image: radial-gradient(#d4af37 0.75px, transparent 0.75px), radial-gradient(#123735 0.75px, #08121E 0.75px);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

/* Typography Utility Classes */
.font-amiri {
  font-family: 'Amiri', serif;
}
.font-cairo {
  font-family: 'Cairo', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #08121E;
}
::-webkit-scrollbar-thumb {
  background: #123735;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d4af37;
}

/* Touch & Highlight optimizations */
* {
  -webkit-tap-highlight-color: transparent;
}

button, a, select {
  touch-action: manipulation;
}

/* Compass animations */
#compassDial {
  will-change: transform;
}

/* Active prayer card glowing gradient */
.active-prayer-card {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(18, 55, 53, 0.6) 100%) !important;
  border-color: rgba(212, 175, 55, 0.6) !important;
  box-shadow: 0 4px 20px -2px rgba(212, 175, 55, 0.25);
}

/* Smooth active states */
button:active {
  transform: scale(0.97);
}

/* Clean monospaced numerals for prayer times */
.font-mono {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}