/* CINEMAGE app styles */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-dark:#0a0e1a;
  --bg-darker:#050810;
  --bg-card:#131720;
  --bg-player:#1a1f2e;
  --accent-cyan:#00d9ff;
  --accent-blue:#0088ff;
  --accent-red:#ff0040;
  --text-primary:#ffffff;
  --text-secondary:#a8b2d1;
  --text-muted:#6b7280;
}
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

body{
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg-darker);
  color:var(--text-primary);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Header */
.cinemage-header{
  position:fixed;top:0;width:100%;z-index:1000;
  background:linear-gradient(180deg,rgba(5,8,16,.95) 0%,rgba(5,8,16,0) 100%);
  padding:.85rem 2rem;
  display:flex;justify-content:flex-start;align-items:center;
  transition:background .25s ease;
  border-bottom:none;
}
.cinemage-header.scrolled{
  background:rgba(5,8,16,.98);
  backdrop-filter:blur(10px);
}

.cinemage-header-right{margin-left:auto;display:flex;align-items:center;gap:18px}

.cm-quick-links{display:flex;align-items:center;gap:18px}
.cm-quick-link{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-primary);opacity:.92;transition:opacity .2s ease, transform .2s ease}
.cm-quick-link:hover{opacity:1;transform:translateY(-1px)}
.cm-ql-icon-wrap{
  width:44px;height:34px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.18);
  color:var(--text-primary);
}
.cm-ql-label{font-size:.72rem;font-weight:700;letter-spacing:.2px;color:var(--text-primary);opacity:.92}

html[data-theme="light"] .cm-ql-icon-wrap{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(11,18,32,.14);
}
.logo-link{
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:800;
  font-size:1.25rem;
  letter-spacing:.2px;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  gap:0;
}
.cm-logo-img{height:34px;width:auto;display:block}
.cm-logo-default{height:44px}
.logo-link .logo-prefix{color:var(--text-primary)}
.logo-link .logo-pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:12px;background:var(--accent-blue);color:#fff;font-weight:800;margin:0 4px;line-height:1}
.logo-link .logo-main{color:var(--text-primary)}
.logo-link .logo-dot{color:var(--text-primary);opacity:.92;padding:0 2px}
.logo-link .logo-tld{color:var(--text-primary);opacity:.92}
html[data-theme="light"] .logo-link .logo-pill{background:var(--accent-blue);color:#fff}
.cinemage-nav{
  position:fixed;
  top:0;
  right:-360px;
  width:min(360px, 92vw);
  height:100vh;
  padding:90px 22px 22px 22px;
  background:rgba(5,8,16,.98);
  border-left:1px solid rgba(255,255,255,.10);
  z-index:1100;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:right .25s ease;
}
.cinemage-nav.is-open{right:0}
html[data-theme="light"] .cinemage-nav{
  background:rgba(247,248,251,.98);
  border-left:1px solid rgba(11,18,32,.10);
}

.cinemage-nav .cinemage-menu{flex-direction:column;align-items:flex-start;gap:14px}
.cinemage-nav .cinemage-menu a{font-size:1.05rem}

.cinemage-header-actions{display:flex;align-items:center;gap:12px;margin-left:0}

.cm-theme-toggle{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(0,217,255,.18);
  background:rgba(0,217,255,.06);
  color:var(--text-secondary);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.cm-theme-toggle:hover{transform:translateY(-1px);background:rgba(0,217,255,.12);border-color:rgba(0,217,255,.28);color:var(--text-primary)}
.cm-theme-toggle .cm-icon-sun{display:block}
.cm-theme-toggle .cm-icon-moon{display:none}
html[data-theme="light"] .cm-theme-toggle .cm-icon-sun{display:none}
html[data-theme="light"] .cm-theme-toggle .cm-icon-moon{display:block}

.cinemage-menu{list-style:none;display:flex;gap:2.25rem;align-items:center;margin:0;padding:0}
.cinemage-menu li{margin:0;padding:0}
.cinemage-menu a{color:var(--text-secondary);font-weight:500;font-size:.95rem;position:relative;transition:all .25s ease;display:inline-block}
.cinemage-menu a:hover{color:var(--text-primary)}
.cinemage-menu a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent-cyan);transition:width .25s ease}
.cinemage-menu a:hover::after{width:100%}

/* legacy */
.cinemage-nav a{
  color:var(--text-secondary);
  font-weight:500;
  font-size:.95rem;
  position:relative;
  transition:all .25s ease;
}
.cinemage-nav a:hover{color:var(--text-primary)}
.cinemage-nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:var(--accent-cyan);
  transition:width .25s ease;
}
.cinemage-nav a:hover::after{width:100%}
.search-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.25rem}
.search-icon{width:20px;height:20px;opacity:.85;transition:opacity .25s ease}
.search-btn:hover .search-icon{opacity:1}

/* Page wrapper */
.cinemage-page{margin-top:80px}
.cinemage-single-page{padding:1.2rem 1.2rem}
@media (min-width:1024px){.cinemage-single-page{padding:1.6rem 3rem}}
body.admin-bar .cm-header{top:32px}
@media (max-width:782px){body.admin-bar .cm-header{top:46px}}

