/* ============================================================================
   Réinitialisation du mot de passe — Kheweul
   ----------------------------------------------------------------------------
   Les quatre écrans du parcours (adresse → question de sécurité → nouveau mot
   de passe → confirmation) n'existaient que dans le thème parent, en Bootstrap
   brut : une carte grise centrée, sans repère de progression, sans indication
   de ce qui est attendu du mot de passe.

   Cette feuille ne redéfinit PAS les contrôles de formulaire. Elle réutilise la
   coquille d'authentification déjà en place dans custom.css — .kw-login-wrapper,
   .kw-login-brand, .kw-login-form-panel, .kw-input, .kw-btn-login — pour que ces
   écrans soient les frères visuels de la connexion et de l'inscription, et pour
   hériter gratuitement de leurs variantes sombres.

   Elle n'ajoute que ce qui manquait : l'indicateur d'étapes, la liste des
   exigences du mot de passe qui se coche en direct, l'écran de confirmation,
   et le restylage de la jauge de force native de WHMCS.

   Préfixe .kw-pwr- pour éviter toute collision.
   ========================================================================== */

/* ── Panneau de marque : contenu propre au parcours ─────────────────────── */

.kw-pwr-brand-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
}

.kw-pwr-brand-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(232, 149, 72, .16);
    border: 1px solid rgba(232, 149, 72, .35);
    color: #E89548;
    font-size: 1.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
}

.kw-pwr-brand-title {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.5px;
    margin: 0 0 .75rem;
    color: #ffffff;
}

.kw-pwr-brand-sub {
    font-size: .975rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 2.5rem;
}

/* ── Indicateur d'étapes (vertical, panneau de marque) ──────────────────── */

.kw-pwr-steps {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
}

.kw-pwr-step {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    position: relative;
    padding-bottom: 1.6rem;
}

.kw-pwr-step:last-child {
    padding-bottom: 0;
}

/* Trait de liaison entre les pastilles. Il s'arrête au dernier élément. */
.kw-pwr-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 4px;
    width: 2px;
    background: rgba(148, 163, 184, .25);
    border-radius: 2px;
}

.kw-pwr-step.is-done:not(:last-child)::before {
    background: rgba(232, 149, 72, .55);
}

.kw-pwr-step-dot {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    background: rgba(148, 163, 184, .16);
    border: 1px solid rgba(148, 163, 184, .3);
    color: #94a3b8;
    position: relative;
    z-index: 1;
    transition: all .25s ease;
}

.kw-pwr-step-label {
    font-size: .925rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.5;
    padding-top: 3px;
    transition: color .25s ease;
}

/* Étape franchie */
.kw-pwr-step.is-done .kw-pwr-step-dot {
    background: rgba(232, 149, 72, .18);
    border-color: rgba(232, 149, 72, .5);
    color: #E89548;
}

.kw-pwr-step.is-done .kw-pwr-step-label {
    color: #cbd5e1;
}

/* Étape en cours */
.kw-pwr-step.is-current .kw-pwr-step-dot {
    background: #E89548;
    border-color: #E89548;
    color: #0f172a;
    box-shadow: 0 0 0 5px rgba(232, 149, 72, .18);
}

.kw-pwr-step.is-current .kw-pwr-step-label {
    color: #ffffff;
    font-weight: 600;
}

/* ── Garanties, en pied du panneau de marque ────────────────────────────── */

.kw-pwr-assurances {
    list-style: none;
    margin: 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(148, 163, 184, .18);
}

.kw-pwr-assurances li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .85rem;
    line-height: 1.55;
    color: #94a3b8;
    margin-bottom: .7rem;
}

.kw-pwr-assurances li:last-child {
    margin-bottom: 0;
}

.kw-pwr-assurances i {
    color: #10b981;
    font-size: .8rem;
    margin-top: .28rem;
    flex: 0 0 auto;
}

/* ── Étapes en version compacte (mobile, au-dessus du formulaire) ────────── */

.kw-pwr-steps-mobile {
    display: none;
    align-items: center;
    gap: .5rem;
    margin: 0 0 2rem;
}

