/*!
 * H2J Forms — Custom Register styles (v1.5.0 LOT 12)
 *
 * Rendered by views/templates/front/h2jforms_register.tpl at /inscription-h2j.
 *
 * Uses CUBX design tokens with safe fallbacks so the form renders correctly
 * on any theme. Scope : .h2jforms-register-* class prefix to avoid collisions
 * with the native PS authentication form or the h2jforms login surface.
 *
 * @author    H2J Ecosystem <info@2klove.fr>
 * @copyright 2024-2026 H2J sas RCS 978391720
 * @license   Commercial license
 */

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

.h2jforms-register-page {
    display: flex;
    justify-content: center;
    padding: 32px 16px;
    min-height: 60vh;
}

.h2jforms-register-card {
    width: 100%;
    max-width: 560px;
    background: var(--cubx-bg-card, var(--h2j-bg-card, #ffffff));
    border-radius: var(--cubx-radius, var(--h2j-radius, 12px));
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 32px 28px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .h2jforms-register-card {
        padding: 40px 36px;
    }
}

.h2jforms-register-title {
    font-family: var(--cubx-font-primary, var(--h2j-font-family, 'Inter'), sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cubx-text, var(--h2j-text, #1a1a1a));
    margin: 0 0 8px;
    text-align: center;
}

/* v1.5.5 polish : the page title is already rendered in the page header
   (hero or breadcrumb area), so we hide the duplicate h1 inside the card
   while keeping it accessible to screen readers (sr-only pattern). */
.h2jforms-register-title--hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.h2jforms-register-description {
    font-size: 0.95rem;
    color: var(--cubx-text-muted, var(--h2j-text-light, #6b7280));
    margin: 0 0 24px;
    text-align: center;
}

/* ============================================================================
   ERRORS
   ========================================================================= */

.h2jforms-register-errors {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 20px;
    color: #b91c1c;
}

.h2jforms-register-errors ul {
    margin: 0;
    padding-left: 20px;
}

.h2jforms-register-errors li {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ============================================================================
   FORM ROWS + GRID (v1.5.5 polish UAT — compact + full-width)
   Note : order properties below physically move the Gender block (rendered
   ABOVE First/Last names in the TPL) to appear AFTER the names visually.
   We keep the TPL semantic order natural (gender is a property of the
   identity defined by names) and let flexbox reorder for the visual layout.
   ========================================================================= */

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

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

/* v1.5.5 — Visual reorder via flexbox `order`. The HTML order remains semantically
   natural (gender after firstname, password after email, etc.), and CSS reorders
   only the visual presentation per UAT feedback :
   1. Names (firstname + lastname grid)
   2. Gender cards
   3. Birthday (full-width, standalone)
   4. Phone (full-width, standalone, BEFORE Email per UAT)
   5. Email
   6. Password
   7. Newsletter + CGV checkboxes
   8. Anti-bot block (math + captcha widget)
   9. Submit button
   10. Sign-in links
*/
.h2jforms-register-grid--2 {
    order: 1;
}
.h2jforms-register-row--gender {
    order: 2;
}
.h2jforms-register-row--birthday {
    order: 3;
    position: relative; /* ancre pour .h2jforms-register-required--field (le * du champ) */
}
.h2jforms-register-row--phone {
    order: 4;
}
.h2jforms-register-row--email {
    order: 5;
}
.h2jforms-register-row--password {
    order: 6;
}
.h2jforms-register-checkboxes {
    order: 7;
}
.h2jforms-register-antibot {
    order: 8;
}
.h2jforms-register-actions {
    order: 9;
}
.h2jforms-register-links {
    order: 10;
}

.h2jforms-register-grid {
    display: grid;
    gap: 16px;
}

.h2jforms-register-grid--2 {
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .h2jforms-register-grid--2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================================
   LABELS + INPUTS
   ========================================================================= */

.h2jforms-register-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cubx-text, var(--h2j-text, #374151));
    margin: 0;
}

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

/* v1.5.13 — Marqueur * du champ birthday. Le champ est rendu via H2JDatePicker
   (markup tiers, pas de placeholder ou on pourrait coller le *), donc on place
   l'asterisque en absolu dans le coin haut-droit du row (le row a deja
   position:relative, cf. bloc FORM ROWS plus haut). Pour gender (radiogroup)
   et phone (input type=tel) le * passe par l'aria-label / le placeholder,
   pas besoin de cette variante. */
.h2jforms-register-required--field {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

.h2jforms-register-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 1rem;
    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, 8px);
    transition: border-color 120ms ease, box-shadow 120ms ease;
    font-family: inherit;
}

.h2jforms-register-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-register-input::placeholder {
    color: var(--cubx-text-muted, var(--h2j-text-light, #9ca3af));
    opacity: 0.8;
}

/* v1.5.5 polish UAT — unify the background of Birthday (rendered via
   H2JDatePicker which uses its own classes) and Phone (after h2jphone-front.js
   wraps it with [Flag][+dial][Local]) to match the cream/yellow background of
   the native text inputs (First name, Last name, Email, Password). The CUBX
   theme drives this color via --cubx-bg ; we just force-inject it on these
   3rd-party components that may render their own neutral white otherwise. */
.h2jforms-register-row--birthday .h2j-datepicker,
.h2jforms-register-row--birthday .h2j-datepicker input,
.h2jforms-register-row--birthday input[type="text"],
.h2jforms-register-row--birthday input[type="date"] {
    background: var(--cubx-bg, var(--h2j-bg, #fef8e9)) !important;
    border: 1px solid var(--cubx-border, var(--h2j-border, #d1d5db)) !important;
    border-radius: var(--cubx-radius-input, 8px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px;
}

.h2jforms-register-row--phone input[type="tel"],
.h2jforms-register-row--phone .h2jphone-wrap,
.h2jforms-register-row--phone .h2jphone-input {
    background: var(--cubx-bg, var(--h2j-bg, #fef8e9)) !important;
}
.h2jforms-register-row--phone {
    width: 100%;
}

/* v1.5.5 polish UAT cont. — align the country-code selector (flag + dial code
   pill rendered by h2jphone-front.js on the LEFT of the phone input) with the
   same cream background as the rest of the form.

   ROOT CAUSE : h2jphone-front.css ligne ~49 declare
     .h2jphone-flag-btn { background: var(--h2j-bg-light, #f8fafc); }
   Cette variable est resolue en lavande par le theme CUBX (ou son fallback
   #f8fafc rendu lavande par cumul). Les selecteurs .h2jphone-country* que
   j'avais cibles n'existent meme pas dans le markup genere par h2jphone-front.js
   (qui produit .h2jphone-flag-btn comme nom de classe racine). On cible donc
   directement la VRAIE classe racine du bouton avec specificity superieure
   (descendance .h2jforms-register-row--phone) pour forcer la teinte creme. */
.h2jforms-register-row--phone .h2jphone-flag-btn,
.h2jforms-register-row--phone .h2jphone-flag-btn:hover,
.h2jforms-register-row--phone .h2jphone-flag-btn:focus {
    background: var(--cubx-bg, #fef8e9) !important;
}

/* Le wrapper parent .h2jphone-input a aussi un bg lavande issu de
   --cubx-input-bg / fallback #fff cumule avec une teinte CUBX. On force
   aussi en creme pour eviter une bordure visible entre le wrap et le btn. */
.h2jforms-register-row--phone .h2jphone-input {
    background: var(--cubx-bg, #fef8e9) !important;
}

/* Anciennes regles preventives gardees au cas ou h2jphone change ses noms
   de classes dans le futur (defense en profondeur). */
.h2jforms-register-row--phone .h2jphone-country,
.h2jforms-register-row--phone .h2jphone-country-selector,
.h2jforms-register-row--phone .h2jphone-flag,
.h2jforms-register-row--phone .h2jphone-dial,
.h2jforms-register-row--phone .h2jphone-prefix,
.h2jforms-register-row--phone .h2jphone-cc,
.h2jforms-register-row--phone .h2jphone-selector,
.h2jforms-register-row--phone .iti__selected-flag,
.h2jforms-register-row--phone .iti__country-list {
    background: rgba(254, 248, 233, 0.55) !important;
    border-color: var(--cubx-border, var(--h2j-border, #d1d5db)) !important;
}

/* ============================================================================
   GENDER CARDS (v1.5.5 polish UAT — reduced height to match input height)
   No more title label "Gender" — the visual is self-explanatory via icons.
   2 cards side by side, same height as text inputs (~44px). Stored values
   stay native PS Mr/Mrs (id_gender 1/2).
   ========================================================================= */

.h2jforms-register-gender-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.h2jforms-register-gender-card {
    position: relative;
    cursor: pointer;
    display: block;
}

/* Hide the native radio input visually but keep it accessible to screen readers */
.h2jforms-register-gender-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.h2jforms-register-gender-card-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--cubx-bg, var(--h2j-bg, #ffffff));
    border: 1px solid var(--cubx-border, var(--h2j-border, #e5e7eb));
    border-radius: var(--cubx-radius-input, 8px);
    transition: border-color 160ms ease, background-color 160ms ease, transform 80ms ease;
    min-height: 44px;
    box-sizing: border-box;
}

.h2jforms-register-gender-card .material-icons {
    font-size: 22px;
    line-height: 1;
}

.h2jforms-register-gender-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cubx-text, var(--h2j-text, #1a1a1a));
}

/* Visual differentiation : Male = blue, Female = pink. The colored icon
   gives an immediate visual cue even before checking. The cards stay
   neutral border + bg until selected. */
.h2jforms-register-gender-card:nth-child(1) .material-icons {
    color: #3b82f6;
}
.h2jforms-register-gender-card:nth-child(2) .material-icons {
    color: #ec4899;
}

/* Hover state — subtle lift + tint to the card's gender color */
.h2jforms-register-gender-card:hover .h2jforms-register-gender-card-inner {
    transform: translateY(-1px);
}
.h2jforms-register-gender-card:nth-child(1):hover .h2jforms-register-gender-card-inner {
    border-color: #93c5fd;
    background: rgba(59, 130, 246, 0.04);
}
.h2jforms-register-gender-card:nth-child(2):hover .h2jforms-register-gender-card-inner {
    border-color: #f9a8d4;
    background: rgba(236, 72, 153, 0.04);
}

/* Selected state — border thickness stays 1px (same as inputs) but with stronger color + tinted bg */
.h2jforms-register-gender-card input[type="radio"]:checked + .h2jforms-register-gender-card-inner {
    border-color: var(--cubx-accent, var(--h2j-accent, #ec4899));
    background: rgba(212, 175, 55, 0.08);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
}
.h2jforms-register-gender-card:nth-child(1) input[type="radio"]:checked + .h2jforms-register-gender-card-inner {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.20);
}
.h2jforms-register-gender-card:nth-child(2) input[type="radio"]:checked + .h2jforms-register-gender-card-inner {
    border-color: #ec4899;
    background: rgba(236, 72, 153, 0.08);
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.20);
}

/* Focus accessibility ring (keyboard nav) */
.h2jforms-register-gender-card input[type="radio"]:focus-visible + .h2jforms-register-gender-card-inner {
    outline: 2px solid var(--cubx-accent, var(--h2j-accent, #ec4899));
    outline-offset: 2px;
}

/* ============================================================================
   PASSWORD : INPUT + SHOW/HIDE + GENERATE + STRENGTH METER + RULES
   ========================================================================= */

.h2jforms-register-password-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
}

.h2jforms-register-password-wrap .h2jforms-register-input--password {
    flex: 1 1 auto;
    padding-right: 80px;
}

.h2jforms-register-password-toggle,
.h2jforms-register-password-generate {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cubx-text-muted, var(--h2j-text-light, #6b7280));
    border-radius: 6px;
    transition: color 120ms ease, background 120ms ease;
}

.h2jforms-register-password-toggle {
    right: 8px;
}

.h2jforms-register-password-generate {
    right: 44px;
}

.h2jforms-register-password-toggle:hover,
.h2jforms-register-password-generate:hover {
    color: var(--cubx-accent, var(--h2j-accent, #ec4899));
    background: rgba(236, 72, 153, 0.08);
}

.h2jforms-register-password-toggle .material-icons,
.h2jforms-register-password-generate .material-icons {
    font-size: 20px;
}

/* Strength meter */
.h2jforms-register-password-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.h2jforms-register-password-meter-track {
    flex: 1 1 auto;
    height: 6px;
    background: var(--cubx-border, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
}

.h2jforms-register-password-meter-fill {
    height: 100%;
    width: 0%;
    background: #ef4444; /* default red, overridden by data-level */
    transition: width 240ms ease, background-color 240ms ease;
    border-radius: 3px;
}

.h2jforms-register-password-meter-fill[data-level="0"] { width: 0%;   background: transparent; }
.h2jforms-register-password-meter-fill[data-level="1"] { width: 20%;  background: #ef4444; }
.h2jforms-register-password-meter-fill[data-level="2"] { width: 40%;  background: #f97316; }
.h2jforms-register-password-meter-fill[data-level="3"] { width: 60%;  background: #eab308; }
.h2jforms-register-password-meter-fill[data-level="4"] { width: 80%;  background: #84cc16; }
.h2jforms-register-password-meter-fill[data-level="5"] { width: 100%; background: #10b981; }

.h2jforms-register-password-meter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cubx-text-muted, var(--h2j-text-light, #6b7280));
    min-width: 80px;
    text-align: right;
}

/* v1.5.5 — Legend under the strength bar : hint pointing at the sparkle
   generate button inside the password input wrap. Compact, gold-accented. */
.h2jforms-register-password-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    padding: 6px 10px;
    background: rgba(212, 175, 55, 0.06);
    border-left: 2px solid var(--cubx-accent, var(--h2j-accent, #d4af37));
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--cubx-text-muted, var(--h2j-text-light, #6b7280));
    font-style: italic;
}
.h2jforms-register-password-legend .material-icons {
    font-size: 16px;
    color: var(--cubx-accent, var(--h2j-accent, #d4af37));
    flex: 0 0 auto;
}

/* Rules checklist (v1.5.5 — max 2 rows, 3 cols on desktop, 2 cols on mobile) */
.h2jforms-register-password-rules {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

@media (min-width: 500px) {
    .h2jforms-register-password-rules {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.h2jforms-register-password-rules li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--cubx-text-muted, var(--h2j-text-light, #6b7280));
    transition: color 200ms ease;
}

.h2jforms-register-password-rules li .material-icons {
    font-size: 16px;
    transition: color 200ms ease;
}

.h2jforms-register-password-rules li.is-valid {
    color: #10b981;
}

.h2jforms-register-password-rules li.is-valid .material-icons {
    color: #10b981;
}

/* ============================================================================
   CHECKBOXES (newsletter + CGV)
   ========================================================================= */

.h2jforms-register-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 0;
}

.h2jforms-register-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.h2jforms-register-checkbox {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--cubx-accent, var(--h2j-accent, #ec4899));
    cursor: pointer;
}

.h2jforms-register-checkbox-text {
    flex: 1 1 auto;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--cubx-text, var(--h2j-text, #374151));
}

.h2jforms-register-checkbox-text a {
    color: var(--cubx-accent, var(--h2j-accent, #ec4899));
    text-decoration: underline;
}

/* ============================================================================
   SUBMIT + LINKS
   ========================================================================= */

.h2jforms-register-actions {
    margin-top: 12px;
}

.h2jforms-register-submit {
    width: 100%;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    /* v1.5.9 — Bouton CTA aligne sur le preset CUBX selectionne dans BO
     * H2J Ecosystem > Design System > Couleurs (parmi les 20 presets +
     * CUSTOM). Variables --h2j-btn-bg / --h2j-btn-text / --h2j-btn-hover
     * injectees en :root par H2JColors::generateCSSVariables() au boot.
     * Changer de preset BO -> le bouton change de couleur sans toucher au
     * code. Fallback rose pour theme non-CUBX. */
    background: var(--h2j-btn-bg, var(--cubx-accent, var(--h2j-accent, #ec4899)));
    color: var(--h2j-btn-text, #ffffff);
    border: 1px solid var(--h2j-btn-bg, var(--cubx-accent, var(--h2j-accent, #ec4899)));
    border-radius: var(--h2j-radius, var(--cubx-radius-button, 8px));
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.h2jforms-register-submit:hover {
    background: var(--h2j-btn-hover, var(--cubx-accent-hover, #db2777));
    border-color: var(--h2j-btn-hover, var(--cubx-accent-hover, #db2777));
}

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

.h2jforms-register-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.h2jforms-register-links {
    text-align: center;
    font-size: 0.9rem;
    color: var(--cubx-text-muted, var(--h2j-text-light, #6b7280));
    margin-top: 16px;
}

.h2jforms-register-link {
    color: var(--cubx-accent, var(--h2j-accent, #ec4899));
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
}

.h2jforms-register-link:hover {
    text-decoration: underline;
}

/* ============================================================================
   HONEYPOT (off-screen)
   ========================================================================= */

.h2jforms-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================================
   ANTI-BOT WRAP (captcha/math/etc.)
   ========================================================================= */

.h2jforms-register-antibot {
    margin: 8px 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.h2jforms-register-antibot:empty {
    display: none;
}

/* Center the Cloudflare Turnstile / reCAPTCHA / hCaptcha widget */
.h2jforms-register-antibot > div {
    margin: 0 auto !important;
}

/* v1.5.5 — Override the inline bg on the math challenge block injected by
   H2JFormGate::injectFields() so it matches the rest of the form (no more
   gray contrasting box that doesn't belong). The bloc still gets a subtle
   accent border-left to signal its security role. */
.h2jforms-register-antibot .h2j-math-challenge {
    background: transparent !important;
    border: 1px solid var(--cubx-border, var(--h2j-border, #e5e7eb)) !important;
    border-left: 3px solid var(--cubx-accent, var(--h2j-accent, #d4af37)) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

.h2jforms-register-antibot .h2j-math-challenge label {
    color: var(--cubx-text, var(--h2j-text, #374151)) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

.h2jforms-register-antibot .h2j-math-challenge input[type="number"] {
    background: var(--cubx-bg-card, var(--h2j-bg-card, #ffffff)) !important;
    border: 1px solid var(--cubx-border, var(--h2j-border, #d1d5db)) !important;
}

/* v1.5.8 — Mobile fix Cloudflare Turnstile width regression :
 * Le wrap .h2jforms-register-antibot est en display:flex + flex-direction:column
 * + align-items:center. Avec align-items:center, les enfants prennent leur
 * largeur intrinseque (pas stretched). Le math challenge a width:100% donc
 * il s'etend a 396px. Mais .cf-turnstile garde la largeur intrinseque 300px
 * de l'iframe Cloudflare — le data-size="flexible" qu'on pose sur le widget
 * n'est pas toujours honore par Turnstile (comportement documente).
 *
 * Fix scope MOBILE uniquement (desktop OK selon validation David) :
 * forcer width:100% sur .cf-turnstile pour qu'il prenne la largeur du wrap
 * antibot (donc aligne sur math-challenge et tous les autres champs).
 * L'iframe enfant suit naturellement avec width:100% du widget Turnstile. */
@media (max-width: 480px) {
    .h2jforms-register-antibot .cf-turnstile {
        width: 100% !important;
    }
    .h2jforms-register-antibot .cf-turnstile iframe {
        width: 100% !important;
    }
}