/* HOME */
.home-page{padding:0;margin-top:0}
.home-hero{position:relative;height:clamp(320px,55vh,520px);overflow:hidden}
.home-hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.home-hero-slide.active{opacity:1}
.home-hero-slide::before{display:none}
.home-hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.30) 40%,rgba(0,0,0,.78) 100%)}
.home-hero-bg{width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.home-hero-picture{display:block;width:100%;height:100%}
.home-hero-picture .home-hero-bg{display:block}
.home-hero-content{position:absolute;left:clamp(16px,4vw,48px);bottom:clamp(34px,6vh,64px);z-index:2;max-width:min(720px,92vw)}
.home-hero-title{font-family:inherit;font-weight:900;font-size:clamp(1.9rem,6vw,3.1rem);line-height:1.08;margin:0 0 .65rem 0;letter-spacing:.2px;text-shadow:0 10px 30px rgba(0,0,0,.55)}
.home-hero-subtitle{font-size:clamp(1.1rem,4.2vw,1.7rem);color:rgba(255,255,255,.80);margin:0;line-height:1.35;text-shadow:0 10px 30px rgba(0,0,0,.55)}
.home-play-btn{display:none}
.home-play-btn{
  display:inline-flex;align-items:center;gap:1rem;
  padding:1rem 2.5rem;border-radius:999px;
  background:var(--accent-cyan);color:#001018;
  font-weight:800;font-size:1.05rem;
  box-shadow:0 10px 30px rgba(0,217,255,.25);
  transition:all .25s ease;
}
.home-play-btn:hover{transform:translateY(-3px);box-shadow:0 15px 45px rgba(0,217,255,.4)}
.home-play-icon{width:0;height:0;border-left:12px solid #001018;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.home-hero-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:4}
.home-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:transform .2s ease,background .2s ease}
.home-dot.active{background:#fff;transform:scale(1.1)}

.home-hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:54px;height:54px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.28);color:#fff;font-size:42px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);transition:transform .2s ease,background .2s ease,border-color .2s ease;user-select:none}
.home-hero-arrow:hover{transform:translateY(-50%) scale(1.05);background:rgba(0,0,0,.40);border-color:rgba(255,255,255,.38)}
.home-hero-arrow.prev{left:14px}
.home-hero-arrow.next{right:14px}

@media (max-width:768px){
  .home-hero{height:clamp(240px,42vh,360px)}
  .home-hero-arrow{width:44px;height:44px;font-size:34px}
}

.home-section{padding:4rem 3rem}
.home-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.home-section-title{font-family:"Bebas Neue",cursive;font-size:2rem;letter-spacing:2px}
.home-section-nav{display:flex;gap:1rem}
.home-nav-arrow{
  width:40px;height:40px;border-radius:50%;
  background:var(--bg-card);border:1px solid rgba(0,217,255,.12);
  color:var(--text-secondary);font-weight:900;cursor:pointer;
  transition:all .25s ease;
}
.home-nav-arrow:hover{background:var(--accent-cyan);color:#001018;border-color:transparent;transform:scale(1.08)}

.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2rem;padding:.5rem 0}
.home-card{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:2/3;background:var(--bg-card);transition:all .35s ease}
.home-card:hover{transform:translateY(-10px) scale(1.04);z-index:10;box-shadow:0 20px 45px rgba(0,217,255,.18)}
.home-card-link{display:block;height:100%}
.home-poster{width:100%;height:100%;object-fit:cover;transition:filter .35s ease}
.home-card:hover .home-poster{filter:brightness(.4)}
.home-overlay{
  position:absolute;left:0;right:0;bottom:0;padding:1.5rem;
  background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,transparent 100%);
  opacity:0;transition:opacity .35s ease;
}
.home-card:hover .home-overlay{opacity:1}
.home-card-title{font-weight:800;font-size:1.05rem;margin-bottom:.45rem}
.home-card-info{font-size:.85rem;color:var(--text-secondary)}
.home-play-overlay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;
  background:rgba(0,217,255,.9);opacity:0;transition:all .35s ease;
}
.home-play-overlay::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);
  width:0;height:0;border-left:16px solid #001018;border-top:10px solid transparent;border-bottom:10px solid transparent;
}
.home-card:hover .home-play-overlay{opacity:1;transform:translate(-50%,-50%) scale(1.1)}

/* DETAIL */
.detail-page{padding:2rem 3rem}
.detail-topbar{max-width:1400px;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.back-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.75rem 1.1rem;border-radius:999px;
  background:rgba(0,217,255,.08);border:1px solid rgba(0,217,255,.2);
  color:var(--accent-cyan);font-weight:800;
  transition:all .25s ease;
}
.back-btn:hover{background:var(--accent-cyan);color:#001018;transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,217,255,.25)}
.detail-breadcrumb{color:var(--text-secondary);font-size:.95rem}

.video-section{max-width:1400px;margin:0 auto 3rem;background:var(--bg-player);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,217,255,.1)}
.video-container{position:relative;padding-bottom:56.25%;background:#000}
.video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1f2e 0%,#0a0e1a 100%);transition:opacity .5s ease;z-index:4}
.countdown{font-family:Orbitron,system-ui;font-size:8rem;font-weight:900;color:var(--accent-cyan);text-shadow:0 0 40px rgba(0,217,255,.6);animation:cinemagePulse 1s ease-in-out infinite;z-index:2}
@keyframes cinemagePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}
.countdown-ring{position:absolute;width:300px;height:300px;border:3px solid rgba(0,217,255,.2);border-radius:50%;animation:cinemageRotate 3s linear infinite}
.countdown-ring::before{content:"";position:absolute;inset:-3px;border:3px solid transparent;border-top-color:var(--accent-cyan);border-radius:50%}
@keyframes cinemageRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.cinemage-video,.cinemage-embed{position:absolute;inset:0;width:100%;height:100%}
.cinemage-video{object-fit:cover;z-index:1}
.cinemage-embed iframe{width:100%;height:100%;border:0}

.video-controls{position:absolute;left:0;right:0;bottom:0;padding:1.25rem;background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,transparent 100%);display:flex;align-items:center;gap:1rem;z-index:5}

