/*
 * Le choix des moyens de paiement d'un dossier.
 *
 * Le total estimé, la note d'information, les moyens de paiement (montant
 * indicatif, carte recommandée, remerciement, moyen bloqué par un choix
 * incompatible).
 *
 * Écrans : l'étape « Paiement » du tunnel et la page de règlement d'un
 * dossier, qui partagent ce choix ; le règlement groupé en grise un moyen.
 *
 * Sa place dans la cascade est fixée par cnpr_insc_feuilles_front()
 * (includes/front-tunnel-core.php) : toutes les feuilles du front se
 * chargent partout où l'extension s'affiche, dans cet ordre, avant le thème.
 */

/* --- Step 5: indicative multi-method payment plan ------------------------ */
.cnpr-insc-recap-total { margin: 0 0 14px; }

/* A lighter, informational notice (vs. the heavier green success block). */
.cnpr-insc-notice--info {
    background: color-mix(in srgb, var(--cnpr-couleur-accent, #009fe0) 10%, transparent);
    color: var(--cnpr-couleur-titre, #1e3f94);
    border: 1px solid color-mix(in srgb, var(--cnpr-couleur-accent, #009fe0) 30%, transparent);
}

.cnpr-insc-paymethods { border: 0; padding: 0; margin: 22px 0 14px; }
.cnpr-insc-paymethods > legend {
    font-weight: 700;
    color: var(--cnpr-couleur-texte, #16284f);
    padding: 0;
    margin: 0 0 10px;
}

.cnpr-insc-paymethod {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid rgba(16, 32, 53, 0.08);
    border-radius: 12px;
    margin: 0 0 8px;
    background: var(--cnpr-fond, #ffffff);
    box-shadow: 0 1px 2px rgba(16, 32, 53, 0.05);
    transition: border-color .3s cubic-bezier(0.32, 0.72, 0, 1),
        background .3s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow .3s cubic-bezier(0.32, 0.72, 0, 1);
}
/* Highlight a selected method (progressive enhancement; harmless if unsupported). */
.cnpr-insc-paymethod:has(input:checked) {
    border-color: var(--cnpr-couleur-lien, #0a6fb2);
    background: color-mix(in srgb, var(--cnpr-couleur-lien, #0a6fb2) 5%, transparent);
}
.cnpr-insc-paymethod .cnpr-insc-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

/* Indicative amount field, sitting on the right of each offline method. */
.cnpr-insc-payamount {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-insc-payamount input[type="number"] {
    width: 110px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--cnpr-filet, #d3eefb);
    background: var(--cnpr-fond, #ffffff);
    font-size: 15px;
    text-align: right;
    color: var(--cnpr-couleur-texte, #16284f);
}
.cnpr-insc-payamount input[type="number"]:focus {
    outline: none;
    border-color: var(--cnpr-couleur-lien, #0a6fb2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cnpr-couleur-lien, #0a6fb2) 15%, transparent);
}

/* Card row: a normal row that stacks its explanatory sub-notes underneath. */
.cnpr-insc-paymethod--cb { flex-direction: column; align-items: stretch; gap: 6px; }
.cnpr-insc-paymethod--cb .cnpr-insc-muted { display: block; margin: 0 0 0 30px; }

/* Recommended card (1x): NEUTRAL like the others (no accent border/fill/inset).
   The "--reco" class is kept purely as a marker for the badge + the non-muted
   thank-you text below; the "Recommandé" badge alone carries the emphasis. */
.cnpr-insc-paymethod--reco .cnpr-insc-muted {
    color: var(--cnpr-couleur-texte, #16284f); /* the CB thank-you note is NOT greyed out */
}
.cnpr-insc-reco-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--cnpr-couleur-titre, #1e3f94);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    vertical-align: middle;
}
/* Card thank-you panel — warm, accent-tinted, tied to the recommended card. */
.cnpr-insc .cnpr-insc-pay-thanks {
    background: color-mix(in srgb, var(--cnpr-couleur-titre, #1e3f94) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--cnpr-couleur-titre, #1e3f94) 20%, transparent);
    color: var(--cnpr-couleur-titre, #1e3f94);
    font-weight: 500;
    margin: 0 0 16px 30px;
}
.cnpr-insc-pay-installments { font-weight: 600; color: var(--cnpr-couleur-lien, #0a6fb2); }

/* Blocked by an incompatible choice (e.g. a card while chèque 3x is on). */
/* Dim the OFFER, never the explanation.
   `opacity` on the row would create a group no descendant can escape, so the
   sentence saying WHY the row is unavailable would render at 0.4 — roughly
   1.8:1 against white, well under the 4.5:1 that 13px text needs. The reason
   would be there and unreadable, which is worse than absent: it looks handled.
   Dimming the row's children individually, and skipping the two message
   elements, keeps the greyed-out look and leaves the message legible. */
.cnpr-insc-paymethod.--blocked > *:not(.cnpr-insc-pay-blocked):not(.cnpr-insc-sibling-reason) { opacity: 0.4; }
/* The card's own chrome has to recede WITH its contents. Dimming only the
   children left a crisp white card with a full border and shadow holding faint
   text — it still read as a normal, clickable option, and on touch there is no
   `cursor: not-allowed` to contradict that. Faded here through real colours
   rather than opacity, so the explanation above stays at full strength. */
.cnpr-insc-paymethod.--blocked {
    background: var(--cnpr-fond-doux, #eaf7fd);
    border-color: transparent;
    box-shadow: none;
}
.cnpr-insc-paymethod.--blocked .cnpr-insc-radio { cursor: not-allowed; }

/* Group règlement: the shared main-method option greyed live when a per-child
   appoint rules it out (mirrors the per-dossier --blocked visual). */
.cnpr-insc-groupe-principal .cnpr-insc-radio.--blocked { opacity: 0.4; cursor: not-allowed; }