/*
Theme Name: NeonVault
Description: NeonVault band portal theme for live cover bands.
Author: NeonVault
Version: 11.0.0
*/

/* ── GOOGLE FONTS ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── COLOR TOKENS — NIGHT MODE (default) ─────────────────────────────────── */
:root {
    --bg-page:       #020814;
    --bg-page2:      #061228;
    --panel-bg1:     #03111F;
    --panel-bg2:     #07192B;
    --panel-border:  #18324D;
    --text-main:     #F3F7FF;
    --text-sec:      #B8C7DA;
    --text-muted:    #8DA1BC;
    --yellow:        #d4e800;
    --pink:          #F0179B;
    --green-ui:      #22c55e;
    --red-ui:        #ef4444;
    --blue-ui:       #60a5fa;
    --input-bg:      #0a1e32;
    --input-border:  #1e3f5c;
    --font-main:     'Inter', sans-serif;
}

/* ── DAY MODE OVERRIDES ───────────────────────────────────────────────────── */
body.nv-day {
    --bg-page:      #f5f5f5;
    --bg-page2:     #ebebeb;
    --panel-bg1:    #ffffff;
    --panel-bg2:    #f0f0f0;
    --panel-border: #dddddd;
    --text-main:    #222222;
    --text-sec:     #444444;
    --text-muted:   #777777;
    --input-bg:     #ffffff;
    --input-border: #cccccc;
}

/* ── PATRON PAGES — always light ──────────────────────────────────────────── */
body.nv-patron {
    --bg-page:      #f5f5f5;
    --bg-page2:     #f5f5f5;
    --panel-bg1:    #ffffff;
    --panel-bg2:    #ffffff;
    --panel-border: #dddddd;
    --text-main:    #222222;
    --text-sec:     #444444;
    --text-muted:   #777777;
}

/* ── BASE RESET ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
    font-family:      var(--font-main);
    background:       linear-gradient(160deg, var(--bg-page) 0%, var(--bg-page2) 100%);
    color:            var(--text-main);
    min-height:       100vh;
    padding-bottom:   64px;
    transition:       background 0.25s ease, color 0.25s ease;
}

a { color: var(--blue-ui); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* ── CARD / PANEL ─────────────────────────────────────────────────────────── */
.nv-card {
    background:    linear-gradient(160deg, var(--panel-bg1) 0%, var(--panel-bg2) 100%);
    border:        1px solid var(--panel-border);
    border-radius: 12px;
    padding:       20px;
    margin-bottom: 16px;
}

.nv-card-title {
    font-size:     14px;
    font-weight:   800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:         var(--text-muted);
    margin-bottom: 14px;
}

/* ── TYPOGRAPHY HELPERS ───────────────────────────────────────────────────── */
.nv-text-main  { color: var(--text-main); }
.nv-text-sec   { color: var(--text-sec); }
.nv-text-muted { color: var(--text-muted); }
.nv-text-yellow{ color: var(--yellow); }
.nv-text-pink  { color: var(--pink); }
.nv-text-green { color: var(--green-ui); }
.nv-text-red   { color: var(--red-ui); }

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.nv-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    font-family:     var(--font-main);
    font-size:       14px;
    font-weight:     700;
    padding:         10px 20px;
    border-radius:   8px;
    border:          2px solid var(--panel-border);
    background:      var(--panel-bg1);
    color:           var(--text-main);
    cursor:          pointer;
    transition:      filter 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}
.nv-btn:hover { filter: brightness(1.15); text-decoration: none; }

.nv-btn-yellow { border-color: var(--yellow);   color: var(--yellow); }
.nv-btn-pink   { border-color: var(--pink);     color: var(--pink); }
.nv-btn-green  { border-color: var(--green-ui); color: var(--green-ui); }
.nv-btn-red    { border-color: var(--red-ui);   color: var(--red-ui); }
.nv-btn-full   { width: 100%; }

