/**
 * Mix and Match Products Styles
 *
 * Comprehensive styling for Mix and Match products including:
 * - Product page forms and controls
 * - Cart and checkout display
 * - Product loop badges and indicators
 * - Responsive design considerations
 *
 * @package PG Neo Theme
 * @since 1.0.0
 */

/* ==========================================================================
	Mix and Match Product Forms
	========================================================================== */

.mnm_form {
	@apply space-y-6;
}

.mnm_child {
	@apply border border-neutral-200 rounded-sm p-4 transition-colors duration-200;
}

.mnm_child:hover {
	@apply border-neutral-300;
}

.mnm_child.selected {
	@apply border-green-500 bg-green-50/30;
}

.mnm_data {
	@apply space-y-4;
}

.mnm_button_wrap {
	@apply flex flex-wrap gap-4 items-center;
}

.mnm_cart {
	@apply space-y-4;
}

.mnm_price {
	@apply text-lg font-semibold text-green-500;
}

.mnm_availability {
	@apply text-sm;
}

.mnm_container_unavailable {
	@apply text-red-500 font-medium;
}

.woocommerce-mix-and-match-add-to-cart {
	@apply flex flex-wrap gap-3;
}

/* ==========================================================================
	Mix and Match Cart Items
	========================================================================== */

.mnm_table_child {
	@apply border-l-4 border-l-green-200 bg-green-50/30 ml-4 relative;
}

.mnm_table_container {
	@apply border-l-4 border-l-green-500;
}

.mnm-child-indicator {
	@apply text-green-500 font-mono text-lg absolute -left-6 top-2;
}

/* Alternative child indicator for inline display */
.mnm-child-indicator.inline {
	@apply relative left-0 top-0 mr-2;
}

/* ==========================================================================
	Mix and Match Product Loop
	========================================================================== */

.mix-and-match-badge {
	@apply inline-block px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded;
}

.mix-and-match-summary {
	@apply text-sm text-neutral-600 mt-1;
}

/* ==========================================================================
	Mix and Match Messages
	========================================================================== */

.mnm_message {
	@apply p-4 rounded-sm border;
}

.mnm_message.error {
	@apply border-red-200 bg-red-50 text-red-800;
}

.mnm_message.success {
	@apply border-green-200 bg-green-50 text-green-800;
}

.mnm_message.info {
	@apply border-blue-200 bg-blue-50 text-blue-800;
}

.mnm_message .mnm_message_content {
	@apply space-y-2;
}

.mnm_message .mnm_message_content li {
	@apply p-4;
}

/* ==========================================================================
	Mix and Match Controls
	========================================================================== */

.mnm_quantity_input {
	@apply w-20;
}

.mnm_reset_button {
	@apply text-sm text-neutral-500 hover:text-neutral-700 underline;
}

.mnm_clear_button {
	@apply text-sm text-red-500 hover:text-red-700 underline;
}

/* ==========================================================================
	Mix and Match Pricing Display
	========================================================================== */

.mnm_price_display {
	@apply text-lg font-semibold;
}

.mnm_price_display .from-text {
	@apply text-sm font-normal text-neutral-500;
}

.mnm_price_range {
	@apply text-green-500;
}

.mnm_price_single {
	@apply text-green-500;
}

.mnm_price_sale {
	@apply space-x-2;
}

.mnm_price_sale del {
	@apply text-neutral-400;
}

.mnm_price_sale ins {
	@apply text-green-500 no-underline;
}

/* ==========================================================================
	Mix and Match Product Selection
	========================================================================== */

.mnm_product_selection {
	@apply grid gap-4;
}

.mnm_product_item {
	@apply border border-neutral-200 rounded-sm p-4 transition-all duration-200;
}

.mnm_product_item:hover {
	@apply border-neutral-300 shadow-sm;
}

.mnm_product_item.selected {
	@apply border-green-500 bg-green-50/30;
}

.mnm_product_item .product-image {
	@apply w-16 h-16 object-cover rounded border border-neutral-200;
}

.mnm_product_item .product-title {
	@apply font-medium text-sm;
}

.mnm_product_item .product-price {
	@apply text-green-500 font-semibold;
}

/* ==========================================================================
	Responsive Design
	========================================================================== */

@media (max-width: 768px) {
	.mnm_table_child {
		@apply ml-2;
	}

	.mnm-child-indicator {
		@apply -left-4 text-base;
	}

	.mnm_button_wrap {
		@apply flex-col gap-2;
	}

	.mnm_product_selection {
		@apply grid-cols-1;
	}
}

@media (min-width: 769px) {
	.mnm_product_selection {
		@apply grid-cols-2;
	}
}

@media (min-width: 1024px) {
	.mnm_product_selection {
		@apply grid-cols-3;
	}
}

/* ==========================================================================
	Mix and Match Utilities
	========================================================================== */

.mnm-hidden {
	@apply hidden;
}

.mnm-loading {
	@apply opacity-50 pointer-events-none;
}

.mnm-disabled {
	@apply opacity-50 cursor-not-allowed;
}

/* ==========================================================================
	Mix and Match Animations
	========================================================================== */

.mnm-fade-in {
	@apply transition-opacity duration-300 ease-in-out;
}

.mnm-slide-down {
	@apply transition-all duration-300 ease-in-out;
}

/* ==========================================================================
	Edit Container Link (Hidden by default)
	========================================================================== */

.edit_container_in_cart_text {
	@apply hidden;
}