/* =========================================================
   ROK PRICE TABLE
   ========================================================= */

.rok-price-table {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
}


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

.rok-price-card {
	position: relative;

	display: flex;
	flex-direction: column;

	width: 100%;
	min-height: 100%;

	padding: 46px 28px 24px;

	background: #ffffff;

	border: 1px solid #dfe5ec;
	border-radius: 20px;

	box-shadow: 0 8px 28px rgba(20, 35, 60, 0.08);

	text-align: center;

	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease,
		border-color 0.3s ease;
}

.rok-price-card:hover {
	transform: translateY(-5px);

	box-shadow: 0 18px 40px rgba(20, 35, 60, 0.12);
}


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

.rok-price-featured {
	background: #f2fff3;

	border: 2px solid #159447;

	box-shadow: 0 12px 35px rgba(21, 148, 71, 0.10);
}


/* =========================================================
   POPULAR BADGE
   ========================================================= */

.rok-price-badge {
	position: absolute;

	top: -18px;
	left: 50%;

	transform: translateX(-50%);

	min-width: 275px;
	height: 38px;

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

	gap: 9px;

	padding: 0 22px;

	background: #159447;

	border-radius: 30px;

	color: #ffffff;

	font-size: 13px;
	font-weight: 800;

	line-height: 1;

	letter-spacing: 0.8px;

	text-transform: uppercase;

	z-index: 20;
}

.rok-price-crown {
	color: #ffd84d;

	font-size: 15px;
	line-height: 1;
}


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

.rok-price-icon {
	width: 76px;
	height: 76px;

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

	margin: 0 auto 15px;

	background: #eef6ff;

	border-radius: 50%;

	color: var(--rok-price-accent);

	font-size: 34px;

	line-height: 1;
}

.rok-price-icon i {
	font-size: 34px;
}

.rok-price-icon svg {
	width: 34px;
	height: 34px;

	fill: currentColor;
}


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

.rok-price-featured .rok-price-icon {
	background: #e5f8df;
}


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

.rok-price-card:last-child .rok-price-icon {
	background: #fff0e9;
}


/* =========================================================
   PLAN LABEL
   ========================================================= */

.rok-price-label {
	margin-bottom: 8px;

	color: var(--rok-price-accent);

	font-size: 10px;
	font-weight: 800;

	line-height: 1.4;

	letter-spacing: 2px;

	text-transform: uppercase;
}


/* =========================================================
   TITLE
   ========================================================= */

.rok-price-title {
	margin: 0 0 13px;

	color: #071a44;

	font-size: 29px;
	font-weight: 800;

	line-height: 1.2;

	letter-spacing: -0.5px;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.rok-price-description {
	width: 100%;
	margin: 0 auto;

	color: #526079;

	font-size: 15px;

	line-height: 1.65;
}


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

.rok-price-divider {
	width: 100%;
	height: 0px;

	margin: 7px 0 10px;

	background: #d9dfe7;
}


/* =========================================================
   PRICE
   ========================================================= */

.rok-price-value {
	margin-bottom: 8px;

	color: var(--rok-price-accent);

	font-size: 48px;
	font-weight: 800;

	line-height: 1;

	letter-spacing: -1.5px;
}


/* =========================================================
   PRICE NOTE
   ========================================================= */

.rok-price-note {
	margin-bottom: 21px;

	color: #526079;

	font-size: 15px;

	line-height: 1.5;
}


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

.rok-price-features {
	flex: 1;

	width: 100%;

	margin: 0;
	padding: 0;

	list-style: none;

	text-align: left;
}

.rok-price-feature {
	display: flex;
	align-items: flex-start;

	gap: 10px;

	margin-bottom: 10px;

	padding: 0;
}

.rok-price-check {
	flex: 0 0 19px;

	width: 19px;
	height: 19px;

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

	margin-top: 2px;

	border-radius: 50%;

	color: #ffffff;

	font-size: 8px;

	line-height: 1;
}

.rok-price-check i {
	font-size: 10px;
}

.rok-price-feature-text {
	color: #28364e;

	font-size: 15px;

	line-height: 1.55;
}


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

.rok-price-button {
	width: 100%;

	min-height: 50px;

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

	gap: 10px;

	margin-top: 23px;

	padding: 14px 20px;

	border-radius: 7px;

	color: #ffffff !important;

	font-size: 13px;
	font-weight: 800;

	line-height: 1;

	letter-spacing: 0.3px;

	text-decoration: none !important;

	transition:
		transform 0.25s ease,
		filter 0.25s ease,
		box-shadow 0.25s ease;
}

.rok-price-button:hover {
	color: #ffffff !important;

	filter: brightness(0.94);

	transform: translateY(-2px);

	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.rok-price-arrow {
	font-size: 18px;

	line-height: 1;

	transition: transform 0.25s ease;
}

.rok-price-button:hover .rok-price-arrow {
	transform: translateX(4px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.rok-price-table {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rok-price-card:last-child {
		grid-column: 1 / -1;

		width: 50%;

		margin-left: auto;
		margin-right: auto;
	}

}


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

@media (max-width: 767px) {

	.rok-price-table {
		grid-template-columns: 1fr;

		gap: 30px;
	}

	.rok-price-card:last-child {
		grid-column: auto;

		width: 100%;
	}

	.rok-price-card {
		padding-left: 22px;
		padding-right: 22px;
	}

	.rok-price-badge {
		min-width: 230px;

		font-size: 11px;
	}

	.rok-price-title {
		font-size: 26px;
	}

	.rok-price-value {
		font-size: 42px;
	}

	.rok-price-description {
		min-height: auto;
	}

}