/* cinema.css — «سینمای بوفی» (cinema_lib.php). Dark and full width: the one
   page that leaves the site's 1100px column (his call, 2026-10-27). Sizes and
   colours from docs/cinema-mock/canvas/project/Main.dc.html (desktop) and
   Phone.dc.html; below 768px the phone artboard's layout. Nothing under 13px;
   Javan at 400 only. */

#appMain:has(> .cin){background:#0b0b0e;padding:0!important;max-width:none!important}
.cin{--c-bg:#0b0b0e;--c-card:#1d1c22;--c-gold:#e7c873;--c-red:#e8112d;--c-mut:#a8a6b0;--c-pad:4%;
  background:var(--c-bg);color:#fff;font-family:Vazirmatn,system-ui,sans-serif;direction:rtl;
  width:100%;max-width:none;margin:0;box-sizing:border-box;overflow:hidden;min-height:100vh}
.cin *{box-sizing:border-box}
.cin a{color:#fff;text-decoration:none}
.cin .ttl{font-family:Javan,Vazirmatn,system-ui,sans-serif;font-weight:400;font-synthesis:none}
.cvh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}

/* ── the cinema's own bar ── */
.cnav{display:flex;align-items:center;gap:28px;padding:20px var(--c-pad);position:relative;z-index:4}
.cnav.cover{position:absolute;top:0;left:0;right:0;background:linear-gradient(to bottom,rgba(11,11,14,.7),rgba(11,11,14,0))}
.cbrand{font-size:30px;color:var(--c-gold)!important;white-space:nowrap;line-height:1.2}
.ctabs{display:flex;align-items:center;gap:28px;flex:1;min-width:0}
.ctab{font-size:16px;font-weight:700;color:#d8d6de!important;padding-bottom:4px;border-bottom:2px solid transparent;display:flex;align-items:center;gap:6px;white-space:nowrap}
.ctab:hover{color:#fff!important}
.ctab.on{color:#fff!important;font-weight:800;border-bottom-color:var(--c-gold)}
.cdot{width:8px;height:8px;border-radius:50%;background:var(--c-red);flex:none;display:inline-block}
.csrch{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex:none}
.csrch:hover{background:rgba(255,255,255,.22)}
.csrch svg{width:20px;height:20px}

/* ── billboard ── */
.chero{position:relative}
.cbb{position:relative;height:clamp(440px,44vw,640px);overflow:hidden}
.cbs{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s,visibility 0s .7s}
.cbs.on{opacity:1;visibility:visible;transition:opacity .7s}
.cbi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.cbg{position:absolute;inset:0;background:linear-gradient(to left,rgba(11,11,14,.92) 0%,rgba(11,11,14,.55) 38%,rgba(11,11,14,0) 70%),
  linear-gradient(to top,#0b0b0e 0,rgba(11,11,14,0) 220px)}
.cbt{position:absolute;right:var(--c-pad);bottom:120px;width:min(520px,52%);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cbk{background:var(--c-gold);color:#141317;padding:3px 10px;border-radius:6px;font-size:14px;font-weight:800}
.cbn{margin:0;font-size:clamp(56px,7.2vw,104px);line-height:1.05;color:#fff}
.cbm{font-size:15px;font-weight:600;color:#d8d6de}
.cbd{margin:0;font-size:17px;line-height:1.8;color:#ecebf0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cbx{display:flex;gap:12px;margin-top:6px}
.cb1,.cb2{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:8px;font-size:18px;white-space:nowrap}
.cb1{background:#fff;color:#0b0b0e!important;font-weight:800}
.cb1:hover{background:#e8e6ec}
.cb1 svg{width:22px;height:22px}
.cb2{background:rgba(255,255,255,.18);font-weight:700;padding:0 24px}
.cb2:hover{background:rgba(255,255,255,.28)}
.cph{display:none}
.cbdots{position:absolute;left:var(--c-pad);bottom:128px;display:flex;gap:8px;z-index:3}
.cbdots button{width:14px;height:4px;border-radius:2px;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer;transition:width .3s,background .3s}
.cbdots button.on{width:28px;background:#fff}
.cbdots button::before{content:"";display:block;margin:-12px -4px;height:28px}

/* ── rails ── */
.crows{position:relative;display:flex;flex-direction:column;gap:44px;padding:8px 0 60px}
.has-bb .crows{margin-top:-70px}
.crh{display:flex;align-items:baseline;gap:14px;padding:0 var(--c-pad) 12px}
.crh h2{margin:0;font-size:26px;line-height:1.3;display:flex;align-items:center;gap:10px;color:#fff}
.crh h2 .cdot{width:10px;height:10px}
.crm{font-size:14px;font-weight:700;color:var(--c-gold)!important;white-space:nowrap}
.crm:hover{text-decoration:underline}
.crn{font-size:13px;color:var(--c-mut)}
.crr{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:16px var(--c-pad) 24px;margin:-16px 0 -24px;scrollbar-width:none;overscroll-behavior-x:contain}
.crr::-webkit-scrollbar{display:none}

/* the ‹ › buttons strip-nav.js adds: Netflix's full-height edges (mockup) */
.cin .strp-navwrap{position:relative}
.cin .strp-nav{display:none;position:absolute;top:0!important;bottom:10px;height:auto!important;width:56px!important;transform:none!important;border:0!important;margin:0!important;border-radius:0!important;box-shadow:none!important;cursor:pointer;z-index:6;
  align-items:center;justify-content:center;color:#fff;opacity:.85;transition:opacity .15s}
.cin .strp-nav svg{width:30px;height:30px}
.cin .strp-nav:hover{opacity:1}
.cin .strp-nav-left{left:0;background:linear-gradient(to right,rgba(11,11,14,.95),rgba(11,11,14,0))}
.cin .strp-nav-right{right:0;background:linear-gradient(to left,rgba(11,11,14,.95),rgba(11,11,14,0))}
.cin .strp-nav:disabled{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine) and (min-width:768px){
  .cin .strp-nav:not([hidden]){display:flex}
}

/* ── cards ── */
.cc{flex:none;display:flex;flex-direction:column;gap:8px;position:relative;border-radius:10px;
  transition:transform .25s ease,box-shadow .25s ease,background .25s;transform-origin:center 40%}
.cpic{position:relative;display:block;border-radius:8px;overflow:hidden;background:var(--c-card)}
.cpic img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.cnop{position:absolute;inset:0;background:linear-gradient(135deg,#23222a,#141318)}
.cw{width:300px;padding-bottom:10px}.cw .cpic{aspect-ratio:16/9}
.cp{width:196px;padding-bottom:10px}.cp .cpic{aspect-ratio:2/3}
.ctt{font-size:16px;font-weight:800;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:2px}
.cp .ctt{font-size:15px}
.csub{display:grid;font-size:13px;color:var(--c-mut);line-height:1.5;padding-inline:2px}
.cs1,.cs2{grid-area:1/1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs2{visibility:hidden;color:#c9c6cf}
.cbdg{position:absolute;font-size:13px;font-weight:800;line-height:1.5;padding:1px 8px;border-radius:4px;color:#fff}
.cnew,.clive{top:8px;right:8px;background:var(--c-red)}
.cep{bottom:8px;left:8px;background:rgba(0,0,0,.72);font-weight:700}
.cmem{bottom:6px;left:6px;background:var(--c-gold);color:#141317}
.cplay{position:absolute;left:10px;bottom:10px;width:40px;height:40px;border-radius:50%;background:#fff;color:#0b0b0e;
  display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.cplay svg{width:18px;height:18px}
.cw .cep~.cplay{bottom:40px}

/* desktop hover: the card grows a little and tells more (mockup) */
@media (hover:hover) and (pointer:fine){
  .cc:hover{transform:scale(1.06) translateY(-6px);z-index:3;background:var(--c-card);box-shadow:0 18px 40px rgba(0,0,0,.6)}
  .cc:hover .cpic{border-radius:10px 10px 0 0}
  .cw:hover .ctt,.cp:hover .ctt,.cw:hover .csub,.cp:hover .csub{padding-inline:10px}
  .cc:hover .cplay{opacity:1;transform:none}
  .cc:hover .cs1{visibility:hidden}
  .cc:hover .cs2{visibility:visible}
  .ct:hover,.cv:hover{background:transparent;box-shadow:none}
  .ct:hover .cpic{box-shadow:0 14px 30px rgba(0,0,0,.6)}
  .ct:hover .cpic{border-radius:8px}
  .cc:hover .ctt{color:var(--c-gold)}
}

/* top 10: the big outlined number beside the picture */
.crt .crr{gap:6px}
.ct{width:330px;flex-direction:row;align-items:flex-end;gap:0}
.cnum{font-family:Vazirmatn,sans-serif;font-size:150px;font-weight:900;line-height:.78;color:var(--c-bg);
  -webkit-text-stroke:3px #6d6a76;paint-order:stroke fill;min-width:96px;text-align:center;flex:none;letter-spacing:-.06em;user-select:none}
.cnum.c10{min-width:150px}
.ct .cbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ct .cpic{aspect-ratio:16/9}
.ct .ctt{font-size:15px}
.ct:has(.c10){width:384px}
.ctf{width:250px}.ctf .cpic{aspect-ratio:2/3}
.ctf:has(.c10){width:304px}

/* live TV: logos on a dark card */
.cv{width:200px}
.cv .cpic{height:112px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:18px;background:#1d1c22}
.cv .cpic img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cvname{font-size:16px;font-weight:800;text-align:center}
.cv .ctt{font-size:14px;font-weight:700;color:#d8d6de;text-align:center}
.cv:hover .cpic{background:#2a2930}

/* ── the full list (?g=) ── */
.cin-grid .cnav{border-bottom:1px solid #1f1e25}
.cgh{display:flex;align-items:baseline;gap:14px;padding:28px var(--c-pad) 4px}
.cgh h1{margin:0;font-size:34px;line-height:1.3}
.cchips{display:flex;flex-wrap:wrap;gap:8px;padding:14px var(--c-pad) 22px}
.cchip{padding:7px 14px;border-radius:999px;border:1.5px solid #4a4852;font-size:14px;font-weight:700;white-space:nowrap}
.cchip span{color:var(--c-mut);font-weight:600}
.cchip.on{background:#fff;color:#0b0b0e!important;border-color:#fff}
.cchip.on span{color:#55525e}
.cchip:hover{border-color:#8a8794}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px 12px;padding:0 var(--c-pad) 40px}
.cgrid.cgp{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.cgrid .cc{width:auto}
.cpg{display:flex;justify-content:space-between;align-items:center;padding:0 var(--c-pad) 60px;font-size:15px;color:var(--c-mut)}
.cpg a{color:var(--c-gold)!important;font-weight:700;padding:10px 4px}

/* ── tablet: the same layout, a little smaller ── */
@media (max-width:1100px){
  .cnav{gap:18px}.ctabs{gap:18px}
  .cbrand{font-size:26px}
  .cbt{width:min(480px,62%);bottom:100px}
  .cbdots{bottom:108px}
  .cw{width:260px}.cp{width:170px}
}

/* ── phone: the phone artboard ── */
@media (max-width:767px){
  .cin{--c-pad:16px}
  .cnav,.cnav.cover{position:relative;background:none;gap:8px;padding:12px 16px;overflow-x:auto;scrollbar-width:none}
  .cnav::-webkit-scrollbar{display:none}
  .cbrand{font-size:22px;margin-left:6px}
  .ctabs{gap:8px;flex:none}
  .ctab{padding:7px 14px;border-radius:999px;border:1.5px solid #4a4852;font-size:14px;color:#fff!important}
  .ctab.on{background:#fff;color:#0b0b0e!important;border-color:#fff}
  .csrch{display:none}
  .cbb{margin:0 16px;height:460px;border-radius:14px}
  .cbi{object-position:60% 30%}
  .cbg{background:linear-gradient(to top,rgba(11,11,14,.97) 0%,rgba(11,11,14,.6) 40%,rgba(11,11,14,0) 70%)}
  .cbt{inset:auto 0 0 0;width:auto;padding:18px;align-items:center;text-align:center;gap:10px}
  .cbk{font-size:13px;padding:2px 10px}
  .cbn{font-size:clamp(44px,15vw,72px);line-height:1.05}
  .cbm{font-size:14px}
  .cbd{display:none}
  .cbx{width:100%;gap:10px;margin-top:0}
  .cb1,.cb2{flex:1;height:48px;font-size:16px;padding:0 12px;gap:8px}
  .cb1 svg{width:20px;height:20px}
  .cb2{background:rgba(255,255,255,.2)}
  .cdk{display:none}.cph{display:inline}
  .cbdots{left:50%;transform:translateX(-50%);bottom:auto;top:14px}
  .has-bb .crows{margin-top:0}
  .crows{gap:30px;padding:28px 0 40px}
  .crh{justify-content:space-between;padding:0 16px 10px}
  .crh h2{font-size:22px;gap:8px}
  .crh h2 .cdot{width:9px;height:9px}
  .crt .crn,.crv .crn{display:none}
  .crr{gap:8px;padding:12px 16px 16px;margin:-12px 0 -16px;scroll-snap-type:x proximity}
  .cc{scroll-snap-align:start}
  .cw{width:230px;gap:6px}
  .cw .ctt{font-size:15px}
  .cp{width:128px;gap:6px}
  .cp .ctt{font-size:14px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4}
  .cp .csub{display:none}
  .cnew{display:none}
  .cep{bottom:6px;left:6px;padding:1px 7px}
  .crt .crr{gap:2px}
  .ct{width:200px}
  .ct:has(.c10){width:244px}
  .cnum{font-size:96px;-webkit-text-stroke:2.5px #6d6a76;min-width:58px}
  .cnum.c10{min-width:100px}
  .ct .cpic{aspect-ratio:16/10}
  .ct .ctt{display:none}
  .ctf{width:160px}.ctf:has(.c10){width:204px}
  .ctf .cpic{aspect-ratio:2/3}
  .cv{width:140px}
  .cv .cpic{height:84px;padding:14px}
  .cv .ctt{display:none}
  .clive{display:none}
  .cmem{padding:0 6px}
  .cgh{padding:20px 16px 0}.cgh h1{font-size:26px}
  .cchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:12px 16px 18px}
  .cchips::-webkit-scrollbar{display:none}
  .cgrid{grid-template-columns:1fr 1fr;gap:20px 10px;padding:0 16px 30px}
  .cgrid.cgp{grid-template-columns:repeat(3,1fr)}
  .cgrid .cw .ctt{font-size:14px}
  .cpg{padding:0 16px 40px}
}

/* ── the title pages: film, series, episode (cin_*_page in cinema_lib.php) ── */
.cin-watch .cnav{border-bottom:1px solid #1f1e25}
.cwp{background:#000;display:flex;justify-content:center}
.cwp .fplayer,.cwp .fgate{width:100%;max-width:calc((100vh - 170px) * 16 / 9);margin:0 auto;border-radius:0}
.cwp .fplayer video,.cwp .fplayer .fyt{max-height:calc(100vh - 170px)}
.cwp .fgate{min-height:clamp(320px,40vw,560px);height:auto!important;max-height:none!important;margin:0!important;border:0!important;box-shadow:none!important;aspect-ratio:auto!important;overflow:visible!important;padding:28px 16px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1d1c22 0,#000 70%)}
.cwi{padding:24px var(--c-pad) 4px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cwi>*,.cwit>*{max-width:820px}
.cwk{font-size:15px;font-weight:700;color:var(--c-gold)!important}
a.cwk:hover{text-decoration:underline}
.cwh{margin:0;font-size:clamp(34px,4vw,54px);line-height:1.25;color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.cwl{font-family:Vazirmatn,system-ui,sans-serif;font-size:18px;font-weight:800;background:#fff;color:#0b0b0e;padding:5px 14px;border-radius:8px;line-height:1.4}
.cwi .cbd{-webkit-line-clamp:unset;display:block}
.cwx{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;align-items:center}
.cin .subb{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 20px;border-radius:8px;border:1.5px solid #4a4852;background:transparent;color:#fff;font:700 16px Vazirmatn,system-ui,sans-serif;cursor:pointer;margin:0}
.cin .subb:hover{border-color:#8a8794}
.cin .subb.on{border-color:var(--c-gold);color:var(--c-gold)}
.cwab{margin-top:10px;width:100%}
.cwab summary{cursor:pointer;font-size:15px;font-weight:700;color:#d8d6de;padding:6px 0;list-style-position:inside}
.cwab .fbody{color:#c9c6cf!important;font-size:15px;line-height:1.9;margin-top:6px}
.cwab .fbody *{color:inherit!important;background:none!important}
.cnow{top:8px;right:8px;background:var(--c-gold);color:#141317}
.ccur .cpic{box-shadow:inset 0 0 0 3px var(--c-gold)}
.ccur .cpic img{opacity:.75}
.cwi-f{flex-direction:row;align-items:flex-start;gap:24px}
.cwpost{width:170px;flex:none;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:var(--c-card);display:block;position:relative}
.cwpost img{width:100%;height:100%;object-fit:cover;display:block}
.cwit{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cwen{font-size:15px;color:var(--c-mut)}
.cwg{display:flex;flex-wrap:wrap;gap:8px}
.cin-watch .crows{padding-top:36px}
.cws{position:relative;min-height:clamp(420px,40vw,600px);overflow:hidden;display:flex;align-items:flex-end}
.cwsbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.cws:not(.cws-big) .cwsbg{filter:blur(30px) brightness(.5);transform:scale(1.2)}
.cws:not(.cws-big){min-height:0}
.cws:not(.cws-big) .cwsin{padding-top:44px}
.cwsin{position:relative;z-index:2;width:100%;display:flex;align-items:flex-end;gap:36px;padding:80px var(--c-pad) 36px}
.cwst{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cwspic{order:2;width:min(500px,44%);aspect-ratio:16/9;border-radius:12px;overflow:hidden;flex:none;box-shadow:0 22px 50px rgba(0,0,0,.65);position:relative;background:var(--c-card)}
.cwspic img{width:100%;height:100%;object-fit:cover;display:block}
.cws .cbn{font-size:clamp(46px,6vw,88px)}
.cgep{padding-bottom:8px}
.cwempty{padding:0 var(--c-pad);color:var(--c-mut);font-size:16px}
.cwhot{padding:10px var(--c-pad) 50px}
@media (max-width:767px){
  .cwp .fgate{min-height:0;padding:22px 16px}
  .crep .crn{display:none}
  .cwi{padding:18px 16px 0}
  .cwh{font-size:30px;gap:6px 10px}
  .cwl{font-size:15px;padding:3px 10px}
  .cwx{width:100%;gap:10px}
  .cwx .cb1,.cwx .cb2{flex:1 1 40%;height:48px;font-size:16px;padding:0 12px}
  .cin .subb{width:100%;justify-content:center;height:48px;font-size:15px}
  .cwi-f{gap:14px}
  .cwpost{width:100px}
  .cin-watch .crows{padding-top:26px}
  .cws{min-height:0;display:block}
  .cwsin{flex-direction:column;align-items:stretch;gap:18px;padding:16px 16px 22px}
  .cwspic{order:0;width:100%}
  .cws-big{min-height:460px;display:flex;margin:0 16px;border-radius:14px}
  .cwst{align-items:center;text-align:center;gap:10px}
  .cws .cbn{font-size:clamp(40px,13vw,64px)}
  .cws .cbx{width:100%}
  .cwsub{width:100%}
  .cgrid.cgep{grid-template-columns:1fr 1fr}
}