/**
 * NovaFilm cinematic redesign v2
 * Dark = gold/yellow · Light (html.dark) = vivid orange
 */

/* ========================================================================== */
/* Foundations                                                                */
/* ========================================================================== */

:root {
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fc5-radius: 18px;
  --fc5-bg: #0f0f12;
  --fc5-primary-grad: linear-gradient(135deg, #f5c518, #ffb300);
  --fc5-text: #fff;
  --fc5-text-muted: #d2d2d2;
  --fc5-shadow: 0 18px 40px rgb(0 0 0 / 45%);
  --fc5-ease: var(--ease-out);
}

html.dark {
  --fc5-primary-grad: linear-gradient(135deg, #ff4d00, #ff7a33);
  --fc5-bg: #fff;
}

::selection {
  background: color-mix(in srgb, var(--primaryColor) 45%, transparent);
  color: var(--on-primary, #141414);
}

body {
  background:
    radial-gradient(1200px 480px at 80% -10%, var(--accent-glow, transparent), transparent 60%),
    var(--bg);
  color: var(--text);
  letter-spacing: -.01em;
}

h1, h2, h3 {
  text-wrap: balance;
}

a {
  transition: color .22s var(--ease-out), background .22s var(--ease-out), border-color .22s var(--ease-out), box-shadow .22s var(--ease-out), transform .22s var(--ease-out), filter .22s var(--ease-out), opacity .22s var(--ease-out);
}

/* ========================================================================== */
/* Header                                                                     */
/* ========================================================================== */

.header {
  background: color-mix(in srgb, var(--bg_darker) 92%, #000) !important;
  border-top: 3px solid var(--primaryColor) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--primaryColor) 28%, transparent);
}

.header.sticky {
  background: color-mix(in srgb, var(--stickyHeader) 88%, transparent) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--primaryColor) 22%, transparent) !important;
  box-shadow: var(--elev-1) !important;
}

.header .top_nav > ul > li > a {
  font-weight: 700 !important;
  border-radius: 12px;
  padding: 8px 12px !important;
}

.header .top_nav > ul > li > a:hover {
  color: var(--primaryColor) !important;
  background: color-mix(in srgb, var(--primaryColor) 14%, transparent);
}

.header .panel_button,
.header.header_style_2 .panel_button {
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--border, var(--bg_lighter)) 80%, transparent) !important;
  background: color-mix(in srgb, var(--bg2) 70%, transparent) !important;
}

.user_btn a,
.user_btn button,
.header.header_style_2 .wide {
  background: var(--primaryColor) !important;
  color: var(--on-primary, #141414) !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px var(--accent-glow) !important;
}

html.dark .header {
  background: var(--bg2) !important;
}

html.dark .header .top_nav > ul > li > a,
html.dark .header.sticky .top_nav > ul > li > a {
  color: var(--bg_darker) !important;
}

html.dark .header.sticky {
  background: color-mix(in srgb, #ffffff 90%, var(--primaryColor) 10%) !important;
}

/* ========================================================================== */
/* Hero / slider                                                              */
/* ========================================================================== */

.comfortSlider_wrap .dark_bg,
.comfortSlider_wrap .mixed_slider_bg {
  background: linear-gradient(180deg,
      rgb(0 0 0 / 35%) 0%,
      rgb(0 0 0 / 20%) 35%,
      var(--bg) 92%) !important;
}

.mixed_slider_title,
.comfortSlider_wrap .mixed_imdb {
  color: #fff !important;
  text-shadow: 0 4px 28px rgb(0 0 0 / 70%);
}

.comfort-slider .owl-item {
  transition: transform .5s var(--ease-out), filter .5s var(--ease-out);
}

.comfort-slider .owl-item.center {
  filter: drop-shadow(0 18px 30px rgb(0 0 0 / 35%));
}

/* ========================================================================== */
/* Film cards — poster style (.film_cat / .film_card5)                        */
/* ========================================================================== */

.film_cat:not(.film_card5) {
  margin-bottom: 18px !important;
  border-radius: var(--radius-lg);
  overflow: visible;
}

.film_cat:not(.film_card5) > a {
  display: block;
  position: relative;
}

.film_cat:not(.film_card5) .position-relative {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--fc5-shadow);
  isolation: isolate;
}

.film_cat:not(.film_card5) .position-relative::before {
  background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / 78%) 100%) !important;
  border-radius: inherit !important;
  z-index: 1;
  opacity: .95;
}

.film_cat:not(.film_card5) img {
  border-radius: var(--radius-lg) !important;
  aspect-ratio: 2/3 !important;
  transition: transform .55s var(--ease-out), filter .4s ease !important;
}

