/* =====================================================================
   INOVATECH — Paiement manuel MonCash / NatCash (paiement.php, paiement-statut.php)
   Chargé en complément de style.css.
   ===================================================================== */

:root {
    --moncash: #d40019;
    --moncash-dark: #8f0010;
    --natcash: #f47c20;
    --natcash-dark: #b24f00;
}

.pay-page .card-x { height: auto; }
.pay-page .card-x:has(form):hover, .pay-page .pay-card:hover { transform: none; }
.pay-card { padding: 1.6rem; }
.pay-num { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-right: .6rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: .95rem; font-weight: 700; vertical-align: middle; }
.summary-box .pay-num { background: #fff; color: var(--brand-700); }

/* ---------- Étapes ---------- */
.pay-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.75rem; counter-reset: none; }
.pay-steps li { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; font-size: .85rem; font-weight: 600; color: #5b6b82; position: relative; }
.pay-steps li span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #fff; border: 2px solid #d6deea; color: #5b6b82; font-weight: 700; z-index: 1; }
.pay-steps li:not(:last-child)::after { content: ""; position: absolute; top: 1.1rem; left: calc(50% + 1.3rem); right: calc(-50% + 1.3rem); height: 2px; background: #d6deea; }
.pay-steps li.is-current span, .pay-steps li.is-done span { background: var(--brand); border-color: var(--brand); color: #fff; }
.pay-steps li.is-current { color: var(--brand-700); }

/* ---------- Choix du moyen ---------- */
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.pay-method { position: relative; cursor: pointer; margin: 0; }
.pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.pay-method-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 130px; padding: 1rem; border: 2px solid #dfe6f0; border-radius: 16px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.pay-method-body img { width: 180px; max-width: 100%; height: auto; }
.pay-method-body strong { font-size: 1rem; color: #0a1f44; }
.pay-method:hover .pay-method-body { transform: translateY(-2px); }
.pay-method input:focus-visible + .pay-method-body { outline: 3px solid var(--brand); outline-offset: 2px; }
.pay-method-moncash input:checked + .pay-method-body { border-color: var(--moncash); box-shadow: 0 8px 24px rgba(212, 0, 25, .18); }
.pay-method-natcash input:checked + .pay-method-body { border-color: var(--natcash); box-shadow: 0 8px 24px rgba(244, 124, 32, .22); }
.pay-natcash-logo { display: inline-flex; align-items: center; height: 60px; padding: 0 1.4rem; border-radius: 14px; background: linear-gradient(135deg, var(--natcash), var(--natcash-dark)); color: #fff; font-family: var(--font-head, Poppins, sans-serif); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.pay-natcash-logo b { font-weight: 800; margin-left: .1rem; }

/* ---------- Compte de dépôt ---------- */
.pay-account { border-radius: 16px; overflow: hidden; border: 1px solid #e3e9f2; }
.pay-account-head { padding: .75rem 1.1rem; color: #fff; font-weight: 700; letter-spacing: .02em; }
.pay-account-moncash { background: linear-gradient(135deg, var(--moncash), var(--moncash-dark)); }
.pay-account-natcash { background: linear-gradient(135deg, var(--natcash), var(--natcash-dark)); }
.pay-account-body { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: .55rem 1rem; margin: 0; padding: 1.1rem; background: #fff; }
.pay-account-body dt { color: #5b6b82; font-weight: 500; }
.pay-account-body dd { margin: 0; overflow-wrap: anywhere; }
.pay-instructions { padding: .9rem 1.1rem; background: #f4f7fb; font-size: .92rem; color: #33445c; }

/* ---------- Preuve ---------- */
.pay-proof-preview img { display: block; max-width: 100%; max-height: 240px; border-radius: 12px; border: 1px solid #dfe6f0; object-fit: contain; background: #f6f8fb; }
.pay-proof-preview img[hidden] { display: none; }
.pay-proof-pdf { display: inline-flex; align-items: center; padding: .5rem .8rem; border-radius: 10px; background: #fdecec; color: #a01818; font-weight: 600; font-size: .9rem; }
.pay-proof-pdf[hidden] { display: none; }

.pay-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; color: #dfe6f0; font-size: .92rem; }
.pay-checks i { color: #5ee2a0; margin-right: .5rem; }

/* ---------- Statut ---------- */
.card-x.pay-status { padding: 1.6rem; border-top: 5px solid #f0ad4e; }
.card-x.pay-status-approved { border-top-color: #12b76a; }
.card-x.pay-status-rejected { border-top-color: #dc3545; }
.pay-status-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.pay-status-head > i { font-size: 2.2rem; color: #f0ad4e; }
.pay-status-approved .pay-status-head > i { color: #12b76a; }
.pay-status-rejected .pay-status-head > i { color: #dc3545; }
.pay-status-reason { padding: .8rem 1rem; margin-bottom: 1rem; border-radius: 12px; background: #fdecec; color: #8a1320; }
.pay-status-body { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: .45rem 1rem; margin: 0 0 1rem; }
.pay-status-body dt { color: #5b6b82; font-weight: 500; }
.pay-status-body dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
    .pay-card, .pay-status { padding: 1.15rem; }
    .pay-steps li { font-size: .72rem; }
    .pay-account-body, .pay-status-body { grid-template-columns: 1fr; gap: .15rem; }
    .pay-account-body dd, .pay-status-body dd { margin-bottom: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pay-method-body { transition: none; }
}
/* Logos MonCash / NatCash dans les cartes de choix (badges, voir style.css) */
.pay-method-body .pay-badge img { width: auto; }