/* ============================================ 🎨 OPTIMIZED MENU STYLES - TABLE VERSION (10px SPACING) ============================================ */ /* ============================================ 🎨 OPTIMIZED MENU STYLES - TABLE VERSION (10px SPACING) ============================================ */ /* ============================================ 📋 MENU TABLE LAYOUT - FIXED 10PX SPACING ============================================ */ .menu-table  {
     display:  block;
     padding:  10px 0;
     width:  100%;
 }
 .menu-table-item  {
     width:  100%;
     margin-bottom:  -50px;
     padding-bottom:  10px;
 }
 /* ============================================ 📱 RESPONSIVE TABLE SPACING - FIXED 10PX ============================================ */ /* Extra Small Devices (< 480px) */ @media (max-width: 479.98px)  {
     .menu-table  {
     padding:  8px 0;
 }
 .menu-table-item  {
     padding-bottom:  8px;
 }
 }
 /* Small Mobile (480px - 575px) */ @media (min-width: 480px) and (max-width: 575.98px)  {
     .menu-table  {
     padding:  9px 0;
 }
 .menu-table-item  {
     padding-bottom:  9px;
 }
 }
 /* Large Mobile (576px - 767px) */ @media (min-width: 576px) and (max-width: 767.98px)  {
     .menu-table  {
     padding:  10px 0;
 }
 .menu-table-item  {
     padding-bottom:  10px;
 }
 }
 /* Tablet (768px - 991px) */ @media (min-width: 768px) and (max-width: 991.98px)  {
     .menu-table  {
     padding:  10px 0;
 }
 .menu-table-item  {
     padding-bottom:  10px;
 }
 }
 /* Desktop (992px+) */ @media (min-width: 992px)  {
     .menu-table  {
     padding:  10px 0;
 }
 .menu-table-item  {
     padding-bottom:  4px;
 }
 }
 /* ============================================ 🎴 MENU TABLE ROW SEPARATOR - VERY THIN HR (10px) ============================================ */ .menu-table-separator  {
     border:  none;
     height:  1px;
     background:  linear-gradient(to right,  transparent 0%,  rgba(0,  0,  0,  0.08) 20%,  rgba(0,  0,  0,  0.12) 50%,  rgba(0,  0,  0,  0.08) 80%,  transparent 100%);
     margin:  10px 0;
     /* ✅ FIXED:  10px spacing */ }
 /* Responsive separator thickness and margin */ @media (max-width: 479.98px)  {
     .menu-table-separator  {
     height:  0.5px;
     margin:  8px 0;
     /* ✅ FIXED:  8px mobile */ background: linear-gradient(to right,  transparent 0%,  rgba(0,  0,  0,  0.1) 30%,  rgba(0,  0,  0,  0.15) 50%,  rgba(0,  0,  0,  0.1) 70%,  transparent 100%);
 }
 }
 @media (min-width: 480px) and (max-width: 767.98px)  {
     .menu-table-separator  {
     height:  0.8px;
     margin:  9px 0;
     /* ✅ FIXED:  9px tablet */ }
 } @media (min-width: 768px)  {
     .menu-table-separator  {
     height:  1px;
     margin:  10px 0;
     /* ✅ FIXED:  10px desktop */ }
 } /* ============================================  MENU CARD STYLES - TABLE VERSION -  کرم مایل به سفید ============================================ */ /* ============================================ 🎴 MENU CARD STYLES - TABLE VERSION ============================================ */ .menu-card,  .menu-card-small  {
     background:  linear-gradient(135deg,  #fffbf0 0%,  #fef9ec 50%,  #fffdf7 100%);
     border-radius:  5px;
     overflow:  hidden;
     border:  1px solid rgba(0,  0,  0,  0.05);
     transition:  all 0.3s cubic-bezier(0.4,  0,  0.2,  1);
     height:  auto;
     min-height:  140px;
     display:  flex;
     flex-direction:  row-reverse;
     /* ✅ تغییر جهت به راست به چپ */ align-items:  flex-start;
     position:  relative;
     padding:  16px;
 }
 .menu-card:hover,  .menu-card-small:hover  {
     transform:  translateX(-4px);
     /* ✅ تغییر جهت hover */ border-color:  rgba(230,  57,  70,  0.3);
     box-shadow:  0 6px 20px rgba(230,  57,  70,  0.12);
 }
 /* کانتینر عکس با موقعیت نسبی برای تگ‌ها */ .menu-image-container  {
     position:  relative;
     width:  100px;
     height:  100px;
     flex-shrink:  0;
     margin-left:  16px;
     /* ✅ تغییر margin از راست به چپ */ margin-right:  0;
     overflow:  hidden;
     border-radius:  12px;
 }
 /* Menu Card Images */ .menu-card-image  {
     width:  100%;
     height:  100%;
     object-fit:  cover;
     border-radius:  5px;
     transition:  transform 0.3s ease;
 }
 .menu-card:hover .menu-card-image,  .menu-card-small:hover .menu-card-image  {
     transform:  scale(1.08);
 }
 /* Placeholder Images */ .placeholder-image,  .placeholder-image.placeholder-small  {
     width:  100%;
     height:  100%;
     background:  linear-gradient(135deg,  #FFF,  #ffffff);
     display:  flex;
     align-items:  center;
     justify-content:  center;
     border-radius:  5px;
     position:  relative;
 }
 .placeholder-image iconify-icon  {
     font-size:  2.2rem;
     color:  rgba(0,  0,  0,  0.9);
 }
 /* Card Content - سمت چپ */ .card-content  {
     padding:  0;
     flex:  1;
     display:  flex;
     flex-direction:  column;
     justify-content:  space-between;
     min-height:  100px;
     text-align:  right;
     /* ✅ متن از راست به چپ */ }
 /* Item Titles */ .menu-item-name  {
     color:  var(--dark-gray);
     font-weight:  700;
     margin-bottom:  8px;
     font-size:  1.15rem;
     line-height:  1.3;
     overflow:  hidden;
     text-overflow:  ellipsis;
     display:  -webkit-box;
     -webkit-line-clamp:  2;
     -webkit-box-orient:  vertical;
 }
 .menu-item-description  {
     color:  var(--dark-gray);
     line-height:  1.5;
     opacity:  0.85;
     font-size:  0.92rem;
     margin-bottom:  12px;
     overflow:  hidden;
     text-overflow:  ellipsis;
     display:  -webkit-box;
     -webkit-line-clamp:  3;
     -webkit-box-orient:  vertical;
     flex:  1;
 }
 /* ============================================  PRICE DISPLAY  ============================================ */ .price-display  {
     background:  linear-gradient(135deg,  var(--primary-red),  var(--dark-red));
     color:  white;
     padding:  8px 14px;
     border-radius:  10px;
     font-weight:  700;
     font-size:  0.95rem;
     box-shadow:  0 3px 10px rgba(230,  57,  70,  0.3);
     display:  inline-block;
     white-space:  nowrap;
     border:  2px solid rgba(255,  255,  255,  0.4);
     align-self:  flex-start;
     /* ✅ چسبیدن به سمت چپ */ text-align:  center;
 }
 .price-display::after  {
     content:  ' تومان';
     font-size:  0.75em;
     opacity:  0.95;
     margin-right:  3px;
 }
 /* ============================================  MOBILE TABLE OPTIMIZATIONS ============================================ */ @media (max-width: 479.98px)  {
     .menu-image-container  {
     width:  100%;
     height:  120px;
     margin-left:  0;
     margin-right:  0;
     margin-bottom:  12px;
 }
 .card-content  {
     text-align:  center;
     /* ✅ در موبایل متن وسط چین */ }
 .price-display  {
     align-self:  center;
     /* ✅ قیمت در موبایل وسط */ }
 .menu-item-name  {
     font-size:  1rem;
     margin-bottom:  6px;
     -webkit-line-clamp:  1;
 }
 .menu-item-description  {
     font-size:  0.85rem;
     -webkit-line-clamp:  2;
 }
 }
     background:  linear-gradient(135deg,  #e6b800,  #d4a017);
     color:  #2d261c;
     padding:  8px 14px;
     border-radius:  10px;
     font-weight:  700;
     font-size:  0.95rem;
     box-shadow:  0 3px 10px rgba(230,  184,  0,  0.4);
     display:  inline-block;
     white-space:  nowrap;
     border:  2px solid rgba(255,  255,  255,  0.9);
     align-self:  flex-start;
     text-align:  center;
 }
 .price-display::after  {
     content:  ' تومان';
     font-size:  0.75em;
     opacity:  0.95;
     margin-right:  3px;
 }
 /* Responsive adjustments for price-display */ @media (max-width: 479.98px)  {
     .price-display  {
     font-size:  0.85rem;
     padding:  7px 12px;
 }
 }
 @media (min-width: 480px) and (max-width: 767.98px)  {
     .price-display  {
     font-size:  0.9rem;
     padding:  8px 13px;
 }
 }
 @media (min-width: 768px)  {
     .price-display  {
     font-size:  0.95rem;
     padding:  8px 14px;
 }
 }
 /* ============================================ 🏷️ PRODUCT BADGE TAGS - TABLE VERSION - ✅ هماهنگ با کرم ============================================ */ .badge-new  {
     position:  absolute;
     top:  8px;
     right:  8px;
     background:  linear-gradient(135deg,  #f4e4bc,  #f0d9a5);
     color:  #5e5343;
     padding:  6px 12px;
     border-radius:  8px;
     font-size:  0.7rem;
     font-weight:  800;
     box-shadow:  0 3px 10px rgba(244,  228,  188,  0.6);
     z-index:  10;
     display:  inline-flex;
     align-items:  center;
     gap:  5px;
     white-space:  nowrap;
     border:  2px solid rgba(255,  255,  255,  0.9);
     animation:  pulse-badge 2s infinite;
 }
 .badge-discount  {
     position:  absolute;
     top:  8px;
     left:  8px;
     background:  linear-gradient(135deg,  #ff9a8b,  #ff7b6b);
     color:  white;
     padding:  6px 12px;
     border-radius:  8px;
     font-size:  0.7rem;
     font-weight:  800;
     box-shadow:  0 3px 10px rgba(255,  154,  139,  0.6);
     z-index:  10;
     display:  inline-flex;
     align-items:  center;
     gap:  5px;
     border:  2px solid rgba(255,  255,  255,  0.9);
     animation:  pulse-discount 2s infinite;
 }
 .badge-popular  {
     position:  absolute;
     bottom:  8px;
     left:  50%;
     transform:  translateX(-50%);
     background:  linear-gradient(135deg,  #d4a3e8,  #c084fc);
     color:  white;
     padding:  6px 12px;
     border-radius:  8px;
     font-size:  0.7rem;
     font-weight:  800;
     box-shadow:  0 3px 10px rgba(212,  163,  232,  0.6);
     z-index:  10;
     display:  inline-flex;
     align-items:  center;
     gap:  5px;
     border:  2px solid rgba(255,  255,  255,  0.9);
 }
 .badge-new::before  {
     content:  '✨';
     font-size:  0.9rem;
 }
 .badge-discount::before  {
     content:  '🔥';
     font-size:  0.9rem;
 }
 .badge-popular::before  {
     content:  '⭐';
     font-size:  0.9rem;
 }
 .badge-sold-out  {
     position:  absolute;
     top:  50%;
     left:  50%;
     transform:  translate(-50%,  -50%) rotate(-10deg);
     background:  rgba(0,  0,  0,  0.9);
     color:  white;
     padding:  10px 20px;
     border-radius:  10px;
     font-size:  1rem;
     font-weight:  900;
     box-shadow:  0 5px 15px rgba(0,  0,  0,  0.4);
     z-index:  20;
     border:  3px solid #ff7b6b;
 }
 /* انیمیشن‌های بج */ @keyframes pulse-badge  {
     0%,  100%  {
     box-shadow:  0 3px 10px rgba(244,  228,  188,  0.6);
 }
 50%  {
     box-shadow:  0 5px 15px rgba(244,  228,  188,  0.9);
 }
 }
 @keyframes pulse-discount  {
     0%,  100%  {
     box-shadow:  0 3px 10px rgba(255,  154,  139,  0.6);
 }
 50%  {
     box-shadow:  0 5px 15px rgba(255,  154,  139,  0.9);
 }
 }
 /* ============================================ 📱 MOBILE TABLE OPTIMIZATIONS - ✅ چیدمان عمودی در موبایل ============================================ */ @media (max-width: 479.98px)  {
     .menu-card,  .menu-card-small  {
     flex-direction:  column;
     /* ✅ عکس بالا، محتوا پایین */ min-height:  160px;
     padding:  12px;
     /* ✅ پس‌زمینه کرم در موبایل */ background:  linear-gradient(135deg,  #ffffff 0%,  #ffffff 100%);
 }
 .menu-image-container  {
     width:  100%;
     height:  120px;
     margin-right:  0;
     margin-bottom:  12px;
     /* ✅ فاصله از محتوا */ }
 .menu-card-image  {
     border-radius:  5px;
 }
 .menu-item-name  {
     font-size:  1rem;
     margin-bottom:  6px;
     -webkit-line-clamp:  1;
     color:  #3d352a;
 }
 .menu-item-description  {
     font-size:  0.85rem;
     -webkit-line-clamp:  2;
     color:  #000000;
 }
 }
 /* باقی کدها بدون تغییر... */ /* ============================================ 🔍 SEARCH HIGHLIGHT FOR TABLE (جایگزین grid) ============================================ */ .menu-table-item.search-hidden  {
     display:  none !important;
 }
 .menu-table-item.search-highlighted  {
     animation:  highlightSearchTable 0.6s ease-in-out;
     border-left:  4px solid #e6b800;
     /* ✅ هایلایت هماهنگ با کرم */ background:  rgba(244,  228,  188,  0.3);
 }
 @keyframes highlightSearchTable  {
     0%  {
     transform:  translateX(-10px);
     opacity:  0;
 }
 100%  {
     transform:  translateX(0);
     opacity:  1;
 }
 }
 /* ============================================ 🗑️ SOLD OUT OVERLAY FOR TABLE ============================================ */ .menu-card.sold-out .card-content  {
     opacity:  0.6;
 }
 .menu-card.sold-out::before  {
     content:  '';
     position:  absolute;
     top:  0;
     left:  0;
     right:  0;
     bottom:  0;
     background:  linear-gradient(45deg,  rgba(255,  123,  107,  0.9),  rgba(255,  154,  139,  0.9));
     z-index:  15;
     border-radius:  16px;
 }
 /* باقی استایل‌ها بدون تغییر... */ /* ============================================ 💰 PRICE DISPLAY - TABLE POSITION (Top Right) ============================================ */ .price-display  {
     background:  linear-gradient(135deg,  var(--primary-red),  var(--dark-red));
     color:  white;
     padding:  8px 14px;
     border-radius:  10px;
     font-weight:  700;
     font-size:  0.95rem;
     box-shadow:  0 3px 10px rgba(230,  57,  70,  0.3);
     display:  inline-block;
     white-space:  nowrap;
     border:  2px solid rgba(255,  255,  255,  0.4);
     align-self:  flex-start;
     text-align:  center;
 }
 .price-display::after  {
     content:  ' تومان';
     font-size:  0.75em;
     opacity:  0.95;
     margin-right:  3px;
 }
 /* Responsive adjustments for price-display */ @media (max-width: 479.98px)  {
     .price-display  {
     font-size:  0.85rem;
     padding:  7px 12px;
 }
 }
 @media (min-width: 480px) and (max-width: 767.98px)  {
     .price-display  {
     font-size:  0.9rem;
     padding:  8px 13px;
 }
 }
 @media (min-width: 768px)  {
     .price-display  {
     font-size:  0.95rem;
     padding:  8px 14px;
 }
 }
 /* ============================================ 🏷️ PRODUCT BADGE TAGS - TABLE VERSION ============================================ */ .badge-sold-out  {
     position:  absolute;
     top:  50%;
     left:  50%;
     transform:  translate(-50%,  -50%) rotate(-10deg);
     background:  rgba(0,  0,  0,  0.9);
     color:  white;
     padding:  10px 20px;
     border-radius:  10px;
     font-size:  1rem;
     font-weight:  900;
     box-shadow:  0 5px 15px rgba(0,  0,  0,  0.4);
     z-index:  20;
     border:  3px solid #ef4444;
 }
 /* انیمیشن‌های بج */ @keyframes pulse-badge  {
     0%,  100%  {
     box-shadow:  0 3px 10px rgba(255,  215,  0,  0.5);
 }
 50%  {
     box-shadow:  0 5px 15px rgba(255,  215,  0,  0.8);
 }
 }
 @keyframes pulse-discount  {
     0%,  100%  {
     box-shadow:  0 3px 10px rgba(239,  68,  68,  0.5);
 }
 50%  {
     box-shadow:  0 5px 15px rgba(239,  68,  68,  0.8);
 }
 }
 /* ============================================ 📱 MOBILE TABLE OPTIMIZATIONS ============================================ */ @media (max-width: 479.98px)  {
     .menu-card,  .menu-card-small  {
     flex-direction:  column;
     min-height:  160px;
     padding:  12px;
 }
 .menu-image-container  {
     width:  100%;
     height:  120px;
     margin-right:  0;
     margin-bottom:  12px;
 }
 .menu-item-name  {
     font-size:  1rem;
     margin-bottom:  6px;
     -webkit-line-clamp:  1;
 }
 .menu-item-description  {
     font-size:  0.85rem;
     -webkit-line-clamp:  2;
 }
 }
 /* ============================================ 🔍 SEARCH HIGHLIGHT FOR TABLE (جایگزین grid) ============================================ */ .menu-table-item.search-hidden  {
     display:  none !important;
 }
 .menu-table-item.search-highlighted  {
     animation:  highlightSearchTable 0.6s ease-in-out;
     border-left:  4px solid var(--primary-red);
     background:  rgba(230,  57,  70,  0.05);
 }
 @keyframes highlightSearchTable  {
     0%  {
     transform:  translateX(-10px);
     opacity:  0;
 }
 100%  {
     transform:  translateX(0);
     opacity:  1;
 }
 }
 /* ============================================ 🗑️ SOLD OUT OVERLAY FOR TABLE ============================================ */ .menu-card.sold-out .card-content  {
     opacity:  0.6;
 }
 .menu-card.sold-out::before  {
     content:  '';
     position:  absolute;
     top:  0;
     left:  0;
     right:  0;
     bottom:  0;
     background:  linear-gradient(45deg,  rgba(239,  68,  68,  0.9),  rgba(220,  38,  38,  0.9));
     z-index:  15;
     border-radius:  16px;
 }
 /* ============================================ 🎯 FEATURE CARDS ============================================ */ .feature-card  {
     padding:  40px 25px;
     min-height:  320px;
     display:  flex;
     flex-direction:  column;
     justify-content:  center;
     background:  white;
     border-radius:  20px;
     box-shadow:  0 4px 15px rgba(0,  0,  0,  0.1);
     transition:  all 0.3s ease;
     text-align:  center;
 }
 .feature-card:hover  {
     transform:  translateY(-5px);
     box-shadow:  0 8px 25px rgba(0,  0,  0,  0.15);
 }
 .feature-icon iconify-icon  {
     font-size:  4rem;
     color:  var(--primary-red);
     margin-bottom:  20px;
 }
 .feature-title  {
     color:  var(--dark-gray);
     font-weight:  700;
     margin:  15px 0;
     font-size:  1.3rem;
 }
 .feature-description  {
     color:  var(--dark-gray);
     line-height:  1.8;
     opacity:  0.8;
 }
 /* ============================================ 🛒 FLOATING CART STYLES ============================================ */ .floating-cart  {
     position:  fixed;
     bottom:  20px;
     left:  20px;
     z-index:  9999;
 }
 .cart-toggle  {
     width:  60px;
     height:  60px;
     border-radius:  50%;
     background:  linear-gradient(135deg,  var(--primary-red),  var(--dark-red));
     border:  3px solid white;
     box-shadow:  0 4px 15px rgba(230,  57,  70,  0.4);
     cursor:  pointer;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     transition:  all 0.3s ease;
     position:  relative;
     animation:  pulse-red 2s infinite;
 }
 .cart-toggle:hover  {
     transform:  scale(1.1) rotate(5deg);
     box-shadow:  0 6px 20px rgba(230,  57,  70,  0.6);
 }
 .cart-toggle iconify-icon  {
     font-size:  28px;
     color:  white;
 }
 .cart-badge  {
     position:  absolute;
     top:  -5px;
     right:  -5px;
     background:  linear-gradient(135deg,  var(--primary-red),  var(--dark-red));
     color:  white;
     border-radius:  50%;
     width:  24px;
     height:  24px;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     font-size:  12px;
     font-weight:  700;
     border:  2px solid white;
 }
 .cart-panel.active  {
     left:  20px;
 }
 .cart-header  {
     background:  linear-gradient(135deg,  var(--primary-red),  var(--dark-red));
     color:  white;
     padding:  20px;
     display:  flex;
     justify-content:  space-between;
     align-items:  center;
     border-radius:  18px 18px 0 0;
 }
 .cart-header h3  {
     margin:  0;
     font-size:  1.2rem;
     font-weight:  700;
     display:  flex;
     align-items:  center;
     gap:  10px;
 }
 .cart-close  {
     background:  rgba(255,  255,  255,  0.2);
     border:  2px solid rgba(255,  255,  255,  0.3);
     width:  35px;
     height:  35px;
     border-radius:  50%;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     cursor:  pointer;
     transition:  all 0.3s;
 }
 .cart-close:hover  {
     background:  rgba(255,  255,  255,  0.3);
     transform:  rotate(90deg);
 }
 .cart-close iconify-icon  {
     font-size:  20px;
     color:  white;
 }
 .cart-items  {
     flex:  1;
     overflow-y:  auto;
     padding:  15px;
     background:  linear-gradient(to bottom,  #fef2f2,  #fecaca,  #fef2f2);
 }
 .empty-cart  {
     display:  flex;
     flex-direction:  column;
     align-items:  center;
     justify-content:  center;
     height:  100%;
     color:  var(--primary-red);
     text-align:  center;
 }
 .empty-cart iconify-icon  {
     font-size:  60px;
     margin-bottom:  15px;
     opacity:  0.7;
 }
 .cart-item:hover  {
     transform:  translateY(-2px);
     box-shadow:  0 4px 12px rgba(230,  57,  70,  0.2);
 }
 .cart-item-image  {
     width:  60px;
     height:  60px;
     border-radius:  10px;
     object-fit:  cover;
     border:  2px solid #fecaca;
 }
 .cart-item-details  {
     flex:  1;
 }
 .cart-item-name  {
     font-weight:  700;
     font-size:  0.95rem;
     margin-bottom:  4px;
     color:  #1f2937;
 }
 .cart-item-price  {
     color:  var(--primary-red);
     font-size:  0.9rem;
     font-weight:  700;
 }
 .cart-item-controls  {
     display:  flex;
     align-items:  center;
     gap:  8px;
 }
 .quantity-btn  {
     width:  32px;
     height:  32px;
     border:  2px solid #fecaca;
     background:  white;
     border-radius:  50%;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     cursor:  pointer;
     transition:  all 0.2s;
 }
 .quantity-btn:hover  {
     background:  var(--primary-red);
     border-color:  var(--primary-red);
     transform:  scale(1.1);
 }
 .quantity-btn:hover iconify-icon  {
     color:  white;
 }
 .quantity-btn iconify-icon  {
     font-size:  18px;
     color:  var(--primary-red);
 }
 .quantity-value  {
     min-width:  25px;
     text-align:  center;
     font-weight:  700;
     font-size:  0.95rem;
     color:  #1f2937;
     background:  #fef2f2;
     padding:  4px 8px;
     border-radius:  6px;
     border:  1px solid #fecaca;
 }
 .remove-btn  {
     width:  32px;
     height:  32px;
     border:  2px solid #fecaca;
     background:  white;
     border-radius:  50%;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     cursor:  pointer;
     transition:  all 0.2s;
     margin-left:  5px;
 }
 .remove-btn:hover  {
     background:  var(--primary-red);
     border-color:  var(--primary-red);
     transform:  scale(1.1);
 }
 .remove-btn:hover iconify-icon  {
     color:  white;
 }
 .remove-btn iconify-icon  {
     font-size:  18px;
     color:  var(--primary-red);
 }
 .cart-footer  {
     background:  white;
     padding:  20px;
     border-top:  3px solid #fecaca;
     background:  linear-gradient(to bottom,  #fef2f2,  white);
 }
 .cart-total  {
     display:  flex;
     justify-content:  space-between;
     margin-bottom:  15px;
     font-size:  1.2rem;
     font-weight:  700;
     color:  #1f2937;
     padding:  10px 15px;
     background:  white;
     border-radius:  10px;
     border:  2px solid #fecaca;
 }
 .cart-total span:last-child  {
     color:  var(--primary-red);
 }
 .checkout-btn  {
     width:  100%;
     padding:  12px;
     background:  linear-gradient(135deg,  var(--primary-red),  var(--dark-red));
     color:  white;
     border:  none;
     border-radius:  10px;
     font-size:  1rem;
     font-weight:  700;
     cursor:  pointer;
     transition:  all 0.3s;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     gap:  8px;
     box-shadow:  0 4px 12px rgba(230,  57,  70,  0.3);
 }
 .checkout-btn:hover  {
     background:  linear-gradient(135deg,  var(--dark-red),  #991b1b);
     transform:  translateY(-2px);
     box-shadow:  0 6px 16px rgba(230,  57,  70,  0.4);
 }
 /* ============================================ 🪑 TABLE SELECTION ============================================ */ .table-selection-wrapper  {
     background:  linear-gradient(135deg,  var(--primary-red),  var(--dark-red));
     border-radius:  20px;
     padding:  25px;
     box-shadow:  0 6px 20px rgba(230,  57,  70,  0.3);
     margin:  30px 0;
 }
 .table-selection-header  {
     text-align:  center;
     color:  white;
     margin-bottom:  25px;
 }
 .table-selection-header iconify-icon  {
     font-size:  2.5rem;
     margin-bottom:  15px;
 }
 .table-selection-header h3  {
     font-size:  1.6rem;
     font-weight:  800;
     margin:  10px 0 8px;
 }
 .table-selection-header p  {
     font-size:  1rem;
     opacity:  0.95;
 }
 .tables-grid  {
     display:  grid;
     grid-template-columns:  repeat(auto-fill,  minmax(110px,  1fr));
     gap:  12px;
     margin-top:  20px;
     padding:  10px 0;
 }
 .table-card  {
     background:  rgba(251,  106,  106,  0.95);
     border-radius:  18px;
     padding:  12px 8px;
     text-align:  center;
     cursor:  pointer;
     transition:  all 0.3s ease;
     border:  2px solid transparent;
     box-shadow:  0 4px 12px rgba(0,  0,  0,  0.15);
     display:  flex;
     flex-direction:  column;
     align-items:  center;
     justify-content:  space-between;
     min-height:  120px;
 }
 .table-card:hover:not(.occupied):not(.reserved)  {
     transform:  translateY(-8px) scale(1.02);
     box-shadow:  0 12px 25px rgba(0,  0,  0,  0.2);
     border-color:  rgba(255,  255,  255,  0.8);
 }
 .table-card.selected  {
     border-color:  #ffd700;
     background:  linear-gradient(135deg,  #ffd700,  #ffed4e);
     box-shadow:  0 0 25px rgba(255,  215,  0,  0.6);
     transform:  scale(1.05);
 }
 .table-card.occupied  {
     background:  linear-gradient(135deg,  #ff4757,  #ff6348);
     opacity:  0.7;
     cursor:  not-allowed;
 }
 .table-card.reserved  {
     background:  linear-gradient(135deg,  #ffa502,  #ff8c00);
     opacity:  0.8;
     cursor:  not-allowed;
 }
 .table-icon  {
     font-size:  2.2rem;
     color:  #667eea;
 }
 .table-number  {
     font-size:  2.2rem;
     font-weight:  800;
     color:  #764ba2;
     margin:  8px 0;
 }
 .table-info  {
     display:  flex;
     flex-direction:  column;
     gap:  4px;
     width:  100%;
     font-size:  11px;
 }
 .capacity  {
     display:  flex;
     align-items:  center;
     justify-content:  center;
     gap:  4px;
     font-weight:  600;
     color:  #555;
     font-size:  10px;
     padding:  2px 6px;
     background:  rgba(255,  255,  255,  0.2);
     border-radius:  8px;
 }
 /* ============================================ ⚡ ANIMATIONS ============================================ */ @keyframes fadeInUp  {
     from  {
     opacity:  0;
     transform:  translateY(30px);
 }
 to  {
     opacity:  1;
     transform:  translateY(0);
 }
 }
 @keyframes pulse-red  {
     0%,  100%  {
     box-shadow:  0 4px 15px rgba(230,  57,  70,  0.4);
 }
 50%  {
     box-shadow:  0 4px 25px rgba(230,  57,  70,  0.7);
 }
 }
 @keyframes pulse  {
     0%,  100%  {
     transform:  scale(1);
 }
 50%  {
     transform:  scale(1.05);
 }
 }
 /* ============================================ 📱 GENERAL MOBILE OPTIMIZATIONS ============================================ */ @media (max-width: 767.98px)  {
     .cart-toggle  {
     width:  50px;
     height:  50px;
     bottom:  15px;
     left:  15px;
 }
 .cart-badge  {
     width:  20px;
     height:  20px;
     font-size:  10px;
 }
 .cart-panel  {
     width:  calc(100vw - 20px);
     left:  -100%;
     bottom:  75px;
     height:  450px;
 }
 .cart-panel.active  {
     left:  10px;
 }
 .tables-grid  {
     grid-template-columns:  repeat(2,  1fr);
     gap:  10px;
 }
 .feature-card  {
     min-height:  auto;
     padding:  25px 15px;
 }
 .feature-icon iconify-icon  {
     font-size:  3rem;
 }
 }
 /* Tablet Adjustments */ @media (min-width: 768px) and (max-width: 991.98px)  {
     .cart-toggle  {
     width:  55px;
     height:  55px;
     bottom:  15px;
     left:  15px;
 }
 .cart-panel  {
     width:  calc(100vw - 40px);
     left:  -100%;
 }
 .cart-panel.active  {
     left:  20px;
 }
 }
 /* ============================================ 🌙 DARK MODE SUPPORT ============================================ */ @media (prefers-color-scheme: dark)  {
     .badge-new  {
     background:  linear-gradient(135deg,  #f59e0b,  #d97706);
     color:  #000;
     border-color:  rgba(255,  255,  255,  0.4);
 }
 .menu-card,  .menu-card-small  {
     background:  #eee5d0;
 }
 .menu-item-name,  .menu-item-description  {
     color:  #000000;
 }
 .menu-table-separator  {
     background:  linear-gradient(to right,  transparent 0%,  rgba(255,  255,  255,  0.1) 20%,  rgba(255,  255,  255,  0.2) 50%,  rgba(255,  255,  255,  0.1) 80%,  transparent 100%);
 }
 }
 /* ============================================ 🎯 PRINT STYLES ============================================ */ @media print  {
     .badge-new,  .badge-discount,  .badge-popular,  .badge-sold-out  {
     background:  #000 !important;
     color:  #fff !important;
     box-shadow:  none !important;
     animation:  none !important;
 }
 .floating-cart,  .cart-panel,  .menu-table-separator  {
     display:  none !important;
 }
 .menu-card  {
     box-shadow:  none !important;
     border:  1px solid #000 !important;
 }
 }
 /* ============================================ 🎨 UTILITY CLASSES & CATEGORY TABS ============================================ */ .text-center  {
     text-align:  center;
 }
 .w-100  {
     width:  100%;
 }
 .mt-3  {
     margin-top:  1rem;
 }
 .mt-4  {
     margin-top:  1.5rem;
 }
 .mb-4  {
     margin-bottom:  1.5rem;
 }
 .py-5  {
     padding-top:  3rem;
     padding-bottom:  3rem;
 }
 /* Scrollbar Styling */ .cart-items::-webkit-scrollbar  {
     width:  6px;
 }
 .cart-items::-webkit-scrollbar-track  {
     background:  #fef2f2;
     border-radius:  10px;
 }
 .cart-items::-webkit-scrollbar-thumb  {
     background:  linear-gradient(to bottom,  var(--primary-red),  var(--dark-red));
     border-radius:  10px;
 }
 .cart-items::-webkit-scrollbar-thumb:hover  {
     background:  linear-gradient(to bottom,  var(--dark-red),  #991b1b);
 }
 /* Smooth Scroll */ html  {
     scroll-behavior:  smooth;
 }
 /* Section Title */ .section-title  {
     font-size:  2.5rem;
     font-weight:  900;
     color:  var(--dark-gray);
     text-align:  center;
     margin:  40px 0;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     gap:  15px;
 }
 .section-title iconify-icon  {
     font-size:  3rem;
     color:  var(--primary-red);
 }
 /* تب‌های دسته‌بندی */ .category-tabs  {
     display:  flex;
     gap:  1rem;
     overflow-x:  auto;
     overflow-y:  hidden;
     padding:  1rem 0;
     margin-bottom:  2rem;
     scroll-behavior:  smooth;
     -webkit-overflow-scrolling:  touch;
     scrollbar-width:  thin;
     scrollbar-color:  var(--primary-red) transparent;
 }
 .category-tabs::-webkit-scrollbar  {
     height:  4px;
 }
 .category-tabs::-webkit-scrollbar-track  {
     background:  transparent;
 }
 .category-tabs::-webkit-scrollbar-thumb  {
     background:  var(--primary-red);
     border-radius:  10px;
 }
 .category-tab  {
     display:  flex;
     align-items:  center;
     gap:  0.5rem;
     padding:  0.75rem 1.5rem;
     background:  var(--card-bg);
     border:  0px solid transparent;
     border-radius:  50px;
     cursor:  pointer;
     transition:  all 0.3s ease;
     white-space:  nowrap;
     flex-shrink:  0;
     font-weight:  500;
     color:  var(--text-color);
 }
 .category-tab:hover  {
     transform:  translateY(-2px);
 }
 .category-tab.active  {
     background:  #735a27;
     color:  white;
 }
 .category-tab iconify-icon  {
     font-size:  1.2rem;
 }
 @media (max-width: 768px)  {
     .category-tabs  {
     gap:  0.75rem;
     padding:  0.75rem 0;
 }
 .category-tab  {
     padding:  0.6rem 1.2rem;
     font-size:  0.9rem;
 }
 .category-tab iconify-icon  {
     font-size:  1rem;
 }
 }
 /* بخش جستجو و فیلتر */ .menu-search-section  {
     background:  linear-gradient(135deg,  rgba(255,  255,  255,  0.9),  rgba(248,  248,  248,  0.95));
     padding:  20px;
     border-radius:  15px;
     border:  2px solid var(--light-gray);
     backdrop-filter:  blur(10px);
     box-shadow:  0 4px 15px rgba(0,  0,  0,  0.05);
 }
 .search-input-wrapper  {
     position:  relative;
     display:  flex;
     align-items:  center;
 }
 .search-icon  {
     position:  absolute;
     right:  15px;
     color:  var(--primary-red);
     font-size:  1.3rem;
     pointer-events:  none;
     z-index:  2;
 }
 .menu-search-input  {
     padding-right:  45px !important;
     border:  2px solid var(--light-gray) !important;
     border-radius:  10px !important;
     transition:  all 0.3s ease !important;
     font-size:  0.95rem;
     color:  var(--dark-gray);
     background:  white !important;
 }
 .menu-search-input:focus  {
     box-shadow:  0 0 10px rgba(229,  45,  41,  0.2) !important;
     background:  white !important;
 }
 .menu-search-input::placeholder  {
     color:  var(--silver);
 }
 .btn-search-clear  {
     position:  absolute;
     left:  12px;
     background:  none;
     border:  none;
     cursor:  pointer;
     color:  var(--silver);
     transition:  all 0.3s ease;
     z-index:  3;
 }
 .btn-search-clear:hover  {
     color:  var(--primary-red);
     transform:  scale(1.1);
 }
 .menu-filter-select  {
     border:  2px solid var(--light-gray) !important;
     border-radius:  10px !important;
     color:  var(--dark-gray) !important;
     background:  white !important;
     padding:  10px 15px !important;
     transition:  all 0.3s ease !important;
 }
 .menu-filter-select:focus  {
     border-color:  var(--primary-red) !important;
     box-shadow:  0 0 10px rgba(229,  45,  41,  0.2) !important;
 }
 #searchResultCount  {
     font-weight:  600;
     color:  var(--primary-red);
 }
 /* Disable animations for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce)  {
     *,  *: :before,  *::after  {
     animation-duration:  0.01ms !important;
     animation-iteration-count:  1 !important;
     transition-duration:  0.01ms !important;
 }
 }
 /* ============================================ 🛒 CHECKOUT & OTHER COMPONENTS ============================================ */ .section-header-checkout  {
     display:  flex;
     align-items:  center;
     gap:  10px;
     margin-bottom:  15px;
     padding-bottom:  10px;
     border-bottom:  2px solid #f1f5f9;
 }
 .section-header-checkout h4  {
     margin:  0;
     color:  #1e293b;
     font-size:  1.1rem;
 }
 .section-header-checkout small  {
     display:  block;
     margin-top:  3px;
     font-size:  0.85rem;
 }
 .checkout-items-list  {
     max-height:  300px;
     overflow-y:  auto;
     padding:  10px;
     background:  #f8fafc;
     border-radius:  10px;
     margin-bottom:  15px;
 }
 .checkout-item  {
     display:  flex;
     align-items:  center;
     gap:  15px;
     background:  white;
     padding:  12px;
     border-radius:  10px;
     margin-bottom:  10px;
     border:  1px solid #e2e8f0;
     transition:  all 0.3s ease;
 }
 .checkout-item:hover  {
     box-shadow:  0 2px 8px rgba(0,  0,  0,  0.08);
 }
 .checkout-item-image  {
     width:  60px;
     height:  60px;
     border-radius:  8px;
     object-fit:  cover;
     background:  #fecaca;
 }
 .checkout-item-details  {
     flex:  1;
 }
 .checkout-item-name  {
     font-weight:  600;
     color:  #1e293b;
     margin-bottom:  5px;
 }
 .checkout-item-price  {
     color:  #64748b;
     font-size:  0.9rem;
 }
 .checkout-item-controls  {
     display:  flex;
     align-items:  center;
     gap:  8px;
 }
 .checkout-qty-btn  {
     width:  32px;
     height:  32px;
     border:  none;
     background:  #fee2e2;
     color:  #dc2626;
     border-radius:  6px;
     cursor:  pointer;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     transition:  all 0.2s;
 }
 .checkout-qty-btn:hover  {
     background:  #dc2626;
     color:  white;
     transform:  scale(1.1);
 }
 .checkout-qty-value  {
     min-width:  35px;
     text-align:  center;
     font-weight:  600;
     color:  #1e293b;
 }
 .checkout-remove-btn  {
     width:  32px;
     height:  32px;
     border:  none;
     background:  #fee2e2;
     color:  #dc2626;
     border-radius:  6px;
     cursor:  pointer;
     margin-left:  8px;
     transition:  all 0.2s;
 }
 .checkout-remove-btn:hover  {
     background:  #dc2626;
     color:  white;
     transform:  scale(1.1);
 }
 .checkout-total-box  {
     background:  linear-gradient(135deg,  #fee2e2 0%,  #fecaca 100%);
     padding:  15px 20px;
     border-radius:  10px;
     border:  2px solid #dc2626;
 }
 .total-row  {
     display:  flex;
     justify-content:  space-between;
     align-items:  center;
     font-size:  1.1rem;
 }
 .table-selection-compact  {
     background:  #f8fafc;
     padding:  20px;
     border-radius:  15px;
     border:  1px solid #e2e8f0;
 }
 .tables-grid-compact  {
     display:  grid;
     grid-template-columns:  repeat(auto-fill,  minmax(60px,  1fr));
     gap:  10px;
     max-height:  180px;
     overflow-y:  auto;
     padding:  10px;
     background:  white;
     border-radius:  10px;
 }
 .table-card-compact  {
     aspect-ratio:  1;
     display:  flex;
     flex-direction:  column;
     align-items:  center;
     justify-content:  center;
     gap:  5px;
     background:  white;
     border:  2px solid #e2e8f0;
     border-radius:  10px;
     cursor:  pointer;
     transition:  all 0.3s ease;
     font-size:  0.9rem;
     font-weight:  600;
 }
 .table-card-compact iconify-icon  {
     font-size:  1.5rem;
     color:  #64748b;
 }
 .table-card-compact:hover:not(.occupied):not(.reserved)  {
     border-color:  #dc2626;
     background:  #fee2e2;
     transform:  translateY(-3px);
 }
 .table-card-compact.selected  {
     background:  #dc2626;
     border-color:  #dc2626;
     color:  white;
 }
 .table-card-compact.selected iconify-icon  {
     color:  white;
 }
 .table-card-compact.occupied,  .table-card-compact.reserved  {
     background:  #f1f5f9;
     border-color:  #cbd5e1;
     cursor:  not-allowed;
     opacity:  0.5;
 }
 .info-display-box  {
     background:  #f1f5f9;
     padding:  12px 15px;
     border-radius:  10px;
     display:  flex;
     justify-content:  space-between;
     align-items:  center;
     border:  2px solid #e2e8f0;
 }
 .info-display-box span  {
     color:  #1e293b;
     font-weight:  500;
 }
 .btn-edit-info  {
     background:  #dc2626;
     color:  white;
     border:  none;
     width:  32px;
     height:  32px;
     border-radius:  6px;
     cursor:  pointer;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     transition:  all 0.2s;
 }
 .btn-edit-info:hover  {
     background:  #991b1b;
     transform:  scale(1.1);
 }
 .payment-methods-grid-compact  {
     display:  grid;
     grid-template-columns:  repeat(3,  1fr);
     gap:  10px;
     margin-bottom:  10px;
 }
 .payment-method-card-compact  {
     padding:  15px;
     border:  2px solid #e2e8f0;
     border-radius:  10px;
     text-align:  center;
     cursor:  pointer;
     transition:  all 0.3s ease;
     background:  white;
 }
 .payment-method-card-compact iconify-icon  {
     font-size:  2rem;
     color:  #dc2626;
     display:  block;
     margin-bottom:  8px;
 }
 .payment-method-card-compact span  {
     font-size:  0.9rem;
     font-weight:  600;
     color:  #64748b;
 }
 .payment-method-card-compact:hover:not(.disabled)  {
     border-color:  #dc2626;
     background:  #fee2e2;
     transform:  translateY(-3px);
 }
 .payment-method-card-compact.selected  {
     background:  #dc2626;
     border-color:  #dc2626;
 }
 .payment-method-card-compact.selected span,  .payment-method-card-compact.selected iconify-icon  {
     color:  white;
 }
 .payment-method-card-compact.disabled  {
     opacity:  0.4;
     cursor:  not-allowed;
 }
 .floating-order-btn  {
     position:  fixed;
     bottom:  30px;
     left:  30px;
     background:  linear-gradient(135deg,  #dc2626 0%,  #991b1b 100%);
     color:  white;
     border:  none;
     padding:  15px 25px;
     border-radius:  50px;
     box-shadow:  0 8px 25px rgba(220,  38,  38,  0.4);
     cursor:  pointer;
     z-index:  999;
     display:  flex;
     align-items:  center;
     gap:  10px;
     font-weight:  600;
     transition:  all 0.3s ease;
     animation:  pulse 2s infinite;
 }
 .floating-order-btn:hover  {
     transform:  translateY(-5px);
     box-shadow:  0 12px 35px rgba(220,  38,  38,  0.5);
 }
 .floating-order-btn iconify-icon  {
     font-size:  1.5rem;
 }
 .order-badge  {
     background:  white;
     color:  #dc2626;
     min-width:  24px;
     height:  24px;
     border-radius:  12px;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     font-size:  0.8rem;
     font-weight:  700;
 }
 /* Responsive */ @media (max-width: 768px)  {
     .tables-grid-compact  {
     grid-template-columns:  repeat(auto-fill,  minmax(50px,  1fr));
     gap:  8px;
 }
 .payment-methods-grid-compact  {
     grid-template-columns:  1fr;
 }
 .floating-order-btn  {
     bottom:  20px;
     left:  20px;
     padding:  12px 20px;
     font-size:  0.9rem;
 }
 }
 /* ============================================ 🔘 PRODUCT BUTTON - RESPONSIVE VERSION ============================================ */ /* ============================================ 💰🔘 PRICE & BUTTON ROW - ALIGNED ============================================ */ .price-action-row  {
     display:  flex;
     justify-content:  space-between;
     align-items:  center;
     gap:  12px;
     margin-top:  12px;
     width:  100%;
 }
 /* استایل قیمت - متن ساده مثل توضیحات */ .menu-item-price  {
     color:  var(--dark-gray);
     font-weight:  600;
     font-size:  0.95rem;
     line-height:  1.5;
     opacity:  0.85;
     text-align:  right;
     white-space:  nowrap;
 }
 /* استایل دکمه خرید */ .product-btn  {
     position:  relative;
     width:  auto;
     min-width:  100px;
     height:  2.5rem;
     border:  none;
     border-radius:  12px;
     background-color:  #ff9393;
     left:  1rem;
     margin:  0;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     gap:  6px;
     transition:  all 0.3s ease;
     cursor:  pointer;
     font-weight:  600;
     font-size:  0.95rem;
     padding:  0 16px;
     flex-shrink:  0;
 }
 .product-btn iconify-icon  {
     font-size:  1.3rem;
 }
 .product-btn:hover  {
     background-color:  #ff7a7a;
     transform:  translateY(-2px);
     box-shadow:  0 4px 12px rgba(255,  147,  147,  0.4);
 }
 .product-btn:active  {
     transform:  translateY(0);
 }
 /* ============================================ 📱 RESPONSIVE ADJUSTMENTS ============================================ */ /* Mobile Small (< 480px) */ @media (max-width: 479.98px)  {
     .price-action-row  {
     flex-direction:  column;
     gap:  10px;
     align-items:  stretch;
 }
 .menu-item-price  {
     width:  100%;
     font-size:  0.9rem;
     text-align:  right;
 }
 .product-btn  {
     width:  100%;
     height:  2.3rem;
     font-size:  0.9rem;
 }
 }
 /* Mobile Medium (480px - 575px) */ @media (min-width: 480px) and (max-width: 575.98px)  {
     .price-action-row  {
     gap:  10px;
 }
 .menu-item-price  {
     font-size:  0.92rem;
 }
 .product-btn  {
     height:  2.4rem;
     font-size:  0.92rem;
     min-width:  90px;
 }
 }
 /* Tablet & Desktop */ @media (min-width: 576px)  {
     .price-action-row  {
     gap:  12px;
 }
 .menu-item-price  {
     font-size:  0.95rem;
 }
 .product-btn  {
     height:  2.5rem;
     min-width:  100px;
 }
 }
 /* ============================================ 📱 RESPONSIVE BREAKPOINTS ============================================ */ /* Extra Small Devices (< 480px) */ @media (max-width: 479.98px)  {
     .product-btn  {
     width:  1rem;
     height:  1.2rem;
     font-size:  0.9rem;
     border-radius:  12px;
     margin-top:  0px }
 } /* Small Mobile (480px - 575px) */ @media (min-width: 480px) and (max-width: 575.98px)  {
     .product-btn  {
     width:  90%;
     height:  2.1rem;
     font-size:  0.92rem;
     border-radius:  13px;
 }
 }
 /* Large Mobile (576px - 767px) */ @media (min-width: 576px) and (max-width: 767.98px)  {
     .product-btn  {
     width:  6rem;
     height:  2rem;
     font-size:  0.95rem;
     border-radius:  14px;
 }
 }
 /* Tablet (768px - 991px) */ @media (min-width: 768px) and (max-width: 991.98px)  {
     .product-btn  {
     width:  6.5rem;
     height:  2rem;
     font-size:  0.95rem;
 }
 }
 /* Desktop (992px - 1199px) */ @media (min-width: 992px) and (max-width: 1199.98px)  {
     .product-btn  {
     width:  6rem;
     height:  2rem;
     font-size:  1rem;
 }
 }
 /* Large Desktop (1200px+) */ @media (min-width: 1200px)  {
     .product-btn  {
     width:  6rem;
     height:  2rem;
     font-size:  1rem;
 }
 }
 /* ============================================ استایل‌های عمومی (اعمال روی دسکتاپ و موبایل) ============================================ */ /* استایل دکمه سفارش برای تمام سایزها */ .btn-order  {
     background-color:  #735a27 !important;
     color:  #fff1f1 !important;
     border:  none !important;
     border-radius:  clamp(16px,  4vw,  22px) !important;
     padding:  clamp(4px,  1vw,  6px) clamp(10px,  2.5vw,  14px) !important;
     font-size:  clamp(0.75rem,  2.5vw,  0.85rem) !important;
     font-weight:  700 !important;
     display:  flex !important;
     align-items:  center !important;
     justify-content:  center !important;
     height:  clamp(28px,  7vw,  36px) !important;
     min-width:  clamp(60px,  15vw,  80px) !important;
     box-shadow:  0 2px 6px rgba(115,  90,  39,  0.3) !important;
     /* رنگ سایه اصلاح شد تا با دکمه همخوانی داشته باشد */ transition:  all 0.2s ease !important;
     text-decoration:  none !important;
     cursor:  pointer !important;
 }
 .btn-order:active  {
     transform:  scale(0.97) !important;
 }
 .btn-order:hover  {
     background-color:  #5c481f !important;
     /* افکت هاور برای دسکتاپ */ }
 /* ============================================ استایل دکمه تبلیغات ============================================ */ .btn-ads  {
     background:  linear-gradient(135deg,  #e63946,  #b01a26);
     /* تم قرمز جذاب */ color:  white;
     border:  none;
     border-radius:  8px;
     /* هماهنگ با گوشه‌های فیلتر قیمت */ padding:  0 15px;
     font-size:  0.9rem;
     font-weight:  600;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     gap:  6px;
     box-shadow:  0 4px 10px rgba(230,  57,  70,  0.3);
     transition:  all 0.3s ease;
     cursor:  pointer;
     white-space:  nowrap;
     height:  100%;
     /* هم‌ارتفاع شدن با سلکت‌باکس قیمت */ min-height:  40px;
     /* حداقل ارتفاع برای کلیک راحت در موبایل */ }
 .btn-ads: hover  {
     transform:  translateY(-2px);
     box-shadow:  0 6px 15px rgba(230,  57,  70,  0.4);
 }
 .btn-ads:active  {
     transform:  translateY(1px);
 }
 .btn-ads .ads-icon  {
     font-size:  1.3rem;
 }
 /* ============================================ استایل پاپ‌آپ (Toast) "به زودی" ============================================ */ .custom-toast-notification  {
     position:  fixed;
     bottom:  30px;
     left:  50%;
     transform:  translateX(-50%) translateY(100px);
     background-color:  #333;
     color:  #fff;
     padding:  12px 24px;
     border-radius:  50px;
     font-size:  0.9rem;
     font-weight:  500;
     display:  flex;
     align-items:  center;
     gap:  10px;
     box-shadow:  0 10px 30px rgba(0,  0,  0,  0.2);
     z-index:  9999;
     opacity:  0;
     transition:  all 0.4s cubic-bezier(0.175,  0.885,  0.32,  1.275);
     /* انیمیشن نرم و فنری */ }
 .custom-toast-notification.show  {
     transform:  translateX(-50%) translateY(0);
     opacity:  1;
 }
 .custom-toast-notification iconify-icon  {
     color:  #ffd166;
     /* رنگ طلایی برای آیکون هشدار */ font-size:  1.2rem;
 }
 /* ============================================ 📱 MOBILE RESPONSIVE - هماهنگ با نسبت صفحه ============================================ */ @media screen and (max-width: 768px)  {
     /* 1. کارت اصلی */ .menu-card,  .menu-card-small  {
     display:  flex;
     flex-direction:  row-reverse !important;
     align-items:  center !important;
     padding:  clamp(8px,  2vw,  12px) !important;
     min-height:  auto !important;
     height:  auto !important;
     gap:  clamp(10px,  2.5vw,  14px);
 }
 /* 2. عکس محصول */ .menu-image-container  {
     width:  clamp(70px,  18vw,  90px) !important;
     height:  clamp(70px,  18vw,  90px) !important;
     margin:  0 !important;
     flex-shrink:  0;
     border-radius:  clamp(8px,  2vw,  12px) !important;
 }
 .placeholder-image iconify-icon  {
     font-size:  clamp(1.3rem,  3.5vw,  1.7rem);
 }
 /* 3. محتوای متنی */ .card-content  {
     flex:  1;
     display:  flex;
     flex-direction:  column;
     justify-content:  space-between;
     padding:  0 !important;
     min-height:  clamp(70px,  18vw,  90px);
     text-align:  right;
 }
 /* 4. عنوان */ .menu-item-name  {
     font-size:  clamp(0.85rem,  3.2vw,  1.05rem) !important;
     margin-bottom:  2px !important;
     line-height:  1.2;
     font-weight:  700;
 }
 /* 5. توضیحات */ .menu-item-description  {
     font-size:  clamp(0.7rem,  2.5vw,  0.85rem) !important;
     margin-bottom:  clamp(4px,  1vw,  6px) !important;
     line-height:  1.3;
     display:  -webkit-box;
     -webkit-line-clamp:  2;
     -webkit-box-orient:  vertical;
     overflow:  hidden;
     opacity:  0.8;
 }
 /* 6. ردیف قیمت و دکمه */ .card-footer,  .action-row,  .price-action-row  {
     display:  flex;
     flex-direction:  row;
     justify-content:  space-between;
     align-items:  center;
     width:  100%;
     margin-top:  auto;
     gap:  clamp(6px,  1.5vw,  10px);
 }
 /* 7. قیمت */ .price-display  {
     background:  transparent !important;
     border:  none !important;
     box-shadow:  none !important;
     padding:  0 !important;
     color:  #2d2d2d !important;
     font-size:  clamp(0.85rem,  3vw,  1rem) !important;
     font-weight:  800 !important;
     margin:  0 !important;
     white-space:  nowrap;
 }
 .price-display::after  {
     content:  ' تومان';
     color:  #777;
     font-size:  0.75em;
     font-weight:  400;
 }
 }
 /* موبایل کوچک (زیر 480px) */ @media screen and (max-width: 480px)  {
     .menu-item-description  {
     -webkit-line-clamp:  1 !important;
 }
 .card-content  {
     min-height:  75px;
 }
 }
 /* موبایل خیلی کوچک (زیر 360px) */ @media screen and (max-width: 360px)  {
     .menu-card,  .menu-card-small  {
     padding:  6px !important;
     gap:  8px;
 }
 .menu-image-container  {
     width:  65px !important;
     height:  65px !important;
 }
 .card-content  {
     min-height:  65px;
 }
 /* استثنای دکمه برای موبایل‌های خیلی کوچک */ .btn-order  {
     min-width:  55px !important;
 }
 }
 /* ============================================ 🏷️ MINI TAGS - تگ‌های کوچک زیر قیمت ============================================ */ /* Wrapper برای قیمت و تگ‌ها */ .price-tags-wrapper  {
     display:  flex;
     flex-direction:  column;
     gap:  4px;
     align-items:  flex-start;
 }
 /* قیمت */ .price-display  {
     background:  transparent !important;
     border:  none !important;
     box-shadow:  none !important;
     padding:  0 !important;
     color:  #2d2d2d !important;
     font-size:  clamp(0.85rem,  3vw,  1rem) !important;
     font-weight:  800 !important;
     margin:  0 !important;
     white-space:  nowrap;
 }
 .price-display::after  {
     content:  ' تومان';
     color:  #777;
     font-size:  0.75em;
     font-weight:  400;
 }
 /* Container تگ‌ها */ .product-tags  {
     display:  flex;
     flex-wrap:  wrap;
     gap:  4px;
     margin-top:  2px;
 }
 /* استایل پایه تگ‌های کوچک */ .mini-tag  {
     display:  inline-flex;
     align-items:  center;
     padding:  2px 6px;
     font-size:  0.6rem;
     font-weight:  600;
     border-radius:  4px;
     color:  #fff;
     white-space:  nowrap;
     line-height:  1;
 }
 /* 🆕 تگ جدید - سبز */ .tag-new  {
     background:  linear-gradient(135deg,  #22c55e 0%,  #16a34a 100%);
 }
 /* 💰 تگ تخفیف - قرمز */ .tag-discount  {
     background:  linear-gradient(135deg,  #ef4444 0%,  #dc2626 100%);
 }
 /* 🔥 تگ پرفروش - نارنجی */ .tag-popular  {
     background:  linear-gradient(135deg,  #f59e0b 0%,  #d97706 100%);
 }
 /* ❌ تگ ناموجود - خاکستری */ .tag-sold-out  {
     background:  linear-gradient(135deg,  #6b7280 0%,  #4b5563 100%);
 }
 /* ============================================ 📱 MOBILE RESPONSIVE ============================================ */ @media screen and (max-width: 768px)  {
     .price-tags-wrapper  {
     gap:  3px;
 }
 .mini-tag  {
     font-size:  0.55rem;
     padding:  1.5px 5px;
     border-radius:  3px;
 }
 }
 @media screen and (max-width: 480px)  {
     .product-tags  {
     gap:  3px;
 }
 .mini-tag  {
     font-size:  0.5rem;
     padding:  1px 4px;
 }
 }
 /* Addons Modal Styles */ .addon-category  {
     margin-bottom:  25px;
     padding:  20px;
     background:  white;
     border-radius:  15px;
     border:  2px solid #e0e0e0;
     transition:  all 0.3s;
 }
 .addon-category:hover  {
     border-color:  #dc2626;
     box-shadow:  0 4px 15px rgba(220,  38,  38,  0.1);
 }
 .addon-category-header  {
     display:  flex;
     align-items:  center;
     gap:  10px;
     margin-bottom:  15px;
     padding-bottom:  10px;
     border-bottom:  2px solid #f3f4f6;
 }
 .addon-category-title  {
     font-size:  1.1rem;
     font-weight:  bold;
     color:  #1f2937;
     margin:  0;
 }
 .addon-category-badge  {
     background:  #fecaca;
     color:  #dc2626;
     padding:  4px 12px;
     border-radius:  20px;
     font-size:  0.8rem;
     font-weight:  bold;
 }
 .addon-item  {
     display:  flex;
     align-items:  center;
     justify-content:  space-between;
     padding:  15px;
     margin:  10px 0;
     background:  #f9fafb;
     border-radius:  12px;
     transition:  all 0.3s;
 }
 .addon-item:hover  {
     background:  #fef2f2;
     transform:  translateX(-5px);
 }
 .addon-item-info  {
     flex:  1;
 }
 .addon-item-name  {
     font-weight:  600;
     color:  #374151;
     margin-bottom:  5px;
 }
 .addon-item-price  {
     color:  #dc2626;
     font-size:  0.9rem;
     font-weight:  bold;
 }
 .addon-controls  {
     display:  flex;
     align-items:  center;
     gap:  10px;
 }
 .addon-quantity-btn  {
     width:  35px;
     height:  35px;
     border:  2px solid #dc2626;
     background:  white;
     border-radius:  50%;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     cursor:  pointer;
     transition:  all 0.3s;
     color:  #dc2626;
 }
 .addon-quantity-btn:hover:not(:disabled)  {
     background:  #dc2626;
     color:  white;
     transform:  scale(1.1);
 }
 .addon-quantity-btn:disabled  {
     opacity:  0.3;
     cursor:  not-allowed;
 }
 .addon-quantity-display  {
     min-width:  40px;
     text-align:  center;
     font-weight:  bold;
     font-size:  1.1rem;
     color:  #1f2937;
 }
 @keyframes shake  {
     0%,  100%  {
     transform:  translateX(0);
 }
 25%  {
     transform:  translateX(-10px);
 }
 75%  {
     transform:  translateX(10px);
 }
 }
 /* افزودنی‌ها در سبد خرید */ .cart-item-addons  {
     margin-top:  8px;
     padding:  8px;
     background:  linear-gradient(135deg,  #b5b0b0 0%,  #dda1a1 100%);
     border-radius:  8px;
     border:  1px solid #fecaca;
 }
 .addon-detail  {
     display:  flex;
     align-items:  center;
     gap:  6px;
     font-size:  0.85rem;
     color:  #374151;
     margin-bottom:  4px;
 }
 .addon-detail:last-child  {
     margin-bottom:  0;
 }
 .addon-name  {
     flex:  1;
     font-weight:  500;
 }
 .addon-qty  {
     background:  #dc2626;
     color:  white;
     padding:  2px 6px;
     border-radius:  4px;
     font-size:  0.75rem;
     font-weight:  bold;
 }
 .addon-price  {
     color:  #dc2626;
     font-weight:  600;
     white-space:  nowrap;
 }
 .cart-item:hover  {
     box-shadow:  0 4px 12px rgba(220,  38,  38,  0.1);
     transform:  translateY(-2px);
 }
 .cart-item-image  {
     width:  70px;
     height:  70px;
     object-fit:  cover;
     border-radius:  10px;
     flex-shrink:  0;
 }
 .cart-item-details  {
     flex:  1;
     display:  flex;
     flex-direction:  column;
     justify-content:  center;
 }
 .cart-item-name  {
     font-weight:  600;
     color:  #1f2937;
     margin-bottom:  4px;
     font-size:  0.95rem;
 }
 .cart-item-price  {
     color:  #6b7280;
     font-size:  0.9rem;
 }
 .cart-item-controls  {
     display:  flex;
     align-items:  center;
     gap:  8px;
 }
 .quantity-btn  {
     width:  32px;
     height:  32px;
     border:  none;
     background:  transparent;
     color:  #dc2626;
     cursor:  pointer;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     font-size:  1.5rem;
     transition:  all 0.2s;
 }
 .quantity-btn:hover  {
     transform:  scale(1.1);
 }
 .quantity-btn:disabled  {
     opacity:  0.4;
     cursor:  not-allowed;
 }
 .quantity-value  {
     min-width:  28px;
     text-align:  center;
     font-weight:  600;
     color:  #1f2937;
     font-size:  1rem;
 }
 .remove-btn  {
     width:  32px;
     height:  32px;
     border:  none;
     background:  #fee2e2;
     color:  #dc2626;
     cursor:  pointer;
     border-radius:  8px;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     font-size:  1.2rem;
     transition:  all 0.2s;
     margin-right:  8px;
 }
 .remove-btn:hover  {
     background:  #fecaca;
     transform:  scale(1.05);
 }
 /* دکمه حذف افزودنی */ /* دکمه حذف افزودنی - با ایکون قرمز */ .remove-addon-btn  {
     width:  24px;
     height:  24px;
     border:  none;
     background:  transparent;
     color:  #dc2626;
     cursor:  pointer;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     font-size:  1.2rem;
     transition:  all 0.2s ease;
     border-radius:  6px;
     margin-right:  auto;
     flex-shrink:  0;
     padding:  0;
 }
 .remove-addon-btn:hover  {
     background:  #fee2e2;
     color:  #b91c1c;
     transform:  scale(1.15);
 }
 .remove-addon-btn:active  {
     transform:  scale(0.95);
     color:  #991b1b;
 }
 /* افزودنی‌ها در سبد خرید */ .cart-item-addons  {
     margin-top:  8px;
     padding:  8px;
     background:  linear-gradient(135deg,  #b5b0b0 0%,  #dda1a1 100%);
     border-radius:  8px;
     border:  1px solid #fecaca;
 }
 .addon-detail  {
     display:  flex;
     align-items:  center;
     gap:  6px;
     font-size:  0.85rem;
     color:  #374151;
     margin-bottom:  4px;
     padding:  4px 6px;
     border-radius:  6px;
     transition:  all 0.3s ease;
 }
 .addon-detail:hover  {
     background:  rgba(220,  38,  38,  0.05);
 }
 .addon-detail:last-child  {
     margin-bottom:  0;
 }
 .addon-name  {
     flex:  0 1 auto;
     font-weight:  500;
 }
 .addon-qty  {
     background:  #dc2626;
     color:  white;
     padding:  2px 6px;
     border-radius:  4px;
     font-size:  0.75rem;
     font-weight:  bold;
 }
 .addon-price  {
     color:  #dc2626;
     font-weight:  600;
     white-space:  nowrap;
     margin-left:  auto;
 }
 /* --- کانتینر اصلی سبد خرید شناور --- */ .floating-cart  {
     position:  fixed;
     bottom:  30px;
     left:  30px;
     z-index:  9999;
     font-family:  inherit;
     direction:  rtl;
 }
 .cart-toggle  {
     position:  relative;
     width:  60px;
     height:  60px;
     border-radius:  50%;
     border:  none;
     cursor:  pointer;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     font-size:  24px;
     box-shadow:  0 4px 15px rgba(0,  0,  0,  0.2);
     transition:  all 0.2s ease;
     background:  #b41839;
     /* اضافه کردن رنگ پیش‌فرض */ color:  #ffffff;
 }
 .cart-toggle:hover  {
     transform:  translateY(-2px);
     box-shadow:  0 6px 20px rgba(0,  0,  0,  0.25);
 }
 .cart-toggle:active  {
     transform:  scale(0.95);
 }
 /* بج تعداد آیتم */ .cart-badge  {
     position:  absolute;
     top:  -5px;
     right:  -5px;
     min-width:  22px;
     height:  22px;
     border-radius:  11px;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     font-size:  11px;
     font-weight:  bold;
     padding:  0 6px;
     color:  #fff;
     background:  #059669;
     box-shadow:  0 2px 8px rgba(5,  150,  105,  0.4);
     animation:  badgePulse 2s ease-in-out infinite;
 }
 @keyframes badgePulse  {
     0%,  100%  {
     transform:  scale(1);
 }
 50%  {
     transform:  scale(1.1);
 }
 }
 /* --- پنل اصلی سبد خرید --- */ .cart-panel  {
     position:  absolute;
     bottom:  80px;
     left:  0;
     width:  32rem;
     max-width:  90vw;
     background-color:  #fff;
     border-radius:  16px;
     box-shadow:  0 10px 40px rgba(0,  0,  0,  0.15);
     display:  flex;
     flex-direction:  column;
     max-height:  600px;
     overflow:  hidden;
     /* حالت پیش‌فرض:  مخفی */ opacity: 0;
     visibility:  hidden;
     transform:  translateY(20px) scale(0.95);
     transition:  all 0.3s cubic-bezier(0.16,  1,  0.3,  1);
     pointer-events:  none;
     /* جلوگیری از کلیک وقتی بسته است */ }
 /* حالت فعال */ .floating-cart.active .cart-panel  {
     opacity:  1;
     visibility:  visible;
     transform:  translateY(0) scale(1);
     pointer-events:  auto;
 }
 /* --- هدر سبد خرید --- */ .cart-header  {
     display:  flex;
     justify-content:  space-between;
     align-items:  center;
     padding:  16px 20px;
     border-bottom:  1px solid #e5e7eb;
     background:  linear-gradient(135deg,  #fef2f2 0%,  #fff 100%);
 }
 .cart-header h3  {
     margin:  0;
     font-size:  18px;
     font-weight:  700;
     display:  flex;
     align-items:  center;
     gap:  8px;
     color:  #1f2937;
 }
 .cart-close  {
     background:  transparent;
     border:  none;
     cursor:  pointer;
     font-size:  22px;
     padding:  4px;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     color:  #9ca3af;
     transition:  all 0.2s;
     border-radius:  6px;
 }
 .cart-close:hover  {
     color:  #dc2626;
     background:  #fee2e2;
 }
 /* --- لیست آیتم‌ها --- */ .cart-items  {
     flex-grow:  1;
     overflow-y:  auto;
     padding:  16px;
     display:  flex;
     flex-direction:  column;
     gap:  12px;
     background:  #fafafa;
 }
 /* اسکرول بار زیبا */ .cart-items::-webkit-scrollbar  {
     width:  6px;
 }
 .cart-items::-webkit-scrollbar-track  {
     background:  transparent;
 }
 .cart-items::-webkit-scrollbar-thumb  {
     background:  #d1d5db;
     border-radius:  10px;
 }
 .cart-items::-webkit-scrollbar-thumb:hover  {
     background:  #9ca3af;
 }
 /* پیام خالی بودن سبد */ .empty-cart  {
     display:  flex;
     flex-direction:  column;
     align-items:  center;
     justify-content:  center;
     padding:  60px 20px;
     color:  #9ca3af;
     text-align:  center;
 }
 .empty-cart iconify-icon  {
     font-size:  48px;
     margin-bottom:  12px;
     opacity:  0.6;
 }
 .empty-cart p  {
     margin:  0;
     font-size:  15px;
     font-weight:  500;
 }
 /* --- آیتم سبد خرید --- */ .cart-item  {
     display:  flex;
     align-items:  center;
     gap:  12px;
     padding:  12px;
     background:  #fff;
     border-radius:  1rem;
     box-shadow:  0 1px 3px rgba(0,  0,  0,  0.05);
     transition:  all 0.2s;
 }
 .cart-item:hover  {
     box-shadow:  0 4px 12px rgba(0,  0,  0,  0.08);
 }
 .cart-item img  {
     width:  60px;
     height:  60px;
     object-fit:  cover;
     border-radius:  8px;
     flex-shrink:  0;
 }
 .item-details  {
     flex-grow:  1;
     display:  flex;
     flex-direction:  column;
     gap:  4px;
     min-width:  0;
 }
 .item-title  {
     font-size:  14px;
     font-weight:  600;
     margin:  0;
     line-height:  1.4;
     color:  #1f2937;
     overflow:  hidden;
     text-overflow:  ellipsis;
     white-space:  nowrap;
 }
 .item-price  {
     font-size:  13px;
     color:  #6b7280;
     font-weight:  500;
 }
 /* کنترل تعداد */ .item-actions  {
     display:  flex;
     align-items:  center;
     background:  #f3f4f6;
     border-radius:  8px;
     padding:  4px;
     gap:  6px;
     flex-shrink:  0;
 }
 .qty-btn  {
     width:  26px;
     height:  26px;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     border:  none;
     background:  #fff;
     border-radius:  6px;
     cursor:  pointer;
     box-shadow:  0 1px 3px rgba(0,  0,  0,  0.1);
     font-size:  14px;
     color:  #dc2626;
     transition:  all 0.2s;
 }
 .qty-btn:hover  {
     background:  #dc2626;
     color:  #fff;
     transform:  scale(1.05);
 }
 .qty-btn:active  {
     transform:  scale(0.95);
 }
 .item-qty  {
     font-weight:  600;
     min-width:  24px;
     text-align:  center;
     font-size:  14px;
     color:  #1f2937;
 }
 /* --- فوتر سبد خرید --- */ .cart-footer  {
     padding:  16px 20px;
     border-top:  1px solid #e5e7eb;
     background:  #fff;
 }
 .cart-total  {
     display:  flex;
     justify-content:  space-between;
     align-items:  center;
     margin-bottom:  14px;
     font-size:  16px;
     font-weight:  700;
     color:  #1f2937;
 }
 .cart-total span:last-child  {
     color:  #dc2626;
 }
 .btn-checkout  {
     width:  100%;
     padding:  14px;
     border:  none;
     border-radius:  10px;
     background:  linear-gradient(135deg,  #dc2626 0%,  #b91c1c 100%);
     color:  #fff;
     font-size:  15px;
     font-weight:  600;
     cursor:  pointer;
     transition:  all 0.2s;
     box-shadow:  0 4px 12px rgba(220,  38,  38,  0.3);
 }
 .btn-checkout:hover  {
     transform:  translateY(-2px);
     box-shadow:  0 6px 16px rgba(220,  38,  38,  0.4);
 }
 .btn-checkout:active  {
     transform:  translateY(0);
 }
 /* --- Responsive --- */ @media (max-width: 480px)  {
     .floating-cart  {
     bottom:  20px;
     left:  20px;
 }
 .cart-panel  {
     width:  calc(100vw - 40px);
     max-height:  70vh;
 }
 .cart-toggle  {
     width:  56px;
     height:  56px;
     font-size:  22px;
 }
 }
 /* ============================================ 🛒 CART ITEM - CLEAN & ORGANIZED ============================================ */ .cart-item  {
     background:  #ffffff;
     border-radius:  12px;
     padding:  14px;
     box-shadow:  0 2px 8px rgba(0,  0,  0,  0.06);
     transition:  all 0.3s cubic-bezier(0.4,  0,  0.2,  1);
     border:  1px solid #f3f4f6;
     animation:  slideIn 0.4s ease-out;
 }
 .cart-item:hover  {
     box-shadow:  0 4px 16px rgba(0,  0,  0,  0.1);
     border-color:  #fecaca;
     transform:  translateY(-2px);
 }
 @keyframes slideIn  {
     from  {
     opacity:  0;
     transform:  translateY(10px);
 }
 to  {
     opacity:  1;
     transform:  translateY(0);
 }
 }
 /* حالت حذف */ .cart-item.removing  {
     opacity:  0;
     transform:  scale(0.9) translateX(50px);
     transition:  all 0.3s ease-out;
 }
 /* --- ساختار اصلی آیتم --- */ .cart-item__content  {
     display:  grid;
     grid-template-columns:  70px 1fr auto;
     gap:  12px;
     align-items:  start;
 }
 /* ============================================ 🖼️ IMAGE SECTION ============================================ */ .cart-item__image-wrapper  {
     position:  relative;
     width:  70px;
     height:  70px;
     border-radius:  10px;
     overflow:  hidden;
     background:  linear-gradient(135deg,  #fef2f2 0%,  #fee2e2 100%);
     flex-shrink:  0;
 }
 .cart-item__image  {
     width:  100%;
     height:  100%;
     object-fit:  cover;
     opacity:  0;
     transition:  opacity 0.3s ease;
 }
 .cart-item__image.loaded  {
     opacity:  1;
 }
 /* Placeholder تصویر */ .placeholder-image  {
     width:  100%;
     height:  100%;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     font-size:  32px;
     color:  #dc2626;
     background:  linear-gradient(135deg,  #fef2f2 0%,  #fee2e2 100%);
 }
 /* ============================================ 📝 DETAILS SECTION ============================================ */ .cart-item__details  {
     display:  flex;
     flex-direction:  column;
     gap:  8px;
     min-width:  0;
     /* برای جلوگیری از overflow */ }
 .cart-item__title  {
     font-size:  15px;
     font-weight:  600;
     color:  #1f2937;
     margin:  0;
     line-height:  1.4;
     overflow:  hidden;
     text-overflow:  ellipsis;
     display:  -webkit-box;
     -webkit-line-clamp:  2;
     -webkit-box-orient:  vertical;
 }
 .cart-item__price  {
     font-size:  13px;
     color:  #6b7280;
     font-weight:  500;
     margin:  0;
 }
 /* ============================================ 🎁 ADDONS SECTION ============================================ */ .cart-item__addons  {
     display:  flex;
     flex-direction:  column;
     gap:  6px;
     margin-top:  4px;
     padding-top:  8px;
     border-top:  1px dashed #e5e7eb;
 }
 .addon-tag  {
     display:  inline-flex;
     align-items:  center;
     justify-content:  space-between;
     gap:  8px;
     background:  linear-gradient(135deg,  #ecfdf5 0%,  #d1fae5 100%);
     padding:  6px 10px;
     border-radius:  8px;
     font-size:  12px;
     color:  #059669;
     font-weight:  500;
     border:  1px solid #a7f3d0;
     transition:  all 0.2s;
 }
 .addon-tag:hover  {
     background:  linear-gradient(135deg,  #d1fae5 0%,  #a7f3d0 100%);
     border-color:  #6ee7b7;
     transform:  translateX(-2px);
 }
 .addon-tag__content  {
     display:  flex;
     align-items:  center;
     gap:  6px;
     flex:  1;
     min-width:  0;
 }
 .addon-tag__icon  {
     font-size:  14px;
     color:  #059669;
     flex-shrink:  0;
 }
 .addon-tag__name  {
     overflow:  hidden;
     text-overflow:  ellipsis;
     white-space:  nowrap;
 }
 .addon-tag__price  {
     font-weight:  600;
     color:  #047857;
     white-space:  nowrap;
 }
 .addon-tag__remove  {
     background:  transparent;
     border:  none;
     cursor:  pointer;
     padding:  4px;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     border-radius:  4px;
     color:  #ef4444;
     font-size:  14px;
     transition:  all 0.2s;
     flex-shrink:  0;
 }
 .addon-tag__remove:hover  {
     background:  rgba(239,  68,  68,  0.1);
     transform:  scale(1.1);
 }
 .addon-tag__remove:active  {
     transform:  scale(0.95);
 }
 /* ============================================ 🔢 QUANTITY CONTROLS ============================================ */ .quantity-controls  {
     display:  flex;
     align-items:  center;
     gap:  8px;
     background:  #f9fafb;
     padding:  6px 8px;
     border-radius:  10px;
     border:  1px solid #e5e7eb;
     width:  fit-content;
     margin-top:  4px;
 }
 .quantity-controls__btn  {
     width:  32px;
     height:  32px;
     display:  flex;
     align-items:  center;
     justify-content:  center;
     border:  none;
     border-radius:  8px;
     cursor:  pointer;
     font-size:  18px;
     transition:  all 0.2s cubic-bezier(0.4,  0,  0.2,  1);
     background:  #ffffff;
     box-shadow:  0 1px 3px rgba(0,  0,  0,  0.1);
 }
 .quantity-controls__btn--decrease,  .quantity-controls__btn--increase  {
     color:  #dc2626;
     border:  1.5px solid #fecaca;
 }
 .quantity-controls__btn--decrease:hover,  .quantity-controls__btn--increase:hover  {
     background:  #dc2626;
     color:  #ffffff;
     border-color:  #dc2626;
     transform:  scale(1.05);
     box-shadow:  0 4px 12px rgba(220,  38,  38,  0.25);
 }
 .quantity-controls__btn--decrease:active,  .quantity-controls__btn--increase:active  {
     transform:  scale(0.95);
 }
 .quantity-controls__value  {
     min-width:  32px;
     text-align:  center;
     font-weight:  700;
     font-size:  15px;
     color:  #1f2937;
     transition:  all 0.2s;
 }
 .quantity-controls__value.changing  {
     animation:  pulse 0.3s ease;
 }
 @keyframes pulse  {
     0%,  100%  {
     transform:  scale(1);
 }
 50%  {
     transform:  scale(1.15);
 }
 }
 .quantity-controls__btn--remove  {
     color:  #ef4444;
     background:  #fef2f2;
     border:  1.5px solid #fecaca;
     margin-right:  4px;
 }
 .quantity-controls__btn--remove:hover  {
     background:  #ef4444;
     color:  #ffffff;
     border-color:  #ef4444;
     transform:  scale(1.05);
     box-shadow:  0 4px 12px rgba(239,  68,  68,  0.25);
 }
 /* ============================================ 💰 TOTAL PRICE SECTION ============================================ */ .cart-item__total  {
     display:  flex;
     flex-direction:  column;
     align-items:  flex-end;
     justify-content:  flex-start;
     gap:  4px;
 }
 .cart-item__total-price  {
     font-size:  16px;
     font-weight:  700;
     color:  #dc2626;
     margin:  0;
     white-space:  nowrap;
     direction:  rtl;
 }
 .currency  {
     font-size:  12px;
     font-weight:  500;
     color:  #6b7280;
     margin-right:  4px;
 }
 /* ============================================ 📱 RESPONSIVE ============================================ */ @media (max-width: 480px)  {
     .cart-item__content  {
     grid-template-columns:  60px 1fr;
     gap:  10px;
 }
 .cart-item__image-wrapper  {
     width:  60px;
     height:  60px;
 }
 .cart-item__title  {
     font-size:  14px;
 }
 .cart-item__price  {
     font-size:  12px;
 }
 .cart-item__total  {
     grid-column:  1 / -1;
     flex-direction:  row;
     justify-content:  space-between;
     align-items:  center;
     margin-top:  8px;
     padding-top:  8px;
     border-top:  1px solid #f3f4f6;
 }
 .quantity-controls  {
     width:  100%;
     justify-content:  space-between;
 }
 .quantity-controls__btn  {
     width:  28px;
     height:  28px;
     font-size:  16px;
 }
 .addon-tag  {
     font-size:  11px;
     padding:  5px 8px;
 }
 }
 /* ============================================ ✨ EMPTY STATE ============================================ */ .empty-cart-message  {
     display:  flex;
     flex-direction:  column;
     align-items:  center;
     justify-content:  center;
     padding:  60px 20px;
     text-align:  center;
     animation:  fadeIn 0.5s ease;
 }
 @keyframes fadeIn  {
     from  {
     opacity:  0;
 }
 to  {
     opacity:  1;
 }
 }
 .empty-cart-message iconify-icon  {
     font-size:  64px;
     color:  #d1d5db;
     margin-bottom:  16px;
     animation:  float 3s ease-in-out infinite;
 }
 @keyframes float  {
     0%,  100%  {
     transform:  translateY(0px);
 }
 50%  {
     transform:  translateY(-10px);
 }
 }
 .empty-cart-message p  {
     font-size:  16px;
     font-weight:  500;
     color:  #9ca3af;
     margin:  0;
 }
 /* ============================================== */ /* === استایل‌های آیتم‌های سبد خرید ==== */ /* ============================================== * خرید --- */ .cart-item  {
     display:  flex;
     justify-content:  space-between;
     align-items:  center;
     background-color:  var(--cart-item-bg);
     padding:  1rem;
     border-radius:  1rem;
     border:  1px solid var(--cart-item-border-color);
     border-radius:  var(--cart-item-radius);
     box-shadow:  var(--cart-item-shadow);
     gap:  1rem;
     margin-bottom:  var(--cart-item-spacing);
     transition:  box-shadow 0.2s ease-in-out;
 }
 .cart-item:hover  {
     box-shadow:  0 4px 12px rgba(0,  0,  0,  0.08);
 }
 /* --- بخش محتوای اصلی (تصویر و جزئیات) --- */ .cart-item-content  {
     display:  flex;
     align-items:  center;
     gap:  1rem;
     /* این بخش رشد می‌کند تا کنترل‌های تعداد را به انتها هل دهد */ flex-grow:  1;
     /* برای جلوگیری از بهم ریختگی در صفحه های کوچک */ min-width:  0;
 }
 /* --- استایل تصویر محصول --- */ .cart-item-image  {
     width:  80px;
     height:  80px;
     flex-shrink:  0;
     /* جلوگیری از کوچک شدن تصویر */ border-radius:  var(--cart-image-radius);
     overflow:  hidden;
     background-color:  var(--cart-placeholder-bg);
 }
 .cart-item-image img  {
     width:  100%;
     height:  100%;
     object-fit:  cover;
     /* تصویر را بدون تغییر نسبت، کادر را پر می‌کند */ }
 /* --- استایل تصویر جایگزین (Placeholder) --- */ .placeholder-image  {
     display:  flex;
     justify-content:  center;
     align-items:  center;
 }
 /* --- بخش جزئیات محصول (نام، افزودنی‌ها، قیمت) --- */ .cart-item-details  {
     display:  flex;
     flex-direction:  column;
     gap:  0.5rem;
     min-width:  0;
     /* برای کارکرد صحیح text-overflow */ }
 /* --- نام محصول --- */ .cart-item-name  {
     font-size:  1rem;
     font-weight:  600;
     color:  var(--cart-text-primary);
     margin:  0;
     white-space:  nowrap;
     overflow:  hidden;
     text-overflow:  ellipsis;
     /* نمایش ... برای نام‌های طولانی */ }
 /* --- افزودنی‌ها (Addons) --- */ /* این یک استایل پیش‌فرض است، چون ساختار HTML آن موجود نبود */ .cart-item-addons  {
     font-size:  0.875rem;
     color:  var(--cart-text-secondary);
     list-style-type:  none;
     padding:  0;
     margin:  0;
 }
 .cart-item-addons li  {
     padding-right:  10px;
     position:  relative;
 }
 .cart-item-addons li::before  {
     content:  '•';
     position:  absolute;
     right:  0;
     top:  0;
     color:  var(--cart-accent-color);
 }
 /* --- اطلاعات قیمت --- */ .cart-item-price-info  {
     display:  flex;
     flex-direction:  column;
     align-items:  flex-start;
     gap:  0.25rem;
     margin-top:  auto;
     /* قیمت را به پایین‌ترین بخش هل می‌دهد */ }
 .price-breakdown  {
     display:  flex;
     gap:  0.75rem;
     font-size:  0.8rem;
     color:  var(--cart-text-secondary);
 }
 .item-total-price  {
     font-size:  1.1rem;
     font-weight:  bold;
     color:  var(--cart-text-primary);
 }
 /* --- کنترل‌های تعداد (Quantity Controls) --- */ /* فرض شده ساختاری مشابه زیر دارد: <div class="quantity-controls"><button class="quantity-btn plus">+</button><span class="quantity">1</span><button class="quantity-btn minus">-</button></div> */ .quantity-controls  {
     display:  flex;
     align-items:  center;
     background-color:  #f9fafb;
     border-radius:  20px;
     padding:  0.25rem;
     flex-shrink:  0;
     /* جلوگیری از فشرده شدن */ }
 .quantity-btn  {
     width:  32px;
     height:  32px;
     border:  none;
     background-color:  transparent;
     color:  var(--cart-accent-color);
     font-size:  1.5rem;
     font-weight:  bold;
     display:  flex;
     justify-content:  center;
     align-items:  center;
     cursor:  pointer;
     border-radius:  50%;
     transition:  background-color 0.2s;
     padding:  0;
     line-height:  1;
 }
 .quantity-btn:hover  {
     background-color:  #fee2e2;
 }
 .quantity  {
     font-size:  1rem;
     font-weight:  600;
     color:  var(--cart-text-primary);
     min-width:  30px;
     text-align:  center;
 }
 /* ============================================== */ /* === استایل دکمه حذف آیتم ==== */ /* ============================================== */ .remove-item-btn  {
     /* چیدمان و مرکزچین کردن آیکون */ display:  inline-flex;
     align-items:  center;
     justify-content:  center;
     /* اندازه دکمه */ width:  36px;
     height:  36px;
     padding:  0;
     margin-top:  2rem;
     margin-right:  5rem;
     /* ظاهری */ background-color:  #fee2e2;
     /* قرمز خیلی روشن (خلفی) */ color:  #dc2626;
     /* رنگ آیکون (قرمز اصلی) */ border:  1px solid transparent;
     border-radius:  8px;
     /* گوشه‌های کمی گرد */ /* رفتار موس */ cursor:  pointer;
     transition:  all 0.2s cubic-bezier(0.4,  0,  0.2,  1);
     /* اگر دکمه داخل یک فلکس‌باکس باشد، از له شدن آن جلوگیری می‌کند */ flex-shrink:  0;
 }
 /* --- افکت هاور (وقتی موس روی دکمه می‌رود) --- */ .remove-item-btn:hover  {
     background-color:  #dc2626;
     /* پس‌زمینه قرمز می‌شود */ color:  #ffffff;
     /* آیکون سفید می‌شود */ box-shadow:  0 4px 12px rgba(220,  38,  38,  0.2);
     /* سایه قرمز نرم */ transform:  translateY(-1px);
     /* حرکت جزئی به بالا */ }
 /* --- افکت کلیک (وقتی دکمه فشرده می‌شود) --- */ .remove-item-btn: active  {
     transform:  translateY(0) scale(0.95);
     /* کمی کوچک می‌شود */ box-shadow:  none;
 }
 /* --- تنظیم اندازه آیکون داخل دکمه --- */ /* این بخش تضمین می‌کند آیکون‌های Iconify یا SVG به درستی وسط‌چین شوند */ .remove-item-btn iconify-icon,  .remove-item-btn svg  {
     font-size:  1.25rem;
     /* اندازه آیکون:  20px */ pointer-events: none;
     /* جلوگیری از تداخل موس با آیکون */ }
 /* گرید‌بندی میزها با سایز کوچک‌تر */ .tables-grid  {
     display:  grid;
     grid-template-columns:  repeat(auto-fill,  minmax(70px,  1fr));
     /* سایز کوچک ۷۰ پیکسل */ gap:  10px;
     margin-top:  15px;
     max-height:  250px;
     /* اسکرول خوردن اگر تعداد زیاد بود */ overflow-y:  auto;
     padding:  5px;
 }
 /* طراحی کارت میز */ .table-card  {
     background:  #fff;
     border:  2px solid #e0e0e0;
     border-radius:  12px;
     padding:  8px 5px;
     text-align:  center;
     cursor:  pointer;
     transition:  all 0.2s ease;
     position:  relative;
     overflow:  hidden;
 }
 /* آیکون و متن داخل کارت */ .table-card .table-icon iconify-icon  {
     font-size:  1.8rem;
     /* کوچک کردن آیکون */ color:  #95a5a6;
     transition:  color 0.2s;
 }
 .table-card small  {
     display:  none;
     /* مخفی کردن متن "شماره میز" برای سادگی */ }
 .table-card .table-number  {
     font-size:  1rem;
     font-weight:  800;
     color:  #555;
     margin-top:  2px;
 }
 /* حالت انتخاب شده (Selected) */ .table-card.selected  {
     border-color:  var(--espinas-gold);
     /* رنگ طلایی یا برند شما */ background-color:  #fffbf0;
     transform:  translateY(-2px);
     box-shadow:  0 4px 8px rgba(0,  0,  0,  0.1);
 }
 .table-card.selected .table-icon iconify-icon  {
     color:  var(--espinas-gold);
 }
 .table-card.selected::after  {
     content:  "✔";
     position:  absolute;
     top:  0;
     right:  0;
     background:  var(--espinas-gold);
     color:  white;
     font-size:  10px;
     padding:  0 4px;
     border-bottom-left-radius:  8px;
 }
 /* حالت اشغال شده (Occupied) */ .table-card.occupied  {
     opacity:  0.5;
     background-color:  #f8f9fa;
     border-color:  #ddd;
     cursor:  not-allowed;
     filter:  grayscale(100%);
 }
 .table-card:hover:not(.occupied):not(.selected)  {
     border-color:  #bbb;
     background-color:  #f9f9f9;
 }
 /* انیمیشن لرزش برای نمایش خطا */ @keyframes shakeError  {
     0%,  100%  {
     transform:  translateX(0);
 }
 25%  {
     transform:  translateX(-5px);
 }
 50%  {
     transform:  translateX(5px);
 }
 75%  {
     transform:  translateX(-5px);
 }
 }
 .shake-input  {
     animation:  shakeError 0.4s ease-in-out;
     border-color:  #dc3545 !important;
 }