/*
 * Étape « Choisissez votre méthode de paiement » (thème avdev_zoo_arcachon, boutique 38).
 * - colonne logo de largeur fixe, logo centré dedans : tous les libellés démarrent à la même abscisse ;
 * - logos Systempay ramenés à une hauteur homogène ;
 * - pictogrammes virement / chèque du thème (img/paiement/).
 * Nom de fichier versionné (-vN) : à chaque modification, créer -vN+1 et supprimer l'ancien
 * (voir MISE-EN-PRODUCTION.md), pour que les navigateurs prennent la nouvelle version sans F5.
 */

#HOOK_PAYMENT .payment_module > a,
#HOOK_PAYMENT div.payment_module.systempay > a {
	position: relative;
	display: block;
	min-height: 54px;
	padding: 16px 15px 16px 102px;
	line-height: 22px;
	background-color: #fbfbfb;
}

/* Colonne logo : 72 px à partir de 15 px du bord, logo centré horizontalement et verticalement. */
#HOOK_PAYMENT .payment_module > a > img,
#HOOK_PAYMENT div.payment_module.systempay > a > img.logo {
	position: absolute;
	top: 50%;
	left: 51px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	float: none !important;
	display: block;
	margin: 0;
	width: auto;
	height: auto;
	max-width: 72px;
	max-height: 24px;
}

/* Virement et chèque : pictogrammes du thème à la place des images des modules (non modifiés). */
#HOOK_PAYMENT .payment_module > a > img[src*="/modules/bankwire/"],
#HOOK_PAYMENT .payment_module > a > img[src*="/modules/cheque/"] {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 42px;
	height: 28px;
	max-width: none;
	max-height: none;
	padding-left: 42px; /* masque l'image d'origine, seul le fond est visible */
	background: no-repeat center center;
	background-size: contain;
}
#HOOK_PAYMENT .payment_module > a > img[src*="/modules/bankwire/"] {
	background-image: url(../../img/paiement/virement-v1.svg);
}
#HOOK_PAYMENT .payment_module > a > img[src*="/modules/cheque/"] {
	background-image: url(../../img/paiement/cheque-v1.svg);
}

/* Paiement différé (groupes clients particuliers) : image d'origine conservée, simplement contenue dans la colonne. */
#HOOK_PAYMENT .payment_module > a > img[src*="/modules/avrdelayedpayment/"] {
	max-height: 43px;
}

@media (max-width: 479px) {
	#HOOK_PAYMENT .payment_module > a,
	#HOOK_PAYMENT div.payment_module.systempay > a {
		padding: 14px 10px 14px 82px;
	}
	#HOOK_PAYMENT .payment_module > a > img,
	#HOOK_PAYMENT div.payment_module.systempay > a > img.logo {
		left: 39px;
		max-width: 60px;
		max-height: 22px;
	}
	#HOOK_PAYMENT .payment_module > a > img[src*="/modules/bankwire/"],
	#HOOK_PAYMENT .payment_module > a > img[src*="/modules/cheque/"] {
		width: 36px;
		height: 24px;
		padding-left: 36px;
		max-width: none;
		max-height: none;
	}
	#HOOK_PAYMENT .payment_module > a > img[src*="/modules/avrdelayedpayment/"] {
		max-height: 36px;
	}
}