/* قطع مشتركة: السلة، الحجز، لوحة التحكم. الألوان من متغيرات كل موقع */
.item-end{display:flex;align-items:center;gap:12px}
.add{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--pri);background:transparent;color:var(--pri);font:inherit;font-size:1.1rem;font-weight:700;cursor:pointer;flex:none;transition:transform .15s cubic-bezier(.2,.8,.2,1),background .2s}
.add:active{transform:scale(.88)}
.add.has{background:var(--pri);color:#fff}
.muted{color:var(--muted);font-size:.9rem}
.wide{width:100%;justify-content:center}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.sm{padding:6px 14px;font-size:.85rem}

/* شريط السلة */
.cbar{position:fixed;z-index:30;bottom:16px;left:50%;width:min(520px,calc(100% - 32px));display:flex;align-items:center;gap:12px;padding:12px 16px;border:0;border-radius:18px;background:var(--pri);color:#fff;font:inherit;cursor:pointer;box-shadow:0 12px 32px rgba(0,0,0,.22);transform:translate(-50%,140%);transition:transform .45s cubic-bezier(.2,.9,.25,1.15)}
.cbar.on{transform:translate(-50%,0)}
.cbar.pop{animation:pop .35s cubic-bezier(.2,.9,.25,1.3)}
@keyframes pop{50%{transform:translate(-50%,0) scale(1.04)}}
.cbar b{flex:1;text-align:start}
.cb-n{background:var(--acc);border-radius:10px;min-width:28px;height:28px;display:grid;place-items:center;font-weight:700}
.cbar small{color:inherit;opacity:.75}

/* الورقة اللي بتطلع من تحت */
.ov{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .3s}
.ov.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:41;left:50%;bottom:0;width:min(560px,100%);max-height:88vh;overflow:auto;background:var(--card);color:var(--ink);border-radius:24px 24px 0 0;padding:8px 20px 24px;transform:translate(-50%,105%);transition:transform .45s cubic-bezier(.2,.9,.25,1)}
.sheet.open{transform:translate(-50%,0)}
.sh-grip{width:40px;height:5px;border-radius:9px;background:var(--line);margin:4px auto 12px}
.sheet h3{font-size:1.25rem;margin-bottom:8px}
.crow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.crow>div>small{display:block;color:var(--muted)}
.qty{display:flex;align-items:center;gap:10px}
.qty button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.ctot{display:flex;justify-content:space-between;padding:14px 0;font-size:1.05rem}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;font-size:.9rem}
.field span{color:var(--muted)}
.field input,.field select,.field textarea{padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--acc);outline-offset:1px}
.field.bad input{border-color:#c0392b;background:#fdf0ee}
.field.bad span::after{content:" (مطلوب)";color:#c0392b}
.steps{list-style:none;margin:16px 0;display:flex;flex-direction:column;gap:12px}
.steps li{position:relative;padding-inline-start:34px;color:var(--muted)}
.steps li::before{content:"";position:absolute;inset-inline-start:0;top:3px;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);background:var(--card)}
.steps li.done{color:var(--ink)}
.steps li.done::before{background:var(--pri);border-color:var(--pri)}
.steps li.now{color:var(--ink);font-weight:700}
.steps li.now::before{border-color:var(--acc);background:var(--acc);animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px transparent}0%{box-shadow:0 0 0 0 var(--acc)}}
.bad-msg{background:#fdf0ee;color:#c0392b;padding:12px;border-radius:12px;margin:12px 0}

/* نموذج الحجز */
.bform{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.bform .full{grid-column:1/-1}
.bdone{text-align:center;padding:16px 0}
.bic{width:64px;height:64px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:1.8rem;background:var(--bg);color:var(--pri)}
.bdone.s-ok .bic{background:var(--pri);color:#fff}
.bdone.s-cancel .bic{background:#fdf0ee;color:#c0392b}
.bdone p{margin:6px 0}
@media (max-width:560px){.bform{grid-template-columns:1fr}}

/* إشعار صغير */
.toast{position:fixed;z-index:60;top:16px;left:50%;transform:translate(-50%,-150%);background:#1d1d1f;color:#fff;padding:10px 18px;border-radius:12px;transition:transform .35s cubic-bezier(.2,.9,.25,1.15)}
.toast.on{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){.cbar,.sheet,.ov,.toast{transition:none}.cbar.pop,.steps li.now::before{animation:none}}