/* KHP / SynergyBus overrides on Tabler */

/* Portal brand tokens — kirjautuminen + sisäänkirjautunut puoli */
.tabler-portal-ta {
	--khp-brand: #1cca5a;
	--khp-brand-rgb: 28, 202, 90;
	--khp-brand-hover: #2ebd59;
	--khp-brand-active: #18b34f;
	--tblr-primary: var(--khp-brand);
	--tblr-primary-rgb: var(--khp-brand-rgb);
	--tblr-success: var(--khp-brand);
	--tblr-success-rgb: var(--khp-brand-rgb);
}

.tabler-portal-sb {
	--khp-brand: #198754;
	--khp-brand-rgb: 25, 135, 84;
	--khp-brand-hover: #157347;
	--khp-brand-active: #146c43;
	--tblr-primary: var(--khp-brand);
	--tblr-primary-rgb: var(--khp-brand-rgb);
	--tblr-success: var(--khp-brand);
	--tblr-success-rgb: var(--khp-brand-rgb);
}

/* Yhtenäiset toimintonapit (primary + success) */
.tabler-portal-ta .btn-primary,
.tabler-portal-sb .btn-primary,
.tabler-portal-ta .btn-success,
.tabler-portal-sb .btn-success {
	--tblr-btn-color: #fff;
	--tblr-btn-bg: var(--khp-brand);
	--tblr-btn-border-color: var(--khp-brand);
	--tblr-btn-hover-color: #fff;
	--tblr-btn-hover-bg: var(--khp-brand-hover);
	--tblr-btn-hover-border-color: var(--khp-brand-hover);
	--tblr-btn-active-color: #fff;
	--tblr-btn-active-bg: var(--khp-brand-active);
	--tblr-btn-active-border-color: var(--khp-brand-active);
	--tblr-btn-disabled-color: #fff;
	--tblr-btn-disabled-bg: var(--khp-brand);
	--tblr-btn-disabled-border-color: var(--khp-brand);
}

.tabler-portal-ta .btn-outline-success,
.tabler-portal-sb .btn-outline-success {
	--tblr-btn-color: var(--khp-brand);
	--tblr-btn-border-color: var(--khp-brand);
	--tblr-btn-hover-color: #fff;
	--tblr-btn-hover-bg: var(--khp-brand);
	--tblr-btn-hover-border-color: var(--khp-brand);
	--tblr-btn-active-color: #fff;
	--tblr-btn-active-bg: var(--khp-brand-active);
	--tblr-btn-active-border-color: var(--khp-brand-active);
}

.tabler-portal-ta .form-control:focus,
.tabler-portal-sb .form-control:focus,
.tabler-portal-ta .form-select:focus,
.tabler-portal-sb .form-select:focus {
	border-color: var(--khp-brand);
	box-shadow: 0 0 0 0.25rem rgba(var(--khp-brand-rgb), 0.15);
}

/* ta-globals.css adds padding-top:120px to .page — reset for Tabler shell */
body.layout-fluid > .page {
	padding-top: 0;
	padding-bottom: 0;
}

/* Sticky footer: tyhjä tila kasvaa page-bodyssä, footer viewportin alareunassa */
html {
	height: 100%;
}

