/*
Theme Name: Vidz X Tube
Theme URI: https://xplaytube.com
Author: XplayTube
Author URI: https://xplaytube.com
Description: Publish embedded and self-hosted clips using the original Video x Tube Theme. The fully responsive and adaptive Video x tube Theme is the perfect choice for your WordPress based video site. The theme offers an intelligent way to display a large number of videos that will immediately attract your visitors’ attention right on the front page. The optional featureds lets you highlight your best content, while the carefully placed widgetized areas are perfect for displaying revenue generating advertising. Using the right plugin, thumbnails from embedded videos.
Version: 1.0.5
License: GNU General Public License v2 or later,  MIT License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, flexible-header, custom-colors, custom-menu, featured-images, footer-widgets, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, blog
Text Domain: vidz-x-tube
*/

:root {
    --accent-color: #ff9900;
    --accent-hover: #999090;
    --text-color: #cccccc;
}

/* Base theme */
body {
    background-color: #121212;
    color: #fff;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-hover);
    
}

/* Grid container for videos */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Each video item/card */
.video-item {
    background: #1e1e1e;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.video-item:hover {
    box-shadow: 0 6px 12px rgba(255, 153, 0, 0.7);
}

/* Video thumbnail */
.video-item img,png,jpeg,
.video-item video {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 6px;
}

/* Title */
.video-item h2 {
    font-size: 18px;
    margin: 12px 0 0;
    color: var(--accent-color);
    line-height: 1.2;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Video player on single pages */
.video-player,
.single-post video,mp4,
.single-post iframe {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8);
}

/* Sidebar */
aside {
    background-color: none;
    margin-top: 20%;
    padding: 16px;
    color: #ccc;
}

/* Base pagination styles */
.pagination-container .page-numbers {
    display: inline-block;
    margin-right: 4px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    background-color: #f3f4f6; /* Tailwind's bg-gray-100 */
    border-radius: 0.375rem; /* Tailwind's rounded-lg */
    color: #4b5563; /* Tailwind's text-gray-700 */
    text-decoration: none;
}

/* Hover effect for page numbers */
.pagination-container .page-numbers:hover {
    background-color: #1f2937; /* Tailwind's bg-gray-800 */
    color: #ffffff; /* White text */
}

.pagination-container .prev:hover, .pagination-container .next:hover {
    background-color: #1f2937; /* Tailwind's bg-gray-800 */
    color: #ffffff; /* White text */
}

/* Optional: style the entire pagination as a flexbox container */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

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

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

.content a,
.content strong,
.content em,
.content h1,
.content h2,
.content h3,
.content p {
  color: var(--accent-color);
}

/* Menu links base color */
nav a {
  color: var(--accent-color);
  transition: color 0.3s ease;
}

/* Hover/focus state */
nav a:hover,
nav a:focus {
  color: #999090; /* e.g. a brighter or customize */
}

/*cookie consent*/

/* Style the checkbox and label */
.comment-form-cookies-consent label {
    font-size: 1rem;
    color: var(--accent-color); /* Apply accent color to the label */
    font-weight: 500;
}

/* Style the checkbox itself */
.comment-form-cookies-consent input[type="checkbox"] {
    accent-color: var(--accent-color); /* Modern way to set checkbox color */
}

/* Hover state for the checkbox label */
.comment-form-cookies-consent label:hover {
    color: var(--accent-hover); /* Accent hover color for the label */
}

/* Add a little spacing between the label and the checkbox */
.comment-form-cookies-consent {
    margin-bottom: 1rem;
}

/* ==============================================
   DROPDOWN MENU STYLES FOR WORDPRESS NAVIGATION
   ============================================== */

/* Parent menu item positioning */
.menu-item-has-children {
    position: relative;
}

/* Dropdown arrow indicator (optional) */
.menu-item-has-children > a::after {
    content: ' ▼';
    font-size: 0.7em;
    margin-left: 4px;
    transition: transform 0.3s ease;
}

.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* Sub-menu (dropdown) styling */
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(135deg, #374151, #1f2937); /* Gray gradient */
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid #4b5563;
    overflow: hidden;
}

/* Show dropdown on hover */
.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Sub-menu list items */
.sub-menu li {
    display: block;
    width: 100%;
}

/* Sub-menu links */
.sub-menu a {
    display: block;
    padding: 12px 16px;
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid rgba(75, 85, 99, 0.3);
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

/* Remove border from last item */
.sub-menu li:last-child a {
    border-bottom: none;
}

/* Sub-menu link hover effect */
.sub-menu a:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #ffffff;
    padding-left: 20px;
}

