/* ============================================================================
   WarZ Siam  ·  Theme "GRUNGE RED"
   โหลดต่อจาก styles.css (ทับสี/เลย์เอาต์หลัก)  — พื้นหลัง images/bg/wallapper_01.jpg
   ============================================================================ */
:root{
    --ws-red:#e11d2a; --ws-red-2:#b3141d; --ws-red-3:#f43f4a;
    --ws-black:#000; --ws-panel:rgba(14,14,15,.86); --ws-panel-2:rgba(22,22,24,.9);
    --ws-line:rgba(255,255,255,.07); --ws-line-2:rgba(255,255,255,.14);
    --ws-text:#f4f4f5; --ws-muted:#a1a1aa; --ws-dim:#71717a;
    --ws-nav-h:66px;
    --ws-display:'Oswald','Kanit',sans-serif;
    --bs-body-bg:#0b0b0c;
}

/* ---------- พื้นหลัง ---------- */
body{ background:#0b0b0c; color:var(--ws-text); }
body::before{
    content:''; position:fixed; inset:0; z-index:-3;
    background:url('../../images/bg/wallapper_01.jpg') center top/cover no-repeat;
    filter:grayscale(.55) brightness(.22) contrast(1.15);
    transform:scale(1.04);
}
body::after{
    content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:
        radial-gradient(1200px 700px at 50% 20%, rgba(120,10,15,.18), transparent 70%),
        radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,0,0,.75) 100%);
}
#lzFx, .mdock{ display:none !important; }