body.layout-fluid {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

body.layout-fluid > .page {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
}

body.layout-fluid > .page > .page-wrapper {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

body.layout-fluid > .page > .page-wrapper > .page-body {
	flex: 1 0 auto;
}

.tabler-portal-ta .navbar {
	background: #141414;
	color: #fff;
}

.tabler-portal-ta .navbar .nav-link,
.tabler-portal-ta .navbar .navbar-brand {
	color: rgba(255, 255, 255, 0.85);
}

.tabler-portal-ta .navbar .nav-link:hover,
.tabler-portal-ta .navbar .nav-link:focus {
	color: var(--khp-brand-hover);
}

.tabler-portal-sb .navbar {
	background: #222;
	color: #fff;
}

.tabler-portal-sb .navbar .nav-link,
.tabler-portal-sb .navbar .navbar-brand {
	color: rgba(255, 255, 255, 0.85);
}

.tabler-portal-sb .navbar .nav-link:hover,
.tabler-portal-sb .navbar .nav-link:focus {
	color: #fff;
}

.khp-sidebar {
	margin-bottom: 1rem;
	min-width: 0;
}

/* Sivuvalikko — ei Tabler .nav (flex-wrap rikkoo pystylistan) */
.khp-sidebar-nav {
	list-style: none;
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 0;
}

.khp-sidebar-nav > .nav-item,
.khp-sidebar-nav > li {
	display: block;
	width: 100%;
	max-width: 100%;
	float: none !important;
	clear: both;
}

.khp-sidebar-nav .nav-link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-decoration: none;
}

/* SynergyBus yrityssivuvalikko — vasen sarake, taustaväri */
.tabler-portal-sb .khp-sidebar-card {
	background-color: #eef0f3;
	border: 1px solid #dde1e6;
	box-shadow: none;
}

.tabler-portal-sb .khp-sidebar-card .card-body {
	background-color: #eef0f3;
}

.tabler-portal-sb .khp-sidebar-nav .nav-link {
	display: block;
	width: 100%;
	color: var(--tblr-secondary) !important;
	background: transparent !important;
}

.tabler-portal-sb .khp-sidebar-nav .nav-link:hover,
.tabler-portal-sb .khp-sidebar-nav .nav-link:focus {
	color: var(--tblr-body-color) !important;
	background: transparent !important;
}

.tabler-portal-sb .khp-sidebar-nav .nav-link.active {
	color: var(--tblr-body-color) !important;
	border-left-color: var(--khp-brand) !important;
	font-weight: 600;
	background: var(--tblr-active-bg) !important;
}

.tabler-portal-sb .khp-sidebar-divider {
	border-color: #c8cdd4;
	opacity: 1;
}

.khp-sidebar-section {
	padding: 0.35rem 0.75rem 0.15rem;
}

.khp-sidebar-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tblr-secondary);
	line-height: 1.2;
}

.tabler-portal-sb .khp-sidebar-label {
	color: #6b7280;
}

/* Ratings (company_ratings) */
.khp-ratings-summary-score {
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.2;
}

.khp-rating-star {
	color: #5bc0de;
}

.khp-main .ratings-title {
	margin-top: 0;
}

.tabler-portal-sb .navbar-brand-image {
	max-height: 2rem;
}

.tabler-portal-sb .khp-clock {
	color: var(--tblr-secondary);
	font-size: 0.8125rem;
}

.tabler-portal-sb .khp-user-meta small {
	color: var(--tblr-secondary);
	font-size: 0.75rem;
}

/* sb-styles utility classes (sb-styles.css ei ladata tabler_userissa) */
.fa-green {
	color: #5cb85c;
}

.fa-red {
	color: #d9534f;
}

.light-blue {
	color: #5bc0de;
}

/* Sidebar navigation (CompanyTabs, ProfileTabs, UserTabs) */
.khp-main .card {
	border: 0;
	box-shadow: var(--tblr-box-shadow-input);
}

.khp-sidebar-nav .nav-link {
	color: var(--tblr-secondary);
	border-left: 3px solid var(--tblr-border-color);
	margin-bottom: 2px;
	padding: 0.5rem 0.75rem;
	border-radius: var(--tblr-border-radius);
}

.khp-sidebar-nav .nav-link:hover {
	color: var(--tblr-body-color);
	border-left-color: var(--tblr-primary);
}

.khp-sidebar-nav .nav-link.active {
	color: var(--tblr-body-color);
	border-left-color: var(--tblr-primary);
	font-weight: 600;
	background: var(--tblr-active-bg);
}

.khp-sidebar-nav .nav-link .fa,
.khp-sidebar-nav .nav-link .far,
.khp-sidebar-nav .nav-link .fal {
	display: inline-block;
	width: 1.25rem;
}

/* sb-styles.css legacy — ei käytössä tabler_userissa, varmuuden vuoksi */
.layout-fluid .khp-sidebar .nav > li > a,
.layout-fluid .khp-sidebar .khp-sidebar-nav > li > a,
.layout-fluid .khp-sidebar-nav > li > a.nav-link,
.layout-fluid .khp-sidebar-nav .nav-item > .nav-link {
	color: var(--tblr-secondary) !important;
	margin: 0 0 2px 0 !important;
	padding: 0.5rem 0.75rem;
	background: transparent !important;
	border-radius: var(--tblr-border-radius);
}

