/*
Theme Name: JAV2160
Theme URI: https://jav2160.com
Author: JAV2160 Team
Author URI: https://jav2160.com
Description: JAV2160 premium adult video archive theme with advanced SEO and 2160P (4K) optimization.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: missclone
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
*/

/* Import the main stylesheet from mockup */
:root {
    --bg-color: #0d0d0d;
    --card-bg: #1a1a1a;
    --accent-color: deeppink;
    /* Unique branding, distinct from MissAV */
    --accent-secondary: #00e5ff;
    /* Electric Cyan */
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --nav-bg: #121212;
    --header-height: 70px;
    --transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Punk Shake Animation */
@keyframes punk-shake {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-1deg);
    }

    75% {
        transform: rotate(1deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
    overflow-y: auto !important;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

/* Header Styles */
.header {
    height: var(--header-height);
    background-color: var(--nav-bg);
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
}

.header-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Styles Reset (Flexbox Based) */
.logo {
    font-family: 'Outfit', sans-serif;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -1.5px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: var(--transition);
    /* Remove padding hacks */
    padding: 0;
}

/* Pseudo-element as a real icon block */
.logo::before {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    background: var(--accent-color);
    clip-path: polygon(20% 10%, 20% 90%, 90% 50%);
    border-radius: 4px;
    margin-right: 8px;
    /* Real Spacer */
    transition: var(--transition);

    /* Reset Positioning */
    position: static;
    transform: none;
}

.logo::after {
    content: '2160';
    color: var(--accent-color);
    margin-left: 2px;
    transition: var(--transition);
}

.logo:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 0, 127, 0.5);
}

.logo:hover::before {
    background: #ff3399;
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.6);
}

.logo:hover::after {
    text-shadow: 0 0 10px rgba(255, 0, 127, 0.8);
}

.seo-intro {
    max-width: 900px;
    margin: 40px auto;
    text-align: center;
    padding: 20px;
}

.seo-intro h1 {
    font-size: 32px;
    margin-bottom: 20px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

.seo-intro p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* PC Search Bar Optimization */
.search-section {
    flex: 1;
    /* Allow it to take available space */
    max-width: 400px;
    /* Moderate max width */
    margin-left: 40px;
    /* Space from logo */
}

.search-bar {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: var(--transition);
    width: 100%;
}

.search-bar:focus-within {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
}

.view-btn {
    background: linear-gradient(135deg, var(--accent-color), #ff00ff);
    color: #white;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
    display: inline-block;
}

.view-btn:hover {
    background: linear-gradient(135deg, var(--accent-secondary), #00ffcc);
    transform: scale(1.05) rotate(-1deg);
    animation: punk-shake 0.2s infinite;
}

.search-bar input {
    background: transparent;
    border: none;
    color: white;
    padding: 10px 15px;
    flex: 1;
    /* Grow to fill space */
    min-width: 0;
    /* Prevent flex item from overflowing */
    outline: none;
    font-size: 14px;
    width: 100%;
    /* Ensure full width usage */
}

.search-bar button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0 15px;
    cursor: pointer;
    flex-shrink: 0;
    /* Don't shrink button */
}

.login-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.login-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.icon-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    margin-right: 15px;
    cursor: pointer;
    transition: var(--transition);
}

.icon-btn:hover {
    color: var(--accent-color);
}

/* Sub Nav */
.sub-nav {
    background-color: var(--nav-bg);
    border-bottom: 1px solid #222;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.nav-links {
    list-style: none;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
    display: none;
}

.nav-links li a {
    display: block;
    padding: 15px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: var(--transition);
}

.nav-links li.active a,
.nav-links li a:hover {
    color: white;
    box-shadow: inset 0 -3px 0 var(--accent-color);
}

/* Featured Hero Rich Design */
.featured-hero {
    background: linear-gradient(to bottom, #080808, #000);
    /* Slightly richer background */
    padding: 30px 0;
    overflow: hidden;
}

.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    /* PC default */
}

/* Scroll Snap Container */
.hero-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
    /* Space for scrollbar or shadow */
    scrollbar-width: none;
    /* Firefox hide */
    -ms-overflow-style: none;
    /* IE/Edge hide */

    /* Rich Snap Effect */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.hero-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari hide */
}

