@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/**
 * H2O CRM - Full redesign cleaned
 * Backend + Frontend
 */

:root {
	--h2o-bg: #ffffff;
	--h2o-surface: #f6f8fb;
	--h2o-surface-alt: #eef3f8;
	--h2o-surface-strong: #e4ebf3;

	--h2o-border: #d7e0ea;
	--h2o-border-strong: #c3cfdd;

	--h2o-text: #16212b;
	--h2o-text-soft: #5e6b78;
	--h2o-text-faint: #8693a0;

	--h2o-primary: #1565c0;
	--h2o-primary-hover: #0f4f98;
	--h2o-primary-soft: #eaf3fd;

	--h2o-success: #1f8b5f;
	--h2o-success-soft: #eaf8f1;

	--h2o-warning: #b7791f;
	--h2o-warning-soft: #fff4e8;

	--h2o-danger: #c53d3d;
	--h2o-danger-soft: #fdeeee;

	--h2o-info: #5b6cff;
	--h2o-info-soft: #eef0ff;

	--h2o-violet: #7c3aed;
	--h2o-violet-soft: #f3edff;

	--h2o-teal: #0f766e;
	--h2o-teal-soft: #e8f7f5;

	--h2o-green-2: #159947;
	--h2o-green-2-soft: #e8f8ee;

	--h2o-radius-xs: 6px;
	--h2o-radius-sm: 10px;
	--h2o-radius: 14px;
	--h2o-radius-lg: 18px;

	--h2o-gap: 16px;
	--h2o-gap-lg: 24px;
	--h2o-sidebar-width: 296px;

	--h2o-font-xs: 11px;
	--h2o-font-sm: 12px;
	--h2o-font-base: 14px;
	--h2o-font-md: 15px;
	--h2o-font-lg: 20px;
	--h2o-font-xl: 30px;
}

/* =========================
   Base reset
========================= */

.h2o-crm-admin,
.h2o-crm-frontend-wrap,
.h2o-crm-login-required,
.h2o-crm-access-denied {
	color: var(--h2o-text);
	font-size: var(--h2o-font-base);
}

.h2o-crm-login-extra {
	margin-top: 14px;
	font-size: 13px;
}

body .h2o-crm-login-extra.lost-password{
	margin-top: 0;
	font-size: 13px;
	float:right;
}

.h2o-crm-login-extra a {
	color: var(--h2o-primary);
	font-weight: 600;
	text-decoration: none;
}

.h2o-crm-login-extra a:hover {
	text-decoration: underline;
}

.h2o-crm-admin *,
.h2o-crm-frontend-wrap *,
.h2o-crm-login-required *,
.h2o-crm-access-denied * {
	box-sizing: border-box;
}

.h2o-crm-admin a,
.h2o-crm-frontend-wrap a {
	color: inherit;
	text-decoration: none;
}

.h2o-crm-admin a:hover,
.h2o-crm-frontend-wrap a:hover {
	text-decoration: none;
}

.h2o-crm-admin strong,
.h2o-crm-frontend-wrap strong {
	color: var(--h2o-text);
}

.h2o-crm-admin.wrap {
	max-width: 1460px;
}


/* =========================
   Frontend layout
========================= */

.h2o-crm-frontend-wrap {
	width: 100%;
	max-width: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

.h2o-crm-frontend-shell {
	display: flex;
	align-items: stretch;
	gap: 30px;
	width: 100%;
	min-width: 0;
}

.h2o-crm-frontend-sidebar {
	flex: 0 0 var(--h2o-sidebar-width);
	width: var(--h2o-sidebar-width);
	min-width: var(--h2o-sidebar-width);
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	align-self: flex-start;
	position: sticky;
	top: 24px;
}

.h2o-crm-frontend-main {
	flex: 1 1 auto;
	min-width: 0;
}

.h2o-crm-frontend-content > h2,
.h2o-crm-frontend-content > h3 {
	margin-top: 0;
}

/* =========================
   Frontend brand / identity
========================= */

.h2o-crm-frontend-header {
	padding: 0 0 18px;
	border-bottom: 1px solid var(--h2o-border);
	margin-bottom: 18px;
}

.h2o-crm-frontend-brand h1 {
	margin: 0 0 8px;
	font-size: var(--h2o-font-xl);
	line-height: 1.05;
	letter-spacing: -0.04em;
	font-weight: 800;
	color: var(--h2o-text);
}

.h2o-crm-frontend-brand p {
	margin: 0;
	color: var(--h2o-text-soft);
	font-size: var(--h2o-font-base);
	line-height: 1.5;
}

.h2o-crm-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--h2o-primary);
    font-size: var(--h2o-font-sm);
    font-weight: 600;
    vertical-align: middle;
}

.h2o-crm-role-badge::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f007";
	font-size: 11px;
}

/* =========================
   Frontend navigation
========================= */

.h2o-crm-frontend-nav {
	margin: 0;
}

.h2o-crm-frontend-nav-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.h2o-crm-frontend-nav .button,
.h2o-crm-frontend-nav a.button,
.h2o-crm-nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 11px 14px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--h2o-text-soft);
	box-shadow: none !important;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	position: relative;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.08s ease;
}

.h2o-crm-nav-link::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	min-width: 18px;
	font-size: 14px;
	line-height: 1;
	color: currentColor;
	opacity: 0.95;
}

.h2o-crm-nav-link[href*="view=dashboard"]::before { content: "\f201"; }
.h2o-crm-nav-link[href*="view=vendor-dashboard"]::before { content: "\f080"; }
.h2o-crm-nav-link[href*="view=new-lead"]::before { content: "\f234"; }
.h2o-crm-nav-link[href*="view=my-leads"]::before { content: "\f2bb"; }
.h2o-crm-nav-link[href*="view=vendor-leads"]::before { content: "\f0b1"; }
.h2o-crm-nav-link[href*="view=network"]::before { content: "\f500"; }
.h2o-crm-nav-link[href*="view=earnings"]::before { content: "\f555"; }
.h2o-crm-nav-link[href*="view=rankings"]::before { content: "\f201"; }
.h2o-crm-nav-link[href*="view=confirm-payment"]::before { content: "\f058"; }
.h2o-crm-nav-link[href*="view=vendor-calculator"]::before { content: "\f1ec"; }

.h2o-crm-frontend-nav .button:hover,
.h2o-crm-frontend-nav a.button:hover,
.h2o-crm-nav-link:hover {
	background: var(--h2o-surface);
	border-color: var(--h2o-border);
	color: var(--h2o-text);
	transform: translateY(-1px);
}

.h2o-crm-frontend-nav a.is-current,
.h2o-crm-frontend-nav a.button.button-primary,
.h2o-crm-nav-link.is-current {
	background: var(--h2o-primary-soft) !important;
	border-color: rgba(21, 101, 192, 0.18) !important;
	color: var(--h2o-primary) !important;
	box-shadow: none !important;
}

.h2o-crm-frontend-nav a.is-current::after,
.h2o-crm-frontend-nav a.button.button-primary::after,
.h2o-crm-nav-link.is-current::after {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 999px;
	background: var(--h2o-primary);
}

/* =========================
   Headings
========================= */

.h2o-crm-admin h1 {
	margin-bottom: 18px;
	font-size: 30px;
	line-height: 1.05;
	letter-spacing: -0.04em;
}

.h2o-crm-admin h2,
.h2o-crm-frontend-content h2 {
	margin: 0 0 14px;
	font-size: 22px;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.h2o-crm-admin h3,
.h2o-crm-frontend-content h3 {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.2;
	color: var(--h2o-text);
}

.h2o-crm-admin hr {
	border: 0;
	border-top: 1px solid var(--h2o-border);
}

/* =========================
   Generic surfaces
========================= */

.h2o-crm-admin-grid > div,
.h2o-crm-frontend-content [style*="background:#fff"] {
	box-shadow: none !important;
}

.h2o-crm-admin-grid > div,
.h2o-crm-frontend-content > div > div[style*="background:#fff"],
.h2o-crm-frontend-content > div[style*="background:#fff"],
.h2o-crm-login-required,
.h2o-crm-access-denied {
	background: var(--h2o-surface) !important;
	border: 1px solid var(--h2o-border) !important;
	border-radius: var(--h2o-radius) !important;
	box-shadow: none !important;
}

.h2o-crm-admin-grid > div,
.h2o-crm-frontend-content > div > div[style*="background:#fff"],
.h2o-crm-frontend-content > div[style*="background:#fff"] {
	position: relative;
	overflow: hidden;
}

.h2o-crm-admin-grid > div::before,
.h2o-crm-frontend-content > div > div[style*="background:#fff"]::before,
.h2o-crm-frontend-content > div[style*="background:#fff"]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background: var(--h2o-primary);
	opacity: 0.92;
}

.h2o-crm-role-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

/* =========================
   KPI redesign
========================= */

.h2o-kpi {
	position: relative;
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	min-height: 124px;
	padding: 16px 16px 14px 74px !important;
}

.h2o-kpi::after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f201";
	position: absolute;
	left: 18px;
	top: 18px;
	width: 40px;
	height: 40px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--h2o-primary-soft);
	color: var(--h2o-primary);
	font-size: 15px;
	line-height: 1;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	z-index: 1;
}

.h2o-kpi__label {
	display: block;
	max-width: calc(100% - 6px);
	margin: 0 0 10px 0 !important;
	padding: 0 !important;
	font-size: 11px !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--h2o-text-faint) !important;
	font-weight: 800;
	line-height: 1.15;
	text-align: left;
}

.h2o-kpi__value {
	display: block;
	width: 100%;
	margin: auto 0 0 0 !important;
	padding: 0 !important;
	line-height: 1;
	letter-spacing: -0.04em;
	font-size: 30px !important;
	font-weight: 800;
	color: var(--h2o-text);
	text-align: right !important;
	align-self: flex-end;
}

/* KPI semantic icons */

.h2o-kpi--lead-today::after { content: "\f073"; background: var(--h2o-info-soft); color: var(--h2o-info); }
.h2o-kpi--lead-month::after { content: "\f133"; background: var(--h2o-primary-soft); color: var(--h2o-primary); }
.h2o-kpi--lead-total::after { content: "\f0c5"; background: var(--h2o-info-soft); color: var(--h2o-info); }
.h2o-kpi--liquidated-month::after,
.h2o-kpi--lead-liquidated::after { content: "\f81d"; background: var(--h2o-success-soft); color: var(--h2o-success); }

