/* EDD Variable Pricing Types - Frontend */


/* ============================================
   Main Wrapper
   ============================================ */

.edd-vpd-platform-wrapper {
	display: block;
	width: 100%;
	box-sizing: border-box;
}


/* ============================================
   Platform Box
   ============================================ */

.edd-vpd-platform-box {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;
	background: #f8f8f8;
	width: 100%;
	box-sizing: border-box;
}

.edd-vpd-platform-box:last-child {
	margin-bottom: 0;
}


/* ============================================
   Box Title
   ============================================ */

.edd-vpd-platform-box h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 12px 0;
	color: #333;
	display: flex;
	align-items: center;
}

.edd-vpd-platform-box h3 i {
	margin-right: 8px;
	font-size: 20px;
}


/* ============================================
   Type Description
   ============================================ */

.edd-vpd-type-description {
	margin: 0 0 12px 0 !important;
	padding: 8px 12px !important;
	color: #555 !important;
	font-size: 14px !important;
	border-radius: 4px !important;
}


/* ============================================
   Price Options List
   ============================================ */

.edd-vpd-platform-box ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 8px 12px;
}


/* ============================================
   Price Option Row
   ============================================ */

.edd-vpd-platform-box ul li {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 10px 15px !important;
	margin: 0 !important;
	border-bottom: 1px solid #f0f0f0 !important;
	list-style: none !important;
	transition: background 0.2s ease;
}

.edd-vpd-platform-box ul li:last-child {
	border-bottom: none !important;
}

.edd-vpd-platform-box ul li:hover {
	background: #f8f9fa;
}


/* ============================================
   Label
   ============================================ */

.edd-vpd-platform-box ul li label {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	cursor: pointer !important;
	flex: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
}


/* ============================================
   Radio / Checkbox
   ============================================ */

.edd-vpd-platform-box ul li input[type="radio"],
.edd-vpd-platform-box ul li input[type="checkbox"] {
	margin: 0 !important;
	margin-right: 12px !important;
	flex-shrink: 0 !important;
	width: 18px !important;
	height: 18px !important;
	cursor: pointer !important;
	accent-color: #0078D7 !important;
}


/* ============================================
   Option Name
   ============================================ */

.edd-vpd-platform-box ul li .edd_price_option_name {
	flex: 1 !important;
	font-size: 14px !important;
	color: #333 !important;
	padding-left: 4px !important;
}


/* ============================================
   Option Price
   ============================================ */

.edd-vpd-platform-box ul li .edd_price_option_price {
	flex-shrink: 0 !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	color: #222 !important;
	margin-left: 10px !important;
}


/* ============================================
   Separator
   ============================================ */

.edd-vpd-platform-box ul li .edd_price_option_sep {
	display: none !important;
}


/* ============================================
   Option Description
   ============================================ */

.edd-vpd-option-description {
	font-size: 13px !important;
	font-weight: 500 !important;
	margin-left: 4px !important;
}


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

@media (max-width: 768px) {

	/* ========================================
	   VPD Main Wrapper - Mobile
	   ======================================== */

	.edd-vpd-platform-wrapper {
		display: block !important;

		/* Pulling the wrapper further to the sides */
		width: calc(100% + 100px) !important;
		max-width: none !important;

		margin-left: -50px !important;
		margin-right: -50px !important;

		padding: 0 !important;

		box-sizing: border-box !important;
	}


	/* ========================================
	   Main Platform Box
	   ======================================== */

	.edd-vpd-platform-box {
		width: 100% !important;
		max-width: 100% !important;

		box-sizing: border-box !important;

		padding: 12px !important;

		margin-bottom: 15px !important;
	}


	/* ========================================
	   Title
	   ======================================== */

	.edd-vpd-platform-box h3 {
		font-size: 16px;
		margin: 0 0 10px 0;
	}


	/* ========================================
	   Variable Options Box
	   ======================================== */

	.edd-vpd-platform-box ul {
		width: calc(100% + 10px) !important;
		max-width: none !important;

		margin-left: -5px !important;
		margin-right: -5px !important;

		padding: 8px 10px !important;

		box-sizing: border-box !important;
	}


	/* ========================================
	   Variable Row
	   ======================================== */

	.edd-vpd-platform-box ul li {
		padding: 8px 10px !important;
		flex-wrap: wrap !important;
	}


	/* ========================================
	   Label
	   ======================================== */

	.edd-vpd-platform-box ul li label {
		flex: 1 1 60% !important;
		gap: 12px !important;
	}


	/* ========================================
	   Checkbox / Radio
	   ======================================== */

	.edd-vpd-platform-box ul li input[type="radio"],
	.edd-vpd-platform-box ul li input[type="checkbox"] {
		margin-right: 8px !important;

		width: 16px !important;
		height: 16px !important;
	}


	/* ========================================
	   Option Name
	   ======================================== */

	.edd-vpd-platform-box ul li .edd_price_option_name {
		font-size: 13px !important;
	}


	/* ========================================
	   Price
	   ======================================== */

	.edd-vpd-platform-box ul li .edd_price_option_price {
		font-size: 14px !important;
	}
}