/* base.css — Extracted from base.html inline styles */

:root {
    --wavbox-black: #000000;
    --wavbox-white: #ffffff;
    --wavbox-gray: #ffffff;
    --wavbox-dark-gray: #333333;
}

/* Universal black fade overlay - matches index page behavior */
#universal-fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 99999;
    pointer-events: none;
    opacity: 1;
}

* {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W6", sans-serif;
}

html, body {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Black fade overlay */
#page-fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 99999;
    pointer-events: none;
}

/* Fade out the black overlay */
@keyframes fadeOutOverlay {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#page-fade-overlay.fade-out {
    animation: fadeOutOverlay 1s ease-out forwards;
}

/* Fade background from black to white animation */
@keyframes fadeBackgroundToWhite {
    0% {
        background-color: #000000 !important;
        background-image: none !important;
    }
    100% {
        background-color: #ffffff !important;
        background-image: none !important;
    }
}

body.fade-background {
    animation: fadeBackgroundToWhite 1s ease-out forwards !important;
    background-color: #ffffff;
    background-image: none;
}

.waveform-container {
    background: var(--wavbox-white);
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 1rem;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

.btn-black {
    background: var(--wavbox-white);
    color: #666;
    border: 1px solid var(--wavbox-black);
    transition: all 0.2s ease;
}

.btn-black:hover {
    background: #f5f5f5;
    color: #000;
    border-color: var(--wavbox-black);
}

.btn-white {
    background: var(--wavbox-white);
    color: var(--wavbox-black);
    border: 1px solid var(--wavbox-black);
}

.btn-white:hover {
    background: var(--wavbox-gray);
}

@keyframes logo-pulse {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-3px) scale(1.05);
    }
}

.logo-hover {
    animation: logo-pulse 3.5s ease-in-out infinite;
    transition: transform 0.3s ease;
}

/* Waveform styles for cart items */
.waveform-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    min-height: 48px;
    position: relative;
}

.waveform-container wave {
    overflow: hidden !important;
}

/* Lowercase text as default style — inherits naturally, overridable without !important */
body {
    text-transform: lowercase;
}

/* Opt-in class for elements that MUST be lowercase even if parent overrides */
.force-lowercase {
    text-transform: lowercase !important;
}

/* Keep usernames as-is (they can have mixed case) */
.username, [class*="username"], a[href^="/profile/"] {
    text-transform: none !important;
}

/* Preserve casing in form inputs and textareas */
input, textarea, select {
    text-transform: none;
}

/* Smooth slide-in animation from bottom - like footer sliding up */
@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(100vh);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.sample-card {
    animation: slideInFromBottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
}

/* Stagger animation delays for each card */
.sample-card:nth-child(1) { animation-delay: 0.08s; }
.sample-card:nth-child(2) { animation-delay: 0.16s; }
.sample-card:nth-child(3) { animation-delay: 0.32s; }
.sample-card:nth-child(4) { animation-delay: 0.64s; }
.sample-card:nth-child(5) { animation-delay: 0.70s; }
.sample-card:nth-child(6) { animation-delay: 0.75s; }
.sample-card:nth-child(7) { animation-delay: 0.80s; }
.sample-card:nth-child(8) { animation-delay: 0.85s; }
.sample-card:nth-child(9) { animation-delay: 0.90s; }
.sample-card:nth-child(10) { animation-delay: 0.95s; }
.sample-card:nth-child(11) { animation-delay: 1.00s; }
.sample-card:nth-child(12) { animation-delay: 1.05s; }
.sample-card:nth-child(13) { animation-delay: 1.10s; }
.sample-card:nth-child(14) { animation-delay: 1.15s; }
.sample-card:nth-child(15) { animation-delay: 1.20s; }
.sample-card:nth-child(16) { animation-delay: 1.25s; }
.sample-card:nth-child(17) { animation-delay: 1.30s; }
.sample-card:nth-child(18) { animation-delay: 1.35s; }
.sample-card:nth-child(19) { animation-delay: 1.40s; }
.sample-card:nth-child(20) { animation-delay: 1.45s; }

/* Dark Mode - Comprehensive Inversion */
body.dark-mode {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
}

