/*
 * One look for every form control on the classic dashboard, the sign in and sign up pages.
 * Colours come from --lf-accent and --lf-ring, which includes/legacy_theme.php sets from the
 * admin's accent colour (the classic gold when none is chosen).
 */

/* ---------- labels ---------- */
html body .field__label,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) label:not(.custom-control-label):not(.switch) {
	display: block;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .01em;
	color: #3b4650;
}
html body .form-group { margin-bottom: 18px; }

/* ---------- text, email, password, number, date, select, textarea ---------- */
html body .field__input,
html body .field__textarea,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) select,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) textarea {
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 1.5px solid #d5dde3;
	border-radius: 12px;
	background-color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	color: #1a1c1e;
	box-shadow: 0 1px 0 rgba(16, 24, 40, .03);
	outline: 0;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html body .field__textarea,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) textarea {
	height: auto;
	min-height: 120px;
	padding: 14px 16px;
	resize: vertical;
}

html body .field__input:hover:not(:disabled):not([readonly]),
html body .field__textarea:hover:not(:disabled):not([readonly]),
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) input:hover:not(:disabled):not([readonly]):not([type="checkbox"]),
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) select:hover {
	border-color: #b4c0c9;
}
html body .field__input:focus,
html body .field__textarea:focus,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) input:focus:not([type="checkbox"]),
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) select:focus,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) textarea:focus {
	border-color: var(--lf-accent, #bb914a);
	box-shadow: 0 0 0 4px var(--lf-ring, rgba(187, 145, 74, .18));
	background-color: #fff;
}

/* placeholders: readable but clearly not a value */
html body .field__input::placeholder,
html body .field__textarea::placeholder,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) input::placeholder,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) textarea::placeholder {
	color: #8b96a0;
	font-weight: 400;
	opacity: 1;
}

/* read only fields show their value in the placeholder, so keep it legible */
html body .field__input[readonly],
html body .field__input:disabled,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) input[readonly],
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) input:disabled {
	background-color: #f3f5f7;
	border-color: #e3e8ec;
	color: #4a5560;
	cursor: not-allowed;
	box-shadow: none;
}
html body .field__input[readonly]::placeholder,
html body .field__input:disabled::placeholder {
	color: #4a5560;
	font-weight: 500;
	opacity: 1;
}

/* validation state */
html body .field__input.is-invalid,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) input.is-invalid,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) select.is-invalid {
	border-color: #e5484d;
	box-shadow: 0 0 0 4px rgba(229, 72, 77, .14);
}

/* ---------- select: one chevron, same font and height as the inputs ---------- */
html body select.field__input,
html body select.form-control,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 44px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c7782' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
}

/* ---------- password fields keep clear of the show/hide eye ---------- */
html body .field__wrap input[type="password"],
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) input[type="password"] {
	padding-right: 52px;
}

/* ---------- file picker ---------- */
html body input[type="file"].field__input,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) input[type="file"] {
	padding: 9px 12px;
	line-height: 32px;
	cursor: pointer;
}
html body input[type="file"].field__input::file-selector-button,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) input[type="file"]::file-selector-button {
	margin-right: 14px;
	padding: 8px 16px;
	border: 0;
	border-radius: 8px;
	background: #eef1f4;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #3b4650;
	cursor: pointer;
	transition: background-color .15s ease;
}
html body input[type="file"].field__input::file-selector-button:hover,
html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) input[type="file"]::file-selector-button:hover {
	background: #e2e7ec;
}

/* ---------- date ---------- */
html body input[type="date"].field__input { padding-right: 12px; }

