*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--primary: #d63031;--primary-hover: #b71c1c;--primary-light: #fff5f5;--primary-50: #fef2f2;--primary-100: #fee2e2;--primary-200: #fecaca;--primary-glow: rgba(214, 48, 49, .15);--primary-gradient: linear-gradient(135deg, #d63031 0%, #e17055 50%, #fdcb6e 100%);--primary-gradient-vibrant: linear-gradient(135deg, #d63031 0%, #ff6348 100%);--accent: #fdcb6e;--accent-dark: #f0932b;--success: #00b894;--success-light: #e6fcf5;--success-dark: #00856a;--error: #e74c3c;--error-light: #fef5f4;--warning: #fdcb6e;--info: #74b9ff;--white: #ffffff;--bg: #f8f9fb;--bg-card: #ffffff;--bg-muted: #f1f3f5;--bg-elevated: #ffffff;--bg-dark: #1a1a2e;--bg-dark-lighter: #16213e;--bg-overlay: rgba(0, 0, 0, .45);--text: #2d3436;--text-secondary: #636e72;--text-muted: #b2bec3;--text-white: #ffffff;--text-on-primary: #ffffff;--border: #e9ecef;--border-light: #f1f3f5;--border-focus: var(--primary);--divider: #f1f3f5;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .04);--shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, .1), 0 10px 15px -5px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .15);--shadow-glow: 0 4px 20px rgba(214, 48, 49, .25);--shadow-glow-lg: 0 8px 32px rgba(214, 48, 49, .3);--shadow-card: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--shadow-card-hover: 0 12px 28px rgba(0, 0, 0, .1), 0 4px 10px rgba(0, 0, 0, .04);--shadow-bottom-bar: 0 -8px 30px rgba(0, 0, 0, .08);--r-xs: 6px;--r-sm: 8px;--r: 12px;--r-lg: 16px;--r-xl: 20px;--r-2xl: 24px;--r-full: 9999px;--max-w: 1100px;--header-h: 64px;--bottom-bar-h: 72px;--content-px: 1.25rem;--font: "Cairo", "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: "Cairo", "Tajawal", sans-serif;--ease: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--dur: .2s;--dur-fast: .15s;--dur-slow: .35s}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font);background:var(--bg);color:var(--text);direction:rtl;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;overflow-x:hidden}img{max-width:100%;display:block}button,input,select,textarea{font-family:var(--font)}.app-container{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}.header{background:var(--bg-dark);color:var(--text-white);padding:0 var(--content-px);height:var(--header-h);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}.header-right{display:flex;align-items:center;gap:.75rem}.header-title{font-size:1.15rem;font-weight:700;display:flex;align-items:center;gap:.5rem;letter-spacing:-.01em}.header-title .logo-icon{color:var(--accent);filter:drop-shadow(0 0 6px rgba(253,203,110,.4))}.back-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.1);color:var(--text-white);cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;transition:all var(--dur) var(--ease)}.back-btn:hover{background:#ffffff26;transform:scale(1.05)}.header-cart-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:var(--text-white);padding:.45rem 1.1rem;border-radius:var(--r-full);cursor:pointer;display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;transition:all var(--dur) var(--ease);position:relative}.header-cart-btn:hover{background:#ffffff29;transform:translateY(-1px)}.cart-badge{background:var(--primary);color:var(--text-white);font-size:.65rem;font-weight:800;min-width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;top:-7px;left:-7px;box-shadow:0 2px 8px #d6303180;animation:badgePop .35s var(--ease-spring);border:2px solid var(--bg-dark)}@keyframes badgePop{0%{transform:scale(0)}60%{transform:scale(1.2)}to{transform:scale(1)}}.hero-banner{background:var(--primary-gradient);color:var(--text-white);padding:3rem 2rem 2.5rem;text-align:center;position:relative;overflow:hidden}.hero-banner:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}.hero-banner:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:40px;background:var(--bg);border-radius:var(--r-2xl) var(--r-2xl) 0 0}.hero-title{font-family:var(--font-display);font-size:1.75rem;font-weight:900;margin-bottom:.4rem;position:relative;text-shadow:0 2px 8px rgba(0,0,0,.15);letter-spacing:-.01em}.hero-subtitle{font-size:.95rem;font-weight:400;opacity:.92;position:relative;letter-spacing:.01em}.hero-badge{display:inline-flex;align-items:center;gap:.35rem;background:#ffffff2e;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:.35rem 1rem;border-radius:var(--r-full);font-size:.78rem;font-weight:600;margin-top:.85rem;position:relative;border:1px solid rgba(255,255,255,.2)}.main-content{flex:1;max-width:var(--max-w);width:100%;margin:0 auto;padding:1.5rem var(--content-px);animation:fadeInUp .4s var(--ease-out)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.search-bar{position:relative;margin-bottom:1rem}.search-bar input{width:100%;padding:.85rem 1.15rem .85rem 3rem;border:2px solid var(--border);border-radius:var(--r-xl);font-family:var(--font);font-size:.92rem;direction:rtl;outline:none;background:var(--bg-card);color:var(--text);transition:all var(--dur) var(--ease);box-shadow:var(--shadow-xs)}.search-bar input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow),var(--shadow-md);background:var(--white)}.search-bar input::placeholder{color:var(--text-muted);font-weight:400}.search-bar .search-icon{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;transition:color var(--dur) var(--ease)}.search-bar input:focus~.search-icon{color:var(--primary)}.category-nav{display:flex;gap:.5rem;overflow-x:auto;padding:.35rem 0 1.25rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to left,transparent 0,black 1.5rem,black calc(100% - 1.5rem),transparent 100%);-webkit-mask-image:linear-gradient(to left,transparent 0,black 1.5rem,black calc(100% - 1.5rem),transparent 100%)}.category-nav::-webkit-scrollbar{display:none}.category-chip{padding:.5rem 1.35rem;border:1.5px solid var(--border);border-radius:var(--r-full);background:var(--bg-card);color:var(--text-secondary);font-family:var(--font);font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all var(--dur) var(--ease);flex-shrink:0;-webkit-user-select:none;user-select:none}.category-chip:hover:not(.active){border-color:var(--primary);color:var(--primary);background:var(--primary-light)}.category-chip.active{background:var(--bg-dark);color:var(--text-white);border-color:var(--bg-dark);box-shadow:var(--shadow-sm)}.menu-section{margin-bottom:1.75rem}.menu-section-title{font-family:var(--font-display);font-size:1.15rem;font-weight:800;color:var(--text);margin-bottom:.85rem;padding-right:1rem;position:relative;display:flex;align-items:center;gap:.5rem}.menu-section-title:before{content:"";position:absolute;right:0;top:4px;bottom:4px;width:4px;background:var(--primary-gradient-vibrant);border-radius:4px}.subsection-title{font-size:.95rem;font-weight:700;color:var(--text-secondary);margin-bottom:.65rem;padding-right:.5rem}.subcategory-title{font-size:.85rem;font-weight:600;color:var(--text-muted);margin-bottom:.5rem;padding-right:.5rem}.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.65rem}.menu-item-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r);padding:.85rem 1rem;display:flex;align-items:center;gap:.85rem;cursor:pointer;transition:all var(--dur-slow) var(--ease);position:relative;overflow:hidden}.menu-item-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--primary-gradient);opacity:0;transition:opacity var(--dur-slow) var(--ease);pointer-events:none}.menu-item-card:hover{border-color:transparent;box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}.menu-item-card:hover:before{opacity:.03}.menu-item-card:active{transform:translateY(-1px);box-shadow:var(--shadow-md)}.menu-item-card.in-cart{border-color:var(--primary);background:var(--primary-50);box-shadow:0 0 0 1px var(--primary),var(--shadow-sm)}.menu-item-card.in-cart:before{opacity:0}.menu-item-image{width:68px;height:68px;border-radius:var(--r);object-fit:cover;flex-shrink:0;box-shadow:var(--shadow-sm)}.menu-item-placeholder{width:68px;height:68px;border-radius:var(--r);background:linear-gradient(135deg,#ffecd2,#fcb69f);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.6rem}.menu-item-info{flex:1;min-width:0}.menu-item-name{font-size:.92rem;font-weight:700;color:var(--text);margin-bottom:.2rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-item-price{font-size:1rem;font-weight:800;color:var(--primary);letter-spacing:-.02em}.menu-item-add-btn{background:var(--primary);color:var(--text-white);border:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--dur) var(--ease);flex-shrink:0;box-shadow:var(--shadow-glow)}.menu-item-add-btn:hover{background:var(--primary-hover);transform:scale(1.1) rotate(90deg);box-shadow:var(--shadow-glow-lg)}.menu-item-add-btn:active{transform:scale(.95)}.quantity-controls{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.qty-btn{background:var(--primary);color:var(--text-white);border:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;transition:all var(--dur-fast) var(--ease);box-shadow:var(--shadow-sm)}.qty-btn:hover{background:var(--primary-hover);transform:scale(1.1)}.qty-btn:active{transform:scale(.92)}.qty-btn.remove{background:var(--error)}.qty-btn.remove:hover{background:#c0392b}.qty-value{font-size:1rem;font-weight:800;min-width:26px;text-align:center;color:var(--primary)}.cart-container{padding:.5rem 0;max-width:680px;margin:0 auto}.cart-empty{text-align:center;padding:4rem 1.5rem;animation:fadeInUp .5s var(--ease-out)}.cart-empty-icon{font-size:4rem;margin-bottom:1.25rem;opacity:.2;filter:grayscale(.5)}.cart-empty h3{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--text);margin-bottom:.4rem}.cart-empty p{color:var(--text-muted);font-size:.92rem}.cart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.15rem}.cart-header h2{font-family:var(--font-display);font-size:1.1rem;font-weight:800;display:flex;align-items:center;gap:.5rem}.cart-item{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1rem;margin-bottom:.65rem;display:flex;align-items:flex-start;gap:.85rem;transition:all var(--dur) var(--ease);box-shadow:var(--shadow-card);animation:slideInRight .3s var(--ease-out)}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.cart-item:hover{box-shadow:var(--shadow-md);border-color:var(--border-light)}.cart-item-info{flex:1}.cart-item-name{font-weight:700;font-size:.92rem;color:var(--text);margin-bottom:.15rem}.cart-item-price{color:var(--primary);font-weight:800;font-size:.88rem}.cart-item-total{color:var(--text-muted);font-size:.8rem;margin-top:.1rem}.cart-item-notes{margin-top:.55rem}.cart-item-notes input{width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.42rem .75rem;font-family:var(--font);font-size:.82rem;direction:rtl;outline:none;background:var(--bg-muted);color:var(--text);transition:all var(--dur) var(--ease)}.cart-item-notes input:focus{border-color:var(--primary);background:var(--white);box-shadow:0 0 0 3px var(--primary-glow)}.cart-item-notes input::placeholder{color:var(--text-muted)}.cart-summary{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;margin-top:1rem;box-shadow:var(--shadow-card)}.cart-summary-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;font-size:.92rem}.cart-summary-row.total{border-top:2px solid var(--primary);margin-top:.55rem;padding-top:.7rem;font-size:1.2rem;font-weight:800;color:var(--primary)}.cart-summary-label{color:var(--text-secondary);font-weight:500}.order-type-bar{display:flex;gap:.75rem;justify-content:center}.order-type-btn{flex:1;padding:1rem .5rem;border:2px solid var(--border);border-radius:var(--r-lg);background:var(--bg-card);color:var(--text);font-family:var(--font);font-size:.95rem;font-weight:700;cursor:pointer;transition:all var(--dur) var(--ease);display:flex;flex-direction:column;align-items:center;gap:.35rem;box-shadow:var(--shadow-xs);position:relative;overflow:hidden}.order-type-btn:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:0;height:3px;background:var(--primary);border-radius:0 0 2px 2px;transition:width var(--dur) var(--ease)}.order-type-btn:hover:not(.active){border-color:var(--primary-200);background:var(--primary-50);color:var(--primary)}.order-type-btn:hover:not(.active):before{width:50%}.order-type-btn.active{border-color:var(--primary);background:var(--primary);color:var(--text-white);box-shadow:var(--shadow-glow)}.order-type-btn.active:before{width:0}.order-type-btn .type-emoji{font-size:1.65rem;line-height:1}.checkout-container{max-width:640px;margin:0 auto;padding:.5rem 0 2rem}.checkout-section{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.35rem;margin-bottom:.85rem;box-shadow:var(--shadow-card);animation:fadeInUp .35s var(--ease-out) backwards}.checkout-section:nth-child(1){animation-delay:.05s}.checkout-section:nth-child(2){animation-delay:.1s}.checkout-section:nth-child(3){animation-delay:.15s}.checkout-section:nth-child(4){animation-delay:.2s}.checkout-section:nth-child(5){animation-delay:.25s}.checkout-section-title{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text);margin-bottom:1rem;display:flex;align-items:center;gap:.55rem;padding-bottom:.7rem;border-bottom:1px solid var(--divider)}.checkout-section-title svg{color:var(--primary)}.form-group{margin-bottom:1rem}.form-label{display:block;font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:.35rem}.form-label .required{color:var(--error);margin-right:.15rem}.form-input,.form-select{width:100%;padding:.72rem .95rem;border:2px solid var(--border);border-radius:var(--r-sm);font-family:var(--font);font-size:.92rem;direction:rtl;background:var(--white);color:var(--text);outline:none;transition:all var(--dur) var(--ease)}.form-input:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow)}.form-input.error,.form-select.error{border-color:var(--error);box-shadow:0 0 0 3px #e74c3c1f;animation:shake .4s var(--ease)}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.form-error{color:var(--error);font-size:.76rem;font-weight:500;margin-top:.25rem;display:flex;align-items:center;gap:.25rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.zone-selector{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.55rem}.zone-option{border:2px solid var(--border);border-radius:var(--r);padding:.85rem .7rem;cursor:pointer;text-align:center;transition:all var(--dur) var(--ease);background:var(--white);position:relative;overflow:hidden}.zone-option:after{content:"✓";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;font-size:.65rem;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);transition:all var(--dur) var(--ease-spring)}.zone-option:hover{border-color:var(--primary-200);background:var(--primary-50)}.zone-option.selected{border-color:var(--primary);background:var(--primary-50);box-shadow:0 0 0 2px var(--primary-glow)}.zone-option.selected:after{opacity:1;transform:scale(1)}.zone-option.selected .zone-name{color:var(--primary)}.zone-name{font-weight:700;font-size:.88rem;color:var(--text);margin-bottom:.15rem}.zone-fee{font-size:.82rem;color:var(--primary);font-weight:800}.checkout-item-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--divider);font-size:.88rem}.checkout-item-row:last-child{border-bottom:none}.checkout-item-name{color:var(--text);font-weight:500}.checkout-item-name .item-qty{color:var(--text-muted);font-size:.82rem;margin-right:.3rem}.checkout-item-price{font-weight:700;color:var(--text);white-space:nowrap}.payment-option{border:2px solid var(--border);border-radius:var(--r);padding:1rem;cursor:pointer;transition:all var(--dur) var(--ease);background:var(--white);display:flex;align-items:center;gap:.75rem;position:relative}.payment-option:after{content:"";position:absolute;top:50%;left:1rem;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:2px solid var(--border);transition:all var(--dur) var(--ease)}.payment-option:hover{border-color:var(--primary-200);background:var(--primary-50)}.payment-option.selected{border-color:var(--primary);background:var(--primary-50);box-shadow:0 0 0 2px var(--primary-glow)}.payment-option.selected:after{border-color:var(--primary);background:var(--primary);box-shadow:inset 0 0 0 3px var(--white)}.payment-icon{font-size:1.65rem}.payment-title{font-weight:700;font-size:.92rem;color:var(--text)}.payment-desc{font-size:.78rem;color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.78rem 1.35rem;border:none;border-radius:var(--r);font-family:var(--font);font-size:.95rem;font-weight:700;cursor:pointer;transition:all var(--dur) var(--ease);width:100%;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(rgba(255,255,255,.1),transparent);opacity:0;transition:opacity var(--dur) var(--ease)}.btn:hover:after{opacity:1}.btn:active:not(:disabled){transform:scale(.97)}.btn-primary{background:var(--primary);color:var(--text-white);box-shadow:var(--shadow-glow)}.btn-primary:hover:not(:disabled){background:var(--primary-hover);box-shadow:var(--shadow-glow-lg);transform:translateY(-1px)}.btn-secondary{background:var(--bg-muted);color:var(--text-secondary);border:1.5px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--border);color:var(--text)}.btn-success{background:var(--success);color:var(--text-white);box-shadow:0 4px 16px #00b8944d}.btn-success:hover:not(:disabled){background:var(--success-dark);box-shadow:0 6px 24px #00b89459;transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn-lg{padding:1rem 2rem;font-size:1.05rem;font-weight:800;border-radius:var(--r);letter-spacing:-.01em}.bottom-bar{position:fixed;bottom:0;left:0;right:0;background:var(--bg-card);padding:.85rem 1.35rem;box-shadow:var(--shadow-bottom-bar);border-top:1px solid var(--border);z-index:90;display:flex;align-items:center;gap:1rem;animation:slideUp .4s var(--ease-spring)}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.bottom-bar-info{flex:1}.bottom-bar-count{font-size:.76rem;color:var(--text-muted);font-weight:500}.bottom-bar-total{font-size:1.15rem;font-weight:800;color:var(--primary);letter-spacing:-.02em}.confirmation{text-align:center;padding:2.5rem 1rem;max-width:500px;margin:0 auto;animation:fadeInUp .5s var(--ease-out)}.confirmation-icon{width:88px;height:88px;border-radius:50%;background:var(--success-light);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;color:var(--success);box-shadow:0 0 0 8px #00b89414,0 0 0 16px #00b8940a;animation:celebrateIcon .6s var(--ease-spring) .2s backwards}@keyframes celebrateIcon{0%{transform:scale(0) rotate(-45deg);opacity:0}60%{transform:scale(1.15) rotate(5deg)}to{transform:scale(1) rotate(0);opacity:1}}.confirmation h2{font-family:var(--font-display);font-size:1.5rem;font-weight:900;color:var(--success);margin-bottom:.4rem}.confirmation p{color:var(--text-secondary);font-size:.95rem;margin-bottom:1.5rem}.order-number{font-family:var(--font-display);font-size:1.4rem;font-weight:900;color:var(--primary);background:var(--primary-50);padding:.85rem 2rem;border-radius:var(--r);display:inline-block;margin-bottom:1.35rem;letter-spacing:2px;border:2px solid var(--primary-200);position:relative}.confirmation-details{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.35rem;margin-bottom:1.5rem;text-align:right;box-shadow:var(--shadow-card)}.confirmation-detail-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--divider)}.confirmation-detail-row:last-child{border-bottom:none}.confirmation-detail-row.grand-total{border-top:2px solid var(--primary);border-bottom:none;margin-top:.4rem;padding-top:.7rem}.confirmation-detail-row.grand-total .confirmation-detail-label,.confirmation-detail-row.grand-total .confirmation-detail-value{color:var(--primary);font-size:1.08rem;font-weight:800}.confirmation-detail-label{color:var(--text-secondary);font-size:.88rem;font-weight:500}.confirmation-detail-value{font-weight:700;font-size:.92rem;color:var(--text)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 1rem;color:var(--text-muted)}.spinner{width:42px;height:42px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:1.15rem}@keyframes spin{to{transform:rotate(360deg)}}.error-container{text-align:center;padding:4rem 1rem;animation:fadeInUp .4s var(--ease-out)}.error-container h2{font-size:3rem;margin-bottom:.75rem}.error-container p{color:var(--text-secondary);font-size:1rem;margin-bottom:1.5rem}.toast{position:fixed;bottom:5.5rem;left:50%;transform:translate(-50%);background:var(--bg-dark);color:var(--text-white);padding:.75rem 1.5rem;border-radius:var(--r-full);font-family:var(--font);font-size:.86rem;font-weight:600;z-index:200;animation:toastSlide .35s var(--ease-spring);box-shadow:var(--shadow-2xl);max-width:90%;text-align:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08)}@keyframes toastSlide{0%{transform:translate(-50%) translateY(20px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}@media(max-width:768px){.header{padding:0 1rem;height:58px}.header-title{font-size:1.05rem}.hero-banner{padding:2.25rem 1.25rem 2rem}.hero-title{font-size:1.45rem}.main-content{padding:1rem}.menu-grid,.form-row{grid-template-columns:1fr}.zone-selector{grid-template-columns:1fr 1fr}.checkout-container{padding:.25rem 0 2rem}}@media(max-width:480px){.zone-selector{grid-template-columns:1fr}.menu-item-card{padding:.7rem}.menu-item-image,.menu-item-placeholder{width:58px;height:58px}.bottom-bar{padding:.72rem 1rem}.hero-title{font-size:1.25rem}.hero-banner{padding:1.75rem 1rem 1.5rem}.hero-banner:after{height:28px}.cart-item{padding:.85rem}.category-nav{mask-image:none;-webkit-mask-image:none}}.has-bottom-bar{padding-bottom:calc(var(--bottom-bar-h) + 1.5rem)}::selection{background:var(--primary-200);color:var(--text)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}button:focus:not(:focus-visible),input:focus:not(:focus-visible){outline:none}.note-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f0f1e8c;display:flex;align-items:flex-end;justify-content:center;z-index:1000;padding:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:overlayFadeIn .25s ease}@media(min-width:600px){.note-modal-overlay{align-items:center;padding:1.5rem}}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.note-modal{background:var(--white);border-radius:var(--r-xl) var(--r-xl) 0 0;width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 -8px 40px #0000002e,0 0 0 1px #0000000a;animation:modalSlideUp .35s var(--ease-spring);overflow:hidden}@media(min-width:600px){.note-modal{border-radius:var(--r-xl);max-height:85vh;box-shadow:var(--shadow-2xl),0 0 0 1px #0000000a}}@keyframes modalSlideUp{0%{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}.note-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.15rem 1.35rem;background:linear-gradient(135deg,var(--bg-dark) 0%,var(--bg-dark-lighter) 100%);color:var(--text-white)}.note-modal-header h3{font-size:1.05rem;font-weight:700;color:var(--text-white);margin:0;display:flex;align-items:center;gap:.5rem;line-height:1.4}.note-modal-header h3 .modal-item-name{color:var(--accent);font-weight:800}.note-modal-close{background:#ffffff1f;border:1px solid rgba(255,255,255,.15);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fffc;transition:all .2s var(--ease);flex-shrink:0}.note-modal-close:hover{background:#ffffff38;color:var(--text-white);transform:rotate(90deg)}.note-modal-tabs{display:flex;border-bottom:2px solid var(--border);background:var(--bg);padding:0;flex-shrink:0}.note-tab{flex:1;position:relative;padding:.85rem 1rem;font-size:.92rem;font-weight:700;font-family:inherit;color:var(--text-muted);background:transparent;border:none;cursor:pointer;transition:all .2s var(--ease);display:flex;align-items:center;justify-content:center;gap:.4rem;-webkit-tap-highlight-color:transparent}.note-tab:hover{color:var(--text-secondary);background:#00000005}.note-tab:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:3px;border-radius:3px 3px 0 0;background:transparent;transition:all .25s var(--ease)}.note-tab.active.notes-active{color:#15803d}.note-tab.active.notes-active:after{background:#22c55e}.note-tab.active.additions-active{color:#b45309}.note-tab.active.additions-active:after{background:#f59e0b}.note-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;font-size:.68rem;font-weight:800;border-radius:50%;color:#fff;padding:0 4px;line-height:1}.note-tab-badge.free-badge{background:#22c55e}.note-tab-badge.paid-badge{background:#f59e0b}.note-modal-body{overflow-y:auto;padding:1.25rem;flex:1;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.note-section{margin-bottom:1.25rem}.note-section:last-child{margin-bottom:0}.note-section-title{font-size:.88rem;font-weight:800;margin:0 0 .65rem;padding:.45rem .85rem;border-radius:var(--r-full);display:inline-flex;align-items:center;gap:.4rem;letter-spacing:.01em}.note-section-title.notes-title{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803d;border:1px solid #86efac}.note-section-title.additions-title{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border:1px solid #fbbf24}.note-options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}@media(max-width:380px){.note-options-grid{grid-template-columns:1fr}}.note-option-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.8rem .6rem .7rem;border-radius:var(--r);border:2px solid var(--border);background:var(--white);cursor:pointer;transition:all .2s var(--ease);gap:.3rem;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.note-option-btn:hover{border-color:var(--text-muted);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.note-option-btn:active{transform:translateY(0)}.note-option-btn .check-indicator{position:absolute;top:-6px;left:-6px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;opacity:0;transform:scale(.5);transition:all .25s var(--ease-spring);color:#fff;font-weight:900}.note-option-btn.selected .check-indicator{opacity:1;transform:scale(1)}.note-option-btn.selected.note-free{border-color:#22c55e;background:linear-gradient(135deg,#f0fdf4,#dcfce7);box-shadow:0 2px 8px #22c55e26,inset 0 0 0 1px #22c55e1a}.note-option-btn.selected.note-free .check-indicator{background:#22c55e;box-shadow:0 2px 6px #22c55e59}.note-option-btn.selected.note-paid{border-color:var(--primary);background:linear-gradient(135deg,#fff7ed,#ffedd5);box-shadow:0 2px 8px #d630311f,inset 0 0 0 1px #d6303114}.note-option-btn.selected.note-paid .check-indicator{background:var(--primary);box-shadow:0 2px 6px #d6303159}.note-option-name{font-weight:700;font-size:.88rem;color:var(--text);text-align:center;line-height:1.35}.note-option-price{font-size:.75rem;font-weight:700;padding:.2rem .55rem;border-radius:var(--r-full);letter-spacing:.01em}.note-option-price.free{background:#dcfce7;color:#15803d}.note-option-price.paid{background:#fef3c7;color:#b45309}.note-additions-total{margin-top:.65rem;text-align:center;font-weight:700;font-size:.88rem;color:#b45309;background:linear-gradient(135deg,#fef3c7,#fde68a);padding:.55rem 1rem;border-radius:var(--r);border:1px solid #fbbf24;display:flex;align-items:center;justify-content:center;gap:.4rem}.note-textarea{width:100%;padding:.85rem;border:2px solid var(--border);border-radius:var(--r);font-size:.92rem;font-family:inherit;resize:none;background:var(--bg);color:var(--text);transition:border-color .2s var(--ease),box-shadow .2s var(--ease);line-height:1.5;min-height:80px}.note-textarea::placeholder{color:var(--text-muted)}.note-textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #d6303114;background:var(--white)}.note-modal-footer{display:flex;gap:.65rem;padding:1rem 1.25rem;border-top:1px solid var(--border);background:var(--bg)}.note-modal-footer .btn{flex:1;font-weight:700;font-size:.95rem;padding:.75rem 1rem;border-radius:var(--r)}.note-modal-footer .btn-primary{box-shadow:var(--shadow-glow)}.note-modal-footer .btn-secondary{background:var(--white);border:2px solid var(--border);color:var(--text-secondary)}.note-modal-footer .btn-secondary:hover{border-color:var(--text-muted);background:var(--bg-muted)}.cart-item-options-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}.option-tag{font-size:.7rem;font-weight:700;padding:.18rem .5rem;border-radius:var(--r-full);display:inline-flex;align-items:center;gap:.2rem;letter-spacing:.01em}.option-tag.free{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}.option-tag.paid{background:#fef3c7;color:#b45309;border:1px solid #fde68a}.cart-item-free-note{font-size:.78rem;color:var(--text-secondary);margin-top:.3rem;font-style:italic;display:flex;align-items:center;gap:.3rem}.cart-notes-btn{display:inline-flex;align-items:center;gap:.35rem;margin-top:.45rem;padding:.35rem .7rem;border-radius:var(--r-full);border:1.5px dashed var(--border);background:transparent;color:var(--text-muted);font-size:.76rem;font-weight:600;cursor:pointer;transition:all .2s var(--ease);font-family:inherit;-webkit-tap-highlight-color:transparent}.cart-notes-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-50);border-style:solid}.cart-notes-btn.has-notes{border-color:var(--primary);border-style:solid;background:var(--primary-50);color:var(--primary)}
