/* Complimed Price List v3 — Frontend */
:root {
	--cpl-accent:      #06babf;
	--cpl-accent-dark: #0097a0;
	--cpl-price-bg:    #e0f7f7;
	--cpl-price-color: #0097a0;
	--cpl-free-bg:     #e8f5e9;
	--cpl-free-color:  #2e7d32;
	--cpl-border:      rgba(0,0,0,0.08);
	--cpl-muted:       #888;
	--cpl-radius:      10px;
}

.cpl-price-list { margin: 0; }

.cpl-section {
	margin-bottom: 2rem;
	border-radius: var(--cpl-radius);
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.cpl-section-header {
	display: flex; align-items: center;
	background: linear-gradient(90deg, var(--cpl-accent), var(--cpl-accent-dark));
	padding: 13px 20px;
}

.cpl-section-title {
	margin: 0 !important; padding: 0 !important;
	font-size: 15px !important; font-weight: 500 !important;
	color: #fff !important; line-height: 1.3 !important;
	border: none !important; text-transform: none !important;
}

.cpl-section-title span { opacity: 0.78; font-weight: 400; }

.cpl-table-wrap {
	background: #fff;
	border: 1px solid var(--cpl-border); border-top: none;
	border-radius: 0 0 var(--cpl-radius) var(--cpl-radius);
}

.cpl-thead {
	display: flex; align-items: center; padding: 7px 20px;
	background: #f5fefe; border-bottom: 1px solid var(--cpl-border);
}
.cpl-thead span { font-size: 11px; font-weight: 600; color: var(--cpl-muted); text-transform: uppercase; letter-spacing: .06em; }
.cpl-thead span:first-child { flex: 1; }

.cpl-row {
	display: flex; align-items: center; padding: 10px 20px;
	border-bottom: 1px solid var(--cpl-border); transition: background .15s;
}
.cpl-row:last-child { border-bottom: none; }
.cpl-row:nth-child(even) { background: #f7fefe; }
.cpl-row:hover { background: #e6f9f9; }

.cpl-name { flex: 1; font-size: 13.5px; color: #333; line-height: 1.4; padding-right: 12px; }

.cpl-price {
	font-size: 13px; font-weight: 600;
	color: var(--cpl-price-color); background: var(--cpl-price-bg);
	padding: 3px 11px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.cpl-price.cpl-free { background: var(--cpl-free-bg); color: var(--cpl-free-color); }

@media (max-width: 600px) {
	.cpl-section-title { font-size: 13.5px !important; text-align: center !important; width: 100%; }
	.cpl-section-header { justify-content: center; }
	.cpl-row { padding: 9px 14px; display: flex; align-items: center; flex-wrap: nowrap; }
	.cpl-name { flex: 1; padding-right: 12px; font-size: 13px; }
	.cpl-price { font-size: 12.5px; flex-shrink: 0; margin-left: auto; }
	.cpl-thead { display: none; }
}