body.dark-mode nav {
    background-color: #000000 !important;
    border-color: #333333 !important;
}

body.dark-mode #user-menu {
    background-color: #000000 !important;
    border-color: #333333 !important;
}

/* Convert white backgrounds to black (but not modals that are intentionally black) */
body.dark-mode .bg-white:not(#comments-modal):not(#comments-modal *):not(#donation-modal):not(#donation-modal *):not(#ad-modal):not(#ad-modal *):not(#flag-menu-popup):not(#flag-menu-popup *),
body.dark-mode .bg-gray-50:not(#comments-modal):not(#comments-modal *):not(#donation-modal):not(#donation-modal *):not(#ad-modal):not(#ad-modal *):not(#flag-menu-popup):not(#flag-menu-popup *),
body.dark-mode .bg-gray-100:not(#comments-modal):not(#comments-modal *):not(#donation-modal):not(#donation-modal *):not(#ad-modal):not(#ad-modal *):not(#flag-menu-popup):not(#flag-menu-popup *) {
    background-color: #000000 !important;
}

/* Modal backdrops should remain transparent - do NOT override their bg-opacity */
/* Only target the inner modal content containers, not the backdrop wrappers */

/* Convert black text to white */
body.dark-mode .text-black:not(#comments-modal *):not(#donation-modal *):not(#flag-menu-popup *) {
    color: #ffffff !important;
}

/* Modal text should be white */
body.dark-mode #comments-modal .text-black,
body.dark-mode #donation-modal .text-black,
body.dark-mode #flag-menu-popup .text-black {
    color: #ffffff !important;
}

/* Gray text becomes lighter */
body.dark-mode .text-gray-500,
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-700 {
    color: #cccccc !important;
}

/* All borders */
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300,
body.dark-mode .border-gray-400,
body.dark-mode [class*="border-gray"] {
    border-color: #333333 !important;
}

/* Hover states */
body.dark-mode .hover\:bg-gray-100:hover,
body.dark-mode .hover\:bg-gray-50:hover {
    background-color: #1a1a1a !important;
}

/* Sample cards and containers */
body.dark-mode .sample-card,
body.dark-mode .waveform-container {
    background-color: #000000 !important;
    border-color: #333333 !important;
}

/* Buttons */
body.dark-mode button.bg-black,
body.dark-mode .btn-black {
    background-color: #1a1a1a !important;
    color: #999 !important;
    border-color: #666 !important;
}

body.dark-mode .btn-black:hover {
    background-color: #2a2a2a !important;
    color: #fff !important;
}

body.dark-mode button.bg-white {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Profile page specific */
body.dark-mode .bg-gray-200 {
    background-color: #000000 !important;
}

/* Username color exceptions - only wavbox is red */
body.dark-mode .username {
    color: inherit !important;
}

body.dark-mode #header-username[data-username="wavbox"] {
    color: #ef4444 !important;
}

/* Dark mode - Remove waveform borders */
body.dark-mode .waveform-container {
    border: none !important;
}

/* Dark mode - Navigation and Footer (pure black) */
body.dark-mode nav {
    background-color: #000000 !important;
    border-color: #222222 !important;
}

body.dark-mode footer {
    background-color: #000000 !important;
    border-color: #222222 !important;
}

/* Dark mode - Cart button selected state */
body.dark-mode .add-to-cart.in-cart {
    background-color: #000000 !important;
    color: #ef4444 !important;
}

/* Dark mode - Panel backgrounds (the sliding panels themselves) */
body.dark-mode #cart-panel,
body.dark-mode #search-panel {
    background-color: #000000 !important;
}

/* Dark mode - Keep overlay transparent and dark (DO NOT override opacity) */
body.dark-mode #cart-overlay,
body.dark-mode #search-panel-overlay,
body.dark-mode #menu-overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Dark mode - Search panel text and inputs */
body.dark-mode #search-panel-input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #666666 !important;
}

body.dark-mode #search-panel-input::placeholder {
    color: #666666 !important;
}

body.dark-mode #search-panel h3,
body.dark-mode #search-panel span {
    color: #ffffff !important;
}

body.dark-mode #search-panel-close-btn {
    color: #ffffff !important;
}