/* Third-level menus (sub-sub-menus) */
.sub-menu .menu-item-has-children > .sub-menu {
    top: 0;
    left: 100%;
    margin-left: -1px;
}

/* ==============================================
   MOBILE RESPONSIVE STYLES
   ============================================== */

@media (max-width: 767px) {
    /* Reset positioning for mobile */
    .menu-item-has-children {
        position: static;
    }
    
    /* Stack sub-menus vertically on mobile */
    .sub-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: #4b5563 !important;
        margin-left: 16px;
        margin-top: 4px;
        margin-bottom: 4px;
        min-width: auto;
        width: auto;
        display: none; /* Hidden by default on mobile */
        transition: none;
    }
    
    /* Show sub-menu when parent is clicked */
    .menu-item-has-children.active .sub-menu {
        display: block !important;
    }
    
    /* Reset hover effects on mobile */
    .menu-item-has-children:hover .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    
    /* Remove dropdown arrow transform on mobile */
    .menu-item-has-children > a::after {
        transform: none !important;
    }
    
    .menu-item-has-children.active > a::after {
        transform: rotate(180deg) !important;
    }
    
    /* Sub-menu styling for mobile */
    .sub-menu li {
        width: 100%;
        display: block;
    }
    
    /* Sub-menu links on mobile */
    .sub-menu a {
        padding: 10px 16px !important;
        border-bottom: 1px solid rgba(75, 85, 99, 0.5);
        display: block;
        color: #d1d5db;
    }
    
    .sub-menu a:hover {
        padding-left: 20px !important;
        background: rgba(107, 114, 128, 0.3);
    }
    
    /* Last item border */
    .sub-menu li:last-child a {
        border-bottom: none;
    }
}

/* Crop MP4/direct-video content to fill the fixed 16:9 box instead of
   letterboxing when the source file's real aspect ratio isn't 16:9 —
   matches how iframe embeds are force-fit elsewhere in the theme. */
.video-js .vjs-tech {
    object-fit: cover;
}

/* YouTube-style red play button */
.video-js .vjs-big-play-button {
    width: 72px !important;
    height: 50px !important;
    line-height: 50px !important;

    background: #ff0000 !important;
    border: none !important;
    border-radius: 12px !important;

    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
}

/* White play triangle */
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    color: #fff !important;
}

/* Show big play button when paused */
.video-js.vjs-paused .vjs-big-play-button {
    display: block !important;
    opacity: 1 !important;
}

/* Hide only when playing */
.video-js.vjs-playing .vjs-big-play-button {
    display: none !important;
}

/*--------------------------------------------------------------
# Age Verification Refined
--------------------------------------------------------------*/
#age-verification-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95); /* Slightly darker for better focus */
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px); /* Adds a professional blur to background content */
}

#age-verification-modal {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 16px; /* Slightly rounder for a modern look */
    padding: 40px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    color: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* Adds depth */
}

/* Button Group Adjustment */
.age-gate-buttons {
    display: flex;
    flex-direction: column; /* Stacked by default for mobile */
    gap: 12px;
}

@media (min-width: 480px) {
    .age-gate-buttons {
        flex-direction: row; /* Side-by-side on larger screens */
    }
    #age-gate-enter, #age-gate-exit {
        flex: 1; /* Makes buttons equal width */
    }
}

#age-gate-enter {
    background: #e00;
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

#age-gate-enter:active {
    transform: scale(0.98); /* Tactile feedback on click */
}

#age-gate-exit {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #aaa;
    border: 1px solid #444;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
}

#age-gate-exit:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #888;
    color: #fff;
}

/*---------------------------
# Native Video Ad Styling
---------------------------*/
.ad-card {
    max-width: 400px;
    width: 100%;
}
.ad-thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #000;
    overflow: hidden;
}
.ad-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 4px;
    z-index: 2;
}
/* Force third-party ads to fit container */
.ad-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ad-media > * {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}
.ad-media img,
.ad-media iframe,
.ad-media video,
.ad-media ins,
.ad-media div {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
/* Target common ad networks */
.ad-media .adsbygoogle,
.ad-media [id*="google_ads"],
.ad-media [class*="ad-"],
.ad-media [id*="ad-"] {
    width: 100% !important;
    height: 100% !important;
}
.ad-card .video-info {
    padding: 15px;
}
.ad-card .video-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ad-card .video-meta {
    display: flex;
    gap: 5px;
    font-size: 13px;
    color: var(--text-color);
}
.ad-card .video-author {
    font-weight: 500;
    color: green;
}