.food-order { position:fixed; inset:0; z-index:2400; display:none; padding:18px; background:rgba(15,31,64,.42); backdrop-filter:blur(10px); direction:rtl; }
.food-order.is-open { display:grid; place-items:center; }
.food-order__phone { width:min(460px,100%); max-height:min(840px,calc(100dvh - 36px)); overflow:hidden; border-radius:30px; color:#17254a; background:#f7faff; box-shadow:0 28px 70px rgba(14,35,76,.27); }
.food-order__header { position:relative; height:72px; display:grid; grid-template-columns:1fr; align-items:center; padding:0 68px; background:#fff; border-bottom:1px solid #edf1f8; }
.food-order__header h2 { margin:0; text-align:center; font-size:1rem; }
.food-order__icon-btn { width:42px; height:42px; border:1px solid #d7e4f7; border-radius:14px; color:#155fc9; background:linear-gradient(145deg,#f8fbff,#e7f0ff); box-shadow:0 6px 14px rgba(36,101,203,.12); font:900 1.55rem/1 Arial,sans-serif; cursor:pointer; }
.food-order__close { color:#687995; border-color:transparent; background:transparent; box-shadow:none; font-size:1.7rem; }
.food-order__header [data-food-back] { position:absolute; left:18px; top:16px; }.food-order__header [data-food-close] { position:absolute; right:18px; top:16px; }
.food-order__body { min-height:510px; max-height:calc(min(840px,100dvh - 36px) - 72px); overflow-y:auto; padding:18px; }
.food-screen { display:none; animation:food-rise .25s ease both; }.food-screen.is-active { display:block; }
.food-subtitle { margin:0 0 16px; color:#7b8aa3; font-size:.78rem; line-height:1.8; }.food-chips { display:flex; gap:8px; overflow:auto; padding-bottom:12px; }.food-chips button { flex:0 0 auto; border:1px solid #dfe8f7; border-radius:999px; padding:8px 13px; color:#5c6e8c; background:#fff; font:inherit; font-size:.73rem; }.food-chips button.is-active { color:#fff; border-color:#1769e8; background:#1769e8; }
.food-menu { display:grid; gap:11px; }.food-menu__item { display:grid; grid-template-columns:82px 1fr auto; gap:11px; align-items:center; padding:9px; border:1px solid #e4ebf7; border-radius:18px; background:#fff; }.food-menu__photo { height:68px; overflow:hidden; border-radius:13px; background:#fff5e2; }.food-menu__photo img,.food-hero img { width:100%; height:100%; display:block; object-fit:cover; }.food-menu__item b,.food-menu__item small { display:block; }.food-menu__item b { font-size:.86rem; }.food-menu__item small { margin-top:5px; color:#8390a8; font-size:.67rem; }.food-menu__item strong { color:#1769e8; font-size:.73rem; }.food-add { width:32px; height:32px; border:0; border-radius:50%; color:#fff; background:#1769e8; font-size:1.35rem; cursor:pointer; }.food-empty { padding:36px 15px; border:1px dashed #cedcf1; border-radius:18px; color:#8190a9; text-align:center; font-size:.78rem; background:#fff; }
.food-hero { height:180px; margin-bottom:16px; overflow:hidden; border-radius:23px; background:#fff5e2; }.food-detail h3 { margin:0; font-size:1.15rem; }.food-price { margin:9px 0; color:#1769e8; font-weight:900; }.food-detail p { color:#72819a; font-size:.76rem; line-height:1.9; }.food-options { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }.food-options button { border:1px solid #dce6f5; border-radius:11px; padding:8px 12px; color:#536783; background:#fff; font:inherit; font-size:.7rem; }.food-options button.is-active { color:#1769e8; border-color:#1769e8; background:#edf4ff; }
.food-summary { display:grid; gap:12px; padding:15px; border:1px solid #e0e9f7; border-radius:20px; background:#fff; }.food-summary__row { display:flex; align-items:center; justify-content:space-between; gap:10px; }.food-summary__row small { color:#7988a0; }.food-divider { height:1px; background:#edf1f7; }.food-total { color:#1769e8; font-weight:900; }
.food-choice { display:flex; gap:11px; align-items:center; margin:10px 0; padding:14px; border:1px solid #e1e9f6; border-radius:16px; background:#fff; cursor:pointer; }.food-choice.is-selected { border-color:#1769e8; background:#f1f6ff; }.food-choice input { accent-color:#1769e8; }.food-choice b,.food-choice small { display:block; }.food-choice small { margin-top:4px; color:#8290a6; font-size:.68rem; }
.food-select,.food-note { width:100%; box-sizing:border-box; margin-top:10px; border:1px solid #dce6f4; border-radius:13px; padding:12px; color:#334a70; background:#fff; font:inherit; }.food-note { min-height:72px; resize:vertical; }
.food-primary { width:100%; min-height:49px; margin-top:18px; border:0; border-radius:14px; color:#fff; background:linear-gradient(135deg,#267af7,#075cd9); box-shadow:0 12px 22px rgba(20,102,232,.23); font:inherit; font-size:.86rem; font-weight:900; cursor:pointer; }.food-secondary { width:100%; min-height:43px; margin-top:9px; border:0; border-radius:13px; color:#617493; background:#edf3fc; font:inherit; font-weight:800; cursor:pointer; }
.food-success { padding:40px 10px 12px; text-align:center; }.food-success__mark { width:96px; height:96px; display:grid; place-items:center; margin:0 auto 18px; border-radius:32px; color:#fff; background:linear-gradient(135deg,#438bf8,#0b60df); box-shadow:0 16px 28px rgba(30,105,232,.25); font-size:3.2rem; }.food-success h3 { margin:0; font-size:1.22rem; }.food-success p { color:#74839d; font-size:.78rem; line-height:1.9; }.food-order-number { margin:17px 0; padding:13px; border-radius:14px; color:#42618c; background:#eef4fc; font-size:.78rem; }.food-demo-note { margin:14px 0 0; color:#98a6bb; font-size:.65rem; text-align:center; }
@keyframes food-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:520px) { .food-order { padding:0; }.food-order__phone { width:100%; max-height:100dvh; min-height:100dvh; border-radius:0; }.food-order__body { max-height:calc(100dvh - 72px); min-height:calc(100dvh - 72px); }.food-order__header { padding-inline:68px; }.food-order__header [data-food-back] { left:14px; }.food-order__header [data-food-close] { right:14px; } }