/**
 * Carbon Quantity Selector Styles
 *
 * Compact equation-style layout: {input} Or {selector} : {cost}
 *
 * @package CarbonGuru_Stripe_Climate
 */

.cg-carbon-quantity-selector {
	--cg-green-600: #067F38;
	--cg-green-700: #056830;
	--cg-blue-700: #1A4A73;
	--cg-blue-800: #153d5e;
	--cg-neutral-100: #f8f9fa;
	--cg-neutral-200: #e9ecef;
	--cg-neutral-300: #dee2e6;
	--cg-neutral-600: #6c757d;

	padding: 1.5rem;
	background: var(--cg-neutral-100);
	border: 1px solid var(--cg-neutral-200);
	margin: 1.5rem 0;
}

.cg-carbon-quantity-selector__heading {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
	color: #212529;
}

/* Equation-style row layout */
.cg-carbon-quantity-selector__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

/* kg Input Section */
.cg-carbon-quantity-selector__kg-section {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cg-carbon-quantity-selector__kg-input {
	width: 80px;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	font-weight: 600;
	text-align: right;
	border: 2px solid var(--cg-neutral-300);
	border-radius: 0;
	background: #fff;
	transition: border-color 0.2s;
}

.cg-carbon-quantity-selector__kg-input:focus {
	outline: none;
	border-color: var(--cg-blue-700);
}

.cg-carbon-quantity-selector__unit {
	font-size: 1rem;
	color: var(--cg-neutral-600);
	white-space: nowrap;
}

/* Or divider */
.cg-carbon-quantity-selector__or {
	font-size: 0.9rem;
	color: var(--cg-neutral-600);
	text-transform: uppercase;
	font-weight: 500;
}

/* Price Selector */
.cg-carbon-quantity-selector__price-section {
	display: flex;
	align-items: center;
}

.cg-carbon-quantity-selector__price-select {
	width: auto;
	min-width: 180px;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	border: 2px solid var(--cg-neutral-300);
	border-radius: 0;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s;
}

.cg-carbon-quantity-selector__price-select:focus {
	outline: none;
	border-color: var(--cg-blue-700);
}

/* Cost display - equation result */
.cg-carbon-quantity-selector__cost-section {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cg-carbon-quantity-selector__cost-separator {
	font-size: 1rem;
	color: var(--cg-neutral-600);
}

.cg-carbon-quantity-selector__cost-value {
	font-size: 1rem;
	font-weight: 700;
	color: #212529;
}

/* Submit Button - normal width */
.cg-carbon-quantity-selector__submit {
	display: inline-block;
	padding: 0.75rem 2rem;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.2s;
}

/* Offset button - CG Green */
.cg-carbon-quantity-selector__submit.cg-btn--offset {
	background: var(--cg-green-600);
	color: #fff;
}

.cg-carbon-quantity-selector__submit.cg-btn--offset:hover:not(:disabled) {
	background: var(--cg-green-700);
}

/* Removal button - CG Blue */
.cg-carbon-quantity-selector__submit.cg-btn--removal {
	background: var(--cg-blue-700);
	color: #fff;
}

.cg-carbon-quantity-selector__submit.cg-btn--removal:hover:not(:disabled) {
	background: var(--cg-blue-800);
}

.cg-carbon-quantity-selector__submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Message Display */
.cg-carbon-quantity-selector__message {
	margin-top: 1rem;
	padding: 0;
	font-size: 1rem;
	text-align: left;
}

.cg-carbon-quantity-selector__message:empty {
	display: none;
}

.cg-carbon-quantity-selector__message--success {
	color: var(--cg-green-600);
	font-weight: 500;
}

.cg-carbon-quantity-selector__message--error {
	color: #dc3545;
	font-weight: 500;
}

/* Responsive - Stack on mobile */
@media (max-width: 600px) {
	.cg-carbon-quantity-selector {
		padding: 1rem;
	}

	.cg-carbon-quantity-selector__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.cg-carbon-quantity-selector__or {
		display: none;
	}

	.cg-carbon-quantity-selector__price-select {
		min-width: 160px;
	}

	.cg-carbon-quantity-selector__submit {
		width: 100%;
	}
}

/* ==========================================================================
   Standard WooCommerce Form Styling for High-Minimum Carbon Products
   Used when min_kg > 100 (e.g., 1 ton minimum purchases)
   ========================================================================== */

.cg-carbon-form {
	--cg-green-600: #067F38;
	--cg-green-700: #056830;
	--cg-blue-700: #1A4A73;
	--cg-blue-800: #153d5e;
}

/* Ensure quantity and button are on same row */
.cg-carbon-form form.cart {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.cg-carbon-form form.cart .quantity {
	margin-right: 0.5rem;
}

/* Removal button - CG Blue (high specificity to override WooCommerce) */
.cg-carbon-form.cg-carbon-form--removal form.cart .single_add_to_cart_button,
.cg-carbon-form.cg-carbon-form--removal form.cart button.single_add_to_cart_button,
.cg-carbon-form.cg-carbon-form--removal .single_add_to_cart_button {
	background: #1A4A73 !important;
	background-color: #1A4A73 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 !important;
}

.cg-carbon-form.cg-carbon-form--removal form.cart .single_add_to_cart_button:hover,
.cg-carbon-form.cg-carbon-form--removal form.cart button.single_add_to_cart_button:hover,
.cg-carbon-form.cg-carbon-form--removal .single_add_to_cart_button:hover {
	background: #153d5e !important;
	background-color: #153d5e !important;
}

/* Offset button - CG Green (high specificity to override WooCommerce) */
.cg-carbon-form.cg-carbon-form--offset form.cart .single_add_to_cart_button,
.cg-carbon-form.cg-carbon-form--offset form.cart button.single_add_to_cart_button,
.cg-carbon-form.cg-carbon-form--offset .single_add_to_cart_button {
	background: #067F38 !important;
	background-color: #067F38 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 !important;
}

.cg-carbon-form.cg-carbon-form--offset form.cart .single_add_to_cart_button:hover,
.cg-carbon-form.cg-carbon-form--offset form.cart button.single_add_to_cart_button:hover,
.cg-carbon-form.cg-carbon-form--offset .single_add_to_cart_button:hover {
	background: #056830 !important;
	background-color: #056830 !important;
}

/* ==========================================================================
   Related Products / Catalog Button Styling
   Used in Related Products widget and product archive pages
   ========================================================================== */

/* Offset button - CG Green */
.cg-btn-offset,
a.cg-btn-offset,
.wp-block-button__link.cg-btn-offset {
	background: #067F38 !important;
	background-color: #067F38 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 !important;
}

.cg-btn-offset:hover,
a.cg-btn-offset:hover,
.wp-block-button__link.cg-btn-offset:hover {
	background: #056830 !important;
	background-color: #056830 !important;
	color: #fff !important;
}

/* Removal button - CG Blue */
/* Override WordPress theme.json CSS variables */
.cg-btn-removal,
a.cg-btn-removal,
.wp-block-button__link.cg-btn-removal,
.wp-element-button.cg-btn-removal {
	--wp--preset--color--cg-green-600: #1A4A73;
	--wp--preset--color--cg-green-300: #153d5e;
	background: #1A4A73 !important;
	background-color: #1A4A73 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 !important;
}

.cg-btn-removal:hover,
a.cg-btn-removal:hover,
.wp-block-button__link.cg-btn-removal:hover,
.wp-element-button.cg-btn-removal:hover {
	background: #153d5e !important;
	background-color: #153d5e !important;
	color: #fff !important;
}