@font-face {
  font-family: 'ChangaLocal';
  src: url('../assets/fonts/Changa.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AvatarWater';
  src: url('../assets/fonts/Avatar%20Water.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SoloEternal';
  src: url('../assets/fonts/Eternal.ttf') format('truetype');
  font-display: swap;
}

.font-avatar {
  font-family: 'AvatarWater', sans-serif !important;
}

:root {
  --crimson: #ff003c;
  --crimson-glow: rgba(255, 0, 60, 0.45);
  --pure-white: #ffffff;
  --ghost-gray: #a1a1aa;
  --bg-deep: #050507;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html, body, button, input, textarea, select, h1, h2, h3, h4, h5, h6, p, span, a, div, label {
  font-family: 'ChangaLocal', 'Changa', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.font-avatar {
  font-family: 'AvatarWater', sans-serif !important;
}

.font-solo {
  font-family: 'SoloEternal', 'ChangaLocal', 'Changa', sans-serif !important;
}

.giant-street-title {
  font-family: 'SoloEternal', 'ChangaLocal', 'Changa', sans-serif !important;
}

.font-mono {
  font-family: 'ChangaLocal', 'Changa', monospace !important;
}

body {
  background-color: #000000;
  color: var(--pure-white);
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

::selection {
  background: var(--crimson);
  color: #fff;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
  background: #1c1f26;
  border-radius: 2px;
  border: 1px solid rgba(255, 0, 60, 0.3);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--crimson);
}

/* Modal Specific Dynamic Scrollbar */
#order-modal-card::-webkit-scrollbar,
#order-modal::-webkit-scrollbar {
  width: 4px;
}
#order-modal-card::-webkit-scrollbar-track,
#order-modal::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}
#order-modal-card::-webkit-scrollbar-thumb,
#order-modal::-webkit-scrollbar-thumb {
  background: var(--modal-scrollbar-thumb, #1c1f26);
  border-radius: 4px;
  border: 1px solid var(--modal-scrollbar-border, rgba(255, 255, 255, 0.3));
}
#order-modal-card::-webkit-scrollbar-thumb:hover,
#order-modal::-webkit-scrollbar-thumb:hover {
  background: var(--modal-scrollbar-hover, #ffffff);
}

/* ------------------------------------------------------------- */
/* CHARACTER CINEMATIC ENTRANCE                                  */
/* ------------------------------------------------------------- */
.character-intro-anim {
  position: relative;
  z-index: 100;
  animation: charCenterToFarRightBlackSpace 3.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
  transform: translateZ(0);
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.9));
}

@keyframes charCenterToFarRightBlackSpace {
  0% {
    transform: translate3d(0, 0, 0) scale(1.65);
    opacity: 1;
  }
  20% {
    transform: translate3d(0, 0, 0) scale(1.6);
    opacity: 1;
  }
  100% {
    transform: translate3d(38vw, 0, 0) scale(0.88);
    opacity: 0.7;
  }
}

@media (max-width: 1024px) {
  @keyframes charCenterToFarRightBlackSpace {
    0% { transform: translate3d(0, 0, 0) scale(1.35); opacity: 1; }
    20% { transform: translate3d(0, 0, 0) scale(1.3); opacity: 1; }
    100% { transform: translate3d(0, 0, 0) scale(0.92); opacity: 0.8; }
  }
}

/* Red Aura Layer: Fades in only after character settles */
.char-red-aura {
  opacity: 0;
  animation: auraFadeIn 1.4s ease-out 2.6s forwards;
  transform: translateZ(0);
}

@keyframes auraFadeIn {
  to {
    opacity: 0.75;
  }
}

/* Idle Floating after settling (Hardware Accelerated with translate3d) */
.character-idle-float {
  animation: charIdleFloat 6s ease-in-out infinite alternate;
  object-fit: contain !important;
  background-repeat: no-repeat !important;
  will-change: transform;
  transform: translateZ(0);
}

@keyframes charIdleFloat {
  0% { transform: translate3d(0, 0px, 0); }
  100% { transform: translate3d(0, -8px, 0); }
}

/* ------------------------------------------------------------- */
/* PURE FLOATING SOFTWARE ICONS (NON-CLICKABLE, ZERO BOX/BORDER) */
/* ------------------------------------------------------------- */
.floating-software-badge {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0;
  transform: scale(0);
}

.floating-software-badge img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  pointer-events: none !important;
}

@keyframes softwareEmergence {
  0% {
    opacity: 0;
    transform: scale(0) translate3d(0, 0, 0);
  }
  60% {
    opacity: 0.85;
    transform: scale(1.1) translate3d(var(--tx, 0), var(--ty, 0), 0);
  }
  100% {
    opacity: 0.85;
    transform: scale(1) translate3d(var(--tx, 0), var(--ty, 0), 0);
  }
}

/* Badges emerge sequentially after character glides */
.badge-ae {
  top: 8%;
  left: 2%;
  --tx: -12px;
  --ty: -10px;
  animation: softwareEmergence 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.8s forwards, floatOrbit1 5.5s ease-in-out 4.0s infinite alternate;
}

.badge-pr {
  top: 6%;
  right: 4%;
  --tx: 12px;
  --ty: -12px;
  animation: softwareEmergence 1.2s cubic-bezier(0.16, 1, 0.3, 1) 3.1s forwards, floatOrbit2 6.2s ease-in-out 4.3s infinite alternate;
}

.badge-bl {
  top: -7%;
  left: 45%;
  --tx: 0px;
  --ty: -14px;
  animation: softwareEmergence 1.2s cubic-bezier(0.16, 1, 0.3, 1) 3.4s forwards, floatOrbit3 5.8s ease-in-out 4.6s infinite alternate;
}

.badge-ps {
  top: 36%;
  right: 2%;
  --tx: 10px;
  --ty: 6px;
  animation: softwareEmergence 1.2s cubic-bezier(0.16, 1, 0.3, 1) 3.7s forwards, floatOrbit1 6.5s ease-in-out 4.9s infinite alternate;
}

.badge-ai {
  top: 36%;
  left: 15%;
  --tx: -10px;
  --ty: 6px;
  animation: softwareEmergence 1.2s cubic-bezier(0.16, 1, 0.3, 1) 4.0s forwards, floatOrbit2 6.0s ease-in-out 5.2s infinite alternate;
}

