:root {
  --bs-primary: #0866FF;
  --bs-primary-rgb: 8, 102, 255;
  --bs-link-color: #0866FF;
  --bs-body-color: #172B4D;
  --bs-body-font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --ts-navy: #092B75;
  --ts-section: #F5F8FF;
  --ts-success: #16A34A;
}

body { background: var(--ts-section); color: var(--bs-body-color); font-family: var(--bs-body-font-family); }

.btn-primary { --bs-btn-bg: #0866FF; --bs-btn-border-color: #0866FF; --bs-btn-hover-bg: #0753d1; --bs-btn-hover-border-color: #0753d1; --bs-btn-active-bg: #0645b0; }
.btn-outline-primary { --bs-btn-color: #0866FF; --bs-btn-border-color: #0866FF; --bs-btn-hover-bg: #0866FF; --bs-btn-hover-border-color: #0866FF; }

.brand-name { font-weight: 800; letter-spacing: .5px; color: var(--ts-navy); font-size: 1.35rem; }
.site-header { box-shadow: 0 1px 12px rgba(9, 43, 117, .06); }
.site-footer { background: var(--ts-navy); }

.hero {
  background: linear-gradient(135deg, #0866FF 0%, #092B75 100%);
  color: #fff;
  border-radius: 24px;
  padding: 3rem 2rem;
  box-shadow: 0 12px 32px rgba(8, 102, 255, .22);
}
.hero h1 { font-weight: 800; }

.card-soft {
  background: #fff;
  border: 1px solid #e3e9f6;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(9, 43, 117, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.card-soft:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(9, 43, 117, .12); }

.auth-card { max-width: 460px; margin-inline: auto; }

.admin-shell { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; }
.admin-side { background: #fff; border: 1px solid #e3e9f6; border-radius: 18px; padding: 1rem; height: fit-content; }
.admin-side a { display: block; padding: .55rem .75rem; border-radius: 10px; color: var(--bs-body-color); text-decoration: none; }
.admin-side a.active, .admin-side a:hover { background: var(--ts-section); color: #0866FF; }
@media (max-width: 767px) { .admin-shell { grid-template-columns: minmax(0, 1fr); } }
.admin-shell > * { min-width: 0; }
img { max-width: 100%; height: auto; }
.alert, .card-soft { overflow-wrap: anywhere; }

:focus-visible { outline: 3px solid rgba(8, 102, 255, .5); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.product-logo { width: 56px; height: 56px; border-radius: 14px; background: var(--ts-section); display: grid; place-items: center; color: #0866FF; font-size: 1.6rem; overflow: hidden; }
.product-logo img { width: 100%; height: 100%; object-fit: cover; }

.product-cover { width: 100%; height: 150px; border-radius: 14px; background: var(--ts-section); overflow: hidden; }
.product-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ===== حركة الواجهة ===== */
.motion-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
.site-header { transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(9, 43, 117, .10); }
.hero { animation: heroIn .9s cubic-bezier(.2,.7,.2,1) both; }
.hero h1, .hero .lead, .hero .btn { animation: heroIn .9s cubic-bezier(.2,.7,.2,1) both; }
.hero .lead { animation-delay: .12s; } .hero .btn { animation-delay: .24s; }
a.card-soft { transition: transform .25s ease, box-shadow .25s ease; }
a.card-soft:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(9, 43, 117, .16); }
a.card-soft:hover .product-cover img, a.card-soft:hover .product-logo { transform: scale(1.04); }
.product-cover img, .product-logo { transition: transform .45s ease; }
.btn { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; }
.btn:active { transform: scale(.97); }
.btn-primary:hover { box-shadow: 0 8px 18px rgba(8, 102, 255, .28); }
.navbar .nav-link { transition: color .2s ease; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .hero, .hero h1, .hero .lead, .hero .btn { animation: none; }
    a.card-soft:hover, .btn:active { transform: none; }
}

/* ===== لوقو الهيدر ومشهد اللابتوب في الواجهة ===== */
.brand-logo { height: 34px; width: auto; display: block; }
.hero-scene { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1000 / 666; }
.hero-scene img { position: absolute; display: block; user-select: none; -webkit-user-drag: none; }
.hs-laptop { inset: 0; width: 100%; height: 100%; transform-origin: 50% 90%; }
.hs-icon { left: var(--x); top: var(--y); width: var(--w); height: auto; will-change: transform, opacity; }
/* التحريك: المربع يظهر أولاً، ثم يُفتح اللابتوب، ثم تخرج العناصر منه. الحالة الافتراضية (بلا JS) هي المشهد النهائي. */
.hero-scene.pre .hs-laptop { opacity: 0; transform: perspective(1100px) rotateX(-78deg) scale(.82); }
.hero-scene.pre .hs-icon { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.15); }
.hero-scene.play .hs-laptop { animation: lapOpen 1.15s cubic-bezier(.22, .9, .28, 1) .15s both; }
.hero-scene.play .hs-icon { animation: iconOut .9s cubic-bezier(.34, 1.45, .64, 1) var(--d, 1.4s) both, iconFloat 5s ease-in-out calc(var(--d, 1.4s) + .9s) infinite alternate; }
.hero.hero-wait, .hero.hero-wait h1, .hero.hero-wait .lead, .hero.hero-wait .btn { animation: none !important; opacity: 0 !important; }
@keyframes lapOpen { from { opacity: 0; transform: perspective(1100px) rotateX(-78deg) scale(.82); } 45% { opacity: 1; } to { opacity: 1; transform: perspective(1100px) rotateX(0) scale(1); } }
@keyframes iconOut { from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.15); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes iconFloat { from { transform: translateY(0); } to { transform: translateY(var(--fy, 6px)); } }
@media (max-width: 991.98px) { .hero { padding: 2rem 1.25rem; } .hero-scene { max-width: 420px; } }
@media (prefers-reduced-motion: reduce) { .hero-scene.play .hs-laptop, .hero-scene.play .hs-icon { animation: none; } .hero-scene.pre .hs-laptop, .hero-scene.pre .hs-icon { opacity: 1; transform: none; } }