/*
Theme Name: NLIXFET
Theme URI: 
Author: Anonymouse
Author URI: 
Description: Wordpress theme for movie website with custom post type and custom taxonomy and seo friendly.
Version: 1.2.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: nlixfet
Tags: featured-images, translation-ready
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    .font-outline-2 {
      -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4);
    }
    .font-outline-4 {
      -webkit-text-stroke: 4px rgba(255, 255, 255, 0.4);
    }
  }

body {
    background-color: #141414;
    color: #fff;
    font-family: "Kanit", sans-serif;
}

.app-navbar {
    @apply fixed top-0 left-0 w-full h-16 p-5 lg:px-20 flex justify-between items-center;
    background: transparent;
    color: #fff;
    z-index: 9999;
    transition: background-color 0.5s;
}

.app-navbar.nav-shadow {
    background: linear-gradient(to bottom, #141414, transparent);
}

.app-navbar.active {
    background-color: #141414;
}

.app-navbar .app-logo {
    @apply w-28 relative;
    z-index: 1000;
}

.app-navbar .app-logo .logo-image {
    @apply w-full h-auto;
}

.app-navbar .app-navbar-left {
    @apply flex gap-4 lg:gap-10 items-center;
    z-index: 1000;
}

.app-navbar .app-navbar-left .nav-toggle {
    @apply lg:hidden relative;
    z-index: 1000;
}

.app-navbar .app-navbar-left .nav .nav-list {
    @apply hidden lg:relative lg:flex flex-col lg:flex-row gap-6 lg:items-center lg:justify-center pt-20 lg:pt-0 top-0 left-0 lg:top-auto lg:left-auto lg:gap-10 w-full lg:w-auto bg-black bg-opacity-90 p-8 lg:p-0 lg:bg-transparent;
    z-index: 1000;
}
.app-navbar .app-navbar-left .nav .nav-list.active {
    @apply absolute flex;
    z-index: 999;
}

.app-navbar .app-navbar-left .nav .nav-list .nav-item .nav-link,
.app-navbar .app-navbar-left .nav .nav-list .menu-item a {
    @apply text-base font-light;
}

.app-navbar .app-navbar-left .nav .nav-list .nav-item .nav-link:hover,
.app-navbar .app-navbar-left .nav .nav-list .menu-item a:hover {
    opacity: 0.8;
}
.app-navbar .app-navbar-left .nav .nav-list .nav-item .nav-link.active,
.app-navbar .app-navbar-left .nav .nav-list .menu-item.current-menu-item a {
    @apply text-white font-normal;
}

.app-navbar .app-navbar-right .search-box {
    @apply flex items-center gap-3;
}

.app-navbar .app-navbar-right .search-box.active {
    @apply bg-black bg-opacity-80 p-4 lg:p-2 lg:border border-white/70 absolute lg:relative top-0 left-0 lg:top-auto lg:left-auto w-full h-16 lg:w-auto lg:h-auto;
    z-index: 1002;
}

.app-navbar .app-navbar-right .search-box input {
    @apply hidden;
}

.app-navbar .app-navbar-right .search-box.active input {
    @apply block w-full lg:w-60 bg-transparent text-white outline-none focus:outline-none;
}

.app-navbar .app-navbar-right .search-btn {
    @apply relative;
    z-index: 1000;
}

.no-hero {
    @apply h-44 lg:h-56;
}

.header-content {
    background: linear-gradient(to bottom, #141414, transparent);
    @apply w-full px-5 lg:px-20 absolute pt-16 left-0;
    color: #fff;
    z-index: 1001;
}

.header-content h1 {
    @apply text-2xl lg:text-6xl font-bold line-clamp-1 text-center;
}

.header-content p {
    @apply text-lg lg:text-2xl mt-2 lg:mt-4 line-clamp-2 text-center;
}

.hero-wrapper {
    @apply w-full h-[66.66vh] lg:h-full;
}

.hero-wrapper .hero-item {
    position: relative;
    @apply w-full h-full;
}

.hero-wrapper .hero-item .hero-image {
    @apply w-full h-full object-cover lg:object-right;
}

.hero-wrapper .hero-item .hero-backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to top, #141414, transparent);
    z-index: 1;
}

.hero-wrapper .hero-item .hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    color: #fff;
    @apply flex flex-col justify-end items-start p-5 lg:p-20 lg:w-1/2 h-full lg:mb-36;
}

.hero-wrapper .hero-item .hero-content .hero-title {
    @apply text-xl lg:text-5xl font-bold;
}

.hero-wrapper .hero-item .hero-content .hero-overview {
    @apply text-sm lg:text-2xl mt-1 lg:mt-4 line-clamp-3;
}

.hero-wrapper .hero-item .hero-content .hero-button {
    @apply mt-4 lg:mt-8 flex justify-start items-center gap-4;
}

.button {
    @apply px-4 lg:px-8 py-2 lg:py-4 text-white rounded-md lg:text-2xl font-semibold flex gap-2 items-center;
}
.c-button {
    @apply w-12 h-12 rounded-full flex justify-center items-center text-white text-xl;
}

.button.button-white {
    background-color: #fff;
    color: #000;
    border: 2px solid #fff;
}
.c-button.button-white {
    background-color: #fff;
    color: #000;
}
.button.button-white:hover {
    background-color: rgba(255, 255, 255, 0.8);
}
.c-button.button-white:hover {
    background-color: rgba(255, 255, 255, 0.8);
}
.button.button-gray {
    background-color: rgba(109, 109, 110, 0.7);
    color: #fff;
}
.c-button.button-gray {
    background-color: rgba(109, 109, 110, 0.7);
    color: #fff;
    border: 2px solid #fff;
}
.button.button-gray:hover {
    background-color: rgba(109, 109, 110, 0.5);
}
.c-button.button-gray:hover {
    background-color: rgba(109, 109, 110, 0.5);
}

.icon-button {
    @apply text-xl lg:text-2xl flex items-center gap-2;
}

.search-overlay {
    @apply fixed top-0 left-0 w-full h-screen hidden;
    z-index: 1001;
}

.search-overlay.active {
    @apply block;
}

.slick-slider {
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list,
.slick-slider {
    position: relative;
    display: block;
}
.slick-list {
    overflow: visible !important;
    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-list,
.slick-slider .slick-track {
    transform: translateZ(0);
}
.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:after,
.slick-track:before {
    content: "";
    display: table;
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
}
[dir="rtl"] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.slick-list,
.items-title {
    @apply px-5 lg:px-20;
}

.items-title {
    @apply text-2xl lg:text-4xl font-normal;
}

.--movie-items {
    display: block;
    padding-left: 0;
    padding-right: 0;
}

.--movie-items .slick-arrow {
    position: absolute;
    top: 50%;
    height: 100%;
    width: 55px;
    transform: translateY(-50%);
    transition: all .2s ease-in-out;
    z-index: 5;
    font-size: 24px;
    opacity: 0;
}
.--movie-items:hover .slick-arrow {
    opacity: 1;
}
.--movie-items .slick-arrow.slick-prev {
    left: 0;
    background-image: linear-gradient(to right, #0f1013, transparent);
}
.--movie-items .slick-arrow.slick-next {
    right: 0;
    background-image: linear-gradient(to left, #0f1013, transparent);
}
.--movie-items .slick-arrow.slick-disabled {
    opacity: 0;
    pointer-events: none;
}

.movies-slickable .--movie-item,
.tranding-slickable .--movie-item {
    padding: 0 14px 0 0;
}
@media (max-width: 767.98px) {
    .movies-slickable .--movie-item,
    .tranding-slickable .--movie-item {
        padding: 0 6px 0 0;
    }
}
@media screen and (min-width: 2000px) {
    .movies-slickable .--movie-item,
    .tranding-slickable .--movie-item {
        padding: 0 14px 0 0;
    }
}
@media screen and (min-width: 3000px) {
    .movies-slickable .--movie-item,
    .tranding-slickable .--movie-item {
        padding: 0 20px 0 0;
    }
}

.--movie-item {
    position: relative;
    transition: all .2s ease-in-out;
    margin-bottom: .5rem;
}
.--movie-item .--poster {
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    @apply h-[185px] lg:h-[250px];
}
.--movie-item .--poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
}
.--movie-item .--poster .loading {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 0.1rem;
    opacity: 0;
    transition: all .2s ease-in-out;
}
.--movie-item .--poster .loading.--show {
    opacity: 1;
}
.--movie-item .--hoverable {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1c1c1c;
    width: 100%;
    height: 100%;
    z-index: 5;
    border-radius: 0.3rem;
    box-shadow: 0 0 1rem 0.25rem #1c1c1c;
    transition: all .2s ease-in-out;
    transition-delay: 0.3s;
    opacity: 0;
    overflow: hidden;
}

.--movie-item.--hover .--hoverable {
    opacity: 1;
    width: 175%;
    height: 125%;
}

.--movie-item .--hoverable .--h-cover {
    width: 100%;
    height: 50%;
    position: relative;
}
.--movie-item .--hoverable .--h-cover::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background-image: linear-gradient(to top, #1c1c1c, transparent);
    z-index: 2;
}
.--movie-item .--hoverable .--h-title {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    width: 90%;
    z-index: 3;
    overflow: hidden;
}
.--movie-item .--hoverable .--h-cover > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.--movie-item .--hoverable .--h-content {
    padding: 0 1rem;
    opacity: 0;
    transition: all .2s ease-in-out;
    transition-delay: 0.3s;
}
.--movie-item.--hover .--hoverable .--h-content {
    opacity: 1;
}
.--movie-item .--hoverable .--h-content .movie-enter-link {
    display: block;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    color: #000;
    padding: 0.75rem 0;
    text-align: center;
    border-radius: 0.25rem;
    backdrop-filter: blur(10px);
    transition: all .2s ease-in-out;
}
.--movie-item .--hoverable .--h-content .movie-enter-link i {
    margin-right: 0.5rem;
}
.--movie-item .--hoverable .--h-content h6 {
    margin: 0.5rem 0;
}
.--movie-item .--hoverable .--h-content .movie-meta-info {
    margin: 0.5rem 0;
}
.--movie-item .--hoverable .--h-content .movie-meta-info .meta-text {
    font-size: 14px;
    font-weight: 500;
}
.--movie-item .--hoverable .--h-content .movie-meta-info .meta-dot {
    margin: 0 0.25rem;
    opacity: 0.5;
}
.--movie-item .--hoverable .--h-content .movie-meta-info .meta-rated {
    font-size: 14px;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.05rem 0.5rem;
    border-radius: 0.25rem;
    text-justify: justify;
}
.--movie-item .--hoverable .--h-content .movie-excerpt p {
    text-align: left;
    font-size: 14px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #707a94;
}

.--movie-item.slick-slide {
    opacity: 0.35;
    pointer-events: none;
}
.--movie-item.slick-active {
    opacity: 1;
    pointer-events: auto;
}

.hero-wrapper + .page-row > .item-wrapper:first-child {
    position: relative;
    z-index: 1000;
    @apply lg:-mt-40;
}

.item-wrapper {
    width: 100%;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}

.item-wrapper.single {
    @apply px-5 lg:px-20;
}

.footer-link,
.footer-menu a {
    color: #808080;
}
.footer-link:hover,
.footer-menu a:hover {
    text-decoration: underline;
}

.footer-content h3,
.footer-content h4,
.footer-content h5,
.footer-content h6 {
    @apply text-2xl font-normal text-white;
    margin-top: 1rem;
}

.footer-content p {
    @apply text-lg font-light text-white/80;
}

.footer-content a {
    @apply text-red-500;
}

.footer-menu {
    @apply grid grid-cols-2 lg:grid-cols-4 gap-3;
}
.hystmodal {
    z-index: 9999;
}
.hystmodal__shadow {
    z-index: 9998;
}
.hystmodal__close {
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M22 2L2 22'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M2 2l20 20'/%3E%3C/svg%3E");
}
.hystmodal__window {
    padding: 0px;
    background: #181818;
    color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    @apply h-screen lg:h-auto rounded-none lg:rounded-md;
}

.preview-wrapper {
    @apply w-full h-full;
}
.preview-wrapper .cover {
    @apply w-full h-96 relative;
}
.preview-wrapper .cover .overlay {
    @apply w-full h-full absolute top-0 left-0;
    background: linear-gradient(to top, #181818, transparent);
}
.preview-wrapper .cover .play-container {
    @apply absolute bottom-4 left-4;
    z-index: 10000;
}
.preview-wrapper .content {
    @apply p-2 lg:p-4;
}
.preview-wrapper .content .meta-info {
    @apply flex items-center gap-2;
}
.preview-wrapper .content .meta-info .meta-text {
    opacity: 0.7;
}
.preview-wrapper .content .meta-info .meta-text.quality {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0 0.5rem;
    font-size: 14px;
    border-radius: 0.25rem;
    opacity: 1;
}
.preview-wrapper .content .tags {
    @apply text-sm font-light;
}
.preview-wrapper .content .tags .tag-key {
    opacity: 0.7;
}

.no-hero-content {
    @apply pt-24 px-5 lg:px-20;
}

.no-hero-content .header h1 {
    @apply text-2xl lg:text-4xl font-normal text-center;
}
.no-hero-content .header p {
    @apply text-base lg:text-xl font-light text-center mt-1 lg:mt-2;
}

.pagination {
    @apply flex justify-center gap-2;
}

.pagination .page-numbers {
    @apply px-3 py-2;
    background-color: #464646;
    color: #fff;
    border-radius: 5px;
}

.pagination .page-numbers:hover {
    background-color: var(--primary-color);
}

.pagination .page-numbers.current {
    background-color: var(--primary-color);
}

.item-wrapper.single .meta-info {
    @apply flex items-center gap-2;
}
.item-wrapper.single .meta-info .meta-text {
    opacity: 0.7;
    font-size: 18px;
}
.item-wrapper.single .meta-info .meta-text.quality {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0 0.5rem;
    font-size: 18px;
    border-radius: 0.25rem;
    opacity: 1;
}
.item-wrapper.single .score {
    @apply grid grid-cols-2 items-center border border-yellow-500 rounded p-0 overflow-hidden;
}
.item-wrapper.single .score.jav {
    @apply border-pink-500;
}
.item-wrapper.single .score.tmdb {
    @apply border-blue-500;
}
.item-wrapper.single .score .label {
    @apply bg-yellow-500 text-black text-center px-2;
}
.item-wrapper.single .score.jav .label {
    @apply bg-pink-500;
}
.item-wrapper.single .score.tmdb .label {
    @apply bg-blue-500;
}
.item-wrapper.single .score .score-text {
    @apply bg-black text-white text-center px-2;
}
.item-wrapper.single .tags {
    @apply text-base font-light;
}
.item-wrapper.single .tags .tag-key {
    opacity: 0.7;
}

.post-content p {
    @apply text-lg font-light;
}

.post-content a {
    color: var(--primary-color);
}

.player-wrapper {
    @apply fixed top-0 left-0 w-full h-[100%] transition-all;
    z-index: 19999;
    background-color: #232323;
    transform-origin: center bottom;
    transform: scaleY(0) scaleX(0);
    opacity: 0;
    display: none;
}

.player-wrapper.active {
    transform: scaleY(1) scaleX(1);
    opacity: 1;
    display: block;
}

.player-wrapper .player-header {
    @apply flex justify-start items-center h-16;
    background-color: #131313;
}
.player-wrapper .player-header .title {
    @apply text-base lg:text-2xl font-normal text-white px-3 w-full;
}
.player-wrapper .player-header .close {
    @apply w-16 border-l h-full border-white/20 flex justify-center items-center cursor-pointer;
}
.player-wrapper .player-header .close .close-btn {
    @apply text-white text-2xl;
}
.player-wrapper .player-iframe {
    @apply w-full h-[calc(100%_-_12rem)] lg:h-[calc(100%_-_8rem)] flex items-center relative;
    background-color: #000;
}
.player-wrapper .player-iframe iframe {
    width: 100%;
    @apply h-1/2 lg:h-full;
}
.player-wrapper .player-footer {
    @apply relative;
    z-index: 19998;
    background-color: #131313;
}

.footer-block {
    @apply h-16 flex justify-center items-center border-white/20 border-r;
}
.footer-block:last-child {
    @apply border-r-0;
}

.overmenu-list {
    @apply fixed bottom-32 lg:bottom-16 left-0 w-full h-auto transition-all max-h-[25vh] lg:max-h-[50vh];
    background-color: #131313;
    transform-origin: center bottom;
    transform: scaleY(0);
    opacity: 0;
    overflow-y: auto;
    z-index: 19998;
}

.overmenu-list.active {
    transform: scaleY(1);
    opacity: 1;
}

.overmenu-list .overmenu-item {
    @apply flex justify-start text-xl items-center h-16 px-5 w-full border-b border-white/20;
    color: #fff;
}

.overmenu-list .overmenu-item:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.overmenu-list .overmenu-item.active {
    pointer-events: none;
    background-color: #222;
    color: #fff;
}

.single-review .post-content img {
    @apply w-full h-auto max-w-3xl my-4 text-center mx-auto;
}

.post-content a {
    color: var(--primary-color);
}

.post-content a:hover {
    text-decoration: underline;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    @apply text-2xl lg:text-4xl font-normal;
}

.post-content ul {
    @apply list-disc list-inside;
}

.post-content ol {
    @apply list-decimal list-inside;
}

.post-content blockquote {
    @apply border-l-4 border-white/20 p-4 my-4;
}

.post-content blockquote p {
    @apply text-lg font-light;
}

.post-content pre {
    @apply bg-black p-4 my-4;
}

.post-content pre code {
    @apply text-sm;
}

.post-content table {
    @apply w-full my-4;
}

.post-content table th,
.post-content table td {
    @apply border border-white/20 p-2;
}

.post-content table th {
    @apply bg-black text-white;
}

.post-content table tr:nth-child(even) {
    @apply bg-black;
}

.post-content table tr:nth-child(odd) {
    @apply bg-black/80;
}

.post-content table tr:hover {
    @apply bg-black/60;
}

.post-content table th:first-child,
.post-content table td:first-child {
    @apply border-l-0;
}

.post-content table th:last-child,
.post-content table td:last-child {
    @apply border-r-0;
}

.post-content table th {
    @apply text-lg font-light;
}

.post-content table td {
    @apply text-base font-light;
}

.post-content .wp-block-image {
    @apply my-4;
}

.post-content .wp-block-image img {
    @apply w-full h-auto;
}

.post-content .wp-block-image figcaption {
    @apply text-center text-lg font-light;
}

.post-content .wp-block-gallery {
    @apply my-4;
}

.post-content .wp-block-gallery .blocks-gallery-grid {
    @apply grid grid-cols-2 gap-4;
}

.post-content .wp-block-gallery .blocks-gallery-grid img {
    @apply w-full h-auto;
}

.post-content .wp-block-gallery .blocks-gallery-grid figure {
    @apply relative;
}

.post-content .wp-block-gallery .blocks-gallery-grid figcaption {
    @apply absolute bottom-0 left-0 w-full bg-black bg-opacity-50 text-white text-lg font-light p-2;
}

.post-content .wp-block-gallery .blocks-gallery-grid figcaption span {
    @apply text-white;
}

.post-content .wp-block-gallery .blocks-gallery-grid figcaption span:before {
    @apply text-white;
}

.single-review .post-content p,
.single-post .post-content p {
    margin: 1rem 0;
}

/* first p and first character */
.single-review .post-content p:first-child:first-letter,
.single-post .post-content p:first-child:first-letter {
    font-size: 3rem;
    font-weight: 700;
    float: left;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
}

.review-item {
    background-color: #232323;
    border-radius: 0.25rem;
    overflow: hidden;
}