/* grimba-register.css */
.grimba-register-wrap { max-width: 720px; margin: 0 auto; padding: 18px; border-radius: 8px; background: #fff; border: 1px solid #e6e6e6; font-family: inherit; }
.gr-steps-indicator { display:flex; gap:10px; margin-bottom:14px; align-items:center; flex-wrap:wrap; }
.gr-step-square { width:64px; height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:8px; background:#white; border:2px solid #7FB1CA; cursor:pointer; text-align:center; padding:6px; }
.gr-step-square span { display:block; }
.gr-step-square.active { background:#7FB1CA!important; color:#fff; border-color:#7FB1CA; }
.gr-step-label { font-size:11px; margin-top:4px; line-height:1.1; }
.gr-step { display:none; }
.gr-step.active { display:block; }
.gr-step h3 { margin-top:0; margin-bottom:12px; font-size:18px; }
.gr-field { margin-bottom:12px; }
.gr-field label { display:block; font-weight:600; margin-bottom:6px; }
.gr-field input[type="text"], .gr-field input[type="email"], .gr-field input[type="password"], .gr-field select { width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; box-sizing:border-box; }
.gr-form-nav { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:8px; }
.gr-form-nav .gr-prev, .gr-form-nav .gr-next, .gr-form-nav .gr-submit { padding:10px 14px; border-radius:6px; border:0; cursor:pointer; background:#2b8cff; color:#fff; }
.gr-form-nav .gr-prev { background:#f2f2f2; color:#333; }
.gr-msg { display:none; margin-top:12px; padding:10px; border-radius:6px; }
.gr-msg.gr-success { background:#e6ffed; border:1px solid #8fe6a7; color:#176a2e; display:block; }
.gr-msg.gr-error { background:#fff0f0; border:1px solid #e6a7a7; color:#802020; display:block; }
.gr-error { border-color:#e05e5e !important; }



.gr-step-square {
    width: 100%;
}

.gr-steps-indicator {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: nowrap!important;
    flex-direction: row!important;
}

.gr-step.active h3 {
    text-align: center;
    margin-top: 16px;
    margin-bottom: 16px;
    font-family: 'Yantramanav' !important;
    color: #474747;
}

.gr-field label {
    font-family: 'Imprima'!important;
    font-weight: 500!important;
    color:#474747!important;
    font-size: 14px !important;
}

.grimba-register-wrap {
    box-shadow: 0px 4px 15px 5px rgba(0, 0, 0, 0.1);
    border: none !important;
}

.gr-field {
    margin-bottom: 16px!important;
}

input{
border:solid 2px #7FB1CA!important;
border-radius:4px!important;
} 

input:focus{
outline:none!important;
}

.gr-form-nav {
    margin-top: 24px !important;
}

.gr-form-nav button {
background:#7FB1CA!important
}

.gr-step.active {
    margin-top: 24px!important;
}

@media (max-width: 480px) {
    span.gr-step-label {
        font-size: 8px;
    }
}

span.required {
    color: red !important;
    font-weight: 400;
    font-size: 16px;
}

select {
    border: solid 2px #7FB1CA!important;
    border-radius: 4px!important;
}

/* ==========================
   PASSWORD FIELD
========================== */

.gr-password-field {
    position: relative;
}

.gr-password-wrap {
    position: relative;
}

.gr-password-wrap input {
    width: 100%;
    padding-right: 42px; /* espace pour l’œil */
}

.gr-toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    background: transparent;
    border: none!important;
    padding: 0;
    margin: 0;

    color: #666;
    cursor: pointer;
}

.gr-toggle-password:hover {
    color: #000;
}

.gr-toggle-password:focus {
    outline: none;
}

/* SVG inside */
.gr-toggle-password svg {
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* Mobile touch comfort */
@media (max-width: 768px) {
    .gr-toggle-password {
        width: 32px;
        height: 32px;
        right: 6px;
    }
}

.gr-password-wrap input:placeholder-shown + .gr-toggle-password {
    opacity: 0.4;
    pointer-events: none;
}

button.gr-toggle-password {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
}

button.gr-toggle-password:hover {
    background: transparent !important;
}


button.gr-toggle-password:focus {
    background: transparent !important;
}

button.gr-toggle-password {
    color: #7FB1CA !important;
}

.gr-birthdate-selects {
    display: flex;
    gap: 8px;
    flex-direction: row;
    align-content: center;
}

/* Photo de profil à l'inscription (facultative) */
.gr-photo-field input[type="file"] {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px dashed #E5E7EB;
    border-radius: 8px;
    background: #FBFBFB;
    cursor: pointer;
}

.gr-photo-field input[type="file"]:focus-visible {
    outline: 2px solid #0D5C63;
    outline-offset: 2px;
}

.gr-photo-field small {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #6B7280;
}

/* =========================================================================
   Vérification du numéro par SMS
   ========================================================================= */

.gr-sms-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.gr-sms-row input {
    flex: 1 1 auto;
    min-width: 0;
    letter-spacing: .18em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.gr-sms-send {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid #0D5C63;
    border-radius: 4px;
    background: transparent;
    color: #0D5C63;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.gr-sms-send:hover:not(:disabled),
.gr-sms-send:focus-visible:not(:disabled) {
    background: #0D5C63;
    color: #FFFFFF;
}

.gr-sms-send:disabled {
    opacity: .55;
    cursor: default;
}

.gr-sms-feedback {
    margin: 6px 0 0;
    font-size: 13px;
    min-height: 1em;
    color: #6B7280;
}

.gr-sms-feedback[data-state="ok"] {
    color: #0F766E;
}

.gr-sms-feedback[data-state="error"] {
    color: #B91C1C;
}