/* ============================================================
   TamilFlicks — Modern Glassmorphism Theme Overlay
   Loaded after the base stylesheet; overrides only, no layout changes.
   ============================================================ */

:root {
  --tp-blue: #2e5eaa;
  --tp-blue-light: #4f8fe0;
  --tp-gold: #f5b942;
  --tp-gold-light: #ffd166;
  --tp-gradient: linear-gradient(120deg, var(--tp-blue) 0%, var(--tp-blue-light) 45%, var(--tp-gold) 100%);
  --tp-gradient-soft: linear-gradient(120deg, rgba(46,94,170,0.25) 0%, rgba(245,185,66,0.18) 100%);
  --tp-glass-bg: rgba(255, 255, 255, 0.06);
  --tp-glass-border: rgba(255, 255, 255, 0.12);
}

/* ---------- Navbar: frosted glass ---------- */
.iq-navbar {
  background: rgba(10, 10, 16, 0.65) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--tp-glass-border);
  transition: background .3s ease;
}

/* ---------- Section headings: gradient text + accent bar ---------- */
.main-title {
  position: relative;
  padding-left: 16px;
  background: var(--tp-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.main-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 4px;
  background: var(--tp-gradient);
}

/* ---------- Generic glass cards (individual cards only —
   NOT .card-style-slider, which is the row wrapper, not a card) ---------- */
.iq-card,
.language-card,
.cast-card,
.genres-card {
  border-radius: 16px !important;
  border: 1px solid var(--tp-glass-border) !important;
  background: var(--tp-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.iq-card:hover,
.language-card:hover,
.cast-card:hover,
.genres-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(46, 94, 170, 0.35), 0 4px 16px rgba(245, 185, 66, 0.18);
  border-color: rgba(245, 185, 66, 0.45) !important;
}

.genres-img {
  transition: transform .4s ease;
}

.genres-card:hover .genres-img {
  transform: scale(1.06);
}

/* ---------- News cards: switch to dark glass for cohesion ---------- */
.news-feed-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--tp-glass-border) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .28s ease, box-shadow .28s ease;
}

.news-feed-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(46, 94, 170, 0.3);
}

.news-feed-card__title,
.news-feed-card__excerpt {
  color: #f1f1f4 !important;
}

.news-feed-card__cta {
  color: var(--tp-gold-light) !important;
}

/* ---------- Buttons: brand gradient ---------- */
.action-btn.btn-primary,
.btn-primary {
  background: var(--tp-gradient) !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(46, 94, 170, 0.4);
  transition: box-shadow .25s ease, transform .2s ease;
}

.action-btn.btn-primary:hover,
.btn-primary:hover {
  box-shadow: 0 8px 28px rgba(245, 185, 66, 0.45);
  transform: translateY(-2px);
}

.play-button-wrapper .ph-play {
  color: var(--tp-gold-light);
}

/* ---------- Detail page hero: gradient fade + glass info panel ---------- */
.detail-page-banner {
  position: relative;
}

.detail-page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,16,0) 40%, rgba(10,10,16,0.75) 82%, rgba(10,10,16,0.97) 100%),
              linear-gradient(90deg, rgba(10,10,16,0.85) 0%, rgba(10,10,16,0.15) 45%);
  pointer-events: none;
  z-index: 0;
}

/* Lift the actual video player above that gradient overlay so it
   doesn't tint the video or the control bar underneath it. */
.video-player-wrapper {
  position: relative;
  z-index: 2;
}

/* ---------- Scrollbar (subtle brand touch) ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.03);
}

::-webkit-scrollbar-thumb {
  background: var(--tp-gradient);
  border-radius: 10px;
}

/* ---------- Video player controls: solid light backdrop with dark icons
   so they stay visible regardless of what's playing behind them.
   Anchored to #plyrMount (an ID) so this reliably beats Plyr's own
   plyr.css, which loads later in the page body and would otherwise
   win the cascade on load order. ---------- */
#plyrMount .plyr__controls {
  background-color: rgba(245, 245, 248, 0.97) !important;
  background-image: none !important;
  padding-top: 28px !important;
  opacity: 1 !important;
}

#plyrMount .plyr__controls::before,
#plyrMount .plyr__controls::after {
  display: none !important;
  content: none !important;
}

#plyrMount .plyr__control {
  color: #1a1a1e !important;
}

#plyrMount .plyr__control:hover,
#plyrMount .plyr__control[aria-expanded="true"] {
  background: var(--tp-blue) !important;
  color: #fff !important;
}

#plyrMount .plyr__time {
  color: #1a1a1e !important;
}

#plyrMount .plyr--full-ui input[type=range] {
  color: #1a1a1e !important;
  --plyr-range-track-background: rgba(0, 0, 0, 0.35) !important;
}

#plyrMount .plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(0, 0, 0, 0.35) !important;
}

#plyrMount .plyr--full-ui input[type=range]::-moz-range-track {
  background-color: rgba(0, 0, 0, 0.35) !important;
}

/* ---------- Light theme scoped to movie/video/tvshow watch pages only ---------- */
body.watch-page-route {
  background-color: #f5f5f7 !important;
  color: #1a1a1e;
}
body.watch-page-route .watch-sidebar {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
body.watch-page-route .watch-sidebar-item-title {
  color: #1a1a1e !important;
}
body.watch-page-route .watch-sidebar-meta {
  color: rgba(0, 0, 0, 0.55) !important;
}
body.watch-page-route .watch-sidebar-title {
  color: #1a1a1e !important;
}
body.watch-page-route h3,
body.watch-page-route h4,
body.watch-page-route .movie-detail-content p,
body.watch-page-route .movie-metalist,
body.watch-page-route .movie-metalist li,
body.watch-page-route .js-desc-text {
  color: #1a1a1e !important;
}
body.watch-page-route .movie-tags li {
  color: rgba(0, 0, 0, 0.6) !important;
}
body.watch-page-route .action-btn.btn-dark,
body.watch-page-route .btn-dark {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #1a1a1e !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
body.watch-page-route .watch-layout-toggle {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #1a1a1e !important;
}
body.watch-page-route .detail-page-banner::after {
  display: none;
}

/* Episode cards */
body.watch-page-route .season-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.watch-page-route .season-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
body.watch-page-route .season-content {
  padding: 1rem 1.1rem 1.2rem;
}
body.watch-page-route .season-content h5,
body.watch-page-route .season-content h5 a {
  color: #1a1a1e !important;
  font-weight: 600;
}
body.watch-page-route .episode-date,
body.watch-page-route .episode-duration {
  color: rgba(0, 0, 0, 0.5) !important;
}
body.watch-page-route .seasons-tabs-wrapper {
  background: transparent;
}
body.watch-page-route .season-tab .nav-link {
  color: rgba(0, 0, 0, 0.55);
  background: transparent;
  border: none;
}
body.watch-page-route .season-tab .nav-link.active {
  color: #ffffff;
  background: linear-gradient(90deg, #4f7cff, #f5a623);
  border-radius: 999px;
}
body.watch-page-route .video-player-wrapper,
body.watch-page-route .plyr-mount,
body.watch-page-route .plyr-player-shell {
  padding: 0 !important;
  margin: 0 !important;
}
body.watch-page-route .detail-page-banner {
  padding: 0 !important;
  background: transparent !important;
}
body.watch-page-route .plyr-mount {
  border-radius: 1rem;
  overflow: hidden;
}
body.watch-page-route .plyr-toolbar {
  margin-bottom: 0 !important;
}

/* Quality selector — floating glass pill, top-right of the video frame */
.plyr-toolbar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: auto;
  pointer-events: none;
}

.plyr-quality-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tp-glass-bg);
  border: 1px solid var(--tp-glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.2s ease, border-color 0.2s ease;
  pointer-events: auto;
}

.plyr-quality-wrapper:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

.plyr-quality-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.plyr-quality-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 2px 18px 2px 2px;
  margin: 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 10px 6px;
}

