.validField {
    border-color: var(--bs-success-border-subtle);
}

.invalidField {
    border: 5px var(--bs-danger-border-subtle) solid;
}

/* Cropper circular overlay for avatar cropping */
.cropper-circular .cropper-view-box {
    border-radius: 50% !important;
    outline: none !important;
    overflow: hidden !important;
    box-shadow: 0 0 0 2px rgba(51, 153, 255, 0.75) !important;
}

.cropper-circular .cropper-face {
    border-radius: 50% !important;
    background-color: transparent !important;
}

/* Dark overlay outside the circle */
.cropper-circular .cropper-crop-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Hide default modal overlay since we use circular one */
.cropper-circular .cropper-modal {
    background-color: transparent !important;
}

/* Keep resize handles visible */
.cropper-circular .cropper-point {
    z-index: 1;
}

.cropper-circular .cropper-line {
    z-index: 1;
}