/* ══════════════════════════════════════════════════
   React Media — main.css
══════════════════════════════════════════════════ */
html:focus-within { scroll-behavior: smooth; }

/* ── Base ─────────────────────────────────────── */
body { transition: background-color .3s, color .3s; }

:focus-visible { outline: 2px solid #FF4D6D; outline-offset: 3px; }
::selection    { background: rgba(255,77,109,.18); }

::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #FF4D6D; border-radius: 2px; }

/* ── Navbar ───────────────────────────────────── */
#navbar { transition: box-shadow .3s, background .3s; }
#navbar.scrolled      { box-shadow: 0 1px 0 rgba(0,0,0,.07); }
.dark #navbar.scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.05); }

/* ── Hero ─────────────────────────────────────── */
.hero-accent {
    position: absolute; top: 0; width: 2px; height: 100%;
    background: linear-gradient(to bottom, transparent, #FF4D6D, transparent);
    opacity: .5;
}
html[dir="ltr"] .hero-accent { left: 0; }
html[dir="rtl"] .hero-accent { right: 0; }

.hero-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(17,17,17,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,17,17,.03) 1px, transparent 1px);
    background-size: 60px 60px;
}
.dark .hero-grid {
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
}

.hero-blob {
    position: absolute; top: -120px; width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,77,109,.18) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
html[dir="ltr"] .hero-blob { right: -180px; }
html[dir="rtl"] .hero-blob { left: -180px; }

/* Dark mode — أخف عشان الخلفية داكنة */
.dark .hero-blob {
    background: radial-gradient(circle, rgba(255,77,109,.08) 0%, transparent 70%);
}

/* ── Cards ────────────────────────────────────── */
.service-card { transition: transform .2s, box-shadow .2s; }
.service-card:hover { transform: translateY(-4px); }

/* ── Timeline ─────────────────────────────────── */
.timeline-line {
    position: absolute; top: 28px; width: 1px; height: 100%;
    background: linear-gradient(to bottom, #FF4D6D, transparent); z-index: 0;
}
html[dir="ltr"] .timeline-line  { left: calc(50% - .5px); }
html[dir="rtl"] .timeline-line  { right: calc(50% - .5px); }
html[dir="rtl"] .process-connector { left: 0; right: calc(50% + 24px); }

/* ── FAQ ──────────────────────────────────────── */
.faq-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-body.open { max-height: 400px; }

/* ── Portfolio ────────────────────────────────── */
.filter-btn { transition: background .2s, color .2s; }
.filter-btn.active { background: #FF4D6D; color: #fff; }
.portfolio-item { transition: opacity .3s, transform .3s; }
.portfolio-item.hidden-item {
    opacity: 0; pointer-events: none;
    height: 0; overflow: hidden; margin: 0; padding: 0;
}

/* ── Form Fields ──────────────────────────────── */
.field {
    width: 100%; padding: .75rem 1rem;
    border: 1px solid rgba(17,17,17,.15);
    border-radius: 6px; background: transparent;
    font-size: .9rem; outline: none;
    transition: border-color .2s, box-shadow .2s;
    color: inherit;
}
.dark .field         { border-color: rgba(255,255,255,.12); color: #e5e7eb; }
.field:focus         { border-color: #FF4D6D; box-shadow: 0 0 0 3px rgba(255,77,109,.12); }
.field::placeholder  { opacity: .45; }
.dark .field::placeholder { opacity: .35; }
select.field option  { background: #111; color: #fff; }

/* ── Back to Top ──────────────────────────────── */
#back-top {
    position: fixed; bottom: 1.5rem; z-index: 50;
    width: 40px; height: 40px;
    background: #FF4D6D; color: #fff;
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .2s;
    box-shadow: 0 4px 12px rgba(255,77,109,.3);
}
html[dir="ltr"] #back-top { right: 1.5rem; }
html[dir="rtl"] #back-top { left: 1.5rem; }
#back-top.visible    { opacity: 1; pointer-events: auto; }
#back-top:hover      { transform: translateY(-2px); }

/* ── Badges & Tags ────────────────────────────── */
.popular-badge {
    display: inline-block; background: #FF4D6D; color: #fff;
    font-size: .65rem; font-weight: 600;
    text-transform: uppercase; padding: .2rem .65rem;
    border-radius: 999px;
}
.section-tag {
    display: inline-block; font-size: .65rem; font-weight: 600;
    text-transform: uppercase; color: #FF4D6D;
    padding: .25rem .75rem;
    border: 1px solid rgba(255,77,109,.25);
    border-radius: 999px;
}
html[dir="ltr"] .popular-badge,
html[dir="ltr"] .section-tag,
html[dir="ltr"] .filter-btn { letter-spacing: .08em; }

/* ── Divider ──────────────────────────────────── */
.thin-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(17,17,17,.1), transparent); }
.dark .thin-line { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }

/* ── Mobile Menu ──────────────────────────────── */
#mobile-menu { transition: max-height .35s ease, opacity .35s; max-height: 0; opacity: 0; overflow: hidden; }
#mobile-menu.open { max-height: 600px; opacity: 1; }

/* ── Testimonials ─────────────────────────────── */
.quote-mark { font-size: 4rem; line-height: 1; color: rgba(255,77,109,.12); font-family: Georgia, serif; }

/* ── Font Awesome RTL Fix ─────────────────────── */
i[class*="fa-"] {
    letter-spacing: 0 !important;
    font-style: normal;
}

html[dir="rtl"] i[class*="fa-"] {
    direction: ltr;
    unicode-bidi: isolate;   /* ✅ بدل embed */
    display: inline-flex;    /* ✅ بدل inline-block */
    align-items: center;
    justify-content: center;
}


/* ══════════════════════════════════════════════════
   PAGE LOADER
══════════════════════════════════════════════════ */
#page-loader {
    position: fixed; inset: 0; z-index: 9999;
    background: #ffffff;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .6s ease, visibility .6s ease;
    overflow: hidden;
}
.dark #page-loader { background: #0B0C10; }

#page-loader.loaded {
    opacity: 0; visibility: hidden; pointer-events: none;
}

