:root {
  --cpd-primary: #6d28d2;   /* MediLearning purple */
  --cpd-surface: #f8f9fa;
  --cpd-soft: #eef2ff;
  --cpd-text-muted: #6c757d;
  --cpd-radius: 16px;
}

.cpd-calculator.card {
  border: 1px solid #eef0f3;
  border-radius: var(--cpd-radius);
}

.cpd-calculator .card-title {
  font-weight: 700;
  margin-bottom: 1rem;
}

.cpd-calculator .input-group-text {
  background: #fff;
}

.cpd-calculator .cpd-stat {
  background: var(--cpd-surface);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  height: 100%;
  border: 1px dashed #e6e8eb;
}

.cpd-calculator .cpd-stat__label {
  font-size: 0.85rem;
  color: var(--cpd-text-muted);
  margin-bottom: 0.25rem;
}

.cpd-calculator .cpd-stat__value {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.cpd-calculator .cpd-stat--grand {
  background: var(--cpd-soft);
  border: 1px solid rgba(109,40,210,0.15);
}

#cpd-pack-breakdown h5 {
  font-weight: 700;
  margin-bottom: .5rem;
}

#cpd-pack-list .badge {
  font-weight: 700;
}

#cpd-savings-banner {
  border-left: 4px solid var(--cpd-primary);
  background: #f4f0ff;
  color: #6d28d2;
  font-weight: 600;
  padding: 15px;
}

.btn.btn-primary {
  background: var(--cpd-primary);
  border-color: var(--cpd-primary);
}

.btn.btn-primary:hover {
  filter: brightness(0.95);
}


.btn-success {
	--bs-btn-color: #fff;
	--bs-btn-bg: #6d28d2;
	--bs-btn-border-color: #6d28d2;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #6d28d2;
	--bs-btn-hover-border-color: #6d28d2;
	--bs-btn-focus-shadow-rgb: 60, 153, 110;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #6d28d2;
	--bs-btn-active-border-color: #6d28d2;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #6d28d2;
	--bs-btn-disabled-border-color: #6d28d2;
}


/* smaller screens */
@media (max-width: 576px) {
  .cpd-calculator .cpd-stat__value { font-size: 1.1rem; }
}

 .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control, .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select, .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	width: 100%;
}