/*
 * Theme Name:  Neon Magic
 * Theme URI:   https://github.com/chrismccoy/neonmagic
 * Description: A digital downloads theme with support for free and paid files. Paid items link to an external buy URL; free items display a direct download button.
 * Version:     1.0.0
 * Author:      Chris McCoy
 * Author URI:  https://example.com
 * Text Domain: neonmagic
 */

:root {
    --pop-cyan:   #5CE1E6;
    --pop-yellow: #FFDE59;
    --pop-pink:   #FF90E8;
    --pop-black:  #000000;
    --pop-white:  #FFFFFF;
}

::-webkit-scrollbar       { width: 16px; }
::-webkit-scrollbar-track { background: #fff; border-left: 2px solid #000; }
::-webkit-scrollbar-thumb { background: #000; border: 2px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: var(--pop-yellow); }

::selection { background: var(--pop-black); color: var(--pop-yellow); }

.nm-meta-box { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.nm-meta-box table { width: 100%; border-collapse: collapse; }
.nm-meta-box th { text-align: left; padding: 8px 10px 8px 0; width: 140px; font-weight: 600; vertical-align: top; padding-top: 12px; }
.nm-meta-box td { padding: 6px 0; }
.nm-meta-box input[type="text"],
.nm-meta-box input[type="url"],
.nm-meta-box input[type="number"],
.nm-meta-box textarea,
.nm-meta-box select { width: 100%; border: 2px solid #000; padding: 6px 8px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; outline: none; }
.nm-meta-box input[type="text"]:focus,
.nm-meta-box input[type="url"]:focus,
.nm-meta-box input[type="number"]:focus,
.nm-meta-box textarea:focus { border-color: #5CE1E6; box-shadow: 2px 2px 0 0 #000; }
.nm-meta-box .nm-section-heading { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #555; border-bottom: 2px solid #000; padding-bottom: 4px; margin: 12px 0 6px; }
.nm-toggle-paid { display: none; }
.nm-toggle-free { display: none; }

.nm-changelog-entry { border: 2px solid #000; padding: 12px; margin-bottom: 8px; background: #fafafa; position: relative; }
.nm-changelog-entry .nm-remove-entry { position: absolute; top: 8px; right: 8px; background: #000; color: #fff; border: none; cursor: pointer; width: 24px; height: 24px; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.nm-changelog-entry .nm-remove-entry:hover { background: #FF90E8; color: #000; }
.nm-entry-row { display: flex; gap: 8px; margin-bottom: 6px; }
.nm-entry-row label { font-size: 11px; font-weight: 600; text-transform: uppercase; display: block; margin-bottom: 2px; }
.nm-entry-changes { width: 100%; }
.nm-add-btn { background: #5CE1E6; border: 2px solid #000; padding: 6px 14px; cursor: pointer; font-weight: 700; font-size: 12px; text-transform: uppercase; box-shadow: 3px 3px 0 0 #000; }
.nm-add-btn:hover { background: #FFDE59; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 #000; }

.nm-gallery-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; min-height: 60px; border: 2px dashed #ccc; padding: 8px; }
.nm-gallery-item { position: relative; width: 80px; height: 80px; border: 2px solid #000; overflow: hidden; cursor: pointer; }
.nm-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.nm-gallery-item .nm-gallery-remove { position: absolute; top: 2px; right: 2px; background: #000; color: #fff; width: 20px; height: 20px; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.2s; }
.nm-gallery-item:hover .nm-gallery-remove { opacity: 1; }
.nm-gallery-item .nm-gallery-remove:hover { background: #FF90E8; color: #000; }

.nm-req-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.nm-req-row select { width: 90px; flex-shrink: 0; }
.nm-req-row input { flex-grow: 1; }
.nm-req-row .nm-req-remove { background: #000; color: #fff; border: none; width: 28px; height: 28px; cursor: pointer; font-size: 14px; flex-shrink: 0; }
.nm-req-row .nm-req-remove:hover { background: #FF90E8; color: #000; }