/*
Theme Name: myseries-theme
Theme URI: https://getplayer.xyz/
Author: You
Author URI: https://getplayer.xyz/
Description: Minimal dark starter theme for series/movie sites. PHP 8+ friendly.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: myseries-theme
*/

:root{
  --bg:#16191f;
  --panel:#1f2430;
  --muted:#a0a8b8;
  --text:#e9edf4;
  --accent:#ff2e8f;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,"Noto Sans Thai",sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
.container{max-width:1366px;margin:0 auto;padding:0 16px}
.brand{font-weight:800;letter-spacing:.2px}
nav.primary a{padding:8px 10px;border-radius:10px;color:#d8deea}
nav.primary a:hover{background:#2a3040}
.search{margin-left:auto;display:flex;align-items:center;background:#2a3040;border-radius:999px;overflow:hidden}
.search input{all:unset;padding:8px 12px;width:220px;color:#e9edf4}
.search button{all:unset;padding:8px 12px;cursor:pointer;color:#c9d3e3}
main{padding:20px 0}
.grid{display:grid;gap:16px}
.content{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:992px){.content{grid-template-columns:1fr 300px}}
.sidebar .widget{background:var(--panel);border:1px solid #ffffff14;border-radius:var(--radius);padding:12px; margin-bottom: 15px}
footer.site{margin-top:24px;border-top:1px solid #ffffff14;background:#14171d}
footer .inner{padding:24px 20px;color:var(--muted)}
.pager{display:flex;gap:8px;justify-content:center;margin:16px 0}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:#2a3040}
.pager .current{background:var(--accent);color:#fff}

/* ===== Header (mobile-ready) ===== */
header.site { position: sticky; top: 0; z-index: 60; background: #14171de6; backdrop-filter: blur(8px); border-bottom: 1px solid #ffffff14; }
header.site .inner { display: flex; align-items: center; gap: 12px; padding: 10px 16px;}
header.site .brand { font-weight: 800; font-size: 1.2rem; letter-spacing: .2px; color: #fff; text-transform: uppercase; }
.boottamads {
    margin-bottom: 20px;
    margin-top: -25px;
}
/* Toggle (hamburger) */
.header-toggle {
  display: none; margin-left: 4px; border: 0; background: #2a3040; color: #e9edf4;
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
}
.header-toggle:focus { outline: 2px solid #ff2e8f55; outline-offset: 2px; }
nav.primary { margin-left: 8px; }
nav.primary .menu {display: flex;gap: 4px;list-style: none;margin-top: -50px;margin-left: 75px;justify-content: center}
nav.primary .menu > li > a {
  display: block; padding: 8px 12px; border-radius: 10px; color: #d8deea; transition: background .2s;
}
nav.primary .menu > li > a:hover { background: #d9308d; }

/* Search */
header.site .search { margin-left: auto; display: flex; align-items: center; background: #2a3040; border-radius: 999px; overflow: hidden; }
header.site .search input { all: unset; padding: 8px 12px; width: 120px; color: #e9edf4; font-size: 14px; }
header.site .search button { all: unset; padding: 8px 12px; cursor: pointer; color: #c9d3e3; font-size: 14px; }

/* ===== Mobile (<= 992px) ===== */
@media (max-width: 992px) {

  header.site .inner { gap: 7px; margin-left: 10px;margin-right: 10px;padding: 10px;}
  .header-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-wrap {
    position: relative; width: 100%;
  }
  .nav-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height .28s ease;
  }
  .nav-panel.open {
    max-height: 60vh;
  }
  nav.primary { margin: 8px 0 0 0; }
  nav.primary .menu {
    flex-direction: column;
    gap: 6px;
    background: #1b2030;
    border: 1px solid #ffffff12;
    border-radius: 12px;
    padding: 8px;
	margin-left: 0px;
	margin-top: 0px;
  }
  nav.primary .menu > li > a {
    padding: 10px 12px; border-radius: 10px;
  }
  header.site .search input { width: 120px; }
}

@media (max-width: 480px) {
  header.site .search input { width: 120px; }
}
/* ===== Section ===== */
.section{
  background:#1f2430;
  border:1px solid #ffffff14;
  border-radius:7px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.widget-title,.wp-block-heading{
    background: #e71956;
    color: #fff;
    padding: 5px 20px;
    margin-top: -10px;
    margin-right: -10px;
    margin-left: -10px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-weight: 800;
    border-bottom: 1px solid #00000022;
}
.section-header{
  background:#e71956;
  color:#fff;
  padding:5px 14px;
  border-top-left-radius:7px;
  border-top-right-radius:7px;
  font-weight:800;
  border-bottom:1px solid #00000022;
}
.section-header h2{margin:0;font-size:18px}
.section-body{padding:16px}

/* ===== Cards grid ===== */
.cards{display:grid;gap:12px}
@media(max-width:599px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:600px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.cards{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1200px){.cards{grid-template-columns:repeat(4,1fr)}}

/* ===== Card ===== */
.card{
  position:relative;
  background:#262b38;
  overflow:hidden;
  border: 1px solid #ffffff14;
  padding: 1px;
}
img.custom-logo {
    width: 170px;
    height: 100%;
    display: block;
}
.card .thumb{aspect-ratio:2/3;background:#12151c;display: contents;}
.card .thumb img{width:100%;height:280px;max-height: 300px;object-fit:fill}
.card .meta{padding:5px 5px;width:100%}
.card .tt{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.6em;font-weight:700;font-size:13.5px
}
.card .desc{
  margin-top:6px;color:#a0a8b8;font-size:13px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em;
}
.card .footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}

/* badges / chips */
.tag{
  font-size:12px;font-weight:800;padding:4px 8px;border-radius:8px;
  color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.25)
}
.tag-dark{background:#111827;border:1px solid #ffffff22}
.tag-pink{background:#ff2e8f}
.tag-green{background:#10b981}
.chip{
  font-size:12px;background:#2d3342;color:#e9edf4;padding:4px 8px;border-radius:999px
}
.chip-ep{background:#ff2e8f;color:#fff;font-weight:800}
li.cat-item {
    padding-bottom: 15px;
    border-bottom: 1px solid #ffbb001e;
}
li.cat-item:hover a {
    color: #ff2e8f;
}
.sidebar li.menu-item {
    border-bottom: 1px solid #ffbb001e;
    padding-bottom: 15px;
}
.sidebar li.menu-item:hover a {
    color: #ff2e8f;
}

.content{
  display:grid;
  grid-template-columns: 1fr 300px; /* ซ้ายเนื้อหา | ขวา sidebar */
  gap:20px;
}


.maincol{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}

@media (max-width: 992px){
  .content{ grid-template-columns: 1fr; }
}
body.admin-bar header.site {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar header.site {
    top: 46px;
  }
}
/* ========================
   💬 Comments Section
   ======================== */

.ton2025-comments {
    background: #1e2230; /* พื้นหลังเข้ม */
    border-radius: 10px;
    padding: 20px;
    color: #fff;
}

.ton2025-comments h4,
.ton2025-comments h5 {
    color: #ff299e;
    font-weight: 700;
}

.ton2025-comments ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ton2025-comments li {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ton2025-comments li:last-child {
    border-bottom: none;
}

.ton2025-comments .fw-bold {
    color: #fff;
}

.ton2025-comments .text-secondary {
    font-size: 0.85rem;
}

.ton2025-comments .text-white {
    line-height: 1.6;
}

.ton2025-comments .alert-info {
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #ccc;
}

.btn-outline-pink {
    border: 1.6px solid #ff299e !important;
    color: #ff299e !important;
    background: none !important;
    padding: 3px 10px;
    font-size: 0.85rem;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.btn-outline-pink:hover,
.btn-outline-pink:focus {
    background: #ff299e !important;
    color: #fff !important;
    border-color: #ff299e !important;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"] {
    background: #2a2f42;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    width: 100%;
}

.comment-form textarea:focus,
.comment-form input:focus {
    outline: none;
    border-color: #ff299e;
    box-shadow: 0 0 0 1px #ff299e;
}

.comment-form .btn-pink {
    background: #ff299e;
    border: none;
    color: #fff;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}
.comment-form .btn-pink:hover {
    background: #e0208b;
}

.fb-comments {
    margin-top: 15px;
}
.comment-navigation {
    text-align: center;
    margin-top: 15px;
}
.comment-navigation .page-numbers {
    display: inline-block;
    margin: 0 5px;
    padding: 5px 10px;
    border-radius: 4px;
    background: #2a2f42;
    color: #fff;
}

.comment-navigation .page-numbers.current {
    background: #ff299e;
    color: #fff;
}
/* player */
.series-player-box {border: 2px solid #444;background: #111;border-radius: 8px;overflow: hidden;margin-bottom: 1rem}
.player-switcher .btn {min-width: 100px;padding: 8px;font-weight: 600;border-radius: 5px;border: 1px solid #e2e2e291;color: #ffffff;}.btn-primary,.btn-danger { background: #0999ff;}.btn-outline-danger,.btn-outline-primary {background: #ffffff00;}.mb-2 {margin-bottom: .5rem}.mt-2 {margin-top: .5rem}.mb-3 {margin-bottom: 1rem}
.d-flex {display: flex !important;justify-content: center;gap: 8px}.mb-eps {background: #373535;padding: 10px;border-radius: 7px;margin-bottom: 40px; margin-top: -5px}
.g-2, .gy-2 {--bs-gutter-y: 0.5rem;--bs-gutter-x: 0.5rem;}
/* ========================
   🎬 EP Buttons
   ======================== */
.ep-grid {display: flex;flex-wrap: wrap;gap: 5px; justify-content: flex-start; align-items: center;}

.ep-grid .ep-btn {
    width: 119px;
    height: 49px;
    display: inline-block;
    background: #1c2539;
    border-radius: 2px;
    margin: 5px;
	font-size: 1.1rem;
    color: #fff;
    padding: 0 5px;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #878787;
    border-radius: 4px;
}
button.btn.w-100.ep-btn.btn-primary {
    background: black;
}

@media (max-width: 600px) {.ep-grid .ep-btn {width: 100px;height: 45px;}}
@media (max-width: 450px) {.ep-grid .ep-btn {width: 95px;height: 45px;}}
@media (max-width: 400px) {.ep-grid .ep-btn {width: 130px;height: 45px;}}
@media (max-width: 600px) {.img-info img {width: 60%!important}.img-info {text-align: center;}.statusep {font-size: 11px!important}}
.me-1 {
    margin-right: .25rem !important;
}

.main-player-btn {
    background: #1440aa;
    color: #FFF;
    padding: 10px 20px;
}
.backup-player-btn {
    background: #dd0d0d;
}
/* 🎬 Series Player Box */
.series-player-box {
    background: #1b1f2d; /* พื้นหลังเข้ม */
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    overflow: hidden;
}
button.btn.btn-sm.btn-secondary.me-2.group-btn {
    background: #ffffff00;
    padding: 5px 18px;
    border-radius: 5px;
    border: 1px solid #ece8e8;
    color: #fff;
	margin-inline: 5px
}
button.btn.btn-sm.btn-info.me-2.group-btn {
    background: #0999ff;
    padding: 5px 18px;
    border-radius: 5px;
    color: #ffffff;
    border: 1px solid #878787;
}
.card .pic {
  position: relative;
  overflow: hidden;
}
.card .label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: #ff3366;
  color: #fff;
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 3px;
  font-weight: bold;
  z-index: 5;
}

.card .labelseson {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #007bff;
  color: #fff;
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 3px;
}

.card .labelimdb {
  position: absolute;
  top: 20px;
  left: 0px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffcc00;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 3px;
  font-weight: bold;
}

/* แถบ EP และภาษา */
.card .statusep {
    position: absolute;
    top: 0px;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 12px;
    border-radius: 3px;
    text-align: center;
}
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: white;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 2.5rem;
    transition: transform 0.3s ease-in-out, opacity 0.3s;
    opacity: 0;
    pointer-events: auto;
}

.pic a {
    display: block;
    position: relative;
}

.pic:hover .play-icon {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.img-info img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.post-meta {
    padding-bottom: 20px;
    color: #ffffff;
	border-bottom: 1px outset #fffefe;
}
.post-meta-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  padding-top: 20px;
}
.info{display: grid;grid-template-columns: 160px 1fr;gap: 16px;}
@media (max-width: 600px) {.info {display: table!important;}}
.meta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.meta-btn {
  display: inline-block;
  padding: 4px 10px;
  font-size: 13px;
  background-color: #222;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.meta-btn:hover {
  background-color: #ff3366;
  color: #fff;
}

.meta-separator {
  color: #888;
  margin: 0 4px;
}

.social-share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.share__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 5px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.share__button i {
  font-size: 16px;
  line-height: 1;
}

.share__button:hover {
  transform: translateY(-2px);
}

/* Facebook */
.share__button--facebook {
  background-color: #1877f2;
}
.share__button--facebook:hover {
  background-color: #0f5dc1;
}

/* Twitter */
.share__button--twitter {
  background-color: #1da1f2;
}
.share__button--twitter:hover {
  background-color: #0d8bd6;
}

/* LINE */
.share__button--line {
  background-color: #00c300;
}
.share__button--line:hover {
  background-color: #009a00;
}
.wp-block-latest-posts__list li {
    line-height: 2.1;
}
.section-seo {
    background: #1f2430;
    padding: 5px 14px;
    border-radius: 5px;
}
.list-bbr {display: grid;text-align: center; margin: auto; gap: 5px;grid-template-columns: repeat(2, 1fr);line-height: 0.2; padding: 0 1px;}
.list-bbr img {width: 100%;height: auto;}.ads {margin-top: 10px;}
@media (min-width: 900px) and (max-width: 1459px) {.list-bbr {	grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 899px) {.list-bbr {line-height: 0.2;grid-template-columns: repeat(1, 1fr);}}
.list-ads img{border:1px;padding: 2px;width: 100%}
.list-ads img {
    border: 1px;
    padding: 2px;
    width: 100%;
    max-width: 1000px;
    height: 200px;
}
.ads-bottom {
            display: inherit;
            position: fixed;
            z-index: 999 !important;
            bottom: 0;
            padding: 5px;
            border-radius: 10px;
            text-align: center;
          
        }

        .close-btn {
            position: absolute;
            right: -3px;
            top: -3px;
            background: #401aff;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: white;
            font-size: 17px;
            font-weight: bold;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .hidden {
            display: none;
        }