/* ══════════════════════════════════════════════════════════════
   CROWN CAPITAL FX  ·  MEMBER / USER PANEL THEME
   Black · Gold · Ivory — matches the public Crown Capital FX site
   Loaded LAST (after app.min.css + main.css) so it wins the cascade.
══════════════════════════════════════════════════════════════ */

:root {
	--cc-ink: #09090b;
	--cc-ink2: #0f0f12;
	--cc-ink3: #141418;
	--cc-ink4: #1c1c22;
	--cc-ink5: #252530;
	--cc-gold: #c8973e;
	--cc-gold-lt: #e8b85a;
	--cc-gold-dim: #c8973e22;
	--cc-gold-line: #c8973e40;
	--cc-ivory: #f4ede0;
	--cc-ivory-bg: #faf7f1;
	--cc-ivory-card: #ffffff;
	--cc-ivory-mut: #8a8070;
	--cc-ivory-fnt: #5a5448;
	--cc-red: #c94a4a;
	--cc-green: #3f9d73;
	--cc-border: #e7ded0;
}

/* ── BASE ─────────────────────────────────────────── */
html, body {
	background: var(--cc-ivory-bg) !important;
	color: var(--cc-ivory-fnt);
	font-family: 'Instrument Sans', 'Roboto', sans-serif;
}

a { color: var(--cc-gold); }
a:hover, a:focus { color: var(--cc-gold-lt); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--cc-ivory-bg); }
::-webkit-scrollbar-thumb { background: var(--cc-gold); border-radius: 4px; }

h1, h2, h3, h4, h5, h6 { color: var(--cc-ink); }

/* ── TOPBAR ───────────────────────────────────────── */
#page-topbar {
	background-color: var(--cc-ink) !important;
	box-shadow: 0 1px 0 var(--cc-gold-line) !important;
}

#page-topbar .header-item,
#page-topbar .btn,
#page-topbar span,
#page-topbar i,
#page-topbar .mdi,
#page-topbar .fa,
#page-topbar .uil {
	color: var(--cc-ivory) !important;
}

#page-topbar .header-item:hover {
	background: var(--cc-ink4) !important;
	color: var(--cc-gold-lt) !important;
}

#page-topbar .dropdown-menu {
	background: var(--cc-ink3);
	border: 1px solid var(--cc-gold-line);
}

#page-topbar .dropdown-item {
	color: var(--cc-ivory);
}

#page-topbar .dropdown-item:hover {
	background: var(--cc-ink4);
	color: var(--cc-gold-lt);
}

.navbar-brand-box {
	background: var(--cc-ink) !important;
	border-right: 1px solid var(--cc-gold-line);
}

/* ── SIDEBAR ──────────────────────────────────────── */
.vertical-menu {
	background: var(--cc-ink) !important;
	border-right: 1px solid var(--cc-gold-line);
}

.vertical-menu .navbar-brand-box {
	background: var(--cc-ink) !important;
	border-bottom: 1px solid var(--cc-gold-line);
}

#sidebar-menu .menu-title {
	color: var(--cc-gold) !important;
	letter-spacing: 1.5px;
	font-size: 11px;
	text-transform: uppercase;
	opacity: 0.85;
}

#sidebar-menu ul li a,
#side-menu li a {
	color: #cfc7b8 !important;
	font-size: 13.5px;
}

#sidebar-menu ul li a i,
#side-menu li a i {
	color: var(--cc-gold) !important;
}

#sidebar-menu ul li a:hover,
#sidebar-menu ul li a:focus,
#side-menu li a:hover,
#side-menu li a:focus {
	color: var(--cc-gold-lt) !important;
	background: var(--cc-ink4) !important;
}

#sidebar-menu ul li a:hover i,
#side-menu li a:hover i {
	color: var(--cc-gold-lt) !important;
}

#sidebar-menu ul li ul.sub-menu li a,
#side-menu .sub-menu li a {
	color: #b7ada0 !important;
}

#sidebar-menu ul li ul.sub-menu li a:hover,
#side-menu .sub-menu li a:hover {
	color: var(--cc-gold-lt) !important;
}

