/*
Theme Name: watchwrestlinglive theme
Theme URI: https://watchwrestlinglive.uk/
Author: WatchWrestlingLive
Author URI: https://watchwrestlinglive.uk/
Description: Smart Dark & White Mode streaming & pro-wrestling theme for WatchWrestlingLive. Features Multi-Audio & Live Parts Stream Cards, 1-Click VIP Show Generator, Live Event Countdown Timers, Protected Safelink Downloads, TMDb/IMDb Auto-Fetcher, and Smart Wrestling SEO.
Version: 8.0.0
Text Domain: watchwrestlinglive-theme
*/

:root {
    --bg-base: #06070b;
    --bg-surface: #0d0f17;
    --bg-card: #121520;
    --bg-elevated: #181c2b;
    --red: #e50914;
    --red-hover: #ff1e2a;
    --blue: #00aced;
    --smackdown: #0088ff;
    --nxt: #ff9800;
    --aew: #9c27b0;
    --tna: #2ecc71;
    --ppv: #f5b041;
    --line: #222738;
    --line-light: #2e344a;
    --text-main: #f4f6fb;
    --text-sub: #c7cbd6;
    --mut: #8b92a5;
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] {
    --bg-base: #f1f5f9;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #f8fafc;
    --line: #cbd5e1;
    --line-light: #94a3b8;
    --text-main: #0f172a;
    --text-sub: #334155;
    --mut: #64748b;
    --shadow-card: 0 6px 20px rgba(15, 23, 42, 0.08);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-base);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.25s ease, color 0.25s ease;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

a {
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* ======== GLOBAL WRAPPERS ======== */
.main-wrapper {
    max-width: 1920px !important;
    width: 96% !important;
    margin: 38px auto 46px !important;
    padding-top: 8px !important;
    display: flex;
    align-items: flex-start;
    gap: 34px;
    box-sizing: border-box;
}
.content-area {
    flex: 1 1 calc(100% - 344px);
    min-width: 0;
    box-sizing: border-box;
}
.sidebar {
    flex: 0 0 310px;
    box-sizing: border-box;
}

/* ======== SHORTCODE STREAM & DOWNLOAD BUTTONS ======== */
.video-container {
    background: #000;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin: 18px 0;
    aspect-ratio: 16 / 9;
    box-shadow: var(--shadow-card);
}

.w-btn {
    padding: 9px 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
    margin: 6px 5px;
    font-size: 13.5px;
    letter-spacing: 0.3px;
}
.w-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.12);
}
.w-btn:active {
    transform: translateY(0) scale(0.98);
}

