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

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

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

.header-logo,
.footer-logo {
    max-height: 83px;
    max-width: 250px;
}

.site-title {
    @apply whitespace-nowrap text-white text-2xl text-center;
}

.search-field {
    @apply bg-white text-black p-2 rounded-s;
}

.search-submit {
    @apply text-white py-2 px-4 rounded-e;
    background-color: var(--primary-color);
    background-image: linear-gradient(to top, var(--primary-color), var(--secondary-color));
}

.main-navigation {
    background-color: var(--primary-color);
    background-image: linear-gradient(to top, var(--primary-color), var(--secondary-color));
    @apply text-white text-center;
}

.main-navigation ul {
    @apply flex justify-center;
}

.main-navigation ul li {
    @apply px-4 py-5;
}

.main-navigation ul li a {
    @apply text-white text-lg font-light;
}

.main-navigation ul li a:hover {
    @apply text-black;
}

.head-page h1,
.head-page h2 {
    @apply text-3xl text-center mb-2;
    color: var(--primary-color);
}

.head-page p {
    @apply mb-3 text-center text-white/70 font-light;
}

.footer {
    background-color: #1f1f1f;
    @apply py-7 text-white/70;
}
.footer-desc h3 {
    @apply text-2xl;
    color: var(--primary-color);
}
.footer-text h3,
.footer-text h4 {
    @apply text-xl mt-3;
    color: var(--primary-color);
}

.footer-menu ul {
    @apply flex justify-center;
}

.footer-menu ul li a {
    @apply text-white text-lg font-light;
}

.footer-menu ul li a:hover {
    color: var(--primary-color);
}
.credit {
    @apply text-center font-light text-white/70 py-2;
    background-image: linear-gradient(to top, var(--primary-color), var(--secondary-color));
}

.items-title {
    background: rgb(241, 135, 251);
    background: linear-gradient(0deg, rgba(241, 135, 251, 1) 0%, rgba(67, 156, 251, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgb(0 0 0 / 9%);
    -webkit-box-decoration-break: clone;
    text-decoration: underline;
    text-decoration-color: #cd66ff;
    text-decoration-thickness: 3px;
    font-size: 1.5em;
    @apply font-light;
}

.card {
    @apply rounded-lg shadow-lg overflow-hidden;
}

.card-header {
    @apply text-white text-center py-2 font-light text-lg;
    background-image: linear-gradient(to top, var(--primary-color), var(--secondary-color));
}

.card-body {
    @apply p-4;
    background-color: #464646;
}

.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);
}

.q-SD1 {
    background-color: #a6ea13;
    color: #000;
}
.q-SD2 {
    background-color: #a6ea13;
    color: #000;
}
.q-SD3 {
    background-color: #a6ea13;
    color: #000;
}
.q-SD {
    background-color: #e9610c;
    color: #fff;
}
.q-HD {
    background-color: #f54c1d;
    color: #fff;
}
.q-FULLHD {
    background-color: #f51d1d;
    color: #fff;
}
.tag-text {
    border: 1px solid #525252;
    padding: 2px 5px;
}
.tag-text:hover {
    border-color: var(--primary-color);
    color: var(--primary-color)
}
.the-content a {
    color: var(--primary-color);
}
.the-content a:hover {
    color: var(--secondary-color);
}

.player-server-btn {
    background: linear-gradient(to top, var(--player-primary-color), var(--player-secondary-color));
    @apply text-white py-2 px-4 rounded text-left font-light transition-all;
}
.player-server-btn:hover {
    background: linear-gradient(to top, var(--secondary-color), var(--primary-color));
}
.player-server-btn.active {
    background: #464646;
    @apply pointer-events-none;
}
.player-select {
    width: 100%;
    margin: 0;
    padding: 6px 8px 6px 10px;
    height: 33px;
    line-height: 14px;
    font-size: 18px;
    color: #ffffff;
    border-radius: 0;
    background: var(--player-primary-color);
    height: 42px;
    border-radius: 5px 5px 5px 5px;
    border: 0 !important;
    box-shadow: none;
    background-image: linear-gradient(to top, var(--player-primary-color), var(--player-secondary-color));
}
.player-server-next {
    background: linear-gradient(to top, var(--player-primary-color), var(--player-secondary-color));
    @apply text-white py-2.5 px-4 rounded w-full transition-all;
}