.hero-card {
    position: relative;
    /* For stretched link */
    flex: 0 0 450px;
    /* PC Width */
    background: #111;
    border-radius: 16px;
    /* Rounder corners */
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #222;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    /* Snap Alignment */
    scroll-snap-align: start;
}

.hero-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(255, 51, 102, 0.2);
    z-index: 10;
}

/* Make the title link cover the whole card */
.hero-content h3 a::after,
.hero-btn::after {
    /* Optional: if we want specific links to be clickable differently, we can adjust.
       But user asked for "whole area clickable".
       Usually, putting the link on the title or image and making it expand is best.
    */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Ensure buttons inside sit above the stretched link if needed, 
   but for "whole card clickable", usually we want one main link. 
   The hero-btn is the main Call to Action. Let's make that stretch 
   OR the link around the image? 
   Let's check index.php structure again. 
   The hero card has a button at the bottom.
*/
.hero-btn {
    background: #222;
    color: white;
    border: 1px solid #333;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    width: fit-content;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    /* If we want the button to look like a button but act as part of the card: */
    position: relative;
    z-index: 2;
    /* Keep button clickable on top if it has specific behavior, otherwise z-index 1 covers it */
}

/* Actually, simplest way for UX: 
   .hero-card > a.hero-btn::after { content:''; position:absolute; inset:0; }
*/
/* Actually, simplest way for UX: 
   .hero-card > a.hero-btn::after { content:''; position:absolute; inset:0; }
*/
.hero-btn::after {
    content: "";
    /* Stretched link */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* High z-index to cover everything in the card */
    cursor: pointer;
}

/* Ensure the card itself doesn't block clicks */
.hero-card {
    /* ... existing styles ... */
    /* Ensure no overflow:hidden blocks the link expansion if possible, but here it is internal */
    isolation: isolate;
    /* New stacking context */
}

/* Make sure container allows clicks */
.hero-content {
    /* ... */
    pointer-events: none;
    /* Let clicks pass through content to the link behind/above */
    z-index: 5;
}

/* But we want text selectable? No, for a card link, usually not. */
/* Revert pointer-events if text selection is needed, but 'whole card clickable' implies link priority. */
.hero-content {
    pointer-events: auto;
    /* Actually let's keep auto, but ensure ::after is on top */
}

/* Override z-index for the button so it remains clickable on top of its own pseudo element if detailed */
.hero-btn {
    z-index: 20;
    position: relative;
}

.hero-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

/* Gradient Overlay on Image for text readability */
.hero-thumb::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    opacity: 0.6;
}

.hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hero-card:hover .hero-thumb img {
    transform: scale(1.1);
}

.hero-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.hero-content .badge {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary));
    width: fit-content;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 12px;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.4);
    letter-spacing: 0.5px;
}

.hero-content h3 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 1.4;
    color: white;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content p {
    font-size: 13px;
    color: #ccc;
    margin-bottom: 15px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.hero-btn:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    color: #000;
    animation: punk-shake 0.2s infinite;
    transform: translateY(-2px);
}

/* Mobile Responsive Richness */
@media (max-width: 900px) {
    .hero-container {
        padding: 0;
        /* Full Bleed container */
    }

    .hero-scroll {
        padding: 0 20px 30px;
        /* Side padding for peek effect */
        gap: 15px;
        scroll-snap-align: center;
    }

    .hero-card {
        flex: 0 0 85vw;
        /* Show 85% of card to peek next one */
        scroll-snap-align: center;
        /* Center snapping */
        border-radius: 12px;
    }

    .hero-thumb {
        aspect-ratio: 16 / 10;
        /* Slightly taller on mobile */
    }

    .hero-content h3 {
        font-size: 16px;
    }
}

border: 1px solid #333;
padding: 8px 15px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
width: fit-content;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}

.hero-btn:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    color: #000;
    animation: punk-shake 0.2s infinite;
    transform: translateY(-2px);
}

/* SEO Sections */
/* .seo-intro styles moved to organized section above */

.seo-detailed-info {
    margin-bottom: 60px;
}

.seo-card {
    background: #0a0a0a;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #1a1a1a;
}

.seo-card h3 {
    font-size: 18px;
    margin: 25px 0 15px;
    color: var(--text-primary);
}

.seo-card h3:first-child {
    margin-top: 0;
}

.seo-card p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 15px;
    line-height: 1.8;
}

