.page-content {
    padding: calc(70px + 1.5rem) calc(1.5rem * .5) 60px calc(1.5rem * .5);
    padding-bottom: 75px;
}
.signuppage {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, .08), transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(124, 58, 237, .08), transparent 30%),
        #f8fafc;
    padding: 35px 15px;
    position: relative;
    overflow: hidden;
}

.signuppage .auth-page-content {
    width: 100%;
    position: relative;
    z-index: 2;
}

.signuppage .container {
    max-width: 1120px;
}

/* =========================================================
   MAIN CARD
========================================================= */

.signuppage .card {
    overflow: hidden;
    border: 1px solid #e5e7ebba !important;
    background: #fff;
    box-shadow:
        0 25px 70px rgba(15, 23, 42, .10),
        0 5px 20px rgba(15, 23, 42, .04) !important;
}

/* =========================================================
   LEFT SIDE
========================================================= */

.signup-right-content {
    height: 100%;
    min-height: 680px;
    position: relative;
    overflow: hidden;
    padding: 55px 45px;
    display: flex;
    align-items: center;

    background:
        radial-gradient(circle at 15% 15%, rgba(255,255,255,.18), transparent 25%),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,.12), transparent 30%),
        linear-gradient(145deg, #075985 0%, #0284c7 45%, #2563eb 100%);
}

/* Decorative circles */

.signup-right-content::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    top: -100px;
    right: -80px;
}

.signup-right-content::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    bottom: -80px;
    left: -70px;
}

.signup-content-inner {
    position: relative;
    z-index: 2;
    max-width: 470px;
}

/* Badge */

.signup-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;
    margin-bottom: 25px;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50px;

    background: rgba(255,255,255,.10);
    color: #fff;

    font-size: 12px;
    font-weight: 600;

    backdrop-filter: blur(10px);
}

.signup-badge i {
    font-size: 15px;
}

/* Heading */

.signup-content-inner h2 {
    font-size: 42px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}

.signup-content-inner h2 span {
    display: block;
    color: #bae6fd;
}

.signup-content-inner > p {
    color: rgba(255,255,255,.78);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 35px;
}

/* Features */

.signup-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.signup-feature {
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature-icon {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: #fff;
    font-size: 21px;

    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
}

.signup-feature h5 {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 700;
}

.signup-feature p {
    margin: 0;
    color: rgba(255,255,255,.65);
    font-size: 12px;
}

/* Bottom community card */

.signup-bottom-card {
    margin-top: 38px;
    padding: 15px 18px;

    display: flex;
    align-items: center;
    gap: 15px;

    border-radius: 16px;

    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);

    backdrop-filter: blur(15px);
}

.signup-users {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.user-circle {
    width: 34px;
    height: 34px;

    margin-left: -7px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #0284c7;
    border-radius: 50%;

    background: #fff;
    color: #0369a1;

    font-size: 11px;
    font-weight: 700;
}

.user-circle:first-child {
    margin-left: 0;
}

.signup-bottom-card strong {
    display: block;
    color: #fff;
    font-size: 12px;
}

.signup-bottom-card small {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.62);
    font-size: 10px;
}

/* =========================================================
   RIGHT FORM
========================================================= */

.signuppage .col-lg-6:last-child {
    background: #fff;
}

.signuppage .p-4.w-100 {
    max-width: 500px;
    margin: 0 auto;
    padding: 48px 50px !important;
}

/* Logo */

.signuppage .p-4.w-100 > a {
    display: inline-block;
    margin-bottom: 10px;
}

.signuppage .p-4.w-100 > a img {
    width: 155px !important;
    max-width: 100%;
}

/* Form heading */

.signuppage .mt-4 h5 {
    margin-bottom: 7px !important;
    font-size: 25px;
    font-weight: 750;
    letter-spacing: -.4px;
    color: #0f172a;
}

.signuppage .mt-4 p {
    font-size: 13px;
    color: #64748b !important;
}

/* =========================================================
   INPUTS
========================================================= */

.signuppage .form-floating {
    margin-bottom: 18px !important;
}

.signuppage .form-floating > .form-control {
    height: 58px;
    padding: 20px 14px 7px;

    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;

    background: #f8fafc;
    color: #0f172a;

    font-size: 14px !important;
    font-weight: 500 !important;

    box-shadow: none !important;

    transition: all .25s ease;
}

.signuppage .form-floating > label {
    padding: 18px 14px;
    color: #64748b;
    font-size: 13px;
}

.signuppage .form-floating > .form-control:focus {
    border-color: #0ea5e9 !important;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(14,165,233,.10) !important;
}

.signuppage .form-floating > .form-control:focus ~ label,
.signuppage .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #0284c7;
}

/* Required */

.signuppage label .text-danger {
    font-size: 12px;
}

/* =========================================================
   PASSWORD BUTTON
========================================================= */

.signuppage .password-addon {
    right: 8px !important;
    color: #64748b !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.signuppage .password-addon:hover {
    color: #0284c7 !important;
}

/* =========================================================
   TERMS
========================================================= */

.signuppage .mb-4 {
    margin-top: 5px;
}

.signuppage #agree {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #0284c7;
    cursor: pointer;
}

.signuppage .fs-11 {
    color: #64748b;
    font-size: 11px !important;
    line-height: 1.6;
}

/* =========================================================
   SIGN UP BUTTON
========================================================= */

.signuppage .btn-info {
    height: 52px;

    border: 0 !important;
    border-radius: 12px !important;

    background: linear-gradient(
        135deg,
        #0284c7,
        #2563eb
    ) !important;

    color: #fff !important;

    font-size: 14px;
    font-weight: 700;

    box-shadow:
        0 10px 25px rgba(37,99,235,.20);

    transition: all .25s ease;
}

.signuppage .btn-info:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(37,99,235,.28);
}

/* =========================================================
   LOGIN TEXT
========================================================= */

.signuppage .mt-4.text-center {
    margin-top: 25px !important;
}

.signuppage .mt-4.text-center p {
    color: #64748b;
    font-size: 12px;
}

.signuppage .mt-4.text-center a {
    color: #0284c7 !important;
}

/* =========================================================
   FOOTER
========================================================= */

.signuppage + .footer,
.signuppage .footer {
    position: relative;
    z-index: 3;
}

.signuppage ~ .footer p {
    margin-bottom: 10px;
    color: #94a3b8 !important;
    font-size: 11px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .signuppage {
        padding: 25px 15px;
    }

    .signup-right-content {
        display: none;
    }

    .signuppage .p-4.w-100 {
        max-width: 600px;
        padding: 40px 45px !important;
    }

    .signuppage .card {
        max-width: 600px;
        margin: auto;
    }
}

@media (max-width: 575px) {

    .signuppage {
        padding: 15px 10px;
        align-items: flex-start !important;
    }

    .signuppage .auth-page-content {
        padding-top: 15px;
    }

    .signuppage .card {
        border-radius: 20px !important;
    }

    .signuppage .p-4.w-100 {
        padding: 30px 22px !important;
    }

    .signuppage .p-4.w-100 > a img {
        width: 135px !important;
    }

    .signuppage .mt-4 h5 {
        font-size: 22px;
    }

    .signuppage .form-floating > .form-control {
        height: 55px;
    }
}
.auth-page-wrapper {
	position: relative;
	overflow: hidden;
	background: #f4f9fc;
}

.auth-bg-shape {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
}

.auth-shape-one {
	width: 420px;
	height: 420px;
	top: -200px;
	left: -130px;
	background: rgba(18, 153, 214, .13);
}

.auth-shape-two {
	width: 380px;
	height: 380px;
	right: -160px;
	bottom: -180px;
	background: rgba(82, 194, 236, .12);
}

.auth-page-content {
	position: relative;
	z-index: 2;
}

.auth-container {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 25px 70px rgba(21, 67, 96, .12);
	border: 1px solid rgba(226, 232, 240, .8);
}

/* =========================
   LEFT BRAND PANEL
========================= */

.auth-brand-panel {
	width: 100%;
	min-height: 650px;
	position: relative;
	overflow: hidden;
	padding: 55px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: linear-gradient(
		145deg,
		#087eb7 0%,
		#159bd5 50%,
		#48b9e8 100%
	);
	color: #fff;
}

.auth-brand-panel::before {
	content: "";
	position: absolute;
	width: 430px;
	height: 430px;
	border: 80px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
	top: -220px;
	right: -180px;
}

.auth-brand-panel::after {
	content: "";
	position: absolute;
	width: 330px;
	height: 330px;
	border: 60px solid rgba(255, 255, 255, .05);
	border-radius: 50%;
	bottom: -190px;
	left: -180px;
}

.auth-brand-content {
	position: relative;
	z-index: 3;
}

.auth-logo {
	display: inline-flex;
	align-items: center;
	padding: 12px 16px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
}

.auth-logo img {
	width: 155px;
	height: auto;
	display: block;
}

.auth-brand-text {
	margin-top: 55px;
}

.auth-small-title {
	display: inline-block;
	margin-bottom: 15px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, .75);
}

.auth-brand-text h1 {
	max-width: 420px;
	font-size: 40px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -1.5px;
}

.auth-brand-text h1 span {
	display: block;
	color: #dff6ff;
}

.auth-brand-text p {
	max-width: 410px;
	margin-top: 20px;
	font-size: 14px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .82);
}

.auth-features {
	margin-top: 35px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.auth-feature {
	display: flex;
	align-items: center;
	gap: 13px;
}

.auth-feature-icon {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .12);
	font-size: 18px;
}

.auth-feature strong,
.auth-feature span {
	display: block;
}

.auth-feature strong {
	font-size: 12px;
	font-weight: 700;
}

.auth-feature span {
	margin-top: 2px;
	font-size: 11px;
	color: rgba(255, 255, 255, .68);
}

.auth-video {
	position: absolute;
	right: -25px;
	bottom: -15px;
	width: 260px;
	height: 175px;
	overflow: hidden;
	border-radius: 18px 0 0 0;
	opacity: .85;
	z-index: 2;
	box-shadow: -10px -10px 40px rgba(0, 0, 0, .08);
}

.auth-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================
   RIGHT FORM PANEL
========================= */

.auth-form-panel {
	min-height: 650px;
	padding: 55px 65px;
	display: flex;
	align-items: center;
	background: #fff;
}

.auth-form-wrapper {
	width: 100%;
	max-width: 410px;
	margin: 0 auto;
}

.mobile-logo {
	margin-bottom: 30px;
}

.mobile-logo img {
	width: 150px;
	height: auto;
}

.auth-heading {
	margin-bottom: 32px;
}

.auth-welcome-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 13px;
	padding: 6px 10px;
	border-radius: 50px;
	background: #eaf7fd;
	color: #108bc3;
	font-size: 11px;
	font-weight: 700;
}

.auth-heading h2 {
	margin: 0;
	color: #172033;
	font-size: 29px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.8px;
}

.auth-heading p {
	margin: 9px 0 0;
	color: #7b8796;
	font-size: 13px;
	line-height: 1.6;
}

.auth-form-group {
	margin-bottom: 20px;
}

.auth-form-group > label {
	display: block;
	margin-bottom: 8px;
	color: #344256;
	font-size: 12px;
	font-weight: 700;
}

.auth-input-wrapper {
	position: relative;
}

.auth-input {
	width: 100%;
	height: 52px;
	padding: 0 16px 0 46px;
	border: 1px solid #e2e8ef;
	border-radius: 12px;
	outline: none;
	background: #fbfdff;
	color: #172033;
	font-size: 13px;
	font-weight: 500;
	transition: all .25s ease;
}

.auth-input::placeholder {
	color: #a3afbd;
	font-weight: 400;
}

.auth-input:focus {
	border-color: #159bd5;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(21, 155, 213, .09);
}

.auth-input-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #9ba8b6;
	font-size: 17px;
	pointer-events: none;
	z-index: 2;
}

.auth-password-input {
	padding-right: 48px;
}

.password-toggle {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: #94a3b8;
	font-size: 17px;
	cursor: pointer;
	z-index: 3;
}

.password-toggle:hover {
	color: #159bd5;
}

.auth-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 4px;
	margin-bottom: 24px;
}

.auth-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #667487;
	font-size: 12px;
	cursor: pointer;
}

.auth-remember input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #159bd5;
	cursor: pointer;
}

.auth-forgot {
	color: #159bd5;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

.auth-forgot:hover {
	color: #087eb7;
}

.auth-submit {
	margin-top: 4px;
}

.auth-login-btn {
	width: 100%;
	height: 52px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(135deg, #159bd5, #087eb7);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 25px rgba(21, 155, 213, .22);
	transition: all .25s ease;
}

.auth-login-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(21, 155, 213, .30);
}

.auth-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 25px 0;
	color: #a0acb9;
	font-size: 10px;
	font-weight: 600;
}

.auth-divider::before,
.auth-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e8edf2;
}

.auth-otp-btn {
	height: 48px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid #dfe6ed;
	border-radius: 11px;
	background: #fff;
	color: #344256;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: all .25s ease;
}

.auth-otp-btn i {
	color: #159bd5;
	font-size: 16px;
}

.auth-otp-btn:hover {
	color: #159bd5;
	border-color: #159bd5;
	background: #f8fcff;
}

.auth-register {
	margin-top: 24px;
	text-align: center;
	color: #7b8796;
	font-size: 12px;
}

.auth-register a {
	color: #159bd5;
	font-weight: 700;
	text-decoration: none;
}

.auth-register a:hover {
	text-decoration: underline;
}

.auth-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 15px;
	z-index: 5;
	text-align: center;
}

.auth-footer p {
	margin: 0;
	color: #94a3b8;
	font-size: 11px;
}

.auth-footer strong {
	color: #64748b;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991.98px) {
	.auth-page-content {
		padding-bottom: 60px !important;
	}

	.auth-container {
		max-width: 520px;
	}

	.auth-form-panel {
		min-height: auto;
		padding: 45px 40px;
	}
}

@media (max-width: 575.98px) {
	.auth-page-wrapper {
		align-items: flex-start !important;
	}

	.auth-page-content {
		padding: 20px 15px 60px !important;
	}

	.auth-container {
		border-radius: 20px;
	}

	.auth-form-panel {
		padding: 30px 22px;
	}

	.auth-heading h2 {
		font-size: 25px;
	}

	.auth-heading {
		margin-bottom: 28px;
	}

	.auth-options {
		gap: 10px;
	}

	.auth-forgot {
		white-space: nowrap;
	}

	.auth-footer {
		bottom: 10px;
	}

	.auth-footer p {
		font-size: 10px;
	}
}
    
.reset-page {
	position: relative;
	min-height: 100vh;
	padding: 40px 20px 75px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background:
		linear-gradient(
			135deg,
			#f5fbfe 0%,
			#f8fafc 50%,
			#f2f9fc 100%
		);
}

/* =========================
   BACKGROUND
========================= */

.reset-bg-shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(80px);
}

.reset-shape-one {
	width: 420px;
	height: 420px;
	top: -210px;
	left: -150px;
	background: rgba(21, 155, 213, .13);
}

.reset-shape-two {
	width: 400px;
	height: 400px;
	right: -180px;
	bottom: -190px;
	background: rgba(72, 185, 232, .12);
}

/* =========================
   CONTAINER
========================= */

.reset-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 600px;
}

/* =========================
   CARD
========================= */

.reset-card {
	padding: 42px 45px 35px;
	background: rgba(255, 255, 255, .96);
	border: 1px solid #e6edf2;
	border-radius: 25px;
	box-shadow:
		0 25px 70px rgba(31, 76, 101, .10),
		0 4px 15px rgba(31, 76, 101, .04);
}

/* =========================
   LOGO
========================= */

.reset-logo {
	text-align: center;
	margin-bottom: 28px;
}

.reset-logo a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.reset-logo img {
	width: 155px;
	max-width: 100%;
	height: auto;
	display: block;
}

/* =========================
   ICON
========================= */

.reset-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 18px;
	background: linear-gradient(
		135deg,
		#e9f8fe,
		#f2fbff
	);
	color: #159bd5;
	font-size: 27px;
	box-shadow:
		0 10px 25px rgba(21, 155, 213, .10);
}

/* =========================
   HEADING
========================= */

.reset-heading {
	text-align: center;
	margin-bottom: 30px;
}

.reset-heading h1 {
	margin: 0;
	color: #172033;
	font-size: 25px;
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: -.5px;
}

.reset-heading p {
	max-width: 350px;
	margin: 10px auto 0;
	color: #7b8796;
	font-size: 13px;
	line-height: 1.7;
}

/* =========================
   ALERT
========================= */

.reset-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 25px;
	padding: 12px 14px;
	border-radius: 11px;
	font-size: 12px;
	line-height: 1.5;
}

.reset-alert i {
	margin-top: 1px;
	font-size: 17px;
}

.reset-alert-danger {
	color: #b42318;
	background: #fff2f0;
	border: 1px solid #ffd8d3;
}

/* =========================
   FORM
========================= */

.reset-form-group {
	margin-bottom: 20px;
}

.reset-form-group label {
	display: block;
	margin-bottom: 8px;
	color: #344256;
	font-size: 12px;
	font-weight: 700;
}

.reset-input-wrapper {
	position: relative;
}

.reset-input {
	width: 100%;
	height: 52px;
	padding: 0 48px 0 46px;
	border: 1px solid #dfe7ed;
	border-radius: 12px;
	outline: none;
	background: #fbfdff;
	color: #172033;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	transition: all .25s ease;
}

.reset-input::placeholder {
	color: #a3afbd;
	font-weight: 400;
}

.reset-input:hover {
	border-color: #cbd8e2;
}

.reset-input:focus {
	border-color: #159bd5;
	background: #fff;
	box-shadow:
		0 0 0 4px rgba(21, 155, 213, .09);
}

.reset-input-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #9ba8b6;
	font-size: 17px;
	pointer-events: none;
	z-index: 2;
}

.reset-password-toggle {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: #94a3b8;
	font-size: 17px;
	cursor: pointer;
}

.reset-password-toggle:hover {
	color: #159bd5;
}

/* =========================
   PASSWORD MESSAGE
========================= */

.password-message {
	min-height: 18px;
	margin-top: 6px;
	font-size: 11px;
	font-weight: 600;
}

.password-message.text-danger {
	color: #dc3545;
}

.password-message.text-success {
	color: #198754;
}

/* =========================
   SUBMIT
========================= */

.reset-submit-btn {
	width: 100%;
	height: 52px;
	margin-top: 5px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(
		135deg,
		#159bd5,
		#087eb7
	);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow:
		0 10px 25px rgba(21, 155, 213, .22);
	transition: all .25s ease;
}

.reset-submit-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow:
		0 14px 30px rgba(21, 155, 213, .30);
}

.reset-submit-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
	box-shadow: none;
}

/* =========================
   LOGIN
========================= */

.reset-login {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid #edf1f4;
	color: #7b8796;
	font-size: 12px;
	text-align: center;
}

.reset-login a {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: #159bd5;
	font-weight: 700;
	text-decoration: none;
}

.reset-login a:hover {
	color: #087eb7;
}

.reset-login a i {
	font-size: 14px;
	transition: transform .2s ease;
}

.reset-login a:hover i {
	transform: translateX(3px);
}

/* =========================
   FOOTER
========================= */

.reset-footer {
	margin-top: 22px;
	text-align: center;
}

.reset-footer p {
	margin: 0;
	color: #94a3b8;
	font-size: 11px;
}

.reset-footer strong {
	color: #64748b;
}

.footer-dot {
	padding: 0 5px;
	color: #cbd5df;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 575px) {
	.reset-page {
		padding: 25px 15px 70px;
	}

	.reset-card {
		padding: 32px 22px 28px;
		border-radius: 20px;
	}

	.reset-logo {
		margin-bottom: 24px;
	}

	.reset-logo img {
		width: 140px;
	}

	.reset-icon {
		width: 58px;
		height: 58px;
		font-size: 24px;
		border-radius: 16px;
	}

	.reset-heading h1 {
		font-size: 22px;
	}

	.reset-heading p {
		font-size: 12px;
	}

	.reset-login {
		flex-direction: column;
	}

	.reset-bg-shape {
		filter: blur(60px);
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}
.auth-otp-page {
	position: relative;
	min-height: 100vh;
	padding: 50px 20px 75px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background:
		linear-gradient(
			135deg,
			#f5fbfe 0%,
			#ffffff 50%,
			#f3faff 100%
		);
}

/* =========================
   BACKGROUND SHAPES
========================= */

.otp-bg-shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(90px);
}

.otp-shape-one {
	width: 450px;
	height: 450px;
	left: -220px;
	top: -180px;
	background: rgba(21, 155, 213, .12);
}

.otp-shape-two {
	width: 420px;
	height: 420px;
	right: -200px;
	bottom: -200px;
	background: rgba(92, 193, 229, .13);
}

/* =========================
   CONTAINER
========================= */

.otp-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
}

/* =========================
   LEFT VISUAL
========================= */

.otp-visual {
	position: relative;
	min-height: 560px;
	padding: 45px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.otp-visual-content {
	position: relative;
	z-index: 2;
	max-width: 470px;
}

.otp-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	margin-bottom: 20px;
	border-radius: 30px;
	background: #e9f8fe;
	color: #118fc8;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2px;
}

.otp-badge i {
	font-size: 15px;
}

.otp-visual h1 {
	margin: 0;
	max-width: 500px;
	color: #172033;
	font-size: 43px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -1.5px;
}

.otp-visual h1 span {
	color: #159bd5;
}

.otp-visual p {
	max-width: 470px;
	margin: 20px 0 28px;
	color: #718096;
	font-size: 14px;
	line-height: 1.8;
}

/* =========================
   FEATURES
========================= */

.otp-features {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.otp-feature {
	display: flex;
	align-items: center;
	gap: 13px;
}

.otp-feature-icon {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: #fff;
	color: #159bd5;
	font-size: 19px;
	box-shadow: 0 8px 20px rgba(24, 85, 112, .07);
}

.otp-feature strong {
	display: block;
	color: #334155;
	font-size: 12px;
	font-weight: 700;
}

.otp-feature span {
	display: block;
	margin-top: 2px;
	color: #94a3b8;
	font-size: 10px;
}

/* =========================
   ANIMATION IMAGE
========================= */

.otp-animation {
	position: absolute;
	width: 170px;
	height: 170px;
	object-fit: contain;
	right: 0;
	bottom: 20px;
	opacity: .85;
	mix-blend-mode: multiply;
}

/* =========================
   CARD
========================= */

.otp-card {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	padding: 42px 45px 32px;
	background: rgba(255, 255, 255, .97);
	border: 1px solid #e5edf2;
	border-radius: 26px;
	box-shadow:
		0 25px 70px rgba(26, 73, 96, .10),
		0 5px 20px rgba(26, 73, 96, .04);
}

/* =========================
   LOGO
========================= */

.otp-logo {
	text-align: center;
	margin-bottom: 28px;
}

.otp-logo img {
	width: 155px;
	max-width: 100%;
	height: auto;
	display: inline-block;
}

/* =========================
   ICON
========================= */

.otp-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 19px;
	background: linear-gradient(
		135deg,
		#e8f8fe,
		#f4fcff
	);
	color: #159bd5;
	font-size: 27px;
	box-shadow:
		0 10px 25px rgba(21, 155, 213, .10);
}

/* =========================
   HEADING
========================= */

.otp-heading {
	text-align: center;
	margin-bottom: 30px;
}

.otp-heading h2 {
	margin: 0;
	color: #172033;
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -.5px;
}

.otp-heading p {
	max-width: 340px;
	margin: 10px auto 0;
	color: #7b8796;
	font-size: 12px;
	line-height: 1.7;
}

/* =========================
   FORM
========================= */

.otp-form-group {
	margin-bottom: 20px;
}

.otp-form-group label {
	display: block;
	margin-bottom: 8px;
	color: #344256;
	font-size: 12px;
	font-weight: 700;
}

.otp-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.otp-input-wrapper input {
	width: 100%;
	height: 54px;
	padding: 0 48px 0 66px;
	border: 1px solid #dfe7ed;
	border-radius: 13px;
	outline: none;
	background: #fbfdff;
	color: #172033;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .4px;
	transition: all .25s ease;
}

.otp-input-wrapper input::placeholder {
	color: #a5b1bd;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
}

.otp-input-wrapper input:focus {
	border-color: #159bd5;
	background: #fff;
	box-shadow:
		0 0 0 4px rgba(21, 155, 213, .09);
}

.otp-country-code {
	position: absolute;
	left: 16px;
	z-index: 2;
	padding-right: 11px;
	border-right: 1px solid #dce5eb;
	color: #526173;
	font-size: 12px;
	font-weight: 700;
}

.otp-input-icon {
	position: absolute;
	right: 16px;
	color: #9ba8b6;
	font-size: 17px;
	pointer-events: none;
}

.otp-error {
	display: none;
	margin-top: 6px;
	color: #dc3545;
	font-size: 10px;
	font-weight: 600;
}

/* =========================
   BUTTON
========================= */

.otp-submit {
	width: 100%;
	height: 53px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 13px;
	background: linear-gradient(
		135deg,
		#159bd5,
		#087eb7
	);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow:
		0 10px 25px rgba(21, 155, 213, .22);
	transition: all .25s ease;
}

.otp-submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow:
		0 14px 30px rgba(21, 155, 213, .30);
}

.otp-submit i {
	font-size: 17px;
	transition: transform .2s ease;
}

.otp-submit:hover:not(:disabled) i {
	transform: translateX(3px);
}

.otp-submit:disabled {
	opacity: .45;
	cursor: not-allowed;
	box-shadow: none;
}

/* =========================
   DIVIDER
========================= */

.otp-divider {
	position: relative;
	margin: 27px 0;
	text-align: center;
}

.otp-divider::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: #edf1f4;
}

.otp-divider span {
	position: relative;
	z-index: 1;
	padding: 0 12px;
	background: #fff;
	color: #a3afbb;
	font-size: 9px;
	font-weight: 700;
}

/* =========================
   PASSWORD LOGIN
========================= */

.password-login {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px;
	border: 1px solid #e7edf1;
	border-radius: 13px;
	color: #334155;
	text-decoration: none;
	transition: all .25s ease;
}

.password-login:hover {
	border-color: #cde9f5;
	background: #f8fdff;
	transform: translateY(-1px);
}

.password-login-icon {
	width: 39px;
	height: 39px;
	flex: 0 0 39px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #eaf8fe;
	color: #159bd5;
	font-size: 17px;
}

.password-login-content {
	flex: 1;
}

.password-login-content strong {
	display: block;
	color: #334155;
	font-size: 11px;
	font-weight: 700;
}

.password-login-content small {
	display: block;
	margin-top: 2px;
	color: #94a3b8;
	font-size: 9px;
}

.password-login > i {
	color: #94a3b8;
	font-size: 18px;
}

/* =========================
   REGISTER
========================= */

.otp-register {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 25px;
	padding-top: 22px;
	border-top: 1px solid #edf1f4;
	color: #7b8796;
	font-size: 11px;
}

.otp-register a {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: #159bd5;
	font-weight: 700;
	text-decoration: none;
}

.otp-register a:hover {
	color: #087eb7;
}

.otp-register a i {
	font-size: 13px;
}

/* =========================
   FOOTER
========================= */

.otp-footer {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 22px;
	text-align: center;
}

.otp-footer p {
	margin: 0;
	color: #94a3b8;
	font-size: 11px;
}

.otp-footer span {
	padding: 0 5px;
	color: #cbd5df;
}

.otp-footer strong {
	color: #64748b;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px) {
	.otp-card {
		margin: 0 auto;
	}
}

@media (max-width: 575px) {
	.auth-otp-page {
		padding: 25px 15px 75px;
	}

	.otp-card {
		padding: 32px 22px 28px;
		border-radius: 21px;
	}

	.otp-logo img {
		width: 140px;
	}

	.otp-icon {
		width: 58px;
		height: 58px;
		border-radius: 16px;
		font-size: 24px;
	}

	.otp-heading h2 {
		font-size: 22px;
	}

	.otp-heading p {
		font-size: 11px;
	}
	.otp-register {
		flex-direction: column;
	}
	.otp-footer {
		bottom: 15px;
	}
}
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}
.secure-auth-screen {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 10%, rgba(14, 165, 233, 0.10), transparent 28%),
        radial-gradient(circle at 92% 90%, rgba(37, 99, 235, 0.10), transparent 30%),
        #f8fafc;
}

.secure-auth-container {
    width: 100%;
    max-width: 1080px;
    position: relative;
    z-index: 2;
}

.secure-auth-card {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 26px;
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.10),
        0 8px 25px rgba(15, 23, 42, 0.05);
}

.secure-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 650px;
}

.secure-auth-brand {
    position: relative;
    display: flex;
    align-items: center;
    padding: 60px 55px;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.18), transparent 27%),
        radial-gradient(circle at 95% 90%, rgba(255, 255, 255, 0.10), transparent 30%),
        linear-gradient(145deg, #075985, #0284c7 48%, #2563eb);
}

.secure-auth-brand::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    top: -130px;
    right: -100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
}

.secure-auth-brand::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    bottom: -120px;
    left: -90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.secure-auth-brand-content {
    width: 100%;
    position: relative;
    z-index: 2;
}

.secure-auth-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 25px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(12px);
}

.secure-auth-label i {
    font-size: 15px;
}

.secure-auth-title {
    margin: 0 0 20px;
    color: #fff;
    font-size: 42px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.secure-auth-title span {
    display: block;
    color: #bae6fd;
}

.secure-auth-description {
    max-width: 430px;
    margin: 0 0 35px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.8;
}

.secure-auth-points {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.secure-auth-point {
    display: flex;
    align-items: center;
    gap: 15px;
}

.secure-auth-point-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #fff;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
}

.secure-auth-point-text h5 {
    margin: 0 0 3px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.secure-auth-point-text p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    line-height: 1.5;
}

.secure-auth-protection {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 40px;
    padding: 15px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
}

.secure-auth-protection-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.14);
}

.secure-auth-protection-text strong {
    display: block;
    color: #fff;
    font-size: 12px;
}

.secure-auth-protection-text small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 10px;
}

.secure-auth-form-area {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.secure-auth-form {
    width: 100%;
    max-width: 430px;
    padding: 45px 50px;
}

.secure-auth-logo {
    text-align: center;
    margin-bottom: 30px;
}

.secure-auth-logo img {
    width: 150px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.secure-auth-main-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #0284c7;
    font-size: 30px;
    background: linear-gradient(135deg, #e0f2fe, #dbeafe);
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.10);
}

.secure-auth-heading {
    text-align: center;
}

.secure-auth-heading h2 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 750;
}

.secure-auth-heading p {
    max-width: 370px;
    margin: 0 auto 30px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

.secure-auth-code-area {
    position: relative;
    margin-bottom: 25px;
}

.secure-auth-hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.secure-auth-code-fields {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.secure-auth-code-input {
    width: 52px;
    height: 58px;
    padding: 0;
    text-align: center;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
    outline: none;
    background: #f8fafc;
    color: #0f172a;
    font-size: 21px;
    font-weight: 700;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.secure-auth-code-input:focus {
    border-color: #0284c7;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.10);
    transform: translateY(-2px);
}

.secure-auth-submit {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #0284c7, #2563eb);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.20);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.secure-auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(37, 99, 235, 0.28);
}

.secure-auth-submit i {
    font-size: 17px;
}

.secure-auth-resend {
    margin-top: 25px;
    text-align: center;
}

.secure-auth-resend p {
    margin: 0 0 5px;
    color: #64748b;
    font-size: 12px;
}

.secure-auth-resend-button {
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #0284c7;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

.secure-auth-resend-button:hover {
    color: #0369a1;
}

.secure-auth-resend-button:disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

.secure-auth-countdown {
    margin-top: 6px;
    color: #94a3b8;
    font-size: 11px;
}

.secure-auth-countdown strong {
    color: #0284c7;
}

.secure-auth-message {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
    padding: 11px 14px;
    border-radius: 10px;
    color: #64748b;
    background: #f8fafc;
    font-size: 10px;
}

.secure-auth-message i {
    color: #0284c7;
    font-size: 15px;
}

.secure-auth-footer {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 3;
}

.secure-auth-footer p {
    margin: 0;
    color: #94a3b8;
    font-size: 11px;
}

@media (max-width: 991px) {
    .secure-auth-screen {
        padding: 30px 15px 55px;
    }

    .secure-auth-container {
        max-width: 600px;
    }

    .secure-auth-grid {
        display: block;
        min-height: auto;
    }

    .secure-auth-brand {
        display: none;
    }

    .secure-auth-form-area {
        min-height: 620px;
    }

    .secure-auth-form {
        padding: 45px 50px;
    }
}

@media (max-width: 575px) {
    .secure-auth-screen {
        min-height: 100vh;
        padding: 15px 10px 55px;
        align-items: flex-start;
    }

    .secure-auth-container {
        margin-top: 15px;
    }

    .secure-auth-card {
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
    }

    .secure-auth-form-area {
        min-height: auto;
    }

    .secure-auth-form {
        padding: 30px 20px;
    }

    .secure-auth-logo {
        margin-bottom: 25px;
    }

    .secure-auth-logo img {
        width: 135px;
    }

    .secure-auth-main-icon {
        width: 58px;
        height: 58px;
        font-size: 26px;
        border-radius: 16px;
    }

    .secure-auth-heading h2 {
        font-size: 21px;
    }

    .secure-auth-heading p {
        font-size: 12px;
        margin-bottom: 25px;
    }

    .secure-auth-code-fields {
        gap: 6px;
    }

    .secure-auth-code-input {
        width: 43px;
        height: 52px;
        font-size: 19px;
        border-radius: 10px;
    }

    .secure-auth-submit {
        height: 50px;
        font-size: 13px;
    }

    .secure-auth-footer {
        bottom: 8px;
    }
}

@media (max-width: 360px) {
    .secure-auth-form {
        padding: 25px 15px;
    }

    .secure-auth-code-fields {
        gap: 4px;
    }

    .secure-auth-code-input {
        width: 39px;
        height: 48px;
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .secure-auth-code-input,
    .secure-auth-submit {
        transition: none;
    }
}
.premium-search {
    height: 44px;
    width: 100%;
    max-width: 430px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 0 15px;
    background: #f8f9fc;
    border: 1px solid #f0f1f5;
    border-radius: 10px;
    transition: all .2s ease;
}

.premium-search:focus-within {
    background: #fff;
    border-color: #dfe3eb;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
}

.premium-search .search-icon {
    color: #9aa3b2;
    font-size: 15px;
    flex-shrink: 0;
}

.premium-search .form-control {
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    box-shadow: none !important;
    background: transparent;
    color: #343a40;
    font-size: 13px;
    font-weight: 500;
}

.premium-search .form-control::placeholder {
    color: #8d96a6;
    opacity: 1;
}

.search-shortcut {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 7px;
    background: #fff;
    border: 1px solid #e9ebf0;
    border-radius: 6px;
    color: #7d8594;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.search-shortcut b {
    font-weight: 400;
    color: #a5abb5;
}

/* =========================================
   PREMIUM USER SIDEBAR
========================================= */
.user-sidebar {
    background:
        radial-gradient(circle at 100% 5%, rgba(139, 0, 255, .35), transparent 30%),
        linear-gradient(180deg, #15136f 0%, #20218f 52%, #2525a4 100%) !important;
    border-right: 0 !important;
    box-shadow: 8px 0 30px rgba(24, 10, 120, .12) !important;
}
[data-layout=horizontal] .navbar-nav {
	padding: 0px;
}
.navbar-nav {
	padding: 10px;
}
[data-layout=horizontal] .navbar-menu .navbar-nav .nav-link {
    color: #fff;
    padding: .75rem 1rem;
}
.vertical-sidebar-enable .app-menu {
    margin-left: 0 !important;
    z-index: 9999;
}
[data-layout=twocolumn] .twocolumn-iconview {
    width: 70px;
    background: radial-gradient(circle at 100% 5%, rgba(139, 0, 255, .35), transparent 30%), linear-gradient(180deg, #15136f 0%, #20218f 52%, #2525a4 100%) !important;
    height: 100%;
    left: -70px;
    -webkit-box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
    box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
    top: 0;
    position: absolute;
    padding: 0;
    text-align: center;
}
.navbar-menu .navbar-nav .nav-sm {
    padding: 5px 16px;
}
.navbar-menu .navbar-nav .nav-sm .nav-link {
    padding: 10px 15px;
    color: var(--vz-vertical-menu-sub-item-color);
    position: relative;
    font-size: 0.813rem;
    font-family: Poppins, sans-serif;
    border-radius: 8px;
}
.navbar-menu .navbar-nav .nav-sm .nav-link:before {
    content: "";
    width: 6px;
    height: 1.5px;
    background-color: var(--vz-vertical-menu-sub-item-color);
    position: absolute;
    left: 10px;
    top: 19.5px;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    opacity: .5;
}
.user-sidebar .menu-title {
	letter-spacing: .05em;
    cursor: default;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--vz-vertical-menu-title-color);
    font-weight: 800;
}

.user-sidebar .nav-item {
    margin-bottom: 0px;
}

.user-sidebar .nav-link.menu-link {
    height: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 12px;
    border-radius: 12px;
    color: rgba(255,255,255,.88) !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.1px;
    transition: all .25s ease;
    background: transparent;
	font-family: "Inter", sans-serif !important;
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-sm .nav-item>.nav-link {
    color: #000;
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-sm .nav-item:hover>.nav-link {
    color: #000;
}
.user-sidebar #sidebarMore .nav-link.menu-link {
    color: var(--vz-topnav-item-color) !important;
}
[data-layout=horizontal] #sidebarMore {
    color: #fff !important;
    padding: .75rem 1rem;
}

.navbar-menu .navbar-nav .nav-link {
    /* font-family: "Nunito", sans-serif !important; */
    font-weight: 550;
    color: #000;
    border-bottom: 0px solid #dddddd94;
}

/* Icons */

.user-sidebar .nav-link.menu-link > i {
    width: 30px;
    min-width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba(255,255,255,.9);
    transition: all .25s ease;
}


/* Text */

.user-sidebar .nav-link.menu-link span:not(.sidebar-notification) {
    margin-left: 7px;
}


/* Hover */

.user-sidebar .nav-link.menu-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.08);
    transform: translateX(2px);
}

.user-sidebar .nav-link.menu-link:hover > i {
    color: #fff;
}


/* =========================================
   ACTIVE ITEM
========================================= */

.user-sidebar .nav-link.menu-link.active {
    color: #fff !important;
    background:
        linear-gradient(
            100deg,
            #5d00ff 0%,
            #8500ff 55%,
            #a000ff 100%
        );
    box-shadow:
        0 7px 18px rgba(116, 0, 255, .38),
        inset 0 1px 0 rgba(255,255,255,.18);
}


/* Active shine */

.user-sidebar .nav-link.menu-link.active::after {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 5px;
    width: 26px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.65);
    filter: blur(4px);
    transform: rotate(-25deg);
}


/* =========================================
   NOTIFICATION BADGE
========================================= */

.sidebar-notification {
    margin-left: auto;
    width: 21px;
    height: 21px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #365eff;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(31, 80, 255, .35);
}


/* =========================================
   BOTTOM CARDS
========================================= */

.sidebar-bottom {
    margin-top: 0px;
    position: relative;
    z-index: 6;
}
:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link {
    position: relative;
    width: calc(200px + var(--vz-vertical-menu-width-sm));
    transition: none;
    background:
        radial-gradient(circle at 100% 5%, rgba(139, 0, 255, .35), transparent 30%),
        linear-gradient(180deg, #15136f 0%, #20218f 52%, #2525a4 100%) !important;
}

/* =========================================
   UPGRADE CARD
========================================= */

.upgrade-card {
    padding: 17px 17px 15px;
    margin: 0 10px 20px;
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(115, 0, 255, .9),
            rgba(76, 24, 210, .92)
        );
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
        0 12px 30px rgba(10, 0, 90, .2),
        inset 0 1px 0 rgba(255,255,255,.12);
    position: relative;
    overflow: hidden;
}

.upgrade-card::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: -45px;
    top: -45px;
    background: rgba(255,255,255,.1);
    border-radius: 50%;
    filter: blur(5px);
}


/* Upgrade heading */

.upgrade-title {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.upgrade-icon {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.upgrade-heading {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}


/* Upgrade text */

.upgrade-text {
    margin-top: 13px;
    color: rgba(255,255,255,.9);
    font-size: 12px;
    line-height: 18px;
    position: relative;
    z-index: 1;
}


/* Upgrade button */

.upgrade-btn {
    height: 34px;
    margin-top: 13px;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fff;
    color: #6615e8 !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transition: all .2s ease;
}

.upgrade-btn:hover {
    background: #f7f3ff;
    color: #5300d7 !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(0,0,0,.12);
}


/* =========================================
   HELP CARD
========================================= */

.help-card {
    margin: 0 10px;
    padding: 15px 13px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter: blur(5px);
}

.help-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.help-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 19px;
    background:
        linear-gradient(
            145deg,
            #6b00ff,
            #aa00ff
        );
    box-shadow:
        0 4px 14px rgba(119, 0, 255, .45),
        inset 0 1px 1px rgba(255,255,255,.2);
}

.help-title {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin-top: 1px;
}

.help-description {
    margin-top: 4px;
    color: rgba(255,255,255,.8);
    font-size: 11px;
    line-height: 16px;
}
@media (min-width: 768px) {
	:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm"] .help-title,
	:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm"] .chatlive,
	:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm"] .upgrade-text,
	:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm"] .upgrade-heading,
	:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm"] .help-description {
		display: none !important;
	}

	:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="lg"] .help-title,
	:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="lg"] .chatlive,
	:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="lg"] .upgrade-text,
	:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="lg"] .upgrade-heading,
	:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="lg"] .help-description {
		display: block;
	}
}

/* Live chat */

.live-chat-btn {
    height: 34px;
    margin-top: 13px;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(72, 87, 205, .38);
    color: #fff !important;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    transition: all .2s ease;
}

.live-chat-btn:hover {
    background: rgba(91, 105, 230, .55);
    color: #fff !important;
}


/* =========================================
   DECORATIVE WAVE
========================================= */

.sidebar-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 95px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    opacity: .75;
}

.wave {
    position: absolute;
    left: -30px;
    width: 320px;
    height: 50px;
    border-top: 1px solid rgba(64, 179, 255, .55);
    border-radius: 50%;
    transform: rotate(-5deg);
}

.wave-1 {
    bottom: 13px;
}

.wave-2 {
    bottom: 1px;
    left: -10px;
    border-color: rgba(255, 80, 190, .5);
    transform: rotate(7deg);
}

.wave-3 {
    bottom: -13px;
    left: 20px;
    border-color: rgba(63, 150, 255, .45);
    transform: rotate(-9deg);
}


/* Dots */

.wave-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.dot-1 {
    left: 6px;
    bottom: 23px;
    background: #19c8ff;
    box-shadow: 0 0 8px #19c8ff;
}

.dot-2 {
    left: 67px;
    bottom: 4px;
    background: #c477ff;
    box-shadow: 0 0 8px #c477ff;
}

.dot-3 {
    right: 27px;
    bottom: 25px;
    background: #ff69c9;
    box-shadow: 0 0 8px #ff69c9;
}


/* =========================================
   OVERLAY
========================================= */

.vertical-overlay {
    background: rgba(10, 5, 60, .55);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767.98px) {

    .user-sidebar {
        width: 250px !important;
    }

    .user-sidebar .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    .user-sidebar .nav-link.menu-link {
        height: 46px;
        min-height: 46px;
        font-size: 13px;
    }

    .upgrade-card {
        margin-left: 2px;
        margin-right: 2px;
    }

    .help-card {
        margin-left: 2px;
        margin-right: 2px;
    }
}
/* =========================================================
   DASHBOARD HEADER
========================================================= */

.dashboard-head {
	width: 100%;
	margin-bottom: 18px;
}


/* =========================================================
   TOP BAR
========================================================= */

.dashboard-head-top {
	height: 43px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2px;
}

.dashboard-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #7e8496;
	font-size: 12px;
}

.dashboard-breadcrumb strong {
	color: #161b43;
	font-size: 16px;
	font-weight: 700;
}

.dashboard-breadcrumb span:first-of-type {
	color: #b5b9c5;
	font-size: 15px;
}


/* =========================================================
   EXPLORE BUTTON
========================================================= */

.explore-services-btn {
	height: 38px;
	padding: 0 15px;
	display: inline-flex;
	align-items: center;
	gap: 20px;
	border-radius: 11px;
	color: #fff !important;
	background: linear-gradient(
		110deg,
		#2779ed,
		#7500ed
	);
	box-shadow:
		0 7px 18px rgba(73, 50, 220, .20);
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	transition: .25s ease;
}

.explore-services-btn i {
	font-size: 17px;
}

.explore-services-btn:hover {
	transform: translateY(-1px);
	box-shadow:
		0 10px 25px rgba(73, 50, 220, .28);
}


/* =========================================================
   MAIN BANNER
========================================================= */

.dashboard-banner {
	height: 228px;
	position: relative;
	overflow: hidden;
	padding: 27px 34px;
	border-radius: 16px;

	background:
		radial-gradient(
			circle at 72% 50%,
			rgba(110, 96, 255, .48),
			transparent 27%
		),
		linear-gradient(
			105deg,
			#2775dc 0%,
			#3c30e6 46%,
			#7300ed 100%
		);

	box-shadow:
		0 10px 28px rgba(44, 49, 135, .14);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.banner-left {
	position: relative;
	z-index: 5;
}

.welcome-label {
	margin-bottom: 4px;
	color: rgba(255,255,255,.88);
	font-size: 13px;
	font-weight: 600;
}

.banner-left h1 {
	margin: 0;
	color: #fff;
	font-size: 26px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.5px;
}

.user-phone {
	margin-top: 8px;
	color: rgba(255,255,255,.95);
	font-size: 14px;
	font-weight: 600;
}


/* =========================================================
   STATISTICS
========================================================= */

.banner-stats {
	width: 690px;
	height: 76px;
	position: absolute;
	top: 99px;
	left: -5px;

	display: flex;
	align-items: center;

	padding: 7px 14px;

	border: 1px solid rgba(255,255,255,.10);
	border-radius: 14px;

	background: rgba(17,42,173,.20);

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.banner-stat {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.stat-round {
	width: 42px;
	height: 42px;
	min-width: 42px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;

	color: #fff;
	font-size: 19px;
}

.stat-blue {
	background: rgba(33,145,255,.55);
	box-shadow: 0 0 0 6px rgba(33,145,255,.08);
}

.stat-green {
	background: rgba(0,211,164,.60);
	box-shadow: 0 0 0 6px rgba(0,211,164,.08);
}

.stat-purple {
	background: rgba(133,43,255,.65);
	box-shadow: 0 0 0 6px rgba(133,43,255,.08);
}

.stat-orange {
	background: rgba(255,145,35,.65);
	box-shadow: 0 0 0 6px rgba(255,145,35,.08);
}

.stat-info {
	min-width: 0;
}

.stat-info span {
	display: block;
	margin-bottom: 2px;
	color: rgba(255,255,255,.82);
	font-size: 10px;
	font-weight: 500;
	white-space: nowrap;
}

.stat-info strong {
	display: block;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.stat-line {
	width: 1px;
	height: 32px;
	margin: 0 10px;
	background: rgba(255,255,255,.15);
}


/* =========================================================
   ALL SERVICES CARD
========================================================= */

.banner-services-card {
	width: 194px;
	height: 171px;

	position: absolute;
	top: 30px;
	right: 31px;
	z-index: 8;

	padding: 17px;

	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.13);

	background: rgba(255,255,255,.12);

	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.08);
}

.services-card-icon {
	width: 34px;
	height: 34px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 9px;

	color: #fff;
	background: rgba(255,255,255,.12);

	font-size: 19px;
}

.banner-services-card h3 {
	margin: 9px 0 0;

	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.banner-services-card p {
	margin: 9px 0 0;

	color: rgba(255,255,255,.84);
	font-size: 10px;
	line-height: 18px;
}

.services-card-arrow {
	width: 44px;
	height: 44px;

	position: absolute;
	right: 15px;
	bottom: 14px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;

	color: #fff !important;
	background: rgba(255,255,255,.18);

	font-size: 19px;
	text-decoration: none;

	transition: .25s ease;
}

.services-card-arrow:hover {
	color: #5d27e8 !important;
	background: #fff;
	transform: translateX(2px);
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.banner-dot {
	position: absolute;
	z-index: 2;

	width: 6px;
	height: 6px;

	border-radius: 50%;

	background: rgba(255,255,255,.42);
}

.dot-1 {
	top: 27px;
	left: 43%;
}

.dot-2 {
	top: 62px;
	left: 60%;
	width: 5px;
	height: 5px;
}

.dot-3 {
	top: 83px;
	left: 35%;
	width: 5px;
	height: 5px;
}

.dot-4 {
	top: 71px;
	left: 65%;
	width: 4px;
	height: 4px;
}

.dot-5 {
	top: 102px;
	left: 47%;
	width: 5px;
	height: 5px;
}


/* =========================================================
   WAVE EFFECT
========================================================= */

.banner-wave {
	position: absolute;
	z-index: 1;

	width: 480px;
	height: 115px;

	border-top: 1px solid rgba(255,255,255,.12);

	border-radius: 50%;

	pointer-events: none;
}

.wave-1 {
	left: 27%;
	top: 72px;
	transform: rotate(-5deg);
}

.wave-2 {
	left: 29%;
	top: 90px;
	transform: rotate(5deg);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

	.dashboard-banner {
		padding: 25px;
	}

	.banner-services-card {
		right: 20px;
		width: 180px;
	}

	.banner-stats {
		width: calc(100% - 220px);
	}

}


@media (max-width: 767px) {

	.dashboard-head-top {
		height: 40px;
	}

	.dashboard-breadcrumb strong {
		font-size: 14px;
	}

	.dashboard-breadcrumb {
		font-size: 10px;
	}

	.explore-services-btn {
		display: none;
	}

	.dashboard-banner {
		height: 250px;
		padding: 21px;
		border-radius: 14px;
	}

	.banner-left h1 {
		font-size: 20px;
	}

	.welcome-label {
		font-size: 11px;
	}

	.user-phone {
		font-size: 12px;
	}

	.banner-services-card {
		display: none;
	}

	.banner-stats {
		width: calc(100% - 42px);
		height: auto;
		min-height: 90px;

		top: 110px;
		left: 21px;

		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;

		padding: 9px;
	}

	.banner-stat {
		gap: 7px;
	}

	.stat-round {
		width: 34px;
		height: 34px;
		min-width: 34px;
		font-size: 15px;
	}

	.stat-info span {
		font-size: 8px;
	}

	.stat-info strong {
		font-size: 13px;
	}

	.stat-line {
		display: none;
	}

}


@media (max-width: 480px) {

	.dashboard-banner {
		height: 245px;
	}

	.banner-left h1 {
		font-size: 18px;
	}

	.banner-stats {
		top: 105px;
	}

	.banner-wave {
		display: none;
	}

}
.recent-order-card {
	height: 100%;
	padding: 15px;
	border: 1px solid #edf0f6;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 5px 18px rgba(30,40,90,.045);
	transition: all .25s ease;
}
.recent-order-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(30,40,90,.09);
	border-color: #e2defc;
}
.recent-order-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	min-height: 76px;
}
.recent-order-info {
	min-width: 0;
}
.recent-order-info h6 {
	margin: 2px 0 9px;
	color: #171d51;
	font-size: 14px;
    font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.recent-order-info div {
	margin-top: 5px;
	color: #858ba0;
	font-size: 12px;
	line-height: 1.3;
}
.recent-order-info strong {
	color: #535a77;
	font-weight: 600;
}
.recent-order-icon {
	width: 38px;
	height: 38px;
	min-width: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #6530e8;
	background: #f2edff;
	font-size: 18px;
}
.recent-order-bottom {
	min-height: 40px;
	margin-top: 11px;
	padding: 5px 5px 5px 9px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border: 1px solid #edf0f6;
	border-radius: 9px;
}
.order-status {
	padding: 6px 9px;
	display: inline-flex;
	align-items: center;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.order-status.cancel {
	color: #ef5570;
	background: #fff0f3;
}
.order-status.pending {
	color: #df9b25;
	background: #fff7e7;
}
.order-view-btn {
	height: 29px;
	padding: 0 9px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border-radius: 7px;
	color: #4f2de2 !important;
	background: #f5f2ff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: .2s ease;
}
.order-view-btn:hover {
	color: #fff !important;
	background: #592be7;
}
.order-view-btn i {
	font-size: 14px;
}
.empty-orders-card {
	padding: 38px 20px;
	text-align: center;
	border: 1px solid #edf0f6;
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 5px 18px rgba(30,40,90,.045);
}
.empty-orders-icon {
	width: 65px;
	height: 65px;
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #6430e8;
	background: #f2edff;
	font-size: 30px;
}
.empty-orders-card h4 {
	margin: 0 0 7px;
	color: #171d51;
	font-size: 16px;
	font-weight: 700;
}
.empty-orders-card p {
	max-width: 430px;
	margin: 0 auto 18px;
	color: #9298a9;
	font-size: 11px;
	line-height: 18px;
}
.empty-orders-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 17px;
	border-radius: 9px;
	color: #fff !important;
	background: linear-gradient(110deg,#2875ed,#7300ed);
	font-size: 10px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 15px rgba(79,55,240,.18);
	transition: .2s ease;
}
.empty-orders-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 9px 20px rgba(79,55,240,.25);
}
@media (max-width: 767px) {
	.recent-order-card {
		padding: 13px;
	}
	.recent-order-info h6 {
		font-size: 11px;
	}
	.recent-order-bottom {
		margin-top: 9px;
	}
}
.dashboard-bottom {
	margin-bottom: 20px;
}

.quick-links-card,
.purchase-history-card {
	height: 100%;
	overflow: hidden;
	border: 1px solid #edf0f6;
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 5px 20px rgba(30, 40, 90, .045);
}

.section-card-header {
	padding: 17px 18px 12px;
}

.section-card-header h5,
.purchase-header h5 {
	margin: 0;
	color: #171d51;
	font-size: 14px;
	font-weight: 700;
}

.quick-links-list {
	padding: 2px 14px 14px;
}

.quick-link-item {
	min-height: 48px;
	margin-bottom: 7px;
	padding: 7px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #edf0f6;
	border-radius: 9px;
	color: #444b68 !important;
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all .2s ease;
}

.quick-link-item:last-child {
	margin-bottom: 0;
}

.quick-link-item:hover {
	color: #5228df !important;
	border-color: #ddd5ff;
	background: #faf9ff;
	transform: translateX(2px);
}

.quick-link-left {
	display: flex;
	align-items: center;
	gap: 9px;
}

.quick-link-icon {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-size: 14px;
}

.services-icon {
	color: #326de8;
	background: #eef4ff;
}

.profile-icon {
	color: #722ee8;
	background: #f3edff;
}

.password-icon {
	color: #ed9a27;
	background: #fff7e8;
}

.support-icon {
	color: #08a98b;
	background: #eafbf7;
}

.logout-icon {
	color: #ee5871;
	background: #fff0f3;
}

.logout-link {
	color: #ef5570 !important;
}

.quick-arrow {
	color: #a0a5b5;
	font-size: 11px;
	transition: .2s ease;
}

.quick-link-item:hover .quick-arrow {
	color: #6330e8;
	transform: translateX(2px);
}

.purchase-header {
	min-height: 61px;
	padding: 12px 17px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #edf0f6;
}

.purchase-header span {
	display: block;
	margin-top: 3px;
	color: #9a9faf;
	font-size: 13px;
}

.all-invoices-btn {
	padding: 7px 11px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 8px;
	color: #4e2cdd !important;
	background: #f4f1ff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: .2s ease;
}

.all-invoices-btn:hover {
	color: #fff !important;
	background: #5b2de5;
}

.purchase-table-wrap {
	width: 100%;
	overflow-x: auto;
}

.purchase-history-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 13px;
}

.purchase-history-table thead th {
	padding: 11px 9px;
	color: #777d94;
	background: #fafaff;
	border-bottom: 1px solid #edf0f6;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	text-transform: uppercase;
}

.purchase-history-table tbody td {
	padding: 12px 9px;
	color: #596079;
	border-bottom: 1px solid #f0f1f6;
	vertical-align: middle;
	white-space: nowrap;
}

.purchase-history-table tbody tr:last-child td {
	border-bottom: 0;
}

.purchase-history-table tbody tr {
	transition: .2s ease;
}

.purchase-history-table tbody tr:hover {
	background: #fbfaff;
}

.serial {
	color: #a0a5b4 !important;
	font-weight: 600;
}

.invoice-id {
	color: #4d35a7;
	font-weight: 600;
}

.service-name {
	max-width: 105px;
	overflow: hidden;
	color: #252b55;
	font-weight: 600;
	text-overflow: ellipsis;
}

.amount {
	color: #3d4564;
	font-weight: 600;
}

.pay-amount {
	color: #242951;
	font-weight: 700;
}

.tax-name {
	padding: 4px 7px;
	border-radius: 5px;
	color: #72788c;
	background: #f4f5f8;
	font-size: 13px;
	font-weight: 600;
}

.invoice-status {
	padding: 5px 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}

.invoice-status span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

.invoice-status.success {
	color: #16a678;
	background: #e9faf3;
}

.invoice-status.pending {
	color: #e49b2d;
	background: #fff6e5;
}

.invoice-status.refund {
	color: #5b67dc;
	background: #eef0ff;
}

.invoice-status.failed {
	color: #ed5570;
	background: #fff0f3;
}

.invoice-date {
	color: #555c75;
	font-size: 13px;
	font-weight: 600;
	line-height: 13px;
}

.invoice-date small {
	display: block;
	color: #a0a4b2;
	font-size: 13px;
	font-weight: 500;
}

.download-invoice {
	width: 29px;
	height: 29px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #5731dc !important;
	background: #f3f0ff;
	font-size: 12px;
	text-decoration: none;
	transition: .2s ease;
}

.download-invoice:hover {
	color: #fff !important;
	background: #5b2de5;
	transform: translateY(-1px);
}

.empty-invoice {
	padding: 32px 15px;
	text-align: center;
}

.empty-invoice-icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #6530e7;
	background: #f2efff;
	font-size: 23px;
}

.empty-invoice h6 {
	margin: 0 0 4px;
	color: #252b55;
	font-size: 12px;
	font-weight: 700;
}

.empty-invoice p {
	margin: 0;
	color: #9da1ae;
	font-size: 9px;
}

@media (max-width: 767px) {
	.purchase-header {
		padding: 12px;
	}
	.purchase-header h5 {
		font-size: 12px;
	}
	.purchase-header span {
		display: none;
	}
	.quick-links-card {
		margin-bottom: 0;
	}
}
/* =========================================================
   SERVICES PAGE HEADER
========================================================= */

.services-page-header {
	position: relative;
	overflow: hidden;
	margin: 0 auto 20px;
	padding: 25px 30px;
	border-radius: 16px;
	background: linear-gradient(110deg,#2875e4 0%,#4529e7 50%,#7200ed 100%);
	box-shadow: 0 10px 28px rgba(60,50,180,.14);
}

.services-header-content {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.services-header-label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 6px;
	color: rgba(255,255,255,.78);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
}

.services-page-header h1 {
	margin: 0;
	color: #fff;
	font-size: 25px;
	font-weight: 700;
}

.services-page-header p {
	margin: 5px 0 0;
	color: rgba(255,255,255,.82);
	font-size: 12px;
}

.services-back-btn {
	height: 38px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	gap: 7px;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 9px;
	color: #fff;
	background: rgba(255,255,255,.13);
	font-size: 11px;
	font-weight: 600;
	backdrop-filter: blur(8px);
	transition: .2s ease;
}

.services-back-btn:hover {
	color: #5427dd;
	background: #fff;
	transform: translateX(-2px);
}

.header-circle {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.1);
}

.circle-one {
	width: 170px;
	height: 170px;
	right: 8%;
	top: -105px;
}

.circle-two {
	width: 100px;
	height: 100px;
	right: 22%;
	bottom: -70px;
}

.circle-three {
	width: 8px;
	height: 8px;
	right: 38%;
	top: 25px;
	background: rgba(255,255,255,.35);
}
.services-search-box {
	position: relative;
	height: 52px;
	margin-bottom: 22px;
	border: 1px solid #e9ebf3;
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 6px 22px rgba(35,40,90,.05);
	transition: .2s ease;
}

.services-search-box:focus-within {
	border-color: #9b82ed;
	box-shadow: 0 7px 25px rgba(91,46,220,.10);
}

.services-search-box input {
	width: 100%;
	height: 100%;
	padding: 0 85px 0 48px;
	border: 0;
	outline: 0;
	border-radius: 13px;
	color: #292e50;
	background: transparent;
	font-size: 12px;
}

.services-search-box input::placeholder {
	color: #a3a7b5;
}

/* =========================================================
   SECTION HEADING
========================================================= */

.services-section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 13px;
}

.services-section-heading h4 {
	margin: 0;
	color: #171d51;
	font-size: 20px;
	font-weight: 700;
}

.services-section-heading p {
	margin: 3px 0 0;
	color: #999eae;
	font-size: 14px;
}

.services-count {
	height: 29px;
	padding: 0 9px;
	display: flex;
	align-items: center;
	gap: 5px;
	border-radius: 7px;
	color: #5c35d8;
	background: #f3f0ff;
	font-size: 9px;
	font-weight: 600;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.premium-service-card {
	height: 100%;
	padding: 16px;
	border: 1px solid #e9ebf2;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 5px 18px rgba(30,40,90,.045);
	transition: all .25s ease;
}

.premium-service-card:hover {
	border-color: #dcd2ff;
	box-shadow: 0 12px 28px rgba(64,45,180,.10);
	transform: translateY(-3px);
}

.service-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}

.service-icon {
	width: 43px;
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #6130e5;
    background: linear-gradient(135deg, #eeeaff, #f7f4ff);
    font-size: 30px;
}

.service-category {
	padding: 5px 8px;
	display: flex;
	align-items: center;
	gap: 4px;
	border-radius: 20px;
	color: #13a477;
	background: #eafaf4;
	font-size: 13px;
	font-weight: 600;
}

.service-category i {
	font-size: 13px;
}

.service-card-content {
	min-height: 83px;
}

.service-card-content h5 {
	max-width: 100%;
	margin: 0 0 13px;
	color: #20264f;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
}

.service-price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.service-price span {
	color: #9a9eae;
	font-size: 14px;
}

.service-price strong {
	color: #5427dd;
	font-size: 18px;
	font-weight: 700;
}

.service-govt-fee {
	margin-top: 10px;
	padding-top: 9px;
	display: flex;
	align-items: center;
	gap: 5px;
	border-top: 1px dashed #ececf2;
	color: #9297a8;
	font-size: 14px;
}

.service-govt-fee i {
	color: #22a889;
	font-size: 11px;
}

.service-govt-fee strong {
	margin-left: auto;
	color: #62687c;
	font-size: 12px;
}

.service-card-footer {
	margin-top: 14px;
	padding-top: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-top: 1px solid #f0f1f5;
}

.service-tax-info {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #a0a4b1;
	font-size: 13px;
}

.service-tax-info i {
	color: #7460cf;
	font-size: 10px;
}

.service-order-btn {
	height: 40px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border-radius: 8px;
	color: #fff !important;
	background: linear-gradient(110deg,#3974ea,#6626e5);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 5px 12px rgba(80,45,220,.15);
	transition: .2s ease;
}

.service-order-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 7px 16px rgba(80,45,220,.24);
}

.service-order-btn i {
	font-size: 11px;
}


/* =========================================================
   ORDER MODAL
========================================================= */

.premium-order-modal {
	overflow: hidden;
	border: 0;
	border-radius: 17px;
	box-shadow: 0 25px 70px rgba(20,20,60,.20);
}

.premium-modal-header {
	padding: 17px 19px !important;
	border-bottom: 1px solid #eeeef4;
	background: #fff;
}

.modal-title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.modal-service-icon {
	width: 39px;
	height: 39px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	color: #5c2de3;
	background: #f1edff;
	font-size: 17px;
}

.modal-title-wrap span {
	display: block;
	margin-bottom: 2px;
	color: #9b9eac;
	font-size: 8px;
}

.modal-title-wrap h5 {
	max-width: 350px;
	margin: 0;
	color: #20264f;
	font-size: 13px;
	font-weight: 700;
}

.order-price-box {
	margin-bottom: 20px;
	padding: 17px;
	text-align: center;
	border-radius: 12px;
	background: linear-gradient(135deg,#f5f2ff,#faf9ff);
}

.order-price-box span {
	display: block;
	color: #9196a7;
	font-size: 13px;
}

.order-price-box strong {
	display: block;
	margin: 3px 0;
	color: #5427dd;
	font-size: 30px;
	font-weight: 700;
}

.order-price-box small {
	color: #9297a7;
	font-size: 12px;
}

.order-price-box small i {
	color: #6744d9;
}

.order-form-group {
	margin-bottom: 13px;
}

.order-form-group label {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 6px;
	color: #4e536b;
	font-size: 9px;
	font-weight: 600;
}

.order-form-group label i {
	color: #6a43d9;
}

.order-form-group .form-control {
	height: 40px;
	border: 1px solid #e6e7ee;
	border-radius: 8px;
	color: #555a70;
	background: #fafafd;
	font-size: 14px;
	box-shadow: none;
}

.order-form-group .form-control:focus {
	border-color: #9d87e9;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(100,50,220,.06);
}

.confirm-order-btn {
	width: 100%;
	height: 43px;
	margin-top: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 9px;
	color: #fff;
	background: linear-gradient(110deg,#3675eb,#6526e5);
	font-size: 15px;
	font-weight: 600;
	box-shadow: 0 7px 17px rgba(79,48,220,.18);
	transition: .2s ease;
}

.confirm-order-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(79,48,220,.25);
}


/* =========================================================
   SUCCESS MODAL
========================================================= */

.order-success-modal {
	overflow: hidden;
	border: 0;
	border-radius: 17px;
}

.order-success-modal .modal-body {
	padding: 30px;
	text-align: center;
}

.success-check {
	width: 65px;
	height: 65px;
	margin: 0 auto 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg,#16c98a,#08a873);
	box-shadow: 0 8px 22px rgba(10,180,120,.18);
	font-size: 30px;
}

.order-success-modal h4 {
	margin: 0 0 7px;
	color: #171d51;
	font-size: 16px;
	font-weight: 700;
}

.success-description {
	margin: 0 auto 16px;
	max-width: 390px;
	color: #818698;
	font-size: 10px;
	line-height: 17px;
}

.success-description strong {
	color: #343a58;
}

.order-reference {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 12px;
}

.order-reference div {
	padding: 11px;
	text-align: left;
	border: 1px solid #ececf2;
	border-radius: 9px;
	background: #fafafd;
}

.order-reference span {
	display: block;
	margin-bottom: 3px;
	color: #999dab;
	font-size: 8px;
}

.order-reference strong {
	color: #5427dd;
	font-size: 11px;
}

.next-step-box {
	padding: 12px;
	text-align: left;
	border: 1px solid #e9e5ff;
	border-radius: 9px;
	background: #f7f5ff;
}

.next-step-title {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 5px;
	color: #4930b2;
	font-size: 10px;
	font-weight: 700;
}

.next-step-box ul {
	margin: 0;
	padding-left: 17px;
	color: #70758a;
	font-size: 8px;
	line-height: 17px;
}

.response-guarantee {
	margin-top: 9px;
	padding: 10px;
	display: flex;
	align-items: center;
	gap: 9px;
	text-align: left;
	border-radius: 9px;
	background: #fff8e9;
}

.response-guarantee > i {
	color: #e89a20;
	font-size: 18px;
}

.response-guarantee strong,
.response-guarantee span {
	display: block;
}

.response-guarantee strong {
	color: #665126;
	font-size: 9px;
}

.response-guarantee span {
	margin-top: 2px;
	color: #8c7c5b;
	font-size: 8px;
}

.success-close-btn {
	width: 100%;
	height: 40px;
	margin-top: 12px;
	border: 0;
	border-radius: 8px;
	color: #fff;
	background: linear-gradient(110deg,#18b77e,#09a46e);
	font-size: 10px;
	font-weight: 600;
}


/* =========================================================
   NO RESULTS
========================================================= */

.no-services-found {
	display: none;
	padding: 45px 20px;
	text-align: center;
}

.no-services-icon {
	width: 55px;
	height: 55px;
	margin: 0 auto 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #6835df;
	background: #f2efff;
	font-size: 22px;
}

.no-services-found h5 {
	margin: 0 0 4px;
	color: #252a50;
	font-size: 13px;
	font-weight: 700;
}

.no-services-found p {
	margin: 0;
	color: #9b9fac;
	font-size: 9px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {
	.services-page-header {
		padding: 20px;
		border-radius: 13px;
	}

	.services-page-header h1 {
		font-size: 20px;
	}

	.services-page-header p {
		font-size: 10px;
	}

	.services-header-label {
		font-size: 8px;
	}

	.services-back-btn {
		width: 36px;
		height: 36px;
		padding: 0;
		justify-content: center;
	}

	.services-back-btn span {
		display: none;
	}

	.services-search-box {
		height: 48px;
	}

	.services-search-box input {
		font-size: 11px;
	}

	.search-shortcut {
		display: none;
	}

	.services-section-heading h4 {
		font-size: 13px;
	}

	.services-section-heading p {
		font-size: 8px;
	}

	.premium-service-card {
		padding: 14px;
	}

	.order-reference {
		grid-template-columns: 1fr;
	}

	.order-success-modal .modal-body {
		padding: 22px;
	}
}

.btntopnewmenu {
    border: 1px solid #dddddd59;
    border-radius: 13px !important;
}
/* ================================
   REFER & EARN
================================ */

.refer-hero {
	background: linear-gradient(115deg, #1769e0 0%, #3023a8 48%, #5b00e8 100%);
	position: relative;
	color: #fff;
	box-shadow: 0 12px 30px rgba(58, 25, 190, .18);
}

.refer-hero::before {
	content: "";
	position: absolute;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: rgba(255,255,255,.05);
	right: -120px;
	top: -180px;
}

.refer-hero::after {
	content: "";
	position: absolute;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: rgba(255,255,255,.04);
	right: 100px;
	bottom: -180px;
}

.referral-input {
	background: #fff;
	padding: 4px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
}

.referral-input .form-control {
	border: 0;
	box-shadow: none;
	font-size: 12px;
	color: #3023a8;
	font-weight: 500;
	height: 40px;
}

.referral-input .btn {
	height: 36px;
	border-radius: 8px;
	color: #5919db;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.social-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	text-decoration: none;
	transition: .2s ease;
}

.social-btn:hover {
	color: #fff;
	transform: translateY(-3px);
}

.social-btn.whatsapp {
	background: #20c878;
}

.social-btn.facebook {
	background: #287be0;
}

.social-btn.twitter {
	background: #3195e8;
}

.social-btn.share {
	background: #8c35e8;
}

.refer-divider {
	width: 1px;
	height: 140px;
	background: rgba(255,255,255,.25);
	margin: auto;
}

.stat-box {
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 12px;
	padding: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	z-index: 2;
}

.stat-box span {
	display: block;
	color: rgba(255,255,255,.75);
	font-size: 10px;
	margin-bottom: 2px;
}

.stat-box strong {
	display: block;
	color: #fff;
	font-size: 16px;
}

.stat-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.stat-icon.purple {
	background: rgba(166,91,255,.25);
	color: #d2aaff;
}

.stat-icon.green {
	background: rgba(25,211,139,.25);
	color: #38e6a1;
}

.stat-icon.blue {
	background: rgba(55,150,255,.25);
	color: #7ec2ff;
}

.stat-icon.orange {
	background: rgba(255,169,45,.25);
	color: #ffc05b;
}

.refer-gift {
	width: 80px;
	height: 80px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 55px;
	color: #f0a7ff;
	transform: rotate(-5deg);
	position: relative;
	z-index: 2;
}

.work-step {
	position: relative;
}

.work-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #f3f0ff;
	color: #6931db;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin: 0 auto;
}

.step-number {
	position: absolute;
	top: -2px;
	left: calc(50% - 42px);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg,#6430dd,#8c20ef);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.reward-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f0f1f5;
}

.reward-row:last-child {
	border-bottom: 0;
}

.reward-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.reward-icon.green {
	background: #e8faf2;
	color: #17ad70;
}

.reward-icon.blue {
	background: #eaf5ff;
	color: #2488dc;
}

.reward-icon.purple {
	background: #f4ecff;
	color: #8038d7;
}

.reward-row strong {
	display: block;
	font-size: 11px;
	color: #25244a;
}

.reward-row small {
	display: block;
	font-size: 9px;
	color: #8a8da0;
	margin-top: 2px;
}

.reward-amount {
	min-width: 70px;
	padding: 8px;
	border-radius: 7px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
}

.reward-amount small {
	font-size: 8px;
}

.green-text {
	color: #16a66d;
	background: #eafaf3;
}

.blue-text {
	color: #2685d3;
	background: #edf7ff;
}

.purple-text {
	color: #7731c7;
	background: #f6edff;
}

.refer-table {
	color: #29294c;
}

.refer-table thead th {
	background: #fafbfe;
	color: #777b91;
	font-size: 10px;
	font-weight: 600;
	padding: 11px 14px;
	border: 0;
	white-space: nowrap;
}

.refer-table tbody td {
	padding: 11px 14px;
	border-bottom: 1px solid #f0f1f5;
	white-space: nowrap;
}

.refer-table tbody tr:last-child td {
	border-bottom: 0;
}

.refer-table tbody tr:hover {
	background: #faf9ff;
}

.recent-item {
	display: flex;
	align-items: center;
	padding: 11px 0;
	border-bottom: 1px solid #f0f1f5;
}

.recent-item:last-child {
	border-bottom: 0;
}

.recent-number {
	width: 20px;
	font-size: 11px;
	font-weight: 700;
	color: #33355a;
}

.recent-item strong {
	font-size: 10px;
	color: #2b2c4d;
}

.recent-item small {
	display: block;
	font-size: 9px;
	color: #9092a3;
	margin-top: 2px;
}

.recent-item .badge {
	font-size: 8px;
	padding: 5px 8px;
}

@media (max-width: 767px) {

	.refer-hero {
		border-radius: 15px;
	}

	.refer-divider {
		display: none;
	}

	.refer-gift {
		display: none;
	}

	.stat-box {
		padding: 8px;
	}

	.stat-box strong {
		font-size: 13px;
	}

	.stat-box span {
		font-size: 9px;
	}

	.social-btn {
		width: 34px;
		height: 34px;
	}

	.refer-table {
		min-width: 650px;
	}

	.work-icon {
		width: 52px;
		height: 52px;
		font-size: 18px;
	}

	.step-number {
		left: calc(50% - 34px);
	}

	.reward-row {
		gap: 8px;
	}

	.reward-amount {
		min-width: 55px;
		font-size: 11px;
	}
}
.wallet-page {
	font-family: "Poppins", sans-serif;
	color: #17174a;
}

.wallet-title {
	font-size: 26px;
	font-weight: 700;
	margin: 0;
	color: #17174a;
}

.wallet-subtitle {
	font-size: 13px;
	color: #777796;
	margin: 4px 0 0;
}

.wallet-balance-card {
	position: relative;
	overflow: hidden;
	padding: 25px 30px;
	min-height: 165px;
	border-radius: 16px;
	background: linear-gradient(110deg, #21158c 0%, #4012b9 45%, #7513df 100%);
	color: #fff;
	box-shadow: 0 10px 30px rgba(69, 27, 190, .18);
}

.wallet-glow {
	position: absolute;
	width: 420px;
	height: 420px;
	right: 150px;
	top: -280px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.08);
	box-shadow:
		0 0 0 40px rgba(255,255,255,.025),
		0 0 0 80px rgba(255,255,255,.02);
}

.wallet-label {
	font-size: 14px;
	font-weight: 600;
	opacity: .95;
}

.wallet-label i {
	opacity: .7;
}

.wallet-amount {
	font-size: 32px;
	font-weight: 700;
	margin-top: 4px;
	margin-bottom: 20px;
}

.wallet-mini-stats {
	border-top: 1px solid rgba(255,255,255,.15);
	padding-top: 12px;
}

.wallet-mini-stats div {
	border-right: 1px solid rgba(255,255,255,.15);
}

.wallet-mini-stats div:last-child {
	border: 0;
}

.wallet-mini-stats span {
	display: block;
	font-size: 13px;
	opacity: .75;
	margin-bottom: 3px;
}

.wallet-mini-stats strong {
	font-size: 14px;
}

.wallet-actions {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 100%;
}

.wallet-action {
	color: #fff;
	text-decoration: none;
	text-align: center;
	min-width: 125px;
	transition: .25s ease;
}

.wallet-action:hover {
	color: #fff;
	transform: translateY(-3px);
}

.wallet-action-icon {
	width: 50px;
	height: 50px;
	margin: 0 auto 8px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.1);
	font-size: 22px;
	box-shadow: 0 5px 15px rgba(0,0,0,.08);
}

.wallet-action strong {
	display: block;
	font-size: 13px;
}

.wallet-action span {
	display: block;
	font-size: 13px;
	opacity: .7;
	line-height: 16px;
	margin-top: 3px;
}

.secure-card,
.wallet-card {
	background: #fff;
	border: 1px solid #eeeef8;
	border-radius: 14px;
	box-shadow: 0 5px 20px rgba(37, 31, 91, .045);
}

.secure-card {
	padding: 28px 20px;
	display: flex;
	gap: 15px;
	align-items: flex-start;
}

.secure-icon {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #eefaff;
	color: #2596ba;
	font-size: 25px;
}

.secure-card h5 {
	font-size: 14px;
	font-weight: 700;
	margin: 4px 0 5px;
}

.secure-card p {
	font-size: 11px;
	line-height: 17px;
	color: #85859b;
	margin-bottom: 12px;
}

.secure-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #e7f8ef;
	color: #26a56a;
	padding: 6px 9px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 600;
}

.wallet-card-header {
	padding: 17px 20px;
	border-bottom: 1px solid #f0f0f7;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wallet-card-header h5 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}

.wallet-card-header a {
	color: #5520c9;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
}

.wallet-table {
	font-size: 11px;
}

.wallet-table thead th {
	background: #fafaff;
	border: 0;
	padding: 12px 15px;
	color: #72728c;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.wallet-table tbody td {
	padding: 13px 15px;
	border-bottom: 1px solid #f3f3f8;
	white-space: nowrap;
}

.wallet-table tbody tr:last-child td {
	border-bottom: 0;
}

.transaction-date strong,
.transaction-date span {
	display: block;
}

.transaction-date strong {
	font-size: 13px;
}

.transaction-date span {
	color: #9292a7;
	font-size: 13px;
	margin-top: 2px;
}

.transaction-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.transaction-info strong,
.transaction-info span {
	display: block;
}

.transaction-info strong {
	font-size: 14px;
	font-weight: 600;
}

.transaction-info span {
	font-size: 12px;
	color: #9292a7;
	margin-top: 2px;
}

.transaction-icon,
.quick-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}

.transaction-icon {
	width: 34px;
	height: 34px;
	font-size: 14px;
}

.transaction-icon.purple,
.quick-icon.purple {
	background: #f0eaff;
	color: #6d28d9;
}

.transaction-icon.green,
.quick-icon.green {
	background: #e8faf2;
	color: #25a871;
}

.transaction-icon.red {
	background: #fff0ed;
	color: #e15b50;
}

.quick-icon.pink {
	background: #f7edff;
	color: #a43bd1;
}

.quick-icon.orange {
	background: #fff4e7;
	color: #ef9a35;
}

.type-badge,
.status-success {
	display: inline-block;
	padding: 5px 9px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
}

.type-badge.payment {
	background: #eef3ff;
	color: #526ed0;
}

.type-badge.add-money {
	background: #e8faf1;
	color: #25a871;
}

.type-badge.reward {
	background: #f5eaff;
	color: #9342c9;
}

.type-badge.withdrawal {
	background: #fff1e3;
	color: #d68a32;
}

.status-success {
	background: #e6f8ef;
	color: #29a56d;
}

.amount-negative {
	color: #e35b59;
}

.amount-positive {
	color: #21a56d;
}

.wallet-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	background: #fafaff;
	color: #777790;
	font-size: 10px;
}

.wallet-pagination button {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #6e6e85;
	margin-left: 3px;
}

.wallet-pagination button.active {
	background: #5a14d4;
	color: #fff;
}

.quick-actions-card {
	padding-bottom: 10px;
}

.quick-action {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	text-decoration: none;
	color: #292951;
	border-bottom: 1px solid #f4f4f8;
}

.quick-action:last-child {
	border-bottom: 0;
}

.quick-action:hover {
	background: #faf9ff;
	color: #292951;
}

.quick-icon {
	width: 34px;
	height: 34px;
	font-size: 15px;
}

.quick-action > div:nth-child(2) {
	flex: 1;
	min-width: 0;
}

.quick-action strong,
.quick-action span {
	display: block;
}

.quick-action strong {
	font-size: 12px;
	font-weight: 700;
}

.quick-action span {
	font-size: 12px;
	color: #9292a7;
	line-height: 13px;
	margin-top: 2px;
}

.quick-action > i {
	font-size: 12px;
	color: #8d8da1;
}

.wallet-switch {
	position: relative;
	width: 35px;
	height: 20px;
	margin: 0;
}

.wallet-switch input {
	display: none;
}

.wallet-switch span {
	position: absolute;
	inset: 0;
	background: #dddde8;
	border-radius: 20px;
	cursor: pointer;
	transition: .2s;
}

.wallet-switch span:before {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	top: 2px;
	left: 2px;
	background: #fff;
	border-radius: 50%;
	transition: .2s;
	box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.wallet-switch input:checked + span {
	background: #6417d8;
}

.wallet-switch input:checked + span:before {
	transform: translateX(15px);
}

.limits-card {
	padding-bottom: 20px;
}

.limits-card .wallet-card-header i {
	color: #8270ce;
	font-size: 30px;
	opacity: .5;
}

.limit-item {
	padding: 15px 18px 0;
}

.limit-item span {
	font-size: 13px;
	color: #77778e;
}

.limit-item strong {
	font-size: 13px;
	color: #6d6d84;
}

.limit-progress {
	height: 6px;
	background: #e9e9f1;
	border-radius: 10px;
	margin-top: 9px;
	overflow: hidden;
}

.limit-progress span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #5510c9, #7515df);
	border-radius: inherit;
}

.limits-link {
	display: block;
	padding: 18px 18px 0;
	color: #5616c8;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 991px) {
	.wallet-actions {
		margin-top: 25px;
	}

	.wallet-balance-card {
		padding-bottom: 25px;
	}

	.secure-card {
		min-height: 120px;
	}
}

@media (max-width: 767px) {
	.wallet-page {
		padding: 0 5px;
	}

	.wallet-title {
		font-size: 22px;
	}

	.wallet-balance-card {
		padding: 20px;
	}

	.wallet-amount {
		font-size: 28px;
	}

	.wallet-actions {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5px;
	}

	.wallet-action {
		min-width: 0;
	}

	.wallet-action span {
		display: none;
	}

	.wallet-action strong {
		font-size: 10px;
	}

	.wallet-action-icon {
		width: 42px;
		height: 42px;
		font-size: 18px;
	}

	.wallet-mini-stats {
		margin-bottom: 5px;
	}

	.wallet-table {
		min-width: 850px;
	}

	.wallet-pagination {
		gap: 10px;
	}

	.wallet-pagination > span {
		font-size: 9px;
	}
}
.stats-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.stat-card {
	position: relative;
	min-height: 150px;
	padding: 22px 20px 12px;
	background: #fff;
	border: 1px solid #edf0f5;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(20, 30, 60, 0.04);
	transition: all .25s ease;
}

.stat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(20, 30, 60, 0.09);
}

.stat-card.purple {
	background:
		radial-gradient(circle at 10% 0%, rgba(124, 58, 237, .045), transparent 45%),
		#fff;
}

.stat-card.green {
	background:
		radial-gradient(circle at 10% 0%, rgba(16, 185, 129, .045), transparent 45%),
		#fff;
}

.stat-card.orange {
	background:
		radial-gradient(circle at 10% 0%, rgba(249, 115, 22, .05), transparent 45%),
		#fff;
}

.stat-card.blue {
	background:
		radial-gradient(circle at 10% 0%, rgba(37, 99, 235, .05), transparent 45%),
		#fff;
}

.stat-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.stat-info {
	display: flex;
	align-items: center;
	gap: 14px;
}

.stat-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.stat-icon svg {
	width: 24px;
	height: 24px;
	stroke-width: 2;
	fill: none;
}

.purple .stat-icon {
	background: #f0e9ff;
	color: #7c3aed;
}

.green .stat-icon {
	background: #e5faf3;
	color: #10b981;
}

.orange .stat-icon {
	background: #fff1e4;
	color: #f97316;
}

.blue .stat-icon {
	background: #e9efff;
	color: #2563eb;
}

.stat-title {
	font-size: 13px;
	font-weight: 500;
	color: #586174;
	margin-bottom: 3px;
}

.stat-value {
	font-size: 16px;
	line-height: 1.1;
	font-weight: 700;
	color: #172033;
	letter-spacing: -.4px;
}

.stat-menu {
	width: 25px;
	height: 25px;
	border: 0;
	background: transparent;
	color: #737b8c;
	cursor: pointer;
	font-size: 21px;
	line-height: 18px;
}

.stat-change {
	margin-top: 17px;
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
}

.stat-change.positive {
	color: #10a87b;
}

.stat-change.negative {
	color: #e57373;
}

.change-text {
	color: #7b8495;
	font-weight: 500;
}

.chart {
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 0;
	height: 65px;
	pointer-events: none;
}

.chart svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.chart-line {
	fill: none;
	stroke-width: 2.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.chart-area {
	opacity: .75;
}

.purple .chart-line {
	stroke: #7c3aed;
}

.purple .chart-area {
	fill: url(#purpleGradient);
}

.green .chart-line {
	stroke: #38c99b;
}

.green .chart-area {
	fill: url(#greenGradient);
}

.orange .chart-line {
	stroke: #f59b43;
}

.orange .chart-area {
	fill: url(#orangeGradient);
}

.blue .chart-line {
	stroke: #4777e8;
}

.blue .chart-area {
	fill: url(#blueGradient);
}

@media (max-width: 1100px) {
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.stats-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.stat-card {
		min-height: 185px;
	}
}
.dashboard-row {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 16px;
	margin-top: 18px;
}

.statistics-card,
.quick-links-card {
	background: #fff;
	border: 1px solid #edf0f5;
	border-radius: 15px;
	box-shadow: 0 4px 18px rgba(20, 30, 60, .035);
	overflow: hidden;
}

.statistics-card {
	padding: 16px 18px 13px;
}

.quick-links-card {
	padding: 16px;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 13px;
}

.section-header h5 {
	margin: 0;
	color: #172033;
	font-size: 14px;
	font-weight: 700;
}

.year-select {
	border: 1px solid #e8ebf1;
	background: #fff;
	color: #273044;
	border-radius: 8px;
	padding: 7px 28px 7px 11px;
	font-size: 11px;
	font-weight: 500;
	outline: none;
	cursor: pointer;
}

.statistics-chart {
	display: grid;
	grid-template-columns: 32px 1fr 42px;
	height: 165px;
	position: relative;
}

.y-axis {
	height: 132px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 9px;
	color: #7c8494;
}

.left-axis {
	text-align: left;
}

.right-axis {
	text-align: right;
}

.chart-area-box {
	position: relative;
	height: 165px;
}

.chart-grid {
	position: absolute;
	left: 0;
	right: 0;
	top: 4px;
	height: 132px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.chart-grid span {
	width: 100%;
	border-top: 1px dashed #e9ecf2;
}

.bars {
	position: absolute;
	left: 0;
	right: 0;
	top: 4px;
	height: 132px;
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	padding: 0 8px;
}

.bar-item {
	width: 18px;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.bar {
	width: 14px;
	border-radius: 3px 3px 1px 1px;
	background: linear-gradient(180deg, #7c22ed 0%, #6d19e8 100%);
	box-shadow: 0 3px 8px rgba(124, 34, 237, .14);
}

.revenue-line {
	position: absolute;
	left: 0;
	top: 4px;
	width: 100%;
	height: 132px;
	z-index: 3;
	overflow: visible;
}

.revenue-path {
	fill: none;
	stroke: #12a89b;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.revenue-fill {
	fill: url(#revenueGradient);
}

.revenue-line circle {
	fill: #12a89b;
	stroke: #fff;
	stroke-width: 2;
}

.x-axis {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5px;
	display: flex;
	justify-content: space-around;
	font-size: 9px;
	color: #747d8e;
}

.chart-legend {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: -1px;
	font-size: 10px;
	color: #60697a;
}

.chart-legend div {
	display: flex;
	align-items: center;
	gap: 5px;
}

.legend-dot {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	display: inline-block;
}

.legend-dot.orders {
	background: #7c22ed;
}

.legend-dot.revenue {
	background: #12a89b;
}

.quick-links-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 11px;
}

.quick-link {
	min-height: 78px;
	border-radius: 11px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	color: #4a5365;
	font-size: 11px;
	font-weight: 600;
	transition: all .2s ease;
}

.quick-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(30, 40, 70, .07);
}

.quick-icon {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quick-icon svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.purple-link {
	background: #f6f0ff;
	color: #7620e8;
}

.green-link {
	background: #edf9f5;
	color: #13b584;
}

.orange-link {
	background: #fff7eb;
	color: #f29a22;
}

.blue-link {
	background: #eef4ff;
	color: #3974df;
}

.red-link {
	background: #fff0f1;
	color: #e95058;
}

.pink-link {
	background: #fff0fa;
	color: #d64fc0;
}

@media (max-width: 1000px) {
	.dashboard-row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.statistics-card,
	.quick-links-card {
		padding: 14px;
	}

	.quick-links-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.statistics-chart {
		grid-template-columns: 27px 1fr 38px;
	}

	.bar {
		width: 11px;
	}
}
.dashboard-status-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 18px;
}

.status-card {
	position: relative;
	min-height: 180px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.7);
	box-shadow: 0 5px 20px rgba(30,40,70,.045);
	transition: all .25s ease;
}

.status-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(30,40,70,.09);
}

.payment-card {
	background: linear-gradient(115deg, #fff8f3 0%, #fff0e7 100%);
}

.tasks-card {
	background: linear-gradient(115deg, #f5f8ff 0%, #edf2fb 100%);
}

.work-card {
	background: linear-gradient(115deg, #f1fbf8 0%, #e8f7f2 100%);
}

.status-content {
	position: relative;
	z-index: 5;
	padding: 17px 18px;
	width: 58%;
}

.status-title {
	font-size: 13px;
	font-weight: 700;
	color: #263044;
	margin-bottom: 30px;
}

.payment-card .status-title {
	color: #a94728;
}

.tasks-card .status-title {
	color: #31538d;
}

.work-card .status-title {
	color: #18796f;
}

.status-sparkle {
	position: absolute;
	right: 0;
	top: -2px;
	color: #f4aa29;
	font-size: 14px;
}

.status-label {
	font-size: 13px;
	font-weight: 500;
	color: #8a6d62;
	margin-bottom: 3px;
}

.tasks-card .status-label {
	color: #71809a;
}

.work-card .status-label {
	color: #6d918b;
}

.status-amount {
	font-size: 18px;
	font-weight: 750;
	line-height: 1.2;
	color: #172033;
	letter-spacing: -.3px;
}

.status-subtext {
	font-size: 12px;
	font-weight: 500;
	color: #b46c59;
	margin-top: 4px;
}

.tasks-card .status-subtext {
	color: #8d6570;
}

.status-subtext.urgent {
	color: #b75e6b;
}

.work-card .status-subtext {
	color: #57857d;
}

.status-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 17px;
	padding: 5px 10px;
	border-radius: 5px;
	background: rgba(255,255,255,.88);
	border: 1px solid rgba(220,220,220,.5);
	color: #485266;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 2px 5px rgba(30,40,70,.025);
	transition: all .2s ease;
}

.status-btn:hover {
	background: #fff;
	color: #172033;
	transform: translateY(-1px);
}

.status-illustration {
	position: absolute;
	right: 12px;
	bottom: 0;
	width: 42%;
	height: 100%;
}

/* Hourglass */
.hourglass {
	position: absolute;
	right: 17px;
	top: 30px;
	width: 56px;
	height: 112px;
}

.hourglass-top,
.hourglass-bottom {
	position: absolute;
	left: 2px;
	width: 52px;
	height: 12px;
	border-radius: 50%;
	background: linear-gradient(180deg,#d8651c,#a8420d);
	box-shadow: 0 2px 3px rgba(120,50,10,.2);
}

.hourglass-top {
	top: 0;
}

.hourglass-bottom {
	bottom: 0;
}

.hourglass-glass {
	position: absolute;
	left: 8px;
	top: 8px;
	width: 40px;
	height: 94px;
	background: rgba(255,255,255,.42);
	border-left: 5px solid rgba(180,100,40,.35);
	border-right: 5px solid rgba(180,100,40,.35);
	clip-path: polygon(0 0,100% 0,68% 50%,100% 100%,0 100%,32% 50%);
	overflow: hidden;
}

.sand-top {
	position: absolute;
	top: 7px;
	left: 7px;
	width: 26px;
	height: 20px;
	background: #e6a43e;
	border-radius: 50% 50% 30% 30%;
}

.sand-bottom {
	position: absolute;
	bottom: 5px;
	left: 4px;
	width: 32px;
	height: 34px;
	background: #e8a642;
	border-radius: 50% 50% 30% 30%;
}
@media (max-width: 1000px) {
	.dashboard-status-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 650px) {
	.dashboard-status-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.status-card {
		min-height: 175px;
	}
}
.status-illustration {
	position: absolute;
	right: 10px;
	bottom: 0;
	width: 42%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.status-illustration img {
	width: 100px;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}
.dashboard-right-grid {
	display: grid;
	gap: 16px;
}

.recent-services-card,
.short-links-card,
.recent-activity-card {
	background: #fff;
	border: 1px solid #edf0f5;
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(20,30,60,.035);
	overflow: hidden;
}

.recent-services-card {
	grid-row: span 2;
}

.services-header,
.card-heading,
.activity-header {
	height: 50px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.services-header {
	background: linear-gradient(110deg,#6813df,#8500e9);
}

.services-header h5 {
	color: #fff;
}

.services-header a {
	color: #fff;
	background: rgba(255,255,255,.13);
	padding: 6px 11px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

.services-header h5,
.card-heading h5,
.activity-header h5 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.card-heading h5,
.activity-header h5 {
	color: #202b40;
}
.card-heading {
	border-bottom: 1px solid #f1f2f5;
}
.manage-btn {
	color: #5d27c9;
	border: 1px solid #eee7ff;
	background: #fff;
	padding: 6px 10px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}
.service-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 16px;
	border-bottom: 1px solid #f1f2f5;
}
.service-icon,
.activity-icon,
.link-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.service-icon svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.service-icon.purple {
	background: #f4edff;
	color: #7927db;
}

.service-icon.blue {
	background: #edf4ff;
	color: #3474dd;
}

.service-icon.green {
	background: #eafaf4;
	color: #18a978;
}

.service-icon.pink {
	background: #f9efff;
	color: #a64bce;
}

.service-info {
	flex: 1;
	min-width: 0;
}

.service-name {
	color: #293348;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.service-right {
	display: flex;
    align-items: center;
    gap: 15px;
}

.service-right strong {
	font-size: 13px;
	color: #252d3f;
}

.service-status {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 6px;
	border-radius: 4px;
}

.service-status.progress {
	color: #7624d8;
	background: #f3eaff;
}
.progress, .progress-stacked {
    --vz-progress-height: auto !important;
}
.service-status.completed {
	color: #139b70;
	background: #e7f9f1;
}

.short-links-card {
	min-height: 190px;
}

.short-link-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 14px;
}

.link-icon {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #f4edff;
	color: #8643d7;
}

.link-icon svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.link-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.link-content strong {
	font-size: 13px;
	color: #384155;
	font-weight: 600;
}

.link-content span {
	font-size: 10px;
	color: #7d8493;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.copy-btn {
	width: 27px;
	height: 27px;
	border: 1px solid #edf0f4;
	background: #fff;
	border-radius: 7px;
	color: #8a91a0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.copy-btn svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

.recent-activity-card {
	min-height: 185px;
}

.activity-header a {
	font-size: 12px;
	font-weight: 700;
	color: #6722cf;
	text-decoration: none;
}

.activity-list {
	padding: 7px 14px 10px;
}

.activity-item {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 30px;
	margin-bottom: 7px;
}

.activity-icon {
	width: 34px;
	height: 34px;
	border-radius: 7px;
}

.activity-icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.activity-icon.purple {
	color: #8846dc;
	background: #f3edff;
}

.activity-icon.blue {
	color: #4b7fe0;
	background: #edf4ff;
}

.activity-icon.violet {
	color: #7452d8;
	background: #f1edff;
}

.activity-text {
	flex: 1;
	min-width: 0;
}

.activity-text strong {
	color: #354054;
	font-size: 13px;
	font-weight: 600;
}

.activity-time {
	color: #9198a6;
	font-size: 13px;
	white-space: nowrap;
}

@media (max-width: 850px) {
	.dashboard-bottom-grid {
		grid-template-columns: 1fr;
	}

	.recent-services-card {
		grid-row: auto;
	}
}

@media (max-width: 500px) {
	.service-item {
		padding-left: 11px;
		padding-right: 11px;
	}

	.service-name {
		font-size: 10px;
	}

	.activity-text strong {
		font-size: 9px;
	}

	.activity-time {
		font-size: 8px;
	}
}
.refer-earn-banner {
	width: 100%;
	min-height: 58px;
	padding: 8px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	background: linear-gradient(90deg, #fff, #fefcff);
	border: 1px solid #eeeaf7;
	border-radius: 11px;
	box-shadow: 0 3px 14px rgba(50, 30, 90, .035);
	box-sizing: border-box;
}

.refer-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.refer-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: linear-gradient(145deg, #fff5fc, #f3eaff);
	border: 1px solid #f1e7fa;
	box-shadow: 0 3px 8px rgba(126, 54, 200, .06);
}

.refer-icon span {
	font-size: 18px;
	line-height: 1;
}

.refer-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.refer-title {
	color: #7926b9;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.refer-subtitle {
	color: #8b8f9c;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}

.refer-btn {
	flex-shrink: 0;
	height: 31px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 7px;
	background: linear-gradient(135deg, #f8f0ff, #f5edff);
	border: 1px solid #eee1fc;
	color: #7623c4;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: all .2s ease;
}

.refer-btn svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.refer-btn:hover {
	color: #fff;
	background: linear-gradient(135deg, #7926d8, #9b35e8);
	border-color: transparent;
	transform: translateY(-1px);
	box-shadow: 0 5px 12px rgba(121, 38, 216, .18);
}

@media (max-width: 500px) {
	.refer-earn-banner {
		padding: 9px 10px;
	}

	.refer-icon {
		width: 33px;
		height: 33px;
	}

	.refer-title {
		font-size: 11px;
	}

	.refer-subtitle {
		font-size: 8px;
	}

	.refer-btn {
		padding: 0 9px;
		font-size: 8px;
	}
}
#back-to-top {
	position: fixed;
	right: 24px;
	bottom: 28px;
	width: 42px;
	height: 42px;
	display: none;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 12px;
	background: linear-gradient(135deg, #6d28d9, #8b5cf6);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	z-index: 1000;

	box-shadow:
		0 8px 20px rgba(109, 40, 217, .22),
		0 2px 6px rgba(0, 0, 0, .08);

	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

#back-to-top:hover {
	transform: translateY(-4px);
	background: linear-gradient(135deg, #5b21b6, #7c3aed);
	box-shadow:
		0 12px 26px rgba(109, 40, 217, .30),
		0 3px 8px rgba(0, 0, 0, .08);
}

#back-to-top:active {
	transform: translateY(-1px) scale(.96);
}

#back-to-top i {
	font-size: 18px;
	font-weight: 600;
	transition: transform .3s ease;
}

#back-to-top:hover i {
	transform: translateY(-2px);
}
/* ================================
   DOCUMENT PAGE
================================ */

.document-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 22px;
}

.document-breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 7px;
	color: #9299a8;
	font-size: 12px;
	font-weight: 500;
}

.document-breadcrumb i:first-child {
	color: #7027d5;
	font-size: 15px;
}

.document-page-header h1 {
	margin: 0;
	color: #20283a;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.4px;
}

.document-page-header p {
	margin: 5px 0 0;
	color: #8b93a3;
	font-size: 13px;
	line-height: 1.5;
}

.documents-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 17px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid #e5e7ed;
	color: #454d5d;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 5px 18px rgba(30, 35, 60, .045);
	transition: all .25s ease;
}

.documents-btn i {
	color: #7027d5;
	font-size: 17px;
}

.documents-btn:hover {
	color: #7027d5;
	border-color: #d7c5f4;
	background: #fcfaff;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(112, 39, 213, .08);
}


/* ================================
   MAIN CARD
================================ */

.document-upload-card {
	background: #fff;
	border: 1px solid #e9eaf0;
	border-radius: 16px;
	box-shadow:
		0 12px 35px rgba(25, 35, 65, .055),
		0 2px 8px rgba(25, 35, 65, .025);
	overflow: hidden;
}

.document-card-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 19px 24px;
	background: linear-gradient(135deg, #fbf9ff 0%, #ffffff 70%);
	border-bottom: 1px solid #f0eef5;
}

.document-header-icon {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 13px;
	background: linear-gradient(135deg, #eee4ff, #f7efff);
	color: #7625d3;
	box-shadow: 0 5px 15px rgba(112, 39, 213, .08);
}

.document-header-icon i {
	font-size: 22px;
}

.document-card-header h4 {
	margin: 0;
	color: #273044;
	font-size: 15px;
	font-weight: 700;
}

.document-card-header p {
	margin: 4px 0 0;
	color: #9097a5;
	font-size: 12px;
	line-height: 1.5;
}

.document-card-body {
	padding: 26px 28px;
}


/* ================================
   FORM
================================ */

.document-form-group {
	margin-bottom: 20px;
}

.document-form-group > label {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 8px;
	color: #354054;
	font-size: 13px;
	font-weight: 650;
}

.document-form-group > label span {
	color: #e5484d;
	font-size: 13px;
}

.document-form-group > label small {
	margin-left: 4px;
	color: #9ba1ad;
	font-size: 11px;
	font-weight: 500;
}


/* ================================
   INPUT
================================ */

.document-input {
	position: relative;
	display: flex;
	align-items: center;
	height: 45px;
	border: 1px solid #e2e5eb;
	border-radius: 10px;
	background: #fff;
	transition: all .25s ease;
}

.document-input > i:first-child {
	margin-left: 13px;
	color: #8c94a3;
	font-size: 17px;
	transition: color .2s ease;
}

.document-input input,
.document-input select {
	width: 100%;
	height: 100%;
	padding: 0 13px;
	border: 0;
	outline: 0;
	background: transparent;
	color: #30394b;
	font-size: 13px;
	font-weight: 500;
}

.document-input input::placeholder {
	color: #a5abb6;
}

.document-input:focus-within {
	border-color: #b99be9;
	background: #fefcff;
	box-shadow: 0 0 0 4px rgba(112, 39, 213, .07);
}

.document-input:focus-within > i:first-child {
	color: #7027d5;
}

.document-input select {
	padding-right: 40px;
	appearance: none;
	cursor: pointer;
}

.document-input .select-arrow {
	position: absolute;
	right: 13px;
	color: #8d94a2;
	font-size: 17px;
	pointer-events: none;
}


/* ================================
   DROPZONE
================================ */

.document-dropzone {
	position: relative;
	min-height: 145px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	border: 1.5px dashed #cfc2e9;
	border-radius: 12px;
	background: linear-gradient(135deg, #fcfaff 0%, #ffffff 100%);
	cursor: pointer;
	transition: all .3s ease;
}

.document-dropzone:hover {
	border-color: #8b4bd8;
	background: linear-gradient(135deg, #faf7ff, #fff);
	box-shadow: inset 0 0 25px rgba(112, 39, 213, .025);
}

.document-dropzone input {
	display: none;
}

.upload-icon {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: linear-gradient(135deg, #eee5ff, #f6efff);
	color: #7627d2;
	box-shadow: 0 6px 16px rgba(112, 39, 213, .08);
}

.upload-icon i {
	font-size: 26px;
}

.upload-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.upload-content strong {
	color: #343c4e;
	font-size: 14px;
	font-weight: 700;
}

.upload-content span {
	color: #858d9d;
	font-size: 13px;
}

.upload-content small {
	margin-top: 4px;
	color: #a2a8b3;
	font-size: 11px;
}


/* ================================
   FILE PREVIEW
================================ */

.selected-file {
	display: none;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	padding: 11px 13px;
	border: 1px solid #e5dcf3;
	border-radius: 10px;
	background: linear-gradient(135deg, #faf8ff, #fff);
	box-shadow: 0 4px 12px rgba(50, 40, 80, .025);
}

.selected-file-icon {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: #eee5ff;
	color: #7025ce;
}

.selected-file-icon i {
	font-size: 19px;
}

.selected-file-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.selected-file-info strong {
	color: #3a4253;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.selected-file-info span {
	color: #969dab;
	font-size: 11px;
}

#removeFile {
	width: 31px;
	height: 31px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 8px;
	background: #fff;
	color: #d45259;
	cursor: pointer;
	transition: all .2s ease;
}

#removeFile:hover {
	background: #fff0f1;
	transform: scale(1.04);
}

#removeFile i {
	font-size: 16px;
}


/* ================================
   TEXTAREA
================================ */

.document-textarea {
	position: relative;
	border: 1px solid #e2e5eb;
	border-radius: 10px;
	background: #fff;
	transition: all .25s ease;
}

.document-textarea > i {
	position: absolute;
	top: 13px;
	left: 13px;
	color: #8c94a3;
	font-size: 17px;
}

.document-textarea textarea {
	width: 100%;
	padding: 12px 13px 12px 40px;
	border: 0;
	outline: 0;
	resize: vertical;
	background: transparent;
	color: #30394b;
	font-size: 13px;
	line-height: 1.55;
}

.document-textarea textarea::placeholder {
	color: #a5abb6;
}

.document-textarea:focus-within {
	border-color: #b99be9;
	background: #fefcff;
	box-shadow: 0 0 0 4px rgba(112, 39, 213, .07);
}

.document-textarea:focus-within > i {
	color: #7027d5;
}


/* ================================
   SECURITY
================================ */

.document-security-note {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
	padding: 12px 14px;
	border: 1px solid #dff0e8;
	border-radius: 10px;
	background: linear-gradient(135deg, #f7fcf9, #fbfefc);
}

.security-icon {
	width: 35px;
	height: 35px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: #e4f7ed;
	color: #18a56f;
}

.security-icon i {
	font-size: 18px;
}

.document-security-note div:last-child {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.document-security-note strong {
	color: #287052;
	font-size: 12px;
	font-weight: 700;
}

.document-security-note span {
	color: #78968a;
	font-size: 11px;
	line-height: 1.45;
}


/* ================================
   BUTTONS
================================ */

.document-submit {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #f0f1f4;
}

.cancel-document {
	height: 42px;
	padding: 0 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e2e4e9;
	border-radius: 9px;
	background: #fff;
	color: #626b7b;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: all .2s ease;
}

.cancel-document:hover {
	color: #343b4b;
	background: #f8f9fb;
	border-color: #d8dbe2;
}

.upload-document-btn {
	height: 42px;
	padding: 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 9px;
	background: linear-gradient(135deg, #6821d2, #8538e6);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 7px 18px rgba(106, 35, 211, .20);
	cursor: pointer;
	transition: all .25s ease;
}

.upload-document-btn i {
	font-size: 17px;
}

.upload-document-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(106, 35, 211, .28);
}


/* ================================
   RESPONSIVE
================================ */

@media (max-width: 576px) {

	.document-page-header {
		align-items: flex-start;
		flex-direction: column;
		margin-bottom: 18px;
	}

	.document-page-header h1 {
		font-size: 20px;
	}

	.document-page-header p {
		font-size: 12px;
	}

	.documents-btn {
		width: 100%;
		justify-content: center;
	}

	.document-card-body {
		padding: 18px 15px;
	}

	.document-card-header {
		padding: 15px;
	}

	.document-card-header h4 {
		font-size: 14px;
	}

	.document-card-header p {
		font-size: 11px;
	}

	.document-dropzone {
		min-height: 175px;
		flex-direction: column;
		text-align: center;
		padding: 20px;
	}

	.upload-content {
		align-items: center;
	}

	.upload-content strong {
		font-size: 13px;
	}

	.upload-content span {
		font-size: 12px;
	}

	.document-submit {
		flex-direction: column-reverse;
	}

	.cancel-document,
	.upload-document-btn {
		width: 100%;
	}

	.document-security-note {
		align-items: flex-start;
	}

	.document-security-note span {
		font-size: 10px;
	}
}
.document-page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
	margin-bottom: 22px;
	padding: 20px 22px;
	background: linear-gradient(135deg, #faf8ff 0%, #ffffff 75%);
	border: 1px solid #ece8f4;
	border-radius: 16px;
	box-shadow: 0 7px 25px rgba(30, 25, 60, .035);
}

.document-page-title {
	display: flex;
	align-items: center;
	gap: 14px;
}

.document-page-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 13px;
	background: linear-gradient(135deg, #eee4ff, #f7efff);
	color: #7027d5;
	box-shadow: 0 7px 18px rgba(112, 39, 213, .09);
}

.document-page-icon i {
	font-size: 23px;
}

.document-breadcrumb {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 4px;
	color: #9ba1ae;
	font-size: 11px;
}

.document-breadcrumb i {
	font-size: 14px;
}

.document-page-title h1 {
	margin: 0;
	color: #222a3a;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.4px;
}

.document-page-title p {
	margin: 4px 0 0;
	color: #8d95a3;
	font-size: 12px;
}

.document-page-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.document-back-btn,
.document-upload-btn {
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0 15px;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: all .25s ease;
}

.document-back-btn {
	border: 1px solid #e2e5eb;
	background: #fff;
	color: #596171;
	cursor: pointer;
}

.document-back-btn:hover {
	color: #7027d5;
	border-color: #d7c7f2;
	background: #faf7ff;
}

.document-upload-btn {
	border: 0;
	background: linear-gradient(135deg, #6821d2, #8538e6);
	color: #fff;
	box-shadow: 0 6px 18px rgba(106, 35, 211, .20);
}

.document-upload-btn:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 9px 24px rgba(106, 35, 211, .28);
}

.document-upload-btn i,
.document-back-btn i {
	font-size: 16px;
}


/* =========================================
   SUMMARY CARDS
========================================= */

.document-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 18px;
}

.document-summary-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #eaecf1;
	border-radius: 12px;
	box-shadow: 0 5px 18px rgba(30, 35, 60, .035);
}

.summary-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
}

.summary-icon i {
	font-size: 19px;
}

.summary-icon.purple {
	background: #f1eaff;
	color: #7229d1;
}

.summary-icon.blue {
	background: #eaf4ff;
	color: #3481d7;
}

.summary-icon.green {
	background: #e7f8ef;
	color: #20a46e;
}

.summary-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.summary-info span {
	color: #9198a6;
	font-size: 11px;
}

.summary-info strong {
	color: #2c3445;
	font-size: 14px;
	font-weight: 700;
}


/* =========================================
   MAIN CARD
========================================= */

.document-main-card {
	background: #fff;
	border: 1px solid #e9ebf0;
	border-radius: 15px;
	box-shadow: 0 8px 28px rgba(25, 35, 65, .045);
	overflow: hidden;
}

.document-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid #f0f1f4;
}

.document-list-header h3 {
	margin: 0;
	color: #293143;
	font-size: 15px;
	font-weight: 700;
}

.document-list-header p {
	margin: 4px 0 0;
	color: #9299a7;
	font-size: 11px;
}

.document-count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 10px;
	border-radius: 7px;
	background: #f7f5fb;
	color: #6f7480;
	font-size: 11px;
	font-weight: 600;
}

.document-count i {
	color: #7027d5;
	font-size: 14px;
}


/* =========================================
   TOOLBAR
========================================= */

.document-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
	background: #fcfcfd;
	border-bottom: 1px solid #f0f1f4;
}

.document-search {
	position: relative;
	flex: 1;
	height: 38px;
}

.document-search > i {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	color: #9aa1ad;
	font-size: 16px;
	pointer-events: none;
}

.document-search input {
	width: 100%;
	height: 100%;
	padding: 0 12px 0 36px;
	border: 1px solid #e3e5ea;
	border-radius: 8px;
	outline: 0;
	background: #fff;
	color: #30394b;
	font-size: 12px;
	transition: all .2s ease;
}

.document-search input::placeholder {
	color: #a4aab5;
}

.document-search input:focus {
	border-color: #b99be9;
	box-shadow: 0 0 0 3px rgba(112, 39, 213, .06);
}

.document-filter {
	position: relative;
	width: 155px;
	height: 38px;
}

.document-filter > i {
	position: absolute;
	top: 50%;
	left: 11px;
	transform: translateY(-50%);
	color: #8d95a3;
	font-size: 15px;
	pointer-events: none;
}

.document-filter select {
	width: 100%;
	height: 100%;
	padding: 0 10px 0 32px;
	border: 1px solid #e3e5ea;
	border-radius: 8px;
	outline: 0;
	background: #fff;
	color: #555e6e;
	font-size: 11px;
	cursor: pointer;
}


/* =========================================
   DOCUMENT LIST - PROFESSIONAL TYPOGRAPHY
========================================= */

.document-list-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
}

.document-list-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	background: #fff;
	border: 1px solid #e7e9ef;
	border-radius: 12px;
	transition: all .25s ease;
}

.document-list-item:hover {
	border-color: #d8c6f2;
	background: #fefeff;
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(65, 40, 100, .07);
}

/* Document Icon */

.document-list-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 11px;
}

.document-list-icon i {
	font-size: 23px;
}

.document-list-icon.pdf {
	background: #fff0f0;
	color: #dc4545;
}

.document-list-icon.image {
	background: #edf6ff;
	color: #347fce;
}

.document-list-icon.default {
	background: #f1eaff;
	color: #7027d2;
}

/* Document Information */

.document-list-info {
	flex: 1;
	min-width: 0;
}

.document-name {
	margin-bottom: 6px;
	color: #293244;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.document-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #8b93a1;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
}

.document-meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.document-meta i {
	font-size: 13px;
}

.meta-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #b9bec7;
}

/* Category */

.document-category {
	min-width: 160px;
}

.document-category span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	border: 1px solid #e9e6ef;
	border-radius: 8px;
	background: #faf9fc;
	color: #626a79;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
}

.document-category i {
	color: #7138c9;
	font-size: 14px;
}

/* Actions */

.document-actions {
	display: flex;
	align-items: center;
	gap: 7px;
}

.document-action {
	height: 35px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 11px;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: all .2s ease;
}

.document-action i {
	font-size: 15px;
}

.document-action.view {
	border: 1px solid #d9e6f7;
	background: #f7faff;
	color: #3477c7;
	text-decoration: none;
}

.document-action.view:hover {
	background: #eaf3ff;
	border-color: #c7dcf5;
	color: #2465b8;
}

.document-action.delete {
	border: 1px solid #efdcdc;
	background: #fff8f8;
	color: #d34c55;
}

.document-action.delete:hover {
	background: #fff0f0;
	border-color: #e8c5c8;
}


/* =========================================
   EMPTY STATE
========================================= */

.document-empty-state {
	padding: 60px 25px;
	text-align: center;
}

.document-empty-icon {
	width: 76px;
	height: 76px;
	margin: 0 auto 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	background: linear-gradient(135deg, #eee5ff, #faf7ff);
	color: #742bd2;
	box-shadow: 0 8px 25px rgba(112, 39, 213, .08);
}

.document-empty-icon i {
	font-size: 34px;
}

.document-empty-state h5 {
	margin: 0 0 8px;
	color: #303849;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.document-empty-state p {
	max-width: 440px;
	margin: 0 auto 22px;
	color: #8d95a3;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.65;
}

.document-empty-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 17px;
	border-radius: 9px;
	background: linear-gradient(135deg, #6821d2, #8538e6);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 7px 18px rgba(106, 35, 211, .18);
	transition: all .2s ease;
}

.document-empty-btn:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(106, 35, 211, .23);
}


/* =========================================
   SEARCH EMPTY
========================================= */

.document-search-empty {
	display: none;
	padding: 48px 20px;
	text-align: center;
}

.document-search-empty > div {
	width: 54px;
	height: 54px;
	margin: 0 auto 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: #f3f1f7;
	color: #8b919d;
}

.document-search-empty i {
	font-size: 23px;
}

.document-search-empty h5 {
	margin: 0 0 6px;
	color: #3b4353;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.document-search-empty p {
	margin: 0;
	color: #9299a7;
	font-size: 12px;
	line-height: 1.5;
}


/* =========================================
   SECURITY FOOTER
========================================= */

.document-security-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid #dff0e8;
	border-radius: 11px;
	background: linear-gradient(135deg, #f7fcf9, #fcfefd);
}

.document-security-left {
	display: flex;
	align-items: center;
	gap: 11px;
}

.security-footer-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 9px;
	background: #e3f6eb;
	color: #1ba46e;
}

.security-footer-icon i {
	font-size: 18px;
}

.document-security-left div:last-child {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.document-security-left strong {
	color: #287052;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}

.document-security-left span {
	color: #7b978b;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
}

.secure-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 10px;
	border-radius: 8px;
	background: #eaf8f0;
	color: #29825c;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

.secure-badge i {
	font-size: 14px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

	.document-page-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.document-page-actions {
		width: 100%;
	}

	.document-back-btn,
	.document-upload-btn {
		flex: 1;
	}

	.document-summary {
		grid-template-columns: 1fr;
	}

	.document-list-header {
		gap: 10px;
	}

	.document-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.document-filter {
		width: 100%;
	}

	.document-category {
		display: none;
	}

	.document-action {
		width: 35px;
		padding: 0;
	}

	.document-action span {
		display: none;
	}

	.document-security-footer {
		align-items: flex-start;
		flex-direction: column;
	}

	.secure-badge {
		align-self: flex-start;
	}
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px) {

	.document-page-head {
		padding: 16px;
	}

	.document-page-title h1 {
		font-size: 19px;
	}

	.document-page-title p {
		font-size: 11px;
	}

	.document-page-icon {
		width: 42px;
		height: 42px;
	}

	.document-list-header {
		align-items: flex-start;
		flex-direction: column;
	}

	.document-list-wrapper {
		padding: 10px;
	}

	.document-list-item {
		gap: 11px;
		padding: 12px;
		flex-wrap: wrap;
	}

	.document-list-icon {
		width: 44px;
		height: 44px;
	}

	.document-list-icon i {
		font-size: 21px;
	}

	.document-list-info {
		max-width: calc(100% - 58px);
	}

	.document-name {
		font-size: 13px;
	}

	.document-meta {
		font-size: 10px;
	}

	.document-actions {
		width: 100%;
		margin-left: 55px;
	}

	.document-action {
		flex: 1;
		width: auto;
		height: 35px;
	}

	.document-action span {
		display: inline;
		font-size: 11px;
	}

	.document-security-left {
		align-items: flex-start;
	}

	.document-security-left strong {
		font-size: 11px;
	}

	.document-security-left span {
		font-size: 10px;
		line-height: 1.45;
	}
}
/* =========================================
   SUPPORT & TICKETS
========================================= */

.ticket-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.ticket-breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 5px;
	color: #9299a7;
	font-size: 13px;
	font-weight: 500;
}

.ticket-breadcrumb i {
	color: #7027d5;
	font-size: 14px;
}

.ticket-page-header h1 {
	margin: 0;
	color: #20283a;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.3px;
}

.ticket-page-header p {
	margin: 5px 0 0;
	color: #9299a7;
	font-size: 13px;
}

.ticket-create-btn {
	height: 40px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0 16px;
	border-radius: 9px;
	background: linear-gradient(135deg,#6821d2,#8538e6);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 7px 18px rgba(106,35,211,.18);
	transition: all .2s ease;
}

.ticket-create-btn i {
	font-size: 16px;
}

.ticket-create-btn:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(106,35,211,.25);
}


/* =========================================
   MAIN CARD
========================================= */

.ticket-card {
	background: #fff;
	border: 1px solid #e8eaf0;
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(25,35,65,.045);
	overflow: hidden;
}

.ticket-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 16px 20px;
	border-bottom: 1px solid #eceef3;
	background: linear-gradient(135deg,#faf9ff,#fff);
}

.ticket-section-title {
	display: flex;
	align-items: center;
	gap: 11px;
}

.ticket-section-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #f0e8ff;
	color: #7027d5;
}

.ticket-section-icon i {
	font-size: 19px;
}

.ticket-section-title h4 {
	margin: 0;
	color: #303849;
	font-size: 14px;
	font-weight: 700;
}

.ticket-section-title p {
	margin: 3px 0 0;
	color: #9299a7;
	font-size: 13px;
}

.ticket-tab {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 8px 12px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #f5f1fb !important;
	color: #7027d5 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
}

.ticket-tab i {
	font-size: 14px;
}


/* =========================================
   CARD BODY
========================================= */

.ticket-card-body {
	padding: 18px;
}


/* =========================================
   SUMMARY
========================================= */

.ticket-summary {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 10px;
	margin-bottom: 17px;
}

.ticket-summary-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border: 1px solid #ebedf2;
	border-radius: 10px;
	background: #fff;
}

.summary-icon {
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 9px;
}

.summary-icon i {
	font-size: 16px;
}

.summary-icon.total {
	background: #f0e8ff;
	color: #7027d5;
}

.summary-icon.open {
	background: #fff6df;
	color: #c78a13;
}

.summary-icon.progress {
	background: #eaf5ff;
	color: #3682c9;
}

.summary-icon.resolved {
	background: #e9f8f0;
	color: #249466;
}

.ticket-summary-item div:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ticket-summary-item span {
	color: #9299a7;
	font-size: 14px;
}

.ticket-summary-item strong {
	color: #303849;
	font-size: 16px;
	font-weight: 700;
}


/* =========================================
   TABLE
========================================= */

.ticket-table-container {
	border: 1px solid #e8eaf0;
	border-radius: 11px;
	overflow: hidden;
}

.ticket-table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
}

.ticket-table thead th {
	padding: 12px 13px;
	background: #fafafd;
	border-bottom: 1px solid #e9ebef;
	color: #858d9c;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .35px;
	white-space: nowrap;
}

.ticket-table tbody td {
	padding: 13px;
	border-bottom: 1px solid #f0f1f4;
	vertical-align: middle;
}

.ticket-table tbody tr:last-child td {
	border-bottom: 0;
}

.ticket-table tbody tr {
	transition: all .2s ease;
}

.ticket-table tbody tr:hover {
	background: #fcfbff;
}


/* =========================================
   NUMBER
========================================= */

.ticket-number {
	width: 27px;
	height: 27px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	background: #f5f3f8;
	color: #858c99;
	font-size: 10px;
	font-weight: 600;
}


/* =========================================
   TICKET ID
========================================= */

.ticket-id {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 140px;
}

.ticket-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 9px;
	background: #f0e8ff;
	color: #7027d5;
}

.ticket-icon i {
	font-size: 17px;
}

.ticket-id > div:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ticket-id strong {
	color: #303849;
	font-size: 12px;
	font-weight: 700;
}

.ticket-id small {
	color: #9aa1ae;
	font-size: 13px;
}


/* =========================================
   SUBJECT
========================================= */

.ticket-subject {
	display: flex;
	flex-direction: column;
	gap: 3px;
	max-width: 280px;
}

.ticket-subject strong {
	color: #343c4d;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.ticket-subject span {
	color: #a0a6b1;
	font-size: 13px;
}


/* =========================================
   STATUS
========================================= */

.ticket-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 9px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 650;
	white-space: nowrap;
}

.status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.ticket-status.open {
	background: #fff6df;
	color: #c78a13;
}

.ticket-status.progress {
	background: #eaf5ff;
	color: #3682c9;
}

.ticket-status.pending {
	background: #f1f2f4;
	color: #737b89;
}

.ticket-status.resolved {
	background: #e9f8f0;
	color: #249466;
}

.ticket-status.closed {
	background: #eef0f3;
	color: #555e6d;
}

.ticket-status.default {
	background: #f4f5f7;
	color: #707784;
}


/* =========================================
   PRIORITY
========================================= */

.ticket-priority {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 9px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 650;
	white-space: nowrap;
}

.ticket-priority i {
	font-size: 13px;
}

.ticket-priority.urgent,
.ticket-priority.high {
	background: #fff0f0;
	color: #d34d55;
}

.ticket-priority.medium {
	background: #edf5ff;
	color: #377bc4;
}

.ticket-priority.low {
	background: #f1f2f4;
	color: #737b89;
}

.ticket-priority.default {
	background: #f4f5f7;
	color: #707784;
}


/* =========================================
   DATE
========================================= */

.ticket-date {
	display: flex;
	flex-direction: column;
	gap: 2px;
	white-space: nowrap;
}

.ticket-date strong {
	color: #505969;
	font-size: 11px;
	font-weight: 600;
}

.ticket-date span {
	color: #a0a6b1;
	font-size: 13px;
}


/* =========================================
   VIEW BUTTON
========================================= */

.ticket-view-btn {
	height: 33px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0 10px;
	border: 1px solid #ded2f0;
	border-radius: 7px;
	background: #faf8ff;
	color: #6d2dc4;
	font-size: 13px;
	font-weight: 650;
	text-decoration: none;
	transition: all .2s ease;
}

.ticket-view-btn i {
	font-size: 14px;
}

.ticket-view-btn:hover {
	background: #f1eaff;
	border-color: #cdb6ed;
	color: #5d20b2;
}


/* =========================================
   SUPPORT FOOTER
========================================= */

.ticket-support-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-top: 15px;
	padding: 13px 15px;
	border: 1px solid #e2e8f3;
	border-radius: 10px;
	background: linear-gradient(135deg,#f8fbff,#fff);
}

.ticket-support-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ticket-support-icon {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #edf5ff;
	color: #347ac7;
}

.ticket-support-icon i {
	font-size: 16px;
}

.ticket-support-left > div:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ticket-support-left strong {
	color: #354054;
	font-size: 13px;
	font-weight: 700;
}

.ticket-support-left span {
	color: #8d96a5;
	font-size: 13px;
}

.ticket-support-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 11px;
	border-radius: 7px;
	background: #f0e8ff;
	color: #7027d5;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.ticket-support-btn:hover {
	background: #e8dcfb;
	color: #5f21b8;
}


/* =========================================
   EMPTY STATE
========================================= */

.ticket-empty {
	padding: 65px 25px;
	text-align: center;
}

.ticket-empty-icon {
	width: 76px;
	height: 76px;
	margin: 0 auto 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	background: linear-gradient(135deg,#eee5ff,#faf7ff);
	color: #742bd2;
	box-shadow: 0 8px 25px rgba(112,39,213,.08);
}

.ticket-empty-icon i {
	font-size: 34px;
}

.ticket-empty h5 {
	margin: 0 0 8px;
	color: #303849;
	font-size: 17px;
	font-weight: 700;
}

.ticket-empty p {
	max-width: 480px;
	margin: 0 auto 22px;
	color: #9299a7;
	font-size: 13px;
	line-height: 1.65;
}

.ticket-empty-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 17px;
	border-radius: 9px;
	background: linear-gradient(135deg,#6821d2,#8538e6);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 7px 18px rgba(106,35,211,.18);
	transition: all .2s ease;
}

.ticket-empty-btn:hover {
	color: #fff;
	transform: translateY(-1px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 992px) {

	.ticket-summary {
		grid-template-columns: repeat(2,1fr);
	}

	.ticket-table {
		min-width: 900px;
	}

}

@media (max-width: 768px) {

	.ticket-page-header {
		align-items: flex-start;
		flex-direction: column;
	}

	.ticket-create-btn {
		width: 100%;
	}

	.ticket-card-header {
		align-items: flex-start;
		flex-direction: column;
	}

	.ticket-header-right {
		width: 100%;
	}

	.ticket-tab {
		width: 100%;
		justify-content: center;
	}

	.ticket-card-body {
		padding: 12px;
	}

	.ticket-support-footer {
		align-items: flex-start;
		flex-direction: column;
	}

	.ticket-support-btn {
		width: 100%;
		justify-content: center;
	}

}

@media (max-width: 480px) {

	.ticket-page-header h1 {
		font-size: 19px;
	}

	.ticket-page-header p {
		font-size: 13px;
	}

	.ticket-summary {
		grid-template-columns: 1fr 1fr;
		gap: 7px;
	}

	.ticket-summary-item {
		padding: 10px;
	}

	.summary-icon {
		width: 32px;
		height: 32px;
	}

	.ticket-summary-item span {
		font-size: 13px;
	}

	.ticket-summary-item strong {
		font-size: 14px;
	}

	.ticket-empty {
		padding: 50px 15px;
	}

	.ticket-empty-icon {
		width: 68px;
		height: 68px;
	}

	.ticket-empty h5 {
		font-size: 16px;
	}

	.ticket-empty p {
		font-size: 13px;
	}

}
/* =========================================================
   ORDER HISTORY PAGE
========================================================= */

.order-history-page {
	max-width: 1500px;
	margin: 0 auto;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.order-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.order-breadcrumb {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 7px;
	color: #9299a8;
	font-size: 12px;
	font-weight: 500;
}

.order-breadcrumb i:first-child {
	color: #6d28d9;
	font-size: 14px;
}

.order-breadcrumb i {
	font-size: 13px;
}

.order-page-header h1 {
	margin: 0;
	color: #202838;
	font-size: 24px;
	font-weight: 750;
	letter-spacing: -.4px;
}

.order-page-header p {
	margin: 5px 0 0;
	color: #8b93a3;
	font-size: 13px;
}


/* Back Button */

.order-back-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid #e4e6ed;
	border-radius: 9px;
	background: #fff;
	color: #596274;
	font-size: 13px;
	font-weight: 650;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(25, 35, 65, .04);
	transition: all .2s ease;
}

.order-back-btn i {
	font-size: 16px;
}

.order-back-btn:hover {
	color: #6d28d9;
	border-color: #d9caf3;
	background: #faf8ff;
	transform: translateY(-1px);
}


/* =========================================================
   MAIN CARD
========================================================= */

.order-history-card {
	overflow: hidden;
	background: #fff;
	border: 1px solid #e7e9ef;
	border-radius: 15px;
	box-shadow: 0 8px 30px rgba(25, 35, 65, .055);
}


/* =========================================================
   CARD HEADER
========================================================= */

.order-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 17px 20px;
	border-bottom: 1px solid #eceef2;
	background: linear-gradient(
		135deg,
		#ffffff 0%,
		#fcfaff 100%
	);
}

.order-card-title {
	display: flex;
	align-items: center;
	gap: 11px;
}

.order-title-icon {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: linear-gradient(135deg, #eee5ff, #f8f2ff);
	color: #7027d5;
}

.order-title-icon i {
	font-size: 20px;
}

.order-card-title h4 {
	margin: 0;
	color: #293245;
	font-size: 15px;
	font-weight: 700;
}

.order-card-title p {
	margin: 3px 0 0;
	color: #959cab;
	font-size: 12px;
}

.order-header-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 11px;
	border: 1px solid #e7ddf8;
	border-radius: 20px;
	background: #faf7ff;
	color: #6d28d9;
	font-size: 12px;
	font-weight: 650;
}

.order-header-badge i {
	font-size: 14px;
}


/* =========================================================
   TABLE
========================================================= */

.order-table-wrap {
	width: 100%;
	overflow-x: auto;
}

.order-history-table {
	width: 100%;
	min-width: 1100px;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	color: #30394b;
	font-size: 13px;
}


/* Table Header */

.order-history-table thead th {
	padding: 14px 15px;
	border: 0;
	border-bottom: 1px solid #e9ebf0;
	background: #f8f9fc;
	color: #737b8b;
	font-size: 11px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: .4px;
	white-space: nowrap;
}

.order-history-table thead th:first-child {
	padding-left: 20px;
}


/* Table Body */

.order-history-table tbody td {
	padding: 15px;
	border: 0;
	border-bottom: 1px solid #f0f1f4;
	background: #fff;
	vertical-align: middle;
	font-size: 13px;
}

.order-history-table tbody tr {
	transition: all .2s ease;
}

.order-history-table tbody tr:hover td {
	background: #fcfaff;
}

.order-history-table tbody tr:last-child td {
	border-bottom: 0;
}


/* =========================================================
   SERIAL
========================================================= */

.order-sn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	border-radius: 7px;
	background: #f5f6f8;
	color: #818999;
	font-size: 11px;
	font-weight: 700;
}


/* =========================================================
   ORDER ID
========================================================= */

.order-id-box {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 9px;
	border: 1px solid #e7ddf8;
	border-radius: 7px;
	background: #faf7ff;
	color: #6526bd;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.order-id-box i {
	font-size: 14px;
}


/* =========================================================
   INVOICE ID
========================================================= */

.invoice-id {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #526072;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.invoice-id i {
	color: #738096;
	font-size: 14px;
}


/* =========================================================
   SERVICE
========================================================= */

.service-name {
	max-width: 230px;
	color: #30394a;
	font-size: 13px;
	font-weight: 650;
	line-height: 1.45;
}


/* =========================================================
   AMOUNTS
========================================================= */

.amount-value {
	color: #3e4758;
	font-size: 13px;
	font-weight: 650;
	white-space: nowrap;
}

.payable-value {
	color: #18805a;
	font-size: 13px;
	font-weight: 750;
	white-space: nowrap;
}


/* =========================================================
   TAX
========================================================= */

.tax-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 8px;
	border-radius: 6px;
	background: #f3f5f8;
	color: #687181;
	font-size: 11px;
	font-weight: 650;
	white-space: nowrap;
}


/* =========================================================
   STATUS
========================================================= */

.order-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 82px;
	padding: 7px 10px;
	border: 1px solid transparent;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 750;
	white-space: nowrap;
}

.status-dot {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 50%;
	background: currentColor;
}


/* Paid */

.order-status.success {
	background: #eaf9f1;
	border-color: #ccefdc;
	color: #198754;
}


/* Pending / Unpaid */

.order-status.pending {
	background: #fff7df;
	border-color: #f4e2ad;
	color: #a06d00;
}


/* Refund */

.order-status.refund {
	background: #edf4ff;
	border-color: #d3e3fa;
	color: #2868b2;
}


/* Cancel */

.order-status.failed {
	background: #fff0f1;
	border-color: #f2d1d4;
	color: #d1434d;
}


/* =========================================================
   DATE
========================================================= */

.order-date {
	display: flex;
	flex-direction: column;
	gap: 3px;
	white-space: nowrap;
}

.order-date strong {
	color: #4b5567;
	font-size: 12px;
	font-weight: 650;
}

.order-date span {
	color: #9aa1ae;
	font-size: 11px;
}


/* =========================================================
   INVOICE BUTTON
========================================================= */

.invoice-view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 33px;
	padding: 0 11px;
	border: 1px solid #d8e5f8;
	border-radius: 7px;
	background: #f7faff;
	color: #3475c2;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
	transition: all .2s ease;
}

.invoice-view-btn i {
	font-size: 14px;
}

.invoice-view-btn:hover {
	border-color: #c4d9f4;
	background: #eaf3ff;
	color: #2464ac;
	transform: translateY(-1px);
}


/* Not Available */

.not-available {
	color: #b2b7c0;
	font-size: 13px;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.order-empty-state {
	padding: 65px 25px;
	text-align: center;
}

.empty-order-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	background: linear-gradient(135deg, #eee6ff, #faf7ff);
	color: #7027d5;
}

.empty-order-icon i {
	font-size: 32px;
}

.order-empty-state h5 {
	margin: 0 0 7px;
	color: #303849;
	font-size: 16px;
	font-weight: 700;
}

.order-empty-state p {
	max-width: 450px;
	margin: 0 auto 20px;
	color: #9299a7;
	font-size: 13px;
	line-height: 1.65;
}

.empty-order-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px;
	border-radius: 8px;
	background: linear-gradient(135deg, #6821d2, #8538e6);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 7px 18px rgba(106, 35, 211, .18);
	transition: all .2s ease;
}

.empty-order-btn:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(106, 35, 211, .24);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

	.order-page-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.order-page-header h1 {
		font-size: 21px;
	}

	.order-page-header p {
		font-size: 12px;
	}

	.order-back-btn {
		width: 100%;
	}

	.order-card-header {
		padding: 14px;
	}

	.order-card-title h4 {
		font-size: 14px;
	}

	.order-header-badge {
		display: none;
	}

	.order-history-table {
		min-width: 1050px;
	}

	.order-history-table thead th {
		padding: 13px;
		font-size: 10px;
	}

	.order-history-table tbody td {
		padding: 13px;
		font-size: 13px;
	}
}


@media (max-width: 480px) {

	.order-page-header h1 {
		font-size: 19px;
	}

	.order-card-header {
		padding: 13px;
	}

	.order-title-icon {
		width: 38px;
		height: 38px;
	}

	.order-title-icon i {
		font-size: 18px;
	}

	.order-card-title h4 {
		font-size: 13px;
	}

	.order-card-title p {
		font-size: 11px;
	}

	.order-empty-state {
		padding: 45px 18px;
	}
}
.order-history-card {
	background: #fff;
	border: 1px solid #e8ebf0;
	border-radius: 16px;
	box-shadow: 0 8px 30px rgba(25, 35, 60, .05);
	overflow: hidden;
}


/* =========================================
   HEADER
========================================= */

.order-history-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 22px;
	border-bottom: 1px solid #edf0f4;
	background: linear-gradient(135deg, #ffffff, #faf9ff);
}

.order-header-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.order-header-icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: linear-gradient(135deg, #eee5ff, #f7f1ff);
	color: #7027d5;
}

.order-header-icon i {
	font-size: 21px;
}

.order-header-left h4 {
	margin: 0;
	color: #252d3d;
	font-size: 17px;
	font-weight: 700;
}

.order-header-left p {
	margin: 4px 0 0;
	color: #8d95a3;
	font-size: 12px;
}

.order-header-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.order-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 11px;
	border: 1px solid #e8e3f2;
	border-radius: 8px;
	background: #faf8ff;
	color: #6d35b4;
	font-size: 12px;
	font-weight: 600;
}

.order-count i {
	font-size: 15px;
}

.order-back-btn {
	height: 37px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(135deg, #6821d2, #8538e6);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	box-shadow: 0 5px 14px rgba(106, 35, 211, .18);
	cursor: pointer;
	transition: all .2s ease;
}

.order-back-btn:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(106, 35, 211, .25);
}

.order-back-btn i {
	font-size: 16px;
}


/* =========================================
   BODY
========================================= */

.order-history-body {
	padding: 0 20px 18px;
}


/* =========================================
   TABLE
========================================= */

.order-history-table {
	min-width: 1100px;
}

.order-history-table thead th {
	padding: 15px 12px;
	border-bottom: 1px solid #e9edf2 !important;
	background: #fafbfc;
	color: #737c8c;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: .25px;
}

.order-history-table tbody td {
	padding: 15px 12px;
	border-bottom: 1px solid #f0f2f5;
	color: #475062;
	font-size: 13px;
	vertical-align: middle;
	white-space: nowrap;
}

.order-history-table tbody tr {
	transition: all .2s ease;
}

.order-history-table tbody tr:hover {
	background: #fbfaff;
}

.order-history-table tbody tr:last-child td {
	border-bottom: 0;
}


/* =========================================
   SERIAL
========================================= */

.order-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: #f4f5f8;
	color: #6f7785;
	font-size: 12px;
	font-weight: 700;
}


/* =========================================
   ORDER ID
========================================= */

.order-id-box {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #4e5667;
}

.order-id-icon {
	color: #7950c9;
	font-size: 13px;
}

.order-id-box strong {
	font-size: 13px;
	font-weight: 700;
}


/* =========================================
   INVOICE NUMBER
========================================= */

.invoice-number {
	color: #596273;
	font-size: 13px;
	font-weight: 600;
}

.not-available {
	color: #adb3bd;
	font-size: 13px;
}


/* =========================================
   SERVICE
========================================= */

.service-name {
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: 220px;
}

.service-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #f2ecff;
	color: #7130cf;
}

.service-icon i {
	font-size: 17px;
}

.service-name span {
	overflow: hidden;
	text-overflow: ellipsis;
	color: #353e50;
	font-size: 13px;
	font-weight: 600;
}


/* =========================================
   AMOUNT
========================================= */

.amount-text {
	color: #424b5c;
	font-size: 13px;
	font-weight: 600;
}

.pay-amount {
	color: #202938;
	font-size: 14px;
	font-weight: 700;
}


/* =========================================
   TAX
========================================= */

.tax-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 8px;
	border: 1px solid #e5e8ed;
	border-radius: 6px;
	background: #f8f9fb;
	color: #697282;
	font-size: 11px;
	font-weight: 600;
}


/* =========================================
   STATUS
========================================= */

.order-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 9px;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 700;
}

.status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.order-status.success {
	background: #eaf8f0;
	color: #23835b;
}

.order-status.pending {
	background: #fff6df;
	color: #b47a09;
}

.order-status.failed {
	background: #fff0f1;
	color: #cf4b55;
}

.order-status.refund {
	background: #eef5ff;
	color: #3b73c7;
}

.order-status.progress {
	background: #f0edff;
	color: #6b3bc4;
}

.order-status.default {
	background: #f2f3f5;
	color: #68707e;
}


/* =========================================
   DATE
========================================= */

.order-date {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.order-date span {
	color: #4e5767;
	font-size: 12px;
	font-weight: 600;
}

.order-date small {
	color: #9aa1ad;
	font-size: 11px;
}


/* =========================================
   VIEW INVOICE
========================================= */

.invoice-view-btn {
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0 10px;
	border: 1px solid #d9e6f8;
	border-radius: 7px;
	background: #f7faff;
	color: #3474c5;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	transition: all .2s ease;
}

.invoice-view-btn i {
	font-size: 14px;
}

.invoice-view-btn:hover {
	background: #eaf3ff;
	border-color: #c6dbf5;
	color: #2465b7;
}


/* =========================================
   EMPTY STATE
========================================= */

.order-empty-state {
	padding: 65px 20px;
	text-align: center;
}

.empty-icon {
	width: 70px;
	height: 70px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 18px;
	background: linear-gradient(135deg, #eee5ff, #faf7ff);
	color: #742bd2;
}

.empty-icon i {
	font-size: 32px;
}

.order-empty-state h5 {
	margin: 0 0 7px;
	color: #303849;
	font-size: 16px;
	font-weight: 700;
}

.order-empty-state p {
	margin: 0 auto 20px;
	max-width: 420px;
	color: #9299a7;
	font-size: 13px;
	line-height: 1.6;
}

.empty-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 15px;
	border-radius: 8px;
	background: linear-gradient(135deg, #6821d2, #8538e6);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(106, 35, 211, .18);
}

.empty-action:hover {
	color: #fff;
	transform: translateY(-1px);
}


/* =========================================
   PAGINATION
========================================= */

.order-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-top: 18px;
	padding: 15px 2px 2px;
	border-top: 1px solid #edf0f4;
}

.pagination-info {
	color: #8b93a3;
	font-size: 13px;
	font-weight: 500;
}

.pagination-info strong {
	color: #303849;
	font-weight: 700;
}

.pagination-nav {
	display: flex;
	align-items: center;
	gap: 5px;
}

.page-btn,
.page-number {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e5e8ed;
	border-radius: 8px;
	background: #fff;
	color: #687180;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: all .2s ease;
}

.page-btn i {
	font-size: 17px;
}

.page-number:hover,
.page-btn:hover {
	border-color: #d8c5f2;
	background: #faf7ff;
	color: #6d28d9;
	transform: translateY(-1px);
}

.page-number.active {
	border-color: #6d28d9;
	background: linear-gradient(135deg, #6821d2, #8538e6);
	color: #fff;
	box-shadow: 0 4px 12px rgba(106, 35, 211, .20);
}

.page-btn.disabled {
	opacity: .45;
	cursor: not-allowed;
	background: #f7f8fa;
}

.page-dots {
	width: 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #9ca3af;
	font-size: 13px;
	font-weight: 600;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

	.order-history-header {
		align-items: flex-start;
		flex-direction: column;
		padding: 16px;
	}

	.order-header-right {
		width: 100%;
		justify-content: space-between;
	}

	.order-history-body {
		padding: 0 12px 15px;
	}

	.order-history-table thead th {
		font-size: 11px;
	}

	.order-history-table tbody td {
		font-size: 13px;
		padding: 12px 10px;
	}

	.order-pagination {
		flex-direction: column;
		align-items: center;
	}

	.pagination-info {
		font-size: 12px;
	}

	.pagination-nav {
		justify-content: center;
		width: 100%;
	}

}

@media (max-width: 480px) {

	.order-header-left h4 {
		font-size: 16px;
	}

	.order-header-left p {
		font-size: 11px;
	}

	.order-count {
		font-size: 11px;
	}

	.order-back-btn {
		font-size: 11px;
	}

	.page-btn,
	.page-number {
		width: 31px;
		height: 31px;
		font-size: 12px;
	}

	.page-btn i {
		font-size: 15px;
	}

}
.invoice-page {
    --invoice-primary: #635bff;
    --invoice-primary-dark: #5147e8;
    --invoice-primary-soft: #f0efff;
    --invoice-text: #172033;
    --invoice-muted: #74809a;
    --invoice-border: #e9edf5;
    --invoice-bg: #f7f8fc;
    --invoice-success: #16b67a;
    --invoice-success-soft: #e7f8f1;
    --invoice-warning: #f59e0b;
    --invoice-warning-soft: #fff5df;
    --invoice-danger: #ef4444;
    --invoice-danger-soft: #fff0f0;
    --invoice-blue: #2f80ed;
    --invoice-blue-soft: #eaf3ff;
}
.invoice-page .page-content {
    background: linear-gradient(180deg, #f8f9fd 0%, #ffffff 70%);
    min-height: 100vh;
}
.invoice-page .invoice-page-header {
    margin-bottom: 24px;
}
.invoice-page .invoice-page-title {
    color: var(--invoice-text);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.4px;
    margin-bottom: 5px;
}
.invoice-page .invoice-page-subtitle {
    color: var(--invoice-muted);
    font-size: 13px;
}
.invoice-page .create-invoice-btn {
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #6d63ff, #574ee9);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(99,91,255,.20);
    transition: all .25s ease;
}
.invoice-page .create-invoice-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(99,91,255,.28);
}
.invoice-page .invoice-stat-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 156px;
    padding: 22px;
    border: 1px solid rgba(226,230,240,.9);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 5px 18px rgba(27,39,71,.045),0 1px 3px rgba(27,39,71,.035);
    transition: all .3s ease;
}
.invoice-page .invoice-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 35px rgba(27,39,71,.09),0 3px 8px rgba(27,39,71,.04);
}
.invoice-page .invoice-stat-card::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -35px;
    bottom: -40px;
    border-radius: 50%;
    background: rgba(99,91,255,.045);
    pointer-events: none;
}
.invoice-page .invoice-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}
.invoice-page .invoice-stat-label {
    display: block;
    margin-bottom: 8px;
    color: #7b8499;
    font-size: 15px;
    font-weight: 500;
}
.invoice-page .invoice-stat-value {
    color: var(--invoice-text);
    font-size: 26px;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.7px;
    margin: 0;
}
.invoice-page .invoice-stat-change {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 13px;
    font-size: 15px;
    font-weight: 600;
}
.invoice-page .invoice-stat-change small {
    color: #8992a5;
    font-size: 15px;
    font-weight: 500;
    margin-left: 3px;
}
.invoice-page .invoice-stat-change.success {
    color: var(--invoice-success);
}
.invoice-page .invoice-stat-change.warning {
    color: var(--invoice-warning);
}
.invoice-page .invoice-stat-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 21px;
}
.invoice-page .stat-icon-purple {
    color: #635bff;
    background: #f0efff;
}
.invoice-page .stat-icon-green {
    color: #16b67a;
    background: #e7f8f1;
}
.invoice-page .stat-icon-orange {
    color: #f59e0b;
    background: #fff5df;
}
.invoice-page .stat-icon-blue {
    color: #2f80ed;
    background: #eaf3ff;
}
.invoice-page .stat-mini-line {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 88px;
    height: 38px;
    opacity: .75;
}
.invoice-page .stat-mini-line svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.invoice-page .stat-mini-line path {
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
}
.invoice-page .stat-mini-line.purple path {
    stroke: #8b7cff;
}
.invoice-page .stat-mini-line.green path {
    stroke: #6fd7b3;
}
.invoice-page .stat-mini-line.orange path {
    stroke: #ffc96c;
}
.invoice-page .stat-mini-line.blue path {
    stroke: #69aaff;
}
.invoice-page .invoice-history-card {
    border: 1px solid rgba(226,230,240,.9);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 25px rgba(27,39,71,.055),0 1px 3px rgba(27,39,71,.035);
    overflow: hidden;
}
.invoice-page .invoice-history-header {
    padding: 25px 25px 18px;
}
.invoice-page .invoice-history-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}
.invoice-page .invoice-history-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    border-radius: 15px;
    background: linear-gradient(135deg,#f0efff,#f6f4ff);
    color: var(--invoice-primary);
    font-size: 21px;
}
.invoice-page .invoice-history-title {
    color: var(--invoice-text);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 3px;
}
.invoice-page .invoice-history-subtitle {
    color: var(--invoice-muted);
    font-size: 12px;
    margin: 0;
}
.invoice-page .invoice-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 0 25px 22px;
}
.invoice-page .invoice-search-box {
    width: 390px;
    max-width: 100%;
}
.invoice-page .invoice-search {
    position: relative;
}
.invoice-page .invoice-search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    color: #8992a5;
    font-size: 16px;
    transform: translateY(-50%);
    pointer-events: none;
}
.invoice-page .invoice-search-input {
    width: 100%;
    height: 43px;
    padding: 0 15px 0 42px;
    border: 1px solid #e5e9f1;
    border-radius: 11px;
    outline: none;
    background: #f8f9fc;
    color: var(--invoice-text);
    font-size: 12px;
    transition: all .2s ease;
}
.invoice-page .invoice-search-input::placeholder {
    color: #9aa3b5;
}
.invoice-page .invoice-search-input:focus {
    border-color: #aaa4ff;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(99,91,255,.08);
}
.invoice-page .invoice-filter {
    position: relative;
}
.invoice-page .invoice-status {
    min-width: 125px;
    height: 43px;
    padding: 0 35px 0 14px;
    border: 1px solid #e3e7ef;
    border-radius: 11px;
    outline: none;
    background-color: #fff;
    color: #26334d;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.invoice-page .invoice-status:focus {
    border-color: #aaa4ff;
    box-shadow: 0 0 0 4px rgba(99,91,255,.08);
}
.invoice-page .invoice-list {
    padding: 0 25px;
}
.invoice-page .invoice-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 18px;
    margin-bottom: 11px;
    border: 1px solid #e9edf4;
    border-radius: 14px;
    background: #fff;
    transition: all .25s ease;
}
.invoice-page .invoice-item:hover {
    border-color: #d9d8f7;
    background: #fdfdff;
    box-shadow: 0 8px 22px rgba(41,48,82,.055);
    transform: translateY(-1px);
}
.invoice-page .invoice-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
}
.invoice-page .invoice-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f0efff;
    color: #635bff;
    font-size: 20px;
}
.invoice-page .invoice-info {
    min-width: 0;
}
.invoice-page .invoice-number {
    color: #172033;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}
.invoice-page .invoice-service {
    max-width: 280px;
    margin-top: 4px;
    overflow: hidden;
    color: #59667f;
    font-size: 15px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.invoice-page .invoice-client {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    color: #8b94a7;
    font-size: 15px;
}
.invoice-page .invoice-client i {
    font-size: 15px;
}
.invoice-page .invoice-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    white-space: nowrap;
}
.invoice-page .invoice-date {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #68748b;
    font-size: 15px;
    font-weight: 500;
}
.invoice-page .invoice-date i {
    color: #7d88a0;
    font-size: 15px;
}
.invoice-page .invoice-amount {
    min-width: 90px;
    color: #172033;
    font-size: 15px;
    font-weight: 750;
    text-align: right;
}
.invoice-page .invoice-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 74px;
    padding: 7px 12px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 650;
}
.invoice-page .invoice-status-paid {
    color: #10a875;
    background: #e7f8f1;
}
.invoice-page .invoice-status-pending {
    color: #e99400;
    background: #fff5df;
}
.invoice-page .invoice-status-cancelled {
    color: #e54848;
    background: #fff0f0;
}
.invoice-page .invoice-status-other {
    color: #667085;
    background: #f1f3f7;
}
.invoice-page .invoice-view-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e5ef;
    border-radius: 10px;
    background: #fff;
    color: #53617b;
    font-size: 16px;
    text-decoration: none;
    transition: all .2s ease;
}
.invoice-page .invoice-view-btn:hover {
    border-color: #b9b4ff;
    background: #f4f2ff;
    color: #635bff;
}
.invoice-page .invoice-empty {
    padding: 55px 20px !important;
}
.invoice-page .invoice-empty-icon {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #f3f4fa;
    color: #9aa3b5;
    font-size: 25px;
}
.invoice-page .invoice-empty h6 {
    color: #29344a;
    font-weight: 650;
}
.invoice-page .invoice-empty p {
    color: #8a94a8;
}
.invoice-page .invoice-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 25px 21px;
    margin-top: 7px;
    border-top: 1px solid #edf0f5;
}
.invoice-page .invoice-info {
    color: #7c879b;
    font-size: 15px;
}
.invoice-page .invoice-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.invoice-page .invoice-page-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e7eaf1;
    border-radius: 9px;
    background: #fff;
    color: #67738a;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}
.invoice-page .invoice-page-btn:hover:not(.disabled):not(.active) {
    border-color: #c7c3ff;
    background: #f5f3ff;
    color: #635bff;
}
.invoice-page .invoice-page-btn.active {
    border-color: #635bff;
    background: linear-gradient(135deg,#6d63ff,#574ee9);
    color: #fff;
    box-shadow: 0 5px 13px rgba(99,91,255,.22);
}
.invoice-page .invoice-page-btn.disabled {
    opacity: .42;
    cursor: not-allowed;
    background: #f5f6fa;
}
.invoice-page .invoice-no-result {
    padding: 50px 20px;
}
.invoice-page .invoice-security {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 112px;
    margin-top: 18px;
    padding: 20px 28px;
    border: 1px solid #ece9ff;
    border-radius: 17px;
    background: radial-gradient(circle at 85% 50%,rgba(121,104,255,.13),transparent 35%),linear-gradient(100deg,#f6f4ff,#fbfaff);
}
.invoice-page .invoice-security::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: 100px;
    top: -190px;
    border-radius: 50%;
    border: 1px solid rgba(99,91,255,.07);
}
.invoice-page .security-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 2;
}
.invoice-page .security-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient(135deg,#776cf9,#594de6);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 8px 20px rgba(99,91,255,.22);
}
.invoice-page .security-title {
    color: #274b82;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 3px;
}
.invoice-page .security-text {
    color: #70809c;
    font-size: 11px;
}
.invoice-page .security-art {
    position: relative;
    width: 105px;
    height: 75px;
    flex: 0 0 105px;
}
.invoice-page .security-folder {
    position: absolute;
    right: 10px;
    bottom: 5px;
    width: 62px;
    height: 44px;
    border-radius: 7px;
    background: linear-gradient(145deg,#a497ff,#6c5be9);
    box-shadow: 0 12px 20px rgba(99,91,255,.18);
    transform: skewY(-5deg);
}
.invoice-page .security-folder::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 7px;
    width: 27px;
    height: 12px;
    border-radius: 5px 5px 0 0;
    background: #897cf7;
}
.invoice-page .security-shield {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(145deg,#7868ef,#5145d2);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 8px 18px rgba(75,64,193,.25);
}
@media (max-width:1199.98px) {
    .invoice-page .invoice-meta {
        gap: 14px;
    }
    .invoice-page .invoice-service {
        max-width: 220px;
    }
}
@media (max-width:991.98px) {
    .invoice-page .invoice-item {
        align-items: flex-start;
        flex-direction: column;
    }
    .invoice-page .invoice-meta {
        width: 100%;
        justify-content: flex-start;
        padding-left: 62px;
    }
    .invoice-page .invoice-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .invoice-page .invoice-search-box {
        width: 100%;
    }
    .invoice-page .invoice-status {
        width: 100%;
    }
    .invoice-page .invoice-security {
        padding: 18px 20px;
    }
}
@media (max-width:767.98px) {
    .invoice-page .page-content {
        padding-top: 15px !important;
    }
    .invoice-page .invoice-page-title {
        font-size: 20px;
    }
    .invoice-page .invoice-stat-card {
        min-height: 140px;
        padding: 18px;
    }
    .invoice-page .invoice-stat-value {
        font-size: 23px;
    }
    .invoice-page .invoice-history-header {
        padding: 20px 17px 15px;
    }
    .invoice-page .invoice-toolbar {
        padding: 0 17px 18px;
    }
    .invoice-page .invoice-list {
        padding: 0 17px;
    }
    .invoice-page .invoice-item {
        padding: 15px;
    }
    .invoice-page .invoice-meta {
        flex-wrap: wrap;
        gap: 10px 16px;
        padding-left: 0;
    }
    .invoice-page .invoice-amount {
        min-width: auto;
    }
    .invoice-page .invoice-service {
        max-width: 190px;
    }
    .invoice-page .invoice-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 17px;
    }
    .invoice-page .invoice-security {
        min-height: auto;
        padding: 17px;
    }
    .invoice-page .security-art {
        display: none;
    }
}
@media (max-width:575.98px) {
    .invoice-page .invoice-page-header {
        align-items: flex-start !important;
        flex-direction: column;
    }
    .invoice-page .create-invoice-btn {
        width: 100%;
    }
    .invoice-page .invoice-stat-card {
        min-height: 130px;
    }
    .invoice-page .invoice-stat-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
    .invoice-page .stat-mini-line {
        display: none;
    }
    .invoice-page .invoice-history-heading {
        align-items: flex-start;
    }
    .invoice-page .invoice-history-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
    .invoice-page .invoice-history-title {
        font-size: 15px;
    }
    .invoice-page .invoice-item {
        gap: 14px;
    }
    .invoice-page .invoice-main {
        width: 100%;
    }
    .invoice-page .invoice-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .invoice-page .invoice-date {
        grid-column: span 2;
    }
    .invoice-page .invoice-status-badge {
        width: max-content;
    }
    .invoice-page .invoice-view-btn {
        justify-self: end;
    }
}
.create-ticket {
    background: #f7f8fc;
}
.create-ticket .custom-center-row {
    justify-content: center;
}
.create-ticket .support-heading {
    margin-bottom: 24px;
}
.create-ticket .support-heading h1 {
    color: #172033;
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -.6px;
    margin: 0;
}
.create-ticket .support-heading p {
    color: #7b8498;
    font-size: 14px;
    margin: 6px 0 0;
}
.create-ticket .ticket-card {
    border: 1px solid #e8ebf2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(27,39,71,.07);
    overflow: hidden;
}
.create-ticket .ticket-card-header {
    padding: 26px 30px;
    border-bottom: 1px solid #edf0f5;
    background: linear-gradient(135deg,#ffffff 0%,#fafaff 100%);
}
.create-ticket .ticket-card-title {
    color: #172033;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.3px;
    margin: 0;
}
.create-ticket .ticket-card-subtitle {
    color: #7c879b;
    font-size: 13px;
    margin: 6px 0 0;
}
.create-ticket .ticket-form {
    padding: 30px;
}
.create-ticket .form-group {
    margin-bottom: 24px;
}
.create-ticket .form-label {
    display: block;
    color: #263249;
    font-size: 14px;
    font-weight: 650;
    margin-bottom: 9px;
}
.create-ticket .form-control,
.create-ticket .form-select {
    width: 100%;
    min-height: 50px;
    padding: 11px 15px;
    border: 1px solid #dfe4ec;
    border-radius: 11px;
    background: #fff;
    color: #1c2639;
    font-size: 14px;
    transition: all .2s ease;
}
.create-ticket .form-control::placeholder {
    color: #a0a8b8;
}
.create-ticket .form-control:focus,
.create-ticket .form-select:focus {
    border-color: #635bff;
    box-shadow: 0 0 0 4px rgba(99,91,255,.08);
    outline: none;
}
.create-ticket textarea.form-control {
    min-height: 145px;
    resize: vertical;
    line-height: 1.6;
}
.create-ticket input[type="file"].form-control {
    padding: 9px 12px;
    background: #fafbfc;
    cursor: pointer;
}
.create-ticket input[type="file"].form-control::file-selector-button {
    height: 32px;
    margin-right: 12px;
    padding: 0 13px;
    border: 0;
    border-radius: 7px;
    background: #eeedff;
    color: #635bff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.create-ticket .ticket-submit {
    min-height: 52px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg,#6d63ff,#574ee9);
    color: #fff;
    font-size: 15px;
    font-weight: 650;
    box-shadow: 0 9px 22px rgba(99,91,255,.22);
    transition: all .25s ease;
}
.create-ticket .ticket-submit:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(99,91,255,.28);
}
.create-ticket .ticket-top-btn {
    min-height: 42px;
    padding: 0 19px;
    border: 0;
    border-radius: 10px;
    background: #635bff;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 15px rgba(99,91,255,.17);
}
.create-ticket .ticket-top-btn:hover {
    color: #fff;
    background: #554ce7;
}
.create-ticket .required-mark {
    color: #ef4444;
    margin-left: 2px;
}
.create-ticket .form-help {
    color: #929bad;
    font-size: 11px;
    margin-top: 7px;
}
.create-ticket .ticket-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #172033;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 22px;
}
.create-ticket .ticket-section-title i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eeedff;
    color: #635bff;
    font-size: 15px;
}
@media (max-width:767.98px) {
    .create-ticket .support-heading h1 {
        font-size: 24px;
    }
    .create-ticket .support-heading p {
        font-size: 13px;
    }
    .create-ticket .ticket-card-header {
        padding: 21px;
    }
    .create-ticket .ticket-card-title {
        font-size: 19px;
    }
    .create-ticket .ticket-form {
        padding: 21px;
    }
    .create-ticket .form-group {
        margin-bottom: 19px;
    }
    .create-ticket .form-label {
        font-size: 13px;
    }
}
@media (max-width:575.98px) {
    .create-ticket .support-heading {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .create-ticket .ticket-top-btn {
        width: 100%;
    }
    .create-ticket .ticket-card {
        border-radius: 15px;
    }
    .create-ticket .ticket-card-header {
        padding: 18px;
    }
    .create-ticket .ticket-form {
        padding: 18px;
    }
    .create-ticket .form-control,
    .create-ticket .form-select {
        min-height: 48px;
        font-size: 13px;
    }
    .create-ticket textarea.form-control {
        min-height: 125px;
    }
}
.profilemenu {
	width: 300px;
	padding: 8px !important;
	border: 1px solid #e9edf3 !important;
	border-radius: 16px !important;
	background: #fff;
	box-shadow: 0 15px 45px rgba(24,32,51,.12) !important;
}
.profilemenu .profile-header {
	position: relative;
	padding: 16px;
	margin-bottom: 7px;
	border-radius: 12px;
	background: linear-gradient(135deg,#f7f7ff,#f9fafc);
	border: 1px solid #eef0f5;
}
.profilemenu .profile-avatar {
	position: relative;
	flex: 0 0 48px;
}
.profilemenu .profile-avatar img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.profilemenu .profile-online {
	position: absolute;
	right: 0;
	bottom: 1px;
	width: 11px;
	height: 11px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #16b67a;
}
.profilemenu .profile-name {
	color: #172033;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}
.profilemenu .profile-email {
	max-width: 190px;
	margin-top: 3px;
	color: #8992a5;
	font-size: 10px;
}
.profilemenu .profile-role {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 7px;
	padding: 4px 8px;
	border-radius: 20px;
	background: #eaf9f3;
	color: #12966a;
	font-size: 9px;
	font-weight: 650;
}
.profilemenu .profile-role i {
	font-size: 7px;
}
.profilemenu .profile-section-title {
	padding: 7px 12px 6px;
	color: #a0a8b7;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
}
.profilemenu .profile-item {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 10px 11px !important;
	margin-bottom: 3px;
	border-radius: 10px !important;
	transition: all .2s ease;
}
.profilemenu .profile-item:hover {
	background: #f6f7fb;
}
.profilemenu .profile-item-icon {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	font-size: 17px;
}
.profilemenu .profile-item-icon.primary {
	background: #efefff;
	color: #635bff;
}
.profilemenu .profile-item-icon.warning {
	background: #fff5df;
	color: #ed9b09;
}
.profilemenu .profile-item-icon.danger {
	background: #fff0f0;
	color: #e64b4b;
}
.profilemenu .profile-item-content {
	min-width: 0;
	flex: 1;
}
.profilemenu .profile-item-title {
	display: block;
	color: #29344a;
	font-size: 12px;
	font-weight: 650;
	line-height: 1.3;
}
.profilemenu .profile-item-description {
	display: block;
	margin-top: 2px;
	color: #9aa2b2;
	font-size: 11px;
	line-height: 1.3;
}
.profilemenu .profile-item-arrow {
	color: #b0b7c5;
	font-size: 14px;
	transition: transform .2s ease;
}
.profilemenu .profile-item:hover .profile-item-arrow {
	color: #635bff;
	transform: translateX(2px);
}
.profilemenu .profile-divider {
	height: 1px;
	margin: 7px 10px;
	background: #edf0f4;
}
.profilemenu .logout-item {
	margin-bottom: 2px !important;
}
.profilemenu .logout-item:hover {
	background: #fff5f5;
}
.profilemenu .logout-item:hover .profile-item-arrow {
	color: #e64b4b;
}
.notification-menu {
    width: 390px;
    border: 1px solid #e8ebf1;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 50px rgba(24,32,51,.14);
}
.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 19px;
    border-bottom: 1px solid #edf0f4;
    background: linear-gradient(135deg,#fafaff,#fff);
}
.notification-title {
    margin: 0;
    color: #172033;
    font-size: 16px;
    font-weight: 700;
}
.notification-subtitle {
    display: block;
    margin-top: 3px;
    color: #929bad;
    font-size: 10px;
}
.notification-count {
    padding: 5px 9px;
    border-radius: 20px;
    background: #efefff;
    color: #635bff;
    font-size: 10px;
    font-weight: 650;
}
.notification-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 19px;
    border-bottom: 1px solid #f0f2f5;
}
.notification-toolbar span {
    color: #8992a3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .35px;
    text-transform: uppercase;
}
.notification-toolbar a {
    color: #635bff;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}
.notification-list-short {
    max-height: 365px !important;
    overflow-y: auto;
    padding: 5px 8px;
}
.notification-list {
    height: 100%;
    overflow-y: auto;
    padding: 5px 8px;
}
.notification-list::-webkit-scrollbar {
    width: 4px;
}
.notification-list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #dfe3eb;
}
.notification-item {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 13px 10px;
    border-radius: 11px;
    text-decoration: none;
    transition: all .2s ease;
}
.notification-item:hover {
    background: #f7f8fb;
}
.notification-item.unread {
    background: #f8f8ff;
}
.notification-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 17px;
}
.notification-icon.service {
    background: #efefff;
    color: #635bff;
}
.notification-icon.payment {
    background: #eaf9f2;
    color: #13a36f;
}
.notification-icon.ticket {
    background: #fff4df;
    color: #e79a0b;
}
.notification-icon.invoice {
    background: #edf5ff;
    color: #3985e8;
}
.notification-icon.account {
    background: #fff0f0;
    color: #e05252;
}
.notification-content {
    min-width: 0;
    flex: 1;
}
.notification-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.notification-item h6 {
    margin: 0;
    color: #000;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}
.notification-item p {
    margin: 4px 0 6px;
    color: #000;
    font-size: 11px;
    line-height: 1.5;
}
.notification-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #000;
    font-size: 9px;
}
.notification-time i {
    font-size: 10px;
}
.notification-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #635bff;
}
.notification-footer {
    padding: 12px;
    border-top: 1px solid #edf0f4;
    text-align: center;
}
.notification-footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #635bff;
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
}
.notification-footer a i {
    font-size: 14px;
    transition: transform .2s ease;
}
.notification-footer a:hover i {
    transform: translateX(3px);
}
@media (max-width:575.98px) {
    .notification-menu {
        width: calc(100vw - 25px);
        max-width: 390px;
    }
}
.notifications-page .notifications-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.notifications-page .notifications-title {
    margin: 0;
    color: #172033;
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -.5px;
}
.notifications-page .notifications-subtitle {
    margin: 5px 0 0;
    color: #8b94a6;
    font-size: 13px;
}
.notifications-page .notification-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.notifications-page .notification-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #e3e7ee;
    border-radius: 9px;
    background: #fff;
    color: #687388;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}
.notifications-page .notification-action:hover {
    border-color: #635bff;
    background: #f8f8ff;
    color: #635bff;
}
.notifications-page .notification-card {
    overflow: hidden;
    border: 1px solid #e7eaf0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(24,32,51,.06);
}
.notifications-page .notification-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #edf0f4;
}
.notifications-page .notification-card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #263147;
    font-size: 14px;
    font-weight: 700;
}
.notifications-page .notification-card-title i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #efefff;
    color: #635bff;
    font-size: 15px;
}
.notifications-page .notification-total {
    padding: 5px 10px;
    border-radius: 20px;
    background: #efefff;
    color: #635bff;
    font-size: 10px;
    font-weight: 650;
}
.notifications-page .notification-list {
    padding: 7px;
}
.notifications-page .notification-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 17px 16px;
    border-bottom: 1px solid #f0f2f5;
    border-radius: 10px;
    text-decoration: none;
    transition: all .2s ease;
}
.notifications-page .notification-item:last-child {
    border-bottom: 0;
}
.notifications-page .notification-item:hover {
    background: #f8f8fc;
}
.notifications-page .notification-item.unread {
    background: #fafaff;
}
.notifications-page .notification-item.unread:before {
    content: "";
    position: absolute;
    top: 22px;
    left: 3px;
    width: 4px;
    height: 32px;
    border-radius: 10px;
    background: #635bff;
}
.notifications-page .notification-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 19px;
}
.notifications-page .notification-icon.service {
    background: #efefff;
    color: #635bff;
}
.notifications-page .notification-icon.payment {
    background: #eaf9f2;
    color: #13a36f;
}
.notifications-page .notification-icon.ticket {
    background: #fff4df;
    color: #e79a0b;
}
.notifications-page .notification-icon.invoice {
    background: #edf5ff;
    color: #3985e8;
}
.notifications-page .notification-icon.account {
    background: #fff0f0;
    color: #e05252;
}
.notifications-page .notification-content {
    min-width: 0;
    flex: 1;
}
.notifications-page .notification-content-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.notifications-page .notification-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #635bff;
}
.notifications-page .notification-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    background: #f5f6f9;
    color: #9aa2b1;
    font-size: 15px;
}
.notifications-page .notification-item:hover .notification-status {
    background: #efefff;
    color: #635bff;
}
.notifications-page .notification-empty {
    padding: 80px 20px;
    text-align: center;
}
.notifications-page .notification-empty-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #f0f0ff;
    color: #635bff;
    font-size: 30px;
}
.notifications-page .notification-empty h5 {
    margin-bottom: 6px;
    color: #263147;
    font-size: 16px;
    font-weight: 700;
}
.notifications-page .notification-empty p {
    margin: 0;
    color: #929bad;
    font-size: 12px;
}
@media (max-width:767.98px) {
    .notifications-page .notifications-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }
    .notifications-page .notifications-title {
        font-size: 23px;
    }
    .notifications-page .notification-actions {
        width: 100%;
    }
    .notifications-page .notification-action {
        flex: 1;
        justify-content: center;
    }
    .notifications-page .notification-card-header {
        padding: 15px;
    }
    .notifications-page .notification-item {
        gap: 11px;
        padding: 14px 10px;
    }
    .notifications-page .notification-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 10px;
        font-size: 17px;
    }
    .notifications-page .notification-content h6 {
        font-size: 12px;
    }
    .notifications-page .notification-content p {
        font-size: 11px;
    }
    .notifications-page .notification-status {
        display: none;
    }
}
@media (max-width:575.98px) {
    .notifications-page .page-content {
        padding-top: 18px !important;
    }
    .notifications-page .notifications-title {
        font-size: 21px;
    }
    .notifications-page .notifications-subtitle {
        font-size: 11px;
    }
    .notifications-page .notification-item.unread:before {
        top: 18px;
        height: 28px;
    }
}
.title {
  margin: 0 0 10px 2px;
  font-size: 14px;
  font-weight: 600;
  color: #53617a;
}

.shortcut-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:10px;
	padding:10px 0;
}

@media(max-width:991px){
	.shortcut-grid{
		grid-template-columns:repeat(5, 1fr) !important;
	}
}

@media(max-width:767px){
	.shortcut-grid{
		grid-template-columns:repeat(4, 1fr) !important;
	}
}

@media(max-width:480px){
	.shortcut-grid{
		grid-template-columns:repeat(4, 1fr) !important;
		gap:8px;
	}
}
.shortcut-grid > * {
    flex: 0 0 auto;
}

.shortcut {
    width: 100%;
    height: 100%;
    padding: 10px 6px 8px;
    border: 1px solid #edf0f5;
    border-radius: 11px;
    background: #fff;
    box-shadow:
        0 2px 5px rgba(31,48,73,.05),
        0 5px 12px rgba(31,48,73,.035);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    transition: transform .18s ease,box-shadow .18s ease;
    position: relative;
    z-index: 1;
}

.shortcut::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 2px;
    border-radius: 11px;
    background: linear-gradient(
        90deg,
        #1d4ed8,
        #7a00e2,
        #ec4899,
        #1d4ed8
    );
    background-size: 300% 100%;
    opacity: 0;
    transition: opacity .25s ease;
    animation: shortcutBorder 2.5s linear infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.shortcut:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 9px rgba(31,48,73,.08),
        0 8px 18px rgba(31,48,73,.06);
}

.shortcut:hover::before {
    opacity: 1;
}

@keyframes shortcutBorder {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

@media (max-width:767.98px) {
    .shortcut {
        width: 100%;
        height: 85px;
        padding: 9px 5px 7px;
    }
}

.icon-box {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
}

.icon-box svg {
  width: 32px;
    height: 32px;
    stroke-width: 1.8;
}

.blue {
  background: #eef4ff;
  color: #4b7ee8;
}

.green {
  background: #edf9f1;
  color: #2bb05c;
}

.purple {
  background: #f3efff;
  color: #7650d8;
}

.orange {
  background: #fff6e8;
  color: #efa92f;
}

.pink {
  background: #fff0f5;
  color: #e76591;
}

.cyan {
  background: #eefafa;
  color: #2da9b8;
}

.label {
  text-align: center;
  font-size: 13px;
  line-height: 14px;
  font-weight: 500;
  color: #35445d;
  white-space: normal;
}
.stats-card {
  min-width: 0;
  height: 245px;
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 2px 10px rgba(24, 32, 56, .035);
}

.card-header,
.payment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h3,
.payment-header h3 {
  margin: 0;
  color: #202b48;
  font-size: 13px;
  font-weight: 700;
}

.select-box {
  height: 30px;
  min-width: 90px;
  padding: 0 10px;
  border: 1px solid #edf0f5;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #38435c;
  font-size: 13px;
  background: #fff;
}

.select-box span {
  color: #67718a;
  font-size: 14px;
}


/* =========================================
   LEGEND
========================================= */

.chart-legend {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 17px;
  margin-left: 35px;
  font-size: 13px;
  color: #667089;
}

.legend-dot {
  width: 10px;
  height: 3px;
  border-radius: 10px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

.legend-dot.services {
  background: #6246e5;
}

.legend-dot.orders {
  background: #29b879;
}

.legend-dot.returns {
  background: #f3aa2e;
}


/* =========================================
   LINE CHART
========================================= */

.line-chart {
  height: 170px;
  display: flex;
  margin-top: 3px;
}

.y-axis {
  width: 30px;
  padding-top: 5px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  color: #8992a7;
  font-size: 8px;
}

.chart-area {
  position: relative;
  flex: 1;
  height: 170px;
  min-width: 0;
  padding-bottom: 23px;
}

.chart-svg {
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  width: 100%;
  height: 142px;
  overflow: visible;
}

.grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #eef1f6;
}

.g1 { top: 7px; }
.g2 { top: 34px; }
.g3 { top: 61px; }
.g4 { top: 88px; }
.g5 { top: 115px; }
.g6 { top: 142px; }


/* =========================================
   TOOLTIP
========================================= */

.chart-tooltip {
  position: absolute;
  top: 5px;
  left: 56%;
  transform: translateX(-50%);
  width: 108px;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid #e8ebf1;
  border-radius: 6px;
  box-shadow: 0 5px 18px rgba(35, 45, 70, .12);
  font-size: 8px;
  color: #626d83;
  z-index: 5;
}

.chart-tooltip strong {
  display: block;
  color: #46516a;
  margin-bottom: 6px;
  font-size: 8px;
}

.chart-tooltip div {
  margin-top: 4px;
}

.chart-tooltip i {
  width: 7px;
  height: 2px;
  border-radius: 5px;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}

.chart-tooltip .purple {
  background: #6246e5;
}

.chart-tooltip .green {
  background: #29b879;
}

.chart-tooltip .orange {
  background: #f3aa2e;
}

.chart-tooltip b {
  float: right;
  color: #48536b;
}

.tooltip-line {
  position: absolute;
  top: 5px;
  bottom: 23px;
  left: 56%;
  width: 1px;
  border-left: 1px dashed #b9bfcb;
  z-index: 2;
}


/* =========================================
   X AXIS
========================================= */

.x-axis {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 17px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  color: #8992a7;
  font-size: 8px;
}


/* =========================================
   DISTRIBUTION
========================================= */

.distribution-content {
  height: 190px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 5px;
}

.donut-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut-chart {
  width: 116px;
  height: 116px;
  border-radius: 50%;

  /* 35 + 28 + 18 + 12 + 7 = 100% */
  background:
    conic-gradient(
      #6246e5 0deg 126deg,
      #29b879 126deg 226.8deg,
      #f3a52c 226.8deg 291.6deg,
      #ee819b 291.6deg 334.8deg,
      #76a5df 334.8deg 360deg
    );

  display: flex;
  align-items: center;
  justify-content: center;
}

.donut-hole {
  width: 75px;
  height: 75px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.donut-hole strong {
  font-size: 18px;
  line-height: 20px;
  color: #27314c;
}

.donut-hole span {
  margin-top: 3px;
  color: #8a92a6;
  font-size: 7px;
}


/* =========================================
   DISTRIBUTION LIST
========================================= */

.distribution-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-right: 3px;
}

.distribution-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #5f6980;
  font-size: 13px;
  white-space: nowrap;
}

.distribution-item span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.distribution-item b {
  color: #4e5870;
  font-size: 13px;
}

.dist-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.dist-dot.purple {
  background: #6246e5;
}

.dist-dot.green {
  background: #29b879;
}

.dist-dot.orange {
  background: #f3a52c;
}

.dist-dot.pink {
  background: #ee819b;
}

.dist-dot.blue {
  background: #76a5df;
}


/* =========================================
   PAYMENT CARD
========================================= */

.payment-card2 {
    position: relative;
    height: 245px;
    overflow: hidden;
    border-radius: 14px;
    padding: 17px 20px;
    color: #fff;
    border: none;
    background: radial-gradient(circle at 100% 5%, rgba(139, 0, 255, .35), transparent 30%), linear-gradient(180deg, #15136f 0%, #20218f 52%, #2525a4 100%) !important;
    box-shadow:
        0 8px 25px rgba(76,29,149,.22),
        inset 0 1px 0 rgba(255,255,255,.06);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.payment-card2:hover {
    transform: translateY(-3px);
    box-shadow:
        0 14px 32px rgba(76,29,149,.32),
        0 0 30px rgba(139,92,246,.18),
        inset 0 1px 0 rgba(255,255,255,.08);
}
.payment-header h3 {
  color: #fff;
}

.payment-select {
  height: 30px;
  min-width: 90px;
  padding: 0 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .11);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.payment-select span {
  margin-left: 8px;
  opacity: .8;
}

.payment-total {
  display: flex;
  flex-direction: column;
  margin-top: 19px;
}

.payment-total strong {
  font-size: 22px;
  line-height: 25px;
  letter-spacing: .2px;
}

.payment-total span {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}

.payment-divider {
  width: 52%;
  height: 1px;
  margin: 12px 0 10px;
  background: rgba(255,255,255,.11);
}

.payment-details {
  width: 56%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.payment-row span {
  color: rgba(255,255,255,.72);
  display: flex;
  align-items: center;
  gap: 7px;
}

.payment-row b {
  font-weight: 500;
  font-size: 13px;
}

.payment-row:nth-child(1) b {
  color: #ff646e;
}

.payment-row:nth-child(2) b {
  color: #f5bb35;
}

.payment-row:nth-child(3) b {
  color: #55b6ff;
}

.payment-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.payment-dot.overdue {
  background: #ec5663;
}

.payment-dot.soon {
  background: #f4b52e;
}

.payment-dot.later {
  background: #55b6ff;
}


/* =========================================
   PAYMENT ICON
========================================= */

.payment-icon-ring {
  position: absolute;
  width: 130px;
  height: 130px;
  right: 37px;
  top: 87px;
  border-radius: 50%;
  border: 2px solid rgba(79, 210, 255, .35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-icon-ring::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(222, 89, 255, .38);
}

.payment-icon {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 9px;
  background: linear-gradient(
    145deg,
    #9d42e8,
    #e64fff
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 15px rgba(223, 70, 255, .45);
}

.payment-icon span {
  font-size: 40px;
  color: #fff;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {
  .dashboard-stats {
    grid-template-columns: 1fr 1fr;
  }

  .statistics-card {
    grid-column: span 2;
  }
}

@media (max-width: 700px) {
  .dashboard-stats {
    grid-template-columns: 1fr;
  }

  .statistics-card {
    grid-column: span 1;
  }

  .stats-card,
  .payment-card {
    height: auto;
    min-height: 245px;
  }

  .distribution-content {
    justify-content: space-around;
  }
}

@media (max-width: 450px) {
  .chart-legend {
    margin-left: 25px;
    gap: 12px;
  }

  .payment-icon-ring {
    right: 18px;
  }

  .payment-details {
    width: 65%;
  }
}

/* =====================================================
   COMMON CARD
===================================================== */

.dash-card {
  background: #ffffff;
  border: 1px solid #edf0f5;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(31, 41, 70, .035);
  overflow: hidden;
}

.dash-card-header {
  height: 53px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f2f6;
}

.dash-card-header h3 {
  margin: 0;
  color: #202a48;
  font-size: 13px;
  font-weight: 700;
}

.dash-card-header a {
  text-decoration: none;
  color: #6146dc;
  font-size: 13px;
  font-weight: 600;
}

.dash-card-header a span {
  margin-left: 3px;
  font-size: 13px;
}


/* =====================================================
   RECENT SERVICES
===================================================== */

.service-table {
  width: 100%;
}

.table-head,
.service-row {
  display: grid;
  grid-template-columns:
    25px
    minmax(145px, 1.55fr)
    minmax(100px, 1.05fr)
    105px
    100px;

  align-items: center;
  column-gap: 7px;
  padding: 0 16px;
}

.table-head {
  height: 28px;
  color: #677188;
  font-size: 13px;
  font-weight: 700;
}

.service-row {
  height: 42px;
  border-top: 1px solid #f1f3f7;
  color: #5b657b;
  font-size: 12px;
}

.service-row > span:first-child {
  text-align: center;
  color: #6c7589;
}

.service-row strong {
  font-size: 12px;
  font-weight: 700;
  color: #4b566e;
  white-space: nowrap;
}

.service-tag {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.service-tag.red {
  color: #ec686b;
  border: 1px solid #ffd7d7;
  background: #fff8f8;
}

.service-tag.purple {
  color: #6950d9;
  border: 1px solid #ddd5ff;
  background: #f8f6ff;
}

.service-tag.green {
  color: #31a871;
  border: 1px solid #ccefdc;
  background: #f3fcf7;
}


/* =====================================================
   STATUS
===================================================== */

.status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 20px;
  padding: 0 7px;
  gap: 5px;
  border-radius: 5px;
  font-size: 11px;
  white-space: nowrap;
}

.status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.status.pending {
  color: #e5a222;
  background: #fff9e9;
  border: 1px solid #ffe8ad;
}

.status.pending i {
  background: #f4b52e;
}

.status.completed {
  color: #35a870;
  background: #f0fbf5;
  border: 1px solid #ccefdc;
}

.status.completed i {
  background: #31b779;
}

.status.unknown {
  color: #5278ca;
  background: #f1f6ff;
  border: 1px solid #dce7fa;
}

.status.unknown i {
  background: #5280dc;
}

.status.verified {
  color: #7257d9;
  background: #f6f3ff;
  border: 1px solid #e3dcff;
}

.status.verified i {
  background: #765ae2;
}


/* =====================================================
   INCOMPLETE TASKS
===================================================== */

.task-list {
  padding: 9px 17px;
}

.task-item {
	display: grid;
    grid-template-columns: 38px 1fr 31px;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}

.task-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 500;
}

.red-icon {
  color: #ec5658;
  background: #fff0f0;
}

.orange-icon {
  color: #efad2c;
  background: #fff8e8;
}

.green-icon {
  color: #41b97c;
  background: #edf9f3;
}

.task-info {
  min-width: 0;
}

.task-info strong {
  display: block;
  color: #404b62;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.task-info small {
  display: block;
  font-size: 13px;
  margin-bottom: 7px;
}

.task-info .high {
  color: #ed5557;
}

.task-info .medium {
  color: #eaa729;
}

.task-info .low {
  color: #3bb37a;
}

.task-progress {
  width: 100%;
  height: 3px;
  border-radius: 10px;
  background: #edf0f4;
  overflow: hidden;
}

.progress {
  height: 100%;
  border-radius: 10px;
}

.red-progress {
  background: #ed5658;
}

.orange-progress {
  background: #efad2d;
}

.green-progress {
  background: #40b77b;
}

.task-item > b {
  align-self: center;
  color: #59647b;
  font-size: 9px;
  font-weight: 600;
  text-align: right;
}


/* =====================================================
   QUICK STATS
===================================================== */

.quick-list {
  padding: 7px 12px 12px;
}

.quick-item {
	display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 5px 10px 5px 5px;
    border: 1px solid #edf0f5;
    border-radius: 7px;
    margin-bottom: 5px;
}

.quick-item span {
  color: #59647b;
  font-size: 12px;
  font-weight: 500;
}

.quick-item strong {
  color: #303b58;
  font-size: 14px;
  font-weight: 700;
}

.quick-icon {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.quick-icon.clients {
  color: #536bd4;
  background: #eef2ff;
}

.quick-icon.services {
  color: #32b580;
  background: #eafaf3;
}

.quick-icon.orders {
  color: #6554d7;
  background: #f0eeff;
}

.quick-icon.gst {
  color: #5d79d7;
  background: #edf2ff;
}


/* =====================================================
   BOTTOM SUMMARY
===================================================== */

.service-summary {
	width: 100%;
	min-height: 80px;
	margin-bottom: 73px;
  padding: 20px 25px;

  display: grid;
  grid-template-columns:
    1fr
    1fr
    1fr
    1fr
    1fr
    1.25fr;

  align-items: center;
  gap: 5px;

  border: 1px solid #eceaf8;
  border-radius: 13px;

  background:
    radial-gradient(
      circle at 30% 50%,
      rgba(128, 102, 235, .05),
      transparent 35%
    ),
    linear-gradient(
      100deg,
      #f9f8ff,
      #f7f5ff
    );

  font-family: Inter, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.summary-icon {
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
}

.purple-bg {
  color: #654bd8;
  background: #eeebff;
}

.blue-bg {
  color: #5874d7;
  background: #ecefff;
}

.red-bg {
  color: #e65d68;
  background: #ffe9ec;
}

.summary-item > div:last-child {
  display: flex;
  flex-direction: column;
}

.summary-item span {
  color: #59637b;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
}

.summary-item strong {
  color: #283451;
  font-size: 17px;
  line-height: 18px;
}

.summary-item small {
  color: #45a783;
  font-size: 13px;
  margin-top: 3px;
}

.summary-item:nth-child(3) small,
.summary-item:nth-child(4) small {
  color: #68728a;
}


/* =====================================================
   BUSINESS GROWTH
===================================================== */

.summary-growth {
  height: 56px;
  padding-left: 25px;
  border-left: 1px solid #dfddec;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.growth-text {
  display: flex;
  flex-direction: column;
}

.growth-text span {
  color: #59637b;
  font-size: 13px;
  font-weight: 600;
}

.growth-text strong {
  color: #45a783;
  font-size: 17px;
  line-height: 21px;
  margin-top: 3px;
}

.growth-text small {
  color: #69738a;
  font-size: 13px;
  margin-top: 1px;
}

.growth-chart {
  height: 50px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding-right: 18px;
}

.growth-chart i {
  display: block;
  width: 5px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(
    to top,
    #d8d0f7,
    #7d5de1
  );
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

  .dashboard-lower {
    grid-template-columns: 1fr 1fr;
  }

  .recent-services {
    grid-column: span 2;
  }

  .service-summary {
    grid-template-columns: repeat(3, 1fr);
    padding: 18px 20px;
    row-gap: 20px;
  }

  .summary-growth {
    border-left: 0;
    padding-left: 0;
  }
}


@media (max-width: 700px) {

  .dashboard-lower {
    grid-template-columns: 1fr;
  }

  .recent-services {
    grid-column: span 1;
  }

  .dash-card {
    height: auto;
    min-height: 263px;
  }

  .service-table {
    overflow-x: auto;
  }

  .table-head,
  .service-row {
    min-width: 560px;
  }

  .service-summary {
    grid-template-columns: 1fr 1fr;
  }

  .summary-growth {
    grid-column: span 2;
  }
}


@media (max-width: 450px) {

  .service-summary {
    grid-template-columns: 1fr;
  }

  .summary-growth {
    grid-column: span 1;
  }

  .growth-chart {
    padding-right: 5px;
  }
}
.navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    color: #fff;
}
.services-page .page-heading {
    margin-bottom: 28px;
}
.services-page .page-heading h1 {
    margin: 0;
    color: #172033;
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -.6px;
}
.services-page .page-heading p {
    margin: 7px 0 0;
    color: #8992a4;
    font-size: 13px;
}
.services-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 22px;
}
.category-card {
    padding: 10px;
    border: 1px solid #e6e9f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(24,32,51,.05);
}
.category-title {
    padding: 12px 13px 10px;
    color: #929bad;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.category-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 12px;
    margin-bottom: 4px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #3A3E45;
    text-align: left;
    cursor: pointer;
    transition: all .2s ease;
}
.category-item:hover {
    background: #f6f7fb;
    color: #635bff;
}
.category-item.active {
    background: linear-gradient(135deg,#efefff,#f6f5ff);
    color: #635bff;
}
.category-item.active:before {
    content: "";
    position: absolute;
    left: -10px;
    width: 3px;
    height: 25px;
    border-radius: 0 5px 5px 0;
    background: #635bff;
}
.category-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f4f5f8;
    color: #69758b;
    font-size: 18px;
}
.category-item.active .category-icon {
    background: #635bff;
    color: #fff;
    box-shadow: 0 6px 15px rgba(99,91,255,.2);
}
.category-name {
    flex: 1;
    font-size: 13px;
    font-weight: 650;
}
.category-arrow {
    color: #a7aebc;
    font-size: 15px;
}
.category-item.active .category-arrow {
    color: #635bff;
}
.services-content {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e6e9f0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(24,32,51,.05);
}
.services-hero {
    position: relative;
    min-height: 210px;
    overflow: hidden;
    padding: 30px;
    background: linear-gradient(135deg,#151b3b,#635bff);
}
.services-hero:after {
    content: "";
    position: absolute;
    right: -80px;
    top: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.services-hero-content {
    position: relative;
    z-index: 2;
    max-width: 60%;
}
.services-hero h2 {
    margin: 0;
    color: #fff;
    font-size: 25px;
    font-weight: 750;
    letter-spacing: -.4px;
}
.services-hero p {
    margin: 9px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    line-height: 1.6;
}
.services-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 13px;
    padding: 6px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 9px;
    font-weight: 650;
}
.services-hero-image {
    position: absolute;
    right: 35px;
    bottom: 0;
    z-index: 2;
    height: 200px;
    object-fit: contain;
}
.services-section {
    padding: 23px;
}
.services-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}
.services-section-header h3 {
    margin: 0;
    color: #202b40;
    font-size: 15px;
    font-weight: 700;
}
.services-section-header span {
    color: #929bad;
    font-size: 10px;
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 11px;
}
.service-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #edf0f4;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    transition: all .2s ease;
}
.service-item:hover {
    border-color: #dcd9ff;
    background: #fafaff;
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(24,32,51,.06);
}
.service-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f0f0ff;
    color: #635bff;
    font-size: 17px;
}
.service-info {
    min-width: 0;
    flex: 1;
}
.service-info h4 {
    margin: 0;
    color: #000;
    font-size: 14px;
    font-weight: 700;
}
.service-info p {
    margin: 4px 0 0;
    color: #505050;
    font-size: 13px;
}
.service-arrow {
    color: #adb4c1;
    font-size: 15px;
}
@media (max-width:991.98px) {
    .services-layout {
        grid-template-columns: 1fr;
    }
    .category-card {
        display: flex;
        gap: 5px;
        overflow-x: auto;
        padding: 8px;
    }
    .category-title {
        display: none;
    }
    .category-item {
        min-width: 190px;
        margin: 0;
    }
    .category-item.active:before {
        display: none;
    }
}
@media (max-width:767.98px) {
    .services-page .page-heading h1 {
        font-size: 24px;
    }
    .services-hero {
        min-height: 220px;
        padding: 23px;
    }
    .services-hero-content {
        max-width: 100%;
    }
    .services-hero-image {
        opacity: .18;
        right: -10px;
        width: 230px;
    }
    .service-grid {
        grid-template-columns: 1fr;
    }
    .services-section {
        padding: 17px;
    }
}
.service-tab {
    display: none;
}

.service-tab.active {
    display: block;
}
.profile-title-icon{width:34px;height:34px;border-radius:10px;background:rgba(13,110,253,.1);color:#0d6efd;display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.profile-hero{position:relative;overflow:hidden;border-radius:22px;background:#fff;border:1px solid #e9edf3;box-shadow:0 10px 35px rgba(15,23,42,.07)}
.profile-hero-bg{height:125px;background:linear-gradient(135deg,#0d6efd 0%,#2563eb 45%,#4f46e5 100%);position:relative}
.profile-hero-bg:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08);right:7%;top:-150px}
.profile-hero-bg:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.06);left:30%;top:30px}
.profile-hero-content{position:relative;padding:0 30px 28px}
.profile-avatar-wrapper{position:relative;margin-top:-62px;flex-shrink:0}
.profileavatar{width:126px;height:126px;border-radius:50%;background:#fff;padding:5px;box-shadow:0 8px 25px rgba(15,23,42,.18)}
.profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:1px solid #e9edf3}
.profile-online{position:absolute;right:9px;bottom:8px;width:19px;height:19px;border-radius:50%;background:#22c55e;border:4px solid #fff}
.profile-name{font-size:21px;font-weight:700;color:#111827}
.profile-email{color:#6b7280;font-size:13px}
.profile-status{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:50px;font-size:11px;font-weight:600;background:#ecfdf3;color:#16a34a}
.profile-meta{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;background:#f8fafc;border:1px solid #eef2f7;color:#64748b;font-size:11px}
.profile-edit-btn{padding:10px 20px;border-radius:10px;font-size:12px;font-weight:600;box-shadow:0 5px 15px rgba(13,110,253,.2)}
.premium-card{background:#fff;border:1px solid #e9edf3;border-radius:18px;padding:22px;box-shadow:0 7px 25px rgba(15,23,42,.045);transition:all .25s ease}
.premium-card:hover{box-shadow:0 12px 35px rgba(15,23,42,.08);transform:translateY(-1px)}
.premium-card-header{display:flex;align-items:center;gap:12px}
.section-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.primary-icon{background:#eff6ff;color:#2563eb}
.success-icon{background:#ecfdf5;color:#16a34a}
.warning-icon{background:#fff7ed;color:#f97316}
.danger-icon{background:#fef2f2;color:#dc2626}
.section-title{font-size:15px;font-weight:700;color:#111827;margin:0 0 3px}
.section-subtitle{font-size:11px;color:#94a3b8;margin:0}
.info-list{display:flex;flex-direction:column;gap:0}
.info-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid #f1f5f9}
.info-row:last-child{border-bottom:0;padding-bottom:0}
.info-row:first-child{padding-top:4px}
.info-label{display:flex;align-items:center;gap:9px;color:#64748b;font-size:12px;font-weight:500;flex-shrink:0}
.info-value{text-align:right;color:#1e293b;font-size:12px;font-weight:600;max-width:62%}
.info-mini-icon{width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:#eff6ff;color:#2563eb;font-size:12px}
.success-mini{background:#ecfdf5;color:#16a34a}
.verified-badge{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:50px;background:#ecfdf5;color:#16a34a;font-size:10px;font-weight:600}
.preference-card{display:flex;align-items:center;gap:12px;min-height:92px;padding:14px;border:1px solid #edf1f5;border-radius:13px;background:#fafbfc;transition:all .2s ease}
.preference-card:hover{background:#fff;border-color:#dbe3ed;box-shadow:0 5px 18px rgba(15,23,42,.05)}
.preference-icon{width:39px;height:39px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.email-icon{background:#eff6ff;color:#2563eb}
.sms-icon{background:#ecfdf5;color:#16a34a}
.push-icon{background:#fff7ed;color:#f97316}
.preference-content{min-width:0}
.preference-content h6{font-size:12px;font-weight:700;color:#1e293b;margin:0 0 4px}
.preference-content p{font-size:10px;color:#94a3b8;margin:0;line-height:1.4}
.switch{position:relative;display:inline-block;width:42px;height:23px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:#cbd5e1;transition:.25s;border-radius:50px}
.slider:before{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;background:#fff;transition:.25s;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.switch input:checked+.slider{background:#2563eb}
.switch input:checked+.slider:before{transform:translateX(19px)}
.security-box{border:1px solid #edf1f5;border-radius:14px;padding:17px;background:#fafbfc}
.security-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:#ecfdf5;color:#16a34a;font-size:18px}
.security-enabled{padding:4px 8px;border-radius:50px;background:#ecfdf5;color:#16a34a;font-size:9px;font-weight:700}
.security-disabled{padding:4px 8px;border-radius:50px;background:#fef2f2;color:#dc2626;font-size:9px;font-weight:700}
.security-method{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #e9edf3;margin-top:17px;padding-top:17px}
.security-select{width:145px;border-radius:8px;font-size:11px}
@media(max-width:767px){
.profile-hero-bg{height:105px}
.profile-hero-content{padding:0 18px 22px}
.profile-avatar-wrapper{margin-top:-55px}
.profile-avatar{width:108px;height:108px}
.profile-name{font-size:18px}
.profile-edit-btn{width:100%}
.profile-hero-content>.d-flex{align-items:center!important}
.premium-card{padding:18px}
.info-row{gap:12px}
.info-label{font-size:11px}
.info-value{font-size:11px;max-width:55%}
.security-method{flex-direction:column;align-items:stretch}
.security-method form{width:100%}
.security-select{flex:1;width:auto}
.preference-card{min-height:80px}
}

.wallet-page-header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.wallet-breadcrumb{display:flex;align-items:center;gap:7px;color:#4f46e5;font-size:12px;font-weight:600;margin-bottom:7px}
.wallet-page-header h2{font-size:25px;font-weight:700;color:#111827;margin:0 0 5px}
.wallet-page-header p{font-size:13px;color:#6b7280;margin:0}
.wallet-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border:1px solid #e5e7eb;background:#fff;border-radius:10px;color:#374151;text-decoration:none;font-size:12px;font-weight:600;transition:.2s}
.wallet-back-btn:hover{border-color:#a5b4fc;color:#4f46e5;background:#f8faff}
.wallet-balance-card{padding:24px;border-radius:20px;background:linear-gradient(135deg,#312e81,#4f46e5 55%,#2563eb);color:#fff;box-shadow:0 15px 35px rgba(79,70,229,.2);position:relative;overflow:hidden}
.wallet-balance-card:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.07);right:-80px;top:-100px}
.wallet-balance-card:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.05);left:-70px;bottom:-80px}
.wallet-card-top{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:1}
.wallet-card-top span{font-size:12px;opacity:.75}
.wallet-card-top h2{font-size:30px;font-weight:700;margin:7px 0 0;color:#fff}
.wallet-icon{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:23px}
.wallet-card-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:30px;padding-top:15px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.wallet-card-bottom small{display:block;font-size:9px;opacity:.65;margin-bottom:3px}
.wallet-card-bottom strong{font-size:11px;font-weight:600}
.wallet-secure{font-size:10px;display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);padding:7px 10px;border-radius:8px}
.wallet-secure i{color:#86efac}
.wallet-info-card{display:flex;gap:12px;padding:16px;background:#f8faff;border:1px solid #e6eaff;border-radius:15px}
.wallet-info-icon{width:36px;height:36px;min-width:36px;border-radius:10px;background:#e0e7ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-size:17px}
.wallet-info-card h6{font-size:12px;font-weight:700;color:#111827;margin:1px 0 5px}
.wallet-info-card p{font-size:13px;line-height:1.6;color:#6b7280;margin:0}
.wallet-features{display:flex;flex-direction:column;gap:11px}
.wallet-feature{display:flex;align-items:center;gap:10px;font-size:13px;color:#4b5563}
.wallet-feature div{width:30px;height:30px;border-radius:9px;background:#f3f4f6;color:#4f46e5;display:flex;align-items:center;justify-content:center}
.add-wallet-card{background:#fff;border:1px solid #e8e9ee;border-radius:20px;box-shadow:0 10px 35px rgba(15,23,42,.06);overflow:hidden}
.add-wallet-card-header{padding:20px 22px;border-bottom:1px solid #f0f0f2;display:flex;align-items:center;justify-content:space-between}
.add-wallet-card-header h4{font-size:16px;font-weight:700;color:#111827;margin:0 0 4px}
.add-wallet-card-header p{font-size:13px;color:#9ca3af;margin:0}
.add-wallet-header-icon{width:42px;height:42px;border-radius:12px;background:#eef2ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-size:21px}
.add-wallet-body{padding:22px}
.wallet-label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.amount-input{height:62px;border:1.5px solid #e5e7eb;border-radius:14px;background:#f9fafb;display:flex;align-items:center;padding:0 16px;transition:.2s}
.amount-input:focus-within{border-color:#818cf8;background:#fff;box-shadow:0 0 0 4px rgba(99,102,241,.08)}
.amount-input span{font-size:24px;font-weight:700;color:#4f46e5;margin-right:9px}
.amount-input input{width:100%;border:0;outline:0;background:transparent;font-size:24px;font-weight:700;color:#111827}
.amount-input input::placeholder{color:#c4c7ce}
.amount-input input::-webkit-inner-spin-button,.amount-input input::-webkit-outer-spin-button{appearance:none;margin:0}
.quick-amounts{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.quick-amounts button{border:1px solid #e5e7eb;background:#fff;border-radius:9px;padding:7px 12px;color:#4b5563;font-size:13px;font-weight:600;cursor:pointer;transition:.2s}
.quick-amounts button:hover{border-color:#818cf8;color:#4f46e5;background:#f8faff}
.wallet-limit{display:flex;justify-content:space-between;gap:10px;margin-top:9px;font-size:13px;color:#9ca3af}
.wallet-limit i{color:#4f46e5}
.payment-method-title{margin-top:22px;margin-bottom:8px}
.payment-method{display:flex;align-items:center;justify-content:space-between;border:1px solid #e5e7eb;border-radius:13px;padding:12px;cursor:pointer;transition:.2s}
.payment-method.active{border-color:#a5b4fc;background:#f8faff}
.payment-method-left{display:flex;align-items:center;gap:10px}
.payment_icon_wall{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;background:#eef2ff;color:#4f46e5}
.payment-method strong{display:block;font-size:15px;color:#111827;margin-bottom:3px}
.payment-method span{display:block;font-size:13px;color:#9ca3af}
.payment-check{color:#4f46e5;font-size:19px}
.wallet-summary{margin-top:18px;padding:14px;background:#f8fafc;border-radius:13px}
.wallet-summary>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.wallet-summary>div:last-child{margin-bottom:0}
.wallet-summary span{font-size:13px;color:#6b7280}
.wallet-summary strong{font-size:13px;color:#374151}
.wallet-summary-total{border-top:1px solid #e5e7eb;padding-top:11px;margin-top:3px}
.wallet-summary-total span{font-weight:600;color:#374151}
.wallet-summary-total strong{font-size:14px;color:#4f46e5}
.add-money-btn{width:100%;height:48px;margin-top:17px;border:0;border-radius:12px;background:linear-gradient(135deg,#4f46e5,#2563eb);color:#fff;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 8px 20px rgba(79,70,229,.2);transition:.2s}
.add-money-btn:hover{transform:translateY(-1px);box-shadow:0 11px 25px rgba(79,70,229,.28)}
.payment-secure-text{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:20px;font-size:12px;color:#9ca3af}
.payment-secure-text i{color:#22c55e;font-size:12px}
.wallet-bottom-note{display:flex;align-items:center;gap:12px;padding:15px 17px;border:1px solid #e8e9ee;background:#fff;border-radius:15px}
.wallet-bottom-note-icon{width:35px;height:35px;min-width:35px;border-radius:10px;background:#f3f4f6;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-size: 22px;}
.wallet-bottom-note strong{display:block;font-size:14px;color:#374151;margin-bottom:3px}
.wallet-bottom-note span{display:block;font-size:13px;color:#9ca3af}
.wallet-bottom-note a{margin-left:auto;white-space:nowrap;color:#4f46e5;text-decoration:none;font-size:15px;font-weight:600}
.wallet-bottom-note a i{margin-left:3px}
@media(max-width:767px){
	.wallet-page-header{align-items:flex-start}
	.wallet-page-header h2{font-size:21px}
	.wallet-back-btn{padding:8px 11px}
	.wallet-card-top h2{font-size:25px}
	.wallet-bottom-note{align-items:flex-start;flex-wrap:wrap}
	.wallet-bottom-note a{margin-left:47px}
}
@media(max-width:480px){
	.wallet-page-header{flex-direction:column}
	.wallet-back-btn{align-self:flex-start}
	.quick-amounts button{flex:1}
	.wallet-limit{flex-direction:column}
}
.input-group-text {
  display: flex;
  align-items: center;
  padding: .5rem .9rem;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--vz-body-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--vz-tertiary-bg);
  border: var(--vz-border-width) solid var(--vz-input-border-custom);
  border-radius: var(--vz-border-radius);
}

.download-spinner {
	display: inline-block;
	animation: downloadSpin .8s linear infinite;
}

@keyframes downloadSpin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.ticket-create-btn.loading {
	opacity: .7;
	cursor: not-allowed;
	pointer-events: none;
	color: #fff;
}
/* ==========================================
   NEW V2 INVOICE ONLY
   Existing card/header untouched
========================================== */

.newv2-invoice {
	background: #fff;
	color: #172033;
}

/* HEADER */

.newv2-invoice-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 30px;
}

.newv2-company {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.newv2-logo {
	width: 125px;
	height: auto;
	max-height: 65px;
	object-fit: contain;
	object-position: left center;
}

.newv2-company h4 {
	font-size: 20px;
	font-weight: 800;
	color: #111827;
	margin: 0 0 7px;
}

.newv2-company-details {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	line-height: 1.5;
	color: #64748b;
}

.newv2-invoice-head-right {
	text-align: right;
	min-width: 180px;
}

.newv2-invoice-title {
	font-size: 31px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 1px;
	color: #111827;
}

.newv2-invoice-number {
	font-size: 12px;
	font-weight: 700;
	color: #64748b;
	margin: 8px 0 10px;
}

.newv2-status {
	border: 0 !important;
	padding: 5px 13px !important;
	border-radius: 4px !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.newv2-status-paid {
	background: #dcfce7 !important;
	color: #15803d !important;
}

.newv2-status-unpaid {
	background: #fff7ed !important;
	color: #c2410c !important;
}

.newv2-status-refund {
	background: #eff6ff !important;
	color: #2563eb !important;
}

.newv2-status-cancel {
	background: #fee2e2 !important;
	color: #dc2626 !important;
}

.newv2-status-default {
	background: #f1f5f9 !important;
	color: #475569 !important;
}

/* ACCENT */

.newv2-accent {
	width: 100%;
	height: 3px;
	background: #2563eb;
	margin: 25px 0 22px;
	border-radius: 10px;
}

/* BILLING */

.newv2-billing {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 25px;
}

.newv2-billing-box {
	background: #f8fafc;
	border: 1px solid #e8edf3;
	border-radius: 6px;
	padding: 16px 18px;
	min-height: 100px;
}

.newv2-billing-right {
	background: #fff;
}

.newv2-label {
	font-size: 14px;
	font-weight: 800;
	color: #64748b;
	letter-spacing: 1px;
	margin-bottom: 9px;
}

.newv2-client-name {
	font-size: 14px;
	font-weight: 800;
	color: #111827;
	margin-bottom: 5px;
}

.newv2-client-info {
	font-size: 14px;
	color: #64748b;
	line-height: 1.7;
}

.newv2-detail {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-size: 14px;
	padding: 3px 0;
}

.newv2-detail span {
	color: #64748b;
}

.newv2-detail strong {
	color: #1e293b;
}

/* SECTION HEADING */

.newv2-section-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 9px;
	font-size: 14px;
	font-weight: 800;
	color: #111827;
}

.newv2-section-heading:after {
	content: "";
	height: 1px;
	flex: 1;
	background: #e5e7eb;
}

/* TABLE */

.newv2-table-wrap {
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	overflow: hidden;
}

.newv2-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 !important;
	font-size: 10px;
}

.newv2-table thead th {
	background: #f8fafc;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    padding: 9px 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    letter-spacing: .6px;
}

.newv2-table tbody td {
	border: 0;
    border-bottom: 1px solid #edf0f4 !important;
    padding: 15px 12px !important;
    vertical-align: middle;
    color: #334155 !important;
}

.newv2-table tbody tr:last-child td {
	border-bottom: 0;
}

.newv2-service {
	width: 40%;
	text-align: left;
}

.newv2-tax {
	width: 20%;
}

.newv2-center {
	text-align: center !important;
}

.newv2-right {
	text-align: right !important;
}

.newv2-service-name {
	font-size: 13px;
	font-weight: 800;
	color: #111827;
}

.newv2-tax-list {
	font-size: 13px;
	line-height: 1.7;
}

.newv2-tax-list span {
	color: #64748b;
}

.newv2-no-tax {
	color: #94a3b8;
}

.newv2-total {
	font-size: 13px !important;
	font-weight: 800 !important;
	color: #111827 !important;
}

/* BOTTOM */

.newv2-bottom {
	display: grid;
	grid-template-columns: 1fr 330px;
	gap: 35px;
	align-items: end;
	margin-top: 24px;
}

.newv2-thankyou {
	display: flex;
	align-items: center;
	gap: 11px;
	border: 1px solid #e5e7eb;
	background: #fafafa;
	border-radius: 6px;
	padding: 12px 14px;
	max-width: 320px;
}

.newv2-check-icon {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eff6ff;
	color: #2563eb;
	border-radius: 50%;
	font-size: 15px;
	flex-shrink: 0;
}

.newv2-thankyou strong {
	display: block;
	font-size: 14px;
	color: #1e293b;
}

.newv2-thankyou span {
	display: block;
	font-size: 13px;
	color: #64748b;
	margin-top: 3px;
}

.newv2-total-box {
	width: 100%;
}

.newv2-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	font-size: 15px;
	color: #64748b;
}

.newv2-total-row strong {
	color: #1e293b;
}

.newv2-discount strong {
	color: #16a34a;
}

.newv2-total-line {
	height: 1px;
	background: #e5e7eb;
	margin: 7px 0;
}

.newv2-grand-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #111827;
	color: #fff;
	border-radius: 6px;
	padding: 13px 15px;
}

.newv2-grand-total span {
	font-size: 13px;
	font-weight: 700;
}

.newv2-grand-total strong {
	font-size: 18px;
	font-weight: 900;
}

/* TERMS */

.newv2-terms {
	margin-top: 25px;
	padding-top: 18px;
	border-top: 1px solid #e5e7eb;
}

.newv2-terms-text {
	/* display: grid; */
	grid-template-columns: 1fr 1fr;
	column-gap: 35px;
	row-gap: 7px;
	line-height: 25px;
}

.newv2-terms-text > div {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 7px;
	align-items: start;
}

.newv2-terms-text span {
	font-size: 12px;
	font-weight: 800;
	color: #2563eb;
	padding-top: 1px;
}

.newv2-terms-text p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #64748b;
}

/* FOOTER */

.newv2-invoice-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	border-top: 1px solid #edf0f4;
	margin-top: 20px;
	padding-top: 10px;
	font-size: 13px;
	color: #94a3b8;
}

.newv2-invoice-footer span:first-child {
	font-weight: 700;
	color: #64748b;
}

/* MOBILE */

@media (max-width: 768px) {

	.newv2-invoice {
		padding: 22px 15px !important;
	}

	.newv2-invoice-top {
		flex-direction: column;
	}

	.newv2-invoice-head-right {
		width: 100%;
		text-align: left;
	}

	.newv2-company {
		flex-direction: column;
		gap: 10px;
	}

	.newv2-logo {
		width: 110px;
	}

	.newv2-billing {
		grid-template-columns: 1fr;
	}

	.newv2-bottom {
		grid-template-columns: 1fr;
	}

	.newv2-thankyou {
		max-width: 100%;
	}

	.newv2-table-wrap {
		overflow-x: auto;
	}

	.newv2-table {
		min-width: 650px;
	}

	.newv2-terms-text {
		grid-template-columns: 1fr;
	}

	.newv2-invoice-footer {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* PRINT */

@media print {

	.newv2-invoice {
		border: 0;
		box-shadow: none;
		padding: 20px 25px !important;
	}

	.newv2-table-wrap {
		overflow: visible;
	}

	.newv2-table {
		min-width: 0;
	}

	.newv2-invoice-top,
	.newv2-billing,
	.newv2-table-wrap,
	.newv2-bottom,
	.newv2-terms {
		break-inside: avoid;
	}
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover>.menu-dropdown {
    display: block;
    left: var(--vz-vertical-menu-width-sm);
    position: absolute;
    width: 212px;
    height: auto !important;
    padding: .5rem 0;
    border-radius: 0 0 16px 0px;
    box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
    background: radial-gradient(circle at 100% 5%, rgba(139, 0, 255, .35), transparent 30%), linear-gradient(180deg, #15136f 0%, #20218f 52%, #2525a4 100%) !important;
    padding-top: 22px;
    margin-top: -9px;
    z-index: -9;
    margin-left: -11px;
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-sm .nav-item>.nav-link {
    color: #fff;
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-sm .nav-item:hover>.nav-link {
    color: #fff;
}
.header-action-group {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-right: 12px;
}

.header-action {
	position: relative;
	display: flex;
	align-items: center;
}

.header-action-button {
	position: relative;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #edf0f5;
	border-radius: 12px;
	background: #ffffff;
	color: #596579;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.25s ease;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.header-action-button:hover {
	color: #1d4ed8;
	background: #f6f8ff;
	border-color: #dce5ff;
	transform: translateY(-2px);
	box-shadow: 0 7px 18px rgba(29, 78, 216, 0.12);
}

.header-action-button:active {
	transform: translateY(0);
}

.header-action-button i {
	font-size: 22px;
	line-height: 1;
}

.header-action-button img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.header-notification-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #ffffff;
	border-radius: 50px;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
	z-index: 5;
}

.header-notification-badge.danger {
	background: #f05a47;
	color: #ffffff;
}

.header-notification-badge.warning {
	background: #f7b84b;
	color: #1f2937;
}

.products-dropdown {
	width: 330px;
	margin-top: 10px !important;
	padding: 0 !important;
	overflow: hidden;
	border: 1px solid #edf0f5 !important;
	border-radius: 16px !important;
	background: #ffffff;
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14) !important;
}

.products-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 18px 16px;
	border-bottom: 1px solid #f0f2f6;
}

.products-label {
	display: block;
	margin-bottom: 3px;
	color: #94a0b2;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.7px;
}

.products-header h6 {
	margin: 0;
	color: #172033;
	font-size: 16px;
	font-weight: 700;
}

.products-count {
	padding: 5px 9px;
	border-radius: 20px;
	background: #f1f5ff;
	color: #1d4ed8;
	font-size: 10px;
	font-weight: 600;
}

.products-body {
	padding: 10px;
}

.product-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid transparent;
	border-radius: 12px;
	color: #172033;
	text-decoration: none;
	transition: all 0.2s ease;
}

.product-card:hover {
	background: #f7f9fc;
	border-color: #edf0f5;
	color: #172033;
}

.product-icon {
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 11px;
	background: #f4f7ff;
	border: 1px solid #e8edfa;
}

.product-icon img {
	width: 31px;
	height: 31px;
	object-fit: contain;
}

.product-info {
	flex: 1;
	min-width: 0;
}

.product-info strong {
	display: block;
	margin-bottom: 3px;
	color: #172033;
	font-size: 13px;
	font-weight: 600;
}

.product-info small {
	display: block;
	color: #8a94a6;
	font-size: 11px;
}

.product-card > i {
	color: #a0a8b7;
	font-size: 18px;
	transition: transform 0.2s ease;
}

.product-card:hover > i {
	color: #1d4ed8;
	transform: translateX(3px);
}

.products-footer {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 11px 18px;
	border-top: 1px solid #f0f2f6;
	background: #fafbfc;
	color: #7b8495;
	font-size: 11px;
	font-weight: 500;
}

.products-footer i {
	color: #22a06b;
	font-size: 14px;
}

@media (max-width: 768px) {
	.header-action-group {
		gap: 5px;
		margin-right: 6px;
	}

	.header-action-button {
		width: 38px;
		height: 38px;
		border-radius: 10px;
	}

	.header-action-button i {
		font-size: 20px;
	}

	.header-action-button img {
		width: 21px;
		height: 21px;
	}

	.products-dropdown {
		width: 300px;
	}
}

@media (max-width: 400px) {
	.products-dropdown {
		width: calc(100vw - 20px);
	}
}
.orders-page {
	padding-bottom: 10px;
}
.orders-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #24105f 0%, #3514a4 45%, #171c8f 100%);
	border-radius: 18px;
	padding: 28px 30px 105px;
	color: #fff;
	margin-bottom: -82px;
}
.orders-hero:before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(116,61,255,.25);
	top: -280px;
	right: 150px;
	filter: blur(5px);
}
.orders-hero:after {
	content: "";
	position: absolute;
	width: 500px;
	height: 220px;
	border-radius: 50%;
	background: rgba(69,42,255,.18);
	bottom: -180px;
	left: 35%;
	transform: rotate(-12deg);
}
.orders-hero-content {
	position: relative;
	z-index: 2;
}
.orders-hero h1 {
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 5px;
}
.orders-hero p {
	font-size: 15px;
	margin: 0;
	opacity: .85;
}
.orders-breadcrumb {
	position: relative;
	z-index: 2;
}
.orders-breadcrumb .breadcrumb {
	margin: 0;
}
.orders-breadcrumb .breadcrumb-item,
.orders-breadcrumb .breadcrumb-item a {
	color: rgba(255,255,255,.85);
}
.orders-breadcrumb .breadcrumb-item.active {
	color: #fff;
}
.orders-stats {
	position: relative;
}
.order-stat-card {
	position: relative;
	height: 140px;
	border: 1px solid rgba(102,76,255,.08);
	border-radius: 16px;
	background: rgba(255,255,255,.97);
	box-shadow: 0 8px 25px rgba(33,22,91,.08);
	overflow: hidden;
	transition: all .25s ease;
}
.order-stat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(33,22,91,.13);
}
.order-stat-card:after {
	content: "";
	position: absolute;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	right: -25px;
	top: -25px;
	background: var(--stat-bg);
	opacity: .08;
}
.order-stat-body {
	height: 100%;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.order-stat-info {
	min-width: 0;
}
.order-stat-label {
	font-size: 13px;
	color: #555879;
	font-weight: 500;
	margin-bottom: 8px;
	white-space: nowrap;
}
.order-stat-number {
	font-size: 25px;
	font-weight: 700;
	color: #15163a;
	line-height: 1;
	margin-bottom: 7px;
}
.order-stat-sub {
	font-size: 11px;
	color: #7c7f98;
}
.order-stat-icon {
	width: 52px;
	height: 52px;
	min-width: 52px;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--stat-gradient);
	color: #fff;
	font-size: 25px;
	box-shadow: 0 8px 18px var(--stat-shadow);
}
.stat-purple {
	--stat-gradient: linear-gradient(135deg,#7b3ff2,#5424d9);
	--stat-bg: #6738e9;
	--stat-shadow: rgba(103,56,233,.25);
}
.stat-orange {
	--stat-gradient: linear-gradient(135deg,#ffbd3d,#f28a00);
	--stat-bg: #ff9f0a;
	--stat-shadow: rgba(242,138,0,.25);
}
.stat-red {
	--stat-gradient: linear-gradient(135deg,#ff6b73,#e52d3f);
	--stat-bg: #ef3949;
	--stat-shadow: rgba(229,45,63,.25);
}
.stat-blue {
	--stat-gradient: linear-gradient(135deg,#4b9aff,#1265dc);
	--stat-bg: #2478e8;
	--stat-shadow: rgba(18,101,220,.25);
}
.stat-green {
	--stat-gradient: linear-gradient(135deg,#28d98b,#07975d);
	--stat-bg: #0ca969;
	--stat-shadow: rgba(7,151,93,.25);
}
.orders-table-card {
	position: relative;
	z-index: 2;
	margin-top: 15px;
	border: 1px solid #e9eaf3;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 8px 30px rgba(28,24,78,.08);
	overflow: hidden;
}
.orders-toolbar {
	padding: 20px;
	border-bottom: 1px solid #edf0f5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	flex-wrap: wrap;
}
.entries-control {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #777b94;
	font-size: 13px;
}
.entries-select {
	width: 75px;
	height: 42px;
	border: 1px solid #e1e4ed;
	border-radius: 10px;
	padding: 0 12px;
	color: #171936;
	background: #fff;
	outline: none;
	cursor: pointer;
}
.entries-select:focus {
	border-color: #6938ef;
	box-shadow: 0 0 0 3px rgba(105,56,239,.08);
}
.orders-toolbar-right {
	display: flex;
	align-items: center;
	gap: 10px;
}
.order-search {
	position: relative;
}
.order-search input {
	width: 265px;
	height: 42px;
	border: 1px solid #e1e4ed;
	border-radius: 10px;
	padding: 0 42px 0 14px;
	font-size: 13px;
	outline: none;
	transition: .2s;
}
.order-search input:focus {
	border-color: #6938ef;
	box-shadow: 0 0 0 3px rgba(105,56,239,.08);
}
.order-search i {
	position: absolute;
	right: 14px;
	top: 12px;
	font-size: 18px;
	color: #777b94;
}
.order-filter-btn,
.order-export-btn {
	height: 42px;
	border-radius: 10px;
	padding: 0 17px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid #e1e4ed;
	background: #fff;
	color: #5424d9;
	transition: .2s;
	cursor: pointer;
}
.order-filter-btn:hover {
	background: #f5f1ff;
	border-color: #d8ccff;
}
.order-export-btn {
	background: linear-gradient(135deg,#703cf0,#5520d8);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 15px rgba(93,42,221,.22);
}
.order-export-btn:hover {
	color: #fff;
	transform: translateY(-1px);
}
.orders-table-wrap {
	overflow-x: auto;
}
.orders-table {
	width: 100%;
	min-width: 1150px;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
}
.orders-table thead th {
	background: #f7f7fc;
	color: #383a5c;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	padding: 14px 13px;
	border-bottom: 1px solid #e9ebf2;
	white-space: nowrap;
}
.orders-table tbody td {
	padding: 13px;
	border-bottom: 1px solid #eef0f5;
	color: #252743;
	font-size: 13px;
	vertical-align: middle;
	white-space: nowrap;
}
.orders-table tbody tr {
	transition: .2s;
}
.orders-table tbody tr:hover {
	background: #faf9ff;
}
.orders-table tbody tr:last-child td {
	border-bottom: 0;
}
.order-id-link {
	color: #5424d9;
	font-weight: 600;
	text-decoration: none;
}
.order-id-link:hover {
	color: #3514a4;
}
.customer-name {
	font-weight: 500;
	color: #252743;
}
.service-name {
	color: #454865;
}
.amount {
	font-weight: 600;
	color: #252743;
}
.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 600;
}
.status-badge:before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
}
.status-paid {
	background: #edf9f2;
	color: #13864d;
	border: 1px solid #d5f0df;
}
.status-paid:before {
	background: #17a65c;
}
.status-unpaid {
	background: #fff0f1;
	color: #d93445;
	border: 1px solid #ffd8dc;
}
.status-unpaid:before {
	background: #ef4050;
}
.status-cancelled {
	background: #fff0f1;
	color: #d93445;
	border: 1px solid #ffd8dc;
}
.status-cancelled:before {
	background: #ef4050;
}
.status-warning {
	background: #fff7e9;
	color: #d98508;
	border: 1px solid #ffe8bf;
}
.status-warning:before {
	background: #f5a623;
}
.status-success {
	background: #edf9f2;
	color: #13864d;
	border: 1px solid #d5f0df;
}
.status-success:before {
	background: #17a65c;
}
.order-date {
	color: #555972;
	font-size: 12px;
}
.order-actions {
	display: flex;
	align-items: center;
	gap: 7px;
}
.order-action-btn {
	width: 35px;
	height: 35px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e2e4ed;
	background: #fff;
	color: #4d506c;
	text-decoration: none;
	transition: .2s;
	cursor: pointer;
}
.order-action-btn:hover {
	color: #5424d9;
	border-color: #cfc4ff;
	background: #f7f4ff;
}
.order-action-primary {
	border: 0;
	background: linear-gradient(135deg,#703cf0,#5520d8);
	color: #fff;
	box-shadow: 0 5px 12px rgba(93,42,221,.2);
}
.order-action-primary:hover {
	color: #fff;
	background: linear-gradient(135deg,#6030dd,#4518be);
}
.orders-footer {
	padding: 15px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	border-top: 1px solid #edf0f5;
}
.entries-info {
	color: #73768f;
	font-size: 12px;
}
.orders-pagination {
	display: flex;
	align-items: center;
	gap: 8px;
}
.orders-pagination button {
	width: 38px;
	height: 38px;
	border: 1px solid #e3e5ed;
	background: #fff;
	border-radius: 9px;
	color: #555871;
	font-size: 13px;
	cursor: pointer;
	transition: .2s;
}
.orders-pagination button:hover:not(:disabled) {
	border-color: #cfc3ff;
	color: #5424d9;
	background: #f7f4ff;
}
.orders-pagination button.active {
	border-color: transparent;
	background: linear-gradient(135deg,#703cf0,#5520d8);
	color: #fff;
	box-shadow: 0 5px 13px rgba(93,42,221,.2);
}
.orders-pagination button:disabled {
	opacity: .4;
	cursor: not-allowed;
	background: #f8f8fb;
}
.order-modal-icon {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg,#eee8ff,#f8f5ff);
	color: #6631e6;
	font-size: 28px;
}
.order-modal .form-label {
	font-size: 13px;
	color: #343650;
}
.order-modal .form-control,
.order-modal .form-select {
	min-height: 43px;
	border-radius: 9px;
	border-color: #e1e4ec;
	font-size: 13px;
}
@media(max-width:991px) {
	.orders-hero {
		padding-bottom: 95px;
	}
	.order-stat-card {
		height: 125px;
	}
	.order-stat-body {
		padding: 16px;
	}
	.order-stat-icon {
		width: 45px;
		height: 45px;
		min-width: 45px;
		font-size: 21px;
	}
	.order-stat-number {
		font-size: 22px;
	}
}
@media(max-width:767px) {
	.orders-hero {
		padding: 22px 20px 95px;
		border-radius: 14px;
	}
	.orders-hero h1 {
		font-size: 24px;
	}
	.orders-breadcrumb {
		margin-top: 12px;
	}
	.orders-toolbar {
		align-items: stretch;
	}
	.orders-toolbar-right {
		width: 100%;
		flex-wrap: wrap;
	}
	.order-search {
		flex: 1;
		min-width: 180px;
	}
	.order-search input {
		width: 100%;
	}
	.orders-footer {
		flex-direction: column;
		align-items: flex-start;
	}
	.orders-pagination {
		width: 100%;
		justify-content: center;
	}
}
#Filter {
	width:600px;
	max-width:100%;
	background:#fff;
}
#Filter .offcanvas-header {
	padding:20px 22px 10px;
	border:0;
}
.filter-header {
	display:flex;
	align-items:center;
	gap:12px;
}
.filter-header-icon {
	width:44px;
	height:44px;
	border-radius:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#f0ebff;
	color:#5b21e8;
	font-size:22px;
}
.filter-header-title h5 {
	margin:0;
	font-size:17px;
	font-weight:700;
	color:#171936;
}
.filter-header-title p {
	margin:3px 0 0;
	font-size:11px;
	color:#888ba0;
}
.filter-clear-btn {
	margin-left:auto;
	border:1px solid #e8e1ff;
	background:#f8f5ff;
	color:#5b21e8;
	border-radius:20px;
	padding:7px 13px;
	font-size:11px;
	font-weight:600;
	cursor:pointer;
}
.filter-close {
	border:0;
	background:transparent;
	color:#5b21e8;
	font-size:22px;
	margin-left:3px;
	padding:4px;
}
#Filter .offcanvas-body {
	padding:10px 16px 82px;
	overflow-y:auto;
}
.filter-section {
	border:1px solid #eeeeF5;
	border-radius:10px;
	margin-bottom:16px;
	box-shadow:0 3px 14px rgba(35,24,90,.04);
	overflow:hidden;
}
.filter-section-header {
	height:42px;
	padding:0 14px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	background:linear-gradient(90deg,#f3efff,#f8f6ff);
	color:#5424d9;
	font-size:13px;
	font-weight:700;
}
.filter-section-header i {
	font-size:18px;
}
.filter-section-body {
	padding:13px;
}
.filter-row {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
	margin-bottom:12px;
}
.filter-row:last-child {
	margin-bottom:0;
}
.filter-group label {
	display: flex;
    font-size: 13px;
    font-weight: 700;
    color: #27294b;
    margin-bottom: 6px;
    align-items: end;
}
.filter-control {
	width: 100%;
    height: 45px;
    border: 1px solid #dfe2eb;
    border-radius: 7px;
    background: #fff;
    padding: 0 10px;
    font-size: 13px;
    color: #4c4f6b;
    outline: none;
    transition: .2s;
}
.filter-control:focus {
	border-color:#7139eb;
	box-shadow:0 0 0 3px rgba(113,57,235,.08);
}
.filter-control::placeholder {
	color:#9699aa;
}
.filter-amount {
	display:flex;
	align-items:center;
	gap:8px;
}
.filter-amount .filter-control {
	flex:1;
}
.filter-to {
	font-size:10px;
	color:#777a91;
}
.filter-options {
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:15px;
}
.filter-check {
	display:flex;
	align-items:center;
	gap:7px;
	font-size:10px;
	font-weight:600;
	color:#363852;
	cursor:pointer;
}
.filter-check input {
	width:16px;
	height:16px;
	margin:0;
	accent-color:#5b16e8;
	cursor:pointer;
}
.filter-check input:checked {
	background-color:#5b16e8;
	border-color:#5b16e8;
}
.filter-methods {
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:14px;
}
.filter-method {
	display:flex;
	align-items:center;
	gap:6px;
	font-size:10px;
	font-weight:600;
	color:#3c3e59;
}
.filter-method input {
	width:16px;
	height:16px;
	margin:0;
	accent-color:#5b16e8;
}
.filter-switches {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px 15px;
	margin-top:4px;
}
.filter-switch-item {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	font-size:13px;
	font-weight:600;
	color:#343650;
}
.filter-switch {
	position:relative;
	width:25px;
	height:15px;
	flex-shrink:0;
}
.filter-switch input {
	display:none;
}
.filter-switch span {
	position:absolute;
	inset:0;
	background:#d5d8e3;
	border-radius:20px;
	cursor:pointer;
	transition:.2s;
}
.filter-switch span:before {
	content:"";
	position:absolute;
	width:11px;
	height:11px;
	left:2px;
	top:2px;
	background:#fff;
	border-radius:50%;
	transition:.2s;
	box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.filter-switch input:checked + span {
	background:#5b16e8;
}
.filter-switch input:checked + span:before {
	transform:translateX(10px);
}
.quick-filter-title {
	font-size:10px;
	font-weight:700;
	color:#30324f;
	margin-bottom:7px;
}
.quick-filters {
	display:flex;
	flex-wrap:wrap;
	gap:6px;
}
.quick-filter {
	border: 1px solid #e3e5ed;
    background: #fafafd;
    color: #555872;
    border-radius: 15px;
    padding: 5px 13px;
    font-size: 12px;
    cursor: pointer;
    transition: .2s;
}
.quick-filter:hover,
.quick-filter.active {
	border-color:#9a73ee;
	background:#f5efff;
	color:#5424d9;
	font-weight:600;
}
.filter-footer {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:12px 16px;
	background:#fff;
	border-top:1px solid #eeeef4;
	display:grid;
	grid-template-columns:1fr 1.2fr;
	gap:10px;
	z-index:10;
}
.filter-reset-btn,
.filter-apply-btn {
	height:42px;
	border-radius:7px;
	font-size:12px;
	font-weight:600;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	cursor:pointer;
	transition:.2s;
}
.filter-reset-btn {
	background:#fff;
	border:1px solid #8c5bea;
	color:#6425db;
}
.filter-reset-btn:hover {
	background:#f7f2ff;
}
.filter-apply-btn {
	border:0;
	background:linear-gradient(135deg,#6b20ef,#4f08d9);
	color:#fff;
	box-shadow:0 6px 15px rgba(91,22,232,.22);
}
.filter-apply-btn:hover {
	transform:translateY(-1px);
	box-shadow:0 8px 18px rgba(91,22,232,.28);
}
@media(max-width:480px) {
	#Filter {
		width:100%;
	}
	.filter-row {
		gap:9px;
	}
	.filter-section-body {
		padding:12px;
	}
}
.order-details-page {
	padding-bottom:40px;
}
.order-details-hero {
	position:relative;
	overflow:hidden;
	border-radius:20px;
	padding:28px 30px;
	margin-bottom:22px;
	background:linear-gradient(135deg,#24105f 0%,#4b20b8 48%,#171c8f 100%);
	color:#fff;
	box-shadow:0 15px 35px rgba(49,25,130,.18);
}
.order-details-hero:before {
	content:"";
	position:absolute;
	width:350px;
	height:350px;
	border-radius:50%;
	background:rgba(147,101,255,.20);
	right:-110px;
	top:-190px;
}
.order-details-hero:after {
	content:"";
	position:absolute;
	width:280px;
	height:280px;
	border-radius:50%;
	background:rgba(255,255,255,.05);
	left:35%;
	bottom:-220px;
}
.order-hero-content {
	position:relative;
	z-index:2;
}
.order-back-btn {
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:7px 13px;
	border-radius:9px;
	background:rgba(255,255,255,.10);
	border:1px solid rgba(255,255,255,.18);
	color:#fff;
	text-decoration:none;
	font-size:12px;
	margin-bottom:22px;
	transition:.2s;
}
.order-back-btn:hover {
	background:rgba(255,255,255,.18);
	color:#fff;
	transform:translateX(-2px);
}
.order-hero-row {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
}
.order-hero-left {
	min-width:0;
}
.order-hero-label {
	font-size:11px;
	font-weight:500;
	opacity:.72;
	margin-bottom:5px;
}
.order-hero-title {
	font-size:28px;
	font-weight:750;
	margin:0 0 7px;
	letter-spacing:-.4px;
}
.order-hero-date {
	font-size:12px;
	opacity:.72;
}
.order-hero-right {
	display:flex;
	align-items:center;
	gap:10px;
}
.hero-status {
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:9px 14px;
	border-radius:9px;
	font-size:11px;
	font-weight:600;
	background:rgba(255,255,255,.13);
	border:1px solid rgba(255,255,255,.16);
	backdrop-filter:blur(8px);
}
.hero-status:before {
	content:"";
	width:7px;
	height:7px;
	border-radius:50%;
	background:#fff;
}
.order-main-grid {
	display:grid;
	grid-template-columns:minmax(0,1fr) 340px;
	gap:20px;
}
.order-card {
	background:#fff;
	border:1px solid #e9eaf2;
	border-radius:17px;
	box-shadow:0 7px 25px rgba(28,24,78,.06);
	overflow:hidden;
	margin-bottom:20px;
}
.order-card:last-child {
	margin-bottom:0;
}
.order-card-header {
	padding:17px 20px;
	border-bottom:1px solid #edf0f5;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}
.order-card-title {
	display:flex;
	align-items:center;
	gap:10px;
}
.order-card-icon {
	width:35px;
	height:35px;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#f1ecff;
	color:#5b21d8;
	font-size:18px;
}
.order-card-title h6 {
	margin:0;
	color:#242641;
	font-size:14px;
	font-weight:700;
}
.order-card-title p {
	margin:2px 0 0;
	color:#9295a8;
	font-size:10px;
}
.order-card-body {
	padding:20px;
}
.info-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px 30px;
}
.info-item-label {
	font-size:10px;
	font-weight:600;
	color:#9194a8;
	margin-bottom:5px;
	text-transform:uppercase;
	letter-spacing:.35px;
}
.info-item-value {
	font-size:13px;
	font-weight:600;
	color:#292b46;
	word-break:break-word;
}
.info-item-value a {
	color:#5424d9;
	text-decoration:none;
}
.customer-profile {
	display:flex;
	align-items:center;
	gap:13px;
}
.customer-avatar {
	width:52px;
	height:52px;
	min-width:52px;
	border-radius:15px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(135deg,#7b3ff2,#5424d9);
	color:#fff;
	font-size:21px;
	font-weight:700;
	box-shadow:0 7px 16px rgba(84,36,217,.20);
}
.customer-name {
	font-size:15px;
	font-weight:700;
	color:#22243f;
	margin-bottom:3px;
}
.customer-contact {
	font-size:11px;
	color:#898ca0;
}
.customer-contact i {
	margin-right:3px;
}
.service-box {
	display:flex;
	align-items:center;
	gap:13px;
	padding:14px;
	background:#faf9ff;
	border:1px solid #eeeaff;
	border-radius:12px;
}
.service-icon {
	width:45px;
	height:45px;
	min-width:45px;
	border-radius:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(135deg,#ede5ff,#f7f4ff);
	color:#5b21d8;
	font-size:22px;
}
.service-name {
	font-size:13px;
	font-weight:700;
	color:#272943;
	margin-bottom:3px;
}
.service-id {
	font-size:10px;
	color:#9295a8;
}
.payment-summary {
	background:linear-gradient(145deg,#f8f6ff,#fff);
	border:1px solid #ece8ff;
	border-radius:14px;
	padding:17px;
}
.amount-label {
	font-size:10px;
	font-weight:600;
	color:#888ba0;
	text-transform:uppercase;
	letter-spacing:.4px;
	margin-bottom:5px;
}
.amount-value {
	font-size:27px;
	font-weight:750;
	color:#4f1bc9;
	line-height:1.1;
	margin-bottom:12px;
}
.payment-divider {
	border-top:1px dashed #ddd9ec;
	margin:12px 0;
}
.payment-line {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:15px;
	margin-bottom:10px;
	font-size:11px;
}
.payment-line:last-child {
	margin-bottom:0;
}
.payment-line span:first-child {
	color:#888ba0;
}
.payment-line span:last-child {
	font-weight:600;
	color:#2a2c47;
	text-align:right;
}
.status-pill {
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 10px;
	border-radius:7px;
	font-size:10px;
	font-weight:650;
}
.status-pill:before {
	content:"";
	width:6px;
	height:6px;
	border-radius:50%;
}
.status-paid {
	color:#13864d;
	background:#edf9f2;
	border:1px solid #d7f0e1;
}
.status-paid:before {
	background:#18a45e;
}
.status-unpaid {
	color:#d93445;
	background:#fff0f1;
	border:1px solid #ffd8dc;
}
.status-unpaid:before {
	background:#ef4050;
}
.status-completed {
	color:#13864d;
	background:#edf9f2;
	border:1px solid #d7f0e1;
}
.status-completed:before {
	background:#18a45e;
}
.status-cancelled {
	color:#d93445;
	background:#fff0f1;
	border:1px solid #ffd8dc;
}
.status-cancelled:before {
	background:#ef4050;
}
.status-await {
	color:#c27a05;
	background:#fff7e8;
	border:1px solid #ffe8bd;
}
.status-await:before {
	background:#efa51d;
}
.status-processing {
	color:#5424d9;
	background:#f2edff;
	border:1px solid #e2d9ff;
}
.status-processing:before {
	background:#6937e8;
}
.side-summary {
	padding:20px;
}
.side-summary-title {
	font-size:12px;
	font-weight:700;
	color:#292b46;
	margin-bottom:14px;
}
.side-status-box {
	padding:14px;
	border-radius:12px;
	background:#fafafd;
	border:1px solid #eceef4;
	margin-bottom:10px;
}
.side-status-label {
	font-size:10px;
	color:#8c8fa2;
	margin-bottom:6px;
}
.side-status-value {
	font-size:12px;
	font-weight:650;
	color:#292b46;
}
.order-actions {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:9px;
}
.order-action {
	height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	border-radius:9px;
	font-size:11px;
	font-weight:600;
	text-decoration:none;
	cursor:pointer;
	transition:.2s;
}
.order-action-primary {
	background:linear-gradient(135deg,#703cf0,#5520d8);
	color:#fff;
	border:0;
	box-shadow:0 6px 15px rgba(84,36,217,.18);
}
.order-action-primary:hover {
	color:#fff;
	transform:translateY(-1px);
}
.order-action-secondary {
	background:#fff;
	color:#5424d9;
	border:1px solid #ded8f3;
}
.order-action-secondary:hover {
	background:#f7f4ff;
	color:#5424d9;
}
.timeline {
	position:relative;
	padding-left:26px;
}
.timeline:before {
	content:"";
	position:absolute;
	left:7px;
	top:8px;
	bottom:8px;
	width:1px;
	background:#e1ddeb;
}
.timeline-item {
	position:relative;
	padding-bottom:20px;
}
.timeline-item:last-child {
	padding-bottom:0;
}
.timeline-dot {
	position:absolute;
	left:-25px;
	top:2px;
	width:16px;
	height:16px;
	border-radius:50%;
	background:#eee9ff;
	border:4px solid #fff;
	box-shadow:0 0 0 1px #d8cff8;
}
.timeline-item.active .timeline-dot {
	background:#6632e5;
	box-shadow:0 0 0 1px #6632e5;
}
.timeline-title {
	font-size:12px;
	font-weight:650;
	color:#30324d;
	margin-bottom:3px;
}
.timeline-date {
	font-size:10px;
	color:#9699aa;
}
.copy-id {
	border:0;
	background:#f4f1ff;
	color:#5b21d8;
	width:27px;
	height:27px;
	border-radius:7px;
	cursor:pointer;
}
@media(max-width:991px) {
	.order-main-grid {
		grid-template-columns:1fr;
	}
}
@media(max-width:767px) {
	.order-details-hero {
		padding:22px 18px;
		border-radius:15px;
	}
	.order-hero-row {
		align-items:flex-start;
		flex-direction:column;
	}
	.order-hero-title {
		font-size:23px;
	}
	.order-hero-right {
		width:100%;
	}
	.info-grid {
		grid-template-columns:1fr;
		gap:14px;
	}
	.order-card-header {
		padding:15px;
	}
	.order-card-body {
		padding:15px;
	}
}
.client-page{
	max-width:1100px;
	margin:0 auto;
	padding:10px 0 40px;
}

.client-header{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:28px 32px;
	margin-bottom:24px;
	border-radius:20px;
	background:linear-gradient(135deg,#5b21b6,#7c3aed 55%,#9333ea);
	color:#fff;
	overflow:hidden;
	box-shadow:0 12px 35px rgba(91,33,182,.18);
}

.client-header:before{
	content:"";
	position:absolute;
	width:240px;
	height:240px;
	right:-70px;
	top:-120px;
	border-radius:50%;
	background:rgba(255,255,255,.08);
}

.client-header:after{
	content:"";
	position:absolute;
	width:160px;
	height:160px;
	right:100px;
	bottom:-110px;
	border-radius:50%;
	background:rgba(255,255,255,.06);
}

.client-breadcrumb{
	display:flex;
	align-items:center;
	gap:7px;
	margin-bottom:10px;
	font-size:12px;
	color:rgba(255,255,255,.72);
}

.client-breadcrumb i{
	font-size:14px;
}

.client-header h2{
	position:relative;
	z-index:2;
	margin:0 0 5px;
	font-size:25px;
	font-weight:700;
}

.client-header p{
	position:relative;
	z-index:2;
	margin:0;
	font-size:13px;
	color:rgba(255,255,255,.75);
}

.client-header-icon{
	position:relative;
	z-index:2;
	width:62px;
	height:62px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid rgba(255,255,255,.18);
	border-radius:18px;
	background:rgba(255,255,255,.12);
	backdrop-filter:blur(10px);
	font-size:28px;
}

.client-form-card{
	background:#fff;
	border:1px solid #edf0f5;
	border-radius:18px;
	margin-bottom:20px;
	box-shadow:0 7px 25px rgba(15,23,42,.05);
	transition:.25s ease;
}

.client-form-card:hover{
	box-shadow:0 12px 32px rgba(15,23,42,.07);
}

.form-card-header{
	display:flex;
	align-items:center;
	gap:14px;
	padding:21px 25px;
	border-bottom:1px solid #f0f1f5;
	background:linear-gradient(180deg,#fff,#fcfcfe);
}

.form-card-icon{
	width:43px;
	height:43px;
	flex:0 0 43px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:13px;
	color:#6d28d9;
	background:#f3eefe;
	font-size:20px;
}

.form-card-icon.purple{
	color:#2563eb;
	background:#eff6ff;
}

.form-card-header h5{
	margin:0 0 3px;
	font-size:15px;
	font-weight:700;
	color:#1e293b;
}

.form-card-header p{
	margin:0;
	font-size:12px;
	color:#94a3b8;
}

.form-card-body{
	padding:26px 25px;
}

.form-group label{
	display:block;
	margin-bottom:8px;
	font-size:12px;
	font-weight:700;
	color:#334155;
}

.form-group label span{
	color:#ef4444;
}

.input-wrap{
	position:relative;
}

.input-wrap>i{
	position:absolute;
	z-index:2;
	left:14px;
	top:50%;
	transform:translateY(-50%);
	color:#94a3b8;
	font-size:17px;
	pointer-events:none;
	transition:.2s;
}

.input-wrap .form-control{
	padding-left:43px;
}

.input-wrap:focus-within>i{
	color:#7c3aed;
}

.form-control,
.form-select{
	border:1px solid #e5e7eb;
	border-radius:11px;
	background:#fff;
	color:#1e293b;
	font-size:13px;
	box-shadow:none;
	transition:.2s ease;
}

.form-control::placeholder{
	color:#b0b7c3;
}

.form-control:focus,
.form-select:focus{
	border-color:#8b5cf6;
	box-shadow:0 0 0 3px rgba(139,92,246,.10);
}

textarea.form-control{
	height:auto;
	min-height:95px;
	resize:vertical;
	padding-top:13px;
}

.textarea-wrap{
	display:flex;
}

.textarea-wrap>i{
	top:18px;
	transform:none;
}

.textarea-wrap .form-control{
	padding-left:43px;
}

.field-status{
	min-height:18px;
	margin-top:5px;
	padding-left:3px;
	font-size:11px;
	font-weight:600;
}

.field-status.text-success{
	color:#16a34a!important;
}

.field-status.text-danger{
	color:#dc2626!important;
}

.field-status.text-muted{
	color:#94a3b8!important;
}

.field-status .bi-arrow-repeat{
	display:inline-block;
	animation:clientSpin .8s linear infinite;
}

@keyframes clientSpin{
	from{transform:rotate(0)}
	to{transform:rotate(360deg)}
}

.client-form-footer{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	padding:20px 0;
}

.footer-note{
	display:flex;
	align-items:center;
	gap:8px;
	color:#94a3b8;
	font-size:12px;
}

.footer-note i{
	color:#16a34a;
	font-size:18px;
}

.save-client-btn{
	height:46px;
	padding:0 23px;
	border:0;
	border-radius:11px;
	background:linear-gradient(135deg,#6d28d9,#8b5cf6);
	color:#fff;
	font-size:13px;
	font-weight:700;
	box-shadow:0 7px 18px rgba(109,40,217,.20);
	transition:.2s ease;
}

.save-client-btn:hover{
	transform:translateY(-1px);
	box-shadow:0 10px 23px rgba(109,40,217,.28);
}

.save-client-btn:active{
	transform:translateY(0);
}

.save-client-btn:disabled{
	opacity:.7;
	cursor:not-allowed;
	transform:none;
}

.save-client-btn i{
	margin-right:6px;
	font-size:16px;
	vertical-align:-2px;
}

@media(max-width:767px){
	.client-page{
		padding:5px 0 25px;
	}

	.client-header{
		padding:22px;
		border-radius:16px;
	}

	.client-header h2{
		font-size:21px;
	}

	.client-header-icon{
		width:48px;
		height:48px;
		font-size:22px;
		border-radius:14px;
	}

	.client-form-card{
		border-radius:15px;
	}

	.form-card-header{
		padding:18px;
	}

	.form-card-body{
		padding:20px 18px;
	}

	.client-form-footer{
		align-items:stretch;
		flex-direction:column;
	}

	.save-client-btn{
		width:100%;
	}

	.footer-note{
		justify-content:center;
	}
}
.client-offcanvas{
    width:600px!important;
    max-width:100%;
    background:#f6f8fc;
    border-left:0px solid #e8ecf3!important;
}
.client-offcanvas .offcanvas-header{
    position:relative;
    padding:18px 20px;
    background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 55%,#3b82f6 100%);
    border:0;
}
.client-offcanvas .offcanvas-header:after{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    right:-55px;
    top:-70px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    pointer-events:none;
}
.client-offcanvas .offcanvas-header h5{
    position:relative;
    z-index:2;
    font-size:15px;
    letter-spacing:.1px;
}
.client-offcanvas .offcanvas-header small{
    position:relative;
    z-index:2;
    font-size:11px;
}
.client-offcanvas .offcanvas-header .btn-close{
    position:relative;
    z-index:3;
    opacity:.9;
}
.client-offcanvas .offcanvas-body{
    padding:0!important;
    background:#f6f8fc!important;
    overflow-y:auto;
}
.client-offcanvas .offcanvas-body::-webkit-scrollbar{
    width:5px;
}
.client-offcanvas .offcanvas-body::-webkit-scrollbar-track{
    background:transparent;
}
.client-offcanvas .offcanvas-body::-webkit-scrollbar-thumb{
    background:#d6dce7;
    border-radius:10px;
}
.client-offcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover{
    background:#b8c1d1;
}
.client-offcanvas .offcanvas-body> .bg-white{
    position:relative;
    padding:25px 20px 20px!important;
    background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%)!important;
    border-bottom:1px solid #e9edf4!important;
}
.client-offcanvas .offcanvas-body> .bg-white:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:3px;
    background:linear-gradient(90deg,#1d4ed8,#60a5fa);
}
.client-offcanvas .avatar-lg{
    width:76px;
    height:76px;
    border:4px solid #fff;
    box-shadow:0 8px 25px rgba(29,78,216,.15);
}
.client-offcanvas .avatar-lg i{
    font-size:30px!important;
}
.client-offcanvas .offcanvas-body h4{
    font-size:19px;
    line-height:1.3;
    letter-spacing:-.2px;
}
.client-offcanvas .offcanvas-body .text-muted.fs-13{
    font-size:12px!important;
}
.client-offcanvas .badge{
    font-size:10px;
    font-weight:600;
    letter-spacing:.1px;
    padding:5px 8px;
    border-radius:6px;
}
.client-offcanvas .row.g-2.mt-3{
    margin-top:18px!important;
}
.client-offcanvas .row.g-2.mt-3 .btn{
    min-height:58px;
    border:1px solid #e7ebf2!important;
    border-radius:11px;
    background:#fff;
    color:#475569;
    font-size:12px;
    font-weight:600;
    box-shadow:0 2px 5px rgba(15,23,42,.025);
    transition:all .2s ease;
}
.client-offcanvas .row.g-2.mt-3 .btn:hover{
    transform:translateY(-2px);
    border-color:#cbd5e1!important;
    box-shadow:0 7px 18px rgba(15,23,42,.07);
    background:#f8fafc;
}
.client-offcanvas .row.g-2.mt-3 .btn i{
    margin-bottom:5px!important;
    font-size:19px!important;
}
.client-offcanvas .p-3{
    padding:15px!important;
}
.client-offcanvas .card{
    border:1px solid #e8ecf2!important;
    border-radius:14px!important;
    background:#fff;
    overflow:hidden;
    box-shadow:0 3px 12px rgba(15,23,42,.035)!important;
    transition:box-shadow .2s ease,transform .2s ease;
}
.client-offcanvas .card:hover{
    box-shadow:0 7px 22px rgba(15,23,42,.055)!important;
}
.client-offcanvas .card-header{
    padding:13px 15px;
    background:#fff!important;
    border-bottom:1px solid #edf0f4!important;
}
.client-offcanvas .card-header>div{
    min-height:32px;
}
.client-offcanvas .avatar-xs{
    width:32px;
    height:32px;
    min-width:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px!important;
    font-size:15px;
}
.client-offcanvas .card-header h6{
    color:#1e293b;
    font-size:13px;
    font-weight:700;
    letter-spacing:.1px;
}
.client-offcanvas .card-header small{
    display:block;
    margin-top:2px;
    color:#94a3b8!important;
    font-size:10px;
}
.client-offcanvas .card-body{
    padding:15px;
}
.client-offcanvas .card-body .text-muted.fs-12{
    color:#94a3b8!important;
    font-size:10px!important;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.3px;
}
.client-offcanvas .card-body .fw-semibold{
    color:#334155;
    font-size:13px;
}
.client-offcanvas .card-body .fw-medium{
    font-size:13px;
}
.client-offcanvas .card-body .row.g-3{
    --bs-gutter-y:16px;
}
.client-offcanvas .card-body .row.g-3 .text-primary{
    color:#1d4ed8!important;
}
.client-offcanvas .card-body .row.g-3 a{
    font-size:12px;
    font-weight:600;
}
.client-offcanvas .card-body .row.g-3 a:hover{
    color:#1d4ed8!important;
}
.client-offcanvas .card-body .border-top{
    border-color:#edf0f4!important;
}
.client-offcanvas .avatar-md{
    width:46px;
    height:46px;
    min-width:46px;
    border:3px solid #fff;
    box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.client-offcanvas .avatar-md i{
    font-size:19px!important;
}
.client-offcanvas .card-body .d-flex.align-items-center.gap-3.mb-3{
    padding:11px;
    margin-bottom:14px!important;
    background:#f8fafc;
    border:1px solid #edf1f5;
    border-radius:11px;
}
.client-offcanvas .card-body .d-flex.align-items-center.gap-3.mb-3 .text-muted.fs-12{
    text-transform:none;
    letter-spacing:0;
}
.client-offcanvas .card-body .row.g-3 .text-muted{
    color:#94a3b8!important;
}
.client-offcanvas .card-body .bg-light{
    background:#f8fafc!important;
    border:1px solid #edf1f5;
    border-radius:10px!important;
}
.client-offcanvas .card-body .bg-light .text-muted.fs-11{
    color:#94a3b8!important;
    font-size:10px!important;
    font-weight:600;
    margin-bottom:3px;
}
.client-offcanvas .card-body .bg-light .fw-semibold.fs-13{
    color:#334155;
    font-size:12px!important;
}
.client-offcanvas .card-body .d-flex.gap-3.mb-3{
    padding:12px;
    background:#f8fafc;
    border:1px solid #edf1f5;
    border-radius:11px;
}
.client-offcanvas .card-body .d-flex.gap-3.mb-3>.text-danger{
    width:36px;
    height:36px;
    min-width:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff1f2;
    border-radius:9px;
}
.client-offcanvas .card-body .d-flex.gap-3.mb-3>.text-danger i{
    font-size:17px;
}
.client-offcanvas .lh-base{
    line-height:1.6!important;
}
.client-offcanvas .d-flex.justify-content-between.align-items-center.py-2{
    min-height:40px;
    border-color:#edf0f4!important;
}
.client-offcanvas .d-flex.justify-content-between.align-items-center.py-2 span:first-child{
    color:#64748b!important;
    font-size:11px!important;
}
.client-offcanvas .d-flex.justify-content-between.align-items-center.py-2 span:last-child{
    font-size:11px!important;
}
.client-offcanvas .card-body.p-0>.d-flex{
    min-height:42px;
    transition:background .15s ease;
}
.client-offcanvas .card-body.p-0>.d-flex:hover{
    background:#f8fafc;
}
.client-offcanvas .card-body.p-0>.d-flex:last-child{
    border-bottom:0!important;
}
.client-offcanvas .bg-primary-subtle{
    background:#eff6ff!important;
}
.client-offcanvas .text-primary{
    color:#1d4ed8!important;
}
.client-offcanvas .bg-success-subtle{
    background:#ecfdf3!important;
}
.client-offcanvas .text-success{
    color:#15803d!important;
}
.client-offcanvas .bg-info-subtle{
    background:#eff6ff!important;
}
.client-offcanvas .text-info{
    color:#0369a1!important;
}
.client-offcanvas .bg-danger-subtle{
    background:#fff1f2!important;
}
.client-offcanvas .text-danger{
    color:#e11d48!important;
}
.client-offcanvas .bg-warning-subtle{
    background:#fffbeb!important;
}
.client-offcanvas .text-warning{
    color:#d97706!important;
}
.client-offcanvas .bg-secondary-subtle{
    background:#f1f5f9!important;
}
.client-offcanvas .text-secondary{
    color:#475569!important;
}
.client-offcanvas .offcanvas-footer{
    position:sticky;
    bottom:0;
    z-index:10;
    padding:12px 15px!important;
    background:rgba(255,255,255,.96)!important;
    backdrop-filter:blur(12px);
    border-top:1px solid #e6eaf0!important;
    box-shadow:0 -5px 20px rgba(15,23,42,.04);
}
.client-offcanvas .offcanvas-footer .d-flex{
    gap:8px!important;
}
.client-offcanvas .offcanvas-footer .btn{
    height:42px;
    border-radius:10px;
    font-size:12px;
    font-weight:600;
    transition:all .2s ease;
}
.client-offcanvas .offcanvas-footer .btn-light{
    color:#475569;
    background:#f8fafc;
    border-color:#e2e8f0!important;
}
.client-offcanvas .offcanvas-footer .btn-primary{
    background:#1d4ed8;
    border-color:#1d4ed8;
    box-shadow:0 4px 12px rgba(29,78,216,.16);
}
.client-offcanvas .offcanvas-footer .btn-primary:hover{
    background:#1e40af;
    border-color:#1e40af;
    transform:translateY(-1px);
}
.client-offcanvas .offcanvas-footer .btn-danger{
    background:#fff;
    color:#dc2626;
    border:1px solid #fecaca;
}
.client-offcanvas .offcanvas-footer .btn-danger:hover{
    background:#fef2f2;
    border-color:#fca5a5;
    transform:translateY(-1px);
}
.client-offcanvas .offcanvas-footer .btn-danger i{
    font-size:17px;
}
.client-offcanvas .offcanvas-footer .btn i{
    vertical-align:-1px;
}
@media(max-width:575.98px){
    .client-offcanvas{
        width:100%!important;
    }
    .client-offcanvas .offcanvas-header{
        padding:16px;
    }
    .client-offcanvas .offcanvas-body> .bg-white{
        padding:22px 16px 18px!important;
    }
    .client-offcanvas .p-3{
        padding:12px!important;
    }
    .client-offcanvas .card-body{
        padding:14px;
    }
}
.lead-page {
	padding-bottom: 30px;
}

.lead-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 18px;
}

.lead-page-header h1 {
	margin: 0 0 3px;
	color: #101828;
	font-size: 25px;
	font-weight: 750;
	letter-spacing: -.5px;
}

.lead-page-header p {
	margin: 0;
	color: #667085;
	font-size: 13px;
}

.lead-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 155px;
	height: 43px;
	padding: 0 16px;
	border: 0;
	border-radius: 9px;
	background: linear-gradient(135deg,#4f46ff,#4338ca);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(67,56,202,.18);
	transition: all .25s ease;
}

.lead-add-btn:hover {
	transform: translateY(-2px);
	color: #fff;
	box-shadow: 0 10px 22px rgba(67,56,202,.25);
}

.lead-add-btn i {
	font-size: 17px;
}

.lead-stats-row {
	margin-bottom: 16px;
}

.lead-stat-card,
.new-lead-card {
	position: relative;
	height: 105px;
	overflow: hidden;
	border-radius: 12px;
}

.lead-stat-card {
	padding: 14px 15px;
	border: 1px solid #e8ecf3;
	background: #fff;
	box-shadow: 0 3px 14px rgba(16,24,40,.04);
	transition: all .25s ease;
}

.lead-stat-card:hover,
.new-lead-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 9px 24px rgba(16,24,40,.08);
}

.stat-card-content {
	position: relative;
	z-index: 3;
}

.stat-top {
	margin-bottom: 5px;
}

.stat-icon {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	font-size: 18px;
}

.total-icon {
	background: #eeecff;
	color: #4f46e5;
}

.processing-icon {
	background: #fff0df;
	color: #f97316;
}

.completed-icon {
	background: #dff8ee;
	color: #10b981;
}

.stat-label {
	margin-bottom: 1px;
	color: #667085;
	font-size: 10px;
	font-weight: 600;
}

.stat-number {
	color: #101828;
	font-size: 22px;
	line-height: 1.1;
	font-weight: 750;
	letter-spacing: -.4px;
}

.stat-bottom {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 5px;
	color: #98a2b3;
	font-size: 9px;
}

.stat-bottom i {
	color: #12b76a;
	font-size: 11px;
}

.processing-bottom i {
	color: #f97316;
	font-size: 8px;
}

.completed-bottom i {
	color: #10b981;
}

.stat-wave {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	opacity: 1;
	z-index: 0;
	border-radius: inherit;
}

.stat-wave::before {
	content: "";
	position: absolute;
	width: 180px;
	height: 180px;
	right: -70px;
	bottom: -90px;
	border-radius: 50%;
	filter: blur(2px);
	animation: statOrb 6s ease-in-out infinite;
}

.stat-wave::after {
	content: "";
	position: absolute;
	width: 120px;
	height: 120px;
	left: -55px;
	top: -60px;
	border-radius: 50%;
	filter: blur(1px);
	animation: statOrb2 7s ease-in-out infinite;
}

.total-wave {
	background:
		radial-gradient(circle at 90% 15%,rgba(124,105,255,.14),transparent 35%),
		radial-gradient(circle at 10% 90%,rgba(155,140,255,.08),transparent 38%),
		linear-gradient(135deg,#fff 0%,#faf9ff 55%,#f7f5ff 100%);
}

.total-wave::before {
	background: rgba(124,105,255,.09);
}

.total-wave::after {
	background: rgba(155,140,255,.07);
}

.processing-wave {
	background:
		radial-gradient(circle at 90% 15%,rgba(249,115,22,.15),transparent 35%),
		radial-gradient(circle at 10% 90%,rgba(251,146,60,.08),transparent 38%),
		linear-gradient(135deg,#fff 0%,#fffaf5 55%,#fff7ed 100%);
}

.processing-wave::before {
	background: rgba(249,115,22,.10);
}

.processing-wave::after {
	background: rgba(251,146,60,.07);
}

.completed-wave {
	background:
		radial-gradient(circle at 90% 15%,rgba(16,185,129,.14),transparent 35%),
		radial-gradient(circle at 10% 90%,rgba(72,201,154,.08),transparent 38%),
		linear-gradient(135deg,#fff 0%,#f6fffb 55%,#effcf7 100%);
}

.completed-wave::before {
	background: rgba(16,185,129,.09);
}

.completed-wave::after {
	background: rgba(72,201,154,.07);
}

.new-lead-wave {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
	background:
		radial-gradient(circle at 90% 15%,rgba(124,105,255,.12),transparent 35%),
		radial-gradient(circle at 10% 90%,rgba(155,140,255,.07),transparent 38%),
		linear-gradient(135deg,#fff 0%,#faf9ff 55%,#f7f5ff 100%);
}

.new-lead-wave::before {
	content: "";
	position: absolute;
	width: 180px;
	height: 180px;
	right: -70px;
	bottom: -90px;
	border-radius: 50%;
	background: rgba(124,105,255,.09);
	filter: blur(2px);
	animation: statOrb 6s ease-in-out infinite;
}

.new-lead-wave::after {
	content: "";
	position: absolute;
	width: 120px;
	height: 120px;
	left: -55px;
	top: -60px;
	border-radius: 50%;
	background: rgba(155,140,255,.07);
	filter: blur(1px);
	animation: statOrb2 7s ease-in-out infinite;
}

@keyframes statOrb {
	0%,100% {
		transform: translate(0,0) scale(1);
	}

	50% {
		transform: translate(-18px,-12px) scale(1.08);
	}
}

@keyframes statOrb2 {
	0%,100% {
		transform: translate(0,0) scale(1);
	}

	50% {
		transform: translate(15px,12px) scale(1.12);
	}
}
.new-lead-card {
	padding: 14px 15px;
	border: 1px solid #d7e5ff;
	background:
		radial-gradient(circle at 90% 10%,rgba(59,130,246,.12),transparent 32%),
		linear-gradient(145deg,#fff 0%,#f6f9ff 100%);
	box-shadow: 0 3px 14px rgba(37,99,235,.045);
	transition: all .25s ease;
}

.new-lead-bg-circle {
	position: absolute;
	top: -60px;
	right: -45px;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: rgba(59,130,246,.07);
}

.new-lead-top {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
}

.new-lead-icon {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #dceaff;
	border-radius: 10px;
	background: linear-gradient(145deg,#2775e9,#0d5bd9);
	color: #fff;
	font-size: 18px;
	box-shadow: 0 4px 10px rgba(37,99,235,.2);
	transition: all .25s ease;
}

.new-lead-card:hover .new-lead-icon {
	transform: scale(1.05) rotate(-3deg);
}

.new-lead-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 7px;
	border-radius: 6px;
	background: linear-gradient(135deg,#8ab7ff,#5c97ef);
	color: #fff;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .4px;
}

.new-lead-label {
	position: relative;
	z-index: 3;
	margin-bottom: 1px;
	color: #667085;
	font-size: 10px;
	font-weight: 600;
}

.new-lead-number {
	position: relative;
	z-index: 3;
	color: #101828;
	font-size: 22px;
	line-height: 1.1;
	font-weight: 750;
	letter-spacing: -.4px;
}

.new-lead-status {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 5px;
	color: #98a2b3;
	font-size: 9px;
}

.new-lead-status i {
	color: #12b76a;
	font-size: 11px;
}

.lead-main-card {
	border: 1px solid #e6eaf1;
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 5px 20px rgba(16,24,40,.04);
	overflow: hidden;
}

.lead-main-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 18px 18px 15px;
}

.lead-main-header h2 {
	margin: 0 0 3px;
	color: #101828;
	font-size: 18px;
	font-weight: 750;
	letter-spacing: -.25px;
}

.lead-main-header p {
	margin: 0;
	color: #667085;
	font-size: 11px;
}

.lead-view-switch {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid #e5e9f1;
	border-radius: 8px;
	background: #fff;
}

.lead-view-switch button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 82px;
	height: 34px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #52627e;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all .2s ease;
}

.lead-view-switch button i {
	font-size: 15px;
}

.lead-view-switch button.active {
	background: linear-gradient(135deg,#4f46ff,#4338ca);
	color: #fff;
	box-shadow: 0 4px 10px rgba(67,56,202,.16);
}

.lead-filter-area {
	display: grid;
	grid-template-columns: minmax(240px,2fr) repeat(4,minmax(130px,1fr));
	gap: 8px;
	margin: 0 15px 12px;
	padding: 10px;
	border: 1px solid #e4e9f2;
	border-radius: 10px;
	background: #fafbfe;
}

.lead-search-box,
.lead-select-box {
	position: relative;
	height: 40px;
}

.lead-search-box i {
	position: absolute;
	top: 50%;
	left: 12px;
	z-index: 2;
	color: #60708d;
	font-size: 16px;
	transform: translateY(-50%);
}

.lead-search-box input {
	width: 100%;
	height: 100%;
	padding: 0 12px 0 37px;
	border: 1px solid #dce3ee;
	border-radius: 7px;
	outline: none;
	background: #fff;
	color: #344054;
	font-size: 13px;
	transition: all .2s ease;
}

.lead-search-box input:focus {
	border-color: #8c8afc;
	box-shadow: 0 0 0 3px rgba(79,70,229,.06);
}

.lead-select-box select {
	width: 100%;
	height: 100%;
	padding: 0 32px 0 11px;
	border: 1px solid #dce3ee;
	border-radius: 7px;
	outline: none;
	background: #fff;
	color: #18243d;
	font-size: 13px;
	font-weight: 500;
	appearance: none;
	cursor: pointer;
}

.lead-select-box i {
	position: absolute;
	top: 50%;
	right: 10px;
	color: #40516f;
	font-size: 15px;
	pointer-events: none;
	transform: translateY(-50%);
}

.lead-table-container {
	display: block;
	margin: 0 15px;
	border: 1px solid #e3e8f1;
	border-radius: 9px;
	overflow-x: auto;
	overflow-y: hidden;
}

.lead-table {
	min-width: 1350px;
	margin: 0;
}

.lead-table thead th {
	height: 42px;
	padding: 0 10px;
	border-bottom: 1px solid #e4e8f0;
	background: #f7f9fc;
	color: #344054;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .3px;
	white-space: nowrap;
}

.lead-table tbody td {
	height: 58px;
	padding: 8px 10px;
	border-bottom: 1px solid #eef1f5;
	background: #fff;
	color: #344054;
	font-size: 13px;
}

.lead-table tbody tr {
	transition: all .15s ease;
}

.lead-table tbody tr:hover td {
	background: #fafbff;
}

.lead-sr {
	color: #667085;
	font-size: 13px;
	font-weight: 500;
}

.table-main-info strong,
.created-info strong {
	display: block;
	max-width: 145px;
	overflow: hidden;
	color: #26324b;
	font-size: 13px;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.table-main-info small,
.created-info small {
	display: block;
	margin-top: 2px;
	color: #98a2b3;
	font-size: 13px;
	white-space: nowrap;
}

.application-number,
.service-badge {
	display: inline-flex;
	max-width: 140px;
	padding: 5px 7px;
	border-radius: 5px;
	background: #f1f4ff;
	color: #4f46e5;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.service-badge {
	background: #f1f4ff;
	color: #4f46e5;
}

.source-badge {
	display: inline-flex;
	max-width: 110px;
	padding: 5px 7px;
	border: 1px solid #e7ebf1;
	border-radius: 5px;
	background: #fafbfc;
	color: #667085;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.contact-number {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #475467;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.contact-number:hover {
	color: #4338ca;
}

.lead-contact-box {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.whatsapp-number {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #12a150;
	font-size: 13px;
	text-decoration: none;
}

.whatsapp-number:hover {
	color: #087d3a;
}

.lead-priority {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 5px 7px;
	border-radius: 15px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.lead-priority.high {
	background: #fff0f0;
	color: #dc2626;
}

.lead-priority.medium {
	background: #fff7e8;
	color: #d97706;
}

.lead-priority.normal {
	background: #eef4ff;
	color: #4f46e5;
}
.lead-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: all .25s ease;
}

.lead-status i {
	font-size: 13px;
	line-height: 1;
}

.lead-status:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* New */
.lead-status.new {
	color: #2563eb;
	background: #eff6ff;
	border-color: #bfdbfe;
}

/* Contacted */
.lead-status.contacted {
	color: #0891b2;
	background: #ecfeff;
	border-color: #a5f3fc;
}

/* Qualified */
.lead-status.qualified {
	color: #7c3aed;
	background: #f5f3ff;
	border-color: #ddd6fe;
}

/* Follow Up */
.lead-status.followup {
	color: #d97706;
	background: #fffbeb;
	border-color: #fde68a;
}

/* Interested */
.lead-status.interested {
	color: #db2777;
	background: #fdf2f8;
	border-color: #fbcfe8;
}

/* Converted */
.lead-status.converted {
	color: #16a34a;
	background: #f0fdf4;
	border-color: #bbf7d0;
}

/* Lost */
.lead-status.lost {
	color: #dc2626;
	background: #fef2f2;
	border-color: #fecaca;
}

/* Not Interested */
.lead-status.not-interested {
	color: #64748b;
	background: #f8fafc;
	border-color: #cbd5e1;
}
.created-info {
	min-width: 80px;
}

.lead-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.table-action {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid #e3e7ee;
	border-radius: 6px;
	background: #fff;
	color: #667085;
	cursor: pointer;
	text-decoration: none;
	transition: all .2s ease;
}

.table-action:hover {
	border-color: #c7d2fe;
	background: #f5f5ff;
	color: #4338ca;
}

.lead-actions .dropdown-menu {
	min-width: 175px;
	padding: 5px;
	border: 1px solid #e8ebf1;
	border-radius: 8px;
	box-shadow: 0 10px 25px rgba(16,24,40,.1);
}

.lead-actions .dropdown-item {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 9px;
	border-radius: 5px;
	color: #475467;
	font-size: 13px;
}

.lead-actions .dropdown-item:hover {
	background: #f5f7fa;
}

.convert-item {
	color: #059669 !important;
}

.empty-cell {
	height: 260px !important;
	padding: 0 !important;
}

.empty-lead-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 260px;
	text-align: center;
}

.empty-lead-icon {
	width: 65px;
	height: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	border-radius: 18px;
	background: #fafaff;
	color: #7167e8;
	font-size: 30px;
}

.empty-lead-state h3 {
	margin: 0 0 5px;
	color: #101828;
	font-size: 16px;
	font-weight: 700;
}

.empty-lead-state p {
	margin: 0 0 14px;
	color: #667085;
	font-size: 13px;
}

.empty-add-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 36px;
	padding: 0 15px;
	border-radius: 7px;
	background: linear-gradient(135deg,#4f46ff,#4338ca);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.empty-add-btn:hover {
	color: #fff;
}

.lead-pipeline-container {
	display: none;
	margin: 0 15px;
	padding: 14px;
	border: 1px solid #e3e8f1;
	border-radius: 9px;
	background: #f8faff;
}

.pipeline-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.pipeline-header h3 {
	margin: 0 0 3px;
	color: #101828;
	font-size: 15px;
	font-weight: 700;
}

.pipeline-header p {
	margin: 0;
	color: #667085;
	font-size: 13px;
}

.pipeline-board {
	display: grid;
	grid-template-columns: repeat(8, minmax(300px, 1fr));
	gap: 9px;
	overflow-x: auto;
	padding-bottom: 5px;
	scrollbar-width: thin;
}

.pipeline-column {
	min-width: 300px;
	border: 1px solid #e4e8f0;
	border-radius: 9px;
	background: #fff;
	overflow: hidden;
	transition: .25s ease;
}

.pipeline-column:hover {
	box-shadow: 0 5px 15px rgba(16,24,40,.06);
}

.pipeline-column-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 10px;
	border-bottom: 1px solid #edf0f5;
	background: #fff;
	border-top: 3px solid transparent;
}

.pipeline-column-title {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #344054;
	font-size: 13px;
	font-weight: 700;
}

.pipeline-column-title i {
	font-size: 14px;
}

.pipeline-column-count {
	min-width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: #f2f4f7;
	color: #667085;
	font-size: 12px;
	font-weight: 700;
}

.pipeline-column-body {
	min-height: 220px;
	max-height: 500px;
	overflow-y: auto;
	padding: 7px;
	background: #fafbfc;
	scrollbar-width: thin;
}

/* NEW */

.pipeline-column.pending .pipeline-column-header {
	border-top-color: #2563eb;
}

.pipeline-column.pending .pipeline-column-title {
	color: #2563eb;
}

.pipeline-column.pending .pipeline-column-count {
	background: #eff6ff;
	color: #2563eb;
}

/* CONTACTED */

.pipeline-column.processing .pipeline-column-header {
	border-top-color: #0891b2;
}

.pipeline-column.processing .pipeline-column-title {
	color: #0891b2;
}

.pipeline-column.processing .pipeline-column-count {
	background: #ecfeff;
	color: #0891b2;
}

/* QUALIFIED */

.pipeline-column.qualified .pipeline-column-header {
	border-top-color: #7c3aed;
}

.pipeline-column.qualified .pipeline-column-title {
	color: #7c3aed;
}

.pipeline-column.qualified .pipeline-column-count {
	background: #f5f3ff;
	color: #7c3aed;
}

/* FOLLOW UP */

.pipeline-column.payment .pipeline-column-header {
	border-top-color: #d97706;
}

.pipeline-column.payment .pipeline-column-title {
	color: #d97706;
}

.pipeline-column.payment .pipeline-column-count {
	background: #fffbeb;
	color: #d97706;
}

/* INTERESTED */

.pipeline-column.interested .pipeline-column-header {
	border-top-color: #db2777;
}

.pipeline-column.interested .pipeline-column-title {
	color: #db2777;
}

.pipeline-column.interested .pipeline-column-count {
	background: #fdf2f8;
	color: #db2777;
}

/* CONVERTED */

.pipeline-column.paid .pipeline-column-header {
	border-top-color: #16a34a;
}

.pipeline-column.paid .pipeline-column-title {
	color: #16a34a;
}

.pipeline-column.paid .pipeline-column-count {
	background: #f0fdf4;
	color: #16a34a;
}

/* LOST */

.pipeline-column.issued .pipeline-column-header {
	border-top-color: #dc2626;
}

.pipeline-column.issued .pipeline-column-title {
	color: #dc2626;
}

.pipeline-column.issued .pipeline-column-count {
	background: #fef2f2;
	color: #dc2626;
}

/* NOT INTERESTED */

.pipeline-column.not-interested .pipeline-column-header {
	border-top-color: #64748b;
}

.pipeline-column.not-interested .pipeline-column-title {
	color: #64748b;
}

.pipeline-column.not-interested .pipeline-column-count {
	background: #f8fafc;
	color: #64748b;
}

/* PIPELINE CARD */

.pipeline-card {
	display: block;
	margin-bottom: 7px;
	padding: 10px;
	border: 1px solid #e5e9f0;
	border-radius: 8px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(16,24,40,.03);
	transition: all .2s ease;
}

.pipeline-card:hover {
	border-color: #cdd7fe;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(16,24,40,.07);
	color: inherit;
}

.pipeline-card:last-child {
	margin-bottom: 0;
}

.pipeline-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px;
	margin-bottom: 6px;
}

.pipeline-card-name {
	color: #172033;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.pipeline-card-code {
	display: inline-block;
	margin-bottom: 6px;
	padding: 3px 5px;
	border-radius: 4px;
	background: #f1f4ff;
	color: #4f46e5;
	font-size: 11px;
	font-weight: 650;
}

.pipeline-card-business {
	margin-bottom: 6px;
	color: #475467;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pipeline-card-business i {
	margin-right: 3px;
	color: #98a2b3;
}

.pipeline-card-phone {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #667085;
	font-size: 12px;
}

.pipeline-card-phone i {
	color: #4f46e5;
	font-size: 13px;
}

.pipeline-card-service {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 5px;
	color: #667085;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pipeline-card-service i {
	color: #7c3aed;
	font-size: 13px;
}

.pipeline-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
	margin-top: 8px;
	padding-top: 7px;
	border-top: 1px solid #f0f2f5;
}

.pipeline-priority {
	font-size: 11px;
	font-weight: 600;
	color: #667085;
}

.pipeline-date {
	color: #98a2b3;
	font-size: 11px;
	white-space: nowrap;
}

/* EMPTY */

.pipeline-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 190px;
	color: #98a2b3;
	font-size: 12px;
	text-align: center;
}

.pipeline-empty i {
	display: block;
	margin-bottom: 5px;
	font-size: 20px;
}

/* SCROLLBAR */

.pipeline-board::-webkit-scrollbar,
.pipeline-column-body::-webkit-scrollbar {
	height: 5px;
	width: 5px;
}

.pipeline-board::-webkit-scrollbar-track,
.pipeline-column-body::-webkit-scrollbar-track {
	background: #f1f3f6;
	border-radius: 10px;
}

.pipeline-board::-webkit-scrollbar-thumb,
.pipeline-column-body::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 10px;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
	.pipeline-board {
		grid-template-columns: repeat(8, 190px);
	}
}

@media (max-width: 768px) {
	.lead-pipeline-container {
		margin: 0 8px;
		padding: 10px;
	}

	.pipeline-board {
		grid-template-columns: repeat(8, 180px);
		gap: 7px;
	}

	.pipeline-column {
		min-width: 180px;
	}

	.pipeline-column-body {
		min-height: 180px;
	}

	.pipeline-card {
		padding: 9px;
	}
}
.lead-table-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
}

.lead-showing {
	color: #52627e;
	font-size: 13px;
}

.lead-showing strong {
	color: #344054;
}

.lead-pagination {
	display: flex;
	align-items: center;
	gap: 5px;
}

.lead-pagination button {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e1e6ee;
	border-radius: 6px;
	background: #fff;
	color: #52627e;
	font-size: 13px;
	cursor: pointer;
	transition: all .2s ease;
}

.lead-pagination button:hover:not(:disabled) {
	border-color: #c7d2fe;
	background: #f5f5ff;
	color: #4338ca;
}

.lead-pagination button.active {
	border-color: #4f46ff;
	background: linear-gradient(135deg,#4f46ff,#4338ca);
	color: #fff;
	box-shadow: 0 4px 9px rgba(67,56,202,.16);
}

.lead-pagination button:disabled {
	background: #fafbfc;
	color: #c5cbd5;
	cursor: not-allowed;
}

@media (max-width:1399px) {
	.lead-filter-area {
		grid-template-columns: 2fr 1fr 1fr;
	}

	.lead-search-box {
		grid-column: span 3;
	}
}

@media (max-width:991px) {
	.lead-page-header h1 {
		font-size: 22px;
	}

	.lead-filter-area {
		grid-template-columns: 1fr 1fr;
	}

	.lead-search-box {
		grid-column: span 2;
	}
}

@media (max-width:767px) {
	.lead-page {
		padding: 0 8px 25px;
	}

	.lead-page-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
		margin-bottom: 14px;
	}

	.lead-page-header h1 {
		font-size: 20px;
	}

	.lead-page-header p {
		font-size: 13px;
	}

	.lead-add-btn {
		width: 100%;
		height: 40px;
		min-width: 0;
	}

	.lead-stat-card,
	.new-lead-card {
		height: 88px;
		padding: 10px;
		border-radius: 10px;
	}

	.stat-icon,
	.new-lead-icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		font-size: 15px;
	}

	.new-lead-icon {
		border-width: 1px;
	}

	.stat-top,
	.new-lead-top {
		margin-bottom: 3px;
	}

	.stat-label,
	.new-lead-label {
		font-size: 13px;
	}

	.stat-number,
	.new-lead-number {
		font-size: 18px;
	}

	.stat-bottom,
	.new-lead-status {
		margin-top: 3px;
		font-size: 7px;
	}

	.stat-bottom i,
	.new-lead-status i {
		font-size: 13px;
	}

	.new-lead-badge {
		padding: 3px 5px;
		font-size: 13px;
	}

	.stat-wave,
	.new-lead-wave {
		height: 30px;
	}

	.lead-main-header {
		align-items: flex-start;
		flex-direction: column;
		padding: 14px 12px;
		gap: 10px;
	}

	.lead-main-header h2 {
		font-size: 16px;
	}

	.lead-main-header p {
		font-size: 13px;
	}

	.lead-view-switch {
		width: 100%;
	}

	.lead-view-switch button {
		flex: 1;
		min-width: 0;
		height: 32px;
		font-size: 13px;
	}

	.lead-filter-area {
		grid-template-columns: 1fr;
		margin: 0 10px 10px;
		padding: 8px;
		gap: 7px;
	}

	.lead-search-box {
		grid-column: auto;
	}

	.lead-table-container {
		margin: 0 10px;
	}

	.lead-pipeline-container {
		margin: 0 10px;
		padding: 9px;
	}

	.pipeline-board {
		grid-template-columns: repeat(5,200px);
	}

	.lead-table-footer {
		align-items: flex-start;
		flex-direction: column;
		padding: 13px 12px;
	}

	.lead-pagination {
		width: 100%;
		justify-content: flex-end;
	}
}

@media (max-width:575px) {
	.lead-stats-row {
		margin-right: -4px;
		margin-left: -4px;
	}

	.lead-stats-row > div {
		padding-right: 4px;
		padding-left: 4px;
	}

	.lead-stat-card,
	.new-lead-card {
		height: 82px;
		padding: 9px;
	}

	.stat-icon,
	.new-lead-icon {
		width: 29px;
		height: 29px;
		font-size: 14px;
	}

	.stat-number,
	.new-lead-number {
		font-size: 17px;
	}

	.stat-label,
	.new-lead-label {
		font-size: 13px;
	}

	.stat-bottom,
	.new-lead-status {
		font-size: 13px;
	}

	.stat-wave,
	.new-lead-wave {
		height: 25px;
	}

	.new-lead-bg-circle {
		width: 80px;
		height: 80px;
	}

	.new-lead-badge {
		padding: 2px 4px;
		font-size: 13px;
	}

	.lead-table-footer {
		padding: 11px 10px;
	}

	.lead-showing {
		font-size: 10px;
	}

	.lead-pagination button {
		width: 27px;
		height: 27px;
	}
}
/* ================================
   PREMIUM LEAD DETAIL PAGE
================================ */

.lead-detail-page {
	padding-bottom: 40px;
}

/* PAGE HEADER */
.lead-detail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}

.lead-detail-title {
	display: flex;
	align-items: center;
	gap: 14px;
}

.lead-back-btn {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: #fff;
	border: 1px solid #e8edf5;
	color: #475569;
	font-size: 19px;
	text-decoration: none;
	box-shadow: 0 3px 12px rgba(15,23,42,.04);
	transition: .25s ease;
}

.lead-back-btn:hover {
	color: #1d4ed8;
	border-color: #cbd5e1;
	transform: translateX(-2px);
	box-shadow: 0 7px 20px rgba(15,23,42,.08);
}

.lead-breadcrumb {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #94a3b8;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 4px;
}

.lead-breadcrumb i {
	font-size: 15px;
}

.lead-detail-title h1 {
	margin: 0;
	font-size: 25px;
	font-weight: 750;
	color: #172033;
	letter-spacing: -.4px;
}

.lead-detail-title p {
	margin: 3px 0 0;
	font-size: 13px;
	color: #7b8798;
}

.lead-detail-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.detail-edit-btn {
	height: 40px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 9px;
	background: linear-gradient(135deg,#1d4ed8,#2563eb);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 7px 18px rgba(37,99,235,.18);
	transition: .25s ease;
}

.detail-edit-btn:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(37,99,235,.25);
}

.detail-more-btn {
	width: 40px;
	height: 40px;
	border: 1px solid #e6ebf2;
	border-radius: 9px;
	background: #fff;
	color: #64748b;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .25s ease;
}

.detail-more-btn:hover {
	background: #f8fafc;
	color: #1e293b;
}

/* PROFILE CARD */
.lead-profile-card {
	position: relative;
	min-height: 138px;
	padding: 22px;
	border-radius: 16px;
	overflow: hidden;
	background:
		radial-gradient(circle at 100% 0%,rgba(37,99,235,.12),transparent 32%),
		radial-gradient(circle at 0% 100%,rgba(124,58,237,.08),transparent 30%),
		linear-gradient(135deg,#fff 0%,#f9fbff 100%);
	border: 1px solid #e7edf6;
	box-shadow: 0 8px 28px rgba(15,23,42,.055);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	transition: .3s ease;
}

.lead-profile-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 35px rgba(15,23,42,.08);
}

.lead-profile-left {
	display: flex;
	align-items: center;
	gap: 15px;
	min-width: 0;
}

.lead-profile-avatar {
	width: 58px;
	height: 58px;
	flex: 0 0 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 15px;
	background: linear-gradient(135deg,#1d4ed8,#6366f1);
	color: #fff;
	font-size: 22px;
	font-weight: 750;
	box-shadow: 0 9px 22px rgba(37,99,235,.22);
}

.lead-profile-left h2 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: #172033;
}

.lead-profile-left p {
	margin: 3px 0 7px;
	font-size: 12px;
	color: #7b8798;
}

.lead-code {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 4px 8px;
	border-radius: 6px;
	background: #f1f5f9;
	color: #64748b;
	font-size: 11px;
	font-weight: 650;
}

.lead-profile-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 9px;
}

.lead-detail-status {
	display: inline-flex;
	align-items: center;
	padding: 6px 11px;
	border-radius: 30px;
	font-size: 11px;
	font-weight: 700;
}

.lead-detail-status.new,
.status-current strong.new {
	background: #eff6ff;
	color: #2563eb;
}

.lead-detail-status.contacted,
.status-current strong.contacted {
	background: #f0fdf4;
	color: #16a34a;
}

.lead-detail-status.qualified,
.status-current strong.qualified {
	background: #f5f3ff;
	color: #7c3aed;
}

.lead-detail-status.followup,
.status-current strong.followup {
	background: #fff7ed;
	color: #ea580c;
}

.lead-detail-status.interested,
.status-current strong.interested {
	background: #ecfeff;
	color: #0891b2;
}

.lead-detail-status.proposal,
.status-current strong.proposal {
	background: #fdf4ff;
	color: #c026d3;
}

.lead-detail-status.converted,
.status-current strong.converted {
	background: #ecfdf5;
	color: #059669;
}

.lead-detail-status.lost,
.status-current strong.lost {
	background: #fef2f2;
	color: #dc2626;
}

.lead-detail-status.not-interested,
.status-current strong.not-interested {
	background: #f1f5f9;
	color: #64748b;
}

.lead-created {
	font-size: 10px;
	color: #94a3b8;
}

.lead-created strong {
	margin-left: 3px;
	color: #64748b;
	font-weight: 650;
}

/* VALUE CARD */
.lead-value-card {
	min-height: 138px;
	padding: 22px;
	border-radius: 16px;
	background: linear-gradient(135deg,#fff,#fbfaff);
	border: 1px solid #e9e4ff;
	box-shadow: 0 8px 28px rgba(76,29,149,.055);
	display: flex;
	align-items: center;
	gap: 13px;
	position: relative;
	overflow: hidden;
}

.lead-value-card::after {
	content: "";
	position: absolute;
	width: 130px;
	height: 130px;
	right: -60px;
	top: -65px;
	border-radius: 50%;
	background: rgba(124,58,237,.06);
}

.lead-value-icon {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 13px;
	background: linear-gradient(135deg,#7c3aed,#9333ea);
	color: #fff;
	font-size: 21px;
	box-shadow: 0 8px 20px rgba(124,58,237,.2);
}

.lead-value-card span {
	display: block;
	color: #8a94a6;
	font-size: 11px;
	margin-bottom: 4px;
}

.lead-value-card strong {
	display: block;
	color: #1e293b;
	font-size: 20px;
	font-weight: 750;
}

.lead-priority {
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 750;
	text-transform: uppercase;
	z-index: 2;
}

.lead-priority.high {
	background: #fef2f2;
	color: #dc2626;
}

.lead-priority.medium {
	background: #fff7ed;
	color: #ea580c;
}

.lead-priority.normal {
	background: #f1f5f9;
	color: #64748b;
}

/* DETAIL CARD */
.detail-card {
	background: #fff;
	border: 1px solid #e8edf4;
	border-radius: 14px;
	margin-bottom: 15px;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(15,23,42,.035);
	transition: .25s ease;
}

.detail-card:hover {
	box-shadow: 0 9px 26px rgba(15,23,42,.055);
}

.detail-card-header {
	min-height: 67px;
	padding: 14px 17px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #eef2f6;
}

.detail-card-header h3 {
	margin: 0 0 3px;
	color: #1e293b;
	font-size: 14px;
	font-weight: 700;
}

.detail-card-header p {
	margin: 0;
	color: #94a3b8;
	font-size: 13px;
}

.detail-header-icon {
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: #eff6ff;
	color: #2563eb;
	font-size: 17px;
}

.detail-header-icon.contact {
	background: #ecfdf5;
	color: #059669;
}

.detail-header-icon.followup {
	background: #fff7ed;
	color: #ea580c;
}

.detail-header-icon.notes {
	background: #fefce8;
	color: #ca8a04;
}

.detail-header-icon.activity {
	background: #f5f3ff;
	color: #7c3aed;
}

.detail-header-icon.assignment {
	background: #fdf4ff;
	color: #c026d3;
}

.detail-header-icon.status {
	background: #ecfeff;
	color: #0891b2;
}

.detail-header-icon.record {
	background: #f1f5f9;
	color: #475569;
}

/* DETAIL GRID */
.detail-grid {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	padding: 4px 17px;
}

.detail-field {
	padding: 13px 5px;
	border-bottom: 1px solid #f1f5f9;
}

.detail-field:nth-last-child(-n+2) {
	border-bottom: 0;
}

.detail-field span {
	display: block;
	font-size: 13px;
	color: #94a3b8;
	margin-bottom: 4px;
}

.detail-field strong {
	display: block;
	color: #334155;
	font-size: 13px;
	font-weight: 650;
}

.blue-text {
	color: #2563eb !important;
}

/* CONTACT */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	padding: 15px 17px;
	gap: 10px;
}

.contact-detail-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px;
	border-radius: 10px;
	background: #fafbfd;
	border: 1px solid #eef2f6;
	text-decoration: none;
	transition: .25s ease;
}

.contact-detail-item:hover {
	transform: translateY(-2px);
	background: #fff;
	border-color: #dbe3ed;
	box-shadow: 0 7px 18px rgba(15,23,42,.06);
}

.contact-detail-icon {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-size: 15px;
}

.contact-detail-icon.phone {
	background: #eff6ff;
	color: #2563eb;
}

.contact-detail-icon.whatsapp {
	background: #ecfdf5;
	color: #16a34a;
}

.contact-detail-icon.email {
	background: #fef2f2;
	color: #ef4444;
}

.contact-detail-item span {
	display: block;
	font-size: 13px;
	color: #94a3b8;
	margin-bottom: 2px;
}

.contact-detail-item strong {
	display: block;
	font-size: 13px;
	color: #334155;
	font-weight: 650;
	word-break: break-word;
}

/* FOLLOW UP */
.followup-box {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 17px;
	background: linear-gradient(135deg,#fffaf5,#fff);
}

.followup-date-icon {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: #fff7ed;
	color: #ea580c;
	font-size: 19px;
}

.followup-content {
	flex: 1;
}

.followup-content span {
	display: block;
	font-size: 13px;
	color: #94a3b8;
	margin-bottom: 3px;
}

.followup-content strong {
	display: block;
	font-size: 13px;
	color: #334155;
}

.followup-btn {
	height: 34px;
	padding: 0 11px;
	border: 0;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #fed7aa;
	color: #ea580c;
	font-size: 13px;
	font-weight: 650;
	transition: .25s ease;
}

.followup-btn:hover {
	background: #fff7ed;
}

/* NOTES */
.lead-notes {
	padding: 15px 17px;
	font-size: 13px;
	line-height: 1.7;
	color: #475569;
	background: #fcfdff;
}

.no-data {
	color: #a0a9b6;
	font-style: italic;
}

/* ASSIGNMENT */
.assigned-person {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 14px 17px;
}

.assigned-avatar {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	font-size: 14px;
	font-weight: 750;
}

.assigned-avatar.consultant {
	background: #f5f3ff;
	color: #7c3aed;
}

.assigned-avatar.employee {
	background: #eff6ff;
	color: #2563eb;
}

.assigned-person span {
	display: block;
	font-size: 13px;
	color: #94a3b8;
	margin-bottom: 2px;
}

.assigned-person strong {
	display: block;
	font-size: 13px;
	color: #334155;
	font-weight: 650;
}

.assigned-person small {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: #94a3b8;
}

.assignment-divider {
	height: 1px;
	margin: 0 17px;
	background: #f1f5f9;
}

/* STATUS */
.status-current {
	padding: 15px 17px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #f1f5f9;
}

.status-current-label {
	font-size: 13px;
	color: #94a3b8;
}

.status-current strong {
	padding: 5px 9px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
}

.status-progress {
	padding: 17px;
}

.status-stage {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 31px;
}

.stage-dot {
	width: 25px;
	height: 25px;
	flex: 0 0 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f1f5f9;
	color: #94a3b8;
	font-size: 13px;
	font-weight: 700;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #e2e8f0;
	transition: .3s ease;
}

.status-stage.active .stage-dot {
	background: linear-gradient(135deg,#1d4ed8,#6366f1);
	color: #fff;
	box-shadow: 0 0 0 1px #bfdbfe,0 4px 10px rgba(37,99,235,.18);
}

.status-stage span {
	font-size: 13px;
	color: #94a3b8;
}

.status-stage.active span {
	color: #334155;
	font-weight: 650;
}

.stage-line {
	width: 2px;
	height: 16px;
	margin-left: 12px;
	background: #e8edf3;
}

.stage-line.active {
	background: linear-gradient(#6366f1,#1d4ed8);
}

/* CONVERTED */
.converted-card {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 15px;
	margin-bottom: 15px;
	border-radius: 14px;
	border: 1px solid #bbf7d0;
	background: linear-gradient(135deg,#f0fdf4,#fff);
	box-shadow: 0 5px 18px rgba(16,185,129,.06);
}

.converted-icon {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: #dcfce7;
	color: #16a34a;
	font-size: 18px;
}

.converted-card span {
	display: block;
	font-size: 13px;
	color: #65a30d;
	margin-bottom: 2px;
}

.converted-card strong {
	display: block;
	font-size: 13px;
	color: #166534;
}

.converted-card small {
	display: block;
	margin-top: 2px;
	color: #86efac;
	font-size: 13px;
}

/* RECORD */
.record-list {
	padding: 5px 17px;
}

.record-list > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 11px 0;
	border-bottom: 1px solid #f1f5f9;
}

.record-list > div:last-child {
	border-bottom: 0;
}

.record-list span {
	font-size: 13px;
	color: #94a3b8;
}

.record-list strong {
	font-size: 13px;
	color: #475569;
	font-weight: 650;
	text-align: right;
}

/* ACTIVITY */
.activity-timeline {
	padding: 18px 17px;
}

.activity-item {
	display: flex;
	position: relative;
	gap: 11px;
	padding-bottom: 19px;
}

.activity-item:last-child {
	padding-bottom: 0;
}

.activity-line {
	position: absolute;
	top: 30px;
	bottom: 0;
	left: 14px;
	width: 1px;
	background: #e8edf3;
}

.activity-item:last-child .activity-line {
	display: none;
}

.activity-icon {
	width: 29px;
	height: 29px;
	flex: 0 0 29px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: #eff6ff;
	color: #2563eb;
	font-size: 13px;
	position: relative;
	z-index: 2;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px #dbe5f0;
}

.activity-content {
	flex: 1;
	min-width: 0;
	padding: 1px 0;
}

.activity-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.activity-top h4 {
	margin: 0 0 2px;
	color: #334155;
	font-size: 13px;
	font-weight: 700;
}

.activity-top span {
	font-size: 13px;
	color: #94a3b8;
	text-transform: capitalize;
}

.activity-top time {
	flex: 0 0 auto;
	color: #a0a9b6;
	font-size: 13px;
}

.activity-content p {
	margin: 7px 0 0;
	color: #64748b;
	font-size: 13px;
	line-height: 1.6;
}

.status-change {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 7px;
	padding: 4px 7px;
	border-radius: 6px;
	background: #f8fafc;
	border: 1px solid #edf1f5;
	font-size: 13px;
}

.status-change span {
	color: #94a3b8;
}

.status-change i {
	color: #cbd5e1;
	font-size: 11px;
}

.status-change strong {
	color: #2563eb;
	font-weight: 700;
}

.activity-empty {
	padding: 30px 15px;
	text-align: center;
}

.activity-empty > div {
	width: 48px;
	height: 48px;
	margin: 0 auto 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 13px;
	background: #f8fafc;
	color: #94a3b8;
	font-size: 21px;
}

.activity-empty h4 {
	margin: 0 0 3px;
	color: #475569;
	font-size: 13px;
}

.activity-empty p {
	margin: 0;
	color: #a0a9b6;
	font-size: 13px;
}

/* DROPDOWN */
.lead-detail-actions .dropdown-menu {
	min-width: 175px;
	padding: 6px;
	border-radius: 10px;
}

.lead-detail-actions .dropdown-item {
	padding: 8px 9px;
	border-radius: 7px;
	font-size: 13px;
	color: #475569;
}

.lead-detail-actions .dropdown-item:hover {
	background: #f8fafc;
	color: #1d4ed8;
}

.lead-detail-actions .dropdown-item i {
	width: 20px;
	font-size: 14px;
	margin-right: 4px;
}

/* RESPONSIVE */
@media (max-width: 991px) {
	.lead-detail-header {
		align-items: flex-start;
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}

	.detail-grid {
		grid-template-columns: 1fr;
	}

	.detail-field:nth-last-child(-n+2) {
		border-bottom: 1px solid #f1f5f9;
	}

	.detail-field:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 575px) {
	.lead-detail-page {
		padding-left: 8px;
		padding-right: 8px;
	}

	.lead-detail-header {
		flex-direction: column;
		gap: 12px;
	}

	.lead-detail-actions {
		width: 100%;
	}

	.detail-edit-btn {
		flex: 1;
		justify-content: center;
	}

	.lead-profile-card {
		padding: 16px;
		align-items: flex-start;
	}

	.lead-profile-right {
		align-items: flex-end;
	}

	.lead-profile-avatar {
		width: 48px;
		height: 48px;
		flex-basis: 48px;
		border-radius: 12px;
		font-size: 18px;
	}

	.lead-profile-left h2 {
		font-size: 16px;
	}

	.lead-profile-left p {
		max-width: 130px;
	}

	.lead-value-card {
		min-height: 110px;
		padding: 17px;
	}

	.activity-top {
		flex-direction: column;
		gap: 4px;
	}

	.followup-box {
		flex-wrap: wrap;
	}

	.followup-btn {
		margin-left: 54px;
	}
}
.modal-content {
	 background: #fff;
    border: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    transform-origin: 50% 25%;
    flex: 0 0 auto;
    border-radius: 16px;
    user-select: text;
    will-change: top, left, margin, transform, opacity;
}
@media (max-width: 1366px) {
	.shortcut-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.lead-offcanvas {
	width: 540px !important;
	max-width: 100%;
	border: 0 !important;
	background: #f8fafc;
	box-shadow: -18px 0 50px rgba(15,23,42,.16);
}

.lead-offcanvas .offcanvas-header {
	position: relative;
	padding: 20px 22px;
	background: #fff;
	border-bottom: 1px solid #edf0f5 !important;
}

.lead-offcanvas .offcanvas-title {
	font-size: 18px;
	letter-spacing: -.3px;
	color: #111827;
}

.lead-offcanvas .offcanvas-header small {
	font-size: 12px;
	color: #94a3b8 !important;
}

.lead-offcanvas .btn-close {
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0;
	border-radius: 10px;
	background-color: #f1f5f9;
	opacity: 1;
	background-size: 11px;
	transition: all .2s ease;
}

.lead-offcanvas .btn-close:hover {
	background-color: #e2e8f0;
	transform: rotate(90deg);
}

.lead-offcanvas .offcanvas-body {
	padding: 0;
	background: #f8fafc;
}

.lead-offcanvas .offcanvas-body > .p-3:first-child {
	padding: 18px 22px !important;
	background: linear-gradient(135deg,#fff 0%,#f8fbff 100%) !important;
	border-bottom: 1px solid #edf0f5 !important;
}

.lead-offcanvas .offcanvas-body > .p-3:first-child .fw-bold {
	font-size: 16px;
	color: #111827;
}

.lead-offcanvas .offcanvas-body > .p-3:first-child .text-muted {
	font-size: 12px;
	margin-top: 3px;
}

.lead-offcanvas .offcanvas-body > .p-3:first-child .badge {
	padding: 7px 12px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 30px;
}

.lead-offcanvas .offcanvas-body > .p-3:nth-child(2) {
	padding: 20px 22px !important;
	background: #fff;
}

.lead-offcanvas .form-label {
	display: block;
	margin-bottom: 7px;
	font-size: 12px;
	font-weight: 700 !important;
	color: #475569;
	letter-spacing: .1px;
}

.lead-offcanvas .form-select {
	height: 45px;
	padding: 0 40px 0 13px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background-color: #fff;
	color: #1e293b;
	font-size: 13px;
	font-weight: 500;
	box-shadow: 0 1px 2px rgba(15,23,42,.03);
	transition: all .2s ease;
}

.lead-offcanvas .form-select:hover {
	border-color: #cbd5e1;
}

.lead-offcanvas .form-select:focus {
	border-color: #1d4ed8;
	box-shadow: 0 0 0 3px rgba(29,78,216,.08);
}

.lead-offcanvas form .btn-primary {
	height: 46px;
	border: 0;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	background: linear-gradient(135deg,#1d4ed8,#2563eb);
	box-shadow: 0 7px 18px rgba(37,99,235,.20);
	transition: all .2s ease;
}

.lead-offcanvas form .btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(37,99,235,.28);
}

.lead-offcanvas .border-top {
	border-color: #e9edf3 !important;
}

.lead-offcanvas .bg-light-subtle {
	background: #f8fafc !important;
}

.lead-offcanvas .bg-light-subtle h6 {
	font-size: 14px;
	color: #1e293b;
	letter-spacing: -.1px;
}

.lead-offcanvas .bg-light-subtle .small {
	font-size: 11px;
	color: #94a3b8 !important;
}

.lead-activity-item {
	position: relative;
	display: flex;
	gap: 13px;
	padding: 0 0 22px;
}

.lead-activity-item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 34px;
	bottom: 0;
	width: 1px;
	background: linear-gradient(to bottom,#dbe3ef,#edf2f7);
}

.lead-activity-icon {
	position: relative;
	z-index: 2;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #dbeafe;
	border-radius: 50%;
	background: linear-gradient(135deg,#eff6ff,#dbeafe);
	color: #1d4ed8;
	font-size: 15px;
	box-shadow: 0 3px 8px rgba(29,78,216,.08);
}

.lead-activity-content {
	flex: 1;
	min-width: 0;
	padding-top: 1px;
}

.lead-activity-content .fw-semibold {
	font-size: 13px;
	font-weight: 700 !important;
	color: #1e293b;
	line-height: 1.4;
}

.lead-activity-content .text-muted.small {
	font-size: 10px;
	color: #94a3b8 !important;
	margin-top: 2px;
}

.lead-activity-content .text-nowrap {
	font-size: 10px !important;
	color: #94a3b8 !important;
}

.lead-activity-description {
	padding: 11px 13px;
	border: 1px solid #edf0f4;
	border-radius: 9px;
	background: #f8fafc;
	color: #64748b;
	font-size: 12px;
	line-height: 1.55;
}

.lead-activity-content .badge {
	padding: 5px 9px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 600;
}

.lead-activity-content .bg-light {
	background: #f1f5f9 !important;
}

.lead-activity-content .bg-primary-subtle {
	background: #eff6ff !important;
}

.lead-activity-content .small.mt-2 {
	padding: 8px 10px;
	border-radius: 7px;
	background: #f8fafc;
	font-size: 10px !important;
}

.lead-activity-content .small.mt-2 strong {
	color: #475569;
	font-weight: 700;
}

.lead-offcanvas .ri-arrow-right-line {
	font-size: 13px;
	color: #94a3b8;
}

.lead-offcanvas .text-center.py-5 {
	padding: 45px 20px !important;
}

.lead-offcanvas .text-center.py-5 i {
	color: #cbd5e1;
}

.lead-offcanvas .text-center.py-5 .fw-semibold {
	color: #64748b;
	font-size: 13px;
}

.lead-offcanvas .text-center.py-5 .small {
	color: #94a3b8;
	font-size: 11px;
}

.lead-offcanvas .offcanvas-body::-webkit-scrollbar {
	width: 5px;
}

.lead-offcanvas .offcanvas-body::-webkit-scrollbar-track {
	background: transparent;
}

.lead-offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 20px;
}

.lead-offcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

@media (max-width: 576px) {
	.lead-offcanvas {
		width: 100% !important;
	}

	.lead-offcanvas .offcanvas-header {
		padding: 16px;
	}

	.lead-offcanvas .offcanvas-body > .p-3:first-child,
	.lead-offcanvas .offcanvas-body > .p-3:nth-child(2) {
		padding: 16px !important;
	}

	.lead-activity-item {
		gap: 10px;
	}

	.lead-activity-icon {
		flex-basis: 30px;
		width: 30px;
		height: 30px;
	}

	.lead-activity-item:not(:last-child)::before {
		left: 14px;
	}
}
.cs2-selected {
    border-radius: 11px;
}
.input-group .cs2-selected {
    min-height: 42px;
    border: 1px solid #dcdfe4;
    padding: 6px 10px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    cursor: pointer;
    background: #fff;
    width: 285px;
    border-radius: 11px 0px 0px 11px;
}
.rounded-start-3 {
	border-radius: 11px 0px 0px 11px !important;
}
.custom-select{position:relative;width:100%;font-size:12px}
.select-box{min-height:max-content;border:1px solid #ced4da;border-radius:.375rem;background:#fff;display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:4px 35px 4px 8px;cursor:text;position:relative}
.select-box:focus-within{border-color:#86b7fe;box-shadow:0 0 0 .25rem rgba(13,110,253,.15)}
.selected-items{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.selected-tag{display:flex;align-items:center;gap:5px;background:#334e96;color:#fff;border-radius:5px;padding:5px 8px;font-size:12px;line-height:1}
.remove-tag{cursor:pointer;font-size:15px;line-height:10px}
.select-search{border:0;outline:0;min-width:100px;flex:1;height:28px;font-size:13px}
.select-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:18px;color:#6c757d;pointer-events:none}
.select-dropdown{display:none;position:absolute;z-index:1050;top:calc(100% + 3px);left:0;width:100%;background:#fff;border:1px solid #dee2e6;border-radius:.375rem;box-shadow:0 4px 15px rgba(0,0,0,.08);max-height:200px;overflow-y:auto}
.custom-select.open .select-dropdown{display:block}
.custom-select.open .select-arrow{transform:translateY(-50%) rotate(180deg)}
.select-option{padding:9px 12px;cursor:pointer;justify-content: space-between;display: flex;}
.select-option:hover{background:#f1f3f5}
.select-option.selected{background:#eef1f6;color:#334e96;font-weight:500}
.select-option.selected:after{content:"✓";float:right}
.select-box span {
	color: #fff;
	font-size: 12px;
}
.modal .modal-content{
	border:0;
	border-radius:16px;
	overflow:hidden;
}
.modal .modal-dialog{
	opacity:0;
	position:relative;
}
.modal.fade.show .modal-dialog{
	opacity:1;
}
.modal.fade .modal-dialog::before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:32px;
	height:32px;
	margin:-16px 0 0 -16px;
	border:3px solid rgba(var(--bs-primary-rgb),.15);
	border-top-color:var(--bs-primary);
	border-radius:50%;
	z-index:20;
	opacity:1;
	animation:modalLoader .6s linear infinite;
	pointer-events:none;
}
.modal.fade.show .modal-dialog::before{
	opacity:0;
	visibility:hidden;
	transition:opacity .2s ease,visibility .2s ease;
}
@keyframes modalLoader{
	to{transform:rotate(360deg)}
}
.add_modal.fade .modal-dialog{
	transform:translateY(60px) scale(.94);
	transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s ease;
}
.add_modal.fade.show .modal-dialog{
	transform:translateY(0) scale(1);
}
.edit_modal.fade .modal-dialog{
	transform:translateX(80px) scale(.96);
	transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s ease;
}
.edit_modal.fade.show .modal-dialog{
	transform:translateX(0) scale(1);
}
.delete_modal.fade .modal-dialog{
	transform:scale(.72);
	transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .25s ease;
}
.delete_modal.fade.show .modal-dialog{
	transform:scale(1);
}
.modal.show .modal-content{
	animation:modalContent .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes modalContent{
	0%{opacity:0;transform:scale(.97);filter:blur(3px)}
	100%{opacity:1;transform:scale(1);filter:blur(0)}
}
.modal.show .modal-body > *{
	animation:modalItem .4s cubic-bezier(.16,1,.3,1) both;
}
.modal.show .modal-body > *:nth-child(1){animation-delay:.08s}
.modal.show .modal-body > *:nth-child(2){animation-delay:.13s}
.modal.show .modal-body > *:nth-child(3){animation-delay:.18s}
.modal.show .modal-body > *:nth-child(4){animation-delay:.23s}
.modal.show .modal-body > *:nth-child(5){animation-delay:.28s}
.modal.show .modal-body > *:nth-child(6){animation-delay:.33s}
@keyframes modalItem{
	0%{opacity:0;transform:translateY(12px)}
	100%{opacity:1;transform:translateY(0)}
}
.add_modal.show .modal-body .row > [class*="col-"],
.edit_modal.show .modal-body .row > [class*="col-"]{
	animation:fieldReveal .4s cubic-bezier(.16,1,.3,1) both;
}
.add_modal.show .modal-body .row > [class*="col-"]:nth-child(1),
.edit_modal.show .modal-body .row > [class*="col-"]:nth-child(1){animation-delay:.12s}
.add_modal.show .modal-body .row > [class*="col-"]:nth-child(2),
.edit_modal.show .modal-body .row > [class*="col-"]:nth-child(2){animation-delay:.17s}
.add_modal.show .modal-body .row > [class*="col-"]:nth-child(3),
.edit_modal.show .modal-body .row > [class*="col-"]:nth-child(3){animation-delay:.22s}
.add_modal.show .modal-body .row > [class*="col-"]:nth-child(4),
.edit_modal.show .modal-body .row > [class*="col-"]:nth-child(4){animation-delay:.27s}
@keyframes fieldReveal{
	0%{opacity:0;transform:translateY(10px) scale(.985)}
	100%{opacity:1;transform:translateY(0) scale(1)}
}
.delete_modal.show .ri-delete-bin-line,
.delete_modal.show .ri-delete-bin-6-line{
	animation:deleteIcon .55s cubic-bezier(.34,1.56,.64,1) .15s both;
}
@keyframes deleteIcon{
	0%{opacity:0;transform:scale(.4) rotate(-15deg)}
	60%{opacity:1;transform:scale(1.15) rotate(5deg)}
	100%{transform:scale(1) rotate(0)}
}
.modal .btn{
	transition:transform .2s ease,box-shadow .2s ease;
}
.modal .btn:hover{
	transform:translateY(-2px);
	box-shadow:0 6px 16px rgba(0,0,0,.1);
}
.modal-backdrop.fade{
	opacity:0;
	transition:opacity .3s ease;
}
.modal-backdrop.show{
	opacity:.5;
}
@media(max-width:576px){
	.add_modal.fade .modal-dialog,
	.edit_modal.fade .modal-dialog{
		transform:translateY(40px) scale(.97);
	}
	.delete_modal.fade .modal-dialog{
		transform:scale(.82);
	}
}
@media(prefers-reduced-motion:reduce){
	.modal,.modal *,.modal-dialog,.modal-content{
		animation:none!important;
		transition:none!important;
	}
}
.commission-page .commission-card {
	border: 1px solid #e9ecef;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
}
.commission-page .commission-header {
	padding: 20px 24px;
	border-bottom: 1px solid #edf0f2;
	background: #fff;
}
.commission-page .commission-title {
	font-size: 18px;
	font-weight: 600;
	color: #212529;
	margin: 0 0 4px;
}
.commission-page .commission-subtitle {
	font-size: 13px;
	color: #8a9199;
	margin: 0;
}
.commission-page .commission-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 8px;
	background: #eef4ff;
	color: #1d4ed8;
	font-size: 12px;
	font-weight: 600;
}
.commission-page .commission-stat {
	height: 100%;
	padding: 18px;
	border: 1px solid #edf0f2;
	border-radius: 12px;
	background: #fff;
}
.commission-page .commission-stat-icon {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	font-size: 18px;
}
.commission-page .commission-stat-label {
	font-size: 12px;
	color: #8a9199;
	margin-bottom: 3px;
}
.commission-page .commission-stat-value {
	font-size: 20px;
	font-weight: 600;
	color: #212529;
	margin: 0;
}
.commission-page .commission-table-wrap {
	border: 1px solid #edf0f2;
	border-radius: 12px;
	overflow: hidden;
}
.commission-page .commission-table {
	margin: 0;
}
.commission-page .commission-table thead th {
	background: #f8f9fa;
	color: #6c757d;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .3px;
	padding: 13px 16px;
	border-bottom: 1px solid #edf0f2;
	white-space: nowrap;
}
.commission-page .commission-table tbody td {
	padding: 15px 16px;
	border-color: #f0f2f4;
	font-size: 13px;
}
.commission-page .commission-table tbody tr:last-child td {
	border-bottom: 0;
}
.commission-page .service-icon {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	flex-shrink: 0;
}
.commission-page .service-name {
	font-size: 13px;
	font-weight: 600;
	color: #212529;
	margin-bottom: 2px;
}
.commission-page .service-code {
	font-size: 11px;
	color: #98a0a8;
}
.commission-page .type-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 9px;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 600;
}
.commission-page .commission-value {
	font-size: 14px;
	font-weight: 600;
	color: #212529;
}
.commission-page .status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 9px;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 600;
}
.commission-page .status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.commission-page .commission-action {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e4e8ec;
	border-radius: 8px;
	background: #fff;
	color: #1d4ed8;
	transition: all .2s ease;
}
.commission-page .commission-action:hover {
	background: #1d4ed8;
	border-color: #1d4ed8;
	color: #fff;
}
.commission-page .commission-search {
	width: 260px;
}
.commission-page .commission-search .input-group-text,
.commission-page .commission-search .form-control {
	border-color: #e4e8ec;
	background: #fff;
	font-size: 13px;
}
.commission-page .commission-search .form-control:focus {
	box-shadow: none;
	border-color: #1d4ed8;
}
.commission-offcanvas {
	width: 450px !important;
	border: 0;
	box-shadow: -10px 0 40px rgba(0,0,0,.08);
}

.commission-offcanvas .offcanvas-header {
	padding: 22px 24px;
	border-bottom: 1px solid #eef0f3;
}

.commission-offcanvas .offcanvas-body {
	padding: 24px;
	background: #fff;
}

.commission-service-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	border: 1px solid #edf0f4;
	border-radius: 16px;
	background: #f8fafc;
}

.commission-service-icon {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 13px;
	background: #eef4ff;
	color: #1d4ed8;
	font-size: 20px;
}

.commission-section-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	color: #8b95a5;
	margin-bottom: 3px;
}

.commission-service-name {
	font-size: 15px;
	font-weight: 600;
	color: #172033;
	line-height: 1.4;
}

.commission-service-id {
	font-size: 11px;
	color: #98a2b3;
	margin-top: 3px;
}

.commission-current-card {
	padding: 18px;
	border: 1px solid #edf0f4;
	border-radius: 16px;
	background: #fff;
}

.commission-info-box {
	padding: 13px 14px;
	border-radius: 12px;
	background: #f8fafc;
	border: 1px solid #f0f2f5;
}

.setting-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #344054;
	margin-bottom: 9px;
}

.commission-type .btn {
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
	background: #fff;
	color: #667085;
	font-size: 13px;
	font-weight: 600;
}

.commission-type .btn:hover {
	border-color: #cbd5e1;
	background: #f8fafc;
}

.commission-type .btn-check:checked + .btn {
	border-color: #1d4ed8;
	background: #eff6ff;
	color: #1d4ed8;
}

.commission-input {
	height: 50px;
}

.commission-input .input-group-text {
	min-width: 48px;
	justify-content: center;
	border-color: #e4e7ec;
	background: #f8fafc;
	color: #475467;
	font-weight: 600;
}

.commission-input .form-control {
	border-color: #e4e7ec;
	font-size: 14px;
	box-shadow: none;
}

.commission-input .form-control:focus {
	border-color: #1d4ed8;
	box-shadow: 0 0 0 3px rgba(29,78,216,.08);
}

.commission-preview {
	padding: 17px 18px;
	border-radius: 15px;
	background: #f8fafc;
	border: 1px solid #edf0f4;
}

.commission-preview-label {
	font-size: 12px;
	font-weight: 600;
	color: #475467;
}

.commission-preview-value {
	font-size: 22px;
	font-weight: 700;
	color: #1d4ed8;
}

.commission-offcanvas {
	width: 450px !important;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.commission-offcanvas .commission-form {
	min-height: 0;
	flex: 1 1 auto;
}

.commission-offcanvas .offcanvas-body {
	min-height: 0;
	overflow-y: auto !important;
	overflow-x: hidden;
}

.commission-offcanvas .offcanvas-footer {
	flex-shrink: 0;
}

@media (max-width: 575px) {
	.commission-offcanvas {
		width: 100% !important;
	}
}
.commission-status-type .btn {
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
	background: #fff;
	color: #667085;
	font-size: 13px;
	font-weight: 600;
	transition: all .2s ease;
}

.commission-status-type .btn:hover {
	border-color: #cbd5e1;
	background: #f8fafc;
}

.commission-status-type .btn-check:checked + .btn {
	border-color: #16a34a;
	background: #f0fdf4;
	color: #16a34a;
}

.commission-status-type .col-6:last-child .btn-check:checked + .btn {
	border-color: #dc2626;
	background: #fef2f2;
	color: #dc2626;
}

.commission-status-type .btn i {
	font-size: 15px;
}
.commission-progress {
	width: 100%;
	height: 7px;
	background: #eef2f6;
	border-radius: 50px;
	overflow: hidden;
	position: relative;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}

.commission-progress-bar {
	height: 100%;
	border-radius: 50px;
	position: relative;
	overflow: hidden;
	animation: commissionProgress .9s cubic-bezier(.4,0,.2,1);
}

.commission-progress-bar.percentage {
	background: linear-gradient(90deg, #2563eb, #60a5fa);
	box-shadow: 0 2px 8px rgba(37,99,235,.25);
}

.commission-progress-bar.fixed {
	background: linear-gradient(90deg, #16a34a, #4ade80);
	box-shadow: 0 2px 8px rgba(22,163,74,.25);
}

.commission-progress-bar.empty {
	background: #d1d5db;
}

.commission-progress-bar span {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,.55),
		transparent
	);
	animation: commissionShine 2s infinite;
}

@keyframes commissionProgress {
	from {
		width: 0 !important;
		opacity: .5;
	}
	to {
		opacity: 1;
	}
}

@keyframes commissionShine {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

.commission-progress:hover .commission-progress-bar {
	filter: brightness(1.06);
}

.commission-progress-bar {
	transition: filter .25s ease, transform .25s ease;
}
.plan-view-offcanvas {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #fff;
}

.plan-view-offcanvas .offcanvas-body {
	min-height: 0;
	overflow-y: auto;
	padding: 22px;
}

.plan-hero-card {
	border: 1px solid #e7ebf0;
	border-radius: 18px;
	background: linear-gradient(135deg,#f8fbff 0%,#ffffff 100%);
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(16,24,40,.06);
}

.plan-hero-content {
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.plan-icon {
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg,#1d4ed8,#60a5fa);
	color: #fff;
	font-size: 24px;
	box-shadow: 0 8px 18px rgba(29,78,216,.22);
}

.plan-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: #667085;
	margin-bottom: 3px;
}

.plan-title {
	font-size: 18px;
	margin: 0 0 4px;
	color: #101828;
}

.plan-service {
	font-size: 13px;
	color: #667085;
}

.plan-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.plan-status.active {
	background: #ecfdf3;
	color: #027a48;
}

.plan-status.inactive {
	background: #fef3f2;
	color: #b42318;
}

.status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.plan-hero-footer {
	border-top: 1px solid #e7ebf0;
	padding: 12px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255,255,255,.7);
}

.plan-hero-footer span,
.plan-info-item span,
.plan-stat-card span,
.billing-item span,
.billing-cycle-box span,
.record-info-item span {
	display: block;
	font-size: 11px;
	color: #98a2b3;
	margin-bottom: 4px;
}

.plan-hero-footer strong {
	font-size: 13px;
	color: #344054;
}

.plan-section {
	padding: 2px 0;
}

.plan-section-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.plan-section-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eff6ff;
	color: #1d4ed8;
	font-size: 17px;
	flex: 0 0 34px;
}

.plan-section-heading h6 {
	margin: 0 0 2px;
	font-size: 14px;
	font-weight: 700;
	color: #101828;
}

.plan-section-heading small {
	color: #98a2b3;
	font-size: 11px;
}

.plan-info-grid {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 10px;
}

.plan-info-item {
	padding: 13px;
	border: 1px solid #eaecf0;
	border-radius: 12px;
	background: #fff;
}

.plan-info-item strong {
	display: block;
	font-size: 13px;
	color: #344054;
	font-weight: 600;
	word-break: break-word;
}

.plan-code-box {
	padding: 12px 14px;
	border: 1px dashed #cbd5e1;
	border-radius: 12px;
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.plan-code-box span {
	display: block;
	font-size: 11px;
	color: #98a2b3;
	margin-bottom: 5px;
}

.plan-code-box code {
	display: block;
	color: #475467;
	font-size: 12px;
	word-break: break-all;
}

.plan-code-box > i {
	font-size: 18px;
	color: #667085;
}

.plan-price-card {
	padding: 18px;
	border-radius: 15px;
	background: linear-gradient(135deg,#eff6ff,#f8fbff);
	border: 1px solid #dbeafe;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.plan-price-main span {
	display: block;
	font-size: 11px;
	color: #667085;
	margin-bottom: 4px;
}

.plan-price-main strong {
	font-size: 25px;
	color: #1d4ed8;
	font-weight: 750;
}

.tax-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 9px;
	border-radius: 8px;
	font-size: 10px;
	font-weight: 700;
	background: #f2f4f7;
	color: #667085;
	white-space: nowrap;
}

.tax-badge.inclusive {
	background: #ecfdf3;
	color: #027a48;
}

.tax-badge.exclusive {
	background: #fffaeb;
	color: #b54708;
}

.plan-stat-card {
	padding: 14px;
	border: 1px solid #eaecf0;
	border-radius: 12px;
	background: #fff;
}

.plan-stat-card strong {
	font-size: 15px;
	color: #344054;
}

.commission-detail-card {
	padding: 13px;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 11px;
	background: #fff;
}

.commission-detail-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #f0fdf4;
	color: #16a34a;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
}

.commission-detail-card span:not(.badge) {
	display: block;
	font-size: 11px;
	color: #98a2b3;
	margin-bottom: 2px;
}

.commission-detail-card strong {
	font-size: 14px;
	color: #344054;
}

.billing-card {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 10px;
}

.billing-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px;
	border: 1px solid #eaecf0;
	border-radius: 12px;
}

.billing-icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: #f5f3ff;
	color: #7c3aed;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
}

.billing-item strong {
	font-size: 13px;
	color: #344054;
}

.billing-cycle-box {
	padding: 13px 15px;
	border-radius: 12px;
	background: #f8fafc;
	border: 1px solid #eaecf0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.billing-cycle-box strong {
	font-size: 13px;
	color: #344054;
}

.plan-features-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.plan-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px;
	border: 1px solid #eaecf0;
	border-radius: 11px;
	background: #fff;
	transition: all .2s ease;
}

.plan-feature-item:hover {
	border-color: #bfdbfe;
	background: #f8fbff;
	transform: translateX(2px);
}

.feature-check {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #ecfdf3;
	color: #16a34a;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 25px;
	font-size: 13px;
}

.feature-name {
	font-size: 13px;
	font-weight: 600;
	color: #344054;
}

.plan-feature-item small {
	display: block;
	font-size: 11px;
	color: #98a2b3;
	margin-top: 2px;
	line-height: 1.5;
}

.plan-empty-state {
	padding: 25px 15px;
	border: 1px dashed #d0d5dd;
	border-radius: 12px;
	text-align: center;
	color: #98a2b3;
	font-size: 12px;
}

.plan-empty-state i {
	display: block;
	font-size: 25px;
	margin-bottom: 7px;
}

.plan-description {
	padding: 15px;
	border-radius: 12px;
	background: #f8fafc;
	border: 1px solid #eaecf0;
	color: #475467;
	font-size: 13px;
	line-height: 1.7;
}

.plan-notes {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px;
	border-radius: 12px;
	background: #f8fafc;
	border: 1px solid #eaecf0;
	color: #475467;
	font-size: 12px;
	line-height: 1.6;
}

.plan-notes > i {
	color: #667085;
	font-size: 17px;
	margin-top: 2px;
}

.record-info-grid {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 10px;
}

.record-info-item {
	padding: 13px;
	border: 1px solid #eaecf0;
	border-radius: 12px;
}

.record-info-item strong {
	display: block;
	font-size: 13px;
	color: #344054;
}

.record-info-item small {
	font-size: 10px;
	color: #98a2b3;
}

.plan-divider {
	height: 1px;
	background: #eaecf0;
	margin: 24px 0;
}

@media (max-width:767px) {
	.plan-view-offcanvas {
		width: 100% !important;
	}

	.plan-view-offcanvas .offcanvas-body {
		padding: 16px;
	}

	.plan-info-grid,
	.billing-card,
	.record-info-grid {
		grid-template-columns: 1fr;
	}

	.plan-price-card {
		align-items: flex-start;
		flex-direction: column;
	}

	.billing-cycle-box {
		align-items: flex-start;
		flex-direction: column;
	}
}
.partner-offcanvas{
    width:50%;
    border-left:1px solid #eef1f6;
    background:#f8fafc;
    box-shadow:-24px 0 60px rgba(15,23,42,.08);
}
.partner-offcanvas .offcanvas-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:18px 24px;
    background:#fff;
    border-bottom:1px solid #edf0f5;
}
.partner-offcanvas .offcanvas-title{
    margin:0;
    font-size:18px;
    font-weight:800;
    color:#111827;
    white-space:nowrap;
}
.partner-offcanvas .partner-code{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0;
    padding:6px 11px;
    border:1px solid #e0e7ff;
    border-radius:20px;
    background:#f5f7ff;
    color:#5865d8;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}
.partner-offcanvas .btn-close{
    padding:10px;
    border-radius:10px;
    background-color:#f3f4f6;
    opacity:1;
}
.partner-offcanvas .btn-close:hover{
    background-color:#e9ebef;
}
.partner-offcanvas .offcanvas-body{
    padding:24px 26px 35px;
    background:
        radial-gradient(circle at top right,rgba(99,102,241,.06),transparent 24%),
        #f8fafc;
}
.partner-profile-head{
    position:relative;
    overflow:hidden;
    margin-bottom:20px;
    padding:22px;
    border:1px solid #e9edf5;
    border-radius:20px;
    background:linear-gradient(135deg,#ffffff 0%,#f7f8ff 100%);
    box-shadow:0 10px 28px rgba(15,23,42,.05);
}
.partner-profile-head::after{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    right:-45px;
    top:-60px;
    border-radius:50%;
    background:rgba(99,102,241,.06);
}
.partner-profile-avatar{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 58px;
    border:1px solid #e2e7ff;
    border-radius:18px;
    background:linear-gradient(135deg,#eef2ff,#f7f5ff);
    color:#6366f1;
    font-size:27px;
    box-shadow:0 8px 18px rgba(99,102,241,.09);
}
.partner-profile-head h4{
    margin:0 0 5px;
    color:#111827;
    font-size:20px;
    font-weight:800;
    letter-spacing:-.3px;
}
.partner-profile-head p{
    margin:0;
    color:#7b8495;
    font-size:13px;
}
.partner-section{
    margin-bottom:18px;
    padding:19px;
    border:1px solid #e8ecf2;
    border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:0 8px 24px rgba(15,23,42,.035);
}
.partner-section-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
    color:#1f2937;
    font-size:14px;
    font-weight:800;
}
.partner-section-title .section-icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e0e7ff;
    border-radius:11px;
    background:#f5f7ff;
    color:#6366f1;
    font-size:17px;
}
.partner-info-box{
    position:relative;
    height:100%;
    min-height:72px;
    padding:14px 15px;
    border:1px solid #edf0f4;
    border-radius:14px;
    background:#fcfdff;
    transition:all .22s ease;
}
.partner-info-box:hover{
    border-color:#dfe4ff;
    background:#ffffff;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(15,23,42,.055);
}
.partner-info-box small{
    display:block;
    margin-bottom:6px;
    color:#9aa2b1;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.55px;
}
.partner-info-box strong{
    display:block;
    color:#2c3340;
    font-size:13px;
    font-weight:700;
    line-height:1.5;
    word-break:break-word;
}
.partner-info-box .badge{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:30px;
    font-size:11px;
    font-weight:700;
    border:1px solid transparent;
}
.partner-info-box .bg-success-subtle{
    background:#ecfdf3!important;
    border-color:#d1fae5!important;
}
.partner-info-box .text-success{
    color:#0f9f6e!important;
}
.partner-info-box .bg-warning-subtle{
    background:#fff9eb!important;
    border-color:#fdecc8!important;
}
.partner-info-box .text-warning{
    color:#d99000!important;
}
.partner-info-box .bg-danger-subtle{
    background:#fff1f2!important;
    border-color:#ffe0e3!important;
}
.partner-info-box .text-danger{
    color:#dc4655!important;
}
.partner-status{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:6px 10px;
    border:1px solid transparent;
    border-radius:30px;
    font-size:11px;
    font-weight:700;
}
.partner-status.approved{
    color:#0f9f6e;
    background:#ecfdf3;
    border-color:#d1fae5;
}
.partner-status.pending{
    color:#d99000;
    background:#fff9eb;
    border-color:#fdecc8;
}
.partner-status.blocked{
    color:#dc4655;
    background:#fff1f2;
    border-color:#ffe0e3;
}
.partner-status.active{
    color:#5865d8;
    background:#f3f5ff;
    border-color:#e0e5ff;
}
.partner-offcanvas::-webkit-scrollbar,
.partner-offcanvas .offcanvas-body::-webkit-scrollbar{
    width:6px;
}
.partner-offcanvas .offcanvas-body::-webkit-scrollbar-track{
    background:transparent;
}
.partner-offcanvas .offcanvas-body::-webkit-scrollbar-thumb{
    background:#d8dde6;
    border-radius:10px;
}
.partner-offcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover{
    background:#c3c9d4;
}
@media(max-width:1199.98px){
    .partner-offcanvas{
		width:100% !important;
	}
}
@media(max-width:991.98px){
    .partner-offcanvas{
		width:100% !important;
	}
}
@media(max-width:767.98px){
    .partner-offcanvas{
		width:100% !important;
	}
    .partner-offcanvas .offcanvas-header{padding:18px 18px;}
    .partner-offcanvas .offcanvas-body{padding:18px 14px 28px;}
    .partner-profile-head{padding:18px;}
    .partner-section{padding:15px;}
    .partner-profile-avatar{
        width:50px;
        height:50px;
        flex-basis:50px;
        font-size:23px;
    }
}
@media(max-width:575.98px){
    .partner-offcanvas .offcanvas-title{
        font-size:16px;
    }
    .partner-offcanvas .partner-code{
        font-size:10px;
        padding:5px 8px;
    }
}
.client-page-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px;padding:0}
.client-page-kicker{display:inline-flex;align-items:center;gap:5px;margin-bottom:4px;color:#6366f1;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.client-page-header h1{margin:0 0 3px;color:#111827;font-size:23px;font-weight:800;letter-spacing:-.5px}
.client-page-header p{margin:0;color:#8a94a6;font-size:12px}
.client-add-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:10px;background:#111827;color:#fff!important;font-size:12px;font-weight:700;text-decoration:none;box-shadow:0 6px 16px rgba(17,24,39,.12);transition:all .2s ease}
.client-add-btn:hover{transform:translateY(-1px);background:#1f2937;color:#fff}
.client-add-btn i{font-size:16px}

.client-stats-row{margin-bottom:16px}
.client-stat-card{position:relative;overflow:hidden;height:100%;min-height:135px;padding:14px 16px;border:1px solid #e9edf4;border-radius:15px;background:#fff;box-shadow:0 6px 20px rgba(15,23,42,.04);transition:all .2s ease}
.client-stat-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,23,42,.07)}
.client-stat-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.client-stat-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:11px;font-size:18px}
.client-stat-tag{padding:4px 7px;border-radius:20px;font-size:8px;font-weight:800;letter-spacing:.45px}
.client-stat-label{position:relative;z-index:2;margin-bottom:1px;color:#8a94a6;font-size:11px;font-weight:700}
.client-stat-number{position:relative;z-index:2;color:#111827;font-size:25px;font-weight:800;line-height:1.1;letter-spacing:-.8px}
.client-stat-bottom{position:relative;z-index:2;display:flex;align-items:center;gap:5px;margin-top:8px;color:#9aa3b2;font-size:10px;font-weight:600}
.client-stat-bottom i{font-size:13px}
.client-stat-glow{position:absolute;width:90px;height:90px;right:-35px;bottom:-45px;border-radius:50%;pointer-events:none}

.client-total-card .client-stat-icon{background:#eef2ff;color:#6366f1}
.client-total-card .client-stat-tag{background:#f1f3ff;color:#6366f1}
.client-total-card .client-stat-glow{background:rgba(99,102,241,.07)}

.client-assigned-card .client-stat-icon{background:#ecfdf3;color:#0f9f6e}
.client-assigned-card .client-stat-tag{background:#ecfdf3;color:#0f9f6e}
.client-assigned-card .client-stat-glow{background:rgba(16,185,129,.07)}

.client-unassigned-card .client-stat-icon{background:#fff8e8;color:#d99000}
.client-unassigned-card .client-stat-tag{background:#fff8e8;color:#d99000}
.client-unassigned-card .client-stat-glow{background:rgba(245,158,11,.08)}

.client-month-card .client-stat-icon{background:#f5f3ff;color:#7c3aed}
.client-month-card .client-stat-tag{background:#f5f3ff;color:#7c3aed}
.client-month-card .client-stat-glow{background:rgba(124,58,237,.07)}

.client-main-card{overflow:hidden;border:1px solid #e8ecf2;border-radius:16px;background:#fff;box-shadow:0 8px 28px rgba(15,23,42,.04)}
.client-main-header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 18px;border-bottom:1px solid #edf0f4}
.client-main-header h2{margin:0 0 2px;color:#111827;font-size:17px;font-weight:800;letter-spacing:-.2px}
.client-main-header p{margin:0;color:#98a1b0;font-size:11px}
.client-record-count{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #e5e9f0;border-radius:9px;background:#fafbfc;color:#596273;font-size:10px;font-weight:700}
.client-record-count i{font-size:14px}
.client-record-count strong{color:#111827}

.client-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;border-bottom:1px solid #edf0f4;background:#fcfdff}
.client-search-box{position:relative;width:100%;max-width:430px}
.client-search-box>i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#98a1b0;font-size:17px;pointer-events:none}
.client-search-box input{width:100%;height:39px;padding:0 70px 0 39px;border:1px solid #e4e8ef;border-radius:10px;background:#fff;color:#252b36;font-size:12px;outline:none;transition:all .2s ease}
.client-search-box input::placeholder{color:#a1a9b5}
.client-search-box input:focus{border-color:#c7cffd;box-shadow:0 0 0 3px rgba(99,102,241,.06)}
.client-search-shortcut{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:3px 6px;border:1px solid #e5e7eb;border-radius:5px;background:#f8fafc;color:#9ca3af;font-size:8px;font-weight:700}

.client-table-wrap{width:100%;overflow:hidden}
.client-table{width:100%;margin:0;white-space:nowrap}
.client-table thead th{padding:11px 13px;border-bottom:1px solid #e9edf3;background:#f8fafc;color:#8993a3;font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;vertical-align:middle}
.client-table tbody td{border-color:#f0f2f5;color:#3a4250;vertical-align:middle}
.client-table tbody tr{transition:background .18s ease}
.client-table tbody tr:hover{background:#fafbff}
.client-table tbody tr:last-child td{border-bottom:0}

.consultant-info{display:flex;align-items:center}
.consultant-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#344054;font-size:11px;font-weight:700}
.hover-underline{cursor:default;text-decoration:none}
.hover-underline:hover{text-decoration:underline}

.client-table .btn-sm{padding:5px 8px;border-radius:7px;font-size:12px}
.client-table .btn-sm i{font-size:13px}
.client-table .d-flex.gap-1{gap:4px!important}

.client-table-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 16px;border-top:1px solid #edf0f4;background:#fff}
.client-showing{color:#8b95a5;font-size:12px}
.client-showing strong{color:#374151;font-weight:700}
.client-pagination{display:flex;align-items:center;gap:4px}
.client-pagination button{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 7px;border:1px solid #e5e9ef;border-radius:7px;background:#fff;color:#667085;font-size:12px;font-weight:700;line-height:1;transition:all .18s ease}
.client-pagination button:hover:not(:disabled):not(.active){border-color:#d7dcff;background:#f5f6ff;color:#6366f1}
.client-pagination button.active{border-color:#6366f1;background:#6366f1;color:#fff;box-shadow:0 4px 10px rgba(99,102,241,.16)}
.client-pagination button:disabled{opacity:.4;cursor:not-allowed;background:#fafafa}
.client-pagination button i{font-size:15px}
.client-pagination .pagination-dots{display:flex;align-items:center;justify-content:center;min-width:22px;height:30px;color:#98a2b3;font-size:12px;font-weight:700}

.client-table .spinner-border{width:15px;height:15px;border-width:2px}
#clientTableBody td[colspan="9"]{color:#8b95a5;font-size:12px}

.client-offcanvas{--bs-offcanvas-width:500px;box-shadow:-20px 0 50px rgba(15,23,42,.1)}
.client-offcanvas .offcanvas-header{padding:14px 17px}
.client-offcanvas .offcanvas-body{overflow-y:auto}
.client-offcanvas .offcanvas-footer{padding:11px 14px!important}
.client-offcanvas .card{border-radius:12px!important}
.client-offcanvas .card-header{padding:11px 13px}
.client-offcanvas .card-body{padding:13px}
.client-offcanvas .avatar-lg{width:55px;height:55px}
.client-offcanvas .avatar-md{width:42px;height:42px}
.client-offcanvas .avatar-xs{width:30px;height:30px;display:flex;align-items:center;justify-content:center}

.modal-content{border-radius:14px}
.modal-header{padding:13px 16px}
.modal-body{padding:16px}
.modal-footer{padding:11px 16px}
.modal .form-label{margin-bottom:5px;color:#475467;font-size:11px;font-weight:700}
.modal .form-control,.modal .form-select{min-height:39px;border-color:#e4e7ec;border-radius:9px;font-size:12px}
.modal textarea.form-control{min-height:auto}
.modal .form-control:focus,.modal .form-select:focus{border-color:#c7cffd;box-shadow:0 0 0 3px rgba(99,102,241,.06)}

.select2-container--default .select2-selection--single{height:39px!important;border:1px solid #e4e7ec!important;border-radius:9px!important}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:37px!important;padding-left:12px!important;color:#344054!important;font-size:12px!important}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:37px!important}
.select2-dropdown{border:1px solid #e4e7ec!important;border-radius:9px!important;overflow:hidden;box-shadow:0 8px 22px rgba(15,23,42,.08)}
.select2-results__option{padding:8px 11px!important;font-size:12px!important}

@media(max-width:1199.98px){
	.client-stat-card{min-height:132px}
}

@media(max-width:991.98px){
	.client-page-header{gap:12px}
	.client-main-header{padding:14px 15px}
	.client-toolbar{padding:10px 15px}
	.client-table-footer{padding:10px 14px}
	.client-offcanvas{--bs-offcanvas-width:70vw}
}

@media(max-width:767.98px){
	.client-page-header{align-items:flex-start;margin-bottom:12px}
	.client-page-kicker{font-size:9px}
	.client-page-header h1{font-size:20px}
	.client-page-header p{display:none}
	.client-add-btn{padding:8px 10px}
	.client-add-btn span{display:none}
	.client-add-btn i{font-size:18px}
	.client-stats-row{margin-bottom:13px}
	.client-stat-card{min-height:122px;padding:12px;border-radius:13px}
	.client-stat-top{margin-bottom:7px}
	.client-stat-icon{width:32px;height:32px;border-radius:9px;font-size:16px}
	.client-stat-tag{display:none}
	.client-stat-label{font-size:10px}
	.client-stat-number{font-size:22px}
	.client-stat-bottom{margin-top:5px;font-size:9px}
	.client-main-card{border-radius:13px}
	.client-main-header{padding:12px 13px}
	.client-main-header h2{font-size:15px}
	.client-main-header p{font-size:10px}
	.client-record-count{padding:5px 8px;font-size:9px}
	.client-toolbar{padding:9px 12px}
	.client-search-box{max-width:100%}
	.client-search-box input{height:38px;font-size:11px}
	.client-table thead th{padding:10px 11px;font-size:8px}
	.client-table tbody td{padding:10px 11px;font-size:10px}
	.client-table-footer{padding:9px 11px}
	.client-pagination{gap:3px}
	.client-pagination button{min-width:28px;height:28px;padding:0 6px;font-size:9px}
	.client-pagination .pagination-dots{height:28px}
	.client-offcanvas{--bs-offcanvas-width:100vw}
}

@media(max-width:575.98px){
	.client-stat-card{min-height:116px;padding:11px}
	.client-stat-icon{width:30px;height:30px;font-size:15px}
	.client-stat-number{font-size:20px}
	.client-stat-bottom span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
	.client-main-header{align-items:flex-start}
	.client-record-count span{font-size:9px}
	.client-search-shortcut{display:none}
	.client-search-box input{padding-right:12px}
	.client-table-footer{align-items:flex-start;flex-direction:column}
	.client-pagination{width:100%;justify-content:flex-end}
}
.block-account-modal .modal-dialog{max-width:520px}
.block-account-modal .modal-content{overflow:hidden;border-radius:18px;background:#fff}
.block-modal-header{padding:17px 20px;border-bottom:1px solid #edf0f4;background:#fff}
.block-modal-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 42px;border-radius:13px;background:#f1f3ff;color:#6366f1;font-size:20px}
.block-modal-header h5{color:#111827;font-size:17px;font-weight:800}
.block-modal-header p{color:#98a1b0;font-size:11px}
.block-account-modal .modal-body{padding:18px 20px 20px}
.block-user-info{display:flex;align-items:center;gap:11px;margin-bottom:17px;padding:12px 13px;border:1px solid #edf0f4;border-radius:13px;background:#fafbfc}
.block-user-avatar{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex:0 0 38px;border-radius:11px;background:#eef2ff;color:#6366f1;font-size:18px}
.block-user-info>div:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}
.block-user-info strong{color:#222936;font-size:12px;font-weight:800}
.block-user-info span{color:#98a1b0;font-size:10px}
.block-current-status{display:inline-flex!important;align-items:center;gap:4px;flex:none!important;padding:5px 9px;border-radius:20px;font-size:9px!important;font-weight:800}
.block-current-status.active{background:#ecfdf3;color:#0f9f6e!important}
.block-current-status.blocked{background:#fff1f2;color:#dc4655!important}
.block-account-form .form-label{margin-bottom:6px;color:#475467;font-size:11px;font-weight:700}
.block-account-form .form-select,.block-account-form .form-control{border:1px solid #e4e8ef;border-radius:10px;background:#fff;color:#344054;font-size:12px;box-shadow:none}
.block-account-form .form-select{height:42px;padding-left:38px}
.block-account-form .form-control{padding:10px 12px;resize:none}
.block-account-form .form-select:focus,.block-account-form .form-control:focus{border-color:#c7cffd;box-shadow:0 0 0 3px rgba(99,102,241,.06)}
.block-field-icon{position:absolute;left:13px;top:50%;z-index:2;transform:translateY(-50%);color:#98a1b0;font-size:16px;pointer-events:none}
.block-warning{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid #fde8b7;border-radius:10px;background:#fffbeb;color:#b7791f;font-size:10px;line-height:1.5}
.block-warning i{margin-top:1px;font-size:15px}
.block-submit-btn{border:0;background:#111827;color:#fff}
.block-submit-btn:hover{background:#1f2937;color:#fff}
.block-account-modal .btn{min-height:40px;border-radius:10px;font-size:11px;font-weight:700}
.block-reason-wrap{transition:.2s}
@media(max-width:575.98px){
	.block-account-modal .modal-dialog{margin:12px}
	.block-modal-header{padding:14px 15px}
	.block-account-modal .modal-body{padding:15px}
}
.lead-activity-modal .modal-dialog{max-width:520px}
.lead-activity-modal .modal-content{overflow:hidden}
.activity-modal-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:#eef2ff;color:#6366f1;font-size:18px}
.lead-activity-modal .modal-title{color:#111827;font-size:16px}
.lead-activity-modal .form-label{color:#475467;font-size:11px}
.lead-activity-modal .form-control,.lead-activity-modal .form-select{min-height:42px;border:1px solid #e4e8ef;border-radius:10px;color:#344054;font-size:12px;box-shadow:none}
.lead-activity-modal .form-select{padding-left:39px}
.lead-activity-modal .activity-with-icon{padding-left:39px}
.lead-activity-modal textarea.form-control{min-height:105px;padding:10px 12px;resize:none}
.lead-activity-modal .form-control:focus,.lead-activity-modal .form-select:focus{border-color:#c7cffd;box-shadow:0 0 0 3px rgba(99,102,241,.06)}
.activity-field-icon{position:absolute;z-index:2;left:13px;top:50%;transform:translateY(-50%);color:#98a2b3;font-size:16px;pointer-events:none}
.last-activity-box{padding:11px 13px;border:1px solid #e9edf3;border-radius:11px;background:#f8fafc;color:#344054;font-size:11px}
.last-activity-label{margin-bottom:2px;color:#98a2b3;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.lead-activity-modal .btn{min-height:39px;border-radius:9px;font-size:11px;font-weight:700}
.consultancy-page {
	--cs-primary: #635bff;
	--cs-primary-dark: #4f46e5;
	--cs-secondary: #8b5cf6;
	--cs-success: #10b981;
	--cs-dark: #111827;
	--cs-muted: #6b7280;
	--cs-border: #e5e7eb;
	--cs-bg: #f7f8fc;

	position: relative;
	min-height: calc(100vh - 100px);
	padding: 45px 0 60px;
	overflow: hidden;
	background:
		radial-gradient(circle at 5% 10%, rgba(99, 91, 255, .13), transparent 28%),
		radial-gradient(circle at 95% 85%, rgba(139, 92, 246, .12), transparent 30%),
		linear-gradient(180deg, #fbfbff 0%, #f5f7fb 100%);
}

.consultancy-page::before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(99, 91, 255, .07);
	filter: blur(10px);
	top: -200px;
	right: -120px;
	pointer-events: none;
}

.consultancy-page .consultancy-wrapper {
	position: relative;
	z-index: 2;
}

/* ==============================
   LEFT PREMIUM PANEL
============================== */

.consultancy-page .premium-info-card {
	position: relative;
	height: 100%;
	min-height: 665px;
	overflow: hidden;
	border-radius: 28px;
	padding: 42px;
	color: #fff;
	background:
		radial-gradient(circle at 85% 15%, rgba(255,255,255,.16), transparent 25%),
		linear-gradient(145deg, #16182c 0%, #312e81 52%, #635bff 100%);
	box-shadow: 0 28px 70px rgba(33, 35, 75, .22);
}

.consultancy-page .premium-info-card::before,
.consultancy-page .premium-info-card::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.12);
}

.consultancy-page .premium-info-card::before {
	width: 290px;
	height: 290px;
	right: -120px;
	top: -80px;
}

.consultancy-page .premium-info-card::after {
	width: 210px;
	height: 210px;
	left: -120px;
	bottom: -80px;
}

.consultancy-page .brand-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 14px;
	margin-bottom: 28px;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 100px;
	background: rgba(255,255,255,.10);
	backdrop-filter: blur(10px);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
}

.consultancy-page .brand-pill i {
	font-size: 17px;
	color: #c4b5fd;
}

.consultancy-page .premium-info-card h1 {
	color: #fff;
	font-size: clamp(31px, 3vw, 43px);
	line-height: 1.13;
	font-weight: 800;
	letter-spacing: -1.3px;
	margin-bottom: 18px;
}

.consultancy-page .premium-info-card h1 span {
	color: #c4b5fd;
}

.consultancy-page .hero-description {
	max-width: 480px;
	color: rgba(255,255,255,.76);
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 34px;
}

.consultancy-page .feature-list {
	position: relative;
	z-index: 2;
}

.consultancy-page .feature-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px;
	margin-bottom: 10px;
	border: 1px solid transparent;
	border-radius: 16px;
	transition: .25s ease;
}

.consultancy-page .feature-item:hover {
	transform: translateX(4px);
	background: rgba(255,255,255,.07);
	border-color: rgba(255,255,255,.08);
}

.consultancy-page .feature-icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.10);
	font-size: 21px;
}

.consultancy-page .feature-content h6 {
	color: #fff;
	font-weight: 700;
	margin: 1px 0 4px;
}

.consultancy-page .feature-content p {
	color: rgba(255,255,255,.62);
	font-size: 13px;
	line-height: 1.55;
	margin: 0;
}

.consultancy-page .premium-stats {
	position: relative;
	z-index: 2;
	margin-top: 30px;
	padding: 18px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 18px;
	background: rgba(255,255,255,.08);
	backdrop-filter: blur(10px);
}

.consultancy-page .stat-box {
	text-align: center;
}

.consultancy-page .stat-box strong {
	display: block;
	color: #fff;
	font-size: 18px;
	font-weight: 800;
}

.consultancy-page .stat-box span {
	color: rgba(255,255,255,.57);
	font-size: 11px;
}

/* ==============================
   FORM CARD
============================== */

.consultancy-page .registration-card {
	overflow: hidden;
	border: 1px solid rgba(229, 231, 235, .85);
	border-radius: 28px;
	background: rgba(255,255,255,.94);
	box-shadow: 0 25px 65px rgba(17, 24, 39, .10);
	backdrop-filter: blur(14px);
}

.consultancy-page .registration-body {
	padding: 38px 40px 30px;
}

.consultancy-page .form-header {
	margin-bottom: 30px;
}

.consultancy-page .form-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	margin-bottom: 14px;
	border-radius: 100px;
	background: rgba(99, 91, 255, .09);
	color: var(--cs-primary);
	font-size: 12px;
	font-weight: 700;
}

.consultancy-page .form-header h3 {
	margin-bottom: 8px;
	color: var(--cs-dark);
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -.6px;
}

.consultancy-page .form-header p {
	margin: 0;
	color: var(--cs-muted);
	font-size: 14px;
}

.consultancy-page .premium-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	color: #374151;
	font-size: 13px;
	font-weight: 700;
}

.consultancy-page .required-dot {
	color: #ef4444;
}

.consultancy-page .premium-input {
	position: relative;
}

.consultancy-page .premium-input .input-group-text {
	width: 48px;
	justify-content: center;
	border: 1px solid var(--cs-border);
	border-right: 0;
	border-radius: 12px 0 0 12px;
	background: #f9fafb;
	color: #8b93a5;
	font-size: 18px;
}

.consultancy-page .premium-input .form-control {
	min-height: 49px;
	border-color: var(--cs-border);
	color: var(--cs-dark);
	font-size: 14px;
	box-shadow: none;
}

.consultancy-page .premium-input .form-control::placeholder {
	color: #b0b7c3;
}

.consultancy-page .premium-input .form-control:focus {
	border-color: rgba(99,91,255,.65);
	box-shadow: 0 0 0 4px rgba(99,91,255,.08);
}

.consultancy-page .premium-input:focus-within .input-group-text {
	border-color: rgba(99,91,255,.65);
	color: var(--cs-primary);
	background: rgba(99,91,255,.04);
}

.consultancy-page .password-addon {
	min-width: 48px;
	border-color: var(--cs-border);
	border-left: 0;
	border-radius: 0 12px 12px 0;
	color: #8b93a5;
	background: #fff;
}

.consultancy-page .password-addon:hover {
	color: var(--cs-primary);
	background: rgba(99,91,255,.05);
}

/* Password rules */

.consultancy-page #password-contain {
	margin: 4px 0 0;
	border: 1px solid #ebecef !important;
	border-radius: 16px !important;
	background: #f9fafc !important;
}

.consultancy-page #password-contain .card-body {
	padding: 17px 18px;
}

.consultancy-page .password-title {
	color: #374151;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 12px;
}

.consultancy-page .password-rule {
	color: #7b8190;
	font-size: 12px;
	margin-bottom: 7px;
}

.consultancy-page .password-rule i {
	color: #c5c8d0;
}

/* Terms */

.consultancy-page .terms-box {
	padding: 15px 17px;
	border: 1px solid var(--cs-border);
	border-radius: 14px;
	background: #fafbfc;
}

.consultancy-page .terms-box .form-check {
	margin: 0;
	min-height: auto;
}

.consultancy-page .terms-box .form-check-input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

.consultancy-page .terms-box .form-check-input:checked {
	border-color: var(--cs-primary);
	background-color: var(--cs-primary);
}

.consultancy-page .terms-box label {
	padding-left: 5px;
	color: #697080;
	font-size: 13px;
	line-height: 1.6;
}

.consultancy-page .terms-box a {
	color: var(--cs-primary);
}

/* Button */

.consultancy-page .create-btn {
	position: relative;
	min-height: 54px;
	overflow: hidden;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(
		135deg,
		var(--cs-primary) 0%,
		var(--cs-primary-dark) 55%,
		var(--cs-secondary) 100%
	);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 12px 25px rgba(99, 91, 255, .26);
	transition: all .25s ease;
}

.consultancy-page .create-btn:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgba(99, 91, 255, .32);
}

.consultancy-page .create-btn i {
	font-size: 18px;
	vertical-align: middle;
}

/* Footer */

.consultancy-page .registration-footer {
	padding: 20px 25px;
	text-align: center;
	border-top: 1px solid #eef0f3;
	background: #fafbfc;
}

.consultancy-page .registration-footer p {
	margin: 0;
	color: #7b8190;
	font-size: 13px;
}

.consultancy-page .registration-footer a {
	color: var(--cs-primary);
	font-weight: 700;
}

/* Security indicator */

.consultancy-page .secure-note {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	color: #949baa;
	font-size: 11px;
}

.consultancy-page .secure-note i {
	color: var(--cs-success);
	font-size: 15px;
}

/* Responsive */

@media (max-width: 991.98px) {
	.consultancy-page {
		padding-top: 25px;
	}

	.consultancy-page .premium-info-card {
		min-height: auto;
		padding: 32px;
	}

	.consultancy-page .premium-info-card h1 {
		max-width: 600px;
	}
}

@media (max-width: 575.98px) {
	.consultancy-page {
		padding: 15px 0 35px;
	}

	.consultancy-page .premium-info-card,
	.consultancy-page .registration-card {
		border-radius: 20px;
	}

	.consultancy-page .premium-info-card {
		padding: 27px 22px;
	}

	.consultancy-page .premium-info-card h1 {
		font-size: 29px;
	}

	.consultancy-page .registration-body {
		padding: 28px 20px 24px;
	}

	.consultancy-page .premium-stats {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.consultancy-page .stat-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}
}
.activity-created-by{padding-top:8px;border-top:1px dashed #e9edf3;font-size:11px}
.activity-created-by>i{width:27px;height:27px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#eef2ff;color:#6366f1;font-size:13px}
.activity-created-by>div{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.activity-created-by strong{color:#344054;font-size:11px}
.activity-created-by small{padding:2px 5px;border-radius:4px;background:#f2f4f7;color:#667085;font-size:9px}
.activity-status-change{display:flex;align-items:center;color:#98a2b3;font-size:10px}
.activity-status-change strong{color:#475467}
.activity-status-change span{color:#98a2b3}
.lead-actions{white-space:nowrap}
.table-action-btn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e5e9ef;border-radius:7px;background:#fff;color:#667085;text-decoration:none;font-size:14px;transition:.18s;padding:0}
.table-action-btn:hover{border-color:#cfd5ff;background:#f5f6ff;color:#6366f1}
.table-action-btn.whatsapp:hover{border-color:#bbf7d0;background:#f0fdf4;color:#16a34a}
.table-action-btn.convert:hover{border-color:#c7d2fe;background:#eef2ff;color:#4f46e5}
button.table-action-btn{cursor:pointer}
.job-management-card {
	position: relative;
	border: 1px solid rgba(108,78,255,.18);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 55px rgba(38,20,95,.10);
	overflow: hidden;
}

/* HEADER */
.job-management-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px 30px;
	min-height: 145px;
	overflow: hidden;
	border: 0;
	background:
		radial-gradient(circle at 88% -20%,rgba(122,82,255,.55),transparent 28%),
		radial-gradient(circle at 72% 120%,rgba(255,122,24,.20),transparent 28%),
		linear-gradient(120deg,#25005e 0%,#4b08a5 48%,#310080 100%);
}

/* animated light */
.job-management-header:before {
	content: "";
	position: absolute;
	width: 330px;
	height: 330px;
	right: 80px;
	top: -230px;
	border-radius: 50%;
	background: rgba(255,255,255,.09);
	filter: blur(2px);
	animation: jobHeaderGlow 6s ease-in-out infinite;
}

.job-management-header:after {
	content: "";
	position: absolute;
	left: -10%;
	bottom: -85px;
	width: 45%;
	height: 130px;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
	filter: blur(18px);
	animation: jobHeaderWave 7s ease-in-out infinite;
}

@keyframes jobHeaderGlow {
	0%,100% {
		transform: translateX(0) scale(1);
		opacity: .65;
	}
	50% {
		transform: translateX(-35px) scale(1.12);
		opacity: 1;
	}
}

@keyframes jobHeaderWave {
	0%,100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(90px);
	}
}

.job-management-header > div {
	position: relative;
	z-index: 2;
}

.job-page-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 8px;
	padding: 5px 10px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 30px;
	background: rgba(255,255,255,.10);
	color: #dcd2ff;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	backdrop-filter: blur(8px);
}

.job-page-label i {
	color: #ffb46f;
	font-size: 14px;
	animation: jobIconPulse 2s infinite;
}

@keyframes jobIconPulse {
	0%,100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.18) rotate(8deg);
	}
}

.job-management-header h4 {
	margin: 0 0 5px;
	color: #fff;
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -.3px;
}

.job-management-header p {
	margin: 0;
	color: rgba(255,255,255,.72);
	font-size: 12px;
}

/* TOTAL COUNT */
.job-header-count {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 15px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 12px;
	background: rgba(255,255,255,.10);
	color: rgba(255,255,255,.75);
	font-size: 11px;
	font-weight: 600;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
	backdrop-filter: blur(12px);
	transition: .3s ease;
}

.job-header-count:hover {
	transform: translateY(-3px);
	background: rgba(255,255,255,.16);
	box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.job-header-count span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 7px;
	border-radius: 9px;
	background: linear-gradient(135deg,#fff,#e9e2ff);
	color: #4b08a5;
	font-size: 15px;
	font-weight: 900;
	box-shadow: 0 5px 15px rgba(0,0,0,.12);
}

/* LIST AREA */
.job-list-wrapper {
	position: relative;
	padding: 20px;
	background:
		radial-gradient(circle at 10% 20%,rgba(93,53,220,.035),transparent 20%),
		radial-gradient(circle at 90% 80%,rgba(255,122,24,.035),transparent 20%),
		#f8f9fd;
}

/* JOB CARD */
.job-list-card {
	position: relative;
	margin-bottom: 15px;
	padding: 20px;
	border: 1px solid #e8eaf1;
	border-radius: 16px;
	background: rgba(255,255,255,.96);
	box-shadow:
		0 5px 18px rgba(38,20,95,.045),
		0 1px 2px rgba(0,0,0,.03);
	overflow: hidden;
	transition:
		transform .35s cubic-bezier(.2,.8,.2,1),
		box-shadow .35s ease,
		border-color .35s ease;
	animation: jobCardShow .55s ease both;
}

.job-list-card:nth-child(2) {
	animation-delay: .06s;
}

.job-list-card:nth-child(3) {
	animation-delay: .12s;
}

.job-list-card:nth-child(4) {
	animation-delay: .18s;
}

.job-list-card:nth-child(5) {
	animation-delay: .24s;
}

@keyframes jobCardShow {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.job-list-card:last-child {
	margin-bottom: 0;
}

/* animated left line */
.job-list-card:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(
		180deg,
		#6d28d9,
		#8b5cf6,
		#ff7a18,
		#6d28d9
	);
	background-size: 100% 220%;
	border-radius: 0 5px 5px 0;
	animation: jobLineMove 4s linear infinite;
}

@keyframes jobLineMove {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 0 100%;
	}
}

/* subtle shine */
.job-list-card:after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 70%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,.55),
		transparent
	);
	transform: skewX(-18deg);
	transition: .7s ease;
	pointer-events: none;
}

.job-list-card:hover:after {
	left: 130%;
}

.job-list-card:hover {
	border-color: rgba(108,78,255,.25);
	transform: translateY(-5px);
	box-shadow:
		0 18px 38px rgba(45,25,115,.10),
		0 0 0 1px rgba(108,78,255,.04);
}

/* MAIN */
.job-list-main {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 17px;
}

/* LOGO */
.job-company-logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	flex: 0 0 60px;
	border: 1px solid #e1d9ff;
	border-radius: 16px;
	background: linear-gradient(145deg,#f5f0ff,#eee8ff);
	color: #6426d9;
	font-size: 24px;
	box-shadow:
		0 8px 20px rgba(100,38,217,.10),
		inset 0 1px 0 #fff;
	transition: .35s cubic-bezier(.2,.8,.2,1);
}

.job-company-logo:before {
	content: "";
	position: absolute;
	inset: -4px;
	border: 1px solid rgba(100,38,217,.10);
	border-radius: 19px;
	animation: logoRing 2.5s ease-in-out infinite;
}

@keyframes logoRing {
	0%,100% {
		transform: scale(.95);
		opacity: .4;
	}
	50% {
		transform: scale(1.08);
		opacity: .9;
	}
}

.job-list-card:hover .job-company-logo {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(135deg,#6325d9,#8b42f5);
	transform: rotate(-4deg) scale(1.08);
	box-shadow:
		0 12px 28px rgba(100,38,217,.28),
		0 0 22px rgba(100,38,217,.14);
}

/* INFO */
.job-info {
	min-width: 0;
	flex: 1;
}

.job-title-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 5px;
}

.job-title-row h5 {
	margin: 0;
	color: #17122e;
	font-size: 16px;
	font-weight: 800;
	transition: .3s ease;
}

.job-list-card:hover .job-title-row h5 {
	color: #6426d9;
	transform: translateX(2px);
}

/* STATUS */
.job-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	border-radius: 30px;
	font-size: 10px;
	font-weight: 800;
	white-space: nowrap;
}

.job-status span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	animation: statusPulse 1.8s infinite;
}

@keyframes statusPulse {
	0%,100% {
		box-shadow: 0 0 0 0 rgba(32,164,100,.35);
	}
	50% {
		box-shadow: 0 0 0 5px rgba(32,164,100,0);
	}
}

.job-status.open {
	border: 1px solid #c9f0dd;
	background: linear-gradient(135deg,#effcf5,#e5f9ef);
	color: #11804d;
}

.job-status.open span {
	background: #15a968;
}

.job-status.closed {
	border: 1px solid #ffd3d3;
	background: linear-gradient(135deg,#fff5f5,#ffeded);
	color: #d83e48;
}

.job-status.closed span {
	background: #ed4d58;
}

/* COMPANY */
.job-company {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 12px;
	color: #7b8495;
	font-size: 12px;
}

.job-company i {
	color: #7541dc;
	font-size: 13px;
}

/* META */
.job-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
}

.job-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 9px;
	border: 1px solid #ececf3;
	border-radius: 8px;
	background: linear-gradient(135deg,#fbfbfd,#f7f7fa);
	color: #687386;
	font-size: 13px;
	font-weight: 650;
	transition: .25s ease;
}

.job-meta span:hover {
	border-color: #d9cdfa;
	background: #f5f0ff;
	color: #5e25cb;
	transform: translateY(-2px);
}

.job-meta i {
	color: #7541dc;
	font-size: 13px;
}

/* ACTION */
.job-list-action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 11px;
	min-width: 130px;
}

.job-posted {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #9ca4b2;
	font-size: 13px;
}

.job-posted i {
	color: #ff7a18;
}

/* VIEW BUTTON */
.job-view-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 37px;
	padding: 0 14px;
	border: 0;
	border-radius: 9px;
	background: linear-gradient(135deg,#641bd9,#8428f4);
	color: #fff;
	font-size: 13px;
	font-weight: 750;
	box-shadow:
		0 7px 18px rgba(100,27,217,.22),
		inset 0 1px 0 rgba(255,255,255,.2);
	overflow: hidden;
	transition: .3s ease;
}

.job-view-btn:before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,.35),
		transparent
	);
	transform: skewX(-20deg);
	transition: .6s ease;
}

.job-view-btn:hover:before {
	left: 130%;
}

.job-view-btn:hover {
	color: #fff;
	transform: translateY(-3px);
	box-shadow:
		0 12px 25px rgba(100,27,217,.32),
		0 0 20px rgba(100,27,217,.10);
}

.job-view-btn i {
	transition: .3s ease;
}

.job-view-btn:hover i {
	transform: translateX(4px);
}

/* DESCRIPTION */
.job-description {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 18px;
	padding-top: 17px;
	border-top: 1px solid #eeeef3;
}

.job-description strong {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 5px;
	color: #353044;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .6px;
}

.job-description strong i {
	color: #7040db;
	font-size: 13px;
}

.job-description p {
	margin: 0;
	color: #7c8493;
	font-size: 13px;
	line-height: 1.7;
}

/* MODAL */
.job-details-modal {
	border: 1px solid rgba(108,78,255,.12);
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow:
		0 30px 80px rgba(31,12,83,.22),
		0 0 0 1px rgba(255,255,255,.6);
	animation: modalPremium .35s ease;
}

@keyframes modalPremium {
	from {
		opacity: 0;
		transform: translateY(15px) scale(.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.job-details-modal .modal-header {
	position: relative;
	padding: 20px !important;
	border-bottom: 1px solid #eeeef4;
	background:
		radial-gradient(circle at 90% 0%,rgba(119,73,235,.12),transparent 30%),
		linear-gradient(135deg,#faf9ff,#fff);
}

.job-modal-title {
	display: flex;
	align-items: center;
	gap: 13px;
}

.job-modal-title .job-company-logo {
	width: 52px;
	height: 52px;
	flex-basis: 52px;
	font-size: 20px;
}

.job-modal-title h5 {
	margin: 0 0 4px;
	color: #17122e;
	font-size: 17px;
	font-weight: 800;
}

.job-modal-title span {
	color: #7b8495;
	font-size: 13px;
}

.job-modal-title span i {
	color: #7040db;
	margin-right: 3px;
}

.job-details-modal .modal-body {
	padding: 22px;
	background: #fafafe;
}

/* MODAL META */
.job-modal-meta {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 10px;
	margin-bottom: 20px;
}

.job-modal-meta > div {
	position: relative;
	padding: 14px;
	border: 1px solid #e9e8f0;
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(50,30,100,.035);
	transition: .3s ease;
	overflow: hidden;
}

.job-modal-meta > div:after {
	content: "";
	position: absolute;
	width: 50px;
	height: 50px;
	right: -25px;
	top: -25px;
	border-radius: 50%;
	background: rgba(112,64,219,.06);
}

.job-modal-meta > div:hover {
	border-color: #d8ccf7;
	transform: translateY(-3px);
	box-shadow: 0 9px 22px rgba(50,30,100,.08);
}

.job-modal-meta i {
	display: block;
	margin-bottom: 5px;
	color: #7040db;
	font-size: 17px;
}

.job-modal-meta span {
	display: block;
	margin-bottom: 3px;
	color: #979eab;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.job-modal-meta strong {
	display: block;
	color: #353044;
	font-size: 13px;
	font-weight: 750;
}

/* MODAL SECTIONS */
.job-modal-section {
	position: relative;
	margin-top: 15px;
	padding: 17px;
	border: 1px solid #e9e8f0;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(50,30,100,.035);
	overflow: hidden;
}

.job-modal-section:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(180deg,#7040db,#ff7a18);
}

.job-modal-section-title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 9px;
	color: #211a39;
	font-size: 13px;
	font-weight: 800;
}

.job-modal-section-title i {
	color: #7040db;
	font-size: 16px;
}

.job-modal-content {
	color: #70798a;
	font-size: 13px;
	line-height: 1.8;
}

/* MODAL FOOTER */
.job-details-modal .modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 18px;
	border-top: 1px solid #eeeef3;
	background: #fff;
}

.job-modal-status {
	display: flex;
	align-items: center;
}

/* EMPTY */
.job-empty {
	padding: 75px 20px;
	text-align: center;
}

.job-empty-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	margin: 0 auto 16px;
	border: 1px solid #ddd2fa;
	border-radius: 20px;
	background: linear-gradient(135deg,#f6f1ff,#eee7ff);
	color: #6c32d5;
	font-size: 29px;
	box-shadow: 0 12px 30px rgba(100,38,217,.10);
	animation: emptyFloat 3s ease-in-out infinite;
}

@keyframes emptyFloat {
	0%,100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-7px);
	}
}

.job-empty h5 {
	margin-bottom: 5px;
	color: #211a39;
	font-size: 17px;
	font-weight: 800;
}

.job-empty p {
	margin: 0;
	color: #8b93a1;
	font-size: 13px;
}

/* RESPONSIVE */
@media(max-width:991px) {

	.job-list-main {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.job-info {
		flex: 1 1 calc(100% - 80px);
	}

	.job-list-action {
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-left: 75px;
	}

	.job-description {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.job-modal-meta {
		grid-template-columns: repeat(2,1fr);
	}
}

@media(max-width:575px) {

	.job-management-header {
		align-items: flex-start;
		gap: 12px;
		padding: 20px 17px;
		min-height: 125px;
	}

	.job-management-header h4 {
		font-size: 18px;
	}

	.job-management-header p {
		font-size: 13px;
	}

	.job-header-count {
		padding: 7px 9px;
		font-size: 13px;
	}

	.job-header-count span {
		font-size: 14px;
	}

	.job-list-wrapper {
		padding: 10px;
	}

	.job-list-card {
		padding: 15px;
	}

	.job-list-main {
		gap: 11px;
	}

	.job-company-logo {
		width: 46px;
		height: 46px;
		flex-basis: 46px;
		font-size: 18px;
		border-radius: 12px;
	}

	.job-info {
		flex-basis: calc(100% - 57px);
	}

	.job-title-row {
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;
	}

	.job-title-row h5 {
		font-size: 14px;
	}

	.job-meta {
		gap: 5px;
	}

	.job-meta span {
		font-size: 13px;
		padding: 4px 6px;
	}

	.job-list-action {
		padding-left: 56px;
	}

	.job-description {
		margin-top: 14px;
		padding-top: 14px;
	}

	.job-modal-meta {
		grid-template-columns: 1fr 1fr;
	}

	.job-details-modal .modal-body {
		padding: 15px;
	}

	.job-modal-meta > div {
		padding: 10px;
	}

	.job-details-modal .modal-footer {
		padding: 11px 13px;
	}
}
.job-form-card{position:relative;border:1px solid rgba(108,78,255,.16);border-radius:20px;background:#fff;box-shadow:0 18px 55px rgba(38,20,95,.08);overflow:hidden}
.job-form-header{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:145px;padding:28px 30px;overflow:hidden;background:radial-gradient(circle at 88% -20%,rgba(125,82,255,.55),transparent 27%),radial-gradient(circle at 70% 120%,rgba(255,122,24,.18),transparent 30%),linear-gradient(120deg,#26005d,#4c08a5 50%,#310080)}
.job-form-header:before{content:"";position:absolute;width:300px;height:300px;right:70px;top:-220px;border-radius:50%;background:rgba(255,255,255,.08);animation:formGlow 6s ease-in-out infinite}
@keyframes formGlow{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(-30px) scale(1.12)}}
.job-form-header>div{position:relative;z-index:2}
.job-form-header .job-form-label{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;padding:5px 10px;border:1px solid rgba(255,255,255,.18);border-radius:30px;background:rgba(255,255,255,.1);color:#ded5ff;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;backdrop-filter:blur(8px)}
.job-form-header .job-form-label i{color:#ffb16b;font-size:14px}
.job-form-header h4{margin:0 0 5px;color:#fff;font-size:23px;font-weight:800}
.job-form-header p{margin:0;color:rgba(255,255,255,.72);font-size:13px}
.job-form-icon{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border:1px solid rgba(255,255,255,.2);border-radius:17px;background:rgba(255,255,255,.12);color:#fff;font-size:27px;box-shadow:inset 0 1px 0 rgba(255,255,255,.15);backdrop-filter:blur(10px);animation:formIconFloat 3s ease-in-out infinite}
@keyframes formIconFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(3deg)}}
.job-form-body{padding:28px 30px;background:radial-gradient(circle at 0 20%,rgba(102,55,210,.025),transparent 20%),#fafafe}
.job-form-section-title{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.job-form-section-title>span{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;border:1px solid #ded3fb;border-radius:10px;background:linear-gradient(135deg,#f6f1ff,#eee8ff);color:#6931d8;font-size:17px}
.job-form-section-title h5{margin:0 0 3px;color:#21183b;font-size:14px;font-weight:800}
.job-form-section-title p{margin:0;color:#9097a5;font-size:10px}
.job-form-divider{height:1px;margin:27px 0;background:linear-gradient(90deg,transparent,#e5e1ee,transparent)}
.job-form-label-text{display:block;margin-bottom:7px;color:#383148;font-size:13px;font-weight:750}
.job-form-label-text span{color:#ed4c58}
.job-input-wrap{position:relative}
.job-input-wrap>i{position:absolute;z-index:2;left:13px;top:50%;transform:translateY(-50%);color:#7650cf;font-size:15px;pointer-events:none;transition:.25s}
.job-form-control{width:100%;height:46px;padding:0 13px 0 38px;border:1px solid #e3e4eb;border-radius:10px;outline:none;background:#fff;color:#302a40;font-size:13px;box-shadow:0 2px 7px rgba(40,25,80,.025);transition:.25s}
select.job-form-control{cursor:pointer}
.job-form-control::placeholder{color:#a8adb7}
.job-form-control:hover{border-color:#cfc4eb}
.job-form-control:focus{border-color:#7541dc;background:#fff;box-shadow:0 0 0 3px rgba(117,65,220,.08),0 7px 18px rgba(50,25,110,.05)}
.job-input-wrap:focus-within>i{color:#ff7a18;transform:translateY(-50%) scale(1.12)}
.job-textarea-wrap{position:relative}
.job-textarea-wrap>i{position:absolute;z-index:2;left:13px;top:15px;color:#7650cf;font-size:15px;pointer-events:none;transition:.25s}
.job-form-textarea{width:100%;min-height:155px;padding:13px 13px 13px 38px;border:1px solid #e3e4eb;border-radius:10px;outline:none;resize:vertical;background:#fff;color:#302a40;font-size:13px;line-height:1.7;box-shadow:0 2px 7px rgba(40,25,80,.025);transition:.25s}
.job-form-textarea::placeholder{color:#a8adb7}
.job-form-textarea:hover{border-color:#cfc4eb}
.job-form-textarea:focus{border-color:#7541dc;box-shadow:0 0 0 3px rgba(117,65,220,.08),0 7px 18px rgba(50,25,110,.05)}
.job-textarea-wrap:focus-within>i{color:#ff7a18;transform:scale(1.12)}
.job-form-note{display:flex;align-items:flex-start;gap:10px;margin-top:22px;padding:13px 15px;border:1px solid #e5dcfb;border-radius:10px;background:linear-gradient(135deg,#f8f5ff,#fffaf7)}
.job-form-note>i{color:#ff7a18;font-size:18px}
.job-form-note strong{display:block;margin-bottom:2px;color:#49318a;font-size:13px}
.job-form-note p{margin:0;color:#818795;font-size:13px;line-height:1.6}
.job-form-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:15px 25px;border-top:1px solid #e9e7ef;background:#fff}
.job-cancel-btn,.job-submit-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 17px;border-radius:9px;font-size:13px;font-weight:750;text-decoration:none;transition:.3s}
.job-cancel-btn{border:1px solid #e2e3e9;background:#fff;color:#6d7481}
.job-cancel-btn:hover{border-color:#d5cbed;background:#f8f5ff;color:#6431c5;transform:translateY(-2px)}
.job-submit-btn{position:relative;border:0;background:linear-gradient(135deg,#641bd9,#8428f4);color:#fff;box-shadow:0 8px 20px rgba(100,27,217,.22);overflow:hidden;cursor:pointer}
.job-submit-btn:before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:.6s}
.job-submit-btn:hover:before{left:130%}
.job-submit-btn:hover{color:#fff;transform:translateY(-3px);box-shadow:0 12px 27px rgba(100,27,217,.32)}
.job-submit-btn i{font-size:15px}
@media(max-width:767px){
	.job-form-header{padding:22px 18px;min-height:125px}
	.job-form-header h4{font-size:19px}
	.job-form-icon{width:50px;height:50px;flex:0 0 50px;font-size:21px}
	.job-form-body{padding:22px 17px}
	.job-form-footer{padding:13px 17px}
	.job-form-section-title h5{font-size:13px}
}
@media(max-width:480px){
	.job-form-header{align-items:flex-start;gap:12px}
	.job-form-icon{display:none}
	.job-form-footer{flex-direction:column-reverse}
	.job-cancel-btn,.job-submit-btn{width:100%}
}

.quill-editor {
	background:#fff;
	border:1px solid #e3e4eb;
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 2px 7px rgba(40,25,80,.025);
}

.quill-editor .ql-toolbar {
	border:0;
	border-bottom:1px solid #e7e3ef;
	background:linear-gradient(135deg,#faf8ff,#f5f1ff);
	padding:7px 10px;
}

.quill-editor .ql-container {
	border:0;
	min-height:220px;
	font-family:Arial,sans-serif;
	font-size:13px;
	color:#302a40;
}

.quill-editor .ql-editor {
	min-height:220px;
	padding:14px 15px;
	line-height:1.7;
}

.quill-editor .ql-editor.ql-blank::before {
	color:#a8adb7;
	font-style:normal;
}

.quill-editor .ql-toolbar button:hover,
.quill-editor .ql-toolbar button.ql-active {
	color:#6931d8;
}

.quill-editor:focus-within {
	border-color:#7541dc;
	box-shadow:0 0 0 3px rgba(117,65,220,.08),0 7px 18px rgba(50,25,110,.05);
}

.quill-editor .ql-snow .ql-stroke {
	stroke:#7a7f8c;
}

.quill-editor .ql-snow .ql-fill {
	fill:#7a7f8c;
}

.quill-editor .ql-snow button:hover .ql-stroke,
.quill-editor .ql-snow button.ql-active .ql-stroke {
	stroke:#6931d8;
}

.quill-editor .ql-snow button:hover .ql-fill,
.quill-editor .ql-snow button.ql-active .ql-fill {
	fill:#6931d8;
}

@media(max-width:767px){
	.quill-editor .ql-container,
	.quill-editor .ql-editor {
		min-height:190px;
	}
}
.ql-container {
	height:auto !important;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-top: 0;
    border-start-end-radius: 0;
    border-start-start-radius: 0;
}