@keyframes floatOrbit1 {
  0% { transform: translate3d(var(--tx, 0), var(--ty, 0), 0); }
  50% { transform: translate3d(calc(var(--tx, 0) + 4px), calc(var(--ty, 0) - 8px), 0); }
  100% { transform: translate3d(calc(var(--tx, 0) - 4px), calc(var(--ty, 0) - 4px), 0); }
}

@keyframes floatOrbit2 {
  0% { transform: translate3d(var(--tx, 0), var(--ty, 0), 0); }
  50% { transform: translate3d(calc(var(--tx, 0) - 4px), calc(var(--ty, 0) - 8px), 0); }
  100% { transform: translate3d(calc(var(--tx, 0) + 4px), calc(var(--ty, 0) - 10px), 0); }
}

@keyframes floatOrbit3 {
  0% { transform: translate3d(var(--tx, 0), var(--ty, 0), 0); }
  50% { transform: translate3d(calc(var(--tx, 0) + 6px), calc(var(--ty, 0) - 5px), 0); }
  100% { transform: translate3d(calc(var(--tx, 0) - 4px), calc(var(--ty, 0) - 10px), 0); }
}

/* ------------------------------------------------------------- */
/* RUNWAY VIDEO CARD SHIFTED TO FAR LEFT (أقصى اليسار)          */
/* ------------------------------------------------------------- */
.runway-far-left {
  opacity: 0;
  animation: slideInFarLeft 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2.0s forwards;
}

@keyframes slideInFarLeft {
  0% {
    opacity: 0;
    transform: translateX(-35vw);
  }
  100% {
    opacity: 1;
    transform: translateX(-12vw);
  }
}

@media (max-width: 1024px) {
  @keyframes slideInFarLeft {
    0% { opacity: 0; transform: translateX(-40px); }
    100% { opacity: 1; transform: translateX(0); }
  }
}

/* Hero Section Side Elements Slide-in */
.slide-in-right {
  opacity: 0;
  transform: translateX(80px);
  animation: slideInSide 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2.0s forwards;
}

.slide-in-top {
  opacity: 0;
  transform: translateY(-50px);
  animation: slideInDown 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.2s forwards;
}

/* All background elements fade in with world */
.fade-in-world {
  opacity: 0;
  animation: fadeInAll 1.8s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards;
}

@keyframes slideInSide {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInAll {
  to {
    opacity: 1;
  }
}

/* ------------------------------------------------------------- */
/* UNIFIED HERO DESKTOP PERSPECTIVE (PC ONLY - MIN-WIDTH: 1024PX)*/
/* Keeps Video, Text, and Character in identical centered positions*/
/* in both Arabic and English without affecting mobile at all    */
/* ------------------------------------------------------------- */
@media (min-width: 1024px) {
  #hero-main-stage {
    direction: ltr !important;
  }

  html[lang="ar"] #hero-main-stage .slide-in-right {
    direction: rtl;
  }

  html[lang="ar"] #hero-main-stage #hero-runway-card {
    direction: rtl;
  }
}

/* ------------------------------------------------------------- */
/* DROPDOWN MENU ACTIVE & VISIBILITY STYLES                      */
/* ------------------------------------------------------------- */
#dropdown-menu {
  max-height: calc(100vh - 4.2rem) !important;
  max-height: calc(100dvh - 4.2rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: #ff003c rgba(15, 17, 26, 0.85);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease;
}

/* Custom Visible Scrollbar for Dropdown Menu (سحاب القائمة) */
#dropdown-menu::-webkit-scrollbar {
  width: 6px !important;
  display: block !important;
}
#dropdown-menu::-webkit-scrollbar-track {
  background: rgba(10, 12, 18, 0.65) !important;
  border-radius: 9999px !important;
  margin: 6px 0 !important;
}
#dropdown-menu::-webkit-scrollbar-thumb {
  background: #ff003c !important;
  background: linear-gradient(180deg, #ff003c 0%, #b3002a 100%) !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
#dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #ff1a4f !important;
  box-shadow: 0 0 12px rgba(255, 0, 60, 0.8) !important;
}

#dropdown-menu.is-active {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  display: block !important;
}

/* ------------------------------------------------------------- */
/* SMOOTH ROBUST SCROLL REVEALS FOR CARDS & SECTIONS             */
/* ------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ------------------------------------------------------------- */
/* HERO CLAW BACKGROUND: Dark Vignetted Claw Marks (Hero Only)   */
/* ------------------------------------------------------------- */
.hero-claw-bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/background.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0.88;
  filter: contrast(110%) brightness(80%);
}

.hero-claw-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(5, 5, 7, 0.3) 0%, rgba(5, 5, 7, 0.75) 60%, #050507 100%),
              linear-gradient(to bottom, rgba(5, 5, 7, 0.2) 0%, transparent 40%, #050507 100%);
  pointer-events: none;
}

/* ------------------------------------------------------------- */
/* VISIBLE RANDOM ABSTRACT SLANTED LINES & STREAKS BACKGROUND    */
/* ------------------------------------------------------------- */
.random-lines-bg {
  position: relative;
  background-color: #050507;
  overflow: hidden;
}

.random-lines-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    repeating-linear-gradient(62deg, transparent, transparent 140px, rgba(255, 255, 255, 0.04) 140px, rgba(255, 255, 255, 0.04) 141px),
    repeating-linear-gradient(-38deg, transparent, transparent 190px, rgba(255, 0, 60, 0.07) 190px, rgba(255, 0, 60, 0.07) 192px),
    repeating-linear-gradient(115deg, transparent, transparent 240px, rgba(255, 255, 255, 0.03) 240px, rgba(255, 255, 255, 0.03) 241px),
    radial-gradient(circle at 15% 20%, rgba(255, 0, 60, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255, 0, 60, 0.08) 0%, transparent 40%);
  pointer-events: none;
}

/* Luxury Typography */
.font-solo {
  font-family: 'SoloEternal', 'ChangaLocal', sans-serif !important;
  letter-spacing: 2px;
}

.font-avatar {
  font-family: 'AvatarWater', 'ChangaLocal', sans-serif !important;
  letter-spacing: 1px;
}

/* Giant Brutalist Title Typography (Soft Luxury Opacity) */
.giant-street-title {
  font-family: 'SoloEternal', 'ChangaLocal', sans-serif;
  letter-spacing: 4px;
  line-height: 0.86;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  user-select: none;
  font-weight: 900;
  text-shadow: 0 0 50px rgba(0, 0, 0, 0.95), 0 0 25px rgba(255, 0, 60, 0.2);
}

