/* ============================================================
   BII Donation Manager - Frontend Styles
   ============================================================ */

:root {
	--bii-primary:   #c0392b;
	--bii-primary-d: #a93226;
	--bii-accent:    #e74c3c;
	--bii-text:      #333333;
	--bii-muted:     #666666;
	--bii-border:    #dde0e3;
	--bii-bg:        #f8f9fa;
	--bii-radius:    8px;
}

/* Donation Progress */
.bii-donation-progress {
	background: #fff;
	border-radius: 18px;
	padding: 15px;
}

.bii-progress-bar-wrap {
	position: relative;
}

.bii-progress-track {
	background: #4E4B4B;
	border-radius: 999px;
	height: 18px;
	overflow: hidden;
}

.bii-progress-fill {
	background: #FFC629;
	border-radius: inherit;
	height: 100%;
	transition: width .35s ease;
}

.bii-progress-current-wrap {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
	left: 0;
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
}

.bii-progress-indicator {
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	border-bottom: 22px solid #FFC629;
	display: block;
	height: 0;
	margin-top: 8px;
	width: 0;
}

.bii-progress-summary {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	min-height: 72px;
}

.bii-progress-summary-spacer {
	display: block;
	width: 140px;
}

.bii-progress-current {
	color: #ff5a4f;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

.bii-progress-goal {
	align-items: flex-end;
	color: #111;
	display: flex;
	flex-direction: column;
	font-weight: 700;
	gap: 4px;
}

.bii-progress-goal-label {
	font-size: 16px;
	line-height: 1.1;
}

.bii-progress-goal-value {
	color: #ff5a4f;
	font-size: 16px;
	line-height: 1;
}

/* ============================================================
   Currency switcher
   ============================================================ */

.bii-currency-switcher-wrap {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-bottom: 12px;
}

.bii-currency-label {
	color: var(--bii-muted);
	font-size: .85rem;
	font-weight: 600;
	white-space: nowrap;
}

.bii-currency-select {
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 10px center;
	background-size: 10px;
	border: 1px solid var(--bii-border);
	border-radius: 6px;
	color: var(--bii-text);
	cursor: pointer;
	font-size: .85rem;
	padding: 7px 30px 7px 10px;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .15s;
}

.bii-currency-select:focus {
	border-color: var(--bii-primary);
	box-shadow: 0 0 0 3px rgba(192,57,43,.12);
	outline: none;
}

/* ============================================================
   Donation Cards - [bii_donation_cards]
   ============================================================ */

.bii-donation-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	justify-content: center;
	padding: 76px 0 24px;
}

.bii-donation-card {
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
	display: flex;
	flex-direction: column;
	flex: 1 1 240px;
	max-width: 300px;
	padding: 76px 28px 32px;
	position: relative;
	text-align: center;
	transition: transform .2s, box-shadow .2s;
}

.bii-donation-card:hover {
	box-shadow: 0 18px 44px rgba(0, 0, 0, .15);
	transform: translateY(-6px);
}

/* Floating icon image */
.bii-card-icon-wrap {
	left: 50%;
	position: absolute;
	top: -60px;
	transform: translateX(-50%);
}

.bii-card-icon-img {
	display: block;
	height: 120px;
	width: 120px;
	filter: drop-shadow(0 6px 14px rgba(146, 29, 128, .35));
}

.bii-card-title {
	color: #921d80;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 10px;
}

.bii-card-price {
	color: #921d80;
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
	margin: 0 0 16px;
}

.bii-price-libre {
	font-size: 1.25rem;
	font-weight: 700;
}

.bii-card-description {
	color: var(--bii-muted);
	flex: 1;
	font-size: .88rem;
	line-height: 1.55;
	margin: 0 0 28px;
}

.bii-btn-donate {
	background: #921d80;
	border-radius: 999px;
	color: #fff !important;
	display: block;
	font-size: .95rem;
	font-weight: 700;
	margin-top: auto;
	padding: 14px 20px;
	text-align: center;
	text-decoration: none;
	transition: background .2s, transform .12s;
}

.bii-btn-donate:hover {
	background: #7a1469;
	color: #fff;
	transform: translateY(-2px);
}

/* ============================================================
   Donation Page - [bii_donation_form]
   ============================================================ */

.bii-donation-page {
	max-width: 960px;
	margin: 0 auto;
}

/* Summary banner */
.bii-donation-summary {
	display: flex;
	align-items: center;
	gap: 20px;
	background: #FFC629;
	color: #fff;
	border-radius: var(--bii-radius);
	padding: 24px;
	margin-bottom: 32px;
}

.bii-summary-amount {
	min-width: 120px;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 700;
	flex-shrink: 0;
	border-right: 1px solid rgba(255,255,255,.3);
	padding-right: 20px;
}

.bii-label-libre {
	font-size: 1.1rem;
}

.bii-summary-title {
	color: #fff;
	font-size: 1.25rem;
	margin: 0 0 6px;
}

.bii-summary-description {
	color: rgba(255,255,255,.85);
	font-size: .9rem;
	margin: 0;
	line-height: 1.5;
}