/* ---------- mobile: comfortable tap targets, and 16px stops iOS zooming in on focus ---------- */
@media (max-width: 575px) {
	html body .field__input,
	html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	html body :is(#login_form, #signup_form, #reset_form, #password_form, form.needs-validation) select { height: 50px; font-size: 16px; }
}

/* ======================================================================
 * Dashboard top navigation
 * The old markup puts header__link on both the <li> and its <a>, so padding, colour and the
 * active background were applied twice. Style the link once and let the <li> be a plain wrapper.
 * ====================================================================== */
html body nav.header__navigation { align-items: center; gap: 4px; }
html body nav.header__navigation > li.header__link {
	display: block;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	color: inherit;
}
html body nav.header__navigation > li.header__link[style*="display: none"] { display: none; }
html body nav.header__navigation > li.header__link > a.header__link {
	position: relative;
	display: flex;
	align-items: center;
	height: 42px;
	margin: 0;
	padding: 0 16px;
	border-radius: 999px;
	background: transparent;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .72);
	white-space: nowrap;
	transition: color .18s ease, background-color .18s ease;
}
html body nav.header__navigation > li.header__link > a.header__link:hover {
	color: #fff;
	background: rgba(255, 255, 255, .08);
}
html body nav.header__navigation > li.header__link.active > a.header__link {
	color: #fff;
	font-weight: 600;
	background: rgba(255, 255, 255, .1);
}
/* the active marker: a short accent bar under the label */
html body nav.header__navigation > li.header__link.active > a.header__link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 18px;
	height: 3px;
	margin-left: -9px;
	border-radius: 3px;
	background: var(--lf-accent, #bb914a);
}
html body nav.header__navigation > li.header__link > a.header__link:focus-visible {
	outline: 2px solid var(--lf-accent, #bb914a);
	outline-offset: 2px;
}
@media (max-width: 1023px) {
	html body nav.header__navigation > li.header__link > a.header__link { height: 40px; padding: 0 12px; font-size: 13px; }
}
html body .hl-ico { display: none; flex: none; }
html body .header__logout .hl-ico { display: none; }

/* mobile drawer: an icon before each label, and the active marker becomes a bar on the left edge */
@media (max-width: 550px) {
	html body nav.header__navigation { gap: 4px; }
	html body nav.header__navigation > li.header__link > a.header__link {
		height: 50px;
		padding: 0 16px;
		gap: 14px;
		border-radius: 14px;
		font-size: 15px;
		color: rgba(255, 255, 255, .78);
	}
	html body nav.header__navigation .hl-ico { display: block; width: 20px; height: 20px; opacity: .85; }
	html body nav.header__navigation > li.header__link.active > a.header__link .hl-ico { opacity: 1; color: var(--lf-accent, #bb914a); }
	html body nav.header__navigation > li.header__link.active > a.header__link::after {
		left: 0;
		top: 50%;
		bottom: auto;
		width: 3px;
		height: 22px;
		margin: -11px 0 0;
		border-radius: 0 3px 3px 0;
	}
	html body .header__logout {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 0 16px;
		font-size: 15px;
		font-weight: 500;
		color: rgba(255, 255, 255, .78);
	}
	html body .header__logout .hl-ico { display: block; width: 20px; height: 20px; }
}

/* ======================================================================
 * Transaction tables (#customers) and their pagination
 * ====================================================================== */
html body .nk-tb-tnx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
html body table#customers {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 0;
	font-family: inherit;
	font-size: 14px;
	color: #1a1c1e;
}
html body table#customers td,
html body table#customers th {
	padding: 16px;
	border: 0;
	border-bottom: 1px solid #eef1f4;
	background: transparent;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}
html body table#customers tr:nth-child(even),
html body table#customers tr:hover { background: transparent; }
html body table#customers tr:not(:first-child):hover td { background: #f8fafb; }
html body table#customers td.inheader {
	padding: 12px 16px;
	background: #f7f9fa;
	border-bottom: 1px solid #e6ebef;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #6b7782;
}
html body table#customers td.inheader b { font-weight: inherit; }
html body table#customers td.inheader:first-child { border-top-left-radius: 10px; }
html body table#customers td.inheader:last-child { border-top-right-radius: 10px; }
html body table#customers .icon_trans { display: block; width: 24px; height: 24px; object-fit: contain; }
html body table#customers .text-success { font-weight: 600; color: #12915c !important; }

/* status pills */
html body table#customers .badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	color: #fff;
}
html body table#customers .badge.bg { background: #12915c !important; }
html body table#customers .badge.bg--1 { background: #d94a4a !important; }
html body table#customers .badge.base--bg { background: #c98a1b !important; }
html body table#customers .badge.expired { background: #6b7782 !important; }