.dark-matter-sphere {
  position: absolute;
  bottom: 80px;
  left: 50px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #200007 0%, #0c0d12 50%, #000000 100%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 0, 60, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  animation: sphereOrbit 6s ease-in-out infinite alternate;
  z-index: 15;
}

@keyframes sphereOrbit {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-16px) rotate(15deg); }
}

.runway-card {
  background: linear-gradient(180deg, rgba(16, 2, 5, 0.92) 0%, rgba(8, 9, 13, 0.95) 60%, rgba(4, 5, 8, 0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 0, 60, 0.25);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.runway-card:hover {
  border-color: var(--crimson);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 1), 0 0 50px rgba(255, 0, 60, 0.5);
}

.btn-experience {
  background: #ffffff;
  color: #050507;
  border-radius: 9999px;
  padding: 0.45rem 1.25rem;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
}

.btn-experience:hover {
  background: var(--crimson);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(255, 0, 60, 0.6);
}

.cally-nav {
  background: rgba(5, 5, 7, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* THEMED PRODUCT & SHOWCASE CARD STYLES (MATCHED STROKES & GLOWS) */
/* ------------------------------------------------------------- */
.card-crimson, .showcase-crimson {
  background: linear-gradient(180deg, #180206 0%, #08090d 100%);
  border: 1.5px solid rgba(255, 0, 60, 0.45) !important;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 0, 60, 0.15);
  transition: transform 0.12s ease-out, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-crimson:hover, .showcase-crimson:hover {
  border-color: #ff003c !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 1), 0 0 45px rgba(255, 0, 60, 0.65) !important;
}

.card-ice-white, .showcase-white {
  background: linear-gradient(180deg, #141722 0%, #08090d 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 255, 255, 0.1);
  transition: transform 0.12s ease-out, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-ice-white:hover, .showcase-white:hover {
  border-color: #ffffff !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 1), 0 0 45px rgba(255, 255, 255, 0.5) !important;
}

.card-purple, .showcase-purple {
  background: linear-gradient(180deg, #1d072e 0%, #08090d 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(168, 85, 247, 0.15);
  transition: transform 0.12s ease-out, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-purple:hover, .showcase-purple:hover {
  border-color: #a855f7 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 1), 0 0 45px rgba(168, 85, 247, 0.65) !important;
}

.card-cyber-blue, .showcase-cyan {
  background: linear-gradient(180deg, #031824 0%, #08090d 100%);
  border: 1.5px solid rgba(6, 182, 212, 0.45) !important;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(6, 182, 212, 0.15);
  transition: transform 0.12s ease-out, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-cyber-blue:hover, .showcase-cyan:hover {
  border-color: #06b6d4 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 1), 0 0 45px rgba(6, 182, 212, 0.65) !important;
}

.card-gold, .showcase-gold {
  background: linear-gradient(180deg, #201702 0%, #08090d 100%);
  border: 1.5px solid rgba(234, 179, 8, 0.45) !important;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(234, 179, 8, 0.15);
  transition: transform 0.12s ease-out, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-gold:hover, .showcase-gold:hover {
  border-color: #eab308 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 1), 0 0 45px rgba(234, 179, 8, 0.65) !important;
}

.card-orange, .showcase-orange {
  background: linear-gradient(180deg, #220c02 0%, #08090d 100%);
  border: 1.5px solid rgba(249, 115, 22, 0.45) !important;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(249, 115, 22, 0.15);
  transition: transform 0.12s ease-out, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-orange:hover, .showcase-orange:hover {
  border-color: #f97316 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 1), 0 0 45px rgba(249, 115, 22, 0.65) !important;
}

.card-indigo, .showcase-indigo {
  background: linear-gradient(180deg, #0e0d29 0%, #08090d 100%);
  border: 1.5px solid rgba(99, 102, 241, 0.45) !important;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(99, 102, 241, 0.15);
  transition: transform 0.12s ease-out, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-indigo:hover, .showcase-indigo:hover {
  border-color: #6366f1 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 1), 0 0 45px rgba(99, 102, 241, 0.65) !important;
}

.card-pink, .showcase-pink {
  background: linear-gradient(180deg, #240529 0%, #08090d 100%);
  border: 1.5px solid rgba(217, 70, 239, 0.45) !important;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(217, 70, 239, 0.15);
  transition: transform 0.12s ease-out, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-pink:hover, .showcase-pink:hover {
  border-color: #d946ef !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 1), 0 0 45px rgba(217, 70, 239, 0.65) !important;
}

.card-emerald, .showcase-emerald {
  background: linear-gradient(180deg, #021a12 0%, #08090d 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(16, 185, 129, 0.15);
  transition: transform 0.12s ease-out, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-emerald:hover, .showcase-emerald:hover {
  border-color: #10b981 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 1), 0 0 45px rgba(16, 185, 129, 0.65) !important;
}

.card-sky, .showcase-sky {
  background: linear-gradient(180deg, #021625 0%, #08090d 100%);
  border: 1.5px solid rgba(14, 165, 233, 0.45) !important;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(14, 165, 233, 0.15);
  transition: transform 0.12s ease-out, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-sky:hover, .showcase-sky:hover {
  border-color: #0ea5e9 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 1), 0 0 45px rgba(14, 165, 233, 0.65) !important;
}

/* VIP Dual-Tone Theme Card (Purple / Crimson Split Neon) */
.card-dual-vip {
  background: linear-gradient(145deg, #1b0728 0%, #0d0914 45%, #1f020c 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.5) !important;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 25px rgba(168, 85, 247, 0.2), 0 0 25px rgba(244, 63, 94, 0.2);
  transition: transform 0.12s ease-out, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-dual-vip:hover {
  border-color: #f43f5e !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 1), 0 0 45px rgba(168, 85, 247, 0.6), 0 0 45px rgba(244, 63, 94, 0.6) !important;
}

/* Dynamic 3D Card Hover System */
.tilt-card, .runway-card {
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Official Contact Channels (الصفحات التابعة لنا) Dedicated Hover System */
#contact-channels a {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.35s ease !important;
}
#contact-channels a:nth-child(1):hover {
  border-color: #ec4899 !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(236, 72, 153, 0.5) !important;
}
#contact-channels a:nth-child(2):hover {
  border-color: #5865f2 !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(88, 101, 242, 0.5) !important;
}
#contact-channels a:nth-child(3):hover {
  border-color: #ff003c !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(255, 0, 60, 0.5) !important;
}
#contact-channels a:hover img {
  transform: scale(1.15) rotate(5deg) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#contact-channels a:nth-child(2):hover img {
  transform: scale(1.15) rotate(-5deg) !important;
}
#contact-channels a:hover span.text-base {
  transform: translate(-3px, -3px);
  transition: transform 0.3s ease;
}

/* Subtle, clean icon micro-interaction */
.tilt-card:hover .h-24 > div:first-child,
.tilt-card:hover .h-28 > div:first-child,
.tilt-card:hover .h-44 > div:first-child,
.tilt-card:hover .h-52 > div:first-child {
  transform: scale(1.06);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Native Cursor System Restored */

/* =================================================================
   📱 RESPONSIVE RESOLUTION & PROPORTIONS SYSTEM (PC, TABLET, MOBILE)
   ================================================================= */

/* 1. Fluid Typography & Giant Title Scaling */
.giant-street-title {
  font-size: clamp(2.8rem, 9.2vw, 8.2rem) !important;
  letter-spacing: 0.04em;
}

/* 2. Container Max Widths for Ultra-Wide / 2K / 4K Monitors */
@media (min-width: 1536px) {
  .max-w-7xl {
    max-width: 1400px !important;
  }
}

/* 3. Tablet & Small Laptop Adjustments (769px - 1024px) */
@media (max-width: 1024px) {
  #hero {
    padding-top: 5rem !important;
    padding-bottom: 3rem !important;
  }
  .character-intro-anim {
    animation: charCenterToFarRightTablet 3.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
}

@keyframes charCenterToFarRightTablet {
  0% { transform: translateX(0) scale(1.4); opacity: 1; }
  25% { transform: translateX(0) scale(1.35); opacity: 1; }
  100% { transform: translateX(0) scale(0.95); opacity: 0.7; }
}

/* 4. Mobile Devices (@media max-width: 768px) */
@media (max-width: 768px) {
  /* Prevent horizontal stretch & smooth touch scrolling */
  body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Compact Navbar & Solid Menu */
  header {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  #dropdown-menu {
    background-color: #141622 !important;
    background: #141622 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    z-index: 99999 !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 1) !important;
    max-height: calc(100vh - 4.2rem) !important;
    max-height: calc(100dvh - 4.2rem) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Hero Section scaling on Mobile */
  #hero {
    padding-top: 5rem !important;
    padding-bottom: 2rem !important;
  }

  .giant-street-title {
    font-size: clamp(2rem, 8.5vw, 3.6rem) !important;
  }

  /* Floating Software Icons Responsive Scaling for Mobile */
  .floating-software-badge img {
    width: 32px !important;
    height: 32px !important;
  }

  /* Badge positions adapted close to character head on mobile */
  .badge-bl {
    top: -8% !important;
    left: 42% !important;
  }
  .badge-ae {
    top: 5% !important;
    left: 12% !important;
  }
  .badge-pr {
    top: 5% !important;
    right: 12% !important;
  }
  .badge-ai {
    top: 32% !important;
    left: 10% !important;
  }
  .badge-ps {
    top: 32% !important;
    right: 10% !important;
  }

  /* Contact Channels Bar Mobile Touch Grid */
  #contact-channels {
    padding-top: 3.5rem !important;
    padding-bottom: 1.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #contact-channels .grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  #contact-channels .runway-card {
    padding: 1rem !important;
  }

  #contact-channels img {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }

  /* 2-Cards Mobile Slider System with Touch Snap & Arrows */
  #packages-grid, #showcase-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    overscroll-behavior-y: none !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.65rem !important;
    padding-bottom: 0.75rem !important;
  }

  #packages-grid > div, #showcase-grid > div {
    flex: 0 0 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    min-width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    touch-action: pan-x !important;
  }

  #packages-grid img, #packages-grid i, #packages-grid svg,
  #showcase-grid img, #showcase-grid i, #showcase-grid svg {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  .scrollbar-none::-webkit-scrollbar {
    display: none !important;
  }
  .scrollbar-none {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  /* Packages Section Mobile Padding */
  #packages {
    padding-top: 2.5rem !important;
    padding-bottom: 3.5rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Showcase Section Mobile Padding */
  #showcase {
    padding-top: 2.5rem !important;
    padding-bottom: 3.5rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Pricing Estimator Mobile */
  #pricing {
    padding-top: 3rem !important;
    padding-bottom: 4rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Popups and Modals Mobile Responsiveness */
  #admin-modal > div,
  #add-product-modal > div,
  #add-project-modal > div {
    max-width: 95% !important;
    padding: 1.25rem 1rem !important;
    max-height: 88vh !important;
    border-radius: 1.25rem !important;
  }

  /* Disable Custom Cursor on Touch Mobile to allow native touch feel */
  .custom-cursor, .cursor-dot {
    display: none !important;
  }
}

/* ============================================================= */
/* LUXURY LIGHT THEME (الـثيم الفاتح الفاخر) */
/* ============================================================= */
body.light-theme {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

body.light-theme .cally-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(24px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

body.light-theme .cally-nav nav a {
  color: #334155 !important;
}
body.light-theme .cally-nav nav a:hover {
  color: #ff003c !important;
}

body.light-theme .cally-nav a.text-white {
  color: #0f172a !important;
}

body.light-theme #btn-open-menu,
body.light-theme #btn-open-admin,
body.light-theme #btn-toggle-sound,
body.light-theme #btn-toggle-theme {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #1e293b !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

body.light-theme #btn-open-menu:hover,
body.light-theme #btn-open-admin:hover,
body.light-theme #btn-toggle-sound:hover,
body.light-theme #btn-toggle-theme:hover {
  border-color: #ff003c !important;
  color: #ff003c !important;
}

body.light-theme #dropdown-menu {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12) !important;
  scrollbar-color: #ff003c rgba(0, 0, 0, 0.08) !important;
}

body.light-theme #dropdown-menu::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06) !important;
}

body.light-theme #dropdown-menu .dropdown-item {
  color: #334155 !important;
}

body.light-theme #dropdown-menu .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #ff003c !important;
}

body.light-theme #hero {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
}

body.light-theme .hero-claw-bg {
  background-image: url('../assets/images/wbackground.webp') !important;
  opacity: 0.95 !important;
  filter: contrast(105%) brightness(98%) !important;
}

body.light-theme .hero-claw-bg::after {
  background: radial-gradient(circle at center, rgba(248, 250, 252, 0.2) 0%, rgba(248, 250, 252, 0.7) 60%, #f8fafc 100%),
              linear-gradient(to bottom, rgba(248, 250, 252, 0.2) 0%, transparent 40%, #f8fafc 100%) !important;
}

body.light-theme .giant-street-title {
  color: #0f172a !important;
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.12);
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

body.light-theme .hero-subtitle,
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4 {
  color: #0f172a !important;
}

body.light-theme p,
body.light-theme .text-gray-400,
body.light-theme .text-gray-300 {
  color: #475569 !important;
}

body.light-theme .random-lines-bg {
  background-color: #f8fafc !important;
}

body.light-theme section {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Service & Showcase & Package Cards in Light Theme */
body.light-theme .runway-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .runway-card:hover {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .card-crimson, body.light-theme .showcase-crimson {
  background: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%) !important;
  border: 1.5px solid rgba(255, 0, 60, 0.3) !important;
  box-shadow: 0 15px 40px rgba(255, 0, 60, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

body.light-theme .card-ice-white, body.light-theme .showcase-white {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
  border: 1.5px solid rgba(15, 23, 42, 0.25) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
}
body.light-theme .card-ice-white .font-mono {
  color: #0f172a !important;
}
body.light-theme .card-ice-white a {
  background: #0f172a !important;
  color: #ffffff !important;
}

body.light-theme .card-purple, body.light-theme .showcase-purple {
  background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 15px 40px rgba(168, 85, 247, 0.08) !important;
}

body.light-theme .card-cyber-blue, body.light-theme .showcase-cyan {
  background: linear-gradient(180deg, #ffffff 0%, #ecfeff 100%) !important;
  border: 1.5px solid rgba(6, 182, 212, 0.35) !important;
  box-shadow: 0 15px 40px rgba(6, 182, 212, 0.08) !important;
}

body.light-theme .card-gold, body.light-theme .showcase-gold {
  background: linear-gradient(180deg, #ffffff 0%, #fefce8 100%) !important;
  border: 1.5px solid rgba(234, 179, 8, 0.35) !important;
  box-shadow: 0 15px 40px rgba(234, 179, 8, 0.08) !important;
}

body.light-theme .card-orange, body.light-theme .showcase-orange {
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
  border: 1.5px solid rgba(249, 115, 22, 0.35) !important;
  box-shadow: 0 15px 40px rgba(249, 115, 22, 0.08) !important;
}

body.light-theme .card-indigo, body.light-theme .showcase-indigo {
  background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.35) !important;
  box-shadow: 0 15px 40px rgba(99, 102, 241, 0.08) !important;
}

body.light-theme .card-pink, body.light-theme .showcase-pink {
  background: linear-gradient(180deg, #ffffff 0%, #fdf4ff 100%) !important;
  border: 1.5px solid rgba(217, 70, 239, 0.35) !important;
  box-shadow: 0 15px 40px rgba(217, 70, 239, 0.08) !important;
}

body.light-theme .card-emerald, body.light-theme .showcase-emerald {
  background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 15px 40px rgba(16, 185, 129, 0.08) !important;
}

body.light-theme .card-sky, body.light-theme .showcase-sky {
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%) !important;
  border: 1.5px solid rgba(14, 165, 233, 0.35) !important;
  box-shadow: 0 15px 40px rgba(14, 165, 233, 0.08) !important;
}

body.light-theme .card-rose, body.light-theme .showcase-rose {
  background: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%) !important;
  border: 1.5px solid rgba(244, 63, 94, 0.35) !important;
  box-shadow: 0 15px 40px rgba(244, 63, 94, 0.08) !important;
}

body.light-theme .card-dual-vip {
  background: linear-gradient(145deg, #fdf4ff 0%, #ffffff 50%, #fff1f2 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 15px 40px rgba(168, 85, 247, 0.12), 0 15px 40px rgba(244, 63, 94, 0.12) !important;
}
body.light-theme .card-dual-vip:hover {
  border-color: #a855f7 !important;
  box-shadow: 0 25px 60px rgba(168, 85, 247, 0.22), 0 25px 60px rgba(244, 63, 94, 0.22) !important;
}

/* Buttons and Play Icons in All Themes */
[data-lucide="play"],
#hero-runway-card [data-lucide="play"],
#showcase-grid [data-lucide="play"] {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Islamic Remembrance (Connected Arabic Ligatures) */
#hero .inline-flex.items-center,
#footer .inline-flex.items-center,
#hero .inline-flex.items-center span,
#footer .inline-flex.items-center span {
  letter-spacing: 0 !important;
  word-spacing: normal !important;
}

body.light-theme #hero .inline-flex.items-center span.text-white,
body.light-theme #footer .inline-flex.items-center span.text-white {
  color: #0f172a !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Calculator & Estimator in Light Theme (Inverted Black to White) */
body.light-theme #pricing .bg-\[\#090a10\] {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.08) !important;
}

body.light-theme #pricing .bg-\[\#0e1017\] {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme #calc-total-amount {
  color: #0f172a !important;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
  filter: none !important;
}

body.light-theme #calc-service-select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
}

body.light-theme #calc-service-select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

body.light-theme #pricing label.flex {
  background-color: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme #pricing label.flex:hover {
  background-color: #ffffff !important;
  border-color: #ff003c !important;
}

body.light-theme #pricing label.flex span {
  color: #0f172a !important;
}

body.light-theme #pricing input[type="range"] {
  background: #e2e8f0 !important;
}

/* Footer in Light Theme */
body.light-theme #footer {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Modals in Light Theme */
body.light-theme #admin-modal,
body.light-theme #project-preview-modal,
body.light-theme #add-product-modal,
body.light-theme #add-project-modal,
body.light-theme #order-modal,
body.light-theme #order-success-modal,
body.light-theme #client-orders-modal,
body.light-theme #admin-orders-modal,
body.light-theme #landing-page-info-modal,
body.light-theme #full-website-info-modal,
body.light-theme #showcase-project-modal,
body.light-theme #currency-select-modal,
body.light-theme #admin-cloud-modal {
  background-color: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

body.light-theme #admin-modal > div,
body.light-theme #project-preview-modal > div,
body.light-theme #add-product-modal > div,
body.light-theme #add-project-modal > div,
body.light-theme #order-modal > div,
body.light-theme #order-success-modal > div,
body.light-theme #client-orders-modal > div,
body.light-theme #admin-orders-modal > div,
body.light-theme #landing-page-info-modal > div,
body.light-theme #full-website-info-modal > div,
body.light-theme #showcase-project-modal > div,
body.light-theme #currency-select-modal > div,
body.light-theme #admin-cloud-modal > div {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.2) !important;
  color: #0f172a !important;
}

/* Currency & Cloud Light Theme Overrides */
body.light-theme #currency-select-modal h3,
body.light-theme #admin-cloud-modal h3,
body.light-theme #admin-cloud-modal label {
  color: #0f172a !important;
}
body.light-theme #currency-select-modal p,
body.light-theme #admin-cloud-modal p {
  color: #334155 !important;
}
body.light-theme #currency-select-modal .bg-black\/60,
body.light-theme #admin-cloud-modal .bg-black\/60 {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
body.light-theme #admin-cloud-modal .bg-white\/5 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
body.light-theme #currency-select-modal .btn-select-currency-option .text-white {
  color: #0f172a !important;
}

/* Admin Card Reorder Controls (تقديم / تنزيل) */
.admin-card-controls {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(13, 15, 23, 0.95);
  padding: 3px 6px;
  border-radius: 9999px;
  border: 1.5px solid rgba(255, 0, 60, 0.6);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 0, 60, 0.35);
  z-index: 40;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  direction: ltr;
}

.admin-card-controls .admin-move-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}

.admin-card-controls .admin-move-btn:hover {
  background: #ff003c;
  color: #ffffff;
  border-color: #ff003c;
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(255, 0, 60, 0.8);
}

.admin-card-controls .admin-move-btn:active {
  transform: scale(0.95);
}

body.light-theme .admin-card-controls {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 0, 60, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
body.light-theme .admin-card-controls .admin-move-btn {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}
body.light-theme .admin-card-controls .admin-move-btn:hover {
  background: #ff003c;
  color: #ffffff;
  border-color: #ff003c;
}

/* Admin Live Edit Mode (تعديل الأسعار والنصوص لايف) */
body.admin-edit-active [contenteditable="true"] {
  outline: 1.5px dashed rgba(255, 0, 60, 0.75) !important;
  outline-offset: 3px;
  cursor: text !important;
  border-radius: 6px;
  transition: outline-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

body.admin-edit-active [contenteditable="true"]:hover {
  outline: 2px solid #ff003c !important;
  background-color: rgba(255, 0, 60, 0.12) !important;
  box-shadow: 0 0 12px rgba(255, 0, 60, 0.35);
}

body.admin-edit-active [contenteditable="true"]:focus {
  outline: 2px solid #00ffaa !important;
  background-color: rgba(0, 255, 170, 0.1) !important;
  box-shadow: 0 0 16px rgba(0, 255, 170, 0.45);
}

body.light-theme.admin-edit-active [contenteditable="true"] {
  outline-color: rgba(225, 29, 72, 0.8) !important;
}

body.light-theme.admin-edit-active [contenteditable="true"]:hover {
  outline-color: #e11d48 !important;
  background-color: rgba(225, 29, 72, 0.08) !important;
}

body.light-theme.admin-edit-active [contenteditable="true"]:focus {
  outline-color: #059669 !important;
  background-color: rgba(5, 150, 105, 0.08) !important;
}

.admin-card-controls .admin-edit-btn {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.admin-card-controls .admin-edit-btn:hover {
  background: #f59e0b;
  color: #000000;
  border-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.8);
}

.admin-card-controls .admin-del-btn {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.admin-card-controls .admin-del-btn:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
}


body.light-theme #landing-page-info-modal h3,
body.light-theme #full-website-info-modal h3,
body.light-theme #showcase-project-modal h3,
body.light-theme #landing-page-info-modal h4,
body.light-theme #full-website-info-modal h4,
body.light-theme #showcase-project-modal h4 {
  color: #0f172a !important;
}

body.light-theme #landing-page-info-modal p,
body.light-theme #full-website-info-modal p,
body.light-theme #showcase-project-modal p {
  color: #334155 !important;
  font-weight: 500 !important;
}

body.light-theme #landing-page-info-modal .bg-black\/60,
body.light-theme #full-website-info-modal .bg-black\/60,
body.light-theme #showcase-project-modal .bg-black\/60 {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

body.light-theme #landing-page-info-modal .text-gray-200,
body.light-theme #landing-page-info-modal .text-gray-300,
body.light-theme #landing-page-info-modal .text-gray-400,
body.light-theme #full-website-info-modal .text-gray-200,
body.light-theme #full-website-info-modal .text-gray-300,
body.light-theme #full-website-info-modal .text-gray-400 {
  color: #475569 !important;
}

body.light-theme #landing-page-info-modal .bg-\[\#10b981\]\/15,
body.light-theme #landing-page-info-modal .bg-\[\#10b981\]\/10 {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}
body.light-theme #landing-page-info-modal .text-emerald-100,
body.light-theme #landing-page-info-modal .text-emerald-200\/90,
body.light-theme #landing-page-info-modal .bg-\[\#10b981\]\/15 strong,
body.light-theme #landing-page-info-modal .bg-\[\#10b981\]\/10 strong {
  color: #065f46 !important;
}

body.light-theme #full-website-info-modal .bg-\[\#0ea5e9\]\/15,
body.light-theme #full-website-info-modal .bg-\[\#0ea5e9\]\/10 {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
}
body.light-theme #full-website-info-modal .text-sky-100,
body.light-theme #full-website-info-modal .text-sky-200\/90,
body.light-theme #full-website-info-modal .bg-\[\#0ea5e9\]\/15 strong,
body.light-theme #full-website-info-modal .bg-\[\#0ea5e9\]\/10 strong {
  color: #0369a1 !important;
}

body.light-theme #btn-close-lp-info-modal,
body.light-theme #btn-close-web-info-modal,
body.light-theme #btn-cancel-lp-info,
body.light-theme #btn-cancel-web-info {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

body.light-theme #btn-close-lp-info-modal:hover,
body.light-theme #btn-close-web-info-modal:hover,
body.light-theme #btn-cancel-lp-info:hover,
body.light-theme #btn-cancel-web-info:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

body.light-theme input,
body.light-theme textarea,
body.light-theme select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(0, 0, 0, 0.18) !important;
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

body.light-theme #order-modal .from-\[\#ff003c\]\/15 {
  background: linear-gradient(90deg, rgba(255, 0, 60, 0.08) 0%, #f8fafc 100%) !important;
  border-color: rgba(255, 0, 60, 0.3) !important;
}


/* ============================================================= */
/* PAGINATED GRID TRANSITIONS & LIGHT THEME PAGINATION CONTROLS */
/* ============================================================= */
#packages-page-1,
#packages-page-2,
#showcase-page-1,
#showcase-page-2 {
  animation: gridFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes gridFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Light Theme High-Contrast Pagination Controls */
body.light-theme .pagination-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(15, 23, 42, 0.25) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .pagination-btn:hover {
  background-color: #ff003c !important;
  color: #ffffff !important;
  border-color: #ff003c !important;
}

body.light-theme .pagination-btn i,
body.light-theme .pagination-btn svg {
  color: inherit !important;
  stroke: currentColor !important;
}

body.light-theme .pagination-indicator {
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  border: 1.5px solid rgba(15, 23, 42, 0.25) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* Order Modals & Dashboard Light Mode Enhancements */
body.light-theme #order-modal .bg-black\/50,
body.light-theme #order-modal .bg-black\/60,
body.light-theme #order-modal .bg-black\/70,
body.light-theme #order-modal .bg-black\/80,
body.light-theme #order-success-modal .bg-black\/70,
body.light-theme #client-orders-modal .bg-black\/60,
body.light-theme #admin-orders-modal .bg-black\/60,
body.light-theme #admin-orders-modal .bg-black\/70,
body.light-theme #admin-orders-modal .bg-black\/80 {
  background-color: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-theme #order-modal label,
body.light-theme #order-modal h3,
body.light-theme #order-modal h4,
body.light-theme #client-orders-modal h3,
body.light-theme #client-orders-modal h4,
body.light-theme #admin-orders-modal h3,
body.light-theme #admin-orders-modal h4,
body.light-theme #order-success-modal h3 {
  color: #0f172a !important;
}

body.light-theme #order-modal .text-gray-200,
body.light-theme #order-modal .text-gray-300,
body.light-theme #client-orders-modal .text-gray-200,
body.light-theme #client-orders-modal .text-gray-300,
body.light-theme #admin-orders-modal .text-gray-200,
body.light-theme #admin-orders-modal .text-gray-300,
body.light-theme #client-orders-modal span.text-white,
body.light-theme #client-orders-modal div.text-white,
body.light-theme #admin-orders-modal span.text-white,
body.light-theme #admin-orders-modal div.text-white {
  color: #0f172a !important;
  font-weight: 600 !important;
}


