.role-select{
    display:flex;
    gap:15px;
    margin-top:12px;
}

.role-item{
    flex:1;
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 18px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    cursor:pointer;
    transition:all .2s ease;
    background:#fff;
    font-size:16px;
    font-weight:500;
}

.role-item:hover{
    border-color:#0d6efd;
}

.role-item input[type="radio"]{
    width:18px;
    height:18px;
    margin:0;
}

.role-item:has(input:checked){
    border-color:#0d6efd;
    background:#f0f7ff;
}

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline;
}

.htmx-request .default-text {
    display: none;
}

/* -------------------------------------------------------
 * Required field
 * ------------------------------------------------------- */
label.required::after{
    content:" *";
    color:#dc3545;
    font-weight:700;
}


/* -------------------------------------------------------
 * Password visibility toggle
 * ------------------------------------------------------- */
.ip-field.password-field{
    position:relative;
}

.ip-field.password-field .form-control{
    padding-right:48px;
}

.password-toggle{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    border:0;
    background:transparent;
    padding:0;
    margin:0;
    color:#6b7280;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.password-toggle:hover{
    color:#111827;
}