/*
Theme Name: X Play Tube
Theme URI: https://vidxtube.com
Author: VidxTube
Author URI: https://vidxtube.com
Description: Toonatic is a premium adult WordPress theme designed specifically for toon porn and animated adult content. Created by VidxTube, this theme offers a sleek and engaging design tailored to enhance the user experience for adult websites. With a focus on video sharing and easy navigation, Toonatic provides all the necessary features to showcase your animated adult content effectively. Whether you're running a toon porn blog, a video sharing site, or an adult gallery, Toonatic has you covered with its stylish and functional design. Perfect for adult content creators and enthusiasts, this theme ensures your site stands out with a unique and captivating presentation.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: x-play-tube
Tags: adult, toon, porn, animated, adult video, toon porn, adult theme, wordpress theme, video sharing, adult content, toon adult, animated porn, adult gallery, toon video, adult blog, toon theme, adult website, toon content, animated adult, toon videos
*/

/* Video card container */
.video-card {
    position: relative;
    overflow: hidden; /* Ensures video is clipped properly */
}

/* Video trailer hover effect */
.video-trailer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Hide trailer by default */
    transition: opacity 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5); /* Black overlay */
    z-index: 10;
}

/* Show trailer on hover */
.video-card:hover .video-trailer {
    opacity: 1; /* Show the trailer when hovered */
}

/* Video styling */
.video-trailer video {
    width: 90%;
    height: auto;
    border-radius: 8px;
}

/* Aspect Ratio 16:9 container */
.aspect-16-9 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 9 / 16 = 0.5625 = 56.25% */
  overflow: hidden;
}

/* Make content fill the container */
.aspect-16-9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* works for img/video */
}

.page-numbers {
  display: inline-block;
  width: 2.5rem;            /* w-10 */
  height: 2.5rem;           /* h-10 */
  line-height: 2.5rem;      /* leading-10 */
  text-align: center;
  border: 1px solid #4B5563; /* border-gray-600 */
  border-radius: 0.375rem;  /* rounded */
  background-color: #1F2937; /* bg-gray-800 */
  color: #ffffff;           /* text-white */
  margin: 0 0.25rem;        /* mx-1 */
  transition: background-color 0.3s ease;
}

.page-numbers:hover {
  background-color: #7C3AED; /* hover:bg-purple-700 */
}

.page-numbers.current {
  background-color: #7C3AED; /* bg-purple-700 */
  font-weight: 700;          /* font-bold */
}

.responsive-ad {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.responsive-ad img,
.responsive-ad html,
.responsive-ad iframe{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    text-align: center;
}

/* Desktop dropdown styles */
.menu-item-has-children {
    position: relative;
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(31, 41, 55, 0.95); /* Semi-transparent dark */
    backdrop-filter: blur(10px); /* Blur effect */
    /* or */
    background: rgba(124, 58, 237, 0.9); /* Semi-transparent purple */
    backdrop-filter: blur(8px);
    min-width: 200px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
}

.sub-menu li {
    display: block;
    width: 100%;
}

.sub-menu a {
    padding: 10px 15px;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

<!-- Enhanced CSS for Global Tab Content -->

.tab-content {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading state for tab switching */
.tab-content.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Enhanced grid responsiveness */
.tab-content .grid {
    gap: 1.5rem;
}

@media (max-width: 640px) {
    .tab-content .grid {
        gap: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .tab-content h3 {
        font-size: 1.5rem;
    }
    
    .tab-content .flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* Improved "View All" button styling */
.tab-content a[href*="videos"] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tab-content a[href*="videos"]:hover {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}