.h2o-kpi--active-agents::after { content: "\f0c0"; background: #f1eeff; color: #6f5ef9; }
.h2o-kpi--pending-users::after { content: "\f252"; background: var(--h2o-warning-soft); color: var(--h2o-warning); }
.h2o-kpi--active-vendors::after { content: "\f0b1"; background: var(--h2o-teal-soft); color: var(--h2o-teal); }

.h2o-kpi--conversion-rate::after { content: "\f295"; background: #f1eeff; color: #6f5ef9; }
.h2o-kpi--subagents::after { content: "\f500"; background: var(--h2o-violet-soft); color: var(--h2o-violet); }
.h2o-kpi--subagents-active::after { content: "\f4fc"; background: var(--h2o-teal-soft); color: var(--h2o-teal); }

.h2o-kpi--credit-earned::after { content: "\f51e"; background: var(--h2o-success-soft); color: var(--h2o-success); }
.h2o-kpi--credit-confirmed::after { content: "\f3d1"; background: var(--h2o-green-2-soft); color: var(--h2o-green-2); }
.h2o-kpi--credit-waiting::after,
.h2o-kpi--credit-pending::after,
.h2o-kpi--credit-residual::after { content: "\f254"; background: var(--h2o-warning-soft); color: var(--h2o-warning); }

.h2o-kpi--assigned-leads::after { content: "\f4fe"; background: var(--h2o-primary-soft); color: var(--h2o-primary); }
.h2o-kpi--contacted-leads::after { content: "\f095"; background: var(--h2o-info-soft); color: var(--h2o-info); }
.h2o-kpi--appointments::after { content: "\f274"; background: var(--h2o-warning-soft); color: var(--h2o-warning); }
.h2o-kpi--accepted-quotes::after { content: "\f560"; background: var(--h2o-success-soft); color: var(--h2o-success); }
.h2o-kpi--in-review::after { content: "\f06e"; background: var(--h2o-info-soft); color: var(--h2o-info); }
.h2o-kpi--installed::after { content: "\f6ff"; background: var(--h2o-success-soft); color: var(--h2o-success); }
.h2o-kpi--contact-rate::after { content: "\f080"; background: var(--h2o-info-soft); color: var(--h2o-info); }
.h2o-kpi--appointment-rate::after { content: "\f201"; background: var(--h2o-info-soft); color: var(--h2o-info); }
.h2o-kpi--ranking-position::after { content: "\f091"; background: #fff4e8; color: #b7791f; }
.h2o-kpi--ranking-score::after { content: "\f201"; background: var(--h2o-primary-soft); color: var(--h2o-primary); }
.h2o-kpi--ranking-league::after { content: "\f521"; background: var(--h2o-violet-soft); color: var(--h2o-violet); }
.h2o-kpi--ranking-gap-up::after { content: "\f062"; background: var(--h2o-info-soft); color: var(--h2o-info); }
.h2o-kpi--ranking-gap-down::after { content: "\f063"; background: var(--h2o-teal-soft); color: var(--h2o-teal); }
.h2o-kpi--ranking-bonus::after { content: "\f51e"; background: var(--h2o-success-soft); color: var(--h2o-success); }


.h2o-kpi--vendor-referrals::after {
	content: "\f0c0";
	background: var(--h2o-violet-soft);
	color: var(--h2o-violet);
}

.h2o-kpi--vendor-sales::after {
	content: "\f155";
	background: var(--h2o-success-soft);
	color: var(--h2o-success);
}

.h2o-kpi--vendor-total::after {
	content: "\f51e";
	background: var(--h2o-green-2-soft);
	color: var(--h2o-green-2);
}

/* KPI containers */
.h2o-crm-admin-grid,
.h2o-crm-frontend-content > div[style*="display:grid"][style*="repeat(auto-fit,minmax(220px,1fr))"] {
	align-items: stretch;
}

.h2o-crm-frontend-content > div[style*="display:grid"][style*="repeat(auto-fit,minmax(220px,1fr))"] > .h2o-kpi {
	min-width: 0;
}

/* =========================
   Forms
========================= */

.h2o-crm-admin input[type="text"],
.h2o-crm-admin input[type="email"],
.h2o-crm-admin input[type="number"],
.h2o-crm-admin input[type="month"],
.h2o-crm-admin input[type="search"],
.h2o-crm-admin select,
.h2o-crm-admin textarea,
.h2o-crm-frontend-wrap input[type="text"],
.h2o-crm-frontend-wrap input[type="email"],
.h2o-crm-frontend-wrap input[type="number"],
.h2o-crm-frontend-wrap input[type="month"],
.h2o-crm-frontend-wrap input[type="search"],
.h2o-inline-form input[type="datetime-local"],
.h2o-crm-frontend-wrap select,
.h2o-crm-frontend-wrap textarea {
	width: 100%;
	min-height: 40px;
	padding: 8px 11px;
	border: 1px solid var(--h2o-border-strong);
	border-radius: var(--h2o-radius-sm);
	background: #fff;
	color: var(--h2o-text);
	box-shadow: none;
	font-size: 13px;
	line-height: 1.35;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	margin-left: 0;
    margin-right: 0;
    min-width: 150px;
}

.h2o-inline-status-note {margin-bottom:5px;}

.h2o-appointment-field-wrap {width: 100%;}

.h2o-inline-form input[type="datetime-local"] {
	min-width: 190px;
}

.h2o-crm-admin select,
.h2o-crm-frontend-wrap select {
	-webkit-appearance: auto;
}

.h2o-crm-admin textarea,
.h2o-crm-frontend-wrap textarea {
	min-height: 96px;
	resize: vertical;
}

.h2o-inline-form--actions select, .h2o-inline-form--actions textarea, .h2o-inline-form--actions input[type="text"], .h2o-inline-form--actions input[type="datetime-local"]{max-width: 180px;}

.h2o-crm-admin input:focus,
.h2o-crm-admin select:focus,
.h2o-crm-admin textarea:focus,
.h2o-crm-frontend-wrap input:focus,
.h2o-crm-frontend-wrap select:focus,
.h2o-crm-frontend-wrap textarea:focus {
	border-color: var(--h2o-primary);
	box-shadow: 0 0 0 1px var(--h2o-primary);
	outline: none;
}

.h2o-crm-admin .h2o-field-invalid,
.h2o-crm-frontend-wrap .h2o-field-invalid,
.h2o-crm-admin .h2o-form-attempted-submit input:required:invalid,
.h2o-crm-admin .h2o-form-attempted-submit select:required:invalid,
.h2o-crm-admin .h2o-form-attempted-submit textarea:required:invalid,
.h2o-crm-frontend-wrap .h2o-form-attempted-submit input:required:invalid,
.h2o-crm-frontend-wrap .h2o-form-attempted-submit select:required:invalid,
.h2o-crm-frontend-wrap .h2o-form-attempted-submit textarea:required:invalid {
	border-color: var(--h2o-danger) !important;
	box-shadow: 0 0 0 1px var(--h2o-danger) !important;
	background: #fff8f8;
}

.h2o-crm-admin label,
.h2o-crm-frontend-wrap label {margin-bottom:5px; width:100%;}



.h2o-crm-admin label strong,
.h2o-crm-frontend-wrap label strong {
	display: inline-block;
	color: var(--h2o-text);
	font-size: 12px;
	font-weight: 800;
}

.h2o-crm-admin form p,
.h2o-crm-frontend-wrap form p {
	margin-top: 0;
}

.h2o-crm-admin .form-table th {
	width: 260px;
	padding-left: 0;
}

.h2o-crm-admin .form-table td {
	padding-left: 0;
}

/* =========================
   Buttons
========================= */

.h2o-crm-admin .button,
.h2o-crm-frontend-wrap .button,
.h2o-crm-login-required .button,
.h2o-crm-access-denied .button {
border-radius: 10px;
    min-height: 36px;
    padding: 0 12px;
    transition: transform 0.08s ease, opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    box-shadow: none !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 25px;
    white-space: nowrap;
    align-content: center;
    border: 0;
}

.h2o-crm-admin .button:hover,
.h2o-crm-frontend-wrap .button:hover,
.h2o-crm-login-required .button:hover,
.h2o-crm-access-denied .button:hover {
	transform: translateY(-1px);
	box-shadow: none !important;
}

.h2o-crm-admin .button-primary,
.h2o-crm-frontend-wrap .button-primary,
.h2o-crm-login-required .button-primary {
	background: var(--h2o-primary) !important;
	border-color: var(--h2o-primary) !important;
	color: #fff !important;
}

.h2o-crm-admin .button-primary:hover,
.h2o-crm-frontend-wrap .button-primary:hover,
.h2o-crm-login-required .button-primary:hover {
	background: var(--h2o-primary-hover) !important;
	border-color: var(--h2o-primary-hover) !important;
}

.h2o-crm-admin .button-secondary,
.h2o-crm-frontend-wrap .button-secondary {
	background: #fff;
	border-color: var(--h2o-border-strong);
	color: var(--h2o-text);
}

.h2o-crm-admin .button.is-busy,
.h2o-crm-frontend-wrap .button.is-busy,
.h2o-crm-admin input[type="submit"].is-busy,
.h2o-crm-frontend-wrap input[type="submit"].is-busy {
	opacity: 0.8;
	cursor: wait;
}

/* =========================
   Tables
========================= */

.h2o-crm-admin .widefat,
.h2o-crm-frontend-wrap .widefat {
	border: 1px solid var(--h2o-border);
	border-radius: var(--h2o-radius);
	overflow: hidden;
	box-shadow: none;
	background: var(--h2o-surface);
	border-collapse: separate;
	border-spacing: 0;
}

.h2o-crm-admin .widefat thead th,
.h2o-crm-frontend-wrap .widefat thead th {
	background: var(--h2o-surface-strong);
	color: var(--h2o-text);
	font-weight: 800;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--h2o-border);
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 10px;
    padding-right: 10px;
	vertical-align: middle;
}

.h2o-crm-admin .widefat td,
.h2o-crm-frontend-wrap .widefat td {
	vertical-align: middle;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 10px;
    padding-right: 10px;
	font-size: 13px;
	line-height: 1.45;
	background: transparent;
	word-break: break-word;
}

.h2o-crm-admin .widefat tbody tr:hover,
.h2o-crm-frontend-wrap .widefat tbody tr:hover {
	background: #eef3f8;
}

.h2o-crm-admin .widefat small,
.h2o-crm-frontend-wrap .widefat small {
	color: var(--h2o-text-soft);
	font-size: 11px;
	line-height: 1.35;
}

.h2o-crm-admin .widefat form,
.h2o-crm-frontend-wrap .widefat form {
	gap: 6px !important;
	flex-direction: column;
}

.h2o-crm-admin .widefat form .button,
.h2o-crm-frontend-wrap .widefat form .button {
	min-height: 34px;
	padding: 0 11px;
	font-size: 12px;
}

/* =========================
   Notices
========================= */

.h2o-crm-admin .notice,
.h2o-crm-frontend-wrap .notice {
	border-radius: 12px;
	box-shadow: none;
	border-width: 1px;
	border-style: solid;
	padding-left: 14px;
}

.h2o-crm-frontend-wrap .notice {
	margin-left: 0;
	margin-right: 0;
}

.notice.notice-success {
	border-left-color: var(--h2o-success);
	border-color: rgba(31, 139, 95, 0.18);
	background: var(--h2o-success-soft);
}

.notice.notice-error,
.notice.error {
	border-left-color: var(--h2o-danger);
	border-color: rgba(197, 61, 61, 0.18);
	background: var(--h2o-danger-soft);
}

/* =========================
   Login / access denied
========================= */

.h2o-crm-login-required,
.h2o-crm-access-denied {
	max-width: 640px;
	margin: 24px auto;
	box-shadow: none;
	padding: 20px !important;
}

.h2o-crm-login-required h2,
.h2o-crm-access-denied h2 {
	margin-top: 0;
}

.h2o-crm-login-required form {
	margin-top: 18px;
}

.h2o-crm-login-required .login-username,
.h2o-crm-login-required .login-password,
.h2o-crm-login-required .login-remember {
	margin-bottom: 14px;
}

.h2o-crm-login-required .login-remember{display: inline-block;}

.h2o-crm-login-required label {
	display: block;
}

.h2o-crm-login-required input[type="text"],
.h2o-crm-login-required input[type="password"] {
	width: 100%;
	max-width: 100%;
	min-height: 40px;
	padding: 8px 10px;
	border: 1px solid var(--h2o-border-strong);
	border-radius: var(--h2o-radius-sm);
}

/* =========================
   Utility classes JS
========================= */

.h2o-copy-trigger {
	cursor: pointer;
}

a.is-current,
button.is-current {
	position: relative;
}

/* =========================
   Inline form layouts
========================= */

.h2o-crm-admin form[style*="display:flex"],
.h2o-crm-frontend-wrap form[style*="display:flex"] {
	align-items: end;
}

.h2o-crm-admin form[style*="display:flex"] input[type="text"],
.h2o-crm-admin form[style*="display:flex"] select,
.h2o-crm-frontend-wrap form[style*="display:flex"] input[type="text"],
.h2o-crm-frontend-wrap form[style*="display:flex"] select {
	min-width: 140px;
}

/* =========================
   Frontend action boxes icons
========================= */

.h2o-crm-frontend-content h2 + div[style*="background:#fff"],
.h2o-crm-frontend-content h3 + div[style*="background:#fff"] {
	position: relative;
}

.h2o-crm-frontend-content h2 + div[style*="background:#fff"]::after,
.h2o-crm-frontend-content h3 + div[style*="background:#fff"]::after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f0b1";
	position: absolute;
	right: 16px;
	top: 16px;
	font-size: 16px;
	color: var(--h2o-text-faint);
	opacity: 0.22;
}

/* =========================
   Quick actions frontend
========================= */

.h2o-quick-actions-box {
	position: relative;
}

.h2o-quick-actions-title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.h2o-quick-actions-title::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f0e7";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 10px;
	background: var(--h2o-primary-soft);
	color: var(--h2o-primary);
	font-size: 13px;
	line-height: 1;
	flex: 0 0 28px;
}

