/* JAVCMS Classic skin: the ORIGINAL black canvas + orange gradient (#ff9600 -> #ff6000).
   Dark is the default; light keeps the same orange identity on a soft grey canvas. */
html[data-template-variant="classic"]{
 --canvas:#000;--surface:#0b0b0c;--paper:#151517;--ink:#fff;--muted:#a6a6ad;--line:#252527;
 --accent:#c24e00;--accent-soft:#2a1a0b;--coral-soft:#2a1a0b;--coral-dark:#c24e00;--link:#ffa53a;
 --readable-link:#ffa53a;--readable-muted:#a6a6ad;--focus:#ffa53a;--error:#ffb6bd;color-scheme:dark;
 --jc-bg:#000;--jc-surface:#121214;--jc-surface-2:#1c1c1f;--jc-ink:#fff;--jc-ink-soft:#d8d8dc;--jc-muted:#a6a6ad;--jc-line:#28282c;
 --jc-accent:#ff8e00;--jc-accent-grad:linear-gradient(14deg,#ff9600 0%,#ff6000 100%);--jc-accent-ink:#111;--jc-link:#ffa53a;
 --jc-thumb-bg:#141416;--jc-skel-hi:rgba(255,255,255,.07);--jc-spot:rgba(255,170,80,.22);
 --jc-radius:10px;--jc-btn-radius:10px;--jc-pill:999px;--jc-h-weight:400;--jc-h1-size:30px;--jc-sticky-top:100px;--jc-h2-size:26px;--jc-card-weight:400;--jc-title-size:26px;--jc-gutter-m:15px
}
html[data-template-variant="classic"][data-color-mode="light"]{
 --canvas:#f3f3f5;--surface:#fff;--paper:#fff;--ink:#141416;--muted:#55555c;--line:#dcdce0;
 --accent:#b84a00;--accent-soft:#fdeedd;--coral-soft:#fdeedd;--link:#a84800;--readable-link:#a84800;
 --readable-muted:#55555c;--focus:#a84800;--error:#a32638;color-scheme:light;
 --jc-bg:#f3f3f5;--jc-surface:#fff;--jc-surface-2:#f1f1f3;--jc-ink:#141416;--jc-ink-soft:#2c2c31;--jc-muted:#55555c;--jc-line:#dcdce0;
 --jc-accent:#e86a00;--jc-link:#a84800;--jc-thumb-bg:#202024;--jc-skel-hi:rgba(255,255,255,.08);--jc-spot:rgba(255,170,80,.25)
}
html[data-template-variant="classic"] body{font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-weight:400}

