/* Omxio layer for the restaurant website: purple-grey palette (design tokens of theme_afghan_house), animated dish
   catalogue and desktop / mobile view toggle. Loaded after the base theme through catalog.get_web_assets(). */
: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%);
  /* the base theme's coral ramp becomes the Omxio purple-grey ramp */
  --red-50:var(--omx-1); --red-100:var(--omx-2); --red-200:var(--omx-3); --red-300:var(--omx-4);
  --red-400:#A58BC4; --red-500:#7E6A9C; --red-600:#6B5A89; --red-700:#554873;
  --accent:var(--omx-6); --accent-strong:var(--omx-7); --accent-soft:var(--omx-1); --accent-tint:var(--omx-2);
  --sahab-accent:#8A74A6; --sahab-accent-deep:#6F5B8B; --sahab-accent-ink:#4D4366;
  --sahab-accent-soft:rgba(138,116,166,.14); --sahab-accent-line:rgba(111,91,139,.3);
}
:root[data-theme="night"]{
  --accent:#B9A5D4; --accent-strong:#CDBDE3; --accent-soft:rgba(185,165,212,.13); --accent-tint:rgba(185,165,212,.22);
  --red-400:#9B86B4; --red-500:#7E6A9C;
}
/* gradient buttons: violet → slate (was coral) */
.cta,.ah-site .appbar .cta,.ah-site .tabbar .cta,.ah-site .ah-foot .cta,.ck-go{background:var(--omx-grad)!important;box-shadow:0 6px 16px rgba(110,96,150,.34),inset 0 1px 0 rgba(255,255,255,.32)!important}
.ah-fly-in{box-shadow:0 8px 22px rgba(110,96,150,.38),0 0 0 3px var(--surface)!important}
:root[data-theme="night"] .vipcard::after{background:radial-gradient(circle,rgba(185,165,212,.18),transparent 70%)!important}

/* ───────── 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}
.dcard.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}