.plyr-quality-select:focus-visible {
  outline: 2px solid var(--tp-blue-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.plyr-quality-select option {
  background: #12151c;
  color: #ffffff;
}

@media (max-width: 576px) {
  .plyr-toolbar {
    top: 8px;
    right: 8px;
  }

  .plyr-quality-wrapper {
    padding: 4px 9px;
    gap: 6px;
  }

  .plyr-quality-label {
    display: none;
  }

  .plyr-quality-select {
    font-size: 0.75rem;
  }
}
body.watch-page-route .cast-title {
  color: #1a1a1e !important;
}
body.watch-page-route .main-title {
  color: #1a1a1e !important;
}
body.watch-page-route .watch-page-grid {
  padding-top: 1.5rem;
}


/* ---------- Mobile refinements ---------- */
@media (max-width: 767.98px) {
  body.watch-page-route .watch-page-grid {
    padding-top: 2.5rem;
  }
  body.watch-page-route .plyr-mount {
    border-radius: 0.75rem;
  }
  body.watch-page-route .season-content {
    padding: 0.85rem 0.9rem 1rem;
  }
  body.watch-page-route .season-content h5,
  body.watch-page-route .season-content h5 a {
    font-size: 1rem;
  }
  .slick-general-stories-so-far .iq-card {
    border-radius: 0.85rem;
  }
  .slick-general-stories-so-far .block-description h5,
  .slick-general-stories-so-far .iq-card h5 {
    font-size: 0.95rem;
  }
}

@media (max-width: 767.98px) {
  body.watch-page-route .watch-page-grid {
    padding-top: 5.5rem;
  }
}

@media (max-width: 767.98px) {
  body.watch-page-route .watch-page-grid {
    padding-top: 7rem;
  }
}

/* ---------- Light entertainment cards on watch pages ---------- */
body.watch-page-route .iq-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
body.watch-page-route .iq-card .card-description {
  background: #ffffff;
}
body.watch-page-route .iq-card .iq-title,
body.watch-page-route .iq-card .iq-title a {
  color: #1a1a1e !important;
}
body.watch-page-route .iq-card .genres-list li,
body.watch-page-route .iq-card .movie-time,
body.watch-page-route .iq-card .movie-language {
  color: rgba(0, 0, 0, 0.55) !important;
}

/* ---------- Mobile listing pages ---------- */
@media (max-width: 767.98px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  .section-spacing-bottom {
    padding-bottom: 1.25rem !important;
    margin-bottom: 0 !important;
  }
  .streamit-block {
    margin-bottom: 0.5rem;
  }
  .main-title {
    font-size: 1.05rem;
  }
}


/* Rounded cards on TV show listing rows */
.slick-general-stories-so-far .iq-card,
.tvshow-language-sections .iq-card {
  border-radius: 1rem;
  overflow: hidden;
}

/* ---------- Mobile: stacked cards on movie & tv show listing pages ---------- */
@media (max-width: 767.98px) {
  body.route-movies .slick-general,
  body.route-tv-shows .slick-general:not(.slick-general-latest-episodes) {
    display: block !important;
    padding-right: 0 !important;
  }
  body.route-movies .slick-general .slick-list,
  body.route-movies .slick-general .slick-track,
  body.route-tv-shows .slick-general:not(.slick-general-latest-episodes) .slick-list,
  body.route-tv-shows .slick-general:not(.slick-general-latest-episodes) .slick-track {
    width: 100% !important;
    transform: none !important;
    display: block !important;
    justify-content: safe center;
  }
  body.route-movies .slick-general .slick-item,
  body.route-tv-shows .slick-general:not(.slick-general-latest-episodes) .slick-item {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
    margin: 0 0 1.1rem 0 !important;
    padding: 0 !important;
  }
  body.route-movies .slick-general .slick-prev,
  body.route-movies .slick-general .slick-next,
  body.route-tv-shows .slick-general:not(.slick-general-latest-episodes) .slick-prev,
  body.route-tv-shows .slick-general:not(.slick-general-latest-episodes) .slick-next {
    display: none !important;
  }
  body.route-movies .slick-general .iq-card,
  body.route-tv-shows .slick-general:not(.slick-general-latest-episodes) .iq-card {
    border-radius: 1rem;
    overflow: hidden;
  }
  body.route-movies .slick-general .image-box,
  body.route-tv-shows .slick-general:not(.slick-general-latest-episodes) .image-box {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  body.route-movies .slick-general .image-box img,
  body.route-tv-shows .slick-general:not(.slick-general-latest-episodes) .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body.route-movies .slick-general .genres-list,
  body.route-movies .slick-general .movie-time,
  body.route-movies .slick-general .movie-language,
  body.route-tv-shows .slick-general:not(.slick-general-latest-episodes) .genres-list,
  body.route-tv-shows .slick-general:not(.slick-general-latest-episodes) .movie-time,
  body.route-tv-shows .slick-general:not(.slick-general-latest-episodes) .movie-language {
    display: none !important;
  }
  body.route-movies .slick-general .iq-title,
  body.route-tv-shows .slick-general:not(.slick-general-latest-episodes) .iq-title {
    font-size: 1.05rem;
    margin: 0 !important;
  }
}

/* ---------- Mobile: grid layout for genres & personalities ---------- */
@media (max-width: 767.98px) {
  .slick-general-gener-section,
  .slick-general-favorite-genres,
  .slick-general-castcrew,
  .slick-general-favorite-personality {
    display: grid !important;
    gap: 0.75rem;
    padding-right: 0 !important;
  }
  .slick-general-gener-section,
  .slick-general-favorite-genres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .slick-general-castcrew,
  .slick-general-favorite-personality {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .slick-general-gener-section .slick-list,
  .slick-general-gener-section .slick-track,
  .slick-general-favorite-genres .slick-list,
  .slick-general-favorite-genres .slick-track,
  .slick-general-castcrew .slick-list,
  .slick-general-castcrew .slick-track,
  .slick-general-favorite-personality .slick-list,
  .slick-general-favorite-personality .slick-track {
    display: contents !important;
    width: auto !important;
    transform: none !important;
    justify-content: safe center;
  }
  .slick-general-gener-section .slick-item,
  .slick-general-favorite-genres .slick-item,
  .slick-general-castcrew .slick-item,
  .slick-general-favorite-personality .slick-item {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  .slick-general-gener-section .slick-prev,
  .slick-general-gener-section .slick-next,
  .slick-general-favorite-genres .slick-prev,
  .slick-general-favorite-genres .slick-next,
  .slick-general-castcrew .slick-prev,
  .slick-general-castcrew .slick-next,
  .slick-general-favorite-personality .slick-prev,
  .slick-general-favorite-personality .slick-next {
    display: none !important;
  }
}

/* ---------- Mobile: compact news cards ---------- */
@media (max-width: 767.98px) {
  .news-feed-card {
    height: auto !important;
    min-height: 0 !important;
  }
  .news-feed-card__media {
    aspect-ratio: 16 / 9;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  .news-feed-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .news-feed-card__body {
    padding: 0.9rem 1rem 1rem !important;
  }
  .news-feed-card__title {
    font-size: 1.05rem;
    line-height: 1.35;
  }
  .news-feed-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 767.98px) {
  .news-home-mobile,
  .news-home-mobile .swiper-wrapper,
  .news-home-mobile .swiper-slide {
    height: auto !important;
    min-height: 0 !important;
  }
  .news-home-mobile .swiper-slide {
    align-self: flex-start;
  }
}

@media (max-width: 767.98px) {
  .news-home-mobile {
    overflow: visible !important;
    touch-action: pan-y !important;
  }
  .news-home-mobile .swiper-wrapper {
    display: block !important;
    transform: none !important;
    width: 100% !important;
  }
  .news-home-mobile .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1rem 0 !important;
    transform: none !important;
  }
}

/* ---------- Mobile: compact news list rows ---------- */
@media (max-width: 767.98px) {
  .news-home-mobile .news-feed-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    gap: 0.75rem;
  }
  .news-home-mobile .news-feed-card__media {
    flex: 0 0 120px;
    width: 120px;
    aspect-ratio: 16 / 9;
    height: auto !important;
    align-self: center;
    border-radius: 0.6rem;
    overflow: hidden;
  }
  .news-home-mobile .news-feed-card__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.7rem 0.8rem 0.7rem 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .news-home-mobile .news-feed-card__title {
    font-size: 0.95rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .news-home-mobile .news-feed-card__excerpt {
    display: none !important;
  }
  .news-home-mobile .news-feed-card__meta {
    margin-top: 0.35rem;
  }
  .news-home-mobile .news-feed-card__menu-btn {
    display: none !important;
  }
}

/* ---------- Nav icons ---------- */
.iq-nav-menu .nav-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.iq-nav-menu .nav-ico {
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0.9;
}
.iq-nav-menu .nav-link:hover .nav-ico,
.iq-nav-menu .nav-link.active .nav-ico {
  opacity: 1;
}

/* ---------- Nav icons ---------- */
.iq-nav-menu .nav-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.iq-nav-menu .nav-ico {
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0.9;
}
.iq-nav-menu .nav-link:hover .nav-ico,
.iq-nav-menu .nav-link.active .nav-ico {
  opacity: 1;
}

@media (max-width: 767.98px) {
  .iq-nav-menu {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 0.15rem;
  }
  .iq-nav-menu .nav-item {
    width: 100% !important;
  }
  .iq-nav-menu .nav-link {
    width: 100% !important;
    padding: 0.65rem 0.5rem !important;
    white-space: nowrap;
  }
  .iq-nav-menu .nav-ico {
    font-size: 1.15rem;
    flex: 0 0 auto;
  }
}

/* ---------- TV shows page: cleaner landscape cards ---------- */
body.route-tv-shows .iq-card .image-box {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.5rem;
}
body.route-tv-shows .iq-card .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.route-tv-shows .ratting-value,
body.route-tv-shows .hover-eye-btn,
body.route-tv-shows .product-premium {
  display: none !important;
}
body.route-tv-shows .main-title {
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 1.35rem;
}
body.route-tv-shows .main-title::before {
  display: none !important;
}

@media (max-width: 767.98px) {
  body.route-tv-shows .slick-general-stories-so-far {
    display: block !important;
    padding-right: 0 !important;
  }
  body.route-tv-shows .slick-general-stories-so-far .slick-list,
  body.route-tv-shows .slick-general-stories-so-far .slick-track {
    display: block !important;
    width: 100% !important;
    transform: none !important;
    justify-content: safe center;
  }
  body.route-tv-shows .slick-general-stories-so-far .slick-item {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
    margin: 0 0 1rem 0 !important;
  }
  body.route-tv-shows .slick-general-stories-so-far .iq-card {
    width: 100% !important;
  }
}

/* ==== LIVETV-PLAYER-SIZE START ==== */
/* Live TV player: the page has no .container, so width:100% went full-viewport
   and aspect-ratio 16/9 made it ~1440px tall on wide screens. Constrain it.
   Scoped to data-content-type="livetv" so movie/episode pages are untouched. */
.plyr-player-shell[data-content-type="livetv"] {
  max-width: min(1040px, calc((100vh - 190px) * 16 / 9));
  margin-left: auto;
  margin-right: auto;
}
.plyr-player-shell[data-content-type="livetv"] .plyr-mount {
  border-radius: 12px;
}
/* Channel feeds are often 4:3 or carry station bugs/tickers in the corners.
   cover would slice those off. Specificity here is (1,1,1) so it beats the
   inline body <style> rule #plyrMount video {object-fit:cover} at (1,0,1). */
.plyr-player-shell[data-content-type="livetv"] #plyrMount video,
.plyr-player-shell[data-content-type="livetv"] #plyrMount .plyr__video-wrapper video {
  object-fit: contain !important;
}
/* Keep the ad slots aligned to the narrower player instead of full-bleed. */
.video-player-wrapper:has(.plyr-player-shell[data-content-type="livetv"]) .player-top-ad-slot,
.video-player-wrapper:has(.plyr-player-shell[data-content-type="livetv"]) .player-bottom-ad-slot {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  .plyr-player-shell[data-content-type="livetv"] {
    max-width: 100%;
  }
  .plyr-player-shell[data-content-type="livetv"] .plyr-mount {
    border-radius: 0;
  }
}
/* ==== LIVETV-PLAYER-SIZE END ==== */

/* ==== LIVETV-CARD-UNIFORM START ==== */
/* Channel cards: the white boxes were baked into the JPEGs, so transparent
   PNG logos (Vaanavil) had nothing behind them and every card sized itself
   to its own image. Give the card the background and a fixed ratio instead. */
.livetv-card {
  display: block;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
/* contain, not cover - logos must not be cropped.
   (0,2,0) beats the .object-cover and .img-fluid utilities on the img. */
.livetv-card .livetv-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #fff;
  padding: 12px;
}
/* the LIVE pill was white-on-dark; on a white card it would vanish */
.livetv-card .live-card-badge .live-badge {
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}
/* ==== LIVETV-CARD-UNIFORM END ==== */

/* ==== LIVETV-SUGGESTED-CAP START ==== */
main:has(.plyr-player-shell[data-content-type="livetv"]) .col:has(> .livetv-card):nth-child(n+5) {
  display: none !important;
}
/* ==== LIVETV-SUGGESTED-CAP END ==== */

/* ==== POPULAR-CHANNELS-MOBILE START ==== */
/* Hide the Popular Channels row on /tv-shows entirely.
   Rule 1 hides the carousel itself.
   Rule 2 hides its direct parent, which also carries the heading and the
   View All link - without it you get an orphan title over empty space.
   To restore: re-run the previous script, or delete this block. */
body.route-tv-shows .slick-general-popular-channels {
  display: none !important;
}
body.route-tv-shows *:has(> .slick-general-popular-channels) {
  display: none !important;
}
/* ==== POPULAR-CHANNELS-MOBILE END ==== */

/* ==== STORIES-MODERN START ==== */
/* Stories So Far - VISUAL STYLING ONLY.
   No layout/grid rules here on purpose: the cards sit inside
   .slick-list > .slick-track, so display:grid on the container lays out a
   single child and collapses the cards. The theme's own desktop layout is
   fine, so leave it alone and only restyle the card. */

body.route-tv-shows .slick-general-stories-so-far .entainment-slick-card {
  background: #11151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
body.route-tv-shows .slick-general-stories-so-far .entainment-slick-card:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 165, 233, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
body.route-tv-shows .slick-general-stories-so-far .image-box {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0 !important;
}
body.route-tv-shows .slick-general-stories-so-far .image-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block;
  transition: transform .35s ease;
}
body.route-tv-shows .slick-general-stories-so-far .entainment-slick-card:hover .image-box img {
  transform: scale(1.06);
}
body.route-tv-shows .slick-general-stories-so-far .ratting-value {
  background: rgba(0, 0, 0, 0.62);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  color: #fff;
}
body.route-tv-shows .slick-general-stories-so-far .card-description {
  padding: 12px 14px 14px;
}
body.route-tv-shows .slick-general-stories-so-far .genres-list {
  margin-bottom: 4px !important;
  gap: 8px !important;
}
body.route-tv-shows .slick-general-stories-so-far .genres-list li {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
body.route-tv-shows .slick-general-stories-so-far .iq-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
body.route-tv-shows .slick-general-stories-so-far .movie-time,
body.route-tv-shows .slick-general-stories-so-far .movie-language {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.55);
}
body.route-tv-shows .slick-general-stories-so-far .card-description .mt-3 {
  margin-top: 12px !important;
  gap: 8px !important;
}
body.route-tv-shows .slick-general-stories-so-far .card-description .btn:not(.watch-list-btn),
body.route-tv-shows .slick-general-stories-so-far .card-description a.btn {
  background: #0ea5e9 !important;
  background-image: none !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 14px !important;
  flex: 1 1 auto;
}
body.route-tv-shows .slick-general-stories-so-far .card-description .btn:not(.watch-list-btn):hover,
body.route-tv-shows .slick-general-stories-so-far .card-description a.btn:hover {
  background: #38bdf8 !important;
}
body.route-tv-shows .slick-general-stories-so-far .watch-list-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
body.route-tv-shows .slick-general-stories-so-far .watch-list-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}
/* ==== STORIES-MODERN END ==== */

/* ==== MODAL-CLICK-FIX START ==== */
/* --- stacking fix ---
   Payment modals sit inside page containers, not directly under <body>, so an
   ancestor stacking context let .modal-backdrop paint over the dialog and
   swallow clicks. Raise the dialog, make the backdrop click-through. */
.modal {
  z-index: 20000 !important;
}
.modal-dialog {
  position: relative;
  z-index: 20001 !important;
}
.modal-backdrop {
  z-index: 10000 !important;
  pointer-events: none !important;
  background-color: #000 !important;
}
.modal-backdrop.show {
  opacity: 0.72 !important;
}

/* --- visibility --- */
.modal-content {
  background-color: #1b222c !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4) !important;
  animation: tpModalIn .18s ease-out;
}
@keyframes tpModalIn {
  from { transform: translateY(10px) scale(.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal-body {
  padding: 8px 28px 20px !important;
}
.modal-body p {
  font-size: 16px !important;
  line-height: 1.55;
  color: #eef2f7 !important;
  margin-bottom: 0;
}
.modal-header {
  border-bottom: none !important;
  padding-bottom: 4px !important;
}
.modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 16px 28px 20px !important;
}
/* close control - was low contrast on the dark surface */
.modal-content .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .75;
  transition: opacity .15s ease;
}
.modal-content .btn-close:hover {
  opacity: 1;
}
/* primary dismiss button */
.modal-footer .btn-secondary {
  background: #0ea5e9 !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 9px !important;
  padding: 10px 30px !important;
  min-width: 130px;
}
.modal-footer .btn-secondary:hover {
  background: #38bdf8 !important;
}
/* ==== MODAL-CLICK-FIX END ==== */

/* ==== MODAL-BTN-FIX START ==== */
/* Bootstrap 5 buttons read their colour from --bs-btn-* variables, so a plain
   background override can lose. Set the variables AND the properties, at
   higher specificity than a bare .btn-secondary rule. */
.modal .modal-footer button.btn.btn-secondary,
.modal .modal-footer a.btn.btn-secondary,
.modal-content .modal-footer .btn-secondary {
  --bs-btn-bg: #0ea5e9;
  --bs-btn-border-color: #0ea5e9;
  --bs-btn-hover-bg: #38bdf8;
  --bs-btn-hover-border-color: #38bdf8;
  --bs-btn-active-bg: #0284c7;
  --bs-btn-active-border-color: #0284c7;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  background: #0ea5e9 !important;
  background-image: none !important;
  border-color: #0ea5e9 !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 9px !important;
  padding: 10px 30px !important;
  min-width: 130px;
  box-shadow: none !important;
}
.modal .modal-footer button.btn.btn-secondary:hover,
.modal-content .modal-footer .btn-secondary:hover {
  background: #38bdf8 !important;
  border-color: #38bdf8 !important;
}
/* ==== MODAL-BTN-FIX END ==== */

/* ==== MOVIES-CARDS START ==== */
body.route-movies {
  background-image: linear-gradient(180deg, rgba(76,40,130,0.28) 0%, rgba(20,16,40,0.10) 38%, rgba(0,0,0,0) 70%);
  background-repeat: no-repeat; background-attachment: fixed;
}

body.route-movies .slick-general:not(.movie-banner-thumbs) .entainment-slick-card {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 10px 10px 4px;
  height: 100%;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
body.route-movies .slick-general:not(.movie-banner-thumbs) .entainment-slick-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.085);
  border-color: rgba(255,255,255,0.2);
}
body.route-movies .slick-general:not(.movie-banner-thumbs) .image-box {
  aspect-ratio: 2 / 3 !important;
  border-radius: 11px !important;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
}
body.route-movies .slick-general:not(.movie-banner-thumbs) .image-box img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 11px !important; display: block;
}
body.route-movies .slick-general:not(.movie-banner-thumbs) .card-description { padding: 10px 2px 4px !important; }
body.route-movies .slick-general:not(.movie-banner-thumbs) .iq-title {
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1.35;
  margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em;
}
body.route-movies .slick-general:not(.movie-banner-thumbs) .iq-title a { color: #eef2f7 !important; text-decoration: none; }
body.route-movies .slick-general:not(.movie-banner-thumbs) .iq-title a:hover { color: #38bdf8 !important; }
body.route-movies .slick-general-latest-movies .image-box { aspect-ratio: 16 / 9 !important; }
body.route-movies .movie-banner-thumbs .entainment-slick-card { background:none; border:none; padding:0; }

@media (max-width: 767px) {
  /* Portrait art, ~2.4 visible.
     Native horizontal scroll - no JS, so the slick crash is irrelevant.
     slick's buildOut() already made .slick-list > .slick-track, so the list
     scrolls and the track is the flex row. No negative margins: the row
     inherits the container gutter so card 1 lines up with the heading. */
  body.route-movies .slick-general:not(.movie-banner-thumbs) .slick-list {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.route-movies .slick-general:not(.movie-banner-thumbs) .slick-list::-webkit-scrollbar { display: none; }
  body.route-movies .slick-general:not(.movie-banner-thumbs) .slick-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    transform: none !important;
    gap: 10px;
    justify-content: safe center;
  }
  body.route-movies .slick-general:not(.movie-banner-thumbs):not(:has(.slick-list)) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    justify-content: safe center;
  }
  body.route-movies .slick-general:not(.movie-banner-thumbs):not(:has(.slick-list))::-webkit-scrollbar { display: none; }
  body.route-movies .slick-general:not(.movie-banner-thumbs) .slick-item {
    flex: 0 0 42vw !important;
    width: 42vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  body.route-movies .slick-general:not(.movie-banner-thumbs) .entainment-slick-card {
    background: none !important;
    border: none !important;
    padding: 0 !important;
  }
  body.route-movies .slick-general:not(.movie-banner-thumbs) .card-description { padding: 8px 2px 0 !important; }
  body.route-movies .slick-general:not(.movie-banner-thumbs) .iq-title { font-size: 12px !important; min-height: 2.6em; }
}
/* ==== MOVIES-CARDS END ==== */

/* ==== MOVIES-TITLE START ==== */
body.route-movies .slick-general .card-description {
  padding: 10px 2px 4px !important;
}
body.route-movies .slick-general .iq-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
body.route-movies .slick-general .iq-title a {
  color: #eef2f7 !important;
  text-decoration: none;
}
body.route-movies .slick-general .iq-title a:hover {
  color: #38bdf8 !important;
}
/* ==== MOVIES-TITLE END ==== */

/* ==== TVSHOWS-CARDS START ==== */

body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .entainment-slick-card {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 10px 10px 4px;
  height: 100%;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .entainment-slick-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.085);
  border-color: rgba(255,255,255,0.2);
}
body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .image-box {
  aspect-ratio: 16 / 9 !important;
  border-radius: 11px !important;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
}
body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .image-box img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 11px !important; display: block;
}
body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .card-description { padding: 10px 2px 4px !important; }
body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .iq-title {
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1.35;
  margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em;
}
body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .iq-title a { color: #eef2f7 !important; text-decoration: none; }
body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .iq-title a:hover { color: #38bdf8 !important; }

@media (max-width: 767px) {
  /* Landscape art, ~1.6 visible.
     Native horizontal scroll - no JS, so the slick crash is irrelevant.
     slick's buildOut() already made .slick-list > .slick-track, so the list
     scrolls and the track is the flex row. No negative margins: the row
     inherits the container gutter so card 1 lines up with the heading. */
  body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .slick-list {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .slick-list::-webkit-scrollbar { display: none; }
  body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .slick-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    transform: none !important;
    gap: 10px;
    justify-content: safe center;
  }
  body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes):not(:has(.slick-list)) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    justify-content: safe center;
  }
  body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes):not(:has(.slick-list))::-webkit-scrollbar { display: none; }
  body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .slick-item {
    flex: 0 0 62vw !important;
    width: 62vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .entainment-slick-card {
    background: none !important;
    border: none !important;
    padding: 0 !important;
  }
  body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .card-description { padding: 8px 2px 0 !important; }
  body.route-tv-shows .slick-general:not(.slick-general-stories-so-far):not(.slick-general-latest-episodes) .iq-title { font-size: 12px !important; min-height: 2.6em; }
}
/* ==== TVSHOWS-CARDS END ==== */

/* ==== STORIES-MOBILE START ==== */
/* Stories So Far on mobile: scroll row. Cards are wider because they
   contain a Watch now button that cramps below ~75vw. Desktop is left
   entirely alone - the theme handles it and my earlier grid broke it. */

@media (max-width: 767px) {
  /* Landscape art plus buttons, ~1.2 visible.
     Native horizontal scroll - no JS, so the slick crash is irrelevant.
     slick's buildOut() already made .slick-list > .slick-track, so the list
     scrolls and the track is the flex row. No negative margins: the row
     inherits the container gutter so card 1 lines up with the heading. */
  body.route-tv-shows .slick-general-stories-so-far .slick-list {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.route-tv-shows .slick-general-stories-so-far .slick-list::-webkit-scrollbar { display: none; }
  body.route-tv-shows .slick-general-stories-so-far .slick-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    transform: none !important;
    gap: 10px;
    justify-content: safe center;
  }
  body.route-tv-shows .slick-general-stories-so-far:not(:has(.slick-list)) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    justify-content: safe center;
  }
  body.route-tv-shows .slick-general-stories-so-far:not(:has(.slick-list))::-webkit-scrollbar { display: none; }
  body.route-tv-shows .slick-general-stories-so-far .slick-item {
    flex: 0 0 78vw !important;
    width: 78vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    scroll-snap-align: start;
  }
}
/* ==== STORIES-MOBILE END ==== */

/* ==== TRAILER-PLAYER-SPACING START ==== */
/* Push the trailer preview player down from the nav.
   Using padding-top, not margin-top: .detail-page-banner is the first child
   inside #thumbnail-section, so a top margin on it collapses with the
   parent's margin and produces no visible gap. Padding never collapses.
   Scoped by :has() to data-content-video-type="trailer" so the real watch
   page (data-content-video-type="video") is untouched. */
.detail-page-banner:has(#plyrPlayerShell[data-content-video-type="trailer"]) {
  padding-top: 32px !important;
}
@media (max-width: 767px) {
  .detail-page-banner:has(#plyrPlayerShell[data-content-video-type="trailer"]) {
    padding-top: 20px !important;
  }
}
/* ==== TRAILER-PLAYER-SPACING END ==== */

/* ==== HOMEPAGE-AD-MOBILE START ==== */
@media (max-width: 767px) {
    .custom-ad-slider {
        width: 100% !important;
        margin: 0 !important;
    }
    .custom-ad-content {
        height: 180px !important;
    }
    .custom-ad-content .ad-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
    .custom-ad-wrapper {
        margin: 0 !important;
        border-radius: 4px !important;
    }
    .custom-ad-container {
        padding: 0 15px !important;
    }
}
/* ==== HOMEPAGE-AD-MOBILE END ==== */

/* ==== VIEW-MORE-BUTTON START ==== */
.viewmore-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
    width: 100%;
}
.btn.view-more-btn {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 6px;
    min-width: 160px;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}
