/* Paiements Mobile Money — modal unifiée (2026-05-31). Design trustworthy : header
   orange brandé, coins arrondis, ombres, code USSD lisible, badges confiance. */

.evpay-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: flex-end; justify-content: center;
  font-family: Nunito, system-ui, sans-serif;
}
@media (min-width: 560px) { .evpay-modal { align-items: center; } }

.evpay-backdrop { position: absolute; inset: 0; background: rgba(15, 12, 25, .62); backdrop-filter: blur(2px); }

.evpay-sheet {
  position: relative; width: 100%; max-width: 460px; max-height: 92vh;
  background: #fff; border-radius: 22px 22px 0 0; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .35);
  animation: evpay-up .26s cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 560px) { .evpay-sheet { border-radius: 22px; } }
@keyframes evpay-up { from { transform: translateY(28px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }

/* Header orange brandé */
.evpay-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; color: #fff;
  background: linear-gradient(135deg, #FF7A18 0%, #6750A4 60%, #F25C00 100%);
}
.evpay-brand { display: flex; align-items: center; gap: 11px; }
.evpay-logo {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); font-weight: 900; font-size: 20px; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
}
.evpay-brand-name { font-weight: 900; font-size: 17px; line-height: 1; }
.evpay-brand-tag { font-size: 11.5px; font-weight: 700; opacity: .95; margin-top: 3px; }
.evpay-brand-tag i { margin-right: 3px; }
.evpay-close {
  appearance: none; border: none; background: rgba(255, 255, 255, .18); color: #fff;
  width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer;
}
.evpay-close:active { background: rgba(255, 255, 255, .3); }

.evpay-body { padding: 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Récap produit */
.evpay-recap {
  display: flex; align-items: center; gap: 13px;
  background: linear-gradient(135deg, #FFF6EC, #FFEAD6);
  border: 1px solid #FFD8B0; border-radius: 16px; padding: 14px 16px; margin-bottom: 18px;
}
.evpay-recap-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center;
  background: #6750A4; color: #fff; font-size: 19px;
}
.evpay-recap-main { flex: 1 1 auto; min-width: 0; }
.evpay-recap-label { font-weight: 800; font-size: 15.5px; color: #1C1C2E; }
.evpay-recap-sub { font-size: 12.5px; color: #8A6A45; font-weight: 700; margin-top: 2px; }
.evpay-recap-amount { font-weight: 900; font-size: 19px; color: #F25C00; white-space: nowrap; }

.evpay-section-title { font-weight: 800; font-size: 14px; color: #1C1C2E; margin: 4px 0 11px; }
.evpay-prov-tag {
  font-size: 11px; font-weight: 800; color: #F25C00; background: #FFEAD6;
  padding: 2px 8px; border-radius: 999px; margin-left: 6px;
}

/* Opérateurs */
.evpay-ops { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.evpay-op {
  appearance: none; border: 2px solid #E6E3EC; background: #fff; color: #1C1C2E;
  font-family: inherit; font-weight: 800; font-size: 13.5px; padding: 10px 14px; border-radius: 13px;
  cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all .15s;
}
.evpay-op-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--op-color, #6750A4); flex: 0 0 auto; }
.evpay-op.active { border-color: var(--op-color, #6750A4); background: var(--op-color, #6750A4); color: var(--op-text, #fff); box-shadow: 0 4px 14px rgba(103, 80, 164, .25); }
.evpay-op.active .evpay-op-dot { background: rgba(255, 255, 255, .85); }

/* Numéro récepteur + code */
.evpay-receiver { font-size: 13px; color: #4A4658; margin-bottom: 9px; }
.evpay-receiver strong { color: #1C1C2E; letter-spacing: .5px; }
.evpay-code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 20px; font-weight: 700; letter-spacing: .5px; color: #1C1C2E; text-align: center;
  background: #F4F2F8; border: 2px dashed #C9C3D6; border-radius: 14px;
  padding: 15px 12px; word-break: break-all; user-select: all; -webkit-user-select: all;
}
.evpay-code-actions { display: flex; gap: 9px; margin-top: 11px; }
.evpay-code-actions .evpay-btn { flex: 1 1 0; }

.evpay-hint { font-size: 12px; color: #6B6B7A; margin: 12px 0; line-height: 1.45; }
.evpay-hint i { color: #6750A4; margin-right: 4px; }

.evpay-secret {
  font-size: 12.5px; color: #7A3E00; background: #FFF4E6; border: 1px solid #FFD8B0;
  border-radius: 12px; padding: 11px 13px; margin: 14px 0; line-height: 1.5;
}
.evpay-secret i { color: #E08600; margin-right: 5px; }

/* Boutons */
.evpay-btn {
  appearance: none; border: none; font-family: inherit; font-weight: 800; font-size: 14px;
  padding: 12px 16px; border-radius: 13px; cursor: pointer; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none;
}
.evpay-btn-copy { background: #1C1C2E; color: #fff; }
.evpay-btn-copy.copied { background: #10B981; }
.evpay-btn-dial { background: #EDEAF3; color: #1C1C2E; }
.evpay-btn-primary { width: 100%; background: linear-gradient(135deg, #FF7A18, #F25C00); color: #fff; margin-top: 6px; box-shadow: 0 6px 18px rgba(242, 92, 0, .3); }
.evpay-btn-primary:disabled { opacity: .55; box-shadow: none; }
.evpay-btn-ghost { background: transparent; color: #6B6B7A; border: 1.5px solid #D9D5E2; }
.evpay-next { margin-top: 18px; }

.evpay-actions-row { display: flex; gap: 10px; margin-top: 16px; }
.evpay-actions-row .evpay-btn-ghost { flex: 0 0 auto; }
.evpay-actions-row .evpay-btn-primary { flex: 1 1 auto; margin-top: 0; }

/* Upload */
.evpay-upload { display: block; cursor: pointer; }
.evpay-upload-inner {
  border: 2px dashed #C9C3D6; border-radius: 16px; background: #FAF9FC;
  min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: #8A8696; font-weight: 700; font-size: 13.5px; overflow: hidden; position: relative;
}
.evpay-upload-inner i { font-size: 30px; color: #6750A4; }
.evpay-preview { width: 100%; max-height: 230px; object-fit: contain; border-radius: 12px; }
.evpay-change { position: absolute; bottom: 8px; right: 10px; background: rgba(28,28,46,.82); color: #fff; font-size: 11.5px; padding: 4px 11px; border-radius: 999px; }

.evpay-error { color: #DC2626; font-size: 12.5px; font-weight: 700; min-height: 16px; margin: 8px 0 0; }
.evpay-warn {
  font-size: 13px; color: #92400E; background: #FEF3C7; border: 1px solid #FCD34D;
  border-radius: 12px; padding: 13px 15px; line-height: 1.5; margin: 4px 0 14px;
}
.evpay-warn i { margin-right: 5px; }
.evpay-loading { text-align: center; color: #8A8696; font-weight: 700; padding: 30px 0; }
.evpay-loading i { color: #6750A4; margin-right: 6px; }

/* Section "Recharger des Tsiky" (page forfaits) */
.topup-section { margin: 26px 0 10px; }
.topup-title { font-size: 18px; font-weight: 900; color: #1C1C2E; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.topup-title i { color: #F5B027; }
.topup-sub { font-size: 13px; color: #6B6B7A; margin: 0 0 14px; }
.topup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.topup-pack {
  appearance: none; border: 1.5px solid #FFD8B0; border-radius: 16px; cursor: pointer; text-align: left;
  background: linear-gradient(150deg, #FFFDF8, #FFF3E2); padding: 14px; font-family: inherit;
  display: flex; flex-direction: column; gap: 4px; transition: transform .12s, box-shadow .12s;
}
.topup-pack:active { transform: scale(.98); }
.topup-pack:hover { box-shadow: 0 6px 18px rgba(245, 176, 39, .22); }
.topup-pack-tsiky { font-weight: 900; font-size: 15px; color: #1C1C2E; }
.topup-pack-tsiky i { color: #F5B027; margin-right: 3px; }
.topup-bonus { font-size: 11px; font-weight: 800; color: #fff; background: #10B981; padding: 1px 7px; border-radius: 999px; margin-left: 3px; }
.topup-pack-price { font-weight: 800; font-size: 14px; color: #F25C00; }
.topup-pack-label { font-size: 12px; color: #8A6A45; font-weight: 700; }

/* Confirmation */
.evpay-done { text-align: center; padding: 14px 4px 6px; }
.evpay-done-icon { font-size: 60px; color: #10B981; margin-bottom: 6px; }
.evpay-done h2 { font-size: 21px; font-weight: 900; color: #1C1C2E; margin: 4px 0 8px; }
.evpay-done p { font-size: 13.5px; color: #5A5668; line-height: 1.5; margin: 0 0 10px; }
.evpay-done-recap { font-size: 14px; color: #1C1C2E; background: #F4F2F8; border-radius: 11px; padding: 10px; margin: 12px 0; }
.evpay-done-sub { font-size: 12px; color: #8A8696; }