/* Embed-only controls: keep only fullscreen button */
.video-controls.is-embed{justify-content:flex-end}
.video-controls.is-embed .play-pause-btn,
.video-controls.is-embed .volume-btn,
.video-controls.is-embed .progress-bar,
.video-controls.is-embed .time-display{display:none}
.play-pause-btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--accent-cyan);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .25s ease}
.play-pause-btn:hover{transform:scale(1.1);box-shadow:0 0 20px rgba(0,217,255,.5)}
.volume-btn,.fullscreen-btn{background:none;border:none;color:#fff;cursor:pointer;padding:.5rem;opacity:.9}
.progress-bar{flex:1;height:5px;background:rgba(255,255,255,.2);border-radius:999px;cursor:pointer;overflow:hidden}
.progress-fill{height:100%;background:var(--accent-cyan);width:0%}

/* Theater-mode fallback (for browsers that block real fullscreen, e.g., iOS iframes) */
body.cinemage-theater{overflow:hidden}
body.cinemage-theater .video-section{
  position:fixed;inset:0;max-width:none;margin:0;border-radius:0;z-index:99999;
  box-shadow:none;background:#000;
}
body.cinemage-theater .video-container{height:100%;padding-bottom:0}
body.cinemage-theater .video-placeholder{display:none}
body.cinemage-theater .cinemage-video,
body.cinemage-theater .cinemage-embed{position:absolute;inset:0;width:100%;height:100%}
body.cinemage-theater .cinemage-embed iframe{width:100%;height:100%}
body.cinemage-theater .video-controls{padding:1rem}

.cinemage-theater-close{
  position:fixed;top:12px;right:12px;z-index:100000;
  width:42px;height:42px;border-radius:999px;border:1px solid rgba(0,217,255,.35);
  background:rgba(5,8,16,.65);color:var(--accent-cyan);font-size:26px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(10px);
}

/* Hide the theater close button when the hidden attribute is present */
.cinemage-theater-close[hidden] {
  display: none !important;
}
.cinemage-theater-close:hover{background:var(--accent-cyan);color:#001018;border-color:transparent}
.time-display{font-family:Orbitron,monospace;font-size:.9rem;color:var(--text-secondary);white-space:nowrap}

.movie-info-section{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:300px 1fr;gap:3rem;margin-bottom:4rem}
.movie-poster{border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.5);transition:transform .25s ease}
.movie-poster:hover{transform:translateY(-5px)}
.rating-badge{position:absolute;top:15px;right:15px;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);padding:.5rem 1rem;border-radius:8px;display:flex;align-items:center;gap:.5rem;font-weight:900;font-family:Orbitron,system-ui}
.movie-poster-wrapper{position:relative}
.imdb-logo{background:#f5c518;color:#000;padding:.2rem .4rem;border-radius:4px;font-size:.75rem;font-weight:900}
.movie-details{display:flex;flex-direction:column;gap:2rem}
.movie-title{font-family:Orbitron,system-ui;font-size:3rem;font-weight:900;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase;letter-spacing:2px}
.movie-meta{display:flex;gap:2rem;flex-wrap:wrap;color:var(--text-secondary);font-size:.95rem}
.meta-item{display:flex;align-items:center;gap:.5rem}
.meta-label{color:var(--accent-cyan);font-weight:900}
.genre-tags{display:flex;gap:1rem;flex-wrap:wrap}
.genre-tag{padding:.5rem 1.2rem;background:rgba(0,217,255,.1);border:1px solid rgba(0,217,255,.3);border-radius:50px;font-size:.85rem;color:var(--accent-cyan);font-weight:700}
.description-section{background:var(--bg-card);padding:2rem;border-radius:12px;border-left:4px solid var(--accent-cyan)}
.detail-section-title{font-family:Orbitron,system-ui;font-size:1.15rem;margin-bottom:1rem;color:var(--accent-cyan);text-transform:uppercase;letter-spacing:1px}
.description{line-height:1.8;color:var(--text-secondary)}
.description a{color:var(--accent-cyan);text-decoration:underline}
.cast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}
.cast-member{display:flex;align-items:center;gap:1rem;padding:1rem;background:rgba(0,217,255,.05);border-radius:12px;transition:all .25s ease;border:1px solid rgba(0,217,255,.08)}
.cast-member:hover{background:rgba(0,217,255,.1);transform:translateY(-3px);box-shadow:0 5px 20px rgba(0,217,255,.2)}
.cast-avatar{width:60px;height:60px;border-radius:50%;overflow:hidden;border:2px solid var(--accent-cyan);display:flex;align-items:center;justify-content:center}
.cast-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.cast-avatar img[src*="persons.svg"],
.actor-hero-avatar img[src*="persons.svg"]{
  object-fit:contain;
  padding:12px;
  opacity:.75;
}

.cinemage-avatar-initials{font-family:Orbitron,system-ui;font-weight:900;color:#001018;background:var(--accent-cyan);width:100%;height:100%;display:flex;align-items:center;justify-content:center}

.related-section{max-width:1400px;margin:0 auto;padding:2rem 0}
.detail-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.detail-section-heading{font-family:Orbitron,system-ui;font-size:1.8rem;font-weight:900;text-transform:uppercase;letter-spacing:2px}
.nav-arrows{display:flex;gap:1rem}
.arrow-btn{width:45px;height:45px;border-radius:50%;background:var(--bg-card);border:1px solid rgba(0,217,255,.2);color:var(--accent-cyan);font-weight:900;font-size:1.2rem}
.movies-carousel{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.5rem}
.related-movie-card{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:2/3;background:var(--bg-card);transition:all .35s ease}
.related-movie-card:hover{transform:translateY(-10px) scale(1.04);box-shadow:0 20px 40px rgba(0,217,255,.25)}
.related-link{display:block;height:100%}
.related-poster{width:100%;height:100%;object-fit:cover;transition:filter .35s ease}
.related-movie-card:hover .related-poster{filter:brightness(.4)}
.related-overlay{position:absolute;left:0;right:0;bottom:0;padding:1.5rem;background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,transparent 100%);opacity:0;transition:opacity .35s ease}
.related-movie-card:hover .related-overlay{opacity:1}
.related-title{font-weight:900;font-size:1rem;margin-bottom:.3rem}
.related-info{font-size:.85rem;color:var(--text-secondary)}
.play-icon-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(0,217,255,.9);opacity:0;transition:all .35s ease}
.play-icon-overlay::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);width:0;height:0;border-left:16px solid #001018;border-top:10px solid transparent;border-bottom:10px solid transparent}
.related-movie-card:hover .play-icon-overlay{opacity:1;transform:translate(-50%,-50%) scale(1.1)}