.btn.view-more-btn:hover {
    background: #0284c7;
    border-color: #0284c7;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.4);
}
.btn.view-less-btn {
    background: transparent;
    border: 2px solid #6b7480;
    color: #d1d5db;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 6px;
    min-width: 160px;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}
.btn.view-less-btn:hover {
    border-color: #9ca3af;
    color: #fff;
    transform: translateY(-2px);
}
/* ==== VIEW-IORE-BUTTON END ==== */

/* ==== VIEWMORE-GRADIENT-FIX START ==== */
.viewmore-button-wrapper::after {
    display: none !important;
}
.viewmore-button-wrapper {
    background: transparent !important;
    padding: 24px 8px !important;
    position: relative;
    z-index: 10 !important;
}
.btn.view-more-btn {
    background: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 12px 32px !important;
    border-radius: 6px !important;
    min-width: 160px !important;
    z-index: 10 !important;
    position: relative !important;
}
/* ==== VIEWMORE-GRADIENT-FIX END ==== */

/* ==== HEADER-LOGO-ASPECT-FIX START ==== */
header .navbar-brand img.logo {
  width: auto !important;
  object-fit: contain !important;
}
/* ==== HEADER-LOGO-ASPECT-FIX END ==== */

/* ==== HOME-MODERN START ==== */
/* Oct 1 2026 - movie-only homepage refresh. Header rules are sitewide; everything else is scoped to .tp-home (index.blade.php wrapper). */
:root {
    --tp-bg: #010a0f;
    --tp-surface: #0b141b;
    --tp-line: rgba(255, 255, 255, .08);
    --tp-muted: rgba(255, 255, 255, .64);
    --tp-accent: var(--bs-primary, #00c3f9);
    --tp-display: 'Plus Jakarta Sans', 'Roboto', system-ui, sans-serif;
}

/* Header: glassy bar, calmer nav */
header .iq-navbar {
    background: rgba(1, 10, 15, .72) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--tp-line);
}
header .iq-nav-menu > .nav-item > .nav-link {
    font-family: var(--tp-display);
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
    transition: color .2s ease;
}
header .iq-nav-menu > .nav-item > .nav-link:hover,
header .iq-nav-menu > .nav-item > .nav-link.active {
    color: #fff;
}

/* Hero: overlay above the bg image, below the text */
.tp-home .banner-section .slick-item {
    isolation: isolate;
}
.tp-home .banner-section .slick-item::after {
    z-index: 0 !important;
    background:
        linear-gradient(90deg, rgba(1, 10, 15, .94) 0%, rgba(1, 10, 15, .7) 30%, rgba(1, 10, 15, .15) 62%, rgba(1, 10, 15, 0) 75%),
        linear-gradient(0deg, var(--tp-bg) 0%, rgba(1, 10, 15, .6) 18%, rgba(1, 10, 15, 0) 42%) !important;
}
.tp-home .banner-section .movie-info h4 {
    font-family: var(--tp-display);
    font-size: clamp(2rem, 4.2vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.04;
    margin-bottom: .75rem !important;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
.tp-home .banner-section .movie-tag .tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.tp-home .banner-section .movie-info .line-count-3 {
    color: var(--tp-muted);
    max-width: 46ch;
}
.tp-home .banner-section .btn-watch-now {
    border-radius: 999px !important;
    padding: 12px 28px !important;
    font-family: var(--tp-display);
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 195, 249, .28);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tp-home .banner-section .btn-watch-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 195, 249, .4);
}
.tp-home .banner-section .action-btn {
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .1) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Section rhythm + headings */
.tp-home .section-wraper {
    margin-top: clamp(24px, 3vw, 44px);
}
.tp-home .main-title {
    font-family: var(--tp-display);
    font-size: clamp(1.15rem, 1.5vw, 1.5rem) !important;
    font-weight: 700 !important;
    letter-spacing: -.015em;
    padding-left: 0 !important;
    background: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.tp-home .main-title::before {
    display: none !important;
}
.tp-home .view-all-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--tp-muted) !important;
    font-size: 13px;
    font-weight: 600;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.tp-home .view-all-button:hover {
    color: #fff !important;
    border-color: var(--tp-accent);
    background: rgba(0, 195, 249, .08);
}

/* Poster cards */
.tp-home .iq-card .image-box,
.tp-home .iq-top-ten-block .img-box > a,
.tp-home #genres-section .slick-item img {
    border-radius: 12px;
    overflow: hidden;
}
.tp-home .iq-card .image-box {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 1px var(--tp-line);
    transition: transform .25s ease, box-shadow .25s ease;
}
.tp-home .iq-card:hover .image-box {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .18);
}
.tp-home .iq-card .image-box img {
    transition: transform .4s ease;
}
.tp-home .iq-card:hover .image-box img {
    transform: scale(1.04);
}
.tp-home .iq-card .ratting-value {
    border-radius: 999px;
    background: rgba(1, 10, 15, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 700;
}
.tp-home .iq-card .card-description .title,
.tp-home .iq-card .card-description h5,
.tp-home .iq-card .card-description h6 {
    font-family: var(--tp-display);
    font-weight: 600;
}
.tp-home .iq-top-ten-block .img-box > a {
    display: block;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 1px var(--tp-line);
    transition: transform .25s ease;
}
.tp-home .iq-top-ten-block:hover .img-box > a {
    transform: translateY(-4px);
}
/* ==== HOME-MODERN END ==== */

/* ==== WATCH-MODERN START ==== */
/* Oct 1 2026 - dark, cinematic watch pages. Overrides the "Light theme scoped to ... watch pages" block above
   (same selectors + !important, later in the file wins). Uses the --tp-* tokens from HOME-MODERN. */
body.watch-page-route {
    background-color: var(--tp-bg, #010a0f) !important;
    color: #fff;
}
body.watch-page-route main.flex-fill {
    background:
        radial-gradient(1100px 480px at 50% -8%, rgba(0, 195, 249, .10), rgba(0, 195, 249, 0) 70%),
        var(--tp-bg, #010a0f);
}

/* Player */
body.watch-page-route .plyr-mount,
body.watch-page-route .video-player-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* Text */
body.watch-page-route h3,
body.watch-page-route h4,
body.watch-page-route .movie-metalist,
body.watch-page-route .movie-metalist li,
body.watch-page-route .main-title,
body.watch-page-route .cast-title,
body.watch-page-route .watch-sidebar-title,
body.watch-page-route .watch-sidebar-item-title,
body.watch-page-route .iq-card .iq-title,
body.watch-page-route .iq-card .iq-title a {
    color: #fff !important;
}
body.watch-page-route .movie-detail-content p,
body.watch-page-route .js-desc-text,
body.watch-page-route .movie-tags li,
body.watch-page-route .watch-sidebar-meta,
body.watch-page-route .iq-card .genres-list li,
body.watch-page-route .iq-card .movie-time,
body.watch-page-route .iq-card .movie-language {
    color: var(--tp-muted, rgba(255, 255, 255, .64)) !important;
}
body.watch-page-route .movie-detail-content > h4 {
    font-family: var(--tp-display);
    font-size: clamp(1.75rem, 3vw, 2.6rem) !important;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}
body.watch-page-route .movie-detail-content p,
body.watch-page-route .js-desc-text {
    max-width: 70ch;
}

/* Copyright notice: quiet footnote instead of a loud gradient banner */
body.watch-page-route .movie-detail-content .col-md-12 > .footer-menu.btn {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, .42) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    text-align: left;
    white-space: normal;
    pointer-events: none;
}

/* Buttons */
body.watch-page-route .action-btn.btn-dark,
body.watch-page-route .btn-dark,
body.watch-page-route .watch-layout-toggle {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 999px !important;
    transition: background-color .2s ease, border-color .2s ease;
}
body.watch-page-route .action-btn.btn-dark:hover,
body.watch-page-route .btn-dark:hover {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .24) !important;
}
body.watch-page-route .play-button-wrapper .btn-primary {
    border-radius: 999px !important;
    padding: 12px 28px !important;
    font-family: var(--tp-display);
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 195, 249, .28);
    transition: transform .2s ease, box-shadow .2s ease;
}
body.watch-page-route .play-button-wrapper .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 195, 249, .4);
}

/* "More like this" sidebar + cards */
body.watch-page-route .watch-sidebar {
    background: var(--tp-surface, #0b141b) !important;
    border: 1px solid var(--tp-line, rgba(255, 255, 255, .08)) !important;
    border-radius: 16px;
    box-shadow: none !important;
}
body.watch-page-route .watch-sidebar-title {
    font-family: var(--tp-display);
    font-weight: 700;
}
body.watch-page-route .iq-card {
    background: var(--tp-surface, #0b141b) !important;
    border: 1px solid var(--tp-line, rgba(255, 255, 255, .08)) !important;
    border-radius: 12px;
    box-shadow: none !important;
}
body.watch-page-route .iq-card .card-description {
    background: transparent !important;
}
/* Jump menu (Reviews / More Like This) only points back up at the sidebar - hide it. */
body.watch-page-route .short-menu {
    display: none !important;
}
/* ==== WATCH-MODERN END ==== */

/* ==== LIGHT-MODE START ==== */
/* Oct 1 2026 - whole public site switched to light (layouts set data-bs-theme="light").
   Overrides HOME-MODERN / WATCH-MODERN colours above; layout/shape rules there still apply. */
:root {
    --tp-bg: #f6f7f9;
    --tp-surface: #ffffff;
    --tp-line: rgba(15, 23, 42, .08);
    --tp-text: #0f172a;
    --tp-muted: rgba(15, 23, 42, .62);
}
body {
    background-color: var(--tp-bg) !important;
    color: var(--tp-text);
}

/* Header: frosted white bar */
html body > header,
header.header-absolute {
    background: rgba(255, 255, 255, .86) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--tp-line);
}
html body header nav.navbar.iq-navbar {
    background: transparent !important;
    border-bottom: 0 !important;
}
@media (min-width: 1200px) {
    html body header #navbar_main {
        background: transparent !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@media (max-width: 1199.98px) {
    html body header #navbar_main {
        background: var(--tp-surface) !important;
    }
}
header .btn.btn-dark {
    background: var(--tp-surface) !important;
    color: var(--tp-text) !important;
    border: 1px solid rgba(15, 23, 42, .14) !important;
}
header .iq-nav-menu > .nav-item > .nav-link,
header .iq-nav-menu .nav-link .item-name,
header .iq-nav-menu .nav-link .nav-ico {
    color: rgba(15, 23, 42, .72) !important;
}
header .iq-nav-menu > .nav-item > .nav-link:hover,
header .iq-nav-menu > .nav-item > .nav-link:hover .item-name,
header .iq-nav-menu > .nav-item > .nav-link.active .item-name {
    color: var(--tp-text) !important;
}

/* Homepage hero: rounded inset card, keeps the cinematic dark fade inside the image */
.tp-home .banner-section {
    padding: 16px clamp(12px, 2.6vw, 40px) 0 !important;
}
.tp-home .banner-section .slick-list {
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
}
.tp-home .banner-section .slick-item::after {
    background:
        linear-gradient(90deg, rgba(1, 10, 15, .88) 0%, rgba(1, 10, 15, .62) 32%, rgba(1, 10, 15, .1) 62%, rgba(1, 10, 15, 0) 75%),
        linear-gradient(0deg, rgba(1, 10, 15, .55) 0%, rgba(1, 10, 15, 0) 40%) !important;
}
.tp-home .banner-section .movie-info,
.tp-home .banner-section .movie-info h4,
.tp-home .banner-section .movie-info li,
.tp-home .banner-section .movie-info span {
    color: #fff !important;
}
.tp-home .banner-section .movie-info .line-count-3 {
    color: rgba(255, 255, 255, .72) !important;
}

/* Section headings + View All */
.tp-home .main-title {
    color: var(--tp-text) !important;
    -webkit-text-fill-color: var(--tp-text) !important;
}
.tp-home .view-all-button {
    border-color: rgba(15, 23, 42, .14);
    color: var(--tp-muted) !important;
}
.tp-home .view-all-button:hover {
    color: var(--tp-text) !important;
}
.tp-home .view-all-button span,
.tp-home .view-all-button i {
    color: inherit !important;
}

/* Cards: softer shadows on light */
.tp-home .iq-card .image-box,
.tp-home .iq-top-ten-block .img-box > a {
    box-shadow: 0 6px 18px rgba(15, 23, 42, .12), 0 0 0 1px var(--tp-line);
}
.tp-home .iq-card:hover .image-box {
    box-shadow: 0 16px 36px rgba(15, 23, 42, .2), 0 0 0 1px rgba(15, 23, 42, .12);
}
.tp-home .iq-card .ratting-value {
    background: rgba(255, 255, 255, .9);
    color: var(--tp-text);
}

/* Watch pages: light versions of WATCH-MODERN */
body.watch-page-route {
    background-color: var(--tp-bg) !important;
    color: var(--tp-text);
}
body.watch-page-route main.flex-fill {
    background:
        radial-gradient(1100px 480px at 50% -8%, rgba(0, 195, 249, .08), rgba(0, 195, 249, 0) 70%),
        var(--tp-bg);
}
body.watch-page-route .plyr-mount,
body.watch-page-route .video-player-wrapper {
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22), 0 0 0 1px var(--tp-line);
}
body.watch-page-route h3,
body.watch-page-route h4,
body.watch-page-route .movie-metalist,
body.watch-page-route .movie-metalist li,
body.watch-page-route .main-title,
body.watch-page-route .cast-title,
body.watch-page-route .watch-sidebar-title,
body.watch-page-route .watch-sidebar-item-title,
body.watch-page-route .iq-card .iq-title,
body.watch-page-route .iq-card .iq-title a {
    color: var(--tp-text) !important;
}
body.watch-page-route .movie-detail-content p,
body.watch-page-route .js-desc-text,
body.watch-page-route .movie-tags li,
body.watch-page-route .watch-sidebar-meta,
body.watch-page-route .iq-card .genres-list li,
body.watch-page-route .iq-card .movie-time,
body.watch-page-route .iq-card .movie-language {
    color: var(--tp-muted) !important;
}
body.watch-page-route .movie-detail-content .col-md-12 > .footer-menu.btn {
    color: rgba(15, 23, 42, .45) !important;
}
body.watch-page-route .action-btn.btn-dark,
body.watch-page-route .btn-dark,
body.watch-page-route .watch-layout-toggle {
    background: var(--tp-surface) !important;
    color: var(--tp-text) !important;
    border: 1px solid rgba(15, 23, 42, .14) !important;
}
body.watch-page-route .action-btn.btn-dark:hover,
body.watch-page-route .btn-dark:hover {
    background: #eef1f5 !important;
    border-color: rgba(15, 23, 42, .22) !important;
}
body.watch-page-route .watch-sidebar,
body.watch-page-route .iq-card {
    background: var(--tp-surface) !important;
    border: 1px solid var(--tp-line) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .06) !important;
}
/* Login / sign-up / forgot-password: white card over the poster wall */
.user-login-card.card {
    background: rgba(255, 255, 255, .97) !important;
    border: 0 !important;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.user-login-card .form-control,
.user-login-card .form-select {
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .14) !important;
    color: var(--tp-text) !important;
}
.user-login-card .form-control::placeholder {
    color: rgba(15, 23, 42, .45) !important;
}
/* Mobile menu (hamburger) bars were white-on-white */
header .navbar-toggler .navbar-toggler-icon,
header .navbar-toggler .navbar-toggler-icon::before,
header .navbar-toggler .navbar-toggler-icon::after {
    background-color: var(--tp-text) !important;
}
/* ==== LIGHT-MODE END ==== */

