/* =========================================================================
   BODEZIA — TUNNEL (transfert d'argent et recharge)
   -------------------------------------------------------------------------
   Réécriture complète. Tous les sélecteurs de l'ancien fichier sont
   conservés : aucune classe du HTML ne se retrouve sans style.

   Ce qui change
     - 6 tailles au lieu de 18, dans des variables
     - Gris conformes AA : #99a2a8 (2,57:1) et #7d878d (3,62:1) sortent
     - Le point de rupture passe de 767,98 à 991,98px, comme le reste du
       projet
     - Sur mobile, le panneau latéral passe SOUS le formulaire
     - Les raccourcis du panneau repassent sur une colonne : à 360px, deux
       colonnes tronquaient les quatre libellés
     - Le résumé porte un total à payer, visuellement dominant

   Les tokens --home-* viennent de home-page.css, avec valeur de repli.
   ========================================================================= */


/* =========================================================================
   TOKENS
   ========================================================================= */

:root {
    --flow-fs-title: 1.625rem;    /* 26px — titre de page      */
    --flow-fs-section: 1.0625rem; /* 17px — titre de section   */
    --flow-fs-total: 1.25rem;     /* 20px — total à payer      */
    --flow-fs-body: 0.9375rem;    /* 15px — texte courant      */
    --flow-fs-label: 0.875rem;    /* 14px — labels et sous-titres */
    --flow-fs-small: 0.8125rem;   /* 13px — mentions           */

    --flow-c-heading: var(--home-c-heading, #2b3034);
    --flow-c-body: var(--home-c-body, #5c6670);
    --flow-c-accent: var(--home-c-accent, #7441d4);
    --flow-c-accent-dark: #6533c1;
    --flow-c-accent-soft: #f3eefd;
    --flow-c-border: var(--home-c-border, #e6e9ee);
    --flow-c-surface: #f9fafc;
}


/* =========================================================================
   LAYOUT
   ========================================================================= */

.flow-card {
    background: #fff;

    border: 1px solid var(--flow-c-border);
    border-radius: 14px;

    box-shadow: 0 3px 12px rgba(30, 40, 50, 0.05);

    overflow: hidden;
}

.flow-dashboard-layout {
    align-items: flex-start;
}

/* Doublon volontaire de .flow-card : l'ancien fichier portait les deux,
   et d'autres pages du tunnel peuvent dépendre de la version préfixée. */
#money-transfer-flow .flow-card {
    background: #fff;

    border: 1px solid var(--flow-c-border);
    border-radius: 14px;

    box-shadow: 0 3px 12px rgba(30, 40, 50, 0.05);

    overflow: hidden;
}

/* Même largeur que les sections de la page d'accueil et que le footer */
#content:has(.flow-dashboard-layout) > .container {
    max-width: var(--home-container, 1180px);
}

#money-transfer-flow {
    min-width: 0;
}


/* =========================================================================
   EN-TÊTE DE PAGE
   ========================================================================= */

#money-transfer-flow .flow-page-header {
    margin-bottom: 20px;
}

#money-transfer-flow .flow-page-title {
    margin: 0;

    color: var(--flow-c-heading);

    font-size: var(--flow-fs-title);
    font-weight: 600;

    line-height: 1.25;
    letter-spacing: -0.01em;
}

#money-transfer-flow .flow-page-subtitle {
    margin: 6px 0 0;

    color: var(--flow-c-body);

    font-size: var(--flow-fs-body);
    line-height: 1.5;
}


/* =========================================================================
   SECTIONS
   ========================================================================= */

#money-transfer-flow .flow-section {
    border-bottom: 1px solid var(--flow-c-border);
}

#money-transfer-flow .flow-section:last-child {
    border-bottom: 0;
}

#money-transfer-flow .flow-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 22px 12px;
}

#money-transfer-flow .flow-section-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}

#money-transfer-flow .flow-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    color: var(--flow-c-accent);

    background: var(--flow-c-accent-soft);

    border-radius: 10px;

    font-size: 1rem;
}

#money-transfer-flow .flow-section-heading h2 {
    margin: 0;

    color: var(--flow-c-heading);

    font-size: var(--flow-fs-section);
    font-weight: 600;

    line-height: 1.35;
}

#money-transfer-flow .flow-section-heading p {
    margin: 2px 0 0;

    color: var(--flow-c-body);

    font-size: var(--flow-fs-label);
    line-height: 1.4;
}

