/* =====================================================================
   DARK THEME OVERRIDE — "Streamline" RTL Arabic skin for Apollo
   Modern high-contrast near-black + crimson palette, clean sans-serif
   typography, glass/blur sticky nav, full-bleed hero — in the spirit
   of contemporary streaming-site UI patterns (own layout/markup, not
   copied from any specific site).
   Loaded AFTER apollo.css / apollo.rtl.css / custom.css so it wins on
   specificity ties. Nothing in the original theme files is modified,
   so this can be disabled any time by removing one <link> in header.tpl
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700&display=swap');

:root{
  --pm-bg:            #0a0a0a;
  --pm-bg-elevated:   #131313;
  --pm-surface:       #161616;
  --pm-surface-hover: #212121;
  --pm-border:        #262626;
  --pm-text:          #f5f5f5;
  --pm-text-dim:      #c2c2c2;
  --pm-text-muted:    #8a8a8a;
  --pm-accent:        #e51e33;   /* crimson */
  --pm-accent-hover:  #ff2e46;
  --pm-accent-dim:    #a01524;
  --pm-gold:          #f2b632;   /* rating stars */
  --pm-radius:        8px;
  --pm-font:          'Cairo', 'Tajawal', 'Roboto', Helvetica, Arial, sans-serif;
  --pm-font-display:  'Cairo', sans-serif;
}

html, body{
  background-color: var(--pm-bg) !important;
  color: var(--pm-text) !important;
  font-family: var(--pm-font) !important;
}

/* Display face for titles — vintage cinema-poster character, used with
   restraint: section heads, hero titles, card titles only. */
h1, h2, .pm-section-head h2, .pm-hero-slide-info h2,
.thumbnail .caption h3 a{
  font-family: var(--pm-font-display);
  letter-spacing: .5px;
}

/* Section head — bold title with a short accent underline, clean/modern */
.pm-section-head{
  position:relative;
  padding-inline-start:16px;
  margin-bottom:18px;
}
.pm-section-head::before{
  content:"";
  position:absolute; top:4px; bottom:4px; right:0;
  width:4px;
  background:var(--pm-accent);
  border-radius:3px;
}
.pm-section-head h2{
  font-size:22px;
  margin:0;
}

/* ---------- Hero slideshow (homepage top) ---------- */
.pm-hero-slider{ direction:rtl; }
.pm-hero-slide{ position:relative; height:520px; overflow:hidden; }
.pm-hero-slide-link{ display:block; height:100%; position:relative; }
.pm-hero-slide-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center top;
  filter:brightness(.5) saturate(1.1);
  transform:scale(1.02);
}
.pm-hero-slide-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.1) 0%, rgba(10,10,10,.55) 55%, var(--pm-bg) 100%),
    linear-gradient(90deg, rgba(229,30,51,.28) 0%, transparent 45%);
}
.pm-hero-slide-info{
  position:absolute; bottom:44px; right:44px; left:44px;
  z-index:2;
}
.pm-hero-slide-info h2{
  color:#fff !important; font-size:38px; font-weight:800; margin:0 0 16px;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
  max-width:680px;
}
.pm-hero-slide-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--pm-accent); color:#fff; font-weight:700;
  padding:11px 26px; border-radius:999px; font-size:15px;
  box-shadow:0 8px 20px rgba(229,30,51,.35);
  transition:background .2s ease, transform .2s ease;
}
.pm-hero-slide-btn:hover{ background:var(--pm-accent-hover); transform:translateY(-2px); }
.slick-dots{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; list-style:none; padding:0; margin:0; z-index:3;
}
.slick-dots li button{
  text-indent:-9999px; width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.4); border:none; padding:0; cursor:pointer;
}
.slick-dots li.slick-active button{ background:var(--pm-accent); }
.slick-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  background:rgba(0,0,0,.4); color:#fff; border:none; width:38px; height:38px;
  border-radius:50%; font-size:18px; cursor:pointer; text-indent:-9999px;
}
.slick-prev{ right:16px; }
.slick-next{ left:16px; }
.slick-prev::before, .slick-next::before{
  content:""; position:absolute; top:50%; left:50%; width:8px; height:8px;
  border-top:2px solid #fff; border-right:2px solid #fff;
  transform:translate(-50%,-50%) rotate(-45deg);
}
.slick-next::before{ transform:translate(-50%,-50%) rotate(135deg); }