.h2o-quick-actions-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px !important;
	align-items: stretch;
}

.h2o-quick-action {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	min-height: 48px;
	padding: 0 14px 0 44px !important;
	border-radius: 12px !important;
	border: 1px solid var(--h2o-border) !important;
	background: #fff !important;
	color: var(--h2o-text) !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2;
	transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	overflow: hidden;
}

.h2o-quick-action::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--h2o-primary-soft);
	color: var(--h2o-primary);
	font-size: 11px;
	line-height: 1;
	content: "\f0c1";
}

.h2o-quick-action::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--h2o-primary);
	opacity: 0.92;
}

.h2o-quick-action:hover {
	transform: translateY(-1px);
	background: var(--h2o-surface) !important;
	border-color: var(--h2o-border-strong) !important;
	color: var(--h2o-text) !important;
}

.h2o-quick-action__label {
	display: inline-block;
	width: 100%;
}

.h2o-quick-action--new-lead::before {
	content: "\f234";
	background: var(--h2o-primary-soft);
	color: var(--h2o-primary);
}

.h2o-quick-action--new-lead::after {
	background: var(--h2o-primary);
}

.h2o-quick-action--my-leads::before {
	content: "\f2bb";
	background: var(--h2o-info-soft);
	color: var(--h2o-info);
}

.h2o-quick-action--my-leads::after {
	background: var(--h2o-info);
}

.h2o-quick-action--network::before {
	content: "\f500";
	background: var(--h2o-violet-soft);
	color: var(--h2o-violet);
}

.h2o-quick-action--network::after {
	background: var(--h2o-violet);
}

.h2o-quick-action--earnings::before {
	content: "\f555";
	background: var(--h2o-success-soft);
	color: var(--h2o-success);
}

.h2o-quick-action--earnings::after {
	background: var(--h2o-success);
}

.h2o-quick-action--primary {
	background: var(--h2o-primary-soft) !important;
	border-color: rgba(21, 101, 192, 0.18) !important;
	color: var(--h2o-primary) !important;
}

.h2o-quick-action--primary:hover {
	background: #deedfbe3 !important;
	border-color: rgba(21, 101, 192, 0.28) !important;
}



/* =========================
   Refactor helpers - class driven UI
========================= */

.h2o-grid {
	display: grid;
	gap: 16px;
}

.h2o-grid--kpi {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin-bottom: 24px;
}

.h2o-grid--cards {
	    
    gap: 16px;margin-bottom: 40px;
}

.h2o-grid--cards.h2o-ranking-podium{grid-template-columns: repeat(3, minmax(0, 1fr));}

.h2o-grid--forms {
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	gap: 24px;
	margin-bottom: 24px;
}

.h2o-grid--network {
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 20px;
	margin-bottom: 24px;
}

.h2o-grid--form-fields {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.h2o-card,
.h2o-crm-admin-grid > .h2o-card,
.h2o-crm-frontend-content > .h2o-card {
	background: var(--h2o-surface);
	border: 1px solid var(--h2o-border);
	border-radius: var(--h2o-radius);
	padding: 18px;
	position: relative;
	overflow: hidden;
	box-shadow: none;
}

.h2o-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background: var(--h2o-primary);
	opacity: 0.92;
}

.h2o-card--kpi {
	
}

.h2o-card-title,
.h2o-quick-actions-title {
	margin: 0 0 14px;
	font-size: 17px;
	line-height: 1.2;
	color: var(--h2o-text);
}

.h2o-section-title {
	margin: 0 0 14px;
}

.h2o-section-title--spaced {
	margin-top: 32px;
}

.h2o-section-separator {
	margin: 24px 0;
	border: 0;
	border-top: 1px solid var(--h2o-border);
}

.h2o-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.h2o-list--ranking {
	padding-left: 20px;
	list-style: decimal;
}

.h2o-list--movements {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.h2o-list__item {
	margin: 0;
}

.h2o-list--ranking .h2o-list__item {
	margin-bottom: 8px;
}

.h2o-list--movements .h2o-list__item {
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--h2o-border);
	border-radius: var(--h2o-radius-sm);
}

.h2o-filter-form {
	margin-bottom: 20px;
}

.h2o-inline-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: flex-end;
}

.h2o-inline-form--filters {
	margin-bottom: 18px;
}

.h2o-inline-form--compact {
	gap: 6px;
}

.h2o-inline-form--actions {
	margin-top: 0px;
}

.h2o-inline-form .h2o-field {
}

.h2o-inline-form--compact .h2o-field {
		max-width: 180px;
}

.h2o-inline-form--compact .h2o-field--notes {
}

.h2o-form-section {
	margin-top: 16px;
}

.h2o-form-actions {
	margin-top: 20px;
}

.h2o-flex {
	display: flex;
}

.h2o-flex-wrap {
	flex-wrap: wrap;
}

.h2o-gap-md {
	gap: 16px;
}

.h2o-mb-md {
	margin-bottom: 16px;
}

.h2o-mb-lg {
	margin-bottom: 24px;
}

.h2o-mt-md {
	margin-top: 16px;
}

.h2o-table-actions-stack {
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}

.h2o-table-cell-flex {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}

.h2o-notice {
	margin: 0 0 18px;
}

.h2o-quick-actions-box {
	padding-bottom: 18px;
}

.h2o-quick-actions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
}

.h2o-quick-action {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	min-height: 44px;
	padding: 0 14px 0 44px !important;
	border-radius: 12px !important;
	border: 1px solid var(--h2o-border) !important;
	background: #fff !important;
	color: var(--h2o-text) !important;
	font-weight: 700;
}

.h2o-quick-action::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--h2o-primary-soft);
	color: var(--h2o-primary);
	font-size: 11px;
	content: "\f15c";
}

.h2o-quick-action--primary {
	background: var(--h2o-primary-soft) !important;
	border-color: rgba(21, 101, 192, 0.18) !important;
	color: var(--h2o-primary) !important;
}

.h2o-quick-action--new-lead::before { content: "\f234"; }
.h2o-quick-action--my-leads::before { content: "\f2bb"; }
.h2o-quick-action--network::before { content: "\f500"; }
.h2o-quick-action--earnings::before { content: "\f555"; }

.h2o-quick-action__label {
	display: inline-block;
	line-height: 1.2;
}