/* Form wrap */
.bii-donation-form-wrap {
	background: #fff;
	border: 1px solid var(--bii-border);
	border-radius: var(--bii-radius);
	padding: 32px;
}

.bii-form-heading {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 24px;
	color: var(--bii-text);
}

/* Notice */
.bii-notice {
	border-radius: var(--bii-radius);
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: .9rem;
}

.bii-notice-error {
	background: #fdf2f2;
	border-left: 4px solid var(--bii-accent);
	color: #a94442;
}

.bii-notice p { margin: 0 0 6px; }
.bii-notice ul { margin: 4px 0 0 16px; padding: 0; }
.bii-notice li { margin-bottom: 2px; }

/* Fixed amount notice */
.bii-fixed-amount-notice {
	background: var(--bii-bg);
	border: 1px solid var(--bii-border);
	border-radius: var(--bii-radius);
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: .95rem;
	color: var(--bii-text);
}

.bii-step-card {
	background: #fff;
	border: 1px solid #eceef2;
	border-radius: 16px;
	margin-bottom: 16px;
	padding: 16px;
}

.bii-step-badge {
	color: #7d8496;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .03em;
	margin: 0 0 8px;
	text-transform: uppercase;
	text-align: center;
}

.bii-step-title {
	color: #111;
	font-size: 1.95rem;
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.05;
	margin: 0 0 14px;
	text-align: center;
}

.bii-quantity-picker {
	align-items: center;
	display: flex;
	gap: 20px;
	justify-content: center;
}

.bii-qty-btn {
	align-items: center;
	background: #25b3ab;
	border: none;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 1.4rem;
	font-weight: 700;
	height: 34px;
	justify-content: center;
	line-height: 1;
	width: 34px;
}

.bii-qty-value {
	color: #2f5b5b;
	font-size: 1.55rem;
	font-weight: 700;
	min-width: 30px;
	text-align: center;
}

.bii-step-total {
	color: #28304d;
	font-size: 1.05rem;
	font-weight: 600;
	margin: 12px 0 0;
	text-align: center;
}

.bii-step-card-cycle {
	padding-top: 18px;
}

.bii-cycle-switch {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr;
}

.bii-cycle-option {
	background: #eeeeef;
	border: 2px solid transparent;
	border-radius: 999px;
	color: #111;
	cursor: pointer;
	font-size: 1.75rem;
	font-weight: 500;
	padding: 10px 14px;
	text-align: center;
	transition: all .2s ease;
}

.bii-cycle-option.is-active {
	background: #def4ee;
	border-color: #25b3ab;
	color: #0f5f57;
}

.bii-cycle-amount {
	display: block;
	line-height: 1;
	white-space: nowrap;
}

/* Fields */
.bii-field {
	margin-bottom: 20px;
}

.bii-field label {
	display: block;
	font-weight: 600;
	font-size: .9rem;
	margin-bottom: 6px;
	color: var(--bii-text);
}

.bii-required { color: var(--bii-accent); }
.bii-optional { color: var(--bii-muted); font-weight: 400; font-size: .85rem; }

.bii-field input[type="text"],
.bii-field input[type="email"],
.bii-field input[type="tel"],
.bii-field input[type="number"],
.bii-field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--bii-border);
	border-radius: 6px;
	font-size: .95rem;
	color: var(--bii-text);
	background: #fff;
	box-sizing: border-box;
	transition: border-color .15s;
}

.bii-field input:focus,
.bii-field textarea:focus {
	outline: none;
	border-color: var(--bii-primary);
	box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}

.bii-field-error input,
.bii-field-error textarea {
	border-color: var(--bii-accent);
}

.bii-field-message {
	color: var(--bii-accent);
	font-size: .83rem;
	margin: 5px 0 0;
}

.bii-field-hint {
	color: var(--bii-muted);
	font-size: .83rem;
	margin: 5px 0 0;
}

.bii-equiv-hint {
	color: #25b3ab;
	font-size: .8rem;
	font-style: italic;
}

.bii-checkbox-label {
	align-items: flex-start;
	display: flex;
	gap: 10px;
	line-height: 1.4;
}

.bii-checkbox-label input[type="checkbox"] {
	margin-top: 2px;
}

.bii-field-consent .bii-consent-intro {
	font-size: 0.88rem;
	color: var(--bii-muted);
	margin: 0 0 8px;
}

.bii-consent-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bii-donor-anon {
	color: var(--bii-muted);
	font-style: normal;
}

/* Amount input with suffix */
.bii-input-group {
	display: flex;
	align-items: center;
}

.bii-input-group input {
	border-radius: 6px 0 0 6px !important;
	border-right: none !important;
}

.bii-input-suffix {
	background: var(--bii-bg);
	border: 1px solid var(--bii-border);
	border-left: none;
	border-radius: 0 6px 6px 0;
	padding: 11px 14px;
	font-size: .95rem;
	color: var(--bii-muted);
	white-space: nowrap;
}

/* Submit */
.bii-form-submit {
	margin-top: 28px;
	text-align: center;
}

.bii-btn-proceed {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #25B3AB;
	color: #fff;
	border: none;
	padding: 16px 36px;
	border-radius: var(--bii-radius);
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s, transform .1s;
}