/* ---------- Poster-style thumbnails (vertical, not landscape) ---------- */
.pm-video-thumb{
  aspect-ratio: 2 / 3;
  overflow:hidden;
}
.pm-video-thumb img{
  width:100% !important; height:100% !important;
  object-fit:cover;
}
.thumbnail-small .pm-video-thumb,
.thumbnail-medium .pm-video-thumb,
.thumbnail-large .pm-video-thumb{
  aspect-ratio: 2 / 3;
}

/* ---------- Dense poster grid (Movies / Series homepage rows) ---------- */
.pm-movies-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:14px;
  padding:0;
  margin:0;
}
.pm-movies-grid > li{
  list-style:none;
}
.pm-movies-grid .thumbnail{
  margin-bottom:0;
}
.pm-movies-grid .pm-video-thumb,
.pm-movies-grid .thumbnail-poster .pm-video-thumb{
  aspect-ratio: 2 / 3;
}
@media (max-width:1200px){ .pm-movies-grid{ grid-template-columns: repeat(5, 1fr); } }
@media (max-width:992px){ .pm-movies-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width:576px){ .pm-movies-grid{ grid-template-columns: repeat(3, 1fr); gap:8px; } }

/* ---------- Layout surfaces ---------- */
.mastcontent-wrap,
.widget,
.panel,
.panel-default,
.panel-body,
.panel-heading,
.well,
.modal-content,
.dropdown-menu,
.list-group-item,
.pm-search-suggestions,
.tab-content,
.nav-tabs{
  background-color: var(--pm-surface) !important;
  border-color: var(--pm-border) !important;
  color: var(--pm-text) !important;
}

.panel-heading{
  border-bottom: 1px solid var(--pm-border) !important;
}

