/**
 * Apple-Style Glassmorphism, YouTube Red Gradient & Dual Light/Dark Theme Engine
 * Designed for CreatorTools / YouTube Toolkit
 */

/* ==========================================================================
   1. Apple Glassmorphism & YouTube Red Gradient UI (Dark Mode Base)
   ========================================================================== */

/* Ambient Red Glow Mesh Background */
body.apple-glass-enabled {
    background-color: #0c0d11 !important;
    background-image: 
        radial-gradient(circle at 18% 12%, rgba(255, 26, 64, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 82% 88%, rgba(220, 38, 38, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(18, 18, 24, 0.8) 0%, #0c0d11 100%) !important;
    background-attachment: fixed !important;
}

/* Frosted Liquid Glass Header */
body.apple-glass-enabled header#main-header {
    background: rgba(12, 13, 17, 0.72) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Translucent Frosted Glass Cards & Panels */
body.apple-glass-enabled .bg-zinc-900,
body.apple-glass-enabled .bg-zinc-950,
body.apple-glass-enabled [class*="bg-zinc-900/"],
body.apple-glass-enabled .rounded-2xl.border,
body.apple-glass-enabled .rounded-xl.border {
    background: rgba(22, 23, 29, 0.6) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.37), inset 0 1px 0 0 rgba(255, 255, 255, 0.07) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Elevated Glass Card Hover Effects */
body.apple-glass-enabled a.rounded-2xl:hover,
body.apple-glass-enabled div.rounded-2xl:hover,
body.apple-glass-enabled div.group:hover .bg-zinc-900 {
    border-color: rgba(255, 26, 64, 0.35) !important;
    box-shadow: 0 16px 40px -8px rgba(255, 0, 51, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px);
}

/* Translucent Glass Inputs & Textareas */
body.apple-glass-enabled input[type="text"],
body.apple-glass-enabled input[type="url"],
body.apple-glass-enabled input[type="search"],
body.apple-glass-enabled input[type="number"],
body.apple-glass-enabled textarea,
body.apple-glass-enabled select {
    background: rgba(14, 15, 19, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
}

body.apple-glass-enabled input:focus,
body.apple-glass-enabled textarea:focus,
body.apple-glass-enabled select:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    outline: none !important;
}

/* YouTube Red Gradient Action Buttons */
body.apple-glass-enabled .bg-primary,
body.apple-glass-enabled button#submit-btn,
body.apple-glass-enabled button#analyze-btn,
body.apple-glass-enabled button#resolve-btn,
body.apple-glass-enabled button#download-btn,
body.apple-glass-enabled a.bg-primary {
    background: linear-gradient(135deg, #ff1a40 0%, #e60026 50%, #b8001f 100%) !important;
    box-shadow: 0 4px 20px rgba(230, 0, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.apple-glass-enabled .bg-primary:hover,
body.apple-glass-enabled button#submit-btn:hover,
body.apple-glass-enabled button#analyze-btn:hover,
body.apple-glass-enabled button#resolve-btn:hover,
body.apple-glass-enabled button#download-btn:hover,
body.apple-glass-enabled a.bg-primary:hover {
    background: linear-gradient(135deg, #ff3355 0%, #ff002b 50%, #cc0022 100%) !important;
    box-shadow: 0 6px 26px rgba(255, 0, 51, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-1px);
}

/* Dropdown Menus: Frosted Glossy Glass */
body.apple-glass-enabled .group-hover\:visible,
body.apple-glass-enabled #mobile-menu > div {
    background: rgba(18, 19, 25, 0.88) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Mode Buttons / Options */
body.apple-glass-enabled .download-mode-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.apple-glass-enabled .download-mode-btn:hover {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.12) !important;
}

/* ==========================================================================
   2. Comprehensive Light Mode Theme Engine (Zero Invisible Text)
   ========================================================================== */

/* Canvas Background */
html.light-theme body {
    background-color: #f8fafc !important;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(239, 68, 68, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(220, 38, 38, 0.04) 0%, transparent 45%),
        linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
    background-attachment: fixed !important;
    color: #0f172a !important;
}

/* Header in Light Mode */
html.light-theme header#main-header {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

/* Typography Overrides (Complete High-Contrast Visibility) */
html.light-theme h1,
html.light-theme h2,
html.light-theme h3,
html.light-theme h4,
html.light-theme h5,
html.light-theme h6,
html.light-theme strong,
html.light-theme .text-white,
html.light-theme .text-foreground,
html.light-theme .text-zinc-100,
html.light-theme .text-zinc-200 {
    color: #0f172a !important;
}

html.light-theme p,
html.light-theme .text-zinc-400,
html.light-theme .text-zinc-300,
html.light-theme .text-muted-foreground,
html.light-theme li {
    color: #334155 !important;
}

html.light-theme .text-zinc-500,
html.light-theme small {
    color: #64748b !important;
}

/* Nav Links in Light Mode */
html.light-theme nav a.text-muted-foreground {
    color: #475569 !important;
}
html.light-theme nav a.text-muted-foreground:hover,
html.light-theme nav a.text-primary {
    color: #e11d48 !important;
}

/* Cards & Panels in Light Mode */
html.light-theme .bg-zinc-900,
html.light-theme .bg-zinc-950,
html.light-theme .bg-zinc-800,
html.light-theme [class*="bg-zinc-900/"],
html.light-theme .border-border,
html.light-theme .border-zinc-800 {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), inset 0 1px 0 #ffffff !important;
}

html.light-theme a.rounded-2xl:hover,
html.light-theme div.rounded-2xl:hover {
    border-color: rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.1) !important;
}

/* Inputs & Form Fields in Light Mode */
html.light-theme input[type="text"],
html.light-theme input[type="url"],
html.light-theme input[type="search"],
html.light-theme input[type="number"],
html.light-theme textarea,
html.light-theme select {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html.light-theme input::placeholder,
html.light-theme textarea::placeholder {
    color: #94a3b8 !important;
}

html.light-theme input:focus,
html.light-theme textarea:focus,
html.light-theme select:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

/* Dropdown Popups in Light Mode */
html.light-theme .group-hover\:visible,
html.light-theme #mobile-menu > div {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1) !important;
}

html.light-theme .group-hover\:visible a,
html.light-theme #mobile-menu a {
    color: #334155 !important;
}
html.light-theme .group-hover\:visible a:hover,
html.light-theme #mobile-menu a:hover {
    background: #f1f5f9 !important;
    color: #ef4444 !important;
}

/* Status & Option Boxes */
html.light-theme .bg-muted {
    background: #f1f5f9 !important;
    color: #334155 !important;
}
html.light-theme .download-mode-btn {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}
html.light-theme .download-mode-btn:hover {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.08) !important;
    color: #ef4444 !important;
}

/* Footer in Light Mode */
html.light-theme footer {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}
html.light-theme footer p,
html.light-theme footer a {
    color: #64748b !important;
}
html.light-theme footer a:hover {
    color: #ef4444 !important;
}

/* Header icon buttons in Light Mode */
html.light-theme #header-search-btn,
html.light-theme #header-theme-toggle {
    color: #475569 !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: #e2e8f0 !important;
}
html.light-theme #header-search-btn:hover,
html.light-theme #header-theme-toggle:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Auth button in Light Mode */
html.light-theme nav a.bg-zinc-800 {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
html.light-theme nav a.bg-zinc-800:hover {
    background: #f8fafc !important;
}

/* ==========================================================================
   3. Spotlight Search Modal (Apple Style)
   ========================================================================== */

#ytk-search-modal {
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

#ytk-search-modal.active {
    display: flex !important;
}

