/* ============================================ 🎨 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; } } /* ============================================ 💰 PRICE DISPLAY - TABLE POSITION (Top Right) - ✅ هماهنگ با کرم ============================================ */ .price-display { 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, #8F2028, #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: #dc2626; /* اضافه کردن رنگ پیش‌فرض */ 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(--cauldo-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(--cauldo-gold); } .table-card.selected::after { content: "✔"; position: absolute; top: 0; right: 0; background: var(--cauldo-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; }