/* Breadcrumbs (SEO Structured Data compatible) */
.breadcrumbs {
    padding: 15px 0;
    margin-bottom: 5px;
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

.breadcrumbs li:not(:last-child)::after {
    content: "›";
    margin-left: 8px;
    opacity: 0.5;
}

.breadcrumbs a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}

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

/* Actress Grid */
.actress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.actress-card {
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    /* Horizontal on PC */
    transition: var(--transition);
    border: 1px solid #222;
    height: 180px;
}

.actress-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.actress-photo {
    flex: 0 0 135px;
    position: relative;
    overflow: hidden;
}

.actress-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hide stats on photo for PC, show in info */
.actress-stats {
    display: none;
}

.actress-info {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.actress-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.work-count {
    font-size: 13px;
    font-weight: 400;
    color: #888;
}

.actress-ruby {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.actress-details-v2 {
    display: flex;
    gap: 6px;
    margin-bottom: 15px;
}

.actress-details-v2 span {
    background: #1a1a1a;
    border: 1px solid #333;
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.actress-link {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 900px) {
    .actress-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .actress-card {
        flex-direction: column;
        height: auto;
    }

    .actress-photo {
        flex: none;
        width: 100%;
        aspect-ratio: 3 / 4;
    }

    .actress-stats {
        display: flex;
        /* Show on photo for Mobile */
        position: absolute;
        bottom: 8px;
        left: 8px;
        gap: 3px;
    }

    .actress-stats span {
        background: rgba(var(--accent-color-rgb, 255, 51, 102), 0.85);
        color: white;
        font-size: 9px;
        font-weight: 700;
        padding: 2px 5px;
        border-radius: 3px;
        backdrop-filter: blur(4px);
    }

    .actress-details-v2 {
        display: none;
        /* Hide in info for Mobile */
    }

    .actress-info {
        text-align: center;
        padding: 15px;
    }
}

/* Category Grid (General purpose for Maker, Genre, Director, Series) */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.category-card {
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #222;
    transition: var(--transition);
}

.category-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
}

.category-visual {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    background: #000;
}

.category-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: var(--transition);
}

.category-card:hover .category-visual img {
    opacity: 1;
    transform: scale(1.05);
}

.category-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--accent-color);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}

.category-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.category-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

.category-works {
    font-size: 12px;
    color: var(--text-secondary);
}

.view-btn {
    margin-top: 10px;
    padding: 8px 18px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: white;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    transition: var(--transition);
}

.view-btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

@media (max-width: 900px) {
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .category-info {
        padding: 12px 6px;
    }

    .category-name {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

    .category-works {
        font-size: 10px;
    }

    .view-btn {
        display: none;
    }
}

@media (max-width: 450px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Genre List Styles */
.genre-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.genre-item a {
    display: flex;
    align-items: center;
    background: #111;
    border: 1px solid #222;
    padding: 15px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition);
}

.genre-item a:hover {
    border-color: var(--accent-color);
    background: #1a1a1a;
}

.genre-icon {
    width: 40px;
    height: 40px;
    background: #222;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--accent-color);
}

.genre-name {
    font-weight: 600;
    font-size: 15px;
}

@media (max-width: 900px) {
    .genre-list-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .genre-item a {
        flex-direction: column;
        padding: 12px 5px;
        text-align: center;
    }

    .genre-icon {
        margin-right: 0;
        margin-bottom: 8px;
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .genre-name {
        font-size: 11px;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 400px) {
    .genre-list-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.view-all {
    font-size: 13px;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}

.view-all:hover {
    text-decoration: underline;
}

/* Content Area */
/* Content Area Spacing */
/* Content Area Spacing */
.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px;
    overflow: visible !important;
}

.home-section {
    margin-bottom: 80px;
    /* セクション間の余白を広めに */
}

.home-section:last-of-type {
    margin-bottom: 0;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.section-title h2 {
    font-size: 22px;
    font-weight: 700;
}

.section-title h2 i {
    color: var(--accent-color);
    margin-right: 12px;
}

.filter-options {
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* SEO Sections */
.seo-intro {
    margin-bottom: 60px;
    border-left: 4px solid var(--accent-color);
    padding-left: 20px;
}

.seo-intro h1 {
    font-size: 24px;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.seo-intro p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    max-width: 900px;
}

.seo-detailed-info {
    margin-bottom: 80px;
}

/* Video Grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px 20px;
}

.video-card {
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    /* Base for stretched link */
}

/* Make the title link or thumbnail link cover the entire card */
.video-card a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Ensure actress link and other meta links are on top if they need to be distinct,
   but usually "whole card click" is preferred for UX. 
   If we want "actress name" to be clickable separately, we need z-index: 2 on it.
*/
.video-actress,
.actress-link {
    position: relative;
    z-index: 2;
}

.thumbnail-wrapper {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #222;
    border-radius: 8px;
    overflow: hidden;
}

.thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.video-card:hover .thumbnail-wrapper img {
    transform: scale(1.05);
}

.duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.hd-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--accent-color);
    color: white;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
}

.video-info {
    padding: 12px 2px 0;
}

.video-actress {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 4px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.etc-label {
    font-size: 11px;
    opacity: 0.8;
    margin-left: 2px;
}

.video-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #efefef;
    height: 40px;
    line-height: 1.4;
}

.video-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
}

/* Pagination (WP-PageNavi & Default compatibility) */
.pagination,
.wp-pagenavi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 50px;
    clear: both;
}

