body.referral-body{background:#f5f7fb;color:#222}
.referral-wrap{padding:55px 0 75px}
.referral-card{background:#fff;border:1px solid #e5e9f2;border-radius:16px;box-shadow:0 10px 35px rgba(25,40,70,.08);padding:30px}
.referral-hero{background:linear-gradient(135deg,#111827,#1f3c88);color:#fff;padding:65px 0}
.referral-hero h1{font-size:42px;font-weight:800;line-height:1.15}
.referral-hero p{font-size:18px;line-height:1.7;opacity:.92}
.referral-badge{display:inline-block;background:#fff;color:#173b86;border-radius:50px;padding:8px 16px;font-weight:700;margin-bottom:15px}
.referral-stat{background:#fff;border-radius:14px;padding:20px;text-align:center;border:1px solid #e8ebf2}
.referral-stat strong{display:block;font-size:28px;color:#173b86}
.referral-nav{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.referral-nav a{font-weight:600}
.form-label{font-weight:600}
.notice-box{background:#fff8e6;border:1px solid #f2d48b;border-radius:10px;padding:15px 17px;line-height:1.65}
.success-box{background:#ecfdf3;border:1px solid #a7e6c1;border-radius:10px;padding:16px}
.dashboard-number{font-size:30px;font-weight:800;color:#173b86}
.status-badge{display:inline-block;border-radius:50px;padding:5px 10px;font-size:12px;font-weight:700;background:#eef2ff}
.admin-sidebar{background:#111827;min-height:100vh;padding:25px 15px}
.admin-sidebar a{display:block;color:#fff;padding:10px 12px;border-radius:7px;text-decoration:none}
.admin-sidebar a:hover{background:#263246}
.table-responsive{background:#fff;border-radius:12px}
@media(max-width:767px){.referral-hero h1{font-size:32px}.referral-card{padding:20px}.referral-wrap{padding:30px 0 50px}}

/* =========================================
   FORCE HEADER TEXT VISIBILITY
   ========================================= */

/*header,
header *,
.navbar,
.navbar *,
.navbar-brand,
.navbar-brand *,
.navbar-nav .nav-link,
.navbar-nav .nav-link *,
header a,
header a *,
header span,
header p {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

header a:hover,
.navbar-nav .nav-link:hover {
    color: #f1f5f9 !important;
}


 =========================================
   FORCE FOOTER TEXT VISIBILITY
   ========================================= 

footer,
footer *,
.footer,
.footer *,
.site-footer,
.site-footer * {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

footer a:hover,
.footer a:hover,
.site-footer a:hover {
    color: #f1f5f9 !important;
}


 =========================================
   MAKE HEADER / FOOTER BACKGROUND DARK
   ========================================= 

header,
.navbar {
    background-color: #111827 !important;
}

footer,
.footer,
.site-footer {
    background-color: #111827 !important;
}


 =========================================
   BUTTON / ICON TEXT
   ========================================= 

header i,
header svg,
header .fa,
footer i,
footer svg,
footer .fa {
    color: #ffffff !important;
}


 Don't allow common Bootstrap classes to make text white
   on a white background unexpectedly 
header .text-dark,
footer .text-dark {
    color: #ffffff !important;
}

 FORCE FOOTER VISIBILITY 
footer,
footer div,
footer p,
footer span,
footer small,
footer strong,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer a,
footer li,
footer label {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

 Footer links 
footer a,
footer a:visited {
    color: #ffffff !important;
}

footer a:hover {
    color: #dddddd !important;
}

 Footer headings 
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    color: #ffffff !important;
}

 Footer background 
footer {
    background-color: #111827 !important;
}

 Bootstrap/text classes that may be overriding it 
footer .text-dark,
footer .text-body,
footer .text-muted,
footer .text-secondary,
footer .text-black {
    color: #ffffff !important;
}
*/