hr{ border-color: var(--pm-border); }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6{ color: #fff !important; font-weight: 700; }
p, span, li, label, td, th{ color: var(--pm-text-dim); }
a{ color: var(--pm-text); }
a:hover, a:focus{ color: var(--pm-accent); text-decoration: none; }
.text-muted{ color: var(--pm-text-muted) !important; }

/* ---------- Top navbar ---------- */
.navbar,
.navbar-default,
.navbar-fixed-top,
.navbar-fixed-bottom{
  background-color: rgba(11,11,13,0.96) !important;
  border-color: var(--pm-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
.navbar-default .navbar-nav > li > a{
  color: var(--pm-text) !important;
  font-weight: 600;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a{
  color: var(--pm-accent) !important;
  background-color: transparent !important;
}
.navbar-pmuser li a{ color: var(--pm-text) !important; }

/* ---------- Header / main nav (actual Apollo markup: header-bg / pm-top-head / pm-top-nav) ---------- */
.header-bg{
  position: sticky; top: 0; z-index: 1000;
  background-color: rgba(10,10,10,.85) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--pm-border);
}
.pm-top-head{ padding: 10px 0; }
.header-logo h3 a,
.header-logo a{ color: #fff !important; font-weight: 800; letter-spacing: .3px; }
.pm-top-nav{
  background: transparent !important;
  border-top: 1px solid var(--pm-border);
}
.pm-top-nav .nav-tabs{ border-bottom: none; }
.pm-top-nav .nav-tabs > li > a{
  color: var(--pm-text-dim) !important;
  background: transparent !important;
  border: none !important;
  font-weight: 600;
  padding: 12px 16px;
  transition: color .2s ease;
}
.pm-top-nav .nav-tabs > li > a:hover,
.pm-top-nav .nav-tabs > li.active > a{
  color: #fff !important;
  background: transparent !important;
}
.pm-top-nav .nav-tabs > li.active > a{
  box-shadow: inset 0 -3px 0 var(--pm-accent);
}
#pm-top-search .pm-search-form .form-control{
  border-radius: 999px !important;
}
#pm-top-search .pm-search-form .btn-default{
  border-radius: 999px !important;
  margin-inline-start: 6px;
}

/* Search box */

.navbar input[type="text"],
.navbar input[type="search"]{
  background-color: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  color: var(--pm-text) !important;
}
.navbar input::placeholder{ color: var(--pm-text-muted) !important; }

/* ---------- Buttons ---------- */
.btn-primary{
  background-color: var(--pm-accent) !important;
  border-color: var(--pm-accent) !important;
  color: #ffffff !important;
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus{
  background-color: var(--pm-accent-hover) !important;
  border-color: var(--pm-accent-hover) !important;
}
.btn-default{
  background-color: var(--pm-surface-hover) !important;
  border-color: var(--pm-border) !important;
  color: var(--pm-text) !important;
}
.btn-default:hover{ background-color: #313138 !important; }

/* ---------- Video cards / thumbnails ---------- */
.thumbnail{
  background-color: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius) !important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.thumbnail:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 0 0 2px var(--pm-accent), 0 14px 28px rgba(0,0,0,.5), 0 0 26px 2px rgba(232,163,61,.35);
  z-index: 2;
  border-color: var(--pm-accent) !important;
}
.thumbnail .caption{
  background-color: var(--pm-surface) !important;
}
.thumbnail .caption h3 a{ color: var(--pm-text) !important; font-weight: 400; }
.thumbnail .caption h3 a:hover{ color: var(--pm-accent) !important; }
.thumbnail .caption p, .thumbnail .caption span{ color: var(--pm-text-muted) !important; }

/* Video duration / HD badges on thumbs */
.pm-video-duration,
.label-duration,
.badge{
  background-color: rgba(0,0,0,.75) !important;
  color: #fff !important;
  border-radius: 4px;
}

/* Star ratings */
.rating, .fa-star, .pm-rating-stars{ color: var(--pm-gold) !important; }

/* ---------- Forms ---------- */
input, select, textarea,
.form-control{
  background-color: var(--pm-surface-hover) !important;
  border: 1px solid var(--pm-border) !important;
  color: var(--pm-text) !important;
}
.form-control:focus{
  border-color: var(--pm-accent) !important;
  box-shadow: 0 0 0 2px rgba(232,163,61,.25) !important;
}
::placeholder{ color: var(--pm-text-muted) !important; }

/* ---------- Pagination ---------- */
.pagination > li > a,
.pagination > li > span{
  background-color: var(--pm-surface) !important;
  border-color: var(--pm-border) !important;
  color: var(--pm-text) !important;
}
.pagination > .active > a,
.pagination > .active > span{
  background-color: var(--pm-accent) !important;
  border-color: var(--pm-accent) !important;
  color: #ffffff !important;
  font-weight: 700;
}
.pagination > li > a:hover{ background-color: var(--pm-surface-hover) !important; }

/* ---------- Tabs / dropdown items ---------- */
.dropdown-menu > li > a{ color: var(--pm-text) !important; }
.dropdown-menu > li > a:hover{
  background-color: var(--pm-surface-hover) !important;
  color: var(--pm-accent) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover{
  background-color: var(--pm-bg) !important;
  border-color: var(--pm-border) !important;
  color: var(--pm-accent) !important;
}

/* ---------- Video watch page ---------- */
.pm-video-watch-featured,
.video-js{
  background-color: #000 !important;
  border-radius: var(--pm-radius);
}
.pm-video-watch-featured h2 a{ color: #fff !important; }

/* ---------- Comments ---------- */
.pm-comment, .media{
  background-color: var(--pm-surface) !important;
  border-color: var(--pm-border) !important;
}

/* ---------- Footer ---------- */
footer, #footer, .footer{
  background-color: var(--pm-bg-elevated) !important;
  border-top: 1px solid var(--pm-border) !important;
  color: var(--pm-text-muted) !important;
}
footer a, #footer a, .footer a{ color: var(--pm-text-dim) !important; }
footer a:hover, #footer a:hover, .footer a:hover{ color: var(--pm-accent) !important; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--pm-bg); }
::-webkit-scrollbar-thumb{ background: var(--pm-surface-hover); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--pm-accent-dim); }

/* ---------- Alerts (keep readable) ---------- */
.alert{ border-radius: 6px; }
.alert-warning{ background-color: #3a2a06 !important; color: #f2c94c !important; border-color: #5a4108 !important; }
.alert-danger{ background-color: #3a0d10 !important; color: #ff8087 !important; border-color: #5a1319 !important; }
.alert-success{ background-color: #0c2e18 !important; color: #6fe08c !important; border-color: #124a26 !important; }
.alert-info{ background-color: #0b2733 !important; color: #6fcbe0 !important; border-color: #123c4d !important; }