/* Custom CSS supplementing Tailwind */
html {
  scroll-behavior: smooth;
}

:root {
  /* Default Colors (matches Tailwind config in index.html) */
  --theme-surface: #131313;
  --theme-primary: #e9c176;
  --theme-primary-container: #c5a059;
  --theme-overlay: transparent;
}

/* Dynamic Event Theming Overrides (Admin toggled) */
.theme-ramadan {
  --theme-surface: #0a100d;
  --theme-primary: #d4af37;
  --theme-primary-container: #997a00;
  --theme-overlay: rgba(10, 16, 13, 0.4);
}

.theme-coptic-christmas {
  --theme-surface: #1a0505;
  --theme-primary: #e6b325;
  --theme-primary-container: #b30000;
  --theme-overlay: rgba(26, 5, 5, 0.4);
}

.theme-police-day {
  --theme-surface: #0a1128;
  --theme-primary: #ffffff;
  --theme-primary-container: #b80000;
  --theme-overlay: rgba(10, 17, 40, 0.4);
}

/* Event Overlay Helper */
.event-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--theme-overlay);
  pointer-events: none;
  z-index: 1;
}

/* Smooth transitions for theme changes */
body {
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* LTR/RTL support */
body[dir="rtl"] {
  font-family: 'Noto Kufi Arabic', 'Noto Serif', serif;
}

/* Loader */
.loader {
  border-top-color: var(--theme-primary);
  -webkit-animation: spinner 1.5s linear infinite;
  animation: spinner 1.5s linear infinite;
}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Global Select/Option Contrast Fix */
select option {
  background-color: #1c1b1b !important;
  color: #ffffff !important;
  padding: 12px !important;
}

select:focus {
  border-color: var(--theme-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--theme-primary-container) !important;
}

/* Scrollbar Styling for Premium Feel */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #111;
}
::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #444;
}

/* Lightbox */
#lightbox {
  animation: lightbox-fade-in 0.2s ease-out;
}
@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
#lightbox-img {
  animation: lightbox-zoom-in 0.2s ease-out;
}
@keyframes lightbox-zoom-in {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Hide scrollbar utility */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }