/* «سينما» as an app — the Meylis frame (its «جص» light, its motion numbers, its press), cinema's own velvet for the one
   action. Motion: a page slides in from the side 300 ms and back reverses it; a sheet rises 300 ms; a press shrinks
   to .97 at once and springs back; the two lists swipe sideways with snap. */
@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(/assets/fonts/plex-ar-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Plex";font-weight:500;font-display:swap;src:url(/assets/fonts/plex-ar-500.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Plex";font-weight:700;font-display:swap;src:url(/assets/fonts/plex-ar-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(/assets/fonts/plex-la-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Plex";font-weight:500;font-display:swap;src:url(/assets/fonts/plex-la-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Plex";font-weight:700;font-display:swap;src:url(/assets/fonts/plex-la-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"PlexMono";font-weight:500;font-display:swap;src:url(/assets/fonts/plex-mono-500.woff2) format("woff2")}

:root{
  --m-page:300ms; --m-pop:150ms; --ease-out:cubic-bezier(.2,.7,.2,1); --ease-sheet:cubic-bezier(.32,.72,0,1);
  --night:#F3EEE6; --paper:#FFFDF9; --line:#E2D8CA; --wood:#2A2420; --stone:#7E7366; --sand:#4A4038;
  --saff:#A2690F; --door:#1F6F78; --velvet:#8C1C2E; --on:#FFF8F0; --red:#B3392E;
  --r:14px; --gut:16px; --head:54px;
  --font:"Plex","Segoe UI",Tahoma,system-ui,sans-serif; --mono:"PlexMono","Plex",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--night);color:var(--wood);font:16px/1.55 var(--font);min-height:100dvh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;max-inline-size:100%}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
b,i{font-style:normal}

/* ── moving between pages (cross-document view transitions; Meylis's numbers) ── */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:var(--m-page)}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-nav=push]::view-transition-new(root){animation:var(--m-page) ease-in-out both nav-in-from-start}
html[data-nav=push]::view-transition-old(root){animation:var(--m-page) ease-in-out both nav-out-to-end}
html[data-nav=pop]::view-transition-new(root){animation:var(--m-page) ease-in-out both nav-in-from-end}
html[data-nav=pop]::view-transition-old(root){animation:var(--m-page) ease-in-out both nav-out-to-start}
/* Meylis's own numbers (Yalla's APK): the new page slides in from the right, the old one out to the left; back reverses */
@keyframes nav-in-from-start{from{transform:translateX(100%)}}
@keyframes nav-out-to-end{to{transform:translateX(-100%)}}
@keyframes nav-in-from-end{from{transform:translateX(-100%)}}
@keyframes nav-out-to-start{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ── press: everything you can tap answers your finger at once ── */
.tile,.ccard,.chip,.btn,.tbtn,.seg,.pg-back,.frow .fr-p,.cb-h{transition:transform .15s var(--ease-out),background-color .15s,color .15s}
.tile:active,.ccard:active,.chip:active,.btn:active,.tbtn:active,.seg:active,.pg-back:active,.frow .fr-p:active{transform:scale(.97)}

/* ── the home frame: the brand, two tabs at the top, the two lists side by side ── */
.app{display:flex;flex-direction:column;min-height:100dvh}
.tophead{position:sticky;inset-block-start:0;z-index:20;display:grid;grid-template-columns:72px 1fr 72px;align-items:center;
  block-size:calc(var(--head) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0;background:var(--night)}
.brand{font-weight:700;font-size:20px;color:var(--saff)}
.pager{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.pager::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}
.pane{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;padding:0 var(--gut) 48px;max-block-size:calc(100dvh - var(--head) - env(safe-area-inset-top))}

/* chips: one row that scrolls sideways; the chosen one is filled wood */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:8px 0 12px;position:sticky;inset-block-start:0;z-index:5;background:var(--night)}
.chips.wrap{flex-wrap:wrap;position:static}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-block-size:38px;padding-inline:16px;border:1px solid var(--line);border-radius:20px;
  background:var(--paper);font-size:14px;cursor:pointer;white-space:nowrap}
.chip.on{background:var(--wood);border-color:var(--wood);color:var(--on);font-weight:500}
.chip svg{inline-size:16px;block-size:16px}
.chip.near{color:var(--door);border-color:var(--door)}
.chip.near.on{background:var(--door);color:var(--on)}