.pagination ul {
    display: flex;
    list-style: none;
    gap: 8px;
    padding: 0 !important;
    margin: 0 !important;
}

.pagination li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Base style for links and spans */
.pagination a,
.pagination span,
.wp-pagenavi a,
.wp-pagenavi span {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border: 1px solid #333;
    color: white;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
}

/* Hover and active states */
.pagination a:hover,
.pagination .current,
.wp-pagenavi a:hover,
.wp-pagenavi .current {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
}

/* Dots and pages info */
.pagination .dots,
.wp-pagenavi .pages {
    background: transparent;
    border: none;
    min-width: auto;
    color: var(--text-secondary);
}

/* Footer */
/* Footer Modernized */
.footer {
    background: #000;
    padding: 60px 20px 30px;
    border-top: 1px solid #1a1a1a;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Actress Cloud Section */
.footer-actress-section {
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid #111;
}

.footer-section-title {
    margin-bottom: 20px;
}

.footer-section-title a {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-section-title a i {
    font-size: 12px;
    opacity: 0.5;
}

.footer-actress-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 15px;
}

.footer-actress-cloud a {
    color: var(--text-secondary);
    font-size: 12px;
    text-decoration: none;
    transition: var(--transition);
}

.footer-actress-cloud a:hover {
    color: var(--accent-color);
}

/* Footer Grid Optimization */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.footer-column h3 {
    margin-bottom: 15px;
}

.footer-column h3 a {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.9;
}

.footer-column h3 a i {
    font-size: 10px;
    opacity: 0.4;
}

.footer-column h3 a:hover {
    opacity: 1;
    color: var(--accent-color);
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 4px;
    /* 余白を詰める */
}

.footer-column ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    transition: var(--transition);
}

.footer-column ul li a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid #1a1a1a;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #555;
    font-size: 12px;
}

.footer-legal a {
    color: #555;
    text-decoration: none;
    margin-left: 15px;
}

