/*
Theme Name: VN Financial Group Support Portal
Theme URI: https://vnfinancialgroup.gr
Description: Custom support portal για τη VN Financial Group
Version: 1.2.0
Author: GuardLayer
Text Domain: nps
*/

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

:root {
    --nps-bg0:        #0b0d10;
    --nps-bg1:        #15171b;
    --nps-bg2:        #101216;
    --nps-panel:      rgba(255,255,255,.05);
    --nps-stroke:     rgba(255,255,255,.10);
    --nps-gold:       #b2a06a;
    --nps-gold-dark:  #8f7d49;
    --nps-blue:       #b2a06a;
    --nps-blue-dark:  #8f7d49;
    --nps-text:       #ffffff;
    --nps-muted:      rgba(255,255,255,.68);
    --nps-muted2:     rgba(255,255,255,.43);
    --nps-radius:     14px;
    --nps-radius-lg:  20px;
    --nps-shadow:     0 20px 60px rgba(0,0,0,.45);
    --nps-font:       'Roboto', system-ui, -apple-system, sans-serif;
}

html { scroll-behavior:smooth; }

body {
    font-family: var(--nps-font);
    background: var(--nps-bg0);
    color: var(--nps-text);
    line-height: 1.6;
    min-height: 100vh;
    background-image:
        radial-gradient(ellipse 900px 600px at 10% 10%, rgba(178,160,106,.12), transparent 60%),
        radial-gradient(ellipse 700px 500px at 90% 20%, rgba(255,255,255,.04), transparent 60%),
        radial-gradient(ellipse 600px 400px at 50% 90%, rgba(178,160,106,.07), transparent 60%);
}

a { color: var(--nps-gold); text-decoration:none; transition:color .2s; }
a:hover { color: #f5c842; }

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

h1,h2,h3,h4,h5,h6 {
    color: var(--nps-text);
    line-height:1.2;
    font-weight:600;
}

p { color: var(--nps-muted); margin-bottom:1em; }

/* ============================================================
   LAYOUT
   ============================================================ */
.nps-site { display:flex; flex-direction:column; min-height:100vh; }
.nps-main  { flex:1; }
.nps-container { width:min(1200px, 92vw); margin:0 auto; }
.nps-container--narrow { width:min(860px, 92vw); margin:0 auto; }

/* ============================================================
   HEADER
   ============================================================ */
.nps-header {
    position:sticky; top:0; z-index:999;
    background: rgba(7,14,26,.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--nps-stroke);
    box-shadow: 0 4px 30px rgba(0,0,0,.30);
}
.nps-header-inner {
    display:flex; align-items:center;
    justify-content:space-between;
    height:64px; gap:20px;
    width:min(1280px, 92vw); margin:0 auto; padding:0 20px;
}

/* Logo */
.nps-logo { display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.nps-logo-icon {
    width:40px; height:40px; border-radius:10px;
    background:linear-gradient(135deg, var(--nps-gold), var(--nps-gold-dark));
    display:flex; align-items:center; justify-content:center;
    font-size:20px; flex-shrink:0;
    box-shadow: 0 4px 14px rgba(178,160,106,.35);
}
.nps-logo-text { display:flex; flex-direction:column; }
.nps-logo-title { font-size:14px; font-weight:700; color:var(--nps-text); line-height:1.2; }
.nps-logo-sub   { font-size:11px; color:var(--nps-muted2); }

/* Nav */
.nps-nav { display:flex; align-items:center; gap:4px; flex:1; justify-content:center; }
.nps-nav-link {
    color:var(--nps-muted); text-decoration:none;
    font-size:14px; font-weight:500;
    padding:7px 14px; border-radius:8px;
    transition:all .2s; white-space:nowrap;
}
.nps-nav-link:hover { color:var(--nps-text); background:rgba(255,255,255,.07); }
.nps-nav-link.active { color:var(--nps-text); background:rgba(255,255,255,.08); }

.nps-nav-btn {
    background:linear-gradient(135deg, var(--nps-gold), var(--nps-gold-dark));
    color:#000 !important; text-decoration:none;
    font-size:14px; font-weight:700;
    padding:8px 18px; border-radius:10px;
    transition:all .2s;
    box-shadow: 0 4px 14px rgba(178,160,106,.30);
    white-space:nowrap;
}
.nps-nav-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(178,160,106,.45); color:#000 !important; }

/* User pill */
.nps-user {
    display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,.06); border:1px solid var(--nps-stroke);
    border-radius:999px; padding:5px 14px 5px 5px; flex-shrink:0;
}
.nps-user-avatar {
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg, var(--nps-gold), var(--nps-gold-dark));
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:700; color:#000; flex-shrink:0;
}
.nps-user-name { font-size:13px; font-weight:600; color:rgba(234,240,255,.85); }

