/* ============================================================
   WARIA - Complete Dark Fantasy Theme for ZnoteAAC
   File: C:\xampp\htdocs\znoteaac\layout\css\waria_theme.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    --gold: #C9A84C; --gold-light: #E8C96A; --gold-dark: #6B4A14;
    --bg-body: #04060A; --bg-dark: #080C12; --bg-panel: rgba(8,12,18,0.97);
    --border: rgba(40,60,80,0.8); --border-gold: rgba(107,74,20,0.7);
    --text: #7A8A9A; --text-light: #B0C0D0; --text-white: #D8E8F0;
    --online: #4CAF50; --glow-gold: 0 0 20px rgba(201,168,76,0.3);
}

/* ---- FULL WIDTH BODY ---- */
html, body { width:100%; min-height:100vh; margin:0; padding:0; overflow-x:hidden; }

body {
    background-color: var(--bg-body);
    background-image: url('../img/waria_bg.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text);
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 17px;
    line-height: 1.6;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(4,6,10,0.78);
    pointer-events: none;
    z-index: 0;
}

/* ---- MAIN CONTAINER ---- */
.main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
}

.feedContainer {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 24px 30px !important;
    overflow: visible !important;
    box-sizing: border-box;
}

.leftPane  { width: 72% !important; padding-right: 24px; float: left; box-sizing: border-box; }
.rightPane { width: 27% !important; float: right; box-sizing: border-box; }

/* ---- NAV ---- */
nav {
    border: none !important;
    background: rgba(4,6,10,0.98) !important;
    border-bottom: 1px solid var(--border-gold) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.8) !important;
    position: sticky; top: 0; z-index: 1000; width: 100%;
}
nav .container { max-width: 1400px; margin: 0 auto; padding: 0 20px !important; }
nav .container > div > ul > li > a {
    color: var(--text-light) !important; font-family: 'Cinzel',serif !important;
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: 2px !important;
    text-transform: uppercase !important; padding: 20px 14px !important; transition: color 0.3s !important;
}
nav .container > div > ul > li > a:hover { color: var(--gold) !important; }
nav .container > div > ul > li > ul {
    background: #080C12 !important; border: 1px solid var(--border-gold) !important;
    border-top: none !important; width: 180px !important; box-shadow: 0 8px 30px rgba(0,0,0,0.8) !important;
}
nav .container > div > ul > li > ul > li > a {
    color: var(--text) !important; font-family: 'Cinzel',serif !important;
    font-size: 10px !important; letter-spacing: 1px !important; text-transform: uppercase !important;
    padding: 10px 16px !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
nav .container > div > ul > li > ul > li > a:hover { color: var(--gold) !important; background: rgba(201,168,76,0.05) !important; }

/* ---- BANNER ---- */
.banner {
    display: none !important;
}

/* ---- PANELS ---- */
.well {
    background: var(--bg-panel) !important; border: 1px solid var(--border) !important;
    border-radius: 3px !important; margin-bottom: 16px !important; position: relative; overflow: hidden;
}
.well::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
    pointer-events: none;
}

/* ---- HEADERS ---- */
.header, table.header td, .well > .header,
.TableContainer > table > thead > tr > td {
    background: linear-gradient(135deg, rgba(25,38,55,0.9), rgba(10,16,24,0.9)) !important;
    border-bottom: 1px solid var(--border-gold) !important;
    color: var(--gold) !important; font-family: 'Cinzel',serif !important;
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: 2px !important; text-transform: uppercase !important; padding: 12px 14px !important;
}

/* ---- TABLES ---- */
table { width: 100%; border-collapse: collapse; }
td, th { padding: 10px 14px !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; color: var(--text) !important; font-size: 16px !important; }
tr:nth-child(even) { background: rgba(255,255,255,0.02) !important; }
tr:hover { background: rgba(201,168,76,0.04) !important; }