/* Archive & footer */
.archive-page{padding:2rem 3rem}
.archive-container{max-width:1400px;margin:0 auto}
.archive-title{font-family:"Bebas Neue",cursive;font-size:2.2rem;letter-spacing:2px;margin:1rem 0 2rem}
.cinemage-pagination{margin-top:2rem}
.cinemage-empty{color:var(--text-secondary)}
.cinemage-footer{padding:2.5rem 1.2rem;border-top:1px solid rgba(0,217,255,.08);background:rgba(5,8,16,.6)}
.cinemage-footer-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--text-secondary)}
.cinemage-footer-brand{font-family:"Bebas Neue",cursive;font-size:1.6rem;letter-spacing:2px;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* Responsive */
@media(max-width:1024px){
  .cinemage-header{padding:1rem 1.2rem}
  .home-section{padding:3rem 1.2rem}
  .detail-page,.archive-page{padding:1.2rem}
  .movie-info-section{grid-template-columns:1fr;gap:2rem}
  .movie-poster-wrapper{max-width:300px;margin:0 auto}
}
@media(max-width:768px){
  .cinemage-header{padding:1rem}
  .cinemage-nav{gap:1rem}
  .cinemage-nav a{display:none}
  .cinemage-nav a:first-child{display:block}
  .home-hero-title{font-size:3rem}
  .home-section{padding:2.25rem 1rem}
  .home-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
  .movie-title{font-size:2rem}
  .countdown{font-size:4rem}
  .countdown-ring{width:200px;height:200px}
  .movies-carousel{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}
}


/* Actor archive header */
.actor-hero{display:flex;align-items:center;gap:18px;background:rgba(0,217,255,.06);border:1px solid rgba(0,217,255,.14);border-radius:16px;padding:18px 18px;margin:10px 0 22px;}
.actor-hero-avatar{width:86px;height:86px;border-radius:50%;overflow:hidden;border:2px solid var(--accent-cyan);background:rgba(0,0,0,.35);flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.actor-hero-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.actor-hero-initials{font-size:34px;font-weight:800;}
.actor-hero-sub{color:var(--text-secondary);font-weight:600;margin-bottom:2px;}
.actor-hero-birth{margin-top:6px;color:var(--text-secondary);font-weight:600;font-size:13px;}


/* Series season/episode picker */
.cinemage-series-picker{
  position:absolute;
  top:14px;
  left:14px;
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:12px;
  z-index:999;

  padding:10px 12px;
  border-radius:16px;
  background:rgba(5, 8, 16, 0.62);
  border:1px solid rgba(0, 217, 255, 0.22);
  box-shadow:0 14px 36px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0, 217, 255, 0.06) inset;
  backdrop-filter:blur(10px);
}

.cinemage-series-picker label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.cinemage-series-picker label span{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:rgba(168, 178, 209, 0.92);
  padding-left:4px;
}

.cinemage-series-picker select{
  -webkit-appearance:none;
  appearance:none;
  color-scheme:dark;

  background:linear-gradient(180deg, rgba(26, 31, 46, 0.85) 0%, rgba(0, 0, 0, 0.55) 100%);
  color:#fff;
  border:1px solid rgba(255, 255, 255, 0.14);
  padding:11px 42px 11px 14px;
  border-radius:12px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  min-width:160px;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2300d9ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px 16px;

  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.cinemage-series-picker select:hover{
  border-color:rgba(0, 217, 255, 0.32);
  box-shadow:0 10px 24px rgba(0, 217, 255, 0.12);
  transform:translateY(-1px);
}

.cinemage-series-picker select:focus{
  outline:none;
  border-color:#ff7a00;
  box-shadow:0 0 0 3px rgba(255,122,0,0.18), 0 10px 26px rgba(255,122,0,0.14);
}

@media (max-width: 640px){
  .cinemage-series-picker{top:10px;left:10px;gap:10px;padding:9px 10px;border-radius:14px}
  .cinemage-series-picker label span{display:none}
  .cinemage-series-picker select{
    /* shrink minimum width and padding on very small screens */
    min-width: 120px;
    padding: 8px 36px 8px 14px;
    border-radius: 10px;
    font-weight: 800;
  }
}


/* === Series picker pill style (Kinoflix-like) === */
.cinemage-series-picker {
  /* Apply a dark translucent backdrop for series picker on single series pages */
  background: rgba(10, 14, 20, 0.78) !important;
  border: 1px solid rgba(248, 194, 80, 0.25) !important;
  padding: 10px 12px !important;
  gap: 16px !important;
  /* position closer to the top on all screens */
  top: 14px !important;
  left: 18px !important;
  border-radius: 14px !important;
  z-index: 999 !important;
}

.cinemage-series-picker label {
  display: none !important;
}

.cinemage-series-picker .cinemage-series-col {
  min-width: unset !important;
}

.cinemage-series-picker .cinemage-series-col select {
  /* Flatten the default select styling to allow custom backgrounds/icons */
  appearance: none;
  -webkit-appearance: none;
  /* Dark translucent backdrop for selects */
  background: rgba(28, 32, 38, 0.62) !important;
  /* Use a subtle golden border to echo the Kinoflix style */
  border: 1px solid rgba(248, 194, 80, 0.20) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  padding: 18px 56px 18px 24px !important;
  border-radius: 12px !important;
  line-height: 1;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Replace the default arrow with a golden chevron icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f8c250' stroke-opacity='0.9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 18px 18px !important;
}

.cinemage-series-picker .cinemage-series-col select:focus {
  outline: none !important;
  /* On focus, strengthen the golden border and subtle glow */
  border-color: rgba(248, 194, 80, 0.45) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22), 0 0 0 3px rgba(248, 194, 80, 0.10) !important;
}

.cinemage-series-picker .cinemage-series-col select:hover {
  /* Slightly darken on hover */
  background: rgba(28, 32, 38, 0.72) !important;
  border-color: rgba(248, 194, 80, 0.30) !important;
}

/* Submit button is rendered only inside <noscript>, so we don't need to hide it via CSS. */

@media (max-width: 768px) {
  .cinemage-series-picker {
    /* reduce spacing on smaller screens and lift the picker */
    top: 8px !important;
    left: 10px !important;
    gap: 8px !important;
  }
  /* On mobile, make the series/episode selects even more compact */
  .cinemage-series-picker .cinemage-series-col select {
    width: 120px !important;
    font-size: 14px !important;
    /* decrease vertical padding and overall width further */
    padding: 6px 28px 6px 12px !important;
    border-radius: 8px !important;
    background-position: right 14px center !important;
    background-size: 16px 16px !important;
  }
}

@media (max-width: 480px) {
  .cinemage-series-picker {
    /* further lift and tighten layout on very small screens */
    top: 6px !important;
    left: 8px !important;
    gap: 8px !important;
  }
  .cinemage-series-picker .cinemage-series-col select {
    /* Further reduce size on very small screens */
    width: 100px !important;
    font-size: 12px !important;
    padding: 5px 24px 5px 12px !important;
    border-radius: 7px !important;
    background-position: right 10px center !important;
    background-size: 14px 14px !important;
  }
}

@media (max-width: 360px) {
  .cinemage-series-picker .cinemage-series-col select {
    /* The smallest breakpoint: shrink as much as possible */
    width: 90px !important;
    font-size: 11px !important;
    padding: 4px 22px 4px 10px !important;
    border-radius: 6px !important;
    background-position: right 8px center !important;
    background-size: 12px 12px !important;
  }
}

/* =========================================================
 * Search / Filter bar
 * =======================================================*/

.cm-filter {
  margin: 22px 0 18px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(19, 23, 32, 0.72);
  border: 1px solid rgba(0, 217, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cm-filter__row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.9fr auto;
  gap: 12px;
  align-items: center;
}

.cm-filter__row.is-archive {
  grid-template-columns: 1.2fr 0.8fr 0.9fr auto;
}

.cm-filter input[type="search"],
.cm-filter select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(5, 8, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
  outline: none;
}

.cm-filter input[type="search"]::placeholder { color: rgba(255,255,255,0.55); }

.cm-filter select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.9%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%226 8 12 14 18 8%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  padding-right: 42px;
}

.cm-filter__btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: #00d9ff;
  color: #001018;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 217, 255, 0.20);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cm-filter__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 217, 255, 0.30);
}