.kw-pwr-mstep {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: #e2e8f0;
    transition: background .25s ease;
}

.kw-pwr-mstep.is-done,
.kw-pwr-mstep.is-current {
    background: #E89548;
}

.kw-pwr-mstep-text {
    font-size: .8rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    margin-left: .35rem;
}

/* ── En-tête de chaque écran ────────────────────────────────────────────── */

.kw-pwr-head {
    margin-bottom: 2rem;
}

.kw-pwr-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: rgba(232, 149, 72, .1);
    color: #E89548;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.kw-pwr-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.5px;
    margin: 0 0 .5rem;
    line-height: 1.2;
}

.kw-pwr-sub {
    font-size: .975rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.kw-pwr-sub strong {
    color: #334155;
    font-weight: 600;
}

/* ── Exigences du mot de passe, cochées en direct ────────────────────────── */

.kw-pwr-req {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
}

.kw-pwr-req-title {
    font-size: .82rem;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 .75rem;
}

.kw-pwr-req ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem .9rem;
}

.kw-pwr-req li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: #94a3b8;
    line-height: 1.4;
    transition: color .2s ease;
}

.kw-pwr-req li i {
    font-size: .7rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #ffffff;
    flex: 0 0 16px;
    transition: all .2s ease;
}

.kw-pwr-req li.is-met {
    color: #059669;
}

.kw-pwr-req li.is-met i {
    background: #10b981;
}

/* Le critère de longueur est le seul qui bloque l'envoi : il doit se
   distinguer des trois autres, purement indicatifs. */
.kw-pwr-req-tag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #a26832;
    background: rgba(232, 149, 72, .14);
    border-radius: 5px;
    padding: .1rem .35rem;
    margin-left: .35rem;
    white-space: nowrap;
}

.kw-pwr-req li.is-met .kw-pwr-req-tag {
    color: #059669;
    background: rgba(16, 185, 129, .12);
}

.dark-mode .kw-pwr-req-tag {
    color: #f0a05e;
    background: rgba(232, 149, 72, .18);
}

/* ── Jauge de force native de WHMCS, restylée ───────────────────────────── */

.kw-pwr-strength {
    margin-bottom: 1.5rem;
}

.kw-pwr-strength-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: .82rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: .5rem;
}

.kw-pwr-strength #passwordStrengthBar,
.kw-pwr-strength .progress {
    height: 6px;
    border-radius: 6px;
    background: #e2e8f0;
    overflow: hidden;
    margin-bottom: 0 !important;
    box-shadow: none;
}

.kw-pwr-strength .progress-bar {
    border-radius: 6px;
    transition: width .3s ease, background-color .3s ease;
}

/* La jauge native est précédée d'un <br> et suivie d'une alerte « conseils »
   redondante avec la liste d'exigences : on les neutralise ici plutôt que de
   modifier l'include partagé, utilisé ailleurs. */
.kw-pwr-strength br,
.kw-pwr-strength .alert {
    display: none;
}

/* Message de non-correspondance écrit par le JS natif dans #inputNewPassword2Msg */
#inputNewPassword2Msg p {
    font-size: .85rem;
    color: #dc2626;
    margin: .5rem 0 0;
}

.kw-pwr-match {
    display: none;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: #059669;
    font-weight: 500;
    margin-top: .5rem;
}

.kw-pwr-match.is-visible {
    display: flex;
}

/* ── Bouton désactivé ───────────────────────────────────────────────────── */