body.dark-mode #search-panel-close-btn:hover {
    color: #ef4444 !important;
}

body.dark-mode #search-panel .border-gray-200 {
    border-color: #333333 !important;
}

body.dark-mode #search-panel .bg-gray-50 {
    background-color: #111111 !important;
}

/* Dark mode - Donation modal */
body.dark-mode #donation-modal .bg-white {
    background-color: #000000 !important;
}

body.dark-mode #donation-modal h3,
body.dark-mode #donation-modal label,
body.dark-mode #donation-modal .font-semibold,
body.dark-mode #donation-modal .text-gray-700,
body.dark-mode #donation-modal .text-gray-600 {
    color: #ffffff !important;
}

body.dark-mode #donation-modal .text-gray-500 {
    color: #999999 !important;
}

body.dark-mode #donation-modal .border-gray-200,
body.dark-mode #donation-modal .border-gray-300 {
    border-color: #333333 !important;
}

body.dark-mode #donation-modal input {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

body.dark-mode #donation-modal .network-btn,
body.dark-mode #donation-modal .token-btn {
    background-color: #111111 !important;
    border-color: #333333 !important;
}

body.dark-mode #donation-modal .network-btn:hover,
body.dark-mode #donation-modal .token-btn:hover {
    border-color: #ef4444 !important;
}

body.dark-mode #donation-modal .bg-blue-50 {
    background-color: #1a1a2e !important;
}

body.dark-mode #donation-modal .text-blue-800 {
    color: #6b9fff !important;
}

body.dark-mode #donation-modal .border-blue-200 {
    border-color: #334466 !important;
}

/* Dark mode - Ad/Donation modal (comprehensive) */
body.dark-mode #ad-modal {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

body.dark-mode #ad-modal > div {
    background: #000000 !important;
    border-color: #333333 !important;
}

body.dark-mode #ad-modal h2,
body.dark-mode #ad-modal h3,
body.dark-mode #ad-modal h4,
body.dark-mode #ad-modal .text-black {
    color: #ffffff !important;
}

body.dark-mode #ad-modal .text-gray-600,
body.dark-mode #ad-modal .text-gray-700 {
    color: #cccccc !important;
}

body.dark-mode #ad-modal .text-gray-500 {
    color: #999999 !important;
}

body.dark-mode #ad-modal .bg-white,
body.dark-mode #ad-modal .bg-gray-50 {
    background-color: #000000 !important;
}

body.dark-mode #ad-modal .border-gray-200,
body.dark-mode #ad-modal .border-gray-300 {
    border-color: #333333 !important;
}

body.dark-mode #ad-modal .border-black {
    border-color: #ffffff !important;
}

body.dark-mode #ad-modal .wallet-provider-btn {
    background-color: #000000 !important;
    border-color: #333333 !important;
}

body.dark-mode #ad-modal .wallet-provider-btn:hover {
    border-color: #ffffff !important;
}

body.dark-mode #ad-modal .bg-gradient-to-r,
body.dark-mode #ad-modal .bg-gradient-to-br {
    background: #000000 !important;
}

body.dark-mode #ad-modal #start-ads-btn {
    background: #ffffff !important;
    color: #000000 !important;
}

body.dark-mode #ad-modal #start-ads-btn:hover {
    background: #dddddd !important;
}

body.dark-mode #ad-modal #cancel-ads-btn {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

body.dark-mode #ad-modal #cancel-ads-btn:hover {
    background: #1a1a1a !important;
}

/* Dark mode - Downvote Modal */
body.dark-mode #downvote-modal .bg-white {
    background-color: #000000 !important;
}

body.dark-mode #downvote-modal .text-black,
body.dark-mode #downvote-modal h3 {
    color: #ffffff !important;
}

body.dark-mode #downvote-modal .text-gray-600,
body.dark-mode #downvote-modal .text-gray-500 {
    color: #cccccc !important;
}

body.dark-mode #downvote-modal .border-gray-300 {
    border-color: #333333 !important;
}

body.dark-mode #downvote-modal #downvote-reason-input {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

body.dark-mode #downvote-modal #downvote-reason-input:focus {
    border-color: #ffffff !important;
}

