/**
 * Customer registration form styles
 * 
 * Only keeping essential styles that can't be implemented with Tailwind utility classes
 */

/* Image Upload Styling - These are dynamic styles needed for JS interaction */
#profile-drop-zone {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--wp--preset--color--white);
    border-radius: 50%; /* Ensure perfect circle */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

#profile-drop-zone.drag-over {
    background-color: rgba(249, 115, 22, 0.1);
    border-color: var(--fip-primary);
}

#profile-preview {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Field Error Styling */
.field-error.visible {
    display: block;
}

.field-error-input {
    border-color: var(--fip-danger) !important;
}

/* Password strength meter */
.password-strength-bar {
    margin-top: 0.5rem;
}

.password-strength-progress {
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* Country code select */
.country_code_select option {
    font-size: 0.875rem;
}

/* Animation for loading spinner */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}