/* ==== SUBSCRIPTIONS-OFF START ==== */
/* Oct 1 2026 - subscriptions + public sign-up closed (routes blocked by SignupsAndPlansClosed middleware).
   Hide every button that leads there. Remove this block to bring them back. */
[onclick*="subscription-plan"],
a[href*="/subscription-plan"],
.user-login-card p:has(> a[href$="/register"]),
.user-login-card .border-style,
.user-login-card .full-button:has(a[href*="/auth/google"]),
.user-login-card .full-button:has(a[href*="/otp-login"]) {
    display: none !important;
}
/* ==== SUBSCRIPTIONS-OFF END ==== */

/* ==== HERO-SIZE START ==== */
/* Oct 1 2026 - homepage hero was full-screen (100vh) on desktop; cap it so the first row shows above the fold.
   Tablet/phone keep the theme's 500px. */
@media (min-width: 1200px) {
    .tp-home .banner-section .slick-banner,
    .tp-home .banner-section .slick-list,
    .tp-home .banner-section .slick-track,
    .tp-home .banner-section .slick-item,
    .tp-home .banner-section .slick-item .movie-content {
        height: clamp(420px, 60vh, 600px) !important;
        min-height: 0 !important;
    }
    .tp-home .banner-section .banner-slide-bg {
        height: 100% !important;
        width: 100%;
        object-fit: cover;
        object-position: center 25%;
    }
}
/* ==== HERO-SIZE END ==== */

/* ==== ENGAGEMENT START ==== */
/* Oct 1 2026 - styles for public/js/thisaiplay-engagement.js (My List, Continue Watching, ratings, badges,
   browse rows, hero preview, WhatsApp banner, Notify me, Up next, toast). */

/* Theme buttons that need a login (nobody can sign up): replaced by My List + thumbs */
.watch-list-btn,
.movie-detail-content .action-btn:has(.ph-heart),
#addratingbtn {
    display: none !important;
}

/* Card rows */
.tp-row .tp-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(132px, 15vw, 200px);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 6px 2px 14px;
    scrollbar-width: thin;
}
.tp-card {
    position: relative;
    scroll-snap-align: start;
    min-width: 0;
}
.tp-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.tp-card-img {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #e9edf3;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .12), 0 0 0 1px var(--tp-line, rgba(15, 23, 42, .08));
    transition: transform .25s ease, box-shadow .25s ease;
}
.tp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tp-card:hover .tp-card-img {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .2);
}
.tp-card-title {
    display: block;
    margin-top: 8px;
    font-family: var(--tp-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--tp-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-card-sub {
    display: block;
    font-size: 12px;
    color: var(--tp-muted, rgba(15, 23, 42, .62));
}
.tp-card-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255, 255, 255, .5);
}
.tp-card-progress span {
    display: block;
    height: 100%;
    background: var(--tp-accent, #2e5eaa);
}
.tp-card-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 0;
    background: rgba(15, 23, 42, .66);
    color: #fff;
    font-size: 16px;
    line-height: 26px;
    opacity: 0;
    transition: opacity .2s ease;
}
.tp-card:hover .tp-card-remove,
.tp-card-remove:focus-visible {
    opacity: 1;
}
@media (hover: none) {
    .tp-card-remove { opacity: 1; }
}

