glass other page

src/app/[name]/(Dialogs)/game/page.tsx

@@ -4,6 +4,7 @@ import { type FC } from 'react'
 import { useRouter } from 'next/navigation'
 import Seperator from '@/components/utils/Seperator'
 import Image from 'next/image'
+import { glassSurfaceCardFlat } from '@/lib/styles/glassSurface'
 
 const GamePage: FC = () => {
 
@@ -46,7 +47,7 @@ const GamePage: FC = () => {
             <div className='mt-8 flex flex-col gap-4'>
                 <div
                     style={{ direction: 'ltr' }}
-                    className='bg-white dark:bg-container shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer border border-transparent dark:border-border/50'
+                    className={glassSurfaceCardFlat('rounded-[10px] p-2 flex justify-between items-center cursor-pointer')}
                     onClick={() => {
                         const currentPath = window.location.pathname
                         const basePath = currentPath.split('/game')[0]
@@ -76,7 +77,7 @@ const GamePage: FC = () => {
 
                 <div
                     style={{ direction: 'ltr' }}
-                    className='bg-white dark:bg-container shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer border border-transparent dark:border-border/50'
+                    className={glassSurfaceCardFlat('rounded-[10px] p-2 flex justify-between items-center cursor-pointer')}
                     onClick={() => {
                         const currentPath = window.location.pathname
                         const basePath = currentPath.split('/game')[0]
@@ -106,7 +107,7 @@ const GamePage: FC = () => {
 
                 <div
                     style={{ direction: 'ltr' }}
-                    className='bg-white dark:bg-container shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer border border-transparent dark:border-border/50'
+                    className={glassSurfaceCardFlat('rounded-[10px] p-2 flex justify-between items-center cursor-pointer')}
                     onClick={() => {
                         const currentPath = window.location.pathname
                         const basePath = currentPath.split('/game')[0]

src/app/[name]/(Dialogs)/notifications/page.tsx

@@ -10,6 +10,7 @@ import { useGetNotifications, useReadAllNotifications } from './hooks/useNotific
 import type { Notification } from './types/Types';
 import { useGetNotificationsCount } from '../../(Main)/hooks/useMenuData';
 import Prompt from '@/components/utils/Prompt';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 type Props = object
 
@@ -110,7 +111,7 @@ export default function NotificationsIndex({ }: Props) {
                             const formattedTime = formatTime(notification.createdAt);
 
                             return (
-                                <li key={notification.id} className='bg-container py-5 px-4 rounded-container shadow-lg'>
+                                <li key={notification.id} className={glassSurfaceCard('py-5 px-4')}>
                                     {/* <h5 className='font-medium text-sm'>{notification.title}</h5> */}
                                     <p className='text-xs mt-2 leading-5'>{notification.content}</p>
 

src/app/[name]/(Dialogs)/order/checkout/[id]/components/AddressSection.tsx

@@ -8,6 +8,7 @@ import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 import { useCheckoutStore } from '../../store/Store';
 import useToggle from '@/hooks/helpers/useToggle';
 import { AddressSelectionModal } from './AddressSelectionModal';
@@ -66,7 +67,7 @@ export const AddressSection = () => {
     // اگر آدرس ندارد
     if (addresses.length === 0) {
         return (
-            <section className="bg-container rounded-container box-shadow-normal p-4">
+            <section className={glassSurfaceCard('p-4')}>
                 <div className="py-3">
                     <h3 className="text-sm2 font-medium leading-5 mb-4">{t("SectionAddress.Title")}</h3>
                     <p className='text-sm2 text-disabled-text mb-4'>
@@ -89,7 +90,7 @@ export const AddressSection = () => {
 
     return (
         <>
-            <section className="bg-container rounded-container box-shadow-normal p-4">
+            <section className={glassSurfaceCard('p-4')}>
                 <div className="py-3">
                     <div className='w-full flex justify-between items-center gap-2'>
                         <h3 className="text-sm2 font-medium leading-5 inline-block">{t("SectionAddress.Title")}</h3>

src/app/[name]/(Dialogs)/order/checkout/[id]/components/CarAddressSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import InputField from '@/components/input/InputField';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 import { useCheckoutStore } from '../../store/Store';
 import { useCallback, useEffect } from 'react';
 
@@ -42,7 +43,7 @@ export const CarAddressSection = () => {
     }, [carAddress, setCarAddress]);
 
     return (
-        <section className="bg-container rounded-container box-shadow-normal p-4">
+        <section className={glassSurfaceCard('p-4')}>
             <div className="py-3">
                 <h3 className="text-sm2 font-medium leading-5 mb-4">
                     اطلاعات خودرو

src/app/[name]/(Dialogs)/order/checkout/[id]/components/CouponSection.tsx

@@ -8,6 +8,7 @@ import { useApplyCoupon, useRemoveCoupon } from '../../hooks/useOrderData';
 import Button from '@/components/button/PrimaryButton';
 import { extractErrorMessage } from '@/lib/func';
 import { toast } from '@/components/Toast';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 import { useEffect, useState } from 'react';
 import { useGetCartItems } from '@/app/[name]/(Main)/cart/hooks/useCartData';
 
@@ -73,7 +74,7 @@ export const CouponSection = ({
     }, [cartItems, onCouponCodeChange]);
 
     return (
-        <section className="bg-container rounded-container box-shadow-normal p-4">
+        <section className={glassSurfaceCard('p-4')}>
             <div className="py-3">
                 <h3 className="text-sm2 font-medium leading-5">{t("SectionCoupon.Title")}</h3>
 

src/app/[name]/(Dialogs)/order/checkout/[id]/components/PaymentSection.tsx

@@ -8,6 +8,7 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { extractErrorMessage } from "@/lib/func";
 import { Card, Icon, Wallet2 } from "iconsax-react";
 import Image from "next/image";
+import { glassSurfaceCard } from "@/lib/styles/glassSurface";
 import { useCallback, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { PaymentMethodEnum } from "../../enum/Enum";
@@ -121,7 +122,7 @@ export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSect
   };
 
   return (
-    <section className="bg-container rounded-container box-shadow-normal p-4">
+    <section className={glassSurfaceCard('p-4')}>
       <div className="py-3">
         <h3 className="text-sm2 font-medium leading-5">{tOrderDetail("SectionPayment.Title")}</h3>
 

src/app/[name]/(Dialogs)/order/checkout/[id]/components/ShippingSection.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useGetShipmentMethod } from '../../hooks/useOrderData';
 import { DeliveryMethod } from '../../types/Types';
 import { useCheckoutStore } from '../../store/Store';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 type ShippingSectionProps = {
     deliveryType: string;
@@ -57,7 +58,7 @@ export const ShippingSection = ({ deliveryType, onDeliveryTypeChange }: Shipping
         })) || [];
 
     return (
-        <section className="bg-container rounded-container box-shadow-normal p-4">
+        <section className={glassSurfaceCard('p-4')}>
             <div className="py-3">
                 <h3 className="text-sm2 font-medium leading-5">{tOrderDetail("SectionShipping.Title")}</h3>
                 <Combobox

src/app/[name]/(Dialogs)/order/checkout/[id]/components/TableSection.tsx

@@ -3,6 +3,7 @@
 import { MinusIcon, PlusIcon } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 type TableSectionProps = {
     tableNumber: number;
@@ -14,7 +15,7 @@ export const TableSection = ({ tableNumber, onIncrement, onDecrement }: TableSec
     const { t } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
 
     return (
-        <section className="bg-container rounded-container box-shadow-normal p-4 py-2">
+        <section className={glassSurfaceCard('p-4 py-2')}>
             <div className="py-3">
                 <div className='w-full grid grid-cols-2 justify-between items-center gap-2'>
                     <h3 className="text-sm2 font-medium leading-5 inline-block">{t("SectionTable.Title")}</h3>

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

@@ -8,6 +8,7 @@ import React, { useEffect, useState } from 'react'
 import { useVerify } from '../hooks/useVerifyData';
 import { toast } from '@/components/Toast';
 import { VerifyData } from '../types/Types';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 type Props = object
 
@@ -74,7 +75,7 @@ export default function VerifyIndex({ }: Props) {
     return (
         <div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
             <div className='flex-1 flex flex-col items-center justify-center'>
-                <div className='bg-container py-5 px-2 rounded-container shadow-lg w-full'>
+                <div className={glassSurfaceCard('py-5 px-2 w-full')}>
                     <div className={`items-center gap-2 rounded-2xl h-35 flex flex-col justify-center ${isError ? 'bg-red-50' : 'bg-gray-50'}`}>
                         {isError ? (
                             <CloseCircle className='size-10 stroke-red-500' variant='TwoTone' />

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

@@ -7,6 +7,7 @@ import { toast, toastLoginRequired } from "@/components/Toast";
 import { getToken } from "@/lib/api/func";
 import { ef } from "@/lib/helpers/utfNumbers";
 import clsx from "clsx";
+import { glassSurface, glassSurfaceCard, glassSurfaceFlat } from "@/lib/styles/glassSurface";
 import { motion } from "framer-motion";
 import { ArrowLeft, Clock, Cup, Heart, TruckTick } from "iconsax-react";
 import { useParams, useRouter } from "next/navigation";
@@ -135,7 +136,7 @@ function FoodPage({}: Props) {
         !isAvailable && "opacity-50",
       )}
     >
-      <div className="relative w-full  lg:h-full min-h-0 not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
+      <div className={glassSurface('relative w-full lg:h-full min-h-0 rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1 lg:!bg-transparent lg:!border-0 lg:!shadow-none lg:[backdrop-filter:none]')}>
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           className="lg:object-cover lg:h-full object-cover bg-[#F2F2F9] w-full"
@@ -146,12 +147,12 @@ function FoodPage({}: Props) {
           }}
         />
         <div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
-          <div className="bg-container whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold">
+          <div className={glassSurfaceFlat('whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold')}>
             {categoryName || "-"}
           </div>
           <button
             onClick={handleBackToMenu}
-            className="p-2 rounded-full bg-container/40"
+            className={glassSurfaceFlat('p-2 rounded-full')}
           >
             <ArrowLeft
               size={18}
@@ -161,7 +162,7 @@ function FoodPage({}: Props) {
         </div>
       </div>
 
-      <div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:h-full lg:min-h-0 bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none lg:overflow-y-auto">
+      <div className={glassSurfaceCard('relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:h-full lg:min-h-0 w-full overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none lg:overflow-y-auto rounded-3xl')}>
         <div className="w-full inline-flex justify-between items-center shrink-0">
           <h5 className="text-base font-bold">{foodName}</h5>
           <button
@@ -249,7 +250,7 @@ function FoodPage({}: Props) {
                 <button
                   onClick={handleAddToCart}
                   disabled={!isAvailable}
-                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-40 disabled:pointer-events-none"
+                  className={glassSurfaceFlat('hover:brightness-95 active:brightness-90 rounded-sm p-2 transition-all disabled:opacity-40 disabled:pointer-events-none')}
                 >
                   <PlusIcon className="text-foreground" />
                 </button>
@@ -264,7 +265,7 @@ function FoodPage({}: Props) {
                 </motion.div>
                 <button
                   onClick={handleRemoveFromCart}
-                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
+                  className={glassSurfaceFlat('hover:brightness-95 active:brightness-90 rounded-sm p-2 transition-all')}
                 >
                   <MinusIcon className="text-foreground" />
                 </button>

src/app/[name]/(Main)/about/AboutPage.tsx

@@ -13,6 +13,7 @@ import Image from 'next/image';
 import React from 'react'
 import { useGetAbout, useGetReviews, useGetSchedules } from './hooks/useAboutData';
 import AboutSkeleton from './components/AboutSkeleton';
+import { glassSurfaceCard, glassSurfaceCardFlat, glassSurfaceFlat } from '@/lib/styles/glassSurface';
 
 const sortings = [
   'جدیدترین',
@@ -81,7 +82,7 @@ function AboutPage() {
     return (
       <section aria-labelledby="about-title" className='py-4'>
         <section
-          className="bg-container rounded-container shadow-container p-4">
+          className={glassSurfaceCard('p-4')}>
           <div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
             <div className="">
               <h2 className='text-sm2 font-bold leading-5'>{restaurant.name}</h2>
@@ -123,7 +124,7 @@ function AboutPage() {
 
         {(restaurant.phone || restaurant.telegram || restaurant.whatsapp || restaurant.instagram) && (
           <section
-            className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
+            className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center')}>
             <h2 className='text-sm2 font-medium leading-5'>ارتباط</h2>
             <div className='col-span-1 text-center flex justify-center gap-4'>
               {restaurant.phone &&
@@ -151,7 +152,7 @@ function AboutPage() {
         )}
 
         {restaurant.address && (
-          <section className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
+          <section className={glassSurfaceCard('px-4 pt-6 pb-6 mt-4')}>
             <h2 className='text-sm2 font-medium leading-5'>آدرس</h2>
             <p className='text-sm2 mt-[9px] leading-5'>{restaurant.address}</p>
             {restaurant.latitude && restaurant.longitude && (
@@ -166,7 +167,7 @@ function AboutPage() {
         {schedules.length > 0 && getTodaySchedule() && (
           <section
             aria-label='ساعات کاری'
-            className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
+            className={glassSurfaceCard('py-6 px-4 mt-4 flex justify-between items-center')}>
             <div className="flex items-center gap-2 justify-start">
               <Clock size={16} className='stroke-disabled-text' />
               <div className='text-sm2 font-medium leading-5 mt-0.5 text-[#8C90A3]'>باز</div>
@@ -186,8 +187,7 @@ function AboutPage() {
               .map(([weekDay, daySchedules]) => (
                 <div
                   key={weekDay}
-                  style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
+                  className={glassSurfaceCardFlat('leading-5 py-6 px-4 mt-4 flex justify-between items-center')}>
-                  className="bg-[#F6F6FA] dark:bg-border rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
                   <div className="text-sm2">
                     {getDayName(Number(weekDay))}
                   </div>
@@ -254,7 +254,7 @@ function AboutPage() {
       <section aria-labelledby="reviews-title" className='py-4'>
         <section
           aria-label='امتیاز کاربران'
-          className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
+          className={glassSurfaceCard('p-4 py-6 grid grid-cols-2 items-center')}>
           <div className="text-center font-bold text-5xl">
             {averageRating.toFixed(1)}
           </div>
@@ -267,10 +267,10 @@ function AboutPage() {
           </div>
         </section>
 
-        <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
+        <section className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4')}>
           <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
             <h2 className='text-sm2 font-medium leading-5'>نظرات کاربران</h2>
-            <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-container pattern-secondary-bg ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
+            <button onClick={toggleSortingModal} className={glassSurfaceFlat('rounded-xl h-8 pattern-secondary-bg ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]')}>
               <EqualizerIcon className='dark:text-white' />
               <span className="text-xs leading-5 font-medium">{sortings[+sorting]}</span>
             </button>

src/app/[name]/(Main)/about/components/AboutSkeleton.tsx

@@ -4,12 +4,13 @@ import { Skeleton } from "@/components/ui/skeleton";
 import TabContainer from "@/components/tab/TabContainer";
 import { TabHeader } from "@/components/tab/TabHeader";
 import { InfoCircle, Star1 } from 'iconsax-react';
+import { glassSurfaceCard, glassSurfaceCardFlat } from '@/lib/styles/glassSurface';
 
 const AboutSkeleton = () => {
   const firstTabSkeleton = () => (
     <section className='py-4'>
       {/* اطلاعات رستوران */}
-      <section className="bg-container rounded-container shadow-container p-4">
+      <section className={glassSurfaceCard('p-4')}>
         <div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
           <div className="flex-1">
             <Skeleton className="h-6 w-32 rounded-md mb-4" />
@@ -31,7 +32,7 @@ const AboutSkeleton = () => {
       </section>
 
       {/* ارتباط */}
-      <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
+      <section className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center')}>
         <Skeleton className="h-5 w-16 rounded-md" />
         <div className='col-span-1 text-center flex justify-center gap-4'>
           {[...Array(3)].map((_, index) => (
@@ -41,7 +42,7 @@ const AboutSkeleton = () => {
       </section>
 
       {/* آدرس */}
-      <section className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
+      <section className={glassSurfaceCard('px-4 pt-6 pb-6 mt-4')}>
         <Skeleton className="h-5 w-12 rounded-md mb-[9px]" />
         <Skeleton className="h-4 w-full rounded-md mb-2" />
         <Skeleton className="h-4 w-3/4 rounded-md mb-[23px]" />
@@ -52,7 +53,7 @@ const AboutSkeleton = () => {
       </section>
 
       {/* ساعات کاری امروز */}
-      <section className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
+      <section className={glassSurfaceCard('py-6 px-4 mt-4 flex justify-between items-center')}>
         <div className="flex items-center gap-2">
           <Skeleton className="w-4 h-4 rounded-full" />
           <Skeleton className="h-5 w-8 rounded-md" />
@@ -66,7 +67,7 @@ const AboutSkeleton = () => {
       {[...Array(3)].map((_, index) => (
         <div
           key={index}
-          className="bg-[#F6F6FA] dark:bg-border rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
+          className={glassSurfaceCardFlat('leading-5 py-6 px-4 mt-4 flex justify-between items-center')}>
           <Skeleton className="h-5 w-20 rounded-md" />
           <Skeleton className="h-5 w-24 rounded-md" />
         </div>
@@ -77,7 +78,7 @@ const AboutSkeleton = () => {
   const secondTabSkeleton = () => (
     <section className='py-4'>
       {/* امتیاز کاربران */}
-      <section className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
+      <section className={glassSurfaceCard('p-4 py-6 grid grid-cols-2 items-center')}>
         <Skeleton className="h-16 w-20 rounded-md mx-auto" />
         <div className="flex flex-col w-fit items-end gap-1">
           {[...Array(5)].map((_, index) => (
@@ -87,7 +88,7 @@ const AboutSkeleton = () => {
       </section>
 
       {/* نظرات کاربران */}
-      <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
+      <section className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4')}>
         <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
           <Skeleton className="h-5 w-24 rounded-md" />
           <Skeleton className="h-8 w-28 rounded-xl" />

src/app/[name]/(Main)/cart/CartPage.tsx

@@ -16,6 +16,7 @@ import CartSkeleton from "./components/CartSkeleton";
 import CartSummary from "./components/CartSummary";
 import { useCart } from "./hook/useCart";
 import { useCartPageState } from "./hooks/useCartPageState";
+import { glassSurfaceCard } from "@/lib/styles/glassSurface";
 
 const CartPage = () => {
   const { t } = useTranslation("parallels", { keyPrefix: "Cart" });
@@ -42,7 +43,7 @@ const CartPage = () => {
   };
 
   return (
-    <div className="overflow-y-auto h-full noscrollbar flex flex-col bg-background">
+    <div className="overflow-y-auto h-full noscrollbar flex flex-col">
       <div className="grid grid-cols-3 items-center mt-6">
         {isCartEmpty || isLoading ? (
           <span></span>
@@ -93,7 +94,7 @@ const CartPage = () => {
         ) : (
           <div className="flex flex-col gap-4 pb-24">
             {!isPremium && (
-              <div className="bg-container rounded-container p-4 border border-border shadow-sm">
+              <div className={glassSurfaceCard('p-4')}>
                 <div className="flex items-start gap-3 mb-4">
                   <div className="shrink-0 mt-0.5">
                     <NotificationBellIcon

src/app/[name]/(Main)/cart/components/CartSummary.tsx

@@ -11,6 +11,7 @@ import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileD
 import { useGetCartItems } from '../hooks/useCartData';
 import { useCartStore } from '../store/Store';
 import { guestCartItemsToFoods } from '../lib/cartUtils';
+import { glassSurfaceNav } from '@/lib/styles/glassSurface';
 
 interface CartSummaryProps {
   isPremium: boolean;
@@ -73,7 +74,7 @@ const CartSummary = ({ isPremium, hasItems }: CartSummaryProps) => {
         </div>
       )}
 
-      <div className='fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-container border-t border-border p-4 w-full'>
+      <div className={glassSurfaceNav('fixed bottom-0 left-0 right-0 z-50 border-t border-border p-4 w-full')}>
         <div className='flex justify-between items-center gap-4'>
           <div className='flex flex-col'>
             <div className='text-xs text-gray-400 dark:text-disabled-text'>{t('PayableAmountLabel')}</div>

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

@@ -4,6 +4,7 @@ import { ef } from '@/lib/helpers/utfNumbers'
 import { EmojiHappy, Microphone2, Paperclip2 } from 'iconsax-react'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { glassSurfaceCard } from '@/lib/styles/glassSurface'
 
 type Props = object
 
@@ -64,7 +65,7 @@ function ChatIndex ({}: Props) {
     <section className='flex flex-col h-full pt-6'>
       <h1 className='font-medium'>علی مصلحی</h1>
 
-      <div className='bg-container rounded-[30px] flex flex-col justify-between mt-6 flex-1 px-6 pt-7 pb-8 overflow-hidden'>
+      <div className={glassSurfaceCard('rounded-[30px] flex flex-col justify-between mt-6 flex-1 px-6 pt-7 pb-8 overflow-hidden')}>
         <div className='overflow-y-auto flex flex-col-reverse'>
           <ul className='grid gap-6 pb-6 '>
             {messagesMemo.map((v, i) => {

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

@@ -16,6 +16,7 @@ import {
 import { useRouter } from 'next/navigation'
 import useToggle from '@/hooks/helpers/useToggle'
 import Prompt from '@/components/utils/Prompt'
+import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
 
 type Props = object
 
@@ -170,7 +171,7 @@ function ChatIndex ({}: Props) {
         {selectedChats.length > 0 ? (
           <span
             onClick={toggleDeleteModal}
-            className='bg-container p-2 rounded-xl active:bg-gray-50 dark:active:bg-neutral-500'
+            className={glassSurfaceFlat('p-2 rounded-xl active:brightness-95 cursor-pointer')}
           >
             <Trash
               size={24}
@@ -180,7 +181,7 @@ function ChatIndex ({}: Props) {
         ) : (
           <Link
             href={'chat/nearby'}
-            className='bg-container p-2 rounded-xl active:bg-gray-50 dark:active:bg-neutral-500'
+            className={glassSurfaceFlat('p-2 rounded-xl active:brightness-95 cursor-pointer')}
           >
             <Radar2
               size={24}
@@ -198,7 +199,7 @@ function ChatIndex ({}: Props) {
                 <li
                   key={i}
                   {...longPress(chat.id)}
-                  className='select-none flex items-center gap-x-2 hover:brightness-105 cursor-default active:brightness-102 p-2 bg-background rounded-xl'
+                  className={glassSurfaceFlat('select-none flex items-center gap-x-2 hover:brightness-105 cursor-default active:brightness-102 p-2 rounded-xl')}
                 >
                   <div className='size-[49px] min-w-[49px]'>
                     {selectedChats.includes(chat.id) ? (

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

@@ -13,6 +13,7 @@ import { useTranslation } from 'react-i18next';
 import { useGetOrders } from './hooks/useHistoryData';
 import { HistoryOrderItem } from './types/Types';
 import { OrderStatus } from './enum/Enum';
+import { glassSurface } from '@/lib/styles/glassSurface';
 
 const fallbackImage = '/assets/images/food-preview.png';
 
@@ -80,7 +81,7 @@ function OrdersIndex() {
             const items: HistoryOrderItem[] = order.items || [];
 
             return (
-                <div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-container rounded-3xl'>
+                <div key={order.id} className={glassSurface('w-full px-[17px] mb-4 pt-8 pb-6 rounded-3xl')}>
                     <div className="text-sm2">
                         <div className='flex items-center justify-between mb-2'>
                             <div className='flex gap-2 items-center'>
@@ -165,7 +166,7 @@ function OrdersIndex() {
             const items: HistoryOrderItem[] = order.items || [];
 
             return (
-                <div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-container rounded-3xl'>
+                <div key={order.id} className={glassSurface('w-full px-[17px] mb-4 pt-8 pb-6 rounded-3xl')}>
                     <div className="text-sm2">
                         <div className='flex items-center justify-between mb-2'>
                             <div className='flex gap-2 items-center'>

src/app/[name]/(Main)/order/rate/[orderId]/page.tsx

@@ -14,6 +14,7 @@ import { CreateRateType } from '../types/Types';
 import { toast } from '@/components/Toast';
 import { PositivePointEnum, NegativePointEnum } from '../enum/Enum';
 import { extractErrorMessage } from '@/lib/func';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 type Props = object
 
@@ -148,7 +149,7 @@ function RatingOrderIndex({ }: Props) {
         <section className='flex flex-col h-full pt-6'>
             <h1 className='font-medium'>{t("Heading")}</h1>
 
-            <form onSubmit={submitForm} className='bg-container flex flex-col h-min justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4'>
+            <form onSubmit={submitForm} className={glassSurfaceCard('flex flex-col h-min justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4')}>
 
                 <div>
                     <div className='w-full'>

src/app/[name]/(Main)/transactions/discount/club/page.tsx

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import { useGetAbout } from '../../../about/hooks/useAboutData';
 import { toast } from '@/components/Toast';
 import { extractErrorMessage } from '@/lib/func';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 function TransactionsIndex() {
 
@@ -37,7 +38,7 @@ function TransactionsIndex() {
 
             <section
                 aria-label="درباره باشگاه مشتریان"
-                className='mt-3 bg-container dark:bg-container rounded-normal grid grid-cols-4 items-center border border-transparent dark:border-border/50'
+                className={glassSurfaceCard('mt-3 rounded-normal grid grid-cols-4 items-center')}
             >
                 <div className='col-span-3 py-5 pe-7 ps-5 relative h-36.5'>
                     <div className='w-full h-full absolute top-0 left-0 overflow-clip text-muted-foreground/30 dark:text-foreground/20'>
@@ -78,7 +79,7 @@ function TransactionsIndex() {
             </section>
 
             {/* بخش نمایش اعتبار کاربر */}
-            <section className='mt-6 bg-container dark:bg-container rounded-normal p-5 border border-transparent dark:border-border/50'>
+            <section className={glassSurfaceCard('mt-6 rounded-normal p-5')}>
                 <div className='flex items-center gap-2 mb-4'>
                     <MoneyRecive color='currentColor' size={24} className='text-primary dark:text-foreground' variant='Bold' />
                     <h2 className='font-bold text-base dark:text-foreground'>اعتبار شما</h2>
@@ -92,7 +93,7 @@ function TransactionsIndex() {
             </section>
 
             {/* بخش تبدیل امتیاز به اعتبار */}
-            <section className='mt-6 bg-container dark:bg-container rounded-normal p-5 border border-transparent dark:border-border/50'>
+            <section className={glassSurfaceCard('mt-6 rounded-normal p-5')}>
                 <div className='flex items-center gap-2 mb-4'>
                     <MoneyRecive color='currentColor' size={24} className='text-primary dark:text-foreground' variant='Bold' />
                     <h2 className='font-bold text-base dark:text-foreground'>تبدیل امتیاز به اعتبار</h2>

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

@@ -4,6 +4,7 @@ import React, { useCallback } from 'react'
 import { useGetMyCoupons } from '../hooks/useTransactionData';
 import { toast } from '@/components/Toast';
 import type { Coupon } from '../types/Types';
+import { glassSurfaceCard, glassSurfaceCardFlat } from '@/lib/styles/glassSurface';
 
 function TransactionsIndex() {
     const { data: myCoupons, isLoading } = useGetMyCoupons();
@@ -32,7 +33,7 @@ function TransactionsIndex() {
 
             <section
                 aria-label="درباره کدهای تخفیف"
-                className='mt-3 bg-container rounded-normal grid grid-cols-4 items-center'
+                className={glassSurfaceCard('mt-3 rounded-normal grid grid-cols-4 items-center')}
             >
                 <div className='col-span-3 py-9.5 pe-7 ps-5 relative'>
                     <div className='w-full h-full absolute top-0 left-0 overflow-clip'>
@@ -94,7 +95,7 @@ function TransactionsIndex() {
                     {coupons.map((coupon) => (
                         <article
                             key={coupon.id}
-                            className='bg-container rounded-normal flex justify-between items-center'
+                            className={glassSurfaceCardFlat('rounded-normal flex justify-between items-center')}
                         >
                             <div className='py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
                                 <h3 className='font-bold text-sm2'>مبلغ تخفیف: {formatDiscount(coupon)}</h3>

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

@@ -3,6 +3,7 @@ import React from 'react'
 import { useGetTransactions } from './hooks/useTransactionData';
 import { TransactionsTable } from './components/TransactionsTable';
 import LoadingOverlay from '@/components/overlays/LoadingOverlay';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 function TransactionsReviewIndex() {
   const { data: transactionsResponse, isLoading: isLoadingTransactions } = useGetTransactions();
@@ -56,7 +57,7 @@ function TransactionsReviewIndex() {
         </div>
       </div> */}
 
-      <div className='w-full h-full bg-container rounded-3xl mt-0'>
+      <div className={glassSurfaceCard('w-full h-full mt-0 rounded-3xl')}>
         <TransactionsTable transactions={transactions} />
       </div>
     </section>

src/app/[name]/(Profile)/profile/address/page.tsx

@@ -11,6 +11,7 @@ import { Address } from './types/Types';
 import Prompt from '@/components/utils/Prompt';
 import { toast } from '@/components/Toast';
 import useToggle from '@/hooks/helpers/useToggle';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 type Props = object
 
@@ -107,7 +108,7 @@ function UserAddressesPage({ }: Props) {
                     addresses.map((address) => (
                         <div
                             key={address.id}
-                            className={`bg-container rounded-container w-full shadow-xl px-4 py-4 flex flex-col justify-between ${address.isDefault ? 'border border-primary' : ''}`}
+                            className={glassSurfaceCard(`w-full px-4 py-4 flex flex-col justify-between ${address.isDefault ? 'border border-primary' : ''}`)}
                         >
                             <div className="flex justify-between items-start mb-2">
                                 <h2 className='text-sm font-medium'>{address.title}</h2>

src/app/[name]/(Profile)/profile/edit/page.tsx

@@ -13,6 +13,7 @@ import Calendar from '@/components/ui/calendar';
 import { getDateLib } from "react-day-picker/persian";
 import { useRouter } from 'next/navigation';
 import { useGetProfile, useSingleUpload, useUpdateProfile } from '../hooks/userProfileData';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import { UpdateProfileType } from '../types/Types';
@@ -197,7 +198,7 @@ function ProfileIndex({ }: Props) {
                 <h1 className='text-sm2 place-self-center font-medium'>ویرایش اطلاعات</h1>
             </div>
 
-            <form onSubmit={formik.handleSubmit} className="mt-8 flex-1 bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
+            <form onSubmit={formik.handleSubmit} className={glassSurfaceCard('mt-8 flex-1 w-full py-6 px-4 flex flex-col justify-between')}>
                 <div className="bg-inherit">
                     <div className="justify-self-center w-fit relative text-center pb-10">
                         <input

src/app/[name]/(Profile)/profile/page.tsx

@@ -9,6 +9,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import React from 'react'
 import { useGetProfile } from './hooks/userProfileData';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 type Props = object
 
@@ -43,7 +44,7 @@ function ProfileIndex({ }: Props) {
                 />
             </div>
 
-            <div className="mt-8 flex-1 h-full bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
+            <div className={glassSurfaceCard('mt-8 flex-1 h-full w-full py-6 px-4 flex flex-col justify-between')}>
 
                 <div className="">
                     <div className="flex items-center justify-start gap-3 pb-6 border-b-[1.5px] border-border">

src/app/[name]/(Profile)/profile/settings/page.tsx

@@ -14,6 +14,7 @@ import { Key, KeySquare, Notification1, ArrowLeft, TickCircle } from 'iconsax-re
 import { useRouter } from 'next/navigation';
 import React, { Fragment, useState } from 'react'
 import { useTranslation } from 'react-i18next';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 function UserSettingsIndex() {
     const router = useRouter();
@@ -38,7 +39,7 @@ function UserSettingsIndex() {
         return (
             <section aria-labelledby="about-title" className='py-4 flex-1 h-full'>
                 <section
-                    className="bg-container rounded-container shadow-container p-4">
+                    className={glassSurfaceCard('p-4')}>
 
                     <div className="flex justify-between items-center pb-[25px]">
                         <h2 className='text-sm leading-5'>{data.TabNotifications.Heading}</h2>
@@ -94,7 +95,7 @@ function UserSettingsIndex() {
         return (
             <section aria-labelledby="reviews-title" className='py-4'>
                 <section
-                    className="bg-container rounded-container shadow-container p-4">
+                    className={glassSurfaceCard('p-4')}>
 
                     <div className="flex justify-between items-center pb-[25px]">
                         <h2 className='text-sm leading-5'>{data.TabPassword.Heading}</h2>
@@ -154,7 +155,7 @@ function UserSettingsIndex() {
         return (
             <section aria-labelledby="reviews-title" className='py-4'>
                 <div
-                    className="bg-container rounded-container shadow-container p-4">
+                    className={glassSurfaceCard('p-4')}>
 
                     <div className="pb-4">
                         <h2 className='text-sm leading-5'>{data.TabAuthenticator.Heading}</h2>
@@ -236,7 +237,7 @@ function UserSettingsIndex() {
                 />
             </div>
 
-            <section className='bg-container rounded-container shadow-container p-4'>
+            <section className={glassSurfaceCard('p-4')}>
                 <div className='flex justify-between items-center pb-4'>
                     <h2 className='text-sm leading-5'>{data.StatisticalParticipation.Heading}</h2>
                     <Switch

src/app/[name]/(Profile)/profile/wallet/page.tsx

@@ -6,6 +6,7 @@ import { ef, ue } from '@/lib/helpers/utfNumbers';
 import { ArrowLeft, ArrowRight, WalletMinus } from 'iconsax-react';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react'
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 type Props = object
 
@@ -34,7 +35,7 @@ function UserWalletIndex({ }: Props) {
 
             <form
                 onSubmit={chargeAction}
-                className="mt-8 flex-1 h-full bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
+                className={glassSurfaceCard('mt-8 flex-1 h-full w-full py-6 px-4 flex flex-col justify-between')}>
 
                 <div className="">
                     <div className="flex items-center justify-center text-center gap-4 pb-6 border-b-[1.5px] border-border">

src/components/tab/TabContainer.tsx

@@ -6,6 +6,7 @@ import { TabHeader, TabItemProps } from './TabHeader';
 import clsx from 'clsx';
 import TabHeaderRenderer from './TabHeaderRenderer';
 import Image from 'next/image';
+import { glassSurfaceNav } from '@/lib/styles/glassSurface';
 
 type Props = {
     itemRenderer?: (child: ReactNode, index: number) => ReactElement;
@@ -38,7 +39,7 @@ export type TabContainerClassName = {
 
 export const TabContainerClassNames: TabContainerClassName = {
     wrapper: 'h-full',
-    scrollView: 'h-[72px] gradient-border !pt-3 !pb-2 w-full overflow-y-hidden bg-[#FFFFFF70] dark:bg-container/70 justify-center rounded-[32px] inline-flex items-center gap-10',
+    scrollView: glassSurfaceNav('h-[72px] gradient-border !pt-3 !pb-2 w-full overflow-y-hidden justify-center rounded-[32px] inline-flex items-center gap-10'),
     header: '',
     headerDeactive: '',
     headerActive: '',

src/features/auth/components/AuthFormWrapper.tsx

@@ -2,6 +2,7 @@
 
 // import LoadingOverlay from '@/components/overlays/LoadingOverlay';
 import React from 'react'
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 type Props = {
   isPending: boolean,
@@ -24,7 +25,7 @@ function AuthFormWrapper({ children, isPending, onSubmit, ...restProps }: Props)
       onSubmit={handleSubmit}
       className='p-6 lg:py-[75px] w-full flex items-center justify-center py-4 lg:items-center lg:px-10 px-4 drop-shadow-black h-full'
     >
-      <div className='relative h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
+      <div className={glassSurfaceCard('relative h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] overflow-clip lg:flex-row justify-between')}>
         {children}
         {/* <LoadingOverlay visible={isPending} bgOpacity={0} /> */}
       </div>

src/features/auth/components/StepEnterNumber.tsx

@@ -8,6 +8,7 @@ import Image from 'next/image'
 import React, { useState } from 'react'
 import type { ChangeEvent } from 'react'
 import { useTranslation } from 'react-i18next'
+import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
 import { useOtpRequest } from '@/app/auth/login/hooks/useAuthData'
@@ -115,7 +116,7 @@ function StepEnterNumber(_props: StepEnterNumberProps = {}) {
               inputMode='tel'
               autoComplete='tel'
               dir='ltr'
-              className='mt-10 w-full bg-container'
+              className={glassSurfaceFlat('mt-10 w-full')}
               inputClassName='text-left dltr'
               htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
               labelText={t('Enter.LabelPhoneNumber')}

src/features/auth/components/StepEnterPassword.tsx

@@ -8,6 +8,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
 
 type Props = {
   onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
@@ -68,7 +69,7 @@ function StepEnterPassword ({
             aria-errormessage={error}
             autoFocus
             autoComplete='current-password'
-            className='mt-10 bg-container'
+            className={glassSurfaceFlat('mt-10')}
             htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
             labelText={t('EnterPass.LabelPass')}
             value={value}

src/features/auth/components/StepNewPassword.tsx

@@ -7,6 +7,7 @@ import { AUTH_PAGE_ELEMENT } from '@/enums'
 import Image from 'next/image'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
 
 type Props = {
   onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
@@ -84,7 +85,7 @@ function StepNewPassword ({
             valid={!hasError()}
             aria-errormessage={error}
             autoComplete='new-password'
-            className='mt-10 bg-container'
+            className={glassSurfaceFlat('mt-10')}
             htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
             labelText={t('NewPassword.LabelPass')}
             value={value}
@@ -108,7 +109,7 @@ function StepNewPassword ({
             valid={!hasError(error2)}
             aria-errormessage={error2}
             autoComplete='new-password'
-            className='mt-6 bg-container'
+            className={glassSurfaceFlat('mt-6')}
             htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
             labelText={t('NewPassword.LabelRepeatPass')}
             value={repeatValue}

src/features/auth/components/StepOtp.tsx

@@ -13,6 +13,7 @@ import { useBulkCart } from '@/app/[name]/(Main)/cart/hooks/useCartData'
 import { setRefreshToken, setToken } from '@/lib/api/func'
 import { useSearchParams } from 'next/navigation'
 import { AUTH_PAGE_ELEMENT } from '@/enums'
+import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
 import clsx from 'clsx'
 import { formatCountdown } from '@/hooks/useCountdown'
 
@@ -110,7 +111,7 @@ const StepOtp = ({ phone, slug, timerRunning, secondsLeft, onResend, isResendPen
                             type='tel'
                             autoComplete="one-time-code"
                             inputMode="numeric"
-                            className='w-full h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 bg-container border border-border text-foreground outline-0 rounded-[10px] text-center text-sm' />
+                            className={glassSurfaceFlat('w-full h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 border border-border text-foreground outline-0 rounded-[10px] text-center text-sm')} />
                     }
                 />
             </div>

src/lib/styles/glassSurface.ts

@@ -20,3 +20,13 @@ export function glassSurfaceFlat(...extra: ClassValue[]) {
 export function glassSurfaceSelected(...extra: ClassValue[]) {
   return clsx(GLASS_SURFACE, GLASS_SURFACE_SELECTED, extra);
 }
+
+/** Page-level card sections (about, cart, profile, etc.) */
+export function glassSurfaceCard(...extra: ClassValue[]) {
+  return clsx(GLASS_SURFACE, "rounded-container", extra);
+}
+
+/** Nested / secondary card sections with no shadow */
+export function glassSurfaceCardFlat(...extra: ClassValue[]) {
+  return clsx(GLASS_SURFACE, GLASS_SURFACE_FLAT, "rounded-container", extra);
+}