/* Enjaz Group — shared site styles (Unified Academy RTL) */
:root{
  --brand-navy:#1B2A5B; --brand-navy-deep:#16234A; --brand-teal:#0E8A82; --secondary:#006a64;
  --accent-burgundy:#A6193C; --steel-slate:#334155; --surface-canvas:#F8FAFC; --surface-card:#FFFFFF;
  --surface-muted:#F1F5F9; --border-subtle:#E2E8F0; --text-primary:#0F172A; --text-secondary:#475569;
  --outline:#767680; --entity:#1B2A5B; --entity-ring:rgba(27,42,91,.18);
  color-scheme: light;
}
body[data-brand="awj"]{ --entity:#006a64; --entity-ring:rgba(14,138,130,.22); }
[hidden]{display:none!important}
html{scroll-behavior:smooth; scroll-padding-top:6rem}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{margin:0;background:var(--surface-canvas);color:var(--text-primary);
  font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;line-height:1;vertical-align:middle}
.icon-fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
h1,h2,h3{text-wrap:balance}
.latin{font-family:Inter,"IBM Plex Sans Arabic",system-ui,sans-serif}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--entity);outline-offset:2px;border-radius:6px}

/* Header */
.site-header{position:fixed;top:0;right:0;left:0;z-index:50;background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 3px 0 rgba(0,0,0,.04);
  padding-top:env(safe-area-inset-top,0px)}
.header-spacer{height:5rem}
.nav-link{position:relative}
.dd-panel{opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease,visibility .15s}
.dd:hover>.dd-panel,.dd:focus-within>.dd-panel,.dd.is-open>.dd-panel{opacity:1;visibility:visible;transform:none}
.drawer{transform:translateX(100%);transition:transform .25s ease}
.drawer.is-open{transform:none}
.drawer-backdrop{opacity:0;pointer-events:none;transition:opacity .2s}
.drawer-backdrop.is-open{opacity:1;pointer-events:auto}

/* Inputs per design system: 48px, rounded 8px, canvas fill, entity focus ring */
.field{display:flex;flex-direction:column;gap:.375rem}
.field label{font-size:14px;font-weight:600;color:var(--text-primary)}
.input{height:48px;width:100%;border-radius:.5rem;border:1px solid #CBD5E1;background:var(--surface-canvas);
  padding:0 1rem;font:inherit;font-size:15px;color:var(--text-primary);transition:border-color .15s,box-shadow .15s}
textarea.input{height:auto;min-height:120px;padding:.75rem 1rem;line-height:1.7}
.input:focus{outline:none;border-color:var(--entity);box-shadow:0 0 0 3px var(--entity-ring)}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#64748B 50%),linear-gradient(135deg,#64748B 50%,transparent 50%);
  background-position:1.1rem 21px,1.45rem 21px;background-size:6px 6px;background-repeat:no-repeat;padding-left:2.5rem}

/* Cards: level 1 / level 2 hover */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:1rem;box-shadow:0 4px 20px -2px rgba(15,23,42,.05)}
.card-hover{transition:box-shadow .2s ease,transform .2s ease}
.card-hover:hover{box-shadow:0 12px 28px -4px rgba(15,23,42,.08);transform:translateY(-2px)}

/* Tabs */
[data-tab][aria-selected="true"]{background:var(--entity);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
[data-panel][hidden]{display:none!important}

/* Filter chips */
.chip{display:inline-flex;white-space:nowrap;align-items:center;gap:.375rem;min-height:40px;padding:0 .9rem;border-radius:.5rem;
  border:1px solid #CBD5E1;background:#fff;font-size:14px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--entity);color:var(--entity)}
.chip[aria-pressed="true"]{background:var(--entity);border-color:var(--entity);color:#fff}
.chip .count{font-family:Inter,sans-serif;font-size:12px;opacity:.75}

/* RTL stepper */
.stepper{counter-reset:step}
.stepper>li{counter-increment:step}
.stepper .step-num::before{content:counter(step)}

/* Toast */
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));right:50%;transform:translate(50%,20px);opacity:0;
  background:#2d3133;color:#eff1f3;padding:.75rem 1.25rem;border-radius:.75rem;font-size:14px;z-index:80;transition:all .25s;box-shadow:0 20px 40px -8px rgba(15,23,42,.16)}
.toast.show{opacity:1;transform:translate(50%,0)}

/* WhatsApp FAB — bottom-left so it never covers the RTL reading end */
.wa-fab{position:fixed;left:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:45}
.wa-fab .tip{opacity:0;transform:translateX(-4px);transition:all .15s;pointer-events:none}
.wa-fab:hover .tip,.wa-fab:focus-within .tip{opacity:1;transform:none}
@keyframes ripple{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}100%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}
.wa-fab a{animation:ripple 1.6s ease-out 2}

/* Image fallback (when remote Stitch images are unavailable) */
img.img-fallback{object-fit:cover;background:#E2E8F0}

.prose-ar p{margin:0 0 1rem;line-height:1.9;font-size:17px;color:var(--text-secondary)}
.prose-ar h2{font-size:24px;line-height:38px;font-weight:600;color:var(--text-primary);margin:2rem 0 .75rem}
.prose-ar ul{margin:0 0 1rem;padding-right:1.25rem;list-style:disc;color:var(--text-secondary);line-height:1.9}

/* Detail pages: mobile buy bar */
@media (max-width:1023px){ body.has-buybar{padding-bottom:84px} body.has-buybar .wa-fab{bottom:calc(96px + env(safe-area-inset-bottom,0px))} }
.dd-panel{max-height:calc(100vh - 6rem);overflow:auto}
main{overflow-x:clip}