.footer-legal a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* Responsive Header */
@media (max-width: 768px) {
    .header {
        height: auto;
        padding: 10px 0;
    }

    .header-container {
        flex-direction: row;
        /* Horizontal layout */
        flex-wrap: nowrap;
        height: auto;
        padding: 0 15px;
        /* Minimal padding */
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .logo-section {
        flex-shrink: 0;
        /* Logo stays fixed */
    }

    .logo {
        padding-left: 0;
        font-size: 20px;
        /* Smaller for mobile fit */
    }

    /* Keep icon small */
    .logo::before {
        width: 20px;
        height: 20px;
        margin-right: 5px;
        display: block;
        /* Show icon */
        position: static;
        transform: none;
    }

    /* Search takes remaining space but stays on right */
    .search-section {
        flex: 1;
        /* Grow to fill space */
        max-width: 220px;
        /* Don't get too wide */
        margin: 0;
    }

    /* Compact search bar for mobile header */
    .search-bar {
        padding: 0;
        height: 38px;
    }

    .search-bar input {
        padding: 0 10px;
        font-size: 13px;
        width: 100%;
    }

    .search-bar button {
        padding: 0 10px;
    }

    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
}

/* Video Detail Page */
.video-detail-container {
    display: flex;
    gap: 40px;
    margin-top: 20px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.video-main-column {
    flex: 0 0 800px;
    min-width: 0;
}

.video-side-column {
    flex: 1;
    min-width: 320px;
    max-width: 420px;
}

/* Responsive Video Wrapper - Simple min-height approach */
.responsive-video-wrapper {
    position: relative;
    width: 100%;
    min-height: 450px;
    /* PC height */
    background: #000;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    /* Hide overflow from scaling */
}

.responsive-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 111%;
    /* Slightly larger to scale down */
    height: 111%;
    min-height: 500px;
    /* 450 * 1.11 */
    border: none;
    transform: scale(0.90);
    /* Scale down to 90% for PC */
    transform-origin: top left;
}

.responsive-video-wrapper video {
    display: block;
    width: 100%;
    height: auto;
    min-height: 400px;
    border: none;
}

/* Mobile optimization - Scale down iframe content more */
@media (max-width: 900px) {
    .responsive-video-wrapper {
        border-radius: 0;
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
        margin-bottom: 20px;
        min-height: 250px;
        /* Smaller container for mobile */
    }

    .responsive-video-wrapper iframe {
        /* Scale down the iframe content to fit mobile screen */
        width: 200%;
        /* Make iframe 2x wider */
        height: 200%;
        /* Make iframe 2x taller */
        min-height: 500px;
        transform: scale(0.5);
        /* Scale down to 50% for mobile */
        transform-origin: top left;
        /* Scale from top-left corner */
    }
}

/* Tablet optimization */
@media (max-width: 1024px) and (min-width: 901px) {
    .responsive-video-wrapper {
        min-height: 400px;
    }

    .responsive-video-wrapper iframe {
        width: 110%;
        height: 110%;
        min-height: 440px;
        transform: scale(0.91);
        /* Scale down to 91% for tablet */
    }
}


.player-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    transition: var(--transition);
}

.player-overlay i {
    font-size: 60px;
    margin-bottom: 15px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* .video-player-wrapper:hover .player-overlay removed */

.cta-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-main {
    background: linear-gradient(135deg, #ff3366 0%, #ff6699 100%);
    color: white;
    text-decoration: none;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(255, 51, 102, 0.3);
    transition: var(--transition);
}

.btn-main:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 51, 102, 0.5);
}

.download-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn-sub {
    background: #222;
    color: #efefef;
    text-decoration: none;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #333;
    transition: var(--transition);
}

.btn-sub.highlight {
    background: #333;
    border-color: #444;
}

.btn-sub:hover {
    background: #444;
}

.magnet-link {
    background: transparent;
    color: #888;
    text-decoration: none;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--transition);
    margin-top: 5px;
}

.magnet-link:hover {
    color: #fff;
}

.sub-title {
    font-size: 18px;
    font-weight: 600;
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #222;
}

/* Clean Compact Gallery Section */
.jav-gallery-compact {
    margin-top: 25px;
    /* Tighter separation */
    background: #0a0a0a;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #1a1a1a;
    margin-bottom: 30px;
    /* Tighter spacing */
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

/* ... (omitted) ... */

/* SEO Keywords Section */
.seo-keywords-section {
    margin-top: 30px;
    /* MissAV spacing */
    padding: 25px;
    background: #0a0a0a;
    border-radius: 12px;
    border: 1px dashed #333;
}

.jav-gallery-item {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background: #000 !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.jav-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
    cursor: pointer;
    border: none !important;
    outline: none !important;
    display: block;
}

.jav-gallery-item:hover img {
    opacity: 0.6;
}

/* Lightbox - Nuclear Reset for Borders */


.player-overlay-label {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: #4ade80;
    /* Modern bright green */
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(74, 222, 128, 0.3);
    pointer-events: none;
    z-index: 10;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

/* --- Modern Lightbox UI (Glassmorphism & Premium Feel) --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(20px);
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: 100%;
    height: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.lightbox-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 60px 80px 20px;
    /* Reduced bottom padding for thumbnail space */
}

.lightbox-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

.lightbox-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    animation: lightboxImageFadeIn 0.3s ease;
}

@keyframes lightboxImageFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Navigation Buttons - Modern & Large Touch Area */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none !important;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 51, 102, 0.9);
    border-color: transparent;
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev:active,
.lightbox-next:active {
    transform: translateY(-50%) scale(0.95);
}