/* ----- header: original 80px black bar with the 2px #252527 rule; 60px on phones ----- */
html[data-template-variant="classic"] .header{background:var(--surface)!important;box-shadow:0 2px 0 var(--line)}
html[data-template-variant="classic"] .header .nav .menu a{font-size:14px;letter-spacing:.02em}
html[data-template-variant="classic"] .header .nav .menu a.active{color:var(--jc-link)!important}
html[data-template-variant="classic"] .header .right-block .jc-account{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:10px;color:var(--ink)}
html[data-template-variant="classic"] .header .right-block .jc-account:hover{color:var(--jc-link)}
html[data-template-variant="classic"] .header .right-block .jc-account .jc-ico{width:22px;height:22px}
html[data-template-variant="classic"] .header .classic-menu-toggle{display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
html[data-template-variant="classic"] .header .classic-menu-toggle::before{content:none!important;display:none!important}
html[data-template-variant="classic"] .header .classic-menu-toggle .jc-burger{width:24px;height:18px}
html[data-template-variant="classic"] .header .classic-menu-toggle .jc-burger>span{height:3px}
html[data-template-variant="classic"] .header .classic-menu-toggle .jc-burger>span:nth-child(2){top:7.5px}
html[data-template-variant="classic"] .header .classic-menu-toggle .jc-burger>span:nth-child(3){top:15px}
html[data-template-variant="classic"] .header .classic-menu-toggle[aria-expanded="true"] .jc-burger>span:nth-child(1),html[data-template-variant="classic"] .header .classic-menu-toggle[aria-expanded="true"] .jc-burger>span:nth-child(3){top:7.5px}
html[data-template-variant="classic"] .header .tui-color-toggle{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:10px}
html[data-template-variant="classic"] .header .tui-color-toggle:hover{border-color:var(--jc-accent);background:transparent}
html[data-template-variant="classic"] .header .language-menu{position:relative}
html[data-template-variant="classic"] .header .language-menu>summary{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;width:auto;min-height:44px;padding:0 8px;color:var(--ink)}
html[data-template-variant="classic"] .header .language-menu>summary::after,html[data-template-variant="classic"] .header .language-menu>summary::before{content:none!important;display:none!important}
html[data-template-variant="classic"] .header .language-menu>summary .jc-ico{width:20px;height:20px}
html[data-template-variant="classic"] .header .language-links a[aria-current]{color:var(--jc-link)!important;font-weight:700;background:var(--jc-surface-2);box-shadow:inset 0 -2px 0 var(--jc-accent)}
html[data-template-variant="classic"] .header .language-links{left:auto!important;right:auto!important;inset-inline-end:0!important;inset-inline-start:auto!important;max-width:calc(100vw - 24px)}
@media(max-width:1100px){
 html[data-template-variant="classic"] .header .tui-color-toggle [data-color-label],html[data-template-variant="classic"] .header .language-menu>summary .jc-lang-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 html[data-template-variant="classic"] .header .tui-color-toggle{width:44px;padding:0;justify-content:center}
 html[data-template-variant="classic"] .header .language-menu>summary{width:44px;padding:0;justify-content:center}
}
@media(max-width:767px){
 html[data-template-variant="classic"] .header{height:60px!important;min-height:60px}
 html[data-template-variant="classic"] .header .wrap{padding:0 8px}
 html[data-template-variant="classic"] .header .flex{height:60px;flex-wrap:nowrap}
 html[data-template-variant="classic"] .header .logo{width:auto;max-width:112px;margin:0}
 html[data-template-variant="classic"] .header .logo img{width:auto;height:34px;max-height:34px;max-width:112px}
 html[data-template-variant="classic"] .header .classic-menu-toggle{min-width:40px;min-height:40px;padding:6px}
 html[data-template-variant="classic"] .header .right-block{gap:0}
 html[data-template-variant="classic"] .header .right-block>*{flex:none}
 html[data-template-variant="classic"] .header .tui-color-toggle{width:40px;min-width:40px;height:40px;padding:0;justify-content:center;border:0!important;background:transparent!important}
 html[data-template-variant="classic"] .header .tui-color-toggle [data-color-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 html[data-template-variant="classic"] .header .right-block .jc-account,html[data-template-variant="classic"] .header .right-block .link-icon{min-width:40px;min-height:40px}
 html[data-template-variant="classic"] .header .language-menu>summary{width:40px;min-width:40px;min-height:40px;padding:0;justify-content:center}
 html[data-template-variant="classic"] .header .language-menu>summary .jc-lang-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 html[data-template-variant="classic"] .header .language-menu>.language-links{top:52px}
 html[data-template-variant="classic"] body{padding-top:60px!important}
 html[data-template-variant="classic"] .wrapped>main{padding-top:14px}
 html[data-template-variant="classic"] .jc-watch-page .wrapped>main{padding-top:0}
}
@media(max-width:360px){html[data-template-variant="classic"] .header .logo img{height:30px;max-width:92px}}

/* ----- off-canvas category sidebar: logical sides so Arabic never overflows ----- */

html[data-template-variant="classic"][dir="rtl"] .wrapped .sidebar{left:auto;right:0;transform:translate3d(100%,0,0);border-radius:10px 0 0 10px;border-right:none;border-left:2px solid var(--line)}
html[data-template-variant="classic"][dir="rtl"] .wrapped.open .sidebar{transform:translate3d(0,0,0)}
@media(min-width:1300px){html[data-template-variant="classic"][dir="rtl"] .wrapped.open .content{margin-left:0;margin-right:420px}}
@media(max-width:1299px){
 html[data-template-variant="classic"] .wrapped .sidebar{position:fixed;top:var(--jc-head-h,80px);bottom:0;z-index:30;margin:0;max-height:none;overscroll-behavior:contain;border-radius:0 10px 0 0}
 html[data-template-variant="classic"][dir="rtl"] .wrapped .sidebar{border-radius:10px 0 0 0}
 html[data-template-variant="classic"] .shadow{z-index:29}
}
@media(max-width:767px){html[data-template-variant="classic"]{--jc-head-h:60px}}
html[data-template-variant="classic"] .sidebar .title .jc-side-title{margin:0;padding:0 0 10px;border-bottom:2px solid var(--jc-accent);font-size:21px;font-weight:400;line-height:normal;color:inherit}
html[data-template-variant="classic"] .sidebar .list-link a{display:flex;justify-content:space-between;gap:10px}
html[data-template-variant="classic"] .sidebar .list-link a.active,html[data-template-variant="classic"] .sidebar .list-link a:hover{color:var(--jc-link)}
html[data-template-variant="classic"] .sidebar .block-btn .btn{background:var(--jc-accent-grad);color:#111!important;border:0}

/* ----- section titles: the original light 26px headings with an orange gradient tick ----- */
html[data-template-variant="classic"] .jc-head .jc-h1,html[data-template-variant="classic"] .jc-head .jc-h2{position:relative;padding-inline-start:16px}
html[data-template-variant="classic"] .jc-head .jc-h1::before,html[data-template-variant="classic"] .jc-head .jc-h2::before{content:"";position:absolute;inset-inline-start:0;top:.22em;bottom:.22em;width:4px;border-radius:4px;background:var(--jc-accent-grad)}
html[data-template-variant="classic"] .jc-home-hero{position:relative;overflow:hidden;margin:6px 0 34px;padding:26px 28px;border:1px solid var(--jc-line);border-radius:14px;background:#070707;isolation:isolate}
html[data-template-variant="classic"][data-color-mode="light"] .jc-home-hero{background:#fff}
html[data-template-variant="classic"] .jc-home-hero::before{content:"";position:absolute;z-index:-1;inset:-60% -10% auto auto;width:70%;height:220%;background:radial-gradient(closest-side,rgba(255,120,0,.28),transparent 70%);filter:blur(10px)}
html[data-template-variant="classic"] .jc-home-hero::after{content:"";position:absolute;z-index:-1;inset:auto auto -70% -10%;width:55%;height:200%;background:radial-gradient(closest-side,rgba(255,150,0,.16),transparent 70%)}
html[data-template-variant="classic"] .jc-home-hero h1{margin:0;color:var(--jc-ink);font-size:30px;line-height:1.25;font-weight:400;letter-spacing:-.01em}
html[data-template-variant="classic"] .jc-home-hero h1 b{font-weight:700;background:var(--jc-accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-template-variant="classic"] .jc-home-hero p{margin:8px 0 0;color:var(--jc-muted);font-size:15px}
html[data-template-variant="classic"][data-color-mode="light"] .jc-home-hero h1 b{background-image:linear-gradient(14deg,#c25100 0%,#a84800 100%)}
@media(prefers-reduced-motion:no-preference){html[data-template-variant="classic"] .jc-home-hero::before{animation:jc-aurora 14s ease-in-out infinite}}
@media(max-width:767px){
 html[data-template-variant="classic"] .jc-home-hero{margin:0 0 24px;padding:16px 16px 18px;border-radius:12px}
 html[data-template-variant="classic"] .jc-home-hero h1{font-size:20px}
 html[data-template-variant="classic"] .jc-home-hero p{font-size:13.5px}
}

/* ----- page frame ----- */
html[data-template-variant="classic"] .jc-page{padding-top:26px}
html[data-template-variant="classic"] .jc-page .wrap{max-width:1370px}
@media(max-width:767px){html[data-template-variant="classic"] .jc-page{padding-top:0}}
html[data-template-variant="classic"] .jc-card-meta .jc-like{color:var(--jc-ink)}
html[data-template-variant="classic"] .jc-meta,html[data-template-variant="classic"] .jc-desc,html[data-template-variant="classic"] .jc-share{background:var(--jc-surface)}

/* ----- legacy popup close button: drawn with CSS (the old sprite carried Chinese labels) ----- */
.mac_pop span.pop_close{position:relative}
.mac_pop span.pop_close::before{content:"\00d7";position:absolute;inset:0;font-size:22px;line-height:23px;text-align:center;text-indent:0;color:#666}

/* ----- account pages: no full-width paper band, breathing room under the fixed header ----- */
html[data-template-variant="classic"] body.fed-min-width .fed-part-case .fed-back-whits{background:transparent!important}
html[data-template-variant="classic"] body.fed-min-width .fed-part-case{padding:36px 15px 48px}
@media(max-width:767px){html[data-template-variant="classic"] body.fed-min-width .fed-part-case{padding:18px 12px 32px}}

/* ----- sticky footer on short pages ----- */
html[data-template-variant="classic"] .wrapped{min-height:calc(100vh - 55px)}

/* ----- footer heading kept for screen readers only ----- */
html[data-template-variant="classic"] .tui-footer .tui-footer-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html[data-template-variant="classic"] .tui-footer{border-top:2px solid var(--line)}
:root[data-template-variant="classic"] .tui-footer.tui-footer--javcms-classic[data-template-footer]{--footer-width:1340px;--footer-gutter:30px}

/* ----- header search (round 2): the open field never covers the search button or the account icon, the button turns
   into the original x, the colour and language buttons step aside like the nav does, logical sides for Arabic ----- */
html[data-template-variant="classic"] .header .right-block .tui-color-toggle,html[data-template-variant="classic"] .header .right-block .language-menu{transition:opacity .3s,visibility .3s,border-color .2s,background-color .2s,color .2s}
html[data-template-variant="classic"] .header.search-active .right-block .tui-color-toggle,html[data-template-variant="classic"] .header.search-active .right-block .language-menu{opacity:0;visibility:hidden;pointer-events:none}
html[data-template-variant="classic"] .header.search-active .btn-search{position:relative;z-index:12}
html[data-template-variant="classic"] .header.search-active .btn-search span.icon-search{opacity:0;pointer-events:none}
html[data-template-variant="classic"] .header.search-active .btn-search span.icon-close{opacity:1;pointer-events:auto}
html[data-template-variant="classic"] .header .search input[name="wd"]{padding-inline-end:74px}
html[data-template-variant="classic"] .header .search .search-btn{right:auto;inset-inline-end:2px;top:2px}
@media(min-width:768px){html[data-template-variant="classic"] .header .search{top:18px}}
@media(max-width:992px){html[data-template-variant="classic"] .header .search{left:auto;right:auto;inset-inline-start:15px;width:calc(100% - 136px);max-width:none}}
@media(max-width:767px){html[data-template-variant="classic"] .header .search{top:8px;width:calc(100% - 120px)}}

/* ----- category drawer: the current category and the hovered row recolour their name too ----- */
html[data-template-variant="classic"] .sidebar .list-link li a.active .name,html[data-template-variant="classic"] .sidebar .list-link li a:hover .name{color:inherit!important}
html[data-template-variant="classic"] .sidebar .list-link li a.active .name{font-weight:600}

/* ----- guest "My account" interstitial: centred card like the rest of the site ----- */
html[data-template-variant="classic"] .mac_msg_jump{margin:12vh auto 0}

/* ----- landscape phones: the whole watch player fits under the header without scrolling ----- */
@media(orientation:landscape) and (max-height:500px){
 html[data-template-variant="classic"] .jc-watch{max-width:calc((100vh - var(--jc-head-h,80px) - 48px) * 1.7778);max-width:calc((100svh - var(--jc-head-h,80px) - 48px) * 1.7778)}
 html[data-template-variant="classic"] .jc-watch .jc-player{margin-inline:0;width:100%;border-radius:var(--jc-radius)}
}