/* QUINCA+ v41 — boutons moyens de paiement colorés et iconés */

.payment-grid-v41{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.pay-method-v41{
  position:relative;
  min-height:58px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 18px;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:1px solid #dce6f0;
  border-radius:11px;
  background:#fff;
  color:#17304d;
  text-align:left;
  cursor:pointer;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background-color .15s ease;
}

.pay-method-v41:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 15px rgba(28,63,101,.08);
}

.payment-icon-v41{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:9px;
  flex:0 0 36px;
}

.payment-icon-v41 svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.payment-brand-v41{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  font-size:10px;
  font-weight:950;
  letter-spacing:-.04em;
}

.wave-mark-v41{
  font-size:16px;
  font-style:italic;
}

.orange-mark-v41{
  font-size:10px;
}

.mtn-mark-v41{
  font-size:8px;
  letter-spacing:-.02em;
}

.payment-copy-v41{
  min-width:0;
}

.payment-copy-v41 strong{
  display:block;
  font-size:10px;
  font-weight:900;
  line-height:1.1;
}

.payment-copy-v41 small{
  display:block;
  margin-top:3px;
  color:#8494a7;
  font-size:7.5px;
  font-weight:620;
  line-height:1.1;
}

.payment-check-v41{
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:transparent;
  color:transparent;
  font-size:9px;
  font-weight:900;
  transition:.15s ease;
}

.pay-method-v41.active .payment-check-v41{
  color:#fff;
  background:#17304d;
}
.pay-method-v41.cash-v41.active .payment-check-v41{background:#0b8d4f}
.pay-method-v41.wave-v41.active .payment-check-v41{background:#078acb}
.pay-method-v41.orange-v41.active .payment-check-v41{background:#ff7900}
.pay-method-v41.mtn-v41.active .payment-check-v41{background:#6e5a00}
.pay-method-v41.card-v41.active .payment-check-v41{background:#2f56bd}
.pay-method-v41.transfer-v41.active .payment-check-v41{background:#165fae}
.pay-method-v41.cheque-v41.active .payment-check-v41{background:#45576a}
.pay-method-v41.credit-v41.active .payment-check-v41{background:#bf3447}

/* Espèces */
.pay-method-v41.cash-v41 .payment-icon-v41{
  background:#e7f8ee;
  color:#0b9e57;
}
.pay-method-v41.cash-v41.active{
  border-color:#54c98b;
  background:#f2fcf6;
  color:#0b8d4f;
}

/* Wave */
.pay-method-v41.wave-v41 .payment-icon-v41{
  background:#e7f6ff;
  color:#139fe6;
}
.pay-method-v41.wave-v41.active{
  border-color:#55bced;
  background:#f1faff;
  color:#078acb;
}

/* Orange Money */
.pay-method-v41.orange-v41 .payment-icon-v41{
  background:#ff7900;
  color:#fff;
}
.pay-method-v41.orange-v41.active{
  border-color:#ff7900;
  background:#fff5eb;
  color:#d86400;
}

/* MTN Money */
.pay-method-v41.mtn-v41 .payment-icon-v41{
  background:#ffcb05;
  color:#151515;
}
.pay-method-v41.mtn-v41.active{
  border-color:#d9b100;
  background:#fff9df;
  color:#6e5a00;
}

/* Carte */
.pay-method-v41.card-v41 .payment-icon-v41{
  background:#e9f0ff;
  color:#315fd7;
}
.pay-method-v41.card-v41.active{
  border-color:#7596ec;
  background:#f2f5ff;
  color:#2f56bd;
}

/* Virement */
.pay-method-v41.transfer-v41 .payment-icon-v41{
  background:#e8f1ff;
  color:#1671d5;
}
.pay-method-v41.transfer-v41.active{
  border-color:#68a1e6;
  background:#f2f7ff;
  color:#165fae;
}

/* Chèque */
.pay-method-v41.cheque-v41 .payment-icon-v41{
  background:#edf1f5;
  color:#56677b;
}
.pay-method-v41.cheque-v41.active{
  border-color:#9cacbc;
  background:#f7f9fb;
  color:#45576a;
}

/* Crédit */
.pay-method-v41.credit-v41 .payment-icon-v41{
  background:#fff0f2;
  color:#d64558;
}
.pay-method-v41.credit-v41.active{
  border-color:#e27b89;
  background:#fff5f6;
  color:#bf3447;
}

.pay-method-v41.active{
  box-shadow:0 0 0 2px rgba(35,107,176,.06),0 7px 16px rgba(24,57,92,.07);
}

body.dark-ui .pay-method-v41{
  background:#101d2f;
  border-color:#2a3c52;
  color:#e9f1fb;
}
body.dark-ui .payment-copy-v41 small{
  color:#93a5b8;
}
body.dark-ui .pay-method-v41:hover{
  border-color:#44617f;
  box-shadow:0 7px 16px rgba(0,0,0,.17);
}
body.dark-ui .pay-method-v41.cash-v41.active{background:#112a21}
body.dark-ui .pay-method-v41.wave-v41.active{background:#102637}
body.dark-ui .pay-method-v41.orange-v41.active{background:#2c2118}
body.dark-ui .pay-method-v41.mtn-v41.active{background:#2a2718}
body.dark-ui .pay-method-v41.card-v41.active{background:#19233a}
body.dark-ui .pay-method-v41.transfer-v41.active{background:#15283d}
body.dark-ui .pay-method-v41.cheque-v41.active{background:#202833}
body.dark-ui .pay-method-v41.credit-v41.active{background:#2e1d24}

@media(max-width:620px){
  .payment-grid-v41{
    grid-template-columns:1fr;
  }
  .pay-method-v41{
    min-height:54px;
  }
}