/* New / Trending badges */
.tp-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    pointer-events: none;
}
.tp-badge-new { background: var(--tp-accent, #2e5eaa); }
.tp-badge-hot { background: linear-gradient(90deg, #f5b942, #e8792b); color: #1a1205; }

/* My List button */
.tp-list-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: var(--tp-surface, #fff);
    color: var(--tp-text, #0f172a);
    font-weight: 600;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tp-list-btn:hover { border-color: var(--tp-accent, #2e5eaa); }
.tp-list-btn.is-on { color: #c2185b; border-color: rgba(194, 24, 91, .35); }
.tp-list-btn-hero {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.tp-list-btn-hero.is-on { color: #ff8fb8; border-color: rgba(255, 143, 184, .5); }
.tp-list-btn,
.tp-home .banner-section .btn-watch-now {
    white-space: nowrap;
}
.tp-home .banner-section .movie-info li:has(.tp-list-btn) {
    flex-shrink: 0;
}

/* Movie page: My List + thumbs */
.tp-movie-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.tp-vote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tp-vote-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, .14);
    background: var(--tp-surface, #fff);
    color: var(--tp-text, #0f172a);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tp-vote-btn.is-on { background: var(--tp-accent, #2e5eaa); border-color: var(--tp-accent, #2e5eaa); color: #fff; }
.tp-vote-stat {
    margin-left: 4px;
    font-size: 13px;
    color: var(--tp-muted, rgba(15, 23, 42, .62));
}

/* Hero preview video: sits on the image, under the gradient overlay */
.tp-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .7s ease;
    pointer-events: none;
}
.tp-hero-video.is-on { opacity: 1; }

/* WhatsApp channel banner */
.tp-wa-banner .tp-wa-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 18px 48px 18px 20px;
    border-radius: 16px;
    background: linear-gradient(100deg, #e9f9ef 0%, #f3fbf6 100%);
    border: 1px solid rgba(37, 211, 102, .25);
}
.tp-wa-icon { font-size: 40px; color: #25d366; }
.tp-wa-text { flex: 1 1 260px; color: var(--tp-text, #0f172a); }
.tp-wa-text strong { display: block; font-family: var(--tp-display); font-size: 17px; }
.tp-wa-text span { font-size: 14px; color: var(--tp-muted, rgba(15, 23, 42, .62)); }
.tp-wa-btn {
    padding: 10px 20px;
    border-radius: 999px;
    background: #25d366;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.tp-wa-btn:hover { background: #1fb457; }
.tp-wa-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: none;
    font-size: 22px;
    color: var(--tp-muted, rgba(15, 23, 42, .62));
}

/* Notify me */
.tp-notify-btn {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 100;
    padding: 7px 10px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, .94);
    color: var(--tp-text, #0f172a);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.tp-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
}
.tp-modal-box {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 28px 24px 24px;
    border-radius: 18px;
    background: #fff;
    color: var(--tp-text, #0f172a);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.tp-modal-box h5 { font-family: var(--tp-display); font-weight: 700; margin: 0 24px 16px 0; color: var(--tp-text, #0f172a); }
.tp-modal-box label { display: block; font-size: 14px; margin-bottom: 6px; }
.tp-modal-box input[type="tel"] {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, .18);
    font-size: 16px;
}
.tp-consent { display: flex !important; gap: 8px; align-items: flex-start; font-size: 13px !important; color: var(--tp-muted, rgba(15, 23, 42, .62)); }
.tp-consent input { margin-top: 3px; }
.tp-form-msg { min-height: 20px; margin: 8px 0; font-size: 13px; color: #c62828; }
.tp-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 24px;
    color: var(--tp-muted, rgba(15, 23, 42, .62));
}

/* Up next */
#tp-upnext {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 4000;
    display: flex;
    gap: 12px;
    width: min(380px, calc(100vw - 40px));
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    color: var(--tp-text, #0f172a);
    box-shadow: 0 20px 60px rgba(15, 23, 42, .3);
}
#tp-upnext img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.tp-upnext-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tp-upnext-label { font-size: 12px; color: var(--tp-muted, rgba(15, 23, 42, .62)); }
.tp-upnext-body strong { font-family: var(--tp-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-upnext-actions { display: flex; gap: 8px; margin-top: 4px; }

/* Toast */
#tp-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 6000;
    transform: translate(-50%, 20px);
    padding: 10px 18px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
#tp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* ==== ENGAGEMENT END ==== */

/* ==== BRAND-POLISH START ==== */
/* Oct 1 2026 - one accent colour (logo blue #2E5EAA, gold #F5B942 for highlights), header Login hidden
   (sign-ups closed; admins use /admin/login), Top 10 numbers without the 93 KB texture image. */
html[data-bs-theme-color] {
    --bs-primary: #2e5eaa !important;
    --bs-primary-rgb: 46, 94, 170 !important;
    --bs-primary-bg-subtle: #d5dfee !important;
    --bs-primary-border-subtle: #abbfdd !important;
    --bs-primary-hover-bg: #254b88 !important;
    --bs-primary-hover-border: #20427a !important;
    --bs-primary-active-bg: #254b88 !important;
    --bs-primary-active-border: #20427a !important;
    --bs-primary-shade-90: #eaeff7 !important;
    --bs-primary-shade-80: #d5dfee !important;
    --bs-primary-shade-60: #abbfdd !important;
    --bs-primary-shade-40: #829ecc !important;
    --bs-primary-shade-20: #587ebb !important;
    --bs-primary-shade-10: #436eb3 !important;
    --bs-primary-tint-90: #050911 !important;
    --bs-primary-tint-80: #091322 !important;
    --bs-primary-tint-60: #122644 !important;
    --bs-primary-tint-40: #1c3866 !important;
    --bs-primary-tint-20: #254b88 !important;
    --bs-primary-tint-10: #295599 !important;
    --tp-accent: #2e5eaa;
    --tp-gold: #f5b942;
}

/* Glows that were hard-coded cyan */
.tp-home .banner-section .btn-watch-now,
body.watch-page-route .play-button-wrapper .btn-primary {
    box-shadow: 0 10px 30px rgba(46, 94, 170, .3) !important;
}
.tp-home .banner-section .btn-watch-now:hover,
body.watch-page-route .play-button-wrapper .btn-primary:hover {
    box-shadow: 0 14px 36px rgba(46, 94, 170, .42) !important;
}
.tp-home .view-all-button:hover {
    border-color: var(--tp-accent);
    background: rgba(46, 94, 170, .08);
}

/* Header Login button: nobody can sign up any more */
header .login-btn {
    display: none !important;
}

/* Top 10 numbers: brand gradient instead of the texture image (inline style overridden, so it is never downloaded) */
.top-ten-numbers.texture-text {
    background-image: linear-gradient(180deg, #f5b942 0%, #2e5eaa 100%) !important;
}
/* ==== BRAND-POLISH END ==== */

/* ==== HOME-SIMPLE START ==== */
/* Oct 1 2026 - homepage = hero + (Continue Watching / My List) + one "All movies" grid with genre chips. */
.tp-all-movies {
    margin-top: clamp(28px, 3vw, 44px);
    padding-right: clamp(12px, 2.6vw, 40px);
    display: grid;
    gap: 18px;
}
.tp-all-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}
.tp-all-count {
    font-size: 14px;
    color: var(--tp-muted, rgba(15, 23, 42, .62));
}
.tp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tp-chip {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: var(--tp-surface, #fff);
    color: var(--tp-text, #0f172a);
    font-size: 14px;
    font-weight: 600;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tp-chip:hover {
    border-color: var(--tp-accent, #2e5eaa);
}
.tp-chip.is-on {
    background: var(--tp-accent, #2e5eaa);
    border-color: var(--tp-accent, #2e5eaa);
    color: #fff;
}
.tp-grid {
    display: grid;
    /* Oct 1 2026: fixed columns - 4 desktop, 3 tablet, 2 large phone, 1 phone */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
}
@media (max-width: 1199.98px) {
    .tp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .tp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }
}
/* Oct 1 2026: grid posters 50% shorter (2:3 -> 4:3); image is cropped to fit */
.tp-grid .tp-card-img {
    aspect-ratio: 4 / 3;
}
.tp-grid .tp-card-img img {
    object-position: center 30%;
}
.tp-card[hidden] {
    display: none !important;
}
.tp-grid-empty {
    color: var(--tp-muted, rgba(15, 23, 42, .62));
}
@media (max-width: 575.98px) {
    .tp-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}
/* Oct 1 2026: My List posters 50% shorter, like the grid */
#tp-row-mylist .tp-card-img {
    aspect-ratio: 4 / 3;
}
#tp-row-mylist .tp-card-img img {
    object-position: center 30%;
}
/* Oct 1 2026 BOTTOM-ROW: My List + Favorite genres + Favorite personality side by side on desktop */
@media (min-width: 1200px) {
    .tp-bottom-row {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 28px;
        align-items: start;
    }
    .tp-bottom-row > .section-wraper {
        min-width: 0;
    }
    .tp-bottom-row .tp-row .tp-scroller {
        grid-auto-columns: 150px;
    }
    .tp-bottom-row .slick-general {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: 130px;
        gap: 12px;
        overflow-x: auto;
        padding: 6px 2px 14px !important;
        scrollbar-width: thin;
    }
    .tp-bottom-row #user-favorite-personality .slick-general {
        grid-auto-columns: 110px;
    }
    .tp-bottom-row .slick-general .slick-list,
    .tp-bottom-row .slick-general .slick-track {
        display: contents !important;
        width: auto !important;
        transform: none !important;
    }
    .tp-bottom-row .slick-general .slick-item {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }
    .tp-bottom-row .slick-general .slick-prev,
    .tp-bottom-row .slick-general .slick-next {
        display: none !important;
    }
}
/* ==== HOME-SIMPLE END ==== */

/* ==== MOVIES-GRID START ==== */
/* Oct 1 2026: /movies rows match the homepage grid - 4 desktop, 3 tablet, 2 large phone, 1 phone;
   posters 4:3 (half the old 2:3 height), image cropped to fit. Overrides MOVIES-CARDS and the mobile scroller. */
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
    overflow: visible !important;
    padding-right: clamp(12px, 2.6vw, 40px) !important;
}
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) .slick-list,
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) .slick-track {
    display: contents !important;
    width: auto !important;
    transform: none !important;
}
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) .slick-item {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
}
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) .slick-prev,
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) .slick-next {
    display: none !important;
}
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) .image-box {
    aspect-ratio: 4 / 3 !important;
}
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) .image-box img {
    object-position: center 30%;
}
@media (max-width: 1199.98px) {
    html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }
}
@media (max-width: 575.98px) {
    html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}
/* MOVIES-GRID cards: homepage look on the light theme - no box, dark titles */
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) .entainment-slick-card {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) .image-box {
    border-radius: 12px !important;
}
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) .card-description {
    padding: 8px 0 0 !important;
}
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) .iq-title {
    font-family: var(--tp-display);
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    text-transform: none;
    min-height: 0;
}
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) .iq-title a {
    color: var(--tp-text, #0f172a) !important;
}
html body.route-movies .slick-general.slick-general:not(.movie-banner-thumbs) .iq-title a:hover {
    color: var(--tp-accent, #2e5eaa) !important;
}
/* MOVIES-GRID list: the scroll-loaded list (#entertainment-list, also ?language=) gets the same grid */
html body.route-movies #entertainment-list.row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
    margin: 16px 0 0 !important;
    padding-right: clamp(12px, 2.6vw, 40px);
}
html body.route-movies #entertainment-list.row > * {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
}
html body.route-movies #entertainment-list.row .entainment-slick-card {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}
html body.route-movies #entertainment-list.row .image-box {
    aspect-ratio: 4 / 3 !important;
    border-radius: 12px !important;
    overflow: hidden;
}
html body.route-movies #entertainment-list.row .image-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30%;
}
html body.route-movies #entertainment-list.row .card-description {
    padding: 8px 0 0 !important;
}
html body.route-movies #entertainment-list.row .iq-title {
    font-family: var(--tp-display);
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    text-transform: none;
    min-height: 0;
}
html body.route-movies #entertainment-list.row .iq-title a {
    color: var(--tp-text, #0f172a) !important;
}
html body.route-movies #entertainment-list.row .iq-title a:hover {
    color: var(--tp-accent, #2e5eaa) !important;
}
@media (max-width: 1199.98px) {
    html body.route-movies #entertainment-list.row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    html body.route-movies #entertainment-list.row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}
@media (max-width: 575.98px) {
    html body.route-movies #entertainment-list.row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
/* ==== MOVIES-GRID END ==== */

/* ==== META-BADGES START ==== */
/* Oct 1 2026: HD/UHD + year chips, bottom-left of every movie poster (thisaiplay-engagement.js metaBadges) */
.tp-has-meta {
    position: relative;
}
.tp-meta-badges {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 5;
    display: flex;
    gap: 4px;
    pointer-events: none;
}
.tp-meta-badge {
    padding: 2px 7px;
    border-radius: 5px;
    font-family: var(--tp-display, inherit);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .04em;
    color: #fff;
    background: rgba(15, 23, 42, .78);
}
.tp-meta-badge.tp-meta-q {
    background: var(--tp-accent, #2e5eaa);
}
.tp-card-img:has(.tp-card-progress) .tp-meta-badges {
    bottom: 14px;
}
/* ==== META-BADGES END ==== */

/* ==== CARD-POLISH START ==== */
/* Oct 1 2026: movie grid tools (language/sort menus), hover info, poster placeholders, light /movies page */
.tp-all-head {
    align-items: center;
}
.tp-all-tools {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tp-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 7px 34px 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: var(--tp-surface, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2356627a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--tp-text, #0f172a);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.tp-select:hover,
.tp-select:focus-visible {
    border-color: var(--tp-accent, #2e5eaa);
}
@media (max-width: 575.98px) {
    .tp-all-tools {
        margin-left: 0;
        width: 100%;
    }
    .tp-select {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Hover: lift (existing), slow zoom, rating + length chip top-right */
.tp-card-img img {
    transition: transform .35s ease;
}
.tp-card:hover .tp-card-img img {
    transform: scale(1.04);
}
.tp-card-hover {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    display: flex;
    gap: 4px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.tp-card-hover > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
}
.tp-card-hover .ph-star {
    color: #f5b942;
}
.tp-card:hover .tp-card-hover,
.tp-card-link:focus-visible .tp-card-hover {
    opacity: 1;
    transform: none;
}
@media (hover: none) {
    .tp-card-hover {
        display: none;
    }
}

/* Movies without a poster: branded placeholder with the title */
.tp-card-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    padding: 14px 14px 40px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(176, 122, 18, .35) 0%, rgba(176, 122, 18, 0) 55%),
        linear-gradient(135deg, #2e5eaa 0%, #142033 100%);
    color: #fff;
}
.tp-card-ph::before {
    content: "TamilFlicks";
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .7;
}
.tp-card-ph-title {
    font-family: var(--tp-display, inherit);
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: 800;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* /movies on the light theme: no leftover purple wash; grid page spacing */
html body.route-movies {
    background-image: none !important;
}
.tp-movies-page .tp-all-movies {
    margin-top: 8px;
}

/* ?language= list: same hover zoom; loading placeholders in the 4/3/2/1 grid */
html body.route-movies #entertainment-list .image-box img {
    transition: transform .35s ease;
}
html body.route-movies #entertainment-list .hover-card-container:hover .image-box img {
    transform: scale(1.04);
}
html body.route-movies .shimmer-container > .row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
    margin: 16px 0 0 !important;
}
html body.route-movies .shimmer-container > .row > * {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
@media (max-width: 1199.98px) {
    html body.route-movies .shimmer-container > .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    html body.route-movies .shimmer-container > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}
@media (max-width: 575.98px) {
    html body.route-movies .shimmer-container > .row { grid-template-columns: minmax(0, 1fr); }
}
/* ==== CARD-POLISH END ==== */
/* ==== MODERN-UI START ==== */
/* Oct 1 2026: live search panel, phone bottom bar, WhatsApp share, movie page polish (thisaiplay-engagement.js MODERN-UI) */

/* Search panel */
html.tp-search-open,
html.tp-search-open body {
    overflow: hidden;
}
.tp-search {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 8vh 16px 16px;
}
.tp-search[hidden] {
    display: none;
}
.tp-search-panel {
    max-width: 720px;
    max-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--tp-surface, #fff);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
    overflow: hidden;
}
.tp-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 14px 20px;
    border-bottom: 1px solid rgba(15, 23, 42, .1);
}
.tp-search-bar > .ph {
    font-size: 22px;
    color: var(--tp-accent, #2e5eaa);
}
.tp-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tp-text, #0f172a);
    font-size: 18px;
    font-weight: 500;
}
.tp-search-input::-webkit-search-cancel-button {
    display: none;
}
.tp-search-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    color: var(--tp-text, #0f172a);
    font-size: 18px;
    display: grid;
    place-items: center;
}
.tp-search-close:hover {
    background: rgba(15, 23, 42, .12);
}
.tp-search-label {
    margin: 0;
    padding: 12px 20px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tp-muted, rgba(15, 23, 42, .62));
}
.tp-search-label:empty {
    display: none;
}
.tp-search-results {
    overflow-y: auto;
    padding: 6px 8px 10px;
}
.tp-search-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--tp-text, #0f172a);
    text-decoration: none;
    outline: 0;
}
.tp-search-item:hover,
.tp-search-item:focus-visible {
    background: rgba(46, 94, 170, .08);
    color: var(--tp-text, #0f172a);
}
.tp-search-thumb {
    position: relative;
    flex: none;
    width: 76px;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: #e9edf3;
}
.tp-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tp-search-text {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.tp-search-title {
    font-family: var(--tp-display, inherit);
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-search-sub {
    font-size: 13px;
    color: var(--tp-muted, rgba(15, 23, 42, .62));
}
.tp-search-empty {
    margin: 0;
    padding: 20px 12px 24px;
    color: var(--tp-muted, rgba(15, 23, 42, .62));
}
@media (max-width: 575.98px) {
    .tp-search {
        padding: 0;
    }
    .tp-search-panel {
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
}

/* Small placeholder (search results, More Like This) */
.tp-card-ph-sm {
    padding: 8px;
}
.tp-card-ph-sm::before {
    font-size: 8px;
}
.tp-card-ph-sm .tp-card-ph-title {
    font-size: 12px;
    -webkit-line-clamp: 2;
}

/* Phone bottom bar */
.tp-bottom-nav {
    display: none;
}
@media (max-width: 767.98px) {
    .tp-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(15, 23, 42, .1);
        box-shadow: 0 -6px 20px rgba(15, 23, 42, .06);
    }
    .tp-bottom-nav a,
    .tp-bottom-nav button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 4px 0;
        border: 0;
        background: none;
        color: var(--tp-muted, rgba(15, 23, 42, .62));
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
    }
    .tp-bottom-nav .ph,
    .tp-bottom-nav .ph-fill {
        font-size: 23px;
    }
    .tp-bottom-nav .is-on {
        color: var(--tp-accent, #2e5eaa);
    }
    body.tp-has-bottom-nav {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
    body.tp-has-bottom-nav #back-to-top .top {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
}
#tp-row-mylist {
    scroll-margin-top: 90px;
}

/* WhatsApp-shared movie highlighted on the homepage */
.tp-card-spot .tp-card-img {
    box-shadow: 0 0 0 3px var(--tp-accent, #2e5eaa), 0 16px 36px rgba(46, 94, 170, .35);
    animation: tp-spot 1.4s ease-in-out 3;
}
@keyframes tp-spot {
    50% { box-shadow: 0 0 0 6px rgba(46, 94, 170, .45), 0 16px 36px rgba(46, 94, 170, .35); }
}
@media (prefers-reduced-motion: reduce) {
    .tp-card-spot .tp-card-img { animation: none; }
}

/* Movie page */
body.route-movie-details .tp-detail > h4 {
    font-family: var(--tp-display, inherit);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.15;
    margin: 6px 0 10px;
    color: var(--tp-text, #0f172a);
}
body.route-movie-details .tp-detail > ul.list-inline {
    gap: 8px !important;
    margin: 18px 0 22px !important;
}
body.route-movie-details .tp-detail > ul.list-inline > li {
    margin: 0 !important;
}
body.route-movie-details .tp-detail > ul.list-inline > li > span.d-flex {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--tp-surface, #fff);
    border: 1px solid rgba(15, 23, 42, .1);
    font-size: 13.5px;
    line-height: 1.5;
}
body.route-movie-details .tp-detail > ul.list-inline > li > .tp-meta-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
}
body.route-movie-details .tp-detail > .d-flex {
    gap: 12px;
    align-items: center !important;
}
body.route-movie-details .tp-detail .play-button-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
body.route-movie-details .tp-detail .play-button-wrapper > .btn-primary {
    border-radius: 999px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(46, 94, 170, .3);
}
body.route-movie-details .tp-detail .share-button > .btn {
    border-radius: 999px;
    padding: 11px 20px;
    background: var(--tp-surface, #fff) !important;
    color: var(--tp-text, #0f172a) !important;
    border: 1px solid rgba(15, 23, 42, .14) !important;
    font-weight: 600;
}
body.route-movie-details .tp-movie-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.tp-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease;
}
.tp-wa-btn .ph {
    font-size: 18px;
}
.tp-wa-btn:hover,
.tp-wa-btn:focus-visible {
    background: #1ebe5a;
    color: #fff;
}
body.route-movie-details .tp-disclaimer {
    margin-top: 28px;
    font-size: 12px;
    color: var(--tp-muted, rgba(15, 23, 42, .62));
    opacity: .85;
}
body.route-movie-details .watch-sidebar-thumb {
    position: relative;
    overflow: hidden;
}
body.route-movie-details .watch-sidebar-item:hover .watch-sidebar-item-title {
    color: var(--tp-accent, #2e5eaa);
}
/* The copyright note carries theme button classes (btn btn-primary border rounded); show it as plain small print */
body.route-movie-details .tp-detail .tp-disclaimer.btn {
    display: block !important;
    width: auto;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--tp-muted, rgba(15, 23, 42, .62)) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-align: left !important;
    white-space: normal;
    cursor: default;
    pointer-events: none;
}
body.route-movie-details .tp-detail > h4 {
    font-size: clamp(26px, 3vw, 38px) !important;
}
/* Trailer button next to Watch now (movie-first player) */
.tp-trailer-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: var(--tp-surface, #fff);
    color: var(--tp-text, #0f172a);
    font-weight: 600;
    transition: border-color .2s ease, color .2s ease;
}
.tp-trailer-btn .ph {
    font-size: 17px;
}
.tp-trailer-btn:hover,
.tp-trailer-btn:focus-visible {
    border-color: var(--tp-accent, #2e5eaa);
    color: var(--tp-accent, #2e5eaa);
}
/* ==== MODERN-UI END ==== */
/* ==== SONGS START ==== */
/* Oct 2 2026: song cards (16:9 YouTube thumbnails), Latest songs row, pop-up player (tp_song_grid.blade.php, engagement.js SONGS) */
.tp-song .tp-card-img,
.tp-grid .tp-song .tp-card-img {
    aspect-ratio: 16 / 9;
}
.tp-song-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--tp-accent, #2e5eaa);
    font-size: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .3);
    transition: transform .2s ease;
}
.tp-song:hover .tp-song-play {
    transform: scale(1.1);
}
.tp-song .tp-card-sub .ph {
    margin-right: 3px;
    color: var(--tp-accent, #2e5eaa);
}
.tp-songs-row .tp-scroller {
    grid-auto-columns: clamp(220px, 24vw, 320px);
}
.tp-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tp-row-head a {
    font-size: 14px;
    font-weight: 600;
    color: var(--tp-accent, #2e5eaa);
    text-decoration: none;
}
.tp-songs-page {
    padding-top: 24px;
}
.tp-songs-empty {
    padding: 48px 0;
    color: var(--tp-muted, rgba(15, 23, 42, .62));
}

/* Pop-up player */
.tp-player {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(8, 12, 24, .86);
}
.tp-player[hidden] {
    display: none;
}
.tp-player-box {
    width: min(960px, 100%);
    display: grid;
    gap: 12px;
}
.tp-player-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tp-player-title {
    margin: 0;
    color: #fff;
    font-family: var(--tp-display, inherit);
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-player-close {
    flex: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 20px;
    display: grid;
    place-items: center;
}
.tp-player-close:hover {
    background: rgba(255, 255, 255, .24);
}
.tp-player-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
.tp-player-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.tp-player-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tp-player-actions > * {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: none;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.tp-player-actions > *:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.tp-player-actions > [hidden] {
    display: none;
}
/* Five tabs on the phone bottom bar once Songs is in */
@media (max-width: 767.98px) {
    .tp-bottom-nav {
        grid-template-columns: repeat(5, 1fr);
    }
}
/* ==== SONGS END ==== */
/* ==== SONGS-APP START ==== */
/* Oct 2 2026: /videos (Songs) in a dark music-app look - Latest song banner (engagement.js songPage) + numbered track list */
.tp-songs-page {
    background:
        radial-gradient(1100px 420px at 8% -12%, rgba(46, 94, 170, .55), rgba(46, 94, 170, 0) 62%),
        linear-gradient(180deg, #111a2e 0%, #0b111d 100%);
    color: #e6ebf5;
    padding-top: 28px;
    padding-bottom: 56px !important;
    min-height: 70vh;
}
.tp-songs-page .tp-all-movies {
    margin-top: 0;
}
.tp-songs-page .main-title {
    color: #fff;
}
.tp-songs-page .tp-all-head {
    margin-top: 20px;
}
.tp-songs-page .tp-all-count,
.tp-songs-page .tp-grid-empty,
.tp-songs-page .tp-songs-empty {
    color: #9aa6bd;
}
.tp-songs-page .tp-chip {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #e6ebf5;
}
.tp-songs-page .tp-chip:hover {
    border-color: rgba(255, 255, 255, .4);
}
.tp-songs-page .tp-chip.is-on {
    background: #2e5eaa;
    border-color: #2e5eaa;
    color: #fff;
}
.tp-songs-page .tp-select {
    background-color: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #e6ebf5;
}
.tp-songs-page .tp-select option {
    color: #0f172a;
}

/* Latest song banner */
.tp-song-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(220px, 440px) minmax(0, 1fr);
    gap: 32px;
    align-items: end;
    padding: 28px;
    border-radius: 20px;
    overflow: hidden;
}
.tp-song-hero::before {
    content: "";
    position: absolute;
    inset: -60px;
    z-index: -2;
    background: var(--tp-hero-img) center / cover no-repeat;
    filter: blur(48px) saturate(1.4);
    opacity: .5;
}
.tp-song-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(11, 17, 29, .45) 0%, rgba(11, 17, 29, .85) 100%);
}
.tp-song-hero-art {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.tp-song-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tp-song-hero-art:hover .tp-song-play {
    transform: scale(1.1);
}
.tp-song-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #f0c35a;
}
.tp-song-hero-title {
    margin: 8px 0 6px;
    color: #fff;
    font-family: var(--tp-display, inherit);
    font-size: clamp(26px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}
.tp-song-hero-sub {
    margin: 0;
    color: #c9d3e6;
    font-size: 15px;
}
.tp-song-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}
.tp-song-btn-play,
.tp-song-btn-shuffle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    transition: background-color .2s ease, transform .2s ease;
}
.tp-song-btn-play {
    border: 0;
    background: #fff;
    color: #0b111d;
}
.tp-song-btn-play:hover {
    background: #f0c35a;
    transform: translateY(-1px);
}
.tp-song-btn-shuffle {
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
.tp-song-btn-shuffle:hover {
    background: rgba(255, 255, 255, .16);
}
@media (max-width: 767.98px) {
    .tp-song-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
    }
}

/* Numbered track list */
.tp-songs-page .tp-grid-songs {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    counter-reset: tp-track;
}
.tp-songs-page .tp-song {
    counter-increment: tp-track;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    padding: 8px 12px 8px 0;
    border-radius: 12px;
    transition: background-color .15s ease;
}
.tp-songs-page .tp-song[hidden] {
    display: none !important;
}
.tp-songs-page .tp-song::before {
    content: counter(tp-track);
    text-align: center;
    color: #9aa6bd;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tp-songs-page .tp-song.is-playing::before {
    content: "\266A";
    color: #f0c35a;
    font-size: 18px;
}
.tp-songs-page .tp-song:hover,
.tp-songs-page .tp-song:focus-within {
    background: rgba(255, 255, 255, .06);
}
.tp-songs-page .tp-song .tp-card-link {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) 40px;
    grid-template-areas: "img title play" "img sub play";
    column-gap: 16px;
    align-items: center;
    color: inherit;
    outline: 0;
}
.tp-songs-page .tp-song .tp-card-img {
    grid-area: img;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    transform: none !important;
    box-shadow: none !important;
    background: #1b2436;
}
.tp-songs-page .tp-song .tp-card-img img {
    transform: none !important;
}
.tp-songs-page .tp-song .tp-song-play {
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    font-size: 14px;
    opacity: 0;
    transition: opacity .15s ease;
}
.tp-songs-page .tp-song:hover .tp-song-play,
.tp-songs-page .tp-song-link:focus-visible .tp-song-play {
    opacity: 1;
}
.tp-songs-page .tp-song .tp-card-title {
    grid-area: title;
    align-self: end;
    margin: 0;
    color: #fff;
    font-size: 15.5px;
}
.tp-songs-page .tp-song .tp-card-link:not(:has(.tp-card-sub)) .tp-card-title {
    grid-row: 1 / span 2;
    align-self: center;
}
.tp-songs-page .tp-song.is-playing .tp-card-title {
    color: #f0c35a;
}
.tp-songs-page .tp-song .tp-card-sub {
    grid-area: sub;
    align-self: start;
    margin-top: 2px;
    color: #9aa6bd;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-songs-page .tp-song .tp-card-sub .ph {
    color: #9aa6bd;
}
.tp-songs-page .tp-song .tp-card-link::after {
    content: "";
    grid-area: play;
    justify-self: end;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5v9l7.5-4.5z' fill='%23ffffff'/%3E%3C/svg%3E");
    transition: background-color .15s ease, border-color .15s ease;
}
.tp-songs-page .tp-song:hover .tp-card-link::after,
.tp-songs-page .tp-song-link:focus-visible::after {
    border-color: #fff;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5v9l7.5-4.5z' fill='%230b111d'/%3E%3C/svg%3E");
}
@media (max-width: 575.98px) {
    .tp-songs-page .tp-song {
        grid-template-columns: 30px minmax(0, 1fr);
        padding-right: 6px;
    }
    .tp-songs-page .tp-song .tp-card-link {
        grid-template-columns: 96px minmax(0, 1fr) 34px;
        column-gap: 12px;
    }
    .tp-songs-page .tp-song .tp-card-link::after {
        width: 32px;
        height: 32px;
    }
}
/* Empty featured-video banner above the Songs page (no banners set) left a light strip */
.banner-section:has(+ .tp-songs-page):not(:has(img)) {
    display: none;
}
/* ==== SONGS-APP END ==== */
/* ==== SONGS-PLUS START ==== */
/* Oct 2 2026: player controls, mini player, liked songs, songs in search + on movie pages (engagement.js SONGS) */
.tp-player-head-btns {
    display: flex;
    gap: 8px;
    flex: none;
}
.tp-player-icon {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 19px;
    display: grid;
    place-items: center;
}
.tp-player-icon:hover {
    background: rgba(255, 255, 255, .24);
}
.tp-yt-holder,
.tp-player-frame > div {
    position: absolute;
    inset: 0;
}
.tp-player-actions > .tp-player-toggle {
    background: #fff;
    color: #0b111d;
    border-color: #fff;
    font-size: 18px;
    padding: 9px 14px;
}
.tp-player-actions > .tp-player-toggle:hover {
    background: #f0c35a;
    border-color: #f0c35a;
    color: #0b111d;
}
.tp-player-actions > .is-on {
    background: rgba(240, 195, 90, .16);
    border-color: #f0c35a;
    color: #f0c35a;
}
.tp-player-actions > .tp-player-like.is-on {
    background: rgba(255, 92, 122, .16);
    border-color: #ff5c7a;
    color: #ff5c7a;
}
.tp-player-actions > .tp-player-wa:hover {
    background: #25d366;
    border-color: #25d366;
}

/* Mini player: docked bottom-right (desktop) or above the bottom bar (phone); the page stays scrollable */
.tp-player.is-mini {
    inset: auto 16px 16px auto;
    width: 400px;
    padding: 0;
    display: block;
    background: none;
}
.tp-player.is-mini .tp-player-box {
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(11, 17, 29, .97);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}
.tp-player.is-mini .tp-player-title {
    font-size: 14px;
}
.tp-player.is-mini .tp-player-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
}
.tp-player.is-mini .tp-player-frame {
    border-radius: 10px;
}
.tp-player.is-mini .tp-player-actions {
    gap: 8px;
}
.tp-player.is-mini .tp-player-actions > .tp-mini-hide,
.tp-player.is-mini .tp-btn-label {
    display: none;
}
.tp-player.is-mini .tp-player-actions > * {
    padding: 6px 12px;
}
@media (max-width: 767.98px) {
    .tp-player.is-mini {
        left: 8px;
        right: 8px;
        width: auto;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
    .tp-player:not(.is-mini) .tp-btn-label {
        display: none;
    }
}

/* Hearts on the Songs list */
.tp-songs-page .tp-song {
    grid-template-columns: 40px minmax(0, 1fr) 44px;
}
.tp-song-like {
    justify-self: end;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #9aa6bd;
    font-size: 19px;
    display: grid;
    place-items: center;
    transition: color .15s ease, transform .15s ease;
}
.tp-song-like:hover {
    color: #fff;
    transform: scale(1.1);
}
.tp-song-like.is-on {
    color: #ff5c7a;
}
.tp-songs-page .tp-chip-liked .ph-heart {
    color: #ff5c7a;
}
.tp-songs-page .tp-chip-liked.is-on .ph-heart {
    color: #fff;
}
.tp-songs-page .tp-song .tp-card-img .tp-badge {
    top: 4px;
    left: 4px;
    padding: 1px 6px;
    font-size: 9.5px;
}
@media (max-width: 575.98px) {
    .tp-songs-page .tp-song {
        grid-template-columns: 30px minmax(0, 1fr) 36px;
    }
    .tp-songs-page .tp-song .tp-card-link {
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-areas: "img title" "img sub";
    }
    .tp-songs-page .tp-song .tp-card-link::after {
        display: none;
    }
}

/* Search: Movies / Songs groups */
.tp-search-group {
    margin: 10px 12px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tp-muted, rgba(15, 23, 42, .62));
}
.tp-search-note {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .8);
    color: #f0c35a;
    font-size: 11px;
}

/* Movie page: Songs from this movie */
.tp-movie-songs {
    padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) 32px;
}
/* YouTube minimum player size is 200 x 200 px: keep the video area at least 200 px tall on phones */
.tp-player-frame {
    min-height: 200px;
}
@media (max-width: 575.98px) {
    .tp-player-frame {
        aspect-ratio: auto;
        width: 100%;
        height: 200px;
    }
}
/* ==== SONGS-PLUS END ==== */
/* ==== APP-PLUS START ==== */
/* Oct 2 2026: install banner, Request a movie in search (thisaiplay-engagement.js APP / Request) */
.tp-app-banner {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 1045;
    width: min(420px, calc(100vw - 32px));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 14px;
    border-radius: 16px;
    background: var(--tp-surface, #fff);
    color: var(--tp-text, #0f172a);
    border: 1px solid rgba(15, 23, 42, .1);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
}
.tp-app-banner img {
    flex: none;
    border-radius: 11px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}
.tp-app-text {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 1px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--tp-muted, rgba(15, 23, 42, .62));
}
.tp-app-text strong {
    font-family: var(--tp-display, inherit);
    font-size: 15px;
    color: var(--tp-text, #0f172a);
}
.tp-app-install {
    flex: none;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--tp-accent, #2e5eaa);
    color: #fff;
    font-weight: 700;
}
.tp-app-install:hover {
    filter: brightness(1.08);
}
.tp-app-close {
    flex: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    color: var(--tp-text, #0f172a);
    display: grid;
    place-items: center;
}
@media (max-width: 767.98px) {
    .tp-app-banner {
        left: 8px;
        right: 8px;
        width: auto;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}
body:has(.tp-player.is-mini:not([hidden])) .tp-app-banner,
html.tp-search-open .tp-app-banner {
    display: none;
}

/* Request a movie (search panel) */
.tp-search-request {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 8px 12px 6px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(46, 94, 170, .06);
    font-size: 14px;
    color: var(--tp-muted, rgba(15, 23, 42, .62));
}
.tp-search-request.is-empty {
    margin-top: 0;
}
.tp-search-request button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--tp-accent, #2e5eaa);
    color: #fff;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-search-request button:disabled {
    background: #1f7a4d;
    opacity: 1;
}
/* ==== APP-PLUS END ==== */
/* ==== LIVE-TV START ==== */
/* Phone bottom bar: Search is the raised button in the middle */
@media (max-width: 767.98px) {
    .tp-bottom-nav .tp-bn-search {
        position: relative;
        color: var(--tp-accent, #2e5eaa);
    }
    .tp-bottom-nav .tp-bn-search .ph {
        display: grid;
        place-items: center;
        width: 50px;
        height: 50px;
        margin-top: -24px;
        border-radius: 50%;
        background: linear-gradient(140deg, #2e5eaa, #4f8fe0);
        color: #fff;
        font-size: 24px;
        box-shadow: 0 0 0 5px #fff, 0 8px 18px rgba(46, 94, 170, .38);
        transition: transform .15s ease;
    }
    .tp-bottom-nav .tp-bn-search:active .ph {
        transform: scale(.92);
    }
}

/* /livetv: the theme's slider and rows give way to #tp-live */
body.tp-live-on #livetvthumbnail-section,
body.tp-live-on #more-infinity-section {
    display: none;
}
#tp-live {
    --live-red: #e5383b;
    margin-bottom: 40px;
}
.tp-live-stage {
    background: radial-gradient(120% 90% at 15% 0%, #1d3561 0%, #0d1424 55%, #080c16 100%);
    color: #fff;
    padding: 28px max(16px, calc((100vw - 1180px) / 2)) 22px;
    display: grid;
    gap: 16px;
}
.tp-live-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.tp-live-head h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 800;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    gap: 12px;
}
.tp-live-head p {
    margin: 0;
    color: rgba(255, 255, 255, .66);
    font-size: 14px;
}
.tp-live-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--live-red);
    box-shadow: 0 0 0 0 rgba(229, 56, 59, .6);
    animation: tp-live-pulse 1.8s infinite;
}
@keyframes tp-live-pulse {
    70% { box-shadow: 0 0 0 10px rgba(229, 56, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 56, 59, 0); }
}
.tp-live-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 66vh;
    width: 100%;
    margin: 0 auto;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.tp-live-screen video {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
}
.tp-live-start {
    position: absolute;
    inset: 0;
    border: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    background: radial-gradient(circle at 50% 45%, #1b2b47 0%, #05070d 75%);
    color: #fff;
    cursor: pointer;
}
#tp-live.is-playing .tp-live-start {
    display: none;
}
.tp-live-start-logo {
    width: clamp(110px, 22vw, 180px);
    aspect-ratio: 16 / 10;
    background: #fff;
    border-radius: 14px;
    display: grid;
    place-items: center;
    padding: 10px;
}
.tp-live-start-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.tp-live-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--live-red);
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 10px 24px rgba(229, 56, 59, .4);
    transition: transform .15s ease;
}
.tp-live-start:hover .tp-live-start-btn,
.tp-live-start:focus-visible .tp-live-start-btn {
    transform: scale(1.05);
}
.tp-live-msg {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
    background: rgba(5, 7, 13, .92);
    color: #fff;
}
.tp-live-msg[hidden],
.tp-live-spin[hidden] {
    display: none;
}
.tp-live-msg .ph {
    font-size: 40px;
    color: rgba(255, 255, 255, .6);
}
.tp-live-msg button {
    margin-top: 4px;
    border: 0;
    border-radius: 999px;
    padding: 9px 18px;
    background: #fff;
    color: #0d1424;
    font-weight: 700;
}
.tp-live-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .2);
    border-top-color: #fff;
    animation: tp-live-spin .8s linear infinite;
    pointer-events: none;
}
@keyframes tp-live-spin {
    to { transform: rotate(360deg); }
}
.tp-live-now {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.tp-live-now-logo {
    width: 64px;
    height: 44px;
    flex: none;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
}
.tp-live-now-text {
    display: grid;
    min-width: 0;
    flex: 1;
}
.tp-live-now-text strong {
    font-size: 18px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-live-now-text small {
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
}
.tp-live-badge {
    justify-self: start;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--live-red);
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    margin-bottom: 2px;
}
.tp-live-now-actions {
    display: flex;
    gap: 8px;
    flex: none;
}
.tp-live-now-actions button,
.tp-live-now-actions a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 20px;
    text-decoration: none;
    transition: background .15s ease;
}
.tp-live-now-actions button:hover,
.tp-live-now-actions a:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
.tp-live-now-actions .is-on {
    color: #f5b942;
    border-color: rgba(245, 185, 66, .5);
}
.tp-live-browse {
    padding: 22px max(16px, calc((100vw - 1180px) / 2)) 0;
    display: grid;
    gap: 18px;
}
.tp-live-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tp-live-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
    max-width: 100%;
    padding: 2px;
}
.tp-live-chips::-webkit-scrollbar {
    display: none;
}
.tp-live-chips button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(15, 23, 42, .12);
    background: #fff;
    color: #1f2a3d;
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 600;
}
.tp-live-chips button .ph-star {
    color: #f5b942;
}
.tp-live-chips button.is-on {
    background: var(--tp-accent, #2e5eaa);
    border-color: var(--tp-accent, #2e5eaa);
    color: #fff;
}
.tp-live-chips button.is-on .ph-star {
    color: #fff;
}
.tp-live-find {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 14px;
    height: 40px;
    min-width: min(260px, 100%);
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 999px;
    background: #fff;
    color: rgba(15, 23, 42, .5);
}
.tp-live-find input {
    border: 0;
    outline: 0;
    background: none;
    width: 100%;
    font-size: 14px;
    color: #1f2a3d;
}
.tp-live-find:focus-within {
    border-color: var(--tp-accent, #2e5eaa);
    box-shadow: 0 0 0 3px rgba(46, 94, 170, .15);
}
.tp-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 16px;
}
@media (max-width: 575.98px) {
    .tp-live-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .tp-live-now-actions [data-live-step] {
        display: none;
    }
    .tp-live-stage {
        padding-top: 20px;
    }
    .tp-live-screen {
        border-radius: 10px;
    }
}
.tp-live-tile {
    position: relative;
    display: grid;
    gap: 2px;
    text-align: left;
    border: 1px solid rgba(15, 23, 42, .08);
    background: #fff;
    border-radius: 14px;
    padding: 10px 10px 12px;
    color: #1f2a3d;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tp-live-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
}
.tp-live-tile.is-on {
    border-color: var(--tp-accent, #2e5eaa);
    box-shadow: 0 0 0 2px var(--tp-accent, #2e5eaa), 0 12px 26px rgba(46, 94, 170, .2);
}
.tp-live-tile-logo {
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    background: #f4f6fb;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 8px;
}
.tp-live-tile-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.tp-live-tile-name {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-live-tile-name .ph-star {
    color: #f5b942;
    font-size: 13px;
}
.tp-live-tile-cat {
    font-size: 12.5px;
    color: rgba(15, 23, 42, .55);
}
.tp-live-tile-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: var(--live-red);
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
}
.tp-live-tile.is-on .tp-live-tile-tag {
    background: var(--tp-accent, #2e5eaa);
}
.tp-live-tile.is-off .tp-live-tile-tag {
    background: #6b7280;
}
.tp-live-tile.is-off .tp-live-tile-logo img {
    filter: grayscale(1);
    opacity: .5;
}
.tp-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 9px;
}
.tp-eq i {
    width: 2px;
    background: #fff;
    animation: tp-eq .9s ease-in-out infinite;
}
.tp-eq i:nth-child(2) { animation-delay: -.3s; }
.tp-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes tp-eq {
    0%, 100% { height: 30%; }
    50% { height: 100%; }
}
.tp-live-empty {
    margin: 0;
    padding: 28px 0;
    text-align: center;
    color: rgba(15, 23, 42, .6);
}
.tp-live-empty[hidden] {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    .tp-live-dot, .tp-eq i, .tp-live-spin { animation: none; }
    .tp-live-tile:hover { transform: none; }
}
/* Mini player (LIVE-TV, part 2): the frame floats while playing and the big screen is out of view */
.tp-live-frame {
    position: absolute;
    inset: 0;
    background: #000;
}
.tp-live-unfloat {
    display: none;
}
#tp-live.is-float .tp-live-frame {
    position: fixed;
    inset: auto 16px 20px auto;
    width: min(340px, 60vw);
    aspect-ratio: 16 / 9;
    z-index: 1045;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    animation: tp-live-pop .2s ease-out;
}
#tp-live.is-float .tp-live-unfloat {
    display: grid;
    place-items: center;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 16px;
}
@media (max-width: 767.98px) {
    body.tp-has-bottom-nav #tp-live.is-float .tp-live-frame {
        right: 10px;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }
}
@keyframes tp-live-pop {
    from { transform: scale(.85); opacity: 0; }
}
/* Homepage "Live TV" row */
.tp-live-row .tp-scroller {
    grid-auto-columns: clamp(150px, 16vw, 210px);
}
.tp-live-row .main-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tp-live-row .tp-live-dot {
    width: 9px;
    height: 9px;
    flex: none;
    background: #e5383b;
    border-radius: 50%;
    animation: tp-live-pulse 1.8s infinite;
}
.tp-live-card .tp-card-img {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    padding: 12px;
}
.tp-live-card .tp-card-img img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    aspect-ratio: auto;
}
.tp-live-card .tp-live-tile-tag {
    top: 8px;
    left: 8px;
    background: #e5383b;
}
/* Search: Live TV results */
.tp-search-live .tp-search-thumb {
    background: #fff;
    display: grid;
    place-items: center;
}
.tp-search-live .tp-search-thumb img {
    object-fit: contain;
    padding: 4px;
}
.tp-search-live .tp-live-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: #e5383b;
    color: #fff;
    border-radius: 3px;
    padding: 0 5px;
    margin-right: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .tp-live-row .tp-live-dot, #tp-live.is-float .tp-live-frame { animation: none; }
}
/* ==== LIVE-TV END ==== */
/* ==== VIEWER-EXTRAS START ==== */
/* Data saver switch in the phone menu (hidden where the header menu is a desktop bar) */
.tp-saver-item .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
}
.tp-switch {
    margin-left: auto;
    position: relative;
    width: 38px;
    height: 22px;
    flex: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, .2);
    transition: background .15s ease;
}
.tp-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}
.tp-switch.is-on {
    background: #1f9d55;
}
.tp-switch.is-on::after {
    transform: translateX(16px);
}
@media (min-width: 1200px) {
    .tp-saver-item {
        display: none !important;
    }
}
/* Sleep timer: minutes left next to the moon */
.tp-sleep-left {
    font-size: 11px;
    font-weight: 700;
    margin-left: 2px;
}
.tp-live-now-actions [data-tp-sleep],
.tp-live-now-actions [data-tp-saver] {
    width: auto;
    min-width: 42px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    gap: 2px;
}
.tp-live-now-actions [data-tp-saver].is-on {
    color: #6fd3a0;
    border-color: rgba(111, 211, 160, .5);
}
@media (max-width: 575.98px) {
    .tp-live-now {
        flex-wrap: wrap;
    }
    .tp-live-now-actions {
        width: 100%;
        justify-content: flex-end;
    }
}
/* Homepage: Continue watching live */
.tp-live-recent-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    padding: 4px 2px 14px;
}
.tp-live-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 10px;
    border-radius: 14px;
    background: linear-gradient(120deg, #0d1424, #1d3561);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(13, 20, 36, .18);
    transition: transform .15s ease;
}
.tp-live-pill:hover {
    color: #fff;
    transform: translateY(-2px);
}
.tp-live-pill-logo {
    width: 64px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
}
.tp-live-pill-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.tp-live-pill-text {
    display: grid;
    min-width: 0;
    flex: 1;
}
.tp-live-pill-text strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-live-pill-text small {
    color: rgba(255, 255, 255, .7);
    font-size: 12.5px;
}
.tp-live-pill .tp-live-badge {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: #e5383b;
    color: #fff;
    border-radius: 3px;
    padding: 0 5px;
}
.tp-live-pill-play {
    font-size: 32px;
    color: #fff;
    flex: none;
}
@media (max-width: 575.98px) {
    .tp-live-recent-list {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 82%;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .tp-live-pill {
        scroll-snap-align: start;
    }
}
/* Homepage: New this week (posters and video stills side by side at one height) */
.tp-new-row {
    --tp-new-h: clamp(150px, 19vw, 200px);
}
.tp-new-row .tp-scroller {
    grid-auto-columns: max-content;
}
.tp-new-row .tp-card-img {
    height: var(--tp-new-h);
}
.tp-new-movie {
    width: calc(var(--tp-new-h) * 2 / 3);
}
.tp-new-clip {
    width: calc(var(--tp-new-h) * 16 / 9);
}
.tp-new-movie .tp-card-img {
    aspect-ratio: 2 / 3;
}
.tp-new-clip .tp-card-img {
    aspect-ratio: 16 / 9;
}
.tp-new-kind {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(13, 20, 36, .78);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
@media (max-width: 575.98px) {
    .tp-new-row {
        --tp-new-h: 150px;
    }
}
/* ==== VIEWER-EXTRAS END ==== */
/* ==== MORE-LIKE-THIS START ==== */
/* Poster row under the movie info (all screens); the theme's sidebar list gives way to it */
body.tp-more-on .watch-sidebar-title,
body.tp-more-on .watch-sidebar-list {
    display: none !important;
}
body.tp-more-solo #movieWatchSidebar,
body.tp-more-solo .watch-layout-toolbar {
    display: none !important;
}
body.tp-more-solo .watch-page-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}
body.tp-more-solo .watch-main-column {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}
.tp-more-row {
    margin-top: 8px;
    margin-bottom: 32px;
}
.tp-more-row .tp-card-img {
    aspect-ratio: 4 / 3;
}
.tp-more-row .tp-card-img img {
    object-position: center 30%;
}
@media (min-width: 768px) {
    .tp-more-row .tp-scroller {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px 18px;
        overflow: visible;
    }
}
@media (min-width: 1200px) {
    .tp-more-row .tp-scroller {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .tp-more-row .tp-scroller {
        grid-auto-columns: 44%;
        gap: 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .tp-more-row .tp-scroller::-webkit-scrollbar {
        display: none;
    }
}
.tp-more-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(13, 20, 36, 0) 40%, rgba(13, 20, 36, .55));
    opacity: 0;
    transition: opacity .2s ease;
}
.tp-more-play .ph-fill {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--tp-accent, #2e5eaa);
    font-size: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.tp-more-card:hover .tp-more-play,
.tp-more-card a:focus-visible .tp-more-play {
    opacity: 1;
}
@media (hover: none) {
    .tp-more-play {
        opacity: 1;
        background: linear-gradient(180deg, rgba(13, 20, 36, 0) 55%, rgba(13, 20, 36, .45));
        place-items: end start;
        padding: 8px;
    }
    .tp-more-play .ph-fill {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}
.tp-more-why {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(13, 20, 36, .72);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
/* ==== MORE-LIKE-THIS END ==== */
/* ==== FOOTER START ==== */
/* Footer rebuilt by footerModern() in thisaiplay-engagement.js */
footer.footer.tp-foot-on {
    padding: 0 !important;
    margin-top: 48px;
    background: radial-gradient(110% 120% at 0% 0%, #1d3561 0%, #0d1424 55%, #080c16 100%) !important;
    color: rgba(255, 255, 255, .72);
    border: 0 !important;
}
.tp-foot {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 24px 0;
}
.tp-foot a,
.tp-foot button {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .15s ease;
}
.tp-foot a:hover,
.tp-foot button:hover {
    color: #fff;
}
.tp-foot ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tp-foot-top {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
    padding-bottom: 40px;
}
.tp-foot-logo img {
    width: 190px;
    height: auto;
    filter: brightness(0) invert(1);
}
.tp-foot-logo strong {
    color: #fff;
    font-size: 24px;
}
.tp-foot-brand p {
    margin: 14px 0 20px;
    max-width: 30ch;
    font-size: 14.5px;
    line-height: 1.55;
}
.tp-foot-social {
    display: flex;
    gap: 10px;
}
.tp-foot-social a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 19px;
    transition: background .15s ease, transform .15s ease;
}
.tp-foot-social a:hover {
    background: var(--tp-accent, #2e5eaa);
    border-color: var(--tp-accent, #2e5eaa);
    transform: translateY(-2px);
}
.tp-foot-col h6 {
    margin: 4px 0 16px;
    color: #fff;
    font-family: var(--tp-display, inherit);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tp-foot-col ul {
    display: grid;
    gap: 11px;
    font-size: 14.5px;
}
.tp-foot-col button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    text-align: left;
}
.tp-foot-live {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #e5383b;
    vertical-align: 1px;
    box-shadow: 0 0 0 3px rgba(229, 56, 59, .25);
}
.tp-foot-contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.tp-foot-contact-list .ph {
    font-size: 18px;
    color: #f5b942;
    flex: none;
}
.tp-foot-contact-list a {
    overflow-wrap: anywhere;
}
.tp-foot-app {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
}
.tp-foot-app img {
    border-radius: 12px;
    flex: none;
}
.tp-foot-app div {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.tp-foot-app strong {
    color: #fff;
    font-size: 16px;
}
.tp-foot-app span {
    font-size: 13.5px;
}
.tp-foot .tp-foot-install {
    flex: none;
    border: 0;
    border-radius: 999px;
    padding: 10px 22px;
    background: #f5b942;
    color: #0d1424;
    font-weight: 700;
}
.tp-foot .tp-foot-install:hover {
    background: #ffd166;
    color: #0d1424;
}
.tp-foot-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 20px 0 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}
.tp-foot-bottom ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.tp-foot-bottom a {
    color: rgba(255, 255, 255, .62);
}
.tp-foot-love .ph-heart {
    color: #e5383b;
}
@media (max-width: 991.98px) {
    .tp-foot-top {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .tp-foot-brand {
        grid-column: 1 / -1;
    }
    .tp-foot-brand p {
        max-width: 46ch;
    }
}
@media (max-width: 575.98px) {
    .tp-foot {
        padding: 40px 18px 0;
    }
    .tp-foot-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 20px;
    }
    .tp-foot-contact {
        grid-column: 1 / -1;
    }
    .tp-foot-app {
        flex-wrap: wrap;
        padding: 16px;
    }
    .tp-foot-app div {
        flex-basis: calc(100% - 64px);
    }
    .tp-foot .tp-foot-install {
        width: 100%;
    }
    .tp-foot-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* ==== FOOTER END ==== */
/* ==== SHORTS START ==== */
/* /shorts feed (tp_shorts.blade.php + SHORTS in thisaiplay-engagement.js): full-height snap scroller under the header */
body.tp-shorts-on {
    overflow: hidden;
}
body.tp-shorts-on footer.footer,
body.tp-shorts-on #back-to-top {
    display: none !important;
}
.tp-shorts {
    position: fixed;
    top: var(--tp-shorts-top, 72px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    scrollbar-width: none;
    background: #05070d;
}
.tp-shorts::-webkit-scrollbar {
    display: none;
}
body.tp-has-bottom-nav .tp-shorts {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
.tp-short {
    position: relative;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-content: center;
    align-content: center;
    column-gap: 18px;
    padding: 16px 16px 14px;
    color: #fff;
}
.tp-short-frame {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    height: calc(var(--tp-shorts-h, 80vh) - 104px);
    aspect-ratio: 9 / 16;
    max-width: calc(100vw - 32px);
    justify-self: center;
    border-radius: 16px;
    overflow: hidden;
    background: #111827;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.tp-short-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s ease;
}
.tp-short-poster.is-wide {
    object-fit: contain;
    background: #000;
}
.tp-short.is-playing .tp-short-poster {
    opacity: 0;
}
.tp-short-host,
.tp-short-host iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.tp-short.is-blocked .tp-short-host {
    display: none;
}
.tp-short-info {
    grid-row: 2;
    grid-column: 1;
    max-width: min(420px, calc(100vw - 32px));
    padding-top: 10px;
}
.tp-short-title {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-short-tags {
    margin: 2px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
}
.tp-short-actions {
    grid-row: 1;
    grid-column: 2;
    align-self: end;
    display: grid;
    gap: 14px;
    padding-bottom: 8px;
}
.tp-short-actions > * {
    display: grid;
    justify-items: center;
    gap: 4px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
}
.tp-short-actions > * .ph,
.tp-short-actions > * .ph-fill {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    font-size: 23px;
    transition: background .15s ease, transform .15s ease;
}
.tp-short-actions > *:hover {
    color: #fff;
}
.tp-short-actions > *:hover .ph,
.tp-short-actions > *:hover .ph-fill {
    background: rgba(255, 255, 255, .22);
}
.tp-short-actions > *:active .ph,
.tp-short-actions > *:active .ph-fill {
    transform: scale(.92);
}
.tp-short-actions [data-short="like"].is-on .ph-fill {
    color: #ff5c7a;
}
.tp-short-actions [data-short="sound"]:not(.is-on) .ph {
    background: #f5b942;
    color: #0d1424;
}
.tp-shorts-nav {
    position: fixed;
    right: 28px;
    top: 50%;
    z-index: 6;
    display: grid;
    gap: 12px;
    transform: translateY(-50%);
}
.tp-shorts-nav button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 22px;
    display: grid;
    place-items: center;
}
.tp-shorts-nav button:hover {
    background: rgba(255, 255, 255, .22);
}
.tp-shorts-empty {
    margin: 0;
    padding: 80px 20px;
    text-align: center;
    color: rgba(255, 255, 255, .7);
}
/* Phones: the video fills the width, actions run in a row under it */
@media (max-width: 767.98px) {
    .tp-shorts-nav {
        display: none;
    }
    .tp-short {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        padding: 8px 10px 10px;
    }
    .tp-short-frame {
        height: calc(var(--tp-shorts-h, 70vh) - 136px);
        max-width: calc(100vw - 20px);
        border-radius: 12px;
    }
    .tp-short-actions {
        grid-row: 3;
        grid-column: 1;
        grid-auto-flow: column;
        justify-content: space-around;
        padding: 8px 0 0;
    }
    .tp-short-actions > * .ph,
    .tp-short-actions > * .ph-fill {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    .tp-short-info {
        grid-row: 2;
        padding-top: 8px;
        max-width: none;
    }
    .tp-short-title {
        font-size: 15px;
        -webkit-line-clamp: 1;
    }
}
/* Homepage "Shorts" row: tall cards that open the feed */
.tp-shorts-row .tp-scroller {
    grid-auto-columns: clamp(120px, 13vw, 170px);
}
.tp-short-card .tp-card-img {
    aspect-ratio: 9 / 16;
}
.tp-short-card .tp-card-img img {
    object-fit: cover;
}
.tp-short-card-play {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--tp-accent, #2e5eaa);
    font-size: 13px;
}
.tp-short-card .tp-card-title {
    -webkit-line-clamp: 2;
}
/* ==== SHORTS END ==== */
/* ==== LIVE-TV-MOBILE START ==== */
/* Oct 4 2026: nothing on /livetv may grow wider than the screen (the chip row used to stretch the grid) */
.tp-live-stage,
.tp-live-browse {
    grid-template-columns: minmax(0, 1fr);
}
.tp-live-tools > * {
    min-width: 0;
}
/* Logos of any size stay inside their box */
.tp-live-tile-logo,
.tp-live-start-logo,
.tp-live-card .tp-card-img,
.tp-live-pill-logo {
    position: relative;
    overflow: hidden;
}
.tp-live-tile-logo img,
.tp-live-start-logo img,
.tp-live-card .tp-card-img img,
.tp-live-pill-logo img {
    position: absolute;
    top: 10%;
    left: 8%;
    width: 84% !important;
    height: 80% !important;
    max-width: none;
    max-height: none;
    object-fit: contain;
}
/* Phones: a TV-guide list, one channel per row */
@media (max-width: 575.98px) {
    .tp-live-browse {
        gap: 14px;
        padding-top: 18px;
    }
    .tp-live-tools {
        gap: 10px;
    }
    .tp-live-chips {
        margin: 0 -16px;
        padding: 2px 16px;
        max-width: none;
        width: calc(100% + 32px);
    }
    .tp-live-find {
        width: 100%;
        min-width: 0;
    }
    .tp-live-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .tp-live-tile {
        grid-template-columns: 84px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 12px;
        row-gap: 0;
        padding: 8px 12px 8px 8px;
        border-radius: 12px;
    }
    .tp-live-tile:hover {
        transform: none;
    }
    .tp-live-tile-logo {
        grid-row: 1 / span 2;
        grid-column: 1;
        margin: 0;
        padding: 0;
        border-radius: 8px;
    }
    .tp-live-tile-name {
        grid-column: 2;
        align-self: end;
    }
    .tp-live-tile-cat {
        grid-column: 2;
        align-self: start;
    }
    .tp-live-tile-tag {
        position: static;
        grid-column: 3;
        grid-row: 1 / span 2;
    }
    .tp-live-tile.is-on {
        box-shadow: 0 0 0 2px var(--tp-accent, #2e5eaa);
    }
    /* now-playing bar: name on top, buttons in one even row */
    .tp-live-now-logo {
        width: 56px;
        height: 38px;
    }
    .tp-live-now-text strong {
        font-size: 16px;
    }
    .tp-live-now-actions {
        justify-content: space-between;
    }
    .tp-live-now-actions button,
    .tp-live-now-actions a {
        width: 46px;
        height: 46px;
    }
}
/* ==== LIVE-TV-MOBILE END ==== */

/* ---------- MUSIC-HOME (Oct 5 2026): homepage "New songs" row from /music (thisaiplay-engagement.js musicHomeRow).
   A dark band like the music section, square artwork, play button on each cover. ---------- */
.tp-music-home {
    margin: 8px 22px 8px 0; /* the homepage column has 32px on the left and 10px on the right */
    padding: 18px 20px 6px;
    border-radius: 18px;
    background: radial-gradient(120% 140% at 0% 0%, rgba(245, 185, 66, .22), transparent 55%), linear-gradient(135deg, #0d1626, #18233a);
    color: #f3f6fc;
}
.tp-music-home .tp-row-head .main-title { color: #f3f6fc !important; -webkit-text-fill-color: #f3f6fc !important; background: none; display: flex; align-items: center; gap: 8px; }
.tp-music-home .tp-row-head .main-title i { color: #f5b942; }
.tp-music-home .tp-row-head a { color: #f5b942; }
.tp-music-home .tp-scroller { grid-auto-columns: clamp(132px, 14vw, 172px); scrollbar-width: none; }
.tp-music-home .tp-scroller::-webkit-scrollbar { display: none; }
.tp-music-card .tp-card-img { aspect-ratio: 1; border-radius: 10px; background: linear-gradient(135deg, #2e5eaa, #1b2b47); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.tp-music-card.is-skel .tp-card-img { animation: tp-music-pulse 1.2s ease-in-out infinite; background: rgba(255, 255, 255, .08); }
@keyframes tp-music-pulse { 50% { opacity: .5; } }
.tp-music-card .tp-card-title { color: #f3f6fc; text-overflow: ellipsis; }
.tp-music-card .tp-card-sub { color: rgba(243, 246, 252, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 12.5px; }
.tp-music-noart { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; color: rgba(255, 255, 255, .7); }
.tp-music-play { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; border-radius: 50%; background: #f5b942; color: #1b1300;
    display: grid; place-items: center; font-size: 18px; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.tp-music-card:hover .tp-music-play, .tp-music-card a:focus-visible .tp-music-play { opacity: 1; transform: none; }
@media (hover: none) { .tp-music-play { opacity: 1; transform: none; width: 34px; height: 34px; font-size: 15px; } }
.tp-music-more .tp-card-img { display: grid; place-content: center; justify-items: center; gap: 6px; background: rgba(255, 255, 255, .08); box-shadow: none; color: #f3f6fc; }
.tp-music-more .tp-card-img i { font-size: 28px; color: #f5b942; }
@media (max-width: 767.98px) {
    .tp-music-home { padding: 14px 12px 4px; border-radius: 14px; margin: 8px 16px 8px 0; }
    .tp-music-home .tp-scroller { grid-auto-columns: 128px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .tp-music-card.is-skel .tp-card-img { animation: none; } }

/* ---------- GROWTH (Oct 5 2026): festival banner at the top of the homepage (thisaiplay-engagement.js festivalHome) ---------- */
.tp-fest-home { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 12px 22px 12px 0; padding: 16px 22px;
    border-radius: 18px; color: #fff; background: radial-gradient(90% 140% at 100% 0%, rgba(255, 214, 102, .45), transparent 55%), linear-gradient(120deg, var(--f1), var(--f2) 55%, var(--f3));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .2); }
.tp-fest-home::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 230, 150, .7) 1px, transparent 1.5px); background-size: 22px 22px; opacity: .22; pointer-events: none; }
.tp-fest-emoji { position: relative; font-size: 42px; line-height: 1; filter: drop-shadow(0 0 16px rgba(255, 200, 80, .9)); }
.tp-fest-text { position: relative; display: grid; gap: 2px; min-width: 0; }
.tp-fest-ta { font-size: 14px; font-weight: 700; color: #ffe6a3; }
.tp-fest-text strong { font-family: var(--tp-display); font-size: clamp(19px, 2.4vw, 26px); color: #fff; }
.tp-fest-btns { position: relative; display: flex; gap: 8px; flex-wrap: wrap; }
.tp-fest-btns a { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .6); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.tp-fest-btns a.tp-fest-main { background: #fff; color: #5a1238; border-color: #fff; }
.tp-fest-btns a:hover { filter: brightness(1.05); }
@media (max-width: 767.98px) {
    .tp-fest-home { grid-template-columns: auto minmax(0, 1fr); margin: 10px 16px 10px 0; padding: 14px; }
    .tp-fest-btns { grid-column: 1 / -1; }
}

/* ==== HOME-ORDER START (Oct 6 2026): "View all movies" under the homepage grid (20 shown) ==== */
.tp-grid-more { display: flex; justify-content: center; margin: 28px 16px 8px 0; }
.tp-grid-more[hidden] { display: none !important; }
.tp-grid-more-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 999px;
    background: var(--tp-accent, #2e5eaa); color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none;
}
.tp-grid-more-btn:hover, .tp-grid-more-btn:focus-visible { filter: brightness(1.08); color: #fff; }
/* ==== HOME-ORDER END ==== */

/* ==== HUB-HOME START (Oct 6 2026): homepage "Explore" tiles for /devotional, /kids, /events, /dedications, /creators ==== */
.tp-explore { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto; padding: 2px 16px 8px 0; scrollbar-width: none; }
.tp-explore::-webkit-scrollbar { display: none; }
.tp-explore-tile { display: grid; gap: 4px; align-content: end; min-height: 128px; padding: 16px; border-radius: 18px; color: #fff !important; text-decoration: none; position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--t1), var(--t2)); box-shadow: 0 8px 20px rgba(20, 32, 51, .12); transition: transform .15s; }
.tp-explore-tile:hover { transform: translateY(-2px); }
.tp-explore-tile i { position: absolute; right: 12px; top: 10px; font-size: 44px; opacity: .35; }
.tp-explore-tile strong { font-size: 17px; line-height: 1.2; color: #fff; }
.tp-explore-tile span { font-size: 13.5px; opacity: .9; }
.tp-explore-dev { --t1: #f76707; --t2: #a61e4d; }
.tp-explore-kids { --t1: #1c7ed6; --t2: #12b886; }
.tp-explore-ev { --t1: #7048e8; --t2: #3b5bdb; }
.tp-explore-ded { --t1: #e64980; --t2: #862e9c; }
.tp-explore-cre { --t1: #0ca678; --t2: #1864ab; }
.tp-explore-pod { --t1: #fb923c; --t2: #9a3412; }
.tp-explore-today { --t1: #f59f00; --t2: #c2410c; }
.tp-explore-dir { --t1: #1098ad; --t2: #0b4f6c; }
.tp-explore-bd { --t1: #e64980; --t2: #a61e4d; }
.tp-explore-rem { --t1: #7950f2; --t2: #3b2c6b; }
/* COMMUNITY2 (Oct 7 2026) */
.tp-explore-astro { --t1: #9c36b5; --t2: #4a1a63; }
.tp-explore-names { --t1: #f06595; --t2: #a61e4d; }
.tp-explore-ask { --t1: #4c6ef5; --t2: #23308a; }
.tp-explore-guide { --t1: #12b886; --t2: #0b5a46; }
.tp-explore-learn { --t1: #12b886; --t2: #1971c2; }
@media (prefers-reduced-motion: reduce) { .tp-explore-tile { transition: none; } }
/* ==== HUB-HOME END ==== */

/* ==== EXTRAS START (Oct 6 2026): CC badge on subtitled movies, "other devices" link on My List / Continue Watching ==== */
.tp-meta-cc { background: rgba(255, 255, 255, .92) !important; color: #142033 !important; font-weight: 800; letter-spacing: .04em; }
.tp-sync-link { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 12px; font-size: 13.5px; font-weight: 600; color: var(--tp-accent, #2e5eaa) !important; text-decoration: none; white-space: nowrap; }
.tp-sync-link:hover { text-decoration: underline; }
@media (max-width: 575.98px) { .tp-sync-link span { display: none; } .tp-sync-link i { font-size: 20px; } }
/* ==== EXTRAS END ==== */

/* ==== AUTOPLAY START (Oct 6 2026): "Tap for sound" on movies opened with ?play=1 ==== */
.tp-unmute { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 30; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #142033; font-weight: 800; font-size: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); cursor: pointer; animation: tp-unmute-in .3s ease-out; }
.tp-unmute i { font-size: 20px; }
@keyframes tp-unmute-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { .tp-unmute { animation: none; } }
/* ==== AUTOPLAY END ==== */

/* ==== MOBILE-ACTIONS START (Oct 7 2026): movie page buttons on phones = one full-width Watch now, then a row of equal
   icon tiles (My List, Like, Dislike, Share, WhatsApp) and the rating line under them. The theme's nesting
   (Share inside .play-button-wrapper, thumbs inside .tp-vote) is flattened with display: contents. ==== */
@media (max-width: 767.98px) {
  body.route-movie-details .tp-detail > .d-flex:has(> .play-button-wrapper) {
    display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 6px !important;
    margin-top: 24px !important; align-items: stretch !important;
  }
  body.route-movie-details .tp-detail .play-button-wrapper,
  body.route-movie-details .tp-detail .tp-movie-actions,
  body.route-movie-details .tp-detail .tp-vote { display: contents !important; }
  body.route-movie-details .tp-detail > .d-flex > ul.actions-list { display: none !important; } /* theme buttons, all hidden (need a login) */

  body.route-movie-details .tp-detail #watchNowButton {
    grid-column: 1 / -1; order: 0; width: 100%; min-height: 54px; border: 0; border-radius: 16px; padding: 0 20px;
    font-size: 17px; font-weight: 800; letter-spacing: .01em; color: #fff;
    background: linear-gradient(120deg, #2e5eaa 0%, #3f7bd6 60%, #4f8fe0 100%) !important;
    box-shadow: 0 10px 24px rgba(46, 94, 170, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
  }
  body.route-movie-details .tp-detail #watchNowButton .ph-play { font-size: 20px; color: #fff; }
  body.route-movie-details .tp-detail #watchNowButton:active { transform: scale(.985); }

  /* the tiles */
  body.route-movie-details .tp-detail .share-button,
  body.route-movie-details .tp-detail .tp-list-btn,
  body.route-movie-details .tp-detail .tp-vote-btn,
  body.route-movie-details .tp-detail .tp-wa-btn { min-width: 0; }
  body.route-movie-details .tp-detail .tp-list-btn,
  body.route-movie-details .tp-detail .tp-vote-btn,
  body.route-movie-details .tp-detail .tp-wa-btn,
  body.route-movie-details .tp-detail .share-button > .btn {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 100%; height: 66px; padding: 8px 0 !important; margin: 0;
    border-radius: 14px !important; border: 1px solid rgba(15, 23, 42, .08) !important;
    background: var(--tp-surface, #fff) !important; color: var(--tp-text, #0f172a) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05); font-size: 11px !important; font-weight: 600; line-height: 1.15; letter-spacing: -.01em;
    white-space: nowrap; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s, transform .1s;
  }
  body.route-movie-details .tp-detail .share-button > .btn > span { flex-direction: column; gap: 5px !important; }
  body.route-movie-details .tp-detail :is(.tp-list-btn, .tp-vote-btn, .tp-wa-btn, .share-button > .btn) .ph,
  body.route-movie-details .tp-detail :is(.tp-list-btn, .tp-vote-btn, .tp-wa-btn, .share-button > .btn) .ph-fill { font-size: 22px; line-height: 1; }
  body.route-movie-details .tp-detail :is(.tp-list-btn, .tp-vote-btn, .tp-wa-btn, .share-button > .btn):active { transform: scale(.96); }
  body.route-movie-details .tp-detail :is(.tp-list-btn, .tp-vote-btn, .tp-wa-btn) span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  body.route-movie-details .tp-detail .tp-list-btn { order: 1; }
  body.route-movie-details .tp-detail .tp-vote-btn[data-v="1"] { order: 2; }
  body.route-movie-details .tp-detail .tp-vote-btn[data-v="-1"] { order: 3; }
  body.route-movie-details .tp-detail .share-button { order: 4; }
  body.route-movie-details .tp-detail .tp-wa-btn { order: 5; }
  body.route-movie-details .tp-detail .tp-vote-stat { order: 6; grid-column: 1 / -1; margin: 0; text-align: center; font-size: 12.5px; }

  /* labels for the thumbs (they only have icons) */
  body.route-movie-details .tp-detail .tp-vote-btn[data-v="1"]::after { content: "Like"; }
  body.route-movie-details .tp-detail .tp-vote-btn[data-v="-1"]::after { content: "Dislike"; }
  html[lang="fr"] body.route-movie-details .tp-detail .tp-vote-btn[data-v="1"]::after { content: "J\2019 aime"; }
  html[lang="fr"] body.route-movie-details .tp-detail .tp-vote-btn[data-v="-1"]::after { content: "Bof"; }
  html[lang="de"] body.route-movie-details .tp-detail .tp-vote-btn[data-v="1"]::after { content: "Mag ich"; }
  html[lang="de"] body.route-movie-details .tp-detail .tp-vote-btn[data-v="-1"]::after { content: "Nicht so"; }
  /* My List: one short label in every state (the filled pink heart shows "in my list") */
  body.route-movie-details .tp-detail .tp-list-btn > span { display: none; }
  body.route-movie-details .tp-detail .tp-list-btn::after { content: "My List"; }
  html[lang="fr"] body.route-movie-details .tp-detail .tp-list-btn::after { content: "Ma liste"; }
  html[lang="de"] body.route-movie-details .tp-detail .tp-list-btn::after { content: "Merken"; }

  /* state colours */
  body.route-movie-details .tp-detail .tp-list-btn.is-on { color: #c2185b !important; background: #fdecf3 !important; border-color: rgba(194, 24, 91, .25) !important; }
  body.route-movie-details .tp-detail .tp-vote-btn.is-on { color: #fff !important; background: var(--tp-accent, #2e5eaa) !important; border-color: var(--tp-accent, #2e5eaa) !important; }
  body.route-movie-details .tp-detail .tp-wa-btn .ph { color: #25d366; }

  /* Share menu (when the phone has no share sheet): a panel above the bottom bar instead of running off the right edge */
  body.route-movie-details .tp-detail .share-button .share-box.show {
    position: fixed !important; inset: auto 16px calc(96px + env(safe-area-inset-bottom, 0px)) 16px !important; transform: none !important;
    padding: 14px 8px; border-radius: 16px; border: 1px solid rgba(15, 23, 42, .08); background: var(--tp-surface, #fff) !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .22); z-index: 1060;
  }
  body.route-movie-details .tp-detail .share-button .share-box .share-shape { display: none; }
}
/* ==== MOBILE-ACTIONS END ==== */

/* ==== ONE-CONTINUE-ROW (Oct 7 2026): the theme's server "Continue Watching" (signed-in only) is hidden; our row (tp-row-continue)
   works for everyone and follows "Sync my devices". ==== */
#continue-watch-section { display: none !important; }

/* ==== AUDIO-SWITCH (Oct 7 2026): "Audio" language button in the movie player (plyr-player.js TAMILFLICKS-AUDIO) ==== */
.tp-audio { position: relative; }
.tp-audio-btn { display: inline-flex !important; align-items: center; gap: 4px; }
.tp-audio-btn b { font-size: 11px; font-weight: 800; letter-spacing: .04em; line-height: 1; padding: 2px 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.tp-audio-menu { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 20; min-width: 170px; max-height: 60vh; overflow-y: auto; padding: 6px;
  border-radius: 12px; background: rgba(20, 24, 36, .96); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tp-audio-menu[hidden] { display: none; }
.tp-audio-title { margin: 2px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.tp-audio-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent;
  color: #fff; font: 600 14px/1.2 inherit; text-align: left; cursor: pointer; }
.tp-audio-menu button::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); box-sizing: border-box; }
.tp-audio-menu button[aria-checked="true"]::before { border-color: #4f8fe0; background: radial-gradient(circle, #4f8fe0 0 4px, transparent 5px); }
.tp-audio-menu button:hover, .tp-audio-menu button:focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
@media (max-width: 575.98px) { .tp-audio-btn b { display: none; } }
/* ==== AUDIO-SWITCH END ==== */

/* TP-MOBILE-SEEK (Oct 10 2026): on phones the 12 player buttons squeezed the progress bar to 3–13 px, so you could not
   fast-forward (every touch landed at the start). The bar now gets its own full-width row above the buttons; the volume
   slider (phones use their side buttons) and picture-in-picture are hidden to make room. Desktop is unchanged. */
@media (max-width: 767px) {
  #plyrMount .plyr__controls { flex-wrap: wrap !important; row-gap: 2px; padding-top: 8px !important; }
  #plyrMount .plyr__controls .plyr__progress__container { order: -1; flex: 1 0 100% !important; width: 100%; margin: 0 0 2px !important; padding: 0 6px !important; }
  #plyrMount .plyr__controls .plyr__volume, #plyrMount .plyr__controls [data-plyr="pip"] { display: none !important; }
  #plyrMount .plyr__controls .plyr__time--current { margin-right: auto; }
}