/* ---- BUTTONS ---- */
button, input[type="submit"], .btn, .button {
    background: linear-gradient(135deg, #182430, #0C1420) !important;
    border: 1px solid var(--gold-dark) !important; border-radius: 3px !important;
    color: var(--gold) !important; font-family: 'Cinzel',serif !important;
    font-size: 11px !important; font-weight: 700 !important; letter-spacing: 2px !important;
    text-transform: uppercase !important; padding: 9px 18px !important; cursor: pointer !important; transition: all 0.3s !important;
}
button:hover, input[type="submit"]:hover, .btn:hover {
    border-color: var(--gold) !important; box-shadow: var(--glow-gold) !important; color: var(--gold-light) !important;
}

/* ---- FORMS ---- */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
    background: rgba(4,6,10,0.8) !important; border: 1px solid var(--border) !important;
    border-radius: 3px !important; color: var(--text-light) !important;
    font-family: 'Crimson Text',serif !important; font-size: 15px !important; padding: 7px 10px !important;
}
input:focus, select:focus { border-color: var(--gold-dark) !important; outline: none !important; }

/* ---- LINKS ---- */
a { color: var(--gold-light) !important; text-decoration: none !important; }
a:hover { color: var(--gold) !important; }

/* ---- RIGHT PANE ---- */
.rightPane .well { padding: 0 !important; }
.rightPane td { font-size: 15px !important; padding: 9px 12px !important; }
.rightPane input[type="text"] { font-size: 15px !important; }

/* ---- FOOTER ---- */
footer, #footer, .footer {
    background: linear-gradient(0deg, rgba(4,6,10,1), rgba(8,12,18,0.95)) !important;
    border-top: 1px solid var(--border-gold) !important; color: var(--text) !important;
    font-family: 'Cinzel',serif !important; font-size: 10px !important; letter-spacing: 1px !important;
    padding: 16px 30px !important; text-align: center !important; clear: both;
}