/* the film grid: a poster, its name, its runtime and its score */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px}
@media (min-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:24px 16px}}
.tile{display:flex;flex-direction:column;gap:6px;min-inline-size:0;cursor:pointer}
.tp{position:relative;display:block}
.pst{display:block;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:var(--pc,#3a302a);box-shadow:0 6px 18px rgba(42,36,32,.16)}
.pst img{inline-size:100%;block-size:100%;object-fit:cover}
.pst.np{display:flex;align-items:flex-end;padding:12px;color:#fff;font-weight:700;font-size:18px;line-height:1.2}
.age{position:absolute;inset-block-start:6px;inset-inline-start:6px;padding:0 6px;border-radius:6px;background:rgba(20,16,14,.72);color:#fff;
  font:500 10px/1.7 var(--mono);letter-spacing:.02em}
.tt{font-weight:700;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tm{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:12px;color:var(--stone)}
.n{font-family:var(--mono);font-weight:500}
.tm span{display:inline-flex;align-items:center;gap:4px}
.tm svg{inline-size:14px;block-size:14px}
.m-sc b{font:500 13px var(--mono);color:var(--wood)}
.m-sc.imdb svg{color:#E3A008}
.m-sc small{font-size:11px;color:var(--stone)}
.empty{color:var(--stone);text-align:center;padding:32px 8px;font-size:14px}

/* the cinema cards */
.clist{display:grid;gap:10px}
@media (min-width:760px){.clist{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
.ccard{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.ccard:active{background:#F7F1E8}
.cc-b{display:grid;gap:2px;min-inline-size:0}
.cc-b b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-b small{color:var(--stone);font-size:13px}
.cc-km{color:var(--door);font-weight:500}
.cc-km:not(:empty)::before{content:" · ";color:var(--stone)}
.cc-n{display:grid;justify-items:center;line-height:1.1}
.cc-n b{font:500 20px var(--mono);color:var(--saff)}
.cc-n small{font-size:11px;color:var(--stone)}
.cc-logo{display:grid;place-items:center;inline-size:52px;block-size:52px;border-radius:12px;color:#fff;font-weight:700;font-size:12px;line-height:1.1;text-align:center;padding:4px;background:#5a4c40}
.cc-logo.sm{inline-size:38px;block-size:38px;font-size:10px;border-radius:10px}
.cc-logo.lg{inline-size:64px;block-size:64px;font-size:14px}
.ch-vox{background:#C8102E}.ch-reel{background:#1A1A1A}.ch-novo{background:#5B2C83}.ch-star{background:#D4A017;color:#241a00}
.ch-cineroyal{background:#8C1C2E}.ch-roxy{background:#0E5B5B}.ch-cinemacity{background:#E05A1E}
.geo-msg{font-size:13px;color:var(--stone);padding-block-end:8px}

/* ── pages that slide in: a back bar, sticky ── */
.pg{min-block-size:100dvh;padding-block-end:56px}
.pgbar{position:sticky;inset-block-start:0;z-index:20;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;
  block-size:calc(var(--head) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 6px 0;background:var(--night)}
.pgbar h1{font-size:17px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-back{display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:22px;color:var(--wood)}
.pg-back svg{inline-size:22px;block-size:22px}

/* the film's screen: its trailer still, the poster card over it, the facts as chips */
.fhero{position:relative;overflow:hidden;background:var(--pc);color:#fff;margin-block-start:calc(-1 * (var(--head) + env(safe-area-inset-top)));
  padding-block-start:calc(var(--head) + env(safe-area-inset-top) + 64px)}
.fh-still{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;filter:brightness(.62)}
.fhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,14,.15) 20%,rgba(20,16,14,.9) 100%)}
.film .pgbar{background:transparent;color:#fff;transition:background-color .2s}
.film .pgbar .pg-back{color:#fff;background:rgba(20,16,14,.35)}
.film.scrolled .pgbar{background:var(--night);color:var(--wood)}
.film.scrolled .pgbar .pg-back{color:var(--wood);background:none}
.film .pgbar h1{opacity:0;transition:opacity .2s}
.film.scrolled .pgbar h1{opacity:1}
.fh-in{position:relative;z-index:1;display:flex;gap:16px;align-items:flex-end;padding:0 var(--gut) 20px}
.pst.big{inline-size:118px;flex:none;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.fh-t{display:grid;gap:6px;min-inline-size:0}
.ft{font-size:24px;line-height:1.25;font-weight:700}
.fte{font-size:13px;opacity:.85}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchips span{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:8px;background:rgba(255,255,255,.16);font-size:13px}
.fchips svg{inline-size:14px;block-size:14px}
.fchips .sc b{font:500 13px var(--mono)}
.fchips .sc.imdb{background:#E3A008;color:#1a1300}
.fchips .age2{font:500 12px var(--mono)}
.fg{font-size:13px;opacity:.85}
@media (min-width:760px){.pst.big{inline-size:180px}.ft{font-size:34px}.fhero{padding-block-start:calc(var(--head) + 140px)}}

.acts{display:flex;gap:10px;padding:14px var(--gut) 0;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:46px;padding-inline:18px;border-radius:12px;border:0;
  font-weight:500;font-size:15px;cursor:pointer}
.btn svg{inline-size:18px;block-size:18px}
.btn.ghost{background:var(--paper);border:1px solid var(--line);color:var(--wood)}
.btn.velvet{background:var(--velvet);color:var(--on)}
.btn.wide{inline-size:100%}
.acts .btn{flex:1}

.sec{padding:22px var(--gut) 0}
.sec h2{font-size:18px;font-weight:700;margin-block-end:10px}
.verdict{margin:16px var(--gut) 0;padding:14px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.verdict b{font-size:16px}
.verdict.v-y b{color:var(--door)}.verdict.v-m b{color:var(--saff)}.verdict.v-s b{color:var(--red)}
.verdict p{font-size:14px;color:var(--sand);margin-block-start:4px;line-height:1.7}
.syn{font-size:15px;line-height:1.8;color:var(--sand)}
.crew{font-size:14px;line-height:1.8;color:var(--sand)}
.lead{font-size:14px;color:var(--stone);margin-block-end:12px}

/* the day switch, the city chips, the cinemas and their times */
.segs{display:inline-flex;padding:4px;border-radius:12px;background:#E9E1D5;margin-block-end:4px}
.seg{border:0;background:none;padding:7px 22px;border-radius:9px;font-size:14px;color:var(--stone);cursor:pointer}
.seg.on{background:var(--paper);color:var(--wood);font-weight:700;box-shadow:0 1px 3px rgba(42,36,32,.15)}
.cblock{padding:12px 0;border-block-end:1px solid var(--line)}
.cb-h{display:flex;align-items:center;gap:10px;margin-block-end:10px}
.cb-h b{font-size:15px}
.times{display:flex;flex-wrap:wrap;gap:8px}
.tbtn{display:grid;justify-items:center;min-inline-size:72px;padding:7px 10px;border-radius:10px;border:1px solid var(--line);background:var(--paper);cursor:pointer;line-height:1.25}
.tbtn b{font:500 16px var(--mono)}
.tbtn small{font-size:11px;color:var(--door);max-inline-size:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbtn i{font:500 12px var(--mono);color:var(--saff)}
/* a time that has gone stays in today's list, grey and not pressable (owner 2026-10-19) */
.tbtn.past{background:transparent;border-color:transparent;color:var(--stone);opacity:.55;cursor:default}
.tbtn.past small,.tbtn.past i{color:inherit}
.tbtn.soon{border-color:var(--door)}
.tbtn.on{background:var(--velvet);border-color:var(--velvet);color:var(--on)}
.tbtn.on small,.tbtn.on i{color:var(--on)}

/* the cinema page */
.chead{display:flex;gap:14px;align-items:center;padding:8px var(--gut) 0}
.chead h2{font-size:22px}
.chead p{font-size:13px;color:var(--stone);margin-block-start:2px}
.films{display:grid;gap:4px;margin-block-start:8px}
.frow{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:14px 0;border-block-end:1px solid var(--line)}
.pst.sm{border-radius:10px;box-shadow:0 4px 12px rgba(42,36,32,.14)}
.fr-b{display:grid;gap:6px;align-content:start;min-inline-size:0}
.fr-t{font-weight:700;font-size:16px}
.fr-m{font-size:13px;color:var(--stone)}

/* the ticket: a sheet that rises from the bottom */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(28,22,19,.45);animation:fade var(--m-page) var(--ease-out)}
.sheet{position:fixed;inset-inline:0;inset-block-end:0;z-index:41;max-block-size:88dvh;overflow-y:auto;background:var(--paper);border-radius:18px 18px 0 0;
  padding:0 var(--gut) calc(18px + env(safe-area-inset-bottom));animation:rise var(--m-page) var(--ease-sheet);box-shadow:0 -8px 30px rgba(28,22,19,.18)}
.sheet.closing{animation:sink .22s ease-in forwards}
.grab{block-size:28px;display:grid;place-items:center;touch-action:none;cursor:grab}
.grab::before{content:"";inline-size:40px;block-size:4px;border-radius:2px;background:var(--line)}
@keyframes rise{from{transform:translateY(100%)}}
@keyframes sink{to{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}
@media (min-width:760px){.sheet{inset-inline:auto;inset-block:auto 24px;inset-inline-start:50%;translate:-50% 0;inline-size:440px;border-radius:18px}}
.tk{display:grid;gap:14px}
.tk-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.tk-cin{font-size:13px;color:var(--stone)}
.tk-top h3{font-size:19px;line-height:1.3}
.tk-when{font-size:13px;color:var(--sand);margin-block-start:4px;line-height:1.6}
.tk-time{display:grid;justify-items:center;padding:8px 14px;border-radius:12px;background:var(--night);flex:none}
.tk-time b{font:500 26px var(--mono)}
.tk-time small{font-size:12px;color:var(--stone)}
.tk-seats{inline-size:100%;border-collapse:collapse}
.tk-seats td{padding:10px 0;border-block-end:1px solid var(--line);font-size:15px}
.tk-seats td:last-child{text-align:end;font:500 16px var(--mono);color:var(--saff)}
.tk-seats td small{color:var(--stone);font:12px var(--font)}

/* the film's synopsis, up top: three lines, «المزيد» opens the rest */
.about{padding:14px var(--gut) 0}
.syn.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.about.open .syn.clamp{-webkit-line-clamp:unset;display:block}
.more{border:0;background:none;padding:4px 0;color:var(--door);font-weight:500;font-size:14px;cursor:pointer}
/* «أقرب عرض لك»: one card, a tap opens its ticket */
.nearest{padding:18px var(--gut) 0}
.nearest h2{font-size:17px;margin-block-end:8px}
.nearest .sr{cursor:pointer;inline-size:100%;text-align:start;font:inherit;color:inherit}
/* the ticket's «نفس الفيلم أرخص» line */
.tk-alt{display:block;padding:10px 12px;border-radius:12px;background:rgba(31,111,120,.08);color:var(--door);font-size:14px;line-height:1.6;border:0;text-align:start;cursor:pointer;font-family:inherit;inline-size:100%}
.tk-alt b{color:var(--wood)}
/* the footer: the rest of the site in one quiet line */
.foot{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:28px var(--gut) calc(28px + env(safe-area-inset-bottom));margin-block-start:24px;border-block-start:1px solid var(--line);font-size:14px}
.foot a{color:var(--sand);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;padding-block:8px}
.foot small{flex-basis:100%;color:var(--stone);font-size:12px}
.app .foot{margin-block-start:0}
/* «اسأل الفيلم» */
.ask-f{display:flex;gap:8px}
.ask-f input{flex:1;min-inline-size:0;min-block-size:48px;padding-inline:14px;border-radius:12px;border:1px solid var(--line);background:var(--paper);font:inherit;font-size:16px;color:var(--wood)}
.ask-f input:focus{outline:2px solid var(--door);outline-offset:-1px}
.ask .chips{padding-block:12px 0}
.ask-out{display:grid;gap:10px;margin-block-start:12px}
.ask-a{padding:12px 14px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);animation:pop var(--m-page) var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
.ask-qq{font-size:13px;color:var(--stone);margin-block-end:6px}
.ask-t{font-size:15px;line-height:1.75}
.ask-src{display:block;font-size:12px;color:var(--stone);margin-block-start:6px}
.ask-sp summary{cursor:pointer;color:var(--velvet);font-weight:500;list-style:none}
.ask-sp summary::-webkit-details-marker{display:none}
.ask-sp[open] summary{margin-block-end:6px}
.ask-w{color:var(--stone);animation:breathe 1.1s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.4}}

/* the trailer */
.trl{position:fixed;inset:0;z-index:60;background:rgba(10,8,7,.92);display:grid;place-items:center;padding:16px;animation:fade .2s}
.trl iframe{inline-size:min(960px,100%);aspect-ratio:16/9;border:0;border-radius:12px}
.trl button{position:absolute;inset-block-start:calc(12px + env(safe-area-inset-top));inset-inline-end:12px;inline-size:44px;block-size:44px;border-radius:22px;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:22px;cursor:pointer}

:focus-visible{outline:2px solid var(--door);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── the merged top (sample): «الشاشة» as a medium card, swiped; «يبدأ قريب منك» with the flip clock ── */
.bill{margin:4px calc(-1 * var(--gut)) 0}
.bb-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--gut)}
.bb-row::-webkit-scrollbar{display:none}
.bb{position:relative;flex:0 0 100%;scroll-snap-align:center;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--pc);color:#fff}
.bb img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.bb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,14,0) 35%,rgba(20,16,14,.88))}
.bb-t{position:absolute;z-index:1;inset-inline:16px;inset-block-end:14px;display:grid;gap:2px}
.bb-t small{font-size:12px;opacity:.85}
.bb-t b{font-size:22px;line-height:1.2}
.bb-t i{font-size:13px;opacity:.9}
.bb-dots{display:flex;justify-content:center;gap:5px;padding-block:8px 2px}
.bb-dots i{inline-size:6px;block-size:6px;border-radius:3px;background:var(--line);transition:inline-size .3s,background .3s}
.bb-dots i.on{inline-size:18px;background:var(--saff)}
@media (min-width:900px){.bb{flex-basis:860px}}
.soon{padding-block:14px 6px}
.soon h2{font-size:17px;margin-block-end:8px}
.soon h2 span{color:var(--door)}
.sb{display:grid;gap:8px}
.sr{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.sr:active{transform:scale(.97)}
.flip{display:flex;gap:2px;direction:ltr}
.flip i{display:grid;place-items:center;inline-size:22px;block-size:32px;border-radius:5px;background:var(--wood);color:var(--on);font:500 18px var(--mono);
  background-image:linear-gradient(transparent 49%,rgba(0,0,0,.6) 50%,transparent 51%)}
.flip i.c{background:none;color:var(--stone);inline-size:8px}
.sr-b{display:grid;min-inline-size:0}
.sr-b b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-b small{font-size:12px;color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-e{display:grid;justify-items:end;line-height:1.2}
.sr-e small{font-size:12px;color:var(--door);font-weight:500}
.sr-e b{font:500 15px var(--mono);color:var(--saff)}
.empty.sm{padding:8px}

/* ── the time card (owner: «شكل الساعة… أريد شي أفضل»): the hour large, its part of the day under it, on the plaster ── */
.sr{grid-template-columns:auto 1fr}
.tcard{display:grid;justify-items:center;align-content:center;min-inline-size:76px;padding:8px 10px;border-radius:12px;background:var(--night);
  border:1px solid var(--line);line-height:1.1}
.tcard b{font:500 22px var(--mono);color:var(--wood);letter-spacing:-.02em}
.tcard small{font-size:12px;color:var(--stone);margin-block-start:2px}
.sr-b{gap:2px}
.sr-m{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block-start:4px}
.eta{font-style:normal;font-size:12px;font-weight:500;color:var(--door);background:rgba(31,111,120,.1);padding:2px 9px;border-radius:10px}
.eta.hot{color:#fff;background:var(--door);animation:etaglow 1.6s ease-in-out infinite alternate}
@keyframes etaglow{to{box-shadow:0 0 0 4px rgba(31,111,120,.18)}}
.pr{display:inline-flex;align-items:center;gap:3px;font:500 15px var(--mono);color:var(--saff)}
/* the dirham sign beside every price */
.aed{inline-size:.95em;block-size:.95em;vertical-align:-.12em;margin-inline-start:2px;flex:none}
.tbtn i{display:inline-flex;align-items:center;gap:1px}
.tbtn b sup{font:500 10px var(--font);margin-inline-start:2px;vertical-align:.5em;color:var(--stone)}
.tbtn.on b sup{color:var(--on)}
.tk-seats td:last-child .aed{color:var(--saff)}

/* «يبدأ قريب منك»: a small poster beside the film, the chain's mark beside the cinema (owner 2026-10-18) */
.sr{grid-template-columns:auto auto 1fr}
.sr-p{inline-size:40px;block-size:60px;object-fit:cover;border-radius:7px;box-shadow:0 3px 8px rgba(42,36,32,.18)}
.sr-b small{display:flex;align-items:center;gap:6px}
.chm{flex:none;font-style:normal;font-size:10px;font-weight:700;line-height:1;color:#fff;padding:3px 6px;border-radius:5px;background:#5a4c40}
.chm.ch-vox{background:#C8102E}.chm.ch-reel{background:#1A1A1A}.chm.ch-novo{background:#5B2C83}.chm.ch-star{background:#D4A017;color:#241a00}
.chm.ch-cineroyal{background:#8C1C2E}.chm.ch-roxy{background:#0E5B5B}.chm.ch-cinemacity{background:#E05A1E}
/* the chains' own app icons (owner 2026-10-19): the square is the icon; the tag is the fallback */
.cc-logo.img{padding:0;overflow:hidden;background:none}.cc-logo.img img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.chl{display:inline-block;flex:none;inline-size:20px;block-size:20px;border-radius:5px;vertical-align:-5px}

/* the bottom bar (owner 2026-10-19): السينمات · الأفلام · قريباً, on every page; it stays put while pages slide */
:root{--tb:60px}
.tabbar{position:fixed;inset-inline:0;inset-block-end:0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);
  block-size:calc(var(--tb) + env(safe-area-inset-bottom));padding-block-end:env(safe-area-inset-bottom);
  background:rgba(255,253,249,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-block-start:1px solid var(--line);view-transition-name:tabbar}
.tabbar a,.tabbar button{display:grid;place-items:center;align-content:center;gap:2px;border:0;background:none;color:var(--stone);
  font:inherit;font-size:11px;font-weight:500;text-decoration:none;cursor:pointer;transition:color .15s,transform .15s var(--ease-out)}
.tabbar svg{inline-size:22px;block-size:22px}
.tabbar .on{color:var(--saff);font-weight:700}
.tabbar a:active,.tabbar button:active{transform:scale(.94)}
::view-transition-group(tabbar){animation:none}
.pane{max-block-size:calc(100dvh - var(--head) - var(--tb) - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
.pg{padding-block-end:calc(56px + var(--tb) + env(safe-area-inset-bottom))}
.foot{padding-block-end:calc(28px + var(--tb) + env(safe-area-inset-bottom))}
.th-t{margin:0;text-align:center;font-size:17px;font-weight:700}
/* السينمات: «أقرب سينما», the cities, a city's cinemas */
.nearbtn{display:flex;align-items:center;justify-content:center;gap:8px;inline-size:100%;min-block-size:52px;margin-block:8px 16px;
  border:1.5px solid var(--door);border-radius:var(--r);background:var(--paper);color:var(--door);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.nearbtn:active,.crow:active{transform:scale(.98)}
.cities{display:grid;border-block-start:1px solid var(--line)}
.crow{display:grid;grid-template-columns:1fr auto 20px;align-items:center;gap:10px;min-block-size:64px;padding-inline:4px;border:0;
  border-block-end:1px solid var(--line);background:none;color:var(--wood);font:inherit;text-align:start;cursor:pointer;transition:transform .15s var(--ease-out)}
.crow b{font-size:18px}.crow small{color:var(--stone);font-size:13px}.crow svg{color:var(--stone)}
.cv{display:flex;align-items:center;gap:6px;margin-block:4px 12px}
.cv h2{margin:0;font-size:20px}
.cv-back{display:inline-flex;align-items:center;gap:2px;min-block-size:44px;padding-inline:2px 10px;border:0;background:none;color:var(--stone);font:inherit;font-size:14px;cursor:pointer}
/* قريباً: by release day */
.cday{margin:20px 0 10px;font-size:17px}.cday small{color:var(--door);font-weight:500;font-size:13px;margin-inline-start:6px}
.ct{border:0;background:none;padding:0;font:inherit;text-align:start;color:inherit;cursor:pointer}
.ct .tp{position:relative}
.cplay{position:absolute;inset-block-end:8px;inset-inline-end:8px;display:grid;place-items:center;inline-size:34px;block-size:34px;border-radius:50%;background:rgba(20,16,14,.6);color:#fff}
.cplay svg{inline-size:16px;block-size:16px}

/* «للعائلة»: the content flags as quiet tags, the source in small type */
.fam-cr{margin:0 0 10px;font-size:15px;font-weight:500}.fam-age{margin:0 0 8px;font-size:15px}.fam-age b{font-family:var(--mono);font-weight:500}
.fam-f{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fam-f li{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:13px}
.fam-sp summary{cursor:pointer;min-block-size:44px;display:flex;align-items:center;color:var(--stone);font-size:14px}
.fam-src{margin:4px 0 0;color:var(--stone);font-size:12px;line-height:1.6}
.fam-src a{color:inherit;text-decoration:underline;text-underline-offset:3px}