/* Close Button - Floating Bubble */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50%;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.lightbox-close:hover {
    background: rgba(255, 51, 102, 0.9);
    transform: rotate(90deg) scale(1.1);
    border-color: transparent;
}

/* Thumbnail Strip */
.lightbox-thumbnails-wrapper {
    height: auto;
    /* Auto height to fit content */
    min-height: 110px;
    /* Increased to fit 70px thumbnails + padding */
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    padding: 20px;
    /* Increased padding for better visibility */
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.lightbox-thumbnails-wrapper::-webkit-scrollbar {
    height: 6px;
}

.lightbox-thumbnails-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.lightbox-thumbnails-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.lightbox-thumbnails-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.lightbox-thumbs-grid {
    display: flex;
    gap: 10px;
    align-items: center;
    /* Center thumbnails vertically */
    min-height: 70px;
    /* Minimum height for thumbnails */
}

.lightbox-thumb-item {
    height: 70px;
    width: 70px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    display: block;
    /* Ensure proper rendering */
}

.lightbox-thumb-item:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

.lightbox-thumb-item.active {
    opacity: 1;
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(255, 51, 102, 0.5);
}

/* Mobile Optimization */
@media (max-width: 900px) {
    .lightbox-main {
        padding: 80px 20px 20px;
        /* Reduced bottom padding for mobile thumbnails */
    }

    .lightbox-prev,
    .lightbox-next {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-close {
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .lightbox-thumbnails-wrapper {
        height: auto;
        min-height: 100px;
        /* Fit 60px thumbnails + padding */
        padding: 20px 15px;
        /* Increased top/bottom padding */
    }

    .lightbox-thumb-item {
        height: 60px;
        width: 60px;
    }
}


.description-text {
    line-height: 1.7;
    color: var(--text-secondary);
    font-size: 14px;
}

.actress-mini-card {
    background: #111;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: center;
    border: 1px solid #222;
    margin-bottom: 20px;
}

.actress-mini-card img {
    width: 60px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

.mini-info h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.mini-info p {
    font-size: 11px;
    color: #777;
    font-weight: 400;
}

.meta-data-table {
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #222;
    margin-bottom: 20px;
}

/* Restored Missing Styles */

.meta-row {
    display: flex;
    padding: 12px 15px;
    border-bottom: 1px solid #222;
    font-size: 13px;
}

.meta-row .label {
    flex: 0 0 90px;
    color: var(--text-secondary);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-badge {
    background: #1a1a1a;
    color: #999;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    text-decoration: none;
    border: 1px solid #222;
}

.side-ad {
    margin-top: 30px;
}

.side-ad img {
    width: 100%;
    border-radius: 12px;
}

@media (max-width: 1024px) {
    .video-detail-container {
        flex-direction: column;
        gap: 0;
        /* Remove gap, use margin instead */
    }

    .video-main-column {
        flex: none;
        width: 100%;
        margin-bottom: 40px;
        /* Add space between columns */
    }

    .video-side-column {
        flex: none;
        width: 100%;
        max-width: none;
        padding: 0 20px;
        /* Add horizontal padding for mobile */
    }
}

.video-main-title {
    margin: 10px 0 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.title-decor-tags {
    display: flex;
    gap: 8px;
    align-items: center;
}

.video-main-title .v-code {
    background: var(--accent-color);
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 4px;
}

.video-main-title .v-actress {
    background: #222;
    color: var(--accent-color);
    font-size: 13px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid #333;
}

.v-title-full {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
}

/* Reviews refinement */
.review-item {
    padding: 20px 0;
    border-bottom: 1px solid #222;
}

.review-meta {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.review-meta .rating {
    color: #ffcc00;
    font-weight: 700;
}

.review-content {
    font-size: 14px;
    line-height: 1.6;
    color: #ddd;
}

.review-more-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    margin-left: 5px;
}

.review-more-link:hover {
    text-decoration: underline;
}



.reviews-bottom-margin {
    margin-bottom: 30px;
    /* Tighter MissAV spacing */
}

/* Side Recommendations */
.side-recommend-section {
    margin-top: 30px;
    padding-top: 0;
    border-top: none;
}

.mini-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-primary);
    border-left: 3px solid var(--accent-color);
    padding-left: 10px;
}

.side-recommend-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mini-video-card a {
    display: flex;
    gap: 12px;
    text-decoration: none;
    transition: var(--transition);
}

.mini-video-card:hover {
    opacity: 0.8;
}

.mini-thumb {
    width: 120px;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-meta {
    flex: 1;
    min-width: 0;
}

.mini-v-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mini-v-actress {
    font-size: 10px;
    color: #888;
    font-weight: 400;
}

/* SEO Keywords Section */
.seo-keywords-section {
    margin-top: 50px;
    padding: 30px;
    background: #0a0a0a;
    border-radius: 12px;
    border: 1px dashed #333;
}

.keyword-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.keyword-item {
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: var(--transition);
}

.keyword-item:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.keyword-item::before {
    content: "#";
    margin-right: 2px;
    opacity: 0.7;
}

/* Multiple Breadcrumbs Styles */
.breadcrumb-area {
    padding: 3px 0;
    margin-bottom: 3px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    opacity: 0.5;
}

.primary-path {
    font-size: 9px;
    font-weight: 400;
}

.secondary-path {
    font-size: 8px;
    opacity: 0.5;
}

.breadcrumb-list li:not(:last-child)::after {
    content: "›";
    margin-left: 3px;
    opacity: 0.4;
}

.breadcrumb-list a {
    color: #666;
    text-decoration: none;
    transition: var(--transition);
}

.breadcrumb-list a:hover {
    color: #888;
}

/* ==========================================================================
   Pirate Style / Warez Optimization
   ========================================================================== */

/* Pirate Style Override Removed */

/* ==========================================================================
   Pirate Style / Warez Optimization
   ========================================================================== */


/* ==========================================================================
   New Video Player Logic (Reset: 2026-01-11)
   ========================================================================== */

/* ... Duplicate video player styles removed ... */
/* Keep .v-tag-seo */
.v-tag-seo {
    background: #222;
    color: #eee;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 5px;
    border: 1px solid #444;
}

.v-tag-seo:last-child {
    background: #ff0000;
    color: #fff;
    border-color: #ff0000;
}

/* Pirate Style CTA Actions */
.cta-actions.pirate-style {
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 40px;
}

@media (max-width: 900px) {

    /* Video is full width, so make CTA seamless but with proper gap */
    .video-player-wrapper {
        margin-bottom: 20px !important;
        /* Adjust gap to next element */
    }

    /* Make CTA Actions consistent with full-width video look on mobile */
    .cta-actions.pirate-style {
        border-radius: 0;
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
        border-left: none;
        border-right: none;
        border-radius: 0;
        margin-bottom: 30px;
        /* Consistent gap to gallery */
        padding: 20px;
        /* Slightly less padding on mobile */
    }
}

.action-label {
    font-size: 13px;
    font-weight: 700;
    color: #888;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-label i {
    color: var(--accent-color);
}

.mirror-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 25px;
}

.mirror-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #ccc;
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    transition: var(--transition);
}

.mirror-btn.active {
    background: rgba(255, 51, 102, 0.1);
    border-color: var(--accent-color);
    color: white;
}

.status-online {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #00ff00;
    border-radius: 50%;
    margin-left: 6px;
    box-shadow: 0 0 5px #00ff00;
}

/* Download Section V2 */
.download-section-v2 {
    border-top: 1px solid #222;
    padding-top: 25px;
    margin-bottom: 25px;
}

.btn-pirate-main {
    background: linear-gradient(135deg, #cc0000 0%, #ff3333 100%);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px;
    border-radius: 8px;
    margin-bottom: 15px;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(204, 0, 0, 0.3);
}

.btn-pirate-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(204, 0, 0, 0.5);
    filter: brightness(1.1);
}

.btn-pirate-main .main-text {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.btn-pirate-main .sub-text {
    font-size: 11px;
    opacity: 0.7;
    font-weight: 600;
}

.mirror-btn-sub {
    background: #252525;
    border: 1px solid #444;
    color: #eee;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* Magnet Section */
.magnet-section {
    border-top: 1px solid #222;
    padding-top: 25px;
}

.magnet-link-pirate {
    display: block;
    background: #050505;
    border: 1px dashed #333;
    padding: 15px;
    border-radius: 4px;
    color: #666;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    word-break: break-all;
    line-height: 1.4;
}

.magnet-link-pirate:hover {
    color: #aaa;
    border-color: #555;
}