/**
 * Theme 4: Premium / Featured Card
 * Compatible with Per-Column Design Options
 *
 * @package Pricing_Table_Free
 */


/* ---------------------------------------------------------
 * Card
 * --------------------------------------------------------- */

.ptw-theme-4 .ptw-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	overflow: hidden;

	background: #ffffff;

	border: 1px solid #e5e0d6;
	border-radius: 14px;

	box-shadow: 0 8px 28px rgba(40,35,25,.09);

	text-align: center;

	transition:
		transform .35s ease,
		box-shadow .35s ease;
}


/* ---------------------------------------------------------
 * Hover
 * --------------------------------------------------------- */

.ptw-theme-4 .ptw-plan:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(40,35,25,.14);
}


/* ---------------------------------------------------------
 * Header
 * --------------------------------------------------------- */

.ptw-theme-4 .ptw-plan__header {
	position: relative;

	padding: 38px 25px 35px;

	background: var(--ptw-header-bg, #20242a);
	color: var(--ptw-header-color, #ffffff);
}


/* Decorative top border */

.ptw-theme-4 .ptw-plan__header::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;

	height: 4px;

	background: var(--ptw-btn-bg, #d4a72c);

	content: "";
}


/* ---------------------------------------------------------
 * Eyebrow
 * --------------------------------------------------------- */

.ptw-theme-4 .ptw-plan__eyebrow {
	margin-bottom: 12px;

	color: var(--ptw-btn-bg, #d4a72c);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.4;

	text-transform: uppercase;
}


/* ---------------------------------------------------------
 * Title
 * --------------------------------------------------------- */

.ptw-theme-4 .ptw-plan__title {
	margin: 0;

	color: var(--ptw-header-color, #ffffff);

	font-size: var(--ptw-title-size, 21px);
	font-weight: 700;
	line-height: 1.4;

	letter-spacing: .2px;
}


/* ---------------------------------------------------------
 * Subtitle
 * --------------------------------------------------------- */

.ptw-theme-4 .ptw-plan__subtitle {
	max-width: 250px;

	margin: 10px auto 0;

	color: var(--ptw-subtitle-color, rgba(255,255,255,.65));

	font-size: var(--ptw-subtitle-size, 13px);
	line-height: 1.6;
}


/* ---------------------------------------------------------
 * Price
 * --------------------------------------------------------- */

.ptw-theme-4 .ptw-plan__price {
	display: flex;
	align-items: baseline;
	justify-content: center;

	margin-top: 24px;

	color: var(--ptw-price-color, #ffffff);

	line-height: 1;
}

.ptw-theme-4 .ptw-plan__currency {
	margin-right: 4px;

	color: var(--ptw-btn-bg, #d4a72c);

	font-size: calc(var(--ptw-price-size, 64px) * .38);
	font-weight: 700;
}

.ptw-theme-4 .ptw-plan__amount {
	font-size: var(--ptw-price-size, 64px);
	font-weight: 800;
	line-height: 1;
}


/* ---------------------------------------------------------
 * Features
 * --------------------------------------------------------- */

.ptw-theme-4 .ptw-plan__features {
	flex: 1;

	padding: 8px 0;

	background: var(--ptw-features-bg, #ffffff);
}

.ptw-theme-4 .ptw-plan__features ul {
	margin: 0;
	padding: 0;

	list-style: none;
}

.ptw-theme-4 .ptw-plan__features li {
	display: flex;
	align-items: center;

	margin: 0 20px;
	padding: 13px 5px;

	border-bottom: 1px solid #eeeae2;

	background: transparent;
	color: var(--ptw-features-color, #626262);

	font-size: var(--ptw-features-size, 14px);
	line-height: 1.5;

	text-align: left;
}

.ptw-theme-4 .ptw-plan__features li:last-child {
	border-bottom: 0;
}


/* ---------------------------------------------------------
 * Feature Icon
 * --------------------------------------------------------- */

.ptw-theme-4 .ptw-plan__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 22px;

	width: 22px;
	height: 22px;

	margin-right: 10px;

	border-radius: 50%;

	background: color-mix(in srgb, var(--ptw-btn-bg, #d4a72c) 18%, white);
	color: var(--ptw-btn-bg, #b58a1c);

	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.ptw-theme-4 .ptw-plan__feature-text {
	flex: 1;
}


/* ---------------------------------------------------------
 * Footer
 * --------------------------------------------------------- */

.ptw-theme-4 .ptw-plan__footer {
	padding: 25px;

	background: #faf9f6;

	border-top: 1px solid #eeeae2;
}


/* ---------------------------------------------------------
 * Button
 * --------------------------------------------------------- */

.ptw-theme-4 .ptw-plan__button {
	display: block;

	padding: 14px 20px;

	border: 1px solid var(--ptw-btn-bg, #20242a);
	border-radius: 6px;

	background: var(--ptw-btn-bg, #20242a);
	color: var(--ptw-btn-color, #ffffff);

	font-size: var(--ptw-btn-size, 13px);
	font-weight: 700;
	line-height: 1.4;

	text-align: center;
	text-decoration: none;
	text-transform: uppercase;

	transition:
		background-color .3s ease,
		border-color .3s ease,
		transform .3s ease;
}

.ptw-theme-4 .ptw-plan__button:hover,
.ptw-theme-4 .ptw-plan__button:focus {
	border-color: var(--ptw-btn-bg, #d4a72c);
	background: var(--ptw-btn-bg, #d4a72c);
	color: var(--ptw-btn-color, #ffffff);

	text-decoration: none;

	transform: translateY(-1px);
}

.ptw-theme-4 .ptw-plan__button:focus {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}


/* ---------------------------------------------------------
 * Featured Plan
 * --------------------------------------------------------- */

.ptw-theme-4 .ptw-plan--featured {
	z-index: 2;

	border: 2px solid var(--ptw-btn-bg, #d4a72c);

	box-shadow: 0 18px 45px rgba(160,120,25,.20);

	transform: translateY(-10px);
}


/* Featured hover */

.ptw-theme-4 .ptw-plan--featured:hover {
	transform: translateY(-15px);
	box-shadow: 0 25px 50px rgba(160,120,25,.25);
}


/* Featured header */

.ptw-theme-4 .ptw-plan--featured .ptw-plan__header {
	background: var(--ptw-header-bg, #171a1f);
	color: var(--ptw-header-color, #ffffff);
}


/* Featured price */

.ptw-theme-4 .ptw-plan--featured .ptw-plan__amount {
	color: var(--ptw-price-color, #ffffff);
}


/* Featured button */

.ptw-theme-4 .ptw-plan--featured .ptw-plan__button {
	border-color: var(--ptw-btn-bg, #d4a72c);
	background: var(--ptw-btn-bg, #d4a72c);
	color: var(--ptw-btn-color, #ffffff);
}

.ptw-theme-4 .ptw-plan--featured .ptw-plan__button:hover,
.ptw-theme-4 .ptw-plan--featured .ptw-plan__button:focus {
	filter: brightness(.9);
}


/* ---------------------------------------------------------
 * Featured Badge
 * --------------------------------------------------------- */

.ptw-theme-4 .ptw-plan__badge {
	position: absolute;
	top: 14px;
	right: 40px;
	z-index: 5;

	padding: 6px 12px;

	border-radius: 20px;

	background: var(--ptw-btn-bg, #d4a72c);
	color: var(--ptw-header-bg, #20242a);

	font-size: 9px;
	font-weight: 800;
	letter-spacing: .7px;
	line-height: 1.2;

	text-transform: uppercase;

	box-shadow: 0 3px 10px rgba(0,0,0,.15);
}


/* ---------------------------------------------------------
 * Tablet
 * --------------------------------------------------------- */

@media (max-width:991px){

	.ptw-theme-4 .ptw-plan__header{
		padding:32px 20px 30px;
	}

	.ptw-theme-4 .ptw-plan__amount{
		font-size:calc(var(--ptw-price-size,64px) * .84);
	}

	.ptw-theme-4 .ptw-plan__currency{
		font-size:calc(var(--ptw-price-size,64px) * .33);
	}

	.ptw-theme-4 .ptw-plan--featured{
		transform:translateY(-6px);
	}

	.ptw-theme-4 .ptw-plan--featured:hover{
		transform:translateY(-10px);
	}
}


/* ---------------------------------------------------------
 * Mobile
 * --------------------------------------------------------- */

@media (max-width:767px){

	.ptw-theme-4 .ptw-plan{
		margin-bottom:30px;
	}

	.ptw-theme-4 .ptw-plan:hover{
		transform:none;
	}

	.ptw-theme-4 .ptw-plan--featured{
		transform:none;
	}

	.ptw-theme-4 .ptw-plan--featured:hover{
		transform:none;
	}

	.ptw-theme-4 .ptw-plan__header{
		padding:35px 20px 30px;
	}

	.ptw-theme-4 .ptw-plan__amount{
		font-size:calc(var(--ptw-price-size,64px) * .91);
	}

	.ptw-theme-4 .ptw-plan__currency{
		font-size:calc(var(--ptw-price-size,64px) * .36);
	}

	.ptw-theme-4 .ptw-plan__footer{
		padding:20px;
	}
}