.watch-btn {
    background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38);
}
.part-btn {
    background: linear-gradient(180deg, #0369a1 0%, #075985 100%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.32);
}
.dl-btn {
    background: linear-gradient(180deg, #3b3066 0%, #272045 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38);
}

/* ======== WHITE / LIGHT MODE GLOBAL OVERRIDES ======== */
html[data-theme="light"] body {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .main-header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 2px solid #e50914 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .ww-logo-watch { color: #0f172a !important; }
html[data-theme="light"] .ww-logo-live { color: #0284c7 !important; }
html[data-theme="light"] .nav-menu li a { color: #1e293b !important; }
html[data-theme="light"] .nav-menu li a:hover,
html[data-theme="light"] .nav-menu li.current-menu-item > a { color: #e50914 !important; }
html[data-theme="light"] .nav-menu ul,
html[data-theme="light"] .nav-menu .sub-menu {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14) !important;
}
html[data-theme="light"] .nav-menu ul li { border-bottom-color: #e2e8f0 !important; }
html[data-theme="light"] .nav-menu ul li a { color: #334155 !important; }
html[data-theme="light"] .nav-menu ul li a:hover { background: #f1f5f9 !important; color: #e50914 !important; }
html[data-theme="light"] .header-search,
html[data-theme="light"] .menu-toggle,
html[data-theme="light"] .theme-mode-btn {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .header-search:hover,
html[data-theme="light"] .theme-mode-btn:hover {
    background: #e50914 !important;
    border-color: #e50914 !important;
    color: #ffffff !important;
}
html[data-theme="light"] .search-overlay {
    background: #ffffff !important;
    border-bottom-color: #00aced !important;
}
html[data-theme="light"] .search-field {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .wwl-hero-bar,
html[data-theme="light"] .sidebar .widget,
html[data-theme="light"] .api-top-box,
html[data-theme="light"] .custom-breadcrumbs,
html[data-theme="light"] .wwl-action-bar,
html[data-theme="light"] .wwl-lang-box,
html[data-theme="light"] .cx-ep,
html[data-theme="light"] .cx-report,
html[data-theme="light"] .preview-details,
html[data-theme="light"] .seo-summary-box,
html[data-theme="light"] .seo-tags-box,
html[data-theme="light"] .wrestling-comments-area,
html[data-theme="light"] .page-content-box,
html[data-theme="light"] .not-found-box,
html[data-theme="light"] #dst-notice-box {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] #dst-notice-box {
    border-left: 4px solid #e50914 !important;
}
html[data-theme="light"] .dst-card-item {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}
html[data-theme="light"] .dst-card-item strong { color: #0f172a !important; }
html[data-theme="light"] .wwl-pill {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
html[data-theme="light"] .wwl-pill.active,
html[data-theme="light"] .wwl-pill:hover {
    color: #ffffff !important;
}
html[data-theme="light"] .wwl-quick-filter {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
html[data-theme="light"] .wwl-quick-filter input { color: #0f172a !important; }
html[data-theme="light"] .thumbnail-wrapper,
html[data-theme="light"] .cx-link {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .post-title a,
html[data-theme="light"] .cx-name,
html[data-theme="light"] .sidebar .widget-title,
html[data-theme="light"] .api-details h1,
html[data-theme="light"] .api-details strong,
html[data-theme="light"] .cx-rel-head,
html[data-theme="light"] .cx-ep-t,
html[data-theme="light"] .page-title,
html[data-theme="light"] .not-found-title,
html[data-theme="light"] .comments-title,
html[data-theme="light"] .reply-title {
    color: #0f172a !important;
}
html[data-theme="light"] .post-card:hover .post-title a,
html[data-theme="light"] .cx-name:hover { color: #e50914 !important; }
html[data-theme="light"] .quick-cat-link,
html[data-theme="light"] .trend-card {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}
html[data-theme="light"] .trend-card span { color: #0f172a !important; }
html[data-theme="light"] .wrestling-pagination .page-numbers {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .wrestling-pagination .page-numbers.current,
html[data-theme="light"] .wrestling-pagination .page-numbers:hover {
    background: #e50914 !important;
    border-color: #e50914 !important;
    color: #ffffff !important;
}
html[data-theme="light"] .custom-breadcrumbs span.current { color: #0f172a !important; }
html[data-theme="light"] .api-details,
html[data-theme="light"] .post-main-text,
html[data-theme="light"] .seo-summary-box,
html[data-theme="light"] .page-content-box { color: #334155 !important; }
html[data-theme="light"] .seo-summary-box strong { color: #0f172a !important; }
html[data-theme="light"] .wwl-action-btn,
html[data-theme="light"] .seo-tag-item {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}
html[data-theme="light"] .wwl-action-btn:hover,
html[data-theme="light"] .seo-tag-item:hover {
    background: #e50914 !important;
    border-color: #e50914 !important;
    color: #ffffff !important;
}
html[data-theme="light"] .wwl-lang-head {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
}
html[data-theme="light"] .wwl-lang-title { color: #0f172a !important; }
html[data-theme="light"] .wwl-sub-panel {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html[data-theme="light"] .wwl-status-pill {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
html[data-theme="light"] .preview-summary {
    background: #f8fafc !important;
    color: #0f172a !important;
}
html[data-theme="light"] .preview-content {
    background: #ffffff !important;
    border-top-color: #e2e8f0 !important;
    color: #334155 !important;
}
html[data-theme="light"] .comment-wrapper {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html[data-theme="light"] .comment-content { color: #1e293b !important; }
html[data-theme="light"] .comment-form input[type="text"],
html[data-theme="light"] .comment-form input[type="email"],
html[data-theme="light"] .comment-form textarea {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .wr-timer {
    background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .wr-box:not(.sec) {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .wr-state { color: #0f172a !important; }
html[data-theme="light"] .wr-local b { color: #0f172a !important; }
html[data-theme="light"] footer.site-footer-main {
    background: #ffffff !important;
    border-top-color: #cbd5e1 !important;
    color: #475569 !important;
}
html[data-theme="light"] footer.site-footer-main a { color: #334155 !important; }
html[data-theme="light"] #ajax-live-results {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.15) !important;
}
html[data-theme="light"] #ajax-live-results .ajax-search-item {
    color: #0f172a !important;
    border-bottom-color: #e2e8f0 !important;
}
html[data-theme="light"] #ajax-live-results .ajax-search-item:hover {
    background: #f1f5f9 !important;
    color: #e50914 !important;
}

@media (max-width: 1024px) {
    .main-wrapper { flex-direction: column; }
    .content-area, .sidebar { flex: 1 1 100%; width: 100%; max-width: 100%; }
    html[data-theme="light"] .header-menu,
    html[data-theme="light"] .main-navigation,
    html[data-theme="light"] .nav-menu {
        background: #ffffff !important;
    }
    html[data-theme="light"] .nav-menu li { border-bottom-color: #e2e8f0 !important; }
    html[data-theme="light"] body .nav-menu li > ul,
    html[data-theme="light"] body .sub-menu { background: #f8fafc !important; }
    html[data-theme="light"] .menu-toggle-arrow { color: #0f172a !important; border-left-color: #e2e8f0 !important; }
}


html[data-theme="light"] .wwl-meta-pill {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
html[data-theme="light"] .wwl-meta-pill strong,
html[data-theme="light"] .wwl-meta-pill a {
    color: #0f172a !important;
}
html[data-theme="light"] .wwl-group-divider span {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}
html[data-theme="light"] .wwl-group-divider::before {
    background: #e2e8f0 !important;
}


/* ======== CLICKED / ACTIVE BUTTON STATE (Mobile & PC) ======== */
.w-btn {
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.w-btn:active {
    transform: scale(0.96) !important;
}
.w-btn.is-clicked {
    border: 2px solid #fbbf24 !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22), 0 4px 14px rgba(0, 0, 0, 0.5) !important;
    filter: brightness(1.12);
}
.part-btn.is-clicked,
.wwl-parts-grid .part-btn.is-clicked {
    background: linear-gradient(180deg, #0d9488 0%, #0f766e 100%) !important;
    border: 2px solid #fbbf24 !important;
}
.w-btn .clicked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fbbf24;
    color: #000 !important;
    font-size: 10px;
    font-weight: 900;
    margin-left: 4px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
