@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

/* ==========================================================================
   Base & Global Typography
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* Offsets sticky navbar on in-page anchor clicks */
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: #FAFAFA;
  color: #222222;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.ar-text {
  font-family: 'Tajawal', 'Geeza Pro', 'Tahoma', sans-serif;
  direction: rtl;
}

.badge-ribbon {
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%);
}

/* ==========================================================================
   Elevation & Visual Tweaks
   ========================================================================== */
.card-shadow {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .card-shadow:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px -4px rgba(200, 16, 46, 0.16), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
  }
}

.dark-glow {
  background: radial-gradient(circle at center, rgba(200, 16, 46, 0.25) 0%, rgba(20, 20, 20, 0.95) 75%);
}

/* Scrollbar Helpers */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   Smooth IntersectionObserver Scroll Reveal
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   App Download Modal Styling
   ========================================================================== */
.app-modal {
  transition: opacity 0.3s ease;
}

.app-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.app-modal.show .app-modal-content {
  transform: scale(1);
}

/* Mobile Adjustments for Small Touch Displays */
@media (max-width: 640px) {
  html {
    scroll-padding-top: 4rem;
  }
  
  .app-modal-content {
    margin: 0.5rem;
    padding: 1.5rem 1.25rem;
  }
}