.layout-fluid .khp-sidebar-nav > li.active > a,
.layout-fluid .khp-sidebar-nav > li.active > a:hover,
.layout-fluid .khp-sidebar-nav > li.active > a:focus {
	color: var(--tblr-body-color);
	border-left: 3px solid var(--khp-brand);
	font-weight: 600;
	background: var(--tblr-active-bg);
}

.khp-admin-stat-value {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
}

.khp-admin-stat-label {
	color: var(--tblr-secondary);
	font-size: 0.8125rem;
}

.page-body .container-xl > .row {
	align-items: flex-start;
}

@media (min-width: 992px) {
	.page-body .khp-sidebar.col-lg-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.page-body .khp-main.col-lg-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}
}

.khp-main .page-header,
.khp-main > h1.page-header {
	margin-top: 0;
	margin-bottom: 1.5rem;
	font-size: 1.75rem;
	font-weight: 500;
}

/* CakePHP paginator (BS3-style markup) */
.pagination > li > a,
.pagination > li > span {
	position: relative;
	display: block;
	padding: 0.25rem 0.5rem;
	color: var(--tblr-link-color);
	text-decoration: none;
	background-color: var(--tblr-body-bg);
	border: 1px solid var(--tblr-border-color);
}

.pagination > li > a:hover {
	background-color: var(--tblr-tertiary-bg);
}

.pagination > li.active > a,
.pagination > li.active > span {
	z-index: 3;
	color: #fff;
	background-color: var(--tblr-primary);
	border-color: var(--tblr-primary);
}

.pagination > li.disabled > a,
.pagination > li.disabled > span {
	color: var(--tblr-secondary);
	pointer-events: none;
}

/* Legacy status colors */
.fa-open {
	color: var(--tblr-success);
}

/* BS5: .bg-* on badges sets background only — ensure readable label text */
.tabler-portal-ta .badge.bg-primary,
.tabler-portal-ta .badge.bg-success,
.tabler-portal-ta .badge.bg-danger,
.tabler-portal-ta .badge.bg-secondary,
.tabler-portal-ta .badge.bg-info,
.tabler-portal-ta .badge.bg-azure,
.tabler-portal-sb .badge.bg-primary,
.tabler-portal-sb .badge.bg-success,
.tabler-portal-sb .badge.bg-danger,
.tabler-portal-sb .badge.bg-secondary,
.tabler-portal-sb .badge.bg-info,
.tabler-portal-sb .badge.bg-azure {
	color: #fff;
}

.fa-close {
	color: var(--tblr-danger);
}

.card.border-success > .card-header {
	background-color: var(--tblr-success);
	color: #fff;
}

.card.border-info > .card-header {
	background-color: var(--tblr-info);
	color: #000;
}

.card.border-warning > .card-header {
	background-color: var(--tblr-warning);
	color: #000;
}

.thumbnail.company-thumbnail img {
	max-width: 100%;
	height: auto;
}

/* TA footer — tumma teema, sama linja kuin navbar (#141414) + vihreä aksentti */
.khp-ta-footer {
	background-color: #141414;
	color: #a8adb2;
	border-top: 2px solid var(--khp-brand);
	padding: 2rem 0;
	margin-top: auto;
	flex-shrink: 0;
}

.khp-ta-footer h4 {
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
	color: #e8eaed;
}

.khp-ta-footer a {
	color: #b8bcc2;
	text-decoration: none;
}

.khp-ta-footer a:hover,
.khp-ta-footer a:focus {
	color: var(--khp-brand-hover);
}

.khp-ta-footer address {
	margin-bottom: 0;
	color: #a8adb2;
}

.khp-ta-footer address strong {
	color: #e8eaed;
}

.khp-ta-footer .fa-circle.fa-open {
	color: var(--khp-brand);
}

.khp-ta-footer .fa-circle.fa-close {
	color: #6c757d;
}

