/* ============================================================
   SCEMIM Pay — styles front (bouton + tunnel de virement)
   Préfixe : .scemim- / .sp-
   ============================================================ */

:root {
	/* Charte officielle BANK OF AFRICA : vert #008A48, noir #111111, blanc */
	--sp-primary: #008A48;
	--sp-primary-dark: #006F3A;
	--sp-black: #111111;
	--sp-tint: #eefbf5;
	--sp-tint-2: #d6f5e6;
	--sp-ink: #0f172a;
	--sp-muted: #64748b;
	--sp-line: #e2e8f0;
	--sp-radius: 14px;
	--sp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------------- Bouton ---------------- */

.scemim-pay-wrap { margin: 12px 0; }

.scemim-pay-button {
	--btn-bg: var(--sp-primary);
	--btn-fg: #ffffff;
	--btn-border: transparent;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--sp-font);
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--sp-radius);
	border: 1px solid var(--btn-border);
	background: var(--btn-bg);
	color: var(--btn-fg);
	cursor: pointer;
	text-decoration: none;
	overflow: hidden;
	padding: 11px 20px;
	font-size: 14px;
	box-shadow: 0 10px 22px -10px rgba(0, 132, 87, 0.55);
	transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
	-webkit-tap-highlight-color: transparent;
}

.scemim-pay-button:hover { filter: brightness(.94); transform: translateY(-1px); }
.scemim-pay-button:active { transform: translateY(0) scale(.985); }
.scemim-pay-button:focus-visible { outline: 3px solid rgba(0, 132, 87, .3); outline-offset: 2px; }
.scemim-pay-button[disabled] { cursor: default; opacity: .95; transform: none; filter: none; }

.scemim-pay-button .scemim-pay-icon { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 2px; }

.scemim-pay-button.scemim-pay--lg { padding: 14px 28px; font-size: 16px; border-radius: 15px; }
.scemim-pay-button.scemim-pay--lg .scemim-pay-icon { width: 20px; height: 20px; }