#money-transfer-flow .flow-section-body {
    padding: 8px 22px 22px;
}


/* Lien d'action dans l'en-tête de section */

#money-transfer-flow .flow-section-action {
    flex: 0 0 auto;

    color: var(--flow-c-accent);

    font-size: var(--flow-fs-label);
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;
}

#money-transfer-flow .flow-section-action:hover {
    color: var(--flow-c-accent-dark);

    text-decoration: underline;
}


/* =========================================================================
   CHAMPS
   ========================================================================= */

#money-transfer-flow .flow-field-label {
    display: block;

    margin-bottom: 8px;

    color: var(--flow-c-body);

    font-size: var(--flow-fs-label);
    font-weight: 600;
}

#money-transfer-flow .flow-control {
    width: 100%;
    min-height: 50px;

    padding: 10px 14px;

    color: var(--flow-c-heading);

    background: #fff;

    border: 1px solid var(--flow-c-border);
    border-radius: 10px;

    font-size: var(--flow-fs-body);
}

#money-transfer-flow .flow-control:focus {
    border-color: var(--flow-c-accent);

    box-shadow: 0 0 0 1px var(--flow-c-accent);

    outline: 0;
}

#money-transfer-flow .flow-field-error {
    margin-top: 8px;

    color: #c62b39;

    font-size: var(--flow-fs-label);
    line-height: 1.4;
}


/* Listes déroulantes du tunnel */

#money-transfer-flow .bootstrap-select {
    width: 100% !important;
}

#money-transfer-flow .bootstrap-select > .dropdown-toggle {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 50px;

    padding: 10px 34px 10px 14px;

    color: var(--flow-c-heading);

    background: #fff;

    border: 1px solid var(--flow-c-border);
    border-radius: 10px;

    font-size: var(--flow-fs-body);
    font-weight: 500;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Le menu se cale sur la largeur du champ. Sans ça, bootstrap-select
   dimensionne sur l'option la plus longue et déborde des deux côtés. */

#money-transfer-flow .bootstrap-select {
    position: relative;
}

#money-transfer-flow .bootstrap-select > .dropdown-menu {
    /* Popper pose un transform: translate3d(13px, 61px, 0) en style en
       ligne, qui décalait le menu même une fois left/right à 0. Les
       selects portent data-display="static" pour le désactiver, et ces
       trois lignes couvrent le cas où il s'appliquerait quand même. */
    position: absolute !important;

    inset: auto !important;
    transform: none !important;

    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 6px;

    z-index: 1060;

    border: 1px solid var(--flow-c-border);
    border-radius: 12px;

    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

#money-transfer-flow .bootstrap-select > .dropdown-menu .inner {
    max-height: min(320px, 50vh) !important;

    overflow-x: hidden !important;
    overflow-y: auto;

    overscroll-behavior: contain;
}

#money-transfer-flow .bootstrap-select .dropdown-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

#money-transfer-flow .bootstrap-select .dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center;

    gap: 8px;

    min-height: 44px;
    padding: 8px 12px;

    border-radius: 8px;

    font-size: var(--flow-fs-body);
    line-height: 1.35;

    white-space: normal;
}

#money-transfer-flow .bootstrap-select .dropdown-menu .dropdown-item > .text {
    min-width: 0;
}

#money-transfer-flow .bootstrap-select .dropdown-menu .dropdown-item small {
    float: none !important;

    margin: 0 0 0 8px !important;
    padding: 0 !important;

    color: inherit;
    opacity: 0.8;

    font-size: var(--flow-fs-small) !important;
}

#money-transfer-flow .bootstrap-select .bs-searchbox .form-control {
    min-height: 44px;

    padding: 8px 12px !important;

    border: 1px solid var(--flow-c-border) !important;
    border-radius: 10px !important;

    font-size: 1rem;
}

#money-transfer-flow .bootstrap-select .bs-searchbox .form-control:focus {
    border-color: var(--flow-c-accent) !important;

    box-shadow: 0 0 0 1px var(--flow-c-accent) !important;
}

#money-transfer-flow .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--flow-c-accent) !important;

    box-shadow: 0 0 0 1px var(--flow-c-accent) !important;

    outline: 0 !important;
}


/* =========================================================================
   RAPPEL DU MODE DE RÉCEPTION
   Conservé pour les autres pages du tunnel : sur send-money.php,
   l'information a rejoint le résumé.
   ========================================================================= */

#money-transfer-flow .flow-method-card {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 14px 16px;

    background: var(--flow-c-surface);

    border: 1px solid var(--flow-c-border);
    border-radius: 12px;
}