/* --- Legacy CSS overrides (ta-user-styles / sb-styles) --- */
body.layout-fluid .footer.khp-ta-footer {
	position: static;
	bottom: auto;
	height: auto;
	width: 100%;
	padding: 2rem 0;
	margin-top: auto;
	flex-shrink: 0;
	background-color: #141414;
	color: #a8adb2;
	border-top: 2px solid var(--khp-brand);
	z-index: auto;
}

body.layout-fluid .footer.khp-ta-footer h4 {
	color: #e8eaed;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
}

body.layout-fluid .footer.khp-ta-footer a {
	color: #b8bcc2;
}

body.layout-fluid .footer.khp-ta-footer a:hover,
body.layout-fluid .footer.khp-ta-footer a:focus {
	color: var(--khp-brand-hover);
}

body.layout-fluid .khp-tabler-navbar.navbar {
	border: none;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.khp-tabler-navbar .container-xl {
	align-items: center;
}

/* ta-user-styles / sb-styles add margin-top on .navbar-nav */
.khp-tabler-navbar .navbar-nav {
	margin-top: 0;
}

.khp-tabler-navbar .nav-item.dropdown > .nav-link {
	padding: 0.25rem 0.5rem;
}

.khp-tabler-navbar .dropdown-menu {
	padding: 0.35rem 0;
	min-width: 11rem;
	margin-top: 0.35rem;
}

.khp-tabler-navbar .dropdown-item {
	padding: 0.45rem 0.85rem;
	font-size: 0.875rem;
	line-height: 1.25;
	display: flex;
	align-items: center;
}

.khp-tabler-navbar .dropdown-item .fa,
.khp-tabler-navbar .dropdown-item .far,
.khp-tabler-navbar .dropdown-item .fal {
	width: 1.125rem;
	text-align: center;
	margin-right: 0.5rem;
	flex-shrink: 0;
	opacity: 0.75;
}

.khp-tabler-navbar .dropdown-divider {
	margin: 0.35rem 0;
}

.khp-tabler-navbar .nav-link .nav-link-icon,
.khp-tabler-navbar .nav-link .fa {
	width: 1.125rem;
	text-align: center;
	margin-right: 0.35rem;
}

/* Prevent horizontal page scroll */
html,
body.layout-fluid {
	overflow-x: hidden;
}

.page,
.page-wrapper,
.page-body {
	max-width: 100%;
}

/* --- Mobile (< 992px) --- */
@media (max-width: 991.98px) {
	.khp-main .page-header,
	.khp-main > h1.page-header {
		font-size: 1.35rem;
		margin-bottom: 1rem;
	}

	.page-body {
		padding-top: 0.75rem;
		padding-bottom: 1rem;
	}

	.container-xl {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.khp-sidebar {
		margin-bottom: 0.75rem;
	}

	/* Form rows: stack label + fields */
	.khp-main .row > [class*="col-sm-"],
	.khp-main .row > [class*="col-md-"],
	.khp-main .row > [class*="col-lg-"] {
		width: 100%;
		max-width: 100%;
	}

	.khp-main .col-form-label,
	.khp-main .control-label {
		padding-bottom: 0.25rem;
	}

	/* Scrollable tables */
	.khp-main .table-responsive {
		-webkit-overflow-scrolling: touch;
	}

	.khp-main .card-body:has(> table.table),
	.khp-main .card-body:has(> .table) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.khp-main table.table {
		font-size: 0.875rem;
	}

	.khp-main table.table th,
	.khp-main table.table td {
		white-space: nowrap;
	}

	/* Paginator */
	.khp-main .pagination {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.125rem;
	}

	/* Button groups / floated actions */
	.khp-main .btn-group.float-end,
	.khp-main .float-end.btn-group {
		float: none;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-top: 0.5rem;
	}

	.khp-ta-footer .row > [class*="col-"] {
		margin-bottom: 1.25rem;
	}

	/* Navbar collapsed menu */
	.khp-tabler-navbar .navbar-collapse .navbar-nav .nav-link {
		padding: 0.625rem 0.75rem;
	}
}

/* --- Small phones (< 576px) --- */
@media (max-width: 575.98px) {
	.khp-tabler-navbar .navbar-brand-image {
		max-width: 120px;
		height: auto;
	}

	.khp-main .btn {
		white-space: normal;
	}

	.khp-main .input-group {
		flex-wrap: nowrap;
	}

	.khp-main .input-group .form-control {
		min-width: 0;
	}

	.new-order-form .card-body {
		padding: 0.75rem;
	}
}

/* Touch: remove 300ms delay on tap targets */
.khp-tabler-navbar .nav-link,
.khp-sidebar-nav .nav-link,
.khp-main .btn {
	touch-action: manipulation;
}

.tabler-portal-sb .khp-tabler-navbar .sb-user-circle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #428bca;
	color: #fff;
}

.tabler-portal-sb .khp-tabler-navbar .khp-user-meta {
	color: rgba(255, 255, 255, 0.85);
}

.tabler-portal-sb .khp-tabler-navbar .khp-user-meta small {
	color: rgba(255, 255, 255, 0.55);
}

/* Desktop: sidebar aina näkyvissä; mobiili: Menu-nappi */
@media (min-width: 992px) {
	.khp-sidebar-card .khp-sidebar-menu {
		display: block !important;
	}
}

@media (max-width: 991.98px) {
	.khp-sidebar-card:not(.khp-sidebar-open) .khp-sidebar-menu {
		display: none;
	}

	.khp-sidebar-card.khp-sidebar-open .khp-sidebar-menu {
		display: block;
	}
}

/* Home dashboard */
.khp-home-logo {
	max-height: 48px;
	max-width: 120px;
	object-fit: contain;
}

.khp-home-rating .rating {
	font-size: 0.875rem;
}

.khp-home-list-btn {
	font-weight: 500;
	white-space: nowrap;
}

.khp-home-list-btn .fa {
	font-size: 0.75rem;
	vertical-align: baseline;
}

/* Admin order stats charts */
.khp-chart-canvas-holder {
	position: relative;
	max-width: 100%;
}

.khp-chart-doughnut {
	max-width: 320px;
	margin: 0 auto;
}

.khp-chart-labels {
	margin-top: 0.75rem;
	font-size: 0.875rem;
}

.khp-chart-labels .fa-all {
	color: #d9edf7;
}

.khp-chart-labels .fa-new {
	color: #dff0d8;
}

.khp-chart-labels .fa-closed {
	color: #f2dede;
}

.khp-progress-thin {
	height: 0.5rem;
}

/* Tarjouspyyntölista: minikilpailutus vs. suora tilaus */
.khp-order-type {
	display: inline-block;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	vertical-align: middle;
}

.khp-order-type--mini {
	background-color: #e9ecef;
	color: #495057;
}

.khp-order-type--direct {
	background-color: #206bc4;
	color: #fff;
}

/* TA portal: tarjouspyyntö & order form cards */
.tabler-portal-ta .ta-card-green {
	border: 0;
	border-radius: 0;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.tabler-portal-ta .ta-card-green-header {
	color: #fff;
	background-color: var(--khp-brand);
	text-align: center;
	border: 0;
	border-radius: 0;
}

.tabler-portal-ta .new-order-form-compact .ta-card-green-header {
	padding: 0.45rem 0.75rem;
}

/* TA portal: tarjouspyyntö billing card */
.tabler-portal-ta .view-order-billing .card-body {
	padding: 1rem 1.25rem;
}

.tabler-portal-ta .khp-billing-block-title {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6c757d;
	margin-bottom: 0.35rem;
}

.tabler-portal-ta .khp-billing-block-lead {
	font-size: 1.05rem;
	font-weight: 600;
	color: #212529;
	margin-bottom: 0.5rem;
}

.tabler-portal-ta .khp-billing-details li {
	font-size: 0.925rem;
	line-height: 1.45;
	margin-bottom: 0.35rem;
}

.tabler-portal-ta .khp-billing-details li:last-child {
	margin-bottom: 0;
}

.tabler-portal-ta .khp-billing-contact {
	font-size: 0.925rem;
}

.tabler-portal-ta .khp-billing-contact-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: #6c757d;
	margin-bottom: 0.15rem;
}

.tabler-portal-ta .khp-billing-reference {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 0.375rem;
	padding: 0.75rem 1rem;
}

.tabler-portal-ta .khp-billing-reference-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6c757d;
	margin-bottom: 0.25rem;
}

