/* ============================================
   RAVE FLYER ARCHIVE - RETRO 90s WEB AESTHETIC
   ============================================ */

/* CSS Variables */
:root {
    --neon-pink: #ff00ff;
    --neon-cyan: #00ffff;
    --neon-green: #00ff00;
    --neon-yellow: #ffff00;
    --neon-orange: #ff6600;
    --purple: #9933ff;
    --dark-bg: #000033;
    --darker-bg: #000022;
    --panel-bg: #111144;
    --border-color: #6666ff;
    --text-primary: #ffffff;
    --text-secondary: #ccccff;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'VT323', monospace;
    background: var(--dark-bg);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    font-size: 18px;
    line-height: 1.4;
}

/* Animated Starfield Background */
.starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background:
        radial-gradient(ellipse at center, var(--dark-bg) 0%, var(--darker-bg) 100%);
    overflow: hidden;
}

.starfield::before,
.starfield::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow:
        50px 100px white, 150px 50px white, 250px 200px white,
        350px 80px white, 450px 300px white, 550px 150px white,
        650px 250px white, 750px 50px white, 850px 180px white,
        950px 320px white, 100px 400px white, 200px 350px white,
        300px 450px white, 400px 500px white, 500px 420px white,
        600px 380px white, 700px 480px white, 800px 550px white,
        900px 400px white, 1000px 520px white, 80px 600px white,
        180px 680px white, 280px 720px white, 380px 650px white,
        480px 700px white, 580px 620px white, 680px 750px white,
        780px 680px white, 880px 730px white, 980px 650px white;
    animation: twinkle 4s ease-in-out infinite;
}

.starfield::after {
    animation-delay: 2s;
    transform: translateX(100px);
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Header */
.header {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(180deg, var(--panel-bg) 0%, transparent 100%);
    border-bottom: 3px solid var(--neon-pink);
    position: relative;
}

.header::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--neon-cyan);
}

.title {
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(16px, 4vw, 32px);
    margin-bottom: 15px;
    text-shadow:
        0 0 10px var(--neon-pink),
        0 0 20px var(--neon-pink),
        0 0 30px var(--neon-pink);
}

.title-rave {
    color: var(--neon-pink);
    animation: colorCycle1 3s ease-in-out infinite;
}

.title-flyer {
    color: var(--neon-cyan);
    animation: colorCycle2 3s ease-in-out infinite;
}

.title-archive {
    color: var(--neon-green);
    animation: colorCycle3 3s ease-in-out infinite;
}

@keyframes colorCycle1 {
    0%, 100% { color: var(--neon-pink); }
    33% { color: var(--neon-yellow); }
    66% { color: var(--neon-orange); }
}

@keyframes colorCycle2 {
    0%, 100% { color: var(--neon-cyan); }
    33% { color: var(--neon-pink); }
    66% { color: var(--neon-green); }
}

@keyframes colorCycle3 {
    0%, 100% { color: var(--neon-green); }
    33% { color: var(--neon-cyan); }
    66% { color: var(--purple); }
}

.subtitle {
    font-size: 24px;
    color: var(--neon-yellow);
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.collection-note {
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: var(--neon-pink);
    margin-bottom: 15px;
    letter-spacing: 1px;
    opacity: 0.9;
}

.counter {
    font-size: 20px;
    color: var(--neon-cyan);
    padding: 10px 20px;
    border: 2px solid var(--neon-cyan);
    display: inline-block;
    background: rgba(0, 255, 255, 0.1);
}

.counter span {
    color: var(--neon-green);
    font-weight: bold;
}

/* Main Layout */
.main-content {
    display: flex;
    min-height: calc(100vh - 200px);
}

/* Filters Panel */
.filters-panel {
    width: 280px;
    min-width: 280px;
    background: var(--panel-bg);
    border-right: 3px solid var(--border-color);
    padding: 20px;
    overflow-y: auto;
    max-height: calc(100vh - 180px);
    position: sticky;
    top: 0;
}

.filters-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: var(--neon-pink);
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--neon-pink);
}

.filter-section {
    margin-bottom: 25px;
}

.filter-label {
    font-size: 16px;
    color: var(--neon-cyan);
    margin-bottom: 10px;
    padding: 5px;
    background: rgba(0, 255, 255, 0.1);
    border-left: 3px solid var(--neon-cyan);
}


/* Search Inputs */
.search-input {
    width: 100%;
    padding: 10px;
    font-family: 'VT323', monospace;
    font-size: 18px;
    background: var(--darker-bg);
    border: 2px solid var(--border-color);
    color: var(--neon-green);
    outline: none;
}

