/*
Theme Name: Cine Stream
Theme URI: https://example.com/
Author: Cine Stream
Description: ธีมเว็บดูหนัง/ซีรีส์สำหรับ WordPress ดีไซน์พรีเมียมแบบ streaming — ฮีโร่เต็มจอ แถวเลื่อนแนวนอน Top 10 เครื่องเล่นวิดีโอ เลือกตอน ตารางรอบฉาย ระบบโฆษณา และระบบแจ้งหนังเสีย ทำงานคู่กับปลั๊กอิน Movie Manager. โทนดำอมม่วง–ทองรางวัล.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: cine-stream
*/

/* ============ TOKENS ============ */
:root{
  --cs-bg:#0c0a12;
  --cs-bg-2:#13101c;
  --cs-surface:#1b1626;
  --cs-surface-2:#241d33;
  --cs-line:rgba(255,255,255,.09);
  --cs-text:#f6f2ee;
  --cs-muted:#9a91a8;
  --cs-accent:#f4c45a;      /* ทองรางวัล (ปลั๊กอินใช้ตัวแปรนี้ด้วย) */
  --cs-accent-d:#e0a92e;
  --cs-red:#ff5d73;         /* คอรัล/แดง */
  --cs-radius:14px;
  --cs-max:1480px;
  --cs-display:"Anuphan",system-ui,sans-serif;
  --cs-body:"Noto Sans Thai","Anuphan",system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cs-bg);color:var(--cs-text);font-family:var(--cs-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--cs-display);margin:0 0 .4em;line-height:1.15;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--cs-accent);outline-offset:3px;border-radius:6px;}
.cs-wrap{max-width:var(--cs-max);margin:0 auto;}

/* ============ HEADER ============ */
.cs-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:24px;
  padding:18px clamp(16px,4vw,48px);transition:background .3s,backdrop-filter .3s,padding .3s,border-color .3s;border-bottom:1px solid transparent;}
.cs-header.scrolled{background:rgba(12,10,18,.86);backdrop-filter:blur(16px);padding-top:12px;padding-bottom:12px;border-bottom-color:var(--cs-line);}
.cs-logo{font-family:var(--cs-display);font-weight:700;font-size:23px;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.cs-logo b{color:var(--cs-accent);}
.cs-logo .reel{width:24px;height:24px;border-radius:50%;border:3px solid var(--cs-accent);position:relative;flex:none;}
.cs-logo .reel::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--cs-accent);}
.cs-nav{display:flex;gap:2px;}
.cs-nav a{padding:8px 14px;border-radius:9px;font-size:15px;color:var(--cs-muted);transition:color .15s;}
.cs-nav a:hover{color:var(--cs-text);}
.cs-nav .current-menu-item a,.cs-nav .current_page_item a,.cs-nav a.active{color:var(--cs-accent);}
.cs-header-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.cs-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid var(--cs-line);border-radius:999px;padding:7px 16px;transition:.2s;}
.cs-search:hover,.cs-search:focus-within{border-color:var(--cs-accent);}
.cs-search input{background:none;border:0;color:var(--cs-text);font:inherit;font-size:14px;width:130px;max-width:38vw;outline:none;}
.cs-search .ic{opacity:.7;}
.cs-burger{display:none;background:none;border:0;color:var(--cs-text);font-size:24px;cursor:pointer;}

