/* ===== PocketVest Color Overrides ===== */
:root {
	--pv-navy:      #0a1628;
	--pv-navy-mid:  #0d1f40;
	--pv-blue:      #1a6dff;
	--pv-blue-light:#3d85ff;
	--pv-gold:      #f0b429;
	--pv-white:     #ffffff;
	--pv-light-bg:  #f0f4ff;
	--pv-border:    #1e3260;
}

/* ---------- Preloader ---------- */
#preloader {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: var(--pv-navy);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}
#preloader::after {
	content: '';
	width: 48px; height: 48px;
	border: 4px solid var(--pv-border);
	border-top-color: var(--pv-blue);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Topbar ---------- */
.topbar-area {
	background: var(--pv-navy) !important;
	border-bottom: 1px solid var(--pv-border);
}
.topbar-left ul li a,
.topbar-right ul li a { color: #a0b4d6 !important; }
.topbar-right ul li a:hover { color: var(--pv-blue) !important; }

/* ---------- Header ---------- */
.header-area { background: var(--pv-white) !important; border-bottom: 1px solid #eee; }
.mobile-menu-area { background: var(--pv-white) !important; border-bottom: 1px solid #eee; }
.navbar-default { background: transparent !important; border: none; }
.main-menu ul li a { color: var(--pv-navy) !important; }
.main-menu ul li a:hover,
.main-menu ul li a.active { color: var(--pv-blue) !important; }
.sub-menu { background: var(--pv-navy-mid) !important; border: 1px solid var(--pv-border) !important; }
.sub-menu li a { color: #fff !important; }
.header-right-link a.s-menu {
	background: var(--pv-blue) !important;
	color: #fff !important;
	border-radius: 4px;
	padding: 8px 22px !important;
	font-weight: 600;
}
.header-right-link a.s-menu:hover { background: var(--pv-blue-light) !important; }

/* ---------- HERO ---------- */
.intro-area {
	background: linear-gradient(135deg, var(--pv-navy) 0%, #0d2252 60%, #112b6b 100%) !important;
	min-height: 600px;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.intro-area::before {
	content: '';
	position: absolute;
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(26,109,255,0.15) 0%, transparent 70%);
	top: -100px; right: -100px;
	border-radius: 50%;
}
.bg-wrapper { display: none; }

.slide-all-text { padding: 100px 0 80px; text-align: center; }

.pv-hero-badge {
	display: inline-block;
	background: rgba(26,109,255,0.18);
	border: 1px solid rgba(26,109,255,0.4);
	color: var(--pv-blue);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 6px 18px;
	border-radius: 20px;
	margin-bottom: 22px;
}

.title2 {
	color: #fff !important;
	font-size: 46px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	margin-bottom: 16px !important;
}
.title2 span { color: var(--pv-blue); }

.pv-hero-sub {
	color: #8aaad4;
	font-size: 17px;
	max-width: 560px;
	margin: 0 auto 12px;
	line-height: 1.7;
}
.pv-hero-sub2 {
	color: #6a8ab5;
	font-size: 15px;
	max-width: 480px;
	margin: 0 auto 36px;
}

.pv-hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.ready-btn {
	background: var(--pv-blue) !important;
	color: #fff !important;
	padding: 14px 36px !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	border: none !important;
	transition: background 0.2s;
	text-decoration: none;
	display: inline-block;
}
.ready-btn:hover { background: var(--pv-blue-light) !important; }
.pv-btn-outline {
	background: transparent;
	color: #fff;
	padding: 14px 36px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
	border: 2px solid rgba(255,255,255,0.3);
	transition: border-color 0.2s, color 0.2s;
	text-decoration: none;
	display: inline-block;
}
.pv-btn-outline:hover { border-color: var(--pv-blue); color: var(--pv-blue); }

/* ---------- HOW IT WORKS ---------- */
.how-it-works {
	background: var(--pv-navy-mid);
	padding: 70px 0;
	border-top: 1px solid var(--pv-border);
	border-bottom: 1px solid var(--pv-border);
}
.how-it-works .section-headline h3 { color: #fff !important; }
.how-it-works .section-headline p { color: #7a9ac4; }

.pv-step {
	text-align: center;
	padding: 30px 20px;
	border-radius: 10px;
	background: rgba(26,109,255,0.06);
	border: 1px solid var(--pv-border);
	margin-bottom: 24px;
	transition: transform 0.2s, border-color 0.2s;
}
.pv-step:hover { transform: translateY(-4px); border-color: var(--pv-blue); }

.pv-step-num {
	width: 52px; height: 52px;
	background: var(--pv-blue);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; font-weight: 800; color: #fff;
	margin: 0 auto 16px;
}
.pv-step h4 { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.pv-step p { color: #7a9ac4; font-size: 14px; margin: 0; }

/* ---------- INVEST AREA ---------- */
.invest-area {
	background: var(--pv-navy) !important;
	padding: 70px 0 !important;
}
.invest-area .section-headline h3 { color: #fff !important; }
.invest-area .section-headline p { color: #7a9ac4; }

.pv-bonus-banner {
	background: linear-gradient(90deg, rgba(240,180,41,0.15), rgba(240,180,41,0.08));
	border: 1px solid rgba(240,180,41,0.4);
	border-radius: 8px;
	color: var(--pv-gold);
	font-weight: 700;
	font-size: 15px;
	padding: 12px 24px;
	text-align: center;
	margin-bottom: 36px;
}

/* Plan cards */
.pri_table_list {
	background: var(--pv-navy-mid) !important;
	border: 1px solid var(--pv-border) !important;
	border-radius: 12px !important;
	overflow: hidden;
	margin-bottom: 28px;
	position: relative;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.pri_table_list:hover {
	transform: translateY(-5px);
	border-color: var(--pv-blue) !important;
	box-shadow: 0 8px 30px rgba(26,109,255,0.2);
}

.top-price-inner {
	background: linear-gradient(135deg, #0d2252, #112b6b) !important;
	padding: 28px 24px 22px !important;
	border-bottom: 1px solid var(--pv-border);
}
.top-price-inner h3 {
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 12px !important;
}

.pv-plan-price {
	font-size: 30px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}
.pv-plan-bonus {
	font-size: 13px;
	color: var(--pv-gold);
	font-weight: 600;
	margin-top: 4px;
}
.pv-plan-total {
	font-size: 12px;
	color: #5a7aaa;
	margin-top: 2px;
}

.pricing-text {
	list-style: none !important;
	padding: 20px 24px !important;
	margin: 0 !important;
}
.pricing-text li {
	color: #a0b8d8 !important;
	font-size: 14px !important;
	padding: 7px 0 !important;
	border-bottom: 1px solid rgba(255,255,255,0.05) !important;
	display: flex;
	align-items: center;
	gap: 8px;
}
.pricing-text li:last-child { border-bottom: none !important; }
.pricing-text li .pv-icon { font-size: 15px; min-width: 20px; }
.pricing-text li.pv-warning { color: #f0b429 !important; font-size: 13px !important; }

.price-btn {
	padding: 0 24px 24px !important;
	text-align: center;
}
.price-btn a {
	display: block;
	background: var(--pv-blue) !important;
	color: #fff !important;
	padding: 12px !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: 0.5px;
	transition: background 0.2s;
	text-decoration: none;
}
.price-btn a:hover { background: var(--pv-blue-light) !important; }

/* Popular badge */
.base {
	position: absolute;
	top: 16px; right: 16px;
	background: var(--pv-gold);
	color: #0a1628;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 12px;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
	z-index: 2;
}

/* ---------- WHY CHOOSE US ---------- */
.support-service-area {
	background: var(--pv-navy-mid) !important;
}
.support-service-area .section-headline h3 { color: #fff !important; }
.support-service-area .section-headline p { color: #7a9ac4; }

.support-services {
	background: rgba(26,109,255,0.06) !important;
	border: 1px solid var(--pv-border) !important;
	border-radius: 10px !important;
	padding: 28px 20px !important;
	margin-bottom: 24px;
	transition: border-color 0.2s, transform 0.2s;
}
.support-services:hover { border-color: var(--pv-blue) !important; transform: translateY(-4px); }
.support-services .top-icon { color: var(--pv-blue) !important; font-size: 36px !important; }
.support-services h4 { color: #fff !important; }
.support-services p { color: #7a9ac4 !important; }

/* ---------- Payment History ---------- */
.payment-history-area { background: var(--pv-navy) !important; }
.payment-history-area .section-headline h3 { color: #fff !important; }
.payment-history-area .section-headline p { color: #7a9ac4; }
.diposite-box { background: var(--pv-navy-mid) !important; border: 1px solid var(--pv-border) !important; border-radius: 10px !important; }
.diposite-box h3 { color: #fff !important; }
.deposite-table table { width: 100%; }
.deposite-table th { color: var(--pv-blue) !important; border-bottom: 1px solid var(--pv-border) !important; }
.deposite-table td { color: #a0b8d8 !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; }

/* ---------- Overview ---------- */
.overview-area { background: #0b1d3a !important; }
.overview-text h3 { color: #fff !important; }
.overview-text p { color: #7a9ac4; }
.overview-text ul li a { color: #a0b8d8 !important; }
.overview-btn {
	background: var(--pv-blue) !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 12px 32px !important;
	font-weight: 700 !important;
}

/* ---------- Blog ---------- */
.blog-area { background: var(--pv-navy-mid) !important; }
.blog-area .section-headline h3 { color: #fff !important; }
.blog-area .section-headline p { color: #7a9ac4; }
.single-blog { background: var(--pv-navy) !important; border: 1px solid var(--pv-border) !important; border-radius: 8px !important; overflow: hidden; }
.blog-title a h4 { color: #d0e0f8 !important; }
.blog-meta span { color: #5a7aaa !important; }

/* ---------- Payments / Footer ---------- */
.payments-area { background: var(--pv-navy) !important; }
.payments-area .section-headline h3 { color: #fff !important; }
.payments-area .section-headline p { color: #7a9ac4; }

footer.footer1 { background: var(--pv-white) !important; border-top: 1px solid #eee; }
.footer-area { background: transparent !important; }
.footer-content p { color: #666 !important; }
.footer-head h4 { color: var(--pv-navy) !important; }
.footer-list li a { color: #555 !important; }
.footer-list li a:hover { color: var(--pv-blue) !important; }
.footer-contacts p, .footer-contacts span { color: #555 !important; }
.footer-icons ul li a { background: #f4f4f4 !important; color: var(--pv-navy) !important; }
.footer-icons ul li a:hover { background: var(--pv-blue) !important; color: #fff !important; }
.footer-area-bottom { background: #f9f9f9 !important; border-top: 1px solid #eee !important; }
.copyright p, .copyright a { color: #888 !important; }

/* Newsletter input footer adjustment */
.suscribe-input input { background: #fff !important; border: 1px solid #ddd !important; color: #333 !important; }
.suscribe-input button { background: var(--pv-blue) !important; color: #fff !important; border: none !important; }
.suscribe-input button:hover { background: var(--pv-blue-light) !important; }

/* ---------- Counter ---------- */
.counter-area { background: var(--pv-blue) !important; }
.single-fun .counter-icon i { color: #fff !important; }
.single-fun .fun-text span, .single-fun .fun-text h4 { color: #fff !important; }

/* ---------- About ---------- */
.about-area { background: var(--pv-navy-mid) !important; }
.about-content h3 { color: #fff !important; }
.about-content p { color: #7a9ac4 !important; }
.icon-text h5 { color: #d0e0f8 !important; }
.icon-text p { color: #7a9ac4 !important; }

/* ---------- Referral ---------- */
.work-proses { background: var(--pv-navy) !important; }
.work-proses .section-headline h3 { color: #fff !important; }
.work-proses .section-headline p { color: #7a9ac4; }
.proses-text h4 { color: #d0e0f8 !important; }

/* Sticker fix */
#sticker.stick { background: var(--pv-white) !important; box-shadow: 0 2px 15px rgba(0,0,0,0.1) !important; }
#sticker.stick .main-menu ul li a { color: var(--pv-navy) !important; }

/* Mobile Menu adjustments */
.mean-container .mean-nav ul li a { color: var(--pv-navy) !important; }
.mean-container a.meanmenu-reveal { color: var(--pv-navy) !important; }
.mean-container a.meanmenu-reveal span { background: var(--pv-navy) !important; }

/* Responsive tweaks */
@media (max-width: 767px) {
	.title2 { font-size: 30px !important; }
	.slide-all-text { padding: 70px 0 60px; }
	.pv-hero-btns { flex-direction: column; align-items: center; }
	.mobile-menu .mobile-header-logo {
		position: static !important;
		max-width: 170px !important;
		width: auto !important;
		padding: 0 !important;
	}
	.mobile-menu .mobile-header-logo a {
		display: inline-block;
		padding: 0 !important;
	}
	.mobile-menu .mobile-header-logo-img {
		display: block;
		max-height: 52px;
		width: auto;
		max-width: 100%;
		height: auto;
	}
}

/* ---------- Authentication Pages (Login, Signup, OTP) ---------- */
.login-area { 
	background: var(--pv-navy) !important; 
	min-height: 100vh; 
	display: flex; 
	align-items: center; 
	padding: 60px 0; 
	position: relative;
}
.login-overlay { 
	background: rgba(10, 22, 40, 0.8) !important; 
	position: absolute; 
	top: 0; left: 0; 
	width: 100%; height: 100%; 
}
.login-form { 
	background: var(--pv-navy-mid) !important; 
	border: 1px solid var(--pv-border); 
	box-shadow: 0 15px 40px rgba(0,0,0,0.4); 
	overflow: hidden !important; 
	padding: 40px 60px;
	border-radius: 8px;
	position: relative;
	z-index: 2;
}
.login-form .logo { 
	background: var(--pv-white) !important; 
	padding: 25px !important; 
	margin: -40px -60px 30px -60px !important; 
	border-bottom: 1px solid #eee !important;
	position: relative !important;
	display: block !important;
	top: 0 !important;
	left: 0 !important;
	width: auto !important;
	max-width: none !important;
}
.login-form .logo img { max-height: 70px !important; }
.login-form .form-control { 
	background: rgba(255,255,255,0.05) !important; 
	border: 1px solid var(--pv-border) !important; 
	color: #fff !important; 
	height: 50px !important;
	margin-bottom: 20px !important;
	padding-right: 48px !important;
}
.login-form .form-control:focus { border-color: var(--pv-blue) !important; background: rgba(255,255,255,0.08) !important; }
.log-form {
	margin: 0 !important;
}
.log-form::after {
	content: "";
	display: block;
	clear: both;
}
.log-form > [class*="col-"] {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.password-field {
	margin-bottom: 20px;
	float: none !important;
	width: 100% !important;
	clear: both;
}
.password-input-wrap {
	position: relative;
	width: 100%;
}
.password-input-wrap .form-control {
	margin-bottom: 0 !important;
	padding-right: 52px !important;
}
.password-toggle {
	position: absolute;
	top: 25px;
	right: 16px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	cursor: pointer;
	color: #8aaad4;
	z-index: 3;
}
.password-toggle svg {
	display: block;
	width: 20px;
	height: 20px;
}
/* Fix for select tag visibility */
.login-form select.form-control option {
	background-color: var(--pv-navy-mid) !important;
	color: #fff !important;
}
.login-title { color: #fff !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 1px; }
.slide-btn.login-btn { 
	background: var(--pv-blue) !important; 
	border: none !important; 
	color: #fff !important;
	font-weight: 700 !important;
	transition: 0.3s; 
}
.slide-btn.login-btn:hover { background: var(--pv-blue-light) !important; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(26,109,255,0.4); }

.login-form .text-muted { float: none !important; display: inline-block; color: var(--pv-blue) !important; font-size: 14px !important; margin-top: 10px; }
.acc-not { color: #8aaad4 !important; }
.acc-not a { color: var(--pv-blue) !important; font-weight: 700; }

/* Mobile specific fixes for Auth Pages */
@media (max-width: 767px) {
	.login-area { display: block !important; padding: 20px 0 !important; overflow-x: hidden; }
	.login-area .container {
		width: auto !important;
		max-width: 100% !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	.login-area .row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.login-area .row > [class*="col-"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.login-form { margin: 0 !important; padding: 30px 20px !important; width: 100% !important; }
	.login-form .logo { margin: -30px -20px 25px -20px !important; padding: 15px !important; }
	.login-form .logo img { max-height: 50px !important; }
	.login-form .form-control {
		font-size: 16px !important;
		padding-right: 46px !important;
	}
	.password-toggle {
		right: 14px;
		top: 25px;
	}
	body.login-page .login-area {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-height: 100svh;
		padding: 24px 0 !important;
	}
	body.login-page .login-area .container {
		display: flex;
		align-items: center;
		width: 100% !important;
		min-height: calc(100svh - 48px);
	}
	body.login-page .login-area .row {
		width: 100%;
	}
	body.register-page .login-area .container {
		width: auto !important;
		max-width: 100% !important;
	}
	body.register-page .password-field,
	body.register-page .log-form > .password-field,
	body.register-page .log-form > [class*="col-"] {
		float: none !important;
		width: 100% !important;
	}
	body.register-page .password-input-wrap {
		min-height: 50px;
	}
}

/* Fix for Checkbox and Terms visibility */
.check-group {
    display: flex !important;
    align-items: center !important;
    margin: 15px 0 25px !important;
    min-height: 20px;
}
.check-box-input {
    position: static !important;
    margin: 0 10px 0 0 !important;
    cursor: pointer;
}
.remember-text {
    position: static !important;
    cursor: pointer;
}

/* payment page styles */
.payment-box {
    background: rgba(255,255,255,.95);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 16px 40px rgba(0,0,0,.08);
}
.payment-box h4 {
    margin-bottom: 20px;
}
.payment-copy-text,
.payment-note {
    color: #6078a8;
    margin-bottom: 30px;
}
.payment-detail {
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #e6eaf8;
    border-radius: 8px;
    background: #f8fbff;
    flex-wrap: wrap;
}
.payment-detail span.label {
    color: #5b6f92;
    font-weight: 600;
}
.payment-detail span.value {
    color: #172b4d;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.payment-detail-account .value {
    gap: 10px;
}
.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #7c97de;
    background: #eef3ff;
    color: #1e3a8a;
    border-radius: 8px;
    padding: 1px 10px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.copy-btn::before {
    content: "📋";
}
.copy-btn:hover {
    background: #dce6ff;
    border-color: #5f7dda;
}
.copy-btn.copied {
    background: #d4edda;
    border-color: #88c997;
    color: #236a3f;
}
.copy-feedback {
    color: #236a3f;
    font-size: 0.95rem;
}
.timer-box {
    text-align: center;
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    background: #eef3ff;
}
.timer-label {
    color: #4458a8;
    font-weight: 700;
}
.timer-box strong {
    display: block;
    font-size: 32px;
    margin-top: 10px;
    color: #1e3a8a;
}

/* payment page styles */
.payment-confirm {
    margin-top: 22px;
}
.payment-made-link {
    color: #1e3a8a;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
}
.payment-made-link:hover {
    color: #0f2562;
}
.payment-made-message {
    margin-top: 12px;
    color: #236a3f;
    font-weight: 600;
}
.payment-made-link.disabled-link {
    pointer-events: none;
    opacity: .65;
}
.payment-made-btn {
	display: block;
	width: 100%;
	padding: 14px 20px;
	margin-top: 10px;
	font-size: 15px;
	font-weight: 700;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	letter-spacing: 0.5px;
}