/*
 * SoleasPay – champs de paiement.
 * Sélecteurs préfixés par .soleaspay-fields et quelques !important : beaucoup de thèmes
 * imposent leurs propres styles aux <select> (largeur, bordure, flèche).
 */

.soleaspay-fields {
	--sp-border: #d5dae3;
	--sp-border-hover: #aab3c2;
	--sp-focus: #1d4ed8;
	--sp-ring: rgba(29, 78, 216, .15);
	--sp-text: #111827;
	--sp-muted: #6b7280;
	--sp-bg: #fff;
	--sp-radius: 12px;
	--sp-height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Logo des moyens de paiement à côté du titre. */
img.soleaspay-icon {
	display: inline-block !important;
	height: 24px !important;
	width: auto !important;
	max-width: 100% !important;
	max-height: none !important;
	margin: 0 0 0 .5em !important;
	vertical-align: middle !important;
	float: none !important;
}

.soleaspay-fields .soleaspay-field {
	display: block !important;
	width: 100% !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	float: none !important;
}

.soleaspay-fields .soleaspay-field::before,
.soleaspay-fields .soleaspay-field::after {
	display: none !important;
}

.soleaspay-fields .soleaspay-field > label {
	display: block !important;
	margin: 0 0 6px !important;
	color: var(--sp-text);
	font-size: .95em;
	font-weight: 600;
	line-height: 1.3;
}

/* Liste déroulante : boîte pleine largeur + flèche dessinée par nous. */
.soleaspay-fields .soleaspay-select-wrap {
	position: relative;
	display: block;
	width: 100%;
}

.soleaspay-fields .soleaspay-select-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--sp-muted);
	border-bottom: 2px solid var(--sp-muted);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
	transition: border-color .15s;
}

.soleaspay-fields .soleaspay-select-wrap:focus-within::after {
	border-color: var(--sp-focus);
}

.soleaspay-fields select.soleaspay-select,
.soleaspay-fields input.soleaspay-input {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: var(--sp-height) !important;
	min-height: var(--sp-height) !important;
	margin: 0 !important;
	padding: 0 16px !important;
	box-sizing: border-box !important;
	border: 1.5px solid var(--sp-border) !important;
	border-radius: var(--sp-radius) !important;
	background: var(--sp-bg) !important;
	box-shadow: none !important;
	color: var(--sp-text) !important;
	font-size: 16px !important; /* 16px : évite le zoom automatique sur iPhone. */
	line-height: 1.2 !important;
	outline: none !important;
	transition: border-color .15s, box-shadow .15s;
}

.soleaspay-fields select.soleaspay-select {
	padding-right: 44px !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: none !important;
	cursor: pointer;
	text-overflow: ellipsis;
}

.soleaspay-fields select.soleaspay-select:hover,
.soleaspay-fields input.soleaspay-input:hover {
	border-color: var(--sp-border-hover) !important;
}

.soleaspay-fields select.soleaspay-select:focus,
.soleaspay-fields input.soleaspay-input:focus {
	border-color: var(--sp-focus) !important;
	box-shadow: 0 0 0 4px var(--sp-ring) !important;
}

.soleaspay-fields input.soleaspay-input::placeholder {
	color: #9ca3af;
}

/* Checkout en blocs : logo dans le libellé. */
.soleaspay-label {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.soleaspay-label img.soleaspay-icon {
	margin: 0 !important;
}

.soleaspay-status .button {
	margin-left: .5em;
}