/**
 * The shared cross-generator upsell card, included via
 * EE_CH_Credit_Hub::render_upsell_card() inside any source plugin's own
 * item-view template. Colours match the palette every generator plugin's
 * own frontend.css already uses (slate/blue), so the card blends in
 * wherever it's placed rather than needing the host plugin's own CSS
 * variables in scope.
 */

.ee-ch-upsell {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ee-ch-upsell-toggle-btn {
	background: none !important;
	border: none;
	color: #1d4ed8 !important;
	font-weight: 600;
	font-size: 0.92em;
	cursor: pointer;
	padding: 0;
	text-align: left;
}

.ee-ch-upsell-toggle-btn:hover {
	text-decoration: underline;
}

.ee-ch-cost-badge {
	margin-left: 6px;
	font-size: 0.85em;
	color: #1d4ed8;
	background: #dbeafe;
	border-radius: 4px;
	padding: 1px 6px;
}

.ee-ch-upsell-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex-basis: 100%;
	padding: 10px 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}

.ee-ch-upsell-intro {
	flex-basis: 100%;
	margin: 0 0 2px;
	font-size: 0.88em;
	color: #666;
}

.ee-ch-upsell-fields {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ee-ch-upsell-field-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.9em;
	color: #1e293b;
}

.ee-ch-upsell-field-input {
	padding: 6px 8px;
	border: 1px solid #cbd5e1;
	border-radius: 5px;
	background: #ffffff;
	color: #1e293b;
	font-size: 0.95em;
}

.ee-ch-upsell-qty-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9em;
}

.ee-ch-upsell-qty-input {
	width: 64px;
	padding: 6px 8px;
	border: 1px solid #cbd5e1;
	border-radius: 5px;
	background: #ffffff;
	color: #1e293b;
}

.ee-ch-upsell-total-cost {
	font-size: 0.88em;
	color: #666;
	font-style: italic;
}

.ee-ch-upsell-result:not(:empty) {
	flex-basis: 100%;
	margin-top: 6px;
}

.ee-ch-upsell-success {
	margin: 0 0 4px;
	font-weight: 600;
}

.ee-ch-upsell-error {
	color: #b91c1c;
}

.ee-ch-upsell-loading {
	color: #666;
	font-style: italic;
}