/* ==========================================================================
   Etika Spirulina — Alma, panier latéral et tunnel
   Chargée par es-fk-alma.php, après es-fk-mini-panier.css et es-fk-tunnel.css.
   ========================================================================== */


/* ---- panier latéral : la ligne sous le bouton ----
   Le conteneur du bouton est dissous en `display: contents` par
   es-fk-mini-panier.css et ses enfants rangés par `order`. Sans le sien, la
   ligne passerait en tête du pied, au-dessus du récapitulatif. Même rang que
   la mention « TVA incluse » : l'ordre du HTML les départage, et la ligne
   Alma est émise avant elle. */

body #fkcart-modal .fkcart-preview-ui .es-fk-alma{
	order: 3;
	margin: 10px 0 0;
	color: var(--es-fk-foret);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

body #fkcart-modal .fkcart-preview-ui .es-fk-alma .woocommerce-Price-amount{
	font-weight: 600;
	white-space: nowrap;
}

body #fkcart-modal .fkcart-preview-ui .es-fk-alma + .es-fk-note{
	margin-top: 2px;
}


/* ---- tunnel : le choix du plan (« 3x », « 4x ») ----
   Alma imprime un bouton radio nu suivi d'un badge noir (logo carte + « 3x »).
   Le radio reste dans le DOM, seulement rendu invisible : c'est lui que lit le
   script d'Alma (`input[name="alma_plan_key"]:checked`) pour afficher
   l'échéancier, et lui qui part avec la commande. Le libellé devient une carte
   cliquable, avec un rond dessiné en ::before qui suit son état. */

body #wfacp-e-form .payment_box.payment_method_alma_pnx_gateway{
	gap: 10px;
}

body #wfacp-e-form .payment_box.payment_method_alma_pnx_gateway > div:first-child p{
	margin: 0;
	color: var(--es-fk-foret-500);
	font-size: 13.5px;
}

body #wfacp-e-form .payment_box .alma_woocommerce_gateway_fieldset{
	position: relative;
	flex: 1 1 0;
	min-width: 130px;
	margin: 0;
	padding: 0;
	border: 0;
}

body #wfacp-e-form .payment_box .alma_woocommerce_gateway_fieldset input[name="alma_plan_key"]{
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

body #wfacp-e-form .payment_box .alma_woocommerce_gateway_fieldset label.alma_woocommerce_gateway_checkbox{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--es-fk-filet-fonce);
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-blanc);
	box-sizing: border-box;
	cursor: pointer;
	transition: border-color .18s var(--es-fk-ease), box-shadow .18s var(--es-fk-ease);
}

body #wfacp-e-form .payment_box .alma_woocommerce_gateway_fieldset label.alma_woocommerce_gateway_checkbox::before{
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--es-fk-foret-300);
	border-radius: 50%;
	background: var(--es-fk-blanc);
	box-sizing: border-box;
	transition: border .18s var(--es-fk-ease);
}

body #wfacp-e-form .payment_box .alma_woocommerce_gateway_fieldset label.alma_woocommerce_gateway_checkbox:hover{
	border-color: var(--es-fk-foret-300);
}

body #wfacp-e-form .payment_box .alma_woocommerce_gateway_fieldset input[name="alma_plan_key"]:checked + label.alma_woocommerce_gateway_checkbox{
	border-color: var(--es-fk-vif);
	box-shadow: 0 0 0 1px var(--es-fk-vif);
}

body #wfacp-e-form .payment_box .alma_woocommerce_gateway_fieldset input[name="alma_plan_key"]:checked + label.alma_woocommerce_gateway_checkbox::before{
	border: 5px solid var(--es-fk-vif);
}

body #wfacp-e-form .payment_box .alma_woocommerce_gateway_fieldset input[name="alma_plan_key"]:focus-visible + label.alma_woocommerce_gateway_checkbox{
	outline: 2px solid var(--es-fk-vif);
	outline-offset: 2px;
}

/* Le badge d'Alma : cadre, fond et logo carte retirés, il ne reste que le
   texte, préfixé pour se lire seul. */
body #wfacp-e-form .payment_box .alma_woocommerce_gateway_fieldset .alma_woocommerce_gateway_logo{
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

body #wfacp-e-form .payment_box .alma_woocommerce_gateway_fieldset .alma_woocommerce_gateway_logo img{
	display: none;
}

body #wfacp-e-form .payment_box .alma_woocommerce_gateway_fieldset .alma_woocommerce_gateway_label{
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
}

body #wfacp-e-form .payment_box .alma_woocommerce_gateway_fieldset .alma_woocommerce_gateway_label::before{
	content: "Paiement en ";
	font-weight: 500;
}

body #wfacp-e-form .payment_box .alma_woocommerce_gateway_checkout_plan{
	margin-top: 4px;
}

/* L'échéancier est une iframe d'Alma : on ne peut pas styler son contenu,
   seulement arrondir son cadre. Alma ne pose pas de border-radius dans son
   style en ligne, la feuille suffit donc. */
body #wfacp-e-form .payment_box .alma_woocommerce_gateway_checkout_plan iframe{
	border-radius: var(--es-fk-rayon);
	overflow: hidden;
}

/* Un seul plan actif : il n'y a rien à choisir, le sélecteur disparaît et
   l'échéancier reste. Le radio est coché d'office par es-fk-alma.php, même
   après un rafraîchissement du tunnel. Le !important passe devant le style des
   boutons radio que FunnelKit imprime en ligne. */
body #wfacp-e-form .payment_box.payment_method_alma_pnx_gateway:not(:has(.alma_woocommerce_gateway_fieldset ~ .alma_woocommerce_gateway_fieldset)) .alma_woocommerce_gateway_fieldset{
	display: none !important;
}