/* ── PATRON BUTTON STYLE (public pages) ───────────────────────────────────── */
.nv-patron-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    font-family:     var(--font-main);
    font-size:       15px;
    font-weight:     700;
    padding:         12px 24px;
    border-radius:   8px;
    border:          2px solid #d4e800;
    background:      #1a1a6e;
    color:           #ffffff;
    cursor:          pointer;
    transition:      filter 0.15s ease;
    text-decoration: none;
    width:           100%;
    margin-bottom:   8px;
}
.nv-patron-btn:hover { filter: brightness(1.15); text-decoration: none; color: #ffffff; }

/* ── PILLS / BADGES ───────────────────────────────────────────────────────── */
.nv-pill {
    display:       inline-block;
    font-size:     11px;
    font-weight:   600;
    border-radius: 20px;
    padding:       3px 10px;
    border:        1px solid var(--panel-border);
    color:         var(--text-sec);
    margin:        2px;
}
.nv-pill-pink   { border-color: var(--pink);     color: var(--pink); }
.nv-pill-yellow { border-color: var(--yellow);   color: var(--yellow); }
.nv-pill-green  { border-color: var(--green-ui); color: var(--green-ui); }

/* ── PAGE CONTAINER ───────────────────────────────────────────────────────── */
.nv-container {
    max-width:  680px;
    margin:     0 auto;
    padding:    16px 16px 80px;
}

/* ── PAGE HEADER ──────────────────────────────────────────────────────────── */
.nv-page-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 16px 10px;
    position:        sticky;
    top:             0;
    z-index:         100;
    background:      linear-gradient(160deg, var(--bg-page) 0%, var(--bg-page2) 100%);
    border-bottom:   1px solid var(--panel-border);
}

.nv-page-title {
    font-size:   18px;
    font-weight: 800;
    color:       var(--text-main);
}

/* ── DAY/NIGHT TOGGLE ─────────────────────────────────────────────────────── */
.nv-toggle-btn {
    background:    transparent;
    border:        1px solid var(--panel-border);
    border-radius: 50%;
    width:         36px;
    height:        36px;
    font-size:     18px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    border-color 0.2s ease;
    flex-shrink:   0;
}
.nv-toggle-btn:hover { border-color: var(--yellow); }

/* ── BOTTOM NAVIGATION ────────────────────────────────────────────────────── */
.nv-bottom-nav {
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    height:          56px;
    background:      var(--panel-bg1);
    border-top:      1px solid var(--panel-border);
    display:         grid;
    grid-template-columns: repeat(3, 1fr);
    z-index:         999;
}

.nv-nav-tab {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             2px;
    font-size:       10px;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.05em;
    color:           var(--text-muted);
    cursor:          pointer;
    border:          none;
    background:      transparent;
    text-decoration: none;
    transition:      color 0.15s ease;
    position:        relative;
}

.nv-nav-tab svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }

.nv-nav-tab:hover     { color: var(--text-sec); }
.nv-nav-tab.nv-active { color: var(--yellow); }

.nv-nav-badge {
    position:      absolute;
    top:           6px;
    right:         calc(50% - 18px);
    background:    var(--pink);
    color:         #fff;
    font-size:     9px;
    font-weight:   800;
    border-radius: 10px;
    padding:       1px 5px;
    min-width:     16px;
    text-align:    center;
    line-height:   14px;
}

/* ── LIVE INDICATOR ───────────────────────────────────────────────────────── */
.nv-live-dot {
    display:       inline-block;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--green-ui);
    animation:     nv-pulse 1.4s infinite;
    margin-right:  5px;
    vertical-align: middle;
}
@keyframes nv-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.85); }
}

/* ── INPUT FIELDS (band portal) ───────────────────────────────────────────── */
.nv-input {
    width:         100%;
    background:    var(--input-bg);
    border:        1px solid var(--input-border);
    border-radius: 6px;
    padding:       8px 12px;
    font-family:   var(--font-main);
    font-size:     14px;
    color:         var(--text-main);
    outline:       none;
    transition:    border-color 0.15s ease;
}
.nv-input:focus { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(240,23,155,0.15); }

.nv-label {
    display:       block;
    font-size:     11px;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:         var(--text-muted);
    margin-bottom: 5px;
}

/* ── UTILITY ──────────────────────────────────────────────────────────────── */
.nv-divider { border: none; border-top: 1px solid var(--panel-border); margin: 16px 0; }
.nv-mt-8  { margin-top:  8px; }
.nv-mt-16 { margin-top: 16px; }
.nv-mb-8  { margin-bottom:  8px; }
.nv-mb-16 { margin-bottom: 16px; }
.nv-flex  { display: flex; align-items: center; }
.nv-flex-between { display: flex; align-items: center; justify-content: space-between; }
.nv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nv-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }