/* ============ Upline Cosmetice — §7 site-wide CSS ============ */

/* --- RTL guard (critical §3): never italicise, letter-space, or uppercase Arabic --- */
[dir="rtl"] *, body.rtl * {
  letter-spacing: normal !important;
  font-style: normal !important;
  text-transform: none !important;
}
/* Arabic font stack scope */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6 {
  font-family: 'Cairo', sans-serif !important;
}
[dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] button,
body.rtl, body.rtl p, body.rtl li, body.rtl input, body.rtl textarea, body.rtl button {
  font-family: 'Tajawal', sans-serif !important;
}

/* --- Focus ring (a11y) --- */
:focus-visible { outline: 2px solid #6B35A2; outline-offset: 2px; }

/* --- Motion: all behind prefers-reduced-motion --- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .reveal.in { opacity: 1; transform: none; }

  .card-lift { transition: transform .35s ease, box-shadow .35s ease; }
  .card-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(107,53,162,.18); }

  .cta-shine { position: relative; overflow: hidden; }
  .cta-shine::after {
    content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg); transition: left .6s ease;
  }
  .cta-shine:hover::after { left: 130%; }
}

/* --- Before/After slider --- */
.upl-ba { position: relative; overflow: hidden; border-radius: 20px; touch-action: none; user-select: none; }
.upl-ba img { display: block; width: 100%; height: auto; pointer-events: none; }
.upl-ba .upl-ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.upl-ba .upl-ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff;
  box-shadow: 0 0 12px rgba(26,10,46,.4); cursor: ew-resize;
}
.upl-ba .upl-ba-handle::after {
  content: '\2194'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%; background: #6B35A2; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  box-shadow: 0 6px 18px rgba(107,53,162,.35);
}
.upl-ba .upl-ba-handle:focus-visible { outline: 2px solid #C9A84C; outline-offset: 4px; }

/* --- Purple-tinted shadow utility (§10: never plain black) --- */
.upl-shadow { box-shadow: 0 10px 30px rgba(107,53,162,.12); }