/* ── Background grid ── */
.loader-bg-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,77,109,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,77,109,.04) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* ── Background glow ── */
.loader-bg-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,77,109,.07) 0%, transparent 70%);
    pointer-events: none;
    animation: glow-pulse 3s ease-in-out infinite;
}
@keyframes glow-pulse {
    0%, 100% { transform: translate(-50%,-50%) scale(1);    opacity: 1; }
    50%       { transform: translate(-50%,-50%) scale(1.2); opacity: .5; }
}

/* ── Corner accents ── */
.loader-corner {
    position: absolute;
    width: 48px; height: 48px;
    border-color: rgba(255,77,109,.3);
    border-style: solid;
    z-index: 2;
}
.loader-corner--tl {
    top: 28px; left: 28px;
    border-width: 1px 0 0 1px;
    animation: corner-in-tl .5s .2s ease both;
}
.loader-corner--br {
    bottom: 28px; right: 28px;
    border-width: 0 1px 1px 0;
    animation: corner-in-br .5s .2s ease both;
}
@keyframes corner-in-tl {
    from { opacity: 0; transform: translate(-8px,-8px); }
    to   { opacity: 1; transform: translate(0,0); }
}
@keyframes corner-in-br {
    from { opacity: 0; transform: translate(8px,8px); }
    to   { opacity: 1; transform: translate(0,0); }
}

/* ══════════════════════════════
   ORBIT
══════════════════════════════ */
.loader-orbit {
    position: absolute;
    top: 50%; left: 50%;
    width: 220px; height: 220px;
    margin: -110px 0 0 -110px;
    border-radius: 50%;
    border: 1px dashed rgba(255,77,109,.12);
    animation: orbit-spin 12s linear infinite;
}

@keyframes orbit-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Each icon positioned on the circle ── */
.orbit-icon {
    position: absolute;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,77,109,.08);
    border: 1px solid rgba(255,77,109,.15);
    display: flex; align-items: center; justify-content: center;
    color: #FF4D6D;
    font-size: .85rem;
    /* counter-rotate عشان الأيقونة تفضل upright */
    animation: orbit-counter 12s linear infinite;
    backdrop-filter: blur(4px);
    transition: background .3s;
}
.dark .orbit-icon {
    background: rgba(255,77,109,.12);
    border-color: rgba(255,77,109,.2);
}