/* Islamic Music Disclaimer Box High Contrast in Light Theme */
body.light-theme #order-modal .bg-amber-500\/10 {
  background-color: #fffbeb !important;
  border-color: #f59e0b !important;
}

body.light-theme #order-modal .bg-amber-500\/10 strong {
  color: #92400e !important;
  font-weight: 900 !important;
}

body.light-theme #order-modal .bg-amber-500\/10 div,
body.light-theme #order-modal .text-amber-300 {
  color: #78350f !important;
  font-weight: 600 !important;
}

body.light-theme #order-modal .bg-amber-500\/10 a,
body.light-theme #order-modal .text-amber-200 {
  color: #b45309 !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
}

body.light-theme #order-modal .bg-amber-500\/10 a:hover {
  color: #ff003c !important;
}

body.light-theme #order-modal .bg-amber-500\/10 i,
body.light-theme #order-modal .bg-amber-500\/10 svg,
body.light-theme #order-modal .text-amber-400 {
  color: #d97706 !important;
  stroke: #d97706 !important;
}

/* Radio & Checkbox Labels in Light Theme */
body.light-theme #order-modal label.cursor-pointer,
body.light-theme #order-modal .bg-white\/5 {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

body.light-theme #order-modal label.cursor-pointer:hover {
  background-color: #f1f5f9 !important;
  border-color: #ff003c !important;
}