.film_cat:not(.film_card5):hover img {
  transform: scale(1.08);
  filter: saturate(1.08) brightness(.92);
}

.film_cat:not(.film_card5):hover .position-relative {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primaryColor) 55%, transparent),
    0 22px 48px rgb(0 0 0 / 45%);
}

.film_cat .film_overlay .dobed,
.film_cat .film_overlay .sub,
.film_cat .film_overlay .censored {
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 6px 12px !important;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px rgb(0 0 0 / 35%);
}

.film_cat .film_overlay .dobed {
  background: linear-gradient(135deg, #00c853, #00e676) !important;
  color: #04140a !important;
}

.film_cat .film_overlay .sub {
  background: linear-gradient(135deg, var(--primaryColor), var(--accent-2, var(--primaryColor))) !important;
  color: var(--on-primary, #141414) !important;
}

.film_cat .film_overlay .censored {
  background: linear-gradient(135deg, #ff1744, #ff5252) !important;
}

.film_cat .film_overlay2 {
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(180deg, rgb(0 0 0 / 10%), rgb(0 0 0 / 82%)) !important;
  backdrop-filter: blur(2px);
}

.film_cat_title {
  margin-top: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  color: var(--ink, var(--text)) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.dark .film_cat_title {
  color: var(--bg_darker) !important;
}

.imdbRate_overlay span {
  color: var(--primaryColor) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgb(0 0 0 / 55%);
}

/* ---- film_card5 premium ---- */

.film_card5 {
  border-radius: 18px !important;
  overflow: hidden !important;
  aspect-ratio: 2 / 3.05 !important;
  background: #0d0d10 !important;
  box-shadow: 0 16px 40px rgb(0 0 0 / 40%) !important;
  border: 1px solid rgb(255 255 255 / 6%) !important;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out) !important;
}

.film_card5:hover {
  transform: translateY(-10px) scale(1.02) !important;
  border-color: color-mix(in srgb, var(--primaryColor) 55%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primaryColor) 35%, transparent),
    0 28px 60px rgb(0 0 0 / 55%),
    0 0 40px var(--accent-glow) !important;
}

.film_card5 .card_poster img {
  transition: transform .7s var(--ease-out), filter .45s ease !important;
}

.film_card5:hover .card_poster img {
  transform: scale(1.12) !important;
  filter: brightness(.55) saturate(1.1) !important;
}

.film_card5 .poster_overlay {
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 0%) 0%,
    rgb(0 0 0 / 15%) 40%,
    rgb(0 0 0 / 78%) 78%,
    rgb(0 0 0 / 94%) 100%
  ) !important;
  opacity: 1 !important;
}

.film_card5:hover .poster_overlay {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primaryColor) 12%, transparent) 0%,
    rgb(0 0 0 / 45%) 45%,
    rgb(0 0 0 / 92%) 100%
  ) !important;
}

.film_card5 .card_content {
  padding: 12px !important;
}

.film_card5 .card_info {
  transform: translateY(28px) !important;
}

.film_card5:hover .card_info {
  transform: translateY(0) !important;
}

.film_card5 .title_fa {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em;
}

.film_card5 .imdb_badge {
  background: var(--fc5-primary-grad) !important;
  color: #141414 !important;
  border-radius: 9px !important;
  padding: 0 9px !important;
  height: 28px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 18px var(--accent-glow) !important;
}

html.dark .film_card5 .imdb_badge {
  color: #fff !important;
}

.film_card5 .quality_badge {
  border-radius: 9px !important;
  font-weight: 800 !important;
  backdrop-filter: blur(14px) !important;
}

.film_card5 .play_btn {
  background: var(--primaryColor) !important;
  color: var(--on-primary, #141414) !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  min-height: 42px;
  box-shadow: 0 12px 28px var(--accent-glow) !important;
}

.film_card5 .play_btn::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 2px;
}

.film_card5 .genres {
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--primaryColor) 18%, rgb(255 255 255 / 8%)) !important;
  border: 1px solid color-mix(in srgb, var(--primaryColor) 40%, transparent);
  color: #fff !important;
  font-weight: 700;
}

/* Center play ring on hover */
.film_card5 .card_link::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--primaryColor) 80%, #fff);
  background:
    radial-gradient(circle at 45% 50%, var(--primaryColor) 0 36%, transparent 37%),
    rgb(0 0 0 / 35%);
  box-shadow: 0 12px 30px rgb(0 0 0 / 45%), 0 0 0 8px color-mix(in srgb, var(--primaryColor) 18%, transparent);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
  z-index: 8;
  pointer-events: none;
}

.film_card5:hover .card_link::after {
  opacity: 1;
  transform: scale(1);
}