.cm-filter__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}

.cm-filter__reset {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,0.35);
}

.cm-filter__reset:hover { color: #fff; }

@media (max-width: 768px) {
  .cm-filter__row,
  .cm-filter__row.is-archive {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
 * Global search modal
 * =======================================================*/

.cm-search,
.cm-search-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.cm-search.is-open,
.cm-search-modal.is-open { display: block; }

.cm-search__backdrop,
.cm-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
}

.cm-search__panel,
.cm-search-panel {
  position: relative;
  width: min(720px, calc(100% - 28px));
  margin: 90px auto 0;
  background: rgba(19, 23, 32, 0.92);
  border: 1px solid rgba(0, 217, 255, 0.18);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.cm-search__x,
.cm-search-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(5,8,16,0.55);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.cm-search__x:hover,
.cm-search-close:hover { background: rgba(5,8,16,0.75); }

.cm-search__title,
.cm-search-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
}

.cm-search__form .cm-filter { margin: 0; }
.cm-search-form .cm-filter { margin: 0; }

.cm-search-row {
  display: flex;
  gap: 10px;
  padding: 18px 18px 10px;
}

.cm-search-input {
  flex: 1;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(0, 217, 255, 0.18);
  background: rgba(5, 8, 16, 0.55);
  color: #fff;
  padding: 0 14px;
  outline: none;
}

.cm-search-input:focus {
  border-color: rgba(0, 217, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(0, 217, 255, 0.12);
}

.cm-search-submit {
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  border: 0;
  background: var(--accent-cyan);
  color: #001018;
  font-weight: 800;
  cursor: pointer;
}

.cm-search-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 217, 255, 0.25);
}

.cm-search-hint {
  padding: 8px 18px 18px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* =========================================================
 * Rating badge on cards
 * =======================================================*/

.home-card .cm-card-rating {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(0, 217, 255, 0.25);
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Keep the classic IMDb pill + numeric value */
.home-card .cm-card-rating .imdb-logo{margin-right:6px}
.home-card .cm-card-rating .cm-card-rating-num{color:#fff;font-family:Orbitron,system-ui;font-weight:900}


/* =========================================================
   Responsive improvements + Mobile Off-canvas Menu (v1.1.2-r)
   ========================================================= */

/* Safer fluid paddings */
.cinemage-header { padding: 1rem clamp(1rem, 4vw, 3rem); }
.page, .detail-page, .cinemage-single-page, .home-section, .archive-page, .archive-container { padding-left: clamp(1rem, 4vw, 3rem); padding-right: clamp(1rem, 4vw, 3rem); }

/* Mobile menu toggle (hamburger) */
.cinemage-menu-toggle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0, 217, 255, 0.18);
  background: rgba(0, 217, 255, 0.06);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.cinemage-menu-toggle:hover { transform: translateY(-1px); background: rgba(0, 217, 255, 0.12); border-color: rgba(0, 217, 255, 0.28); }
.cinemage-menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  opacity: 0.9;
}

.cinemage-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1090;
  opacity: 0;
  transition: opacity .25s ease;
}
.cinemage-nav-backdrop.is-open{display:block;opacity:1}
body.cm-nav-open { overflow: hidden; }
body.cm-nav-open .cinemage-nav-backdrop { display: block; opacity: 1; }

/* Layout tuning */
.home-hero-content { max-width: min(650px, 92vw); left: clamp(1rem, 4vw, 5%); }

/* Filter bar responsive */
@media (max-width: 900px) {
  .cinemage-menu-toggle { display: inline-flex; }

  .cinemage-header{padding:1rem; justify-content:space-between;}
  .cinemage-header-actions{gap:.6rem; margin-left:0;}

  .cinemage-header-inner { gap: 1rem; }

  /* Off-canvas nav */
  .cinemage-nav {
    position: fixed;
    top: 0;
    right: -360px;
    width: min(360px, 86vw);
    height: 100vh;
    z-index: 1100;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    padding: 90px 18px 18px;
    background: rgba(5, 8, 16, 0.98);
    border-left: 1px solid rgba(0, 217, 255, 0.14);
    box-shadow: -20px 0 60px rgba(0,0,0,0.45);
    transition: right .25s ease;
  }
  body.cm-nav-open .cinemage-nav { right: 0; }

  .cinemage-nav ul { flex-direction: column; gap: 8px; width: 100%; }
  .cinemage-nav a {
    display: block;
    padding: 12px 12px;
    border-radius: 12px;
    background: rgba(0, 217, 255, 0.06);
    border: 1px solid rgba(0, 217, 255, 0.12);
  }
  .cinemage-nav a::after { display: none; }

  .cinemage-search-btn {
    margin-top: auto;
    width: 100%;
    justify-content: center;
    padding: 0.95rem 1rem;
    border-radius: 12px;
    background: rgba(0, 217, 255, 0.10);
    border: 1px solid rgba(0, 217, 255, 0.20);
  }

  /* Filter bar -> 2 columns */
  .cm-filter__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cm-filter__field--q { grid-column: 1 / -1; }
  .cm-filter__actions { grid-column: 1 / -1; justify-content: flex-end; gap: 10px; }
}

@media (max-width: 1024px) {
  .home-hero { height: 72vh; }
  .home-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.5rem; }
  .movies-carousel { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.25rem; }
  .movie-info-section { gap: 2rem; }
}