#money-transfer-flow .flow-method-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    color: var(--flow-c-accent);

    background: var(--flow-c-accent-soft);

    border-radius: 10px;

    font-size: 1rem;
}

#money-transfer-flow .flow-method-content {
    min-width: 0;
}

#money-transfer-flow .flow-method-label {
    display: block;

    color: var(--flow-c-body);

    font-size: var(--flow-fs-small);
    font-weight: 600;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#money-transfer-flow .flow-method-content strong {
    display: block;

    margin-top: 3px;

    color: var(--flow-c-heading);

    font-size: var(--flow-fs-body);
    font-weight: 600;
}


/* =========================================================================
   CHOIX D'OPÉRATEUR
   ========================================================================= */

#money-transfer-flow .flow-option-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

#money-transfer-flow .flow-option-item {
    position: relative;

    min-width: 0;
}

#money-transfer-flow .flow-option-input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}

#money-transfer-flow .flow-option-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 118px;

    padding: 18px 14px;

    background: #fff;

    border: 1px solid var(--flow-c-border);
    border-radius: 12px;

    cursor: pointer;

    transition:
            border-color 0.15s ease,
            background-color 0.15s ease;
}

#money-transfer-flow .flow-option-card:hover {
    border-color: #cdbcef;
}

#money-transfer-flow .flow-option-radio {
    position: absolute;

    top: 12px;
    left: 12px;

    width: 18px;
    height: 18px;

    border: 2px solid #c8cfd5;
    border-radius: 50%;
}

#money-transfer-flow .flow-option-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 44px;
}

#money-transfer-flow .flow-option-logo img {
    max-width: 76px;
    max-height: 40px;

    object-fit: contain;
}

#money-transfer-flow .flow-option-logo i {
    color: var(--flow-c-accent);

    font-size: 1.4rem;
}

#money-transfer-flow .flow-option-card strong {
    color: var(--flow-c-heading);

    font-size: var(--flow-fs-label);
    font-weight: 600;

    text-align: center;
    line-height: 1.3;
}

#money-transfer-flow .flow-option-input:checked + .flow-option-card {
    background: #faf7ff;

    border-color: var(--flow-c-accent);
}

#money-transfer-flow
.flow-option-input:checked
+ .flow-option-card
.flow-option-radio {
    border-color: var(--flow-c-accent);

    box-shadow: inset 0 0 0 4px var(--flow-c-accent);
}

#money-transfer-flow .flow-option-input:focus-visible + .flow-option-card {
    outline: 2px solid var(--flow-c-accent);
    outline-offset: 2px;
}


/* =========================================================================
   RÉSUMÉ
   ========================================================================= */

#money-transfer-flow .flow-summary-section {
    background: #fff;
}

#money-transfer-flow .flow-main,
#money-transfer-flow.flow-main {
    min-width: 0;
}

#money-transfer-flow .flow-summary {
    margin: 4px 22px 0;

    border: 1px solid var(--flow-c-border);
    border-radius: 12px;

    overflow: hidden;
}

#money-transfer-flow .flow-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    min-height: 50px;

    padding: 11px 16px;

    border-bottom: 1px solid var(--flow-c-border);
}

#money-transfer-flow .flow-summary-row:last-child {
    border-bottom: 0;
}

#money-transfer-flow .flow-summary-row > span {
    color: var(--flow-c-body);

    font-size: var(--flow-fs-body);
}

#money-transfer-flow .flow-summary-row strong {
    color: var(--flow-c-heading);

    font-size: var(--flow-fs-body);
    font-weight: 600;

    text-align: right;

    /* Une valeur monétaire ne se coupe pas entre le nombre et la devise :
       « 525300 » sur une ligne et « GNF » sur la suivante est illisible. */
    white-space: nowrap;
}

#money-transfer-flow .flow-summary-amount {
    display: inline-flex;
    align-items: center;

    gap: 8px;
}

#money-transfer-flow .flow-summary-equal {
    margin: 0 4px;

    color: var(--flow-c-body);

    font-weight: 400;
}

#money-transfer-flow .flow-summary-payout strong {
    display: inline-flex;
    align-items: center;

    gap: 8px;
}

#money-transfer-flow .flow-summary-payout-icon {
    color: var(--flow-c-accent);

    font-size: var(--flow-fs-label);
}

/* Total à payer : c'est la ligne qui déclenche la décision */

