/* ========================================
   ADDITIONAL PRODUCT FEES
   ======================================== */

.product-additional-fees {
	margin: 20px 0;
	padding: 20px;
	background: #f9f9f9;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
}

.product-additional-fees h4 {
	margin: 0 0 15px 0;
	font-size: 16px;
	font-weight: 600;
	color: #333;
}

.additional-fees-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.additional-fee-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.additional-fee-item:hover {
	border-color: #999;
	background: #fafafa;
}

.additional-fee-item input[type='checkbox'] {
	margin: 0;
	cursor: pointer;
}

.additional-fee-item .fee-name {
	flex: 1;
	font-size: 14px;
	color: #333;
}

.additional-fee-item .fee-price {
	font-weight: 600;
	color: #666;
	font-size: 14px;
}

/* Disabled fees styling */
.product-additional-fees.fees-disabled {
	opacity: 0.7;
}

.fees-unavailable-message {
	margin-bottom: 15px;
	padding: 12px;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
}

.fees-unavailable-message p {
	margin: 0;
	color: #856404;
	font-size: 14px;
	line-height: 1.5;
}

/* Message styling when fees are available (informational) */
.fees-unavailable-message.fees-available {
	background: #d1ecf1;
	border: 1px solid #bee5eb;
}

.fees-unavailable-message.fees-available p {
	color: #0c5460;
}

.additional-fee-item.fee-disabled {
	cursor: not-allowed;
	opacity: 0.6;
	background: #f5f5f5;
}

.additional-fee-item.fee-disabled:hover {
	border-color: #ddd;
	background: #f5f5f5;
}

.additional-fee-item.fee-disabled input[type='checkbox'] {
	cursor: not-allowed;
	opacity: 0.5;
}

.additional-fee-item.fee-disabled .fee-name,
.additional-fee-item.fee-disabled .fee-price {
	color: #999;
}

@media all and (max-width: 768px) {
	.product-additional-fees {
		padding: 15px;
	}

	.additional-fee-item {
		padding: 8px;
	}

	.additional-fee-item .fee-name,
	.additional-fee-item .fee-price {
		font-size: 13px;
	}

	.fees-unavailable-message {
		padding: 10px;
	}

	.fees-unavailable-message p {
		font-size: 13px;
	}
}