@media (max-width: 768px) {
  .home-hero { height: 68vh; }
  .home-hero-slide::before {
    background: linear-gradient(180deg,
      rgba(5, 8, 16, 0.92) 0%,
      rgba(5, 8, 16, 0.62) 55%,
      rgba(5, 8, 16, 0.15) 100%
    );
  }
  .home-hero-content {
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 1.25rem 1.25rem;
    border-radius: 16px;
    background: rgba(5, 8, 16, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 217, 255, 0.12);
  }
  .home-hero-title { font-size: clamp(2.6rem, 8vw, 3.4rem); }
  .home-hero-subtitle { font-size: 1rem; }

  .home-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .home-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }

  .detail-topbar { flex-wrap: wrap; }
  .video-controls { flex-wrap: wrap; gap: 0.75rem; padding: 1rem; }
  .progress-bar { order: 3; flex-basis: 100%; }
  .time-display { order: 4; margin-left: auto; font-size: 0.85rem; }

  .movie-title { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .movie-meta { gap: 1rem; }

  .cast-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 600px) {
  .home-play-btn { padding: 0.9rem 1.6rem; font-size: 1rem; }
  .movie-poster-wrapper { max-width: 260px; margin: 0 auto; }
  .cm-filter { padding: 14px; }
}

@media (max-width: 480px) {
  .cm-filter__grid { grid-template-columns: 1fr; }
  .cm-filter__actions { justify-content: stretch; }
  .cm-filter__btn, .cm-filter__reset { flex: 1; text-align: center; }

  .home-hero-dots { bottom: 18px; }
  .cinemage-header { padding: 0.85rem 1rem; }
}



/* =========================================================
 * Hero slider (Adjara-style)
 * =======================================================*/
.home-hero-original{
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: rgba(255,255,255,.82);
  margin: 0;
  line-height: 1.25;
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

.home-hero-center-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  width:86px;
  height:86px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.75);
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.home-hero-center-play:hover{
  transform:translate(-50%,-50%) scale(1.06);
  background:rgba(0,0,0,.26);
  border-color:rgba(255,255,255,.95);
}
.home-hero-center-play:focus-visible{
  outline:2px solid rgba(0,217,255,.85);
  outline-offset:4px;
}