#sidebar-menu .mm-active > a,
#side-menu li.mm-active > a,
#sidebar-menu ul li a.mm-active {
	color: var(--cc-gold-lt) !important;
	background: var(--cc-gold-dim) !important;
	border-right: 3px solid var(--cc-gold);
}

#sidebar-menu .mm-active > a i,
#side-menu li.mm-active > a i {
	color: var(--cc-gold-lt) !important;
}

/* ── PAGE CONTENT AREA ────────────────────────────── */
.page-content {
	background: var(--cc-ivory-bg) !important;
}

.main-content {
	background: var(--cc-ivory-bg);
}

/* ── CARDS (generic + all the custom card variants used site-wide) ── */
.card {
	background: var(--cc-ivory-card) !important;
	border: 1px solid var(--cc-border) !important;
	border-radius: 10px !important;
	box-shadow: 0 2px 10px rgba(9, 9, 11, 0.05) !important;
}

.card:hover {
	box-shadow: 0 6px 18px rgba(200, 151, 62, 0.14) !important;
	border-color: var(--cc-gold-line) !important;
}

.card[style*="linear-gradient(135deg, #ffffff"] {
	background: var(--cc-ivory-card) !important;
}

.card-header {
	background: var(--cc-ivory) !important;
	border-bottom: 1px solid var(--cc-border) !important;
	color: var(--cc-ink) !important;
	font-weight: 600;
}

/* Wallet balance figure */
.text-primary { color: var(--cc-gold) !important; }
.text-success { color: var(--cc-green) !important; }
.text-danger  { color: var(--cc-red) !important; }

/* Stat icon tiles (Dashboard boxes: Total Team / Referral / Deposit / Withdrawal) */
.stat-icon {
	background: var(--cc-ink) !important;
	color: var(--cc-gold-lt) !important;
}

.bg-blue, .bg-green, .bg-orange, .bg-red, .bg-purple,
.bg-light-primary, .bg-light-blue {
	background: var(--cc-ink) !important;
	color: var(--cc-gold-lt) !important;
}

.text-blue { color: var(--cc-gold) !important; }

/* IB program promo card — gold/ink gradient instead of blue */
.ib-card,
.card[style*="linear-gradient(135deg, #4e73df"] {
	background: linear-gradient(135deg, var(--cc-ink) 0%, var(--cc-ink4) 100%) !important;
	border: 1px solid var(--cc-gold-line) !important;
}

	.ib-card h4, .ib-card p {
		color: var(--cc-ivory) !important;
	}

	.ib-card .btn-white {
		color: var(--cc-ink) !important;
	}

/* KYC card */
.kyc-card {
	background: var(--cc-ivory-card) !important;
	border: 1px solid var(--cc-border) !important;
}

.kyc-header {
	background: linear-gradient(135deg, var(--cc-ink) 0%, var(--cc-ink4) 100%) !important;
}

	.kyc-header h4 { color: var(--cc-gold-lt) !important; }

.upload-box {
	background: var(--cc-ivory) !important;
	border: 1px dashed var(--cc-border) !important;
}

	.upload-box:hover { border-color: var(--cc-gold) !important; }

/* Platform download cards */
.platform-card {
	background: var(--cc-ivory-card) !important;
	border: 1px solid var(--cc-border) !important;
}

	.platform-card:hover { border-color: var(--cc-gold) !important; }

.platform-icon { background: var(--cc-ivory) !important; }

/* Referral invite box */
.referral-input {
	background-color: var(--cc-ivory) !important;
	border: 1px dashed var(--cc-border) !important;
	color: var(--cc-ivory-fnt) !important;
}

/* ── BUTTONS ──────────────────────────────────────── */
.btn-primary,
.btn-kyc,
.btn-download,
.btn-copy {
	background: var(--cc-gold) !important;
	border-color: var(--cc-gold) !important;
	color: #1a1408 !important;
	font-weight: 600;
}

	.btn-primary:hover, .btn-primary:focus,
	.btn-kyc:hover, .btn-download:hover, .btn-copy:hover {
		background: var(--cc-gold-lt) !important;
		border-color: var(--cc-gold-lt) !important;
		color: #1a1408 !important;
	}