body.light-theme #order-modal label.cursor-pointer span {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.light-theme .btn-duration-preset {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .btn-duration-preset:hover {
  background-color: #f1f5f9 !important;
  border-color: #ff003c !important;
  color: #ff003c !important;
}

body.light-theme #order-modal .attachment-row {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

body.light-theme #order-modal .attachment-type {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

body.light-theme #admin-orders-modal .admin-order-status-select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Order Success Modal Light Mode High Contrast */
body.light-theme #order-success-modal .bg-black\/70 {
  background-color: #f8fafc !important;
  border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
}

body.light-theme #order-success-modal #success-order-name,
body.light-theme #order-success-modal #success-order-package {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme #order-success-modal .text-gray-400 {
  color: #475569 !important;
  font-weight: 700 !important;
}

body.light-theme #order-success-modal .text-gray-300 {
  color: #334155 !important;
}

body.light-theme #btn-copy-order-code {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

body.light-theme #btn-copy-order-code i,
body.light-theme #btn-copy-order-code svg {
  color: #0f172a !important;
}

body.light-theme #btn-copy-order-code:hover {
  background-color: #ff003c !important;
  color: #ffffff !important;
}

body.light-theme #btn-copy-order-code:hover i,
body.light-theme #btn-copy-order-code:hover svg {
  color: #ffffff !important;
}