body.dark-mode #downvote-modal #submit-downvote-btn {
    background: #ffffff !important;
    color: #000000 !important;
}

body.dark-mode #downvote-modal #submit-downvote-btn:hover:not(:disabled) {
    background: #dddddd !important;
}

body.dark-mode #downvote-modal #submit-downvote-btn:disabled {
    background: #333333 !important;
    color: #666666 !important;
}

body.dark-mode #downvote-modal #cancel-downvote-btn {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

body.dark-mode #downvote-modal #cancel-downvote-btn:hover {
    background: #1a1a1a !important;
}

/* Dark mode - Download Modal */
body.dark-mode #download-modal .bg-white {
    background-color: #000000 !important;
}

body.dark-mode #download-modal .text-black {
    color: #ffffff !important;
}

body.dark-mode #download-modal .text-gray-600 {
    color: #cccccc !important;
}

body.dark-mode #download-modal .border-gray-200,
body.dark-mode #download-modal .border-gray-300 {
    border-color: #333333 !important;
}

body.dark-mode #download-modal .bg-gray-50 {
    background-color: #1a1a1a !important;
}

/* Dark mode - Form inputs (upload, settings, etc) */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode input[type="file"],
body.dark-mode input[type="color"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #888888 !important;
}

body.dark-mode label {
    color: #ffffff !important;
}

/* Dark mode - Form containers */
body.dark-mode .bg-white {
    background-color: #000000 !important;
}

body.dark-mode .bg-gray-50 {
    background-color: #000000 !important;
}

body.dark-mode .text-gray-700 {
    color: #cccccc !important;
}

body.dark-mode .text-gray-600 {
    color: #aaaaaa !important;
}

body.dark-mode .text-gray-500 {
    color: #999999 !important;
}

body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300 {
    border-color: #333333 !important;
}

/* Dark mode - Cart button hover */
body.dark-mode .cart-toggle-btn:hover {
    background-color: #1a1a1a !important;
}

body.dark-mode .cart-toggle-btn[data-in-cart="true"] {
    background-color: #000000 !important;
    color: #35a800 !important;
}

/* Dark mode - Username text (except wavbox which stays red) */
body.dark-mode .username-text {
    color: #ffffff !important;
}

body.dark-mode .username-text[style*="#ef4444"] {
    color: #ef4444 !important;
}

/* Dark mode - Footer text colors */
body.dark-mode footer .text-black {
    color: #ffffff !important;
}

body.dark-mode footer .text-gray-600 {
    color: #aaaaaa !important;
}

body.dark-mode footer .text-gray-600:hover {
    color: #ffffff !important;
}

body.dark-mode footer .text-gray-400 {
    color: #666666 !important;
}

/* Modern Custom Scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: #cccccc #f5f5f5;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 4px;
    transition: background 0.2s;
}

*::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

/* Dark mode scrollbars */
body.dark-mode * {
    scrollbar-color: #333333 #111111;
}

body.dark-mode *::-webkit-scrollbar-track {
    background: #111111;
}

body.dark-mode *::-webkit-scrollbar-thumb {
    background: #333333;
}

body.dark-mode *::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

/* Header slide-in animation */
nav {
    opacity: 0;
    transform: translateY(-100vh);
}

nav.slide-in {
    animation: slideInFromTop 0.6s ease-out forwards;
}

@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-100vh);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Dark-mode header/footer overrides (true black) === */
body.dark-mode nav {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

body.dark-mode nav a,
body.dark-mode nav button,
body.dark-mode nav .text-black,
body.dark-mode nav .text-gray-700,
body.dark-mode nav .text-gray-600 {
    color: #ffffff !important;
}

body.dark-mode footer {
    background-color: #000000 !important;
    border-top-color: #000000 !important;
    color: #ffffff !important;
}

body.dark-mode footer a,
body.dark-mode footer span,
body.dark-mode footer .text-gray-600 {
    color: #ffffff !important;
}

/* Ensure header logo and badges remain visible on true black */
body.dark-mode #header-logo { filter: none !important; }
body.dark-mode #header-cart-count-badge,
body.dark-mode #panel-cart-count-badge { background-color: #000000 !important; color: #ffffff !important; border: 1px solid #ffffff10; }