.btn-success { background: var(--cc-green) !important; border-color: var(--cc-green) !important; }
.btn-danger  { background: var(--cc-red) !important; border-color: var(--cc-red) !important; }

.btn-outline-dark {
	color: var(--cc-ink) !important;
	border-color: var(--cc-ink) !important;
}

	.btn-outline-dark:hover {
		background: var(--cc-ink) !important;
		color: var(--cc-ivory) !important;
	}

.btn-outline-primary {
	color: var(--cc-gold) !important;
	border-color: var(--cc-gold) !important;
}

	.btn-outline-primary:hover {
		background: var(--cc-gold) !important;
		color: #1a1408 !important;
	}

.btn-whatsapp {
	background-color: #25d366 !important;
}

/* ── FORMS ────────────────────────────────────────── */
.form-control, .form-select {
	background-color: #fff !important;
	border: 1px solid var(--cc-border) !important;
	color: var(--cc-ink) !important;
}

	.form-control:focus, .form-select:focus {
		border-color: var(--cc-gold) !important;
		box-shadow: 0 0 0 0.2rem var(--cc-gold-dim) !important;
	}

.form-check-input:checked {
	background-color: var(--cc-gold) !important;
	border-color: var(--cc-gold) !important;
}

/* ── TABLES / DATATABLES ──────────────────────────── */
.table thead th,
.table > :not(caption) > * > th {
	background: var(--cc-ink) !important;
	color: var(--cc-gold-lt) !important;
	border-bottom: none !important;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.5px;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
	background-color: var(--cc-ivory) !important;
}

.table-hover > tbody > tr:hover > * {
	background-color: var(--cc-gold-dim) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--cc-gold) !important;
	border-color: var(--cc-gold) !important;
	color: #1a1408 !important;
}

/* ── BADGES ───────────────────────────────────────── */
.badge.bg-primary { background-color: var(--cc-gold) !important; color: #1a1408 !important; }
.badge.bg-success { background-color: var(--cc-green) !important; }
.badge.bg-danger  { background-color: var(--cc-red) !important; }
.badge.bg-dark    { background-color: var(--cc-ink) !important; }

/* ── PROGRESS BARS ────────────────────────────────── */
.progress-bar.bg-blue,
.progress-bar { background-color: var(--cc-gold) !important; }

/* ── MODALS ───────────────────────────────────────── */
.modal-content {
	background: var(--cc-ivory-card);
	border: 1px solid var(--cc-gold-line);
}

.modal-header {
	background: var(--cc-ink);
	color: var(--cc-ivory);
	border-bottom: 2px solid var(--cc-gold);
}

	.modal-header .modal-title { color: var(--cc-gold-lt); }
	.modal-header .btn-close { filter: invert(1) brightness(2); }

/* ── FOOTER ───────────────────────────────────────── */
.footer {
	background: var(--cc-ivory-card);
	border-top: 1px solid var(--cc-border);
	color: var(--cc-ivory-mut);
}

/* ── LOGIN / SIGNUP PAGES (Default.aspx, JoinUs.aspx) ─────────── */
body.authentication-bg {
	background: var(--cc-ink) !important;
}

body.authentication-bg .card {
	background: var(--cc-ink3) !important;
	border: 1px solid var(--cc-gold-line) !important;
}

body.authentication-bg h5,
body.authentication-bg label {
	color: var(--cc-ivory) !important;
}

body.authentication-bg p,
body.authentication-bg .mg-t-30 {
	color: var(--cc-ivory-mut) !important;
}

body.authentication-bg .form-control {
	background: var(--cc-ink4) !important;
	border: 1px solid var(--cc-gold-line) !important;
	color: var(--cc-ivory) !important;
}

	body.authentication-bg .form-control::placeholder { color: #7d766a; }

	body.authentication-bg .form-control:focus {
		border-color: var(--cc-gold) !important;
		box-shadow: 0 0 0 0.2rem var(--cc-gold-dim) !important;
	}

body.authentication-bg .btn-primary {
	background: var(--cc-gold) !important;
	border: none !important;
	color: #1a1408 !important;
}

	body.authentication-bg .btn-primary:hover {
		background: var(--cc-gold-lt) !important;
	}

body.authentication-bg a.tx-info { color: var(--cc-gold) !important; }