/* empty state */
html body table#customers td.tb-empty {
	padding: 44px 16px 40px;
	border-bottom: 0;
	text-align: center;
	white-space: normal;
	font-size: 14px;
	color: #8b96a0;
}
html body table#customers td.tb-empty::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 auto 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4bec7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* pagination */
html body .nk-tb-tnx .pagination,
html body .card .pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 18px 12px 20px;
	list-style: none;
}
html body .pagination .page-item { margin: 0; }
html body .pagination .page-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1.5px solid #e3e8ec;
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: #4a5560;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
html body .pagination .page-link:hover { border-color: #b4c0c9; background: #f8fafb; }
html body .pagination .page-item.active .page-link {
	background: var(--lf-accent, #bb914a);
	border-color: var(--lf-accent, #bb914a);
	color: #fff;
}
html body .pagination .page-link.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* the card around it: drop the doubled rules above and below the table */
html body .card-inner-group > .card-inner { border: 0; }
html body .card-preview > .card-bordered { border: 0; }
html body .card-title-group .title { font-size: 18px; font-weight: 700; color: #1a1c1e; }

@media (max-width: 575px) {
	html body table#customers { font-size: 13px; }
	html body table#customers td,
	html body table#customers th { padding: 13px 8px; }
	html body table#customers td.inheader { padding: 10px 8px; font-size: 10.5px; letter-spacing: .04em; }
	html body table#customers td:first-child,
	html body table#customers td.inheader:first-child { padding-left: 14px; }
	html body table#customers .badge { padding: 4px 9px; font-size: 11.5px; }
	html body .card-title-group .title { font-size: 16px; }
}

/* Dashboard stat cards: the original boxes, just cleaner */
html body .plans__ico { display: none; }
html body .plans__item {
	border: 1px solid #eef1f4;
	border-radius: 14px;
	background: #f8fafb;
	box-shadow: none;
}
html body .plans__price { font-size: 13px; font-weight: 600; color: #7a8591; }
html body .plans__title { font-size: 20px; font-weight: 700; color: #1a1c1e; }
html body .plans__title b { font-weight: 700; }

/* Deposit / withdraw popups: a little tighter and tidier */
html body .popup { max-width: 440px; padding: 64px 28px 28px; border-radius: 20px; box-shadow: 0 24px 60px rgba(8, 16, 12, .28); }
html body .popup .mfp-close {
	top: 20px; left: calc(50% - 200px); right: auto;
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: #f2f4f6;
	transition: background-color .15s ease;
}
html body .popup .mfp-close:hover { background: #e8ecef; }
html body .popup .mfp-close svg { width: 16px; height: 16px; }
html body .popup__head { margin-bottom: 24px; }
html body .popup__title { margin-bottom: 4px; font-size: 26px; font-weight: 700; color: #1a1c1e; }
html body .popup .field:not(:last-child) { margin-bottom: 20px; }
html body .popup .field__label { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: #4a5560; }
html body .popup .popup__button { margin-top: 8px; height: 52px; border-radius: 12px; }
@media (max-width: 767px) {
	html body .popup { padding: 60px 20px 24px; }
	html body .popup .mfp-close { top: 16px; left: calc(50% - 50vw + 16px); right: auto; }
}
html body .popup select.drop__head { height: 52px; padding-top: 0; padding-bottom: 0; }

/* Login activities */
html body .timeline-list { margin: 0; padding: 0; list-style: none; }
html body .timeline-item { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 4px 0 18px; }
html body .timeline-status { position: static; flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: #12915c !important; box-shadow: 0 0 0 4px rgba(18, 145, 92, .15); }
html body .timeline-date { flex: none; width: 56px; margin: 0; font-size: 13px; font-weight: 600; color: #12915c; }
html body .timeline-date .icon, html body .timeline-date em { display: none; }
html body .timeline-data { margin: 0; padding: 0; }
html body .timeline-title { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: #1a1c1e; }
html body .timeline-des p { margin: 0; font-size: 13px; color: #6b7782; }
html body .timeline-des .time { font-size: 12px; color: #8b96a0; }

/* ======================================================================
 * Login, signup, forgot password
 * ====================================================================== */
html body.auth-bg { background: var(--lf-dark, #0b1f18) !important; }
html body.auth-bg .auth-container {
	background: #fff !important;
	border: 0 !important;
	border-radius: 20px !important;
	box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .55) !important;
	color: #1a1c1e !important;
}
html body.auth-bg .auth-container h3,
html body.auth-bg .auth-container h4 {
	font-family: inherit;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.02em;
	text-transform: none;
	color: #1a1c1e !important;
}
html body.auth-bg .auth-container,
html body.auth-bg .auth-container p,
html body.auth-bg .auth-container label,
html body.auth-bg .auth-container .form-label,
html body.auth-bg .auth-container .custom-control-label { color: #4a5560 !important; }
html body.auth-bg .auth-container .form-label,
html body.auth-bg .auth-container label.required { font-size: 13px; font-weight: 600; }
html body.auth-bg .auth-container a { color: var(--lf-accent, #bb914a) !important; font-weight: 600; }
html body.auth-bg .auth-container a:hover { filter: brightness(.9); }
html body.auth-bg .auth-container .btn-primary {
	min-width: 180px;
	height: 50px;
	border: 0 !important;
	border-radius: 12px !important;
	background: linear-gradient(90deg, color-mix(in srgb, var(--lf-accent, #bb914a) 38%, #fff), var(--lf-accent, #bb914a)) !important;
	color: #07104d !important;
	font-weight: 700;
	letter-spacing: .04em;
	box-shadow: none !important;
}
html body.auth-bg .auth-container .btn-primary:hover { filter: brightness(1.05); }
html body.auth-bg .navbar-auth .badge {
	padding: 9px 18px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08) !important;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
}
html body.auth-bg .auth-container .required::after { color: #d94a4a; }