/**
 * NexHub Frontend Styles
*/

/* -------------------------------------------------- 
BASIC
-------------------------------------------------- */
html, body {border: 0; margin: 0; padding: 0; width: 100%; height: 100%; position: relative;} a img {border: 0}
html {scroll-behavior: smooth;}
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body {background: #fff; color: #000; padding: 0; margin: 0!important; font-size: 1rem; line-height: 1.4;}
img, object, embed {max-width: 100%; height: auto;} input:focus {outline: none;} *:focus {outline: none;} 
input, textarea, select, button {transition: .3s;}
::selection {background: #fff2a8;}
::-moz-selection {background: #fff2a8;}
.icon::before {display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased;}
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.8em center; background-size: 1em; padding-right: 2em; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; line-height: 1.4; color: #333;}
select:focus {outline: none; border-color: #009b5d;}
select::-ms-expand {display: none;}
select {cursor: pointer;box-shadow: 0 1px 2px rgba(0,0,0,0.05);}
select option:first-child {color: #d3d3d3;}
.select {position: relative; line-height: 3; display: flex; overflow: hidden;}
.select::after {content: '\f078'; font-family: 'Font Awesome 6 Pro'; font-weight: 500; color: #222; position: absolute; top: 3px; right: 10px; cursor: pointer; pointer-events: none; transition:.25s all ease;}
.select:hover::after {color: #23b499;}
::-webkit-scrollbar {width: 8px; height: 6px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background-color: #7f7f7f; border-radius: 30px; border: 1px solid #f1f1f1;}
::-webkit-scrollbar-thumb:hover {background-color: #555;}
/* --------------------------------------------------
LINK
-------------------------------------------------- */
a, input, #submit {-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
a {text-decoration: none; -webkit-tap-highlight-color:transparent !important;}
* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;}
/* -------------------------------------------------- 
TYPOGRAPHY
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {font-weight: 700; margin: 0; padding: 0; text-transform: none; letter-spacing: 0.1px;}
ul, li, ol {list-style: none; margin: 0; padding: 0;}
p {margin: 0;}
body, input, textarea, select, button {font-family: 'Inter', Helvetica Neue, Helvetica, Arial, sans-serif!important; font-optical-sizing: auto;}
button, select {cursor: pointer;}
button {border: none; padding: 0; box-shadow: 0; background: none;}
/* -------------------------------------------------- 
LAYOUT CONTROL
-------------------------------------------------- */
.head-control, .control {margin: 0 auto; padding: 0 20px; position: relative;}
.head-control {max-width: 1600px;}
.control {max-width: 1400px;}
.sec {width: 100%; position: relative;}
.thumb img {width: 100%; height: auto;}
.js-offcanvas, .b-menu, .showme, .h-btm, .acc-hp, .hp-acc, .ob-box, .dd-hp, .btm-nav, .fancybox-caption-wrap {display: none;}

/* =============================================================
   0. Base Page Resets (dashboard full-page shell)
   ============================================================= */
*, *::before, *::after {box-sizing: border-box;}
html, body {margin: 0; padding: 0;}
body {font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;}
.dash-wrap {background: #f7f7f7; min-height: 100vh; display: flex; flex-direction: column;}

/* =============================================================
   1. CSS Variables
   ============================================================= */

:root {
	--nx-primary:      #2563eb;
	--nx-primary-dk:   #1d4ed8;
	--nx-primary-bg:   #eff6ff;
	--nx-primary-ring: #bfdbfe;
	--nx-surface:      #ffffff;
	--nx-border:       #e2e8f0;
	--nx-border-dk:    #cbd5e1;
	--nx-text:         #0f172a;
	--nx-muted:        #64748b;
	--nx-subtle:       #f8fafc;
	--nx-success:      #16a34a;
	--nx-success-bg:   #f0fdf4;
	--nx-success-bdr:  #bbf7d0;
	--nx-error:        #dc2626;
	--nx-error-bg:     #fff1f2;
	--nx-error-bdr:    #fecdd3;
	--nx-warning:      #d97706;
	--nx-warning-bg:   #fffbeb;
	--nx-warning-bdr:  #fde68a;
	--nx-radius:       10px;
	--nx-radius-lg:    14px;
	--nx-shadow:       0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .06);
	--nx-shadow-md:    0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .06);
	--nx-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =============================================================
2. Utility / Shared Components
============================================================= */
.nexhub-btn {display: inline-flex;align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: var(--nx-radius); font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .2s, border-color .2s, color .2s;}
.nexhub-btn--primary {background: var(--nx-primary); color: #fff;}
.nexhub-btn--primary:hover {background: var(--nx-primary-dk); color: #fff;}
.nexhub-btn--secondary {background: var(--nx-subtle); color: var(--nx-text); border-color: var(--nx-border);}
.nexhub-btn--secondary:hover {background: var(--nx-border);}
.error-message {padding: 10px 14px; background: var(--nx-error-bg); border: 1px solid var(--nx-error-bdr); color: var(--nx-error); border-radius: var(--nx-radius); font-size: .88rem; margin-bottom: 16px;}
.success-message {display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--nx-success-bg); border: 1px solid var(--nx-success-bdr); color: var(--nx-success); border-radius: var(--nx-radius); font-size: .88rem; margin-bottom: 16px;}
/* =============================================================
3. Login Form  [nexhub_login]
============================================================= */
.ol-top {height: 60px; padding: 0 20px; background: #fff; border-bottom: 1px solid #e4e5e7; display: flex; justify-content: space-between; align-items: center; position: relative;}
.ol-top .h-box {display: flex; justify-content: space-between; align-items: center; width: 100%;}
.ol-nav ul {display: flex; width: 160px;}
.ol-nav a {padding: 4px 10px; font-size: .9em; line-height: 1.2; color: #222;}
.ol-nav a i, .ol-reg a i {margin-right: 2px;}
.ol-nav a .fa-house {font-size: .85rem; vertical-align: .5px;}
.ol-nav a:hover, .ol-nav a:hover i {color: #0056d2;}
.ol-reg {margin-left: 10px; min-width: 110px;}
.ol-reg a {padding: 10px 14px;font-size: .9rem; line-height: 1; font-weight: 500; color: #0056d2; background: #fff; border: 1px solid #0056d2; border-radius: 4px; display: inline-block;}
/* Dashboard header layout */
.l-head {display: flex; align-items: center; width: 100%;}
.logo-head {margin-top: -3px;}
.r-head {position: relative; display: flex; align-items: center; justify-content: flex-end;}
.b-menu {margin-left: -7px; margin-right: 12px; display: none;}
.b-menu button {width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 5px; background: none; border: none; cursor: pointer;}
.b-menu svg {width: 22px; height: 22px; fill: #333;}
/* Header account dropdown (desktop) */
.h-acc {display: flex; align-items: center; margin-left: 15px;}
.acc-desk {display: block;}
.acc-hp {display: none;}
.showhim {position: relative;}
.showhim:hover .showme {display: block;}
.showme {display: none; position: absolute; top: 50px; right: 0; width: 250px; border: 1px solid #ddd; background: #fff; border-radius: 4px; box-shadow: rgba(99,99,99,.2) 0px 2px 8px 0px; z-index: 9999;}
.acc-tp {width: 140px; height: 50px; display: flex; justify-content: flex-end; align-items: center;}
.ac-pic {max-width: 30px; margin-right: 10px;}
.ac-pic img {border-radius: 50%; margin-bottom: -5px;}
.acc-tp h4 {font-size: .88rem; line-height: 1; font-weight: 500; color: #222;}
.acs-top {padding: 15px 20px 5px; margin-bottom: 5px;}
.acs-top img {width: 65px; height: auto; border-radius: 50%;}
.acs-top h4 {font-size: 1.05rem; line-height: 1.3; font-weight: 500; text-transform: capitalize;}
.acs-top .acs-email {font-size: .83rem; line-height: 1.2; font-weight: 300; color: rgba(0,0,0,.6); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; margin-top: 2px;}
.acs-top .d-plan {margin-top: 8px; font-size: .75rem; line-height: 1; font-weight: 600; text-transform: capitalize; padding: 5px 8px; border-radius: 4px; display: inline-block;}
.acs-top .premium {background: #fecf33; color: #222;}
.acs-top .free {background: #d1e7dd; color: rgba(25,135,84);}
.acc-list ul {margin-bottom: 5px;}
.acc-list li a, .acc-list .disabled span {display: block; width: 100%; font-size: .93rem; line-height: 1.1; font-weight: 400; padding: 9px 20px; color: #222;}
.acc-list li a:hover {background: #f0f3f7;}
.acc-list li.sep {border-top: 1px solid #ddd; margin: 5px 0;}
.acc-list li.up-pre a {font-weight: 600;}
.acc-list li.up-pre a i {color: #fecf33;}
.acc-list .disabled span {color: rgba(0,0,0,.35); cursor: not-allowed;}
/* Header account button (mobile) */
.v-btn {background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center;}
.ac-btn {max-width: 34px; height: 34px;}
.ac-btn img {border-radius: 50%; width: 34px; height: 34px; object-fit: cover;}
/* Logo */
.logo {display: block; width: 120px; height: 40px; background: url(images/logo_forbiz.webp) no-repeat center left; background-size: contain;}
/* Dashboard footer */
.fcopy p {font-size: .85rem; line-height: 1.5; color: #000; text-align: center;}
.fcopy p a {font-size: .85rem; color: #000; font-weight: 500;}
.fcopy p a:hover {text-decoration: underline;}
.btm-link {margin-top: 6px; text-align: center;}
.btm-link a {font-size: .85rem; line-height: 1.2; color: #000;}
.btm-link a:hover {text-decoration: underline;}
.btm-link span {margin: 0 3px; font-size: .5rem; color: rgba(0,0,0,1); vertical-align: 2.5px;}
/* Mobile bottom navigation (hidden by default, shown at ≤980px) */
.btm-nav {display: none; background: #fff; padding: 10px 0; width: 100%; bottom: 0; left: 0; position: fixed; z-index: 99; border-top: 1px solid #e4e5e7;}
.btm-nav .control {margin: 0 auto; padding: 0 20px; position: relative; max-width: 1400px;}
.btm-nav ul {display: flex;}
.btm-nav li {width: 20%;}
.btm-nav li a, .btm-nav .disabled span.no-plan {color: #222; font-size: .7rem; line-height: 1.2; font-weight: 500; width: 100%; display: block; text-align: center;}
.btm-nav li a i, .btm-nav .disabled span.no-plan i {font-size: 1.15rem; margin-bottom: 5px; display: block;}
.btm-nav .disabled {opacity: 0.5; cursor: not-allowed;}
.btm-nav .disabled span.no-plan {color: rgba(0,0,0,.35); cursor: not-allowed; pointer-events: none;}
.btm-nav span.navhp-two {display: none;}
/** LOGIN PAGE **/
.o-login {padding: 3em 0;}
.ol-box {max-width: 550px; padding: 30px 30px 40px; background: rgba(255,255,255,.5); margin: 0 auto;}
.ol-title {margin-bottom: 40px;}
.ol-title h2 {font-size: 2rem; line-height: 1.2; margin-bottom: 8px;}
.ol-title p {font-size: 1rem; line-height: 1.3; color: rgba(0,0,0,.7);}
.of-field {position: relative;}
/** LOGIN FORM **/
.rglog {padding: 40px 0 140px; background: url(images/city-bg.webp) repeat-x bottom; background-size: 800px;}
.login .of-label label {font-size: .965rem; line-height: 1.2; font-weight: 500; margin-bottom: 8px; display: block;}
.login .of-field {position: relative;}
.login .of-field input {font-size: 1rem; line-height: 1.2; padding: 11px 12px 11px 36px!important; border: 2px solid #d4d8dc; border-radius: 6px;  transition: all 0.2s ease; background: #fff; width: 100%;}
.login .of-field input:hover {outline: none; border-color: #b3b3b3;}
.login .of-field input:focus {outline: none; border-color: #0073aa;}
.login .password {margin: 20px 0 10px;}
.login .password .input-wrapper {position: relative;}
.login .password i {font-size: .95rem; top: 14.5px; right: 12px; position: absolute; cursor: pointer;}
.login .rememberforgot {display: flex; align-items: center; justify-content: space-between;}
.login .rememberme, .login .lostpass a {font-size: .9rem; line-height: 1; color: rgba(0,0,0,.75);}
.login .rememberme input {margin: 0 1px 0 0; vertical-align: -1.5px;}
.login .lostpass a:hover {text-decoration: underline;}
.login .btn {margin: 20px 0 25px;}
.login .btn button {font-size: 1rem; line-height: 1; font-weight: 600; background: #ffcf40; color: #222; padding: 16px 0; width: 100%; text-align: center; border: none; cursor: pointer; border-radius: 4px; display: block;}
.login .btn button:hover {background: #ffd452;}
.login .btn button:focus {background: #ffd452;}
/* Forgot Password */
.login .dl-title {margin-bottom: 20px;}
.login .dl-title h3 {font-size: 1.1rem; line-height: 1.2; font-weight: 600; margin-bottom: 8px;}
.login .dl-title p {font-size: .9rem; line-height: 1.3; color: rgba(0,0,0,.7);}
.back-to-login {margin-bottom: 25px;}
.back-to-login button {font-size: .95rem; line-height: 1.2; color: #222;}
.back-to-login button:hover {color: #016bd4;}
.login .of-field::before {font-size: 1rem!important; color: rgba(0,0,0,.4); position: absolute; top: 14px; left: 12px; z-index: 3;}
.login .row.email .of-field::before {content: '\f007'; font: var(--fa-font-solid);}
.login .row.password .of-field::before {content: '\f023'; font: var(--fa-font-solid);}
/* Form Others */
.success-message, .error-message {font-size: .85rem; line-height: 1.3; margin-bottom: 15px; padding: 10px 10px 10px 34px; position: relative;}
.success-message {color: #0b910b;}
.error-message {color: #000; background: #fdebe6; border: 1.5px solid #ddb4a7; border-radius: 4px;}
.error-message::before {content: '\f057'; font: var(--fa-font-solid); font-weight: 600; font-size: 1rem; color: #e02d00; position: absolute; top: 11.2px; left: 10px;}
.dlg-btm {margin-top: 10px;}
.dlg-btm a {font-size: .98rem; line-height: 1.3; color: #222;}
.dlg-btm a span {color: #0056d2; font-weight: 600;}
.dlg-btm a span:hover{text-decoration: underline;}
/* =============================================================
 4. Register Form  [nexhub_register]
============================================================= */
.reg .box {display: grid; grid-template-columns: 1fr 550px; gap: 60px;}
.rg-one {position: relative;}
.reg-title {margin-bottom: 30px;}
.reg-title h3 {font-size: 2rem; line-height: 1.3; text-transform: capitalize;}
.bizloop {margin: 20px 0 10px; display: flex;}
.bizloop .item {min-width: 40px; height: 40px; border: 1px solid #f0f0f0; background: #fff; border-radius: 50%; overflow: hidden; margin-left: -4px;}
.bizloop .item:first-child {margin-left: 0;}
.bizloop img {width: 100%; max-height: 40px; margin: 0 auto;}
.reg-title p {font-size: 1.3rem; line-height: 1.4; color: rgba(0,0,0,.8);}
.rg-one li {font-size: 1.05rem; line-height: 1.4; font-weight: 400; position: relative; padding-left: 25px; margin-bottom: 12px;}
.rg-one li::before {content: '\f00c'; font-family: 'Font Awesome 6 Pro'; font-weight: 900; color: #23be0e; font-size: 1.1rem; position: absolute; top: 3px; left: 0;}
.rg-one-title {margin-bottom: 20px;}
.rg-one-title h3 {font-size: 1.4rem; line-height: 1.3; margin-bottom: 10px;}
.rg-one-title p {font-size: .9rem; line-height: 1.4; color: rgba(0,0,0,.8);}
.reg-form {margin-bottom: 15px;}
.reg-form .row {position: relative; margin-bottom: 20px;}
.reg-form .of-label {margin-bottom: 8px;}
.reg-form .of-label label {font-size: .965rem; line-height: 1.2; font-weight: 500; display: block;}
.reg-form .of-field input {font-size: .98rem; line-height: 1.2; padding: 10px 12px 10px 36px!important; border: 2px solid #d4d8dc; border-radius: 4px; transition: all 0.2s ease; background: #fff; width: 100%;}
.reg-form .of-field input:hover {outline: none; border-color: #b3b3b3;}
.reg-form .of-field input:focus {outline: none; border-color: #0073aa;}
.reg-form .input-wrapper {position: relative;}
.reg-form .password i {font-size: .95rem; top: 14px; right: 12px; position: absolute; cursor: pointer;}
.reg-form #password-indicator {max-width: 300px;}
/* Password strength meter */
#nxr-strength-wrap {display: none; margin-top: 8px;}
.nxr-strength-bars {display: flex; gap: 4px; margin-bottom: 4px;}
.nxr-bar {height: 4px; flex: 1; border-radius: 99px; background: #e2e8f0; transition: background .25s;}
#nxr-strength-lbl {font-size: .78rem; font-weight: 500; display: block;}
.reg-form .terms {display: flex; width: 100%;}
.reg-form .terms label {font-size: .85rem; line-height: 1.3; padding-left: 20px; margin-bottom: 0!important; position: relative; cursor: pointer;}
.reg-form .terms input {width: 14px!important; height: 14px; margin: 0!important; position: absolute; top: 2.5px; left: 0; cursor: pointer;}
.reg-form .terms a {color: #0478d1; font-weight: 500;}
.reg-form .terms a:hover {text-decoration: underline;}
.reg-form .btn {margin-top: 20px;}
.reg-form .btn button {font-size: 1rem; line-height: 1; font-weight: 600; background: #ffcf40; color: #222; padding: 16px 0; width: 100%; text-align: center; border: none; cursor: pointer; border-radius: 4px; display: block;}
.reg-form .btn button:hover {background: #ffd452;}
.reg-form .btn button:focus {background: #ffd452;}
.reg-form .of-field::before {font-size: .9rem!important; color: rgba(0,0,0,.4); position: absolute; top: 15px; left: 15px; z-index: 3;}
.reg-form .row.display_name .of-field::before {content: '\f007'; font: var(--fa-font-solid);}
.reg-form .row.username .of-field::before {content: '\f2bd'; font: var(--fa-font-solid);}
.reg-form .row.email .of-field::before {content: '\f0e0'; font: var(--fa-font-solid);}
.reg-form .row.phone .of-field::before {content: '\f095'; font: var(--fa-font-solid);}
.reg-form .row.password .of-field::before {content: '\f023'; font: var(--fa-font-solid);}
.reg-form .of-help {margin-top: 5px;}



/* =============================================================
   5. Dashboard  [nexhub_dashboard]
   ============================================================= */

.nexhub-dashboard {
	max-width: 900px;
	margin: 0 auto;
	font-family: var(--nx-font);
}

.nexhub-dashboard h2 {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--nx-text);
	margin: 0 0 16px;
}

/* Locked state */
.nexhub-dashboard--locked .nexhub-lock-notice {
	text-align: center;
	padding: 48px 24px;
	background: var(--nx-surface);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-lg);
}

.nexhub-dashboard--locked .nexhub-lock-notice p {
	color: var(--nx-muted);
	margin: 0 0 24px;
}

/* Plan badge */
.nexhub-plan-badge {
	font-size: .9rem;
	color: var(--nx-muted);
	margin-bottom: 24px;
}

.nexhub-plan-badge strong {
	color: var(--nx-primary);
}

/* Dashboard nav list */
.nexhub-dashboard-nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}

.nexhub-dashboard-nav li {
	background: var(--nx-surface);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.nexhub-dashboard-nav li span {font-weight: 600; color: var(--nx-text); font-size: .9rem;}
.nexhub-dashboard-nav li em {font-style: normal; font-size: .78rem; color: var(--nx-muted);}
/* =============================================================
6. Plan Page  [nexhub_plan_page]
============================================================= */
.ds-title {margin-bottom: 20px;}
.ds-title h1 {font-size: 3rem; line-height: 1.2; text-align: center; margin-bottom: 8px;}
.ds-title p {font-size: 1.2rem; line-height: 1.4; color: #565656; text-align: center;}
.ds-title h2 {font-size: 2rem; line-height: 1.2; text-align: center;}
.row-sec {padding: 60px 0;}
.page-plan {background-color: transparent; background-image: linear-gradient(180deg, #FFFFFF 0%, #F7F8FB 35%); position: relative; z-index: 3;}
.page-plan .overlay {background: url() no-repeat; background-position: 0px -80px; background-size: contain; opacity: 0.18;}
/** PLAN BOX **/
.plp-list {border-top: 1px solid #ddd; padding-top: 30px;}
.plp-list ul {margin: 0!important; padding: 0!important; list-style: none!important;}
.plp-list ul li {margin-bottom: 5px!important; color: #000; padding-left: 26px; position: relative; list-style: none;}
.plp-list ul li::before {content: "\f00c"; font-size: 1rem; font-family: "Font Awesome 6 Pro"; font-weight: 900; color: #00bb45; position: absolute; left: 0; top: 0;}
.plp-list ul li.no {font-weight: 400;}
.plp-list ul li.no, .plp-list li.no::before {color: #a4a4a4;}
.plp-list ul li.no::before {content: "\f00d"; margin: 0 14px 0 2px;}
.spl {max-width: 1000px; margin: 40px auto 0;}
.spl .box {display: flex; align-items: flex-end;}
.spl-row.prem {width: 60%;}
.spl-row.free {width: 40%; margin-left: 10px;}
.spl-top {display: flex; justify-content: space-between; align-items: center; background: #FFCF40; color: #000; font-size: .88rem; line-height: 1.2; padding: 6px 30px; border-top-left-radius: 4px; border-top-right-radius: 4px;}
.spl-col {padding: 30px; background: #fff; border: 2px solid #E8E8E8;}
.spl-row.prem .spl-col {border-color: #FFCF40; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}
.spl-row.free .spl-col {border-radius: 4px;}
.spl-t h4 {font-size: 1.6rem; line-height: 1.2; margin-bottom: 6px; display: flex; align-items: center;}
.spl-t h4 svg {width: 30px; height: 30px; margin-right: 5px;}
.spl-t h4 span {font-size: .6rem; line-height: 1.1; font-weight: 500; text-transform: uppercase; background: #d51438; color: #fff; padding: 6px 10px; border-radius: 30px; display: inline-block; margin-left: 10px;}
.spl-t p {font-size: .95rem; line-height: 1.3; color: #5B5B5B;}
.spl-p {margin-top: 20px;}
.pl-disc {font-size: 1.2rem; line-height: 1.3; text-decoration: line-through; color: #A9A9A9; margin-bottom: -5px;}
.pl-price span {font-weight: 400;}
.pl-price span.rm {font-weight: 500; vertical-align: 22px;}
.pl-label {margin-bottom: 25px; font-size: .85rem; font-weight: 500; line-height: 1.2; padding: 8px 16px; background: #f6f6f6; color: #222; border: 1px solid #ddd; border-radius: 50px; display: inline-block;}
.pl-price b {font-size: 2.8rem;}
.pl-btn button {font-size: .96rem; line-height: 1.2; font-weight: 600; padding: 14px 0; width: 100%!important; display: block; border-radius: 6px; text-align: center;}
.spl-row.prem .pl-btn button {background: #FFCF40; color: #000;}
.spl-row.free .pl-btn button {background: #0E6BE6; color: #fff;}
.spf {max-width: 1100px; margin: 0 auto; padding-top: 60px;}
.spf-top {display: flex; justify-content: space-between;}
.spf-t h3 {font-size: 1.4rem; line-height: 1.2; color: #000;}
.spf-t a {font-size: .9rem; line-height: 1.2; color: #0E6BE6; border-bottom: 1px solid #0E6BE6; padding-bottom: 2px; display: none; margin-top: 6px;}
.spfp h4 {font-size: 1.4rem; line-height: 1.2;}
.spfp .btn {margin-top: 15px;}
.spfp .btn button {width: 200px; padding: 12px; font-size: .9rem; line-height: 1; font-weight: 500; text-align: center; border-radius: 4px; display: block; margin: 0 auto;}
.spfp .btn button.prem {background: #FFCF40; color: #000;}
.spfp .btn button.free {background: #0E6BE6; color: #fff;}
.spf-row {margin-bottom: 30px;}
.spr-title {margin-bottom: 10px; border-bottom: 2px solid #0E6BE6; padding-bottom: 10px;}
.spr-title h4 {font-size: 1.3rem; line-height: 1.2; color: #0E6BE6;}
.spf-row li {display: flex; justify-content: space-between; font-size: 1rem; line-height: 1.3; color: #000; padding: 10px;}
.spf-row li:nth-child(even) {background: #eff1f6;}
.spf-row li .spr-t, .spf-t {width: 50%;}
.spf-row li .spr-pr, .spf-row li .spr-fr, .spfp {width: 25%; text-align: center;}
.spf-row li i {font-size: 1.2rem;}
.spf-row li .fa-circle-check {color: #12ac4f;}
.spf-row li .fa-circle-xmark {color: #e10010;}
.fixed-spfp {position: fixed; top: 0; left: 50%; transform: translateX(-50%); padding: 10px 0; width: 100%; max-width: 1100px; background: white; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); z-index: 1000; }
.spf-top.fixed-spfp {}
.spf-top.fixed-spfp .spf-t {padding: 10px 20px;}
.spf-top.fixed-spfp .spf-t h3 {font-size: 1.2rem;}
.spf-top.fixed-spfp .spf-t a {display: inline-block;}
.spf-top.fixed-spfp .spfp h4 {font-size: 1.1rem;}
.spf-top.fixed-spfp .spfp .btn {margin-top: 10px;}
.spf-top.fixed-spfp .spfp .btn button {font-size: .85rem; padding: 10px;}
.pay-term {max-width: 300px; margin: 0 auto;}
.pay-term h4 {font-size: .95rem; line-height: 1.2; font-weight: 500; margin-bottom: 10px;}
.pay-term img {width: 100%; height: auto;}
.faq-plan .control {max-width: 800px;}
.faq-item {border: 1px solid #d5dce5; border-radius: 6px; margin-bottom: 10px; transition: .3s;}
.faq-item:hover {border-color: #ccc;}
.faq-item.active {border-color: #ccc; box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;}
.faq-q {padding: 16px 40px 16px 16px; position: relative; cursor: pointer;}
.faq-q h4 {font-weight: 600; display: inline;}
.faq-q i {position: absolute; right: 12px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease;}
.faq-item.active .faq-q i {transform: translateY(-50%) rotate(180deg);}
.faq-a {padding: 0 16px 16px;}
.faq-q h4, .faq-q p {font-size: .95rem; line-height: 1.4;}
.faq-a p {font-size: .95rem; line-height: 1.4; margin-bottom: 14px;}
.faq-a p em {font-size: .9rem;}
.faq-a p:last-child {margin-bottom: 0;}
.faq-a ul, .faq-a ol {padding-left: 20px; margin-bottom: 15px;}
.faq-a ul:last-child, .faq-a ol:last-child {margin-bottom: 0;}
.faq-a ul li, .faq-a ol li {font-size: .96rem; line-height: 1.4;}
.faq-a ul li {list-style: disc;}
.faq-a ol li {list-style: decimal;}
.faq-a a {color: #154eb8;}
.faq-a a:hover {text-decoration: underline;}
.faq-a p strong, .faq-a li strong {font-weight: 500;}
/* =============================================================
8. Avatar Upload  [nexhub_avatar_upload]
============================================================= */
#nxu-avatar-card {display: flex; align-items: flex-start; gap: 20px; padding: 20px; background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg); max-width: 100%;}
#nxu-avatar-card img.nxu-avatar-img {width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 2px solid var(--nx-border); display: block; flex-shrink: 0;}
.nxu-avatar-actions {flex: 1; min-width: 180px;}
#nxu-avatar-notice {display: none; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; margin-bottom: 10px;}
#nxu-avatar-notice.is-success {background: var(--nx-success-bg); color: var(--nx-success); border: 1px solid var(--nx-success-bdr);}
#nxu-avatar-notice.is-error {background: var(--nx-error-bg); color: var(--nx-error); border: 1px solid var(--nx-error-bdr);}
.nxu-btn-group {display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;}
.nxu-btn {display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; font-size: .82rem; font-weight: 600; cursor: pointer; border: none; transition: background .2s;}
.nxu-btn svg {width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;}
.nxu-btn-upload {background: var(--nx-primary); color: #fff;}
.nxu-btn-upload:hover {background: var(--nx-primary-dk);}
.nxu-btn-remove {background: var(--nx-error-bg); color: var(--nx-error); border: 1px solid var(--nx-error-bdr);}
.nxu-btn-remove:hover {background: #ffe4e6;}
.nxu-btn-ghost {background: #059669; color: #fff;}
.nxu-btn-ghost:hover {background: #047857;}
.nxu-file-input {display: none;}
.nxu-avatar-name {font-size: 15px; font-weight: 600;color: var(--nx-text); margin: 0 0 4px;}
.nxu-avatar-desc {font-size: 13px; color: var(--nx-muted); margin: 0 0 16px;}
.nxu-notice {display: none; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; margin-bottom: 12px;}
.nxu-notice.is-success {background: var(--nx-success-bg); color: var(--nx-success); border: 1px solid var(--nx-success-bdr);}
.nxu-notice.is-error {background: var(--nx-error-bg);color: var(--nx-error); border: 1px solid var(--nx-error-bdr);}
/* =============================================================
 9. Notices & Alerts
============================================================= */
.nexhub-notice {max-width: 600px; margin: 40px auto; padding: 32px 28px; background: var(--nx-surface); border: 1px solid var(--nx-border);
 border-radius: var(--nx-radius-lg); text-align: center; font-family: var(--nx-font); box-shadow: var(--nx-shadow);}
.nexhub-notice h2 {font-size: 1.3rem;font-weight: 700; margin: 0 0 10px;
 color: var(--nx-text);}
.nexhub-notice p {color: var(--nx-muted); margin: 0 0 24px; font-size: .9rem;}
.nexhub-notice--success {border-color: var(--nx-success-bdr);}
.nexhub-notice--success h2 {color: var(--nx-success);}
.nexhub-notice--error {border-color: var(--nx-error-bdr);}
.nexhub-notice--error h2 {color: var(--nx-error);}
.nexhub-notice--info {border-color: var(--nx-primary-ring);}
/* =============================================================
 NexHub Payment Page — [nexhub_payment]
============================================================= */
.nx-payment-page {padding: 32px 0 60px;}
.nx-payment-page .control {max-width: 1000px;}
.nx-pay-back { margin-bottom: 24px; }
.nx-pay-back a {display: inline-flex; align-items: center; gap: 6px; color: #222; font-size: .92rem; font-weight: 600; text-decoration: none; transition: color .15s;}
.nx-pay-back a:hover {color: #2271b1;}
.nx-pay-back i {font-size: .75rem;}
.nx-pay-grid {display: grid;grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: start;}
/* ── LEFT ─────────────────────────────────────────── */
.nx-pay-plan-card {background: linear-gradient(135deg, #ffff56 0%, #fd9136 100%); border-radius: 14px; padding: 25px; color: #1a1200; margin-bottom: 20px; position: relative; overflow: hidden; border: 1px solid #e6a800; box-shadow: 0 4px 20px rgba(255,207,64,.35);}
.nx-pay-plan-card::after {content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; background: rgba(255,255,255,.15); border-radius: 50%;}
.nx-pay-plan-name {font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; color: #000; display: flex; align-items: center; gap: 5px;}
.nx-pay-plan-title p {font-size: .8rem; line-height: 1.3;}
.nx-pay-plan-price {display: flex; flex-direction: column; margin: 15px 0 0;}
.nx-pay-normal-price {font-size: 1rem; color: rgba(0,0,0,.6); text-decoration: line-through;}
.nx-pay-disc-price {display: flex; align-items: flex-start; gap: 4px; }
.nx-pay-plan-rm {font-size: .95rem; font-weight: 500; color: #000;}
.nx-pay-plan-amount {font-size: 2.4rem; font-weight: 800; line-height: 1; color: #1a1200; }
.nx-pay-plan-duration {display: inline-block; font-size: 12px; font-weight: 700; background: #fff; color: #333; padding: 4px 12px; border-radius: 20px; margin-top: 6px;}
/* Customer card */
.nx-pay-customer {background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 20px;}
.nx-pay-customer h3 {font-size: 1.05rem; line-height: 1; font-weight: 700; color: #000; margin-bottom: 20px; display: flex; align-items: flex-end; gap: 10px;}
.nx-pay-customer-note {font-size: .78rem; font-weight: 400; color: #9ca3af;}
.nx-pay-customer-row {display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f9fafb;}
.nx-pay-customer-row:last-child {border-bottom: none;}
.nx-pay-customer-row > i {color: #9ca3af; font-size: 1.1rem; margin-top: 3px; width: 24px; flex-shrink: 0;}
.nx-pay-customer-field {display: flex; flex-direction: column; gap: 3px; flex: 1;}
.nx-pay-customer-label {font-size: .9rem; font-weight: 600; color: #222;}
.nx-pay-customer-label .required {font-weight: 700; color: rgba(255,0,4,1.00);}
.nx-pay-inline-input {width: 100%; border: none; border-bottom: 1px solid #d1d5db; background: transparent; font-size: .96em; line-height: 1.2; color: #1d2327; padding: 8px 0; outline: none; transition: border-color .15s;}
.nx-pay-inline-input:focus {border-bottom-color: #2271b1; border-bottom-style: solid;}
.nx-pay-inline-input::placeholder {color: #d1d5db; font-weight: 400;}
.nx-phone-required-hint {font-size: 11px; color: #9ca3af; margin-top: 2px; display: block;}
.nx-phone-required-hint--error {color: #dc2626; font-weight: 600;}
.nx-input-error {border-bottom-color: #dc2626 !important; border-bottom-style: solid !important;}
/* ── RIGHT ────────────────────────────────────────── */
/* Order summary */
.nx-order-summary {background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 20px; margin-bottom: 12px;}
.nx-order-summary h3 {font-size: 1.05rem; font-weight: 700; color: #1d2327;}
.nx-order-rows {padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #f3f4f6;}
.nx-order-row {display: flex; justify-content: space-between; font-size: 14px; color: #50575e; padding: 5px 0;}
.nx-order-row strong { color: #1d2327; }
.nx-order-totals { display: flex; flex-direction: column; gap: 8px; }
.nx-order-total-row {display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #50575e;}
.nx-fee-desc {font-size: 12px; color: #9ca3af; margin-left: 4px;}
.nx-order-grand-total {padding-top: 10px; margin-top: 4px; border-top: 2px solid #e5e7eb; font-size: 16px; font-weight: 600; color: #1d2327;}
.nx-order-grand-total strong {color: #000; font-size: 18px; font-weight: 700;}
/* Coupon saving row */
.nx-coupon-saving-label {font-size: 13px; color: #16a34a; }
.nx-coupon-saving-amount {font-size: 14px; font-weight: 600; color: #16a34a;}
/* Coupon inline (inside Order Summary, no separate box) */
.nx-coupon-inline {margin: 15px 0;}
.nx-coupon-row {display: flex; gap: 8px;}
.nx-coupon-input {flex: 1; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; color: #1d2327; outline: none; transition: border-color .15s;}
.nx-coupon-input:focus {border-color: #000;}
.nx-coupon-input::placeholder {color: #9ca3af;}
.nx-coupon-btn {padding: 10px 18px; background: #d97706; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s;}
.nx-coupon-btn:hover {background: #b45309;}
.nx-coupon-msg {margin-top: 8px; font-size: 13px;}
.nx-coupon-msg--error {color: #dc2626;}
.nx-coupon-msg--success {color: #16a34a; font-weight: 600;}
/* Payment method box */
.nx-pay-method-box {background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 20px; margin-bottom: 12px;}
.nx-pay-method-head {display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;}
.nx-pay-method-head h3 {font-size: 15px; font-weight: 700; color: #1d2327; margin: 0;}
.nx-pay-method-hint {font-size: .78rem; color: #9ca3af;}
/* Channel list */
.nx-channels-list {height: 213px; display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;}
.nx-ch-item {border-bottom: 1px solid #e5e7eb; cursor: pointer; transition: background .12s; display: block;}
.nx-ch-item:last-child {border-bottom: none }
.nx-ch-top {padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;}
.nx-ch-left {display: flex; align-items: center; gap: 10px;}
/* Custom radio */
.nx-ch-radio {width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d1d5db; flex-shrink: 0; transition: border-color .15s, background .15s; box-sizing: border-box;}
.nx-ch-radio--checked {border-color: #f59e0b; background: #f59e0b; box-shadow: inset 0 0 0 3px #fff;}
.nx-ch-input {display: none;}
.nx-ch-name {font-size: .9rem; font-weight: 500; color: #1d2327;}
.nx-ch-tick {color: #22c55e; font-size: 15px; line-height: 1;}
.nx-ch-item--active .nx-ch-top {background: #f4f4f5; border-bottom: 1px solid #e5e7eb;}
/* Logo / icons */
.nx-ch-right {display: flex; align-items: center; gap: 6px;}
.nx-ch-logo {height: 22px; width: auto; object-fit: contain;}
.nx-ch-logo--card {height: 22px;}
.nx-ch-logo--duitnow {height: 45px; margin: -10px 0;}
.nx-ch-desc {font-size: .85rem; line-height: 1.3; color: #52525b; padding: 0 16px; border-top: 0; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;}
.nx-ch-desc--open {max-height: 80px; opacity: 1; padding: 10px 16px; border-top: 1px solid #f3f4f6;}
/* Proceed button */
.nx-btn--proceed {font-size: 1.05rem; font-weight: 500; padding: 16px 24px; background: #0056d2; color: #fff; border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; margin-bottom: 12px; width: 100%; transition: background .15s;}
.nx-btn--proceed:hover {background: #0452c2;}
/* Terms */
.nx-pay-terms {font-size: 12px; color: #6b7280; text-align: center; margin: 0; line-height: 1.6;}
.nx-pay-terms a {color: #6b7280; font-weight: 500;}
.nx-pay-terms a:hover {text-decoration: underline;}
/* ── Single-column states ─────────────────────────── */
.nx-pay-wrap--single { max-width: 560px; margin: 0 auto; }
.nx-notice--info {background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 24px; font-size: 14px; color: #1e40af; display: flex; flex-direction: column; gap: 14px; align-items: flex-start;}
.nx-notice--error {background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 14px 16px; color: #991b1b; font-size: 14px;}
/* Success page */
.nx-payment-success .nx-pay-wrap--single {max-width: 560px; margin: 0 auto;}
.nx-success-head {text-align: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 30px 25px; margin-bottom: 15px;}
.nx-success-icon {font-size: 3rem; line-height: 1; color: #22c55e; margin-bottom: 12px;}
.nx-success-head h2 {font-size: 1.25rem; line-height: 1.2; margin: 0 0 8px; color: #1d2327;}
.nx-success-head p  {font-size: 14px; color: #6b7280; margin: 0;}
.nx-receipt-details {background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; margin-bottom: 16px;}
.nx-receipt-details h3 {font-size: 1rem; font-weight: 700; margin: 0 0 14px; color: #1d2327;}
.nx-receipt-table {width: 100%; border-collapse: collapse; font-size: 14px;}
.nx-receipt-table tr:nth-child(even) td {background: #f4f7f9;}
.nx-receipt-table td {padding: 8px 12px;}
.nx-receipt-table td:first-child {color: #333; width: 160px;}
.nx-receipt-table td:last-child {font-weight: 500; color: #1d2327;}
.nx-receipt-actions {display: flex; flex-direction: column; gap: 8px;}
.nx-badge {display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;}
.nx-badge--success {background: #dcfce7; color: #15803d;}
.nx-btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: background .15s;}
.nx-btn--primary {background: #2271b1; color: #fff;}
.nx-btn--primary:hover {background: #135e96; color: #fff;}
.nx-btn--secondary {background: #f0f0f1; color: #1d2327;}
.nx-btn--secondary:hover {background: #dcdcde;}

/* ================================================
   DASHBOARD CSS (migrated from forbiz theme)
================================================ */
/* -------------------------------------------------
 ADMIN DASHBOARD
------------------------------------------------- */
.ed-panel {padding: 20px 0 40px;}
.ed-box {display: flex;}
.ed-title h1 {font-size: 1.6rem;}
.ed-title h3 {font-size: 1.4rem; margin-bottom: 10px;}
.ed-ds {overflow: hidden;}
.ed-top .ed-box {justify-content: space-between; align-items: center;}
.edt-btn {display: flex; gap: 10px;}
.edt-btn a {display: inline-block; font-size: .85rem; font-weight: 600; color: #222; background: #fff; padding: 8px 20px; border: 1px solid #6b6b6b; border-radius: 30px; text-align: center;}
.edt-btn a:hover {background: #f4f4f4;}
/** ED ONE **/
.ed-one {margin-top: 15px;}
.edp-one .swiper-wrapper {display: flex; margin: 0 -5px; width: auto;}
.edp-one .swiper-slide {width: 25%; padding: 0 5px; height: auto;}
.edp-one .item {background: #fff; padding: 20px; border: 1px solid #ccc; border-radius: 10px; height: 100%; position: relative;}
.edp-one .item h4 {font-size: 1.2rem; line-height: 1.2; margin-bottom: 15px;}
.eds-p {position: absolute; top: 24px; right: 20px; font-size: .85rem; line-height: 1.2; color: #fff;}
.eds-p.has-pending button {font-size: .8rem; line-height: 1.2; color: #ff0000;}
.eds-box {display: flex; align-items: flex-end;}
.eds-item h5 {font-size: .85em; line-height: 1.2; text-transform: uppercase; font-weight: 400; color: #6b7280; margin-bottom: 5px;}
.eds-n {display: flex; align-items: flex-end;}
.eds-numb strong, .eds-one strong {font-size: 1.55rem; line-height: 1; font-weight: 600; letter-spacing: 1px; color: #222; display: block; margin-top: 3px;}
.eds-numb span {margin-left: 3px; margin-bottom: 2px; font-size: .5rem; color: #06bd30; display: inline-block;}
.r-eds {margin-left: 8px; font-size: .8rem; line-height: 1.2; font-weight: 300;}
.r-eds i {font-size: .5rem;}
.eds-bar {margin-top: 10px; position: relative;}
.eds-bar canvas {width: 100% !important;}
.eds-user .eds-item ul {display: flex; gap: 40px;}
.eds-one {display: flex; flex-direction: column;}
.eds-one span {font-size: .95rem; line-height: 1.2; font-weight: 500;}
.eds-u {margin-top: 5px;}
.eds-u ul {display: flex; flex-wrap: wrap;}
.eds-u li {width: 50%; font-size: .88rem; line-height: 1.2; color: #333; padding-right: 20px; margin-top: 12px;}
.eds-u li:last-child {width: 100%; font-size: .85rem;}
.eds-u li i {margin-right: 2px;}
.eds-u li strong {font-weight: 500;}
.eds-end {margin-top: 10px;}
.eds-end button {font-size: .85rem; line-height: 1.2; color: #454545;}
.eds-end button:hover {color: #000;}
/** ED TWO **/
.ed-box {display: flex;}
.ed-two {margin: 30px 0;}
.ed-two .ed-top {display: flex; justify-content: space-between; align-items: center;}
.ed-two .ed-title {margin-bottom: 10px;}
.ed-two .ed-title h3 {margin: 0;}
.ed-two .cbs-all button {font-size: .9rem; line-height: 1.2; font-weight: 500; color: #222;}
.ed-two .cbs-all button:hover {color: #0d20d4;}
.ed-two .row-one {width: 40%;}
.ed-two .row-two {width: 60%;}
.ed-sales .swiper-wrapper {flex-wrap: wrap; margin: 0 -5px;}
.ed-sales .swiper-slide {width: 50%; padding: 0 5px; margin-bottom: 10px;}
.ed-sales .swiper-slide:nth-child(3), .ed-sales .swiper-slide:last-child {margin-bottom: 0;}
.ed-sales .item {padding: 20px; border: 1px solid #ccc; border-radius: 10px; height: 100%;}
.ed-sales h4 {font-size: 1.1rem; line-height: 1.3; font-weight: 600;}
.ed-sales p {font-size: .86rem; line-height: 1.2; color: #7e7e7e; margin: 3px 0 15px;}
.ed-sales .eds-amount {font-size: 1.3rem; line-height: 1.2; font-weight: 600; color: #000;}
.eds-stat {padding: 20px; border: 1px solid #ccc; border-radius: 10px; height: 100%;}
.eds-stat .woo-sales-chart-wrapper {display: flex; flex-direction: column; justify-content: space-between; height: 100%; background: transparent;}
.eds-stat .chart-container {position: relative; height: auto; width: 100%;}
.eds-stat .chart-header {display: flex; justify-content: space-between; align-items: flex-start;}
.eds-stat .chart-title-section {flex: 1;}
.eds-stat .chart-title {font-size: 1rem; line-height: 1.2; font-weight: 600; margin-bottom: 2px;}
.eds-stat .chart-period {font-size: .85rem; color: #6B7280;}
.eds-stat .year-selector-wrapper {position: relative;}
.eds-stat .year-selector-wrapper select {background-position: right 0 center; padding-right: 25px;}
.eds-stat .year-selector {font-size: .85rem; font-weight: 500; color: #374151; cursor: pointer; border: none; transition: all 0.15s ease;}
.eds-stat .year-selector:hover {color: #222;}
.eds-stat .no-data-message {text-align: center; padding: 60px 20px; color: #6B7280; font-size: 1rem;}
.eds-stat .loading-spinner {display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border: 3px solid #f3f3f3; border-top: 3px solid #6366F1; border-radius: 50%; animation: spin 1s linear infinite;}
/** ED THREE **/
.ed-three .row-one {width: 100%;}
.ed-three .row-two {min-width: 330px; margin-left: 20px;}
.ed-three .cb-wrap {padding: 20px; border: 1px solid #ccc; border-radius: 10px;}
.cb-item {height: 595px; overflow: auto; padding-right: 15px;}
.us-log {list-style: none; position: relative;}
.us-log::before {content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: .5px; background: #ddd;}
.us-log li {display: flex;align-items: center; margin-bottom: 5px; position: relative; padding-left: 40px;}
.us-log .us-img {position: absolute; left: 0; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.us-log .us-img img {border-radius: 50%;}
.us-log .us-info {background: #fff; padding: 8px 12px; border-radius: 8px; border: 1px solid #ccc; width: 100%;}
.us-log .usi-text {font-size: .9rem; line-height: 1.3; font-weight: 500; color: #000; margin-bottom: 4px;}
.us-log .usi-date {font-size: .75rem; color: #999;}
.us-log .dot {width: 12px; height: 12px; display: inline-block; border-radius: 50%;}
.badge-default {background-color: #bbb;}
.badge-free {background-color: #2196F3;}
.premium-ring {border: 2px solid gold; border-radius: 50%; padding: 2px; background: #fff; display: inline-flex; align-items: center; justify-content: center;}
.premium-ring img {border-radius: 50%;}
/** SALES HISTORY **/
.cb-top {display: flex; justify-content: space-between; align-items: center;}
.cb-filter {display: flex; gap: 10px; margin-bottom: 15px;}
.cb-filter input[type="text"], .cb-filter input[type="date"] {padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9rem;}
.cb-filter button {background-color: #0073aa; color: #fff; border: none; padding: 7.5px 14px; border-radius: 4px; cursor: pointer; font-size: 0.9rem;}
.cb-filter button:hover {background-color: #005a8e;}
.cb-sale table {border: 1px solid #cdcfd5; border-bottom: none; border-radius: 6px; overflow: hidden; width: 100%; border-spacing: 0;}
.cb-sale th, .cb-sale td {padding: 14px 10px; font-size: .9rem; line-height: 1.2; border-bottom: 1px solid #cdcfd5; text-align: center; vertical-align: top;}
.cb-sale th {background-color: #f4f6f9; font-weight: 600; position: sticky; top: 0; z-index: 1; text-align: center;}
.cb-sale th:hover i {color: #000;}
.cb-sale th.sortable {cursor: pointer;}
.cb-sale td {vertical-align: middle;}
.cb-sale .es-no {width: 30px;}
.cb-sale td.es-detail {text-align: left;}
.cb-sale h4 {margin: 0; font-size: .9rem; color: #333;}
.cb-sale .cbs-info {font-size: .86rem; line-height: 1.3; color: #333;}
.cb-sale .phonemail {display: flex; gap: 15px;}
.cb-sale .cbs-price {margin-top: 5px;}
.cb-sale .orderid {font-size: .8rem; color: #df0808; font-weight: 600; margin-top: 2px;}
.cb-sale .orderid strong {color: #000; font-weight: 600;}
.cb-sale td.es-date {width: 115px; font-size: .86rem;}
.cb-sale .status-label {font-size: .8rem; line-height: 1.2; font-weight: 500; padding: 6px 10px; border-radius: 30px; display: inline-block;}
.cb-sale .status-label.Completed {background: #def1e4; color: #2aa148;}
.cb-sale td.es-inv {width: 130px;}
.cb-sale td.es-inv a {font-size: .86rem; font-weight: 500; color: #0d20d4;}
.cb-sale td.es-inv a:hover {text-decoration: underline;}
.cb-sale .btn-inv {display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 500; padding: 5px 10px; border-radius: 5px; background: #f0f4ff; color: #0d20d4; text-decoration: none; transition: background .2s;}
.cb-sale .btn-inv:hover {background: #d8e1ff; text-decoration: none;}
.cb-sale .btn-inv--disabled {font-size: .82rem; color: #aaa; padding: 5px 10px; display: inline-block;}
.nx-order-status {font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 30px; display: inline-block; text-transform: capitalize;}
.nx-order-status--paid {background: #def1e4; color: #1e8a3b;}
.nx-order-status--pending {background: #fff3cd; color: #856404;}
.nx-order-status--failed {background: #fde8e8; color: #b91c1c;}
.nx-order-status--cancelled {background: #f1f1f1; color: #666;}
.cb-sale .cbs-plan {font-size: .82rem; color: #555; margin-top: 2px;}
.cb-sale .edl-top {display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;}
.cb-pagi {display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px;}
.cb-pagi .cbp-page {position: relative;}
.cb-pagi label {font-size: .8rem; font-weight: 600;}
.cb-pagi select {font-size: .85rem; padding: 6px 14px 6px 8px; border: 1px solid #ccc; border-radius: 4px;}
.cb-pagi .cbp-page::after {content: '\f078'; font-family: 'Font Awesome 6 Pro'; font-weight: 500; font-size: .6rem; color: #222; position: absolute; top: 9px; right: 9px; cursor: pointer; pointer-events: none; transition:.25s all ease;}
.cb-sale .pagination {display: flex; gap: 5px; margin: 0!important;}
.cb-sale .pagination button {font-size: .8rem; padding: 6px 10px; border: 1px solid #ccc; background-color: #fff; cursor: pointer; border-radius: 4px;}
.cb-sale .pagination button:hover {background-color: #f0f0f0;}
.cb-sale .pagination button.active {background-color: #0073aa; color: #fff; border-color: #0073aa;}
.cb-sale .pagination button.prev-btn, .cb-sale .pagination button.next-btn {border: none;}
/** USER LIST **/
.dsu-user {padding: 20px; border: 1px solid #ddd; border-radius: 10px; height: 100%;}
.dsu-button {}
.dsu-button ul {background: #eef2f8; padding: 6px; display: flex; border-radius: 60px;}
.dsu-button li {width: 33.33333333%;}
.dsu-button .dsu-btn {font-size: .85rem; line-height: 1.2; font-weight: 600; padding: 8px 0; text-align: center; border-radius: 30px; display: block; width: 100%; transition: .3s;}
.dsu-button .dsu-btn.active {background: #0033c4; color: #fff;}
.dsu-box {margin-top: 15px;}
.dsu-box h3 {font-size: 1rem; line-height: 1.2; margin-bottom: 5px;}
.dsu-box li {padding: 10px 0; border-bottom: 1px solid #ddd; width: 100%; display: flex; align-items: center;}
.dsu-box li:last-child {border-bottom: none; padding-bottom: 0;}
.dsu-box .us-img {min-width: 34px; height: 34px; border: 3px solid #c5c5c5; border-radius: 50%; overflow: hidden; margin-right: 15px;}
.dsu-box li.Premium .us-img {border-color: #ffcf40;}
.dsu-box li.Free .us-img {border-color: #44c013;}
.dsu-box .us-info {width: 100%;}
.dsu-box h4 {font-size: .88rem; line-height: 1.2; font-weight: 500; margin-bottom: 4px;}
.dsu-box .us-post {font-size: .76rem; line-height: 1.2; color: rgba(0,0,0,.75); display: flex; gap: 10px;}
/** EDITOR POPUP **/
.edpp-full {background: #f4f6f8; width: 100%; height: 100vh; overflow-y: auto;}
.edpp-top {background: #fff; border-bottom: 1px solid #ddd; padding: 14px 20px; display: flex; align-items: center; position: fixed; top: 0; left: 0; width: 100%; z-index: 3;}
.edpp-full button.popup-close {font-size: .86rem; line-height: 1.1; font-weight: 500; color: #222;}
.edpp-full button.popup-close i {font-size: .6rem; vertical-align: 1px;}
.edpp-top h3 {font-size: 1.3rem; line-height: 1.2; font-weight: 700; text-transform: capitalize; margin-left: 20px;}
.edpp-wrap {padding: 65px 0 40px;}
.edppw-item {background: #fff; padding: 30px;}
.edl-top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}
.ed-search {width: 450px; position: relative;}
.ed-search input {font-size: .9rem; padding: 10px 10px 10px 14px; border: 1px solid #ccc; border-radius: 4px; width: 100%; transition: .3s;}
.ed-search input:hover {border-color: #9c9c9c;}
.ed-search input:focus {border-color: #333;}
.ed-search .search-clear {position: absolute; right: 30px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 1.3rem; color: #0052e9; display: none; user-select: none; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 18px;}
.ed-search input:not(:placeholder-shown) + .search-clear {display: block;}
.ed-search::after {content: '\f002'; font-family: 'Font Awesome 6 Pro'; font-weight: 500; font-size: .9rem; color: #585858; top: 8.5px; right: 10px; position: absolute;}
.ed-sortpage {font-size: .9rem;}
.cbp-page {position: relative;}
.cbp-page label {font-size: .8rem; font-weight: 600;}
.cbp-page select {font-size: .85rem; padding: 6px 22px 6px 8px; border: 1px solid #cdcfd5; border-radius: 4px; background-image: none;}
.cbp-page::after {content: '\f078'; font-family: 'Font Awesome 6 Pro'; font-weight: 500; font-size: .6rem; color: #222; position: absolute; top: 8px; right: 8px; cursor: pointer; pointer-events: none; transition:.25s all ease;}
.edl-list table {font-size: .9rem; width: 100%; background: #fff; border: 1px solid #ddd; border-radius: 6px; border-bottom: none; border-spacing: 0; overflow: hidden;}
.edl-list thead tr {background: #f4f6f9;}
.edl-list th {font-size: .88rem; line-height: 1.2; font-weight: 600; padding: 14px 10px; text-align: center;}
.edl-list tr {text-align: left;}
.edl-list tr td {transition: .3s;}
.edl-list tr:hover td {background: #fffff5;}
.edl-list th, .edl-list td {border-bottom: 1px solid #cdcfd5;}
.edl-list td {padding: 15px 5px; text-align: center;}
.edl-list .edl-no {width: 30px;}
.edl-list .edl-logo {width: 75px;}
.edl-list .edl-logo .ed-logo {width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; background: #fff; border: 0.5px solid rgba(0, 0, 0, 0.38); border-radius: 6px; overflow: hidden; text-align: center;}
.edl-list .edl-logo img {width: auto; max-height: 65px;}
.edl-list td.edl-post {text-align: left; padding-left: 10px;}
.edl-list .edl-post a h4 {font-size: .92rem; line-height: 1.4; font-weight: 500; color: #000; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.edl-list .edl-post a .edl-meta {font-size: .8rem; line-height: 1.2; color: rgba(0, 0, 0, 0.6); margin: 3px 0 6px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.edl-list .edl-post a .edl-meta span {font-size: .5rem; margin: 0 2px; vertical-align: 2px;}
.edl-list .edl-post a .post-cat {font-size: .8rem; line-height: 1.2; color: #737373;}
.edl-list .edl-post a .post-cat ul {display: flex; gap: 15px;}
.edl-list .edl-post a .post-cat ul li {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.edl-list .edl-post a .post-cat ul li.dsl-inds {max-width: 250px;}
.edl-list .edl-post a .post-cat ul li.dsl-state {min-width: 150px;}
.edl-list .edl-post a .post-cat .fa-briefcase {margin-right: 2px;}
.edl-list .edl-type {width: 100px;}
.edl-list td.edl-type span {font-size: .78rem; line-height: 1.2; font-weight: 500; padding: 6px 10px; border-radius: 20px; display: inline-block;}
.edl-list .edl-type .Business {background: #e4ecf9; color: #0e4ecc;}
.edl-list .edl-type .Jobs {background: #e9fbee; color: #009b5d;}
.edl-list .edl-type .Deals {background: #ffedf5; color: #cf2972;}
.edl-list .edl-view {font-size: .8rem; width: 130px;}
.edl-list .edl-status {font-size: .8rem; font-weight: 600; text-transform: uppercase; width: 80px; text-align: center;}
.edl-list .edl-status.publish {color: #33CC33;}
.edl-list .edl-status.pending {color: #C00202;}
.edl-list .edl-status.draft {color: #585858;}
.edl-list .edl-role {width: 140px;}
.edl-list .edl-role a {font-size: .85rem; line-height: 1.3; color: #000;}
.edl-list .edl-role a .eda-user {font-weight: 500; text-transform: capitalize;}
.eda-role {padding: 5px 8px; font-size: .75rem; line-height: 1.1; font-weight: 500; border-radius: 4px; display: inline-block; margin-top: 5px;}
.eda-role.premium {background: #fecf33; color: #000; position: relative;}
.eda-role.premium::before {content: '\f521'; font-family: 'Font Awesome 6 Pro'; font-weight: 900; font-size: .6rem; margin-right: 4px; vertical-align: 1px;}
.eda-role.free {display: inline-block; background: #d1e7dd; color: rgba(25, 135, 84);} 
.eda-role.subscriber {display: inline-block; background: #f0f0f0; color: #333;} 
.eda-role.administrator {display: inline-block; background: #e90006; color: #fff;} 
.edl-list .edl-role .eda-role.free {display: none;}
.edl-list .edl-feat {width: 100px;}
.edl-list .edl-action {width: 80px; text-align: center;}
.edl-list .edl-box {display: flex; flex-direction: column; align-items: center;}
.edl-action-btn {display: flex; flex-direction: column; align-items: center;}
.edl-action a, .edl-action button {width: 60px; font-size: .6rem; line-height: 1; font-weight: 400; padding: 5px 10px; vertical-align: 1px; text-align: center; color: #000; text-decoration: none; display: inline-block; border-radius: 2px; text-transform: uppercase; border: 1px solid #828282; background: #efefef; background: linear-gradient(top, #fdfdfd, #efefef); background: -ms-linear-gradient(top, #fdfdfd, #efefef); background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#efefef)); background: -moz-linear-gradient(top, #fdfdfd, #efefef);}
.edl-action a.btn-edit {margin-bottom: 3px;}    
.edl-pagination {display: flex; gap: 5px; margin-top: 15px;}
.edl-pagination button {font-size: .85rem; padding: 6px 10px; border: 1px solid #ccc; background-color: #fff; cursor: pointer; border-radius: 4px;}
.edl-pagination button:hover {background-color: #f0f0f0;}
.edl-pagination button.active {background-color: #0e6be6; color: #fff; border-color: #0e6be6;}
.edl-pagination button.prev-btn, .edl-pagination button.next-btn {border: none;}
.sortable span {font-size: .7rem; vertical-align: .5px; opacity: 0.5;}
.sortable, .sortable span {cursor: pointer;}
.sortable.sort-asc span, .sortable.sort-desc span {opacity: 1;}
.no-list {padding: 30px 0;}
.no-list p {font-size: .95rem; line-height: 1.4; text-align: center;}
/** USER LIST **/
.edl-list .usl-box {display: flex; align-items: center;}
.edl-list .usl-img {width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: block;}
.edl-list .usl-info {margin-left: 15px; text-align: left;}
.edl-list .usl-info h4 {font-weight: 600;}
.edl-list .usl-meta {font-size: .8rem; color: rgba(0, 0, 0, 0.6); margin-top: 2px;}
.edl-list .usl-meta ul {display: flex; gap: 15px;}
.edl-list .edl-mail, .edl-list .edl-date {font-size: .85rem;}
.edl-list .edl-mail {width: 250px;}
.edl-list .edl-mail .user-mail {max-width: 230px; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.edl-list .edl-date {width: 120px;}
.edl-list .user-list .edl-role .eda-role.free {display: inline-block;}
/** USER INFORMATION POPUP **/
.e-user {display: flex;}
.e-user .row-one {min-width: 240px;}
.e-user .row-two {width: 100%; padding-left: 40px;}
.eu-user .eu-plan {display: flex; flex-direction: column; align-items: center;}
.eu-user .eu-plan .eda-role {padding: 5px 8px; width: 100px; display: block;}
/* -------------------------------------------------
 USER DASHBOARD
------------------------------------------------- */
.dst-hp, .ed-menu, .dshp {display: none;}
.ds-wrap {height: 100%;}
.ds-notice {background: #fff9e9; border: 1px solid #fcde8f; width: 100%; border-radius: 6px; display: block; position: relative; margin-bottom: 20px;}
.ds-notice::before {content: ''; background: url('../images/notice.webp') no-repeat; background-size: contain; width: 26px; height: 26px; top: 10px; left: -10px; position: absolute; display: block; z-index: 3;}
.ds-notice .close {width: 24px; height: 24px; padding: 6.5px; position: absolute; top: 7px; right: 10px; background: none; border: none; cursor: pointer; z-index: 3;}
.notice-inner {padding: 10px 38px 10px 26px; z-index: 1; position: relative;}
.notice-inner p {font-size: .85rem; line-height: 1.4; color: #000;}
.notice-inner p a {color: #0b44ac; font-weight: 500;}
.notice-inner p a:hover {text-decoration: underline;}
.ds-foot {padding: 20px 0; border-top: 1px solid #ddd; width: 100%;}
.ds-foot .copy p {text-align: center; font-size: .85rem; line-height: 1.3; color: rgba(0,0,0,.7);}
.dash {display: flex; flex-direction: column; min-height: 100vh;}
.ds-box, .d-box {display: flex; flex: 1;}
.ds-o .ds-box {height: 100%;}
.ds-side {max-width: 240px; width: 100%; position: relative;}
.ds-content {width: 100%; background: #fafafa; border-left: 1px solid #ddd; display: flex; flex-direction: column;}
.ds-head {padding: 0 20px; border-bottom: 1px solid #ddd; background: #fff;}
.ds-head .d-box {justify-content: space-between; align-items: center;}
.dsm-box {padding: 20px; background: #fff; border-radius: 8px; border: 1px solid #ddd; box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;}
.dsm-title {margin-bottom: 15px;}
.dsm-title h3 {font-size: 1.2rem; line-height: 1.2; font-weight: 700;}
.ds-main {max-width: 1200px; width: 100%; margin: 0 auto; padding: 20px 30px 40px;}
.dsm-sec {margin-bottom: 30px;}
.ds-top {display: flex; justify-content: space-between; align-items: center;}
.r-dsu {font-size: .75rem; line-height: 1; font-weight: 600; padding: 5px 8px; margin-left: 10px; border-radius: 4px; display: inline-block;}
.r-dsu.premium {background: #fecf33; color: #222;}
.r-dsu.free {background: #d1e7dd; color: #2e7d32;}
.r-dsu.premium::before {content: '\f521'; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: .6rem; vertical-align: 1px; color: #222;}
.dsu-title {margin-bottom: 15px;}
.dst {display: flex; align-items: center;}
.dsu-title h1 {font-size: 1.5rem; line-height: 1.1; font-weight: 700; color: #333;}
.l-dsu .dsu-title {margin-bottom: 0;}
.ds-date {font-size: .85rem; line-height: 1.1; color: rgba(0,0,0,.6); margin-top: 8px;}
.ds-welc {margin-top: 30px; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center;}
.r-upg a {font-size: .88rem; line-height: 1.1; font-weight: 500; padding: 12px 14px; background: #3169da; color: #fff; border-radius: 6px; display: inline-block;}
.r-upg a i {font-size: .82rem; color: #fecf33; margin-right: 2px;}
.r-upg a:hover {background: #285ecc;}
.du-img {position: relative;}
.edit-avatar {position: absolute; top: -2px; left: -2px;}
.edit-avatar a {width: 20px; height: 20px; font-size: .55rem; color: #fff; background: #565656; display: flex; justify-content: center; align-items: center; border-radius: 50%; position: relative;}
.ds-avatar {width: 60px; height: 60px; border: 1px solid #cfcfcf; margin-right: 15px; border-radius: 50%; overflow: hidden;}
.dash-welc h5 {font-size: 1rem; line-height: 1.2; font-weight: 400; color: #828282; margin-bottom: 2px;}
.dash-welc h4 {font-size: 1.4rem; line-height: 1.2; font-weight: 600; text-transform: capitalize;}
/** DS STATS **/
.dsm-all {display: flex; justify-content: flex-end; margin-bottom: 10px;}
.dsm-all a {font-size: .85rem; line-height: 1.1; color: #296eda; font-weight: 500;}
.dsm-all a:hover {text-decoration: underline;}
.swiper.ds-stats {overflow: visible;}
.ds-stats .swiper-wrapper {display: flex; margin: 0 -5px; width: inherit;}
.ds-stats .swiper-slide {width: 25%; padding: 0 5px;}
.ds-stats .item {display: flex;}
.dss-ico {max-width: 36px; margin-right: 15px;}
.dss-ico i {width: 36px; height: 36px; padding: 6px; color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 50%;}
.dss-ico.ss-all i {background: #ff947a;}
.dss-ico.ss-publ i {background: #3cd856;}
.dss-ico.ss-pend i {background: #fa5a7d;}
.dss-ico.ss-view i {background: #bf83ff;}
.ds-stats h4 {font-size: .9rem; line-height: 1.1; font-weight: 500; text-transform: uppercase; color: rgba(0,0,0,.5); margin-bottom: 5px;}
.ds-stats span {font-size: 1.5rem; line-height: 1.3; font-weight: 600;}
/** DS FORM BUTTON **/
.swiper.ds-form {overflow: visible;}
.ds-form .dsm-title {margin-bottom: 15px;}
.ds-form .swiper-wrapper {display: flex; margin: 0 -5px; width: inherit;}
.ds-form .swiper-slide {padding: 0 5px; width: 33.3333333%;}
.ds-form .item {padding: 20px; color: #000; height: 300px; background: #fff; border: 2px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px; transition: .3s ease;}
.ds-form .dsm-info h4 {font-size: 1.6rem; line-height: 1.3; font-weight: 600;}
.ds-form .dsm-info p {font-size: .96rem; line-height: 1.3; color: rgba(0,0,0,.75); margin: 8px 0 12px; max-width: 260px;}
.ds-form .btn {margin-top: 15px;}
.ds-form .btn a {padding: 10px 20px; font-size: 1rem; line-height: 1.1; font-weight: 500; color: #fff; width: 180px; border-radius: 4px; display: block; text-align: center;}
.dsm-balance {background: #efefff; padding: 4px 16px 6px; border-radius: 50px; display: inline-block; position: relative; z-index: 3;}
.dsm-balance strong {font-size: .78rem; line-height: 1.2; font-weight: 600;}
.ds-form .swiper-slide.biz .btn a {background: #0e6be6;}
.ds-form .swiper-slide.jobs .btn a {background: #009b5d;}
.ds-form .swiper-slide.deals .btn a {background: #cf2972;}
.ds-form .swiper-slide.biz .item::before, .ds-form .swiper-slide.jobs .item::before, .ds-form .swiper-slide.deals .item::before {width: 210px; height: 173px; position: absolute; display: block;}
.ds-form .swiper-slide.biz .item::before {bottom: -20px; right: -20px; content: ''; background: url('images/ds-biz.svg') no-repeat; background-size: contain;}
.ds-form .swiper-slide.jobs .item::before {bottom: -30px; right: -20px; content: ''; background: url('images/ds-jobs.svg') no-repeat; background-size: contain;}
.ds-form .swiper-slide.deals .item::before {bottom: -30px; right: -20px; content: ''; background: url('images/ds-deals.svg') no-repeat; background-size: contain;}
.ds-form .swiper-slide.biz .btn a:hover {background: #0c63d7;}
.ds-form .swiper-slide.jobs .btn a:hover {background: #078c57;}
.ds-form .swiper-slide.deals .btn a:hover {background: #c2256a;}
.ds-form .swiper-slide.biz .item:hover {border-color: #2174e1;}
.ds-form .swiper-slide.jobs .item:hover {border-color: #009b2f;}
.ds-form .swiper-slide.deals .item:hover {border-color: #c00e5c;}
/* FORM BUTTON POST LIMIT */
.ds-form .swiper-slide.disabled {cursor: not-allowed!important;}
.ds-form .swiper-slide.disabled .item {border-color: #ddd!important; pointer-events: none;}
.ds-form .swiper-slide.disabled .dsm-info, .ds-form .swiper-slide.disabled .item::before {opacity: 0.6;}
.ds-form .swiper-slide.disabled .btn a {background: #ccc!important; pointer-events: none; cursor: not-allowed!important;}
.ds-form .swiper-slide.disabled .dsm-balance {background: #ffe5e5; color: #eb0808;}
/* Limit reached: button span (non-clickable) */
.ds-form .btn .btn-limit {background: #ccc; color: #888; cursor: not-allowed; pointer-events: none; display: block; padding: 10px 20px; font-size: 1rem; line-height: 1.1; font-weight: 500; width: 180px; border-radius: 4px; text-align: center;}
/* Limit reached: usage badge merah */
.dsm-balance.over-limit {background: #ffe5e5!important; color: #eb0808!important;}
/*** DS SIDE ***/
.dss-box {padding: 20px; height: 100%;}
.dss-title {margin-bottom: 10px; padding: 0 10px;}
.dss-title h3 {font-size: .9rem; line-height: 1.2; font-weight: 600; text-transform: uppercase;}
.dss-nav li {margin: 3px 0;}
.dss-nav li a, .dss-nav .disabled span {font-size: .93rem; line-height: 1.2; font-weight: 400; color: #222; padding: 9px 10px; display: block; border-radius: 6px;}
.dss-nav li a:hover {background: #f0f3f7; color: #000;}
.dss-nav li a i, .dss-nav .disabled span i {margin-right: 3px; width: 18px; text-align: center;}
.dss-nav li a.current, .dss-nav li a.current:hover {background: #0e6be6; color: #fff; font-weight: 500;}
.dss-nav li.upgrd a {font-weight: 600;}
.dss-nav li.upgrd a i {color: #fecf33;}
.dss-btm {padding: 0 10px; margin-top: 20px;}
.dss-btm a {padding: 10px 0; font-size: .9rem; line-height: 1.2; color: #333; border: 1px solid #333; width: 100%; text-align: center; display: block; border-radius: 12px;}
.dss-btm a:hover {border-color: #222; background: #222; color: #fff;}
.ds-sep {padding: 12px 10px;}
.n-sep {border-top: 1px solid #ddd;}
.dss-upg {margin-top: 10px;}
.dss-upg a {background: #ffffff;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%); color: #000; padding: 30px 20px; border-radius: 16px; display: block; overflow: hidden; position: relative;}
.dss-upg a::before,
.dss-upg a::after {content: ""; position: absolute; width: 250px; height: 250px; background: rgba(255, 255, 255, .25); border-radius: 50%; z-index: 0;}
.dss-upg a::before {top: -170px; right: -100px;}
.dss-upg a::after {bottom: -160px; left: -120px;}
.dss-upg a * {position: relative; z-index: 1;}
.dss-upg a i {width: 40px; height: 40px; background: #fecf33; color: #222; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 15px;}
.dss-upg a h3 {font-size: 1.05rem; line-height: 1.2; font-weight: 700;}
.dss-upg a p {font-size: .9rem; line-height: 1.5; font-weight: 400; margin: 12px 0 25px;}
.dss-upg a .btn {padding: 12px 0; font-size: .95rem; line-height: 1.2; font-weight: 600; color: #222; background: #fecf33; border-radius: 6px; width: 100%; display: block; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; transition: .3s ease;}
.dss-upg a:hover .btn {box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}
/* -------------------------------------------------
 DASHBOARD NO PLAN
------------------------------------------------- */
.d-lock {filter: blur(4px); opacity: .3;}
.d-lock .ds-intro {border-color: #a4a4a4;}
.d-lock a:hover, .d-lock button:hover, .d-lock .btn:hover {background: inherit!important; color: inherit!important; text-decoration: none!important;}
.d-lock .item:hover {border-color: #ddd!important;}
.lock {position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); max-width: 600px; width: 100%; z-index: 9;}
.lock-o {max-width: 500px; background: rgba(255,255,255,.95); border-radius: 10px; padding: 40px; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;}
.lock-o img {width: 100px; height: auto; margin-bottom: 15px;}
.lock-o p {font-size: 1.2rem; line-height: 1.3;}
.lock-o .btn {margin-top: 20px;}
.lock-o .btn a {font-size: .95rem; line-height: 1.2; font-weight: 500; background: #0e6be6; color: #fff; padding: 12px 40px; border-radius: 30px; display: inline-block;}
.lock-o .btn a:hover {background: #2079ee;}
/* -------------------------------------------------
 DASHBOARD LISTING
------------------------------------------------- */
.sv-box {padding: 30px; background: #fff; border: 1px solid #ddd; border-radius: 8px;}
.o-plist {margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;}
.o-plist .dsu-title {margin-bottom: 0;}
/* -------------------------------------------------
 DASHBOARD FAVORITE
------------------------------------------------- */
.ds-fav .edl-action {width: 120px;}
.ds-fav .edl-action button {font-size: .76rem; text-transform: capitalize; padding: 8px 14px; border-radius: 3px; transition: .3s; width: inherit; display: inline-block;}
.ds-fav .edl-action button:hover {border-color: #333;}
.nofav img {max-width: 500px; height: auto; margin-bottom: 20px;}
.nofav-text p {font-size: 1rem; line-height: 1.4; text-align: center;}
.nofav .btn {margin-top: 20px; display: flex; justify-content: center;}
.nofav .btn a {padding: 10px 0; font-size: .9rem; line-height: 1.2; background: #0d0d0d; color: #fff; width: 180px; border-radius: 4px; display: block; text-align: center;}
.nofav .btn a:hover {background: #000;}
.v-login {width: 450px; padding: 40px;}
.v-login .ppl-title {margin-bottom: 25px;}
.v-login .ppl-title h3 {font-size: 1.5rem; line-height: 1.2; margin-bottom: 10px;}
.v-login .ppl-title p {font-size: .95rem; line-height: 1.4; color: rgba(0,0,0,.8);}
.v-login .dlg-btm {text-align: center;}
.v-login .closeModal {top: 0; right: 0; position: absolute;}
/* --------------------------------------------------
 FORM PAGE
-------------------------------------------------- */
.popup {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 9999;}
.popup-inner a.popup-close {position: absolute; top: 10px; right: 10px; font-size: 1rem; line-height: 1.1; font-weight: 600; color: #fff; text-transform: uppercase;}
.popup-inner a:hover.popup-close, .popup-inner a:hover.popup-close i {color: #1ab64f;}
.popup-slide-in {transform: translateX(0);}
.popup-slide-out {transform: translateX(100%);}
.vid-box {max-width: 950px; width: 100%; padding: 10px; background: #fff; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%);}
.vid-box .video {margin: 0;}
.d-form .box {display: grid; grid-template-columns: 380px 1fr; gap: 50px; position: relative; margin-bottom: 40px;}
.o-left {position: relative;}
.o-right {width: 100%; background: #fff;}
.o-left .s-box {position: sticky; top: 20px; transition: transform 0.3s ease;}
.o-left .back {margin: 30px 0;}
.back a {font-size: .86rem; line-height: 1.1; font-weight: 500; color: #222; border: 1px solid #333; padding: 6px 12px; border-radius: 4px; display: inline-block;}
.back a i {font-size: .65rem; vertical-align: .5px;}
.o-title {margin-bottom: 20px;}
.o-title h1 {font-size: 1.8rem; line-height: 1.2; margin-bottom: 15px;}
.o-title p {font-size: .96rem; line-height: 1.4; color: rgba(0,0,0,.7)}
.o-title a {margin-top: 15px; color: #222; font-size: .92rem; line-height: 1.3; font-weight: 500; display: inline-block;}
.of-nav {padding-top: 15px; border-top: 1px solid #ddd;}
.of-nav ul {max-width: 260px;}
.of-nav li a {padding: 8px 10px; font-size: .95rem; line-height: 1.2; font-weight: 500; color: #222; display: block;}
.of-nav li a i {width: 20px; height: auto; text-align: center; margin-right: 4px;}
.of-nav li a.current {background: #0478d1; color: #fff; border-radius: 4px;}
.o-right .back {display: none;}
/* -------------------------------------------------
 DASHBOARD MY PLAN
------------------------------------------------- */
.cplan {background: #fff; border-radius: 8px; border: 1px solid #ddd; border-left: none; overflow: hidden; box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;}
.cplan .box {display: grid; grid-template-columns: 350px 1fr;}
.cplan .row {border-left: 1px solid #ddd;}
.cplan .plan-card {padding: 40px;}
.cplan .plan-content {padding: 40px 4em;  color: rgba(0,0,0,.8)}
.plan-status {font-size: .75rem; line-height: 1.3; font-weight: 500; padding: 6px 12px; border-radius: 6px; display: inline-block;}
.plan-status.active {background: #212121; color: #fff;}
.plan-status.active::before {content: '\f0e7'; font: var(--fa-font-solid); color: #eaa128; font-size: .65rem; margin-right: 5px;}
.plan-badge {margin: 10px 0 20px;}
.plan-badge h3 {font-size: 2.2rem; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px;}
.plan-badge h4 {font-size: .8rem; line-height: 1.2; font-weight: 500; padding: 6px 12px; background: #ededed; color: #000; border-radius: 30px; display: inline-block;}
.plan-info ul {display: flex; flex-direction: column; gap: 5px;}
.plan-info li {font-size: .85rem; line-height: 1.3; color: rgba(0,0,0,.8);}
.plan-info li strong {font-weight: 600;}
.plan-inv {margin-top: 15px;}
.plan-inv a {font-size: .85rem; line-height: 1.2; font-weight: 500; background: #2f3133; color: #fff; padding: 10px 20px; border-radius: 30px; display: inline-block;}
.plan-inv a i {margin-right: 2px;}
.plan-inv a:hover {background: #000;}
.usage-summary {margin-top: 25px; padding: 25px; background: #ffffff; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, .5) 100%); border: 1px solid #ccc; border-radius: 8px;}
.usage-summary h4 {font-size: 1rem; line-height: 1.2; margin-bottom: 10px;}
.usage-row {display: flex; flex-direction: column;}
.usage-item {font-size: .95rem; line-height: 1.3; padding: 12px 0; border-bottom: 1px solid #ccc; display: flex; align-items: center; justify-content: space-between;}
.usage-item:last-child {border-bottom: none; padding-bottom: 0;}
.usage-type {font-weight: 500;}
.usage-count {font-size: .85rem; font-weight: 600; padding: 4px 12px; border-radius: 50px; display: inline-block;}
.usage-count span {margin: 0 1px;}
.usage-count.biz {background: #e4ecf9; color: #0e4ecc;}
.usage-count.jobs {background: #e9fbee; color: #009b5d;}
.usage-count.deals {background: #ffedf5; color: #cf2972;}
.pc-title {margin-bottom: 25px;}
.pc-title h3 {font-size: 1.6rem; line-height: 1.2; font-weight: 700; margin-bottom: 10px;}
.pc-title p {font-size: .96rem; line-height: 1.4;}
.pc-title p strong {font-weight: 600;}
.plan-content ul {margin-top: 15px;}
.plan-content li {padding-left: 24px; font-size: 1rem; line-height: 1.4; font-weight: 500;; position: relative; margin: 12px 0;}
.plan-content li:last-child {margin-bottom: 0;}
.plan-content li::before {content: '\f00c'; font: var(--fa-font-solid); color: #00bb45; top: 3px; left: 0; position: absolute;}
.plan-content .btn {margin-top: 25px;}
.plan-content .btn a {padding: 12px 0; background: #009B5D; color: #fff; font-size: 1rem; line-height: 1.1; font-weight: 500; width: 100%; display: block; text-align: center; border-radius: 4px;}
.plan-content .btn a:hover {background: #018e56;}
/* ------------------------------------------------- 
 SUBSCRIPTION PLAN ELEMENTOR
------------------------------------------------- */
.plp-list {border-top: 1px solid #ddd; padding-top: 30px;}
.plp-list ul {margin: 0!important; padding: 0!important; list-style: none!important;}
.plp-list ul li {margin-bottom: 5px!important; color: #000; padding-left: 26px; position: relative; list-style: none;}
.plp-list ul li::before {content: "\f00c"; font-size: 1rem; font-family: "Font Awesome 6 Pro"; font-weight: 900; color: #00bb45; position: absolute; left: 0; top: 0;}
.plp-list ul li.no {font-weight: 400;}
.plp-list ul li.no, .plp-list li.no::before {color: #a4a4a4;}
.plp-list ul li.no::before {content: "\f00d"; margin: 0 14px 0 2px;}
.spl {max-width: 1000px; margin: 0 auto;}
.spl .box {display: flex; align-items: flex-end;}
.spl-row.prem {width: 60%;}
.spl-row.free {width: 40%; margin-left: 10px;}
.spl-top {display: flex; justify-content: space-between; align-items: center; background: #FFCF40; color: #000; font-size: .88rem; line-height: 1.2; padding: 6px 30px; border-top-left-radius: 4px; border-top-right-radius: 4px;}
.spl-col {padding: 30px; background: #fff; border: 2px solid #E8E8E8;}
.spl-row.prem .spl-col {border-color: #FFCF40; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}
.spl-row.free .spl-col {border-radius: 4px;}
.spl-t h4 {font-size: 1.6rem; line-height: 1.2; margin-bottom: 6px; display: flex; align-items: center; }
.spl-t h4 span {font-size: .6rem; line-height: 1.1; font-weight: 500; text-transform: uppercase; background: #d51438; color: #fff; padding: 6px 10px; border-radius: 30px; display: inline-block; margin-left: 10px;}
.spl-t p {font-size: .95rem; line-height: 1.3; color: #5B5B5B;}
.spl-p {margin-top: 20px;}
.pl-disc {font-size: 1.2rem; line-height: 1.3; text-decoration: line-through; color: #A9A9A9; margin-bottom: -5px;}
.pl-price span {font-weight: 400;}
.pl-price span.rm {font-weight: 500; vertical-align: 22px;}
.pl-label {margin-bottom: 25px; font-size: .85rem; font-weight: 500; line-height: 1.2; padding: 8px 16px; background: #f6f6f6; color: #222; border: 1px solid #ddd; border-radius: 50px; display: inline-block;}
.pl-price b {font-size: 2.8rem;}
.pl-btn a {font-size: .96rem; line-height: 1.2; font-weight: 600; padding: 14px 0; width: 100%!important; display: block; border-radius: 6px; text-align: center;}
.spl-row.prem .pl-btn a {background: #FFCF40; color: #000;}
.spl-row.free .pl-btn a {background: #0E6BE6; color: #fff;}
.spf {max-width: 1100px; margin: 0 auto; padding-top: 60px;}
.spf-top {display: flex; justify-content: space-between;}
.spf-t h3 {font-size: 1.4rem; line-height: 1.2; color: #000;}
.spf-t a {font-size: .9rem; line-height: 1.2; color: #0E6BE6; border-bottom: 1px solid #0E6BE6; padding-bottom: 2px; display: none; margin-top: 6px;}
.spfp h4 {font-size: 1.4rem; line-height: 1.2;}
.spfp .btn {margin-top: 15px;}
.spfp .btn a {width: 200px; padding: 12px; font-size: .9rem; line-height: 1; font-weight: 500; text-align: center; border-radius: 4px; display: block; margin: 0 auto;}
.spfp .btn a.prem {background: #FFCF40; color: #000;}
.spfp .btn a.free {background: #0E6BE6; color: #fff;}
.spf-row {margin-bottom: 30px;}
.spr-title {margin-bottom: 10px; border-bottom: 2px solid #0E6BE6; padding-bottom: 10px;}
.spr-title h4 {font-size: 1.3rem; line-height: 1.2; color: #0E6BE6;}
.spf-row li {display: flex; justify-content: space-between; font-size: 1rem; line-height: 1.3; color: #000; padding: 10px;}
.spf-row li:nth-child(even) {background: #eff1f6;}
.spf-row li .spr-t, .spf-t {width: 50%;}
.spf-row li .spr-pr, .spf-row li .spr-fr, .spfp {width: 25%; text-align: center;}
.spf-row li i {font-size: 1.2rem;}
.spf-row li .fa-circle-check {color: #12ac4f;}
.spf-row li .fa-circle-xmark {color: #e10010;}
.fixed-spfp {position: fixed; top: 0; left: 50%; transform: translateX(-50%); padding: 10px 0; width: 100%; max-width: 1100px; background: white; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); z-index: 1000; }
.spf-top.fixed-spfp {}
.spf-top.fixed-spfp .spf-t {padding: 10px 20px;}
.spf-top.fixed-spfp .spf-t h3 {font-size: 1.2rem;}
.spf-top.fixed-spfp .spf-t a {display: inline-block;}
.spf-top.fixed-spfp .spfp h4 {font-size: 1.1rem;}
.spf-top.fixed-spfp .spfp .btn {margin-top: 10px;}
.spf-top.fixed-spfp .spfp .btn a {font-size: .85rem; padding: 10px;}

.ds-entry p {font-size: .92rem; line-height: 1.35;}
.ds-entry .section {margin-bottom: 30px;}
.ds-entry .section h3 {font-size: 1.1rem; line-height: 1.3; font-weight: 600; border-bottom: 1px solid #ddd; padding-bottom: 8px; margin-bottom: 15px;}
/* --------------------------------------------------
 DASHBOARD HELP
-------------------------------------------------- */
.help-title {max-width: 800px; margin: 0 auto 35px;}
.help-title h3 {font-size: 2rem; line-height: 1.2; text-align: center; margin-bottom: 8px;}
.help-title p {font-size: .98rem; line-height: 1.4; text-align: center; margin-bottom: 10px;}
.help-title p:last-child {margin-bottom: 0;}
.o-help .wpcf7 {margin: 0 auto; max-width: 650px;}
.o-help .wpcf7-form label {text-align: left;}
.o-help .wpcf7-form .row input, .o-help .wpcf7-form .row textarea {font-size: .95rem; line-height: 1.2; padding: 12px 14px;}
.o-help .wpcf7-form .row input:hover {outline: none; border-color: #b3b3b3;}
.o-help .wpcf7-form .row input:focus {outline: none; border-color: #0073aa;}
.o-help .wpcf7-form .row textarea {height: 200px;}
.o-help .wpcf7-form .button {}
.o-help .wpcf7-form .button input {padding: 14px 0;}
.o-help .wpcf7-form .row.note-short textarea {height: 130px;}
/* --------------------------------------------------
 DASHBOARD DELETE ACCOUNT
-------------------------------------------------- */
.ca {font-size: .94rem; line-height: 1.4; max-width: 800px; margin: 0 auto;}
.ca-warning {background: #ffecec; font-size: .9rem; line-height: 1.35; font-weight: 500; color: #e30c11; padding: 12px; border-radius: 6px; margin-bottom: 20px;}
.ca-title {margin-bottom: 30px;}
.ca-title h3 {font-size: 1rem; line-height: 1.2; font-weight: 600; margin-bottom: 5px;}
.ca .row label, .ca .wpcf7-form label {font-size: .94rem;}
.ca .row input, .ca .wpcf7-form .row textarea {padding: 12px 14px; font: .94rem 'Inter', sans-serif;}
.ca .row.readonly {margin-bottom: 20px;}
.ca .row.readonly label {width: 100%; line-height: 1.2; font-weight: 600; margin-bottom: 8px; display: block;}
.ca .row.readonly input {font-weight: 400; border-radius: 5px; width: 100%; outline: none!important; border: 2px solid #d4d8dc; background-color: #f5f5f5; color: #666; cursor: not-allowed; border-color: #ddd;}
.ca .wpcf7-radio {display: flex; flex-direction: column; gap: 10px;}
.ca .wpcf7-list-item {display: block; width: 100%;}
.ca .row.sep-btm, .ca .wpcf7-form .row.sep-btm {margin-bottom: 30px;}
.ca .wpcf7-form .row textarea {height: 100px;}
.ca-notice {margin-bottom: 10px;}
.ca-notice h4 {margin-bottom: 5px;}
.ca-notice ul {margin: 5px 0 10px; padding-left: 18px;}
.ca-notice ul li {list-style: disc;}
.ca-notice span {color: #ff0000; font-weight: 500;}
.ca-btn input {font-size: .9rem; line-height: 1.2; font-weight: 500; background: #ce3635; color: #fff; padding: 12px 18px; border-radius: 6px; border: none; display: inline-block; transition: .3s; cursor: pointer;}
.ca-btn input:hover {background: #d54645;}
.ca-note {margin-top: 10px; font-size: .86rem; line-height: 1.3; font-style: italic; color: rgba(92,92,92,1.00);}
/* --------------------------------------------------
 PAYMENT HISTORY
-------------------------------------------------- */
.pay-history {}

@keyframes slideDown {
 from { opacity: 0; transform: translateY(-20px); }
 to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
 to { opacity: 0; transform: translateY(-20px); margin-bottom: 0; padding-top: 0; padding-bottom: 0; max-height: 0; overflow: hidden; }
}
/* ─────────────────────────────────────────
   NEXHUB DASHBOARD — PLUGIN ADDITIONS
───────────────────────────────────────── */
/* Admin tabs */
.nx-admin-tabs {display:flex;gap:6px;margin-top:16px;border-bottom:2px solid #ddd;padding-bottom:0;}
.nx-atab {font-size:.9rem;font-weight:600;color:#666;padding:10px 20px;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;margin-bottom:-2px;transition:.2s;}
.nx-atab--active,.nx-atab.nx-atab--active {color:#0e6be6;border-bottom-color:#0e6be6;}
.nx-atab:hover {color:#0e6be6;}
/* Live clock */
.nx-clock {font-size:.85rem;color:rgba(0,0,0,.6);}
/* Dashboard wrapper */
.nx-ds {position:relative;}
/* Listings table type badge colours */
.edl-type span.Business {background:#e4ecf9;color:#0e4ecc;}
.edl-type span.Jobs     {background:#e9fbee;color:#009b5d;}
.edl-type span.Deals    {background:#ffedf5;color:#cf2972;}
/* Admin tab panel */
.nx-atab-panel {animation:nx-fadein .2s ease;}
@keyframes nx-fadein{from{opacity:0}to{opacity:1}}
/* Sidebar disabled items */
.dss-nav li.disabled span {color:#aaa;cursor:not-allowed;}
.dss-nav li.disabled span i {color:#aaa;}
/* User table action buttons */
.edl-action-btn {display:flex;gap:4px;}
/* eds-one colours */
.eds-one.premium strong,.eds-one.premium span {color:#222;}
.eds-one.premium {background:#fef9e7;border-radius:4px;padding:4px 8px;}
.eds-one.free {background:#d1e7dd;border-radius:4px;padding:4px 8px;}

/* =============================================================
   SKELETON PLACEHOLDER — ds-stats & ds-form (dari theme forbiz)
   ============================================================= */
.v-post {transition: height 0.3s ease;}
.v-post a {opacity: 0; transition: opacity 0.3s ease;}
.p-ph {background: #f6f6f6; border-radius: 8px;}
.ds-stats .p-ph {height: 94px;}
.ds-form .p-ph {height: 300px;}

/* =============================================================
   DASHBOARD SPA NAVIGATION — Page Loader Overlay
   Shown while AJAX fetches a new dashboard section.
   Overlay covers full .ds-content area, sidebar stays visible.
   ============================================================= */

/* .ds-content is the positioning context for the overlay */
.dash.nx-ds .ds-content {
    position: relative;
}

/* Overlay — hidden by default, fades in via opacity transition */
.nx-page-loader {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.nx-page-loader.is-visible {
    opacity: 1;
    pointer-events: all;
}

/* Spinner + label */
.nx-page-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.nx-page-loader__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--nx-border);
    border-top-color: var(--nx-primary);
    border-radius: 50%;
    animation: nx-spin 0.7s linear infinite;
}
.nx-page-loader__text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nx-muted);
    letter-spacing: 0.01em;
}
@keyframes nx-spin {
    to { transform: rotate(360deg); }
}

/* New content fade-in after swap */
.nexhub-dashboard-content {
    transition: opacity 0.18s ease;
}
.nexhub-dashboard-content.nx-fade-out {
    opacity: 0;
}
.nexhub-dashboard-content.nx-fade-in {
    opacity: 1;
}

/* Body scroll lock while AJAX navigation is in progress */
body.nexhub-loading {
    overflow: hidden;
}

/* Active sidebar link highlight — .active on <li> and .current on <a> */
.dss-nav li.active > a,
.dss-nav li.active > span,
.dss-nav a.current {
    background: var(--nx-primary-bg);
    color: var(--nx-primary);
    border-radius: var(--nx-radius);
}
.dss-nav li.active > a i,
.dss-nav li.active > span i,
.dss-nav a.current i {
    color: var(--nx-primary);
}

/* =============================================================
   ACCOUNT PAGE
   /dashboard/?page=account
   ============================================================= */

/* ── Account Page ──────────────────────────────────────────────── */

.nx-account-wrap {
    width: 100%;
    max-width: 100%;
}

/* Main card */
.nx-acct-card {
    background: #fff;
    border: 1px solid #e4e5e7;
    border-radius: 10px;
    overflow: visible;
    margin-bottom: 24px;
}

/* Table-style rows */
.nx-acct-table-form {
    width: 100%;
}

.nx-acct-tr {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: start;
    border-bottom: 1px solid #f0f0f2;
    padding: 18px 28px;
    gap: 20px;
}

.nx-acct-tr:first-child {
    border-radius: 10px 10px 0 0;
}

.nx-acct-tr:last-child {
    border-bottom: none;
    border-radius: 0 0 10px 10px;
}

.nx-acct-th {
    font-size: .875rem;
    font-weight: 600;
    color: #111827;
    padding-top: 9px;
}

.nx-acct-th label {
    font-weight: 600;
    color: #111827;
    cursor: default;
}

.nx-acct-req {
    color: #ef4444;
    margin-left: 2px;
}

/* Inputs */
.nx-acct-input {
    width: 100%;
    padding: 11px 12px;
    font-size: .935rem;
    line-height: 1.2;
    border: 2px solid #d4d8dc;
    border-radius: 6px;
    background: #fff;
    color: #111;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.nx-acct-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

/* Password row */
.nx-acct-pw-wrap {
    position: relative;
}

.nx-acct-pw-wrap .nx-acct-input {
    padding-right: 40px;
}

.nx-acct-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: .9rem;
    padding: 0;
    line-height: 1;
}

.nx-acct-eye:hover { color: #374151; }

.nx-acct-hint {
    font-size: .78rem;
    color: #6b7280;
    margin-top: 5px;
}

/* Password match message */
.nx-acct-match-msg {
    font-size: .78rem;
    font-weight: 500;
    margin-top: 5px;
    display: none;
}
.nx-acct-match-msg--ok  { color: #16a34a; }
.nx-acct-match-msg--err { color: #dc2626; }

.nx-input-match    { border-color: #16a34a !important; }
.nx-input-mismatch { border-color: #dc2626 !important; }

/* Strength meter */
.nx-acct-strength-wrap {
    margin-top: 6px;
}

.nx-acct-strength-bars {
    display: flex;
    gap: 4px;
}

.nx-acct-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #e5e7eb;
    transition: background .2s;
}

.nx-acct-strength-wrap small {
    font-size: .75rem;
    display: block;
    margin-top: 3px;
    font-weight: 500;
}

/* Avatar row — override widget defaults */
.nx-acct-img-row #nxu-avatar-card {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: none;
    border: none;
    padding: 0;
}

.nx-acct-img-row .nxu-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e4e5e7;
    flex-shrink: 0;
}

.nx-acct-img-row .nxu-avatar-name,
.nx-acct-img-row .nxu-avatar-desc {
    display: none;
}

.nx-acct-img-row .nxu-avatar-actions {
    flex: 1;
    min-width: 160px;
}

.nx-acct-img-row .nxu-btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.nx-acct-img-row .nxu-file-input {
    display: none;
}

.nx-acct-img-row .nxu-btn {
    font-size: .82rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s, border-color .15s;
}

.nx-acct-img-row .nxu-btn svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nx-acct-img-row .nxu-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.nx-acct-img-row .nxu-btn-remove {
    color: #dc2626;
    border-color: #fca5a5;
}

.nx-acct-img-row .nxu-btn-remove:hover {
    background: #fff5f5;
    border-color: #dc2626;
}

.nx-acct-img-row .nxu-notice {
    font-size: .8rem;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 6px;
    display: none;
}

.nx-acct-img-row .nxu-avatar-hint {
    font-size: .75rem;
    color: #9ca3af;
    margin: 0;
}

/* Feedback message */
.nx-acct-msg {
    margin: 0;
    padding: 12px 28px;
    font-size: .875rem;
    font-weight: 500;
    border-bottom: 1px solid transparent;
}

.nx-acct-msg--success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.nx-acct-msg--error {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #be123c;
}

/* Submit row */
.nx-acct-submit-row .nx-acct-td {
    display: flex;
    justify-content: flex-end;
}

.nx-acct-btn-primary {
    padding: 10px 26px;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    background: #111827;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background .2s, opacity .2s;
}

.nx-acct-btn-primary:hover { background: #1f2937; }
.nx-acct-btn-primary:disabled { opacity: .55; cursor: not-allowed; }

/* Date of Birth custom picker */
.nx-dob-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 320px;
}
.nx-dob-text-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='1.8'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 36px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.nx-dob-picker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #d4d8dc;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
    width: 100%;
    min-width: 260px;
    padding: 12px;
    box-sizing: border-box;
}
.nxdp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 6px;
}
.nxdp-nav {
    background: none;
    border: 1px solid #e2e6ea;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
    font-size: .78rem;
    flex-shrink: 0;
    transition: background .15s;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    line-height: 1;
}
.nxdp-nav:hover { background: #f3f4f6; }
.nxdp-title {
    display: -webkit-flex;
    display: flex;
    gap: 6px;
    flex: 1;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.nxdp-month-sel,
.nxdp-year-sel {
    border: 1px solid #d4d8dc;
    border-radius: 5px;
    font-size: .82rem;
    font-weight: 600;
    color: #1f2937;
    padding: 4px 22px 4px 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 7px center;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 1.4;
    height: 30px;
    box-sizing: border-box;
}
.nxdp-month-sel { min-width: 90px; }
.nxdp-year-sel  { min-width: 58px; }
.nxdp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.nxdp-dow {
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    color: #9ca3af;
    padding: 4px 0;
}
.nxdp-day {
    text-align: center;
    font-size: .82rem;
    line-height: 1;
    padding: 6px 2px;
    border-radius: 5px;
    cursor: pointer;
    color: #1f2937;
    transition: background .12s, color .12s;
}
.nxdp-day:hover:not(.nxdp-disabled):not(.nxdp-empty) { background: #eff6ff; color: #1d4ed8; }
.nxdp-empty { cursor: default; }
.nxdp-disabled { color: #d1d5db; cursor: not-allowed; }
.nxdp-today { font-weight: 700; color: #2563eb; }
.nxdp-selected { background: #2563eb !important; color: #fff !important; font-weight: 700; border-radius: 5px; }

/* Safari / iOS compatibility fixes for Account Settings form */
.nx-acct-input,
.nx-acct-input[type="text"],
.nx-acct-input[type="email"],
.nx-acct-input[type="password"],
.nx-acct-input[type="tel"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 6px;
    font-size: .935rem;
    line-height: 1.4;
    min-height: 44px;
    box-sizing: border-box;
}

.nx-acct-eye {
    min-width: 44px;
    min-height: 44px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    right: 0;
    top: 0;
    transform: none;
    height: 100%;
}

.nx-acct-btn-primary {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 6px;
    min-height: 44px;
    cursor: pointer;
    font-size: .935rem;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.nx-acct-btn-danger {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 6px;
    min-height: 44px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.nxu-btn {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 6px;
    min-height: 40px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.nx-dob-text-input {
    min-height: 44px;
    line-height: 1.4;
}

/* Delete Account box */
.nx-acct-delete-box {
    background: #fff;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    overflow: hidden;
    max-width: 600px;
}

.nx-acct-delete-head {
    padding: 14px 24px;
    border-bottom: 1px solid #fecaca;
    background: #fff5f5;
}

.nx-acct-delete-head h3 {
    font-size: .95rem;
    font-weight: 700;
    color: #991b1b;
    margin: 0;
}

.nx-acct-delete-body {
    padding: 20px 24px;
}

.nx-acct-delete-body p {
    font-size: .875rem;
    color: #4b5563;
    line-height: 1.55;
    margin: 0 0 16px;
}

.nx-acct-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    font-size: .875rem;
    font-weight: 500;
    color: #dc2626;
    background: #fff;
    border: 1px solid #fca5a5;
    border-radius: 7px;
    text-decoration: none;
    transition: background .2s, border-color .2s;
    cursor: pointer;
}

.nx-acct-btn-danger:hover {
    background: #fff5f5;
    border-color: #dc2626;
    color: #dc2626;
}

/* Responsive */
@media (max-width: 680px) {
    .nx-acct-tr {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 16px 18px;
    }
    .nx-acct-th {
        padding-top: 0;
    }
    .nx-acct-submit-row .nx-acct-td {
        justify-content: flex-start;
    }
    .nx-acct-img-row #nxu-avatar-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .nx-dob-wrap {
        max-width: 100%;
    }
    .nx-dob-picker {
        width: 100%;
        left: 0;
        right: 0;
    }
}

/* =============================================================
   My Plan Page  [dashboard/my-plan]
   ============================================================= */

.nexhub-myplan {
    display: flex;
    gap: 0;
    background: #fff;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}

.nxmp-left {
    flex: 0 0 300px;
    min-width: 0;
    padding: 28px 24px;
    border-right: 1px solid var(--nx-border);
}

.nxmp-right {
    flex: 1;
    min-width: 0;
    padding: 28px 32px;
}

.nxmp-active-badge {
    display: inline-block;
    background: #111;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: .02em;
    margin-bottom: 10px;
}

.nxmp-plan-name {
    font-size: 2rem;
    font-weight: 800;
    color: #111;
    line-height: 1.1;
    margin-bottom: 8px;
}

.nxmp-lifetime-label {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    font-size: .8rem;
    font-weight: 500;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.nxmp-meta {
    margin-bottom: 20px;
}

.nxmp-meta p {
    font-size: .85rem;
    color: #374151;
    margin: 0 0 4px;
    line-height: 1.5;
}

.nxmp-meta strong {
    font-weight: 700;
    color: #111;
}

.nxmp-usage-box {
    background: #f8fafc;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    padding: 16px;
}

.nxmp-usage-title {
    font-size: .85rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 12px;
}

.nxmp-usage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--nx-border);
    font-size: .88rem;
}

.nxmp-usage-row:last-child {
    border-bottom: none;
}

.nxmp-usage-label {
    color: #374151;
}

.nxmp-usage-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 700;
}

.nxmp-usage-business {
    background: #eff6ff;
    color: #2563eb;
}

.nxmp-usage-jobs {
    background: #f0fdf4;
    color: #16a34a;
}

.nxmp-usage-deals {
    background: #fff1f2;
    color: #dc2626;
}

.nxmp-right-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111;
    margin: 0 0 10px;
    line-height: 1.2;
}

.nxmp-right-desc {
    font-size: .9rem;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 20px;
}

.nxmp-right-desc strong {
    color: #111;
}

.nxmp-features-heading {
    font-size: .9rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 14px;
}

.plan-features {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.plan-features li {
    position: relative;
    padding: 5px 0 5px 26px;
    font-size: .9rem;
    color: #374151;
    line-height: 1.5;
}

.plan-content li::before {
    content: '\f00c';
    font: var(--fa-font-solid);
    color: #00bb45;
    position: absolute;
    left: 0;
    top: 3px;
}

.plan-features li:first-child { padding-top: 0; }

.nxmp-upgrade-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: #16a34a;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    padding: 14px 20px;
    border-radius: var(--nx-radius);
    text-decoration: none;
    transition: background .2s;
    margin-top: 4px;
}

.nxmp-upgrade-btn:hover {
    background: #15803d;
    color: #fff;
}

@media (max-width: 768px) {
    .nexhub-myplan {
        flex-direction: column;
    }
    .nxmp-left {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--nx-border);
    }
    .nxmp-right {
        padding: 24px 20px;
    }
}

.spl-current-plan,
.pl-btn button.spl-current-plan,
.spfp .btn button.free.spl-current-plan {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: #fff;
    color: #a8a7a7;
    border: 1px solid #ddd;
    border-radius: var(--nx-radius);
    font-size: .9rem;
    font-weight: 600;
    cursor: default;
    pointer-events: none;
}

.spl-back-bar {
    margin-bottom: 16px;
}

.spl-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--nx-primary);
    text-decoration: none;
}

.spl-back-btn:hover {
    color: var(--nx-primary-dk);
    text-decoration: underline;
}

.usage-item {
    margin-bottom: 14px;
}

.usage-header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 6px;
}

.usage-bar {
    width: 100%;
    height: 6px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
}

.usage-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.usage-fill.green { background: #22c55e; }
.usage-fill.orange { background: #f59e0b; }
.usage-fill.red { background: #ef4444; }

.plan-name {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.plan-badge {
    background: #111;
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.usage-box {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 16px;
    margin-top: 20px;
    background: #fafafa;
}

.plan-details {
    padding: 20px 30px;
}

.plan-details p {
    color: #666;
    margin-bottom: 20px;
}

.btn-upgrade {
    display: block;
    width: 100%;
    background: #16a34a;
    color: #fff;
    padding: 14px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    margin-top: 20px;
}

/* =========================================================
   Listings Page — migrated from forbiz-old/assets/dashboard.css
   ========================================================= */

/* Add buttons bar */
.o-plist {margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;}
.o-plist .dsu-title {margin-bottom: 0;}
.edl-add-btns {display: flex; flex-wrap: wrap; gap: 8px;}
.edl-add-btn {display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; line-height: 1; font-weight: 600; padding: 10px 16px; border-radius: 4px; text-decoration: none; transition: .2s ease; cursor: pointer;}
.edl-add-btn--biz {background: #0e6be6; color: #fff;}
.edl-add-btn--biz:hover {background: #0c63d7; color: #fff;}
.edl-add-btn--jobs {background: #009b5d; color: #fff;}
.edl-add-btn--jobs:hover {background: #008c54; color: #fff;}
.edl-add-btn--deals {background: #cf2972; color: #fff;}
.edl-add-btn--deals:hover {background: #c2256a; color: #fff;}
.edl-add-btn--disabled {background: #ccc !important; color: #999 !important; cursor: not-allowed; pointer-events: none;}

/* Search + rows bar */
.edl-top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}
.ed-search {width: 450px; position: relative;}
.ed-search input {font-size: .9rem; padding: 10px 10px 10px 14px; border: 1px solid #ccc; border-radius: 4px; width: 100%; transition: .3s;}
.ed-search input:hover {border-color: #9c9c9c;}
.ed-search input:focus {border-color: #333;}
.ed-search .search-clear {position: absolute; right: 30px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 1.3rem; color: #0052e9; display: none; user-select: none; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 18px;}
.ed-search input:not(:placeholder-shown) + .search-clear {display: block;}
.ed-search::after {content: '\f002'; font-family: 'Font Awesome 6 Pro'; font-weight: 500; font-size: .9rem; color: #585858; top: 8.5px; right: 10px; position: absolute;}
.ed-sortpage {font-size: .9rem;}
.cbp-page {position: relative;}
.cbp-page label {font-size: .8rem; font-weight: 600;}
.cbp-page select {font-size: .85rem; padding: 6px 22px 6px 8px; border: 1px solid #cdcfd5; border-radius: 4px; background-image: none;}
.cbp-page::after {content: '\f078'; font-family: 'Font Awesome 6 Pro'; font-weight: 500; font-size: .6rem; color: #222; position: absolute; top: 8px; right: 8px; cursor: pointer; pointer-events: none; transition:.25s all ease;}

/* Table */
.sv-box {padding: 30px; background: #fff; border: 1px solid #ddd; border-radius: 8px;}
.edl-list table {font-size: .9rem; width: 100%; background: #fff; border: 1px solid #ddd; border-radius: 6px; border-bottom: none; border-spacing: 0; overflow: hidden;}
.edl-list thead tr {background: #f4f6f9;}
.edl-list th {font-size: .88rem; line-height: 1.2; font-weight: 600; padding: 14px 10px; text-align: center;}
.edl-list tr {text-align: left;}
.edl-list tr td {transition: .3s;}
.edl-list tr:hover td {background: #fffff5;}
.edl-list th, .edl-list td {border-bottom: 1px solid #cdcfd5;}
.edl-list td {padding: 15px 5px; text-align: center;}
.edl-list .edl-no {width: 30px;}
.edl-list .edl-logo {width: 75px;}
.edl-list .edl-logo .ed-logo {width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; background: #fff; border: 0.5px solid rgba(0,0,0,.38); border-radius: 6px; overflow: hidden; text-align: center;}
.edl-list .edl-logo img {width: auto; max-height: 65px;}
.edl-list td.edl-post {text-align: left; padding-left: 10px;}
.edl-list .edl-post a h4 {font-size: .92rem; line-height: 1.4; font-weight: 500; color: #000; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.edl-list .edl-post a .edl-meta {font-size: .8rem; line-height: 1.2; color: rgba(0,0,0,.6); margin: 3px 0 6px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.edl-list .edl-post a .edl-meta span {font-size: .5rem; margin: 0 2px; vertical-align: 2px;}
.edl-list .edl-post a .post-cat {font-size: .8rem; line-height: 1.2; color: #737373;}
.edl-list .edl-post a .post-cat ul {display: flex; gap: 15px;}
.edl-list .edl-post a .post-cat ul li {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.edl-list .edl-post a .post-cat ul li.dsl-inds {max-width: 250px;}
.edl-list .edl-post a .post-cat ul li.dsl-state {min-width: 150px;}
.edl-list .edl-post a .post-cat .fa-briefcase {margin-right: 2px;}
.edl-list .edl-type {width: 100px;}
.edl-list td.edl-type span {font-size: .78rem; line-height: 1.2; font-weight: 500; padding: 6px 10px; border-radius: 20px; display: inline-block;}
.edl-list .edl-type .Business {background: #e4ecf9; color: #0e4ecc;}
.edl-list .edl-type .Jobs {background: #e9fbee; color: #009b5d;}
.edl-list .edl-type .Deals {background: #ffedf5; color: #cf2972;}
.edl-list .edl-view {font-size: .8rem; width: 130px;}
.edl-list .edl-status {font-size: .8rem; font-weight: 600; text-transform: uppercase; width: 80px; text-align: center;}
.edl-list .edl-status.publish {color: #33CC33;}
.edl-list .edl-status.pending {color: #C00202;}
.edl-list .edl-status.draft {color: #585858;}
.edl-list .edl-feat {width: 100px;}
.edl-list .edl-action {width: 80px; text-align: center;}
.edl-action-btn {display: flex; flex-direction: column; align-items: center;}
.edl-action a, .edl-action button {width: 60px; font-size: .6rem; line-height: 1; font-weight: 400; padding: 5px 10px; vertical-align: 1px; text-align: center; color: #000; text-decoration: none; display: inline-block; border-radius: 2px; text-transform: uppercase; border: 1px solid #828282; background: #efefef;}
.edl-action a.btn-edit {margin-bottom: 3px;}

/* Pagination */
.edl-pagination {display: flex; gap: 5px; margin-top: 15px;}
.edl-pagination button {font-size: .85rem; padding: 6px 10px; border: 1px solid #ccc; background-color: #fff; cursor: pointer; border-radius: 4px;}
.edl-pagination button:hover {background-color: #f0f0f0;}
.edl-pagination button.active {background-color: #0e6be6; color: #fff; border-color: #0e6be6;}
.edl-pagination button.prev-btn, .edl-pagination button.next-btn {border: none;}

/* Sortable headers */
.sortable span {font-size: .7rem; vertical-align: .5px; opacity: 0.5;}
.sortable, .sortable span {cursor: pointer;}
.sortable.sort-asc span, .sortable.sort-desc span {opacity: 1;}

/* Empty state */
.no-list {padding: 30px 0;}
.no-list p {font-size: .95rem; line-height: 1.4; text-align: center;}

/* =============================================================
   Responsive — Dashboard Header / Nav / Mobile
   ============================================================= */
@media (max-width: 980px) {
    .acc-desk {display: none;}
    .acc-hp {display: block;}
    .acc-hp .v-btn {width: 40px; height: 40px; display: flex; justify-content: flex-end; align-items: center;}
    .ac-btn {max-width: 34px; height: 34px;}
    .ac-btn img {border-radius: 50%; width: 34px; height: 34px; object-fit: cover;}
    .b-menu {display: block;}
    .btm-nav {display: block;}
    .dash-wrap {padding-bottom: 60px;}
    .ds-side {display: none;}
    .ds-content {border-left: none;}
    .btm-nav li a {font-size: .65rem;}
    .btm-nav li a i {font-size: 1.1rem;}
}
@media (max-width: 480px) {
    .btm-nav span.navhp-one {display: none;}
    .btm-nav span.navhp-two {display: block;}
    .btm-nav li a {font-size: .63rem;}
    .btm-nav li a i {font-size: 1.1rem;}
    .ac-btn {max-width: 28px;}
}