/* ============ HERO ============ */
.cs-hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;}
.cs-hero-bg{position:absolute;inset:0;z-index:0;}
.cs-hero-bg img{width:100%;height:100%;object-fit:cover;}
.cs-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--cs-bg) 4%,rgba(12,10,18,.55) 42%,rgba(12,10,18,.1) 75%),linear-gradient(0deg,var(--cs-bg) 6%,transparent 46%);}
.cs-hero-inner{position:relative;z-index:1;padding:0 clamp(16px,4vw,48px) clamp(40px,7vw,88px);max-width:660px;}
.cs-eyebrow{display:flex;align-items:center;gap:9px;color:var(--cs-accent);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;}
.cs-eyebrow::before{content:"";width:26px;height:2px;background:var(--cs-accent);}
.cs-hero h1{font-size:clamp(38px,6.5vw,78px);font-weight:700;letter-spacing:-.01em;text-shadow:0 4px 30px rgba(0,0,0,.5);}
.cs-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;align-items:center;}
.cs-hero p{color:#ded8e4;font-size:clamp(15px,1.5vw,17px);max-width:560px;margin:0 0 26px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.cs-hero-btns{display:flex;gap:12px;flex-wrap:wrap;}

/* ============ BUTTONS ============ */
.cs-btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;font-family:var(--cs-display);font-weight:600;font-size:16px;padding:13px 28px;border-radius:11px;transition:transform .16s,box-shadow .16s,background .16s;}
.cs-btn-play{background:var(--cs-accent);color:#1a1205;box-shadow:0 8px 28px rgba(244,196,90,.28);}
.cs-btn-play:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(244,196,90,.4);}
.cs-btn-ghost{background:rgba(255,255,255,.1);color:var(--cs-text);border:1px solid var(--cs-line);}
.cs-btn-ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);}

