/* Omxio layer for the table menu «مائدة» (maida): Omxio buttons only + animated catalogue + dish flipping.
   Loaded after the base maida CSS by views/maida_omxio.xml; the base layout / photos / shadows stay untouched. */
:root{
  --omx-1:#F6F3F9; --omx-2:#ECE6F2; --omx-3:#DCD0E8; --omx-4:#B8A4CC; --omx-5:#9B86B4; --omx-6:#7E6A9C; --omx-7:#655683; --omx-8:#4D4366;
  --omx-slate:#6B7390; --omx-grad:linear-gradient(135deg,#A58BC4 0%,#7E6A9C 52%,#6B7390 100%);
}
html,html.md-v6{--v6-red:#7E6A9C;--accent:#7E6A9C;--accent-2:#9B86B4;--accent-3:#655683;--ah-brand:#7E6A9C}
html.md-v6 .md-v6 .card .price,.md-v6 .card .price,.md-v6 #bCheckout,.md-v6 .cta>button,.md-v6 #bReserve,
.md-v6 .qty button,.md-v6 .add .qty button,.md-v6 .md-q button{background:var(--omx-grad)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 4px 12px rgba(110,96,150,.3)}
.md-v6 .cta>button *{color:#fff!important}
.md-v6 .card .plus{border-color:var(--omx-6)!important;color:var(--omx-6)!important;background:transparent!important}
.md-v6 .opt.on,.md-v6 .md-now.on{border-color:var(--omx-6)!important;background:var(--omx-2)!important;color:var(--omx-7)!important}
.md-v6 .md-now small,.md-v6 .md-now b{color:inherit}
.md-v6 .md-now svg{color:var(--omx-6)!important;fill:currentColor}
.md-v6 .sec-title{border-color:var(--omx-6)!important}
.md-v6 .v6-ct.on b{color:var(--omx-6)!important}
.md-v6 .cta{background:transparent}
/* flip between dishes inside the dish sheet */
#sheet{position:relative}
.omx-nav{position:absolute;bottom:80px;z-index:5;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:var(--omx-grad)!important;color:#fff!important;box-shadow:0 6px 16px rgba(110,96,150,.38);padding:0;transition:transform .15s}
.omx-nav:hover{transform:scale(1.08)}
.omx-nav svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.omx-nav.l{left:calc(50% - 104px)}.omx-nav.r{left:calc(50% + 64px)}
.omx-count{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);z-index:5;font-size:12px;font-weight:700;color:var(--omx-7);background:var(--omx-2);padding:3px 11px;border-radius:999px}
/* ───────── animated dish catalogue ───────── */
.omx-hero{position:relative;margin:4px 0 18px;padding:16px 0 14px;border-radius:var(--r-xl,28px);overflow:hidden;
  background:linear-gradient(135deg,rgba(165,139,196,.16),rgba(107,115,144,.12)),var(--surface);box-shadow:var(--neu-sm)}
.omx-hero-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px 12px;flex-wrap:wrap}
.omx-hero-h h2{margin:0;font-size:17px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.omx-hero-h h2 i{width:30px;height:30px;border-radius:10px;background:var(--omx-grad);display:grid;place-items:center;color:#fff;font-style:normal}
.omx-hero-h p{margin:2px 0 0;font-size:12px;color:var(--text-2)}
.omx-toggle{display:inline-flex;padding:3px;border-radius:14px;background:var(--surface-sunk);box-shadow:var(--neu-in);gap:2px}
.omx-toggle button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:11px;font-size:12px;font-weight:600;color:var(--text-2)}
.omx-toggle button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.omx-toggle button[aria-pressed="true"]{background:var(--omx-grad);color:#fff;box-shadow:0 4px 10px rgba(110,96,150,.32)}
.omx-toggle button:focus-visible{outline:2px solid var(--omx-5);outline-offset:2px}
.omx-rows{display:grid;gap:10px;mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.omx-row{overflow:hidden;direction:ltr}
.omx-track{display:flex;gap:10px;width:max-content;animation:omx-slide var(--omx-dur,60s) linear infinite}
.omx-row.rev .omx-track{animation-direction:reverse}
.omx-rows:hover .omx-track,.omx-rows:focus-within .omx-track,.omx-rows.touch .omx-track{animation-play-state:paused}
@keyframes omx-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.omx-tile{flex:none;width:150px;display:block;text-decoration:none;color:var(--text);border-radius:var(--r-md,16px);overflow:hidden;background:var(--surface-2);box-shadow:var(--neu-sm);direction:inherit;transition:transform .2s}
.omx-tile:hover,.omx-tile:focus-visible{transform:translateY(-3px)}
.omx-tile img{display:block;width:150px;height:104px;object-fit:cover;background:var(--surface-sunk)}
.omx-tile b{display:block;padding:7px 10px 0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.omx-tile span{display:block;padding:1px 10px 8px;font-size:11px;font-weight:700;color:var(--accent)}
html[dir="rtl"] .omx-tile{direction:rtl}
.card.omx-flash{animation:omx-flash 1.6s ease}
@keyframes omx-flash{0%,100%{box-shadow:var(--neu)}30%{box-shadow:0 0 0 3px var(--omx-5),var(--neu)}}
@media (prefers-reduced-motion:reduce){.omx-track{animation:none}.omx-row{overflow-x:auto}.omx-tile{transition:none}}
@media (max-width:640px){.omx-tile,.omx-tile img{width:124px}.omx-tile img{height:88px}}

/* ───────── desktop / mobile view toggle: the mobile view is the same page in a phone-sized frame (real mobile layout) ───────── */
.omx-phone{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;
  background:linear-gradient(135deg,rgba(232,226,240,.97),rgba(216,220,232,.97));backdrop-filter:blur(6px)}
html[data-omx-view="mobile"] .omx-phone{display:flex}
html[data-omx-view="mobile"]{overflow:hidden}
.omx-device{position:relative;width:390px;max-width:94vw;height:min(800px,calc(100vh - 92px));border-radius:42px;background:#2B2640;padding:11px;
  box-shadow:0 30px 70px rgba(60,50,90,.42),inset 0 0 0 2px #463E66}
.omx-device::before{content:"";position:absolute;top:11px;left:50%;width:96px;height:20px;margin-left:-48px;border-radius:0 0 14px 14px;background:#2B2640;z-index:2}
.omx-device iframe{display:block;width:100%;height:100%;border:0;border-radius:32px;background:#fff}
.omx-phone .omx-toggle{display:inline-flex}
.omx-phone-bar{display:flex;align-items:center;gap:12px;color:#4D4366;font-size:13px;font-weight:600}
@media (max-width:820px){.omx-toggle{display:none}.omx-phone{display:none!important}html[data-omx-view="mobile"]{overflow:auto}}
/* inside the preview frame there is nothing to toggle */
html.omx-framed .omx-toggle{display:none}

/* ───────── owner feedback 2026-10-29: all-white dish cards + 70 / 30 dish sheet ───────── */
/* cards: the photo area is the same white as the card; the dish carries its own soft shadow */
.md-v6 .card,.md-v6 .card .im,html.md-top .card .im,#maida .card .im{background:#fff!important}
.md-v6 .card .im img,html.md-top .card .im img,html.md-top #maida .card .im img,#maida .card .im img{
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.28)) drop-shadow(0 3px 4px rgba(0,0,0,.14))!important}
/* dish sheet: photo 70 %, details 30 % (mobile: photo large on top, details below) */
.md-stage{background:#fff!important}
.sheet .mcolA{background:#fff}
.md-stage .md-ph{filter:drop-shadow(0 22px 22px rgba(0,0,0,.30)) drop-shadow(0 6px 8px rgba(0,0,0,.16))}
.md-stage .md-ph{width:96%!important;max-height:min(52vh,560px)!important;object-fit:contain}
@media (min-width:760px){
  .sheet{max-width:min(1320px,97vw)!important;inset:2.5vh 0!important;border-radius:28px;overflow:hidden}
  .mgrid{display:grid!important;grid-template-columns:7fr 3fr!important;gap:14px;align-items:stretch}
  .mcolA{position:static!important;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .md-stage{min-height:min(72vh,720px);width:100%}
  .md-stage .md-ph{width:96%!important;max-height:min(70vh,700px)!important}
  .mcolB{padding:8px 12px}
}
@media (min-width:760px){
  .sheet{height:95vh!important;max-height:95vh!important;bottom:auto!important}
  #sheet .mbody{min-height:0}
  .md-stage{min-height:min(64vh,640px)}
  .md-stage .md-ph{max-height:min(62vh,620px)!important}
}
/* animated catalogue tiles: white like the dish cards, dish with its own soft shadow */
.omx-tile,.omx-tile img{background:#fff!important}
.omx-tile img{object-fit:contain!important;padding:6px;box-sizing:border-box;filter:drop-shadow(0 8px 8px rgba(0,0,0,.28)) drop-shadow(0 2px 3px rgba(0,0,0,.14))}
/* owner 2026-10-29 (pt243u): the whole dish popup is pure white; photo column 70 %, details column 30 % */
#modal .sheet,#modal .sheet .mhead,#modal .sheet .mbody,#modal .sheet .mgrid,#modal .sheet .mcolA,#modal .sheet .mcolB,#modal .sheet .cta,#modal .sheet .md-stage,#modal .sheet .md-alg{background:#fff!important}
#modal .sheet{--modal:#fff}
#modal .sheet .add,#modal .sheet .opt,#modal .sheet .md-now,#modal .sheet .blk .note{background:#fff!important;border:1px solid #e6e8ee!important;box-shadow:none}
#modal .sheet .opt.on,#modal .sheet .md-now.on{background:#F6F3F9!important;border-color:var(--omx-6)!important}
#modal .sheet .cta{border-top:1px solid #eef0f4}
@media (min-width:760px){
  #modal .sheet .mgrid{display:grid!important;grid-template-columns:70% 30%!important;gap:0!important;width:100%}
  #modal .sheet .mcolA{grid-column:1;min-width:0}
  #modal .sheet .mcolB{grid-column:2;min-width:0;overflow-y:auto;padding:8px 14px!important}
  #modal .sheet .adds{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px;overflow:visible!important}
  #modal .sheet .md-stage .md-ph{width:94%!important;max-height:min(66vh,680px)!important}
}

/* ───────── prototype: frosted-glass variant (default on; ?glass=0 returns to the white look, ?glass=1 back) ───────── */
html.omx-glass body{background:linear-gradient(135deg,#ece6f5 0%,#e2e8f4 52%,#efe9f7 100%) fixed!important}
html.omx-glass body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:#6F5B8B;opacity:.42;
  -webkit-mask:url(/omxio_fnb_menu_theme/static/src/img/omxio-doodle.svg) 0 0/210px 210px repeat;mask:url(/omxio_fnb_menu_theme/static/src/img/omxio-doodle.svg) 0 0/210px 210px repeat}
html.omx-glass #maida{position:relative;z-index:1}
html.omx-glass.md-v6 .v6,html.omx-glass .md-v6 .v6-main,html.omx-glass .v6-cats{background:transparent!important}
html.omx-glass .md-v6 .card,html.omx-glass .card,html.omx-glass .omx-tile,html.omx-glass .omx-hero,html.omx-glass .v6-pay,html.omx-glass .v6-bar,html.omx-glass .v6-cats{
  background:rgba(255,255,255,.52)!important;-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 10px 30px rgba(80,60,120,.12)!important}
html.omx-glass .card .im,html.omx-glass .omx-tile,html.omx-glass .omx-tile img,html.omx-glass .md-v6 .card .im,html.omx-glass #maida .card .im{background:transparent!important}
html.omx-glass .v6-ct{background:rgba(255,255,255,.4)!important}
html.omx-glass #modal .dim{background:rgba(60,50,90,.28)!important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
html.omx-glass #modal .sheet{background:rgba(255,255,255,.58)!important;-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);border:1px solid rgba(255,255,255,.8)}
html.omx-glass #modal .sheet .mhead,html.omx-glass #modal .sheet .mbody,html.omx-glass #modal .sheet .mgrid,html.omx-glass #modal .sheet .mcolA,
html.omx-glass #modal .sheet .mcolB,html.omx-glass #modal .sheet .md-stage,html.omx-glass #modal .sheet .md-alg{background:transparent!important}
html.omx-glass #modal .sheet .cta{background:rgba(255,255,255,.45)!important;border-top:1px solid rgba(255,255,255,.8)}
html.omx-glass #modal .sheet .add,html.omx-glass #modal .sheet .opt,html.omx-glass #modal .sheet .md-now,html.omx-glass #modal .sheet .blk .note{
  background:rgba(255,255,255,.55)!important;border:1px solid rgba(255,255,255,.85)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.omx-glass #modal .sheet .opt.on,html.omx-glass #modal .sheet .md-now.on{background:rgba(220,208,232,.7)!important;border-color:var(--omx-6)!important}
html.omx-glass #maida,html.omx-glass body>div{background:transparent!important}

/* ───────── owner 2026-10-30 (pt246u): glass is the approved default; dish cards use the same frosted translucent glass as the modal and bars ───────── */
html.omx-glass .md-v6 .card,html.omx-glass .card{
  background:linear-gradient(150deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.16) 100%)!important;
  -webkit-backdrop-filter:blur(9px) saturate(1.6);backdrop-filter:blur(9px) saturate(1.6);
  border:1px solid rgba(255,255,255,.7)!important;
  box-shadow:0 10px 30px rgba(80,60,120,.12),inset 0 1px 0 rgba(255,255,255,.75)!important}
html.omx-glass .card .im,html.omx-glass .md-v6 .card .im,html.omx-glass #maida .card .im,html.omx-glass .card .im:before,html.omx-glass .card .im:after{background:transparent!important}
html.omx-glass .card .im svg{opacity:.3}