*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.static{position:static}.relative{position:relative}.\!sticky{position:sticky!important}.sticky{position:sticky}.top-0{top:0}.z-40{z-index:40}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-0\.5{margin-right:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-3{margin-top:.75rem}.mt-3\.5{margin-top:.875rem}.mt-4{margin-top:1rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.h-2{height:.5rem}.h-4{height:1rem}.h-\[72px\]{height:72px}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-2{width:.5rem}.w-4{width:1rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-rows-\[0fr\]{grid-template-rows:0fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-x{border-left-width:1px;border-right-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-emerald-200{--tw-border-opacity:1;border-color:rgb(167 243 208/var(--tw-border-opacity,1))}.border-orange-200\/60{border-color:hsla(32,98%,83%,.6)}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-slate-200\/80{border-color:rgba(226,232,240,.8)}.bg-emerald-50{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.bg-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-slate-50\/70{background-color:rgba(248,250,252,.7)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.bg-white\/95{background-color:hsla(0,0%,100%,.95)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pr-2{padding-right:.5rem}.pt-1{padding-top:.25rem}.pt-10{padding-top:2.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[17px\]{font-size:17px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.text-emerald-800{--tw-text-opacity:1;color:rgb(6 95 70/var(--tw-text-opacity,1))}.text-orange-700{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.accent-\[\#5f0f40\]{accent-color:#5f0f40}.accent-\[var\(--c-orange\)\]{accent-color:var(--c-orange)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-\[grid-template-rows\]{transition-property:grid-template-rows;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.file\:mr-4::file-selector-button{margin-right:1rem}.file\:rounded-xl::file-selector-button{border-radius:.75rem}.file\:border-0::file-selector-button{border-width:0}.file\:bg-\[\#5f0f40\]::file-selector-button{--tw-bg-opacity:1;background-color:rgb(95 15 64/var(--tw-bg-opacity,1))}.file\:px-4::file-selector-button{padding-left:1rem;padding-right:1rem}.file\:py-2::file-selector-button{padding-top:.5rem;padding-bottom:.5rem}.file\:text-xs::file-selector-button{font-size:.75rem;line-height:1rem}.file\:font-bold::file-selector-button{font-weight:700}.file\:text-white::file-selector-button{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.placeholder\:text-slate-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.placeholder\:text-slate-400::placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.focus-within\:border-\[var\(--c-plum\2c \#5f0f40\)\]:focus-within{border-color:var(--c-plum,#5f0f40)}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-slate-300:hover{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.hover\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.hover\:text-slate-900:hover{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:file\:opacity-90::file-selector-button:hover{opacity:.9}.focus\:border-\[\#5f0f40\]:focus{--tw-border-opacity:1;border-color:rgb(95 15 64/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:640px){.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:p-8{padding:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:self-auto{align-self:auto}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:1024px){.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ============ مِنيو (Menu Engine) — التصميم الأساسي ============ */

/* ======================================================================
   قاعدة أساسية: سمة hidden في HTML تتقدّم دائماً على أي display في CSS.
   بدونها يكفي أن يكون للعنصر صنف فيه display:flex ليظهر رغم hidden —
   وهذا سبب ظهور عناصر يفترض أن تكون مخفية (شريط التحديد، قوائم النوافذ…).
   ====================================================================== */
[hidden]{ display: none !important; }


:root{
    --c-plum:   #5f0f40;   /* عناوين، أزرار أساسية */
    --c-red:    #9A031E;   /* تمييز، تقييمات */
    --c-orange: #FB8B24;   /* الأزرار الرئيسية (CTA) */
    --c-burnt:  #E36414;   /* حالات hover، عناصر ثانوية */
    --c-teal:   #0F4C5C;   /* الفوتر، تباين */

    /* ---------- مقياس الطبقات (Z-Index Scale) ----------
       كانت القيم متناثرة بأرقام ارتجالية (20، 60، 80، 9000، 9400، 9998،
       10000) فلا أحد يعرف أيّها فوق أيّ، وكل عنصر جديد يُضاف برقم أكبر من
       سابقه حتى تنتهي الأرقام. هذه القائمة هي المرجع الوحيد: أضف عنصراً
       جديداً بأقرب متغيّر يصفه، ولا تكتب رقماً مباشراً. */
    --z-base:     1;      /* طبقات داخل البطاقة (شارة فوق صورة) */
    --z-header:   40;     /* الأشرطة العلوية اللاصقة */
    --z-floating: 100;    /* الأزرار العائمة: السلة، طلباتي */
    --z-overlay:  400;    /* الخلفية المعتمة خلف الأدراج والنوافذ */
    --z-drawer:   450;    /* الأدراج المنزلقة (السلة) */
    --z-modal:    500;    /* النوافذ المنبثقة */
    --z-toast:    600;    /* الإشعارات ورسائل الخطأ — الأعلى دائماً */
}

/* ======================================================================
   .base-card — الخصائص المشتركة لكل البطاقات في المشروع
   ----------------------------------------------------------------------
   كانت ست بطاقات (الطبق، العرض، الفرع، الموظف، الطلب، بطاقة الإدارة) تكرّر
   الكود نفسه: خلفية بيضاء + حدّ رمادي + زوايا منحنية + انتقال. فتغيير انحناء
   الزوايا مثلاً كان يتطلب تعديل ستة مواضع. الآن مصدر واحد، وكل بطاقة تغيّر ما
   يخصّها بمتغيّرها المحلي (--card-radius مثلاً) دون تكرار بقية الخصائص.
   ====================================================================== */
:root{
    --card-bg:      #fff;
    --card-border:  #e9edf3;
    --card-radius:  1.15rem;
    --card-shadow:  0 18px 30px -18px rgba(15, 23, 42, .35);
}
.base-card,
.dish-card--grid,
.of-card,
.branch-card,
.pt-card,
.st-card,
.order-card{
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.base-card--hover:hover,
.dish-card--grid:hover,
.of-card:hover,
.pt-card:hover,
.st-card:hover{
    box-shadow: var(--card-shadow);
    transform: translateY(-2px);
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Tajawal', system-ui, sans-serif;
    color: #0f172a;
    background: #ffffff;
}

h1, h2, h3, h4, .font-display{
    font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
}

/* إخفاء شريط التمرير الأفقي للتصنيفات مع إبقاء التمرير فعالاً */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* شرائح التصنيفات */
.cat-chip.is-active{
    background: var(--c-plum);
    color: #fff;
    border-color: var(--c-plum);
}

/* بقايا تصميم قديم كانت فيه تفاصيل الطبق تنزلق داخل البطاقة نفسها
   (Inline Expansion) — حُذفت عمداً ولا يجوز إرجاعها: في شبكة من أربع بطاقات
   في الصف، فتح بطاقة يمدّها لأسفل فيدفع ما تحتها وتبقى جاراتها قصيرة،
   فتتشوّه الشبكة وتقفز الصفحة تحت إصبع الزائر. التفاصيل تُفتح في نافذة
   مركزية تطفو فوق الصفحة (#addon-modal) فتبقى الشبكة خلفها ساكنة تماماً. */

/* شريط تمرير السعر بلون الهوية */
input[type="range"]{
    accent-color: var(--c-orange);
}

/* شارات المكونات والملاحظات داخل التوسّع الداخلي */
.ingredient-pill{
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 5px 12px;
}
.tag-pill{
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-burnt);
    background: rgba(227, 100, 20, 0.08);
    border-radius: 999px;
    padding: 5px 12px;
}

/* إتاحة الوصول: إطار تركيز واضح عند التنقل بلوحة المفاتيح */
a:focus-visible, button:focus-visible, input:focus-visible{
    outline: 2px solid var(--c-plum);
    outline-offset: 2px;
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
    *{
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ======================================================================
   التنسيقات المنقولة من ملفات PHP (بدون أي تغيير في الشكل)
   ====================================================================== */

/* ---------- عام: index.php + add-menu.php ---------- */
:root{
    --c-burgundy: #9A031E;
    --c-rust:     #E36414;
}
html[lang="ar"] body{ font-family: 'Cairo', sans-serif; background-color: #ffffff; }
html[lang="en"] body{ font-family: 'Inter', sans-serif; background-color: #ffffff; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4{ font-family: 'Inter', sans-serif; }

/* ---------- ألوان الهوية (بدل style="" داخل الملفات) ---------- */
.u-text-plum { color: var(--c-plum, #5f0f40); }
.u-bg-plum   { background: var(--c-plum, #5f0f40); }
.u-bg-orange { background: var(--c-orange, #FB8B24); }
.u-bg-teal   { background: var(--c-teal, #0F4C5C); }

/* ======================================================================
   includes/cards.php — البطاقات
   ====================================================================== */
.add-to-cart-btn{
    width: 2.5rem; height: 2.5rem; flex-shrink: 0;
    border-radius: 9999px; border: 1.5px solid #e2e8f0; background: #fff;
    color: var(--c-plum, #5f0f40); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s ease;
}
.add-to-cart-btn:hover{ background: var(--c-plum, #5f0f40); border-color: var(--c-plum, #5f0f40); color: #fff; }
.add-to-cart-btn:active{ transform: scale(.92); }

/* ---------- cards.php — النافذة المنبثقة ---------- */
.dish-modal-overlay{
    display: none; position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 1rem;
}
.dish-modal-box{
    background: #ffffff; width: 100%; max-width: 42rem; max-height: 90vh;
    border-radius: 1.5rem; overflow: hidden; display: flex; flex-direction: column;
    text-align: start; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.dish-modal-head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem; border-bottom: 1px solid #f1f5f9; background: #f8fafc;
}
.dish-modal-title{ font-size: 1.125rem; font-weight: 900; color: #0f172a; line-height: 1.2; }
.dish-modal-x{
    width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: #e2e8f0; color: #475569;
    display: flex; align-items: center; justify-content: center; font-weight: bold; border: none; cursor: pointer;
}
.dish-modal-body{ padding: 1.5rem; overflow-y: auto; }
.dish-modal-media{
    position: relative; width: 100%; height: 16rem; border-radius: 1rem;
    overflow: hidden; background: #f1f5f9; margin-bottom: 1.25rem;
}
/* نافذة تفاصيل الطبق (صفحة العروض): الطبق كاملاً بلا قصّ، والفراغ حوله
   تملؤه نسخة مشوّشة من الصورة نفسها كما في نافذة الطلب — لا لون افتراضي. */
.dish-modal-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.dish-modal-section{ margin-bottom: 1.25rem; }
.dish-modal-label{
    font-size: 0.75rem; font-weight: bold; color: #94a3b8;
    text-transform: uppercase; margin-bottom: 0.5rem;
}
.dish-modal-label--tight{ margin-bottom: 0.25rem; }
.dish-modal-desc{ font-size: 0.875rem; color: #475569; line-height: 1.625; }
.dish-modal-chips{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dish-ing-chip{
    font-size: 0.75rem; background: #f1f5f9; color: #334155;
    padding: 0.25rem 0.625rem; border-radius: 0.5rem; font-weight: 500;
}
.dish-tag-chip{
    font-size: 0.75rem; background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa;
    padding: 0.25rem 0.625rem; border-radius: 0.5rem; font-weight: bold;
}
.dish-modal-foot{
    padding: 1rem 1.5rem; border-top: 1px solid #f1f5f9; background: #f8fafc;
    display: flex; align-items: center; justify-content: space-between;
}
.dish-modal-meta{ display: flex; align-items: center; gap: 1rem; }
.dish-modal-price{ font-weight: 900; font-size: 1.25rem; color: #5f0f40; }
.dish-modal-cal{
    font-size: 0.75rem; color: #64748b; font-weight: 600; background: #ffffff;
    border: 1px solid #e2e8f0; border-radius: 9999px; padding: 0.25rem 0.75rem;
}
.dish-modal-close-btn{
    padding: 0.5rem 1.25rem; border-radius: 0.75rem; font-size: 0.75rem; font-weight: bold;
    color: #475569; background: #e2e8f0; border: none; cursor: pointer;
}

/* ---------- cards.php — السلة (Your list) ---------- */
/* العناصر الثابتة لا تتأثر بهوامش الحاوية الأب (مثل space-y في index.php) */
#cart-fab, #cart-overlay, #cart-drawer, #dish-modal-overlay{ margin: 0; }

#cart-fab{
    position: fixed; bottom: 1.25rem; inset-inline-end: 1.25rem; z-index: var(--z-floating);
    width: 3.5rem; height: 3.5rem; border-radius: 9999px; border: none; cursor: pointer;
    background: var(--c-plum, #5f0f40); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 25px -5px rgba(95, 15, 64, .45); transition: transform .15s ease;
}
#cart-fab:hover{ transform: scale(1.06); }
#cart-fab-badge{
    position: absolute; top: -.25rem; inset-inline-start: -.25rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
    border-radius: 9999px; background: #f97316; color: #fff; font-size: .7rem; font-weight: 800;
    display: none; align-items: center; justify-content: center;
}
#cart-fab-badge.is-visible{ display: flex; }

/* ======================================================================
   تنبيه الإضافة العائم — بديل فتح السلة بعد كل طبق
   ----------------------------------------------------------------------
   يقف فوق زرّ السلة مباشرة ويتلاشى وحده بعد ثانيتين. هو زرّ لا لافتة: من
   أراد السلة بعد الإضافة يضغطه فتُفتح — وفتحها يبقى بيده وحده.
   ====================================================================== */
.cart-flash{
    position: fixed; bottom: 5.1rem; inset-inline-end: 1.25rem; z-index: var(--z-floating);
    max-width: min(20rem, calc(100vw - 2.5rem));
    padding: .55rem .9rem; border: none; border-radius: .85rem; cursor: pointer;
    font-size: .8rem; font-weight: 800; line-height: 1.45; text-align: start;
    background: #0f172a; color: #fff; box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .65);
    opacity: 0; transform: translateY(.4rem); transition: opacity .22s ease, transform .22s ease;
}
.cart-flash.is-on{ opacity: 1; transform: translateY(0); }
.cart-flash[hidden]{ display: none; }
.cart-flash--warn{ background: #9a3412; }

/* نبضة زرّ السلة عند تغيّر العدد */
@keyframes cart-fab-bump{
    0%{ transform: scale(1); } 40%{ transform: scale(1.18); } 100%{ transform: scale(1); }
}
#cart-fab.is-bump{ animation: cart-fab-bump .34s ease; }
@media (prefers-reduced-motion: reduce){
    #cart-fab.is-bump{ animation: none; }
    .cart-flash{ transition: none; }
}

#cart-overlay{
    position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
#cart-overlay.open{ opacity: 1; pointer-events: auto; }

/* السلة: كان اتجاهها مكتوباً ثابتاً (direction: rtl; text-align: right; left: 0)
   فتبقى نصوصها محاذاة لليمين حتى بعد تبديل اللغة للإنجليزية، وتفتح من الجهة
   نفسها دائماً. الآن تتبع اتجاه المستند:
     • المحاذاة text-align: start بدل right
     • الموضع inset-inline-end بدل left — وهو اليسار في العربية (كما كان
       تماماً، فلا يتغيّر شيء على زبونك العربي) واليمين في الإنجليزية. */
#cart-drawer{
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: var(--z-drawer);
    width: 100%; max-width: 24rem; background: #fff; display: flex; flex-direction: column;
    text-align: start; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .3);
    transform: translateX(-100%); transition: transform .3s ease;
}
[dir="ltr"] #cart-drawer{ transform: translateX(100%); }
#cart-drawer.open,
[dir="ltr"] #cart-drawer.open{ transform: translateX(0); }

.cart-head{ display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid #f1f5f9; background: #f8fafc; }
.cart-head h3{ font-size: 1.15rem; font-weight: 900; color: #0f172a; direction: ltr; }
.cart-close{ width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: #e2e8f0; color: #475569; border: none; cursor: pointer; font-weight: bold; }

#cart-items{ flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.cart-empty{ text-align: center; color: #94a3b8; padding: 3rem 0; font-size: .9rem; }
.cart-empty .ico{ font-size: 2.5rem; margin-bottom: .5rem; }

.cart-item{ display: flex; gap: .75rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid #f1f5f9; }
.cart-item:last-child{ border-bottom: none; }
/* مصغّرة السلة (٦٠px): تملأ مربّعها — حجمها أصغر من أن يُفحَص فيه الطبق،
   وcontain كان يتركها صورة صغيرة وسط مربّع رمادي */
.cart-item img{ width: 3.75rem; height: 3.75rem; border-radius: .75rem; object-fit: cover; object-position: center; background: #f8fafc; flex-shrink: 0; }
.cart-item-info{ flex: 1; min-width: 0; }
.cart-item-name{ font-size: .875rem; font-weight: 700; color: #0f172a; line-height: 1.3; }
.cart-item-price{ font-size: .8rem; font-weight: 800; color: var(--c-plum, #5f0f40); margin-top: .2rem; }

.qty-box{ display: flex; align-items: center; gap: .15rem; background: #f1f5f9; border-radius: 9999px; padding: .2rem; }
.qty-btn{ width: 1.75rem; height: 1.75rem; border-radius: 9999px; border: none; background: #fff; color: #334155; font-size: 1rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.qty-btn:hover{ background: var(--c-plum, #5f0f40); color: #fff; }
.qty-num{ min-width: 1.5rem; text-align: center; font-size: .85rem; font-weight: 800; color: #0f172a; }

.cart-foot{ padding: 1rem 1.25rem 1.25rem; border-top: 1px solid #f1f5f9; background: #f8fafc; }
.cart-total-row{ display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.cart-total-row > span:first-child{ font-size: .9rem; font-weight: 700; color: #475569; }
.cart-total-row > span:last-child{ font-size: 1.3rem; font-weight: 900; color: var(--c-plum, #5f0f40); }
#cart-checkout{ width: 100%; padding: .85rem; border: none; border-radius: .9rem; background: var(--c-plum, #5f0f40); color: #fff; font-size: .95rem; font-weight: 800; cursor: pointer; transition: opacity .15s ease; }
#cart-checkout:hover{ opacity: .9; }
#cart-checkout:disabled{ background: #cbd5e1; cursor: not-allowed; }

/* ======================================================================
   includes/cards.php — حالة الكمية (قرب ينفذ / Sold out)
   ====================================================================== */
.stock-flag{
    position: absolute; top: .75rem; inset-inline-start: .75rem; z-index: 1;
    padding: .3rem .7rem; border-radius: 9999px; font-size: .72rem; font-weight: 800;
    letter-spacing: .02em; box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .35);
}
.stock-flag--low{ background: var(--c-orange, #FB8B24); color: #fff; }
.stock-flag--out{ background: #0f172a; color: #fff; text-transform: uppercase; }

.stock-note{
    margin-top: .5rem; font-size: .75rem; font-weight: 700; line-height: 1.4;
    border-radius: .6rem; padding: .35rem .6rem;
}
.stock-note--low{ color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; }
.stock-note--out{ color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; }

.dish-card.is-soldout img{ filter: grayscale(1); opacity: .7; }
.dish-card.is-soldout .u-text-plum{ color: #94a3b8; text-decoration: line-through; }

.add-to-cart-btn:disabled,
.add-to-cart-btn:disabled:hover{
    background: #f1f5f9; border-color: #e2e8f0; color: #cbd5e1; cursor: not-allowed; transform: none;
}
.qty-btn:disabled,
.qty-btn:disabled:hover{ background: #f8fafc; color: #cbd5e1; cursor: not-allowed; box-shadow: none; }

.cart-item-limit{ font-size: .7rem; font-weight: 700; color: #c2410c; margin-top: .15rem; }

.cart-msg{
    margin-bottom: .85rem; padding: .65rem .8rem; border-radius: .75rem;
    font-size: .8rem; font-weight: 700; line-height: 1.5;
}
.cart-msg[hidden]{ display: none; }
.cart-msg--success{ background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.cart-msg--warn   { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.cart-msg--error  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ======================================================================
   dashboard/ — لوحة تحكم المطاعم
   ====================================================================== */
:root{
    --dash-bg:      #f6f7fb;
    --dash-surface: #ffffff;
    --dash-border:  #e8ebf2;
    --dash-text:    #0f172a;
    --dash-muted:   #64748b;
    --dash-radius:  1rem;
}

.dash-body{ background: var(--dash-bg); color: var(--dash-text); min-height: 100vh; }
.auth-body{ background: var(--dash-bg); color: var(--dash-text); min-height: 100vh; }

/* ---------- عناصر النماذج المشتركة ---------- */
.dash-field{ display: flex; flex-direction: column; gap: .4rem; }
.dash-label{ font-size: .8rem; font-weight: 700; color: #334155; }
.dash-optional{ font-weight: 500; color: #94a3b8; }
.dash-hint{ font-size: .72rem; color: #94a3b8; }
.dash-input{
    width: 100%; background: #fff; border: 1.5px solid var(--dash-border); border-radius: .8rem;
    padding: .7rem .9rem; font-size: .9rem; color: var(--dash-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dash-input:hover{ border-color: #cbd5e1; }
.dash-input:focus{ outline: none; border-color: var(--c-plum); box-shadow: 0 0 0 4px rgba(95, 15, 64, .1); }
.dash-input--sm{ padding: .45rem .6rem; font-size: .85rem; border-radius: .6rem; width: 5.5rem; }
.dash-grid-2{ display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 480px){ .dash-grid-2{ grid-template-columns: 1fr 1fr; } }

.dash-password{ position: relative; }
.dash-password .dash-input{ padding-inline-end: 4.5rem; }
.dash-password-toggle{
    position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: .5rem;
    font-size: .72rem; font-weight: 700; color: var(--c-plum); background: #f8f1f5;
    border-radius: .5rem; padding: .3rem .6rem; cursor: pointer;
}
/* حقل الطُعم (anti-bot): مخفي عن الإنسان وظاهر للروبوت. نخفي الحقل نفسه لا
   الغلاف فقط — clip المهجورة كانت تترك للحقل صندوقاً بعرضه الكامل داخل
   الغلاف، وclip-path يقصّه فعلياً في كل المتصفحات الحديثة. */
.dash-hp{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.dash-hp input{ width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }

/* ---------- الأزرار ---------- */
.dash-btn{
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border-radius: .8rem; padding: .75rem 1.25rem; font-size: .9rem; font-weight: 800;
    cursor: pointer; transition: opacity .15s ease, background .15s ease, border-color .15s ease, transform .1s ease;
    white-space: nowrap;
}
.dash-btn:active{ transform: scale(.98); }
.dash-btn--primary{ background: var(--c-plum); color: #fff; box-shadow: 0 8px 20px -10px rgba(95, 15, 64, .6); }
.dash-btn--primary:hover{ opacity: .92; }
.dash-btn--ghost{ background: #fff; color: #334155; border: 1.5px solid var(--dash-border); }
.dash-btn--ghost:hover{ border-color: var(--c-plum); color: var(--c-plum); }
.dash-btn--sm{ padding: .45rem .85rem; font-size: .8rem; border-radius: .65rem; }
.dash-btn--block{ width: 100%; }
.dash-btn.is-loading{ opacity: .6; pointer-events: none; }
.dash-link-btn{ font-size: .78rem; font-weight: 700; color: var(--c-plum); cursor: pointer; }
.dash-link-btn:hover{ text-decoration: underline; }

/* ---------- التنبيهات ---------- */
.dash-alert{ border-radius: .8rem; padding: .75rem 1rem; font-size: .85rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.6; }
.dash-alert--success{ background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.dash-alert--error  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.dash-alert--warn   { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }

/* ---------- صفحات الدخول والتسجيل ---------- */
.auth-shell{ min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px){ .auth-shell{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

.auth-brand{
    display: none; flex-direction: column; justify-content: space-between; padding: 2.5rem 3rem;
    color: #fff; position: relative; overflow: hidden;
    background: radial-gradient(120% 90% at 100% 0%, #8a1c5e 0%, var(--c-plum) 45%, #3d0829 100%);
}
.auth-brand::after{
    content: ""; position: absolute; width: 26rem; height: 26rem; border-radius: 9999px;
    bottom: -9rem; inset-inline-start: -8rem; background: rgba(251, 139, 36, .18); filter: blur(10px);
}
@media (min-width: 1024px){ .auth-brand{ display: flex; } }
.auth-logo{ display: inline-flex; align-items: center; line-height: 0; position: relative; z-index: 1; }
.auth-logo img{ height: 3rem; width: auto; display: block; }
.auth-brand-body{ position: relative; z-index: 1; max-width: 26rem; }
.auth-brand-title{ font-size: 2.1rem; font-weight: 900; line-height: 1.3; }
.auth-brand-text{ margin-top: .9rem; font-size: .95rem; line-height: 1.9; color: rgba(255, 255, 255, .78); }
.auth-features{ margin-top: 1.75rem; display: flex; flex-direction: column; gap: .8rem; }
.auth-features li{ display: flex; align-items: center; gap: .75rem; font-size: .9rem; font-weight: 700; }
.auth-feature-ico{
    width: 2.2rem; height: 2.2rem; border-radius: .7rem; background: rgba(255, 255, 255, .12);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.auth-brand-foot{ font-size: .75rem; color: rgba(255, 255, 255, .5); position: relative; z-index: 1; }

.auth-panel{ display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card{
    width: 100%; max-width: 27rem; background: var(--dash-surface); border: 1px solid var(--dash-border);
    border-radius: 1.5rem; padding: 2rem 1.5rem; box-shadow: 0 30px 60px -35px rgba(15, 23, 42, .35);
}
@media (min-width: 480px){ .auth-card{ padding: 2.5rem 2.25rem; } }
.auth-title{ font-size: 1.5rem; font-weight: 900; }
.auth-subtitle{ margin-top: .35rem; margin-bottom: 1.5rem; font-size: .9rem; color: var(--dash-muted); }
.auth-form{ display: flex; flex-direction: column; gap: 1.1rem; }
.auth-form .dash-btn--block{ margin-top: .4rem; padding-block: .85rem; }
.auth-switch{ margin-top: 1.5rem; text-align: center; font-size: .85rem; color: var(--dash-muted); }
.auth-switch a{ color: var(--c-plum); font-weight: 800; }
.auth-switch a:hover{ text-decoration: underline; }

/* ---------- الهيكل العام للوحة ---------- */
.dash-topbar{
    position: sticky; top: 0; z-index: var(--z-header); height: 4rem; padding: 0 1rem;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--dash-border);
}
@media (min-width: 768px){ .dash-topbar{ padding: 0 1.75rem; } }
.dash-logo{ display: inline-flex; align-items: center; line-height: 0; flex: none; }
.dash-logo img{ height: 2.1rem; width: auto; display: block; }
@media (max-width: 640px){ .dash-logo img{ height: 1.75rem; } }
.dash-topbar-actions{ display: flex; align-items: center; gap: .75rem; }

.dash-bell{
    position: relative; width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center; color: #475569;
    border: 1.5px solid var(--dash-border); background: #fff; transition: border-color .15s ease, color .15s ease;
}
.dash-bell:hover{ border-color: var(--c-plum); color: var(--c-plum); }
.dash-bell-count{
    position: absolute; top: -.3rem; inset-inline-end: -.3rem; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem;
    border-radius: 9999px; background: #ef4444; color: #fff; font-size: .65rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff;
}
.dash-user{ display: flex; align-items: center; gap: .5rem; }
.dash-avatar{
    width: 2.25rem; height: 2.25rem; border-radius: .7rem; background: #f8f1f5; color: var(--c-plum);
    font-weight: 900; display: inline-flex; align-items: center; justify-content: center;
}
.dash-user-name{ display: none; font-size: .85rem; font-weight: 800; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px){ .dash-user-name{ display: inline; } }

.dash-layout{ display: flex; flex-direction: column; max-width: 90rem; margin: 0 auto; }
@media (min-width: 1024px){ .dash-layout{ flex-direction: row; } }

.dash-sidebar{
    display: flex; gap: .4rem; overflow-x: auto; padding: .75rem 1rem;
    border-bottom: 1px solid var(--dash-border); background: #fff; scrollbar-width: none;
}
.dash-sidebar::-webkit-scrollbar{ display: none; }
@media (min-width: 1024px){
    .dash-sidebar{
        flex-direction: column; width: 15rem; flex-shrink: 0; padding: 1.5rem 1rem; border-bottom: 0; background: transparent;
        position: sticky; top: 4rem; height: calc(100vh - 4rem);
    }
}
.dash-nav-link{
    display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; border-radius: .75rem;
    font-size: .88rem; font-weight: 700; color: #475569; white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.dash-nav-link:hover{ background: #fff; color: var(--dash-text); }
.dash-nav-link.is-active{ background: var(--c-plum); color: #fff; box-shadow: 0 8px 20px -12px rgba(95, 15, 64, .7); }
.dash-nav-link.is-disabled{ color: #94a3b8; cursor: default; }
.dash-nav-link.is-disabled:hover{ background: transparent; color: #94a3b8; }
.dash-nav-ico{ font-size: 1rem; }
.dash-soon{
    margin-inline-start: auto; font-size: .62rem; font-weight: 800; color: #9a3412;
    background: #fff7ed; border-radius: 9999px; padding: .1rem .45rem;
}

.dash-main{ flex: 1; min-width: 0; padding: 1.5rem 1rem 3rem; }
@media (min-width: 768px){ .dash-main{ padding: 2rem 1.75rem 3rem; } }

.dash-page-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.dash-page-title{ font-size: 1.5rem; font-weight: 900; }
.dash-page-sub{ font-size: .88rem; color: var(--dash-muted); margin-top: .25rem; }

/* ---------- الإحصائيات ---------- */
.dash-stats{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1.5rem; }
@media (min-width: 900px){ .dash-stats{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.dash-stat{
    background: var(--dash-surface); border: 1px solid var(--dash-border); border-radius: var(--dash-radius);
    padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; position: relative; overflow: hidden;
}
.dash-stat::before{ content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--c-plum); }
.dash-stat--low::before{ background: var(--c-orange, #FB8B24); }
.dash-stat--out::before{ background: #0f172a; }
.dash-stat-label{ font-size: .78rem; font-weight: 700; color: var(--dash-muted); }
.dash-stat-value{ font-size: 1.75rem; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dash-stat-foot{ font-size: .72rem; font-weight: 600; color: #94a3b8; }

/* ---------- البطاقات ---------- */
.dash-columns{ display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 1200px){ .dash-columns{ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.dash-card{ background: var(--dash-surface); border: 1px solid var(--dash-border); border-radius: 1.25rem; padding: 1.25rem; scroll-margin-top: 5rem; }
@media (min-width: 768px){ .dash-card{ padding: 1.5rem; } }
.dash-card-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.dash-card-title{ font-size: 1.05rem; font-weight: 900; display: flex; align-items: center; gap: .5rem; }
.dash-card-sub{ font-size: .8rem; color: var(--dash-muted); margin-top: .3rem; line-height: 1.7; max-width: 40rem; }
.dash-count{
    font-size: .7rem; font-weight: 800; background: #ef4444; color: #fff; border-radius: 9999px;
    min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; display: inline-flex; align-items: center; justify-content: center;
}

.dash-empty{ text-align: center; padding: 2.5rem 1rem; border: 1.5px dashed var(--dash-border); border-radius: 1rem; }
.dash-empty--sm{ padding: 1.75rem 1rem; }
.dash-empty-ico{ font-size: 2rem; margin-bottom: .4rem; }
.dash-empty-title{ font-weight: 800; }
.dash-empty-text{ font-size: .82rem; color: var(--dash-muted); margin-top: .2rem; }

/* ---------- كميات الأطباق ---------- */
.stock-list{ display: flex; flex-direction: column; }
.stock-row{
    display: grid; grid-template-columns: 1fr; gap: .85rem; padding: 1rem 0; border-bottom: 1px solid #f1f5f9;
}
.stock-row:first-child{ padding-top: 0; }
.stock-row:last-child{ border-bottom: 0; padding-bottom: 0; }
@media (min-width: 720px){
    /* السطر الأول: الطبق + التقدّم، السطر الثاني: أدوات التعديل */
    .stock-row{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 1.5rem; row-gap: .75rem; }
    .stock-actions{ grid-column: 1 / -1; justify-content: flex-end; }
}
.stock-dish{ display: flex; align-items: center; gap: .75rem; min-width: 0; }
.stock-thumb{ width: 3rem; height: 3rem; border-radius: .75rem; object-fit: cover; flex-shrink: 0; background: #f1f5f9; }
.stock-thumb--empty{ display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.stock-dish-info{ display: flex; flex-direction: column; min-width: 0; }
.stock-dish-name{ font-size: .92rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-dish-price{ font-size: .78rem; font-weight: 700; color: var(--c-plum); }

.stock-pill{ margin-inline-start: auto; flex-shrink: 0; font-size: .7rem; font-weight: 800; border-radius: 9999px; padding: .25rem .65rem; white-space: nowrap; }
.stock-pill--ok { background: #ecfdf5; color: #047857; }
.stock-pill--low{ background: #fff7ed; color: #c2410c; }
.stock-pill--out{ background: #0f172a; color: #fff; }

.stock-progress{ display: flex; flex-direction: column; gap: .35rem; }
.stock-bar{ height: .5rem; border-radius: 9999px; background: #f1f5f9; overflow: hidden; }
.stock-bar-fill{ display: block; height: 100%; width: 0; border-radius: inherit; transition: width .6s ease; }
.stock-bar-fill--ok { background: #10b981; }
.stock-bar-fill--low{ background: var(--c-orange, #FB8B24); }
.stock-bar-fill--out{ background: #0f172a; }
.stock-progress-text{ font-size: .75rem; font-weight: 600; color: var(--dash-muted); font-variant-numeric: tabular-nums; }

.stock-actions{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.stock-form{ display: flex; align-items: flex-end; gap: .5rem; }
.stock-input-wrap{ display: flex; flex-direction: column; gap: .2rem; }
.stock-input-wrap span{ font-size: .68rem; font-weight: 700; color: #94a3b8; }

/* ---------- الإشعارات ---------- */
.notif-list{ display: flex; flex-direction: column; gap: .5rem; max-height: 32rem; overflow-y: auto; }
.notif{ display: flex; gap: .7rem; padding: .8rem; border-radius: .9rem; border: 1px solid transparent; }
.notif.is-unread{ background: #fffaf5; border-color: #fde6cf; }
.notif--out.is-unread{ background: #f8fafc; border-color: #e2e8f0; }
.notif-ico{ font-size: 1.05rem; line-height: 1.5; }
.notif-text{ font-size: .82rem; font-weight: 600; line-height: 1.7; color: #334155; }
.notif.is-unread .notif-text{ font-weight: 800; color: var(--dash-text); }
.notif-time{ display: block; font-size: .7rem; color: #94a3b8; margin-top: .15rem; }

/* ---------- dashboard — إضافة / إنقاص أطباق من المتاح ---------- */
.stock-adjust{ display: flex; flex-direction: column; gap: .2rem; margin-inline-end: auto; }
.stock-adjust-label{ font-size: .68rem; font-weight: 700; color: #94a3b8; }
.stock-stepper{
    display: inline-flex; align-items: stretch; border: 1.5px solid var(--dash-border);
    border-radius: .65rem; overflow: hidden; background: #fff; height: 2.25rem;
}
.stock-stepper:focus-within{ border-color: var(--c-plum); box-shadow: 0 0 0 4px rgba(95, 15, 64, .1); }
.stock-step{
    width: 2.25rem; font-size: 1.1rem; font-weight: 900; color: #475569; background: #f8fafc;
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.stock-step:hover{ background: #fef2f2; color: #b91c1c; }
.stock-step--add:hover{ background: #ecfdf5; color: #047857; }
.stock-step:disabled, .stock-step:disabled:hover{ color: #cbd5e1; background: #f8fafc; cursor: not-allowed; }
.stock-step-input{
    width: 3.75rem; text-align: center; font-size: .88rem; font-weight: 800; color: var(--dash-text);
    border-inline: 1.5px solid var(--dash-border); -moz-appearance: textfield;
}
.stock-step-input:focus{ outline: none; }
.stock-step-input::-webkit-outer-spin-button,
.stock-step-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* ======================================================================
   عام: عناصر مخفية بالخاصية hidden (تتغلب على display في الكلاسات)
   ====================================================================== */
.dish-card[hidden], .rest-section[hidden], .b-section[hidden], .b-dish[hidden],
.b-new-section[hidden], .toast[hidden], .addon-error[hidden], .b-form-error[hidden]{ display: none !important; }

/* ======================================================================
   includes/card-item.php — سطر طبق (تخطيط القائمة List)
   ====================================================================== */
.dish-row{
    display: flex; gap: 1rem; align-items: stretch; justify-content: space-between;
    background: #fff; border: 1px solid #f1f5f9; border-radius: 1rem; padding: .9rem;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.dish-row:hover{ border-color: #e2e8f0; box-shadow: 0 12px 30px -20px rgba(15, 23, 42, .35); }
.dish-row-body{ flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: .3rem; }
.dish-row-name{ font-size: .98rem; font-weight: 800; color: #0f172a; }
.dish-row-desc{
    font-size: .8rem; color: #64748b; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dish-row-meta{ display: flex; align-items: center; gap: .6rem; margin-top: auto; padding-top: .25rem; font-size: 1rem; }
/* الصورة في جهة البداية: اليمين في العربية واليسار في الإنجليزية.
   order: -1 يقدّمها بصرياً مع إبقاء الاسم أولاً في ترتيب القراءة للقارئ
   الصوتي، وflex يعكس الجهة وحده مع اتجاه المستند بلا قاعدة لكل لغة. */
.dish-row-side{ order: -1; position: relative; flex-shrink: 0; width: 6.5rem; display: flex; align-items: flex-end; justify-content: center; }
/* صورة سطر القائمة: تملأ صندوقها كاملاً (cover) كبطاقة الشبكة — كانت contain
   فتظهر الخلفية حول كل صورة لا تطابق نسبة الصندوق. */
.dish-row-img{ width: 6.5rem; height: 6.5rem; border-radius: .85rem; object-fit: cover; object-position: center; background: #f8fafc; }
/* الزر في منتصف أسفل الصورة: الإزاحة تعكس جهتها مع اتجاه الصفحة */
.dish-row .dish-row-add{ position: absolute; bottom: -.4rem; inset-inline-start: 50%; transform: translateX(50%); box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .35); }
[dir="ltr"] .dish-row .dish-row-add{ transform: translateX(-50%); }
[dir="ltr"] .dish-row .dish-row-add{ transform: translateX(-50%); }
.dish-row-side:not(:has(img)){ width: auto; align-items: center; }
.dish-row-side:not(:has(img)) .dish-row-add{ position: static; transform: none; box-shadow: none; }
.dish-row.is-soldout .dish-row-img{ filter: grayscale(1); opacity: .7; }
.dish-addon-hint{ font-size: .68rem; font-weight: 700; color: #7c3aed; background: #f5f3ff; border-radius: 9999px; padding: .15rem .55rem; }

/* ======================================================================
   includes/cart.php — خيارات الطبق داخل السلة + نافذة الإضافات
   ====================================================================== */
.cart-item-options{ font-size: .72rem; color: #64748b; margin-top: .1rem; line-height: 1.5; }

.addon-overlay{
    position: fixed; inset: 0; z-index: var(--z-modal); margin: 0; padding: 1rem;
    background: rgba(15, 23, 42, .6); backdrop-filter: blur(3px);
    display: none; align-items: flex-end; justify-content: center;
}
.addon-overlay.open{ display: flex; }
@media (min-width: 640px){ .addon-overlay{ align-items: center; } }
.addon-box{
    position: relative;
    width: 100%; max-width: 28rem; max-height: 88vh; background: #fff; border-radius: 1.5rem;
    display: flex; flex-direction: column; overflow: hidden; text-align: start;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35); animation: addon-in .2s ease;
}
@keyframes addon-in{ from{ transform: translateY(20px); opacity: 0; } to{ transform: none; opacity: 1; } }
/* زر الإغلاق يطفو فوق الصورة بخلفية زجاجية بدل شريط رأس يأكل مساحة */
.addon-x{
    position: absolute; top: .7rem; inset-inline-end: .7rem; z-index: var(--z-base);
    width: 2.2rem; height: 2.2rem; border-radius: 9999px; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; font-weight: 700; line-height: 1;
    background: rgba(255, 255, 255, .78); color: #0f172a;
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    box-shadow: 0 2px 10px rgba(15, 23, 42, .18);
    transition: background .15s ease, transform .15s ease;
}
.addon-x:hover{ background: #fff; transform: scale(1.06); }

/* الاسم والسعر في سطر واحد تحت الصورة مباشرة */
.addon-headline{ display: flex; align-items: flex-start; justify-content: space-between; gap: .9rem; }
.addon-title{ font-size: 1.15rem; font-weight: 900; color: #0f172a; line-height: 1.35; }
/* .addon-price أُزيلت: السعر في زر الإضافة وحده فلا يقرأ الزبون رقمين */
.addon-cal{
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .74rem; font-weight: 600; color: #64748b;
    background: #f8fafc; border-radius: 9999px; padding: .2rem .6rem;
}
.addon-body{ padding: 1rem 1.25rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.addon-group{ border: 1.5px solid #f1f5f9; border-radius: 1rem; padding: .8rem .9rem; transition: border-color .15s ease; }
.addon-group.is-missing{ border-color: #fca5a5; background: #fef2f2; }
.addon-group-title{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; font-size: .9rem; font-weight: 800; color: #0f172a; margin-bottom: .4rem; }
.addon-badge{ font-size: .65rem; font-weight: 800; color: #64748b; background: #f1f5f9; border-radius: 9999px; padding: .15rem .55rem; }
.addon-badge--req{ color: #9a3412; background: #fff7ed; }
.addon-option{ display: flex; align-items: center; gap: .6rem; padding: .55rem .25rem; border-top: 1px solid #f8fafc; cursor: pointer; font-size: .88rem; }
.addon-option:first-of-type{ border-top: 0; }
.addon-option input{ width: 1.1rem; height: 1.1rem; accent-color: var(--c-plum); flex-shrink: 0; }
.addon-option-name{ flex: 1; font-weight: 600; color: #334155; }
.addon-option-price{ font-size: .78rem; font-weight: 800; color: var(--c-plum); }
.addon-foot{
    flex: 0 0 auto; padding: .85rem 1.15rem calc(.95rem + env(safe-area-inset-bottom));
    border-top: 1px solid #f1f5f9; background: #fff;
    box-shadow: 0 -8px 20px -14px rgba(15, 23, 42, .5);
}
.addon-error{ font-size: .78rem; font-weight: 700; color: #b91c1c; margin-bottom: .6rem; }
.addon-submit{
    width: 100%; padding: .85rem; border-radius: .9rem; background: var(--c-plum); color: #fff;
    font-size: .95rem; font-weight: 800; cursor: pointer; transition: opacity .15s ease;
}
.addon-submit:hover{ opacity: .92; }

/* ======================================================================
   restaurant.php — صفحة المطعم العامة
   ====================================================================== */
.rest-body{ background: #f8fafc; color: #0f172a; min-height: 100vh; display: flex; flex-direction: column; }
.rest-container{ width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px){ .rest-container{ padding: 0 1.5rem; } }

.rest-topbar{ background: #fff; border-bottom: 1px solid #f1f5f9; }
.rest-topbar-inner{ height: 3.5rem; display: flex; align-items: center; justify-content: space-between; }
.rest-brand{ font-size: 1.25rem; font-weight: 900; color: var(--c-plum); }
.rest-back{ font-size: .8rem; font-weight: 700; color: #64748b; }
.rest-back:hover{ color: var(--c-plum); }

.rest-hero{ background: linear-gradient(160deg, #fff 0%, #fdf2f8 100%); border-bottom: 1px solid #f1f5f9; padding: 1.75rem 0 1.25rem; }
/* الترويسة وأجزاؤها: النظام الكامل في قسم «ترويسة صفحة المطعم» أسفل الملف.
   ما يبقى هنا هو الأساسيات التي لا تختلف بين وضعَي العرض. */
.rest-hero-inner{ display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.rest-logo{
    flex-shrink: 0; font-weight: 900; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 120% at 100% 0%, #8a1c5e, var(--c-plum) 60%);
}
.rest-name{ font-weight: 900; line-height: 1.22; }
.rest-meta{ font-size: .85rem; color: #64748b; margin-top: .2rem; }
.rest-search{
    display: flex; align-items: center; gap: .6rem; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 1rem;
    padding: .7rem 1rem; color: #94a3b8; max-width: 36rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.rest-search:focus-within{ border-color: var(--c-plum); box-shadow: 0 0 0 4px rgba(95, 15, 64, .08); }
.rest-search input{ flex: 1; background: transparent; font-size: .92rem; color: #0f172a; }
.rest-search input:focus{ outline: none; }

.rest-tabs{ position: sticky; top: 0; z-index: var(--z-header); background: rgba(248, 250, 252, .95); backdrop-filter: blur(8px); border-bottom: 1px solid #eef2f6; }
.rest-tabs-inner{ display: flex; gap: .5rem; overflow-x: auto; padding-top: .75rem; padding-bottom: .75rem; scrollbar-width: none; }
.rest-tabs-inner::-webkit-scrollbar{ display: none; }
.rest-tab{
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 9999px;
    font-size: .85rem; font-weight: 700; color: #475569; background: #fff; border: 1px solid #e2e8f0; transition: all .15s ease;
}
.rest-tab:hover{ border-color: #cbd5e1; }
.rest-tab.is-active{ background: var(--c-plum); border-color: var(--c-plum); color: #fff; }
.rest-tab-count{ font-size: .68rem; font-weight: 800; opacity: .65; }
.rest-tabs.is-searching .rest-tab.is-active{ background: #fff; color: #475569; border-color: #e2e8f0; }

.rest-main{ flex: 1; padding-top: 1.5rem; padding-bottom: 6rem; }
.rest-section{ scroll-margin-top: 4.5rem; margin-bottom: 2.25rem; }
.rest-section-title{ font-size: 1.2rem; font-weight: 900; margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.rest-section-title::after{ content: ""; flex: 1; height: 1px; background: #e2e8f0; }
.rest-grid{ display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.1rem; }
@media (min-width: 560px){ .rest-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px){ .rest-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px){ .rest-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rest-grid--compact{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (min-width: 960px){ .rest-grid--compact{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rest-grid--compact .dish-card .p-4{ padding: .75rem; }
.rest-list{ display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 900px){ .rest-list{ grid-template-columns: 1fr 1fr; } }
.rest-empty{ text-align: center; padding: 3rem 1rem; }
.rest-empty[hidden]{ display: none; }
.rest-404{ flex: 1; text-align: center; padding-top: 4rem; padding-bottom: 4rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.rest-404-ico{ font-size: 3rem; }
.rest-404-title{ font-size: 1.4rem; font-weight: 900; }
.rest-404-text{ color: #64748b; margin-bottom: 1rem; }
.rest-footer{ border-top: 1px solid #eef2f6; background: #fff; padding: 1rem 0; font-size: .78rem; color: #94a3b8; text-align: center; }
.rest-footer a{ color: var(--c-plum); font-weight: 800; }

/* ======================================================================
   dashboard — إضافات عامة
   ====================================================================== */
.dash-grid-3{ display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px){ .dash-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dash-input--inline{ padding: .35rem .6rem; font-size: 1rem; font-weight: 800; max-width: 18rem; }
textarea.dash-input{ resize: vertical; min-height: 4rem; }
select.dash-input{ cursor: pointer; }
.dash-btn--danger{ color: #b91c1c; }
.dash-btn--danger:hover{ border-color: #fca5a5; color: #991b1b; background: #fef2f2; }
.dash-nav-badge{
    margin-inline-start: auto; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 9999px;
    background: #ef4444; color: #fff; font-size: .7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.dash-nav-link.is-active .dash-nav-badge{ background: #fff; color: var(--c-plum); }
.dash-nav-link--ext{ color: #64748b; font-weight: 600; }
@media (min-width: 1024px){ .dash-nav-link--ext:first-of-type{ margin-top: .75rem; } .dash-sidebar .dash-nav-link--ext{ font-size: .82rem; } }
.dash-empty-cta{ margin-top: 1rem; }

/* ---------- نوافذ لوحة التحكم ---------- */
.b-modal{
    position: fixed; inset: 0; z-index: var(--z-modal); padding: 1rem; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px);
    display: none; align-items: flex-start; justify-content: center; overflow-y: auto;
}
.b-modal.open{ display: flex; }
body.b-modal-open{ overflow: hidden; }
.b-modal-box{
    width: 100%; max-width: 38rem; margin: 2rem 0; background: #fff; border-radius: 1.4rem; display: flex; flex-direction: column;
    box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .45); animation: addon-in .2s ease;
}
.b-modal-box--wide{ max-width: 46rem; }
.b-modal-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--dash-border); }
.b-modal-title{ font-size: 1.1rem; font-weight: 900; }
.b-modal-sub{ font-size: .8rem; color: var(--dash-muted); margin-top: .15rem; }
.b-modal-x{ width: 2.1rem; height: 2.1rem; border-radius: 9999px; background: #f1f5f9; color: #475569; font-weight: 800; cursor: pointer; flex-shrink: 0; }
.b-modal-x:hover{ background: #e2e8f0; }
.b-modal-body{ padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.b-modal-foot{ display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.4rem; border-top: 1px solid var(--dash-border); background: #f8fafc; border-radius: 0 0 1.4rem 1.4rem; }
.b-form-error{ font-size: .82rem; font-weight: 700; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: .7rem; padding: .6rem .8rem; }

.b-image{ display: flex; gap: .9rem; align-items: flex-start; }
.b-image img{ width: 5.5rem; height: 5.5rem; border-radius: .9rem; object-fit: cover; flex-shrink: 0; background: #f1f5f9; }
.b-image img[hidden]{ display: none; }
.b-image-inputs{ flex: 1; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.b-file{ font-size: .8rem; color: #64748b; }
.b-file::file-selector-button{
    margin-inline-end: .6rem; border: 0; border-radius: .6rem; padding: .45rem .9rem; font-weight: 800; font-size: .78rem;
    background: #f8f1f5; color: var(--c-plum); cursor: pointer;
}
.b-check{ display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: #475569; cursor: pointer; }
.b-check[hidden]{ display: none; }
.b-check input{ accent-color: var(--c-plum); }

/* مفتاح تشغيل/إيقاف */
.b-switch{ display: inline-flex; align-items: center; gap: .6rem; font-size: .85rem; font-weight: 700; color: #334155; cursor: pointer; user-select: none; }
.b-switch input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.b-switch-ui{ position: relative; width: 2.6rem; height: 1.5rem; border-radius: 9999px; background: #cbd5e1; transition: background .2s ease; flex-shrink: 0; }
.b-switch-ui::after{ content: ""; position: absolute; top: .2rem; inset-inline-start: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: inset-inline-start .2s ease; }
.b-switch input:checked + .b-switch-ui{ background: #10b981; }
.b-switch input:checked + .b-switch-ui::after{ inset-inline-start: 1.3rem; }
.b-switch input:focus-visible + .b-switch-ui{ outline: 2px solid var(--c-plum); outline-offset: 2px; }
.b-switch--sm .b-switch-ui{ width: 2.2rem; height: 1.3rem; }
.b-switch--sm .b-switch-ui::after{ width: .9rem; height: .9rem; }
.b-switch--sm input:checked + .b-switch-ui::after{ inset-inline-start: 1.1rem; }

/* ---------- بناء المنيو ---------- */
.builder-head-actions{ display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.builder-toolbar{ display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.builder-search{
    flex: 1; min-width: 14rem; max-width: 34rem; display: flex; align-items: center; gap: .6rem; background: #fff;
    border: 1.5px solid var(--dash-border); border-radius: .9rem; padding: .6rem .9rem; color: #94a3b8;
}
.builder-search:focus-within{ border-color: var(--c-plum); box-shadow: 0 0 0 4px rgba(95, 15, 64, .08); }
.builder-search input{ flex: 1; background: transparent; font-size: .9rem; color: var(--dash-text); }
.builder-search input:focus{ outline: none; }
.builder-count{ font-size: .8rem; font-weight: 700; color: var(--dash-muted); }

.builder{ display: flex; flex-direction: column; gap: 1rem; }
.builder-empty{ background: #fff; }
.b-section{ background: #fff; border: 1px solid var(--dash-border); border-radius: 1.2rem; overflow: hidden; transition: box-shadow .15s ease, opacity .15s ease; }
.b-section.is-hidden{ background: #fbfbfd; }
.b-section.is-hidden .b-section-title{ color: #94a3b8; }
.b-section.is-loose{ border-style: dashed; }
.b-section.is-dragging{ opacity: .45; }
.builder.is-dragging-section .b-section:not(.is-dragging){ box-shadow: 0 0 0 2px #f1f5f9; }
.b-section-head{ display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; background: #fafbfd; border-bottom: 1px solid var(--dash-border); flex-wrap: wrap; }
.b-section-title-wrap{ display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 10rem; flex-wrap: wrap; }
.b-section-title{ font-size: 1rem; font-weight: 900; color: var(--dash-text); cursor: text; border-radius: .4rem; padding: .1rem .3rem; }
.b-section-title:hover{ background: #f1f5f9; }
.b-section-title.is-static{ cursor: default; color: #64748b; }
.b-section-title.is-static:hover{ background: none; }
.b-count{ font-size: .72rem; font-weight: 700; color: #94a3b8; }
.b-section-actions{ display: flex; align-items: center; gap: .35rem; }

.b-handle{ cursor: grab; color: #cbd5e1; font-size: 1.1rem; line-height: 1; padding: .2rem; user-select: none; flex-shrink: 0; }
.b-handle:hover{ color: #64748b; }
.b-handle:active{ cursor: grabbing; }

.b-icon-btn{
    width: 2rem; height: 2rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; color: #475569; background: #fff; border: 1px solid var(--dash-border); cursor: pointer; flex-shrink: 0;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.b-icon-btn:hover{ border-color: #cbd5e1; background: #f8fafc; }
.b-icon-btn--danger:hover{ border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.b-icon-btn:disabled{ opacity: .35; cursor: default; }
.b-text-btn{ font-size: .78rem; font-weight: 800; color: var(--c-plum); padding: .35rem .55rem; border-radius: .55rem; cursor: pointer; white-space: nowrap; }
.b-text-btn:hover{ background: #f8f1f5; }

/* أزرار ↑↓ للجوال والأجهزة اللمسية فقط (السحب متاح للماوس) */
.b-move{ display: none; }
@media (pointer: coarse), (max-width: 767px){ .b-move{ display: inline-flex; } .b-handle{ display: none; } }

.b-dishes{ list-style: none; margin: 0; padding: .35rem 0; min-height: 3rem; }
.b-dish{
    display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid #f5f6f9; background: #fff;
    flex-wrap: wrap; transition: background .15s ease, opacity .15s ease;
}
.b-dish:hover{ background: #fcfcfe; }
.b-dish.is-off .b-dish-name, .b-dish.is-off .b-thumb{ opacity: .5; }
.b-dish.is-dragging{ opacity: .4; background: #f8f1f5; }
.builder.is-dragging-dish .b-dishes{ background: #fcfaff; outline: 2px dashed #eadcf0; outline-offset: -6px; border-radius: .8rem; }
.b-drop-hint{ list-style: none; padding: .9rem 1rem; text-align: center; font-size: .8rem; color: #94a3b8; }
.b-drop-hint:empty{ padding: 0; }
.builder.is-searching .b-drop-hint{ display: none; }
.b-thumb{ width: 2.75rem; height: 2.75rem; border-radius: .7rem; object-fit: cover; background: #f1f5f9; flex-shrink: 0; }
.b-thumb--empty{ display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.b-dish-info{ flex: 1; min-width: 9rem; display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.b-dish-name{ font-size: .92rem; font-weight: 800; color: var(--dash-text); text-align: start; cursor: pointer; }
.b-dish-name:hover{ color: var(--c-plum); text-decoration: underline; }
.b-dish-meta{ display: flex; flex-wrap: wrap; gap: .3rem; }
.b-dish-meta:empty{ display: none; }
.b-badge{ font-size: .65rem; font-weight: 800; border-radius: 9999px; padding: .12rem .5rem; background: #ecfdf5; color: #047857; }
.b-badge--low{ background: #fff7ed; color: #c2410c; }
.b-badge--out{ background: #0f172a; color: #fff; }
.b-badge--muted{ background: #f1f5f9; color: #64748b; }
.b-badge--plum{ background: #f8f1f5; color: var(--c-plum); }

.b-price{ display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; color: #94a3b8; }
.b-price-input{
    width: 5.5rem; padding: .4rem .55rem; border: 1.5px solid var(--dash-border); border-radius: .6rem; font-size: .88rem; font-weight: 800;
    color: var(--dash-text); text-align: center; transition: border-color .15s ease, background .3s ease;
}
.b-price-input:focus{ outline: none; border-color: var(--c-plum); box-shadow: 0 0 0 3px rgba(95, 15, 64, .1); }
.b-price-input.is-saving{ background: #f8fafc; }
.b-price-input.is-saved{ border-color: #10b981; background: #ecfdf5; }
.b-dish-actions{ display: flex; align-items: center; gap: .2rem; }
@media (max-width: 767px){
    .b-dish{ padding: .8rem; }
    .b-dish-actions{ width: 100%; justify-content: flex-end; border-top: 1px dashed #f1f5f9; padding-top: .5rem; }
}

.b-new-section{ display: flex; gap: .5rem; flex-wrap: wrap; background: #fff; border: 1.5px dashed #d8c4d2; border-radius: 1.2rem; padding: 1rem; }
.b-new-section .dash-input{ flex: 1; min-width: 12rem; }

/* نافذة الإضافات في لوحة التحكم */
.addons-groups{ display: flex; flex-direction: column; gap: .9rem; }
.addons-empty{ text-align: center; font-size: .85rem; color: var(--dash-muted); padding: 1.25rem; border: 1.5px dashed var(--dash-border); border-radius: 1rem; }
.addon-group-card{ border: 1px solid var(--dash-border); border-radius: 1rem; padding: .9rem; background: #fafbfd; display: flex; flex-direction: column; gap: .6rem; }
.addon-group-head{ display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.addon-group-name{ flex: 1; min-width: 10rem; font-weight: 800; }
.addon-group-type{ width: auto; padding-block: .6rem; }
.addon-opts{ display: flex; flex-direction: column; gap: .45rem; }
.addon-opt{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.addon-opt-name{ flex: 1; min-width: 9rem; width: auto; }
.addon-opt-price{ display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; color: #94a3b8; }
.addon-opt-price .dash-input{ width: 5rem; text-align: center; }
.addons-add{ display: flex; gap: .5rem; flex-wrap: wrap; }

/* إشعار الحفظ السريع */
.toast{
    position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: var(--z-floating);
    padding: .7rem 1.1rem; border-radius: .9rem; font-size: .85rem; font-weight: 800; color: #fff;
    box-shadow: 0 15px 35px -12px rgba(15, 23, 42, .5); max-width: calc(100vw - 2rem); animation: addon-in .2s ease;
}
.toast--success{ background: #0f172a; }
.toast--error{ background: #b91c1c; }

/* ---------- شكل العرض ---------- */
.layout-page{ display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 1100px){ .layout-page{ grid-template-columns: minmax(0, 1fr) 24rem; } }
.layout-options{ display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px){ .layout-options{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .layout-link{ grid-column: 1 / -1; } }
.layout-card{
    background: #fff; border: 2px solid var(--dash-border); border-radius: 1.2rem; padding: 1rem;
    display: flex; flex-direction: column; gap: .75rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.layout-card:hover{ border-color: #d8c4d2; }
.layout-card.is-previewing{ border-color: var(--c-plum); box-shadow: 0 12px 30px -18px rgba(95, 15, 64, .6); }
.layout-card-link{ display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.layout-card-title{ font-size: .95rem; font-weight: 900; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.layout-current{ font-size: .65rem; font-weight: 800; background: #ecfdf5; color: #047857; border-radius: 9999px; padding: .12rem .5rem; }
.layout-card-desc{ font-size: .78rem; color: var(--dash-muted); line-height: 1.7; }
.layout-applied{ font-size: .78rem; font-weight: 800; color: #047857; text-align: center; padding: .45rem; }

.layout-mock{ height: 7.5rem; border-radius: .9rem; background: #f6f7fb; padding: .6rem; display: grid; gap: .4rem; overflow: hidden; }
.layout-mock--grid{ grid-template-columns: 1fr 1fr; }
.layout-mock--list{ grid-template-columns: 1fr; }
.layout-mock--category{ grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr; }
.lm-tabs{ grid-column: 1 / -1; display: flex; gap: .25rem; }
.lm-tabs i{ height: .5rem; width: 1.6rem; border-radius: 9999px; background: #e2e8f0; }
.lm-tabs i:first-child{ background: var(--c-plum); }
.lm-item{ background: #fff; border-radius: .5rem; display: flex; gap: .3rem; padding: .3rem; }
.lm-item i{ border-radius: .35rem; background: #e9d9e3; }
.lm-item b{ flex: 1; border-radius: .25rem; background: linear-gradient(#e2e8f0, #e2e8f0) top / 80% .3rem no-repeat, linear-gradient(#f1c79c, #f1c79c) bottom / 40% .3rem no-repeat; }
.layout-mock--grid .lm-item, .layout-mock--category .lm-item{ flex-direction: column; }
.layout-mock--grid .lm-item i, .layout-mock--category .lm-item i{ flex: 1; }
.layout-mock--grid .lm-item b, .layout-mock--category .lm-item b{ flex: 0 0 .9rem; }
.layout-mock--list .lm-item i{ width: 1.4rem; order: 2; }
.layout-mock--category .lm-item:nth-child(n+4){ display: none; }

.layout-link-row{ display: flex; gap: .5rem; margin: .4rem 0; }
.layout-link-row .dash-input{ flex: 1; font-size: .8rem; }

.layout-preview{ display: flex; flex-direction: column; align-items: center; gap: .6rem; }
@media (min-width: 1100px){ .layout-preview{ position: sticky; top: 5rem; } }
/* ---------- محاكي الآيفون ---------- */
.phone{
    position: relative; width: 100%; max-width: 21.5rem; height: 42rem; border-radius: 3rem; padding: .55rem;
    background: linear-gradient(160deg, #3f4657 0%, #11151f 45%, #2a2f3c 100%);   /* إطار معدني */
    box-shadow: 0 35px 60px -25px rgba(15, 23, 42, .65), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
/* أزرار الجانب */
.phone::before, .phone::after{
    content: ""; position: absolute; inset-inline-start: -2px; width: 2px; border-radius: 2px;
    background: linear-gradient(#4b5263, #2b303c);
}
.phone::before{ top: 7rem; height: 2rem; }
.phone::after{ top: 10rem; height: 3.5rem; }

.phone-screen, .phone iframe{
    width: 100%; height: 100%; border: 0; border-radius: 2.5rem; background: #fff; display: block;
    box-shadow: 0 0 0 2px #0b0e14;
}

/* الجزيرة الديناميكية + شريط الحالة */
.phone-notch{
    position: absolute; top: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 3;
    width: 5.2rem; height: 1.55rem; border-radius: 9999px; background: #0b0e14;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
}
.phone-notch::after{
    content: ""; position: absolute; top: 50%; inset-inline-end: .6rem; transform: translateY(-50%);
    width: .5rem; height: .5rem; border-radius: 9999px;
    background: radial-gradient(circle at 35% 35%, #2d3748, #0b0e14 70%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.phone-status{
    position: absolute; top: 1.15rem; inset-inline: 1.6rem; z-index: 2; display: flex; align-items: center;
    justify-content: space-between; font-size: .68rem; font-weight: 800; color: #0f172a; pointer-events: none;
}
.phone-status-icons{ display: inline-flex; align-items: flex-end; gap: .22rem; }
.phone-status-icons i{ display: block; width: .17rem; border-radius: 1px; background: currentColor; }
.phone-status-icons i:nth-child(1){ height: .25rem; }
.phone-status-icons i:nth-child(2){ height: .38rem; }
.phone-status-icons i:nth-child(3){ height: .5rem; }
.phone-status-icons i:nth-child(4){ height: .62rem; }
.phone-status-battery{
    width: 1.35rem; height: .68rem; border: 1.2px solid currentColor; border-radius: .22rem; padding: .08rem;
    display: inline-flex; align-items: center; position: relative; margin-inline-start: .15rem;
}
.phone-status-battery::after{ content: ""; position: absolute; inset-inline-end: -.18rem; width: .1rem; height: .28rem; border-radius: 0 1px 1px 0; background: currentColor; }
.phone-status-battery span{ display: block; width: 72%; height: 100%; border-radius: .1rem; background: currentColor; }
/* شريط اللمس السفلي */
.phone-bar{
    position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 3;
    width: 7rem; height: .28rem; border-radius: 9999px; background: #0f172a; opacity: .35;
}
.phone--dark-status .phone-status{ color: #fff; }
.layout-preview-caption{ font-size: .8rem; color: var(--dash-muted); }

/* ---------- الطلبات ---------- */
.order-tabs{ display: flex; gap: .45rem; overflow-x: auto; margin-bottom: 1.25rem; scrollbar-width: none; }
.order-tabs::-webkit-scrollbar{ display: none; }
.order-tab{
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 9999px;
    font-size: .82rem; font-weight: 700; color: #475569; background: #fff; border: 1px solid var(--dash-border);
}
.order-tab span{ font-size: .7rem; font-weight: 800; background: #f1f5f9; color: #64748b; border-radius: 9999px; padding: .05rem .45rem; }
.order-tab.is-active{ background: var(--c-plum); border-color: var(--c-plum); color: #fff; }
.order-tab.is-active span{ background: rgba(255, 255, 255, .2); color: #fff; }

.orders-grid{ display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px){ .orders-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px){ .orders-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.order-card{ --card-radius: 1.2rem; --card-border: var(--dash-border); display: flex; flex-direction: column; overflow: hidden; border-top: 4px solid #94a3b8; }
.order-card--new{ border-top-color: #ef4444; }
.order-card--prep{ border-top-color: var(--c-orange, #FB8B24); }
.order-card--done{ border-top-color: #10b981; }
.order-card--cancel{ border-top-color: #cbd5e1; opacity: .75; }
.order-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1.1rem .6rem; }
.order-id{ font-size: 1rem; font-weight: 900; }
.order-time{ font-size: .72rem; color: #94a3b8; }
.order-status{ font-size: .7rem; font-weight: 800; border-radius: 9999px; padding: .2rem .65rem; white-space: nowrap; }
.order-status--new{ background: #fef2f2; color: #b91c1c; }
.order-status--prep{ background: #fff7ed; color: #c2410c; }
.order-status--done{ background: #ecfdf5; color: #047857; }
.order-status--cancel{ background: #f1f5f9; color: #64748b; }
.order-items{ list-style: none; margin: 0; padding: 0 1.1rem; flex: 1; }
.order-items li{ display: flex; align-items: flex-start; gap: .6rem; padding: .55rem 0; border-top: 1px dashed #f1f5f9; }
.order-qty{ font-size: .85rem; font-weight: 900; color: var(--c-plum); min-width: 1.6rem; }
.order-item-info{ flex: 1; display: flex; flex-direction: column; min-width: 0; }
.order-item-name{ font-size: .88rem; font-weight: 700; }
.order-item-opts{ font-size: .72rem; color: #64748b; }
.order-item-price{ font-size: .8rem; font-weight: 700; color: #475569; white-space: nowrap; }
.order-foot{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .85rem 1.1rem; background: #fafbfd; border-top: 1px solid var(--dash-border); }
.order-total{ font-size: .82rem; color: var(--dash-muted); }
.order-total strong{ font-size: 1rem; color: var(--dash-text); }
.order-actions{ display: flex; gap: .4rem; flex-wrap: wrap; }

/* ======================================================================
   restaurant.php — هوية المطعم (غلاف، شعار، روابط تواصل)
   لون الهوية يأتي كمتغيّر --c-brand من قاعدة البيانات
   ====================================================================== */
/* ارتفاع الغلاف: كُبِّر ليستوعب تداخل الشعار معه. الدائرة نصفها فوق الغلاف،
   فغلافٌ قصير يجعل الشعار يغطّي ثلثه ويبتلع الصورة بدل أن يتداخل معها. */
.rest-cover{ width: 100%; height: 12.5rem; overflow: hidden; background: var(--c-brand-soft, #fdf2f8); }
@media (min-width: 560px){ .rest-cover{ height: 15rem; } }
@media (min-width: 768px){ .rest-cover{ height: 19rem; } }
@media (min-width: 1100px){ .rest-cover{ height: 22rem; } }
.rest-cover img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.rest-hero--with-cover{ background: #fff; padding-top: 0; }
.rest-logo{ overflow: hidden; background: radial-gradient(120% 120% at 100% 0%, var(--c-brand-soft, #8a1c5e), var(--c-brand, #5f0f40) 65%); }
.rest-logo--img{ background: #f1f5f9; }
.rest-logo img{ width: 100%; height: 100%; object-fit: cover; }
.rest-tagline{ font-size: .88rem; color: #475569; margin-top: .2rem; }

.rest-social{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.rest-social-chip{
    display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; border-radius: 9999px;
    font-size: .78rem; font-weight: 800; color: var(--c-brand, #5f0f40); background: #fff;
    border: 1.5px solid var(--c-brand-soft, #e2e8f0); transition: background .15s ease, color .15s ease;
}
.rest-social-chip::before{ content: "↗"; font-size: .7rem; opacity: .6; }
.rest-social-chip:hover{ background: var(--c-brand, #5f0f40); color: #fff; border-color: var(--c-brand, #5f0f40); }

/* ======================================================================
   dashboard/display-settings.php — شكل العرض والهوية
   ====================================================================== */
.ds-page{ display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 1100px){ .ds-page{ grid-template-columns: minmax(0, 1fr) 23rem; } }
.ds-form{ display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ds-form .dash-card-title{ margin-bottom: .2rem; }
.ds-form .dash-card-sub{ margin-bottom: 1rem; }
.ds-form .dash-field{ margin-bottom: .85rem; }
.ds-form .dash-field:last-child{ margin-bottom: 0; }

.ds-media{ display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px){ .ds-media{ grid-template-columns: 2fr 1fr; } }
.ds-drop{
    display: flex; flex-direction: column; gap: .5rem; padding: .85rem; border: 1.5px dashed var(--dash-border);
    border-radius: 1rem; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.ds-drop:hover{ border-color: var(--c-plum); background: #fdfbfc; }
.ds-drop-preview{
    position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: #f1f5f9; border-radius: .8rem; color: #94a3b8; font-size: .85rem; font-weight: 700;
}
.ds-drop-preview--wide{ height: 7rem; }
.ds-drop-preview--round{ height: 7rem; width: 7rem; border-radius: 9999px; margin: 0 auto; font-size: 1.6rem; }
.ds-drop-preview img{ width: 100%; height: 100%; object-fit: cover; }
.ds-drop-preview img[hidden], .ds-drop-empty[hidden]{ display: none; }
.ds-drop-label{ font-size: .82rem; font-weight: 800; color: #334155; }
.ds-remove-row{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; }
.ds-remove-row:empty{ display: none; }

.ds-color-row{ display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ds-color-input{
    width: 3rem; height: 2.6rem; padding: 0; border: 1.5px solid var(--dash-border); border-radius: .7rem;
    background: none; cursor: pointer; flex-shrink: 0;
}
.ds-color-input::-webkit-color-swatch-wrapper{ padding: .2rem; }
.ds-color-input::-webkit-color-swatch{ border: none; border-radius: .5rem; }
.ds-color-text{ width: 7.5rem; text-align: center; font-weight: 800; text-transform: lowercase; }
.ds-swatches{ display: flex; gap: .35rem; flex-wrap: wrap; }
.ds-swatch{
    width: 1.9rem; height: 1.9rem; border-radius: .6rem; background: var(--sw); cursor: pointer;
    border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--dash-border); transition: transform .12s ease;
}
.ds-swatch:hover{ transform: scale(1.1); }
.ds-tagline{ margin-top: 1rem; }
.ds-actions{ display: flex; gap: .6rem; flex-wrap: wrap; padding-top: .25rem; }

/* ---------- المعاينة الحية (محاكي آيفون) ---------- */
.ds-preview{ display: flex; flex-direction: column; align-items: center; gap: .7rem; }
@media (min-width: 1100px){ .ds-preview{ position: sticky; top: 5rem; } }
.ds-preview-head{ display: flex; align-items: center; gap: .6rem; }
.ds-live{ font-size: .75rem; font-weight: 800; color: #047857; background: #ecfdf5; border-radius: 9999px; padding: .2rem .7rem; }
.phone--preview{ height: 39rem; max-width: 20.5rem; }
.phone-screen{ padding-top: 2.6rem; }              /* مساحة شريط الحالة والجزيرة */
/* الإطار يُرسَم بعرض جوال حقيقي (٣٩٠px) ويُصغَّر بصرياً — الضبط في
   assets/js/dashboard.js. و overflow:hidden هنا يقصّ ما يفيض بعد التصغير،
   و position:relative تجعل الإطار المُحوَّل ينطلق من زاوية الصندوق. */
.phone-screen--frame{ padding-top: 2.6rem; overflow: hidden; position: relative; }
.phone-screen--frame iframe{
    height: 100%; border-radius: 0 0 2.5rem 2.5rem; box-shadow: none;
    display: block; border: 0;
}
.phone-screen{
    width: 100%; height: 100%; border-radius: 1.8rem; background: #fff; overflow-y: auto; overflow-x: hidden;
    text-align: start; scrollbar-width: none;
}
.phone-screen::-webkit-scrollbar{ display: none; }

.pv-cover{ position: relative; height: 6.5rem; background: #f8f1f5; background: color-mix(in srgb, var(--brand) 12%, #fff); }
.pv-cover img{ width: 100%; height: 100%; object-fit: cover; }
.pv-cover img[hidden]{ display: none; }
.pv-avatar{
    position: absolute; bottom: -1.6rem; inset-inline-start: 1rem; width: 3.6rem; height: 3.6rem; border-radius: 1.1rem;
    background: var(--brand); color: #fff; border: 3px solid #fff; overflow: hidden;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 900;
    box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .5);
}
.pv-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.pv-avatar img[hidden], .pv-avatar span[hidden], .pv-tagline[hidden]{ display: none; }
.pv-body{ padding: 2.2rem 1rem 1.25rem; }
.pv-name{ font-size: 1.05rem; font-weight: 900; color: #0f172a; }
.pv-tagline{ font-size: .75rem; color: #475569; margin-top: .15rem; }
.pv-meta{ font-size: .7rem; color: #94a3b8; margin-top: .2rem; }
.pv-social{ display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.pv-social:empty{ display: none; }
.pv-social-chip{
    font-size: .65rem; font-weight: 800; padding: .2rem .6rem; border-radius: 9999px;
    color: var(--brand); background: #f8f1f5; border: 1px solid #ecd9e4;
    background: color-mix(in srgb, var(--brand) 10%, #fff);
    border-color: color-mix(in srgb, var(--brand) 25%, #fff);
}
.pv-search{
    margin-top: .9rem; padding: .55rem .8rem; border-radius: .8rem; background: #f8fafc;
    border: 1px solid #eef2f6; font-size: .72rem; color: #94a3b8;
}
.pv-tabs{ display: flex; gap: .35rem; margin-top: .8rem; }
.pv-tab{ font-size: .65rem; font-weight: 800; padding: .25rem .7rem; border-radius: 9999px; background: #f1f5f9; color: #64748b; }
.pv-tab.is-active{ background: var(--brand); color: #fff; }
.pv-dishes{ margin-top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.pv-empty{ font-size: .72rem; color: #94a3b8; text-align: center; padding: 1.25rem 0; }
.pv-dish{ display: flex; align-items: center; gap: .55rem; padding: .5rem; border: 1px solid #f1f5f9; border-radius: .8rem; }
.pv-dish img, .pv-dish-img{
    width: 2.4rem; height: 2.4rem; border-radius: .6rem; object-fit: cover; background: #f1f5f9; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.pv-dish-info{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv-dish-name{ font-size: .75rem; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-dish-price{ font-size: .7rem; font-weight: 800; color: var(--brand); }
.pv-add{
    width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: #f8f1f5;
    background: color-mix(in srgb, var(--brand) 12%, #fff);
    color: var(--brand); font-weight: 900; font-size: .8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pv-cta{
    margin-top: 1rem; padding: .6rem; border-radius: .8rem; background: var(--brand); color: #fff;
    text-align: center; font-size: .78rem; font-weight: 800;
}

/* ======================================================================
   الفروع — قائمة التبديل في لوحة التحكم + اختيار الفرع في صفحة المطعم
   ====================================================================== */
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.branch-switch{ display: flex; align-items: center; gap: .3rem; background: #fff; border: 1.5px solid var(--dash-border); border-radius: .8rem; padding: .2rem .5rem; }
.branch-switch:focus-within{ border-color: var(--c-plum); box-shadow: 0 0 0 3px rgba(95, 15, 64, .1); }
.branch-switch-ico{ font-size: .9rem; }
.branch-select{ border: 0; background: transparent; font-size: .82rem; font-weight: 800; color: var(--dash-text); padding: .35rem .2rem; max-width: 9rem; cursor: pointer; }
.branch-select:focus{ outline: none; }
@media (max-width: 480px){ .branch-select{ max-width: 6rem; } }

.branch-page{ display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 1100px){ .branch-page{ grid-template-columns: minmax(0, 1fr) 24rem; } }
.branch-list{ display: flex; flex-direction: column; gap: 1rem; }
.branch-card{ --card-radius: 1.2rem; --card-border: var(--dash-border); padding: 1.1rem; display: flex; flex-direction: column; gap: .8rem; border-inline-start: 4px solid var(--dash-border); }
.branch-card.is-current{ border-inline-start-color: var(--c-plum); }
.branch-card.is-off{ opacity: .7; background: #fbfbfd; }
.branch-card-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.branch-name{ font-size: 1.05rem; font-weight: 900; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.branch-meta{ font-size: .8rem; color: var(--dash-muted); margin-top: .25rem; }
.branch-tag{ font-size: .62rem; font-weight: 800; border-radius: 9999px; padding: .12rem .5rem; background: #f1f5f9; color: #64748b; }
.branch-tag--default{ background: #ecfdf5; color: #047857; }
.branch-tag--current{ background: #f8f1f5; color: var(--c-plum); }
.branch-tag--off{ background: #fef2f2; color: #b91c1c; }
.branch-stats{ display: flex; gap: .75rem; font-size: .8rem; font-weight: 700; color: #475569; white-space: nowrap; }
.branch-link-row{ display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.branch-link{ flex: 1; min-width: 12rem; width: auto; font-size: .75rem; }
.branch-actions{ display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .3rem; border-top: 1px dashed #f1f5f9; }
.branch-form{ position: sticky; top: 5rem; }

.rest-branches{ display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.rest-branches-label{ font-size: .78rem; font-weight: 800; color: #64748b; }
.rest-branch{
    font-size: .78rem; font-weight: 700; padding: .3rem .8rem; border-radius: 9999px;
    background: #fff; border: 1.5px solid #e2e8f0; color: #475569; transition: all .15s ease;
}
.rest-branch:hover{ border-color: var(--c-brand, #5f0f40); color: var(--c-brand, #5f0f40); }
.rest-branch.is-active{ background: var(--c-brand, #5f0f40); border-color: var(--c-brand, #5f0f40); color: #fff; }
.rest-branch-info{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }

/* ======================================================================
   dashboard/index.php — التحليلات (زيارات، أوقات الذروة، الأكثر تصفحاً ومبيعاً)
   سلسلة واحدة بلون الهوية: لا ألوان متعددة، والقيمة تظهر على عمود الذروة فقط
   ====================================================================== */
.an{ margin-bottom: 1.5rem; }
.an-head{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.an-periods{ display: flex; gap: .3rem; background: #fff; border: 1px solid var(--dash-border); border-radius: 9999px; padding: .2rem; }
.an-period{ font-size: .78rem; font-weight: 700; color: #64748b; padding: .35rem .85rem; border-radius: 9999px; transition: background .15s ease, color .15s ease; }
.an-period:hover{ background: #f8fafc; color: var(--dash-text); }
.an-period.is-active{ background: var(--c-plum); color: #fff; }

.an-kpis{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; }
@media (min-width: 900px){ .an-kpis{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.an-kpi{ background: var(--dash-surface); border: 1px solid var(--dash-border); border-radius: var(--dash-radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.an-kpi-label{ font-size: .76rem; font-weight: 700; color: var(--dash-muted); }
.an-kpi-value{ font-size: 1.6rem; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--dash-text); }
.an-kpi-foot{ font-size: .7rem; color: #94a3b8; }

.an-grid{ display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 1200px){ .an-grid{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

/* ---------- رسم أوقات الذروة ---------- */
.an-chart{
    display: flex; align-items: flex-end; gap: 2px; height: 11rem; padding-top: 1.25rem;
    border-bottom: 1px solid var(--dash-border);
    /* الساعات مرتّبة 0←23 في الـ HTML: تبدأ من اليمين في العربية ومن اليسار
       في الإنجليزية، فنترك الاتجاه يتبع لغة الصفحة بدل تثبيته على rtl. */
    direction: inherit;
}
.an-bar-wrap{ position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.an-bar{
    display: block; width: 100%; max-width: 1.5rem; min-height: 2px; height: 0; border-radius: 4px 4px 0 0;
    background: #e9dce4; transition: height .5s ease, background .15s ease;
}
.an-bar-wrap:hover .an-bar{ background: #cdb0c1; }
.an-bar-wrap.is-peak .an-bar{ background: var(--c-plum); }
.an-bar-value{
    position: absolute; top: -1.15rem; font-size: .7rem; font-weight: 800; color: var(--c-plum);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.an-bar-label{ position: absolute; bottom: -1.3rem; font-size: .62rem; color: #94a3b8; white-space: nowrap; }
.an-chart-card{ padding-bottom: 2.75rem; }
.an-chart-note{ margin-top: 2rem; font-size: .74rem; color: #94a3b8; }

/* ---------- قوائم الترتيب ---------- */
.an-lists{ display: flex; flex-direction: column; gap: 1.5rem; }
.an-list .dash-card-title{ font-size: .95rem; margin-bottom: .75rem; }
.an-empty{ font-size: .8rem; color: #94a3b8; padding: .75rem 0; }
.an-rank{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.an-rank li{ display: grid; grid-template-columns: 1.3rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; position: relative; }
.an-rank-num{ font-size: .72rem; font-weight: 900; color: #cbd5e1; }
.an-rank-name{ font-size: .84rem; font-weight: 700; color: var(--dash-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-rank-value{ font-size: .74rem; font-weight: 800; color: var(--dash-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-rank-bar{
    grid-column: 2 / 3; grid-row: 2; height: .35rem; width: 0; border-radius: 9999px;
    background: var(--c-plum); opacity: .85; transition: width .5s ease;
}
.an-rank-bar--sell{ background: var(--c-orange, #FB8B24); }
.an-rank li{ grid-template-rows: auto auto; }

/* ---------- بناء المنيو: أقسام جاهزة ---------- */
.b-new-section{ flex-direction: column; align-items: stretch; gap: .75rem; }
.b-new-section-row{ display: flex; gap: .5rem; flex-wrap: wrap; }
.b-new-section-row .dash-input{ flex: 1; min-width: 12rem; }
.b-presets{ display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.b-presets-label{ font-size: .72rem; font-weight: 700; color: #94a3b8; margin-inline-end: .2rem; }
.b-preset{
    font-size: .75rem; font-weight: 700; color: #475569; background: #f8fafc; border: 1px solid var(--dash-border);
    border-radius: 9999px; padding: .28rem .7rem; cursor: pointer; transition: all .15s ease;
}
.b-preset:hover{ border-color: var(--c-plum); color: var(--c-plum); background: #fff; }

/* ======================================================================
   رمز QR للمنيو — dashboard/qr-code.php
   ====================================================================== */
.qr-layout{ display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px){ .qr-layout{ grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } }

/* ---------- ستاند الطاولة ---------- */
.qr-stand-wrap{ display: flex; flex-direction: column; align-items: center; }
.qr-stand{
    width: 100%; max-width: 320px; border-radius: 1.4rem 1.4rem .5rem .5rem; overflow: hidden;
    background: linear-gradient(160deg, #7a1552 0%, var(--c-plum) 55%, #400a2b 100%);
    box-shadow: 0 26px 45px -25px rgba(95, 15, 64, .75);
    padding: 1.1rem 1.1rem 0;
}
.qr-stand-body{
    background: #fff; border-radius: 1rem; padding: 1.25rem 1rem 1.1rem;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    border-top: 4px solid var(--c-orange, #FB8B24);
}
.qr-stand-logo{ width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; margin-bottom: .5rem; }
.qr-stand-name{ font-size: 1.05rem; font-weight: 900; color: var(--c-plum); line-height: 1.3; }
.qr-stand-branch{ font-size: .75rem; font-weight: 700; color: #94a3b8; margin-top: .15rem; }
.qr-stand-code{
    width: 100%; max-width: 220px; margin: .9rem 0 .75rem; padding: .5rem;
    background: #fff; border: 1px solid #f1f5f9; border-radius: .75rem;
}
.qr-stand-code svg{ width: 100%; height: auto; display: block; }
.qr-stand-cta{ font-size: .88rem; font-weight: 800; color: #0f172a; }
.qr-stand-cta-en{ font-size: .68rem; font-weight: 700; color: #94a3b8; letter-spacing: .04em; text-transform: uppercase; }
.qr-stand-foot{
    padding: .6rem 0 .7rem; text-align: center; font-size: .82rem; font-weight: 900;
    color: hsla(0, 0%, 100%, .75); letter-spacing: .02em;
}
.qr-stand-base{
    width: 80%; max-width: 260px; height: .55rem; border-radius: 0 0 1rem 1rem;
    background: linear-gradient(180deg, #400a2b, #2a061c);
    box-shadow: 0 16px 24px -18px rgba(15, 23, 42, .8);
}
.qr-stand-hint{ margin-top: .9rem; font-size: .74rem; color: #94a3b8; text-align: center; }

/* ---------- الإعدادات والتحميل ---------- */
.qr-side{ display: flex; flex-direction: column; gap: 1rem; }
.qr-chips{ display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.qr-chip{
    display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: #475569;
    background: #f8fafc; border: 1px solid var(--dash-border); border-radius: 9999px; padding: .35rem .85rem;
    transition: all .15s ease;
}
.qr-chip:hover{ border-color: var(--c-plum); color: var(--c-plum); background: #fff; }
.qr-chip.is-active{ background: var(--c-plum); border-color: var(--c-plum); color: #fff; }
.qr-chip-dot{ width: .75rem; height: .75rem; border-radius: 9999px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .15); }
.qr-chip.is-active .qr-chip-dot{ box-shadow: 0 0 0 2px hsla(0, 0%, 100%, .9); }
.qr-chip-dot--plum{ background: #5f0f40; }
.qr-chip-dot--black{ background: #111827; }
.qr-link-row{ display: flex; gap: .5rem; align-items: center; margin-top: .6rem; }
.qr-link-row .dash-input{ flex: 1; min-width: 0; font-size: .78rem; }
.qr-downloads{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.qr-tips{ margin-top: .9rem; display: flex; flex-direction: column; gap: .35rem; font-size: .76rem; color: var(--dash-muted); }
.qr-tips li{ padding-inline-start: .9rem; position: relative; }
.qr-tips li::before{ content: "•"; position: absolute; inset-inline-start: 0; color: var(--c-orange, #FB8B24); font-weight: 900; }

/* ======================================================================
   استيراد المنيو من PDF — dashboard/menu-builder.php
   ====================================================================== */
.dash-btn--import{
    background: #fff; color: var(--c-plum); border: 1px solid #e9d5e0;
    box-shadow: 0 8px 18px -14px rgba(95, 15, 64, .6);
}
.dash-btn--import:hover{ background: #fdf7fb; border-color: var(--c-plum); }
.dash-btn-ico{ margin-inline-end: .35rem; }

/* ---------- الخطوة 1: الملف ---------- */
.pdf-drop{
    display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center;
    padding: 2rem 1rem; border: 2px dashed #e2c9d9; border-radius: 1rem; cursor: pointer;
    background: linear-gradient(180deg, #fdf7fb, #fff); transition: all .15s ease;
}
.pdf-drop:hover, .pdf-drop.is-over{ border-color: var(--c-plum); background: #fbf1f7; }
.pdf-drop-input{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pdf-drop-ico{ font-size: 1.8rem; }
.pdf-drop-title{ font-size: .92rem; font-weight: 800; color: var(--c-plum); }
.pdf-drop-hint{ font-size: .75rem; color: #94a3b8; }
.pdf-drop-file{
    margin-top: .5rem; font-size: .78rem; font-weight: 700; color: #0f172a;
    background: #fff; border: 1px solid var(--dash-border); border-radius: 9999px; padding: .25rem .8rem;
}
.pdf-manual{ margin-top: 1rem; }
.pdf-manual summary{ font-size: .8rem; font-weight: 700; color: var(--c-plum); cursor: pointer; }
.pdf-manual textarea{ margin-top: .6rem; font-size: .82rem; line-height: 1.7; }

/* ---------- الخطوة 2: المعاينة ---------- */
.pdf-summary{ margin-bottom: .9rem; }
.pdf-summary-row{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .88rem; color: var(--dash-text); }
.pdf-badge{
    font-size: .7rem; font-weight: 800; color: var(--c-plum); background: #f8f1f5;
    border-radius: 9999px; padding: .2rem .65rem;
}
.pdf-notice{
    margin-top: .5rem; font-size: .76rem; color: #92400e; background: #fffbeb;
    border: 1px solid #fde68a; border-radius: .6rem; padding: .5rem .7rem; line-height: 1.6;
}
.pdf-preview{ max-height: 45vh; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding-inline-end: .2rem; }

/* اختيار القسم لكل الأطباق دفعة واحدة */
.pdf-bulk{ border: 1px solid var(--dash-border); border-radius: .85rem; padding: .7rem .85rem; background: #fcfcfd; margin-bottom: .9rem; }
.pdf-bulk-row{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .4rem; }
.pdf-bulk-row .dash-input{ flex: 1; min-width: 10rem; }
.pdf-bulk .dash-hint{ margin-top: .45rem; }

/* سطر الطبق في المعاينة: صورة + حقول + قسم */
.pdf-dish{
    display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 2rem; gap: .55rem; align-items: center;
    border: 1px solid var(--dash-border); border-radius: .8rem; padding: .5rem; background: #fff;
}
.pdf-dish-img{
    width: 3.4rem; height: 3.4rem; border-radius: .6rem; object-fit: cover;
    background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.pdf-dish-img--empty{ color: #cbd5e1; }
.pdf-dish-main{ display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.pdf-dish-fields{ display: grid; grid-template-columns: minmax(0, 1fr) 5rem 5rem 9rem; gap: .4rem; }
.pdf-dish-meta{ display: flex; flex-wrap: wrap; gap: .5rem; font-size: .72rem; }
.pdf-dish-hint{ color: var(--c-plum); background: #f8f1f5; border-radius: 9999px; padding: .1rem .5rem; }
.pdf-dish-desc{ color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
.pdf-dish-price, .pdf-dish-cal{ text-align: center; font-variant-numeric: tabular-nums; }
.pdf-dish-cal{ font-size: .8rem; }
.pdf-dish-price.is-empty{ border-color: var(--c-orange, #FB8B24); background: #fffbeb; }
.pdf-badge--warn{ color: #92400e; background: #fef3c7; }
.pdf-dish-section{ font-size: .78rem; padding-inline: .5rem; text-overflow: ellipsis; }
.pdf-dish-x{
    width: 2rem; height: 2rem; border-radius: .6rem; border: 1px solid var(--dash-border);
    background: #fff; color: #94a3b8; font-size: .8rem; cursor: pointer; transition: all .15s ease;
}
.pdf-dish-x:hover{ border-color: #fca5a5; color: #dc2626; background: #fef2f2; }
.pdf-loading:not([hidden]){
    margin-top: .8rem; font-size: .8rem; font-weight: 700; color: var(--c-plum);
    display: flex; align-items: center; gap: .5rem;
}
.pdf-loading::before{
    content: ""; width: 1rem; height: 1rem; border-radius: 9999px;
    border: 2px solid #e9d5e0; border-top-color: var(--c-plum); animation: pdf-spin .7s linear infinite;
}
@keyframes pdf-spin{ to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .pdf-loading::before{ animation: none; } }
@media (max-width: 640px){
    .pdf-dish-fields{ grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; }
    .pdf-dish-section{ grid-column: 1 / -1; }
}
/* الأزرار المخفية بسمة hidden (مثل زر «رجوع» في نافذة الاستيراد) */
.dash-btn[hidden]{ display: none; }

/* ---------- الحقول الإنجليزية داخل نافذة الطبق ---------- */
.dish-en{ border: 1px solid var(--dash-border); border-radius: .85rem; padding: .7rem .85rem; background: #fcfcfd; }
.dish-en summary{ font-size: .84rem; font-weight: 800; color: var(--c-plum); cursor: pointer; }
.dish-en summary::marker{ color: #cbd5e1; }
.dish-en[open] summary{ margin-bottom: .5rem; }
.dish-en .dash-field{ margin-top: .55rem; }
.dish-en .dash-input{ font-size: .85rem; }

/* ---------- شريط التقدم أثناء قراءة صفحات الملف ---------- */
.pdf-progress{ margin-top: 1rem; }
.pdf-progress-head{ display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; font-weight: 700; color: var(--c-plum); margin-bottom: .4rem; }
.pdf-progress-pct{ font-variant-numeric: tabular-nums; color: #94a3b8; font-weight: 800; }
.pdf-progress-track{ height: .55rem; border-radius: 9999px; background: #f1e7ee; overflow: hidden; }
.pdf-progress-fill{
    display: block; height: 100%; width: 0; border-radius: 9999px;
    background: linear-gradient(90deg, var(--c-plum), var(--c-orange, #FB8B24));
    transition: width .4s ease;
}
.pdf-progress-hint{ margin-top: .45rem; font-size: .74rem; color: #94a3b8; }
@media (prefers-reduced-motion: reduce){ .pdf-progress-fill{ transition: none; } }
.dash-btn:disabled{ opacity: .55; cursor: default; }

/* ---------- فحص إعدادات القراءة الذكية ---------- */
.pdf-tools{ margin-top: .7rem; text-align: start; }
.pdf-checks{ margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.pdf-checks-loading{ font-size: .8rem; color: var(--dash-muted); }
.pdf-check{
    display: grid; grid-template-columns: 1.3rem 1fr; gap: .5rem; align-items: start;
    font-size: .78rem; border: 1px solid var(--dash-border); border-radius: .7rem; padding: .5rem .6rem; background: #fcfcfd;
}
.pdf-check strong{ display: block; color: var(--dash-text); font-size: .8rem; }
.pdf-check-detail{ color: var(--dash-muted); word-break: break-word; }
.pdf-check--ok{ border-color: #bbf7d0; background: #f0fdf4; }
.pdf-check--warn{ border-color: #fde68a; background: #fffbeb; }
.pdf-check--fail{ border-color: #fecaca; background: #fef2f2; }
.dish-modal-cal[hidden]{ display: none; }

/* ======================================================================
   باركود الطاولات (Dine-in QR) — dashboard/qr-generator.php
   ====================================================================== */
.tg-setup{ display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.tg-form{ display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.tg-field{ min-width: 12rem; }
.tg-field .dash-input{ font-size: 1.1rem; font-weight: 800; text-align: center; }
.tg-branches{ min-width: 14rem; }
.tg-note{ flex: 1 1 100%; margin: 0; }

.tg-grid{ display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 1.25rem; }
.tg-stand{
    border-radius: 1.2rem 1.2rem .6rem .6rem; overflow: hidden; padding: .85rem .85rem 0;
    background: linear-gradient(160deg, #7a1552 0%, var(--c-plum) 55%, #400a2b 100%);
    box-shadow: 0 20px 36px -24px rgba(95, 15, 64, .75);
}
.tg-stand-body{
    background: #fff; border-radius: .9rem; padding: .9rem .75rem 1rem; text-align: center;
    border-top: 4px solid var(--c-orange, #FB8B24);
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
}
.tg-table-no{
    align-self: stretch; font-size: .78rem; font-weight: 900; color: #fff; background: var(--c-plum);
    border-radius: 9999px; padding: .25rem .8rem; margin-bottom: .35rem;
}
.tg-logo{ width: 2.4rem; height: 2.4rem; border-radius: 9999px; object-fit: cover; }
.tg-name{ font-size: .92rem; font-weight: 900; color: var(--c-plum); line-height: 1.3; }
.tg-code{ width: 100%; max-width: 190px; margin: .5rem 0 .45rem; padding: .35rem; border: 1px solid #f1f5f9; border-radius: .7rem; }
.tg-code img{ width: 100%; height: auto; display: block; }
.tg-cta{ font-size: .82rem; font-weight: 800; color: #0f172a; }
.tg-cta-en{ font-size: .62rem; font-weight: 700; color: #94a3b8; letter-spacing: .04em; text-transform: uppercase; }
.tg-stand-foot{ padding: .5rem 0 .55rem; text-align: center; font-size: .75rem; font-weight: 900; color: hsla(0, 0%, 100%, .75); }
.tg-actions{
    background: #fff; margin: 0 -.85rem; padding: .6rem .85rem; display: flex; align-items: center;
    justify-content: space-between; gap: .5rem; border-top: 1px solid var(--dash-border);
}
.tg-print-note{ margin-top: 1rem; font-size: .76rem; color: #94a3b8; }

/* ---------- الطباعة: الستاندات فقط، أربعة في الصفحة ---------- */
@media print {
    .dash-topbar, .dash-sidebar, .dash-page-head, .tg-setup, .tg-actions, .tg-print-note,
    .dash-alert, .flash-list, .toast { display: none !important; }
    .dash-layout, .dash-main{ display: block; padding: 0; margin: 0; background: #fff; }
    .tg-grid{ grid-template-columns: repeat(2, 1fr); gap: .6rem; }
    .tg-stand{ break-inside: avoid; box-shadow: none; border: 1px solid #e5e7eb; padding: .5rem .5rem 0; }
    .tg-code{ max-width: 230px; }
}

/* ======================================================================
   شاشة الكاشير: رقم الطاولة والتنبيه الحي
   ====================================================================== */
.order-table{
    display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .6rem;
    font-size: .84rem; font-weight: 800; color: var(--c-plum);
    background: #f8f1f5; border: 1px solid #efdce7; border-radius: .7rem; padding: .4rem .7rem;
}
.order-table strong{ font-size: 1rem; }
.order-table-ico{ font-size: .95rem; flex: none; }
.order-table--away{ color: #64748b; background: #f8fafc; border-color: var(--dash-border); font-weight: 700; }

/* رقم الطاولة ثم سعر الطلب تحته مباشرة — الكاشير يقرأ السطرين بنظرة واحدة */
.order-table-text{ display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.order-table-new{ font-size: .68rem; font-weight: 800; color: var(--c-orange, #FB8B24); letter-spacing: .02em; }
.order-table-no{ font-size: 1rem; font-weight: 900; line-height: 1.25; }
.order-table-price{ font-size: .9rem; font-weight: 800; color: inherit; opacity: .85; }

/* سطر الضريبة أسفل الإجمالي */
.order-vat{ display: block; font-size: .7rem; font-weight: 600; color: var(--dash-muted, #64748b); margin-top: .1rem; }

.order-alert{
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .9rem;
    padding: .8rem 1rem; border-radius: .9rem; color: #fff;
    background: linear-gradient(90deg, var(--c-plum), #8a1c5e);
    box-shadow: 0 14px 30px -18px rgba(95, 15, 64, .9);
    animation: order-pop .35s ease;
}
.order-alert[hidden]{ display: none; }
.order-alert-ico{ font-size: 1.3rem; animation: order-ring 1.4s ease-in-out infinite; }
.order-alert-text{ flex: 1; min-width: 12rem; font-size: .92rem; font-weight: 800; }
.order-alert .dash-btn--primary{ background: var(--c-orange, #FB8B24); box-shadow: none; }

.order-live{ display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.order-live-toggle{ display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--dash-muted); cursor: pointer; }
.order-live-dot{ width: .5rem; height: .5rem; border-radius: 9999px; background: #cbd5e1; }
.order-live-dot.is-live{ background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }

@keyframes order-pop{ from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes order-ring{ 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(12deg); } 80% { transform: rotate(-10deg); } }
@media (prefers-reduced-motion: reduce){
    .order-alert, .order-alert-ico{ animation: none; }
}

/* ======================================================================
   الصفحة الرئيسية: الهوية «المنيو almenu» + البطل (محرك البحث) + التذييل
   ====================================================================== */

/* ---------- الشعار النصي ---------- */
.brand-mark{
    display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
}
.brand-ico{
    width: 2.5rem; height: 2.5rem; border-radius: .85rem; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.05rem;
    background: linear-gradient(135deg, var(--c-plum, #5f0f40), var(--c-orange, #FB8B24));
    box-shadow: 0 8px 20px -10px rgba(95, 15, 64, .55);
}
.brand-text{ display: flex; flex-direction: column; line-height: 1; }
.brand-ar{
    font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em;
    color: var(--c-plum, #5f0f40);
}
.brand-en{
    font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: lowercase;
    color: var(--c-orange, #FB8B24); margin-top: .18rem;
}

.brand-mark--lg .brand-ico{ width: 3.4rem; height: 3.4rem; border-radius: 1.1rem; font-size: 1.4rem; }
.brand-mark--lg .brand-ar{ font-size: 2rem; }
.brand-mark--lg .brand-en{ font-size: .85rem; }

/* ---------- البطل: محرك البحث ---------- */
.hero-search{
    width: 100%; max-width: 46rem; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
    padding: 1rem 0 2.5rem;
}
.hero-title{
    font-size: clamp(1.35rem, 4.4vw, 2.3rem); font-weight: 900; line-height: 1.45;
    color: #0f172a; text-align: center; letter-spacing: -.015em; margin: 0;
}

.hero-box{
    width: 100%; display: flex; align-items: center; gap: .5rem;
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 1.15rem;
    padding: .55rem .55rem .55rem 1rem;
    box-shadow: 0 22px 50px -28px rgba(95, 15, 64, .38), 0 2px 6px -2px rgba(15, 23, 42, .06);
    transition: border-color .15s, box-shadow .15s;
}
.hero-box:focus-within{
    border-color: var(--c-orange, #FB8B24);
    box-shadow: 0 22px 55px -25px rgba(251, 139, 36, .5), 0 0 0 4px rgba(251, 139, 36, .14);
}
.hero-box-ico{ color: #94a3b8; font-size: 1.05rem; flex: none; padding-inline-start: .35rem; }
.hero-input{
    flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
    font-family: inherit; font-size: 1rem; font-weight: 600; color: #0f172a;
    padding: .75rem .4rem;
}
.hero-input::placeholder{ color: #94a3b8; font-weight: 500; }
.hero-btn{
    flex: none; border: 0; cursor: pointer; border-radius: .85rem;
    background: var(--c-orange, #FB8B24); color: #fff;
    font-family: inherit; font-size: .85rem; font-weight: 800;
    padding: .8rem 1.6rem; transition: background .15s, transform .15s;
    box-shadow: 0 10px 22px -12px rgba(251, 139, 36, .85);
}
.hero-btn:hover{ background: var(--c-plum, #5f0f40); }
.hero-btn:active{ transform: translateY(1px); }

.hero-chips{
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem;
    font-size: .78rem; font-weight: 700;
}
.hero-chips-label{ color: #94a3b8; font-weight: 600; }
.hero-chip{
    background: #fff; border: 1px solid #e2e8f0; color: #475569; cursor: pointer;
    font-family: inherit; font-size: .78rem; font-weight: 700; text-decoration: none;
    padding: .4rem .85rem; border-radius: .7rem; transition: all .15s;
}
.hero-chip:hover{ border-color: var(--c-orange, #FB8B24); color: var(--c-plum, #5f0f40); }
.hero-chip--offers{
    color: var(--c-plum, #5f0f40); border-color: rgba(251, 139, 36, .45);
    background: rgba(251, 139, 36, .09);
}
.hero-chip--offers:hover{ background: rgba(251, 139, 36, .18); }

.hero-budget{ margin-top: .5rem; }

@media (max-width: 480px){
    .hero-search{ gap: 1rem; padding-bottom: 1.75rem; }
    .hero-btn{ padding: .8rem 1.1rem; }
}

/* ---------- التذييل: الحقوق + بوابة المطاعم ---------- */
.site-foot{
    width: 100%; margin-top: auto; background: #fff;
    border-top: 1px solid #f1f5f9; padding: 1.1rem 1.25rem;
}
.site-foot-inner{
    max-width: 72rem; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .5rem 1.25rem; font-size: .75rem;
}
.site-foot-copy{ color: #94a3b8; }
.site-foot-partner{
    display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
    color: #64748b; font-weight: 700;
    border: 1px solid #e2e8f0; border-radius: .7rem; padding: .35rem .8rem;
    transition: all .15s;
}
.site-foot-partner:hover{
    color: var(--c-plum, #5f0f40); border-color: rgba(95, 15, 64, .3); background: #faf7f9;
}

/* ======================================================================
   صفحة العروض الترويجية الذكية (offers.php)
   خلفية بيضاء · العنابي #5f0f40 والبرتقالي #FB8B24 فقط
   (الذهبي/الأسود لبطاقة البطل الافتتاحية وحدها)
   ====================================================================== */
.of-page{ background: #fff; }

.of-demo-note{
    background: #fff8ef; border: 1px solid rgba(251, 139, 36, .35); color: #7c4a12;
    border-radius: 1rem; padding: .85rem 1.1rem; font-size: .84rem; line-height: 1.9;
    margin-bottom: 1.5rem;
}
.of-demo-note code{
    background: #fff; border: 1px solid #f0e2d2; border-radius: .35rem;
    padding: 0 .3rem; font-size: .78rem; direction: ltr; display: inline-block;
}

/* ---------- 1) البطل الافتتاحي ---------- */
.of-hero{ margin-bottom: 2.5rem; }
.of-hero-card{
    position: relative; overflow: hidden; border-radius: 1.5rem;
    min-height: 20rem; display: flex; align-items: flex-end;
    background: #0b0b0c; cursor: default;
    box-shadow: 0 30px 60px -35px rgba(0, 0, 0, .55);
}
.of-hero-card[role="button"]{ cursor: pointer; }
.of-hero-card[role="button"]:hover .of-hero-img{ transform: scale(1.03); }
.of-hero-card:focus-visible{ outline: 3px solid var(--c-orange, #FB8B24); outline-offset: 3px; }

.of-hero-img{
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: transform .5s ease;
}
/* التدرّج الذهبي/الأسود لبطاقة الراعي */
.of-hero-shade{
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 9, 6, .94) 0%, rgba(10, 9, 6, .72) 42%, rgba(10, 9, 6, .12) 78%),
        linear-gradient(180deg, transparent 45%, rgba(10, 9, 6, .8) 100%);
}
.of-hero-card--gold .of-hero-shade{
    background:
        linear-gradient(90deg, rgba(12, 10, 6, .95) 0%, rgba(38, 29, 8, .78) 45%, rgba(12, 10, 6, .15) 80%),
        linear-gradient(180deg, transparent 40%, rgba(8, 7, 4, .85) 100%);
}
.of-hero-card--gold::after{
    content: ""; position: absolute; inset-inline-start: 0; inset-block: 0; width: .35rem;
    background: linear-gradient(180deg, #f3d488, #b98a2a);
}

.of-hero-text{
    position: relative; z-index: 2; padding: 2rem 2.2rem; max-width: 38rem; color: #fff;
}
.of-hero-kicker{
    display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
    color: #f3d488; margin-bottom: .7rem;
}
.of-hero-title{
    font-size: clamp(1.5rem, 4.2vw, 2.6rem); font-weight: 900; line-height: 1.35;
    margin: 0; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}
.of-hero-sub{ margin-top: .8rem; font-size: .95rem; color: rgba(255, 255, 255, .82); }
.of-hero-prices{ margin-top: 1rem; display: flex; align-items: baseline; gap: .7rem; }
.of-hero-cta{
    display: inline-block; margin-top: 1.2rem; background: var(--c-orange, #FB8B24); color: #fff;
    font-size: .82rem; font-weight: 800; padding: .6rem 1.4rem; border-radius: .8rem;
}

@media (max-width: 640px){
    .of-hero-card{ min-height: 17rem; }
    .of-hero-text{ padding: 1.4rem 1.3rem; }
}

/* ---------- الأسعار (مشتركة) ---------- */
.of-price-new{ font-size: 1.15rem; font-weight: 900; color: var(--c-orange, #FB8B24); }
.of-price-new--lg{ font-size: 1.8rem; }
.of-price-old{
    font-size: .85rem; font-weight: 600; color: #94a3b8;
    text-decoration: line-through; text-decoration-thickness: 1px;
}

/* ---------- 2) صفقات البرق: شريط أفقي ---------- */
.of-sec{ margin-bottom: 2.75rem; }
.of-sec-head{ margin-bottom: 1rem; }
.of-sec-title{ font-size: 1.35rem; font-weight: 900; color: #0f172a; margin: 0; }
.of-sec-sub{ font-size: .82rem; color: #94a3b8; margin-top: .2rem; }

.of-rail{
    display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.of-rail-item{ flex: 0 0 15.5rem; scroll-snap-align: start; }

/* إخفاء شريط التمرير (scrollbar-hide) */
.scrollbar-hide{ -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar{ display: none; width: 0; height: 0; }

/* ---------- بطاقة العرض ---------- */
.of-card{
    --card-radius: 1.1rem;
    overflow: hidden; cursor: pointer; height: 100%; display: flex; flex-direction: column;
}
.of-card:hover{
    transform: translateY(-3px); border-color: rgba(95, 15, 64, .18);
    box-shadow: 0 18px 38px -24px rgba(95, 15, 64, .45);
}
.of-card:focus-visible{ outline: 3px solid var(--c-orange, #FB8B24); outline-offset: 2px; }

.of-card-media{
    position: relative; aspect-ratio: 1 / 1; background: #f6f7f9;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* صور العروض كبطاقات المنيو: تملأ صندوقها فلا يظهر لون افتراضي حولها */
.of-card-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center; background: #f8fafc; }
.of-card-noimg{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--c-brand-soft, #f1f5f9); }
.of-card-save{
    position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem;
    background: var(--c-orange, #FB8B24); color: #fff;
    font-size: .68rem; font-weight: 800; padding: .25rem .6rem; border-radius: .55rem;
}

.of-card-body{ padding: .85rem .9rem 1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.of-card-name{
    font-size: .92rem; font-weight: 800; color: #0f172a; margin: 0; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.of-card-rest{ font-size: .74rem; color: #94a3b8; font-weight: 600; margin: 0; }
.of-card-prices{ display: flex; align-items: baseline; gap: .55rem; margin: .1rem 0 0; }

/* ---------- العداد التنازلي ---------- */
.of-timer{
    display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
    background: var(--c-plum, #5f0f40); color: #fff;
    font-size: .74rem; font-weight: 800; padding: .32rem .7rem; border-radius: .6rem;
    font-variant-numeric: tabular-nums; margin: 0;
}
.of-timer--hero{ font-size: .85rem; padding: .45rem .95rem; margin-top: .9rem; }
.of-timer.is-soon{ background: #4a0b31; }
.of-timer.is-over{ background: #e2e8f0; color: #64748b; }

/* ---------- شريط الكمية المباعة ---------- */
.of-progress{
    width: 100%; height: .35rem; background: #eef1f5; border-radius: 999px; overflow: hidden;
}
.of-progress-bar{
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--c-orange, #FB8B24), #e0761a);
}
.of-progress-text{ font-size: .7rem; font-weight: 700; color: #94a3b8; margin: 0; }

/* ---------- 3) فلاتر العروض الذكية ---------- */
.of-pills{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.of-pill{
    background: #fff; border: 1px solid #e2e8f0; color: #475569; cursor: pointer;
    font-family: inherit; font-size: .82rem; font-weight: 700;
    padding: .55rem 1.15rem; border-radius: 999px; transition: all .15s;
}
.of-pill:hover{ border-color: rgba(95, 15, 64, .35); color: var(--c-plum, #5f0f40); }
.of-pill.is-active{
    background: var(--c-plum, #5f0f40); border-color: var(--c-plum, #5f0f40); color: #fff;
}

.of-grid{
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
}
.of-grid.is-loading{ opacity: .45; pointer-events: none; }

.of-empty{
    text-align: center; color: #94a3b8; font-size: .88rem; font-weight: 600;
    padding: 2.5rem 1rem;
}

@media (max-width: 480px){
    .of-rail-item{ flex-basis: 13rem; }
    .of-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}

@media (prefers-reduced-motion: reduce){
    .of-card, .of-hero-img{ transition: none; }
}

/* ======================================================================
   الواجهة الرئيسية — حالة الصفر (Zero-State)
   خلفية بيضاء نقية · العنابي #5f0f40 · البرتقالي #FB8B24 · الأحمر #9A031E
   ====================================================================== */
.zs-body{
    min-height: 100vh; display: flex; flex-direction: column;
    overflow-x: clip;
    background: #ffffff; color: #0f172a;
    /* خط واحد للصفحة كلها (هو الخط المحمّل في <head>) */
    font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}
.zs-body h1, .zs-body h2, .zs-body h3, .zs-body input,
.zs-body button, .zs-body a{ font-family: inherit; }

/* ---------- الهيدر: الشعار فقط ---------- */
.zs-head{
    position: sticky; top: 0; z-index: var(--z-header);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; padding: .85rem 1.5rem;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
    border-bottom: 1px solid #f4f5f7;
}
.zs-head--center{ display: grid; grid-template-columns: 1fr auto 1fr; }
.zs-head-side{ display: flex; align-items: center; }
.zs-head-side--end{ justify-content: flex-end; }

.zs-logo{ display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.zs-logo img{ height: 2.75rem; width: auto; display: block; }
.zs-lang{
    font-size: .75rem; font-weight: 700; color: #64748b; text-decoration: none;
    background: #f6f7f9; border: 1px solid #eef1f5; border-radius: .7rem;
    padding: .45rem .95rem; transition: all .15s;
}
.zs-lang:hover{ color: var(--c-plum, #5f0f40); background: #f1f2f5; }

@media (max-width: 480px){
    .zs-head{ padding: .7rem 1rem; }
    .zs-logo img{ height: 2.1rem; }
}

/* ---------- المحتوى ---------- */
.zs-main{
    width: 100%; max-width: 62rem; margin: 0 auto; flex: 1;
    padding: clamp(1.75rem, 6vh, 4rem) 1.25rem 3rem;
}

/* ---------- 1) المشهد الافتتاحي: عنوان + بحث + أطباق طافية ---------- */
.hero-stage{
    position: relative;
    /* يمتد بعرض الصفحة كاملة حتى تقف الأطباق في الهوامش بعيداً عن النص.
       نعتمد على 100% من عرض <html> (بدون شريط التمرير) فلا ينشأ تمرير أفقي. */
    width: var(--page-w, 100%); margin-inline: calc(50% - var(--page-w, 100%) / 2);
    min-height: clamp(26rem, 58vh, 34rem);
    display: flex; align-items: center; justify-content: center;
    padding: clamp(1rem, 4vh, 2.5rem) 0 clamp(1.5rem, 5vh, 3rem);
    margin-bottom: .5rem;
    transition: opacity .3s ease, transform .35s ease;
}
/* أثناء البحث: ينزوي المشهد الزخرفي ويبقى التركيز على النتائج */
.hero-stage.is-busy{ min-height: 0; padding-bottom: 1.25rem; }
.hero-stage.is-busy .hero-decor{ opacity: 0; pointer-events: none; }
/* الإعلان المهم ضروري: حركة الدخول بـ fill:both تتقدّم على الإعلان العادي */
.hero-stage.is-busy .fx{ opacity: 0 !important; pointer-events: none; transition: opacity .3s ease; }
.hero-stage.is-busy .hero-h1,
.hero-stage.is-busy .hero-p{
    font-size: 0; opacity: 0; margin: 0; height: 0; overflow: hidden;
}

/* ===== الخلفية: خطّان منحنيان ساكنان ===== */
.hero-decor{
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    transition: opacity .3s ease;
}
.hero-line{
    position: absolute; display: block; width: auto;
    height: clamp(17rem, 46vh, 27rem);
    opacity: .55; user-select: none;
}
/* جهتان فيزيائيتان (يسار/يمين) فلا تنعكسان مع اتجاه اللغة */
.hero-line--start{ left: -2%;  top: 14%; }
.hero-line--end  { right: -2%; bottom: 4%; }

/* ===== الأطباق الطافية حول شريط البحث =====
   توزيع دائري حول المنتصف + حركتان: اندفاع للدخول مرة واحدة، ثم طفو لا نهائي.
   كل صورة لها ميلان خاص (--rot) وتأخير خاص (--delay) لتبدو عشوائية وطبيعية. */
.fx{
    position: absolute; z-index: 1; pointer-events: none; display: block;
    opacity: 0;                       /* تبدأ مخفية حتى تشتغل حركة الدخول */
    filter: drop-shadow(0 18px 26px rgba(15, 23, 42, .16));
    animation:
        fx-pop   .85s cubic-bezier(.21, 1.02, .36, 1) var(--delay, .1s) both,
        fx-float 5.5s ease-in-out calc(var(--delay, .1s) + .85s) infinite;
}
.fx img{ width: 100%; height: auto; display: block; }

/* حركة الدخول: من الأسفل وبشفافية معدومة إلى مكانها بشفافية كاملة — مرة واحدة */
@keyframes fx-pop{
    from{ opacity: 0; transform: translateY(50px) rotate(var(--rot, 0deg)) scale(.94); }
    to  { opacity: 1; transform: translateY(0)    rotate(var(--rot, 0deg)) scale(1); }
}

/* حركة الطفو: ارتفاع وهبوط بسيط جداً، ناعمة ولا نهائية */
@keyframes fx-float{
    0%, 100%{ transform: translateY(0)     rotate(var(--rot, 0deg)); }
    50%     { transform: translateY(-15px) rotate(var(--rot, 0deg)); }
}

/* التوزيع الدائري حول شريط البحث + ميلان خفيف + تأخير متتابع */
.fx--burger{                       /* أسفل اليسار — الأكبر */
    left: 3.5%; top: 42%;
    width: clamp(7.5rem, 14.5vw, 13.5rem);
    --rot: -6deg; --delay: .1s;
}
.fx--salad{                        /* أعلى اليمين */
    right: 6%; top: 4%;
    width: clamp(6rem, 11.5vw, 10.5rem);
    --rot: 7deg; --delay: .3s;
}
.fx--pizza{                        /* أسفل اليمين */
    right: 7.5%; bottom: 3%;
    width: clamp(5.5rem, 10.5vw, 9.5rem);
    --rot: -9deg; --delay: .5s;
}

/* ===== النصوص المركزية ===== */
.hero-core{
    position: relative; z-index: 2; width: 100%; max-width: 40rem;
    margin: 0 auto; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.hero-h1{
    font-size: clamp(1.75rem, 5.4vw, 3rem); font-weight: 900; line-height: 1.35;
    letter-spacing: -.025em; color: #000000; margin: 0;
    transition: font-size .25s ease, opacity .2s ease;
}
.hero-p{
    font-size: clamp(.92rem, 2.3vw, 1.12rem); font-weight: 600; line-height: 1.6;
    color: #4B5563; margin: -.35rem 0 .35rem;
    transition: font-size .25s ease, opacity .2s ease;
}

/* ===== شريط البحث: حواف دائرية كاملة ===== */
.g-search{
    width: 100%; display: flex; align-items: center; gap: .35rem;
    background: #fff; border: 1px solid #DFE1E5; border-radius: 999px;
    padding: .3rem .4rem .3rem 1.15rem;
    transition: box-shadow .18s ease, border-color .18s ease;
}
.g-search:hover{
    border-color: transparent;
    box-shadow: 0 1px 6px rgba(32, 33, 36, .22);
}
.g-search:focus-within{
    border-color: transparent;
    box-shadow: 0 1px 6px rgba(32, 33, 36, .18), 0 0 0 4px rgba(251, 139, 36, .22);
}
.g-search-ico{ flex: none; width: 1.3rem; height: 1.3rem; color: #9AA0A6; }
.g-search-ico svg{ width: 100%; height: 100%; display: block; }
.g-search-input{
    flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
    font-family: inherit; font-size: 1rem; font-weight: 600; color: #0f172a;
    padding: .85rem .55rem;
}
.g-search-input:focus-visible{ outline: none; }
.g-search-input::placeholder{ color: #9AA0A6; font-weight: 500; }
.g-search-clear{
    flex: none; border: 0; cursor: pointer; background: #F1F3F4; color: #70757A;
    width: 1.75rem; height: 1.75rem; border-radius: 999px; font-size: .72rem;
    display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.g-search-clear:hover{ background: #E4E7E9; color: #3C4043; }
.g-search-clear[hidden]{ display: none; }
.g-search-go{
    flex: none; border: 0; cursor: pointer; border-radius: 999px;
    background: var(--c-orange, #FB8B24); color: #fff;
    font-family: inherit; font-size: .85rem; font-weight: 800;
    padding: .72rem 1.7rem; transition: background .18s, transform .12s;
}
.g-search-go:hover{ background: var(--c-plum, #5f0f40); }
.g-search-go:active{ transform: translateY(1px); }

/* ===== الكلمات الشائعة ===== */
.hero-pills{
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem;
}
.hero-pill{
    background: #fff; border: 1px solid #ECEFF3; color: #5B6572; cursor: pointer;
    font-family: inherit; font-size: .78rem; font-weight: 700; text-decoration: none;
    padding: .42rem 1rem; border-radius: 999px; transition: all .15s;
}
.hero-pill:hover{
    border-color: rgba(251, 139, 36, .5); color: var(--c-plum, #5f0f40);
    transform: translateY(-1px);
}
.hero-pill--offers{
    color: var(--c-plum, #5f0f40); background: rgba(251, 139, 36, .1);
    border-color: rgba(251, 139, 36, .38);
}
.hero-pill--offers:hover{ background: rgba(251, 139, 36, .18); }

/* ===== الشاشات الصغيرة ===== */
/* من يفضّل تقليل الحركة: الصور تظهر ثابتة في أماكنها بلا أي حركة */
@media (prefers-reduced-motion: reduce){
    .fx{ opacity: 1; animation: none; transform: rotate(var(--rot, 0deg)); }
}

@media (max-width: 760px){
    .hero-stage{ min-height: 0; padding-top: 1.5rem; }
    .fx{ display: none; }                 /* شاشة الجوال تبقى نظيفة تماماً */
    .hero-line{ height: 13rem; opacity: .35; }
    .g-search{ padding-inline-start: .9rem; }
    .g-search-go{ padding: .72rem 1.1rem; }
}



/* ---------- 3) حاوية نتائج البحث ---------- */
.zs-results{
    opacity: 0; transform: translateY(10px);
    transition: opacity .28s ease .06s, transform .28s ease .06s;
}
.zs-results.is-open{ opacity: 1; transform: none; }

.zs-budget{
    background: #fff; border: 1px solid #eef1f5; border-radius: 1.1rem;
    padding: 1rem 1.2rem; margin-bottom: 1.5rem;
    box-shadow: 0 10px 24px -20px rgba(15, 23, 42, .35);
}
.zs-budget-head{
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem;
}
.zs-budget-title{ font-size: .86rem; font-weight: 800; color: #0f172a; margin: 0; }
.zs-budget-out{ font-size: .78rem; font-weight: 700; color: #64748b; }
.zs-budget-out strong{ color: var(--c-plum, #5f0f40); font-size: .95rem; }
.zs-budget-range{
    width: 100%; height: .4rem; border-radius: 999px; background: #eef1f5;
    accent-color: var(--c-orange, #FB8B24); cursor: pointer; appearance: none;
}

.cards-sec{ width: 100%; }
.cards-sec-head{ display: flex; justify-content: flex-end; margin-bottom: .9rem; }
.cards-count{ font-size: .8rem; font-weight: 700; color: #94a3b8; }

@media (prefers-reduced-motion: reduce){
    .hero-stage, .zs-results, .g-search{ transition: none; }
}

/* ---------- صفحة العروض: العنوان والحالة الفارغة ---------- */
.of-page-head{ margin-bottom: 1.75rem; }
.of-page-title{ font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; color: #0f172a; margin: 0; }
.of-page-sub{ font-size: .85rem; color: #94a3b8; margin-top: .3rem; }

.of-blank{
    text-align: center; padding: 4rem 1.5rem;
    border: 1px dashed #e7eaef; border-radius: 1.5rem; background: #fcfcfd;
}
.of-blank-ico{ font-size: 2rem; color: var(--c-orange, #FB8B24); margin: 0 0 .6rem; }
.of-blank-title{ font-size: 1.15rem; font-weight: 900; color: #0f172a; margin: 0; }
.of-blank-text{ font-size: .88rem; color: #94a3b8; margin-top: .5rem; line-height: 1.9; }
.of-blank-actions{
    margin-top: 1.5rem; display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 1rem;
}
.of-blank-btn{
    background: var(--c-plum, #5f0f40); color: #fff; text-decoration: none;
    font-size: .84rem; font-weight: 800; padding: .7rem 1.7rem; border-radius: .9rem;
    transition: opacity .15s;
}
.of-blank-btn:hover{ opacity: .9; }
.of-blank-link{
    font-size: .8rem; font-weight: 700; color: #64748b; text-decoration: none;
    border-bottom: 1px solid #e2e8f0;
}
.of-blank-link:hover{ color: var(--c-plum, #5f0f40); }

/* ======================================================================
   لوحة التحكم: الخصومات والعروض (بناء المنيو)
   ====================================================================== */

/* ---------- شارة الخصم على الطبق ---------- */
.b-badge--offer{
    background: rgba(251, 139, 36, .14); color: #8a4a06;
    border: 1px solid rgba(251, 139, 36, .4); font-weight: 800;
}
.b-badge--offer.is-expired{
    background: #f1f5f9; color: #64748b; border-color: #e2e8f0;
}
.b-icon-btn.is-on{
    background: rgba(251, 139, 36, .14); border-color: rgba(251, 139, 36, .45);
}

/* ---------- وضع تحديد عدة أطباق ---------- */
.b-select-bar{
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem;
    background: #faf7f9; border: 1px solid rgba(95, 15, 64, .18);
    border-radius: .9rem; padding: .7rem 1rem; margin-bottom: 1rem;
}
.b-select-count{ font-size: .82rem; font-weight: 700; color: var(--c-plum, #5f0f40); }
.b-select-actions{ margin-inline-start: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.b-select-all{ font-size: .82rem; font-weight: 700; }

.b-pick{ display: flex; align-items: center; padding-inline-end: .2rem; }
.b-pick input{ width: 1.05rem; height: 1.05rem; accent-color: var(--c-plum, #5f0f40); cursor: pointer; }
.b-dish.is-picked{ background: #fdf8fb; box-shadow: inset 0 0 0 1.5px rgba(95, 15, 64, .3); }

#select-mode-btn.is-on{
    background: var(--c-plum, #5f0f40); border-color: var(--c-plum, #5f0f40); color: #fff;
}

/* ---------- نافذة الخصم ---------- */
.b-modal-box--sm{ max-width: 34rem; }

.of-target{
    background: #f8fafc; border: 1px solid #eef1f5; border-radius: .7rem;
    padding: .6rem .85rem; font-size: .83rem; font-weight: 700; color: #475569;
    margin-bottom: 1rem;
}

.of-modes, .of-scope{ display: flex; flex-wrap: wrap; gap: .5rem; }
.of-mode{
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    border: 1px solid #e2e8f0; border-radius: .7rem; padding: .5rem .9rem;
    font-size: .82rem; font-weight: 700; color: #475569; transition: all .15s;
}
.of-mode:has(input:checked){
    border-color: var(--c-plum, #5f0f40); background: #faf7f9; color: var(--c-plum, #5f0f40);
}
.of-mode input{ accent-color: var(--c-plum, #5f0f40); }
.of-mode[hidden]{ display: none; }

.of-branches{
    display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .7rem;
    background: #f8fafc; border: 1px solid #eef1f5; border-radius: .7rem; padding: .7rem .85rem;
}

.of-range{
    width: 100%; height: .4rem; border-radius: 999px; background: #eef1f5;
    accent-color: var(--c-orange, #FB8B24); cursor: pointer; appearance: none;
}

.b-switch-text{ font-size: .82rem; font-weight: 700; color: #475569; }

/* «عرض مميّز» — قرار إدارة المنصة، يظهر للمطعم كشارة فقط */
.b-badge--star{
    background: rgba(95, 15, 64, .1); color: var(--c-plum, #5f0f40);
    border: 1px solid rgba(95, 15, 64, .25); font-weight: 800;
}
.of-sponsor-note{
    background: #f8fafc; border: 1px solid #eef1f5; border-radius: .7rem;
    padding: .6rem .8rem; line-height: 1.9; margin-top: .3rem;
}

/* نافذة إلغاء الخصم */
#unoffer-scope{ cursor: pointer; }
.dash-btn--danger{
    background: #9A031E; border-color: #9A031E; color: #fff;
}
.dash-btn--danger:hover{ background: #7d0218; border-color: #7d0218; }

/* شارة فرع العرض في بطاقات العروض العامة */
.of-card-branch{ color: #64748b; font-weight: 600; }

/* شعار الصفحات الفرعية */
.am-logo{ display: inline-flex; align-items: center; line-height: 0; }
.am-logo img{ height: 2.1rem; width: auto; display: block; }
@media (max-width: 640px){ .am-logo img{ height: 1.7rem; } }

/* ======================================================================
   partner.php — بوابة الشركاء (إدارة المطاعم)
   ====================================================================== */
.pt-main{
    width: 100%; max-width: 62rem; margin: 0 auto; flex: 1;
    padding: clamp(1.75rem, 5vh, 3.5rem) 1.25rem 3.5rem;
}

/* ---------- الافتتاحية ---------- */
.pt-hero{
    text-align: center; max-width: 42rem; margin: 0 auto clamp(2.5rem, 6vh, 4rem);
    display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.pt-badge{
    display: inline-flex; align-items: center; font-size: .7rem; font-weight: 800;
    letter-spacing: .1em; color: var(--c-plum, #5f0f40);
    background: rgba(251, 139, 36, .12); border: 1px solid rgba(251, 139, 36, .32);
    padding: .32rem .9rem; border-radius: 999px;
}
.pt-title{
    font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 900; line-height: 1.4;
    letter-spacing: -.02em; color: #000; margin: 0;
}
.pt-sub{
    font-size: clamp(.9rem, 2.2vw, 1.05rem); font-weight: 600; line-height: 1.85;
    color: #4B5563; margin: 0; max-width: 36rem;
}

.pt-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: .4rem; }
.pt-btn{
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
    font-family: inherit; font-size: .88rem; font-weight: 800;
    padding: .8rem 1.9rem; border-radius: .9rem; border: 1px solid transparent;
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.pt-btn:hover{ transform: translateY(-1px); }
.pt-btn--main{
    background: var(--c-plum, #5f0f40); color: #fff;
    box-shadow: 0 12px 26px -16px rgba(95, 15, 64, .9);
}
.pt-btn--main:hover{ background: #75144f; }
.pt-btn--ghost{ background: #fff; color: #475569; border-color: #e2e8f0; }
.pt-btn--ghost:hover{ color: var(--c-plum, #5f0f40); border-color: rgba(95, 15, 64, .3); }

.pt-points{
    display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem;
    margin: .6rem 0 0; padding: 0; list-style: none;
    font-size: .8rem; font-weight: 700; color: #64748b;
}
.pt-points li{ display: inline-flex; align-items: center; gap: .35rem; }
.pt-points span{ color: var(--c-orange, #FB8B24); }

/* ---------- صفحات الإدارة ---------- */
.pt-sec{ margin-bottom: clamp(2rem, 5vh, 3.25rem); }
.pt-sec-head{ margin-bottom: 1.25rem; }
.pt-sec-title{ font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 900; color: #0f172a; margin: 0; }
.pt-sec-sub{ font-size: .84rem; color: #94a3b8; margin-top: .3rem; }

.pt-grid{
    display: grid; gap: .9rem;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.pt-card{
    --card-radius: 1.1rem;
    display: flex; align-items: flex-start; gap: .85rem; text-decoration: none;
    padding: 1.05rem 1.1rem;
}
.pt-card:hover{
    transform: translateY(-2px); border-color: rgba(95, 15, 64, .2);
    box-shadow: 0 16px 34px -24px rgba(95, 15, 64, .5);
}
.pt-card-ico{
    flex: none; width: 2.6rem; height: 2.6rem; border-radius: .8rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    background: #faf7f9; border: 1px solid rgba(95, 15, 64, .1);
}
.pt-card-body{ display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.pt-card-title{ font-size: .95rem; font-weight: 800; color: #0f172a; }
.pt-card-text{ font-size: .79rem; font-weight: 500; line-height: 1.8; color: #7c8797; }
.pt-card-go{
    flex: none; margin-inline-start: auto; align-self: center;
    font-size: .9rem; color: #cbd5e1; transition: color .16s ease;
}
.pt-card:hover .pt-card-go{ color: var(--c-plum, #5f0f40); }
.pt-card--locked .pt-card-go{ font-size: .78rem; }

/* ---------- دعوة أخيرة ---------- */
.pt-cta{
    text-align: center; border-radius: 1.4rem; padding: clamp(2rem, 5vh, 3rem) 1.5rem;
    background:
        radial-gradient(110% 130% at 100% 100%, rgba(251, 139, 36, .22) 0%, transparent 58%),
        linear-gradient(135deg, #34071f 0%, var(--c-plum, #5f0f40) 70%);
    color: #fff;
}
.pt-cta-title{ font-size: clamp(1.2rem, 3.4vw, 1.7rem); font-weight: 900; margin: 0; }
.pt-cta-text{ font-size: .9rem; color: rgba(255, 255, 255, .8); margin: .5rem 0 1.4rem; }
.pt-cta .pt-btn--main{ background: #fff; color: var(--c-plum, #5f0f40); }
.pt-cta .pt-btn--main:hover{ background: var(--c-orange, #FB8B24); color: #fff; }
.pt-cta-note{ font-size: .8rem; color: rgba(255, 255, 255, .7); margin-top: 1rem; }
.pt-cta-note a{ color: #ffd7a8; font-weight: 800; }

@media (max-width: 480px){
    .pt-grid{ grid-template-columns: 1fr; }
    .pt-btn{ width: 100%; }
}

/* ======================================================================
   لوحة التحكم: شعار المطعم في الشريط العلوي
   ====================================================================== */
.dash-logo{ display: inline-flex; align-items: center; gap: .6rem; line-height: 0; flex: none; }
.dash-logo img{ height: 2.1rem; width: auto; max-width: 11rem; object-fit: contain; display: block; border-radius: .4rem; }
.dash-logo-name{
    font-size: 1.05rem; font-weight: 900; color: var(--c-plum, #5f0f40); line-height: 1.2;
    text-decoration: none; flex: none; white-space: nowrap;
}
.dash-logo-add{
    font-size: .68rem; font-weight: 700; line-height: 1.6; color: var(--c-orange, #FB8B24);
    background: rgba(251, 139, 36, .12); border: 1px solid rgba(251, 139, 36, .3);
    border-radius: .5rem; padding: .18rem .5rem; text-decoration: none; white-space: nowrap; flex: none;
}
.dash-logo-add:hover{ background: rgba(251, 139, 36, .22); }
@media (max-width: 640px){
    .dash-logo img{ height: 1.75rem; }
    .dash-logo-name{ font-size: .9rem; }
    .dash-logo-add{ display: none; }
}

/* دور الموظف بجوار اسمه في الشريط العلوي */
.dash-user-role{
    display: none; font-size: .64rem; font-weight: 800; color: var(--c-orange, #FB8B24);
    background: rgba(251, 139, 36, .12); border: 1px solid rgba(251, 139, 36, .3);
    border-radius: .45rem; padding: .1rem .4rem; white-space: nowrap;
}
@media (min-width: 640px){ .dash-user-role{ display: inline-block; } }

/* ======================================================================
   الموظفون والصلاحيات (dashboard/staff.php)
   ====================================================================== */
.st-list{ display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }

.st-card{
    --card-border: var(--dash-border, #e8eaef);
    padding: 1.05rem 1.15rem; display: flex; flex-direction: column; gap: .85rem;
}
.st-card:hover{ box-shadow: 0 12px 28px -22px rgba(15, 23, 42, .5); transform: none; }
.st-card.is-off{ background: #fbfbfc; opacity: .75; }

.st-card-head{ display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.st-name{ font-size: 1rem; font-weight: 900; color: #0f172a; }
.st-role{
    font-size: .7rem; font-weight: 800; padding: .22rem .6rem; border-radius: 999px;
    background: rgba(251, 139, 36, .14); color: #8a4a06; border: 1px solid rgba(251, 139, 36, .35);
}
.st-role--owner{
    background: rgba(95, 15, 64, .1); color: var(--c-plum, #5f0f40); border-color: rgba(95, 15, 64, .25);
}
.st-badge-off{
    font-size: .68rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px;
    background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0;
}

.st-user{ display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .82rem; color: #64748b; }
.st-user code{
    direction: ltr; background: #f6f7f9; border: 1px solid #eef1f5; border-radius: .4rem;
    padding: .1rem .45rem; font-size: .8rem; font-weight: 700; color: #334155;
}

.st-chips{ display: flex; flex-wrap: wrap; gap: .35rem; }
.st-chip{
    font-size: .7rem; font-weight: 700; color: #475569;
    background: #f8fafc; border: 1px solid #eef1f5; border-radius: .5rem; padding: .22rem .55rem;
}
.st-chip--all{
    background: rgba(95, 15, 64, .08); color: var(--c-plum, #5f0f40); border-color: rgba(95, 15, 64, .2);
}
.st-chip--none{ background: #fff7ed; color: #9a3412; border-color: #fed7aa; }

.st-last{ margin: 0; font-size: .72rem; color: #94a3b8; }
.st-last--never{ color: #cbd5e1; }

.st-card-actions{
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    padding-top: .75rem; border-top: 1px solid #f1f5f9;
}
.st-owner-note{
    margin: 0; padding-top: .75rem; border-top: 1px solid #f1f5f9;
    font-size: .74rem; color: #94a3b8; font-weight: 600;
}

/* صناديق الصلاحيات في النافذة */
.st-perms-grid{
    display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    background: #f8fafc; border: 1px solid #eef1f5; border-radius: .75rem; padding: .85rem;
    margin-top: .4rem;
}
.st-perm{
    display: flex; align-items: center; gap: .5rem; cursor: pointer;
    font-size: .84rem; font-weight: 700; color: #475569;
}
.st-perm input{
    width: 1.05rem; height: 1.05rem; flex: none; cursor: pointer;
    accent-color: var(--c-orange, #FB8B24);
}
.st-perm:has(input:checked){ color: var(--c-plum, #5f0f40); }

@media (max-width: 520px){
    .st-list{ grid-template-columns: 1fr; }
}

/* ======================================================================
   تبديل اللغة (عربي / English)
   ====================================================================== */
.zs-head-tools{ display: inline-flex; align-items: center; gap: .5rem; }

/* زر اللغة في الشريط العلوي للوحة التحكم */
.dash-lang{
    font-size: .72rem; font-weight: 800; color: #64748b; text-decoration: none;
    background: #f6f7f9; border: 1px solid #eef1f5; border-radius: .6rem;
    padding: .35rem .7rem; white-space: nowrap; flex: none; transition: all .15s;
}
.dash-lang:hover{ color: var(--c-plum, #5f0f40); background: #eef1f5; }

/* ======================================================================
   زرّ اللغة في صفحة المطعم
   ----------------------------------------------------------------------
   كان عنصراً في صفّ الترويسة (margin-inline-start:auto)، وفي وضع «المنتصف»
   يصير العمودُ عموداً فينزل الزرّ سطراً كاملاً بين السطر التعريفي وأزرار
   التواصل: قياس على جوال 390px كان الفراغ بين «البايو» وشريط المواقع
   ١٢٢px مقابل ٦٦px في الوضع الجانبي — ٥٦px فراغ ميّت سببه هذا الزرّ وحده.
   الآن: يخرج من مجرى الترويسة تماماً ويُثبَّت في زاوية أعلى الترويسة (أسفل
   صورة الهيدر مباشرة) في الوضعين وعلى كل العروض: في جهة نهاية السطر — يسار
   الصفحة في العربية ويمينها في الإنجليزية — فلا يزاحم الشعار في أي وضع.
   موضعه نسبةً إلى .rest-container لا إلى .rest-hero-inner: الأخير يُسحب
   فوق صورة الغلاف (margin-top:-2.25rem) فكان الزرّ يرتفع معه على الصورة.
   ====================================================================== */
/* الموضع الآن: زاوية **الغلاف** نفسه لا زاوية الترويسة. فبذلك لا يحجز شيئاً
   من عرض النصّ أصلاً (كان يحجز 84px من 328px على جوال 360px)، ويقف فوق صورة
   بخلفية بيضاء وظلّ خفيف فيُقرأ فوق أي صورة. وبلا غلاف يبقى في زاوية
   الترويسة كما كان. */
.rest-cover{ position: relative; }
.rest-hero .rest-container{ position: relative; }
/* ---------- جهة الزرّ: بـ left/right صريحتين لا بـ inset-inline-* ----------
   الزرّ نفسه يحمل direction: ltr (ليُقرأ «AR / EN» من اليسار لليمين كما
   يُكتب)، والمتصفح يحلّ inset-inline-end بحسب اتجاه العنصر نفسه لا اتجاه
   الصفحة — فكان يقف في الجهة نفسها في اللغتين. وهذا هو سبب أن الزرّ لم يكن
   «حسب اللغة» أبداً في وضع المنتصف، وكان يركب على الشعار في العربية مع صورة
   غلاف من عرض 768px وما فوق (قياسٌ مثبَّت في فحص التصادم).
   الآن: قاعدتان صريحتان باتجاه الصفحة — يسار الصفحة في العربية ويمينها في
   الإنجليزية، أي في جهة نهاية السطر دائماً بعيداً عن الشعار. */
.rest-lang{
    position: absolute; top: .75rem; z-index: 4;
    font-size: .72rem; font-weight: 800; text-decoration: none; white-space: nowrap;
    color: var(--c-brand, #5f0f40); background: #fff;
    border: 1px solid rgba(0, 0, 0, .08); border-radius: .6rem;
    padding: .35rem .7rem; transition: all .15s;
    box-shadow: 0 2px 8px -4px rgba(15, 23, 42, .25);
}
[dir="rtl"] .rest-lang{ left: 1rem; right: auto; }
[dir="ltr"] .rest-lang{ right: 1rem; left: auto; }
@media (min-width: 768px){
    [dir="rtl"] .rest-lang{ left: 1.5rem; }
    [dir="ltr"] .rest-lang{ right: 1.5rem; }
}
.rest-lang:hover{ background: var(--c-brand-soft, #f6f7f9); }
/* لم يعد يحجز مكاناً من عرض النصّ: لا padding-inline-end ولا padding-top.
   ومع الغلاف يقف في زاويته العليا، وبلا غلاف في زاوية الترويسة. */
.rest-hero--with-cover .rest-lang{ top: auto; bottom: calc(100% + .75rem); }
@media (max-width: 480px){
    .dash-lang{ padding: .3rem .55rem; }
}

/* الشريط العلوي على الجوال: أضفنا زر اللغة، فنمنح العناصر حرية الانكماش
   بدل أن تدفع الصفحة إلى تمرير أفقي. */
@media (max-width: 640px){
    .dash-topbar{ gap: .5rem; }
    .dash-topbar-actions{ gap: .4rem; min-width: 0; }
    .dash-logo{ min-width: 0; overflow: hidden; }
    .dash-logo-name{ overflow: hidden; text-overflow: ellipsis; max-width: 6.5rem; white-space: nowrap; }
    .branch-switch{ min-width: 0; }
    .branch-select{ max-width: 4.5rem; }
    /* الاسم مخفي أصلاً على الجوال، فالدائرة التعريفية وحدها لا تضيف معنى */
    .dash-user{ display: none; }
    /* أزرار الشريط أصغر: نصوصها الإنجليزية أطول من العربية */
    .dash-topbar-actions .dash-btn{ padding: .35rem .55rem; font-size: .7rem; }
}

/* ======================================================================
   اسم المستخدم (dashboard/staff.php)
   صار الاسم وحده بلا لاحقة مطعم: المطعم محفوظ في الحساب نفسه، ورابط دخول
   الموظفين هو من يحمله. فحُذفت كلاسات اللاحقة الثلاثة ولم يبق إلا نموذج
   الاسم الصغير الملوّن في النصوص المساعدة.
   ====================================================================== */
.st-user-sample{
    font-size: .74rem; font-weight: 800; color: var(--c-orange, #FB8B24);
    background: rgba(251, 139, 36, .1); border-radius: .4rem; padding: .05rem .35rem;
}
/* لاحقة المطعم بجانب اسم الموظف في بطاقته */
.st-user-tenant{ font-size: .72rem; font-weight: 700; color: #94a3b8; }

/* بطاقة «رابط دخول موظفيك» أعلى صفحة الموظفين */
.st-link-card{ padding: 1rem 1.1rem; margin-bottom: 1.1rem; }
.st-link-title{ font-size: .98rem; font-weight: 800; color: var(--dash-text, #0f172a); margin: 0 0 .25rem; }
.st-link-sub{ font-size: .82rem; font-weight: 500; color: #64748b; line-height: 1.6; margin: 0 0 .7rem; }
.st-link-row{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.st-link-input{
    flex: 1 1 16rem; min-width: 0; font-size: .82rem; font-weight: 700;
    background: #f8fafc; cursor: text;
}

/* ======================================================================
   صفحتا الدخول: المالك والموظفون — زر اللغة ورابط التبديل بينهما
   ====================================================================== */
.auth-card-top{
    display: flex; align-items: center; justify-content: flex-start;
    margin-bottom: 1rem;
}
.auth-switch-row{
    margin: -.35rem 0 1.1rem; font-size: .82rem; font-weight: 700; color: #94a3b8;
}
.auth-switch-link{
    color: var(--c-plum, #5f0f40); font-weight: 900; text-decoration: none;
    border-bottom: 1.5px solid rgba(95, 15, 64, .25); padding-bottom: .05rem;
    transition: border-color .15s;
}
.auth-switch-link:hover{ border-bottom-color: var(--c-plum, #5f0f40); }

/* ======================================================================
   تنبيه تأخّر الطلبات (SLA) — شاشة الكاشير
   الوميض على حافة الكرت كلها ليُلتقط بطرف العين من بعيد، ويتدرّج مع التأخير.
   يضع الكلاسات assets/js/orders-live.js على الطلبات الجديدة وحدها.
   ====================================================================== */
@keyframes order-late-pulse{
    0%, 100%{ box-shadow: 0 0 0 0 var(--order-late-glow); border-color: var(--order-late); }
    50%     { box-shadow: 0 0 0 .5rem transparent;        border-color: var(--order-late); }
}

.order-card.is-late-5,
.order-card.is-late-10,
.order-card.is-late-15{
    border: 2px solid var(--order-late);
    border-top: 4px solid var(--order-late);
    animation: order-late-pulse 1.8s ease-in-out infinite;
}

/* ٥ دقائق — أخضر: انتبه، الطلب ينتظر */
.order-card.is-late-5{
    --order-late: #10b981;
    --order-late-glow: rgba(16, 185, 129, .45);
}

/* ١٠ دقائق — برتقالي: تأخّر */
.order-card.is-late-10{
    --order-late: var(--c-orange, #FB8B24);
    --order-late-glow: rgba(251, 139, 36, .45);
    animation-duration: 1.4s;
}

/* ١٥ فأكثر — أحمر: متأخر جداً، ومعه خلفية خفيفة تلفت النظر */
.order-card.is-late-15{
    --order-late: #ef4444;
    --order-late-glow: rgba(239, 68, 68, .5);
    animation-duration: 1s;
    background: #fff5f5;
}
.order-card.is-late-15 .order-time{ color: #dc2626; font-weight: 800; }

/* ======================================================================
   ست ساعات فأكثر — أسود: طلب منسيّ لا «متأخر»
   بلا وميض عن قصد: الوميض للطلب الذي ما زال يُنتظر الآن. وهذا مضى عليه
   نصف يوم، فالأسود الثابت يفصله بصرياً عن سلّم الدقائق الأخضر/البرتقالي/الأحمر
   ولا يزاحمه في لفت النظر.
   ====================================================================== */
.order-card.is-late-6h{
    --order-late: #0f172a;
    --order-late-glow: rgba(15, 23, 42, .35);
    border: 2px solid #0f172a;
    border-top: 4px solid #0f172a;
    background: #f1f5f9;
    animation: none;
    opacity: .96;
}
.order-card.is-late-6h .order-time{ color: #0f172a; font-weight: 800; }
.order-card.is-late-6h .order-id{ color: #0f172a; }
.order-card.is-late-6h .order-table{ background: #e2e8f0; border-color: #cbd5e1; color: #0f172a; }
/* شارة تقول للكاشير لماذا اسودّت البطاقة */
.order-card.is-late-6h .order-head::after{
    content: attr(data-stale-label);
    align-self: flex-start; margin-inline-start: auto;
    font-size: .64rem; font-weight: 800; letter-spacing: .02em;
    background: #0f172a; color: #fff; border-radius: 9999px; padding: .12rem .5rem;
}

/* من يفضّل تقليل الحركة في نظامه: يبقى اللون ويتوقف الوميض */
@media (prefers-reduced-motion: reduce){
    .order-card.is-late-5,
    .order-card.is-late-10,
    .order-card.is-late-15{ animation: none; box-shadow: 0 0 0 .25rem var(--order-late-glow); }
}

/* مجموعة «إزالة مكوّنات» في محرّر خيارات الطبق: بلا أسعار */
.addon-group-card.is-remove .addon-opt-price{ display: none; }
.addon-group-card.is-remove{ border-color: rgba(148, 163, 184, .55); background: #f8fafc; }
.b-check--sm{ font-size: .72rem; font-weight: 700; color: #64748b; margin-top: .35rem; }

/* ======================================================================
   نافذة الطلب: تفاصيل الطبق فوق الإضافات والإزالة
   ====================================================================== */
.addon-about{ padding: 0 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.addon-about:empty{ display: none; }
/* مقاس صندوق الصورة وطريقة عرضها في قسم «التحديث 16» أسفل الملف:
   صندوق ثابت ٤:٣ والصورة كاملة بلا قصّ. */
.addon-media img{ width: 100%; display: block; }
.addon-desc{ font-size: .85rem; line-height: 1.8; color: #475569; }
.addon-about-sec{ display: flex; flex-direction: column; gap: .4rem; }
.addon-about-label{ font-size: .72rem; font-weight: 900; color: #94a3b8; }

/* مجموعة الإزالة: هادئة بصرياً، فهي لا تزيد السعر */
.addon-group--remove{ background: #f8fafc; }
.addon-group--remove .addon-option-name{ color: #475569; }

/* ======================================================================
   «طلباتي» — متابعة الزبون لحالة طلبه
   الزر بجانب زر السلة، ومعه نقطة تنبيه عند تغيّر الحالة.
   ====================================================================== */
#orders-fab{
    position: fixed; bottom: 1.25rem; inset-inline-end: 5.25rem; z-index: var(--z-floating);
    width: 3rem; height: 3rem; border-radius: 9999px; cursor: pointer;
    border: 1.5px solid rgba(95, 15, 64, .18);
    background: #fff; color: var(--c-plum, #5f0f40);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 22px -8px rgba(15, 23, 42, .3); transition: transform .15s ease;
}
#orders-fab:hover{ transform: translateY(-2px); }
#orders-fab-dot{
    position: absolute; top: .1rem; inset-inline-end: .1rem;
    width: .7rem; height: .7rem; border-radius: 9999px;
    background: #ef4444; border: 2px solid #fff;
}
@media (max-width: 480px){ #orders-fab{ inset-inline-end: 4.75rem; width: 2.75rem; height: 2.75rem; } }

/* النافذة */
.go-overlay{
    position: fixed; inset: 0; z-index: var(--z-modal); display: none;
    align-items: center; justify-content: center; padding: 1rem;
    background: rgba(15, 23, 42, .55);
}
.go-overlay.open{ display: flex; }
.go-box{
    width: 100%; max-width: 28rem; max-height: 85vh; overflow: auto;
    background: #fff; border-radius: 1.25rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .3);
}
.go-head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.1rem .6rem; border-bottom: 1px solid #f1f5f9;
}
.go-title{ font-size: 1.05rem; font-weight: 900; color: var(--c-plum, #5f0f40); }
.go-body{ padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .9rem; }
.go-empty{ font-size: .85rem; color: #94a3b8; text-align: center; padding: 1.5rem 0; }

/* بطاقة طلب */
.go-card{ border: 1px solid #e2e8f0; border-radius: 1rem; padding: .85rem .9rem; }
.go-card.is-cancelled{ opacity: .6; }
.go-card-head{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.go-card-id{ font-size: .9rem; font-weight: 900; color: #0f172a; }
.go-card-status{
    font-size: .68rem; font-weight: 900; border-radius: .5rem; padding: .18rem .5rem;
    background: #f1f5f9; color: #475569;
}
.go-card-status--new{ background: rgba(239, 68, 68, .12); color: #dc2626; }
.go-card-status--preparing{ background: rgba(251, 139, 36, .15); color: #c2410c; }
.go-card-status--done{ background: rgba(16, 185, 129, .15); color: #047857; }
.go-card-table{ margin-top: .25rem; font-size: .72rem; font-weight: 700; color: #64748b; }
.go-card-items{ margin-top: .35rem; font-size: .78rem; color: #475569; line-height: 1.7; }

/* المسار الزمني */
.go-steps{ display: flex; align-items: flex-start; gap: .25rem; margin-top: .8rem; }
.go-step{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; position: relative; }
.go-step::before{
    content: ''; position: absolute; top: .42rem; inset-inline-start: 50%;
    width: 100%; height: 2px; background: #e2e8f0;
}
.go-step:last-child::before{ display: none; }
.go-step-dot{
    width: .9rem; height: .9rem; border-radius: 9999px; background: #e2e8f0;
    position: relative; z-index: 1; transition: background .2s;
}
.go-step-label{ font-size: .64rem; font-weight: 800; color: #94a3b8; text-align: center; }
.go-step.is-done .go-step-dot{ background: #10b981; }
.go-step.is-done .go-step-label{ color: #047857; }
.go-step.is-now .go-step-dot{ background: var(--c-orange, #FB8B24); box-shadow: 0 0 0 .22rem rgba(251, 139, 36, .22); }
.go-step.is-now .go-step-label{ color: #c2410c; }
.go-step.is-off .go-step-dot{ background: #e2e8f0; }

/* الإشعار المؤقت أعلى الشاشة */
.go-toast{
    position: fixed; top: 1rem; inset-inline: 1rem; z-index: var(--z-toast); margin: 0 auto;
    max-width: 24rem; text-align: center;
    background: #0f172a; color: #fff; border-radius: .9rem;
    padding: .7rem 1rem; font-size: .82rem; font-weight: 800;
    box-shadow: 0 18px 35px -12px rgba(0, 0, 0, .5);
    opacity: 0; transform: translateY(-.6rem); transition: opacity .25s, transform .25s;
}
.go-toast.is-on{ opacity: 1; transform: translateY(0); }

/* ======================================================================
   التحديث 16 — مقاسات البطاقة ونافذة الطلب + خيارات وإضافات الصنف
   ====================================================================== */

/* ---------- بطاقة الطبق في الشبكة: مقاس واحد لكل البطاقات ----------
   المشكلة التي يحلّها هذا القسم: كانت البطاقة تنكمش إذا لم تُرفع صورة للطبق
   (١٠٩px بدل ٥١٢px في نفس الصف)، ويختلف ارتفاعها باختلاف ما كُتب فيه.
   الآن: صندوق صورة مربّع دائماً، واسم بسطرين محجوزين، وصفّ السعر بالأسفل. */
.rest-grid{ align-items: stretch; }
.dish-card--grid{
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
}

/* ======================================================================
   بطاقة الطبق في الشبكة — عمود مرن (flex column)
   ----------------------------------------------------------------------
   البنية كما اتفقنا:
       .dish-card--grid   display:flex; flex-direction:column; height:100%
       .dish-card-body    flex:1  → يأخذ ما تبقّى من ارتفاع البطاقة
       .dish-card-desc    flex:1  → الوصف هو الذي يتمدّد، لا ارتفاع ثابت له
       .dish-card-foot    margin-top:auto → السعر والزر على خط واحد في كل
                                            البطاقات مهما اختلف طول الوصف
   ولا رقم سحري في أي سطر: كل شيء يتمدّد مع المحتوى وحجم خط المتصفح.
   ====================================================================== */

/* صندوق الصورة: يملأ أعلى البطاقة بنسبة 4:3 بلا أي هامش.
   ----------------------------------------------------------------------
   كان هنا إطار داخلي (هوامش .7rem) مع object-fit: contain، ونتيجته أن أي
   صورة لا تطابق نسبة 4:3 تُرسَم أصغر من صندوقها ويظهر ما حولها لوناً
   افتراضياً: صورة مربّعة 600×600 في صندوق 334×250 تُرسَم 250×250 فتُهدَر
   ٢٠٨٦٧px² (٢٥٪ من الصندوق)، وصورة طولية 480×720 تُرسَم 167×250 فتُهدَر
   ٥٠٪ منه — فتبدو صورة الطبق «مربّعة» وسط فراغ رمادي وتضيع جودتها.
   الآن: الصندوق ملتصق بحافّتي البطاقة وأعلاها (width:100%; margin:0) والصورة
   cover، فتأخذ مقاس البطاقة كاملاً دائماً أياً كانت أبعاد ما يرفعه المدير.
   والقصّ من الوسط (object-position: center) وهو موضع الطبق في صور الطعام. */
.dish-card-media{
    position: relative; flex: 0 0 auto;
    aspect-ratio: 4 / 3; width: 100%; margin: 0;
    background: #f6f7fa; overflow: hidden; cursor: pointer;
    /* الزوايا العليا بنصف قطر البطاقة نفسه: الصورة تتبع حافّة البطاقة تماماً.
       (البطاقة نفسها overflow:hidden فلا تتسرّب الصورة من زواياها.) */
    border-start-start-radius: calc(var(--card-radius) - 1px);
    border-start-end-radius: calc(var(--card-radius) - 1px);
}
@media (prefers-reduced-motion: reduce){
    .dish-card--grid:hover .dish-card-media-img{ transform: none; }
}
/* ---------- صورة الطبق: الطبق وحده بمقاساته، بلا قصّ وبلا خلفية مشوّشة ----------
   كانت خلف كل صورة نسخةٌ منها مكبّرة ومشوّشة تملأ الصندوق. أُزيلت: الصندوق
   الآن بلون هادئ واحد والطبق وحده فوقه.

   ولماذا scale-down لا contain؟ هما متطابقان تماماً في كل صورة أكبر من
   الصندوق — أي كل صورة طبيعية. ويفترقان في الصورة الأصغر منه وحدها:
   قياسٌ على صندوق 356×267 بصورة 120×90 — contain تكبّرها **٢٫٩٧ ضعفاً**
   فتخرج ضبابية مكسّرة، و scale-down تُبقيها 120×90 حادّة في وسط الصندوق.
   والمطعم يرفع ما عنده — وكثير منه صور صغيرة من واتساب — فالضمان بألّا
   تُكبَّر صورة فوق مقاسها الأصلي يستحقّ، ولا يكلّف شيئاً في الصور الكبيرة. */
.dish-card-media-img{
    width: 100%; height: 100%; object-fit: scale-down; object-position: center;
    display: block; transition: transform .3s ease;
}
.dish-card--grid:hover .dish-card-media-img{ transform: scale(1.03); }
.dish-card-media--empty{ display: flex; align-items: center; justify-content: center; background: var(--c-brand-soft, #f1f5f9); }
.dish-card-media-ico{ width: 34%; max-width: 5rem; height: auto; color: var(--c-brand, var(--c-plum)); opacity: .38; }

/* جسم البطاقة يأخذ بقية الارتفاع ويوزّعه على أبنائه */
.dish-card-body{ display: flex; flex-direction: column; flex: 1; min-height: 0; padding: .8rem .95rem 1rem; gap: .25rem; }

.dish-card-name{
    font-size: 1rem; font-weight: 800; color: #0f172a; line-height: 1.35; cursor: pointer;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* الوصف هو المساحة المرنة: يتمدّد ليملأ الفراغ المتبقي فيدفع السعر للأسفل */
.dish-card-desc{
    flex: 1;
    font-size: .84rem; font-weight: 400; color: #64748b; line-height: 1.5; cursor: pointer;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* الصفّ السفلي ملتصق بالأسفل دائماً — حتى في بطاقة بلا وصف إطلاقاً */
.dish-card-foot{
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .55rem;
}
.dish-card-price{ display: inline-flex; align-items: baseline; gap: .25rem; font-size: 1.15rem; font-weight: 900; color: var(--c-plum); }
/* كلمة العملة أصغر من الرقم قليلاً */
.dish-card-cur{ font-size: .72em; font-weight: 800; }

.rest-grid--compact .dish-card-media{ width: 100%; margin: 0; }
.rest-grid--compact .dish-card-body{ padding: .65rem .7rem .8rem; }
.rest-grid--compact .dish-card-name{ font-size: .86rem; min-height: 2.32rem; }
.rest-grid--compact .dish-card-price{ font-size: .95rem; }

/* ---------- نافذة الطلب: مقاس ثابت ومنطقة تمرير واحدة ----------
   المشكلة التي يحلّها هذا القسم: كانت التفاصيل خارج منطقة التمرير، فإذا كتب
   المطعم المكوّنات والوسوم انكمشت منطقة الخيارات من ٢٤٤px إلى ٨٥px على شاشة
   الجوال. الآن التفاصيل والخيارات في صندوق تمرير واحد: المقاس ثابت ولا يُسحَق
   قسم لحساب قسم آخر. */
.addon-scroll{
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; -webkit-overflow-scrolling: touch;
}
.addon-scroll > .addon-about,
.addon-scroll > .addon-body{ flex: 0 0 auto; }
.addon-body{ overflow: visible; }

/* الصورة الغلافية: ملتصقة بالحافة العلوية للنافذة بلا أي هامش حولها،
   وبمقاس ثابت فلا يتغيّر شكل النافذة بوجود المكوّنات والوسوم أو غيابها. */
.addon-hero{
    flex: 0 0 auto; position: relative;
    aspect-ratio: 4 / 3; max-height: 16rem; width: 100%;
    overflow: hidden; background: #f8fafc;
}
/* صورة نافذة الطلب: كاملة بلا قصّ — فالزبون هنا يفحص الطبق قبل أن يطلبه،
   وقصّ أطرافه في هذا الموضع يخفي عنه ما يشتريه. وبلا خلفية مشوّشة خلفها:
   الطبق وحده بمقاساته على لون هادئ واحد. */
.addon-hero-img{ width: 100%; height: 100%; object-fit: scale-down; object-position: center; display: block; }
.addon-about{ padding: 1rem 1.15rem 0; }

/* ---------- الخيارات في نافذة الطلب ---------- */
.addon-option--skip .addon-option-name{ color: #94a3b8; font-weight: 700; }
.addon-option input:disabled{ cursor: not-allowed; opacity: .45; }
.addon-option input:disabled ~ .addon-option-name{ color: #94a3b8; }
.addon-group.is-full{ border-color: #e2e8f0; background: #fbfcfe; }

/* ---------- محرّر المجموعات في اللوحة وصفحة الإضافة ---------- */
.addon-group-names{ display: grid; grid-template-columns: 1fr; gap: .45rem; flex: 1; min-width: 10rem; }
@media (min-width: 640px){ .addon-group-names{ grid-template-columns: 1fr 1fr; } }
.addon-group-rules{
    display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem;
    border-top: 1px dashed var(--dash-border, #e8ebf2); padding-top: .55rem;
}
.addon-group-rule{ display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; color: #64748b; }
/* حقول الأرقام ضيّقة، والقوائم المنسدلة بعرض محتواها حتى لا يُقتطع نصّها */
.addon-group-rule input[type="number"].dash-input{ width: 4.2rem; text-align: center; padding-block: .45rem; }
.addon-group-rule select.dash-input{ width: auto; min-width: 9.5rem; padding-block: .45rem; }
.addon-group-card.is-remove .addon-group-rules{ display: none; }
.addon-group-card.is-single .addon-group-rule--minmax{ display: none; }
.addon-opt-names{ display: grid; grid-template-columns: 1fr; gap: .4rem; flex: 1; min-width: 9rem; }
@media (min-width: 640px){ .addon-opt-names{ grid-template-columns: 1fr 1fr; } }
/* داخل الشبكة نلغي عرض الحقل القديم حتى يتساوى العمودان ولا يُقتطع الاسم الإنجليزي */
.addon-opt-names .dash-input,
.addon-group-names .dash-input{ min-width: 0; width: 100%; }

/* ---------- صفحة «إضافة طبق»: قسم الخيارات داخل النموذج ---------- */
.am-options{ border-top: 1px solid #f1f5f9; padding-top: 1.1rem; display: flex; flex-direction: column; gap: .8rem; }
.am-options-title{ font-size: .95rem; font-weight: 900; color: #0f172a; }
.am-options-sub{ font-size: .76rem; color: #64748b; margin-top: .2rem; line-height: 1.8; }

/* اسم الفرع الذي دخل منه الزبون (من باركود الطاولة) — عرض فقط، بلا اختيار */
.rest-branch-tag{
    display: inline-flex; align-items: center; gap: .3rem; margin-top: .6rem;
    font-size: .78rem; font-weight: 700; color: var(--c-plum);
    background: rgba(255, 255, 255, .72); border-radius: 9999px; padding: .25rem .7rem;
}

/* شاشة الكاشير: مفاتيح التنبيه الصوتي ومتابعة الزبون */
.order-live-toggles{ display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.order-live-hint{ display: block; font-size: .7rem; font-weight: 500; color: #94a3b8; margin-top: .1rem; }
.order-live-toggle.is-saving{ opacity: .55; pointer-events: none; }

/* صفحة «إضافة طبق جديد»: بطاقة النموذج ورسالة النتيجة داخل هيكل اللوحة */
.am-form-card{ background: #fff; border: 1px solid var(--card-border); border-radius: 1.25rem; padding: 1.25rem; }
@media (min-width: 640px){ .am-form-card{ padding: 1.75rem; } }
.am-flash{
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.1rem; padding: .9rem 1.1rem; border-radius: 1rem;
    font-size: .85rem; font-weight: 700;
}
.am-flash--ok{ background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.am-flash--bad{ background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.am-flash a{ text-decoration: underline; }

/* الرسمة البديلة في بطاقة العروض — نفس رسمة بطاقة الطبق */
.of-card-noimg-ico{ width: 34%; max-width: 4.5rem; height: auto; color: var(--c-brand, var(--c-plum)); opacity: .38; }

/* ======================================================================
   نداء النادل الذكي — شاشة الزبون
   ----------------------------------------------------------------------
   الجرس يقف بعد زر السلة. وإذا فعّل الكاشير زر «طلباتي» انزاح مكاناً
   إضافياً (call-fab--shifted) فلا يركب فوقه.
   ====================================================================== */
.call-fab{
    position: fixed; bottom: 1.25rem; inset-inline-end: 5.25rem; z-index: var(--z-floating);
    width: 3rem; height: 3rem; border-radius: 9999px; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-orange, #FB8B24); color: #fff;
    box-shadow: 0 10px 25px -8px rgba(251, 139, 36, .6);
    transition: transform .15s ease, background .15s ease;
}
/* يُفسح مكاناً لزر «طلباتي» حين يظهر فعلاً (assets/js/guest-orders.js) */
body.has-orders-fab .call-fab{ inset-inline-end: 9.25rem; }
.call-fab:hover{ transform: scale(1.07); }
.call-fab.is-sent{ background: #16a34a; transform: scale(1.12); }
@media (max-width: 480px){
    .call-fab{ inset-inline-end: 4.75rem; width: 2.75rem; height: 2.75rem; }
    body.has-orders-fab .call-fab{ inset-inline-end: 8.25rem; }
}

.call-overlay{
    position: fixed; inset: 0; z-index: var(--z-modal); margin: 0; padding: 1rem;
    background: rgba(15, 23, 42, .6); backdrop-filter: blur(3px);
    display: none; align-items: flex-end; justify-content: center;
}
.call-overlay.open{ display: flex; }
@media (min-width: 640px){ .call-overlay{ align-items: center; } }
.call-box{
    position: relative; width: 100%; max-width: 24rem; background: #fff; border-radius: 1.5rem;
    overflow: hidden; text-align: start; animation: addon-in .2s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
}
.call-box.is-busy{ opacity: .7; pointer-events: none; }
.call-head{
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.25rem .9rem;
    background: linear-gradient(140deg, var(--c-plum, #5f0f40), var(--c-brand, #5f0f40));
    color: #fff;
}
.call-title{ font-size: 1.05rem; font-weight: 900; }
.call-x{ position: static; background: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }
.call-x:hover{ background: rgba(255, 255, 255, .34); }

/* النص المتتالي: يدخل بهدوء فلا يقفز أمام عين الزبون */
.call-rotator{ margin-top: .25rem; font-size: .82rem; min-height: 1.3em; color: rgba(255, 255, 255, .85); }
#call-rotator-text{ display: inline-block; opacity: 0; transform: translateY(.35rem); transition: opacity .18s ease, transform .18s ease; }
#call-rotator-text.is-in{ opacity: 1; transform: none; }

.call-body{ padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .8rem; }
.call-actions{ display: grid; grid-template-columns: 1fr; gap: .5rem; }
.call-action{
    display: flex; align-items: center; gap: .7rem; width: 100%; cursor: pointer;
    padding: .8rem .9rem; border-radius: 1rem; border: 1.5px solid #eef1f5; background: #fff;
    font-size: .92rem; font-weight: 800; color: #0f172a; text-align: start;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.call-action:hover{ border-color: var(--c-orange, #FB8B24); background: #fffaf4; }
.call-action:active{ transform: scale(.985); }
.call-action-ico{ font-size: 1.25rem; line-height: 1; }
.call-action-text{ flex: 1; }

/* حقل الملاحظة: رمادي هادئ لا ينافس الأزرار السريعة */
.call-note{ display: flex; align-items: center; gap: .5rem; background: #f8fafc; border: 1.5px solid #eef1f5; border-radius: 1rem; padding: .35rem .5rem .35rem .9rem; }
.call-note:focus-within{ border-color: var(--c-plum, #5f0f40); background: #fff; }
.call-note-input{ flex: 1; min-width: 0; border: 0; background: transparent; font-size: .88rem; color: #0f172a; padding: .55rem 0; outline: none; }
.call-note-input::placeholder{ color: #94a3b8; }
.call-note-send{
    flex-shrink: 0; width: 2.3rem; height: 2.3rem; border-radius: 9999px; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-plum, #5f0f40); color: #fff; transition: opacity .15s ease;
}
.call-note-send:hover{ opacity: .9; }
/* أيقونة الإرسال تشير لجهة القراءة */
[dir="rtl"] .call-note-send svg{ transform: scaleX(-1); }

.call-msg{ font-size: .82rem; font-weight: 700; border-radius: .8rem; padding: .6rem .8rem; }
.call-msg--ok{ background: #ecfdf5; color: #065f46; }
.call-msg--warn{ background: #fff7ed; color: #9a3412; }

/* ======================================================================
   نداءات الطاولات — شاشة النُدّل
   ====================================================================== */
.calls-panel{
    background: #fff; border: 1px solid var(--dash-border, #e8eaef);
    border-inline-start: 4px solid var(--c-orange, #FB8B24);
    border-radius: 1.1rem; padding: .9rem 1.1rem 1rem; margin-bottom: 1rem;
    transition: box-shadow .3s ease;
}
.calls-panel.is-new{ box-shadow: 0 0 0 3px rgba(251, 139, 36, .28); }
.calls-head{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.calls-title{ display: flex; align-items: center; gap: .45rem; font-size: .95rem; font-weight: 900; color: #0f172a; }
.calls-bell{ font-size: 1rem; }
.calls-count{
    min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: 9999px;
    background: var(--c-orange, #FB8B24); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 900;
}
.calls-list{ display: grid; grid-template-columns: 1fr; gap: .55rem; }
@media (min-width: 760px){ .calls-list{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px){ .calls-list{ grid-template-columns: 1fr 1fr 1fr; } }
.calls-empty{ font-size: .82rem; color: #94a3b8; }

/* البطاقة الذكية الصغيرة: أيقونة، نص واضح، وزر إغلاق واحد */
.call-card{
    display: flex; align-items: center; gap: .65rem;
    background: #fffaf4; border: 1px solid rgba(251, 139, 36, .35); border-radius: .9rem;
    padding: .6rem .7rem; transition: opacity .2s ease, transform .2s ease;
}
.call-card.is-resolving{ opacity: .45; transform: scale(.985); pointer-events: none; }
.call-card-ico{ font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.call-card-body{ flex: 1; min-width: 0; }
.call-card-table{ font-size: .86rem; font-weight: 900; color: #0f172a; }
.call-card-text{ font-size: .8rem; color: #475569; margin-top: .1rem; word-break: break-word; }
.call-card-ago{ font-size: .68rem; color: #94a3b8; }
.call-done{
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
    border: 0; border-radius: 9999px; padding: .45rem .75rem;
    background: var(--c-plum, #5f0f40); color: #fff; font-size: .74rem; font-weight: 800;
    transition: opacity .15s ease;
}
.call-done:hover{ opacity: .9; }
@media (max-width: 420px){ .call-done span{ display: none; } }


/* ======================================================================
   لوحة المشرف العام (dashboard/super-admin.php)
   صفحة مستقلة عن لوحة المطعم: لا شريط جانبي ولا هوية مطعم — المشرف لا
   ينتمي لمطعم. اللون العنابي يبقى هوية المنصّة.
   ====================================================================== */
.sa-body{ background: #f6f7fb; }

.sa-topbar{
    position: sticky; top: 0; z-index: var(--z-header, 40);
    background: var(--c-plum, #5f0f40); color: #fff;
    box-shadow: 0 2px 14px -6px rgba(15, 23, 42, .5);
}
.sa-topbar-inner{
    max-width: 78rem; margin-inline: auto; padding: .7rem 1.1rem;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
}
.sa-brand{ font-size: 1rem; font-weight: 800; display: inline-flex; align-items: center; gap: .5rem; }
.sa-badge{
    font-size: .68rem; font-weight: 800; padding: .15rem .5rem; border-radius: 9999px;
    background: var(--c-orange, #FB8B24); color: #1f2937;
}
.sa-topbar-actions{ display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sa-topbar-actions .dash-btn{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
.sa-topbar-actions .dash-btn:hover{ background: rgba(255,255,255,.2); }

.sa-main{ max-width: 78rem; margin-inline: auto; padding: 1.25rem 1.1rem 3rem; }

.sa-tabs{ display: flex; gap: .45rem; overflow-x: auto; margin: 1rem 0 1.1rem; scrollbar-width: none; }
.sa-tabs::-webkit-scrollbar{ display: none; }
.sa-tab{
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .95rem; border-radius: 9999px; font-size: .85rem; font-weight: 700;
    color: #475569; background: #fff; border: 1px solid var(--dash-border, #e2e8f0);
}
.sa-tab span{ font-size: .7rem; font-weight: 800; background: #f1f5f9; color: #64748b; border-radius: 9999px; padding: .05rem .45rem; }
.sa-tab.is-active{ background: var(--c-plum, #5f0f40); border-color: var(--c-plum, #5f0f40); color: #fff; }
.sa-tab.is-active span{ background: rgba(255,255,255,.2); color: #fff; }

.sa-filter{ display: flex; gap: .4rem; margin-bottom: .9rem; flex-wrap: wrap; }
.sa-chip{
    display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem;
    border-radius: 9999px; font-size: .78rem; font-weight: 700; color: #64748b;
    background: #fff; border: 1px solid var(--dash-border, #e2e8f0);
}
.sa-chip.is-active{ background: #0f172a; border-color: #0f172a; color: #fff; }
.sa-chip span{ font-weight: 800; opacity: .75; }

.sa-note{
    font-size: .83rem; color: #64748b; line-height: 1.7; margin: 0 0 1rem;
    background: #fff; border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: .9rem; padding: .75rem .9rem;
}

/* الجداول: تمرير أفقي داخل الإطار وحده على الجوال */
.sa-table-wrap{
    background: #fff; border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: 1rem; overflow-x: auto; margin-bottom: 1.1rem;
}
.sa-table{ width: 100%; border-collapse: collapse; min-width: 44rem; }
.sa-table--mini{ min-width: 20rem; }
.sa-table th, .sa-table td{
    padding: .65rem .8rem; text-align: start; font-size: .83rem;
    border-bottom: 1px solid #f1f5f9; vertical-align: middle;
}
.sa-table th{ font-weight: 800; color: #64748b; background: #fafbfd; font-size: .76rem; white-space: nowrap; }
.sa-table tr:last-child td{ border-bottom: 0; }
.sa-table code{ font-size: .78rem; font-weight: 700; color: #0f172a; }
.sa-empty{ text-align: center; color: #94a3b8; padding: 1.6rem .8rem; }

.sa-rest-name{ display: block; font-weight: 800; color: #0f172a; }
.sa-slug{ display: block; font-size: .72rem; font-weight: 700; color: #94a3b8; }
.sa-warn{
    display: inline-block; font-size: .68rem; font-weight: 800; padding: .05rem .4rem;
    border-radius: .4rem; background: rgba(251, 139, 36, .14); color: #b45309; margin-inline-start: .3rem;
}

.sa-state{ display: inline-block; font-size: .72rem; font-weight: 800; padding: .15rem .55rem; border-radius: 9999px; white-space: nowrap; }
.sa-state--active{ background: rgba(22, 163, 74, .12); color: #15803d; }
.sa-state--suspended{ background: rgba(234, 88, 12, .12); color: #c2410c; }
.sa-state--archived{ background: #f1f5f9; color: #64748b; }

.sa-actions{ display: flex; gap: .35rem; flex-wrap: wrap; }
.sa-actions form{ display: inline; }

.sa-group{ margin-bottom: 1.4rem; }
.sa-group-title{
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    font-size: .95rem; font-weight: 800; color: #0f172a; margin: 0 0 .5rem;
}
.sa-group-count{ font-size: .7rem; font-weight: 800; background: #e2e8f0; color: #475569; border-radius: 9999px; padding: .05rem .45rem; }

.sa-sec-title{ font-size: 1rem; font-weight: 800; color: #0f172a; margin: 1.4rem 0 .7rem; }
.sa-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem; }
.sa-stat{
    background: #fff; border: 1px solid var(--dash-border, #e2e8f0); border-radius: 1rem;
    padding: .9rem 1rem; display: flex; flex-direction: column; gap: .2rem;
}
.sa-stat-n{ font-size: 1.5rem; font-weight: 900; color: var(--c-plum, #5f0f40); line-height: 1.15; }
.sa-stat-n small{ font-size: .62em; font-weight: 800; }
.sa-stat-l{ font-size: .78rem; font-weight: 600; color: #64748b; }

.sa-cols{ display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .9rem; margin-top: 1.1rem; }
.sa-panel{ background: #fff; border: 1px solid var(--dash-border, #e2e8f0); border-radius: 1rem; overflow: hidden; }
.sa-panel-title{ font-size: .88rem; font-weight: 800; color: #0f172a; margin: 0; padding: .8rem .9rem .5rem; }
.sa-panel .sa-table{ min-width: 0; }
.sa-panel .sa-table-wrap{ border: 0; border-radius: 0; margin: 0; }

@media (max-width: 640px){
    .sa-main{ padding: 1rem .8rem 2.5rem; }
    .sa-stat-n{ font-size: 1.25rem; }
    .sa-table th, .sa-table td{ padding: .55rem .6rem; font-size: .78rem; }
}

/* ===== لون اسم المطعم + الضريبة + تغيير الاسم (صفحة الهوية) ===== */
.ds-name-preview-wrap{ display: flex; align-items: center; gap: .6rem; margin: .8rem 0 .3rem; flex-wrap: wrap; }
.ds-name-preview{
    font-size: 1.25rem; font-weight: 900; line-height: 1.3;
    overflow-wrap: anywhere;
}

.ds-vat{ display: grid; gap: .5rem; }
.ds-vat-opt{
    display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
    border: 1.5px solid var(--dash-border, #e2e8f0); border-radius: .9rem;
    padding: .7rem .8rem; background: #fff; transition: border-color .15s, background .15s;
}
.ds-vat-opt:has(input:checked){ border-color: var(--c-plum, #5f0f40); background: rgba(95, 15, 64, .04); }
.ds-vat-opt input{ margin-top: .2rem; flex: none; accent-color: var(--c-plum, #5f0f40); }
.ds-vat-opt span{ display: flex; flex-direction: column; gap: .15rem; }
.ds-vat-opt strong{ font-size: .88rem; font-weight: 800; color: #0f172a; }
.ds-vat-opt small{ font-size: .78rem; font-weight: 500; color: #64748b; line-height: 1.55; }

.ds-rename{ margin-top: 1.1rem; }
.ds-rename-quota{
    font-size: .82rem; font-weight: 600; color: #475569; line-height: 1.6;
    background: rgba(251, 139, 36, .1); border-radius: .7rem; padding: .5rem .75rem; margin: 0 0 .9rem;
}
.ds-rename-quota.is-out{ background: rgba(220, 38, 38, .08); color: #b91c1c; }
.ds-rename input:disabled{ background: #f8fafc; color: #94a3b8; cursor: not-allowed; }

/* اسم المطعم يأخذ لونه الخاص إن اختاره المدير، وإلا ورث لون الهوية */
.rest-name{ color: var(--c-rest-name, var(--c-brand, #5f0f40)); }
.pv-name{ color: var(--name-color, var(--brand, #0f172a)); }

/* تنبيه فيه زر إجراء على يمينه (شريط الاسم الإنجليزي مثلاً) */
.dash-alert--action{
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
}
.dash-alert--action .dash-btn{ flex: none; }

/* فاتورة الطاولة داخل بطاقة النداء */
.call-card-bill{
    font-size: .8rem; font-weight: 800; color: var(--c-plum, #5f0f40);
    margin: .1rem 0 0; line-height: 1.4;
}
.call-card-order{ font-size: .72rem; font-weight: 700; color: #64748b; }

/* ===== تفصيل الضريبة في السلة ===== */
.cart-totals{ display: flex; flex-direction: column; gap: .2rem; margin-bottom: .7rem; }
.cart-total-row--sub,
.cart-total-row--vat{ font-size: .82rem; font-weight: 600; color: #64748b; }
.cart-total-row--vat{ padding-bottom: .35rem; border-bottom: 1px dashed #e2e8f0; }
.cart-total-row--grand{ font-size: 1rem; font-weight: 900; color: #0f172a; padding-top: .15rem; }

/* ===== شعار منتصف الباركود (صفحة QR) ===== */
.qr-logo-opts{ display: flex; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
.qr-logo-opt{
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    padding: .45rem .75rem; border-radius: .7rem; font-size: .82rem; font-weight: 700;
    color: #475569; background: #fff; border: 1.5px solid var(--dash-border, #e2e8f0);
}
.qr-logo-opt:has(input:checked){ border-color: var(--c-plum, #5f0f40); color: var(--c-plum, #5f0f40); }
.qr-logo-opt input{ position: absolute; opacity: 0; width: 0; height: 0; }
.qr-logo-swatch{ width: 1.1rem; height: 1.1rem; background: #cbd5e1; display: inline-block; flex: none; }
.qr-logo-swatch--circle{ border-radius: 50%; }
.qr-logo-swatch--square{ border-radius: .2rem; }
.qr-logo-opt:has(input:checked) .qr-logo-swatch{ background: var(--c-plum, #5f0f40); }
.qr-logo-hide{ display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: #475569; }

/* ======================================================================
   أسماء طويلة بلا مسافات لا تكسر التخطيط
   اسم المطعم يصل إلى ٨٠ حرفاً، وقد يكتبه صاحبه بلا مسافة واحدة. بلا هذه
   القاعدة يدفع الاسمُ الصفحةَ كلها ويظهر تمرير أفقي. أثبتُّها بإدخال اسم
   من ٨٠ حرفاً متصلاً.
   ====================================================================== */
.rest-name,
.dash-page-title,
.pt-title,
.sa-rest-name,
.sa-group-title,
.qr-stand-name,
.pv-name,
.order-item-name,
.call-card-table,
.auth-subtitle,
.auth-subtitle strong,
.st-link-sub strong,
.ds-rename-quota{ overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

/* الشريط العلوي صفّ مرن: بلا min-width:0 لا ينكمش أبناؤه فيدفع اسمٌ طويل
   الصفحةَ كلها. واسم المطعم واسم المستخدم فيه يُقصّان بنقاط بدل أن يلتفّا. */
.dash-topbar > *{ min-width: 0; }
.dash-logo{ min-width: 0; flex: 0 1 auto; }          /* هو من ينكمش */
.dash-topbar-actions{ flex: none; }                   /* أزرار الخروج واللغة لا تُزاح */
.branch-switch{ flex: 0 1 auto; min-width: 0; }
.dash-user{ min-width: 0; }
.dash-logo-name{
    max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px){ .dash-logo-name{ max-width: 8rem; } }

/* زرّ بعرض الصندوق: نصّه الإنجليزي أطول من العربي، وwhite-space:nowrap على
   .dash-btn كان يدفعه خارج بطاقته في الشاشات الصغيرة. هنا وحده يلتفّ النص. */
.dash-btn--block{ white-space: normal; text-align: center; min-width: 0; }
.layout-card form,
.layout-card > *{ min-width: 0; }

/* ======================================================================
   أيقونات التواصل في صفحة المطعم
   شعار كل تطبيق بلونه الرسمي داخل زر دائري. كانت روابط نصية
   («إنستقرام»، «تيك توك») فصارت أيقونات يعرفها الزبون بنظرة.
   ====================================================================== */
.rest-social--icons{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.soc-btn{
    --soc: #64748b;
    width: 2.5rem; height: 2.5rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px; color: #fff; background: var(--soc);
    box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .55);
    transition: transform .15s ease, filter .15s ease;
}
.soc-btn:hover{ transform: translateY(-2px); filter: brightness(1.07); }
.soc-btn:active{ transform: translateY(0); }
.soc-btn:focus-visible{ outline: 2px solid var(--c-brand, #5f0f40); outline-offset: 2px; }
.soc-ico{ width: 1.3rem; height: 1.3rem; display: block; }

/* الألوان الرسمية لكل تطبيق */
.soc-btn--instagram{
    background: radial-gradient(circle at 30% 107%,
        #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.soc-btn--tiktok{ --soc: #010101; }
.soc-btn--facebook{ --soc: #1877F2; }
.soc-btn--whatsapp{ --soc: #25D366; }

@media (max-width: 480px){
    .soc-btn{ width: 2.3rem; height: 2.3rem; }
    .soc-ico{ width: 1.2rem; height: 1.2rem; }
}

/* نداء النادل: خياران فقط — «طلب الفاتورة» و«طلب آخر» */
/* الخياران فوق بعضهما لا بجانب بعضهما: الزرّ الممتدّ أسهل إصابةً بالإبهام
   على الجوال، ونصّه لا ينكسر سطرين حين تطول ترجمته. */
.call-actions--two{ grid-template-columns: 1fr; }
.call-note.is-active .call-note-input{
    border-color: var(--c-brand, #5f0f40);
    box-shadow: 0 0 0 3px rgba(95, 15, 64, .12);
}

/* ======================================================================
   بناء المنيو: علامات التبويب الثلاث
   ====================================================================== */
.mb-tabs{ display: flex; gap: .4rem; overflow-x: auto; margin: 0 0 1.1rem; scrollbar-width: none; }
.mb-tabs::-webkit-scrollbar{ display: none; }
.mb-tab{
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1rem; border-radius: 9999px; cursor: pointer;
    font-size: .85rem; font-weight: 800; color: #475569;
    background: #fff; border: 1px solid var(--dash-border, #e2e8f0);
    transition: background .15s, color .15s, border-color .15s;
}
.mb-tab:hover{ border-color: #cbd5e1; }
.mb-tab.is-active{ background: var(--c-plum, #5f0f40); border-color: var(--c-plum, #5f0f40); color: #fff; }
.mb-tab-ico{ font-size: .95rem; }

.mb-panel[hidden]{ display: none; }
.mb-panel-head{
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.mb-panel-title{ font-size: 1.1rem; font-weight: 900; color: var(--dash-text, #0f172a); margin: 0 0 .2rem; }
.mb-panel-sub{ font-size: .84rem; color: var(--dash-muted, #64748b); line-height: 1.7; margin: 0; max-width: 46rem; }

/* ===== مكتبة مجموعات الخيارات ===== */
.mg-list{ display: grid; gap: .8rem; }
.mg-card{
    background: #fff; border: 1px solid var(--dash-border, #e2e8f0); border-radius: 1rem;
    padding: .9rem 1rem; display: flex; flex-direction: column; gap: .7rem;
}
.mg-card-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.mg-card-title-wrap{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.mg-card-title{ font-size: .98rem; font-weight: 900; color: #0f172a; margin: 0; overflow-wrap: anywhere; }
.mg-card-en{ font-size: .76rem; font-weight: 700; color: #94a3b8; }
.mg-card-rule{
    font-size: .68rem; font-weight: 800; padding: .1rem .5rem; border-radius: 9999px;
    background: #f1f5f9; color: #64748b; white-space: nowrap;
}
.mg-card-actions{ display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

.mg-chips{ display: flex; flex-wrap: wrap; gap: .35rem; }
.mg-chip{
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .76rem; font-weight: 700; color: #475569;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .55rem; padding: .18rem .5rem;
}
.mg-chip b{ font-size: .72rem; font-weight: 900; color: var(--c-plum, #5f0f40); }
.mg-chip--more{ color: #94a3b8; background: transparent; border-style: dashed; }

/* نافذة المجموعة */
.mg-auto-note{
    display: flex; align-items: center; gap: .45rem;
    font-size: .78rem; font-weight: 600; color: #0369a1; line-height: 1.6;
    background: rgba(14, 165, 233, .08); border-radius: .7rem; padding: .5rem .7rem; margin: 0 0 1rem;
}
.mg-opts{ display: grid; gap: .45rem; margin-bottom: .6rem; }
.mg-opt-row{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 6.5rem 2.25rem; gap: .4rem; align-items: center; }
.mg-opt-row .dash-input{ padding: .5rem .65rem; font-size: .84rem; }
@media (max-width: 700px){
    .mg-opt-row{ grid-template-columns: minmax(0,1fr) 5.5rem 2.25rem; }
    .mg-opt-row .mg-opt-en{ grid-column: 1 / -1; order: 1; }
}

/* نافذة التطبيق على أطباق */
.mg-search{ margin-bottom: .6rem; }
.mg-all{ margin-bottom: .5rem; }
.mg-dishes{
    display: grid; gap: .25rem; max-height: 19rem; overflow-y: auto;
    border: 1px solid var(--dash-border, #e2e8f0); border-radius: .8rem; padding: .45rem;
}
.mg-dish{
    display: flex; align-items: center; gap: .55rem; cursor: pointer;
    padding: .4rem .5rem; border-radius: .55rem; font-size: .85rem;
}
.mg-dish:hover{ background: #f8fafc; }
.mg-dish[hidden]{ display: none; }
.mg-dish-name{ flex: 1; min-width: 0; font-weight: 700; color: #0f172a; overflow-wrap: anywhere; }
.mg-dish-price{ font-size: .78rem; font-weight: 800; color: #64748b; }

/* ===== تبويب الإعدادات ===== */
.mb-settings{ display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .9rem; align-items: start; }

/* مفتاح تشغيل/إيقاف */
.mb-switch{ display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; margin-top: .3rem; }
.mb-switch input{ position: absolute; opacity: 0; width: 0; height: 0; }
.mb-switch-track{
    width: 2.75rem; height: 1.6rem; border-radius: 9999px; background: #cbd5e1;
    position: relative; flex: none; transition: background .18s ease;
}
.mb-switch-track::after{
    content: ''; position: absolute; top: .2rem; inset-inline-start: .2rem;
    width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(15,23,42,.3); transition: transform .18s ease;
}
.mb-switch input:checked + .mb-switch-track{ background: var(--c-plum, #5f0f40); }
.mb-switch input:checked + .mb-switch-track::after{ transform: translateX(1.15rem); }
[dir="rtl"] .mb-switch input:checked + .mb-switch-track::after{ transform: translateX(-1.15rem); }
.mb-switch input:focus-visible + .mb-switch-track{ outline: 2px solid var(--c-plum, #5f0f40); outline-offset: 2px; }
.mb-switch-text{ font-size: .86rem; font-weight: 700; color: var(--dash-text, #0f172a); }

/* زرّ «قسم جديد» في ترويسة القسم (بدل ↑↓) */
.b-icon-btn--add{ color: var(--c-plum, #5f0f40); font-weight: 900; font-size: 1.05rem; }
.b-icon-btn--danger{ color: #dc2626; }

/* ======================================================================
   طريقة عرض ترويسة صفحة المطعم: على الجانب أو في المنتصف
   «في المنتصف» توسّط الشعار والاسم والسطر التعريفي وأزرار التواصل معاً —
   لا الشعار وحده — وإلا بدت الترويسة نصفين لا تصميماً واحداً.
   ====================================================================== */
/* ======================================================================
   ترويسة صفحة المطعم — نظام واحد لوضعَي العرض
   ----------------------------------------------------------------------
   ما كان يحدث قبل هذا القسم (قياسٌ على جوال 360px مع صورة غلاف):
     • الصفّ كلّه كان يُسحب فوق الغلاف (margin-top:-2.25rem)، فيرتفع اسم
       المطعم وسطره التعريفي إلى y=108 والغلاف ينتهي عند y=144 — أي نصّ
       فوق صورة بلا أي تظليل، لا يُقرأ.
     • وكان محجوزاً للطرف 84px لزرّ اللغة، فلم يبق لعمود النصّ إلا 160px
       من 328px المتاحة — أقلّ من نصف عرض الشاشة — فينكسر السطر التعريفي
       إلى ثلاثة أسطر وتتفكّك الترويسة.
     • والشعار يُحاذى flex-end فيقف في مستوًى مختلف عن النصّ في كل عرض.

   النظام الآن:
     • **الشعار وحده** يتداخل مع الغلاف لا الصفّ كلّه — دائرةٌ بإطار أبيض
       تجلس على حافّة الغلاف فتخلق عمقاً وتربط أعلى الصفحة بأسفلها، والنصّ
       يبقى كاملاً على خلفية نظيفة تحتها.
     • لا مساحة محجوزة لزرّ اللغة: انتقل إلى زاوية **الغلاف** نفسه، فعاد
       عرض الشاشة كلّه للنصّ.
     • «على الجانب» = صفّ على الحاسوب والتابلت العريض، وعمودٌ محاذٍ للبداية
       على الجوال — فالصفّ على 360px يسحق النصّ مهما فعلنا.
     • «في المنتصف» = عمودٌ متوسّط بشعار أكبر واسم أكبر في كل العروض.
   ====================================================================== */

/* ---------- الشعار: دائرة متداخلة مع الغلاف ---------- */
.rest-logo{
    width: 5rem; height: 5rem; border-radius: 9999px; font-size: 2rem;
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, .45);
}
/* الإطار الأبيض والتداخل لا يظهران إلا مع غلاف: بلا غلاف لا شيء يتداخل معه */
.rest-hero--with-cover .rest-logo{
    border: 4px solid #fff;
    margin-top: -2.6rem;          /* نصف الدائرة تقريباً فوق الغلاف */
    position: relative; z-index: 2;
}

/* ---------- الوضع الجانبي ---------- */
.rest-align-side .rest-hero-inner{
    flex-direction: column; align-items: flex-start; text-align: start; gap: .5rem;
}
.rest-align-side .rest-hero-inner > div{ width: 100%; }
/* على التابلت العريض والحاسوب: الشعار والنصّ جنباً إلى جنب كما يعني «الجانب».
   و align-items:flex-end يحاذي أسفل الشعار بأسفل كتلة النصّ فيستويان. */
@media (min-width: 768px){
    /* flex-start لا flex-end: مع flex-end تتحاذى أسفل العناصر، فيُلغى أثر
       الهامش السالب على الشعار ولا يتداخل مع الغلاف إطلاقاً (قِسناه: تداخل
       1px عند 1024). ومع flex-start يبدأ النصّ من أسفل الغلاف مباشرة بينما
       يرتفع الشعار وحده فوقه بهامشه السالب. */
    .rest-align-side .rest-hero-inner{
        flex-direction: row; align-items: flex-start; gap: 1.1rem;
    }
    .rest-align-side .rest-hero-inner > div{ width: auto; flex: 1; min-width: 0; padding-top: .3rem; }
    .rest-align-side .rest-logo{ width: 5.5rem; height: 5.5rem; font-size: 2.25rem; }
    .rest-hero--with-cover .rest-align-side .rest-logo,
    .rest-align-side .rest-hero--with-cover .rest-logo{ margin-top: -2.75rem; }
}
.rest-align-side .rest-name{ font-size: 1.45rem; }
@media (min-width: 560px){ .rest-align-side .rest-name{ font-size: 1.7rem; } }
@media (min-width: 768px){ .rest-align-side .rest-name{ font-size: 2rem; } }

/* ---------- الوضع المتوسّط ---------- */
/* التوسيط ليس للشعار والاسم وحدهما: شريط الفرع ومعلوماته وأزرار التواصل
   ومحرّك البحث جزء من الترويسة نفسها، ولو بقيت على الجانب لانقسم أعلى
   الصفحة نصفين. ويتوقّف الأثر هنا: شبكة الأطباق شكلها من «تخطيط المنيو». */
.rest-align-center .rest-hero-inner{
    flex-direction: column; align-items: center; text-align: center;
    justify-content: center; gap: .4rem;
}
.rest-align-center .rest-hero-inner > div{ width: 100%; }
/* الشعار أكبر هنا: هو أول ما تقع عليه العين ثم الاسم ثم الأطباق */
.rest-align-center .rest-logo{
    width: 6.5rem; height: 6.5rem; font-size: 2.6rem; margin-inline: auto;
}
.rest-align-center .rest-hero--with-cover .rest-logo,
.rest-hero--with-cover .rest-align-center .rest-logo{ margin-top: -3.25rem; }
@media (min-width: 768px){
    .rest-align-center .rest-logo{ width: 7.5rem; height: 7.5rem; font-size: 3rem; }
}
.rest-align-center .rest-name{ font-size: 1.7rem; }
@media (min-width: 560px){ .rest-align-center .rest-name{ font-size: 2.1rem; } }
@media (min-width: 768px){ .rest-align-center .rest-name{ font-size: 2.5rem; } }
.rest-align-center .rest-tagline{ font-size: .95rem; }

/* شريط الفرع يبقى inline-flex (حبّة لا شريطاً): لو جعلناه flex لامتدّ بعرض
   الصفحة وظهرت خلفيته البيضاء شريحةً كاملة. نتوسّطه بمحاذاة النصّ في أبيه. */
.rest-align-center .rest-branch-tag{
    display: flex; width: fit-content; margin-inline: auto;
}
.rest-align-center .rest-branch-info{ justify-content: center; text-align: center; }
.rest-align-center .rest-search{
    margin-inline: auto;          /* يتوسّط بعرضه الأقصى بدل أن يلتصق بالحافة */
    width: 100%;
}
.rest-align-center .rest-name,
.rest-align-center .rest-tagline,
.rest-align-center .rest-meta{ text-align: center; width: 100%; }
.rest-align-center .rest-social,
.rest-align-center .rest-social--icons{ justify-content: center; }

/* ===== منتقي طريقة العرض (صفحة تصميم المطعم) ===== */
.ds-align{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ds-align-opt{
    display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer;
    border: 1.5px solid var(--dash-border, #e2e8f0); border-radius: .9rem;
    padding: .8rem .6rem; background: #fff; transition: border-color .15s, background .15s;
}
.ds-align-opt:has(input:checked){ border-color: var(--c-plum, #5f0f40); background: rgba(95, 15, 64, .04); }
.ds-align-opt input{ position: absolute; opacity: 0; width: 0; height: 0; }
.ds-align-label{ font-size: .82rem; font-weight: 800; color: #0f172a; }

/* رسم تخطيطي صغير يشرح الخيار بلا كلمات */
.ds-align-fig{
    width: 100%; max-width: 8rem; aspect-ratio: 16 / 9; border-radius: .6rem;
    background: #f1f5f9; padding: .55rem; display: flex; flex-direction: column; gap: .3rem;
}
.ds-align-logo{ width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #cbd5e1; display: block; }
.ds-align-line{ height: .3rem; border-radius: 9999px; background: #cbd5e1; display: block; width: 55%; }
.ds-align-line--lg{ width: 80%; background: #94a3b8; }
.ds-align-fig--center{ align-items: center; }
.ds-align-opt:has(input:checked) .ds-align-logo,
.ds-align-opt:has(input:checked) .ds-align-line--lg{ background: var(--c-plum, #5f0f40); }

/* المعاينة في محاكي الجوال تتبع الاختيار */
.phone-screen[data-align="center"] .pv-body{ text-align: center; }
.phone-screen[data-align="center"] .pv-name,
.phone-screen[data-align="center"] .pv-tagline,
.phone-screen[data-align="center"] .pv-meta{ text-align: center; }
.phone-screen[data-align="center"] .pv-social{ justify-content: center; }
.phone-screen[data-align="center"] .pv-avatar{ margin-inline: auto; }

/* ======================================================================
   زرّ اللغة: AR / EN
   رمزان بدل «English» و«عربي»: عرض ثابت لا يتغيّر مع اللغة فلا يزيح ما حوله،
   واللغة الحالية بارزة والأخرى باهتة فيُقرأ الزرّ بنظرة.
   ====================================================================== */
.lang-pair{
    display: inline-flex; align-items: center; gap: .22rem;
    font-size: .78rem; font-weight: 800; letter-spacing: .02em;
    direction: ltr; white-space: nowrap;
}
.lang-pair .lang-now{ font-weight: 900; opacity: 1; }
.lang-pair .lang-next{ font-weight: 700; opacity: .5; }
.lang-pair .lang-sep{ opacity: .3; font-weight: 600; }
.lang-pair:hover .lang-next{ opacity: .85; }
/* ======================================================================
   ===============  الطابع الفاخر + قوالب صفحة المطعم  ==================
   ----------------------------------------------------------------------
   يُضاف في آخر الملف عن قصد: كل ما تحته يَغلِب ما فوقه بترتيب المصدر، فلا
   نحتاج !important في شيء ولا نلمس قاعدة قائمة — فيبقى ما يعمل اليوم
   يعمل، وما نغيّره يغيّره القالب وحده.

   القالب طقمٌ من متغيّرات على <body data-theme="...">، وكل ما بعده يقرأ
   منها. فإضافة قالب جديد لاحقاً = كتلة متغيّرات واحدة لا إعادة تصميم.
   ====================================================================== */

/* ---------- المتغيّرات الأساسية (القيم الافتراضية = قالب كلاسيك) ---------- */
.rest-body{
    --lx-bg:        #ffffff;   /* سطح الصفحة */
    --lx-surface:   #ffffff;   /* سطح البطاقات */
    --lx-sunken:    #f7f8fa;   /* صندوق الصورة والمساحات الغائرة */
    --lx-ink:       #0f172a;   /* النصّ الأساسي */
    --lx-ink-soft:  #556070;   /* النصّ الثانوي */
    --lx-line:      #ecebe8;   /* الخطوط الفاصلة */
    --lx-gold:      var(--c-brand, #5f0f40);   /* لون التمييز (خطوط وحدود) */
    --lx-accent:    var(--c-brand, #5f0f40);   /* لون الهوية (خلفيات الأزرار) */
    --lx-on-accent: #ffffff;
    /* ---------- لونا النصّ المشتقّان من الهوية ----------
       لون الهوية يصلح خلفيةً لزرّ، ولا يصلح دائماً نصّاً: مطعم اختار
       برتقالياً (#d58400) تباينه على الأبيض ٢٫٩٥، وآخر اختار زهرياً فاتحاً
       (#f9d3e0) تباينه ١٫٢ — فالاسم والسعر يُقرآن بالكاد. فلا نطبع لون
       الهوية نصّاً كما هو، بل نحدّ سطوعه عند .42 في oklch: اللون الداكن
       يبقى كما اختاره المطعم حرفياً، والفاتح وحده يُغمَّق قدر الحاجة.
       و`min()` داخل oklch تحتاج صيغة الألوان النسبية؛ القاعدة الأولى هي
       البديل للمتصفّحات التي لا تعرفها (خلط ٥٨٪ مع الأسود في oklab). */
    --lx-ink-brand: color-mix(in oklab, var(--c-brand, #5f0f40) 58%, #000);
    --lx-name:      var(--lx-ink-brand);   /* اسم المطعم */
    --lx-price:     var(--lx-ink-brand);   /* السعر */
    --lx-radius:    1rem;
    --lx-shadow:    0 18px 40px -28px rgba(15, 23, 42, .4);
    /* الخطّ العريض للعناوين: الاسم وعناوين الأقسام وأسماء الأطباق */
    --lx-display:   'Cairo', ui-sans-serif, system-ui, sans-serif;
    --lx-track:     .02em;     /* تباعد حروف العناوين الصغيرة */
}
@supports (color: oklch(from #fff l c h)){
    .rest-body{
        --lx-ink-brand: oklch(from var(--c-brand, #5f0f40) min(l, .42) c h);
        /* ---------- لون ما يُكتب *فوق* لون الهوية ----------
           الأبيض فوق لون الهوية يصلح للهويات الداكنة وحدها. مطعم هويته
           برتقالية (#d58400) تباين الأبيض فوقها ٢٫٩٥، ومطعم هويته زهرية
           فاتحة تباينه ١٫٢ — فعلامة «+» في الزرّ والتبويب النشط يكادان
           لا يُريان. فنُبقي لون الهوية كما اختاره المطعم تماماً، ونقلب
           لون ما فوقه: أسود على الهوية الفاتحة، أبيض على الداكنة.
           `clamp(0,(.62-l)*999,1)` مفتاحٌ لا تدرّج: يعطي ١ (أبيض) حين
           l<.62 و٠ (أسود) حين l>.62، والـchroma صفر فلا لون. */
        --lx-on-accent: oklch(from var(--c-brand, #5f0f40) clamp(0, (.62 - l) * 999, 1) 0 h);
    }
    /* القوالب الثلاثة لا تحتاج هذا القلب: ألوانها ثابتة لا تأتي من المطعم،
       وكتل القوالب أسفل تعيد تعريف --lx-on-accent بقيمتها فتغلب هذه. */
}

/* ---------- ليل ذهبي ---------- */
.rest-body[data-theme="noir"]{
    --lx-bg: #12100e; --lx-surface: #1b1815; --lx-sunken: #221e1a;
    --lx-ink: #f5efe3; --lx-ink-soft: #b3a894; --lx-line: #2e2823;
    --lx-gold: #c9a227; --lx-accent: #c9a227; --lx-on-accent: #17140f;
    --lx-shadow: 0 22px 50px -30px rgba(0, 0, 0, .8);
    --lx-radius: .75rem;
    /* على الأسود العميق الذهبُ نفسه تباينه ٧٫٩ فلا يحتاج تغميقاً */
    --lx-name: var(--lx-ink); --lx-price: var(--lx-gold);
}
/* ---------- عاجي ---------- */
.rest-body[data-theme="ivory"]{
    --lx-bg: #f7f3ea; --lx-surface: #fffdf8; --lx-sunken: #f1ece0;
    --lx-ink: #1f2420; --lx-ink-soft: #6b6457; --lx-line: #e4dccb;
    --lx-gold: #b08d57; --lx-accent: #1f4034; --lx-on-accent: #fffdf8;
    --lx-shadow: 0 18px 44px -30px rgba(82, 68, 40, .5);
    --lx-radius: .9rem;
    /* الذهب الفاتح على العاجي تباينه ٣٫٠ فقط — فللسعر نسخةٌ أغمق منه
       بنفس العائلة اللونية (٥٫٧) تبقى ذهبيةً وتُقرأ */
    --lx-name: var(--lx-accent); --lx-price: #7f6029;
}
/* ---------- رخام ---------- */
.rest-body[data-theme="marble"]{
    --lx-bg: #ffffff; --lx-surface: #ffffff; --lx-sunken: #f4f4f3;
    --lx-ink: #2f3337; --lx-ink-soft: #65696e; --lx-line: #e9e8e6;
    --lx-gold: #a9794a; --lx-accent: #2f3337; --lx-on-accent: #ffffff;
    --lx-shadow: 0 16px 38px -28px rgba(47, 51, 55, .35);
    --lx-radius: .35rem;       /* زوايا شبه قائمة: هدوء معماري */
    /* النحاس الفاتح للخطوط فقط؛ والسعر بنحاس أغمق (٦٫٦) */
    --lx-name: var(--lx-ink); --lx-price: #7d5529;
}

/* ---------- أساس الصفحة ----------
   `html body.rest-body` لا `.rest-body` وحدها: في الملف قاعدة
   `html[lang="ar"] body{ background-color:#ffffff }` ووزنها (0,1,2) يغلب
   وزن `.rest-body` (0,1,0)، فكانت خلفية الصفحة تبقى بيضاء مهما اختار
   المطعم قالباً داكناً — ويبقى النصّ العاجي على أبيض فلا يُقرأ.
   وزن هذا المحدِّد (0,1,2) مساوٍ لها وهو بعدها في الملف، فيغلبها بلا
   !important وبلا لمس القاعدة الأصلية. */
html body.rest-body{ background: var(--lx-bg); color: var(--lx-ink); }
.rest-body .rest-hero{
    background: var(--lx-bg); border-bottom: 1px solid var(--lx-line);
}
.rest-body .rest-hero--with-cover{ background: var(--lx-bg); }
.rest-body .rest-cover{ background: var(--lx-sunken); }

/* اسم المطعم: أكبر وأهدأ تباعداً */
.rest-body .rest-name{
    font-family: var(--lx-display); color: var(--lx-name);
    letter-spacing: -.01em; line-height: 1.15;
}

/* ---------- الوصف: سطر مقروء متوسّط العرض، وفاصل ذهبي تحته ----------
   كان يُطبع سطراً عادياً بلون باهت تحت الاسم مباشرة فيختلط به. الآن له
   عرض قراءة محدود وارتفاع سطر مريح، وتحته شَرطة ذهبية قصيرة — وهي
   العلامة التي تتكرّر في كل المراجع الفاخرة وتفصل الهوية عن المحتوى. */
.rest-body .rest-tagline{
    color: var(--lx-ink-soft); font-size: .92rem; line-height: 1.85;
    max-width: 34rem; margin-top: .5rem;
}
.rest-align-center .rest-tagline{ margin-inline: auto; }
.rest-body .rest-tagline::after{
    content: ""; display: block; width: 2.5rem; height: 2px; margin-top: .9rem;
    background: var(--lx-gold); opacity: .85; border-radius: 2px;
}
.rest-align-center .rest-tagline::after{ margin-inline: auto; }

/* ---------- شريط الأقسام ---------- */
.rest-body .rest-tabs{
    background: color-mix(in srgb, var(--lx-bg) 92%, transparent);
    border-bottom: 1px solid var(--lx-line);
}
.rest-body .rest-tab{
    background: transparent; border: 1px solid var(--lx-line); color: var(--lx-ink-soft);
    font-weight: 700; letter-spacing: var(--lx-track); border-radius: 9999px;
}
.rest-body .rest-tab.is-active{
    background: var(--lx-accent); border-color: var(--lx-accent); color: var(--lx-on-accent);
}
.rest-body .rest-tab-count{ opacity: .55; }

/* ---------- عنوان القسم: حروف متباعدة وخطّ ذهبي رفيع ---------- */
.rest-body .rest-section-title{
    font-family: var(--lx-display); color: var(--lx-ink);
    font-size: 1.05rem; letter-spacing: .06em; font-weight: 800;
}
.rest-body .rest-section-title::after{
    background: var(--lx-line); height: 1px;
}

/* ---------- محرّك البحث ---------- */
.rest-body .rest-search{
    background: var(--lx-surface); border: 1px solid var(--lx-line);
    color: var(--lx-ink-soft); border-radius: 9999px;
}
.rest-body .rest-search:focus-within{
    border-color: var(--lx-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lx-gold) 15%, transparent);
}
.rest-body .rest-search input{ color: var(--lx-ink); }

/* ---------- بطاقة الطبق في الشبكة ---------- */
.rest-body .dish-card--grid{
    background: var(--lx-surface); border: 1px solid var(--lx-line);
    border-radius: var(--lx-radius); box-shadow: none;
}
.rest-body .dish-card--grid:hover{
    border-color: color-mix(in srgb, var(--lx-gold) 45%, var(--lx-line));
    box-shadow: var(--lx-shadow);
}
.rest-body .dish-card-media{ background: var(--lx-sunken); }
.rest-body .dish-card-name{ font-family: var(--lx-display); color: var(--lx-ink); }
.rest-body .dish-card-desc{ color: var(--lx-ink-soft); }
.rest-body .dish-card-price{ color: var(--lx-price); font-family: var(--lx-display); }
.rest-body .dish-card-cur{ color: var(--lx-ink-soft); font-weight: 700; }
.rest-body .add-to-cart-btn{
    background: var(--lx-accent); color: var(--lx-on-accent); border: 0;
}
.rest-body .add-to-cart-btn:hover{ background: color-mix(in srgb, var(--lx-accent) 85%, #000); }

/* ---------- أزرار الفرع وأيقونات التواصل ---------- */
.rest-body .rest-social-chip{
    background: transparent; border: 1px solid var(--lx-line); color: var(--lx-ink-soft);
    letter-spacing: var(--lx-track);
}
.rest-body .rest-social-chip:hover{
    background: var(--lx-accent); border-color: var(--lx-accent); color: var(--lx-on-accent);
}
.rest-body .rest-branch-tag{
    background: var(--lx-surface); border: 1px solid var(--lx-line); color: var(--lx-ink-soft);
}
.rest-body .rest-lang{
    background: var(--lx-surface); border: 1px solid var(--lx-line); color: var(--lx-ink);
}
.rest-body .rest-logo{ border-color: var(--lx-surface); }

/* ======================================================================
   ===================  تخطيط القائمة (List) — إعادة تصميم  =============
   ----------------------------------------------------------------------
   ما كان عليه وما أزعج فيه:
     • زرّ «+» كان **فوق الصورة** معلّقاً في منتصفها السفلي
       (position:absolute; inset-inline-start:50%) — يغطّي الطبق، ولا
       يُعرف أهو جزء من الصورة أم زرّ، وإصابته باللمس صعبة على الجوال.
     • كل سطر صندوقٌ مستقلّ بحدٍّ وظلّ، فالقائمة تصير رصّة بطاقات لا قائمة
       طعام — وصفحات المطاعم الفاخرة تستعمل أسطراً يفصلها خطّ شعري.
     • الاسم أعلى اليمين والسعر أسفله وبينهما فراغ ميّت، فلا تُقرأ العين
       سطراً واحداً بل تقفز.

   التصميم الآن — ثلاثة أعمدة ثابتة على كل المقاسات:
       [ صورة مربّعة ]   [ الاسم · الوصف · السعر ]   [ زرّ + ]
   الصورة في جهة البداية، والنصّ يتمدّد، والزرّ **في جهة النهاية** معزولاً
   في عموده الخاصّ: لا يلمس الصورة ولا يغطّي شيئاً، وموضعه ثابت في كل
   الأسطر فتتعلّمه اليد من أول سطر. والأسطر يفصلها خطّ شعري واحد بلا
   صناديق — وهو ما يعطي القائمة طابع المنيو المطبوع.
   ====================================================================== */

/* الحاوية: قائمة واحدة لا شبكة بطاقات */
.rest-body .rest-list{
    display: block; border-top: 1px solid var(--lx-line);
}
@media (min-width: 900px){
    /* عمودان على الشاشات الواسعة، وبينهما فاصل رأسي رفيع */
    .rest-body .rest-list{
        display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem;
    }
}

.rest-body .dish-row{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;   /* صورة · نصّ · زرّ */
    align-items: center; gap: 1rem;
    padding: 1.05rem .25rem;
    background: transparent; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--lx-line);
    box-shadow: none; transition: background .18s ease;
}
.rest-body .dish-row:hover{
    background: color-mix(in srgb, var(--lx-gold) 5%, transparent);
    border-color: var(--lx-line); box-shadow: none;
}

/* ---------- عمود الصورة ---------- */
.rest-body .dish-row-side{
    order: 0;                       /* لا تقديم: ترتيب الشبكة يتكفّل بالجهة */
    position: static; width: auto; display: block;
}
/* `scale-down` لا `cover`: القاعدة المعتمدة في المشروع أن يظهر الطبق
   بنسبته كاملاً بلا قصّ ولا تكبير فوق مقاسه الأصلي — هنا وفي البطاقة
   وفي نافذة الطلب، فلا تختلف صورة الطبق الواحد بين موضع وآخر. */
.rest-body .dish-row-img{
    width: 5.25rem; height: 5.25rem; border-radius: calc(var(--lx-radius) - .15rem);
    object-fit: scale-down; object-position: center;
    background: var(--lx-sunken); display: block;
}
@media (min-width: 560px){
    .rest-body .dish-row-img{ width: 6rem; height: 6rem; }
}
/* طبق بلا صورة: مربّع بلون غائر فيبقى العمود بعرضه ولا يختلّ اصطفاف القائمة */
.rest-body .dish-row-side:not(:has(img))::before{
    content: ""; display: block;
    width: 5.25rem; height: 5.25rem; border-radius: calc(var(--lx-radius) - .15rem);
    background: var(--lx-sunken);
}
@media (min-width: 560px){
    .rest-body .dish-row-side:not(:has(img))::before{ width: 6rem; height: 6rem; }
}

/* ---------- عمود النصّ ---------- */
.rest-body .dish-row-body{
    display: flex; flex-direction: column; gap: .2rem; min-width: 0;
}
.rest-body .dish-row-name{
    font-family: var(--lx-display); font-size: 1.02rem; font-weight: 800;
    color: var(--lx-ink); line-height: 1.35;
}
.rest-body .dish-row-desc{
    color: var(--lx-ink-soft); font-size: .83rem; line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rest-body .dish-row-meta{
    margin-top: .3rem; padding-top: 0; font-size: 1rem;
}
.rest-body .dish-row-meta .u-text-plum{
    color: var(--lx-price); font-family: var(--lx-display); font-weight: 800;
}

/* ---------- عمود الزرّ: في جهة النهاية، ثابت، لا يلمس الصورة ---------- */
.rest-body .dish-row .dish-row-add{
    position: static; transform: none; inset: auto;
    width: 2.5rem; height: 2.5rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px; border: 1px solid var(--lx-line);
    background: transparent; color: var(--lx-accent); box-shadow: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
[dir="ltr"] .rest-body .dish-row .dish-row-add{ transform: none; }
.rest-body .dish-row .dish-row-add:hover:not(:disabled){
    background: var(--lx-accent); border-color: var(--lx-accent); color: var(--lx-on-accent);
}
.rest-body .dish-row .dish-row-add:disabled{ opacity: .35; }

/* نفد الطبق: السطر كلّه يهدأ */
.rest-body .dish-row.is-soldout{ opacity: .6; }
.rest-body .dish-row.is-soldout .dish-row-img{ filter: grayscale(1); }

/* آخر سطر في العمود بلا خطّ سفلي فلا يبقى خطّ معلّق في الهواء */
.rest-body .rest-list .dish-row:last-child{ border-bottom: 0; }

/* ======================================================================
   ===============  تبويبات قوالب الصفحة (لوحة التحكم)  =================
   شريط تبويبات أفقي: كل تبويب اسم القالب وتحته ثلاث نقاط بألوانه، فيُقرأ
   القالب بالعين قبل الضغط. المدخلات radio حقيقية داخل الملصقات: التنقّل
   بالأسهم والقراءة الصوتية والحفظ مع النموذج تعمل بلا جافاسكربت، والجافاسكربت
   يضيف المعاينة الفورية وحدها.
   ====================================================================== */
/* شبكة لا flex: مع flex-wrap كان الشريط يلتفّ ٣+١ عند عرض ١٢٠٠px وعند
   ٥٢٠–٦٣٥px، فيتمدّد التبويب اليتيم في السطر الثاني إلى ثلاثة أضعاف
   إخوته فيُقرأ لافتةً لا تبويباً. الشبكة تقسم العرض بالتساوي دائماً:
   أربعة في صفّ، واثنان واثنان تحت ٦٤٠px. */
.ds-themes{
    /* auto-fill لا auto-fit ولا عددٌ ثابت: القوالب صارت خمسة، وعددٌ ثابت
       يترك الخامس وحده في سطرٍ يتمدّد فيه إلى عرض الصفّ كلّه (نفس عيب
       الالتفاف ٣+١ الذي عولج سابقاً). وauto-fit يطوي المسارات الفارغة
       فيتمدّد اليتيم كذلك. وauto-fill يُبقيها فيظلّ كل تبويب بعرض إخوته
       مهما كان عددها. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
    gap: .4rem;
    padding: .3rem; margin-bottom: .85rem;
    background: #f6f7f9; border: 1px solid #e9eaee; border-radius: .85rem;
}
.ds-theme-tab{
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    padding: .7rem .5rem; border-radius: .6rem; cursor: pointer;
    background: transparent; border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ds-theme-tab input{ position: absolute; opacity: 0; width: 0; height: 0; }
.ds-theme-tab:hover{ background: #fff; }
.ds-theme-tab.is-active{
    background: #fff; border-color: var(--c-plum, #5f0f40);
    box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .45);
}
/* إطار التركيز يأتي من المدخل المخفي، فنرسمه على الملصق لتبقى لوحة
   المفاتيح مرئية */
.ds-theme-tab:focus-within{ outline: 2px solid var(--c-plum, #5f0f40); outline-offset: 2px; }
.ds-theme-dots{ display: flex; gap: .2rem; }
.ds-theme-dots i{
    width: .85rem; height: .85rem; border-radius: 9999px;
    background: var(--sw); border: 1px solid rgba(15, 23, 42, .12); display: block;
}
.ds-theme-name{ font-size: .82rem; font-weight: 800; color: #334155; line-height: 1.2; text-align: center; }
.ds-theme-tab.is-active .ds-theme-name{ color: var(--c-plum, #5f0f40); }
.ds-theme-note{
    font-size: .82rem; line-height: 1.8; color: #64748b;
    padding-inline-start: .6rem; border-inline-start: 3px solid var(--c-plum, #5f0f40);
    margin-bottom: .6rem;
}
/* التبويب النشط بلا جافاسكربت: الصنف .is-active يضعه الجافاسكربت، فإن
   كان معطّلاً بقي الشكل على القالب الأول بينما الراديو المختار غيره —
   فتُظهر الصفحة اختياراً غير الذي ستحفظه. :has تقرأ الراديو مباشرة. */
.ds-theme-tab:has(input:checked){
    background: #fff; border-color: var(--c-plum, #5f0f40);
    box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .45);
}
.ds-theme-tab:has(input:checked) .ds-theme-name{ color: var(--c-plum, #5f0f40); }

/* ======================================================================
   =========  القالب يصل العناصر العائمة والسلة كذلك  ===================
   ----------------------------------------------------------------------
   زرّ السلة ونافذتها كانا بلون الهوية وخلفية بيضاء ثابتة، فيظهران غريبين
   فوق قالب «ليل ذهبي» الأسود — كأنهما من موقع آخر. الآن يقرآن متغيّرات
   القالب نفسها. القواعد مقيّدة بـ.rest-body فلا تمسّ السلة في بقية
   الصفحات (العروض، الصفحة الرئيسية) التي لا قالب لها.
   ====================================================================== */
.rest-body #cart-fab{
    background: var(--lx-accent); color: var(--lx-on-accent);
    box-shadow: var(--lx-shadow);
}
.rest-body .call-fab{ box-shadow: 0 10px 25px -8px rgba(0, 0, 0, .35); }
.rest-body .cart-flash{ background: var(--lx-ink); color: var(--lx-bg); }

.rest-body #cart-drawer{ background: var(--lx-surface); color: var(--lx-ink); }
.rest-body .cart-head{ background: var(--lx-sunken); border-bottom-color: var(--lx-line); }
.rest-body .cart-head h3{ color: var(--lx-ink); }
.rest-body .cart-close{ background: var(--lx-line); color: var(--lx-ink); }
.rest-body .cart-item{ border-bottom-color: var(--lx-line); }
.rest-body .cart-item img{ background: var(--lx-sunken); }
.rest-body .cart-item-name{ color: var(--lx-ink); }
.rest-body .cart-foot{ background: var(--lx-sunken); border-top-color: var(--lx-line); }
.rest-body .cart-total-row > span:first-child{ color: var(--lx-ink-soft); }
.rest-body .cart-total-row > span:last-child{ color: var(--lx-price); }
.rest-body .cart-total-row--sub,
.rest-body .cart-total-row--vat{ color: var(--lx-ink-soft); }
.rest-body .cart-total-row--vat{ border-bottom-color: var(--lx-line); }
.rest-body .cart-total-row--grand{ color: var(--lx-ink); }
.rest-body .cart-empty{ color: var(--lx-ink-soft); }

/* ---------- السعر في طرف السطر على الشاشات الأوسع ----------
   على الجوال يُقرأ السطر عموداً: الاسم ثم السعر تحته. أما حين يتّسع السطر
   (٥٦٠px فأكثر) فبقاء السعر تحت الاسم يترك فراغاً ميتاً طويلاً بين النصّ
   وزرّ الإضافة، والعين تقفز لتربط الطبق بسعره. فننقله إلى طرف عمود النصّ
   محاذياً للزرّ: [صورة] [الاسم والوصف ...... السعر] [+] — وهو ترتيب
   المنيو المطبوع نفسه: الصنف في الطرف والسعر في الهامش المقابل. */
/* (نُقلت هذه القاعدة إلى كتلة «إصلاحات ما بعد الاختبار» في آخر الملف،
   وصارت تسري على كل المقاسات لا من ٥٦٠px فقط.) */
.rest-body .cart-item-price{ color: var(--lx-price); }
.rest-body #cart-checkout{ background: var(--lx-accent); color: var(--lx-on-accent); }
.rest-body #cart-checkout:disabled{ background: var(--lx-line); color: var(--lx-ink-soft); }
/* عدّاد الكمية: صندوقه ثابت الفاتح فكان يضيء بقعة بيضاء في القالب الداكن */
.rest-body .qty-box{ background: var(--lx-sunken); }
.rest-body .qty-btn{ background: var(--lx-surface); color: var(--lx-ink); box-shadow: none; border: 1px solid var(--lx-line); }
.rest-body .qty-btn:hover{ background: var(--lx-accent); color: var(--lx-on-accent); border-color: var(--lx-accent); }
.rest-body .qty-num{ color: var(--lx-ink); }
.rest-body .cart-msg{ color: var(--lx-ink-soft); }

/* ======================================================================
   ========  إصلاحات ما بعد اختبار الوكلاء الافتراضيّين  ================
   ----------------------------------------------------------------------
   ثلاثة وكلاء اختبروا الصفحات معاً — زبون على الجوال، مدير في اللوحة،
   ومراجع تصميم ووصولية — وقاسوا ما وجدوه بالأرقام. هذه الكتلة تعالج ما
   أبلغوا عنه، وكل إصلاح مكتوبٌ معه سببه ورقمه.
   ====================================================================== */

/* ---------- ١) زرّ السلة كان يغطّي زرّ «+» في الأسطر ----------
   قياس الوكيل: زرّ «+» يشغل ٢٠–٦٠px من حافة الشاشة، وزرّ السلة العائم
   ٢٠–٧٦px من الحافة نفسها — تداخلٌ ١٠٠٪. ومن يضغط «+» في آخر سطر مرئي
   تُفتح له السلة الفارغة بدل أن يُضاف الطبق (جُرّب فعلاً وفشل).
   السبب أنّ الزرّ العائم والعمود الجديد صارا على السكّة نفسها.
   الحلّ: الزرّ العائم ينتقل إلى الجهة المقابلة في صفحة المطعم وحدها —
   هناك عمود الصورة لا عمود الأزرار، فإن غطّى شيئاً غطّى صورةً لها بديل
   (اسم الطبق يفتح النافذة نفسها)، ولا يغطّي فعلاً لا بديل له.
   وزرّ نداء النادل يبقى في مكانه (٥٫٢٥rem من الحافة = ٨٤–١٣٢px) فلا
   يلامس نطاق «+». */
.rest-body #cart-fab,
.rest-body .cart-flash{ inset-inline-start: 1.25rem; inset-inline-end: auto; }
.rest-body #cart-fab-badge{ inset-inline-start: auto; inset-inline-end: -.25rem; }
/* الأزرار العائمة الثلاثة تنتقل معاً إلى الجهة نفسها: لو بقي زرّ النادل
   وزرّ «طلباتي» على السكّة المقابلة لظلّا ملاصقَين لعمود «+» — قريبين منه
   بصرياً وإن لم يغطّياه، وهو ارتباكٌ في ذاته. */
.rest-body .call-fab{ inset-inline-start: 5.25rem; inset-inline-end: auto; }
.rest-body #orders-fab{ inset-inline-start: 5.25rem; inset-inline-end: auto; }
.rest-body.has-orders-fab .call-fab{ inset-inline-start: 9.25rem; inset-inline-end: auto; }
@media (max-width: 480px){
    .rest-body .call-fab,
    .rest-body #orders-fab{ inset-inline-start: 4.75rem; inset-inline-end: auto; }
    .rest-body.has-orders-fab .call-fab{ inset-inline-start: 8.25rem; inset-inline-end: auto; }
}

/* ---------- ٢) إطار التركيز كان يختفي على القالب الداكن ----------
   القاعدة العامة ترسمه بلون هوية المطعم (--c-plum). على «ليل ذهبي»
   قياسه ١٫٣٤:١ — أي غير مرئي عملياً لمن يتنقّل بلوحة المفاتيح، والمطلوب
   ٣:١. الآن يتبع القالب: لونٌ مضمون التباين في القوالب الأربعة. */
.rest-body{ --lx-focus: var(--lx-price); }
.rest-body a:focus-visible,
.rest-body button:focus-visible,
.rest-body input:focus-visible,
.rest-body [role="button"]:focus-visible{
    outline: 2px solid var(--lx-focus); outline-offset: 2px;
}

/* ---------- ٣) زرّ «+»: حدٌّ يُرى، ومقاس يُلمس ----------
   كان حدّه ١٫١٩–١٫٤٠:١ على القوالب الأربعة — أي دائرةٌ غير مرئية، فيبدو
   «+» علامةً مرسومة لا زرّاً. والمقاس ٤٠×٤٠ دون حدّ اللمس المريح ٤٤.
   الآن: خلفية غائرة، وحدّ مشتقّ من لون النصّ، ومقاس ٤٤. */
.rest-body .dish-row .dish-row-add,
.rest-body .add-to-cart-btn{
    width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem;
}
.rest-body .dish-row .dish-row-add{
    background: var(--lx-sunken);
    border: 1px solid color-mix(in srgb, var(--lx-ink) 26%, var(--lx-line));
}
.rest-body .dish-row .dish-row-add:hover:not(:disabled){
    background: var(--lx-accent); border-color: var(--lx-accent); color: var(--lx-on-accent);
}

/* ---------- ٤) السعر في طرف السطر على كل المقاسات ----------
   كان على ٥٦٠px فأكثر فقط، فبقي على الجوال تحت الاسم — وقياس الوكيل
   أنّ زرّ «+» يعلو السعر ١٥px فتختلّ محاذاة السطر على أصغر الشاشات
   وحدها. والآن عمودان دائماً: [الاسم والوصف ...... السعر] فيصطفّ كل
   شيء مع الزرّ، وهو ترتيب المنيو المطبوع نفسه. */
.rest-body .dish-row-body{
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem; align-items: center;
}
.rest-body .dish-row-name,
.rest-body .dish-row-desc,
.rest-body .dish-row-body .stock-note{ grid-column: 1; }
.rest-body .dish-row-meta{
    grid-column: 2; grid-row: 1 / -1;
    margin-top: 0; white-space: nowrap; text-align: end;
}
/* اسم طويل كان يمدّ السطر بلا حدّ فيختلّ إيقاع القائمة (قياس: سطر واحد
   طال فصار ١٣٢px بدل ١١٨) — سطران كحدٍّ أقصى كما في بطاقة الشبكة */
.rest-body .dish-row-name{
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- ٥) إيقاع السطر: حشوة زوجية وخطّ يُرى ----------
   الحشوة ١٫٠٥rem (١٦٫٨px) كانت تجعل ارتفاع السطر كسرياً فيقع الخطّ
   الفاصل بين بكسلين ويُرسم رماديَّين باهتين بدل خطٍّ واحد حادّ.
   ولون الخطّ نفسه كان ١٫١٩–١٫٣١:١ — تحت عتبة الرؤية. */
.rest-body .dish-row{
    padding: 1rem .25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--lx-line) 62%, var(--lx-ink));
}
/* سطرٌ بلا وصف لا يحتاج صورةً بحجم كامل: على الشاشات الواسعة كان ٨١٪ من
   السطر فراغاً. فالصورة أصغر والحشوة أقلّ حين لا وصف. */
@media (min-width: 900px){
    .rest-body .dish-row:not(:has(.dish-row-desc)){ padding-block: .8rem; }
    .rest-body .dish-row:not(:has(.dish-row-desc)) .dish-row-img,
    .rest-body .dish-row:not(:has(.dish-row-desc)) .dish-row-side:not(:has(img))::before{
        width: 4.5rem; height: 4.5rem;
    }
}
/* في العمودين: آخر سطر مرئيّ هو آخر عنصرين حين يكون عددها زوجياً — وكان
   يبقى خطٌّ معلّق تحت نصف السطر الأخير */
@media (min-width: 900px){
    .rest-body .rest-list .dish-row:nth-last-child(2):nth-child(odd){ border-bottom: 0; }
}

/* ---------- ٦) الطبق المنتهي: نُخفت الصورة والزرّ لا النصّ ----------
   opacity: .6 على السطر كلّه كانت تهبط بالوصف إلى ٢٫٦:١ فلا يُقرأ. */
.rest-body .dish-row.is-soldout{ opacity: 1; }
.rest-body .dish-row.is-soldout .dish-row-img,
.rest-body .dish-row.is-soldout .dish-row-side::before{ filter: grayscale(1); opacity: .55; }
.rest-body .dish-row.is-soldout .dish-row-add{ opacity: .35; }
.rest-body .dish-row.is-soldout .dish-row-name,
.rest-body .dish-row.is-soldout .dish-row-meta{ opacity: .7; }

/* ---------- ٧) زوايا صورة البطاقة تتبع القالب ----------
   كانت ثابتة ١٫١٥rem بينما زاوية البطاقة تتغيّر مع القالب: على «رخام»
   كانت الصورة أدور من البطاقة ٣ أضعاف فيظهر نتوء لون البطاقة في الزاويتين. */
.rest-body .dish-card-media{
    border-start-start-radius: calc(var(--lx-radius) - 1px);
    border-start-end-radius: calc(var(--lx-radius) - 1px);
    background: var(--lx-sunken);
}
/* كلمة العملة كانت ١٠٫٩px — تحت حدّ القراءة المريحة */
.rest-body .dish-card-cur{ font-size: max(.72em, 12px); }

/* ---------- ٨) مقاسات لمس بقية الأزرار ---------- */
.rest-body .soc-btn,
.rest-body .cart-close,
.rest-body .addon-x,
.rest-body .call-x{ width: 2.75rem; height: 2.75rem; }
.rest-body .qty-btn{ width: 2.25rem; height: 2.25rem; }

/* ---------- ٩) زرّ نداء النادل: الرمز الأبيض على البرتقالي ٢٫٣٨:١ ----------
   البرتقالي لون الهوية ولا يُغيَّر، فنُغمّق الرمز بدل الخلفية. */
.call-fab{ color: #3a1c00; }

/* ---------- ١٠) نافذة الطبق كانت تتجاهل القالب ----------
   بقيت بيضاء بزرٍّ بلون الهوية فوق قالب أسود — وعلى مطعم هويته زهرية
   فاتحة قِيس زرّ «أضف» عند ١٫٣٦:١، أي غير مقروء. */
.rest-body .addon-box{ background: var(--lx-surface); color: var(--lx-ink); }
.rest-body .addon-title,
.rest-body .addon-group-title{ color: var(--lx-ink); }
.rest-body .addon-desc,
.rest-body .addon-about-label,
.rest-body .addon-option-name{ color: var(--lx-ink-soft); }
.rest-body .addon-badge{ color: var(--lx-ink-soft); background: var(--lx-sunken); }
.rest-body .addon-foot{ background: var(--lx-sunken); border-top: 1px solid var(--lx-line); }
.rest-body .addon-option{ border-top-color: var(--lx-line); }
.rest-body .addon-option input{ accent-color: var(--lx-accent); }
.rest-body .addon-option-price{ color: var(--lx-price); }
.rest-body .addon-submit{ background: var(--lx-accent); color: var(--lx-on-accent); }
.rest-body .addon-hero{ background: var(--lx-sunken); }

/* ---------- ١١) شريط «أنت على الطاولة» بلا تنسيق ----------
   أوّل ما يراه من مسح الباركود كان فقرةً خاماً: الإيموجي بلا مقاس،
   والسطر الثانوي بحجم السطر الأول، ورابط «لست على طاولة؟» بلون النصّ
   نفسه بلا أي علامة أنه يُضغط. */
.rest-body .table-banner{
    background: var(--lx-sunken); border-bottom: 1px solid var(--lx-line);
}
/* .table-banner-inner يحمل أيضاً .rest-container، فلا نلمس عرضه ولا
   حشوته الأفقية — نضيف الصفّ والحشوة الرأسية وحدهما */
.rest-body .table-banner-inner{
    display: flex; align-items: center; gap: .7rem; padding-block: .7rem;
}
.rest-body .table-banner-ico{ font-size: 1.25rem; line-height: 1; flex: none; }
.rest-body .table-banner-text{ flex: 1; min-width: 0; line-height: 1.45; }
.rest-body .table-banner-text strong{ color: var(--lx-ink); font-weight: 800; font-size: .92rem; }
.rest-body .table-banner-sub{
    display: block; color: var(--lx-ink-soft); font-size: .78rem; margin-top: .1rem;
}
.rest-body .table-banner-exit{
    flex: none; color: var(--lx-price); font-size: .78rem; font-weight: 800;
    text-decoration: underline; text-underline-offset: 3px;
    padding: .55rem .25rem;            /* مساحة لمس مريحة لرابط صغير */
}

/* ---------- ١٢) بقية مقاسات اللمس بعد القياس ----------
   قياس: شريط الأقسام ٤٢px وزرّ اللغة ٣٥px — تحت ٤٤. وجسم السطر (الذي صار
   زرّاً يفتح نافذة الطبق) كان ارتفاع صندوقه ٢٤px فقط لأن الطبق بلا وصف،
   بينما السطر نفسه ٨٤px: فيُمدّ ليملأ ارتفاع السطر فيصير هدفاً مريحاً. */
.rest-body .rest-tab{ padding-block: .72rem; }
.rest-body .rest-lang{ padding-block: .75rem; }
.rest-body .dish-row-body{ align-self: stretch; align-content: center; }
/* زرّ «طلباتي» أيضاً يتبع القالب بدل الأبيض الثابت فوق قالب داكن */
.rest-body #orders-fab{
    background: var(--lx-surface); color: var(--lx-ink);
    border-color: color-mix(in srgb, var(--lx-ink) 20%, var(--lx-line));
}

/* ======================================================================
   ===============  نافذة الطبق — إعادة التصميم (تحديث ٢٩)  =============
   ----------------------------------------------------------------------
   المرجع الذي أرسله صاحب الموقع: صورة الطبق كبيرة على خلفية دافئة، ثم
   ورقة بيضاء تعلوها بزاوية كبيرة، فالاسم والسعر، ثم صفّ أيقونات مستديرة
   تُفتح بالضغط، ثم عنوان «عن الطبق» بأيقونة وتحته الوصف فقرات، وزرّ واحد
   ثابت أسفل النافذة.

   ما غيّرناه في المنطق لا في الشكل فقط:
     • المكوّنات ومسبّبات الحساسية كانت قوائم مفتوحة تدفع الخيارات خارج
       الشاشة. صارت أيقونتين: من أرادهما ضغط فظهر ما كتبه المدير نفسه.
     • السعر كان في الزرّ وحده (تفادياً لرقمين متعارضين). صار تحت الاسم
       وهو **نفسه** الرقم الحيّ، والزرّ إجراءٌ بلا رقم. فلا تعارض ولا تكرار.
   ====================================================================== */

/* ---------- الصورة: أكبر، على خلفية دافئة، والطبق كاملاً بلا قصّ ---------- */
.addon-hero{
    aspect-ratio: 1 / 1; max-height: 17rem;
    background: var(--c-brand-soft, #f6f1e8);
    padding: .75rem;
}
.addon-hero-img{ object-fit: scale-down; }

/* ---------- الورقة البيضاء تعلو الصورة ---------- */
.addon-about{
    position: relative; z-index: 1;
    margin-top: -1.15rem; padding: 1.15rem 1.15rem 0;
    background: #fff;
    border-start-start-radius: 1.4rem; border-start-end-radius: 1.4rem;
}
.addon-title{ font-size: 1.32rem; line-height: 1.3; letter-spacing: -.01em; }

/* ---------- السعر: رقم كبير وعملة صغيرة بجانبه ---------- */
.addon-price-line{
    display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap;
    margin-top: -.25rem;
}
.addon-price-num{ font-size: 1.6rem; font-weight: 900; color: var(--c-plum, #5f0f40); line-height: 1; }
.addon-price-cur{ font-size: .82rem; font-weight: 800; color: #64748b; }
.addon-price-note{ font-size: .74rem; font-weight: 700; color: #94a3b8; margin-inline-start: .2rem; }

/* ---------- صفّ الحقائق: أيقونة مستديرة واسمها تحتها ---------- */
.dm-facts{
    display: flex; gap: .5rem; margin-top: .25rem;
    padding-bottom: .15rem;
}
/* الأيقونة فوق والاسم تحتها، لا بجانبها: ثلاث بطاقات أفقية على شاشة
   ٣٩٠px تترك لكل اسم ٥٠px فيُقصّ «المكونات» إلى «المكو…». والعمودي يعطي
   الاسم سطره كاملاً ويبقى الصفّ الثلاثي متساوياً. */
.dm-fact{
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: .6rem .35rem; cursor: pointer;
    background: transparent; border: 1px solid #ecebe8; border-radius: 1rem;
    transition: border-color .15s ease, background .15s ease;
}
.dm-fact[hidden]{ display: none; }
.dm-fact-ico{
    flex: none; width: 2rem; height: 2rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-brand-soft, #f6f1e8); color: var(--c-plum, #5f0f40);
}
.dm-fact-ico svg{ width: 1.05rem; height: 1.05rem; }
.dm-fact-label{
    font-size: .73rem; font-weight: 800; color: #475569;
    line-height: 1.2; text-align: center;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-fact:hover{ border-color: #d8d5cf; }
.dm-fact.is-open{
    border-color: var(--c-plum, #5f0f40);
    background: color-mix(in srgb, var(--c-plum, #5f0f40) 6%, transparent);
}
.dm-fact.is-open .dm-fact-label{ color: var(--c-plum, #5f0f40); }
@media (max-width: 340px){
    /* أضيق من ذلك: الأيقونة وحدها، والاسم في aria-label لقارئ الشاشة */
    .dm-fact-label{ display: none; }
}

/* ---------- لوحة التفصيل: ما كتبه المدير ---------- */
.dm-panel{
    margin-top: .1rem; padding: .7rem .8rem;
    background: #f7f8fa; border-radius: .9rem;
}
.dm-panel-title{
    font-size: .72rem; font-weight: 900; color: #94a3b8;
    letter-spacing: .04em; margin-bottom: .45rem;
}
.dm-panel-text{ font-size: .85rem; font-weight: 700; color: #334155; }
.dm-chips{ display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---------- «عن الطبق» ---------- */
.dm-about{ display: flex; flex-direction: column; gap: .5rem; }
.dm-about-head{
    display: flex; align-items: center; gap: .5rem;
    font-size: 1.02rem; font-weight: 900; color: #0f172a;
}
.dm-about-ico{
    flex: none; width: 1.75rem; height: 1.75rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-brand-soft, #e7e2d8); color: var(--c-plum, #5f0f40);
}
.dm-about-ico svg{ width: .95rem; height: .95rem; }
.dm-para{ font-size: .86rem; line-height: 1.9; color: #475569; }
.dm-para + .dm-para{ margin-top: .5rem; }

/* ---------- القالب يصل النافذة كذلك ---------- */
.rest-body .addon-hero{ background: var(--lx-sunken); }
.rest-body .addon-about{ background: var(--lx-surface); }
.rest-body .addon-price-num{ color: var(--lx-price); }
.rest-body .addon-price-cur,
.rest-body .addon-price-note{ color: var(--lx-ink-soft); }
.rest-body .dm-fact{ border-color: var(--lx-line); }
.rest-body .dm-fact-ico{ background: var(--lx-sunken); color: var(--lx-price); }
.rest-body .dm-fact-label{ color: var(--lx-ink-soft); }
.rest-body .dm-fact.is-open{
    border-color: var(--lx-accent);
    background: color-mix(in srgb, var(--lx-accent) 8%, transparent);
}
.rest-body .dm-fact.is-open .dm-fact-label{ color: var(--lx-ink); }
.rest-body .dm-panel{ background: var(--lx-sunken); }
.rest-body .dm-panel-title{ color: var(--lx-ink-soft); }
.rest-body .dm-panel-text{ color: var(--lx-ink); }
.rest-body .dm-about-head{ color: var(--lx-ink); }
.rest-body .dm-about-ico{ border-color: var(--lx-line); color: var(--lx-price); }
.rest-body .dm-para{ color: var(--lx-ink-soft); }
/* الورقة تمتدّ إلى أسفل منطقة التمرير: بلا هذا كان يظهر شريط من لون
   خلفية الصورة تحت المحتوى حين يكون الطبق بلا خيارات (الورقة تنتهي
   بانتهاء نصّها فيبين ما تحتها). */
.addon-scroll{ background: #fff; }
.addon-about{ padding-bottom: 1.15rem; }
.addon-body:not(:empty){ padding-top: .25rem; }
.rest-body .addon-scroll{ background: var(--lx-surface); }
/* رقاقات المكوّنات والوسوم ومجموعة الخيارات: ألوانها كانت ثابتة فتضيء
   بقعاً بيضاء داخل نافذة بقالب داكن. */
.rest-body .dish-ing-chip{
    background: var(--lx-sunken); color: var(--lx-ink);
    border: 1px solid var(--lx-line);
}
.rest-body .dish-tag-chip{
    background: color-mix(in srgb, var(--lx-accent) 10%, transparent);
    color: var(--lx-ink); border: 1px solid var(--lx-line);
}
.rest-body .addon-group{ border-color: var(--lx-line); }
.rest-body .addon-group-title{ color: var(--lx-ink); }
.rest-body .addon-error{ color: #f87171; }
.rest-body .addon-x{
    background: color-mix(in srgb, var(--lx-surface) 82%, transparent);
    color: var(--lx-ink);
}


/* ======================================================================
   ======================  رمز الريال السعودي  =========================
   ----------------------------------------------------------------------
   الرمز الرسمي الجديد لا توجد له أيقونة في خطوط الأجهزة بعد، ولا نريد
   تحميل خطّ كامل من أجل حرف واحد (ولا الاعتماد على اتصال خارجي). فالرمز
   هنا **مرسومٌ بمسار SVG** مستخرج من الصورة الرسمية التي أرسلها صاحب
   الموقع (تطابق ٩٩٫٨٪ مع الأصل)، مدمجٌ في هذا الملف فلا طلب شبكة ولا ملف
   إضافي يُرفع.

   ولماذا mask لا img؟ لأن الخلفية تأخذ currentColor: فيرث الرمز لون النصّ
   الذي بجانبه تلقائياً — أسود في «رخام»، وذهبي في «ليل ذهبي»، وبلون هوية
   المطعم في «كلاسيك» — بلا قاعدة واحدة إضافية لكل قالب.

   والمقاس بالـem فيكبر ويصغر مع حجم السعر الذي هو فيه.
   ====================================================================== */
.riyal{
    display: inline-block;
    width: .78em; height: .87em;         /* نسبة الرمز 894.9:1000 */
    vertical-align: -.085em;             /* يجلس على خطّ الأرقام لا تحته */
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20894.9%201000.0'%3E%3Cpath%20fill-rule='evenodd'%20d='M1.0,924.5%20L0.0,922.6%20L2.4,904.4%20L9.8,868.6%20L18.8,839.4%20L30.6,810.3%20L315.6,749.6%20L315.4,614.3%20L49.5,670.8%20L53.7,641.0%20L60.3,612.1%20L68.9,584.3%20L80.1,556.7%20L315.6,506.5%20L315.6,88.3%20L331.7,69.8%20L362.9,40.1%20L391.2,18.3%20L421.2,0.0%20L421.6,484.3%20L526.2,461.7%20L526.2,141.1%20L544.1,120.5%20L574.6,91.7%20L602.4,70.5%20L631.6,52.3%20L631.8,439.4%20L894.9,383.6%20L891.6,409.2%20L884.1,443.0%20L874.9,472.2%20L864.0,498.0%20L631.8,547.4%20L631.8,654.4%20L894.7,598.8%20L891.3,626.1%20L884.7,655.9%20L875.8,684.9%20L864.4,712.9%20L526.6,784.9%20L526.2,569.7%20L423.4,591.3%20L421.2,592.1%20L421.2,714.7%20L417.9,729.9%20L413.1,739.4%20L356.2,823.9%20L338.4,842.5%20L319.9,854.1%20L299.9,861.0%20Z%20M527.2,1000.0%20L526.2,999.9%20L529.2,977.2%20L535.7,945.9%20L545.9,912.8%20L557.0,885.8%20L894.9,814.0%20L891.0,843.0%20L884.1,873.4%20L874.0,905.0%20L864.0,928.4%20Z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20894.9%201000.0'%3E%3Cpath%20fill-rule='evenodd'%20d='M1.0,924.5%20L0.0,922.6%20L2.4,904.4%20L9.8,868.6%20L18.8,839.4%20L30.6,810.3%20L315.6,749.6%20L315.4,614.3%20L49.5,670.8%20L53.7,641.0%20L60.3,612.1%20L68.9,584.3%20L80.1,556.7%20L315.6,506.5%20L315.6,88.3%20L331.7,69.8%20L362.9,40.1%20L391.2,18.3%20L421.2,0.0%20L421.6,484.3%20L526.2,461.7%20L526.2,141.1%20L544.1,120.5%20L574.6,91.7%20L602.4,70.5%20L631.6,52.3%20L631.8,439.4%20L894.9,383.6%20L891.6,409.2%20L884.1,443.0%20L874.9,472.2%20L864.0,498.0%20L631.8,547.4%20L631.8,654.4%20L894.7,598.8%20L891.3,626.1%20L884.7,655.9%20L875.8,684.9%20L864.4,712.9%20L526.6,784.9%20L526.2,569.7%20L423.4,591.3%20L421.2,592.1%20L421.2,714.7%20L417.9,729.9%20L413.1,739.4%20L356.2,823.9%20L338.4,842.5%20L319.9,854.1%20L299.9,861.0%20Z%20M527.2,1000.0%20L526.2,999.9%20L529.2,977.2%20L535.7,945.9%20L545.9,912.8%20L557.0,885.8%20L894.9,814.0%20L891.0,843.0%20L884.1,873.4%20L874.0,905.0%20L864.0,928.4%20Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* مسافة لطيفة بين الرقم والرمز حين يُكتبان متلاصقين */
.riyal--tight{ margin-inline-start: .12em; }

/* ======================================================================
   ===========  تناسق زرّ الإضافة واسم الطبق والسعر (تحديث ٣٠)  ========
   ----------------------------------------------------------------------
   القياس قبل: الاسم ١٦٫٣px والسعر ١٦px ودائرة «+» ٤٤px — أي أن الدائرة
   ٢٫٧ أضعاف الاسم، فتسحب العين إليها قبل الطبق نفسه وتبدو ثقيلة في سطرٍ
   كل ما فيه هادئ.

   والحلّ ليس تصغير الزرّ: ٤٤px هو حدّ اللمس المريح ولا يُنقَص. فصارت
   **الدائرة المرئية ٣٦px مرسومةً بعنصر زائف داخل زرٍّ مقاسه ٤٤px** —
   يرى الإصبع ٤٤ وترى العين ٣٦. وسلّم الأحجام الآن:

       اسم الطبق ١٦٫٨px  >  السعر ١٥٫٢px  >  دائرة «+» ٣٦px مرئية

   فالاسم هو الأكبر، والسعر يليه، والزرّ إجراءٌ هادئ في الطرف.
   ====================================================================== */

/* ---------- السطر في تخطيط القائمة ---------- */
.rest-body .dish-row-name{ font-size: 1.05rem; line-height: 1.35; }
.rest-body .dish-row-meta{ font-size: .95rem; }

.rest-body .dish-row .dish-row-add{
    /* هدف اللمس كما هو، والخلفية والحدّ ينتقلان إلى ::before */
    width: 2.75rem; height: 2.75rem;
    background: transparent; border: 0; position: relative;
}
.rest-body .dish-row .dish-row-add::before{
    content: ""; position: absolute; inset: .25rem;   /* ٣٦px مرئية داخل ٤٤ */
    border-radius: 9999px;
    background: var(--lx-sunken);
    border: 1px solid color-mix(in srgb, var(--lx-ink) 26%, var(--lx-line));
    transition: background .15s ease, border-color .15s ease;
}
.rest-body .dish-row .dish-row-add svg{
    position: relative;        /* فوق الدائرة */
    width: 1.05rem; height: 1.05rem;
}
.rest-body .dish-row .dish-row-add:hover:not(:disabled){ background: transparent; }
.rest-body .dish-row .dish-row-add:hover:not(:disabled)::before{
    background: var(--lx-accent); border-color: var(--lx-accent);
}
.rest-body .dish-row .dish-row-add:hover:not(:disabled){ color: var(--lx-on-accent); }

/* ---------- البطاقة في تخطيط الشبكة والتصنيفات ---------- */
/* البطاقة تتبع سلّم السطر نفسه: كان السعر فيها أكبر من الاسم (١٧٫٣ مقابل
   ١٦٫٣px) بينما السطر بالعكس — فيختلف ترتيب العين بين تخطيط وآخر في
   المطعم الواحد. الآن الاسم أكبر في الاثنين. */
.rest-body .dish-card-name{ font-size: 1.05rem; line-height: 1.35; }
.rest-body .dish-card-price{ font-size: .95rem; }
.rest-body .dish-card-foot .add-to-cart-btn{
    width: 2.75rem; height: 2.75rem; position: relative;
    background: transparent; border: 0; color: var(--lx-on-accent);
}
.rest-body .dish-card-foot .add-to-cart-btn::before{
    content: ""; position: absolute; inset: .25rem;
    border-radius: 9999px; background: var(--lx-accent);
    transition: background .15s ease;
}
.rest-body .dish-card-foot .add-to-cart-btn svg{ position: relative; width: 1.05rem; height: 1.05rem; }
.rest-body .dish-card-foot .add-to-cart-btn:hover::before{
    background: color-mix(in srgb, var(--lx-accent) 85%, #000);
}
.rest-body .dish-card-foot .add-to-cart-btn:disabled::before{ opacity: .35; }

/* ---------- حقلا اسم القسم (عربي + إنجليزي) ----------
   صار النموذج حقلين لا حقلاً، فيحتاج الصفّ أن يلتفّ على الشاشات الضيّقة
   بدل أن يضغط الحقلين حتى لا يُقرأ فيهما شيء. */
.b-new-section-row{ flex-wrap: wrap; }
.b-new-section-row .dash-input{ flex: 1 1 11rem; min-width: 0; }
.b-rename{ display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.b-rename .dash-input{ flex: 0 1 10rem; min-width: 7rem; }
@media (max-width: 540px){
    .b-new-section-row .dash-input,
    .b-rename .dash-input{ flex: 1 1 100%; }
}

/* ---------- لوحة حالة الترجمة في تبويب الإعدادات ---------- */
.tr-panel{
    display: flex; flex-direction: column; gap: .3rem;
    margin: .2rem 0 .9rem; padding: .7rem .85rem;
    background: #f8fafc; border: 1px solid var(--dash-border); border-radius: .85rem;
}
.tr-row{ display: flex; align-items: baseline; justify-content: space-between; gap: .9rem; font-size: .82rem; }
.tr-label{ color: #64748b; font-weight: 700; flex: none; }
.tr-value{ color: #0f172a; font-weight: 700; text-align: end; word-break: break-word; }
.tr-row.is-ok   .tr-value{ color: #15803d; }
.tr-row.is-warn .tr-value{ color: #b45309; }
.tr-row.is-bad  .tr-value{ color: #b91c1c; }

/* ======================================================================
   =====================  لون القالب (تحديث ٣٢)  =======================
   ----------------------------------------------------------------------
   القالب يضبط الأسطح والنصوص والمسافات — وهي ما يصنع طابعه — ويبقى **لون
   التمييز** وحده قابلاً للاختيار: الأزرار والأسعار والتبويب النشط والخطّ
   الذهبي تحت الوصف. فمطعمان على «ليل ذهبي» لا يخرجان متطابقَين، ولا يكسر
   اختيارُ لونٍ تناسقَ القالب لأن الأسطح لم تُمَسّ.

   والمشكلة التي يحلّها الاشتقاق أدناه: لونٌ يصلح خلفيةً لزرّ قد لا يصلح
   نصّاً. ذهبيٌّ فاتح على العاجي يختفي، وخوخيٌّ داكن على الأسود يختفي.
   فالسعر والاسم لا يأخذان اللون كما هو، بل نسخةً منه محدودة السطوع:
     • القوالب الفاتحة: سطوع لا يتجاوز .45 ← يُغمَّق الفاتح وحده
     • «ليل ذهبي»:      سطوع لا يقلّ عن .72 ← يُفتَّح الداكن وحده
   فأيُّ لون يختاره المطعم يخرج مقروءاً على خلفية قالبه.
   ====================================================================== */

.rest-body[data-tc]{
    --lx-accent: var(--c-theme);
    --lx-gold:   var(--c-theme);
    --lx-price:  var(--c-theme);     /* البديل للمتصفّحات بلا ألوان نسبية */
}
/* لون الاسم يتبع لون القالب في «كلاسيك» وحده — في القوالب الأخرى الاسم
   بلون النصّ عمداً، وهو جزء من طابعها. */
.rest-body[data-tc][data-theme="classic"]{ --lx-name: var(--lx-price); }

@supports (color: oklch(from #fff l c h)){
    .rest-body[data-tc]{
        --lx-price: oklch(from var(--c-theme) min(l, .45) c h);
    }
    .rest-body[data-tc][data-theme="noir"]{
        --lx-price: oklch(from var(--c-theme) max(l, .72) c h);
    }
}

/* ---------- منتقي لون القالب في لوحة التحكم ---------- */
.ds-tc{ margin-top: .9rem; }
.ds-tc-row{ display: flex; flex-wrap: wrap; gap: .4rem; margin: .45rem 0 .55rem; }
.ds-tc-chip{
    position: relative; width: 2rem; height: 2rem; border-radius: 9999px;
    background: var(--tc, #e2e8f0); cursor: pointer;
    border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .12s ease, border-color .12s ease;
}
.ds-tc-chip input[type="radio"]{ position: absolute; opacity: 0; width: 0; height: 0; }
.ds-tc-chip:hover{ transform: scale(1.08); }
.ds-tc-chip.is-on{ border-color: #0f172a; }
.ds-tc-chip:focus-within{ outline: 2px solid var(--c-plum, #5f0f40); outline-offset: 2px; }
/* «لون القالب الأصلي» */
.ds-tc-chip--none{ background: #fff; color: #64748b; font-size: .8rem; font-weight: 800; }
/* المنتقي الحرّ: مربّع اللون يملأ الرقاقة فيُضغط مباشرة */
.ds-tc-chip--pick{ background: conic-gradient(#ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444); }
.ds-tc-input{
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: 0; padding: 0;
}

/* ---------- القالب المخصّص: الدرجات تأتي مطبوعة من الخادم ----------
   لا اشتقاق هنا: menu_custom_theme_vars في includes/menu-data.php تحسبها
   وتضمن تباينها، وتُطبع في <style> على .rest-body[data-theme="custom"].
   فهذه القاعدة للاحتياط وحده — لو فُقدت القيم لسببٍ ما بقي القالب
   مقروءاً بدرجات «عاجي». */
.rest-body[data-theme="custom"]{
    --lx-bg: #f7f3ea; --lx-surface: #fbfaf6; --lx-sunken: #e9e6dd;
    --lx-ink: #1f4034; --lx-ink-soft: #5c6b63; --lx-line: #afa28e;
    --lx-gold: #7c633d; --lx-price: #7c633d; --lx-name: #1f4034;
    --lx-accent: #1f4034; --lx-on-accent: #ffffff;
    --lx-radius: .9rem;
    --lx-shadow: 0 18px 44px -30px rgba(40, 40, 40, .5);
}

/* ---------- منتقيات الألوان الثلاثة في لوحة التحكم ---------- */
.ds-cc{ margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--dash-border); }
.ds-cc-grid{ display: flex; gap: .6rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.ds-cc-one{
    flex: 1 1 8rem; min-width: 0; display: flex; flex-direction: column; gap: .3rem;
    cursor: pointer;
}
.ds-cc-one input[type="color"]{
    width: 100%; height: 2.6rem; padding: 0; cursor: pointer;
    border: 1px solid var(--dash-border); border-radius: .7rem; background: none;
}
.ds-cc-name{ font-size: .8rem; font-weight: 800; color: #334155; }
.ds-cc-hint{ font-size: .72rem; color: #94a3b8; }

.ds-cc-presets{ display: flex; flex-wrap: wrap; gap: .4rem; margin: .45rem 0 .7rem; }
.ds-cc-preset{
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .6rem .35rem .4rem; cursor: pointer;
    background: #fff; border: 1px solid var(--dash-border); border-radius: 9999px;
    font-size: .76rem; font-weight: 700; color: #475569;
    transition: border-color .15s ease, transform .12s ease;
}
.ds-cc-preset:hover{ border-color: var(--c-plum, #5f0f40); transform: translateY(-1px); }
.ds-cc-preset i{
    width: .9rem; height: .9rem; border-radius: 9999px; background: var(--a);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15); display: block;
}
.ds-cc-preset i + i{ margin-inline-start: -.35rem; }

/* ===== الدوائر الثلاث الحيّة فوق صفّ ألوان القالب =====
   تُظهر تركيب القالب المختار: الخلفية، والنصوص، والخطوط. ومع «ألوانك»
   تتبع المنتقيات لحظةً بلحظة. الحلقة البيضاء الداخلية تُبقي الدائرة
   مرئيّة حين يختار المدير لوناً قريباً من لون البطاقة. */
.ds-trio{
    display: flex; gap: 1.1rem; align-items: flex-start;
    margin: 0 0 .85rem; padding: .7rem .85rem;
    background: #f8fafc; border: 1px solid var(--dash-border); border-radius: .85rem;
}
.ds-trio-one{ display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.ds-trio-dot{
    width: 2.1rem; height: 2.1rem; border-radius: 9999px; display: block;
    background: var(--tr, #e2e8f0);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18), 0 0 0 3px #fff, 0 1px 3px rgba(15, 23, 42, .14);
    transition: background-color .18s ease;
}
.ds-trio-cap{ font-size: .7rem; font-weight: 700; color: #64748b; line-height: 1; }
@media (max-width: 30rem){
    .ds-trio{ gap: .8rem; padding: .6rem .7rem; }
    .ds-trio-dot{ width: 1.8rem; height: 1.8rem; }
}

/* ===== أيقونات التواصل: مفرّغة بلا خلفية =====
   كانت أقراصاً مصمتة بألوان التطبيقات (تدرّج إنستقرام، أسود تيك توك…)
   بينما بقيّة أيقونات الصفحة — البحث والسلّة والإضافة والتنبيه — خطّية
   بلون النصّ. فكان في الصفحة نظامان. الآن نظام واحد: الحدّ والأيقونة
   بلون النصّ، والداخل شفّاف يُظهر خلفية القالب.

   تأتي بعد `.soc-btn--instagram` وأخواتها في ترتيب المصدر فتغلبها بلا
   !important. */
.rest-body .soc-btn,
.rest-body .soc-btn--instagram,
.rest-body .soc-btn--tiktok,
.rest-body .soc-btn--facebook,
.rest-body .soc-btn--whatsapp{
    background: transparent;
    background-image: none;
    color: var(--lx-ink, #1f2937);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 32%, transparent);
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* متصفّح بلا color-mix: حدٌّ رماديّ هادئ بدل أن يختفي الإطار */
@supports not (color: color-mix(in srgb, red 50%, blue)){
    .rest-body .soc-btn{ box-shadow: inset 0 0 0 1.5px rgba(100, 116, 139, .45); }
}
.rest-body .soc-btn:hover{
    transform: translateY(-2px);
    filter: none;
    background: color-mix(in srgb, currentColor 9%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 55%, transparent);
}
.rest-body .soc-btn:active{ transform: translateY(0); }
.rest-body .soc-ico{ width: 1.35rem; height: 1.35rem; }

/* ===== السعر أبرز — وبتناسق =====
   كان الاسم أكبر من السعر في كل التخطيطات (١٦٫٨ مقابل ١٥٫٢px) لأن قاعدة
   التحديث ٣٠ جعلت الاسم هو هدف العين الأول. والمطلوب الآن عكسه: السعر
   هو الأبرز.

   و«بتناسق» تعني ثلاثة قيود لا واحداً:
     ١) درجةٌ واحدة من السلّم فوق الاسم لا قفزة — ١٫١٥rem مقابل ١٫٠٥
        (نسبة ١٫١ وهي نفس نسبة الاسم إلى الوصف)، فيبرز بلا أن يصرخ.
     ٢) **نفس القيمة في التخطيطات الثلاثة** (شبكة · قائمة · تصنيفات)،
        فلا يختلف ترتيب العين بين تخطيط وآخر في المطعم الواحد — وهذا
        العيب نفسه الذي عولج في التحديث ٣٠، فلا نُعيده مقلوباً.
     ٣) أرقام جدوليّة (tabular-nums) فتتحاذى خانات الأسعار رأسياً في
        العمود، ورمز الريال يصغُر قليلاً فلا يطغى على الرقم.

   واللون يبقى `--lx-price` المشتقّ من القالب بضمان التباين، فالبروز
   بالحجم والوزن لا بلونٍ يكسر القالب. */
.rest-body .dish-card-price,
.rest-body .dish-row-meta .u-text-plum,
.rest-body .dish-row-price{
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.rest-body .dish-card-price .riyal,
.rest-body .dish-row-meta .riyal,
.rest-body .dish-row-price .riyal{ width: .7em; height: .78em; opacity: .9; }

/* الشبكة المضغوطة: درجة أصغر، وتبقى النسبة فوق الاسم نفسها */
.rest-body .rest-grid--compact .dish-card-name{ font-size: .95rem; }
.rest-body .rest-grid--compact .dish-card-price{ font-size: 1.04rem; }

/* شاشة ضيّقة جداً: السعر والزرّ في سطر واحد، فنمنع الالتفاف */
@media (max-width: 22.5rem){
    .rest-body .dish-card-price,
    .rest-body .dish-row-meta .u-text-plum,
    .rest-body .dish-row-price{ font-size: 1.08rem; }
}

/* ===== شعار المطعم بديلاً لصورة الطبق الغائبة =====
   كان السطر بلا صورة صندوقاً فارغاً، والبطاقة رسمةَ شوكةٍ وسكّين عامّة.
   الآن يظهر شعار المطعم خفيفاً — هوية المطعم نفسها لا رسمة محايدة.

   الصورة من `--lx-logo` على <body> (يطبعها restaurant.php مرّة واحدة)،
   و`contain` تمنع قصّ الشعار مهما كانت نسبته، والشفافية تُبقيه خلفيةً
   لا عنصراً يسرق العين. وبلا شعارٍ مرفوع لا يُرسَم شيء — لا مربّع
   فارغ ولا حدّ — فالقاعدة كلّها محميّة بـ@supports على المتغيّر. */
.dish-logo-ghost{
    position: absolute; inset: 0; display: block; pointer-events: none;
    background-image: var(--lx-logo, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 52% auto;
    opacity: .14;
    filter: grayscale(1) contrast(.9);
}
/* الرسمة الخطّية تخفت حين يوجد شعار، فلا يتراكب الاثنان */
.rest-body .dish-card-media .dish-logo-ghost ~ *,
.rest-body .dish-card-media:has(.dish-logo-ghost) .dish-card-media-ico{ opacity: .5; }

/* صندوق صورة السطر يصير مرجعاً للتموضع، وتهدأ خلفيته */
.rest-body .dish-row-side{ position: relative; overflow: hidden; }
.rest-body .dish-row-side.is-noimg{
    background: color-mix(in srgb, var(--lx-ink, #0f172a) 4%, var(--lx-surface, #fff));
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
    .rest-body .dish-row-side.is-noimg{ background: rgba(15, 23, 42, .04); }
}
.rest-body .dish-row-side.is-noimg .dish-logo-ghost{ background-size: 62% auto; opacity: .18; }
.rest-body .dish-card-media{ position: relative; }

/* ===== مبدّل العرض: شبكة / قائمة =====
   قرصٌ متحرّك داخل كبسولة، كالمرجع المرفق: الجهة النشطة يغطّيها مقبض
   مصمت وأيقونتها تنقلب إلى لون الخلفية، والأخرى خطّية شفّافة. والمقبض
   يتحرّك بـtransform وحده (لا left/right) فالحركة على الـcompositor.

   وهو عنصر خطّي كبقيّة أيقونات الصفحة: الحدّ واللون من `currentColor`،
   فيتبع القالب وألوان المدير بلا قاعدة خاصّة لكل قالب. */
.rest-findbar{ display: flex; align-items: center; gap: .55rem; }
.rest-findbar .rest-search{ flex: 1 1 auto; min-width: 0; }

.vw-switch{
    position: relative; flex: none; display: inline-flex; align-items: center;
    padding: .22rem; border-radius: 9999px;
    color: var(--lx-ink, #0f172a);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 26%, transparent);
    background: transparent;
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
    .vw-switch{ box-shadow: inset 0 0 0 1.5px rgba(100, 116, 139, .4); }
}
.vw-knob{
    position: absolute; top: .22rem; inset-inline-start: .22rem;
    width: 2.15rem; height: 2.15rem; border-radius: 9999px;
    background: var(--lx-ink, #0f172a);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
/* الشبكة هي الزرّ الثاني: يُزاح المقبض بعرض زرّ كامل في اتجاه الكتابة */
.vw-switch[data-view="grid"] .vw-knob{ transform: translateX(-2.15rem); }
[dir="ltr"] .vw-switch[data-view="grid"] .vw-knob{ transform: translateX(2.15rem); }

.vw-btn{
    position: relative; z-index: 1;
    width: 2.15rem; height: 2.15rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: inherit; border-radius: 9999px; text-decoration: none;
    transition: color .18s ease, opacity .18s ease;
    opacity: .62;
}
.vw-btn svg{ width: 1.15rem; height: 1.15rem; display: block; }
.vw-btn.is-on{ color: var(--lx-bg, #fff); opacity: 1; }
.vw-btn:not(.is-on):hover{ opacity: 1; }
.vw-btn:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
    .vw-knob{ transition: none; }
}
@media (max-width: 22.5rem){
    .vw-btn, .vw-knob{ width: 1.95rem; height: 1.95rem; }
    .vw-switch[data-view="grid"] .vw-knob{ transform: translateX(-1.95rem); }
    [dir="ltr"] .vw-switch[data-view="grid"] .vw-knob{ transform: translateX(1.95rem); }
}

/* ===== منتقي خطوط النصّ (هوية الصفحة) =====
   مربّعات متساوية في شبكة auto-fill — نفس قاعدة شريط القوالب، فلا يتمدّد
   المربّع اليتيم في آخر صف. وكل مربّع مكتوبٌ **بخطّه نفسه**، فالاختيار
   يتمّ بالعين لا بقراءة الأسماء. */
.ds-fonts{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
    gap: .45rem;
    margin: .45rem 0 .2rem;
}
.ds-fonts-gap{ margin-top: 1rem; display: block; }

.ds-font{
    position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .15rem;
    padding: .6rem .3rem .45rem; cursor: pointer; text-align: center;
    background: #fff; border: 1.5px solid var(--dash-border); border-radius: .7rem;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.ds-font input{ position: absolute; opacity: 0; width: 0; height: 0; }
.ds-font:hover{ border-color: #94a3b8; transform: translateY(-1px); }

/* المختار: حدّ الهوية وظلّ خفيف — ولا نعتمد على اللون وحده */
.ds-font.is-on,
.ds-font:has(input:checked){
    border-color: var(--c-plum, #5f0f40);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-plum, #5f0f40) 18%, transparent);
}
.ds-font:focus-within{ outline: 2px solid var(--c-plum, #5f0f40); outline-offset: 2px; }

/* العيّنة بخطّ المربّع نفسه */
.ds-font-sample{
    font-family: var(--ff), 'Segoe UI', system-ui, sans-serif;
    font-size: 1.45rem; font-weight: 700; line-height: 1.25;
    color: #0f172a; white-space: nowrap;
}
.ds-font-name{
    font-size: .64rem; font-weight: 700; color: #64748b;
    line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
@media (max-width: 30rem){
    .ds-fonts{ grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); }
    .ds-font-sample{ font-size: 1.25rem; }
}

/* ===== شارة الدفع على كرت الطلب =====
   نقطة ملوّنة **ونصّ** معاً: اللون وحده لا يكفي — ثمانية بالمئة من الرجال
   لا يميّزون الأحمر من الأخضر، وشاشة الكاشير كثيراً ما تكون تحت ضوءٍ يغسل
   الألوان. فالنصّ هو المعلومة واللون تسريعٌ لها. */
.order-head-tags{ display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }

.pay-badge{
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .18rem .5rem; border-radius: 9999px;
    font-size: .7rem; font-weight: 800; line-height: 1.5; white-space: nowrap;
}
.pay-dot{ width: .45rem; height: .45rem; border-radius: 9999px; background: currentColor; flex: none; }

/* ١٠٫٤:١ و٧٫٨:١ — فوق حدّ WCAG AA للنصّ الصغير */
.pay-badge--no { color: #9f1239; background: #fff1f2; box-shadow: inset 0 0 0 1px #fecdd3; }
.pay-badge--yes{ color: #065f46; background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0; }

/* زرّ «تحديد كمدفوع»: مميّز عن أزرار الحالة لأنه إجراءٌ ماليّ لا تشغيليّ،
   وأخضرُ هادئ لا صارخ — الكاشير يراه عشرات المرّات في الساعة. */
.dash-btn--pay{
    background: #065f46; border-color: #065f46; color: #fff;
}
.dash-btn--pay:hover:not(:disabled){ background: #047857; border-color: #047857; }
.dash-btn--pay:focus-visible{ outline: 2px solid #065f46; outline-offset: 2px; }

/* حافة الكرت غير المدفوع: تلميحٌ هادئ لا يزاحم ألوان حالة التحضير */
.order-card:has(.pay-badge--no)::after{
    content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%;
    width: 3px; border-radius: 0 3px 3px 0; background: #fb7185; opacity: .55;
}
.order-card{ position: relative; }

/* ===== حقل البحث لا يتمدّد بعرض خطّه =====
   `<input>` له عرضٌ ذاتيّ من سمة `size` الافتراضية (٢٠ حرفاً)، و`flex: 1`
   وحدها لا تسمح له بالانكماش دونه (الحدّ الأدنى للعنصر المرن هو عرضه
   الذاتيّ). فمع خطٍّ عريض كـ«أميري» يصير العرض الذاتيّ أكبر من الشريط،
   فيدفع الصفحة كلّها ٣١px إلى الجانب على جوال ٣٢٠px.

   `min-width: 0` ترفع ذلك الحدّ، و`width: 100%` تجعله يملأ ما بقي لا
   أكثر. وهذا يصحّ لأي خطّ من العشرين، فلا يتعلّق الأمر باختيار المدير. */
.rest-search{ min-width: 0; }
.rest-search input{ min-width: 0; width: 100%; }