.search-input.global-search {
    font-size: 20px;
    padding: 12px;
    border-color: var(--neon-pink);
    color: var(--neon-yellow);
}

.search-input.global-search:focus {
    border-color: var(--neon-yellow);
    box-shadow: 0 0 15px var(--neon-yellow);
}

.search-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 5px;
    font-style: italic;
}

.search-input:focus {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
}

.search-input::placeholder {
    color: #666699;
}

/* Suggestions Dropdown */
.suggestions-list {
    max-height: 150px;
    overflow-y: auto;
    background: var(--darker-bg);
    border: 2px solid var(--border-color);
    border-top: none;
    display: none;
}

.suggestions-list.active {
    display: block;
}

.suggestion-item {
    padding: 8px 10px;
    cursor: pointer;
    color: var(--text-secondary);
}

.suggestion-item:hover {
    background: var(--neon-pink);
    color: var(--darker-bg);
}

/* Checkbox Group */
.checkbox-group {
    max-height: 200px;
    overflow-y: auto;
    padding: 5px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}

.checkbox-label {
    display: flex;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 16px;
}

.checkbox-label:hover {
    color: var(--neon-cyan);
}

.checkbox-label input {
    display: none;
}

.checkmark {
    width: 16px;
    height: 16px;
    border: 2px solid var(--neon-cyan);
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.checkbox-label input:checked + .checkmark {
    background: var(--neon-cyan);
    color: var(--darker-bg);
}

.checkbox-label input:checked + .checkmark::after {
    content: 'X';
}

/* Reset Button */
.reset-btn {
    width: 100%;
    padding: 15px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    background: transparent;
    border: 3px solid var(--neon-pink);
    color: var(--neon-pink);
    cursor: pointer;
    transition: all 0.3s;
}

.reset-btn:hover {
    background: var(--neon-pink);
    color: var(--darker-bg);
    box-shadow: 0 0 20px var(--neon-pink);
}

.video-section {
    margin-top: 20px;
    border: 2px solid var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
}

.video-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: var(--neon-cyan);
    text-align: center;
    padding: 8px;
    margin: 0;
    background: rgba(0, 255, 255, 0.1);
    border-bottom: 1px solid var(--neon-cyan);
}

.video-section iframe {
    display: block;
}

/* Content Area */
.content-area {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.section-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    color: var(--neon-green);
    margin-bottom: 15px;
    padding: 10px;
    background: linear-gradient(90deg, rgba(0, 255, 0, 0.2) 0%, transparent 100%);
    border-left: 4px solid var(--neon-green);
}

/* Timeline */
.timeline-section {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--dark-bg);
    padding: 10px 0 15px 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--neon-pink);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.timeline-section .section-title {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.timeline-hint {
    font-family: 'VT323', monospace;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: normal;
}

.timeline-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.timeline-ctrl-btn {
    padding: 5px 12px;
    font-family: 'VT323', monospace;
    font-size: 16px;
    background: transparent;
    border: 2px solid var(--neon-cyan);
    color: var(--neon-cyan);
    cursor: pointer;
    transition: all 0.2s;
}

.timeline-ctrl-btn:hover {
    background: var(--neon-cyan);
    color: var(--darker-bg);
}

.timeline-container {
    background: var(--panel-bg);
    border: 2px solid var(--border-color);
    padding: 8px;
    overflow: hidden;
    min-height: 160px;
    cursor: grab;
}

.timeline-container:active {
    cursor: grabbing;
}

#timeline-svg {
    width: 100%;
    height: 140px;
    display: block;
}

/* Clip path for zoomed content */
.timeline-clip rect {
    fill: none;
}

/* Timeline D3 Styles */
.timeline-axis text {
    font-family: 'VT323', monospace;
    font-size: 16px;
    fill: var(--neon-cyan);
}

.timeline-axis line,
.timeline-axis path {
    stroke: var(--border-color);
}

.timeline-dot {
    cursor: pointer;
    transition: all 0.2s;
}

.timeline-dot:hover {
    filter: drop-shadow(0 0 10px currentColor);
}

.timeline-dot.filtered-out {
    opacity: 0.2;
}

/* Unknown date markers - diamond shape with question mark */
.timeline-unknown {
    transition: all 0.2s;
}