.home-hero-center-play-icon{
  width:0;height:0;
  border-left:18px solid rgba(255,255,255,.92);
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  margin-left:4px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

@media (min-width: 769px){
  .home-hero-overlay{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.52) 0%,
        rgba(0,0,0,.10) 32%,
        rgba(0,0,0,.22) 62%,
        rgba(0,0,0,.76) 100%
      ),
      radial-gradient(70% 120% at 18% 75%,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,0) 60%
      ),
      radial-gradient(70% 120% at 90% 55%,
        rgba(0,0,0,.58) 0%,
        rgba(0,0,0,0) 62%
      );
  }

  .home-hero-content{
    left: clamp(34px, 5vw, 86px);
    bottom: clamp(26px, 5vh, 54px);
    max-width: min(560px, 70vw);
  }
  .home-hero-title{
    margin-bottom: .35rem;
    font-size: clamp(2.2rem, 3.6vw, 3.15rem);
  }

  .home-hero-dots{
    left:auto;
    transform:none;
    right: clamp(26px, 3.8vw, 64px);
    bottom: 26px;
    gap: 8px;
  }
  .home-dot{
    width:8px;
    height:8px;
    background:rgba(255,255,255,.42);
  }
  .home-dot.active{
    background:rgba(255,255,255,.95);
    transform:none;
  }

  .home-hero-arrow{
    width:72px;
    height:92px;
    border:none;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    font-size:0;
    color:transparent;
  }
  .home-hero-arrow::before{
    content:"";
    width:22px;
    height:22px;
    border-top:3px solid rgba(255,255,255,.55);
    border-right:3px solid rgba(255,255,255,.55);
    display:block;
    margin:auto;
    transition:border-color .2s ease, transform .2s ease;
  }
  .home-hero-arrow.prev{ left: 10px; }
  .home-hero-arrow.next{ right: 10px; }
  .home-hero-arrow.prev::before{ transform: rotate(-135deg); }
  .home-hero-arrow.next::before{ transform: rotate(45deg); }
  .home-hero-arrow:hover{
    transform:translateY(-50%);
    background:transparent;
  }
  .home-hero-arrow:hover::before{
    border-color:rgba(255,255,255,.90);
  }
}

@media (max-width: 768px){
  .home-hero-center-play{ width:72px;height:72px; }
  .home-hero-center-play-icon{
    border-left-width:15px;
    border-top-width:10px;
    border-bottom-width:10px;
  }
}


/* =========================================================
 * Light mode overrides
 * =======================================================*/
html[data-theme="light"]{
  --bg-dark:#f3f5f8;
  --bg-darker:#f7f8fb;
  --bg-card:#ffffff;
  --bg-player:#eff2f7;
  --accent-cyan:#0077ff;
  --accent-blue:#005bff;
  --text-primary:#0b1220;
  --text-secondary:#3d4b66;
  --text-muted:#64748b;
}

html[data-theme="light"] .cinemage-header{
  background:linear-gradient(180deg,rgba(247,248,251,.95) 0%,rgba(247,248,251,0) 100%);
}
html[data-theme="light"] .cinemage-header.scrolled{
  background:rgba(247,248,251,.94);
  backdrop-filter:blur(10px);
}
html[data-theme="light"] .home-hero-slide::before{
  background:linear-gradient(90deg,rgba(247,248,251,.95) 0%,rgba(247,248,251,.72) 42%,rgba(247,248,251,.28) 72%,transparent 100%);
}
html[data-theme="light"] .home-dot{background:rgba(0,0,0,.18)}

html[data-theme="light"] .cinemage-footer{
  background:rgba(255,255,255,.78);
  border-top:1px solid rgba(0,0,0,.06);
}

html[data-theme="light"] .cinemage-theater-close{
  background:rgba(255,255,255,.85);
  border-color:rgba(0,0,0,.12);
}

html[data-theme="light"] .cinemage-series-picker{
  background:rgba(255,255,255,.80);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 14px 36px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04) inset;
}

html[data-theme="light"] .cm-search-panel{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}
html[data-theme="light"] .cm-search-close{
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.90);
  color:var(--text-primary);
}
html[data-theme="light"] .cm-search-close:hover{
  background:rgba(255,255,255,.98);
}
html[data-theme="light"] .cm-search-input{
  background:rgba(255,255,255,.92);
  color:var(--text-primary);
  border:1px solid rgba(0,0,0,.10);
}
html[data-theme="light"] .cm-filter__reset{
  color:rgba(0,0,0,0.65);
  border-bottom:1px dashed rgba(0,0,0,0.25);
}
html[data-theme="light"] .cm-filter__reset:hover{color:rgba(0,0,0,0.85)}

@media (max-width: 900px) {
  html[data-theme="light"] .cinemage-nav{
    background:rgba(247,248,251,0.98);
    border-left:1px solid rgba(0,0,0,0.08);
    box-shadow:-20px 0 60px rgba(0,0,0,0.15);
  }
  html[data-theme="light"] .cinemage-nav a{
    background:rgba(0,0,0,0.03);
    border:1px solid rgba(0,0,0,0.08);
  }
  html[data-theme="light"] .cinemage-menu-toggle span{background:var(--text-primary)}
}

@media (max-width: 768px) {
  html[data-theme="light"] .home-hero-slide::before{
    background: linear-gradient(180deg,
      rgba(247,248,251,0.92) 0%,
      rgba(247,248,251,0.62) 55%,
      rgba(247,248,251,0.15) 100%
    );
  }
  html[data-theme="light"] .home-hero-content{
    background:rgba(255,255,255,0.70);
    border:1px solid rgba(0,0,0,0.08);
  }
}


/* Mobile/Tablet header layout (keep desktop unchanged) */
@media (max-width: 1024px){
  /* Mobile header: keep layout stable and prevent the search button from overlapping the logo */
  .cinemage-header{padding:1rem; justify-content:space-between; gap:12px;}
  .logo{position:relative; left:auto; transform:none; margin:0; flex:0 0 auto; z-index:1;}
  .cm-logo-img{max-height:32px; height:auto; width:auto;}
  .cm-logo-default{height:32px;}

  /* Show quick links on mobile/tablet and shrink their size */
  .cm-quick-links{
    display:flex;
    align-items:center;
    gap:14px;
  }
  /* Reduce the size of the icon wrappers for mobile */
  .cm-ql-icon-wrap{
    width:38px;
    height:28px;
  }
  /* Reduce font size and spacing of labels on mobile */
  .cm-ql-label{
    font-size:0.65rem;
    margin-top:2px;
  }

  /* Right side: quick links + actions. Allow it to shrink without pushing over the logo */
  .cinemage-header-right{margin-left:auto; width:auto; display:flex; align-items:center; justify-content:flex-end; gap:12px; flex:1 1 auto; min-width:0;}
  .cinemage-header-actions{width:auto; display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-left:0; flex:0 0 auto;}

  /* Theme toggle button is removed from markup, keep search aligned to the right */
  .search-btn{margin-left:0;}
}

