/* ============================================================ ب. لبن — menu app layer Shared by the browse menu (menu.html / menu-he.html) and the takeaway ordering page (takeaway.html / takeaway-he.html). Ordering-only pieces are scoped under .ordering on . Builds on style.css — header, buttons, footer come from there. ============================================================ */ body.ordering { padding-bottom: 92px; } /* A class that sets `display` beats the browser's [hidden] rule, so panes like .mform (display:flex) stayed on screen when hidden. Keep this first. */ [hidden] { display: none !important; } /* The page title is carried for search engines and screen readers only — the search bar is the first thing a customer sees. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- sticky search ---------- */ .msearch { position: sticky; top: var(--hdr, 68px); z-index: 48; background: var(--navy); /* sits flush under the header on the browse menu, so it carries both gaps */ padding: 0.7rem 0; } .msearch .inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; } .msearch input { width: 100%; border: none; border-radius: 14px; padding: 0.8rem 2.9rem 0.8rem 2.6rem; font-family: inherit; font-size: 1.02rem; color: var(--navy); background: var(--white); } .msearch input::placeholder { color: var(--muted); } .msearch input:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; } .msearch .ico { position: absolute; top: 50%; transform: translateY(-50%); right: 2.4rem; color: var(--muted); pointer-events: none; } .msearch .clr { position: absolute; top: 50%; transform: translateY(-50%); left: 2.1rem; border: none; background: var(--cream-2); color: var(--navy); width: 28px; height: 28px; border-radius: 50%; font-size: 1rem; line-height: 1; display: none; } .msearch.has-val .clr { display: block; } /* ---------- sticky category chips ---------- */ .mchips { position: sticky; top: calc(var(--hdr, 68px) + var(--searchh, 62px)); z-index: 46; background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mchips::-webkit-scrollbar { display: none; } .mchips .inner { display: flex; gap: 0.5rem; padding: 0.6rem 1.5rem; max-width: var(--container); margin: 0 auto; } .mchips a { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.9rem; font-weight: 700; color: var(--navy-2); background: var(--white); white-space: nowrap; } .mchips a.active { background: var(--blue); border-color: var(--blue); color: var(--white); } /* ---------- bestsellers (takeaway only) ---------- */ .mbest { max-width: var(--container); margin: 0 auto; padding: 1.4rem 1.5rem 0; } .mbest h2 { font-size: 1.2rem; margin: 0 0 0.1rem; } .mbest p { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.92rem; } .mbest .strip { display: flex; gap: 0.7rem; overflow-x: auto; padding-bottom: 0.9rem; scrollbar-width: none; } .mbest .strip::-webkit-scrollbar { display: none; } .bcard { flex: 0 0 148px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); text-align: right; padding: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .bcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .bcard img { width: 100%; height: 104px; object-fit: cover; } .bcard .b { padding: 0.55rem 0.65rem 0.7rem; } .bcard .n { font-weight: 700; font-size: 0.9rem; line-height: 1.35; color: var(--navy); } .bcard .p { color: var(--blue); font-weight: 700; font-size: 0.88rem; margin-top: 0.2rem; } /* one shelf inside a strip section: a heading, then its own scroller */ .mgroup { margin-top: 1.1rem; } .mgroup:first-of-type { margin-top: 0.2rem; } .mgroup-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .mgroup-head h3 { margin: 0; font-size: 1.08rem; color: var(--navy); } .mgroup-head .cnt { color: var(--muted); font-size: 0.84rem; } /* ---------- a section laid out as a side-scrolling strip ---------- Drinks read better as cards you push sideways than as a stacked list. The strip bleeds to the screen edge so the last card is visibly clipped -- that overhang is what tells you there is more to the right. */ .mstrip { --gutter: 1.5rem; display: flex; gap: 0.7rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 0.2rem 0 0.5rem; } /* The gutter is held by flex items, not padding: a right-to-left scroll container starts already scrolled past its own start padding, which left the first card flush against the screen edge while the heading was inset. Scroll snapping is deliberately off for the same reason -- it snapped the first card to the container edge and ate the gutter back. */ .mstrip::before, .mstrip::after { content: ''; flex: 0 0 calc(var(--gutter) - 0.7rem); } .mstrip::-webkit-scrollbar { display: none; } .mcard { flex: 0 0 176px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); text-align: start; padding: 0; font-family: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; } .mcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .mcard:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .mcard .thumb { position: relative; display: block; } .mcard .thumb img { width: 100%; height: 132px; object-fit: cover; display: block; } /* the marker sits on the photo, the way it does on a delivery-app card */ .mcard .thumb .tags { position: absolute; inset-inline-start: 0.5rem; bottom: 0.5rem; display: flex; gap: 0.3rem; flex-wrap: wrap; } .mcard .b { display: block; padding: 0.6rem 0.75rem 0.8rem; } .mcard .pr { display: block; color: var(--navy-2); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; } .mcard .nm { display: block; margin-top: 0.15rem; font-weight: 700; color: var(--navy); font-size: 1rem; line-height: 1.35; } .mcard mark { background: #FFE9A8; color: inherit; border-radius: 3px; padding: 0 2px; } .mcard[hidden] { display: none; } /* ---------- sections ---------- */ .mlist { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; } .msec { padding-top: 1.8rem; scroll-margin-top: 190px; } .msec-head { margin-bottom: 0.8rem; } /* no thumbnail beside it, so the name gets the room */ .msec-head h2 { font-size: 1.65rem; margin: 0; } .msec-head .cnt { color: var(--muted); font-size: 0.86rem; } /* Rows read like a delivery-app menu: a large photo, then the name with the price under it, separated by hairlines rather than boxed in cards. */ .mrows { display: flex; flex-direction: column; } .mrow { display: flex; align-items: center; gap: 1rem; width: 100%; border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0.9rem 0; background: none; font-family: inherit; text-align: right; cursor: pointer; } .mrow:last-child { border-bottom: none; } .mrow:hover .nm { color: var(--blue); } .mrow:active { background: rgba(30, 72, 144, 0.03); } .mrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 12px; } .mrow .thumb { position: relative; flex: 0 0 auto; } .mrow img { width: 124px; height: 96px; border-radius: 12px; object-fit: cover; display: block; } /* how many of this item are already in the basket */ .qbadge { position: absolute; top: -7px; inset-inline-start: -7px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--pistachio); color: var(--white); font-size: 0.82rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); } /* pinned to a thumbnail corner normally; inline in the tag line on a group row, which has no thumbnail to pin it to */ .qbadge.inline { position: static; min-width: 0; height: auto; padding: 0.12rem 0.55rem; font-size: 0.74rem; box-shadow: none; } .mrow .txt { flex: 1; min-width: 0; } /* name, then the price alone on the next line, then any tags — block so the price never rides up beside the name on items that have no tags */ .mrow .nm { display: block; font-weight: 700; color: var(--navy); line-height: 1.4; font-size: 1.06rem; transition: color 0.15s ease; } .mrow .pr { display: block; margin-top: 0.35rem; font-weight: 700; color: var(--navy-2); font-size: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .mrow .tags { display: flex; gap: 0.35rem; margin-top: 0.4rem; flex-wrap: wrap; } .mrow mark { background: #FFE9A8; color: inherit; border-radius: 3px; padding: 0 2px; } .mtag { font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.5rem; background: var(--cream-2); color: var(--caramel); } .mtag.hot { background: #FDEBE0; color: #C2410C; } .madd { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--blue); color: var(--white); font-size: 1.35rem; line-height: 1; display: grid; place-items: center; transition: background 0.18s ease, transform 0.18s ease; } .madd:hover { background: var(--blue-dark); } .madd:active { transform: scale(0.92); } .madd.in { background: var(--pistachio); } /* ---------- empty state ---------- */ .mempty { text-align: center; padding: 3.5rem 1rem; color: var(--muted); } .mempty b { display: block; color: var(--navy); font-size: 1.15rem; margin-bottom: 0.3rem; } /* ---------- order tray (takeaway only) ---------- */ .mtray { position: fixed; bottom: 0; right: 0; left: 0; z-index: 70; background: var(--navy); color: var(--cream); padding: 0.7rem 1.5rem; display: flex; gap: 0.7rem; align-items: center; transform: translateY(110%); transition: transform 0.28s ease; } .mtray.show { transform: none; } .mtray .sum { flex: 1; font-weight: 700; font-size: 0.98rem; font-variant-numeric: tabular-nums; } .mtray .sum span { display: block; font-size: 0.8rem; color: var(--muted-on-dark); font-weight: 400; } .mtray button { border: none; border-radius: 12px; padding: 0.72rem 1.15rem; font-weight: 700; font-family: inherit; font-size: 0.95rem; background: var(--blue); color: var(--white); } .mtray button:hover { background: var(--blue-dark); } body.has-tray .menu-cta-bar { display: none; } .msheet-bg { position: fixed; inset: 0; background: rgba(15, 30, 60, 0.55); z-index: 80; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .msheet-bg.show { opacity: 1; pointer-events: auto; } .msheet { position: fixed; right: 0; left: 0; bottom: 0; z-index: 90; background: var(--bg); border-radius: 22px 22px 0 0; padding: 1rem 1.2rem 1.3rem; max-height: 82vh; overflow: auto; transform: translateY(110%); transition: transform 0.3s ease; } .msheet.show { transform: none; } .msheet h3 { margin: 0.2rem 0 0.9rem; font-size: 1.3rem; } .oitem { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); } .oitem .nm { flex: 1; font-weight: 700; font-size: 0.95rem; } .oitem .lt { font-weight: 900; min-width: 56px; text-align: left; font-variant-numeric: tabular-nums; } .mqty { display: flex; align-items: center; gap: 0.55rem; } .mqty button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--navy); font-size: 1.15rem; line-height: 1; } .mqty b { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; } .mtot { display: flex; justify-content: space-between; font-weight: 900; font-size: 1.18rem; padding: 0.95rem 0; font-variant-numeric: tabular-nums; } .macts { display: flex; flex-direction: column; gap: 0.55rem; } .macts a, .macts button { display: block; text-align: center; border-radius: 14px; padding: 0.88rem; font-weight: 700; font-size: 1rem; border: none; font-family: inherit; } .macts .wa { background: #25D366; color: #0B2E17; } .macts .tel { background: var(--navy); color: var(--cream); } .macts .clear { background: transparent; color: var(--muted); } .macts .send { background: var(--blue); color: var(--white); } .macts .send:hover { background: var(--blue-dark); } .macts .send:disabled { opacity: 0.6; } /* ---------- checkout form ---------- */ .mform { display: flex; flex-direction: column; gap: 0.75rem; } .mform label { font-weight: 700; font-size: 0.92rem; display: block; } .mform input[type="text"], .mform input[type="tel"], .mform textarea { width: 100%; margin-top: 0.3rem; border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.85rem; font-family: inherit; font-size: 1rem; color: var(--navy); background: var(--surface); } .mform input:focus-visible, .mform textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } .mform textarea { resize: vertical; } .mform fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 0.6rem 0.85rem 0.75rem; margin: 0; } .mform legend { font-weight: 700; font-size: 0.88rem; padding: 0 0.35rem; } .mform fieldset label { font-weight: 500; display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; } .mform fieldset input { accent-color: var(--blue); } .mformerr { margin: 0; background: #FDEBE0; color: #9A3412; border-radius: 10px; padding: 0.6rem 0.8rem; font-size: 0.9rem; font-weight: 700; } .mdone { text-align: center; padding: 1rem 0 0.4rem; } .mdone h4 { font-size: 1.25rem; margin: 0 0 0.5rem; } .mdone p { color: var(--muted); margin: 0 0 1.2rem; } .mdone button { border: none; border-radius: 14px; padding: 0.85rem 2.2rem; font-family: inherit; font-weight: 700; font-size: 1rem; background: var(--blue); color: var(--white); } .mnote { font-size: 0.83rem; color: var(--muted); text-align: center; margin: 0.7rem 0 0; } /* ---------- item detail sheet ---------- */ .mitem { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 88vh; } /* the scrolling part; the add-to-basket footer stays pinned below it */ .mitem-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; } .mitem-hero { position: relative; flex: 0 0 auto; } /* shorter hero so the extras start in view and invite a scroll */ .mitem-hero img { width: 100%; height: min(34vh, 280px); object-fit: cover; display: block; } .mitem-grip { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 46px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); } .mitem-x { position: absolute; top: 12px; inset-inline-start: 12px; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--white); color: var(--navy); font-size: 1.15rem; line-height: 1; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .mitem-body { padding: 1.1rem 1.2rem 0.9rem; } .mitem-body h4 { margin: 0; font-size: 1.5rem; line-height: 1.3; color: var(--navy); } .mitem-body .price { margin-top: 0.4rem; font-size: 1.25rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; } .mitem-body .tags { display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; } /* extras — pick up to N, free */ .mitem-addons { padding: 0 1.2rem 0.9rem; } .mitem-addons .hd { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .mitem-addons .hd b { font-size: 1.1rem; color: var(--navy); } .mitem-addons .hd span { color: var(--muted); font-size: 0.9rem; } .mitem-addons .list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); } .addon { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--line); cursor: pointer; } .addon:last-child { border-bottom: none; } .addon img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .addon .n { flex: 1; font-weight: 700; color: var(--navy); } .addon .cost { font-size: 0.82rem; font-weight: 700; color: var(--pistachio); white-space: nowrap; } .addon .cost.paid { color: var(--caramel); } /* A real box, not the browser's hairline default — on iOS the native checkbox is almost invisible against a white row. Checkmark is an inline SVG background rather than ::after, which is unreliable on form controls. */ .addon input { flex: 0 0 auto; width: 26px; height: 26px; margin: 0; appearance: none; -webkit-appearance: none; border: 2px solid rgba(30, 72, 144, 0.3); border-radius: 7px; background: var(--white); transition: background-color 0.15s ease, border-color 0.15s ease; } .addon input:checked { background-color: var(--blue); border-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; } .addon input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .addon.on { background: var(--blue-soft); } body:not(.ordering) .addon { cursor: default; } /* ---------- flavour picker (mojito) ---------- */ .mitem-choices { padding: 0 1.2rem 0.9rem; } .mitem-choices .hd { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .mitem-choices .hd b { font-size: 1.1rem; color: var(--navy); } .mitem-choices .hd span { color: var(--muted); font-size: 0.9rem; } .mitem-choices .list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); } /* a flavour has no thumbnail, so the row spends that height on padding and keeps the 44px tap target the extras rows get from their image */ .addon.flav { padding: 0.72rem 0.85rem; } /* a variant carries its own price only when its siblings disagree, and its allergen tag wherever the flat list used to show one */ .addon.flav .cost { color: var(--navy-2); font-size: 0.95rem; } .addon .tags { display: flex; gap: 0.3rem; flex-wrap: wrap; flex: 0 0 auto; } .addon input[type="radio"] { border-radius: 50%; } .addon input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%23fff'/%3E%3C/svg%3E"); } .mitem-foot { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.2rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); } .mitem-step { display: flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 14px; padding: 0.3rem 0.4rem; background: var(--surface); } .mitem-step button { width: 36px; height: 36px; border-radius: 10px; border: none; background: none; color: var(--navy); font-size: 1.3rem; line-height: 1; } .mitem-step button:disabled { opacity: 0.35; } .mitem-step b { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; } .mitem-add { flex: 1; border: none; border-radius: 14px; padding: 0.95rem 1rem; background: var(--blue); color: var(--white); font-family: inherit; font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .mitem-add:hover { background: var(--blue-dark); } .mitem-add:disabled { opacity: 0.45; } .mitem-add:disabled:hover { background: var(--blue); } .mitem-add .amt { font-variant-numeric: tabular-nums; } @media (min-width: 760px) { .mitem { max-width: 480px; margin: 0 auto; } } /* ---------- back to top ---------- */ .mtotop { position: fixed; bottom: 92px; left: 1rem; z-index: 60; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--navy); font-size: 1.2rem; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .mtotop.show { opacity: 1; pointer-events: auto; } @media (min-width: 760px) { .mrow img { width: 70px; height: 70px; } .msheet { max-width: 540px; margin: 0 auto; border-radius: 22px 22px 0 0; } } @media (max-width: 560px) { .msearch .inner, .mchips .inner, .mlist, .mbest { padding-left: 1rem; padding-right: 1rem; } .mstrip { --gutter: 1rem; } .msearch .ico { right: 1.9rem; } .msearch .clr { left: 1.6rem; } .mtray { padding-left: 1rem; padding-right: 1rem; } .msec-head img { width: 48px; height: 48px; } .msec-head h2 { font-size: 1.45rem; } } @media (prefers-reduced-motion: reduce) { .mtray, .msheet, .msheet-bg, .bcard, .madd, .mcard { transition: none; } }