.h2o-crm-admin .widefat .h2o-inline-form,
.h2o-crm-frontend-wrap .widefat .h2o-inline-form {
	align-items: center;
	    flex-direction: row;
    margin-bottom: 5px;
}

.h2o-crm-admin .widefat .h2o-inline-form .button,
.h2o-crm-frontend-wrap .widefat .h2o-inline-form .button {
	margin: 0;
}

.h2o-crm-login-required .h2o-form-actions,
.h2o-crm-access-denied .h2o-form-actions {
	margin-top: 18px;
}

@media (max-width: 960px) {
	.h2o-grid--forms {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 782px) {
	.h2o-grid--kpi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.h2o-grid--cards,
	.h2o-grid--network {
		gap: 12px;
	}

	.h2o-inline-form,
	.h2o-inline-form--compact,
	.h2o-inline-form--filters {
	}

	.h2o-inline-form .h2o-field,
	.h2o-inline-form--compact .h2o-field {
		min-width: 100%;
		flex-basis: auto;
	}

	.h2o-table-actions-stack,
	.h2o-table-cell-flex {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 480px) {
	.h2o-grid--kpi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.h2o-card {
		padding: 11px;
	}
}




/* =========================
   Charts
========================= */

.h2o-chart-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	align-items: stretch;
}

.h2o-chart-card {
	background: var(--h2o-surface);
	border: 1px solid var(--h2o-border);
	border-radius: var(--h2o-radius);
	overflow: hidden;
	position: relative;
	min-height: 340px;
}

.h2o-chart-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background: var(--h2o-primary);
	opacity: 0.92;
}

.h2o-chart-card__header {
	padding: 16px 16px 0 16px;
}

.h2o-chart-card__body {
	padding: 12px 16px 16px 16px;
	height: calc(100% - 52px);
}

.h2o-chart-title {
	margin: 0;
	font-size: 16px;
	line-height: 1.2;
	color: var(--h2o-text);
}

.h2o-chart-canvas-wrap {
	position: relative;
	width: 100%;
	height: 250px;
	min-height: 250px;
}

.h2o-chart-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 250px;
	border: 1px dashed var(--h2o-border-strong);
	border-radius: var(--h2o-radius-sm);
	color: var(--h2o-text-soft);
	font-size: 13px;
	text-align: center;
	padding: 20px;
	background: #fff;
}

.h2o-grid--network {
	align-items: stretch;
}

.h2o-grid--network > .h2o-card {
	height: 100%;
}

.h2o-chart-grid + .h2o-grid--network {
	margin-top: 4px;
}


/* =========================
   Expand rows / timeline
========================= */

.h2o-col-expand {
	width: 52px;
	min-width: 52px;
	text-align: center;
}

.h2o-timeline-toggle {
	min-width: 34px;
	padding: 0 10px;
	font-weight: 700;
}

.h2o-timeline-row td {
	background: #fff !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.h2o-timeline-row td td, .h2o-timeline-row td th{
	padding: var(--wpex-table-cell-padding, 5px)!important;
	padding-top: 1px !important;
	padding-bottom: 1px !important;
}

.h2o-timeline-row td th{font-weight: 700 !important;}

.h2o-timeline-row__inner {
	padding:6px;
background: var(--h2o-surface-alt);
}

.h2o-timeline-row__inner .widefat{
border-radius: 0 0 var(--h2o-radius) var(--h2o-radius);
    display: table;
    overflow-x: hidden;
	
}

.h2o-timeline-loading,
.h2o-timeline-empty {
	font-size: 13px;
	color: var(--h2o-text-soft);
}

.h2o-timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.h2o-timeline__item {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 14px;
	align-items: start;
}

.h2o-timeline__dot {
	width: 12px;
	height: 12px;
	margin-top: 4px;
	border-radius: 999px;
	background: var(--h2o-primary);
	box-shadow: 0 0 0 4px var(--h2o-primary-soft);
}

.h2o-timeline__content {
	background: #fff;
	border: 1px solid var(--h2o-border);
	border-radius: var(--h2o-radius-sm);
	padding: 12px 14px;
}

.h2o-timeline__head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	margin-bottom: 6px;
}

.h2o-timeline__head span {
	color: var(--h2o-text-soft);
	font-size: 12px;
}

.h2o-timeline__notes,
.h2o-timeline__meta,
.h2o-timeline__amount {
	font-size: 13px;
	color: var(--h2o-text);
	line-height: 1.45;
}

.h2o-timeline__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 6px;
}

.h2o-timeline-table {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
}

.h2o-timeline-row__inner .h2o-timeline-table th,
.h2o-timeline-row__inner .h2o-timeline-table td {
	font-size: 13px;
	vertical-align: top;
}

.h2o-timeline-row__inner .h2o-timeline-table td:last-child {
	white-space: normal;
}

/* =========================
   Lead potential
========================= */

.h2o-lead-potential-box {
	margin-top: 18px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid #e4d1bd;
    border-radius: var(--h2o-radius);
    background: #fefeeb;
}

.h2o-lead-potential-box__title {
	font-size: 16px;
	font-weight: 800;
	color: var(--h2o-text);
	margin-bottom: 4px;
}

.h2o-lead-potential-box__subtitle {
	font-size: 12px;
	color: var(--h2o-text-soft);
	margin-bottom: 10px;
}

.h2o-lead-potential-box__stars {
	margin-bottom: 8px;
}

.h2o-lead-potential-box__value {
	font-size: 13px;
	color: var(--h2o-text);
	margin-bottom: 6px;
}

.h2o-lead-potential-box__reason {
	font-size: 12px;
	color: var(--h2o-text-soft);
}

.h2o-potential-stars {
	display: inline-flex;
	gap: 2px;
	line-height: 1;
}

.h2o-potential-star {
	position: relative;
	font-size: 20px;
	color: #f0efe1;
}

form .h2o-potential-star {
	font-size: 40px;
}

.h2o-potential-star.is-full {
	color: #f5b301;
}

.h2o-potential-star.is-half {
	color: #f0efe1;
}

.h2o-potential-star.is-half::after {
	content: "★";
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	overflow: hidden;
	color: #f5b301;
}

.h2o-potential-cell {
	min-width: 110px;
}

.h2o-potential-cell__value {
	margin-top: 4px;
	font-size: 11px;
	color: var(--h2o-text-soft);
	font-weight: 700;
}

/* =========================
   Responsive
========================= */