.bii-btn-proceed:hover {
	background: var(--bii-primary-d);
	transform: translateY(-1px);
}

.bii-btn-proceed:active {
	transform: translateY(0);
}

.bii-secure-note {
	margin: 10px 0 0;
	font-size: .8rem;
	color: var(--bii-muted);
}

/* Donors list */
.bii-donors-list {
	background: #fff;
	border: 1px solid #ececf7;
	border-radius: 22px;
	box-shadow: 0 16px 30px rgba(28, 33, 59, .08);
	padding: 26px 28px;
}

.bii-donors-list-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	margin-bottom: 14px;
}

.bii-donors-list-title {
	color: #1f255d;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -.3px;
	margin: 0;
}

.bii-donors-toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bii-donors-search-wrap {
	position: relative;
}

.bii-donors-search {
	background: #fff;
	border: 1px solid #e5e8f2;
	border-radius: 10px;
	color: #384159;
	font-size: .92rem;
	min-width: 230px;
	padding: 10px 34px 10px 12px;
}

.bii-donors-search:focus {
	border-color: #6673ff;
	box-shadow: 0 0 0 3px rgba(102,115,255,.12);
	outline: none;
}

.bii-donors-search-icon {
	color: #9299b4;
	font-size: .95rem;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.bii-donors-filter-btn {
	background: transparent;
	border: none;
	color: #5e66c6;
	cursor: pointer;
	font-size: .95rem;
	font-weight: 600;
	padding: 8px 10px;
}

.bii-donors-primary-btn {
	background: linear-gradient(135deg, #6e67f7, #4d5ae5);
	border: none;
	border-radius: 9px;
	color: #fff;
	cursor: pointer;
	font-size: .85rem;
	font-weight: 700;
	padding: 10px 14px;
}

.bii-donors-list-empty {
	color: var(--bii-muted);
	margin: 0;
}

.bii-donors-table-wrap {
	overflow-x: auto;
}

.bii-donors-table {
	border-collapse: collapse;
	min-width: 740px;
	width: 100%;
}

.bii-donors-table th,
.bii-donors-table td {
	border-bottom: 1px solid #eef0f5;
	font-size: .9rem;
	padding: 12px 10px;
	text-align: left;
}

.bii-donors-table th {
	color: #363d63;
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
}

.bii-donors-table td {
	color: #59607a;
}

.bii-donors-pager {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 14px;
}

.bii-donors-page-label {
	color: #656d8e;
	font-size: .9rem;
}

.bii-donors-page-btn {
	background: transparent;
	border: 1px solid #e2e6f3;
	border-radius: 8px;
	color: #59607a;
	cursor: pointer;
	font-size: 1rem;
	height: 30px;
	line-height: 1;
	width: 30px;
}

.bii-donors-page-btn[disabled] {
	cursor: not-allowed;
	opacity: .45;
}

/* Wrappers transparents (card/layout gèrent leur propre visuel) */
.bii-form-wrap--step1,
.bii-form-wrap--step2,
.bii-form-wrap--step3,
.bii-form-wrap--2col {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

/* ============================================================
   Layout 2 colonnes — card gauche + formulaire droit
   ============================================================ */

.bii-form-layout {
	align-items: flex-start;
	display: flex;
	gap: 36px;
}

.bii-form-layout-left {
	flex: 0 0 400px;
	min-width: 0;
	padding-top: 70px;
	position: sticky;
	top: 25px;
}

/* Colonne droite : transparent, sections en cartes empilées */
.bii-form-layout-right {
	background: transparent;
	border: none;
	box-shadow: none;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 0;
}

/* ── Blocs email dans la colonne droite ─────────────────────── */
.bii-form-info-block {
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	margin-bottom: 14px;
	overflow: hidden;
}

.bii-form-info-block.bii-field-error {
	border-color: #e53e3e;
}

.bii-form-info-header {
	background: #0d3b2e;
	color: #FFC629;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	padding: 10px 18px;
	text-transform: uppercase;
}

.bii-form-info-opt {
	color: rgba(255, 255, 255, .45);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Corps libre (textarea, checkboxes) */
.bii-form-info-body {
	background: #fff;
	padding: 14px 18px;
}

.bii-form-info-body textarea {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	font-size: .875rem;
	padding: 10px 12px;
	resize: vertical;
	width: 100%;
}

.bii-form-info-body textarea:focus {
	border-color: #25b3ab;
	box-shadow: 0 0 0 3px rgba(37, 179, 171, .14);
	outline: none;
}

.bii-form-info-body .bii-field-hint,
.bii-form-info-body .bii-field-message {
	font-size: .78rem;
	margin-top: 6px;
}

/* Lignes label + input (comme detail rows email) */
.bii-form-info-row {
	align-items: stretch;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
}

.bii-form-info-row:last-child {
	border-bottom: none;
}

.bii-form-info-row--shaded {
	background: #f9f9f7;
}

.bii-form-info-row.bii-field-error {
	background: #fff5f5;
}

.bii-form-info-row > label {
	align-items: center;
	color: #888;
	display: flex;
	flex-shrink: 0;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .3px;
	padding: 12px 14px;
	width: 38%;
}

.bii-form-info-input {
	border-left: 1px solid #f0f0f0;
	flex: 1;
	min-width: 0;
}

.bii-form-info-input input {
	background: transparent;
	border: none;
	box-shadow: none;
	color: #1a1a1a;
	font-size: .875rem;
	padding: 12px 14px;
	width: 100%;
}

.bii-form-info-input input:focus {
	background: #f0faf9;
	border: none;
	box-shadow: none;
	outline: none;
}

.bii-form-info-input .bii-field-message {
	border-top: 1px solid #fed7d7;
	color: #c53030;
	font-size: .75rem;
	padding: 6px 14px;
}

/* Focus teal restants */
.bii-form-layout-right .bii-field input:focus,
.bii-form-layout-right .bii-field textarea:focus {
	border-color: #25b3ab;
	box-shadow: 0 0 0 3px rgba(37, 179, 171, .14);
	outline: none;
}

/* Bouton submit pleine largeur + dégradé teal */
.bii-form-layout .bii-form-submit {
	margin: 0;
}

.bii-form-layout .bii-btn-proceed {
	background: linear-gradient(135deg, #0d3b2e 0%, #25b3ab 100%);
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(13, 59, 46, .35);
	font-size: 1.05rem;
	padding: 17px 24px;
}

.bii-form-layout .bii-btn-proceed:hover {
	background: linear-gradient(135deg, #0a2d22 0%, #1fa09a 100%);
	box-shadow: 0 8px 22px rgba(13, 59, 46, .45);
	transform: translateY(-2px);
}

.bii-form-layout .bii-secure-note {
	color: #888;
	font-size: .78rem;
	margin-top: 10px;
	text-align: center;
}

.bii-form-layout .bii-form-submit a {
	color: #25b3ab;
	display: block;
	font-size: .85rem;
	margin-bottom: 12px;
	text-align: center;
	text-decoration: none;
}

.bii-form-layout .bii-form-submit a:hover {
	text-decoration: underline;
}

/* Cards dans la colonne gauche : pas de margin auto, largeur pleine */
.bii-form-layout .bii-step2-card,
.bii-form-layout .bii-step3-card {
	margin: 0;
	max-width: none;
}

/* ============================================================
   Step 2 — New card design
   ============================================================ */

.bii-step2-card {
	background: #fff;
	border-radius: 25px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
	margin: 60px auto 28px;
	max-width: 320px;
	padding: 72px 28px 40px;
	position: relative;
	text-align: center;
}

.bii-step2-icon-wrap {
	left: 50%;
	position: absolute;
	top: -55px;
	transform: translateX(-50%);
}

.bii-step2-icon {
	align-items: center;
	background: transparent;
	border-radius: 50%;
	display: flex;
	height: 110px;
	justify-content: center;
	width: 110px;
}

.bii-step2-icon img {
	height: 110px;
	width: 110px;
	border-radius: 50%;
	object-fit: cover;
	filter: drop-shadow(0 6px 14px rgba(146, 29, 128, .38));
}

.bii-step2-badge {
	color: #921d80;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.bii-step2-title {
	color: #921d80;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 28px;
}

/* Quantity picker overrides for step 2 */
.bii-step2-card .bii-quantity-picker {
	gap: 22px;
	margin-bottom: 24px;
}

.bii-step2-card .bii-qty-btn {
	background: #4db6ac;
	font-size: 1.3rem;
	height: 38px;
	width: 38px;
	box-shadow: 0 3px 8px rgba(77, 182, 172, .4);
	transition: background .18s, transform .1s;
}

.bii-step2-card .bii-qty-btn:hover {
	background: #00897b;
	transform: scale(1.08);
}

.bii-step2-card .bii-qty-value {
	color: #4db6ac;
	font-size: 1.7rem;
	font-weight: 800;
	min-width: 36px;
}

.bii-step2-total {
	color: #444;
	font-size: 1rem;
	margin: 0;
}

.bii-step2-total strong {
	color: #921d80;
	font-size: 1.1rem;
}

/* ============================================================
   Step 3 — New card design
   ============================================================ */

.bii-form-wrap--step3 {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

.bii-step3-card {
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, .15);
	margin: 80px auto 28px;
	max-width: 420px;
	padding: 80px 30px 40px;
	position: relative;
	text-align: center;
}

.bii-step3-avatar-wrap {
	left: 50%;
	position: absolute;
	top: -70px;
	transform: translateX(-50%);
}

.bii-step3-avatar {
	align-items: center;
	background: transparent;
	border-radius: 50%;
	display: flex;
	height: 140px;
	justify-content: center;
	width: 140px;
}

.bii-step3-avatar img {
	height: 140px;
	width: 140px;
	border-radius: 50%;
	object-fit: cover;
	filter: drop-shadow(0 8px 18px rgba(146, 29, 128, .40));
}

.bii-step3-badge {
	color: #921d80;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.bii-step3-title {
	color: #921d80;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 22px;
}

/* Counter inside step 3 */
.bii-step3-counter {
	margin-bottom: 22px !important;
}

.bii-step3-card .bii-qty-btn {
	background: #4db6ac;
	box-shadow: 0 3px 8px rgba(77, 182, 172, .35);
	font-size: 1.2rem;
	height: 34px;
	transition: background .18s, transform .1s;
	width: 34px;
}

.bii-step3-card .bii-qty-btn:hover {
	background: #00897b;
	transform: scale(1.08);
}

.bii-step3-card .bii-qty-value {
	color: #4db6ac;
	font-size: 1.5rem;
	font-weight: 800;
	min-width: 32px;
}

.bii-step3-question {
	color: #111;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.35;
	margin: 0 0 22px;
}

/* Payment option buttons */
.bii-step3-cycle-options {
	display: flex;
	gap: 14px;
	justify-content: center;
}

.bii-step3-pay-btn {
	background: #ededed;
	border: 2px solid transparent;
	border-radius: 25px;
	color: #333;
	cursor: pointer;
	flex: 1;
	font-size: .95rem;
	font-weight: 500;
	padding: 13px 18px;
	text-align: center;
	transition: background .18s, border-color .18s, color .18s;
}

.bii-step3-pay-btn strong {
	font-weight: 700;
}

.bii-step3-pay-btn.is-active,
.bii-step3-pay-btn:hover {
	background: #e0f5f3;
	border-color: #4db6ac;
	color: #00695c;
}

/* ============================================================
   Donor info section (step 3 form)
   ============================================================ */

.bii-donor-info-section {
	background: #f9f9f9;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	margin: 24px 0;
	padding: 20px 22px;
}

.bii-donor-info-title {
	color: #921d80;
	font-size: .95rem;
	font-weight: 700;
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* ============================================================
   Confirmation de donation — design email-inspired
   ============================================================ */

.bii-donation-confirmed {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 40px rgba(13, 59, 46, .14);
	margin: 40px auto;
	max-width: 600px;
	overflow: hidden;
	padding: 0;
	text-align: left;
}

/* Header */
.bii-confirmed-header {
	background: #0d3b2e;
	padding: 22px 36px;
}

.bii-confirmed-header-inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.bii-confirmed-logo {
	display: block;
	height: 40px;
	max-height: 40px;
}

.bii-confirmed-header-name {
	color: rgba(255, 255, 255, .4);
	font-size: .75rem;
}

/* Accent stripe */
.bii-confirmed-stripe {
	background: #25b3ab;
	height: 5px;
}

/* Body */
.bii-confirmed-body-wrap {
	background: #fff;
	padding: 40px 40px 32px;
	text-align: center;
}

.bii-confirmed-icon {
	align-items: center;
	background: #25b3ab;
	border-radius: 50%;
	color: #fff;
	display: flex;
	font-size: 2rem;
	font-weight: 700;
	height: 64px;
	justify-content: center;
	margin: 0 auto 24px;
	width: 64px;
}

.bii-confirmed-title {
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 900;
	letter-spacing: -.5px;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.bii-confirmed-subtitle {
	color: #666;
	font-size: .95rem;
	font-style: italic;
	margin: 0 0 28px;
}

/* Amount highlight */
.bii-confirmed-amount-block {
	border: 2px solid #25b3ab;
	border-radius: 8px;
	display: inline-block;
	margin: 0 auto 32px;
	min-width: 220px;
	overflow: hidden;
	text-align: center;
}

.bii-confirmed-amount-label-strip {
	background: #25b3ab;
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 6px 32px;
	text-transform: uppercase;
}

.bii-confirmed-amount-display {
	background: #f0faf9;
	color: #25b3ab;
	font-size: 2.25rem;
	font-weight: 900;
	line-height: 1;
	padding: 18px 32px;
}

/* Details tables */
.bii-confirmed-details {
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	margin-bottom: 20px;
	overflow: hidden;
	text-align: left;
	width: 100%;
}

.bii-confirmed-details-header {
	background: #0d3b2e;
	color: #FFC629;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	padding: 12px 18px;
	text-transform: uppercase;
}

.bii-confirmed-row {
	align-items: baseline;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 11px 18px;
}

.bii-confirmed-row:last-child {
	border-bottom: none;
}

.bii-confirmed-row--shaded {
	background: #f9f9f7;
}

.bii-confirmed-label {
	color: #888;
	flex-shrink: 0;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .3px;
	width: 38%;
}

.bii-confirmed-value {
	color: #1a1a1a;
	font-size: .875rem;
	text-align: right;
}

.bii-confirmed-amount-teal {
	color: #25b3ab;
	font-size: 1rem;
	font-weight: 700;
}

.bii-confirmed-ref {
	color: #888;
	font-weight: 400;
}

.bii-confirmed-message-val {
	color: #444;
	font-style: italic;
}

/* Impact block */
.bii-confirmed-impact {
	background: #f0faf9;
	border-left: 5px solid #25b3ab;
	border-radius: 0 6px 6px 0;
	color: #444;
	font-size: .875rem;
	line-height: 1.7;
	margin-bottom: 28px;
	padding: 18px 20px;
	text-align: left;
}

.bii-confirmed-actions {
	margin-top: 8px;
	text-align: center;
}

/* Footer */
.bii-confirmed-footer {
	background: #0d3b2e;
	padding: 28px 36px;
}

.bii-confirmed-footer-title {
	color: #FFC629;
	font-size: .94rem;
	font-weight: 900;
	letter-spacing: .5px;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.bii-confirmed-footer-text {
	color: rgba(255, 255, 255, .45);
	font-size: .75rem;
	line-height: 1.6;
	margin: 0;
}

/* ============================================================
   Page de paiement — layout 2 colonnes
   ============================================================ */

.bii-pay-layout-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	max-width: 960px;
	margin: 0 auto;
}

.bii-pay-donor-info-col {
	flex: 0 0 360px;
}

.bii-pay-form-col {
	flex: 1;
	min-width: 0;
}

/* Panneau d'info donateur — design email */
.bii-pay-donor-panel {
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(13, 59, 46, .14);
	overflow: hidden;
}

/* Header dark green */
.bii-pay-panel-header {
	background: #0d3b2e;
	padding: 22px 24px 20px;
}

.bii-pay-panel-header-label {
	color: rgba(255, 255, 255, .5);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.bii-pay-panel-amount-block {
	border: 2px solid #25b3ab;
	border-radius: 6px;
	overflow: hidden;
}

.bii-pay-panel-amount-type {
	background: #25b3ab;
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 5px 16px;
	text-align: center;
	text-transform: uppercase;
}

.bii-pay-panel-amount-value {
	background: rgba(0, 0, 0, .25);
	color: #fff;
	font-size: 1.6rem;
	font-weight: 900;
	line-height: 1;
	padding: 14px 16px;
	text-align: center;
}

/* Accent stripe */
.bii-pay-panel-stripe {
	background: #25b3ab;
	height: 4px;
}

/* Detail blocks inside panel */
.bii-pay-donor-panel .bii-form-info-block {
	border-left: none;
	border-right: none;
	border-top: none;
	border-radius: 0;
	margin-bottom: 0;
}

.bii-pay-donor-panel .bii-form-info-block:last-child {
	border-bottom: none;
}

.bii-pay-donor-panel .bii-form-info-block + .bii-form-info-block {
	border-top: none;
}

.bii-pay-amount-teal {
	color: #25b3ab;
	font-size: .95rem;
	font-weight: 700;
}

/* ------------------------------------------------------------
   Colonne formulaire — liste des moyens de paiement
   ------------------------------------------------------------ */

.bii-pay-title {
	color: var(--bii-text);
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 20px;
}

.bii-notice-info {
	background: #eef8f7;
	border-left: 4px solid #25b3ab;
	color: #14615c;
}

.bii-pay-methods {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.bii-pay-method {
	background: #fff;
	border: 2px solid var(--bii-border);
	border-radius: var(--bii-radius);
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color .2s, box-shadow .2s;
}

.bii-pay-method--active {
	border-color: #25b3ab;
	box-shadow: 0 0 0 3px rgba(37, 179, 171, .15);
}

.bii-pay-method-head {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 16px 18px;
}

.bii-pay-method-head input[type="radio"] {
	accent-color: #25b3ab;
	flex: 0 0 auto;
	height: 18px;
	margin: 0;
	width: 18px;
}

.bii-pay-method-icon {
	display: block;
	flex: 0 0 auto;
	height: 28px;
	max-width: 80px;
	object-fit: contain;
	width: auto;
}

.bii-pay-method-title {
	color: var(--bii-text);
	font-size: 1rem;
	font-weight: 700;
}

.bii-pay-method-panel {
	border-top: 1px solid var(--bii-border);
	padding: 18px;
}

.bii-pay-method-panel[hidden] {
	display: none;
}

.bii-pay-method-desc {
	color: var(--bii-muted);
	font-size: .88rem;
	margin: 0 0 14px;
}

/* Champs génériques des passerelles */
.bii-pay-field {
	margin: 0 0 14px;
}

.bii-pay-field label {
	color: var(--bii-text);
	display: block;
	font-size: .88rem;
	font-weight: 600;
	margin-bottom: 6px;
}

.bii-pay-field input {
	background: #fff;
	border: 1px solid var(--bii-border);
	border-radius: 6px;
	box-sizing: border-box;
	font-size: .95rem;
	padding: 11px 13px;
	width: 100%;
}

.bii-pay-field input:focus {
	border-color: #25b3ab;
	box-shadow: 0 0 0 3px rgba(37, 179, 171, .15);
	outline: none;
}

.bii-pay-hint {
	color: var(--bii-muted);
	display: block;
	font-size: .78rem;
	margin-top: 5px;
}

.bii-pay-error {
	color: #a94442;
	font-size: .9rem;
	margin: 0;
}

.bii-required {
	color: var(--bii-accent);
}

/* Bouton de soumission */
.bii-pay-submit {
	background: #25b3ab;
	border: none;
	border-radius: var(--bii-radius);
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	padding: 16px 36px;
	transition: background .2s, transform .1s;
	width: 100%;
}

.bii-pay-submit:hover {
	background: #1e968f;
	transform: translateY(-1px);
}

.bii-pay-submit:active {
	transform: translateY(0);
}

.bii-pay-submit:disabled,
.bii-pay-submit.bii-btn-loading {
	cursor: progress;
	opacity: .6;
	transform: none;
}

.bii-pay-legal {
	color: var(--bii-muted);
	font-size: .8rem;
	margin: 12px 0 0;
	text-align: center;
}

/* ------------------------------------------------------------
   Vanilla Pay — choix du mode
   ------------------------------------------------------------ */

.bii-vpi-modes {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bii-vpi-mode {
	align-items: flex-start;
	background: var(--bii-bg);
	border: 2px solid var(--bii-border);
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 13px 15px;
	transition: border-color .2s, background .2s;
}

.bii-vpi-mode:hover {
	border-color: #25b3ab;
}

.bii-vpi-mode input[type="radio"] {
	accent-color: #25b3ab;
	flex: 0 0 auto;
	margin: 2px 0 0;
}

.bii-vpi-mode-body {
	display: block;
}

.bii-vpi-mode-body strong {
	color: var(--bii-text);
	display: block;
	font-size: .95rem;
}

.bii-vpi-mode-hint {
	color: var(--bii-muted);
	display: block;
	font-size: .8rem;
	margin-top: 3px;
}

.bii-vpi-secure {
	color: var(--bii-muted);
	font-size: .8rem;
	margin: 12px 0 0;
	text-align: center;
}

/* ------------------------------------------------------------
   Mobile Money — parcours en 3 étapes
   ------------------------------------------------------------ */

.bii-mm-fields {
	border: none;
	margin: 0;
	padding: 0;
}

.bii-mm-logos {
	margin-bottom: 16px;
	text-align: center;
}

.bii-mm-logos img {
	height: auto;
	max-width: 100%;
}

.bii-mm-amount,
.bii-mm-phone {
	align-items: center;
	background: #fff8f0;
	border: 1px solid #f5d9bd;
	border-radius: 6px;
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
	padding: 12px 14px;
}

.bii-mm-amount-icon,
.bii-mm-phone-icon {
	font-size: 1.4rem;
	line-height: 1;
}

.bii-mm-amount-label,
.bii-mm-phone-label {
	color: var(--bii-muted);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.bii-mm-amount-value,
.bii-mm-phone-value {
	color: #d35400;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: .5px;
}

.bii-mm-phone-value {
	cursor: pointer;
}

.bii-mm-step {
	margin-bottom: 20px;
}

.bii-mm-step-header {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.bii-mm-step-num {
	align-items: center;
	background: #e67e22;
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: .85rem;
	font-weight: 800;
	height: 26px;
	justify-content: center;
	width: 26px;
}

.bii-mm-step-title {
	color: var(--bii-text);
	font-size: .95rem;
	font-weight: 700;
}

.bii-mm-step-body {
	padding-left: 36px;
}

.bii-mm-op-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bii-mm-op-card {
	align-items: center;
	background: #fff;
	border: 2px solid #dee2e6;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	min-width: 110px;
	padding: 14px 18px;
	text-align: center;
	transition: border-color .2s, background .2s, box-shadow .2s;
}

.bii-mm-op-card:hover {
	border-color: #e67e22;
}

/* Le radio est piloté par la carte. */
.bii-mm-op-card input[type="radio"] {
	height: 0;
	opacity: 0;
	position: absolute;
	width: 0;
}

.bii-mm-op-selected {
	background: #fff8f0;
	border-color: #e67e22;
	box-shadow: 0 0 0 3px rgba(230, 126, 34, .15);
}

.bii-mm-op-icon {
	font-size: 1.6rem;
	line-height: 1;
}

.bii-mm-op-name {
	color: var(--bii-text);
	font-size: .88rem;
	font-weight: 700;
}

.bii-mm-instruction {
	color: var(--bii-text);
	font-size: .88rem;
	line-height: 1.6;
}

.bii-mm-instruction:empty {
	display: none;
}

.bii-mm-notice {
	background: var(--bii-bg);
	border-radius: 6px;
	color: var(--bii-muted);
	font-size: .82rem;
	line-height: 1.6;
	margin: 0;
	padding: 12px 14px;
}

/* ============================================================
   Responsive
   ============================================================ */

@media ( max-width: 768px ) {
	.bii-pay-layout-wrapper {
		flex-direction: column;
	}
	.bii-pay-donor-info-col {
		flex: none;
		width: 100%;
	}
	.bii-mm-step-body {
		padding-left: 0;
	}
	.bii-mm-op-card {
		flex: 1 1 calc(50% - 5px);
		min-width: 0;
		padding: 12px 10px;
	}

	.bii-form-layout {
		flex-direction: column;
	}
	.bii-form-layout-left {
		flex: none;
		max-width: 320px;
		margin: 0 auto;
		width: 100%;
	}
	.bii-form-layout-right {
		width: 100%;
	}
}

@media ( max-width: 600px ) {
	.bii-donation-progress {
		padding: 20px;
	}

	.bii-progress-track {
		height: 20px;
	}

	.bii-progress-current-wrap {
		gap: 4px;
	}

	.bii-progress-indicator {
		border-left-width: 10px;
		border-right-width: 10px;
		border-bottom-width: 18px;
	}

	.bii-progress-summary {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
		margin-top: 18px;
		min-height: 0;
	}

	.bii-progress-summary-spacer {
		display: none;
	}

	.bii-donation-cards {
		flex-direction: column;
		align-items: center;
	}

	.bii-donation-card {
		max-width: 100%;
		width: 100%;
	}

	.bii-donation-summary {
		flex-direction: column;
		text-align: center;
	}

	.bii-summary-amount {
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,.3);
		padding-right: 0;
		padding-bottom: 16px;
		width: 100%;
	}

	.bii-donation-form-wrap {
		padding: 20px;
	}

	.bii-step-title {
		font-size: 1.2rem;
	}

	.bii-cycle-option {
		font-size: 1.25rem;
		padding: 10px;
	}

	.bii-donors-list {
		padding: 18px 16px;
	}

	.bii-donors-list-title {
		font-size: 1.45rem;
	}

	.bii-donors-search {
		min-width: 100%;
		width: 100%;
	}

	.bii-donors-toolbar {
		width: 100%;
	}

	.bii-donors-filter-btn,
	.bii-donors-primary-btn {
		flex: 1 1 auto;
	}

	.bii-donors-pager {
		justify-content: center;
	}
}

/* ═══════════════════════════════════════════════════════════
   Flux de don en 3 étapes séparées
   ═══════════════════════════════════════════════════════════ */

.bii-step-container {
	max-width: 640px;
	margin: 0 auto;
	padding: 8px 0 24px;
}

.bii-step-header {
	text-align: center;
	margin-bottom: 28px;
}

.bii-step-header h2 {
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 700;
	color: #25b3ab;
}

.bii-step-header h3 {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	color: #0d3b2e;
}

.bii-step-description {
	margin: 0;
	font-size: 15px;
	color: #666;
}

.bii-step-content {
	margin-bottom: 28px;
}

.bii-step-card {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: 28px 24px;
	text-align: center;
}

.bii-card-icon img {
	width: 88px;
	height: 88px;
	object-fit: contain;
	margin-bottom: 18px;
}

.bii-quantity-section {
	margin-bottom: 20px;
}

.bii-quantity-title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: #0d3b2e;
}

.bii-step-total {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid #f0f0f0;
}

.bii-step-total-label {
	margin: 0 0 4px;
	font-size: 13px;
	color: #888;
}

.bii-step-total-value {
	margin: 0;
	font-size: 30px;
	font-weight: 900;
	color: #25b3ab;
	line-height: 1.1;
}

/* Résumé (étape 3) */
.bii-summary-block {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	overflow: hidden;
}

.bii-summary-title {
	margin: 0;
	padding: 14px 20px;
	background: #0d3b2e;
	color: #FFC629;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.bii-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 20px;
	border-bottom: 1px solid #f0f0f0;
}

.bii-summary-row:last-child {
	border-bottom: 0;
}

.bii-summary-row:nth-child(even) {
	background: #f9f9f7;
}

.bii-summary-label {
	font-size: 13px;
	color: #888;
	font-weight: 600;
}

.bii-summary-value {
	font-size: 14px;
	color: #1a1a1a;
	text-align: right;
	word-break: break-word;
}

/* Actions */
.bii-step-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.bii-step-actions .bii-btn-proceed {
	margin-left: auto;
}

.bii-btn-large {
	padding: 15px 32px;
	font-size: 15px;
}

.bii-btn-back {
	display: inline-block;
	padding: 13px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #0d3b2e;
	text-decoration: none;
	border: 1px solid #d5d5d5;
	border-radius: 6px;
	background: #fff;
}

.bii-btn-back:hover {
	background: #f5f5f3;
	border-color: #0d3b2e;
}

.bii-step-container .bii-secure-note {
	margin: 14px 0 0;
	text-align: center;
	font-size: 12px;
	color: #aaa;
}

/* Mobile */
@media (max-width: 640px) {
	.bii-step-header h3 {
		font-size: 22px;
	}

	.bii-step-total-value {
		font-size: 26px;
	}

	.bii-step-actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.bii-step-actions .bii-btn-proceed,
	.bii-step-actions .bii-btn-back {
		width: 100%;
		margin-left: 0;
		text-align: center;
	}

	.bii-summary-row {
		flex-direction: column;
		gap: 4px;
	}

	.bii-summary-value {
		text-align: left;
	}
}

/* Étape 1 : bouton aligné sur la largeur de la carte (design d'origine) */
.bii-form-wrap--step1 .bii-form-submit {
	margin: 0 auto;
	max-width: 320px;
}

.bii-form-wrap--step1 .bii-btn-proceed {
	width: 100%;
	justify-content: center;
}

/* Indicateur d'étape discret */
.bii-step-indicator {
	margin: 0 0 4px;
	text-align: center;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 700;
	color: #9aa0a6;
}

/* Champ montant (don libre) dans la carte */
.bii-step2-card .bii-input-group {
	justify-content: center;
}

.bii-step2-card .bii-field-hint,
.bii-step2-card .bii-field-message {
	margin-top: 10px;
	text-align: center;
}