shadow and don't availablity

src/app/[name]/(Main)/[id]/page.tsx

@@ -206,8 +206,10 @@ function FoodPage({}: Props) {
           >
             {quantity <= 0 ? (
               <button onClick={handleAddToCart} disabled={!isAvailable} className="inline-flex w-full justify-center items-center gap-2 disabled:pointer-events-none disabled:opacity-40">
-                <PlusIcon />
-                <div className="text-sm2 pt-0.5 font-normal text-foreground">افزودن</div>
+                {isAvailable && <PlusIcon />}
+                <div className="text-sm2 pt-0.5 font-normal text-foreground">
+                  {isAvailable ? "افزودن" : "عدم موجودی"}
+                </div>
               </button>
             ) : (
               <>

src/components/listview/CategoryItemRenderer.tsx

@@ -9,10 +9,10 @@ type Props = {
 
 function CategoryItemRenderer({ children, ...rest }: Props) {
     return (
-        <div className={glassSurface(rest.className, 'cursor-pointer transition-all duration-200 ease-out overflow-hidden rounded-xl')}>
+        <div className={glassSurface(rest.className, 'cursor-pointer transition-all duration-200 ease-out rounded-xl')}>
             <div
                 {...rest}
-                className="rounded-normal w-[108px] h-[88px] flex flex-col justify-center items-center gap-2"
+                className="rounded-normal w-[108px] h-[88px] flex flex-col justify-center items-center gap-2 overflow-hidden"
             >
                 {children}
             </div>

src/components/listview/CategorySmallItemRenderer.tsx

@@ -9,10 +9,10 @@ type Props = {
 
 function CategorySmallItemRenderer({ children, ...rest }: Props) {
     return (
-        <div className={glassSurface(rest.className, 'cursor-pointer transition-all duration-200 ease-out overflow-hidden rounded-xl')}>
+        <div className={glassSurface(rest.className, 'cursor-pointer transition-all duration-200 ease-out rounded-xl')}>
             <div
                 {...rest}
-                className="rounded-normal h-[44px] flex flex-row justify-center items-center p-2.5 gap-2"
+                className="rounded-normal h-[44px] flex flex-row justify-center items-center p-2.5 gap-2 overflow-hidden"
             >
                 {children}
             </div>

src/components/listview/MenuItem.tsx

@@ -161,9 +161,9 @@ const MenuItem = ({ food }: MenuItemProps) => {
                 disabled={!isAvailable}
                 className="inline-flex w-full justify-center items-center gap-2 disabled:pointer-events-none disabled:opacity-40"
               >
-                <PlusIcon />
+                {isAvailable && <PlusIcon />}
                 <div className="text-sm2 pt-0.5 font-normal text-foreground">
-                  افزودن
+                  {isAvailable ? "افزودن" : "عدم موجودی"}
                 </div>
               </button>
             ) : (

src/styles/glass.css

@@ -5,7 +5,7 @@
   border: 1px solid rgba(255, 255, 255, 0.8);
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
-  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
 }
 
 html[data-pattern-bg="true"] .glass-surface,
@@ -17,6 +17,7 @@ html[data-image-bg="true"] .glass-surface {
 html[data-theme="dark"] .glass-surface {
   background-color: color-mix(in oklch, var(--container) 60%, transparent);
   border-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
 }
 
 .glass-surface--flat {