/* Hamburger */
.nps-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; background:none; border:none; }
.nps-hamburger span { display:block; width:22px; height:2px; background:var(--nps-text); border-radius:2px; transition:.3s; }
.nps-mobile-nav { display:none; }

@media (max-width:768px) {
    .nps-nav { display:none; }
    .nps-hamburger { display:flex; }
    .nps-logo-sub, .nps-user-name { display:none; }
    .nps-mobile-nav {
        display:flex; flex-direction:column; gap:4px;
        padding:12px 20px 16px;
        border-top:1px solid var(--nps-stroke);
        background:rgba(7,14,26,.97);
    }
    .nps-mobile-nav a {
        color:var(--nps-muted); font-size:15px; font-weight:500;
        padding:10px 14px; border-radius:10px;
        text-decoration:none; transition:all .2s;
    }
    .nps-mobile-nav a:hover { background:rgba(255,255,255,.07); color:var(--nps-text); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.nps-footer {
    background:rgba(5,10,18,.80);
    border-top:1px solid var(--nps-stroke);
    padding:14px 0;
    margin-top:auto;
}
.nps-footer-inner {
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap;
    width:min(1280px, 92vw); margin:0 auto; padding:0 20px;
}
.nps-footer-left { display:flex; align-items:center; gap:12px; }
.nps-footer-icon {
    width:32px; height:32px; border-radius:8px;
    background:linear-gradient(135deg, var(--nps-gold), var(--nps-gold-dark));
    display:flex; align-items:center; justify-content:center; font-size:16px;
}
.nps-footer-title { display:block; font-size:13px; font-weight:700; color:var(--nps-text); line-height:1.25; }
.nps-footer-sub   { display:block; font-size:11px; color:var(--nps-muted2); margin-top:3px; line-height:1.25; }
.nps-footer-copy  { font-size:12px; color:var(--nps-muted2); }
.nps-footer-copy a { color:var(--nps-muted2); }
.nps-footer-copy a:hover { color:var(--nps-gold); }


/* ============================================================
   BUTTONS
   ============================================================ */
.nps-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    background:var(--nps-blue); color:#fff !important;
    padding:11px 24px; border-radius:var(--nps-radius);
    font-size:15px; font-weight:600; border:none; cursor:pointer;
    text-decoration:none; transition:all .2s;
    box-shadow: 0 4px 14px rgba(29,115,190,.25);
}
.nps-btn:hover { background:var(--nps-blue-dark); transform:translateY(-1px); color:#fff !important; }
.nps-btn--gold {
    background:linear-gradient(135deg, var(--nps-gold), var(--nps-gold-dark));
    color:#000 !important; box-shadow:0 4px 14px rgba(178,160,106,.30);
}
.nps-btn--gold:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(178,160,106,.45); color:#000 !important; }
.nps-btn--ghost {
    background:rgba(255,255,255,.06); color:var(--nps-muted) !important;
    border:1px solid var(--nps-stroke); box-shadow:none;
}
.nps-btn--ghost:hover { background:rgba(255,255,255,.10); color:var(--nps-text) !important; }
.nps-btn--full { width:100%; }
.nps-btn--lg { padding:14px 32px; font-size:16px; }

/* ============================================================
   CARDS
   ============================================================ */
.nps-card {
    background:var(--nps-panel);
    border:1px solid var(--nps-stroke);
    border-radius:var(--nps-radius-lg);
    padding:28px; position:relative; overflow:hidden;
    transition:all .3s;
    backdrop-filter:blur(10px);
}
.nps-card:hover {
    border-color:rgba(178,160,106,.25);
    transform:translateY(-4px);
    box-shadow:var(--nps-shadow);
}
.nps-card::before {
    content:""; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(178,160,106,.25), transparent);
}
.nps-card--gold {
    background:linear-gradient(135deg, rgba(178,160,106,.12), rgba(21,23,27,.40));
    border-color:rgba(178,160,106,.25);
}

/* ============================================================
   FORMS
   ============================================================ */
.nps-field { display:grid; gap:8px; }
.nps-field label { font-size:14px; font-weight:600; color:rgba(234,240,255,.90); }
.nps-input,
.nps-textarea {
    width:100%; padding:12px 14px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--nps-radius);
    color:var(--nps-text); font-size:15px;
    font-family:var(--nps-font);
    transition:border-color .2s, background .2s;
    box-sizing:border-box;
}
.nps-input::placeholder, .nps-textarea::placeholder { color:var(--nps-muted2); }
.nps-input:focus, .nps-textarea:focus {
    outline:none;
    border-color:rgba(178,160,106,.50);
    background:rgba(255,255,255,.09);
}
.nps-textarea { resize:vertical; min-height:120px; }