@keyframes orbit-counter {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* ── Position each icon on the circle (6 icons × 60°) ── */
.orbit-icon--1 { top:  calc(50% - 110px * sin(0deg)   - 18px); left: calc(50% + 110px * cos(0deg)   - 18px); }
.orbit-icon--2 { top:  calc(50% - 110px * sin(60deg)  - 18px); left: calc(50% + 110px * cos(60deg)  - 18px); }
.orbit-icon--3 { top:  calc(50% - 110px * sin(120deg) - 18px); left: calc(50% + 110px * cos(120deg) - 18px); }
.orbit-icon--4 { top:  calc(50% - 110px * sin(180deg) - 18px); left: calc(50% + 110px * cos(180deg) - 18px); }
.orbit-icon--5 { top:  calc(50% - 110px * sin(240deg) - 18px); left: calc(50% + 110px * cos(240deg) - 18px); }
.orbit-icon--6 { top:  calc(50% - 110px * sin(300deg) - 18px); left: calc(50% + 110px * cos(300deg) - 18px); }

/* ── Entrance animation staggered ── */
.orbit-icon--1 { animation: orbit-counter 12s linear infinite, icon-in .4s .1s ease both; }
.orbit-icon--2 { animation: orbit-counter 12s linear infinite, icon-in .4s .2s ease both; }
.orbit-icon--3 { animation: orbit-counter 12s linear infinite, icon-in .4s .3s ease both; }
.orbit-icon--4 { animation: orbit-counter 12s linear infinite, icon-in .4s .4s ease both; }
.orbit-icon--5 { animation: orbit-counter 12s linear infinite, icon-in .4s .5s ease both; }
.orbit-icon--6 { animation: orbit-counter 12s linear infinite, icon-in .4s .6s ease both; }

@keyframes icon-in {
    from { opacity: 0; transform: rotate(0deg) scale(.5); }
    to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* ══════════════════════════════
   CENTER CONTENT
══════════════════════════════ */
.loader-inner {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    align-items: center; gap: 1.25rem;
}

.loader-logo {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;                          /* hidden by default */
    transition: opacity 0.3s ease;       /* JS هيحوله لـ 1 */
    animation: logo-in .7s .15s cubic-bezier(.16,1,.3,1) both;
}

/* الـ SVG جوا الـ div يورث الحجم */
.loader-logo svg {
    height: 38px;
    width: auto;
    display: block;
}

@keyframes logo-in {
    from { transform: translateY(10px) scale(.95); }
    to   { transform: translateY(0) scale(1); }
}

/* ── Dots ── */
.loader-dots {
    display: flex; align-items: center; gap: 5px;
}
.loader-dots span {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #FF4D6D;
    animation: dot-bounce .9s ease-in-out infinite;
}
.loader-dots span:nth-child(1) { animation-delay: 0s; }
.loader-dots span:nth-child(2) { animation-delay: .15s; }
.loader-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes dot-bounce {
    0%, 80%, 100% { transform: scale(1);   opacity: .3; }
    40%           { transform: scale(1.8); opacity: 1; }
}

/* ── Tagline ── */
.loader-tagline {
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #FF4D6D;
  opacity: 0;
  animation: tagline-in .6s .5s ease both;
}

/* Arabic override */
html[dir="rtl"] .loader-tagline {
  font-size: .9rem;
  letter-spacing: 0;          /* العربي مش بيحتاج letter-spacing */
  text-transform: none;       /* uppercase مش بتأثر على العربي لكن أحسن تشيلها */
}
@keyframes tagline-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: .65; transform: translateY(0); }
}

/* Testimonials Slider */
.testi-card {
  width: calc((100% - 48px) / 3); /* 3 cards + 2 gaps */
}

@media (max-width: 768px) {
  .testi-card {
    width: calc(100% - 0px); /* card واحدة على موبايل */
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .testi-card {
    width: calc((100% - 24px) / 2); /* 2 cards على تابلت */
  }
}

/* ══════════════════════════════════════════════════
   HERO ANIMATIONS
══════════════════════════════════════════════════ */
/* امنع flash قبل الأنيميشن */
.hero-hidden .hero-anim-1,
.hero-hidden .hero-anim-2,
.hero-hidden .hero-anim-3,
.hero-hidden .hero-anim-4,
.hero-hidden .hero-anim-5,
.hero-hidden .float-card-main,
.hero-hidden .float-card-1,
.hero-hidden .float-card-2,
.hero-hidden .float-card-3,
.hero-hidden .float-card-4 {
  opacity: 0;
  visibility: hidden;
}

/* ── Hero Orbs ────────────────────────────────── */
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.10;
  will-change: transform;
}
.hero-orb-1 {
  width: 500px; height: 500px; background: #FF5C35;
  top: -100px; inset-inline-end: -100px;
  animation: orbFloat 9s ease-in-out infinite;
}
.hero-orb-2 {
  width: 350px; height: 350px; background: #6366f1;
  bottom: 50px; inset-inline-start: -50px;
  animation: orbFloat 11s ease-in-out infinite reverse;
}
.hero-orb-3 {
  width: 250px; height: 250px; background: #FF5C35;
  top: 40%; inset-inline-start: 35%; opacity: 0.05;
  animation: orbFloat 7s ease-in-out infinite 2s;
}
@keyframes orbFloat {
  0%, 100% { transform: translateY(0)     scale(1);    }
  50%      { transform: translateY(-28px) scale(1.04); }
}