/* ---- ALERTS ---- */
.alert-danger { background: rgba(60,14,14,0.8) !important; border: 1px solid #350505 !important; color: #E05050 !important; border-radius: 3px; padding: 10px 14px; }
.alert-success { background: rgba(0,60,20,0.8) !important; border: 1px solid #004010 !important; color: #50E080 !important; border-radius: 3px; padding: 10px 14px; }

/* ---- BUY POINTS ---- */
.points-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:20px; }
.points-card {
    background: linear-gradient(135deg, rgba(15,25,38,0.97), rgba(8,14,22,0.97));
    border: 1px solid var(--border-gold); border-radius: 6px; padding: 28px 20px;
    text-align: center; position: relative; overflow: hidden; transition: all 0.3s;
}
.points-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.points-card:hover { border-color:var(--gold); box-shadow:var(--glow-gold); transform:translateY(-3px); }
.points-card.featured { border-color:var(--gold); box-shadow:var(--glow-gold); }
.points-card.featured::after { content:'BEST VALUE'; position:absolute; top:14px; right:-18px; background:var(--gold); color:#000; font-family:'Cinzel',serif; font-size:8px; font-weight:700; letter-spacing:1px; padding:3px 28px; transform:rotate(35deg); }
.points-amount { color:var(--gold); font-family:'Cinzel Decorative',serif; font-size:48px; font-weight:700; line-height:1; margin-bottom:4px; text-shadow:0 0 20px rgba(201,168,76,0.4); }
.points-label { color:var(--text); font-family:'Cinzel',serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; margin-bottom:20px; }
.points-price { color:var(--text-white); font-family:'Cinzel',serif; font-size:24px; font-weight:700; margin-bottom:6px; }
.points-price span { color:var(--text); font-size:13px; font-weight:400; }
.points-perpoint { color:var(--text); font-size:12px; margin-bottom:20px; }
.points-btn { display:block; width:100%; background:linear-gradient(135deg,var(--gold-dark),#4A2E08) !important; border:1px solid var(--gold) !important; border-radius:3px !important; color:#000 !important; font-family:'Cinzel',serif !important; font-size:11px !important; font-weight:700 !important; letter-spacing:2px !important; text-transform:uppercase !important; padding:12px 20px !important; cursor:pointer; transition:all 0.3s; }
.points-btn:hover { box-shadow:var(--glow-gold) !important; }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-body); }
::-webkit-scrollbar-thumb { background:var(--gold-dark); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }

hr { border:none !important; height:1px !important; background:linear-gradient(90deg,transparent,var(--border-gold),transparent) !important; margin:16px 0 !important; }

/* ---- RESPONSIVE ---- */
@media(max-width:900px) {
    .leftPane { width:100% !important; float:none !important; padding-right:0 !important; }
    .rightPane { width:100% !important; float:none !important; }
    .points-grid { grid-template-columns:1fr !important; }
}


/* ---- REMOVE EXTRA BORDER LINES ---- */
.well.banner { display: none !important; }
.topPane { display: none !important; }

/* Remove the top and bottom separator lines */
.feedContainer > .well:first-child::before,
.feedContainer > .well:last-child::after { display: none !important; }

/* Bigger body text */
body { font-size: 16px !important; }

/* Bigger nav text */
nav .container > div > ul > li > a { font-size: 12px !important; }

/* Bigger header text in panels */
.header { font-size: 12px !important; }

/* Bigger button text */
button, input[type="submit"] { font-size: 12px !important; padding: 10px 20px !important; }

/* Bigger form inputs */
input[type="text"], input[type="password"], input[type="email"], select { font-size: 16px !important; padding: 9px 12px !important; }

/* Remove the horizontal line behind content panels */
.feedContainer { border: none !important; background: transparent !important; }
.feedContainer::before, .feedContainer::after { display: none !important; }

/* Hide empty wells that create the blank bars */
.well:empty { display: none !important; }


/* ---- HIDE BLANK BARS ---- */
/* The blank bar at top is the .banner div - hide it */
div.well.banner,
.banner { display: none !important; height: 0 !important; }

/* Remove borders creating visible lines */
nav { border-bottom: 1px solid rgba(107,74,20,0.5) !important; }

/* Tighten up spacing */
.feedContainer { margin-top: 0 !important; padding-top: 20px !important; }

/* Make panels text bigger */
.well td, .well p, .well div { font-size: 15px; }
.well .header { font-size: 12px !important; }
.well a { font-size: 15px; }

/* Right pane buttons bigger */
.rightPane button, .rightPane input[type="submit"] {
    font-size: 12px !important;
    padding: 10px 16px !important;
    width: 100%;
    margin-bottom: 6px;
}


/* ---- FEED CONTAINER FIX (no well class anymore) ---- */
.feedContainer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 24px 30px !important;
    overflow: hidden;
}

.feedContainer::before { display: none !important; }

/* Bigger text everywhere */
body { font-size: 16px !important; }
p, td, li, div { font-size: 15px; }
.leftPane p, .leftPane td, .leftPane li { font-size: 16px !important; }
.rightPane p, .rightPane td, .rightPane li { font-size: 15px !important; }

/* Bigger headings in panels */
h1 { font-family:'Cinzel',serif !important; color:#C9A84C !important; font-size:22px !important; letter-spacing:2px; }
h2 { font-family:'Cinzel',serif !important; color:#C9A84C !important; font-size:18px !important; letter-spacing:2px; }
h3 { font-family:'Cinzel',serif !important; color:#C9A84C !important; font-size:15px !important; }


/* ---- WIDER PANELS ---- */
.leftPane { width: 74% !important; padding-right: 20px !important; }
.rightPane { width: 25% !important; }

/* Make feedContainer use full page width with minimal padding */
.feedContainer {
    max-width: 100% !important;
    padding: 20px 40px !important;
}

/* Panels fill their container fully */
.well { width: 100% !important; box-sizing: border-box !important; }

/* Right pane panels tighter */
.rightPane .well { margin-bottom: 12px !important; }
.rightPane .header { padding: 10px 14px !important; }
.rightPane td { padding: 8px 14px !important; }

/* Bigger right pane buttons */
.rightPane input[type="submit"],
.rightPane button {
    width: 100% !important;
    padding: 10px !important;
    margin-bottom: 6px !important;
    font-size: 11px !important;
}