@media (max-width: 960px) {
	:root {
		--h2o-sidebar-width: 100%;
	}

	.h2o-crm-frontend-shell {
		flex-direction: column;
		gap: 18px;
	}

	.h2o-crm-frontend-sidebar {
		position: static;
		width: 100%;
		min-width: 0;
		padding: 0;
	}

	.h2o-crm-frontend-header {
		padding-bottom: 12px;
		margin-bottom: 12px;
	}

	.h2o-crm-frontend-brand h1 {
		font-size: 24px;
	}

	.h2o-crm-frontend-nav {
		margin: 0 0 4px;
		padding: 0 0 4px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.h2o-crm-frontend-nav-inner {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		min-width: max-content;
		padding-bottom: 2px;
	}

	.h2o-crm-frontend-nav .button,
	.h2o-crm-frontend-nav a.button,
	.h2o-crm-nav-link {
		width: auto;
		flex: 0 0 auto;
		justify-content: center;
		min-height: 38px;
		padding: 8px 12px;
		font-size: 12px;
		border-radius: 999px;
		background: var(--h2o-surface);
		border-color: var(--h2o-border);
	}

	.h2o-crm-nav-link::before {
		width: auto;
		min-width: 0;
		font-size: 12px;
	}

	.h2o-crm-frontend-nav a.is-current::after,
	.h2o-crm-frontend-nav a.button.button-primary::after,
	.h2o-crm-nav-link.is-current::after {
		display: none;
	}

	.h2o-crm-admin .form-table th,
	.h2o-crm-admin .form-table td {
		display: block;
		width: 100%;
		padding-right: 0;
	}

	.h2o-crm-admin .widefat,
	.h2o-crm-frontend-wrap .widefat {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

@media (max-width: 600px) {
	:root {
		--h2o-font-base: 13px;
		--h2o-font-lg: 18px;
		--h2o-font-xl: 24px;
	}

	.h2o-crm-admin h1 {
		font-size: 22px;
		margin-bottom: 14px;
	}

	.h2o-crm-admin h2,
	.h2o-crm-frontend-content h2 {
		font-size: 18px;
		margin-bottom: 12px;
	}

	.h2o-crm-admin h3,
	.h2o-crm-frontend-content h3 {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.h2o-crm-frontend-brand h1 {
		font-size: 21px;
	}

	.h2o-crm-frontend-brand p {
		font-size: 12px;
	}

	.h2o-crm-role-badge {
		display: inline-flex;
		margin-left: 0;
		font-size: 11px;
	}

	.h2o-crm-admin-grid > div,
	.h2o-crm-frontend-content > div > div[style*="background:#fff"],
	.h2o-crm-frontend-content > div[style*="background:#fff"],
	.h2o-crm-login-required,
	.h2o-crm-access-denied {
		border-radius: 10px !important;
	}

	.h2o-crm-admin-grid > div,
	.h2o-crm-frontend-content > div > div[style*="background:#fff"],
	.h2o-crm-frontend-content > div[style*="background:#fff"] {
		padding: 13px !important;
	}

	.h2o-kpi {
		min-height: 104px;
		padding: 12px 12px 12px 52px !important;
	}

	.h2o-kpi::after {
		left: 12px !important;
		top: 12px !important;
		width: 30px !important;
		height: 30px !important;
		border-radius: 9px !important;
		font-size: 11px !important;
	}

	.h2o-kpi__label {
		font-size: 10px !important;
		letter-spacing: 0.04em;
		margin-bottom: 8px !important;
	}

	.h2o-kpi__value {
		font-size: 20px !important;
	}

	.h2o-crm-frontend-content > div[style*="display:grid"][style*="repeat(auto-fit,minmax(220px,1fr))"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}

	.h2o-crm-admin .button,
	.h2o-crm-frontend-wrap .button,
	.h2o-crm-login-required .button {
		min-height: 34px;
		padding: 0 11px;
		font-size: 12px;
		margin-bottom: 0;
        width: 100%;
	}

	.h2o-crm-frontend-nav .button,
	.h2o-crm-frontend-nav a.button,
	.h2o-crm-nav-link {
		min-height: 34px;
		padding: 7px 10px;
		font-size: 11px;
		gap: 7px;
	}

	.h2o-crm-admin input[type="text"],
	.h2o-crm-admin input[type="email"],
	.h2o-crm-admin input[type="number"],
	.h2o-crm-admin input[type="month"],
	.h2o-crm-admin input[type="search"],
	.h2o-crm-admin select,
	.h2o-crm-admin textarea,
	.h2o-crm-frontend-wrap input[type="text"],
	.h2o-crm-frontend-wrap input[type="email"],
	.h2o-crm-frontend-wrap input[type="number"],
	.h2o-crm-frontend-wrap input[type="month"],
	.h2o-crm-frontend-wrap input[type="search"],
	.h2o-crm-frontend-wrap select,
	.h2o-crm-frontend-wrap textarea {
		min-height: 36px;
		padding: 7px 10px;
		font-size: 12px;
		min-width: unset;
	}

	.h2o-crm-admin textarea,
	.h2o-crm-frontend-wrap textarea {
		min-height: 82px;
	}

	.h2o-crm-admin .widefat thead th,
	.h2o-crm-frontend-wrap .widefat thead th {
		font-size: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.h2o-crm-admin .widefat td,
	.h2o-crm-frontend-wrap .widefat td {
		font-size: 12px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	td.h2o-actions-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

	.h2o-crm-admin form[style*="display:flex"],
	.h2o-crm-frontend-wrap form[style*="display:flex"] {
		flex-direction: column;
		align-items: stretch !important;
		gap: 8px !important;
	}

	.h2o-crm-admin form[style*="display:flex"] > *,
	.h2o-crm-frontend-wrap form[style*="display:flex"] > * {
		width: 100%;
	}

	.h2o-quick-actions-grid {
		grid-template-columns: 1fr;
		gap: 8px !important;
	}

	.h2o-quick-actions-title::before {
		width: 24px;
		height: 24px;
		font-size: 11px;
		border-radius: 8px;
		flex-basis: 24px;
	}

	.h2o-quick-action {
		min-height: 40px;
		padding: 0 12px 0 40px !important;
		border-radius: 10px !important;
		font-size: 12px !important;
	}

	.h2o-quick-action::before {
		left: 12px;
		width: 18px;
		height: 18px;
		font-size: 10px;
	}
	
.h2o-lead-potential-box {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		margin: 0;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		border-radius: 14px 14px 0 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
	}

	.h2o-lead-potential-box__title,
	.h2o-lead-potential-box__reason {
		text-align: center;
	}

	.h2o-lead-potential-box__title {
		font-size: 16px;
		line-height: 1.15;
		margin-bottom: 6px;
	}

	.h2o-lead-potential-box__subtitle {
		display: none;
	}

	.h2o-lead-potential-box__stars {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		margin: 0;
	}

	.h2o-lead-potential-box__value {
		display: inline-flex;
		align-items: center;
		margin: 0;
		font-size: 14px;
		line-height: 1;
	}

	.h2o-potential-stars {
		gap: 3px;
	}

	.h2o-potential-star {
		font-size: 22px;
		line-height: 1;
	}

	.h2o-lead-potential-box__reason {
		font-size: 12px;
		line-height: 1.25;
		margin-top: 6px;
	}

	/* stelle + valore sulla stessa riga */
	.h2o-lead-potential-box__stars,
	.h2o-lead-potential-box__value {
		vertical-align: middle;
	}

	.h2o-lead-potential-box__stars + .h2o-lead-potential-box__value {
		margin-left: 10px;
	}

	.h2o-lead-potential-box {
		text-align: center;
	}

	/* spazio finale nel form per evitare sovrapposizione */
	.h2o-card form {
		padding-bottom: 140px;
	}
	
}

@media (max-width: 480px) {
	.h2o-crm-frontend-shell {
		gap: 14px;
	}

	.h2o-crm-frontend-header {
		padding-bottom: 10px;
		margin-bottom: 10px;
	}

	.h2o-crm-frontend-brand h1 {
		font-size: 19px;
	}

	.h2o-crm-admin h1 {
		font-size: 20px;
	}

	.h2o-crm-admin h2,
	.h2o-crm-frontend-content h2 {
		font-size: 17px;
	}

	.h2o-crm-admin-grid > div,
	.h2o-crm-frontend-content > div > div[style*="background:#fff"],
	.h2o-crm-frontend-content > div[style*="background:#fff"] {
		padding: 11px !important;
	}

	.h2o-kpi {
		min-height: 96px;
		padding: 10px 10px 10px 48px !important;
	}

	.h2o-kpi::after {
		left: 10px !important;
		top: 10px !important;
		width: 28px !important;
		height: 28px !important;
		font-size: 10px !important;
		border-radius: 8px !important;
	}

	.h2o-kpi__label {
		font-size: 9px !important;
		line-height: 1.1;
		margin-bottom: 6px !important;
	}

	.h2o-kpi__value {
		font-size: 18px !important;
		letter-spacing: -0.03em;
	}

	.h2o-crm-frontend-content > div[style*="display:grid"][style*="repeat(auto-fit,minmax(220px,1fr))"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
	}

	.h2o-crm-frontend-nav .button,
	.h2o-crm-frontend-nav a.button,
	.h2o-crm-nav-link {
		min-height: 32px;
		padding: 6px 9px;
		font-size: 10px;
	}

	.h2o-crm-admin .button,
	.h2o-crm-frontend-wrap .button,
	.h2o-crm-login-required .button {
		min-height: 32px;
		font-size: 11px;
	}

	.h2o-quick-action {
		min-height: 38px;
		padding: 0 11px 0 38px !important;
		font-size: 11px !important;
	}

	.h2o-quick-action::before {
		left: 11px;
		width: 17px;
		height: 17px;
		font-size: 9px;
	}
}

/* =========================
   Lead form grouped
========================= */

.h2o-lead-form--grouped {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.h2o-form-group {
	padding: 16px;
	border: 1px solid var(--h2o-border);
	border-radius: var(--h2o-radius);
	background: #fff;
}

.h2o-form-group__header {
	margin-bottom: 12px;
}

.h2o-form-group__title {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--h2o-text);
}

.h2o-lead-form .h2o-field {
	min-width: 0;
}

.h2o-grid--lead-anagrafica,
.h2o-grid--lead-contacts,
.h2o-grid--lead-address,
.h2o-grid--lead-logistics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.h2o-grid--lead-address > .h2o-field:first-child,
.h2o-grid--lead-contacts > .h2o-field:last-child,
.h2o-grid--lead-anagrafica > .h2o-field:last-child,
.h2o-grid--lead-logistics > .h2o-field:first-child {
	grid-column: 1 / -1;
}

.h2o-lead-form input::placeholder,
.h2o-lead-form textarea::placeholder {
	color: var(--h2o-text-faint);
	opacity: 1;
}

/* =========================
   Mobile compaction
========================= */

@media (max-width: 600px) {
	.h2o-form-group {
		padding: 12px;
	}

	.h2o-form-group__header {
		margin-bottom: 10px;
	}

	.h2o-grid--lead-anagrafica,
	.h2o-grid--lead-contacts,
	.h2o-grid--lead-address,
	.h2o-grid--lead-logistics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	/* Nome / Cognome 50/50 */
	.h2o-grid--lead-anagrafica > .h2o-field--half {
		grid-column: auto;
	}

	/* Situazione familiare full width */
	.h2o-grid--lead-anagrafica > .h2o-field:last-child {
		grid-column: 1 / -1;
	}

	/* Cellulare / Telefono 50/50 */
	.h2o-grid--lead-contacts > .h2o-field--half {
		grid-column: auto;
	}

	/* Email full width */
	.h2o-grid--lead-contacts > .h2o-field:last-child {
		grid-column: 1 / -1;
	}

	/* CAP / Città 35/65 */
	.h2o-grid--lead-address {
		grid-template-columns: 35% 65%;
	}

	.h2o-grid--lead-address > .h2o-field:first-child {
		grid-column: 1 / -1;
	}

	.h2o-grid--lead-address > .h2o-field--cap {
		grid-column: 1;
	}

	.h2o-grid--lead-address > .h2o-field--city {
		grid-column: 2;
	}

	.h2o-lead-form textarea {
		min-height: 84px;
	}
}

.h2o-preavviso-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 120px;
}

.h2o-preavviso-form {
	margin: 0 !important;
}

.h2o-preavviso-badge, .h2o-lead-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.h2o-preavviso-badge--pending {
	background: var(--h2o-warning-soft);
	color: var(--h2o-warning);
	border-color: rgba(183,121,31,0.18);
}

.h2o-preavviso-badge--procede {
	background: var(--h2o-success-soft);
	color: var(--h2o-success);
	border-color: rgba(31,139,95,0.18);
}

.h2o-preavviso-badge--declina {
	background: var(--h2o-surface-strong);
	color: var(--h2o-text-soft);
	border-color: var(--h2o-border);
}

.h2o-script-box {
	background: var(--h2o-surface);
	border: 1px solid var(--h2o-border);
	border-radius: var(--h2o-radius);
	padding: 16px;
}


/* Lead Generator script selector */

.h2o-script-box--inline {
	padding: 18px;
}

.h2o-script-conversation--always-open {
	display: block !important;
}

.h2o-script-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	
}

.h2o-script-selector__button {

}

.h2o-script-box__intro p {margin-bottom:0;}

.h2o-script-selector__button:hover {
	background: var(--h2o-surface);
	border-color: var(--h2o-border-strong);
	color: var(--h2o-text);
}

.h2o-script-selector__button.is-active,
.h2o-script-selector__button[aria-expanded="true"] {
	background: var(--h2o-primary-soft);
	border-color: rgba(21, 101, 192, 0.18);
	color: var(--h2o-primary);
}

.h2o-script-panel--toggle {
	margin-top: 4px;
}

@media (max-width: 767px) {
	.h2o-script-selector {
		flex-direction: column;
	}

	.h2o-script-selector__button {
		width: 100%;
		justify-content: flex-start;
	}
}


.h2o-script-toggle {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
}

.h2o-script-conversation {
	
}

.h2o-script-conversation__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.h2o-script-conversation__inner-vendor{margin-top:15px;}

.h2o-script-message {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 10px;
}

.h2o-script-message__icon {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex: 0 0 38px;
}

.h2o-script-message__content {
	background: #fff;
	border: 1px solid var(--h2o-border);
	border-radius: 14px;
	padding: 12px 14px;
	max-width: 760px;
}

.h2o-script-message__content strong {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
}

.h2o-script-message__content p {
	margin: 0;
	color: var(--h2o-text-soft);
	line-height: 1.5;
}

.h2o-script-message--agent .h2o-script-message__icon {
	background: var(--h2o-primary-soft);
	color: var(--h2o-primary);
}

.h2o-script-message--lead .h2o-script-message__icon {
	background: var(--h2o-violet-soft);
	color: var(--h2o-violet);
}

/* =========================
   Lead status badges
========================= */


.h2o-lead-status-badge--default {
	background: var(--h2o-surface-strong);
	color: var(--h2o-text-soft);
	border-color: var(--h2o-border);
}

.h2o-lead-status-badge--in_attesa {
	background: var(--h2o-surface-strong);
	color: var(--h2o-text-soft);
	border-color: var(--h2o-border);
}

.h2o-lead-status-badge--contattato {
	background: var(--h2o-info-soft);
	color: var(--h2o-info);
	border-color: rgba(91, 108, 255, 0.18);
}

.h2o-lead-status-badge--nessuna_risposta {
	background: var(--h2o-warning-soft);
	color: var(--h2o-warning);
	border-color: rgba(183, 121, 31, 0.18);
}

.h2o-lead-status-badge--appuntamento_fissato {
	background: var(--h2o-success-soft);
	color: var(--h2o-success);
	border-color: rgba(31, 139, 95, 0.18);
}

.h2o-lead-status-badge--appuntamento_posticipato {
	background: var(--h2o-violet-soft);
	color: var(--h2o-violet);
	border-color: rgba(124, 58, 237, 0.18);
}

.h2o-lead-status-badge--appuntamento_annullato {
	background: var(--h2o-danger-soft);
	color: var(--h2o-danger);
	border-color: rgba(197, 61, 61, 0.18);
}

.h2o-lead-status-badge--preventivo_accettato {
	background: var(--h2o-success-soft);
	color: var(--h2o-success);
	border-color: rgba(31, 139, 95, 0.18);
}

.h2o-lead-status-badge--preventivo_rifiutato {
	background: var(--h2o-danger-soft);
	color: var(--h2o-danger);
	border-color: rgba(197, 61, 61, 0.18);
}

.h2o-lead-status-badge--pratica_in_esaminazione {
	background: var(--h2o-info-soft);
	color: var(--h2o-info);
	border-color: rgba(91, 108, 255, 0.18);
}

.h2o-lead-status-badge--pratica_respinta {
	background: var(--h2o-danger-soft);
	color: var(--h2o-danger);
	border-color: rgba(197, 61, 61, 0.18);
}

.h2o-lead-status-badge--pratica_accettata {
	background: var(--h2o-success-soft);
	color: var(--h2o-success);
	border-color: rgba(31, 139, 95, 0.18);
}

.h2o-lead-status-badge--in_consegna {
	background: var(--h2o-teal-soft);
	color: var(--h2o-teal);
	border-color: rgba(15, 118, 110, 0.18);
}

.h2o-lead-status-badge--consegnato {
	background: var(--h2o-green-2-soft);
	color: var(--h2o-green-2);
	border-color: rgba(21, 153, 71, 0.18);
}

.h2o-lead-status-badge--installato {
	background: var(--h2o-success-soft);
	color: var(--h2o-success);
	border-color: rgba(31, 139, 95, 0.18);
}

/* =========================
   Ranking / Classifica
========================= */

.h2o-ranking-hero {
	position: relative;
	overflow: hidden;
}

.h2o-ranking-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(21, 101, 192, 0.04), rgba(124, 58, 237, 0.03));
	pointer-events: none;
}

.h2o-ranking-hero > * {
	position: relative;
	z-index: 1;
}

.h2o-ranking-hero__header {
	margin-bottom: 14px;
}

.h2o-ranking-hero__header h3 {
	margin-bottom: 4px;
}

.h2o-ranking-hero__header p {
	margin: 0;
	color: var(--h2o-text-soft);
	font-size: var(--h2o-font-base);
}

.h2o-ranking-hero__footer {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--h2o-border);
	margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--h2o-border);
	color: var(--h2o-text-soft);
	font-size: 13px;
}