/* ============================================================
   ALERTS
   ============================================================ */
.nps-alert {
    padding:14px 16px; border-radius:var(--nps-radius);
    font-size:14px; font-weight:500; margin-bottom:20px;
}
.nps-alert--success {
    background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.30);
    color:#6ee7b7;
}
.nps-alert--error {
    background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.30);
    color:#fca5a5;
}
.nps-alert--info {
    background:rgba(29,115,190,.12); border:1px solid rgba(29,115,190,.30);
    color:#93c5fd;
}
.nps-alert--warning {
    background:rgba(178,160,106,.12); border:1px solid rgba(178,160,106,.30);
    color:#fcd34d;
}

/* ============================================================
   STATUS BADGES
   ============================================================ */
.nps-badge {
    display:inline-flex; align-items:center;
    padding:4px 12px; border-radius:999px;
    font-size:12px; font-weight:600;
}
.nps-badge--open   { background:rgba(254,243,199,.12); color:#fcd34d; border:1px solid rgba(254,243,199,.20); }
.nps-badge--progress { background:rgba(147,197,253,.12); color:#93c5fd; border:1px solid rgba(147,197,253,.20); }
.nps-badge--closed { background:rgba(148,163,184,.10); color:#94a3b8; border:1px solid rgba(148,163,184,.15); }

/* ============================================================
   TABLE
   ============================================================ */
.nps-table-wrap { overflow-x:auto; }
.nps-table { width:100%; border-collapse:collapse; font-size:14px; }
.nps-table th {
    text-align:left; padding:12px 14px;
    background:rgba(255,255,255,.05);
    border-bottom:1px solid var(--nps-stroke);
    font-weight:600; color:var(--nps-muted2);
    font-size:12px; letter-spacing:.06em; text-transform:uppercase;
}
.nps-table td {
    padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,.05);
    color:rgba(234,240,255,.85); vertical-align:middle;
}
.nps-table tr:hover td { background:rgba(255,255,255,.03); }

/* ============================================================
   UTILITIES
   ============================================================ */
.nps-sep {
    display:flex; align-items:center; gap:14px; opacity:.35; margin:8px 0;
}
.nps-sep-line { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--nps-gold),transparent); }
.nps-proto {
    display:inline-block;
    background:rgba(29,115,190,.25); color:#7dc4ff;
    font-size:12px; font-weight:700; font-family:monospace;
    padding:3px 10px; border-radius:6px;
}
.nps-back { color:var(--nps-gold); font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.nps-back:hover { color:#f5c842; }
.nps-empty { color:var(--nps-muted2); font-style:italic; padding:20px 0; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes npsFadeUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}
.nps-fade-up { animation:npsFadeUp .5s ease both; }
.nps-fade-up:nth-child(2) { animation-delay:.1s; }
.nps-fade-up:nth-child(3) { animation-delay:.2s; }

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation:none !important; transition:none !important; }
}