html.dark .film_card5 {
  border-color: color-mix(in srgb, var(--primaryColor) 18%, #fff) !important;
  box-shadow: 0 16px 36px rgb(90 40 10 / 12%) !important;
  background: #1a120e !important;
}

/* ========================================================================== */
/* List cards (.post / .post2)                                                */
/* ========================================================================== */

.post,
.post2 {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primaryColor) 8%, transparent), transparent 42%),
    var(--bg2) !important;
  border: 1px solid color-mix(in srgb, var(--border, var(--bg_lighter)) 90%, transparent) !important;
  border-radius: var(--radius-xl) !important;
  padding: 18px !important;
  margin-bottom: 18px !important;
  box-shadow: var(--elev-1) !important;
  overflow: hidden;
  position: relative;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}

.post:hover,
.post2:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primaryColor) 40%, transparent) !important;
  box-shadow: var(--elev-2) !important;
}

.post h2 a,
.post2 h2 a,
.post h1 a,
.post2 h1 a {
  color: var(--ink, var(--text)) !important;
  font-weight: 900 !important;
  letter-spacing: -.02em;
}

html.dark .post h2 a,
html.dark .post2 h2 a,
html.dark .post h1 a,
html.dark .post2 h1 a {
  color: var(--bg_darker) !important;
}

.post .post_image img,
.post2 .post_image img {
  border-radius: 16px !important;
  box-shadow: 0 12px 28px rgb(0 0 0 / 28%);
  transition: transform .4s var(--ease-out);
}

.post:hover .post_image img,
.post2:hover .post_image img {
  transform: scale(1.03);
}

.post__tags__body a,
.post_meta a,
.cat_title a,
.post2 .post_details .post_meta li a {
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--primaryColor) 42%, transparent) !important;
  color: var(--primaryColor) !important;
  background: color-mix(in srgb, var(--primaryColor) 10%, transparent) !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
}

