/* ═══════════════════════════════════════════════
   Egypt Passes — Global Styles
   ═══════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}

/* ── Panels & Overlays ──────────────────────── */

.glass-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.hero-overlay {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
}

.card-gradient {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* ── Scroll Reveal Animations ───────────────── */

.reveal {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translate(0, 0) scale(1) !important;
}

.reveal-up {
  transform: translateY(60px);
}
.reveal-left {
  transform: translateX(-60px);
}
.reveal-right {
  transform: translateX(60px);
}
.reveal-scale {
  transform: scale(0.9);
}
.reveal-fade {
}

/* ── Stagger Delays ─────────────────────────── */

.delay-100 {
  transition-delay: 0.1s;
}
.delay-200 {
  transition-delay: 0.2s;
}
.delay-300 {
  transition-delay: 0.3s;
}
.delay-400 {
  transition-delay: 0.4s;
}
.delay-500 {
  transition-delay: 0.5s;
}

/* ── TOC Active Link ──────────────────────────── */

.toc-link.active {
  color: #cba163;
  border-left-color: #cba163;
  background-color: rgba(203, 161, 99, 0.05);
}

/* ── RTL Support (Arabic) ────────────────────── */

[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .flex {
  /* Most flex layouts work naturally with RTL direction */
}

[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .left-0 { left: auto; right: 0; }
[dir="rtl"] .right-0 { right: auto; left: 0; }
[dir="rtl"] .left-0.right-0 { left: 0; right: 0; }
[dir="rtl"] .left-6 { left: auto; right: 1.5rem; }
[dir="rtl"] .right-5 { right: auto; left: 1.25rem; }
[dir="rtl"] .left-5 { left: auto; right: 1.25rem; }

[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

[dir="rtl"] .border-l { border-left: 0; border-right-width: 1px; }
[dir="rtl"] .border-r { border-right: 0; border-left-width: 1px; }

[dir="rtl"] .toc-link.active {
  border-left-color: transparent;
  border-right-color: #cba163;
}

/* Flip directional icons in RTL */
[dir="rtl"] .material-symbols-outlined.arrow_forward,
[dir="rtl"] [data-i18n] + .material-symbols-outlined {
  transform: scaleX(-1);
}

[dir="rtl"] .group-hover\/btn\:translate-x-1:hover {
  transform: scaleX(-1) translateX(0.25rem);
}

/* Reveal animations flip for RTL */
[dir="rtl"] .reveal-left {
  transform: translateX(60px);
}
[dir="rtl"] .reveal-right {
  transform: translateX(-60px);
}

/* ── Custom Scrollbar ─────────────────────────── */

.custom-scrollbar::-webkit-scrollbar {
  height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}