/* سوق الخيرات — overlays: modal, bottom sheet, lightbox, toasts, slider, confetti. */
#layers{position:relative;z-index:100}

/* overlay shell: page behind is dimmed and blurred; tapping it closes */
.ov{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.ov-bd{position:absolute;inset:0;background:var(--backdrop);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.15);backdrop-filter:blur(var(--blur)) saturate(1.15);
  opacity:0;transition:opacity var(--t) var(--ease)}
.ov.is-open .ov-bd{opacity:1}
.ov.is-closing .ov-bd{opacity:0}
.ov-panel{position:relative;z-index:1;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--shadow-2);
  max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;outline:none}

/* centered framed modal */
.modal{width:min(560px,100%);border-radius:var(--r-xl);opacity:0;transform:translateY(16px) scale(.965);
  transition:transform .34s var(--ease-out),opacity .22s var(--ease)}
.modal-sm{width:min(420px,100%)}
.modal-lg{width:min(780px,100%)}
.ov.is-open .modal{opacity:1;transform:none}
.ov.is-closing .modal{opacity:0;transform:translateY(10px) scale(.98)}
.modal-h,.sheet-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 12px;
  background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.modal-h h2,.sheet-h h2{font-size:var(--fs-lg)}
.modal-b{padding:16px 18px 22px}
.modal-x.is-float{position:absolute;top:10px;inset-inline-end:10px;z-index:3}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:0 18px 18px}

/* bottom sheet (phones) / centered card (wide screens) */
.ov-sheet{place-items:end center;padding:0}
.sheet{width:100%;max-width:640px;max-height:min(94dvh,100%);border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:0;padding-bottom:var(--safe-b);
  transform:translateY(105%);transition:transform .46s var(--ease-out)}
.ov.is-open .sheet{transform:translateY(var(--drag,0px))}
.ov.is-closing .sheet{transform:translateY(105%);transition-duration:.3s}
.sheet.is-dragging{transition:none}
.sheet-grip{display:grid;place-items:center;padding:10px 0 4px;cursor:grab;touch-action:none}
.sheet-grip span{width:42px;height:5px;border-radius:99px;background:var(--line-2)}
.sheet-h{touch-action:none}
.sheet-b{padding:14px 18px 20px}
@media (min-width:720px){
  .ov-sheet{place-items:center;padding:16px}
  .sheet{border-radius:var(--r-xl);border-bottom:1px solid var(--line-2);max-height:calc(100dvh - 32px);padding-bottom:0;opacity:0;transform:translateY(18px) scale(.97);
    transition:transform .34s var(--ease-out),opacity .22s var(--ease)}
  .ov.is-open .sheet{opacity:1;transform:none}
  .ov.is-closing .sheet{opacity:0;transform:translateY(10px) scale(.98)}
  .sheet-grip{display:none}
}

/* lightbox */
.lb{position:fixed;inset:0;z-index:120;display:grid;grid-template-rows:auto 1fr auto;color:#fff;background:rgba(3,6,12,var(--lb-a,.96));
  opacity:0;transition:opacity .25s var(--ease)}
.lb.is-open{opacity:1}
.lb.is-closing{opacity:0}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + var(--safe-t)) 12px 8px}
.lb-count{font-size:14px;font-weight:700;opacity:.85;padding-inline:6px}
.lb-btn{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-stage{position:relative;overflow:hidden;touch-action:none;user-select:none}
.lb-track{display:flex;height:100%;will-change:transform;transition:transform .36s var(--ease-out)}
.lb-track.is-dragging{transition:none}
.lb-slide{flex:0 0 100%;min-width:0;height:100%;display:grid;place-items:center;overflow:hidden;padding:4px}
.lb-slide img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;transform-origin:center center;will-change:transform}
.lb-slide img.is-anim{transition:transform .3s var(--ease-out)}
.lb-slide video,.lb-slide iframe{width:min(100%,960px);max-height:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#000}
.lb-slide video{aspect-ratio:auto;height:auto}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.lb-prev{inset-inline-start:12px}
.lb-next{inset-inline-end:12px}
@media (hover:none){.lb-nav{display:none}}
.lb-dots{display:flex;justify-content:center;gap:6px;padding:10px 0 calc(16px + var(--safe-b))}
.lb-dots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.32);transition:width var(--t) var(--ease),background-color var(--t)}
.lb-dots i.on{width:20px;background:#fff}
.lb-hint{position:absolute;bottom:10px;inset-inline:0;text-align:center;font-size:12.5px;opacity:.6;pointer-events:none}

/* toasts */
.toasts{position:fixed;inset-inline:0;bottom:calc(92px + var(--safe-b));z-index:130;display:grid;justify-items:center;gap:8px;padding-inline:16px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:8px;max-width:min(520px,100%);padding:11px 18px;border-radius:var(--r-pill);background:var(--ink);color:var(--bg);
  font-weight:600;font-size:14px;line-height:1.5;box-shadow:var(--shadow-2);animation:toastIn .38s var(--ease-out)}
.toast .ic{width:18px;height:18px}
.toast.is-ok .ic{color:#2FAE6E}
.toast.is-err{background:#C9473F;color:#fff}
.toast.is-out{opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* slider: .sl > .sl-track > .sl-slide ; .sl-bars (stories) ; .sl-dots */
.sl{position:relative}
.sl-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:smooth}
.sl-track::-webkit-scrollbar{display:none}
.sl-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.sl-bars{position:absolute;top:12px;inset-inline:16px;z-index:3;display:flex;gap:5px;pointer-events:none}
.sl-bars i{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.26);overflow:hidden}
.sl-bars i b{display:block;height:100%;width:0;background:#fff;border-radius:99px}
.sl-bars i.done b{width:100%}
.sl-bars i.on b{animation:slbar var(--sl-ms,5000ms) linear forwards}
.sl.is-paused .sl-bars i.on b{animation-play-state:paused}
@keyframes slbar{to{width:100%}}
.sl-dots{display:flex;justify-content:center;gap:6px;padding-top:12px}
.sl-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:var(--line-2);transition:width var(--t) var(--ease),background-color var(--t)}
.sl-dots button[aria-current="true"]{width:22px;background:var(--gold)}

.confetti{position:fixed;inset:0;z-index:140;pointer-events:none}