.h2o-ranking-podium {
	align-items: stretch;
}

.h2o-ranking-podium__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 22px 18px !important;
	min-height: 220px;
	justify-content: center;
	position: relative;
}

.h2o-ranking-podium__item::before {
	content: "";
	position: absolute;
	top: 0;
	height: 4px;
	border-radius: 999px;
	opacity: 0.95;
}

.h2o-ranking-podium__item--1::before {
	background: linear-gradient(90deg, #f7c948, #e0a800);
}

.h2o-ranking-podium__item--2::before {
	background: linear-gradient(90deg, #cfd6df, #9aa5b1);
}

.h2o-ranking-podium__item--3::before {
	background: linear-gradient(90deg, #d1895b, #b76e3a);
}

.h2o-ranking-podium__position {
	font-size: 26px;
	line-height: 1;
	font-weight: 900;
	letter-spacing: -0.04em;
	color: var(--h2o-text);
}

.h2o-ranking-podium__name {
	font-size: 16px;
	line-height: 1.3;
	color: var(--h2o-text);
}

.h2o-ranking-podium__score {
	font-size: 18px;
	font-weight: 800;
	color: var(--h2o-primary);
}

.h2o-ranking-podium__league {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--h2o-surface-strong);
	color: var(--h2o-text-soft);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.h2o-ranking-podium__bonus {
	margin-top: 6px;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--h2o-success-soft);
	color: var(--h2o-success);
	font-size: 12px;
	font-weight: 700;
}

.h2o-ranking-row--current td,
.h2o-ranking-neighbor--current td {
	background: #eef6ff !important;
}

.h2o-ranking-row--current td:first-child,
.h2o-ranking-neighbor--current td:first-child {
	box-shadow: inset 3px 0 0 var(--h2o-primary);
}

.h2o-ranking-bonus-badge,
.h2o-ranking-status-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	border: 1px solid transparent;
	white-space: nowrap;
}

.h2o-ranking-bonus-badge--none,
.h2o-ranking-status-badge--none {
	background: var(--h2o-surface-strong);
	color: var(--h2o-text-soft);
	border-color: var(--h2o-border);
}

.h2o-ranking-bonus-badge--eligible,
.h2o-ranking-status-badge--generated {
	background: var(--h2o-warning-soft);
	color: var(--h2o-warning);
	border-color: rgba(183, 121, 31, 0.18);
}

.h2o-ranking-status-badge--confirmed {
	background: var(--h2o-success-soft);
	color: var(--h2o-success);
	border-color: rgba(31, 139, 95, 0.18);
}

.h2o-ranking-status-badge--cancelled {
	background: var(--h2o-danger-soft);
	color: var(--h2o-danger);
	border-color: rgba(197, 61, 61, 0.18);
}

.h2o-ranking-league-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid transparent;
	white-space: nowrap;
}

.h2o-ranking-league-badge--bronze {
	background: #f7ece4;
	color: #9a5f3b;
	border-color: rgba(154, 95, 59, 0.18);
}

.h2o-ranking-league-badge--silver {
	background: #eef2f6;
	color: #6b7a89;
	border-color: rgba(107, 122, 137, 0.18);
}

.h2o-ranking-league-badge--gold {
	background: #fff6db;
	color: #b7791f;
	border-color: rgba(183, 121, 31, 0.18);
}

.h2o-ranking-league-badge--platinum {
	background: #eef0ff;
	color: #5b6cff;
	border-color: rgba(91, 108, 255, 0.18);
}

.h2o-ranking-league-badge--elite {
	background: #f3edff;
	color: #7c3aed;
	border-color: rgba(124, 58, 237, 0.18);
}

.h2o-ranking-section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.h2o-ranking-empty-note {
	color: var(--h2o-text-soft);
	font-size: 13px;
}

.h2o-ranking-filter-note {
	margin-top: -8px;
	margin-bottom: 12px;
	color: var(--h2o-text-faint);
	font-size: 12px;
}

.h2o-ranking-podium .h2o-card--panel,
.h2o-ranking-hero.h2o-card--panel {
	box-shadow: none !important;
}

.h2o-ranking-podium__item strong,
.h2o-ranking-hero strong {
	color: var(--h2o-text);
}

@media (max-width: 1024px) {
	.h2o-ranking-podium__item {
		min-height: 180px;
	}
}

@media (max-width: 782px) {
	.h2o-ranking-podium__item {
		min-height: auto;
		padding: 12px 10px !important;
	}

	.h2o-ranking-podium__position {
		font-size: 22px;
	}
}


/* =========================
   Mobile chart groups
========================= */

.h2o-mobile-chart-group {
	margin-bottom: 20px;
	padding: 0 !important;
	overflow: hidden;
}

.h2o-mobile-chart-group::before {display:none;}

.h2o-mobile-chart-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	border: 0;
	background: transparent;
	padding: 16px 18px;
	text-align: left;
	cursor: pointer;
	color: var(--h2o-text);
}

.h2o-mobile-chart-toggle__icon {
	width: 34px;
	height: 34px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--h2o-primary-soft);
	color: var(--h2o-primary);
	flex: 0 0 34px;
	font-size: 14px;
}

.h2o-mobile-chart-toggle__content {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 auto;
}

.h2o-mobile-chart-toggle__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--h2o-text);
}

.h2o-mobile-chart-toggle__subtitle {
	font-size: 12px;
	line-height: 1.35;
	color: var(--h2o-text-soft);
}

.h2o-mobile-chart-toggle__arrow {
	flex: 0 0 auto;
	color: var(--h2o-text-faint);
	font-size: 13px;
	transition: transform 0.2s ease;
}

.h2o-mobile-chart-toggle.is-open .h2o-mobile-chart-toggle__arrow,
.h2o-mobile-chart-toggle[aria-expanded="true"] .h2o-mobile-chart-toggle__arrow {
	transform: rotate(180deg);
}

.h2o-mobile-chart-group__body {
	padding: 0 18px 18px;
}