#ytk-search-card {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

#ytk-search-modal.active #ytk-search-card {
    transform: scale(1) !important;
    opacity: 1 !important;
}

.search-item-active {
    background: rgba(239, 68, 68, 0.12) !important;
    border-left: 3px solid #ef4444 !important;
}

html.light-theme #ytk-search-card {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18) !important;
}

html.light-theme #ytk-search-input {
    color: #0f172a !important;
}

html.light-theme #ytk-search-input::placeholder {
    color: #94a3b8 !important;
}

html.light-theme #ytk-search-card .border-white\/10,
html.light-theme #ytk-search-card .border-white\/5 {
    border-color: #e2e8f0 !important;
}

html.light-theme #ytk-search-card .bg-zinc-950\/60 {
    background: #f8fafc !important;
}

html.light-theme .search-item-active {
    background: rgba(239, 68, 68, 0.08) !important;
}


/* Desktop Navigation: Enforce clean horizontal row, no wrapping, proper spacing */
@media (min-width: 768px) {
    header#main-header nav[aria-label="Main navigation"],
    nav.main-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 1.5rem !important;
        white-space: nowrap !important;
    }
    header#main-header nav[aria-label="Main navigation"] > *,
    nav.main-nav > * {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    #mobile-menu-btn,
    #mobile-search-btn,
    #mobile-theme-toggle {
        display: none !important;
    }
}