.tabler-portal-ta .khp-billing-reference-value {
	font-size: 1.1rem;
	font-weight: 600;
	color: #212529;
	font-variant-numeric: tabular-nums;
}

/* SB portal utilities (merged from sb-user-bs5.css) */
.main-full {
	padding: 20px 0;
}

.canvas-body {
	padding-right: 30px;
	margin-right: 30px;
}

.search-form select {
	margin-right: 5px;
}

.form-control-static {
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	margin-bottom: 0;
}

.form-horizontal .form-group,
.form-horizontal .row.mb-3 {
	margin-bottom: 1rem;
}

/* --- Merged from ta-user-styles.css + ta-globals.css --- */

.fa-new {
	color: #dff0d8;
}

.fa-closed {
	color: #f2dede;
}

.fa-all {
	color: #d9edf7;
}

.green {
	color: #1ed760;
}

.orange {
	color: orange;
}

.grey {
	color: #afafaf;
}

.rating {
	margin-right: 2px;
}

.ratings-title {
	margin-top: -5px;
}

.btn-submit {
	display: inline-block;
	padding: 10px 25px;
	font-size: 14px;
	border-radius: 25px;
	color: #fff;
	background-color: var(--khp-brand);
	border: 1px solid var(--khp-brand);
	text-transform: uppercase;
}

