/* ==========================================================================
   H2J Forms -- Custom Forgot Password styles (v1.5.10 LOT 14)
   Centered card layout for /mot-de-passe-oublie-h2j.

   DOCTRINE : aligné 100% sur h2jforms-login.css v1.5.9 (variables preset CUBX
   canoniques --cubx-bg / --cubx-bg-card / --cubx-border / --cubx-accent /
   --cubx-text / --cubx-text-muted, boutons --h2j-btn-bg / --h2j-btn-text /
   --h2j-btn-hover). Changer un preset BO -> cette surface change avec login
   et register.
   ========================================================================== */

.h2jforms-forgot-page {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px 64px;
    min-height: 60vh;
    background: transparent;
}

.h2jforms-forgot-card {
    width: 100%;
    max-width: 440px;
    padding: 32px 28px;
    background: var(--cubx-bg-card, var(--h2j-bg-card, #ffffff));
    border: 1px solid var(--cubx-border, var(--h2j-border, #e5e5e5));
    border-radius: var(--cubx-radius-lg, var(--h2j-radius, 12px));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.h2jforms-forgot-description {
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cubx-text-muted, var(--h2j-text-light, #6b6b6b));
    text-align: center;
}

.h2jforms-forgot-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.h2jforms-forgot-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.h2jforms-forgot-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--cubx-text, var(--h2j-text, #1a1a1a));
}

.h2jforms-forgot-required {
    color: var(--cubx-accent, var(--h2j-accent, #ec4899));
    margin-left: 2px;
}

.h2jforms-forgot-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--cubx-text, var(--h2j-text, #1a1a1a));
    background: var(--cubx-bg, var(--h2j-bg, #ffffff));
    border: 1px solid var(--cubx-border, var(--h2j-border, #d1d5db));
    border-radius: var(--cubx-radius-input, var(--cubx-radius-md, 8px));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.h2jforms-forgot-input:focus {
    outline: none;
    border-color: var(--cubx-accent, var(--h2j-accent, #ec4899));
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.12);
}

.h2jforms-forgot-input::placeholder {
    color: var(--cubx-text-muted, var(--h2j-text-light, #9ca3af));
    opacity: 0.8;
}

.h2jforms-forgot-actions {
    margin-top: 8px;
}

.h2jforms-forgot-submit {
    width: 100%;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    /* Bouton CTA -- preset CUBX (variables --h2j-btn-*). Cf. h2jforms-login.css v1.5.9. */
    color: var(--h2j-btn-text, #ffffff);
    background: var(--h2j-btn-bg, var(--h2j-accent, #d63384));
    border: 1px solid var(--h2j-btn-bg, var(--h2j-accent, #d63384));
    border-radius: var(--h2j-radius, var(--cubx-radius-md, 8px));
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.05s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.h2jforms-forgot-submit:hover {
    background: var(--h2j-btn-hover, var(--h2j-accent, #b02671));
    border-color: var(--h2j-btn-hover, var(--h2j-accent, #b02671));
    filter: brightness(0.96);
}

.h2jforms-forgot-submit:active {
    transform: translateY(1px);
}

.h2jforms-forgot-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 13px;
}

.h2jforms-forgot-link {
    color: var(--cubx-accent, var(--h2j-accent, #ec4899));
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease, filter 0.15s ease;
    display: inline-flex;
    align-items: center;
}

.h2jforms-forgot-link:hover {
    color: var(--cubx-accent, var(--h2j-accent, #db2777));
    text-decoration: underline;
    filter: brightness(0.92);
}

/* ==========================================================================
   v1.5.11 -- Errors block (validation errors during POST handling)
   Couleurs danger volontairement hors preset CUBX : semantique universelle
   rouge = erreur (cf. doctrine h2jforms-login.css v1.5.9).
   ========================================================================== */

.h2jforms-forgot-errors {
    margin: 0 0 20px;
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--cubx-radius-md, 8px);
    color: #b91c1c;
    font-size: 13px;
    line-height: 1.45;
}

.h2jforms-forgot-errors ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.h2jforms-forgot-errors li + li {
    margin-top: 4px;
}

/* ==========================================================================
   v1.5.11 -- Flash success block (after successful POST + PRG redirect)
   Affiche un message convivial dans la meme card que le form, avec une icone
   Material Design 'mark_email_read' en accent preset CUBX. URL stable :
   /mot-de-passe-oublie-h2j?sent=1.
   ========================================================================== */

.h2jforms-forgot-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 16px 8px;
}

.h2jforms-forgot-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 4px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12); /* success-tinted bg (semantique universelle) */
    color: #10b981; /* success green (semantique universelle) */
}

.h2jforms-forgot-success-icon .material-icons {
    font-size: 40px;
    line-height: 1;
}

.h2jforms-forgot-success-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--cubx-text, var(--h2j-text, #1a1a1a));
}

.h2jforms-forgot-success-message {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cubx-text-muted, var(--h2j-text-light, #6b6b6b));
    max-width: 360px;
}

/* Responsive : on very narrow screens, collapse the card padding */
@media (max-width: 480px) {
    .h2jforms-forgot-page {
        padding: 24px 12px 48px;
    }
    .h2jforms-forgot-card {
        padding: 24px 18px;
    }
}