body.light-theme #btn-success-view-orders {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(0, 0, 0, 0.18) !important;
  font-weight: 700 !important;
}

body.light-theme #btn-success-view-orders:hover {
  background-color: #f1f5f9 !important;
  border-color: #ff003c !important;
  color: #ff003c !important;
}

body.light-theme #btn-close-success-modal:hover {
  color: #0f172a !important;
}

body.light-theme #btn-close-order-modal,
body.light-theme #btn-close-client-orders,
body.light-theme #btn-close-admin-orders {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

body.light-theme #btn-close-order-modal i,
body.light-theme #btn-close-order-modal svg,
body.light-theme #btn-close-client-orders i,
body.light-theme #btn-close-client-orders svg,
body.light-theme #btn-close-admin-orders i,
body.light-theme #btn-close-admin-orders svg {
  color: #0f172a !important;
  stroke: #0f172a !important;
}

body.light-theme #btn-close-order-modal:hover,
body.light-theme #btn-close-client-orders:hover,
body.light-theme #btn-close-admin-orders:hover {
  background-color: #ff003c !important;
  color: #ffffff !important;
  border-color: #ff003c !important;
}

body.light-theme #btn-close-order-modal:hover i,
body.light-theme #btn-close-order-modal:hover svg,
body.light-theme #btn-close-client-orders:hover i,
body.light-theme #btn-close-client-orders:hover svg,
body.light-theme #btn-close-admin-orders:hover i,
body.light-theme #btn-close-admin-orders:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