/* Extra-small screens: hide quick-link labels to free space */
@media (max-width: 420px){
  .cm-ql-label{display:none;}
  .cm-ql-icon-wrap{width:34px; height:26px;}
}



/* =========================================================
 * Home hero slider — Mobile tweaks
 * (Keep desktop layout intact)
 * =======================================================*/
@media (max-width: 768px){
  .home-hero{
    height: 420px;
  }

  .home-hero-content{
    left: 18px;
    right: 18px;
    bottom: 22px;
    max-width: none;
    /* Override older mobile rules that centered the block */
    transform: none;
    text-align: left;
    padding: 0;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .home-hero-title{
    font-size: clamp(1.55rem, 7.2vw, 2.05rem);
    line-height: 1.05;
    margin-bottom: .35rem;
    max-width: 72vw;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .home-hero-original{
    font-size: 0.98rem;
    color: rgba(255,255,255,.78);
    max-width: 72vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Dots bottom-right (Adjaranet style) */
  .home-hero-dots{
    left: auto;
    transform: none;
    right: 18px;
    bottom: 16px;
    gap: 8px;
  }

  /* Chevron arrows */
  .home-hero-arrow{
    width: 56px;
    height: 72px;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 0;
    color: transparent;
  }
  .home-hero-arrow::before{
    content:"";
    width: 18px;
    height: 18px;
    border-top: 3px solid rgba(255,255,255,.55);
    border-right: 3px solid rgba(255,255,255,.55);
    display:block;
    margin:auto;
  }
  .home-hero-arrow.prev{ left: 6px; }
  .home-hero-arrow.next{ right: 6px; }
  .home-hero-arrow.prev::before{ transform: rotate(-135deg); }
  .home-hero-arrow.next::before{ transform: rotate(45deg); }
  .home-hero-arrow:hover{ transform: translateY(-50%); }

  /* Center play */
  .home-hero-center-play{
    width: 68px;
    height: 68px;
  }
  .home-hero-center-play-icon{
    border-left-width: 15px;
    border-top-width: 10px;
    border-bottom-width: 10px;
  }
}


/* Mobile nav shortcuts (Movies / Series) */
.cm-nav-shortcuts{display:flex;gap:12px;margin:0 0 14px 0}
.cm-nav-shortcut{
  flex:1;display:flex;align-items:center;gap:10px;
  padding:12px 12px;border-radius:14px;
  background:rgba(0,217,255,0.06);
  border:1px solid rgba(0,217,255,0.18);
  color:var(--text-primary);
  text-decoration:none;
}
.cm-nav-shortcut:active{transform:scale(0.99)}
.cm-nav-shortcut-icon{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.14);
  font-size:16px;
}
html[data-theme="light"] .cm-nav-shortcut-icon{
  background:rgba(0,0,0,0.05);
  border:1px solid rgba(0,0,0,0.08);
}
.cm-nav-shortcut-label{font-weight:700}
@media (min-width: 1025px){
  .cm-nav-shortcuts{display:none}
}


/* Trailer button + modal */

.cm-player-actions{
  padding: 10px 16px 16px;
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content:flex-start;
  border-top: 1px solid rgba(255,255,255,.08);
}
html[data-theme="light"] .cm-player-actions{
  border-top: 1px solid rgba(0,0,0,.08);
}


.cm-trailer-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 12px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#fff;
  font-weight:600;
  font-size:13px;
  line-height:1;
  cursor:pointer;
}
.cm-trailer-btn:hover{ background: rgba(255,255,255,.08); }

html[data-theme="light"] .cm-trailer-btn{
  border:1px solid rgba(0,0,0,.18);
  color:#111;
}
html[data-theme="light"] .cm-trailer-btn:hover{ background: rgba(0,0,0,.04); }

@media (max-width: 480px){
  .cm-player-actions{ padding: 8px 12px 12px; }
  .cm-trailer-btn{ height:26px; font-size:12px; }
}

.cm-modal[hidden]{ display:none !important; }
.cm-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.cm-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
}
.cm-modal-dialog{
  position: relative;
  width: min(900px, calc(100% - 32px));
  margin: 7vh auto 0;
  background: rgba(10,12,18,.98);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.cm-modal-close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  font-size: 22px;
  line-height: 1;
  z-index: 1;
}
.cm-modal-body{
  position: relative;
  padding: 56.25% 0 0; /* 16:9 */
}
.cm-modal-body iframe,
.cm-modal-body video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* Report issue (under poster) */
.cm-report-wrap{
  margin-top: 10px;
}
.cm-report-toggle{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  font-weight: 600;
  text-align: center;
}
.cm-report-form{
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
}
.cm-report-label{
  display:block;
  font-size: 13px;
  margin-bottom: 10px;
  color: rgba(255,255,255,.8);
}
.cm-report-form select,
.cm-report-form textarea{
  width:100%;
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color:#fff;
  padding: 10px 12px;
  outline: none;
}
.cm-report-form textarea{ resize: vertical; min-height: 80px; }
.cm-report-submit{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
  background: rgba(0, 180, 255, .85);
  color: #071018;
  font-weight: 800;
  cursor: pointer;
}
.cm-report-status{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.8);
}
.cm-report-status.is-ok{ color: rgba(140,255,170,.95); }
.cm-report-status.is-err{ color: rgba(255,140,140,.95); }

@media (max-width: 480px){
  .cm-modal-dialog{ width: calc(100% - 20px); margin-top: 5vh; }
}

/* SEO-only editor content (hidden visually, present in HTML) */
.cm-seo-only{
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}