.post__tags__body a:hover,
.post_meta a:hover,
.cat_title a:hover {
  background: var(--primaryColor) !important;
  color: var(--on-primary, #141414) !important;
}

.post2 .dub,
.post2 .sub,
.post2 .censored,
.post2 .legal,
.post2 .top250 {
  border-radius: 999px 0 0 999px !important;
  font-weight: 800 !important;
}

.post2 .dub {
  background: linear-gradient(90deg, #00c853, #00e676) !important;
  color: #04140a !important;
}

.post2 .sub {
  background: linear-gradient(90deg, var(--primaryColor), var(--accent-2, var(--primaryColor))) !important;
  color: var(--on-primary, #141414) !important;
}

.post .post_download,
.post2 .about_box .post_download {
  background: var(--primaryColor) !important;
  border-color: var(--primaryColor) !important;
  color: var(--on-primary, #141414) !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 24px var(--accent-glow);
}

/* ========================================================================== */
/* Filter bar / search                                                        */
/* ========================================================================== */

.new_advanced_search,
.film_search,
.panel_film_sort li,
.featured {
  background: var(--bg2) !important;
  border: 1px solid color-mix(in srgb, var(--border, var(--bg_lighter)) 90%, transparent) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--elev-1) !important;
}

.new_advanced_search .search_type span.active,
.switch-toggle label input:checked + span,
.series_week .series_week__header li.active {
  background: var(--primaryColor) !important;
  color: var(--on-primary, #141414) !important;
  box-shadow: 0 8px 18px var(--accent-glow) !important;
  font-weight: 800;
}

.adv_search_submit,
.mobile_adv_submit,
.film_search button,
.search_wrap #searchsubmit,
.search_wrap_index #searchsubmit,
.show_more,
.go_top,
.reply,
.form-submit .submit,
.submit_auth_2,
.submit-reg,
.vip_modal_center .cta a,
.post_minimal_download,
.acc_info_ .buy_vip,
.pagination span,
.pagination a:hover,
.nav-link.active,
.owl-dot.active {
  background: var(--primaryColor) !important;
  border-color: var(--primaryColor) !important;
  color: var(--on-primary, #141414) !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 24px var(--accent-glow) !important;
}

.nav-link.active {
  border-radius: 999px !important;
}

.adv_search_submit:hover,
.mobile_adv_submit:hover,
.film_search button:hover,
.show_more:hover,
.user_btn a:hover,
.submit_auth_2:hover,
.submit-reg:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

html.dark .new_advanced_search .search_type span:not(.active) {
  background: var(--bg_lighter2);
  color: var(--bg_darker);
}

/* ========================================================================== */
/* Buttons — download roles                                                   */
/* ========================================================================== */

.button-green,
.button-blue,
.button-orange,
.button_online,
.btn-orange {
  border-radius: 11px !important;
  font-weight: 800 !important;
}

.button-blue {
  background: color-mix(in srgb, var(--primaryColor) 16%, transparent) !important;
  color: var(--primaryColor) !important;
  stroke: var(--primaryColor) !important;
  border: 1px solid color-mix(in srgb, var(--primaryColor) 42%, transparent) !important;
}

.button-blue:hover {
  background: var(--primaryColor) !important;
  color: var(--on-primary, #141414) !important;
  stroke: var(--on-primary, #141414) !important;
}

.download_section .download_item .button_online,
.post2 .download_item .button_online {
  border-radius: 11px !important;
  font-weight: 800 !important;
}

/* ========================================================================== */
/* Widgets / sidebar / chrome                                                 */
/* ========================================================================== */

.widget,
.custom_list,
.boxOffice_item,
.serial-item,
.timer div {
  background: var(--bg2) !important;
  border: 1px solid color-mix(in srgb, var(--border, var(--bg_lighter)) 90%, transparent) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--elev-1) !important;
}

.widget .widget_title,
.big_cat_title {
  font-weight: 900 !important;
  letter-spacing: -.02em;
}

.widget .widget_inner .update:hover,
.boxOffice_item:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-2) !important;
  border-color: color-mix(in srgb, var(--primaryColor) 35%, transparent) !important;
}

html.dark .widget,
html.dark .custom_list,
html.dark .boxOffice_item,
html.dark .serial-item,
html.dark .featured,
html.dark .collection_content,
html.dark #datafetch {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}

html.dark .sidebar .nav_panel ul li a,
html.dark .boxOffice_item .boxOffice__meta h3 {
  color: var(--bg_darker) !important;
}

.sidebar_active,
html.dark .sidebar_active {
  background: var(--primaryColor) !important;
  color: var(--on-primary, #141414) !important;
}

/* ========================================================================== */
/* Single page                                                                */
/* ========================================================================== */

.single_cover_wrap .play_online a,
a.play_online,
.post2 .about_box .post_download {
  background: var(--primaryColor) !important;
  color: var(--on-primary, #141414) !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 34px var(--accent-glow) !important;
}

.single_default .post_header_meta h1,
.single_cover_wrap h1 {
  text-shadow: 0 4px 24px rgb(0 0 0 / 55%);
}

/* ========================================================================== */
/* Forms                                                                      */
/* ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select,
.search_form input,
.film_search input {
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--border, var(--bg_lighter)) 90%, transparent) !important;
}

input:focus,
textarea:focus,
select:focus,
.search_form input:focus,
.search_modal_input:focus {
  border-color: color-mix(in srgb, var(--primaryColor) 60%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primaryColor) 22%, transparent) !important;
  outline: none;
}

html.dark .form {
  background: linear-gradient(180deg,
      color-mix(in srgb, #fff 86%, var(--primaryColor) 14%) 0%,
      var(--bg2) 100%) !important;
}

/* ========================================================================== */
/* Footer                                                                     */
/* ========================================================================== */

.footer,
.footer_modern,
.footer_minimal {
  border-top: 1px solid color-mix(in srgb, var(--primaryColor) 18%, var(--border, var(--bg_lighter)));
}

.footer .links h3::before,
.footer_modern .links h3::before,
.footer .links li:before {
  background: var(--primaryColor) !important;
  color: var(--primaryColor) !important;
}

.footer_minimal .mini_button:hover,
html.dark .footer_minimal .mini_button:hover {
  background: var(--primaryColor) !important;
  border-color: var(--primaryColor) !important;
  color: var(--on-primary, #141414) !important;
}

/* ========================================================================== */
/* Tabs / misc                                                                */
/* ========================================================================== */

.nav-link {
  font-weight: 800 !important;
}

html.dark .nav-link {
  color: var(--bg_darker) !important;
}

html.dark .nav-link.active {
  color: var(--on-primary, #fff) !important;
}

._textAds li a {
  border-radius: 14px !important;
}

html.dark ._textAds li a:hover,
._textAds li a:hover {
  background: var(--primaryColor) !important;
  color: var(--on-primary, #141414) !important;
}

.series_week .series_week__header li {
  border-radius: 999px !important;
  font-weight: 800;
}

/* Comfort slider titles stay white on posters */
.comfort-slider .film_cat_title,
html.dark .comfort-slider .film_cat_title,
html.dark .comfort-slider .film_cat3 .film_cat_title {
  color: #fff !important;
  text-shadow: 0 2px 14px rgb(0 0 0 / 65%);
}

/* ========================================================================== */
/* Motion                                                                     */
/* ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .film_card5:hover,
  .post:hover,
  .post2:hover,
  .boxOffice_item:hover {
    transform: none !important;
  }

  .film_card5 .card_link::after {
    display: none;
  }
}