.btn-submit:hover,
.btn-submit:focus,
.btn-submit:active,
.btn-submit.active,
.open .dropdown-toggle.btn-submit {
	color: #fff;
	background-color: var(--khp-brand-hover);
	border-color: var(--khp-brand-hover);
}

.form-section {
	margin-bottom: 25px;
}

.infotip {
	color: #accae4;
	clear: both;
}

.company-info {
	color: #121212;
	font-size: 0.9em;
	margin-bottom: 20px;
}

.company-address {
	margin-top: -4px;
	color: #7e7e7e;
	background: #f5f5f5;
	padding: 10px 15px;
	font-size: 0.9em;
}

.star-rating__wrap {
	display: block;
}

.star-rating__wrap:after {
	content: "";
	display: block;
	clear: both;
}

.star-rating__ico {
	float: right;
	padding-left: 2px;
	cursor: pointer;
	color: #afafaf;
}

.star-rating__ico:last-child {
	padding-left: 0;
}

.star-rating__input {
	display: none;
}

.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before {
	content: "\f005";
	color: #5bc0de;
}

.row-bottom {
	margin-bottom: 100px;
}

.about-text h4 {
	font-size: 14px;
}

.about-text {
	font-size: 12px;
}

.list-benefits {
	font-size: 1.5em;
	margin-top: 50px;
}

.list-benefits li {
	margin-bottom: 0.5em;
}

.centered {
	text-align: center;
}

.view-order-steps {
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.view-order-steps .view-order-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
	padding: 0.5rem 0.25rem;
}

.view-order-steps .view-order-step__icon {
	display: block;
	width: auto;
	height: auto;
	line-height: 1;
	font-size: 3em;
	color: var(--khp-brand);
}

.view-order-steps .view-order-step__title {
	margin: 0;
	line-height: 1.35;
	font-weight: 600;
	width: 100%;
}

.view-order-steps .view-order-step__title small {
	display: block;
	margin-top: 0.25rem;
	font-weight: 400;
	color: var(--tblr-secondary, #6c757d);
}

.phases {
	margin: 60px 0;
}

.phases .row {
	margin: 30px 0;
}

.phases .icon {
	margin-top: 40px;
}

.page-alternative {
	background: #f9f9f9;
	padding: 100px 0;
	margin-top: 100px;
	margin-bottom: 100px;
}

#about {
	background: #fbfffa;
	color: #333;
	padding: 60px 0 100px 0;
	margin-top: 60px;
}

.dn {
	display: none;
}