.timeline-unknown:hover {
    filter: drop-shadow(0 0 10px #ff6600) drop-shadow(0 0 20px #ff6600);
}

.timeline-unknown.filtered-out {
    opacity: 0.2;
}

.timeline-unknown rect {
    animation: pulse-unknown 2s ease-in-out infinite;
}

@keyframes pulse-unknown {
    0%, 100% {
        filter: drop-shadow(0 0 2px #ff6600);
    }
    50% {
        filter: drop-shadow(0 0 6px #ff6600);
    }
}

.timeline-tooltip {
    position: absolute;
    background: var(--panel-bg);
    border: 2px solid var(--neon-pink);
    padding: 8px 12px;
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: var(--neon-yellow);
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;
}

/* Flyers Grid */
.flyers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.flyer-card {
    background: var(--panel-bg);
    border: 3px solid var(--border-color);
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.flyer-card:hover {
    border-color: var(--neon-pink);
    box-shadow: 0 0 20px var(--neon-pink);
    transform: translateY(-5px);
}

.flyer-card.filtered-out {
    opacity: 0.3;
    filter: grayscale(80%);
}

.flyer-image {
    width: 100%;
    height: 250px;
    object-fit: contain;
    background: var(--darker-bg);
    border: 1px solid var(--border-color);
}

.flyer-info {
    padding-top: 10px;
}

.flyer-name {
    font-size: 18px;
    color: var(--neon-cyan);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flyer-date {
    font-size: 16px;
    color: var(--neon-yellow);
}

.flyer-badges {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
}

.flyer-badge {
    background: var(--neon-pink);
    color: var(--darker-bg);
    font-size: 12px;
    padding: 2px 6px;
    font-weight: bold;
}

.badge-2sided {
    background: var(--neon-pink);
}

.badge-comments {
    background: var(--neon-cyan);
    display: flex;
    align-items: center;
    gap: 3px;
}

.badge-comments .badge-icon {
    font-size: 11px;
}

.badge-estimated {
    background: var(--neon-orange);
    font-size: 14px;
    padding: 2px 8px;
    border-radius: 50%;
}

.estimated-date {
    color: var(--neon-orange);
    font-style: italic;
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 51, 0.95);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    background: var(--panel-bg);
    border: 4px solid var(--neon-pink);
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 50px var(--neon-pink);
}

.lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: 2px solid var(--neon-pink);
    color: var(--neon-pink);
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    padding: 8px 12px;
    cursor: pointer;
    z-index: 10;
}

.lightbox-close:hover {
    background: var(--neon-pink);
    color: var(--darker-bg);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--panel-bg);
    border: 3px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-family: 'VT323', monospace;
    font-size: 32px;
    padding: 20px 15px;
    cursor: pointer;
    z-index: 10;
}

.lightbox-nav:hover {
    background: var(--neon-cyan);
    color: var(--darker-bg);
}

.lightbox-prev {
    left: 10px;
}

.lightbox-next {
    right: 10px;
}

.lightbox-main {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}

.lightbox-images {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

.image-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    background: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
}

.tab-btn.active {
    background: var(--neon-cyan);
    border-color: var(--neon-cyan);
    color: var(--darker-bg);
}

.tab-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.image-container {
    background: var(--darker-bg);
    border: 2px solid var(--border-color);
    min-height: 400px;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Zoom container */
.zoom-container {
    flex: 1;
    overflow: hidden;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
}

.zoom-container:active {
    cursor: grabbing;
}

.zoom-container.zoomed {
    cursor: grab;
}

#lightbox-image {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    transition: transform 0.1s ease-out;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
}

#lightbox-image.zoomed {
    max-width: none;
    max-height: none;
}

/* Zoom controls */
.zoom-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid var(--border-color);
}

.zoom-btn {
    width: 40px;
    height: 40px;
    background: var(--panel-bg);
    border: 2px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-family: 'VT323', monospace;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.zoom-btn:hover {
    background: var(--neon-cyan);
    color: var(--darker-bg);
}

.zoom-hint {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    padding: 5px;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
}

.fullscreen-btn {
    width: auto;
    padding: 8px 16px;
    font-size: 12px;
}

/* Fullscreen overlay */
.fullscreen-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: #000;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2000;
}

.fullscreen-overlay.active {
    display: block;
}

#fullscreen-image {
    display: none;
}

.fullscreen-close {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--neon-pink);
    color: var(--neon-pink);
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    padding: 12px 16px;
    cursor: pointer;
    z-index: 2001;
    transition: all 0.2s;
}

.fullscreen-close:hover {
    background: var(--neon-pink);
    color: #000;
}

.lightbox-details {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

.lightbox-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    color: var(--neon-pink);
    margin-bottom: 20px;
    text-shadow: 0 0 10px var(--neon-pink);
}

.detail-row {
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--neon-cyan);
}

.detail-label {
    color: var(--neon-cyan);
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
}

.detail-value {
    color: var(--neon-yellow);
    font-size: 20px;
}

.detail-section {
    margin-top: 20px;
}

.details-list {
    list-style: none;
    padding-left: 10px;
    margin-top: 10px;
}