body.light-theme #btn-cancel-order-modal {
  background-color: #ffffff !important;
  color: #475569 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.18) !important;
}

body.light-theme #btn-cancel-order-modal:hover {
  background-color: #ff003c !important;
  color: #ffffff !important;
  border-color: #ff003c !important;
}

body.light-theme #btn-change-order-package {
  color: #64748b !important;
}

body.light-theme #btn-change-order-package:hover {
  color: #ff003c !important;
}

/* ============================================================= */
/* SPECS & DETAILS HIGH CONTRAST IN LIGHT THEME (ADMIN & CLIENT) */
/* ============================================================= */
body.light-theme #admin-orders-modal [data-order-code],
body.light-theme #client-orders-modal .rounded-2xl.bg-black\/60 {
  background-color: #ffffff !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme #admin-orders-modal [data-order-code] h4,
body.light-theme #client-orders-modal h4 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* Specs Container in Both Modals */
body.light-theme #admin-orders-modal .p-3.rounded-xl.bg-white\/5,
body.light-theme #client-orders-modal .bg-white\/5.p-2\.5 {
  background-color: #f1f5f9 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

body.light-theme #admin-orders-modal .p-3.rounded-xl.bg-white\/5 strong,
body.light-theme #admin-orders-modal .p-3.rounded-xl.bg-white\/5 .text-white,
body.light-theme #client-orders-modal .bg-white\/5 strong {
  color: #0f172a !important;
  font-weight: 900 !important;
}

