/* Brood & Spelen, feature order (register #2578): ordering from the table. Every selector starts with .f-order
   (THE BUILD PLAN). The look is lifted from the board: docs/scratch/row-2537/order.py (O1 to O7) and its mock.css.
   A visible change here is a remark for the design owner first. */
.f-order{background:var(--stock);width:100%}
.f-order.paid{background:var(--table)}
.f-order[data-order-paper]{background:none;min-height:0}
.f-order .otop{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 0;flex:none}
.f-order .otop .micro.o{color:var(--accent)}
.f-order .otop.one .back{padding-top:0}
.f-order .btn.light{background:var(--stock);color:var(--ink)}   /* it opens the order, it does not pay: not orange */
.f-order .btn.orange{background:var(--accent);color:#fff}   /* orange is money and nothing else (gesture four) */
.f-order .btn.orange:active{background:var(--accent-press)}
.f-order .grow{flex:1;display:flex;flex-direction:column}
.f-order .end{margin-top:auto;padding-top:24px;padding-bottom:18px;display:flex;flex-direction:column;gap:10px}

/* O1 · the menu is the order form */
.f-order .tabs{display:flex;gap:20px;overflow-x:auto;padding:0 20px;border-bottom:1px solid var(--hair);flex:none;margin-top:8px;scrollbar-width:none;position:sticky;top:0;background:var(--stock);z-index:2}
.f-order .tabs::-webkit-scrollbar{display:none}
.f-order .tabs button{font-family:var(--sg);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(20,22,28,.6);padding:12px 0 11px;white-space:nowrap;border-bottom:2.5px solid transparent}
.f-order .tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.f-order .list{padding:4px 20px 20px;flex:1}
.f-order .mrow{display:grid;grid-template-columns:74px 1fr auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--hair);width:100%;text-align:left}
.f-order .mrow img,.f-order .mrow .noimg{width:74px;height:74px;object-fit:cover;border-radius:3px;background:#ece8e0}
.f-order .mrow .nm{font-family:var(--sg);font-weight:700;font-size:16px;text-transform:uppercase;line-height:1.1}
.f-order .mrow .pr{font-family:var(--sg);font-weight:700;font-size:13px;color:var(--accent);margin-top:5px}
.f-order .mrow .add{width:38px;height:38px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--sg);font-weight:700;font-size:20px}
.f-order .mrow .add.n{background:var(--ink);color:var(--stock);font-size:15px}
.f-order .mrow.out{opacity:.45}
.f-order .mrow.out .nm{text-decoration:line-through}
.f-order .cartbar{flex:none;background:var(--ink);color:var(--stock);padding:13px 16px 13px 20px;display:flex;align-items:center;gap:14px;position:sticky;bottom:0}
.f-order .cartbar .tot{font-family:var(--sg);font-weight:700;font-size:19px}
.f-order .cartbar .tot small{display:block;font-size:10px;letter-spacing:.2em;color:rgba(247,245,241,.6);text-transform:uppercase;font-weight:700}
.f-order .cartbar .btn{margin-left:auto;height:46px;padding:0 18px;font-size:11.5px;width:auto}
.f-order .say{margin:10px 20px 0;font-size:13.5px;color:#b3261e}

/* O2 · a dish, with its choices */
.f-order .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.f-order .pick{position:relative;border-radius:3px;overflow:hidden;background:#fff;display:block;width:100%}
.f-order .pick img,.f-order .pick .noimg{width:100%;aspect-ratio:1.18;object-fit:cover;background:#ece8e0}
.f-order .pick .lb{position:absolute;left:8px;bottom:8px;background:var(--stock);font-family:var(--sg);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:4px 7px}
.f-order .pick.on{box-shadow:0 0 0 2.5px var(--accent)}
.f-order .pick.on .lb{background:var(--accent);color:#fff}
.f-order .dname{font-family:var(--sg);font-weight:700;font-size:26px;text-transform:uppercase;line-height:1.05;margin-top:14px}
.f-order .grp{font-family:var(--sg);font-weight:700;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:16px}
.f-order .chips3{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.f-order .chipb{flex:1 1 auto;height:42px;padding:0 12px;border:1.5px solid rgba(20,22,28,.22);border-radius:2px;display:flex;align-items:center;justify-content:center;
  font-family:var(--sg);font-weight:700;font-size:12px;letter-spacing:.1em;gap:6px;white-space:nowrap;background:var(--field);text-transform:uppercase}
.f-order .chipb.on{background:var(--ink);color:var(--stock);border-color:var(--ink)}
.f-order .chipb small{font-size:12px;color:var(--accent);letter-spacing:0}
.f-order .chipb.on small{color:var(--stock)}
.f-order .chipb.more{border-style:dashed;color:var(--soft)}
.f-order .end.stick{position:sticky;bottom:0;background:linear-gradient(rgba(247,245,241,0),var(--stock) 22px);padding-top:28px}

/* O3 · the order */
.f-order .cl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:13px 0;border-bottom:1px solid var(--hair)}
.f-order .cl .nm{font-family:var(--sg);font-weight:700;font-size:16px;text-transform:uppercase}
.f-order .cl .ch{font-size:13.5px;color:var(--soft);grid-column:1}
.f-order .cl .eu{font-family:var(--sg);font-weight:700;font-size:16px;text-align:right}
.f-order .cl .st{display:flex;align-items:center;gap:12px;font-family:var(--sg);font-weight:700;font-size:15px;justify-content:flex-end}
.f-order .cl .st button{width:28px;height:28px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center}
.f-order .plusrow{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font-family:var(--sg);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);align-self:flex-start;padding:4px 0}
.f-order .plusrow svg{width:18px;height:18px;color:var(--ink)}
.f-order .field textarea{display:block;width:100%;border:0;outline:0;background:none;font:inherit;font-size:16px;font-weight:600;margin-top:3px;color:var(--ink);resize:none}
.f-order .sum{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;font-family:var(--sg);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.f-order .sum b{font-size:30px;letter-spacing:0}
.f-order .cardrow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--soft);margin-top:10px}
.f-order .cardrow button{text-decoration:underline;text-underline-offset:2px}
.f-order .cardrow input{width:16px;height:16px;accent-color:var(--ink)}

/* O4, O5 · paid: the table, the three bowls, the list */
.f-order .bigt{font-family:var(--sg);font-weight:700;font-size:78px;line-height:.9;letter-spacing:-.01em;text-transform:uppercase;margin-top:10px}
.f-order .track{display:flex;align-items:flex-start;justify-content:space-between;margin-top:30px;position:relative}
.f-order .track::before{content:"";position:absolute;left:36px;right:36px;top:35px;height:3px;background:rgba(20,22,28,.14)}
.f-order .track .tline{position:absolute;left:36px;top:35px;height:3px;background:var(--accent);transition:width .5s ease}
.f-order .tstep{width:72px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}
.f-order .tstep .b{width:72px;height:72px}
.f-order .tstep .b svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1.5px 1.5px rgba(20,22,28,.16))}
.f-order .tstep span{font-family:var(--sg);font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;text-align:center;color:var(--faint);white-space:nowrap}
.f-order .tstep.on span{color:var(--ink)}
.f-order .olist{margin-top:26px;border-top:2px solid var(--ink)}
.f-order .row.gone{opacity:.45;text-decoration:line-through}
.f-order .row .k{white-space:normal}

/* O6 · the kitchen is shut; O7 · sold out after paying; the short wait */
.f-order .gh{font-family:var(--sg);font-weight:700;font-size:34px;line-height:1;text-transform:uppercase}
.f-order .bal{font-family:var(--sg);font-weight:700;font-size:54px;line-height:1;letter-spacing:-.02em;margin-top:14px;color:var(--accent)}
.f-order .ring{display:flex;justify-content:center;margin:38px 0 16px}
.f-order .ring i{width:58px;height:58px;border-radius:50%;border:3px solid rgba(20,22,28,.12);border-top-color:var(--accent);animation:f-order-turn 1s linear infinite}
@keyframes f-order-turn{to{transform:rotate(360deg)}}

/* on the home: an order that is on its way lies on top as paper */
.f-order[data-order-paper] .card.mini{width:100%;text-align:left;margin-top:14px}
.f-order[data-order-paper] .tm{font-family:var(--sg);font-weight:700;font-size:26px;line-height:1.1;color:var(--accent);margin-top:4px}