/* Mobile Header & Branding: Clean logo on left, drawer button on right */
@media (max-width: 767px) {
    header#main-header {
        height: 60px !important;
    }
    header#main-header .container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }
    /* Strictly hide desktop nav bar on mobile */
    header#main-header nav[aria-label="Main navigation"],
    nav.main-nav {
        display: none !important;
    }
    /* Prominent Branding Logo */
    header#main-header .ytk-logo {
        max-height: 36px !important;
        width: auto !important;
        max-width: 170px !important;
        object-fit: contain !important;
        display: block !important;
    }
    /* 3-Line Hamburger Menu Button */
    #mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #ef4444 !important;
        font-size: 1.15rem !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        transition: all 0.2s ease !important;
    }
    #mobile-menu-btn:hover,
    #mobile-menu-btn:active {
        background: rgba(239, 68, 68, 0.2) !important;
        color: #ffffff !important;
    }
    html.light-theme #mobile-menu-btn {
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        color: #ef4444 !important;
    }
}

/* Offcanvas Mobile Side Drawer Panel */
#mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: opacity 0.25s ease !important;
}

#mobile-menu.hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#mobile-menu:not(.hidden) {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#mobile-menu > div {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    width: 82% !important;
    max-width: 320px !important;
    background: #111216 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.85) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateX(0) !important;
}

html.light-theme #mobile-menu > div {
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.12) !important;
}

html.light-theme #mobile-menu a {
    color: #334155 !important;
}

html.light-theme #mobile-menu a:hover {
    background: #f1f5f9 !important;
    color: #ef4444 !important;
}

/* 100% Solid Non-Transparent Dropdown Menus in Dark Mode - strictly scoped to header */
header#main-header #nav-downloaders-menu > div,
header#main-header #nav-downloaders-menu > div.absolute,
header#main-header nav .relative.group > div.absolute,
header#main-header nav .group > div.absolute,
header#main-header nav div.absolute,
header#main-header .dl-dropdown-panel,
header#main-header .user-menu-dropdown {
    background: #121319 !important;
    background-color: #121319 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    z-index: 99999 !important;
}

/* 100% Solid Non-Transparent Dropdown Menus in Light Mode */
html.light-theme header#main-header #nav-downloaders-menu > div,
html.light-theme header#main-header #nav-downloaders-menu > div.absolute,
html.light-theme header#main-header nav .relative.group > div.absolute,
html.light-theme header#main-header nav .group > div.absolute,
html.light-theme header#main-header nav div.absolute,
html.light-theme .dl-dropdown-panel,
html.light-theme .user-menu-dropdown,
body:not(.dark) .dl-dropdown-panel,
body:not(.dark) .user-menu-dropdown {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    z-index: 99999 !important;
}

/* Ensure Dropdown links always stack vertically as full-width flex items */
header#main-header nav .absolute,
header#main-header nav .absolute div,
header#main-header nav .absolute a {
    white-space: normal !important;
}
header#main-header nav .absolute a {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Card Icons specific targeting (only icon elements inside card badge boxes) */
.w-12.h-12 > i,
.w-12.h-12 > svg,
.tool-icon > i,
.tool-icon > svg,
.bg-primary\/20 > i,
.bg-primary\/20 > svg {
    color: #ef4444 !important;
}
html.light-theme .w-12.h-12 > i,
html.light-theme .w-12.h-12 > svg,
html.light-theme .tool-icon > i,
html.light-theme .tool-icon > svg,
html.light-theme .bg-primary\/20 > i,
html.light-theme .bg-primary\/20 > svg {
    color: #dc2626 !important;
}