/* ---------- Navbar ---------- */
.ws-topbar{ position:sticky; top:0; z-index:1030; background:#000; border-bottom:1px solid #161617; }
.ws-nav{ min-height:var(--ws-nav-h); padding:0; }
.ws-nav-inner{ padding:0 18px; }
.ws-brand{ display:flex; align-items:center; margin-right:1rem; }
.ws-logo-img{ height:42px; width:auto; }
.ws-logo-text{
    font-family:var(--ws-display); font-size:1.45rem; letter-spacing:1.5px; color:#fff; font-weight:600;
}
.ws-logo-text b{ color:var(--ws-red); font-weight:600; margin-left:4px; }
.ws-menu{ gap:2.6rem; }
.ws-menu .nav-link, .ws-user{
    color:#fff !important; font-family:'Kanit',sans-serif; font-weight:500; font-size:1rem;
    padding:.5rem 0 !important; background:none !important; box-shadow:none !important;
    transition:color .15s;
}
.ws-menu .nav-link i, .ws-user i{ color:#fff; font-size:.9rem; margin-right:3px; }
.ws-menu .nav-link:hover, .ws-menu .nav-link.active, .ws-menu .show > .nav-link,
.ws-user:hover{ color:var(--ws-red) !important; }
.ws-menu .nav-link:hover i, .ws-menu .nav-link.active i{ color:var(--ws-red); }
.ws-menu .dropdown-toggle::after, .ws-user.dropdown-toggle::after{ border-top-color:currentColor; vertical-align:.2em; }
.ws-nav-right{ display:flex; align-items:center; gap:10px; }
.ws-btn-dark{
    background:#3f3f46; color:#fff !important; border:1px solid #52525b; border-radius:4px;
    font-weight:500; padding:.42rem .9rem; font-size:.95rem;
}
.ws-btn-dark:hover{ background:var(--ws-red); border-color:var(--ws-red); }
.navbar-toggler{ color:#fff; border:1px solid #333; padding:.35rem .6rem; }

/* dropdown ขาวแบบในภาพตัวอย่าง */
.ws-topbar .dropdown-menu{
    background:#fff !important; border:0 !important; border-radius:4px !important;
    box-shadow:0 10px 30px rgba(0,0,0,.45) !important; padding:.45rem 0 !important; min-width:12rem;
    margin-top:.35rem !important;
}
.ws-topbar .dropdown-item{
    color:#111 !important; font-family:'Kanit',sans-serif; font-weight:400; font-size:1rem;
    padding:.4rem 1.2rem !important; background:none !important; border-radius:0 !important;
}
.ws-topbar .dropdown-item::before{
    content:''; display:inline-block; border-left:5px solid currentColor; border-top:5px solid transparent;
    border-bottom:5px solid transparent; margin-right:7px; vertical-align:1px;
}
.ws-topbar .dropdown-item i{ color:inherit; margin-right:4px; }
.ws-topbar .dropdown-item:has(i)::before{ display:none; }
.ws-topbar .dropdown-item:hover{ color:var(--ws-red) !important; background:#f4f4f5 !important; }
.ws-topbar .dropdown-item.ws-danger{ color:var(--ws-red) !important; }
.ws-topbar .dropdown-divider{ border-color:#e4e4e7 !important; margin:.35rem 0; }

@media (max-width:991.98px){
    .ws-menu{ gap:0; padding:.5rem 0; }
    .ws-menu .nav-link{ padding:.55rem 0 !important; }
    .ws-nav-right{ padding:0 0 .8rem; }
    .ws-topbar .dropdown-menu{ box-shadow:none !important; }
}

/* Accommodate CP's added reward menus on desktop. */
@media(min-width:992px){
    #mainTopbar .ws-menu{gap:clamp(.35rem,.8vw,.9rem)}
    #mainTopbar .ws-menu .nav-link{font-size:clamp(.8rem,.9vw,.95rem);white-space:nowrap}
    #mainTopbar .ws-brand{margin-right:.6rem}
    #mainTopbar .ws-nav-inner{gap:.4rem}
}

/* ---------- ปุ่ม ---------- */
.btn-accent, .btn-primary{
    background:linear-gradient(180deg,#ef2b36,#c1121c) !important; border:1px solid #f0444d !important;
    color:#fff !important; box-shadow:0 6px 18px rgba(193,18,28,.35) !important;
}
.btn-accent:hover, .btn-primary:hover{ filter:brightness(1.08); color:#fff !important; }
.btn-outline-accent{ border-color:rgba(255,255,255,.25) !important; color:#fff !important; background:rgba(255,255,255,.04) !important; }
.btn-outline-accent:hover{ border-color:var(--ws-red) !important; background:rgba(225,29,42,.15) !important; }

/* ---------- การ์ด / พื้นผิว ---------- */
.card, .login-card, .profile-card, .item-card, .char-card, .stat-tile, .page-head, .feat-card, .hud{
    background:var(--ws-panel) !important; border:1px solid var(--ws-line) !important;
    border-radius:8px !important; backdrop-filter:blur(3px);
}
.card-header{ background:rgba(255,255,255,.03) !important; border-bottom:1px solid var(--ws-line) !important; }
.form-control, .form-select, .input-group-text{
    background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.08) !important; color:#fff !important;
}
.form-control::placeholder{ color:#a1a1aa !important; }
.form-control:focus, .form-select:focus{ border-color:var(--ws-red) !important; box-shadow:0 0 0 .2rem rgba(225,29,42,.2) !important; }
.table{ --bs-table-bg:transparent; color:var(--ws-text); }

/* ---------- พื้นที่หลัก ---------- */
#main{ min-height:calc(100vh - var(--ws-nav-h) - 80px); padding-bottom:2.5rem; }

/* ---------- Footer ---------- */
.footer{ background:#000 !important; border-top:1px solid #161617 !important; color:var(--ws-dim); padding:1.1rem 0; font-size:.85rem; }
.footer a{ color:#d4d4d8; }

/* ---------- Swal ---------- */
.swal2-popup{ background:#161618 !important; color:#f4f4f5 !important; border:1px solid #27272a; }

/* ---------- โปรไฟล์ ---------- */
.profile-banner{
    background:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/22px 22px,
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/22px 22px,
        linear-gradient(135deg, #7f0d13, #2a0a0d 60%, #111) !important;
}