/* Metric Boxes (الباقة، المدة، الموسيقى) */
body.light-theme #admin-orders-modal .p-2\.5.rounded-xl.bg-white\/5 {
  background-color: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme #admin-orders-modal .p-2\.5.rounded-xl.bg-white\/5 .text-gray-400 {
  color: #475569 !important;
  font-weight: 700 !important;
}

body.light-theme #admin-orders-modal .p-2\.5.rounded-xl.bg-white\/5 .text-white,
body.light-theme #admin-orders-modal .text-white.font-mono {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme #admin-orders-modal .text-amber-300 {
  color: #b45309 !important;
  font-weight: 800 !important;
}

/* Attachments in Admin & Client Modals */
body.light-theme #admin-orders-modal .bg-black\/50,
body.light-theme #client-orders-modal .border-t {
  background-color: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1e293b !important;
}

body.light-theme #admin-orders-modal .bg-black\/50 span.text-white {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.light-theme #admin-orders-modal .bg-black\/50 span.text-gray-400 {
  color: #475569 !important;
}

/* Client Handle Chip in Admin Modal */
body.light-theme #admin-orders-modal span.bg-black\/60 {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
}

/* ============================================================= */
/* HIGH-PERFORMANCE GPU ACCELERATION & ZERO-LAG OPTIMIZATION     */
/* ============================================================= */
#packages, #showcase, #services, #contact-channels, #pricing, #footer {
  contain: paint;
  transform: translateZ(0);
  content-visibility: auto;
  contain-intrinsic-size: 700px;
}

.tilt-card, .runway-card {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

img, canvas {
  image-rendering: -webkit-optimize-contrast;
}

/* ============================================================= */
/* 🌐 ENGLISH LOCALIZATION & LTR STYLING ENGINE                  */
/* ============================================================= */
html[lang="en"] {
  direction: ltr !important;
}

html[lang="en"] body {
  direction: ltr !important;
  text-align: left;
}

html[lang="en"] .text-right:not(.keep-right) {
  text-align: left !important;
}

html[lang="en"] #order-modal-card,
html[lang="en"] #landing-page-info-modal .text-right,
html[lang="en"] #full-website-info-modal .text-right,
html[lang="en"] #order-success-modal .text-right,
html[lang="en"] #project-preview-modal .text-right,
html[lang="en"] #client-orders-modal .text-right,
html[lang="en"] #admin-orders-modal .text-right {
  text-align: left !important;
}

html[lang="en"] .btn-select-currency-option,
html[lang="en"] .btn-select-language-option {
  text-align: left !important;
}

html[lang="en"] #btn-menu-currency-toggle,
html[lang="en"] #btn-menu-lang-toggle,
html[lang="en"] #btn-menu-sound-toggle,
html[lang="en"] #btn-menu-toggle-theme,
html[lang="en"] #btn-menu-admin-orders {
  text-align: left !important;
}

html[lang="en"] #btn-close-currency-modal,
html[lang="en"] #btn-close-language-modal,
html[lang="en"] #btn-close-order-modal,
html[lang="en"] #btn-close-lp-info-modal,
html[lang="en"] #btn-close-web-info-modal,
html[lang="en"] #btn-close-project-preview {
  left: auto !important;
  right: 1.25rem !important;
}

html[lang="en"] #order-modal .space-y-1\.5.pl-20,
html[lang="en"] #order-modal .space-y-1\.5.sm\:pl-24 {
  padding-left: 0 !important;
  padding-right: 5rem !important;
}

html[lang="en"] #landing-page-info-modal .space-y-2.pl-16,
html[lang="en"] #full-website-info-modal .space-y-2.pl-16 {
  padding-left: 0 !important;
  padding-right: 4.5rem !important;
}

/* ============================================================= */
/* 🏷️ PACKAGE SPECIAL OFFER / DEAL RIBBON RESPONSIVE ENHANCEMENT */
/* ============================================================= */
.package-deal-ribbon {
  white-space: nowrap !important;
  user-select: none;
}

@media (max-width: 639px) {
  .package-deal-ribbon {
    font-size: 8.5px !important;
    padding: 2px 7px !important;
    top: -9px !important;
    right: 8px !important;
    gap: 3px !important;
    box-shadow: 0 2px 8px rgba(255, 0, 60, 0.4) !important;
    letter-spacing: 0.02em !important;
  }
  .package-deal-ribbon .deal-text-full {
    display: none !important;
  }
}

@media (min-width: 640px) {
  .package-deal-ribbon .deal-text-full {
    display: inline !important;
  }
}