/* ==================================================
   MALAWI HOSTIT WHMCS CUSTOM THEME (FULL CSS)
   Copy & Paste Ready
================================================== */

/* =========================
   COLOR VARIABLES
========================= */
:root {
    --primary: #7EBC12;
    --primary-dark: #5a8a0e;
    --primary-light: #a8e040;
    --secondary: #FF0F10;

    --dark: #0B1120;
    --dark-light: #1a2332;

    --light: #F8FAFC;
    --gray: #64748B;
    --gray-light: #E2E8F0;
    --white: #FFFFFF;

    --gradient-primary: linear-gradient(135deg, #7EBC12 0%, #5a8a0e 100%);
    --gradient-hero: linear-gradient(135deg, #0B1120 0%, #1a2332 50%, #0f1a2e 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(126, 188, 18, 0.15) 0px, transparent 50%),
                      radial-gradient(at 80% 0%, rgba(255, 15, 16, 0.08) 0px, transparent 50%),
                      radial-gradient(at 0% 50%, rgba(126, 188, 18, 0.1) 0px, transparent 50%),
                      radial-gradient(at 80% 50%, rgba(255, 15, 16, 0.05) 0px, transparent 50%),
                      radial-gradient(at 0% 100%, rgba(126, 188, 18, 0.12) 0px, transparent 50%);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;
}

/* =========================
   GLOBAL BACKGROUND
========================= */
body {
    background: var(--gradient-hero) !important;
    color: var(--light: #eaeef2;);
    font-family: "Open Sans", sans-serif;
}

/* mesh glow overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--gradient-mesh);
    z-index: -1;
}

/* =========================
   HEADER / NAVBAR
========================= */
#header,
.header,
.navbar,
.navbar.navbar-light {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* nav links */
.navbar-nav .nav-link {
    color: var(--gray-light) !important;
    transition: 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--primary) !important;
}

/* active link */
.navbar-nav .active > .nav-link {
    color: var(--primary) !important;
    border-bottom: 2px solid var(--primary);
}

/* logo */
.navbar-brand {
    color: var(--white) !important;
    font-weight: 700;
}

/* =========================
   TOP BAR / BREADCRUMB
========================= */
.topbar,
.master-breadcrumb {
    background: transparent !important;
    color: var(--gray-light) !important;
    border: none !important;
}

/* =========================
   MAIN CONTENT AREA
========================= */
#main-body {
    background: transparent !important;
    color: var(--light: #eaeef2;);
}

/* headings */
h1, h2, h3, h4, h5 {
    color: var(--primary) !important;
}

/* text */
p, .text-muted {
    color: var(--gray-light) !important;
}

/* =========================
   SIDEBAR
========================= */
.sidebar,
.panel-sidebar {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
}

/* sidebar links */
.sidebar a {
    color: var(--light: #eaeef2;) !important;
}

.sidebar a:hover {
    color: var(--primary) !important;
}

/* =========================
   ANNOUNCEMENTS / CARDS
========================= */
.announcement-single,
.announcement-summary,
.card,

.panel {
    background: rgba(255,255,255,0.04) !important;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 15px;
    backdrop-filter: blur(12px);
}

/* =========================
   BUTTONS
========================= */
.btn {
    border-radius: var(--radius-full);
    transition: 0.3s ease;
}

/* primary button */
.btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: var(--white) !important;
}

.btn-primary:hover {
    opacity: 0.9;
}

/* secondary buttons */
.btn-default,
.btn-secondary {
    background: rgba(255,255,255,0.06) !important;
    color: var(--white) !important;
    border: 1px solid rgba(255,255,255,0.1);
}

/* =========================
   FORMS
========================= */
.form-control {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: var(--white) !important;
}

.form-control::placeholder {
    color: var(--gray);
}

/* =========================
   FOOTER
========================= */
#footer,
.footer {
    background: var(--dark) !important;
    color: var(--gray-light) !important;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* footer links */
#footer a {
    color: var(--primary) !important;
}

#footer a:hover {
    color: var(--primary-light) !important;
}

/* =========================
   LINKS
========================= */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-light);
}