/* =========================================================
   CodeChaps — Restaurant App Development page
   Page-specific styles (hero phone). Shared styles live in
   codechaps-motion.css
   ========================================================= */
.screen{width:100%;height:100%;border-radius:36px;overflow:hidden;background:#F7F8FB;color:#0F172A;display:flex;flex-direction:column}
.scr-head{padding:24px 16px 12px;background:#fff;display:flex;flex-direction:column;gap:10px}
.scr-top{display:flex;justify-content:space-between;align-items:center}
.scr-top small{display:block;font-size:11px;color:#64748B}
.scr-top b{font-size:13px}
.avatar{width:34px;height:34px;border-radius:50%;background:#DBEAFE;color:#1D4ED8;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.greet{font-family:var(--display);font-weight:900;font-size:22px}
.search{height:40px;border-radius:12px;background:#F1F5F9;display:flex;align-items:center;gap:8px;padding:0 12px;color:#64748B;font-size:13px}
.search .ico{width:16px;height:16px}
.chips{display:flex;gap:6px}
.chips span{padding:6px 10px;border-radius:999px;background:#F1F5F9;font-size:11px}
.chips span.on{background:var(--blue);color:#fff;font-weight:700}
.picks{padding:12px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.picks>b{font-size:13px}
.dish{background:#fff;border-radius:16px;padding:8px 10px;display:flex;gap:10px;align-items:center;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.js .dish{opacity:0;transform:translateX(24px)}
.js.loaded .dish{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease)}
.js.loaded .dish:nth-of-type(1){transition-delay:.9s}.js.loaded .dish:nth-of-type(2){transition-delay:1.05s}.js.loaded .dish:nth-of-type(3){transition-delay:1.2s}
.dish-img{width:50px;height:50px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center}
.dish-img .ico{width:26px;height:26px;color:rgba(15,23,42,.55)}
.dish-info{flex:1;min-width:0}
.dish-info b{display:block;font-size:13px}
.dish-info small{font-size:11px;color:#64748B}
.dish-info em{display:block;font-style:normal;font-size:13px;font-weight:700;margin-top:4px}
.add{width:30px;height:30px;border-radius:9px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.add.qty{background:#EFF6FF;color:#1D4ED8;font-size:12px}
.add.pulse{animation:addPulse 2.6s ease-in-out infinite 2.4s}
@keyframes addPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.5)}50%{box-shadow:0 0 0 8px rgba(37,99,235,0)}}
.cart{flex:none;margin:0 12px 14px;height:52px;border-radius:14px;background:#0F172A;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:13px}
.js .cart{transform:translateY(80px)}
.js.loaded .cart{transform:none;transition:transform .9s var(--ease) 1.5s}

/* keep the loyalty card clear of the phone content */
.float--3{left:-205px;bottom:120px}
@media (max-width:1180px) and (min-width:961px){.float--3{left:-170px}}