/**
 * CNRA - Single Product (Boutique)
 * Styles pour : cartes de variantes, bloc tarification, bloc prix + quantité, boutons
 */

/* ---------------------------------------------------
 * 1. Cartes de variantes (remplace les <select> natifs)
 * --------------------------------------------------- */
.cnra-variant-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.cnra-variant-cards .cnra-card {
	flex: 1 1 auto;
	min-width: 140px;
	padding: 14px 16px;
	border: 1px solid #E0E0E0;
	border-radius: 8px;
	background-color: #FFFFFF;
	color: #4A4A4A;
	font-size: 13px;
	line-height: 1.5;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.cnra-variant-cards .cnra-card:hover {
	border-color: #0E7A3C;
}

.cnra-variant-cards .cnra-card.active {
	border-color: #0E7A3C;
	background-color: #F2FAF4;
	box-shadow: 0 0 0 1px #0E7A3C inset;
}

/* Met en valeur la ligne de prix à l'intérieur d'une carte active
   (ex: "140 00 FCFA/Ha/GGF" en vert comme sur la maquette) */
.cnra-variant-cards .cnra-card.active::after {
	content: '';
}

.cnra-variant-cards .cnra-card .cnra-card-price {
	display: block;
	margin-top: 4px;
	font-weight: 600;
	color: #6f6f6f;
}

.cnra-variant-cards .cnra-card.active .cnra-card-price {
	color: #0E7A3C;
}


/* ---------------------------------------------------
 * 2. Bloc "Tarification"
 * --------------------------------------------------- */
#cnra-tarification-box {
	background-color: #F4F6F4;
	border-radius: 8px;
	padding: 14px 18px;
}

#cnra-tarification-box p {
	margin: 0;
	font-size: 14px;
	color: #3D3D3D;
}


/* ---------------------------------------------------
 * 3. Bloc Prix + Quantité
 * --------------------------------------------------- */
#cnra-price-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

#cnra-price-box .price {
	font-size: 22px;
	font-weight: 700;
	color: #1B1B1B;
}

/* Champ quantité natif WooCommerce restylé en +/- */
.quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid #D8D8D8;
	border-radius: 6px;
	overflow: hidden;
	background-color: #FFFFFF;
}

.quantity .qty {
	width: 44px;
	text-align: center;
	border: none;
	font-size: 15px;
	padding: 8px 4px;
	background: transparent;
}

.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Boutons +/- ajoutés en JS autour du champ .qty si ton thème ne les génère pas déjà */
.quantity .cnra-qty-btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
	border: none;
	cursor: pointer;
	font-size: 16px;
	color: #4A4A4A;
	user-select: none;
}

.quantity .cnra-qty-btn:hover {
	background-color: #F2FAF4;
	color: #0E7A3C;
}


/* ---------------------------------------------------
 * 4. Boutons "Ajouter au panier" / "Payer maintenant"
 * --------------------------------------------------- */
#cnra-add-to-cart-trigger,
#cnra-buy-now-trigger {
	flex: 1;
	text-align: center;
	border-radius: 6px;
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	transition: opacity 0.2s ease;
}

#cnra-add-to-cart-trigger {
	background-color: #FFFFFF;
	border: 1px solid #0E7A3C;
	color: #0E7A3C;
}

#cnra-add-to-cart-trigger:hover {
	background-color: #F2FAF4;
}

#cnra-buy-now-trigger {
	background-color: #0E7A3C;
	color: #FFFFFF;
	border: 1px solid #0E7A3C;
}

#cnra-buy-now-trigger:hover {
	background-color: #0C6831;
}

#cnra-buy-now-trigger.cnra-loading {
	opacity: 0.6;
	cursor: not-allowed;
}


/* ---------------------------------------------------
 * 5. Responsive (mobile)
 * --------------------------------------------------- */
@media (max-width: 767px) {
	.cnra-variant-cards .cnra-card {
		min-width: 47%;
	}

	#cnra-price-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}