/* ============ BADGES (theme + override plugin .mm-badge) ============ */
.cs-badge,.mm-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:7px;font-size:12px;font-weight:600;font-family:var(--cs-display);line-height:1.5;}
.cs-badge.gold{background:rgba(244,196,90,.16);color:var(--cs-accent);border:1px solid rgba(244,196,90,.3);}
.cs-badge.plain{background:rgba(255,255,255,.1);color:#cfc8d6;}
.mm-status-showing{background:rgba(255,93,115,.18)!important;color:#ff8a9b!important;}
.mm-status-upcoming{background:rgba(244,196,90,.16)!important;color:var(--cs-accent)!important;}
.mm-status-completed{background:rgba(255,255,255,.1)!important;color:#cfc8d6!important;}
.mm-status-paused{background:rgba(160,160,180,.16)!important;color:#bdb6c8!important;}
.mm-lang-sub{background:rgba(110,170,255,.16)!important;color:#9cc4ff!important;}
.mm-lang-dub{background:rgba(186,130,255,.16)!important;color:#cfa8ff!important;}

/* ============ ROWS ============ */
.cs-rows{position:relative;z-index:2;margin-top:-40px;padding-bottom:30px;}
.cs-row{margin:34px 0;}
.cs-row-head{display:flex;align-items:baseline;gap:12px;padding:0 clamp(16px,4vw,48px);margin-bottom:14px;}
.cs-row-head h2{font-size:clamp(19px,2.2vw,25px);font-weight:600;}
.cs-row-head h2 .tick{color:var(--cs-accent);}
.cs-row-head .see-all{margin-left:auto;font-size:13px;color:var(--cs-muted);transition:.15s;}
.cs-row-head .see-all:hover{color:var(--cs-accent);}
.cs-track-wrap{position:relative;}
.cs-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px clamp(16px,4vw,48px);scroll-padding-left:clamp(16px,4vw,48px);}
.cs-track::-webkit-scrollbar{height:0;}
.cs-track>*{scroll-snap-align:start;flex:0 0 auto;}
.cs-arrow{position:absolute;top:0;bottom:0;width:62px;border:0;cursor:pointer;z-index:5;color:var(--cs-text);font-size:30px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;}
.cs-track-wrap:hover .cs-arrow{opacity:1;}
.cs-arrow.left{left:0;background:linear-gradient(90deg,var(--cs-bg) 30%,transparent);}
.cs-arrow.right{right:0;background:linear-gradient(270deg,var(--cs-bg) 30%,transparent);}
@media(hover:none){.cs-arrow{display:none;}}

/* ============ POSTER CARD ============ */
.cs-card{width:180px;cursor:pointer;display:block;}
.cs-poster{position:relative;aspect-ratio:2/3;border-radius:var(--cs-radius);overflow:hidden;background:var(--cs-surface);box-shadow:0 6px 20px rgba(0,0,0,.4);transition:transform .25s,box-shadow .25s;}
.cs-poster img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.cs-grad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,6,12,.85),transparent 55%);opacity:0;transition:opacity .25s;}
.cs-card:hover .cs-poster{transform:translateY(-6px) scale(1.03);box-shadow:0 20px 44px rgba(0,0,0,.6);}
.cs-card:hover .cs-poster img{transform:scale(1.06);}
.cs-card:hover .cs-grad{opacity:1;}
.cs-poster-top{position:absolute;top:9px;left:9px;right:9px;display:flex;justify-content:space-between;gap:6px;z-index:2;}
.cs-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);width:52px;height:52px;border-radius:50%;background:var(--cs-accent);color:#1a1205;display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:3px;opacity:0;transition:.25s;box-shadow:0 6px 18px rgba(0,0,0,.5);z-index:3;}
.cs-card:hover .cs-play{opacity:1;transform:translate(-50%,-50%) scale(1);}
.cs-hover-meta{position:absolute;left:0;right:0;bottom:0;padding:12px;opacity:0;transform:translateY(8px);transition:.25s;z-index:2;}
.cs-card:hover .cs-hover-meta{opacity:1;transform:none;}
.cs-hover-meta .ttl{font-family:var(--cs-display);font-weight:600;font-size:14px;line-height:1.25;margin-bottom:6px;}
.cs-hover-meta .tags{display:flex;gap:5px;flex-wrap:wrap;}
.cs-card-foot{margin-top:9px;}
.cs-card-foot .name{font-family:var(--cs-display);font-weight:500;font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.cs-card-foot .sub{color:var(--cs-muted);font-size:12.5px;}

/* ============ TOP 10 ============ */
.cs-top10 .cs-track{align-items:flex-end;padding-top:20px;gap:6px;}
.cs-rank{display:flex;align-items:flex-end;}
.cs-rank .num{font-family:"Anton",var(--cs-display);font-size:clamp(110px,14vw,180px);line-height:.74;color:transparent;-webkit-text-stroke:3px var(--cs-accent);letter-spacing:-.04em;margin-right:-18px;z-index:0;text-shadow:0 0 40px rgba(244,196,90,.15);user-select:none;transition:-webkit-text-stroke-color .2s;}
.cs-rank .num.two{margin-right:-34px;}
.cs-rank .cs-card{width:150px;z-index:1;}
.cs-rank:hover .num{-webkit-text-stroke-color:var(--cs-red);}

/* ============ SINGLE MOVIE ============ */
.cs-single{padding-top:90px;}
.cs-single-hero{position:relative;padding:clamp(20px,4vw,46px) clamp(16px,4vw,48px) 10px;}
.cs-single-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.cs-single-hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);}
.cs-single-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--cs-bg) 8%,rgba(12,10,18,.82) 60%,rgba(12,10,18,.6));}
.cs-single-top{position:relative;z-index:1;display:grid;grid-template-columns:230px 1fr;gap:clamp(20px,3vw,40px);max-width:var(--cs-max);margin:0 auto;}
.cs-single-poster{border-radius:var(--cs-radius);overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.55);aspect-ratio:2/3;}
.cs-single-poster img{width:100%;height:100%;object-fit:cover;}
.cs-single h1{font-size:clamp(30px,4.5vw,52px);font-weight:700;}
.cs-single-meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;align-items:center;}
.cs-single-info{color:var(--cs-muted);font-size:14.5px;line-height:1.9;}
.cs-single-info b{color:var(--cs-text);font-weight:600;}
.cs-single-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-top:18px;}
.cs-single-btns .cs-btn{flex:0 0 auto;}
.cs-single-btns .mm-report{margin:0;}