#money-transfer-flow .flow-summary-total {
    min-height: 60px;

    background: var(--flow-c-surface);

    border-top: 1px solid var(--flow-c-border);
}

#money-transfer-flow .flow-summary-total > span {
    color: var(--flow-c-heading);

    font-size: var(--flow-fs-body);
    font-weight: 600;
}

#money-transfer-flow .flow-summary-total strong {
    color: var(--flow-c-heading);

    font-size: var(--flow-fs-total);
    font-weight: 700;

    letter-spacing: -0.01em;
}


/* =========================================================================
   VALIDATION
   ========================================================================= */

#money-transfer-flow .flow-submit-row {
    display: flex;
    justify-content: flex-end;

    padding: 20px 22px 22px;
}

#money-transfer-flow .flow-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;
    padding: 12px 28px;

    border-radius: 999px;

    font-size: var(--flow-fs-body);
    font-weight: 600;
}


/* =========================================================================
   BOUTON « NOUVEAU BÉNÉFICIAIRE »
   ========================================================================= */

#money-transfer-beneficiary .flow-beneficiary-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-height: 44px;
    padding: 10px 20px;

    border-radius: 999px;

    font-size: var(--flow-fs-label);
    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================================
   PANNEAU LATÉRAL
   ========================================================================= */

#flow-sidebar {
    flex: 0 0 260px;
}

#flow-sidebar .flow-sidebar-profile {
    padding: 24px 20px;

    text-align: center;
}

#flow-sidebar .flow-sidebar-avatar {
    margin-left: auto;
    margin-right: auto;
}

#flow-sidebar .flow-sidebar-profile-name {
    margin-top: 14px;

    color: var(--flow-c-heading);

    font-size: var(--flow-fs-section);
    font-weight: 600;
}

#flow-sidebar .flow-sidebar-profile-label {
    margin-top: 4px;

    color: var(--flow-c-body);

    font-size: var(--flow-fs-label);
}

#flow-sidebar .flow-sidebar-actions {
    overflow: hidden;
}

#flow-sidebar .flow-sidebar-identity {
    width: calc(100% - 28px);
    min-height: 48px;

    margin: 14px;

    border-radius: 999px;

    font-size: var(--flow-fs-body);
    font-weight: 600;
}


/* Raccourcis */

#flow-sidebar .flow-sidebar-navigation {
    display: block;

    width: 100%;
}

#flow-sidebar .flow-sidebar-link {
    position: relative;

    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        18px;

    align-items: center;

    gap: 12px;

    min-height: 68px;

    padding: 13px 16px;

    color: var(--flow-c-heading);

    text-decoration: none;

    border-top: 1px solid var(--flow-c-border);
}

#flow-sidebar .flow-sidebar-link:hover {
    background: #faf9fe;
}

#flow-sidebar .flow-sidebar-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: var(--flow-c-accent);

    background: var(--flow-c-accent-soft);

    border-radius: 10px;

    font-size: var(--flow-fs-body);
}

#flow-sidebar .flow-sidebar-link-content {
    min-width: 0;
}

#flow-sidebar .flow-sidebar-link-content strong {
    display: block;

    color: var(--flow-c-heading);

    font-size: var(--flow-fs-label);
    font-weight: 600;

    line-height: 1.3;
}

#flow-sidebar .flow-sidebar-link-content small {
    display: block;

    margin-top: 2px;

    color: var(--flow-c-body);

    font-size: var(--flow-fs-small);
    line-height: 1.3;
}

#flow-sidebar .flow-sidebar-link-arrow {
    color: #b9c1c8;

    font-size: var(--flow-fs-small);
}

#flow-sidebar .flow-sidebar-link.is-active {
    background: rgba(116, 65, 212, 0.055);

    box-shadow: inset 3px 0 0 var(--flow-c-accent);
}

#flow-sidebar .flow-sidebar-link.is-active .flow-sidebar-link-arrow {
    color: var(--flow-c-accent);
}

#flow-sidebar .flow-sidebar-link + .flow-sidebar-link {
    border-left: 0;
}


/* =========================================================================
   TABLETTE ET MOBILE  (< 992px)
   Le point de rupture s'aligne sur le reste du projet. L'ancien 767,98px
   laissait, entre 768 et 991px, une barre de 230px collée au formulaire.
   ========================================================================= */