.scemim-pay-button.scemim-pay--outline {
	--btn-bg: #ffffff;
	--btn-fg: var(--sp-primary-dark);
	--btn-border: rgba(0, 132, 87, .35);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.scemim-pay-button.scemim-pay--outline:hover { background: var(--sp-tint); border-color: var(--sp-primary); }

.scemim-pay-button.scemim-pay--white {
	--btn-bg: #ffffff;
	--btn-fg: var(--sp-primary-dark);
	--btn-border: transparent;
	box-shadow: 0 12px 26px -12px rgba(15, 23, 42, .45);
}
.scemim-pay-button.scemim-pay--white:hover { background: #f8fafc; }

/* Aperçu dans l'éditeur de blocs */
.scemim-pay-block-preview { padding: 14px; }
.scemim-pay-block-preview .scemim-admin-badge {
	display: block; text-align: center; font-size: 11px; color: var(--sp-muted);
	margin-bottom: 10px; font-family: var(--sp-font);
}

/* ---------------- Overlay & modale ---------------- */

.sp-overlay {
	position: fixed; inset: 0; z-index: 999990;
	display: flex; align-items: flex-end; justify-content: center;
	padding: 0;
	background: rgba(2, 6, 23, .62);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: sp-fade .22s ease both;
	font-family: var(--sp-font);
}
@media (min-width: 640px) {
	.sp-overlay { align-items: center; padding: 16px; }
}

.sp-modal {
	display: flex; flex-direction: column;
	width: 100%; max-width: 464px;
	max-height: 94vh;
	background: #fff; color: var(--sp-ink);
	border-radius: 22px 22px 0 0;
	box-shadow: 0 30px 70px -20px rgba(2, 6, 23, .5);
	overflow: hidden;
	animation: sp-up .3s cubic-bezier(.22, 1, .36, 1) both;
}
@media (min-width: 640px) { .sp-modal { border-radius: 22px; max-height: 90vh; } }

.sp-overlay.sp-closing { animation: sp-fade-out .18s ease both; }
.sp-overlay.sp-closing .sp-modal { animation: sp-down .18s ease both; }

@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sp-up { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sp-down { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---------------- En-tête ---------------- */

.sp-header {
	position: relative;
	flex: 0 0 auto;
	padding: 18px 20px 14px;
	color: #fff;
	background: linear-gradient(125deg, #00553a 0%, var(--sp-primary) 58%, #1aa374 140%);
	overflow: hidden;
}
.sp-header::before, .sp-header::after {
	content: ""; position: absolute; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
}
.sp-header::before { width: 170px; height: 170px; right: -52px; top: -70px; }
.sp-header::after { width: 96px; height: 96px; right: -10px; top: -26px; border-color: rgba(255,255,255,.1); }

.sp-head-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sp-brand-icon {
	width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	box-shadow: 0 6px 16px -8px rgba(1, 39, 28, .55);
}
.sp-brand-icon svg { width: 34px; height: 34px; }
.sp-brand-title { font-size: 14px; font-weight: 700; line-height: 1.25; }
.sp-brand-sub { font-size: 11.5px; color: rgba(255,255,255,.78); margin-top: 1px; }

.sp-close {
	width: 34px; height: 34px; border-radius: 9px; border: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.12); color: #fff;
	transition: background .2s ease;
}
.sp-close:hover { background: rgba(255,255,255,.25); }
.sp-close svg { width: 17px; height: 17px; }

/* Étapes */
.sp-steps { position: relative; margin-top: 14px; display: flex; align-items: flex-start; }
.sp-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sp-step-dot {
	width: 22px; height: 22px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 700;
	background: rgba(255,255,255,.16); color: rgba(255,255,255,.75);
	transition: all .3s ease;
}
.sp-step.is-active .sp-step-dot { background: #fff; color: var(--sp-primary-dark); box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.sp-step.is-done .sp-step-dot { background: var(--sp-black); color: #fff; }
.sp-step-dot svg { width: 13px; height: 13px; }
.sp-step-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.6); }
.sp-step.is-active .sp-step-label, .sp-step.is-done .sp-step-label { color: #fff; }
.sp-connector { flex: 1 1 auto; height: 2px; margin: 10px 8px 0; border-radius: 99px; background: rgba(255,255,255,.16); position: relative; overflow: hidden; }
.sp-connector > i { position: absolute; inset: 0; background: #fff; width: 0; transition: width .45s ease; }
.sp-connector.is-done > i { width: 100%; }

/* ---------------- Corps ---------------- */

.sp-body { flex: 1 1 auto; overflow-y: auto; padding: 20px; }
.sp-pane { animation: sp-fade .25s ease both; }
.sp-pane[hidden] { display: none; }

.sp-label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 6px; }
.sp-label span { font-weight: 400; color: #94a3b8; }

.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sp-chip {
	border: 1px solid var(--sp-line); background: #fff; color: #475569;
	border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600;
	cursor: pointer; font-family: var(--sp-font); transition: all .15s ease;
}
.sp-chip:hover { border-color: color-mix(in srgb, var(--sp-primary) 45%, #fff); color: var(--sp-primary-dark); }
.sp-chip.is-active { border-color: var(--sp-primary); background: var(--sp-tint); color: var(--sp-primary-dark); }
.sp-chip:active { transform: scale(.95); }

.sp-input-wrap { position: relative; }
.sp-input {
	width: 100%; border: 1px solid var(--sp-line); border-radius: 12px;
	padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--sp-ink);
	background: #fff; font-family: var(--sp-font); outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sp-input::placeholder { color: #94a3b8; font-weight: 400; }
.sp-input:focus { border-color: var(--sp-primary); box-shadow: 0 0 0 4px rgba(0, 132, 87, .12); }
.sp-input.is-error { border-color: #fca5a5; }
.sp-input.is-error:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, .12); }
.sp-input--amount { font-family: var(--sp-mono); font-size: 17px; font-weight: 600; padding-right: 46px; letter-spacing: .02em; }
.sp-input--icon { padding-left: 40px; }
.sp-input-suffix { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 700; color: #94a3b8; }
.sp-input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #94a3b8; }
.sp-field { margin-bottom: 16px; }
.sp-error { display: none; margin-top: 5px; font-size: 12px; font-weight: 500; color: #dc2626; }
.sp-error.is-visible { display: block; }
.sp-hint { margin-top: 5px; font-size: 12px; color: #64748b; }

.sp-note {
	display: flex; gap: 10px; align-items: flex-start;
	border-radius: 12px; padding: 12px;
	font-size: 11.5px; line-height: 1.55; color: #64748b;
}
.sp-note svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
.sp-note--gray { background: #f8fafc; }
.sp-note--info { background: #f8fafc; }
.sp-note--amber { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.sp-note--amber svg { color: #d97706; }
.sp-note strong { color: #334155; }
.sp-note--amber strong { color: #78350f; }

/* Étape 2 */
.sp-summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	border: 1px solid color-mix(in srgb, var(--sp-primary) 18%, #fff);
	background: linear-gradient(135deg, #effaf5 0%, #ffffff 80%);
	border-radius: 13px; padding: 13px 15px; margin-bottom: 14px;
}
.sp-summary-eyebrow { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: color-mix(in srgb, var(--sp-primary) 70%, #fff); }
.sp-summary-amount { font-size: 22px; font-weight: 800; color: var(--sp-primary-dark); line-height: 1.1; }
.sp-summary-right { text-align: right; }
.sp-summary-right .sp-summary-eyebrow { color: #94a3b8; }
.sp-summary-name { font-size: 15px; font-weight: 700; color: var(--sp-ink); }
.sp-summary-bank { font-size: 11px; color: #64748b; }

.sp-rib-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 480px) { .sp-rib-grid { grid-template-columns: repeat(4, 1fr); } }
.sp-rib-cell {
	position: relative; text-align: left; width: 100%;
	border: 1px solid var(--sp-line); background: #fff;
	border-radius: 11px; padding: 9px 10px; cursor: pointer;
	font-family: var(--sp-font);
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sp-rib-cell:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--sp-primary) 45%, #fff); box-shadow: 0 4px 10px -6px rgba(0,132,87,.35); }
.sp-rib-cell.is-copied { border-color: var(--sp-primary); background: var(--sp-tint); }
.sp-rib-cell-label { display: block; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.sp-rib-cell-value { display: block; margin-top: 2px; font-family: var(--sp-mono); font-size: 12px; font-weight: 600; color: #1e293b; line-height: 1.25; word-break: break-all; padding-right: 14px; }
.sp-rib-cell-icon { position: absolute; right: 6px; top: 6px; width: 12px; height: 12px; color: #cbd5e1; }
.sp-rib-cell.is-copied .sp-rib-cell-icon { color: var(--sp-primary); }

.sp-copy-full {
	width: 100%; margin-top: 8px;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	border: 1px solid color-mix(in srgb, var(--sp-primary) 22%, #fff);
	background: var(--sp-tint); color: var(--sp-primary-dark);
	border-radius: 9px; padding: 8px 12px; font-size: 12px; font-weight: 600;
	cursor: pointer; font-family: var(--sp-font); transition: background .2s ease;
}
.sp-copy-full:hover { background: var(--sp-tint-2); }
.sp-copy-full svg { width: 13px; height: 13px; }

.sp-intl {
	margin-top: 10px; border: 1px solid var(--sp-line); background: #f8fafc;
	border-radius: 12px; padding: 10px 13px;
}
.sp-intl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-intl-row + .sp-intl-row { border-top: 1px solid rgba(226,232,240,.8); margin-top: 9px; padding-top: 9px; }
.sp-intl-label { display: block; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }
.sp-intl-value { font-family: var(--sp-mono); font-size: 12px; font-weight: 600; color: #1e293b; word-break: break-all; }
.sp-mini-copy {
	border: 0; background: transparent; color: #94a3b8; cursor: pointer;
	width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; transition: all .15s ease;
}
.sp-mini-copy:hover { background: #e2e8f0; color: var(--sp-primary-dark); }
.sp-mini-copy.is-copied { color: var(--sp-primary); }
.sp-mini-copy svg { width: 14px; height: 14px; }

.sp-ref-box {
	margin-top: 14px; border: 1px solid #fde68a; background: #fffbeb;
	border-radius: 12px; padding: 13px;
}
.sp-ref-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #92400e; }
.sp-ref-title svg { width: 16px; height: 16px; color: #d97706; }
.sp-ref-row {
	margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
	border: 1px solid #fde68a; background: #fff; border-radius: 9px; padding: 7px 12px;
}
.sp-ref-code { font-family: var(--sp-mono); font-size: 15px; font-weight: 700; letter-spacing: .14em; color: #0f172a; }
.sp-ref-copy {
	border: 1px solid var(--sp-line); background: #fff; border-radius: 8px;
	padding: 6px 11px; font-size: 11px; font-weight: 600; color: #475569; cursor: pointer;
	font-family: var(--sp-font); display: inline-flex; align-items: center; gap: 5px;
}
.sp-ref-copy:hover { background: #f8fafc; }
.sp-ref-copy.is-copied { color: var(--sp-primary); border-color: #b0eacf; }
.sp-ref-copy svg { width: 12px; height: 12px; }
.sp-ref-help { margin-top: 7px; font-size: 11px; line-height: 1.45; color: #b45309; }

.sp-steps-list { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: spstep; }
.sp-steps-list li { position: relative; display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; font-size: 12.5px; line-height: 1.5; color: #475569; }
.sp-steps-list li::before {
	counter-increment: spstep; content: counter(spstep);
	flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
	border-radius: 999px; background: var(--sp-primary); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 700;
}

/* Étape 3 */
.sp-done { text-align: center; padding-top: 6px; }
.sp-done-icon {
	width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 999px;
	background: var(--sp-tint-2); display: flex; align-items: center; justify-content: center;
	animation: sp-pop .45s cubic-bezier(.22,1,.36,1) both;
}
.sp-done-icon svg { width: 34px; height: 34px; color: var(--sp-primary); }
.sp-done-icon circle { opacity: .25; }
.sp-done-icon path.check { stroke-dasharray: 46; stroke-dashoffset: 46; animation: sp-draw .5s .25s ease forwards; }
@keyframes sp-pop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes sp-draw { to { stroke-dashoffset: 0; } }

.sp-done-title { font-size: 17px; font-weight: 800; color: #0f172a; margin: 0 0 6px; }
.sp-done-text { font-size: 12.5px; line-height: 1.6; color: #64748b; max-width: 340px; margin: 0 auto; }

.sp-recap { border: 1px solid var(--sp-line); border-radius: 12px; margin: 16px 0 14px; overflow: hidden; text-align: left; }
.sp-recap-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 15px; font-size: 12.5px; }
.sp-recap-row + .sp-recap-row { border-top: 1px solid #f1f5f9; }
.sp-recap-key { color: #94a3b8; flex: 0 0 auto; }
.sp-recap-val { text-align: right; font-weight: 600; color: #334155; word-break: break-word; }
.sp-recap-val.is-mono { font-family: var(--sp-mono); font-weight: 700; letter-spacing: .1em; color: var(--sp-primary-dark); }

.sp-mail-btn {
	width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 1px solid #b0eacf; background: var(--sp-tint); color: var(--sp-primary-dark);
	border-radius: 12px; padding: 11px 14px; font-size: 13.5px; font-weight: 600;
	cursor: pointer; text-decoration: none; font-family: var(--sp-font);
	transition: background .2s ease;
}
.sp-mail-btn:hover { background: var(--sp-tint-2); }
.sp-mail-btn svg { width: 15px; height: 15px; }

.sp-status { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 10.5px; color: #94a3b8; }
.sp-status svg { width: 13px; height: 13px; }

/* ---------------- Pied ---------------- */

.sp-footer { flex: 0 0 auto; border-top: 1px solid #f1f5f9; background: rgba(248,250,252,.8); padding: 14px 20px; display: flex; gap: 10px; }
.sp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border-radius: 12px; padding: 12px 16px; font-size: 13.5px; font-weight: 700;
	cursor: pointer; border: 1px solid transparent; font-family: var(--sp-font);
	transition: all .15s ease; text-decoration: none;
}
.sp-btn svg { width: 15px; height: 15px; }
.sp-btn-primary { flex: 1 1 auto; background: var(--sp-primary); color: #fff; box-shadow: 0 10px 22px -10px rgba(0,132,87,.6); }
.sp-btn-primary:hover { filter: brightness(.94); }
.sp-btn:active { transform: scale(.99); }
.sp-btn-success { flex: 1 1 auto; background: var(--sp-black); color: #fff; box-shadow: 0 10px 22px -10px rgba(17,17,17,.5); }
.sp-btn-success:hover { background: #000; }
.sp-btn-ghost { background: transparent; color: #64748b; border-color: transparent; }
.sp-btn-ghost:hover { background: #e2e8f0; color: #334155; }
.sp-btn-paper { background: #fff; color: #475569; border-color: var(--sp-line); }
.sp-btn-paper:hover { background: #f8fafc; }

/* ---------------- Toasts ---------------- */

.sp-toasts { position: fixed; inset: auto 0 18px; z-index: 999999; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; font-family: var(--sp-font); }
.sp-toast {
	display: inline-flex; align-items: center; gap: 9px;
	border-radius: 12px; padding: 10px 16px; font-size: 13px; font-weight: 600; color: #fff;
	box-shadow: 0 16px 40px -12px rgba(2,6,23,.45);
	animation: sp-toast .3s cubic-bezier(.22,1,.36,1) both;
}
.sp-toast svg { width: 16px; height: 16px; }
.sp-toast--success { background: var(--sp-primary); }
.sp-toast--info { background: #1e293b; }
@keyframes sp-toast { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

.sp-body .sp-pane > * + * { margin-top: 0; }
@media (max-width: 479px) {
	.sp-body { padding: 18px 18px 20px; }
	.sp-footer { padding: 12px 16px; }
}

/* ============= Panneau WooCommerce (page de confirmation de commande) ============= */

.sp-order-panel,
.sp-order-panel * { box-sizing: border-box; }

.sp-order-panel {
	max-width: 760px;
	margin: 20px 0 8px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--sp-line);
	border-radius: 18px;
	box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .35);
	font-family: var(--sp-font);
	color: var(--sp-ink);
}

.sp-order-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid #f1f5f9;
}
.sp-order-logo {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--sp-primary);
	color: #fff;
	box-shadow: 0 8px 18px -10px rgba(0, 132, 87, .6);
}
.sp-order-logo svg { width: 24px; height: 24px; }
.sp-order-logo--color {
	background: #fff;
	border: 1px solid var(--sp-line);
	box-shadow: 0 8px 18px -12px rgba(15, 23, 42, .35);
}
.sp-order-logo--color svg { width: 38px; height: 38px; }

/* ---- Page de commande par blocs (WooCommerce Blocks) ---- */
.scemim-blocks-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}
.scemim-blocks-label .wc-block-components-payment-method-icons { margin: 0; }
.scemim-blocks-label .wc-block-components-payment-method-icon,
.scemim-blocks-label img.scemim-blocks-logo {
	height: 30px !important;
	max-height: 30px !important;
	width: auto !important;
}
.scemim-blocks-content { font-family: var(--sp-font); font-size: 14px; line-height: 1.55; color: #374151; }
.scemim-blocks-content p { margin: 0 0 10px; }
.scemim-blocks-note { font-size: 12px; color: #64748b; margin: 10px 0 0 !important; }
.scemim-blocks-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--sp-line);
	border-radius: 10px;
	background: #f8fafc;
}
.scemim-blocks-card__mark { display: inline-flex; flex: 0 0 auto; }
.scemim-blocks-card__mark svg { width: 38px; height: 38px; }
.scemim-blocks-card dl { margin: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scemim-blocks-card__row { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.35; }
.scemim-blocks-card dt { color: #64748b; flex: 0 0 auto; }
.scemim-blocks-card dd { margin: 0; font-weight: 600; color: #111827; min-width: 0; }

/* Icône de la passerelle sur la page de paiement WooCommerce */
.scemim-gateway-logo {
	display: inline-flex;
	align-items: center;
	float: right;
	max-width: 58%;
}
.scemim-gateway-logo img {
	display: block;
	height: 34px !important;
	width: auto !important;
	max-width: 100%;
	margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods li .scemim-gateway-logo { margin: -4px 0 6px; }
@media (max-width: 540px) {
	.scemim-gateway-logo { max-width: 50%; }
	.scemim-gateway-logo img { height: 28px !important; }
}
.sp-order-headtext { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sp-order-headtext strong { font-size: 14.5px; font-weight: 800; color: #0f172a; line-height: 1.3; }
.sp-order-headtext small { font-size: 11.5px; color: #64748b; margin-top: 1px; }
.sp-order-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	font-size: 9.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #b45309;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 999px;
	padding: 5px 10px;
}
.sp-order-badge svg { width: 12px; height: 12px; }

.sp-order-intro { font-size: 13px; line-height: 1.6; color: #475569; margin: 0 0 12px; }
.sp-order-intro p { margin: 0 0 6px; }
.sp-order-intro p:last-child { margin-bottom: 0; }

.sp-order-panel .sp-rib-grid { margin-bottom: 0; }
.sp-order-panel .sp-steps-list { margin-top: 14px; }

.sp-order-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sp-order-panel .sp-btn { text-decoration: none; cursor: pointer; }
.sp-order-panel .sp-btn-primary { flex: 1 1 200px; }
.sp-order-panel .sp-status { margin-top: 12px; }

/* États « copié » pour les éléments hors modale (délégation générique) */
.sp-copy-full.is-copied { background: var(--sp-tint-2); border-color: #7cd8b2; color: var(--sp-primary-dark); }
.sp-mini-copy.is-copied,
.sp-ref-copy.is-copied { color: var(--sp-primary) !important; }
.sp-rib-cell.is-copied .sp-rib-cell-icon { color: var(--sp-primary); }

@media (max-width: 540px) {
	.sp-order-panel { padding: 16px; }
	.sp-order-head { flex-wrap: wrap; }
	.sp-order-badge { order: 3; }
	.sp-order-actions .sp-btn { flex: 1 1 100%; justify-content: center; }
}

/* ---- Virement banque à banque : banque d'origine ---- */
.sp-origin-box {
	border: 1px solid #b0eacf; background: var(--sp-tint); border-radius: 12px; padding: 12px 13px; margin-bottom: 14px;
}
.sp-origin-box .sp-label { color: #1f2937; }
.sp-select { -webkit-appearance: none; appearance: none; padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.sp-origin-hint { margin: 8px 0 0; font-size: 11px; font-weight: 600; color: var(--sp-primary-dark); }

.sp-mode-card { border: 1px solid var(--sp-line); border-radius: 12px; padding: 13px; }
.sp-tab-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sp-tab-head strong { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #0f172a; }
.sp-tab-head strong svg { width: 16px; height: 16px; color: var(--sp-primary); flex: 0 0 auto; }
.sp-tab-use { margin: 6px 0 0; font-size: 11.5px; color: #64748b; }
.sp-tab-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #f8fafc; font-size: 11.5px; line-height: 1.55; color: #64748b; }
.sp-mode-card .sp-steps-list { margin-top: 10px; }

.sp-origin { margin-top: 14px; }
.sp-origin-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #0f172a; }
.sp-origin-title svg { width: 16px; height: 16px; color: var(--sp-primary); }
.sp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sp-tab {
	border: 1px solid var(--sp-line); background: #fff; color: #475569; border-radius: 999px;
	padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sp-font); transition: all .15s ease;
}
.sp-tab:hover { border-color: var(--sp-primary); color: var(--sp-primary-dark); }
.sp-tab.is-active { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
.sp-tab-panel { border: 1px solid var(--sp-line); border-radius: 12px; padding: 13px; }
.sp-tab-panel[hidden] { display: none; }