.details-list li {
    padding: 5px 0;
    color: var(--text-secondary);
    border-bottom: 1px dashed var(--border-color);
}

.details-list li::before {
    content: '> ';
    color: var(--neon-green);
}

/* Footer */
.footer {
    text-align: center;
    padding: 20px;
    border-top: 3px solid var(--neon-cyan);
    background: var(--panel-bg);
}

.footer p {
    margin: 5px 0;
}

.footer-small {
    font-size: 14px;
    color: var(--text-secondary);
}

.blink {
    animation: blink 1s step-start infinite;
    color: var(--neon-yellow);
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--darker-bg);
    border: 1px solid var(--border-color);
}

::-webkit-scrollbar-thumb {
    background: var(--neon-pink);
    border: 2px solid var(--darker-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon-cyan);
}

/* Responsive */
@media (max-width: 900px) {
    .main-content {
        flex-direction: column;
    }

    .filters-panel {
        width: 100%;
        max-height: none;
        position: relative;
        border-right: none;
        border-bottom: 3px solid var(--border-color);
    }

    .lightbox-main {
        flex-direction: column;
    }

    .lightbox-nav {
        padding: 10px;
        font-size: 24px;
    }
}

/* Unknown date styling */
.unknown-date {
    color: var(--neon-orange);
    font-style: italic;
}

/* ============================================
   COMMENTS SECTION
   ============================================ */

.comments-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px dashed var(--neon-pink);
}

.comments-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: var(--neon-green);
    margin-bottom: 15px;
    text-shadow: 0 0 10px var(--neon-green);
}

/* Comment Form */
.comment-form {
    margin-bottom: 20px;
}

.comment-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    font-family: 'VT323', monospace;
    font-size: 18px;
    background: var(--darker-bg);
    border: 2px solid var(--border-color);
    color: var(--neon-green);
    resize: vertical;
    outline: none;
}

.comment-textarea:focus {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
}

.comment-textarea::placeholder {
    color: #666699;
}

.captcha-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid var(--neon-cyan);
}

.captcha-label {
    color: var(--neon-cyan);
    font-size: 14px;
    font-family: 'Press Start 2P', cursive;
}

.captcha-question {
    color: var(--neon-yellow);
    font-size: 22px;
    font-weight: bold;
    min-width: 100px;
}

.captcha-input {
    width: 60px;
    padding: 8px;
    font-family: 'VT323', monospace;
    font-size: 20px;
    background: var(--darker-bg);
    border: 2px solid var(--neon-green);
    color: var(--neon-green);
    text-align: center;
    outline: none;
}

.captcha-input:focus {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
}

.captcha-refresh {
    padding: 8px 12px;
    font-family: 'VT323', monospace;
    font-size: 18px;
    background: transparent;
    border: 2px solid var(--neon-orange);
    color: var(--neon-orange);
    cursor: pointer;
    transition: all 0.2s;
}

.captcha-refresh:hover {
    background: var(--neon-orange);
    color: var(--darker-bg);
}

.comment-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.submit-comment-btn {
    padding: 12px 20px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    background: transparent;
    border: 2px solid var(--neon-green);
    color: var(--neon-green);
    cursor: pointer;
    transition: all 0.3s;
}

.submit-comment-btn:hover:not(:disabled) {
    background: var(--neon-green);
    color: var(--darker-bg);
    box-shadow: 0 0 20px var(--neon-green);
}

.submit-comment-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #666699;
    color: #666699;
}

.comment-status {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    display: none;
}

.comment-status.success {
    display: block;
    color: var(--neon-green);
    border-left: 3px solid var(--neon-green);
    background: rgba(0, 255, 0, 0.1);
}

.comment-status.error {
    display: block;
    color: var(--neon-pink);
    border-left: 3px solid var(--neon-pink);
    background: rgba(255, 0, 255, 0.1);
}

/* Comments List */
.comments-list {
    max-height: 300px;
    overflow-y: auto;
}

.comments-loading {
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
    font-style: italic;
}

.no-comments {
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
    font-style: italic;
    border: 1px dashed var(--border-color);
}

.comment-item {
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--neon-cyan);
}

.comment-item:hover {
    border-left-color: var(--neon-pink);
}

.comment-text {
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 8px;
    word-wrap: break-word;
}

.comment-meta {
    font-size: 14px;
    color: var(--text-secondary);
}

.comment-date {
    color: var(--neon-yellow);
}

.comment-count {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding: 5px 10px;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid var(--neon-cyan);
    display: inline-block;
}

/* Responsive adjustments for comments */
@media (max-width: 600px) {
    .captcha-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .captcha-label {
        font-size: 10px;
    }

    .comment-form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .submit-comment-btn {
        width: 100%;
    }
}