/* ── Hero Text — مخفي افتراضياً، يظهر بـ .hero-ready ── */
.hero-anim-1, .hero-anim-2, .hero-anim-3,
.hero-anim-4, .hero-anim-5 {
  opacity: 0;
  will-change: opacity, transform;
}
.hero-ready .hero-anim-1 { animation: heroIn 0.9s ease-out 0.10s both; }
.hero-ready .hero-anim-2 { animation: heroIn 0.9s ease-out 0.30s both; }
.hero-ready .hero-anim-3 { animation: heroIn 0.9s ease-out 0.50s both; }
.hero-ready .hero-anim-4 { animation: heroIn 0.9s ease-out 0.70s both; }
.hero-ready .hero-anim-5 { animation: heroIn 0.9s ease-out 0.90s both; }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── SVG Underline ────────────────────────────── */
.hero-underline {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}
.hero-ready .hero-underline {
  animation: drawLine 1.2s ease-out 1.1s both;
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* ── Trust Pills ──────────────────────────────── */
.trust-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 500; opacity: 0.7;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(0,0,0,0.08); border-radius: 9999px;
  background: rgba(255,255,255,0.6); backdrop-filter: blur(4px);
  transition: opacity 0.2s, border-color 0.2s;
}
.trust-pill:hover { opacity: 1; border-color: rgba(255,92,53,0.3); }
.dark .trust-pill {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

/* ── CTA Shimmer ──────────────────────────────── */
.cta-primary { position: relative; overflow: hidden; }
.cta-primary::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: translateX(-150%) skewX(-15deg);
  transition: none;
}
.cta-primary:hover::after {
  transform: translateX(350%) skewX(-15deg);
  transition: transform 0.55s ease;
}

/* ── Floating Cards — مخفية، تظهر بـ .hero-ready ── */
.float-card-main, .float-card-1, .float-card-2,
.float-card-3,   .float-card-4 { opacity: 0; }

.hero-ready .float-card-main { animation: heroIn 1.0s ease-out 0.50s both; }
.hero-ready .float-card-4    { animation: heroIn 0.9s ease-out 0.65s both; }
.hero-ready .float-card-1    { animation: heroIn 0.9s ease-out 0.80s both; }
.hero-ready .float-card-2    { animation: heroIn 0.9s ease-out 1.00s both; }
.hero-ready .float-card-3    { animation: heroIn 0.9s ease-out 1.20s both; }

/* Float loop — يبدأ بعد JS يضيف .floating */
.float-card-1.floating    { animation: cardFloat1 6s ease-in-out infinite;       opacity: 1; }
.float-card-2.floating    { animation: cardFloat2 7s ease-in-out infinite;       opacity: 1; }
.float-card-3.floating    { animation: cardFloat1 5s ease-in-out infinite 0.5s;  opacity: 1; }
.float-card-4.floating    { animation: cardFloat2 8s ease-in-out infinite 1s;    opacity: 1; }
.float-card-main.floating { animation: cardFloat1 9s ease-in-out infinite 0.3s;  opacity: 1; }

@keyframes cardFloat1 {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  50%      { transform: translateY(-8px); opacity: 1; }
}
@keyframes cardFloat2 {
  0%, 100% { transform: translateY(0);   opacity: 1; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* ── Scroll Indicator ─────────────────────────── */
.scroll-dot { animation: scrollBounce 2s ease-in-out infinite; }
@keyframes scrollBounce {
  0%, 20%, 100% { transform: translateY(0);    opacity: 0.8; }
  80%           { transform: translateY(10px); opacity: 0;   }
}

/* ── Portfolio grid card height ───────────────── */
#portfolio-grid .portfolio-item > div {
  height: 100%; display: flex; flex-direction: column;
}
#portfolio-grid .portfolio-item > div .p-6 {
  flex: 1; display: flex; flex-direction: column;
}
#portfolio-grid .portfolio-item .h-48 {
  height: 192px; flex-shrink: 0;
}

/* ── Arabic Typography Fix ───────────────────── */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
  letter-spacing: 0 !important;
  word-spacing: 0.05em;
  line-height: 1.45;
}

html[dir="rtl"] p {
  letter-spacing: 0 !important;
  word-spacing: 0.03em;
  line-height: 1.9;
}

html[dir="rtl"] .nav-link,
html[dir="rtl"] .section-tag,
html[dir="rtl"] .popular-badge,
html[dir="rtl"] .filter-btn,
html[dir="rtl"] .trust-pill span,
html[dir="rtl"] a,
html[dir="rtl"] button,
html[dir="rtl"] span {
  letter-spacing: 0 !important;
  word-spacing: 0.02em;
}

/* Hero headline خصوصاً */
html[dir="rtl"] h1 {
  line-height: 1.5;
}

/* Subtitle */
html[dir="rtl"] .hero-anim-3 p,
html[dir="rtl"] p.opacity-60 {
  line-height: 2;
  word-spacing: 0.06em;
}