@media (min-width: 768px) {
	.h2o-mobile-chart-group {
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	.h2o-mobile-chart-toggle {
		display: none;
	}

	.h2o-mobile-chart-group__body {
		display: block !important;
		padding: 0;
		border-top: 0;
	}
}

@media (max-width: 767px) {
	
	.h2o-mobile-chart-group::before {display:block;}

	.h2o-mobile-chart-group .h2o-chart-grid {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
		margin-top: 16px;
	}

	.h2o-mobile-chart-group .h2o-chart-canvas-wrap {
		min-height: 190px;
	}
	
	.h2o-mobile-chart-group button:hover{background:none;border-color:none;}
	
	.h2o-mobile-chart-group .h2o-chart-card {min-height: unset;}
	
	.h2o-mobile-chart-group .h2o-chart-card__body {height: unset;}
	
	.h2o-mobile-chart-group .h2o-chart-empty {min-height: unset;}
	
	
	
}


/* =========================
   Incentive upgrade boxes
========================= */

.h2o-incentive-box {
	margin: 0 0 18px;
}

.h2o-incentive-box--compact {
	margin-bottom: 14px;
}

.h2o-incentive-box__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-bottom: 12px;
	font-size: 13px;
	color: var(--h2o-text-soft);
}

.h2o-incentive-box__message {
	font-size: 14px;
	line-height: 1.5;
	color: var(--h2o-text);
	margin-bottom: 14px;
}

.h2o-milestone-bar {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.h2o-milestone-bar__step {
	position: relative;
	padding: 12px;
	border: 1px solid var(--h2o-border);
	border-radius: var(--h2o-radius-sm);
	background: #fff;
	text-align: center;
}

.h2o-milestone-bar__step--done {
	border-color: rgba(31, 139, 95, 0.25);
	background: var(--h2o-success-soft);
}

.h2o-milestone-bar__step--current {
	border-color: rgba(21, 101, 192, 0.22);
	background: var(--h2o-primary-soft);
}

.h2o-milestone-bar__step--next {
	background: #fff;
}

.h2o-milestone-bar__dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--h2o-border-strong);
	margin: 0 auto 8px;
}

.h2o-milestone-bar__step--done .h2o-milestone-bar__dot {
	background: var(--h2o-success);
}

.h2o-milestone-bar__step--current .h2o-milestone-bar__dot {
	background: var(--h2o-primary);
}

.h2o-milestone-bar__label {
	font-size: 12px;
	font-weight: 800;
	color: var(--h2o-text-soft);
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.h2o-milestone-bar__amount {
	font-size: 14px;
	font-weight: 700;
	color: var(--h2o-text);
}

.h2o-lead-meta-inline {
	margin-top: 6px;
}

.h2o-lead-meta-inline--value {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: 8px;
	background: var(--h2o-success-soft);
	color: var(--h2o-success);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
}

.h2o-network-activity-inline {
	margin-top: 12px;
	margin-bottom: 14px;
}

.h2o-network-activity-inline__label {
	font-size: 12px;
	font-weight: 700;
	color: var(--h2o-text-soft);
	margin-bottom: 7px;
}

.h2o-network-activity-inline__bar {
	width: 100%;
	height: 10px;
	border-radius: 999px;
	background: var(--h2o-surface-strong);
	overflow: hidden;
}

.h2o-network-activity-inline__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--h2o-primary);
}

.h2o-ranking-legend {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
}

.h2o-ranking-legend__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--h2o-border);
	border-radius: var(--h2o-radius-sm);
	background: #fff;
}

.h2o-ranking-legend__label {
	font-size: 13px;
	color: var(--h2o-text);
	font-weight: 600;
}

.h2o-ranking-legend__points {
	font-size: 12px;
	font-weight: 800;
	color: var(--h2o-primary);
	white-space: nowrap;
}

@media (max-width: 782px) {
	.h2o-incentive-box__meta {
		gap: 5px;
	}

	.h2o-milestone-bar {
		gap: 10px !important;
		
	}
}

/* =========================
   Incentive visual upgrade
========================= */

.h2o-card-title-with-icon {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.h2o-card-title-with-icon i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--h2o-primary-soft);
	color: var(--h2o-primary);
	font-size: 14px;
	flex: 0 0 30px;
}

.h2o-incentive-box {
	position: relative;
	overflow: hidden;
}

.h2o-incentive-box::after {
	content: "";
	position: absolute;
	right: -24px;
	top: -24px;
	width: 90px;
	height: 90px;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(21, 101, 192, 0.08) 0%, rgba(21, 101, 192, 0) 72%);
	pointer-events: none;
}

.h2o-incentive-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--h2o-border);
	font-size: 12px;
	line-height: 1.2;
	color: var(--h2o-text-soft);
}

.h2o-incentive-chip i {
	color: var(--h2o-primary);
	font-size: 12px;
}

.h2o-incentive-box__message--highlight {
	padding: 14px 16px;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(21, 101, 192, 0.07) 0%, rgba(21, 101, 192, 0.03) 100%);
	border: 1px solid rgba(21, 101, 192, 0.14);
}

.h2o-milestone-bar {
	position: relative;
	gap: 12px;
}

.h2o-milestone-bar__step {
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.h2o-milestone-bar__step:hover {
	transform: translateY(-2px);
}

.h2o-milestone-bar__step--done {
	box-shadow: inset 0 0 0 1px rgba(31, 139, 95, 0.04);
}

.h2o-milestone-bar__step--current {
	box-shadow: 0 8px 20px rgba(21, 101, 192, 0.08);
}

.h2o-milestone-bar__dot {
	box-shadow: 0 0 0 6px rgba(195, 207, 221, 0.18);
}

.h2o-milestone-bar__step--done .h2o-milestone-bar__dot {
	box-shadow: 0 0 0 6px rgba(31, 139, 95, 0.10);
}

.h2o-milestone-bar__step--current .h2o-milestone-bar__dot {
	box-shadow: 0 0 0 6px rgba(21, 101, 192, 0.12);
}

.h2o-milestone-bar__label {
	letter-spacing: 0.07em;
}

.h2o-milestone-bar__amount {
	font-size: 15px;
	letter-spacing: -0.02em;
}

.h2o-network-activity-inline__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.h2o-network-activity-inline__label i {
	color: var(--h2o-primary);
}

.h2o-network-activity-inline__bar {
	height: 12px;
	background: linear-gradient(180deg, var(--h2o-surface-strong) 0%, #dde6f0 100%);
	border: 1px solid rgba(0, 0, 0, 0.02);
}

.h2o-network-activity-inline__bar span {
	background: linear-gradient(90deg, var(--h2o-primary) 0%, #4b7fe0 100%);
	box-shadow: 0 0 12px rgba(21, 101, 192, 0.18);
}

.h2o-ranking-legend {
	gap: 12px;
}

.h2o-ranking-legend__item {
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.h2o-ranking-legend__item:hover {
	transform: translateY(-2px);
	border-color: rgba(21, 101, 192, 0.18);
	box-shadow: 0 8px 18px rgba(21, 101, 192, 0.06);
}

.h2o-ranking-legend__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.h2o-ranking-legend__label i {
	color: var(--h2o-success);
	font-size: 13px;
}

.h2o-ranking-legend__points {
	padding: 5px 8px;
	border-radius: 999px;
	background: var(--h2o-primary-soft);
	color: var(--h2o-primary);
	font-size: 11px;
	font-weight: 800;
}

/* =========================
   Lead journey progress
========================= */

.h2o-lead-journey {
	margin-top: 14px;
}

.h2o-lead-journey__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.h2o-lead-journey__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--h2o-text-soft);
}

.h2o-lead-journey__label i {
	color: var(--h2o-primary);
}

.h2o-lead-journey__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 11px;
	border-radius: 999px;
	background: var(--h2o-primary-soft);
	color: var(--h2o-primary);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.h2o-lead-journey__track-wrap {
	padding: 0px 8px 0;
}

.h2o-lead-journey__track {
	position: relative;
	height: 30px;
}

.h2o-lead-journey__track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--h2o-surface-strong) 0%, #dde6f0 100%);
	border: 1px solid rgba(0, 0, 0, 0.03);
}

.h2o-lead-journey__fill {
	position: absolute;
	left: 0;
	top: 10px;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--h2o-primary) 0%, #4b7fe0 100%);
	box-shadow: 0 0 14px rgba(21, 101, 192, 0.18);
	z-index: 1;
}

.h2o-lead-journey__pin {
	position: absolute;
	top: 6px;
	transform: translateX(-50%);
	z-index: 2;
}

.h2o-lead-journey__dot {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: #c0cad7;
	border: 4px solid #fff;
	box-shadow: 0 0 0 6px rgba(192, 202, 215, 0.18);
}

.h2o-lead-journey__pin--done .h2o-lead-journey__dot {
	background: var(--h2o-success);
	box-shadow: 0 0 0 6px rgba(31, 139, 95, 0.12);
}

.h2o-lead-journey__pin--current .h2o-lead-journey__dot {
	background: var(--h2o-primary);
	box-shadow: 0 0 0 6px rgba(21, 101, 192, 0.14);
}

.h2o-lead-journey__milestones-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 15px;
}

.h2o-lead-journey__milestone-card {
	padding: 14px 12px;
	border-radius: 14px;
	border: 1px solid var(--h2o-border);
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.h2o-lead-journey__milestone-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(21, 101, 192, 0.07);
}

.h2o-lead-journey__milestone-card--done {
	background: var(--h2o-success-soft);
	border-color: rgba(31, 139, 95, 0.18);
}

.h2o-lead-journey__milestone-card--current {
	background: var(--h2o-primary-soft);
	border-color: rgba(21, 101, 192, 0.22);
	box-shadow: 0 10px 24px rgba(21, 101, 192, 0.08);
}

.h2o-lead-journey__milestone-card-dot {
	width: 16px;
	height: 16px;
	border-radius: 999px;
	margin: 0 auto 12px;
	background: #c0cad7;
	box-shadow: 0 0 0 6px rgba(192, 202, 215, 0.14);
}

.h2o-lead-journey__milestone-card--done .h2o-lead-journey__milestone-card-dot {
	background: var(--h2o-success);
	box-shadow: 0 0 0 6px rgba(31, 139, 95, 0.10);
}

