/**
 * Course add-ons — frontend styles
 *
 * @package PythonProDev_Addons
 */

.ppd-course-addons {
	margin: 0 0 1.25rem;
	padding: 1rem 1.05rem;
	border: 1px solid var(--ppd-gray-200, #e2e8f0);
	border-radius: var(--ppd-radius-lg, 0.75rem);
	background:
		linear-gradient(180deg, rgba(37, 99, 235, 0.04), transparent 60%),
		var(--ppd-white, #fff);
}

.ppd-course-addons__head {
	margin-bottom: 0.85rem;
}

.ppd-course-addons__title {
	margin: 0 0 0.3rem;
	font-family: var(--ppd-font-heading, "Outfit", sans-serif);
	font-size: 1.05rem;
	color: var(--ppd-navy, #0b1f3a);
}

.ppd-course-addons__text {
	margin: 0;
	font-size: 0.9rem;
	color: var(--ppd-gray-500, #64748b);
}

.ppd-course-addons__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.ppd-course-addons__item {
	margin: 0;
}

.ppd-course-addons__label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: start;
	padding: 0.75rem 0.8rem;
	border: 1px solid var(--ppd-gray-200, #e2e8f0);
	border-radius: var(--ppd-radius, 0.5rem);
	background: var(--ppd-white, #fff);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ppd-course-addons__label:hover,
.ppd-course-addons__label:focus-within {
	border-color: rgba(37, 99, 235, 0.45);
	box-shadow: 0 6px 18px rgba(11, 31, 58, 0.06);
}

.ppd-course-addons__item:has(.ppd-course-addons__input:checked) .ppd-course-addons__label {
	border-color: var(--ppd-blue, #2563eb);
	background: rgba(37, 99, 235, 0.05);
}

.ppd-course-addons__input {
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.15rem;
	accent-color: var(--ppd-blue, #2563eb);
}

.ppd-course-addons__name {
	display: block;
	font-family: var(--ppd-font-heading, "Outfit", sans-serif);
	font-weight: 650;
	font-size: 0.95rem;
	color: var(--ppd-navy, #0b1f3a);
	line-height: 1.35;
}

.ppd-course-addons__desc {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--ppd-gray-500, #64748b);
}

.ppd-course-addons__price {
	font-family: var(--ppd-font-heading, "Outfit", sans-serif);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--ppd-navy, #0b1f3a);
	white-space: nowrap;
}

.ppd-course-addons__total {
	margin: 0.85rem 0 0;
	font-size: 0.9rem;
	color: var(--ppd-gray-700, #334155);
}

.ppd-course-addons__total strong {
	font-family: var(--ppd-font-heading, "Outfit", sans-serif);
	color: var(--ppd-navy, #0b1f3a);
}

.ppd-course-addons__actions {
	margin: 0.75rem 0 0;
}

.ppd-course-addons__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1rem;
	border: 0;
	border-radius: 0.4rem;
	background: #0b1f3a;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.ppd-course-addons__btn:hover,
.ppd-course-addons__btn:focus {
	background: #16345c;
}

.ppd-course-addons__btn:disabled {
	opacity: 0.65;
	cursor: wait;
}

/* Sit cleanly in MyKorse / LMS course sidebars */
.dtlms-coursedetail-cart-details ~ .ppd-course-addons,
.ppd-course-addons + .dtlms-coursedetail-cart-details {
	margin-top: 0.85rem;
}

.ppd-addon-cart-label {
	display: inline-block;
	margin-right: 0.25rem;
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	background: rgba(37, 99, 235, 0.12);
	color: var(--ppd-blue, #2563eb);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

@media (max-width: 520px) {
	.ppd-course-addons__label {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.ppd-course-addons__price {
		grid-column: 2;
	}
}