@media (max-width: 991.98px) {

    /* Le formulaire passe AVANT le panneau : il n'y a aucune raison de
       faire défiler 200px de raccourcis pour atteindre le premier champ. */
    .flow-dashboard-layout {
        display: flex;
        flex-direction: column;
    }

    #money-transfer-flow {
        order: 1;
    }

    #flow-sidebar {
        order: 2;

        width: 100%;

        margin-top: 20px;
        margin-bottom: 0;
    }

    /* Le profil est déjà dans l'en-tête mobile */
    #flow-sidebar .flow-sidebar-profile {
        display: none;
    }

    #flow-sidebar .flow-sidebar-actions {
        margin-bottom: 0 !important;

        border-radius: 12px;
    }

    #money-transfer-flow .flow-option-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================================
   MOBILE  (< 576px)
   ========================================================================= */

@media (max-width: 575.98px) {

    :root {
        --flow-fs-title: 1.375rem;   /* 22px */
        --flow-fs-section: 1rem;     /* 16px */
        --flow-fs-total: 1.1875rem;  /* 19px */
    }

    #money-transfer-flow .flow-page-header {
        margin-bottom: 14px;
    }

    #money-transfer-flow .flow-section-header {
        align-items: flex-start;

        gap: 12px;

        padding: 16px 16px 10px;
    }

    #money-transfer-flow .flow-section-icon {
        width: 36px;
        height: 36px;

        border-radius: 9px;

        font-size: 0.9rem;
    }

    #money-transfer-flow .flow-section-body {
        padding: 6px 16px 18px;
    }

    #money-transfer-flow .flow-summary {
        margin: 3px 16px 0;
    }

    #money-transfer-flow .flow-summary-row {
        gap: 14px;

        padding: 10px 14px;
    }

    #money-transfer-flow .flow-submit-row {
        padding: 16px;
    }

    #money-transfer-flow .flow-submit-button {
        width: 100%;
        min-height: 52px;
    }

    /* Le bouton reste une action secondaire : pleine largeur en violet, il
       dominait le champ auquel il se rapporte. */
    #money-transfer-beneficiary .flow-section-header {
        align-items: stretch;
        flex-direction: column;
    }

    #money-transfer-beneficiary .flow-section-heading {
        width: 100%;
    }

    #money-transfer-beneficiary .flow-beneficiary-add-btn {
        align-self: flex-start;

        /* .beneficiaries-add-btn est partagée avec la page bénéficiaires
           et y impose une pleine largeur. */
        width: auto !important;

        min-height: 40px;
        margin-top: 10px;
        padding: 8px 16px;

        color: var(--flow-c-accent) !important;

        background: var(--flow-c-accent-soft) !important;
        border-color: transparent !important;

        font-size: var(--flow-fs-label);
    }

    /* Opérateurs : une colonne. À trois cartes sur deux colonnes, la
       troisième restait orpheline avec un vide à sa droite. */
    #money-transfer-flow .flow-option-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    #money-transfer-flow .flow-option-card {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;

        gap: 14px;

        min-height: 64px;

        padding: 12px 14px 12px 42px;
    }

    #money-transfer-flow .flow-option-radio {
        top: 50%;
        left: 14px;

        transform: translateY(-50%);
    }

    #money-transfer-flow .flow-option-logo {
        height: 34px;
    }

    #money-transfer-flow .flow-option-logo img {
        max-width: 60px;
        max-height: 30px;
    }

    #money-transfer-flow .flow-option-card strong {
        text-align: left;
    }

    /* Raccourcis du panneau : une colonne. Sur 360px, deux colonnes
       tronquaient les quatre libellés. */
    #flow-sidebar .flow-sidebar-navigation {
        display: block;

        padding: 0;
    }

    #flow-sidebar .flow-sidebar-link {
        grid-template-columns:
            36px
            minmax(0, 1fr)
            16px;

        gap: 12px;

        min-height: 62px;

        padding: 12px 16px;
    }

    #flow-sidebar .flow-sidebar-link-icon {
        width: 36px;
        height: 36px;

        border-radius: 9px;
    }

    #flow-sidebar .flow-sidebar-link-arrow {
        display: block;
    }

    #flow-sidebar .flow-sidebar-identity {
        width: calc(100% - 32px);
        min-height: 46px;

        margin: 16px;
    }
}


/* =========================================================================
   SURVOL
   ========================================================================= */

@media (hover: hover) {

    #money-transfer-flow .flow-option-card:hover {
        border-color: #cdbcef;
    }

    #flow-sidebar .flow-sidebar-link:hover {
        background: #faf9fe;
    }
}