.kw-btn-login[disabled] {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.kw-btn-login[disabled]:hover {
    background: linear-gradient(135deg, #E89548 0%, #d97706 100%);
    box-shadow: none;
    transform: none;
}

/* ── Lien de retour ─────────────────────────────────────────────────────── */

.kw-pwr-back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    transition: color .2s ease;
}

.kw-pwr-back:hover {
    color: #E89548;
    text-decoration: none;
}

.kw-pwr-foot {
    text-align: center;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.kw-pwr-help {
    font-size: .85rem;
    color: #94a3b8;
    margin: .85rem 0 0;
}

.kw-pwr-help a {
    color: #E89548;
    font-weight: 600;
    text-decoration: none;
}

.kw-pwr-help a:hover {
    text-decoration: underline;
}

/* ── Écran de confirmation ──────────────────────────────────────────────── */

.kw-pwr-success {
    text-align: center;
}

.kw-pwr-success-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(16, 185, 129, .1);
    color: #10b981;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: kwPwrPop .4s cubic-bezier(.2, .9, .3, 1.3) both;
}

@keyframes kwPwrPop {
    from { transform: scale(.7); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .kw-pwr-success-icon { animation: none; }
    .kw-pwr-step-dot,
    .kw-pwr-req li,
    .kw-pwr-req li i { transition: none; }
}

.kw-pwr-success-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 .65rem;
    letter-spacing: -.4px;
}

.kw-pwr-success-text {
    font-size: .975rem;
    color: #64748b;
    line-height: 1.65;
    margin: 0 0 1.75rem;
}

.kw-pwr-success-text a {
    color: #E89548;
    font-weight: 600;
}

/* Variante « courriel envoyé » : l'attente n'est pas un aboutissement, la
   couleur ne doit pas dire le contraire. */
.kw-pwr-success-icon--sent {
    background: rgba(232, 149, 72, .12);
    color: #E89548;
}

.kw-pwr-hint {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    text-align: left;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: .85rem 1rem;
    font-size: .875rem;
    color: #64748b;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

.kw-pwr-hint i {
    color: #E89548;
    margin-top: .2rem;
    flex: 0 0 auto;
}

.dark-mode .kw-pwr-hint {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

/* ── Alerte d'erreur ────────────────────────────────────────────────────── */

.kw-pwr-error {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: .9rem 1rem;
    font-size: .9rem;
    color: #b91c1c;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.kw-pwr-error i {
    margin-top: .15rem;
    flex: 0 0 auto;
}

/* ── Question de sécurité ───────────────────────────────────────────────── */

.kw-pwr-question {
    background: #f8fafc;
    border-left: 3px solid #E89548;
    border-radius: 0 12px 12px 0;
    padding: .9rem 1.1rem;
    font-size: .975rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.5;
    margin-bottom: 1.1rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .kw-pwr-steps-mobile {
        display: flex;
    }

    .kw-pwr-req ul {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .kw-pwr-title {
        font-size: 1.45rem;
    }

    .kw-pwr-icon {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
        border-radius: 15px;
    }

    .kw-pwr-mstep-text {
        display: none;
    }
}

/* ── Sens de lecture droite-à-gauche (arabe) ────────────────────────────── */

.kw-rtl .kw-pwr-step:not(:last-child)::before {
    left: auto;
    right: 13px;
}

.kw-rtl .kw-pwr-question {
    border-left: 0;
    border-right: 3px solid #E89548;
    border-radius: 12px 0 0 12px;
}

/* ── Mode sombre ────────────────────────────────────────────────────────── */

.dark-mode .kw-pwr-title,
.dark-mode .kw-pwr-success-title {
    color: #f1f5f9;
}

.dark-mode .kw-pwr-sub,
.dark-mode .kw-pwr-success-text,
.dark-mode .kw-pwr-strength-label,
.dark-mode .kw-pwr-req-title {
    color: #94a3b8;
}

.dark-mode .kw-pwr-sub strong {
    color: #cbd5e1;
}

.dark-mode .kw-pwr-req,
.dark-mode .kw-pwr-question {
    background: #1e293b;
    border-color: #334155;
}

.dark-mode .kw-pwr-question {
    color: #f1f5f9;
    border-left-color: #E89548;
}

.dark-mode .kw-pwr-req li i,
.dark-mode .kw-pwr-strength #passwordStrengthBar,
.dark-mode .kw-pwr-strength .progress {
    background: #334155;
}

.dark-mode .kw-pwr-foot {
    border-top-color: #334155;
}

.dark-mode .kw-pwr-error {
    background: rgba(185, 28, 28, .12);
    border-color: rgba(248, 113, 113, .35);
    color: #fca5a5;
}