.cs-single-body{max-width:var(--cs-max);margin:0 auto;padding:10px clamp(16px,4vw,48px) 40px;}
.cs-layout{display:grid;grid-template-columns:1fr 320px;gap:clamp(24px,3vw,40px);align-items:start;margin-top:30px;}
.cs-section-title{font-size:22px;font-weight:600;margin:30px 0 16px;display:flex;align-items:center;gap:10px;}
.cs-section-title::before{content:"▎";color:var(--cs-accent);}

/* player */
.mm-player{box-shadow:0 18px 60px rgba(0,0,0,.6);}
.cs-story{color:#ded8e4;}

/* sidebar */
.cs-sidebar .cs-widget,.cs-sidebar .widget{background:var(--cs-surface);border:1px solid var(--cs-line);border-radius:var(--cs-radius);padding:18px;margin-bottom:22px;}
.cs-sidebar h3,.cs-sidebar .widget-title{font-size:17px;margin-bottom:14px;}
.cs-rank-list{list-style:none;margin:0;padding:0;}
.cs-rank-list li{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--cs-line);}
.cs-rank-list li:last-child{border-bottom:0;}
.cs-rank-list .n{font-family:"Anton",var(--cs-display);font-size:22px;color:var(--cs-accent);width:26px;text-align:center;flex:none;}
.cs-rank-list img{width:44px;height:62px;border-radius:7px;object-fit:cover;flex:none;}
.cs-rank-list a{font-family:var(--cs-display);font-weight:500;font-size:14px;line-height:1.35;}

/* ============ ARCHIVE / SEARCH GRID ============ */
.cs-page{padding:104px clamp(16px,4vw,48px) 40px;max-width:var(--cs-max);margin:0 auto;}
.cs-page-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;}
.cs-page-head h1{font-size:clamp(26px,3.4vw,40px);font-weight:700;}
.cs-filter{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 28px;}
.cs-filter a{padding:7px 15px;border-radius:999px;background:var(--cs-surface);border:1px solid var(--cs-line);font-size:14px;color:var(--cs-muted);transition:.15s;}
.cs-filter a:hover,.cs-filter a.is-active{border-color:var(--cs-accent);color:var(--cs-accent);}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:clamp(14px,2vw,22px);}
.cs-grid .cs-card{width:auto;}
.cs-pagination{display:flex;justify-content:center;gap:8px;margin:40px 0;flex-wrap:wrap;}
.cs-pagination .page-numbers{padding:9px 15px;border-radius:9px;background:var(--cs-surface);border:1px solid var(--cs-line);color:var(--cs-text);font-family:var(--cs-display);}
.cs-pagination .page-numbers.current{background:var(--cs-accent);color:#1a1205;border-color:var(--cs-accent);}

/* ============ FOOTER ============ */
.cs-footer{border-top:1px solid var(--cs-line);background:var(--cs-bg-2);margin-top:30px;padding:40px clamp(16px,4vw,48px);}
.cs-footer-inner{max-width:var(--cs-max);margin:0 auto;display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;}
.cs-footer-links{display:flex;gap:48px;flex-wrap:wrap;}
.cs-footer-links .col h4{font-family:var(--cs-display);font-size:13px;color:var(--cs-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
.cs-footer-links .col a{display:block;color:#c8c1d2;font-size:14px;padding:4px 0;transition:.15s;}
.cs-footer-links .col a:hover{color:var(--cs-accent);}
.cs-footer .copyright{color:var(--cs-muted);width:100%;text-align:center;margin-top:24px;font-size:13px;}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){.cs-layout{grid-template-columns:1fr;}}
@media(max-width:820px){
  .cs-nav,.cs-search{display:none;}
  .cs-nav.is-open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--cs-bg-2);padding:12px;gap:2px;border-bottom:1px solid var(--cs-line);}
  .cs-burger{display:block;}
  .cs-hero{min-height:78vh;}
  .cs-card{width:140px;}
  .cs-rank .cs-card{width:118px;}
  .cs-single-top{grid-template-columns:120px 1fr;}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}