/**
 * MKA WooCommerce — Module Points & Récompenses (SPAR)
 * Style de la zone d'échange de points sur le checkout :
 * - slider de remise (input type=range) : rail visible + curseur de marque
 * - bouton "Ajouter la réduction au panier" : style marque, surcharge Divi
 *
 * Chargé uniquement sur le checkout (voir MKA_Points::enqueue_assets).
 */

:root {
	--mka-spar-accent: #A6607E; /* mauve marque */
	--mka-spar-track:  #E7DDE3; /* rail slider (mauve désaturé) */
	--mka-spar-radius: 6px;

	/* Bouton "Ajouter la réduction au panier" */
	--mka-spar-btn-text:       #2A3328; /* texte au repos */
	--mka-spar-btn-border:     #F185FF; /* bordure (constante dans tous les états) */
	--mka-spar-btn-bg-active:  #F8C2FF; /* fond quand des points sont sélectionnés */
	--mka-spar-btn-hover-text: #F185FF; /* texte au survol */
}

/* =========================================================
   1. Slider de remise (input type=range)
   ========================================================= */

.spar-panel-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.spar-redeem-slider {
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 auto;
	width: 100%;
	height: 6px;
	margin: 8px 0;
	border-radius: 999px;
	background: var(--mka-spar-track);
	cursor: pointer;
}

/* Curseur — WebKit/Blink */
.spar-redeem-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	margin-top: -7px; /* centre le curseur sur le rail de 6px */
	border-radius: 50%;
	background: var(--mka-spar-accent);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: transform 0.15s ease;
}

.spar-redeem-slider::-webkit-slider-thumb:hover {
	transform: scale(1.12);
}

/* Rail + curseur — Firefox */
.spar-redeem-slider::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: var(--mka-spar-track);
}

.spar-redeem-slider::-moz-range-progress {
	height: 6px;
	border-radius: 999px;
	background: var(--mka-spar-accent);
}

.spar-redeem-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--mka-spar-accent);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

/* Focus clavier visible */
.spar-redeem-slider:focus-visible {
	outline: none;
}
.spar-redeem-slider:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mka-spar-accent) 35%, transparent);
}
.spar-redeem-slider:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mka-spar-accent) 35%, transparent);
}

/* Champ nombre à côté du slider */
.spar-panel-right {
	flex: 0 0 auto;
}

.spar-redeem-input {
	width: 96px;
	padding: 0.5em 0.6em;
	border: 1px solid var(--mka-spar-track);
	border-radius: var(--mka-spar-radius);
	text-align: center;
}
.spar-redeem-input:focus {
	outline: none;
	border-color: var(--mka-spar-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mka-spar-accent) 18%, transparent);
}

/* =========================================================
   2. Bouton "Ajouter la réduction au panier"

   Divi pose ses styles de bouton avec une forte spécificité (ID
   #page-container depuis le Customizer) et souvent en !important, plus
   une flèche ::after au survol. Pour gagner proprement :
   - préfixe #page-container : même niveau d'ID que Divi + classes en plus,
   - !important ciblé UNIQUEMENT sur les propriétés que Divi force
     (background/color/border) — il n'est donc pas superflu, il neutralise
     le !important de Divi,
   - padding figé au survol pour annuler le décalage de la flèche,
   - flèche ::after/::before supprimée.
   ========================================================= */

.spar-redeem-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Bouton ACTIF (des points sont sélectionnés) : fond rose, plus visible */
#page-container .spar-redeem-panel button.spar-redeem-apply-btn {
	background: var(--mka-spar-btn-bg-active) !important;
	color: var(--mka-spar-btn-text) !important;
	border: 2px solid var(--mka-spar-btn-border) !important;
	border-radius: 7px;
	padding: 0.6em 1.3em;
	font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
	font-weight: 400; /* normal — Divi met du gras par défaut */
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

/* Hover (actif) : fond blanc, texte rose, bordure inchangée */
#page-container .spar-redeem-panel button.spar-redeem-apply-btn:hover {
	background: #fff !important;
	color: var(--mka-spar-btn-hover-text) !important;
	border: 2px solid var(--mka-spar-btn-border) !important; /* Divi la retire sinon */
	padding: 0.6em 1.3em; /* fige le padding : neutralise le décalage de la flèche Divi */
}

/* Bouton DÉSACTIVÉ (aucun point) : "état normal" fond blanc / contour */
#page-container .spar-redeem-panel button.spar-redeem-apply-btn:disabled {
	background: #fff !important;
	color: var(--mka-spar-btn-text) !important;
	border: 2px solid var(--mka-spar-btn-border) !important;
	cursor: not-allowed;
}

/* Hover (désactivé) : seul le texte passe au rose */
#page-container .spar-redeem-panel button.spar-redeem-apply-btn:disabled:hover {
	background: #fff !important;
	color: var(--mka-spar-btn-hover-text) !important;
	border: 2px solid var(--mka-spar-btn-border) !important;
}

/* Suppression de la flèche Divi (::after) sur les boutons SPAR */
#page-container .spar-redeem-panel button.spar-redeem-apply-btn::before,
#page-container .spar-redeem-panel button.spar-redeem-apply-btn::after,
#page-container .spar-redeem-panel button.spar-redeem-apply-btn:hover::before,
#page-container .spar-redeem-panel button.spar-redeem-apply-btn:hover::after,
#page-container .spar-compact-toggle-btn.button::before,
#page-container .spar-compact-toggle-btn.button::after,
#page-container .spar-compact-toggle-btn.button:hover::before,
#page-container .spar-compact-toggle-btn.button:hover::after {
	content: none !important;
	display: none !important;
}

/* Toggle "Redeem Points" : style lien discret aux couleurs de marque */
.spar-compact-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.spar-compact-toggle-btn.button {
	background: none;
	border: none;
	padding: 0;
	color: var(--mka-spar-accent);
	cursor: pointer;
}
.spar-compact-toggle-btn.button:hover {
	color: color-mix(in srgb, var(--mka-spar-accent) 80%, #000);
	background: none;
}