.h2o-lead-journey__milestone-card--current .h2o-lead-journey__milestone-card-dot {
	background: var(--h2o-primary);
	box-shadow: 0 0 0 6px rgba(21, 101, 192, 0.12);
}

.h2o-lead-journey__step-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--h2o-text-soft);
	margin-bottom: 5px;
}

.h2o-lead-journey__step-amount {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--h2o-text);
}

@media (max-width: 782px) {
	.h2o-lead-journey__milestones-grid {
		gap: 10px;
	}
}


/* =========================
   Ranking journey progress
========================= */

.h2o-ranking-journey {
	margin-top: 16px;
}

.h2o-ranking-journey__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.h2o-ranking-journey__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--h2o-text-soft);
}

.h2o-ranking-journey__label i {
	color: var(--h2o-primary);
}

.h2o-ranking-journey__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 11px;
	border-radius: 999px;
	background: var(--h2o-primary-soft);
	color: var(--h2o-primary);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.h2o-ranking-journey__track-wrap {
	padding: 0px 8px 0;
}

.h2o-ranking-journey__track {
	position: relative;
	height: 30px;
}

.h2o-ranking-journey__track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--h2o-surface-strong) 0%, #dde6f0 100%);
	border: 1px solid rgba(0, 0, 0, 0.03);
}

.h2o-ranking-journey__fill {
	position: absolute;
	left: 0;
	top: 10px;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--h2o-primary) 0%, #4b7fe0 100%);
	box-shadow: 0 0 14px rgba(21, 101, 192, 0.18);
	z-index: 1;
}

.h2o-ranking-journey__pin {
	position: absolute;
	top: 6px;
	transform: translateX(-50%);
	z-index: 2;
}

.h2o-ranking-journey__dot {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: #c0cad7;
	border: 4px solid #fff;
	box-shadow: 0 0 0 6px rgba(192, 202, 215, 0.18);
}

.h2o-ranking-journey__pin--done .h2o-ranking-journey__dot {
	background: var(--h2o-success);
	box-shadow: 0 0 0 6px rgba(31, 139, 95, 0.12);
}

.h2o-ranking-journey__pin--current .h2o-ranking-journey__dot {
	background: var(--h2o-primary);
	box-shadow: 0 0 0 6px rgba(21, 101, 192, 0.14);
}

.h2o-ranking-journey__milestones-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	margin-top: 18px;
}

.h2o-ranking-journey__milestone-card {
	padding: 14px 10px;
	border-radius: 14px;
	border: 1px solid var(--h2o-border);
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.h2o-ranking-journey__milestone-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(21, 101, 192, 0.07);
}

.h2o-ranking-journey__milestone-card--done {
	background: var(--h2o-success-soft);
	border-color: rgba(31, 139, 95, 0.18);
}

.h2o-ranking-journey__milestone-card--current {
	background: var(--h2o-primary-soft);
	border-color: rgba(21, 101, 192, 0.22);
	box-shadow: 0 10px 24px rgba(21, 101, 192, 0.08);
}

.h2o-ranking-journey__milestone-card-dot {
	width: 16px;
	height: 16px;
	border-radius: 999px;
	margin: 0 auto 12px;
	background: #c0cad7;
	box-shadow: 0 0 0 6px rgba(192, 202, 215, 0.14);
}

.h2o-ranking-journey__milestone-card--done .h2o-ranking-journey__milestone-card-dot {
	background: var(--h2o-success);
	box-shadow: 0 0 0 6px rgba(31, 139, 95, 0.10);
}

.h2o-ranking-journey__milestone-card--current .h2o-ranking-journey__milestone-card-dot {
	background: var(--h2o-primary);
	box-shadow: 0 0 0 6px rgba(21, 101, 192, 0.12);
}

.h2o-ranking-journey__step-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--h2o-text-soft);
	margin-bottom: 5px;
}

.h2o-ranking-journey__step-amount {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--h2o-text);
}

@media (max-width: 980px) {
	.h2o-ranking-journey__milestones-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.h2o-ranking-journey__milestones-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
		
	}
	
	.h2o-ranking-legend {
    gap: 10px;
}
	
	
}


/* =========================
   Ranking legend collapsible
========================= */

.h2o-ranking-legend-box {
	padding: 2px 18px 18px;
}

.h2o-mobile-chart-group[data-h2o-mobile-chart-group="ranking-points-legend"] {
	margin-bottom: 18px;
}

.h2o-mobile-chart-group[data-h2o-mobile-chart-group="ranking-points-legend"] .h2o-mobile-chart-toggle__icon {
	background: var(--h2o-success-soft);
	color: var(--h2o-success);
}

@media (max-width: 767px) {
	.h2o-ranking-legend-box {
		padding: 2px 14px 14px;
	}
}


.h2o-referral-origin {
	display: inline-block;
	margin-top: 6px;
	color: var(--h2o-text-soft);
	line-height: 1.35;
}

.h2o-referral-origin strong {
	color: var(--h2o-text);
}

.h2o-referral-origin--missing {
	color: var(--h2o-warning);
}


/* =========================
   Modal frontend CRM
========================= */

body.h2o-modal-open {
	overflow: hidden;
}

.h2o-modal[hidden] {
	display: none !important;
}

.h2o-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
}

.h2o-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.h2o-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.62);
	backdrop-filter: blur(4px);
}

.h2o-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(560px, 100%);
	max-height: calc(100vh - 40px);
	overflow: auto;
	background: var(--h2o-surface);
	border: 1px solid var(--h2o-border);
	border-radius: 22px;
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
	transform: translateY(10px) scale(0.98);
	transition: transform 0.18s ease;
}

.h2o-modal.is-open .h2o-modal__dialog {
	transform: translateY(0) scale(1);
}

.h2o-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--h2o-text-soft);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.h2o-modal__header,
.h2o-modal__body,
.h2o-modal__footer {
	padding: 22px 24px;
}

.h2o-modal__header {
	padding-right: 70px;
	border-bottom: 1px solid var(--h2o-border);
}

.h2o-modal__header h3 {
	margin: 0 0 8px;
	font-size: 22px;
}

.h2o-modal__header p {
	margin: 0;
	color: var(--h2o-text-soft);
}

.h2o-modal__body select {
	width: 100%;
	margin-top: 8px;
}

.h2o-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	border-top: 1px solid var(--h2o-border);
	background: rgba(255, 255, 255, 0.42);
}

.h2o-vendor-assignment-cell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 190px;
}

.h2o-assigned-vendor-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border: 1px solid var(--h2o-border);
	border-radius: 12px;
	background: #fff;
}

.h2o-assigned-vendor-label span {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 800;
	color: var(--h2o-text-faint);
}

.h2o-assigned-vendor-label strong {
	font-size: 13px;
	line-height: 1.2;
}

.h2o-assigned-vendor-label small {
	color: var(--h2o-text-soft);
	font-size: 11px;
	line-height: 1.25;
}

@media (max-width: 600px) {
	.h2o-modal {
		align-items: flex-end;
		padding: 10px;
	}

	.h2o-modal__dialog {
		width: 100%;
		max-height: calc(100vh - 20px);
		border-radius: 20px;
	}

	.h2o-modal__footer {
		flex-direction: column-reverse;
	}

	.h2o-modal__footer .button {
		width: 100%;
		justify-content: center;
	}
}



/* =========================
   Modal aggiornamento stato venditore
========================= */

.h2o-vendor-status-modal .h2o-modal__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.h2o-modal-field {
	margin: 0;
}

.h2o-modal-field label {
	display: block;
	margin-bottom: 6px;
}

.h2o-vendor-status-modal select,
.h2o-vendor-status-modal textarea,
.h2o-vendor-status-modal input[type="datetime-local"] {
	width: 100%;
}

.h2o-vendor-status-modal textarea {
	min-height: 96px;
	resize: vertical;
}

.h2o-vendor-status-modal .h2o-appointment-field-wrap {
	margin: 0;
	padding: 12px;
	border: 1px solid var(--h2o-border);
	border-radius: 14px;
	background: #fff;
}

.h2o-vendor-status-modal-trigger {
	white-space: nowrap;
}

/* =========================
   Lead generated details cell
========================= */

.h2o-lead-details-cell {
	min-width: 190px;
}

.h2o-lead-detail-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 7px;
	color: var(--h2o-text);
	line-height: 1.35;
	font-size: 13px;
	word-break: break-word;
}

.h2o-lead-detail-row:last-child {
	margin-bottom: 0;
}

.h2o-lead-detail-row i {
	width: 16px;
	min-width: 16px;
	margin-top: 2px;
	color: var(--h2o-primary);
	font-size: 13px;
	text-align: center;
}

.h2o-lead-detail-row small {
	color: var(--h2o-text-soft);
	font-size: 11px;
	font-weight: 700;
}

.h2o-lead-detail-row--agent {
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px dashed var(--h2o-border);
}

.h2o-lead-detail-row--agent i {
	color: var(--h2o-violet);
}

.h2o-lead-detail-row--origin {
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px dashed var(--h2o-border);
}

.h2o-lead-detail-row--origin i {
	color: var(--h2o-teal);
}

.h2o-lead-detail-row--origin small {
	color: var(--h2o-text-soft);
}

.h2o-lead-detail-row--origin strong {
	font-weight: 800;
}

.h2o-lead-detail-row--vendor {
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px dashed var(--h2o-border);
}

.h2o-lead-detail-row--vendor i {
	color: var(--h2o-teal);
}

.h2o-status-date {
	display: inline-block;
	margin-top: 6px;
	color: var(--h2o-text-soft);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
}

/* =========================
   Appointment detail traffic light
========================= */

.h2o-lead-detail-row--appointment {
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px dashed var(--h2o-border);
}

.h2o-lead-detail-row--appointment i {
	color: var(--h2o-warning);
}

.h2o-lead-detail-row--appointment strong {
	font-weight: 800;
}

.h2o-appointment-traffic-light {
	display: inline-flex;
	width: 10px;
	height: 10px;
	margin-left: 7px;
	border-radius: 999px;
	vertical-align: middle;
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}

.h2o-appointment-traffic-light--green {
	background: var(--h2o-success);
}

.h2o-appointment-traffic-light--yellow {
	background: var(--h2o-warning);
}

.h2o-appointment-traffic-light--red {
	background: var(--h2o-danger);
}

.h2o-appointment-traffic-light--neutral {
	background: var(--h2o-text-faint);
}